/* - DOCUMENT INFORMATION
------------------------------------------------- 
	Website: 
	Name: 
*/

/* - CONTENTS
-------------------------------------------------
    - Global ................................ 1.0
    	- Structure ......................... 1.1
    	- Text .............................. 1.2
    	- Forms ............................. 1.3
    	- Header ............................ 1.4
    	- Footer ............................ 1.6
    - Content ............................... 2.0  
    	- Content A ......................... 2.1  
*/


/* - 1.0 - GLOBAL
---------------------------------------------- */

	/* - 1.1 - STRUCTURE
	---------------------------------------------- */
	
	body {
		font-family: 'Open Sans', sans-serif;
		font-size: 18px;
		color: #505a63;
	}
	
	.right {float:right}
	.left {float: left;}	
	
	@media (min-width: 768px) {}
	@media (min-width: 992px) {}
	
	@media (min-width: 1200px) {

		.container {
			width: px;
		}
		
	}	
	
	/* - 1.2 - TEXT
	---------------------------------------------- */	
	
	h1 {
		padding: 0 15px;
		margin: 0 0 15px 0;
		font-weight: 300;
		font-size: 30px;
	}
	
	h2 {
		font-size: 28px;
		color: #2a4269;
		font-weight: 300;
	}
	
	h3 {}
	
	h4 {
		font-family: 'niveaugrotesk_medium';
		font-size: 12px;
		color: #2a4269;
		text-transform: uppercase;
	}			
	

	
	p {	
		margin-bottom: 20px;
		font-size: 16px;
		color: #505a63;
		font-weight: 300;
	}
	
	ul, ol {
		padding-left: 0;
	}
	
	ul li, ol li {
		font-weight: 300;
		font-size: 16px;
		color: #505a63;
	}
	
	a {
		color: #2A4269;
	}
	
	a:focus,
	a:hover {}

		
	@media (min-width: 768px) {
	
		h1 {
			padding: 0;
			margin: 0 0 25px 0;
			font-size: 36px;
		}
		
		h2 {
			font-size: 32px;
		}	

		p {	
			font-size: 18px;
		}

		ul li, ol li {
			font-size: 18px;
		}
		
	}


	
	/* - 1.3 - FORMS
	---------------------------------------------- */		
	
	label {
		float:left;
		width: 100%;
		font-size: 13px;
		color: #2a4269;
		font-weight: 300;
		margin-bottom: 8px;
	}
	
	input {
		padding: 0 10px;
		height: 45px;
		float:left;
		width: 100%;
		border-radius: 5px;
		border: 1px solid #dcdcdc;
	}
	
	input:focus,
	input:active,
	textarea:focus,
	textarea:active {
		border: 1px solid #778fb5;
		box-shadow: 0px 0px 5px #778fb5;
	}
	
	textarea {
		padding: 0 10px;
		float:left;
		width: 100%;
		border-radius: 5px;
		border: 1px solid #dcdcdc;
		resize: none;
	}


	/* Default style */	
	.btn {
		background: transparent;
		border: 1px solid #fff;
		border-radius: 5px;
	    -moz-osx-font-smoothing: grayscale;
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    overflow: hidden;
	    transform: translateZ(0px);
	    transition-duration: 0.5s;
	    transition-property: color, background-color;
	    vertical-align: middle;
	}
	
	.btn:focus,
	.btn:hover {
	    animation-delay: 0.5s;
	    animation-duration: 1s;
	    animation-iteration-count: infinite;
	    animation-name: hvr-back-pulse;
	    animation-timing-function: linear;
	}

	/* Size */
	.btn-sm {}
	.btn-md {}
	.btn-lg {
		padding: 10px 20px;
		font-family: 'niveaugrotesk_bold';
		text-transform: uppercase;
		color: #fff;
		font-size: 12px;
	}

	/* Colors */
	.btn.white {
		border-color: #fff;
		background-color: transparent;
	}
	
	.btn.white:hover, 
	.btn.white:focus {
	    background-color: #fff;
	    color: #2a4269;		
	}

	.btn.blue {
		color: #2a4269;
		background-color: transparent;
		border-color: #97a2b5;
	}
	
	.btn.blue:hover, 
	.btn.blue:focus {
	    background-color: #2a4269;
	    color: #fff;
	    border-color:#2a4269;		
	}

	.btn.lightblue {
		color: #2a4269;
		background-color: #c7d2e2;
		border-color: #c7d2e2;
	}
	
	.btn.lightblue:hover, 
	.btn.lightblue:focus {
	    background-color: #2a4269;
	    color: #fff;
	    border-color:#2a4269;		
	}

	/* - 1.4 - HEADER
	---------------------------------------------- */	

	/* Top bar */
	.top_bar {
		position: fixed;
		top:0;
		width: 100%;
		background-color: #fff;
		z-index: 2;
		-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
		-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
		box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
	}
	
	.top_bar .tel_wrap {
		margin: 32px 0 0 15px;
		float:left;
	}

	.top_bar .tel_wrap .glyphicon {
		margin-right: 8px;
		font-size: 12px;
		color: #6d767e;
	}

	.top_bar .tel_wrap .tel {
		font-family: 'niveaugrotesk_medium';
		font-size: 14px;
		color: #6d767e;
	}

	.top_bar .logo_wrap {
		margin: 35px 0;
		float:left;
		width: 100%;
		text-align: center;
	}
		
	.top_bar .navbar {
		margin: 25px 0 0;
		border: 0;
		background-color: transparent;
	}
	
	.top_bar .navbar .logo_wrap {
		margin: 0;
	}
	
	.top_bar .navbar-collapse {
		padding: 0;
	}

	
	.top_bar .navbar .navbar-nav > li > a {
	    color: #6d767e;
	    border-top: 1px solid #efefef;
	}

	.navbar-nav {
	    margin: 0;
	}
	
	.navbar-brand {
		margin-bottom: 25px;
	}

	.top_bar .nav > li > a {
	    padding: 10px 15px;
	}
	
	.top_bar .navbar-nav > li > a {
	    padding-bottom: 15px; padding-top: 15px;
	    
	    font-family: 'niveaugrotesk_medium';
	    font-size: 14px;
	    line-height: 1.0;
	    text-transform: uppercase;
	}	

	.top_bar .navbar .navbar-nav > .open > a, 
	.top_bar .navbar .navbar-nav > .open > a:focus, 
	.top_bar .navbar .navbar-nav > .open > a:hover {
	    background-color: transparent;
	    color: #555;
	}
	
	.top_bar .navbar .navbar-nav > li > a:focus, 
	.top_bar .navbar .navbar-nav > li > a:hover {
	    background-color: transparent;
	    color: #2A4269;
	}	
	
	.top_bar .navbar .navbar-nav > .active > a, 
	.top_bar .navbar .navbar-nav > .active > a:focus, 
	.top_bar .navbar .navbar-nav > .active > a:hover {
	    background-color: transparent;
	    color: #2A4269;
	}

	.navbar-toggle .icon-bar {
	    background-color: #000;
	}

	/* Header */

	header {
		position: relative;
		display: table;
		width: 100%;	
	}

	header p {
		padding: 0 15px;
		margin: 0 auto 20px auto;
		max-width: 750px;
		line-height: 1.6;
	}

	header.home {
		height: 520px;		
		background: url('../img/placeholders/header_home.jpg') no-repeat center center; 
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
	
	header.home .center {
	    background: url('../img/placeholders/header_overlay.png') repeat center center; 	    
	    color: #fff;
	}


	
	header.home p, header.home h1 {
		color: #fff;
	}
	
	header p {
		padding: 0 15px;
		margin: 0 auto 20px auto;
		max-width: 750px;
		line-height: 1.6;
	}

	header.sub {
		height: 300px;		
		background: #f1f1f1 url('../img/placeholders/header_sub_op20.png') no-repeat bottom right; 
		background-size: 177px 265px;
	}
	
	
	
	header.sub h1 {
		margin-top: 10px;
		color: #2A4269;
	}
	
	header.sub p {
		color: #7c8389;
		max-width: 600px;
		text-shadow: 1px 1px 2px #fff;
	}		

	header.contact {
		height: 300px;		
		background-color: #fff;
	}

	header.contact h1 {
		color: #2A4269;
	}

	header.contact p {
		color: #7c8389;
		max-width: 700px;
	}

	header .center {
		padding-top: 100px;
	    display: table-cell;
	    position: relative;
	    text-align: center;
	    vertical-align: middle;
	    z-index: 1;	

	}



	
	@media (min-width: 768px) {
		
		.navbar-brand {
		    display: none;
		}	

		.top_bar .navbar .navbar-nav {
			float:right;
		}
		
		.top_bar .navbar {
			margin: 28px 0 22px;
		}	
		
		.top_bar .navbar .navbar-nav > li > a {
		    border-top: 0px solid #6D767E;
		}
		
		header.home {
			height: 550px;		
		}

		header p {
			margin: 0 auto 20px auto;
		}		
		
		header.sub {
			height: 540px;	
			background: #f1f1f1 url('../img/placeholders/header_sub.png') no-repeat bottom right; 
			background-size: 354px 531px;	
		}	
		
		header.sub p {
			text-shadow: none;
		}	
		
		header.contact {
			height: 450px;		
		}
		
			
	}

	
/* - 2.0 - CONTENT
---------------------------------------------- */

	/* - 2.1 - HOME
	---------------------------------------------- */	
	
	
	.home_services {
		padding: 30px 0;
		width: 100%;
		overflow: hidden;
	}
	
	.home_services h2 {
		margin-bottom: 30px;
	}
	
	@media (min-width: 768px) { 

		.home_services {
			padding: 30px 0 50px 0;
		}
		
	}


	/* - 2.2 - OVER
	---------------------------------------------- */	

	.about_content {
		padding: 30px 0;
		width: 100%;
	}	
	
	.about_content h2 {
		margin-bottom: 10px;
	}
	
	.about_content p {
		line-height: 1.7;
	}
	
	.about_content ul {
		padding-left: 20px;		
	}
	
	.about_content ul li {
		line-height: 1.7;		
	}

	@media (min-width: 768px) { 

		.about_content {
			padding: 50px 0;
		}
		
		.about_content h2 {
			margin-bottom: 20px;
		}
		
	}	
	
	/* - 2.3 - CONTACT
	---------------------------------------------- */
	
	/* Form */
	.contact_form {
		padding: 0px 0 60px;
		width: 100%;
		background-color: #f8f9fa;
	}	
	
	.contact_form h2 {
		margin-bottom: 10px;
	}
	
	.contact_form .container {
		max-width: 820px;
	}
	
	.contact_form form label{
		margin-top: 10px;
	}
	
	.contact_form form textarea {
		padding: 5px 10px;
		height: 150px;
	}
	
	.contact_form form .row.center {
		text-align: center;
	}
	
	.contact_form form .row .btn {
		width: 200px;
		margin: 30px auto 0 auto;
		float: none;
	}
	
	.contact_form .spmhidip {
		display: none;
	}
	
	.contact_form .error {
		padding-left: 10px;
		color: red;
		font-size: 11px;
		width: 100%;
		
	}
	
.alert-success {
    font-size: 12px;
}	
	
	@media (min-width: 768px) { 

		.contact_form {
			padding: 40px 0 70px;
		}
		
		.contact_form h2 {
			margin-bottom: 20px;
		}
		
	}	
	

	/* Route */
	.contact_route {
		padding: 30px 0;
		width: 100%;
	}	
	
	.contact_route h2 {
		margin-bottom: 10px;
	}	
	
	.contact_route ul {
		margin-left: 20px;
		margin-bottom: 30px;
	}
	
	.contact_route ul li{
		padding-left: 20px;
		line-height: 1.7;
		margin-bottom: 10px;
	}

	.contact_route  .btn{
		width: 170px;
	}
	
	.contact_route img {
		margin-top: 40px;
		width: 100%; height: auto;
		max-width: 750px;
	}
	
	@media (min-width: 768px) { 

		.contact_route {
			padding: 0px 0 70px 0;
		}
		
		.contact_route h2 {
			margin-top: 70px;
			margin-bottom: 20px;
		}
		
		.contact_route img { 
			margin-top: 0px;
		}
		
	}	
	
	

