/* ==== Google font ==== */
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,900');


/* ===================================
1. General
==================================== */
* {margin: 0; padding: 0;}
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 18px; line-height: 28px; background: #fff; /* background-color:#f4f5f7; */}

body, button, input, select, textarea {
	font-family:'Source Sans Pro', Arial, sans-serif!important;
	font-weight:400;
	line-height:1.6em;
	color:#656565;
    margin: 0;
}

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

a:active {
	outline:0;
}

li {
	list-style:none;
}

img {
	border:none;
}

.clearfix::after {
	content:"";
	display:block;
	visibility:hidden;
	height:0;
	clear:both;
}

p {
    margin-bottom: 20px;
}

h1,h2, h3, h4, h5, h6 {
	font-family:'Source Sans Pro', Arial, sans-serif!important;
	font-weight:700!important;
	line-height:1.1em;
	color:#333;
	margin-bottom:20px;
}

.min-width {
	display:block;
	max-width:960px;
	margin:0 auto;
}

.full-width {
	display:block;
	width:100%;
}

.container {display: block; margin: 0 auto; max-width: 960px; padding: 0 10px;}

/* ===================================
2. layout
==================================== */

header {display:block;}
header h1 {font-size:58px; color:#e0e0e0; line-height:150px; margin:0; font-weight:300; text-align: center; position: relative;
z-index: 99; }
header h1 span {color:#01a0e0; font-size:70px; font-weight:700; letter-spacing:-5px;}

nav ul{display: none;}
nav ul li{text-align: center; width: 80%; margin: 0 auto; background:#eee; }
nav ul li a {display: block; padding: 10px; transition: 450ms; color: #4b4b4b; font-size: 14px;}
nav ul li a:hover {background: #ccc;}
nav button.menu {display: block; margin: 0 auto; background: #fe9700; cursor: pointer; color: #fff; font-size: 18px; padding: 10px 20px; width: 80%; border:none;}


#billboard h2 {font-size: 60px; text-transform: uppercase; color: #444444; margin-bottom: 0; font-family: 'Source Sans Pro', Arial, sans-serif; font-weight: 700; line-height: 1.1em; }
#billboard article {text-align: center; max-width: 450px; margin: 0 auto;}
#billboard article > h3 {font-size: 22px; color: #0472c8; font-weight: 400; margin-bottom:20px; }
#billboard .form-container {background: #0f7ec8; border-radius: 10px; padding: 40px 0; max-width: 400px; margin: 0 auto; text-align: center;}
#billboard .form-container h3 {font-size: 42px; text-transform: uppercase; color: #fff; letter-spacing: -1px; text-align:center; line-height:0.8em;}
#billboard .form-container h3 span {font-weight: 300; font-size: 30px;}
#billboard .form-container p {margin: 20px auto 0; color: #fff;}
#billboard .form-container .callout {display: none;}

#billboard form input {display: block; width: 80%; font-size: 18px; margin: 0 auto; height: 40px; line-height: 40px; border: none; outline:none; text-align: center;}
#billboard form input[type="submit"] {background: #fe9700; color: #fff; font-size: 24px; font-weight: 700; text-transform: uppercase; margin-top:20px; transition:0.45s; cursor:pointer;}
#billboard form input[type="submit"]:hover {background: #333;}
#billboard .thin-arrow {display: none;}
    .read-before {cursor: pointer;}
#billboard form label.error { display: block; width: 100%; font-weight: bold; color: #fff; background-color: #df1f26; font-size: 14px; border-radius: 20px; padding: 10px; margin-top: 4px; }
#billboard form label.errorblock input { border-color: #df1f26; }
#billboard form div { font-size:12px; color:#dbd9d9; line-height: 1; margin:10px; }

#terms {padding: 60px 20px; background: #f1f1f1 url(../images/terms_bg.jpg) no-repeat right bottom; background-size: 665px; }
#terms p {background: rgba(255,255,255,.8); border: solid #fff 1px; padding: 20px; color: #7d7d7d; font-size: 18px; line-height: 1.4em;}

#ad-pos {padding: 60px 20px 0;}
#ad-pos article {max-width: 550px; padding: 20px; background: rgba(255,255,255,0.8);}
#ad-pos article p span{color: #0f7ec8; font-weight: 700;}

#notice .container{padding: 40px 20px; background: #fde7ce; border: dashed 5px #b5292a; width: 86%; margin: 0 auto;}
#notice .container h2 {max-width: 665px; text-align: center; margin: 0 auto; color: #ce0600; font-size: 24px;}
#notice .container h2 span {color: #333;}
#notice ol{padding-left: 60px; max-width: 570px; margin: 20px auto 0;}
#notice ol li{list-style: inherit;}

#features {padding: 40px 20px;  max-width: 875px; margin: 0 auto;}
#features h2 {color: #0f7ec8;position: relative; margin-top: 26px; font-size: 42px; text-transform: uppercase; text-align: center;}
#features h2 .arrow {position: absolute; left: 0; top:-100px;}
#features ul {max-width: 511px; margin: 0 auto;}
#features ul li {width: 50%; list-style: url(../images/icon_bullet.png); margin: 0 auto;}
#features p {clear: both; margin: 20px auto; text-align: center;}
#features p span {color: #0f7ec8; font-weight: 700; font-size: 16px;}
#features button {display: block; margin: 0 auto;color: #fff; background: #00a651; font-weight: 700; text-transform: uppercase; padding: 20px 40px; font-size: 16px; border-radius: 10px; border:none; cursor:pointer; transition:0.45s ease-in-out;}
#features button:hover {background: #333;}

#brands {text-align: center; padding-bottom: 40px;}
#brands h2{font-weight: 300; color: #0f7ec8; margin: 40px auto;}
    
/*    .modal {width: 100vw; height: 100vh; position: fixed; z-index: 99;top: 0; left: 0; }
    .modal-content {background: #fff; padding: 40px; width: 60%; max-width: 600px; margin: 0 auto; position: absolute; top: 50%; left: 50%;}
    .modal-bg {background: rgba(0,0,0,0.8); width: 100vw; height: 100vh;}*/

footer {margin: 0 auto; text-align: center; padding:20px; color: #fff; background: #333; }
footer a {color: #fff;}
footer v {color: #fff;}
/**/
.banner_section_image img { width:100%; }
.headnavigation li.active a {
    background: url(../images/drop_active.png) no-repeat center bottom 0px;
}

/* ===================================
    Media Query
==================================== */
@media screen and (max-width:480px) and (max-device-width:480px){
}

@media screen and (min-width:655px) and (min-device-width:655px){
header {border-bottom: solid #3fa9f5 1px;}
header h1 {display: inline-block; margin-left: 10px; line-height: 1;}
header h1 img {position: relative; top:16px;}
#billboard .container{background: url(../images/billboard_bg.jpg) no-repeat left top; background-size: 540px;}
#billboard article {float: right;}
#billboard .form-container {position: relative;}
#billboard .form-container .callout {display: block; position: absolute; left: -180px; bottom:20%;}
#billboard .thin-arrow {display: block; position: absolute; left: 150px; bottom:-100px;}    
    
nav {display: inline-block;float: right; margin-top: 20px;}
nav ul{display:block;}
nav ul li {display: inline-block; background: none; width: inherit;}
nav button.menu {display: none;}
    
#terms p {width: 60%;}
#terms p span{color: #0f7ec8; font-weight: 700;}

#ad-pos .container{background: url(../images/adpos_bg.jpg) no-repeat left top; background-size: contain;}
#ad-pos article {float: right;}
    
#features ul li {float: left; width: 49%; margin: inherit;}
#features button {display: block; margin: 0 auto;color: #fff; background: #00a651; font-weight: 700; text-transform: uppercase; padding: 40px 70px; font-size: 24px; border-radius: 10px; border:none; cursor:pointer; transition:0.45s ease-in-out;}
}