﻿/* BEGIN RESET */
* {background:transparent; border:0; margin:0; padding:0; font-family: 'Open Sans', sans-serif; font-style:normal; font-weight: 400;  line-height:inherit; -webkit-text-size-adjust: none;}
ol, ul, li {list-style: none; font-size:15px; line-height:20px;}
ul {padding:0 0;}
.clear {clear: both; height:0px; margin:0;}

h2 {font-size:3rem; text-transform:uppercase; color:#012169;  font-weight:800; line-height:1.1em;}
h3 {font-size:2rem; text-transform: uppercase; color:#012169; font-weight: 600;}

p {font-size:15px; line-height:1.75rem;}

a {text-decoration:none;}

/* BASIC STYLES */
body {overflow-x:hidden; background:#fff;}
#contentwrap {width:90%; margin:0 auto;}
#pagewrap {width:100%; max-width:1200px; margin:4% auto 0;}
#pagewrap p {font-size:15px; margin-bottom:20px;}
#pagewrap ul {margin-top:-20px;}
#pagewrap li {line-height: 1.6rem;}

/* HEADER */
#topbar {background:#012169; padding:8px 0; text-align:right; text-transform: uppercase; font-weight: 600;}
#topbar a {color:#fff; font-size:18px;}
#topbar a:hover {color:#c8102e;}

header {background:#fff; padding:10px 0; width:100%; z-index:999999999; -moz-box-shadow: 1px 1px 3px 4px #ccc; -webkit-box-shadow: 1px 1px 3px 4px #ccc; box-shadow:1px 1px 3px 4px #ccc;}

.logo {float:left; width:19%; margin-top:.5%;}
.logo img {width:100%;}
.headerright {float:right; width:75%; font-size:24px; font-weight:700; padding-top:1.75%; text-align:right!important;}

nav.primary ul li li a {background-color: #012169!important;}
nav.primary ul ul {z-index: 500!important; top: 55px;}
nav.primary ul li:hover > ul {z-index: 500!important;}

/* CONTENT STYLES */
.hero{position: relative; overflow: hidden;}
.hero .cycle-slideshow{float: none; position: relative; text-align: center; height:590px; max-height: 590px; overflow: hidden;}
.hero .cycle-slideshow img{position: absolute !important; width: 100%; top: 50% !important; left: 50% !important; transform: translate(-50%,-50%) !important; z-index: 9;}
.hero-blk {font-family: 'Roboto Condensed', sans-serif; color: black; font-size: 26px;}
.hero-red {color: #c8102e; text-transform: uppercase;}
.hero-blue {color: #012169; font-family: 'Anton', sans-serif; font-size: 52px; text-transform: uppercase;}
/*h1 {font-size:5.75rem; line-height: 1em; text-transform:uppercase; color:#012169; font-weight: 800; letter-spacing:.01em; text-shadow:0 0 2px #000;}*/
/*h4 {font-size:3.5em; text-transform: uppercase; letter-spacing:.01em; text-shadow:0 0 10px #000;}*/


.hero .hero-links{position: absolute; top: 5%; width:50%; z-index: 100; color:#fff; padding-left: 5%; line-height: 45px;}

.outlinebtn {border:1px solid #c8102e; background:rgba(255, 255, 255, 0.7);  width:175px; font-size:16px; margin:10px auto; color:#012169; text-align:center;  font-weight: 600; float: left;}
.outlinebtn:hover  {background:#c8102e; color:#fff;}

.red {background:#c8102e; padding:5px 0; text-align:center; color:#fff; font-weight:400; width:100%; max-width:200px; margin:10px auto 0; cursor:pointer;}
.red:hover {background:linear-gradient(#c8102e, #ba0d29);}

.col_three {display:inline-block; width:33%; border-right:1px solid #000; text-align:center; vertical-align:top; height:525px; color:000;}
.col_three img {width:100%;}
.col_three_last {display:inline-block; width:33%; text-align:center; vertical-align:top; height:525px;}
.col_three_last img {width:100%;}

#mission {padding:3% 0 3%; color:#000; text-align:center; background: url(../siteart/bg.jpg) no-repeat center center fixed;  -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
	

/*MAP SECTION */
.map {width:100%; background:url(../siteart/map.jpg) no-repeat; background-position: right; background-size:cover;}
.map a {color:#fff;}
hr {border-bottom:1px solid #fff; margin-bottom:5px;}
.contactinfos {background:rgba(200, 16, 46, 0.7);  width:100%; max-width:750px; float:left; box-sizing:border-box; padding:1% 0 2%; margin:3% 0 3% 5%; text-align:center; color:#fff; letter-spacing: .1em;}
.contactinfos h1 {font-size:28px; color:#fff; margin-bottom:5px;}
.contactinfos h2 {font-size:16px; color:#fff;}

.infoinside {display:inline-block; width:49%; box-sizing:border-box; text-align:left!important; padding:3% 0% 1%; letter-spacing:0;}


/* SCROLLING INVENTORY */
.scrolling-wrap {width:100%; height:90px; overflow:hidden; padding:10px 0; background:#c8102e;}
.scrolling{width:100%; height:92px;}


/* FOOTER */
#colorblock {background:#012169; padding:15px 0; text-align:center; font-weight: 600;}
#colorblock a {color:#fff;}

footer {background:#fff; text-align:center;}
footer img {width:100%; max-width: 250px; margin:25px auto;}

#bottom {background:#eeeeee; padding:5px 0; color:#000; text-transform: uppercase; letter-spacing: .2em;}
#bottom p {font-size:13px!important;}
#bottom a {color:#000;}
#bottom a:hover {text-decoration: underline;}

.footer-li {display: inline-block; color: white; padding: 5px; font-weight: 700; width: 185px; text-align: right; font-size: 15px;}
.footer-li a:hover{border-bottom: 1px solid white;}
.social-footer-li {display: inline-block; color: white; padding: 5px; font-weight: 700; text-align: right;}
.social-footer-li a:hover{border-bottom: 1px solid white;}
.fa-facebook-square {font-size: 27px;}
.fa-linkedin {font-size: 28px;}

.footleft {float:left; width:50%;}
.footright {float:right; width:49%; text-align:right;}

/************************************************ Responsive Styles **/



@media screen and (max-width: 1850px)  {
	.logo {width:20%;}
	.headerright {width:80%; padding:20px 0 10px;}
	
	.hero .cycle-slideshow {max-height:550px;}
}

@media screen and (max-width: 1650px)  {
	.hero .cycle-slideshow {max-height:450px;}
}

@media screen and (max-width: 1480px)  {
	.logo {width:22%;}
	.headerright {width:78%;}
		
	.hero .cycle-slideshow {max-height:400px;}
}
	
@media screen and (max-width: 1350px)  {
    #topbar a {font-size: 15px;}
    
    .hero .hero-links {padding-left: 3%; line-height: 35px;}
    .hero-blk {font-size: 22px;}
    .hero-blue {font-size: 42px;}
    .outlinebtn {font-size: 13px; width: 145px;}
    
    .footer-ul {text-align: left;}
    .footer-li {width: auto; padding: 15px;}
}

@media screen and (max-width: 1280px)  {
	h2 {font-size:2.5em;}
	h3 {font-size:1.5em;}
	
	.logo {width:25%; margin-top:1.25%;}
	.headerright {width:75%;}
	
	.hero .cycle-slideshow {max-height:350px;}
	
	.col_three {height:450px; width:32%;}
	.col_three_last {height:450px;}
	
	#pagewrap {width:90%; max-width:90%; margin:2% auto 0;}
	
	.contactinfos h1 {font-size:24px;}
	.contactinfos h2 {font-size:15px;}
	.contactinfos {width:60%; margin:3% 0 3% 3%;}
}

@media screen and (max-width: 1200px)  {
    nav.primary ul li a {padding: 0px 7px!important;}
    
    .footer-li {padding: 7px;}
    .fa-facebook-square {font-size: 21px;}
    .fa-linkedin {font-size: 23px;}
}

@media screen and (max-width: 1024px)  {
	h2 {font-size:2em;}
	h3 {font-size:1.25em;}
	p {font-size:14px;}
	
	ol, ul, li {font-size:14px;}
	#pagewrap p {font-size:14px; margin-bottom:5px;}
	#pagewrap ul {margin-top:0;}
	
	#topbar a {font-size:16px;}
	.logo {width:27%; margin-top:2%;}
	.headerright {width:73%;}
	
	.hero .cycle-slideshow {max-height:300px;}
	
	.col_three {height:420px; width:32%;}
	.col_three_last {height:420px;}
	
	#bottom p {font-size:12px!important;}
}

@media screen and (max-width: 991px)  {
    .logo {display: block; margin: 2% auto 0px auto; width: 100%;}   
    .logo-img {width: 35%!important; margin:auto; display: block;}
    
    .headerright {width: 100%; text-align: center!important; padding: 0px;}
    
    .hero .hero-links {position: relative; text-align: center; width: auto; top: auto; padding: 25px 0px;}
    .outlinebtn {float: none;}
}

	
@media screen and (max-width: 950px)  {
	h2 {font-size:1.75em;}
	h3 {font-size:1em;}
	p {font-size:12px; line-height:1.5rem;}
	
	ol, ul, li {font-size:12px; line-height:1.5rem;}
	#pagewrap p {font-size:12px; line-height:1.5rem;}
	
	.hero .cycle-slideshow {max-height:235px;}
	
	.col_three {height:375px; width:32%;}
	.col_three_last {height:375px;}
	
	.contactinfos {width:100%; max-width:100%; margin:0 auto; padding:2% 0;}
	.infoinside {text-align:center!important;}
	
}
	
@media screen and (max-width: 767px)  {
	h2 {font-size:1.5em;}
	
    .logo-img {width: 50%!important;}
    
	#topbar a {font-size:16px;}
	.headerright {width:50%;}
    #menu-button {padding: 0px 0px 20px 0px; text-align: right;}
	
	.hero .cycle-slideshow {max-height:200px;}
	
	.col_three {display:block; width:90%; height:auto; border-right:none; border-bottom:1px solid #000; margin:1% auto; padding:3% 0;}
	.col_three img {width:75%;}
	.col_three_last {display:block; width:90%; height:auto; margin:1% auto; padding:3% 0;}
	.col_three_last img {width:75%;}
	
	.contactinfos h1 {font-size:24px;}
	.contactinfos h2 {font-size:13px;}
	
	#bottom p {font-size:10px!important;}
	.footleft {float:none; width:100%; text-align:center;}
	.footright {float:none; width:100%; text-align:center;}
    .footer-ul {text-align: center; padding: 5px 0px;}
    .footer-li {display: block; text-align: center; padding: 0px;}
}

@media screen and (max-width: 625px)  {
    #menu-button {padding: 20px 0px;}
    
    .hero .cycle-slideshow {max-height:150px;}
	
	.contactinfos h1 {font-size:22px;}
	.infoinside {display:block; width:100%;}
}

@media screen and (max-width: 500px)  {
	h2 {font-size:1.25em;}
    
    .logo-img {width: 80%!important; padding-bottom: 30px;
    }
	
	#topbar {text-align:center;}
	.headerright {float:none; width:100%; padding:0 0 5px;}
	
    
    .hero-blue {font-size: 36px;}
    
	#bottom p {font-size:9px!important;}
	
}

@media screen and (max-width: 415px)  {	
	#topbar a {font-size:12px;}
    
    .hero-blk {font-size: 20px;}
    .hero-blue {font-size: 30px;}
	
	.contactinfos h1 {font-size:20px;}
	
	.hero .cycle-slideshow {max-height:115px;}
	
}





