/*

	Global Styles


	Font options:
		font-family: 'Open Sans', sans-serif;
		font-family: 'Condiment', cursive;
		font-family: 'Tinos', serif;
		font-family: 'Noto Serif', serif;
		font-family: 'Lusitana', serif;
		font-family: 'Alegreya', serif;

*/

html,body {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #162e5a;
	background: #fff;
	/*overflow: hidden;*/
}

a, img, h1, h2, h3, h4, figure, ul, p {
	margin: 0;
	padding: 0;
}

img {
	border: none;
	border-style: none;
}

ul li {
	list-style: none;
}

ul li a {
	text-decoration: none;
}

a, a:link, a:visited, a:hover, a:active, button, button:link, button:visited, button:hover, button:active {
	display: block;
	color: #E84200;
	border: none;
	border-style: none;
}

p {
	margin: 10px auto;
}

h1 {
	border-bottom: 2px solid #E84200;
}

h1.noborder {
	border: none;
}

h2 {}

#motto {
	position: absolute;
	bottom: 50px;
	right: 25px;
	text-align: right;
	border: none;
	color: #fff;
	letter-spacing: 1px;
	font-family: 'Kotta One', serif;
}

#sunset_video .vjs-big-play-button, #sunset_video .vjs-control-bar {
	display: none;
}

#sunset_video video {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

#bg {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: url(../images/transparent-white-bg-21.png);
}

#wrapper {
	width: 100%;
	height: 100%;
}

#wrapper header figure#logo {
	position: absolute;
	top: 10%;
	left: 5%;
	z-index: 2;
}

#wrapper header nav {
	position: fixed;
	top: 0px;
}

#wrapper header nav#nav {
	display: none;
	left: 0px;
	width: 100%;
	z-index: 1;
}

#wrapper header nav#nav ul {
	/*display: none;*/
}

#wrapper header nav#nav ul {
	width: 45%;
	margin: 0 auto;
	padding-top: 7%;
	text-align: center;
}

#wrapper header nav#nav ul li {
	display: inline-block;
	margin-right: 10px;
	padding: 10px;
	background: rgb(255, 255, 255);
	background: rgba(255, 255, 255, 0.2);
	border-radius: 3px;
}

#wrapper header nav#nav ul li a {
	color: #162e5a;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
}

#wrapper header nav.social {
	position: absolute;
	right: 1%;
	top: 35%;
	z-index: 1;
}

#wrapper header nav.social a {
	display: block;
	margin-bottom: 5px;
}

#wrapper header nav.social a img {
	width: 28px;
}

#wrapper header div#navBtn {
	position: fixed;
	top: 10%;
	right: 5%;
	z-index: 3;
}

/*.lines-button {
	display: none;
}*/

#wrapper main {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	padding: 0 0 50px 0;
}

#wrapper main #home {
	position: relative;
	width: 100%;
	height: 100vh;
	margin: 0;
	padding: 0;
}

#wrapper main #about, #wrapper main #clients, #wrapper main #templates, #wrapper main #contact {
	position: relative;
	margin: 0 0 50vh 0;
	padding: 40px 15%;
	background: rgb(255, 255, 255);
	background: rgba(255, 255, 255, 0.7);
}

#wrapper main #clients {
	text-align: center;
}

#wrapper main #clients h1 {
	text-align: left;
}

#wrapper main #clients img {
	margin: 25px;
	vertical-align: middle;
}

#wrapper main #templates {
	text-align: center;
}

#wrapper main #templates h1 {
	text-align: left;
}

#wrapper main #templates img {
	display: block;
	max-width: 100%;
	margin: 0 auto;
}

#wrapper #mainContent #contact {
	text-align: center;
}

#wrapper #mainContent #contact h1 {
	text-align: left;
}

#wrapper #mainContent #contact .social a {
	display: inline-block;
}

#wrapper #mainContent #contact form {
	width: 70%;
	margin: 0 auto;
	text-align: center;
}

#wrapper #mainContent #contact form #formErrors {
	text-align: left;
	color: #7f0019;
}

#wrapper #mainContent #contact form #formErrors ul li {
	list-style: disc;
}

#wrapper #mainContent #contact form input, #wrapper #mainContent #contact form textarea {
	display: block;
	width: 70%;
	margin: 10px auto;
	color: #162e5a;
    font-size: 0.8rem; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    border: none; 
    padding: 13px 10px; 
    box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
    background: #f5f5f5;
    clear: both; 
}

#wrapper #mainContent #contact form input:-webkit-input-placeholder { 
    color: #162e5a;
}

#wrapper #mainContent #contact form input-moz-placeholder { 
    color: #162e5a; 
}

#wrapper #mainContent #contact form input:focus { 
    background: #fff; 
    box-shadow: 0px 0px 0px 3px #fff38e, inset 0px 2px 3px rgba( 0,0,0,0.2 ), 0px 5px 5px rgba( 0,0,0,0.15 ); 
    outline: none;    
}

#wrapper #mainContent #contact form textarea {
	height: 100px;
	color: #b5b5b6;
}

#wrapper #mainContent #contact form input#submit {
	width: 70%;
	/*-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;*/
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #E84200), color-stop(1, #E84200) );
	background:-moz-linear-gradient( center top, #E84200 5%, #E84200 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#E84200', endColorstr='#E84200');
	background-color:#E84200;
	-webkit-border-top-left-radius:0px;
	-moz-border-radius-topleft:0px;
	border-top-left-radius:0px;
	-webkit-border-top-right-radius:0px;
	-moz-border-radius-topright:0px;
	border-top-right-radius:0px;
	-webkit-border-bottom-right-radius:0px;
	-moz-border-radius-bottomright:0px;
	border-bottom-right-radius:0px;
	-webkit-border-bottom-left-radius:0px;
	-moz-border-radius-bottomleft:0px;
	border-bottom-left-radius:0px;
	text-indent:0;
	border:1px solid #E84200;
	display:inline-block;
	color:#fff;
	font-family:Trebuchet MS;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:65px;
	line-height:40px;
	text-decoration:none;
	text-align:center;
	/*text-shadow:1px 1px 0px #ffffff;*/
	cursor: pointer;
}

#wrapper #mainContent #contact form input#submit:hover {
	color: #E84200;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9) );
	background:-moz-linear-gradient( center top, #e9e9e9 5%, #f9f9f9 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9');
	background-color:#e9e9e9;
}

#wrapper #mainContent #contact form input#submit:active {
	position:relative;
	top:1px;
}

#wrapper footer {
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	padding-left: 2%;
	font-weight: bold;
	font-size: 14px;
	background: rgb(255, 255, 255);
	background: rgba(255, 255, 255, 0.2);
}

#wrapper footer p {
	display: inline-block;
	height: auto;
	margin: 0px;
	font-size: 10px;
    overflow: hidden;
}

@media only screen and (max-width : 768px) {
	html, body {
		overflow: visible;
	}
	#wrapper header figure#logo {
		top: 5%;
		left: 50%;
		margin-left: -111px;
		z-index: 1;
	}
	#wrapper header div#navBtn {
		top: 0%;
		right: 0%;
	}
	#wrapper header nav#nav {
		display: none;
		position: fixed;
	    height: 100vh;
	    padding-top: 40px;
	    background: rgba(255,255,255,.9);
	    z-index: 2;
	}
	#wrapper header nav#nav ul {
		width: 100%;
		padding: 0px;
	}
	#wrapper header nav#nav ul li {
		display: block;
		margin: 0px;
		border-radius: 0px;
		background: none;
	}
	#wrapper header nav.social {
		top: 15%;
	}
	.lines-button {
		display: block;
		margin: 0px;
	    padding: 2rem 1rem;
	    border-radius: 0.47143rem;
	}
	.lines {
	    display: inline-block;
	    width: 2rem;
	    height: 0.47143rem;
	    border-radius: 0.18571rem;
	    transition: 0.3s;
	    position: relative;
	}
	.lines:before, .lines:after {
	    display: inline-block;
	    width: 2rem;
	    height: 0.47143rem;
	    border-radius: 0.18571rem;
	    -webkit-transform-origin: 0.18571rem center;
	    transform-origin: 0.18571rem center;
	}
	#wrapper main #clients img {
		max-width: 80%;
	}
	#wrapper #mainContent #contact form {
		width: 100%;
	}
	#wrapper #mainContent #contact form input#submit {
		width: 70%;
	}
}