@charset "UTF-8";
/* CSS Document */

* {
margin:0;
padding:0;
}

body {
	background-image:url(images/background.jpg);
	background-repeat:repeat-x;
	font-family: 'Roboto', sans-serif;
}

p, li, span {
	line-height: 24px;
}

p, li, span, h1, h2, h3 {
	font-family: "sofia-pro";
	color:#333;
}

p, ul, h1, h2, h3 {
	margin-bottom: 20px;
	font-weight:normal;
}

h1 {
	font-size:28px;
}

h2 {
	font-size:26px;
	line-height:36px;
	color:#333;
}

h3 {
	font-size:24px;
	line-height:34px;
	color:#333;
}

h4 {
	font-size:18px;
	line-height:30px;
	color:#555;
	font-weight:500;
}

a {
	color:#660000;
}

a:hover {
	text-decoration:none;
}

ul {
	padding:0 20px;
	}

li {
	list-style-type:square;
	margin-left:20px;
}


#wrapper {
	width:100%;
	float:left;
	position:relative;
}

#header {
	width: 1400px;
	height: 250px;
	position: relative;
	margin: auto;
}

#contact {
	float: right;
	margin-top: 70px;
	font-size: 20px;
}

#contact span {
	margin-left:30px;
}

#logo {
	float: left;
	z-index: 1;
	margin-top: 25px;
}

#tagline {
	width: auto;
	float: left;
	position: absolute;
	top: 67px;
	left: 216px;
}

#main {
	height:765px;
	width:100%;
	position:relative;
	background-position:center;
	margin:auto;
	background-image:url(images/mast-image.jpg);
	background-repeat:no-repeat;
	background-size:100%;
	background-position:top;
}

.main-inner {
	width:1400px;
	position:relative;
	margin:auto;
}

.main-content {
	width:100%;
	float:left;
}

.red {
	color: #8B010B;
}

#top-content {
	width:700px;
	opacity:0.8;
	position:absolute;
	top:20px;
	right:0;
	background-color:#fff;
	padding:25px;
}

#top-content p {
	margin-bottom: 12px;
}

.divider {
	float:left;
	height:40px;
	width:100%;
}

.divider-border {
	float:left;
	width:100%;
	margin-top:30px;
	border-top:2px solid #ddd;
	padding-bottom:50px;
}
	

.left-content {
	float:left;
	width:58%;
}

.right-content{
	float:right;
	width:38%;
}
.grey-back-outer {
	display:block;
	background:#ddd;
	float:left;
	width:100%;
	margin-bottom:20px;
}

.grey-back {
	padding:20px !important;
	float:left;
	margin:0;
}

#footer {
	float:left;
	width:100%;
	margin-bottom:30px;
}

@media only screen and (min-width: 1220px) and (max-width: 1472px) {

#header, .main-inner {
	width:1150px;
	
}

#top-content {
	width:630px;
	opacity:0.8;
	position:absolute;
	top:20;
	right:0;
	background-color:#fff;
	padding:10px 15px;
}


#contact {
	margin-top: 50px ;
	float:left;
	width:100%;
	color: #fff !important;
	font-size: 20px;
}

#contact span {
	display:block;
	text-align:center;
	margin-left:0;
}

#contact a, #contact span {
	color: #fff;
}

#logo {
		 float:left;
		 width:100%;
	 }
	 
	 .logo {
		 margin:auto;
		 float:none;
		 display:block;
	 }


}
 @media only screen and (min-width: 680px) and (max-width: 1220px) {
	 
	#header, .main-inner {
	width:660px;
	
}	
	 #logo {
		 float:left;
		 width:100%;
	 }
	 
	 .logo {
		 margin:auto;
		 float:none;
		 display:block;
	 }
	 
	 #contact {
	margin-top: 50px ;
	float:left;
	width:100%;
	color: #fff !important;
	font-size: 20px;
}

#contact span {
	display:block;
	text-align:center;
	margin-left:0;
}

#contact a, #contact span {
	color: #fff;
}
	 
	 #main {
		 width:660px;
		 margin:20px auto 20px;
		 height:325px;
		 background-size:100%;
	 }
	 
	 #top-content {
		 width:100%;
		 position:relative;
		 float:left;
		 top:0;
		 opacity:1;
		 padding:0;
		 margin-top:355px;
	 }
	 
	 .left-content, .right-content {
		 
		float:left;
		width:100%;
		 
	 }
	 
	 .left-content{
		 
		margin-bottom:30px;
		 
	 }
		 

}
 @media only screen and (min-width: 260px) and (max-width: 679px) {

	#header, .main-inner {
	width:360px;
	
}	
	 #logo {
		 float:left;
		 width:100%;
	 }
	 
	 .logo {
			float:none;
			display:block;
			margin: 14px auto;
			width: 260px;
			height:auto;
	 }
	 
#contact {
	margin-top: 30px ;
	float:left;
	width:100%;
	color: #fff !important;
	font-size: 20px;
}

#contact span {
	display:block;
	text-align:center;
	margin-left:0;
}

#contact a, #contact span {
	color: #fff;
}
	 
	 #main {
		 width:360px;
		 margin:20px auto 20px;
		 height:220px;
		 background-size:100%;
	 }
	 
	 #top-content {
		 width:100%;
		 position:relative;
		 float:left;
		 top:0;
		 opacity:1;
		 padding:0;
		 margin-top:230px;
	 }
	 
	 .left-content, .right-content {
		 
		float:left;
		width:100%;
		 
	 }
	 
	 .left-content{
		 
		margin-bottom:30px;
		 
	 }


}