/*

responsive font size
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

p1 {
  font-size: 2vmax;
}

1vw = 1% of viewport width

1vh = 1% of viewport height

1vmin = 1vw or 1vh, whichever is smaller

1vmax = 1vw or 1vh, whichever is larger

*/


@-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/logobg.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;*/
    background-color: #000;
    background-size: 100%;
    font-size: 100%;
}

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


hr.style-one {
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
}

hr.style-two {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

hr.style-minus {
    border: 0;
    border-bottom: 1px dashed #ccc;
    background: #999;
}

hr.style-btshd {
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}

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);
}

hr.style-seven {
    height: 30px;
    border-style: solid;
    border-color: black;
    border-width: 1px 0 0 0;
    border-radius: 20px;
}
hr.style-seven:before { /* Not really supposed to work, but does */
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;
    border-style: solid;
    border-color: black;
    border-width: 0 0 1px 0;
    border-radius: 20px;
}

hr.style-eight {
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
}
hr.style-eight:after {
    content: "§";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}

#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;
}


@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: 'dobkinplain';
    src: url('../fonts/dobkinplain-webfont.eot');
    src: url('../fonts/dobkinplain-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/dobkinplain-webfont.woff2') format('woff2'),
         url('../fonts/dobkinplain-webfont.woff') format('woff'),
         url('../fonts/dobkinplain-webfont.ttf') format('truetype'),
         url('../fonts/dobkinplain-webfont.svg#dobkinplain') format('svg');
    font-weight: normal;
    font-style: normal;

}

@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');
}

@font-face {
    font-family: 'bebas_neueregular';
    src: url('../fonts/bebasneue_regular-webfont.eot');
    src: url('../fonts/bebasneue_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bebasneue_regular-webfont.woff2') format('woff2'),
         url('../fonts/bebasneue_regular-webfont.woff') format('woff'),
         url('../fonts/bebasneue_regular-webfont.ttf') format('truetype'),
         url('../fonts/bebasneue_regular-webfont.svg#bebas_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

.arial{
    font-family: Arial;
}

.segoeuil{
    font-family: "SEGOEUIL";
}

.segoeuir{
    font-family: 'SegoeUIRegular';
}

.dobkin{
    font-family: 'dobkinplain';
}

.freestyle1{
    font-family: 'FreestyleScriptRegular';
}

.freebooter{
    font-family: 'FreebooterScriptRegular';
}

.fontleroy{
    font-family: 'FontleroyBrownNFRegular';
}

.fatt{
    font-family: 'FattRegular';
}

.ethno{
    font-family: 'EthnocentricRegular';
}

.estelle{
    font-family: 'EstelleBlackSFRegular';
}

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

.euphemia{
    font-family: "euphemia";
}

.bebasneu{
    font-family: 'bebas_neueregular';
}

/*fonts*/

.sz12{
    font-size: 12px;
}

.sz13{
    font-size: 13px;
}

.sz14{
    font-size: 14px;
}

.sz15{
    font-size: 15px;
}

.sz18{
    font-size: 18px;
}

.sz22{
    font-size: 22px;
}

.sz26{
    font-size: 26px;
}

.sz30{
    font-size: 30px;
}

.sz36{
    font-size: 36px;
}

.sz48{
    font-size: 48px;
}

.svw48{
    font-size: 5vmax;
}

.italic{
    font-style: italic;
}

.bold{
    font-weight: bold;
}

.justify{
    text-align: justify;
}

.txtright{
    text-align: right;
}

.txtleft{
    text-align: left;
}

.but1{
    list-style-image: url(../img/but1.png);
}

.but2{
    list-style-image: url(../img/but2.png);
}

.but3{
    list-style-image: url(../img/but3.png);
}

.but4{
    list-style-image: url(../img/but4.png);
}

/*text colors*/

.white{
    color: #FFF;
}

.red{
    color: #c00b0a;
}

.yellow{
    color: #fac302;
}

.oyellow{
    color: #f9ab05;
}

.green{
    color: #38b706;
}

.lgrey{
    color: #999;
}

.grey{
    color: #333;
}

.brdrred{
    border: 2px solid #c00b0a;
}

.brdrpink{
    border: 2px solid #fb0959;
}

.brdrblue{
    border: 2px solid #099dfb;
}


.brdryellow{
    border: 2px solid #fbb909;
}

.brdrgrey{
    border: 2px solid #333;
}

.brdrgreen{
    border: 2px solid #92fb09;
}

.glwwt{
    -webkit-box-shadow: 0px 0px 12px 0px rgba(255,255,255,1);
-moz-box-shadow: 0px 0px 12px 0px rgba(255,255,255,1);
box-shadow: 0px 0px 12px 0px rgba(255,255,255,1);
    -webkit-animation: glowIt 2s infinite;
	-moz-animation: glowIt 2s infinite;
	-o-animation: glowIt 2s infinite;
	animation: glowIt 2s infinite;
}

@-webkit-keyframes glowIt {
	0% { 
		-webkit-box-shadow: 0 0 9px #ccc; 
	}
	50% { 
		-webkit-box-shadow: 0 0 18px #FFF; 
	}
	100% { 
		-webkit-box-shadow: 0 0 9px #ccc; }
}

@-moz-keyframes glowIt {
	0% { 
		-moz-box-shadow: 0 0 9px #ccc; 
	}
	50% { 
		-moz-box-shadow: 0 0 18px #FFF; 
	}
	100% { 
		-moz-box-shadow: 0 0 9px #ccc; }
}

@-o-keyframes glowIt {
	0% { 
		-o-box-shadow: 0 0 9px #ccc; 
	}
	50% { 
		-o-box-shadow: 0 0 18px #FFF; 
	}
	100% { 
		-o-box-shadow: 0 0 9px #ccc; }
}

@keyframes glowIt {
	0% { 
		box-shadow: 0 0 9px #ccc; 
	}
	50% { 
		box-shadow: 0 0 18px #FFF; 
	}
	100% { 
		box-shadow: 0 0 9px #ccc; }
}

.glwpk{
    -webkit-box-shadow: 0px 0px 12px 0px rgba(247,3,101,1);
-moz-box-shadow: 0px 0px 12px 0px rgba(247,3,101,1);
box-shadow: 0px 0px 12px 0px rgba(247,3,101,1);
    -webkit-animation: fadeIn 5s;
	-moz-animation: fadeIn 5s;
	-o-animation: fadeIn 5s;
	animation: fadeIn 5s;
}

@-webkit-keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@-o-keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}


@-moz-keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
}

.glwblu{
    -webkit-box-shadow: 0px 0px 12px 0px rgba(5,121,245,1);
-moz-box-shadow: 0px 0px 12px 0px rgba(5,121,245,1);
box-shadow: 0px 0px 12px 0px rgba(5,121,245,1);
}

.glwred{
    -webkit-box-shadow: 0px 0px 12px 0px rgba(245,8,8,1);
-moz-box-shadow: 0px 0px 12px 0px rgba(245,8,8,1);
box-shadow: 0px 0px 12px 0px rgba(245,8,8,1);
    -webkit-animation: fadeIn 5s;
	-moz-animation: fadeIn 5s;
	-o-animation: fadeIn 5s;
	animation: fadeIn 5s;
}

@-webkit-keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@-o-keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}


@-moz-keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.gwgrn{
    -webkit-box-shadow: 0px 0px 12px 0px rgba(105,245,12,1);
-moz-box-shadow: 0px 0px 12px 0px rgba(105,245,12,1);
box-shadow: 0px 0px 12px 0px rgba(105,245,12,1);
}

.gwyl{
    -webkit-box-shadow: 0px 0px 15px 0px rgba(245,133,12,1);
-moz-box-shadow: 0px 0px 15px 0px rgba(245,133,12,1);
box-shadow: 0px 0px 15px 0px rgba(245,133,12,1);
}

a.green.button {
  -webkit-animation-name: greenPulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes greenPulse {
  from { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; }
  50% { background-color: #91bd09; -webkit-box-shadow: 0 0 18px #91bd09; }
  to { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; }
}


::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-button {
    width: 8px;
    height:5px;
}
::-webkit-scrollbar-track {
    background:#b00606;
    border: thin solid #b00606;
    box-shadow: 0px 0px 3px #790909 inset;
    border-radius:2px;
}
::-webkit-scrollbar-thumb {
    background:#f51a1a;
    border: thin solid #b00606;
    border-radius:2px;

}

::-webkit-scrollbar-thumb:hover {
    background:#e20404;
}  

#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
}



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

.class1 a:link{ text-decoration:none; color:#333;}
.class1 a:visited{ text-decoration:none; color:#333;}
.class1 a:active{ text-decoration:none; color:#333;}
.class1 a:hover{ text-decoration:none; color:#09F;}

.p50{ padding: 50px;}
.p20{ padding: 20px;}
.p10{ padding: 10px;}
.p5{ padding: 5px;}

.pt50{ padding-top: 50px;}
.pt20{ padding-top: 20px;}
.pt10{ padding-top: 10px;}
.pt5{ padding-top: 5px;}

.mt50{ margin-top: 50px;}
.mt20{ margin-top: 50px;}
.mt10{ margin-top: 10px;}





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

header{
    width: 100%; height: auto; display: table; background-color: #000;
}

#logo{
    width: 17%; height: auto; float: left; display: table; margin: 0 0 0 2%;
}

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

#phone{
    width: 15%; height: auto; float: left; display: table; margin: 10px 0 10px 1%;
}

#time{
    width: 10%; height: auto; float: left; display: table; margin: 1%;
}

#enquiry{
    width: 10%; height: auto; display: table; float: left; margin: 2% 1% 2% 0;
}

#brands{
    width: 19%; height: auto; float: right; display: table; margin: 10px 2% 10px 0;
}

#scroll{
    width: 15%; height: auto; float: right; display: table; margin: 2% 2% 10px 0;
}

nav{
    width: 100%; height: auto; display: table; background-color: #bbce00;  - -webkit-box-shadow: 0px 0px 8px 2px #000000;
       -moz-box-shadow: 0px 0px 8px 2px #000000;
            box-shadow: 0px 0px 8px 2px #000000; position: relative; z-index: 95;
}

#menu{
    width: auto; height: auto; float: right; display: table; margin: 5px 1% 5px 0;
}

#sclico{
    width: 16%; height: auto; display: table; float: right; margin: 10px 20px 0 0;;
}

#banner{
    width: 100%; width: auto; display: inline-block; z-index: 91; background-color: #000; margin: 0; white-space: nowrap; padding: 0;
}

#rlne{
    width: 100%; height: auto; display: table; background-color: #c00b0a; padding-top: 20px; padding-bottom: 20px; text-align: right;
}

section{
    width: 90%; height: auto; display: table; margin: auto;
}

#hmtag1{
    width: 33.33%; height: auto; display: table; float: left; background-color: #fa7103; background-image: url(../img/saxophonetag.png); background-position: right; background-repeat: no-repeat;
}

#hmtag2{
    width: 33.33%; height: auto; display: table; float: left; background-color: #f7b504; background-image: url(../img/keybordtag.png); background-position: right; background-repeat: no-repeat;
}

#hmtag3{
    width: 33.33%; height: auto; display: table; float: left; background-color: #fa0349; background-image: url(../img/stringtag.png); background-position: right; background-repeat: no-repeat;
}

#hmtagcnt{
    width: 65%; height: auto; float: left; display: table; padding-top: 2%; padding-bottom: 2%; background-color: rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.6);
}

#tagmn{
    width: 70%; height: auto; float: left; display: table; margin: 5px 0 5px 0;
}

#tag{
    width: 31%; height: auto; float: left; display: table; margin: 2% 0 2% 1.8%;
}



footer{
    width: 100%; height: auto; display: table; border-top: 5px solid #f0cc05; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */
background: #45484d; /* Old browsers */
background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #45484d 0%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #45484d 0%,#000000 100%); /* IE10+ */
background: linear-gradient(to bottom,  #45484d 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

#ftag{
    width: 20%; height: auto; float: left; display: table; margin: 1% 0 1% 2.5%;
}

#webwalk{
    width: 129px; height: auto; display: table; margin: 6px auto 3px auto;
}