/* 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; -webkit-text-size-adjust:none;}

/* FRAMEWORK */
html, body{font-family: 'Roboto Condensed', sans-serif; font-size: 14px; -webkit-text-size-adjust: none}
::-moz-selection{background: #ab2312; color: #fff; text-shadow: none} ::selection{background: #ab2312; color: #fff; text-shadow: none}

.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: 5px 25px 5px  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;}

.column4 img {width:100%; margin-bottom:3px;} 

/* TYPOGRAPHY */
h1 {font-size:30px; text-transform: uppercase;}
h2 {font-size:26px;}
h3 {font-size:20px;}
h4 {font-size:18px; margin-top:10px;}

p {font-size:16px; line-height:1.5em;}
a{text-decoration: none; color: inherit; transition: all .2s ease-in-out;} a:hover{color: inherit;}

/* HEADER */

header{position:fixed; background:#fff; top:0; width:100%; box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.25);  z-index:99999;}
.logo{position:absolute; top:10%; left:5%; z-index:99999999; width:100%; max-width:275px;}
.logo img {width:100%;}
.bar {position:relative;text-align: right; font-size:18px;padding:10px 0;}
.bar img {width:auto; /*max-width: 210px*/ max-height: 60px; margin:0 .5%;}
.socialmedia {display:inline-block; font-size: 60px; margin-left: 10px; color: #004b8d}
.socialmedia a{display: inline-block; width: 50px; }
.socialmedia img{display: inline-block; max-width: 50px; }

/* CONTENT */
#sitewrap {margin-top:177px;}
.colleft {float:left; width:20%; background:url('../siteart/bg.jpg') no-repeat; background-size:cover; background-color:#000000; height:1000px; color:#fff; font-size:20px; line-height:2.75em; padding:1% 2% .5% 3%;}
.colleft a:hover {color:#ccc;}
.tag {background:#fff; height:25px; width:25px; padding:5px 8px; border-radius:100px; color:#ab2312; font-size:20px!important;}

.colmeio {background:url('../siteart/slide/3-bw.jpg') no-repeat; background-color:#000000; background-size:cover; height:1000px; float:left; width:60%;}
.colmeio img {display:none;}

.colright {float:right; width:20%; background:url('../siteart/bg.jpg') no-repeat; background-size:cover; background-color:#000000; height:1000px; color:#fff; font-size:20px; line-height:2.75em; padding:1% 2% .5% 3%;}
.colright a:hover {color:#ccc;}
.colright p{ margin:-5px 0 0 44px;}

#colorblock {background:#282828;}
.col4 {display:inline-block; width:24%; text-align:center; color:#fff; border-right:1px solid #333; padding:20px 0;}
.col4_last {display:inline-block; width:24%; text-align:center; color:#fff; padding:20px 0;}
#colorblock .fa:hover {padding-left:10px;}

.main{width: 90%; margin: 0 auto;}

.main-small{position: relative; margin: 0 auto 0px; padding: 35px 20px; width:75%;}

.redblock {background:#ab2312; color:#fff; text-align:center; padding:5px 0;}

.specwrap {display:inline-block; width:23%; border:1px solid #000; padding:2%; text-align:center; margin:.25%;}
.specwrap img {width:75%; margin:0 auto 10px auto;}
.specwrap:hover {border:1px solid #ab2312; }
.specwrap p{font-weight: 900;  color:#ab2312}
.shipar img{max-width: 150px!important; width: 100%!important;}



/* FOOTER */
footer {background:url('../siteart/texture.jpg') repeat; padding:15px 0;}
.footleft {float:left; width:50%;}
.footertext {display:inline-block; width:33%; margin-right:1%;}
.googleplay {max-width:150px; width:100%; margin-top:10px;}
.footright {float:right; width:20%; text-align:center; font-weight: bold;}
.col1 {display:inline-block; vertical-align: middle; width:30%;}
.col2 {display:inline-block; vertical-align: middle; width:28%; margin-left:2%; text-align:left!important;}
.col2 img {width:85%;}
.outlinebtn {width:100%; border:1px solid #000; text-align:center; text-transform: uppercase; font-size:18px; font-weight: 700; margin-bottom:5px;}
.outlinebtn:hover {border:1px solid #ab2312; color:#ab2312;}

/* RESPONSIVE */

@media screen and (max-width: 1675px){
	.footertext {width:39%;}
	.col2 {width:33%;}
	.col2 img {width:75%;}
}

@media screen and (max-width: 1400px){
	.bar {font-size:16px;}
	.logo {max-width:225px;}
	
	.footertext {width:45%;}
	.col2 {width:39%;}
	.col2 img {width:75%;}
	.outlinebtn {font-size:17px;}
}

@media screen and (max-width: 1230px){
	h2 {font-size:22px;}
	.bar {font-size:14px;}
	.logo {max-width:150px; top:25%;}
	#sitewrap {margin-top:170px;}
	
	.footertext {width:53%;}
	.col1 {width:40%;}
	.col2 {width:47%;}
	.col2 img {width:75%;}
	.outlinebtn {font-size:16px;}
    
	.colleft {font-size:16px; line-height:2.25em; height:800px;}
    .colright {font-size:16px; line-height:2.25em; height:800px;}
	.tag {height:20px; width:20px; padding:1px 4px; font-size:12px!important;}
    .colright p{margin:-4px 0 0 20px}
    .colmeio {height:800px;}
    
	.footright {width:25%;}
}
@media screen and (max-width: 1080px){
	h1 {font-size:26px;}
	h2 {font-size:20px;}
	h3 {font-size:18px;}
	p {font-size:14px;}
	#sitewrap {margin-top: 160px;}
	.main-small {width:90%;}
	
	.outlinebtn {font-size:14px;}
	
	.footertext {width:56%;}
	.googleplay {max-width:100px;}
	.col2 {width:53%;}
	.col2 img {width:65%;}
}

@media screen and (max-width: 1010px){

	.bar {font-size:12px;}
	.bar img {max-height:30px;}
    .socialmedia a{display: inline-block; width: 50px; }
    .socialmedia img{display: inline-block; max-width: 50px; }
	
}

@media screen and (max-width: 865px){
	h1 {font-size:24px;}
	h2 {font-size:17px;}
	h3 {font-size:16px;}
		
	
	.colleft, .colright {font-size:15px; height:775px;}
	.colmeio{height:775px;}
	
	.specwrap {width:31%;}
		
	.footleft {float:none; width:100%; text-align:center;}
	.footright {float:none; width:100%;}
	.col1 {display:block; width:100%;}
	.col2 {display:block; width:100%; text-align:center!important;}
	.col2 img {width:100%; max-width:200px; margin:0 auto;}
	.footertext {display:block; width:100%;}
	.googleplay {margin:10px auto;}
}

@media screen and (max-width: 760px){
	h1 {font-size:24px;}
	h2 {font-size:16px;}
	p {font-size:13px;}
	
	
	header {position:relative;}
	.logo {max-width:140px;  top:33%;}
	
	#sitewrap {margin-top:0;}
			
	.colleft, .colright {display:none;}
	.colmeio {float:none; width:100%; height:auto;}
	.colmeio img {display:block;}
	
}

@media screen and (max-width: 690px){
	h1 {font-size:22px;}
	.col4 {display:block; width:100%; margin:0 auto; border-left:none; border-bottom:1px solid #333;}
	.col4_last {display:block; width:100%; margin:0 auto;}
	
	.column4 {display:block; float:none; width:100%; margin:10px auto;}
	.column8 {display:block; float:none; width:100%; margin:10px auto;}
	
	.specwrap {width:49%;}
	
	.footleft {float:none; width:100%; text-align:center;}
	.footright {float:none; width:100%;}
	.col1 {display:block; width:100%;}
	.col2 {display:block; width:100%; text-align:center!important;}
	.col2 img {width:100%; max-width:200px; margin:0 auto;}
	.footertext {display:block; width:100%;}
	.googleplay {margin:10px auto;}
	
}

@media screen and (max-width: 480px){
	h1 {font-size:20px;}
	.logo {position: relative; width:90%; max-width:250px; margin:0 auto; top:0%; left:0;}
	.bar {text-align:center;}
	.bar img {max-width:150px;}
	
}


@media screen and (max-width: 375px){
.specwrap {width:100%; margin:1% auto;}
}