/* RESET */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{background: transparent; border: 0; margin: 0; padding: 0;} ol, ul{list-style: none;} img{max-width: 100%; height: auto; image-rendering: -webkit-optimize-contrast;}

/* FRAMEWORK */

html, body{font-family: 'Open Sans', sans-serif; font-size: 14px; -webkit-text-size-adjust: none}
::-moz-selection{background: #BA0722; color: #fff; text-shadow: none} ::selection{background: #BA0722; color: #fff; text-shadow: none}

.main{padding: 50px 0;}
.pg-container{max-width: 1200px; margin: 0 auto; padding: 0 20px;}

.column12, .column11, .column10, .column9, .column8, .column7, .column6, .column5, .column4, .column3, .column2, .column1{float: left; padding: 0 25px 0 0;} .column12{width: 100%;} .column11{width: 91.6666%;} .column10{width: 83.3333%;} .column9{width: 75%;} .column8{width: 66.6666%;} .column7{width: 58.3333%;} .column6{width: 50%;} .column5{width: 41.6666%;} .column4{width: 33.3333%;} .column3{width: 25%;} .column2{width: 16.6666%;} .column1{width: 8.3333%;} .last{padding: 0;} .cf{zoom: 1;} .cf:before, .cf:after{content: ""; display: table;} .cf:after{clear: both;} .clear{clear: both;} *{box-sizing: border-box;}

/* TYPOGRAPHY */

a{text-decoration: none; color: inherit; transition: all .2s ease-in-out;} a:hover{color: inherit;}

/* HEADER */

.top-header{background: #eee; padding: 10px 0; text-align: right;}
.top-header span{margin-left: 15px;}
.top-header .fa{color: #BA0722; margin-right: 5px;}

.header{padding: 25px 0; box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.15);}
.header .logo{float: left; width: 300px;}
.header .phone{display: none; padding: 10px 0; font-weight: 700; text-align: center;}
.header .phone .fa{color: #BA0722; margin-right: 5px;}

/* NAVIGATION */

#cssmenulist{float: right; width: calc(100% - 300px); position: relative; z-index: 99999;}
#cssmenulist ul{font-size: 0; text-align: right;}
#cssmenulist ul li{display: inline-block; position: relative;}
#cssmenulist ul li a{display: block; font-size: 18px; color: #BA0722; margin: 0 25px; padding: 10px 0; border-bottom: 2px transparent solid;}
#cssmenulist > ul > li:hover > a{border-bottom: 2px #ccc solid;}
#cssmenulist #menu-button{display: none;}

/* BODY */
.hero{position: relative; color: #fff;}
.hero .hero-text{position: absolute; width: 100%; bottom: 0; background: rgba(186,7,34,.6); padding: 20px;  z-index: 9999;}

.hero .hero-text h1 {font-size: 24px; font-weight: 700; text-align: center;}
.hero img{display: block; width: 100%; border: 1px #fff solid;}

.zoom-container{display: flex;}
.zoom-container .zoom{flex: 1; position: relative; font-size: 16px; border: 1px solid #fff; overflow: hidden;}
.zoom-container .zoom .zoom-bg img{display: block; width: 100%; height: auto; transition: all .5s ease;}
.zoom-container .zoom .zoom-caption{position: absolute; height: 100%; width: 100%; background: rgba(0, 0, 0, .5); z-index: 10; transition: all .5s ease;}
.zoom-container .zoom .zoom-caption div{position: absolute; width: 100%; top: 50%; transform: translateY(-50%); text-align: center;}
.zoom-container .zoom .zoom-caption div img{display: inline-block; max-height: 50px; vertical-align: middle; margin-right: 10px;}
.zoom-container .zoom .zoom-caption div h2{display: inline-block; font-size: 20px; text-align: center; color: #fff;}
.zoom-container .zoom:hover .zoom-bg img{transform: scale(1.25);}
.zoom-container .zoom:hover .zoom-caption{background: 0 0;}

.scrolling-wrap{width: 100%; height: 90px; overflow: hidden;}
.scrolling{width: 100%; height: 92px;}

/* FOOTER */

.top-footer{display: flex; flex-wrap: wrap;}
.top-footer .map{width: 60%;}
.top-footer .map iframe{display: block;}
.top-footer .contact{width: 40%; position: relative; background: url("../siteart/contact.jpg") center center; background-size: cover; padding: 75px; font-size: 18px; line-height: 32px; overflow: hidden;}
.top-footer .contact div{position: absolute; width: 100%; top: 50%; transform: translateY(-50%);}
.top-footer .contact h3{font-size: 24px; color: #BA0722; margin-bottom: 10px;}
.top-footer .contact .fa{color: #BA0722; margin-right: 5px;}
.top-footer .contact span{padding-left: 20px;}

.footer-nav{background: #BA0722; padding: 15px 0; text-align: center;}
.footer-nav ul li{display: inline-block;}
.footer-nav ul li a{display: block; padding: 0 15px; font-size: 16px; color: #fff;}
.footer{background: #eee; padding: 25px 0; font-size: 12px; text-align: center;}

/* RESPONSIVE */

@media screen and (max-width: 1024px){
    .top-header{display: none;}
    .header .phone{display: block;}
	.main{padding: 30px 0;}
    
    .header, .header .container{padding: 0;}
    .header .logo{float: none; width: 100%; text-align: center; padding: 25px 20px 0;}
    .header .logo img{max-height: 35px;}
	#cssmenulist{float: none; width: 100%; background: #eee;}
	#cssmenulist ul{width: 100%; display: none; text-align: left;}
	#cssmenulist ul li{width: 100%; border: none; border-top: 1px solid #ccc;}
	#cssmenulist ul li a{font-size: 12px; padding: 15px 20px; width: 100%; margin: 0; color: #000; border-bottom: none;}
    #cssmenulist > ul > li:hover > a{background: #ddd; border-bottom: none;}
	#cssmenulist #menu-button{display: block; padding: 20px; color: #BA0722; cursor: pointer; font-size: 12px; font-weight: 700; text-transform: uppercase;}
	#cssmenulist #menu-button::after{position: absolute; top: 19px; right: 20px; font-family: FontAwesome; font-size: 16px; content: '\f0c9';}
    
    .zoom-container{display: block;}
    .zoom-container .zoom{flex: none; border: none;}
    
    .top-footer{display: block;}
    .top-footer .map, .top-footer .contact{width: 100%;}
    .top-footer .contact div{position: relative; top: 0; transform: none;}
}
@media screen and (max-width: 768px){
    .hero .hero-text{background: #BA0722; position: relative; font-size: 16px;}
    .zoom-container .zoom .zoom-caption div img{max-height: 35px;}
    
    .footer-nav{display: none;}
    .footer{background: #BA0722; color: #fff;}
}
@media screen and (max-width: 480px){
    .top-footer .contact{padding: 25px 20px;}
}