/*

	01. Generals Settings
	02. Header Section Settings
	03. Container Section Settings
		03.1 Callout Section
		03.2 Features Section
		03.3 Video Preview Section
		03.4 Brands & Testimonials Section
		03.1 Subscription Section
	04. Footer Section Settings
	05. Media Queries for Mobile and Tablets Settings
			
*/





/* 01. GENERALS SETTINGS ================================================== */



body, html { 
	width:100%;
	height: 100%;
	min-height: 100%;
	background-color: #fff;
	line-height: 1.5;
	position:absolute;
	top:0px;
	left:0px;
	bottom:0px;
	font-family: 'Lato', sans-serif;
}

strong, b { font-weight: bold }
em { font-style: italic }

.centered {text-align: center;}

.clear {padding: 10px 0;}

.fade1, .fade2, .fade3 {display:none;}


/* 02. HEADER SECTION SETTINGS ================================================== */
header {
	background: #2C3E50;
	padding: 20px 0;
	height: 90px;
}

h1 { display: block; text-align: center }



/* 03. CONTAINER SECTION SETTINGS ================================================== */

/* 03.1 Callout Section */
#callout {
	background: #2980B9;
	height: 560px;
	position: relative;
	overflow: hidden;
}

#callout .text { 
	font-size: 36px; 
	font-weight: 300;
	color: #fff;
	margin: 100px 0 50px 0;
}
#callout .text h2 { font-weight: bold }
#callout .text p { font-size: 0.8em }

.image {
	width: 100%;
	height: auto;
	position: relative;
}

#callout .cta {
	-moz-border-radius: 11px;
	-webkit-border-radius: 11px;
	border-radius: 11px;
	background-color: #F1C40F;
	color: #111;
	font-size: 30px;
	font-weight: 300;
	text-align: center;
	text-decoration: none;
	display: block;
	
	width: 380px;
	height: 70px;
	line-height: 70px;
	margin-bottom: 35px;
}

#callout .cta:hover {
	background-color: #F4D65B;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

#callout small {
	color: #fff;
	font-size: 18px;
}
#callout small a {
	color: #F1C40D;
	text-decoration: none
}

	
/* 03.2 Features Section */
#features { padding: 60px 0 20px 0 }
#features .columns { padding-bottom: 50px }

#features h2 {
	font-size: 46px;
	font-weight: 300;
	border-bottom: solid 1px #ddd;
	line-height: 1.5;
	text-align: center;
	margin-bottom: 20px;
}

#features h3 {
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 10px;
	color: #333;
}

#features p { color: #666 }

.icon-holder {
	-moz-border-radius: 110px;
	-webkit-border-radius: 110px;
	border-radius: 110px; 
	background-color: #fff;
	
	width: 100%;
	height: 190px;
	padding: 35px;
	font-size:150px;
	text-align: center;
	
	padding: 0px;
	margin: 0px auto;
	line-height: 1;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	-o-box-sizing: content-box;
	box-sizing: content-box;
}

/* 03.3 Video Preview Section */
#video-preview {
	background: #f9f9f9;
	border-top: solid 1px #eee;
	padding: 55px 0;
}

#video-preview h3 {
	font-size: 32px;
	margin-bottom: 15px;
}

#video-preview p {
	line-height: 1.7;
	padding-bottom: 25px;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* 03.4 Brands & Testimonials Sections */
#brands {
	background-color: #2980B9;
	color: #fff;
	padding: 60px 0 30px 0;
}
.partners {
	text-align: center;
}
.partners h3 {
	font-size: 28px;
	font-weight: 300;
	margin-bottom: 35px;
}
.partners h3 strong { font-weight: 700 }
.testimonials {
	border-top: dotted 2px #6AA6CE;
	padding: 60px 0 40px 0;
	margin-top: 50px;
}

.testimonial {
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px;
	border-radius: 15px;
	background: #fff;
	padding: 20px;
	color: #666;
	font-size: 18px;
	line-height: 1.6;
	position: relative;
}
.testimonial p { padding-bottom: 15px }
.testimonial strong { color: #444 }
.testimonial span.q {
	background: url(../img/testimonials.png) no-repeat;
	position: absolute;
		left: -14px; top: 30px;
	width: 14px; height: 13px;
	display: block;
}

.testimonial-logo { padding: 20px 0; }

/* 03.5 Subscription Section */
#subscription {
	background-color: #2C3E50;
	color: #fff;
	padding: 60px 0;
	text-align: center
}
#subscription h3 {
	font-size: 32px;
	margin-bottom: 35px;
}

#subscription .text-input, #subscription .submit {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	border: none;
	padding: 18px;
	font-size: 18px;
	-webkit-appearance:none;
}

#subscription .text-input:focus, #subscription .submit:focus {
	border:none;
	-webkit-appearance:none;
}

#subscription .text-input {
	width: 400px;
}
#subscription .submit {
	background-color: #F1C40F;
	color: #111;
	text-align: center;
	font-weight: 600;
	
	margin-left: 5px;
	cursor: pointer;
	
	padding: 18px 30px;
}

#subscription .submit:hover {
	background-color: #F4D65B;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.feedback { height: 40px; line-height: 40px }

/* 04. FOOTER SETTINGS ================================================== */
footer {
	background-color: #181818;
	color: #999;
	padding: 30px 0;
}
footer .social a {
	color: #999;
	font-size: 36px;
	text-decoration: none;
	margin-left: 20px;
}

footer .social a:hover {
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	color: #fff;
}



/* 05. MEDIA QUERIES FOR MOBILE SETTINGS ================================================== */



/* Styling for mobile devices */

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

#callout .text, #callout { text-align: center; }
#callout .text { margin-top: 30px; font-size: 30px; }
#callout .cta { margin: 0 auto 35px auto; width: auto; }
#callout { height: auto }
#callout .image { width: 75%; margin: 0 auto; background-position: top center; }

#features h2 { font-size: 34px }

#video-preview { text-align: center }
#video-preview h3 { font-size: 34px }

#subscription .text-input, #subscription .submit {
	width: 100%;
	margin: 10px auto;
	box-sizing:border-box;
}

.testimonial span.q {
	-webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
	position: absolute;
		left: 30px; top: -13px;
}

footer, footer .social { text-align: center }
footer .social { padding: 20px 0 }
footer .social a {margin: 0 10px }
}



/* Smaller resolutions */
@media screen and (max-width: 479px) {
	#callout .text { font-size: 20px; margin-bottom: 25px; }
	#callout .cta { font-size: 18px; margin-bottom: 15px; }
	#callout small { font-size: 14px; }
	
	#callout { height: auto; padding-bottom: 20px; }
	#callout .image { width: 75% }
	
	#features h2 { font-size: 26px;  font-weight: bold; }
	
	#video-preview h3 { border-bottom: solid 1px #ddd; font-size: 26px; margin-bottom: 20px; }
	
	
	#subscription { padding: 30px 0; }
	#subscription h3 { font-size: 24px; margin-bottom: 20px; }
	
	footer { padding-bottom: 40px; font-size: 14px; }
	footer .social a { font-size: 32px }
}

/* Even smaller resolutions */
@media screen and (max-width: 319px) {
	#callout .image { width: 75% }
	#callout .cta { font-size: 14px }
}


/* Styling for tablet devices */

/* iPad in portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	#callout { height: 430px }
	#callout .text { margin-top: 30px }
}