@font-face {
	font-family: Cera;
	src: 
		url("../font/Cera GR Light.woff") format("woff"),
	 	url("../font/Cera GR Light.otf") format("opentype");
}

@font-face {
	font-family: CeraMedium;
	font-weight: bold;
	src:
		url("../font/Cera GR Medium.woff") format("woff"), 
		url("../font/Cera GR Medium.otf") format("opentype");
}
	
	
*,div,header,h1{box-sizing: border-box;  font-family:"Cera", Arial, Helvetica, sans-serif;}

body{ padding:0; margin: 0; }
h1{ font-size: 36px; font-family:"CeraMedium", Arial, Helvetica, sans-serif;margin:0 0 20px 0;}
ol{ }
p{ margin:0 0 40px 0; font-size: 24px; line-height:180%;}
li{font-size: 24px; line-height:180%;}



.dark{ background:#0A1728; color: #FFFFFF;}

header{ background:#0A1728 url(../image/landing/background-header.jpg) no-repeat 50% 0; background-size:cover;  height:155px;position:relative; border-bottom: 5px solid #E3C79A;box-shadow: 0 0px 7px 0px rgba(0,0,0,.75);}

.container{width: 100%; max-width: 1000px; margin: 0 auto; position:relative;}

#header{height:150px; background:  url(../image/landing/logo.png) no-repeat 0% 50%, url(../image/landing/title-desktop.png) no-repeat 100% 55%; display:block; position:relative;}


#video{ padding: 50px 0 50px 0; text-align:center; background: url(../image/landing/background-video.jpg) 50% 50% no-repeat fixed; background-size:cover;}
#video iframe{ width: 100%; max-width: 1000px; height: 565px;  margin: 0 auto;}

.join{ padding: 40px 0 40px 0;}
.join a { display: block; width: 360px; padding: 20px 0; margin: 0 auto; color: #FFFFFF; background:#F79132; font-size: 30px;  font-family:"CeraMedium", Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-transform:uppercase; line-height:100%; }
.join a:hover{	background-color: #CF6607;}

.join a.blue{background: #0A1728;}
.join a.blue:hover{background-color: #163258;}

/* .join a.gold{ background: none; border:3px solid #E3C79A ; color: #E3C79A;}
.join a.gold:hover{ background:rgba(255,255,255,0.5); text-shadow:1px 1px 2px 
rgba(0,0,0,.5);} */

#benefits{background:#0A1728; padding:50px 0 0 0; color: #FFF; position:relative; box-shadow: 0 2px 6px 0px rgba(0,0,0,.66); border-bottom: 5px solid #E3C79A;}

#benefits h1{  font-family:"CeraMedium", Arial, Helvetica, sans-serif; font-size: 36px; text-transform: uppercase; margin:0 0 40px 0;padding:0;}
#benefits h2{ font-size: 28px; margin:0 0 10px 0; padding:0; font-family:"CeraMedium", Arial, Helvetica, sans-serif;} 

.benefit-light,
.benefit-dark{padding: 30px 0 30px 0;}

.benefit-light .container,
.benefit-dark  .container{ background: url(../image/landing/check.png) no-repeat 0px 10px; padding-left: 55px;  font-size: 20px;  padding-left: 55px;  font-family:"Cera", Arial, Helvetica, sans-serif; color: #FFF; }

.benefit-light .container.join{ background-image: none; padding: 20px 0;}
.benefit-light{background: #122847; }

#method{ background: url(../image/landing/background-method.jpg) 50% 0% no-repeat fixed #FFF ; color:#0A1728; padding: 50px 0; background-size: cover; } 
#method h1{ border-bottom: 5px solid #0A1728; display: inline-block; text-transform: none;}
#method h2{ margin-bottom:10px;font-family:"CeraMedium", Arial, Helvetica, sans-serif;}
#method, #method h1, #method h2{ text-shadow:0px 0px 8px #F4C65F;}


#coach{padding: 50px 0 20px 0; background: url(../image/landing/background-coach.jpg) 50% 100% no-repeat;}
#coach h1{ border-bottom: 5px solid #E3C79A; display: inline-block;}

#quote-success{ text-align:center; padding: 60px 0; font-size: 48px;font-family:"CeraMedium", Arial, Helvetica, sans-serif; color:#333; box-shadow: 0 0px 10px 0px rgba(0,0,0,.65); position:relative;}

#star{
	background: url(../image/landing/background-star.jpg) no-repeat fixed 50% 50%;
	background-size: cover;
	padding: 50px 0 30px 0;

}

#star strong{font-family: "CeraMedium", Arial, Helvetica, sans-serif;}

#star h1, #star p{ text-shadow:0px 0px 8px #F4C65F;}

#shine{ padding: 50px 0;}
#shine > div > h1{ font-size: 48px; display:inline-block; border-bottom:5px solid #E3C79A; margin-bottom: 0px; }
#shine > div p strong{font-family: "CeraMedium", Arial, Helvetica, sans-serif;}
#shine ol{ margin:20px 0 40px 0;}
#shine li{color: #0A1728; font-size: 24px;font-family: "CeraMedium", Arial, Helvetica, sans-serif; padding: 5px 0;}
#shine li em { font-family: "CeraMedium", Arial, Helvetica, sans-serif; color:#F79132;  font-style:normal; }
#shine li strong { font-family: "CeraMedium", Arial, Helvetica, sans-serif; color:#A0927A;  font-style:normal; }

#join{ background: #A0927A; color:#FFF; padding: 50px 0 40px 0;}
#join h1{ font-size: 48px; line-height:100%;  text-align: center; text-shadow:1px 1px 3px rgba(47,43,34,.7); margin: 0 30px 30px 30px;}
#join h1 strong{ color: #FFC; font-family: "CeraMedium", Arial, Helvetica, sans-serif;}

#join .divider{border-bottom:1px solid #BDB4A4; border-top: 1px solid rgba(73,66,52,0.7);}
#join .field{ width: 60%; margin: 0 auto; padding: 10px 0;}
#join .label{ display:inline-block; font-size: 28px; text-shadow:1px 1px 2px rgba(47,43,34,.7); font-family: "CeraMedium", Arial, Helvetica, sans-serif; width: 100px; }
#join input{display:inline-block; border:0 none; font-size: 28px; padding: 5px; width: 80%;}
#join button{ background: #0A1728; color:#FFFFFF;font-family: "CeraMedium", Arial, Helvetica, sans-serif; border:0 none; font-size: 28px; text-transform: uppercase; padding: 8px 0px; width: 180px; display:block; margin: 0 auto; cursor: pointer; margin-top: 10px; }
#join button:hover{
	background-color: #163258;
}


#quote{ background: #0A1728; color:#FFF; box-shadow: 0 2px 8px 0px rgba(0,0,0,0.65); position: relative;border-top: 2px solid #E3C79A;border-bottom: 2px solid #E3C79A; }
#quote .container{padding: 50px 30px 50px 280px; background:url(../image/landing/martin_luthur_king.jpg) 0 50% no-repeat;}
#quote q{ font-size: 36px; font-style: italic; display:block; text-align:center; padding: 50px 0 0 20px;}
#quote cite{ text-align:right; font-size: 28px; color: #E3C79A; width:100%; display:block; font-style:normal; padding-top: 25px;}

#testimonials{ padding: 50px 0 0 15px; background: url(../image/landing/background-video.jpg) 50% 50% no-repeat fixed; background-size:cover;}
#testimonials h1{ font-size: 40px; text-align:center; text-transform:uppercase; margin-bottom: 30px; }
#testimonials h2{ font-size: 20px; text-align:center; font-family: "CeraMedium", Arial, Helvetica, sans-serif; margin:10px 0 0px 0;}
#testimonials h3{ font-size: 18px; text-align:center; font-family: "Cera", Arial, Helvetica, sans-serif; margin:0 0 20px 0; font-weight: 100; margin:0;}

.testmonial-group{display: inline-block; width:49.5%; }
.testimonial{ display: inline-block; width:49.5%;padding-bottom: 20px;}
.testimonial iframe{ width: 100%; height: 240px;}


#testimonials img{ display:block; margin: 0 auto; width: 100%; height: auto;}

footer{background:#0A1728 url(../image/landing/logo.png) no-repeat 50% 40px; padding: 180px 0  20px 0;  border-top: 5px solid #E3C79A; box-shadow: 0 -1px 10px 0px rgba(0,0,0,.5);}

footer .container{ text-align:center; color:#FFF; line-height: 150%; font-size: 20px;}
footer .container a{ color:#FFF; text-decoration:none;}
footer p{ font-size: 20px; margin: 20px 0 0 0;}

@media screen and (max-width: 1450px) { 
	.testimonial iframe{ height: 200px;}
}

@media screen and (max-width: 1200px) { 
	.testimonial iframe{ height: 180px;}
}

@media screen and (max-width: 1000px) { 

	#benefits > div, 
	section#method,
	section#coach,
	section#star,
	section#shine
	 { padding-left: 20px !important;}
	 
	#header{
	
	background:  url(../image/landing/logo.png) no-repeat 20px 50%, url(../image/landing/title-desktop.png) no-repeat 100% 55%;}
	 
	div#join-frame{ padding-left: 0px !important;}
	.container.join{ padding: 20px 0px !important;}
	
	section#shine{ padding-right: 20px;}
	.testmonial-group{display: block; width:100%;}
	.testimonial{ display: inline-block; width:49.5%; height:330px;}
	.testimonial iframe{ height: 250px;}
}
@media screen and (max-width: 900px) { 
	
	#join .field{ width: 90%;}
	.testimonial{  height: 300px;}
	#video iframe{  height: 450px;  }
}
@media screen and (max-width: 800px) { 
 #header {	 
	  background:  url(../image/landing/logo.png) no-repeat  20px 50% , url(../image/landing/title.png) no-repeat 95% 70%;   background-size:auto 90px,auto 70px ;
	 }
	#quote .container{padding: 30px 30px 30px 30px; background:none;}
	#quote q { padding: 0;}
	#video iframe{  height: 400px;  }	
	.testimonial iframe{ height: 200px;}
}

@media screen and (max-width: 700px) { 
	
	#header{}
	#video iframe{  height: 360px;  }	
	.testimonial iframe{ height: 180px;}
	.testimonial{  height: 240px;}	
}

@media screen and (max-width: 600px) { 
	#join{ padding-top: 30px;}
	#join h1{ font-size: 36px;}
	#join .field{ width: 100%; padding: 10px 20px;}
	#join input{ width: 100%;}
	#header{ background-position:  50% 20px, 50% 140px; background-size:auto 90px,auto 60px; height: 300px;}
	header{ height: 230px;}
	#video iframe{  height: 350px;  }	
	#testimonials{ padding-left:0px;}
	.testimonial{ display: block; width:100%; height: 330px; }
	.testimonial iframe{ height: 250px;}
}

@media screen and (max-width: 400px) { 
	.join a { width: 90%; }
	#video iframe{  height: 300px;  }	
	.testimonial{ height: 280px;}
	.testimonial iframe{ height: 200px;}
	footer{ padding-left: 10px; padding-right: 10px;}
}

@media screen and (max-width: 350px) { 
	#video iframe{  height: 200px;  }	
}