article,aside,details,figcaption,figure,
/* Tell the browser to render HTML 5 elements as block */
div,footer,header,hgroup,menu,nav,section { 
    display:block;
    position:relative;
}

#body{
width: 100%;
overflow-x: hidden;
display: block;
}

.wraper{
    margin: 0 auto;
    padding: 0 0;
    width: 980px;
    font: 13px/22px Helvetica, Arial, sans-serif;
    position:relative;
}

/*------------------------------
=HEADER
------------------------------*/

header.doc{
    margin: 0;
    z-index:1;
    
}

header.doc h1{
    position:relative;
    display:block;
    line-height:1em;
    margin: 0;
    top:8px;
    left:20px;
    padding: 25px 0 0 0;
}
header.doc h1 a{
    position:relative;
    display:block;
    text-indent: -999em;
    text-decoration: none;
    height: 80px;
    width: 360px;
    background:url(../img/logo.png) no-repeat left top;
    z-index:10;
    float: left;
}
header.doc h2{
position: relative;
display: block;
float: right;
padding: 0 0 0 30px;
    top:8px;
}
header.doc h2 span{
    font: 13px/22px Helvetica, Arial, sans-serif;
    display: block;
    position: relative;
    left: 5px;
}
header.doc h2 a{
text-decoration: none;
}
/*------------------------------
=NAVIGATION
------------------------------*/

nav {

    width: 100%;

    position: relative;
    display: block;
    overflow:hidden;

   
  	clear: both;
           
           
}

nav ul{
    margin: 0 auto;
    padding: 0 0px;
    display:table;
    list-style: none;
    width: 100%;
}

nav ul li {
    display:table-cell;
    text-align:center;
}

nav ul li a {
    display: block;
    font-size: 14px;
    margin: 0px 3px 0 0;
    padding:8px 20px 15px 20px;
    text-decoration: none;
    text-transform:uppercase;
    font-weight:bold;
    color: white;
    text-align:center;

    border-radius: 6px;
    white-space: no-wrap;

}

nav ul li li a{
    padding:5px 10px 5px 30px;
    background:#626262;
}

nav ul li a:hover {
    background-color:#1c1c1c;
    color:white;

}
nav ul li.current>a {
    background-color:#1c1c1c;
    color:white;
}

.doc nav{
    background:url(../img/tracks.png) #BC1430 top;
     border-radius: 6px 6px 0 0;
    box-shadow: 0 0 5px rgba(0,0,0,.6);
    border-bottom: solid 4px #FF9700;
    
    
} .doc nav ul li a{
    padding:10px 5px 10px 5px;
    
        border-radius: 6px 6px 0 0;

}


/*------------------------------
=INTRODUCTION
------------------------------*/

#pagetitle {
    position: relative;
    padding: 20px 30px 5px 30px;;
    background: #1c1c1c;
    z-index:2;
    margin:0 0 20px 0;
}

#pagetitle h2{
    margin: 0 0 10px 0;

}

#tools{
    position:absolute;
    right: 30px;
    z-index: 5;
    display:block;

}

#crumbs{
    width: 600px;
}


/*------------------------------
=CONTENT AREA AND SIDEBAR LAYOUT
------------------------------*/

#page {
    width: 100%;
    padding:0px;
    position:relative;
    display:block;
    background: white;
    box-shadow: 0 0 5px rgba(0,0,0,.6);
}

#content{
    float: left;
    width: 60%;
    padding:30px 3% 0 3%;
}


/*------------------------------
=BLOG POST
------------------------------*/




/*------------------------------
=COMMENTS
------------------------------*/

#comments article:nth-child(odd) {
    background: #E3E3E3;
    border: 1px solid #d7d7d7;
}
#comments article header {
    font-size:1.6em;
    width: 100%;
}
#comments  time{
    float:right;
    margin: 0;

}

#comments article p {
    padding: 0;
    margin: 0;
}
/*------------------------------
=COMMENT FORM
------------------------------*/
form {
    padding-top: 2px;
    width:100%;
    position:relative;
    display:block;
}
form p {
    display: table;
    margin-bottom: 22px;
    padding: 0 22px;
}
form label {
    display: table-cell;
    padding-right: 20px;
    font-weight: bold;
    vertical-align: top;
}
form input[type="text"], form input[type="email"], form input[type="url"] {
    display: table-cell;
    width: 620px;
    margin: 5px 0 10px 0;

    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-top-radius: 4px;
    behavior: url(media/css/border-radius.htc);
    padding:6px;
    -moz-box-shadow: 0px 0px 5px #888;
    -webkit-box-shadow: 0px 0px 5px #888;
    box-shadow: 0px 0px 5px #888;



    border: 1px solid #d7d7d7;
}
form textarea {
    width: 620px;
    height: 100px;

    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-top-radius: 4px;
    behavior: url(media/css/border-radius.htc);
    padding:6px;

    border: 1px solid #d7d7d7;
    -moz-box-shadow: 0px 0px 5px #888;
    -webkit-box-shadow: 0px 0px 5px #888;
    box-shadow: 0px 0px 5px #888;


}
form input[type="submit"], input.btn {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-top-radius: 4px;
    behavior: url(media/css/border-radius.htc);
    border:1px #ccc solid;
    padding:10px;
    cursor:pointer;
    margin: 10px 0 0 140px;
    float:right;

}
form input[type="submit"]:hover, input.btn:hover{
    background-color:#222;
    color:white;

}
/*------------------------------
=SIDEBAR
------------------------------*/

aside{
    width: 30%;
    float: right;
    margin: 20px 3% 0 0;

}
aside nav{
    margin: 0;
    height:auto;

}
aside nav ul {
    list-style: none;
    margin: 0!important;
    padding: 0 0 0 0!important;
    display:block;
    position:relative;
    height:auto;
    height:auto;
}
aside nav ul li{
    position: relative;
    display:block;
    clear:left;
    float:left;
    width: 100%;
    margin: 0!important;
}

aside nav ul li a {
    display: block;
    position:relative;
    text-decoration: none;
    text-align:left;
    color: #1C1C1C;
    margin: 0 0 3px 0;
    padding:10px;
    background:#DDDDDD;
}

aside nav li.current a{
    background:#BE2230!important;

}

aside img{
	margin: 0 10px 10px 0;
	}
/*------------------------------
=FOOTER
------------------------------*/
footer.doc {
}
footer.doc section {
    color: #999;
    text-align:center;
    margin:0 auto;
    padding: 0 0 80px 0;
}

footer.doc #brands {
    color: #999;
    text-align:center;
    width: 100%;
    margin:0 auto;
    margin: 0 0 80px 0;
    background: #F6F6F6;
        box-shadow: 0 0 5px rgba(0,0,0,.6);
        border-radius: 0 0 6px 6px;
    
}


footer.doc p{
    color: #999;
    font-size:11px;
}
footer.doc a {
    color: #999;
    font-size:11px;
}
footer.doc a:hover {
    color: #98121E;
    text-decoration: none;
}


/*------------------------------
=ZONES
------------------------------*/

.gallery ul{
    margin: 0;
    list-style:none;
}

.gallery  ul *{
    position:relative;
    display:block;
    float:left;
}
.gallery a{
    padding:0px 0px 0px 0;
}

.header_gallery{
    height:280px;
    width: 100%;
    background: url(../img/load.gif) no-repeat center #DDDDDD;
    overflow:hidden;
}

.header_gallery *{
    position:relative;
    display:block;
    list-style:none;
    padding:0;
    margin:0;

}
.header_gallery li{
  display:none;
  width: 100%;
}

.header_gallery li img{
 width: 100%;
}

.zone{
    padding:30px 0 0 0;

}
.zone h3{
    font-family:Arial;
    font-size:20px!important;
    margin: 0!important;
    font-weight:bold!important;
    color:#333333;
}

.zone p{
    font-size:11px;
    color:#666666;
    line-height:14px;
    margin: 5px 0;

}

.zone img{
    margin: -10px 10px 0 0;
    float:left!important;
}

.more{
    display:block;
    float:left;
    color:white;
    width: 136px;
    background:url(../img/more.png) center no-repeat;
    font-size:15px;
    font-weight:bold;
    text-align:center;
    padding:8px 0 12px 0;
    text-decoration:none;
}

a.more:hover{
    color:white;

}

#youtube a:hover, a.more:hover, header h1 a:hover, a:hover img{
    opacity: .7;
}


#map a{
    position:absolute;
    right: 30px;
    bottom: 30px;
    z-index:10;

}


#youtube{
    height:210px;
    width: 100%;
}

#youtube a{
    height:210px;
    width: 321px;
    position:absolute;
    top: 0;
    left: 0;
    display:block;
    background:url(../img/play.png) center no-repeat;
}




/*
@media (min-width: 1690px) {
.wraper{
    width: 1680px;
    font: 16px/28px Helvetica, Arial, sans-serif;
}

.header_gallery{
    height:480px;
}


}*/

@media (min-width: 1290px) {
.wraper{
    width: 1282px;
    font: 15px/26px Helvetica, Arial, sans-serif;
}
.header_gallery{
    height:375px;
}
}

@media (max-width: 1282px) {
.wraper{
    width: 966px;
    font: 13px/22px Helvetica, Arial, sans-serif;
}
.header_gallery{
    height:280px;
}
}

@media (max-width: 966px) {
header.doc h2{
font-size: 20px;
line-height: 1em;
top: 27px;
}
  body{
    transition: .4s;
    left:0;
    position:relative;
  }
  body.slide{
    left: 82%;
  }
  .wraper{
    width: 700px;
    margin:0 auto;
   }
   #youtube{
   float:right;
   width: 300px;
   margin: 0 3% 30px 0;}
   #content{
   width: 96%;
    padding: 30px 2%;
     float: none;
   }
   aside{
    width: 96%;
    padding: 0 2%;
    float: none;
   }
   
   .header_gallery{
   height: 205px;
   }
   
   
   nav ul li a {
    display: block;
    font-size: 12px;
    margin: 0px 3px 0 0;
    padding:8px 4px 15px 4px;
    text-decoration: none;
    text-transform:uppercase;
    font-weight:bold;
    color: white;
    text-align:center;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-top-radius: 6px;
    behavior: url(media/css/border-radius.htc);
    white-space: no-wrap;

}




 }


@media (max-width: 710px) {

.wraper{
    width: 420px;
    margin:0 auto;
   }
   
   .header_gallery{
   height: 120px;
   }
   
   
header.doc h1{
width: 100%;
float: none;
padding: 0;
left: 0;
top: 0;

}header.doc{
text-align: center;
}

header.doc h1 a{
width: auto;
float: none;
top: 0;
left: 0;
background-position: center;
background-size: contain;
}
header.doc h2{
float: none;
display: inline-block;
top: 0;
margin: 20px 0;
padding: 0 10px;
}
.doc nav{
display: block;
text-align: center;
}
.doc nav ul{
display: block;
text-align: center;
padding: 3px 0;

}
.doc nav li,
.doc nav a{
display: inline-block;
}
.doc nav ul li a{
padding: 5px 10px 5px 10px;
white-space: no-wrap;
border-radius: 6px;
}


#map img{
width: 100%;

}

#content, aside {
  width: 96%;
  padding: 15px;
  float: none;
  width: auto;
}

.zone, #youtube{
float: none;
clear: both;
margin: 0 auto 20px auto;
}
.zone{
padding: 30px 0 50px 0;
}
#youtube{
text-align: center;
}
#youtube a{
left: auto;
margin: 0 auto;

}
}

@media (max-width: 420px) {
.wraper{
    width: 320px;
    margin:0 auto;
   }
   
   .header_gallery{
  display: none;
   }
   
   #youtube{
text-align: center;
left: -15px;
}
#map a{
bottom: -15px;
right: -10px;
}

}