@-ms-viewport{
  width: device-width;
}

.wrapper, .boxed-layout .wrapper{
	width: 100% !important;
	min-width: 100% !important;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

html{
    width: 100% !important;
    overflow-x: hidden !important;
}

body{
    width: 100% !important;
    height: auto !important;
    margin: 0px !important;
    padding: 0px !important;
    min-width: 0px !important;
    background-image: url(../img/bg.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;
    background-color: #2d170c;
    background-size: 100%;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.stretched-layout .wrapper{
  background: white !important;
  padding-bottom: 20px !important;
}


hr.style-one {
    border: 0;
    height: 1px;
    background: #333;
    background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:    -moz-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:     -ms-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:      -o-linear-gradient(left, #ccc, #333, #ccc); 
}

hr.style-two {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
}

hr.style-three {
    border: 0;
    border-bottom: 1px dashed #333;
    background: #333;
}

hr.style-four {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

#wrap{
	position:fixed;; 
	z-index:-1; 
	top:0; 
	left:0; 
	background-color:black
}

#wrap img.bgfade{
	position:absolute;
	top:0;
	display:none;
	width:100%;
	height:100%;
	z-index:-1
}

#fw{
	width: 100%;
	height: auto;
	display: table;
}

.style1{
	font-family: Arial;
	font-size: 24px;
}

.style2{
	font-family: Arial;
	font-size: 13px;
}

.style3{
	font-family: Arial;
	font-size: 14px;
}

.style4{
    font-family:  "SEGOEUIL";
    font-size: 30px;
}

.style5{
    font-family:  'SegoeUIRegular';
    font-size: 16px;
}

.style6{
    font-family:  "SEGOEUIL";
    font-size: 26px;
}

.style7{
    font-family: Arial;
    font-size: 17px;
}

.style8{
    font-family:  'SegoeUIRegular';
    font-size: 20px;
}

.style91{
    font-family:  "SEGOEUIL";
    font-size: 20px;
}

.style10{
    font-family: "bebas";
}

.fsize18{
    font-size: 18px;
}


.fsize20{
    font-size: 20px;
}

.fsize30{
    font-size: 30px;
}

.fsize40{
    font-size: 200%;
}


.greenl{
    color: #6dad08;
}


.green{
    color: darkgreen;
}
.blue{
    color: blue;
}

.justify{
	text-align: justify;
}

.grey{
    color: #999;
}

.white{
    color: #FFF;
}

.bluel{
    color: aqua;
}

#colm4 {
  width: 23%;
  height: auto;
  display: table;
  margin: 1%;
}

.left {
  float: left !important;
}

a:link {
  color: white;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: white;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: white;
  background-color: transparent;
  text-decoration: none;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}



@font-face
{font-family: "euphemia"; src:url(../fonts/euphemia.ttf);}

@font-face
{font-family: "bebas"; src:url(../fonts/BEBAS.ttf);}

@font-face {
    font-family: 'EstelleBlackSFRegular';
    src: url('../fonts/este.eot');
    src: url('../fonts/este.eot') format('embedded-opentype'),
         url('../fonts/este.woff') format('woff'),
         url('../fonts/este.ttf') format('truetype'),
         url('../fonts/este.svg#EstelleBlackSFRegular') format('svg');
}

@font-face {
    font-family: 'EthnocentricRegular';
    src: url('../fonts/ethnocen.eot');
    src: url('../fonts/ethnocen.eot') format('embedded-opentype'),
         url('../fonts/ethnocen.woff') format('woff'),
         url('../fonts/ethnocen.ttf') format('truetype'),
         url('../fonts/ethnocen.svg#EthnocentricRegular') format('svg');
}

@font-face {
    font-family: 'FattRegular';
    src: url('../fonts/fatt___.eot');
    src: url('../fonts/fatt___.eot') format('embedded-opentype'),
         url('../fonts/fatt___.woff') format('woff'),
         url('../fonts/fatt___.ttf') format('truetype'),
         url('../fonts/fatt___.svg#FattRegular') format('svg');
}

@font-face {
    font-family: 'FontleroyBrownNFRegular';
    src: url('../fonts/fontleroybrownnf.eot');
    src: url('../fonts/fontleroybrownnf.eot') format('embedded-opentype'),
         url('../fonts/fontleroybrownnf.woff') format('woff'),
         url('../fonts/fontleroybrownnf.ttf') format('truetype'),
         url('../fonts/fontleroybrownnf.svg#FontleroyBrownNFRegular') format('svg');
}

@font-face {
    font-family: 'FreebooterScriptRegular';
    src: url('../fonts/freebsc.eot');
    src: url('../fonts/freebsc.eot') format('embedded-opentype'),
         url('../fonts/freebsc.woff') format('woff'),
         url('../fonts/freebsc.ttf') format('truetype'),
         url('../fonts/freebsc.svg#FreebooterScriptRegular') format('svg');
}

@font-face {
    font-family: 'FreestyleScriptRegular';
    src: url('../fonts/freescpt.eot');
    src: url('../fonts/freescpt.eot') format('embedded-opentype'),
         url('../fonts/freescpt.woff') format('woff'),
         url('../fonts/freescpt.ttf') format('truetype'),
         url('../fonts/freescpt.svg#FreestyleScriptRegular') format('svg');
}

@font-face{
            font-family: "SEGOEUIL";
            src: url('http://www.fontsforweb.com/public/fonts/1409/SEGOEUIL.eot');
            src: local("Segoe UI Light"), url('http://www.fontsforweb.com/public/fonts/1409/SEGOEUIL.woff') format("woff"), url('http://www.fontsforweb.com/public/fonts/1409/SEGOEUIL.ttf') format("truetype");}
            
@font-face {
    font-family: 'SegoeUIBold';
    src: url('../fonts/segoeuib_3.eot');
    src: url('../fonts/segoeuib_3.eot') format('embedded-opentype'),
         url('../fonts/segoeuib_3.woff') format('woff'),
         url('../fonts/segoeuib_3.ttf') format('truetype'),
         url('../fonts/segoeuib_3.svg#SegoeUIBold') format('svg');
}

@font-face {
    font-family: 'SegoeUIRegular';
    src: url('../fonts/segoeui_3.eot');
    src: url('../fonts/segoeui_3.eot') format('embedded-opentype'),
         url('../fonts/segoeui_3.woff') format('woff'),
         url('../fonts/segoeui_3.ttf') format('truetype'),
         url('../fonts/segoeui_3.svg#SegoeUIRegular') format('svg');
}

.bgwt{ background-color: #FFF; display: table;}
.bgblue{ background-color: #115ea3; display: table;}
.bgcyan{ background-color: #28aae1; display: table;}
.bggry{ background-color: beige; display: table;}
.bgyel{ background-color:  #f8c108; display: table;}
.bglgren{ background-color:  #92f602; display: table;}
.bgdrkbrwn{ background-color: #3b0e02; display: table;}
.bgltbrwn{ background-color: #994715; display: table;}

.cwt{ color: #FFF;}
.cgrey{ color: #999;}
.cblue{ color: #115ea3;}
.cblack{ color: #000;}

.tshd{ text-shadow: rgb(3, 3, 3) 3px 2px 4px;}

.pt10{padding-top: 10px;}
.pt20{padding-top: 20px;}

.pb10{padding-bottom: 10px;}
.pb20{padding-bottom: 20px;}

.p10{padding: 10px;}
.p20{padding: 20px;}

.mt20{margin-top: 20px;}

.mtb20{margin-top: 20px; margin-bottom: 20px}

.flolft{ float: left;}
.florgt{ float: right;}

.imgfw img{ width: 100%; height: auto;}


/* ---- header --- */
header{
    width: 100%;  height: auto; display: table;
}

#logo{
    width: 35%; height: auto; margin: auto; float: left; margin-left: 17%; margin-top: 10px;
}

#since{
    width: auto; height: auto; float: left; margin: 10px auto auto 20px; display: table;
}

#callus{
    width: auto; height: auto; float: right; margin: 10px 20px auto auto; display: table;
}

#logomobile, #sincemobile, #callusmobile{
    display:none;
}

@media only screen and (min-width: 120px) and (max-width: 800px){
   
#logo, #since, #callus{
    display:none;
}

#logomobile{
    width: 70%; height: auto; margin: auto; float: none; margin: 10px auto; display: table;
}

#sincemobile{
    width: 15%; height: auto; float: left; margin-left: 20%; margin-top: 20px; display: table;
}

#callusmobile{
    width: 30%; height: auto; float: right; margin-right: 10%; margin-top: 20px; display: table;
}

#logomobile img, #sincemobile img, #callusmobile img{
    width:100%; height: auto;
}

  #colm4 {
    width: 80%;
    height: auto;
    float: none;
    display: table;
    margin: 10px auto 10px auto;
  }

  .left {
  float: none !important;
}


}


/* --- menu --- */
nav{
    width: 100%; height: 50px; text-align: center; display: table; background-image: url(../img/menubg.jpg); background-repeat: repeat-y;  background-position: center top; padding: -20px !important;
}



/* --- banner --- */
#bannermain{
    width: 70%; height: auto;  float: left; display: table;
}

#bannerbrands{
    width: 30%; height: auto; float: right; display: table;
}

#branditem{
    width: 100%; height: 50px; margin: auto; display: table; background-image: url(../img/boardbg.png); background-position: center top; background-repeat: no-repeat; padding-top: 25px; text-align: center;
}

#brands{
    width: 100%; height: 99px; margin: auto; display: table; background-image: url(../img/shelfbg.png); background-position: center bottom; background-repeat: no-repeat; padding: 10px; text-align: center;
}

#brandsscroll{
    width: 200px; height: 55px; margin: auto; display: table;
}

#htag{ width: 33%; height: auto; float: left; display: table;}

@media only screen and (min-width: 120px) and (max-width: 800px){
    #bannermain{
    width: 100%; height: auto;  float: none; display: table;
}

#bannerbrands{
    width: 100%; height: auto; float: none; display: table;
}

#branditem{
    width: 286px; height: 50px; margin: auto; display: table; background-image: url(../img/boardbg.png); background-position: center top; background-repeat: no-repeat; padding-top: 25px; text-align: center;
}

#brands{
    width: 286px; height: 99px; margin: auto; display: table; background-image: url(../img/shelfbg.png); background-position: center bottom; background-repeat: no-repeat; padding: 10px; text-align: center;
}

#brandsscroll{
    width: 200px; height: 55px; margin: auto; display: table;
}

#htag{ width: 80%; height: auto; float: none; display: table; margin: 20px auto;}
}



/* --- section --- */
section{
    width: 90%; height: auto; margin: 10px auto 10px auto; display: table;
}

#content{
    width: 80%; height: auto; margin: 10px auto 10px auto; display: table;
}

#contlft{
    width: 55%; height: auto; float: left; display: table;
}

#contrgt{
    width: 40%; height: auto; float: right; display: table; margin-right: 3%;
}

#contlft img{
    width: 100%; height: auto;
}

@media only screen and (min-width: 120px) and (max-width: 800px){

#contlft{
    width: 80%; height: auto; float: none; display: table; margin: 20px auto;
}

#contlft img{
    width: 100%; height: auto;
}

#contrgt{
    width: 80%; height: auto; float: none; display: table; margin: 20px auto;
} 
}

#menubar{
    width: 100%; height: auto; display: table; background: #491600; /* Old browsers */
background: -moz-linear-gradient(top,  #491600 1%, #541600 43%, #3f0c01 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#491600), color-stop(43%,#541600), color-stop(100%,#3f0c01)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #491600 1%,#541600 43%,#3f0c01 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #491600 1%,#541600 43%,#3f0c01 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #491600 1%,#541600 43%,#3f0c01 100%); /* IE10+ */
background: linear-gradient(to bottom,  #491600 1%,#541600 43%,#3f0c01 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#491600', endColorstr='#3f0c01',GradientType=0 ); /* IE6-9 */
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
padding-top: 5px; padding-bottom:5px;
}

#form{
    width: 330px; height: 600px; margin: auto; display: table;
}

footer{
    width: 100%;
    height: auto;
    display: table;
    border-top: 5px solid #452b16;
    background-image: url(../img/footer.jpg)
}