@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,600,600i,700i,800|Raleway:300,400,600,700,800&display=swap');
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}ol, ul {
list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: ''; content: none;}table {	border-collapse: collapse;	border-spacing: 0;}

body {font-family: 'Montserrat', sans-serif; color: #333333}


/*font-family: 'Raleway', sans-serif;
font-family: 'Montserrat', sans-serif;*/


.clear {clear:both;}
.clear::after {content: "";  clear: both;  display: table;}
.floatR { float: right !important;}
.top50 { padding-top: 50px}



h1,h2,h3,h4,h5 {font-family: 'Raleway', sans-serif;}

h1 {font-size: 60px;}
h2 {font-size: 40px;}
h3 { font-size: 30px; line-height: 1.3}
h4 {font-size: 24px;}
h5 {font-size: 18px; line-height: 1.4}
p { line-height: 1.4;}

.biggerP {font-size: 16px; margin-bottom: 20px; line-height: 1.6}

.uc { text-transform: uppercase}
.b { font-weight: 700}
.sb {font-weight: 600}
.alignc {text-align: center}
.italic { font-style: italic}
.ul {text-decoration: none; position: relative; margin-bottom: 20px; } 
.ul:after {position: absolute; content: ''; height: 2px; border-radius: 2px; bottom: -10px; width: 60px; background:#999999;   margin: 0 auto; left: 0; right: 0;}

.white {color: #FFFFFF}


.col2 { width: 50%; float: left;}

.col50 { width:50%; float:left;}
.col80 { width:80%; float:left}
.col70 { width:70%; float:left}
.col40 { width:40%; float:left}
.col30 { width:30%; float:left}
.col60 { width:60%; float:left}
.col20 { width:20%; float:left}
.col33 { width:33.33%; float:left}


.container {width:1025px; margin:0 auto;}
.spaceM { margin-bottom: 50px;}
.spaceS { margin-bottom: 25px;}

header {background: #FFFFFF; box-shadow: 0 2px 5px rgba(0,0,0,0.1); position: fixed; z-index: 3; width: 100%; height: 77px }
.logoArea img {height: 77px;}
.menuBut {background: #2A80B9; width: 80px; height:60px}
.menuBut span { display: block; width: 25px; height: 3px; margin-bottom: 4px; position: relative; background: #FFFFFF; border-radius: 3px;  z-index: 1;}
.menuArrow {width: 16px; margin-left: 120px;}

#slidx_button {background: #2A80B9; width: 80px; padding:28px 26px ; box-sizing: border-box;}
#slidx_menu {background-color: #FFFFFF;}
#slidx_menu .menu2 li {  font-size: 16px; font-family: 'Montserrat', sans-serif;}
#slidx_menu .menu2 li a { text-decoration: none; padding: 20px;  display: block; text-transform: uppercase; font-weight: 600; color: #333333 }
#slidx_menu .menu2 li a:hover { background: #EEEEEE}

#slidx_menu .menu2 li ul { background: #E0E0E0}
#slidx_menu .menu2 li ul li a { padding-left: 40px;}

.subM { display: none}
.subMActive {display: block; transition: all .3s;}

.inactive{cursor: default;}


.sliderArea { width:100%;}
.sliderArea img { width:100%;}


.tagLine { background:#2A80B9; padding: 30px 0; margin-top: -3px }
.tagLine p { font-size:18px; font-weight: 300; margin-top: 7px}


article {padding: 50px 0}
article p { margin-bottom: 10px; font-size: 14px; line-height: 1.5 ; color: #666666}


.contactDetails p { font-size: 14px}
.contactDetails h4 {line-height: 1.4; margin-top: 30px;}

.starIcon {width: 18px; margin-right: 10px; vertical-align: text-top;}
.arrowEduArea .col33 { position: relative}
.arrowEduArea h5 { position: absolute; top: 28px; left: 70px; color: #FFFFFF; font-size: 22px;}
.arrowEduArea p { font-size: 16px; display: list-item; padding: 5px; list-style-type: square; list-style-position: inside; margin-bottom: 0px;}
.arrowEdu { width: 100%; }


.founder { background:#9AE6FB; padding: 50px 0}
.founder p { font-size: 20px; font-weight: 400}
.founder img {width: 150px; border-radius: 50%; margin: 20px auto; display: block;}
.fname { font-size: 18px; margin-top: 10px;}


.newsEvents { width: 100%; padding: 50px 0}
.thumbnail {background:#333333; border-bottom: 1px solid #707070}
.thumbnail img { width: 100%; display: grid; -webkit-transition: transform  .3s;  transition: transform  .3s;}
.thumbnail:hover img {transform: scale(1.1)}
.thumbnailText {  padding: 20px; box-sizing: border-box; }
.thumbnailText h5 { margin-bottom: 10px}
.thumbnailText a { text-decoration: none; color: #FFFFFF;}
.thumbnailText p { font-weight: 300; font-size: 12px}
.imgThumb {overflow: hidden}
.blogDate { font-size: 14px; margin-top: 15px}


.postThumbOuter { margin: 5px}
.postThumb2 { width: 100%; position: relative; overflow: hidden;  box-sizing: border-box}
.postThumb2 img { width:100%; -webkit-transition: all  .5s;  transition: all  .5s;}
.postThumbText { width:100%; background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%); position: absolute; bottom: 0; display: table-cell; vertical-align: bottom; box-sizing: border-box; height: 80% }
.postThumbText h5 { position: absolute; bottom: 0; padding: 20px; color: #FFFFFF;  }
.postThumbText a {color: #FFFFFF; text-decoration: none; display: block}
.postThumb2:hover img {transform: scale(1.1);} 


.moreC {display: table; align-content: center; margin: 0 auto; background: #0A880D;  margin-top: 50px; -webkit-transition: box-shadow  .2s;  transition: box-shadow  .2s; border-radius: 30px; }
.moreC:hover {box-shadow: -1px 6px 19px rgba(10,136,13,0.25)}
.moreC a { text-decoration: none; color: #FFFFFF; letter-spacing: 1px; padding: 15px 25px; display: block;}



.contentPageTitle { width: 100%; background: #333333 }
.titleArea { padding: 100px 0 20px 0; color: #FFFFFF}
.contentPageTitle h2 { font-size: 40px;}



.biggerP { font-size: 18px;}
article p{font-size: 18px; line-height: 1.7; margin-bottom: 20px;}
article { background: url("../imgs/vf-Logo-content.png") no-repeat left bottom}
.contentInnerL { padding-right: 25px;}
.contentInnerR{ padding-left: 30px;}

.teamDiv { margin: 10px; background: #F4F4F4; box-sizing: border-box; padding: 15px; border-radius: 3px; border: 1px solid #EEEEEE}
.teamDiv h4 {line-height: 1.3; font-size: 20px}
.teamDiv p { margin-bottom: 0; font-size: 14px;}
.teamContact {font-size: 12px; line-height: 1.5; color: #666666; border-top: 1px solid #cccccc; padding-top: 10px; margin-top: 10px}



.event { margin-bottom: 20px; position: relative}
.event img { width: 100%; border-radius: 3px; border: 1px solid #333333}
.event h2 { padding: 10px 0 8px 0; font-size: 30px;}
.event a { text-decoration: none; color: #FFFFFF}
.event p { color: #FFFFFF; margin-bottom: 0}
.date { border: 2px solid #E2E2E2; display: inline-block; padding: 5px 10px;  text-align: center; margin: 5px;}
.date div:nth-child(1) { font-size: 30px; color: #FFFFFF}
.date div:nth-child(2) {font-size: 14px; color: #FFFFFF}
.date div:nth-child(3) {font-size: 16px; color: #FFFFFF}
.eventText { display: inline-block; margin-left: 10px;}
.event a:hover {color: #2A80B9}
.eventTextArea { background: rgba(51,51,51,0.9); position: absolute; bottom: 0; width: 100%; padding: 10px; box-sizing: border-box}



.obj {width: 100%; margin-bottom: 35px;}
.objNumb { font-size: 60px; font-weight: 600; opacity: 0.5; display: inline-block; vertical-align: top; min-width: 90px;}
.obj p {width: 83%; display: inline-block; margin-left: 10px; font-weight: 500; font-size: 20px;}
.obj:nth-child(odd) {}
.obj:nth-child(even) { margin-left: 0;}


.newsLetter {background:#F68240; padding: 50px 0;}
.newsLetter h3 { margin-top: 5px; font-weight: 300}
.newsLetterInput {border-radius: 35px; background-color: #FFFFFF; box-sizing: border-box}
.newsLetter input{ outline: none; width: 77%; height: 50px; border:none; padding: 0 30px; font-size: 18px; color:#666; background: none }
.newsLetter button {background-color: #333333; outline: none; border: none; border-radius: 50%; padding:12px 16px; float: right; margin: 5px; box-sizing: border-box}
.newsLetter button img { width: 10px; vertical-align: middle;}
.newsLetter button:hover { background-color: #7C7C7C; cursor: pointer}



.contactFooter {padding: 30px 0 30px 30px; box-sizing: border-box; background:#333333 url("../imgs/logo-bg.png") no-repeat; background-position: right;}
.icon { width: 16px; vertical-align: top; margin-right: 5px; margin-top: 4px;}
.contactFooter p { font-weight: 300; margin-bottom: 20px; font-size: 14px}
#map_canvas { height: 307px; width: 100%;}


ul.social { margin:12px 0 0 20px }
ul.social li{ display:inline-block; margin:0 5px; width:30px; height:30px; border-radius:50%;  overflow:hidden  }
ul.social li img:hover {background:#666;}
ul.social li img { width:16px; height:16px; background:#999; padding:7px; }


footer { background:#272727; padding: 30px 0}
.footerMenu li { display: inline; margin-right: 15px; font-size:13px; }
.footerMenu li a {color: #ACACAC; text-decoration: none}
.footerMenu li a:hover { text-decoration: underline} 
.copyright { color: #ACACAC; text-align: right; font-size:13px;}

#top { background: rgba(0,0,0,0.5); position: fixed; bottom: 60px; right: 60px; border-radius: 50%}
#top img {  transform: rotate(-90deg); padding:10px 15px; width: 10px}


.years { width: 100%;}

.years ul li { display: inline-block; font-weight: 600; font-size: 36px; padding: 20px 0; color: #A7A7A7}
/*.years ul li:hover { cursor: pointer}*/
.years ul { text-align: center}
.dotY { width: 20px; height: 20px; background: #FFFFFF; border: 2px solid #F68240; border-radius: 50%; margin: 0 auto -30px auto; position: relative;}
.activeY .year {color: #333333}
.year { margin-bottom: 30px}
.years ul li:hover .dotY {background: #F68240;}
.yearsline { border-bottom: 2px solid #AFAFAF; position: relative;    margin-top: -53px;    z-index: -999;}

.activeY .dotY { width: 20px; height: 20px; background: #F68240; border-radius: 50%; margin: 0 auto -30px auto; position: relative;}

.years ul li a {text-decoration:none;}

.postDate { font-weight: 600; color: #949393; font-size: 14px; line-height: 1.4; margin-bottom: 10px;  background: #FFFFFF;}
.contentY { width:100%; background: #F5F5F5; padding: 10px; border: 1px solid #F5F5F5; box-sizing: border-box; }
.contentYBox { width: 100%; background: #FFFFFF; padding: 20px; box-sizing: border-box; border: 1px solid #F3F3F3; margin-bottom: 10px; }
.contentM { font-size:22px; font-weight: 600; padding: 10px 0; text-align: center}
.contentDes { font-size: 14px; }
.contImg {box-sizing: border-box;} 
.contImg img { width: 100%; box-sizing: border-box; border: 1px solid #D6D6D6; display: block}



.lastImg {background: rgba(0,0,0,0.6); width: 100%; position: absolute; top: 0; height: 100%; color: #FFFFFF; font-size: 50px; box-sizing: border-box; text-align: center; padding-top: 20%}
.contImgDiv { width: 24.5%; display: inline-block; position: relative; }


.loadMore { width: 100%; padding:30px 0 20px 0; text-align: center; box-sizing: border-box; margin-bottom: 10px; background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); 
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
font-weight: 600; color: #595959
}
.loadMore:hover { cursor: pointer}
.timeline-container {overflow: hidden; height: 150px}

.gallery-img { height:160px; overflow: hidden}

#preloader {  position: fixed;  top:0;  left:0; right:0;  bottom:0;  background-color:#FFF; /* change if the mask should have another color then white */  z-index:99999; /* makes sure it stays on top */
}
#status {  width:100px;  height:100px;  position:absolute;  left:50%; /* centers the loading animation horizontally one the screen */
  top:50%; /* centers the loading animation vertically one the screen */  background-image:url("../imgs/loader.gif");  z-index:9999; /* path to your loading animation */  background-repeat:no-repeat;  background-position:center;  margin:-50px 0 0 -50px; /* is width and height divided by two */
}

.successAleart {padding:20px 30px; margin: 20px 0; background: #8EFFC2; color: #125E0F; border-radius: 5px}
.warnAleart {padding:20px 30px; margin: 20px 0; background: #F0A4A5; color: #891A1C; border-radius: 5px}
#myResponse {color: #FFFFFF}

@media only screen and (min-width: 767px) and (max-width: 1024px) {
	.container{ width: 95%;}
	.product-gallery-popup .product-popup-content {  position: absolute ;  overflow: hidden;}
	.product-image img { width: auto; height: auto;     max-width: 680px;}
	.arrowEduArea h5 { font-size:18px; left:30px;}
	
}


@media only screen and (min-width: 481px) and (max-width: 768px) {
	.container {width: 90%;}
	.sliderArea { padding-top: 77px;}
		.product-gallery-popup .product-popup-content {  position: absolute ;   overflow: hidden;}
	.product-image img { width: auto; max-width: 480px}
	.gallery-img { height:120px;}
		.arrowEduArea h5 { font-size:18px; left:30px;}
}

@media only screen and (max-width: 480px) {
	.sliderArea { padding-top: 47px;}
	.container {width: 90%;}
	header { height: 47px;}
	.logoArea img { height: 45px;}	
	
	.spaceS { margin-bottom: 15px;}
	.spaceM { margin-bottom: 25px}	
	
	.col2 { width:100%;}
	.col30 { width: 100%;}
	.col33 { width:100%;}
	.col70 {width:100%;}
	.col80 { width: 100%;} 
	
	.contentInnerL, .contentInnerR { padding: 0}
	
	#slidx_button { padding: 13px;  width: auto}
	.menuBut { width: 60px; height: auto}
	.tagLine {padding: 20px 0}
	.tagLine h3 { font-size: 18px}
	.tagLine p { font-size:14px }
	
	.biggerP { font-size: 14px}
	h3 { font-size: 26px}
	article { padding: 25px 0}
	
	article p { font-size: 14px }
	
	.founder p { font-size:16px; }
	.fname { font-size: 14px; line-height: 1.5}
	
	.newsEvents { padding: 25px 0}
	.moreC { margin-top: 25px;}
	
	
	.newsLetter { padding: 25px 0;}
	.newsLetter h3 { font-size: 24px; margin-top: 0; margin-bottom: 10px; text-align: center}
	.newsLetter input {padding:0 0 0 15px; width: 76.5%}
	
	
	.contentPageTitle h2 { font-size: 26px}
	
	.titleArea { padding-top: 70px}	
	
	
	.contactFooter {background-position: right bottom; padding: 20px}
	.contactFooter h4 { line-height: 1.4}
	
	ul.social { text-align: center; margin: 0}
	
	ul.footerMenu { text-align: center}
	.footerMenu li { margin: 5px;}
	ul.footerMenu li a {margin: 10px 0; display: inline-block}
	
	.copyright { text-align: center; margin-top: 10px;}
	
	
	#top { bottom: 20px; right: 20px}
	
	.teamDiv {margin: 10px 0}
	
	.arrowEduArea img { width:220px;}
	
	.objImg2 img{ margin: 0 !important}
	
	.eventTextArea h2 { font-size: 16px}
	.eventTextArea { padding: 5px;}
	.date { display: none}
	.event img { border: 1px solid #C7C7C7}
	.eventTextArea p { display: none}
	
	.button-container button { width: 100%; border-radius: 25px; box-shadow:none;}
	
	.objNumb {font-size: 40px;}
	.obj p { font-size: 14px; width: 74%}
	.obj { margin-bottom: 10px}
	.objNumb { min-width: 50px;}
	
	.contentY { padding: 0}
	.contImgDiv { width: 49.2%}
	.product-gallery > div {width: 48.2% !important}
	.product-gallery-popup .product-popup-content {  position: absolute ;  overflow: hidden;}
	.product-image img { width: 100%; min-width: 340px;}
	.gallery-img { height:100px;}
		.arrowEduArea h5 { font-size:22px; left:45px;}
}