/* Main Menu */
#colHeader {width:100%; margin-right: auto; margin-left: auto; clear: both; margin-top: 0px; margin-bottom: 0px; }

#header{position:relative; width:100%; height:35px; top:0px; background-color: #d8d8d8; z-index:30; }
	#languageIcon{float:right; text-align:right; width:90px; height:27px; margin:4px 20% 0px 0px; z-index:30; }

#headerWhite{position:relative; width:100%; height:105px; top:35px; background-color: #fff; z-index:30; }
	#ecLogo{float:left; text-align:left; width:248px; height:66px; margin:17px 0% 0px 20%; z-index:30; }

#MainMenu{position:fixed; width:100%; height:100%; margin:-22px 0px 0px 0px; vertical-align:top; display:none; text-align:center; animation: fadein 0.5s; -moz-animation: fadein 0.5s; /* Firefox */ -webkit-animation: fadein 0.5s; /* Safari and Chrome */ -o-animation: fadein 0.5s; /* Opera */ z-index:70;}

#MainMenuContainer{float:left; width:100%; height:95vh; margin:0px 0px 0px 0px;  padding-top:10vh; background-color:#004494;  text-align:center; animation: fadein 0.5s; -moz-animation: fadein 0.5s; /* Firefox */ -webkit-animation: fadein 0.5s; /* Safari and Chrome */ -o-animation: fadein 0.5s; /* Opera */ z-index:70;}




.desktopLogo { 

visibility: visible; 

} 

  

.tabletLogo { 

visibility: hidden; 

} 

  

.mobileLogo { 

visibility: hidden; 

} 










    
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

.buttonContainer{
    float:left; 
    width:40%; 
    padding:0px 30% 0px 30%;
		}

.langSelectContainer{
    float:left; 
    width:100%; 
    padding:16px 0px 0px 35px;
	background-image: url("../img/language.png");
	background-position: center left;
	background-repeat: no-repeat;
	margin-bottom: 30px;
		}


.menuButton {
    position: relative; 
    float: left; 
    width:95%; 
    margin:0px 1% 1% 0px;
	background-color: white;
	padding:1vh 0px 1vh 4%;
		color: #224496;
	-webkit-transition: all 0.15s ease-out;
 	-moz-transition: all 0.15s ease-out;
  	-o-transition: all 0.15s ease-out;
  	transition: all 0.15s ease-out;
	
}


.menuButton:hover {
	background-color: #ffd617;
	color: black;
	cursor: pointer;
}


.menuButtonActive {
    position: relative; 
    float: left; 
    width:95%; 
    margin:0px 1% 1% 0px;
	background-color: #ffd617;
	padding:1vh 0px 1vh 4%;
	background-image: url(../img/tick.png);
	background-position: center right;
	background-repeat: no-repeat;
	color: black;
	
}


.langSelect {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13pt;
	line-height: 140%;
 	color:#ffffff;
 	font-weight:bold;
	margin-top:20px;
	margin-bottom: 20px;
	text-align: left;
}

.menuText {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13pt;
	line-height: 140%;
 	font-weight:bold;
	text-align: left;
	margin:0px;

}

.menuText:hover {
	text-decoration: underline;
}




/* Main Menu End */









/* Main Section Panel */
.imagePanel {
	position:relative; 
	float:left; 
	width: 100%; 
	height: 58vh; 
}

.bluePanel {
	position:relative; 
	float:left;
	background-color: #224496;
	width: 100%; 
	height: 35%;
}


.acaTitle {
	margin-top: 5vh;
	margin-left:20%;
	width: 50%; 
}

.acaShapes {
	position:absolute; 
	float:right;
	width: 50%; 
	height: auto;
	bottom: 0px;
	text-align: right;
	margin-left: 50%
}

.contentContainer {
	float:left; 
	width:100%; 
	padding-top:0px;
}

		.content {
			float:left; 
			width:60%; 
			padding:0px 20% 0px 20%;
		}

				.brochureImage {
					position:relative; 
					float:left; 
					width: 33.668%; 
					top:30px;
				}

				.brochureText {
					position: relative; 
					float:left; 
					width: 66.332%; 
					top:30px;	
				}




				.videoText {
					position:relative; 
					float:left; 
					width: 33.668%; 
					top:60px;
				}

				.videoCaptionMain {
					background-color:lightGrey; 
					padding:10px 0px 10px 5%; 
					margin-top:30px;
				}
				

				.videoMain {
					display: block;
					position: relative; 
					float:left; 
					width: 66.332%; 
					height:480px;
					top:60px;	
				}

				.videoMainMobile {
					display: none;
					
				}


				.video {
					position: relative; 
					float: left; 
					width:32.666%; 
					padding-right:1%;
					margin-bottom: 0px;
				}

				.videoLast {
					position: relative; 
					float: left; 
					width:32.666%; 
					padding-right:0%;
					margin-bottom: 0px;
				}

				.videoCaption {
					position: relative; 
					float: left; 
					width: 95%;
					background-color:lightGrey; 
					padding:10px 0px 10px 5%;  
					margin-top:-5px;
					margin-bottom: 15px;
				}


.button {
    position: relative; 
    float: left; 
    width:100%; 
    margin:10px 1% 0px 0px;
	background-color: #224496;
	-webkit-transition: all 0.15s ease-out;
 	-moz-transition: all 0.15s ease-out;
  	-o-transition: all 0.15s ease-out;
  	transition: all 0.15s ease-out;

	padding: 0px;
}


.button:hover {
	background-color: #d4145d;
	cursor: pointer;
		
}


.button:focus {
  background-color: #d4145d;
}

.section-display {
	position: relative;
	float: left;
	padding: 5px 0px 25px 0px;
}


.section-display:not(.active) {
  display: none;

}




.footer{
	float:left;
	width: 80%; 
	background-color:#D8D8D8; 
	padding:40px 20% 40px 0px; 
	text-align:right; 
	margin-top:100px;
}






/*General styles*/

body {
	font-family: Arial, "Open Sans", sans-serif;
	background-color: #fff;
	font-size: 13pt;
	line-height: 130%;
	font-weight: normal;
	color: #333;
	margin-top: 0px;
	
}

body, html {
	margin:0;
	padding:0;
	height: 100%
}

html { overflow-y: scroll; }


h1 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 48pt;
	line-height: 100%;	
	color:#fff;
	font-weight:400;
	text-align: left;
	margin: 0px;
}

h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 44pt;
	line-height: 100%;
	color:#ffffff;
 	font-weight:400;
	margin:0px 0px 20px 0px;
}

h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16pt;
	line-height: 120%;
	color:#ffffff;
 	font-weight:normal;
	margin-top:0px;
	text-align: left;

}

h4 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24pt;
	line-height: 140%;
 	color:#224496;
 	font-weight:bold;
	margin-top:80px;
	margin-bottom: 20px;
}


h5 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16pt;
	line-height: 140%;
 	color:#224496;
 	font-weight:bold;
	margin-top:40px;
	margin-bottom: 0px;
}

h6 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13pt;
	line-height: 140%;
 	color:#ffffff;
 	font-weight:normal;
	margin-top:20px;
	margin-bottom: 20px;
	text-align: center;
}



ol li {
margin-bottom:10px;	
}

ul li {
margin-bottom:10px;	
}

	



/*Button*/


.brochureTable{
	width: 360px;
	position: relative; 
	margin:40px 0px 10px 0px;
}


.formTable{
	width: 360px;
	position: relative; 
	margin:40px auto 70px auto;
}



.buttonLink A{
	font: 13pt/140% Arial, Helvetica, sans-serif;
	color:#ffffff;
	text-decoration:none;
	outline:none;
	display:block;
	background-color:#224496;
	text-align:center;
	padding:20px 0px;
		border-radius: 0px;
	-webkit-transition: all 0.15s ease-out;
 	-moz-transition: all 0.15s ease-out;
  	-o-transition: all 0.15s ease-out;
  	transition: all 0.15s ease-out;
}

.buttonLink A:visited{
	color:#ffffff;
	text-decoration:none;
	outline:none;
	display:block;
	background-color:#224496;
}

.buttonLink A:HOVER{
	color:#ffffff;
	text-decoration:none;
	outline:none;
	display:block;
	background-color:#d4145d;
	cursor: pointer;
}






/*Links*/

a  {
	color: #224496;
	text-decoration: none;
}

a:visited {
	color: #224496;
	text-decoration: none;
}

a:HOVER {
	color:#d4145d;
	text-decoration: none;
}





@media only screen and (max-width: 1440px) {
	/* For tablets: */
	
	#languageIcon{float:right; text-align:right; width:90px; height:27px; margin:4px 10% 0px 0px; z-index:30; }
		#ecLogo{float:left; text-align:left; width:248px; height:66px; margin:17px 0% 0px 10%; z-index:30; }
	
	
	.buttonContainer{
    float:left; 
    width:60%; 
    padding:0px 20% 0px 20%;
		}
	
	
	.imagePanel {
	position:relative; 
	float:left; 
	width: 100%; 
	height: 62%; 
}

.bluePanel {
	position:relative; 
	float:left;
	background-color: #224496;
	width: 100%; 
	height: 35%;
}


.acaTitle {
	margin-top: 5vh;
	margin-left:10%;
	width: 50%; 
}

.acaShapes {
	position:absolute; 
	float:right;
	width: 60%; 
	height: auto;
	bottom: 0px;
	text-align: right;
	margin-left: 40%
}
	
	
	
	
	
	
	
	
  .content {
      float:left; 
      width:80%; 
      padding:0px 10% 0px 10%;

  }	

}





	
@media only screen and (max-width: 1200px) {
		/* For tablets Portrait: */
	
 
	#languageIcon{float:right; text-align:right; width:90px; height:27px; margin:4px 5% 0px 0px; z-index:30; }
		#ecLogo{float:left; text-align:left; width:248px; height:66px; margin:17px 0% 0px 5%; z-index:30; }
	
	
	.buttonContainer{
    float:left; 
    width:70%; 
    padding:0px 15% 0px 15%;
		}
	
	
		.imagePanel {
	position:relative; 
	float:left; 
	width: 100%; 
	height: 73%; 
}

.bluePanel {
	position:relative; 
	float:left;
	background-color: #224496;
	width: 100%; 
	height: 25%;
}


.acaTitle {
	margin-top: 5vh;
	margin-left:5%;
	width: 50%; 
}

.acaShapes {
	position:absolute; 
	float:right;
	width: 60%; 
	height: auto;
	bottom: 0px;
	text-align: right;
	margin-left: 40%
}
	
	
	.content {
      float:left; 
      width:90%; 
      padding:0px 5% 0px 5%;

  }
	
	
	

	.videoText {
					position:relative; 
					float:left; 
					width: 100%; 
					top:60px;
				}

				.videoCaptionMain {
					background-color:lightGrey; 
					padding:10px 0px 10px 5%; 
					margin-top:30px;
					margin-bottom: 60px;
				}
				

				.videoMain {
					display: block;
					position: relative; 
					float:left; 
					width: 100%; 
					height:480px;
					top:0px;
					margin-bottom: 10px;
				}
}
	
	
	@media only screen and (max-width: 768px) {
		/* For phones: */

		
	#languageIcon{float:right; text-align:right; width:90px; height:27px; margin:4px 5% 0px 0px; z-index:30; }


	#ecLogo{float:left; text-align:left; width:248px; height:66px; margin:17px 0% 0px 5%; z-index:30; }	
	
	
			.buttonContainer{
    float:left; 
    width:90%; 
    padding:0px 5% 0px 5%;
				margin-top: -25px;
		}
	
	
		.imagePanel {
	position:relative; 
	float:left; 
	margin-top:10%;
	width: 100%; 
	height: 50%; 
}

.bluePanel {
	position:relative; 
	float:left;
	background-color: #224496;
	width: 100%; 
	height: 40%;
}


.acaTitle {
	margin-top: 3vh;
	margin-left:5%;
	width: 95%; 
}

.acaShapes {
	display: none;
	position:absolute; 
	float:right;
	width: 60%; 
	height: auto;
	bottom: 0px;
	text-align: right;
	margin-left: 40%
}
	
		
		
	
		.content {
			float:left; 
			width:90%; 
			padding:0px 5% 0px 5%;

		}
	
				.brochureImage {
					position:relative; 
					float:left; 
					width: 100%; 
					top:30px;
					text-align: center;
				}

				.brochureText {
					position: relative; 
					float:left; 
					width: 100%; 
					top:15px;	
				}




				.videoText {
					position:relative; 
					float:left; 
					width: 100%; 
					top:40px;
				}

				.videoCaptionMain {
					position:relative; 
					float:left;
					width: 95%;
					background-color:lightGrey; 
					padding:10px 0px 10px 5%; 
					margin-top:15px;
					margin-bottom: 0px;
				}
				

				.videoMain {
					display: none;
					
				}
	
			
				.videoMainMobile {
					display: block;
					position: relative; 
					float:left; 
					width: 100%; 
					height:200px;
					top:45px;
					margin-bottom: 40px;
				}


				.video {
					position: relative; 
					float: left; 
					width:100%; 
					padding-right:1%;
					margin-bottom: 0px;
				}

				.videoLast {
					position: relative; 
					float: left; 
					width:100%; 
					padding-right:0%;
					margin-bottom: 0px;
				}

				.videoCaption {
					position: relative; 
					float: left; 
					width: 95%;
					background-color:lightGrey; 
					padding:10px 0px 10px 5%;  
					margin-top:-5px;
					margin-bottom: 15px;
				}	
	

	
.button {
    position: relative; 
    float: left; 
    width:100%; 
    margin:10px 0% 0px 0%;
	background-color: #224496;
	-webkit-transition: all 0.15s ease-out;
 	-moz-transition: all 0.15s ease-out;
  	-o-transition: all 0.15s ease-out;
  	transition: all 0.15s ease-out;

	padding: 0px;
}


.button:hover {
	background-color: #d4145d;
	cursor: pointer;
}

	
h1 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 36pt;
	line-height: 100%;	
	color:#fff;
	font-weight:400;
	text-align: left;
	margin: 0px;
}

h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 34pt;
	line-height: 100%;
	color:#ffffff;
 	font-weight:400;
	margin:0px 0px 20px 0px;
}

h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
	line-height: 120%;
	color:#ffffff;
 	font-weight:normal;
	margin-top:0px;
	text-align: left;

}

		
.icon-scroll{
	bottom: 30px;
}	
		
	
.brochureTable{
	width: 100%;
	position: relative; 
	margin:40px auto 10px auto;
}		
		
		
.formTable{
	width: 100%;
	position: relative; 
	margin:70px auto 70px auto;
}		
	
		
}







  

  

  

@media all and (max-width:928px){ [class*=" mq-"], .mq-default { display:none; } .mq-768 {display:block; } } 

@media all and (max-width:544px){ [class*=" mq-"], .mq-default { display:none; } .mq-414 {display:block; } } 

  

  

  

  

@media (max-width: 928px) { 

/* For iPad Pro Landscape and Macbook Pro */ 

.desktopLogo { 

visibility: hidden; 

} 

  

.tabletLogo { 

visibility: visible; 

} 

  

.mobileLogo { 

visibility: hidden; 

} 

} 

  

  

  

  

@media (max-width: 544px) { 

/* For iPad Pro Landscape and Macbook Pro */ 

.desktopLogo { 

visibility: hidden; 

} 

  

.tabletLogo { 

visibility: hidden; 

} 

  

.mobileLogo { 

visibility: visible; 

} 

}