/* CSS Document */

body{
	font-family: 'Lato', sans-serif;
	margin:0;
	padding: 0;
	color: #221f1f;
	font-weight: 300;
	
}
.clear {clear:both};
h1,h2,h3,h4,h5 {font-weight: 200; font-family: 'Lato', sans-serif;}
h2{font-size: 2.4em; font-weight: 200;}
p{font-size:1.2em;}
a{text-decoration:none;}
a:hover{text-decoration:none;}

input, textarea, select{	
	background-color: #f5f4f4;
	border: 1px solid #cccecf;
	border-radius: 2px;
	color: #221f1f;
	width:90%;
	padding: 2%;
	margin: 1% auto;
	-webkit-appearance:none;
}

input[type=submit]{
	background: #921c0b;
	color: #fff;
	padding:3% 9%;
	border-radius: 5px;
	font-weight: 400;
	width: auto;
	float:right;
	margin-right: 5%;
	-webkit-appearance:none; 
	
}

input:focus, textarea:focus{-webkit-appearance:none;
		outline:none;
		-webkit-box-shadow: 0px 0px 5px 0px rgba(173, 167, 153, 0.5);
-moz-box-shadow:    0px 0px 5px 0px rgba(173, 167, 153, 0.5);
box-shadow:         0px 0px 5px 0px rgba(173, 167, 153, 0.5); 
		}


.center{text-align:center;}
.left{text-align:left;} 
.right{text-align:right;}
.fl-right{float:right;}
.fl-left{float:left;}
.larger-text {font-size: 1.3em;}

.button{
	display: inline-block;
	background: #921c0b;
	color: #fff;
	padding:3% 9%;
	border-radius: 5px;
	font-weight: 400;
}
input[type=submit],button{
	background: #921c0b;
	color: #fff;
	padding:3% 9%;
	border-radius: 5px;
	font-weight: 400;
}
ul{list-style:none; padding:0;}

.red{ color: #921c09;}
.white { color: #fff;}
.grey { color: #888888;}
.light-grey{color: #d2d2d2}

/* overwriting bootstrap navbar styles */

.navbar-default img{display:block;}

.navbar-default {
	padding-bottom: 20px;
	border:none;
	background: url("/img/ui/top-shadow.png") no-repeat;
	background-position: bottom center;
	background-size: 85%;
	padding-top: 2%;
}

.navbar-default .navbar-nav>li>a {
	text-transform: uppercase; 
	font-weight: 400;
	color: #221f1f;
	font-size: 1.1em;
}

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a.active{color: #921c0b; }

.navbar-default img{margin-top: -20px;  }
.navbar-default .navbar-collapse {border-color: #921c0b;}

/* begin page styles */


.large-photo img{width: 100%;}
.large-photo h2{
	font-size: 2.8em;
	margin-bottom: 4%;
	font-weight: 600;
	font-style:italic;
}

.large-photo .text{
	font-weight: 500;
	color: #383838;
	margin-bottom: 9%;
	margin: -8% 15px 9% 15px;
	
}

.left-text{margin-right: 5%;}
.right-text{margin-left: 5%;}


.dark-grey{
	background: #383838;
	color: #bebebe;
	padding: 4% 0% 6% 0%;
	
}

.light-grey{
	background: #ededed;
	color: #929292;
	padding: 4% 0% 6% 0%;
}


.light-grey h1, .dark-grey h1{
	font-weight: 100;
	font-size: 3em;
	margin-bottom: 3%;
}


.light-grey p{ 
	color: #383838;
	padding-right: 13%;
	
}
.dark-grey p{ 	
	color: #e5e5e5;
	padding-left: 13%
}

.light-grey p, .dark-grey p{
	font-size: 1.1em; 
	font-weight: 500;
	margin-top: 4%;
	
}

.dark-grey h3{
	
	color: #d2d2d2;
}
.light-grey h3{
}

.light-grey h3, .dark-grey h3{
	font-size: 1.7em;
	font-weight: bold;
	font-style: italic;
	
}



.light-grey img, .dark-grey img{
	border: 5px solid #616161
	}
	
.service-section h3 {margin-bottom: 7%;}
	
.arrow-light{
	display:block; 
	height: 54px;
	background: url('/img/ui/icon-arrow-white') no-repeat top center;
	margin-bottom: -54px; 
	z-index: 999;
	position:relative;
}
.arrow-dark{
	display:block; 
	height: 54px;
	background: url('/img/ui/icon-arrow-grey') no-repeat top center;
	margin-bottom: -54px; 
	z-index: 999;
	position:relative;
}

.arrow-area{font-weight: 600;
font-size: .8em;
margin: 7% 0 3%;}
.arrow-area img{margin-top: -10px; }
.arrow-area-short{font-weight: 600; font-size: .8em; margin: 3% 0;}
.arrow-area-short img{margin-top: -10px; }

/* ==navigation == */

.sub-nav{background: #921c0b; text-align:center;}
.sub-nav ul{margin:auto;}
.sub-nav ul li{float:left; padding: 1% 0; width: 20%; text-align:center;}
.sub-nav ul li:hover{background: #540300}
.sub-nav a{color: #fff;}

.fixed {position: fixed; top:0; width: 100%; z-index: 9999; margin-left: -15px; margin-right: 15px;}

#slider {
    max-width: 100%;
}
#slider img {
    max-width: 100%;
    height: auto;
    width: auto; /* ie8 fix*/

}


/* ==index specific styles ==*/

 #slider{ margin-top: -20%;}
.slider-page h2, .slider-top h2{font-size: 2.5em; font-weight: 200; margin-top: 20%;}
/*.slider-top{margin-top: 4%}*/
.slider-bottom {background-color: #ededed;}
.index .dark-grey{
	text-align:center;
	padding: 4% 0 8% 0;
}
.index .dark-grey h3{
	font-size: 1.7em;
	font-weight: 400;
	font-style: italic;
	color: #d2d2d2;
	/* margin-right: 5%; */
}

.index .dark-grey img{
	 width: 80%;
	 margin:auto;
	 margin-bottom: 6%;
	
}
.index .dark-grey p{ 	
	padding:3% 0;
	width: 90%;
	margin:auto;
}

.index .dark-grey p{ margin-bottom: 3%;}

/*== Contact Page */


.google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
		width: 80%;
		margin:auto;
    }
.google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
		border:none;
 }
 
 .contact { margin-bottom: 5%;}
 .contact h1{color: #921C0B; font-size: 3em; margin-bottom: 3%;}
 .red-arrow{margin-bottom: 2%;}
 .address p{font-size: 1.7em; color:#921C0B }

/* == Footer styles */
 footer{	
 	text-align:center;
 	background:#ededed;
	}
 
footer ul{display:inline-block;}
footer ul li{float:left;}
.footer-top{padding: 4% 0;}
.footer-top p{ 
	font-size: 2em;
	font-weight: 200;
	margin-left: 15px;
	margin-right: 15px;

}
.footer-bottom {
	background: #221f1f;
	color: #a2a2a2;
	padding: 1% 0;
	font-size: .9em;
	font-weight: 500;
	font-family: 'Titillium Web', sans-serif;
	}
.footer-bottom a{color:#bcbbbb }
.footer-bottom a:hover{color:#ededed }

.popover{ font-family: font-family: 'Lato', sans-serif; font-size: 1.3em;}
.margin-fix{padding-top: 400px}

@media only screen and (max-width: 1200px){
	.dark-grey h3 {font-size: 1.5em;}
	.index .dark-grey .button{min-height: 4em;}
}

@media only screen and (max-width: 991px){
	.sub-nav ul li{width: auto; padding: 2% 1.3%;}
		.light-grey h1, .dark-grey h1{
	font-weight: 100;
	font-size: 2em;
	margin-bottom: 3%;
}
}

@media only screen and (max-width: 961px){
	.slider h2{font-size: 2em;}
	
}


@media only screen and (max-width: 768px){
	.dark-grey img, .light-grey img{margin:auto;}
	.dark-grey p,.dark-grey h2, .light-grey p, .light-grey h2{padding:0;}
	.right, .left{text-align:center;}
	.left-text, .right-text{margin:auto; text-align:center;}
	.index #slider{margin-top:auto;}
	.dark-grey h1{font-size: 2em; margin-bottom: 8%;}
	.slider-page h2, .slider-top h2{margin-top: 5%;}
	.slider-bottom {background-color: #fff;}
	 #slider{ margin-top: 0%;}
	.arrow-area{margin-top: 3%;}
	.button {
		width: 100%; 
		padding: 4%; 
		display:block; 
		margin:1%auto; 
		min-height: auto;
		}
	.index .dark-grey .button{
		min-height: .1em;
		padding:3%;
		
		
	}
	.sub-nav ul{padding: 0;}
		
	.sub-nav ul li{
		float:none; 
		display:block; 
		background: #921c0b; 
		margin: 1.5% auto;
		border-radius: 5px;
		}
		
	.sub-nav{background:#383838;}
	.fl-right, .fl-left{float:none; text-align:center;}
	
	input[type=submit]{
	width: 90%;
	display:block;
	}
	
	.address{padding-top: 5%;}

		
}

@media only screen and (max-width: 480px){
	.logo{margin-top: 5%;}
	.logo img{max-width: 190px;}
	
	.dark-grey h1{font-size: 1.7em;}
	.dark-grey h3{font-size: 1em;}
	.large-photo h2 {font-size: 2em; margin-bottom: 7%;}
	.slider h2{font-size: 1.7em;}
	.dark-grey img, .light-grey img{margin-bottom: 5%;}
	.address p{font-size: 1.5em;}
	.address h2{font-size: 1.9em;}
	
}