@charset "UTF-8";


@import url("base.css");
@import url("print.css");

body{ background:#000;}

/* HEADER
 * --------------------------------------- */
#header {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 30;
background:url(../images/header_bg.gif) repeat-x;
height:66px;
text-align: center;
}

h1{ padding:20px 0}
h2{ 
position:absolute;width:430px; 
height:44px;
left: 50%;
top: 50%;
margin-left: -215px;
margin-top: -22px;
}
h1,h2{filter: alpha(opacity=0);
-moz-opacity:0;
opacity:0;}


#header #fb a:hover{
filter: alpha(opacity=60);
-moz-opacity:0.6;
opacity:0.6;
}
#fb{ padding-right:20px; text-align:right; margin-top:-50px}

/* FooterMenu
 * --------------------------------------- */
 #nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #262626;
/*opacity: .9;*/
color:#FFF; 
border-top:2px solid #700000;
text-align:center;
z-index: 30;
}
#menu li {
display:inline-block;
*display: inline;*zoom: 1;
margin:5px 10px;
}
#menu li.active{
filter: alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}
#menu li.active a:hover{
filter: alpha(opacity=60);
-moz-opacity:0.6;
opacity:0.6;
}
#menu li:hover{
filter: alpha(opacity=80);
-moz-opacity:0.8;
opacity:0.8;
}

#menu li a,
#menu li.active a{
padding: 9px 18px;
display:block;
}

/* TopSections
 * --------------------------------------- */
 .section{text-align:center;}

 #section0,
 #section1,
 #section2,
 #section3,
 #item1,
 #item2,
 #item3{
background-size: cover;
 }
 
 
 #section0{
/*background-image: url(../images/bg-top.jpg);*/
background-position:bottom right;
background-repeat:no-repeat;
opacity: 0;
 }

#section1{
width:100%;
background-image: url(../images/bg-top.jpg);
background-position:bottom right;
padding-top:22px;
 }

 #section1 #bg{position:absolute; top:0; right:-130%; height:100%; text-align:right}
 #section1 h3{ left: -130%;position:relative;margin-top:50px}


 #section2{
background-image: url(../images/bg-3rd.jpg);
background-position:top center;
padding-top:22px
 }
 #section2 h3{ left: -130%;position:relative;margin-top:50px}
 #section3{
background-image: url(../images/bg-4rd.jpg);
background-position:top right;
padding-top:22px;
position:relative;
 }
#section3 h3{ left: -130%;position:relative; padding-bottom:50px;margin-top:50px}
#section3 #warap{ width:960px; margin:30px auto; text-align:left; position:relative}
#section3 h4{ float:left; padding-right:20px;opacity: 0;}
#section3 h5{ float:left;opacity: 0;}


/* lineup
 * --------------------------------------- */

#lineup h1,#lineup h2{filter: alpha(opacity=100);
-moz-opacity:1;
opacity:1;}

#item1{
background-image: url(../lineup/images/bg_item1.jpg);
background-position:bottom right;
padding-top:22px;

}

#item2{
background-image: url(../lineup/images/bg_item2.jpg);
background-position:top right;
padding-top:22px;


}

#item3{
background-image: url(../lineup/images/bg_item3.jpg);
background-position:bottom right;
padding-top:22px;


}
#item1 h3,#item2 h3,#item3 h3{ left: -130%;position:relative; margin-top:50px}


 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* CSS */
body {
-webkit-text-size-adjust: 100%;
}
#section1 #bg{ width:50%;}
#section1 h3 img,#section2 h3 img,#section3 h3 img{ width:50%;}
#section3 h3{ padding-bottom:20px}
#section3 #warap{ margin:0px auto;}
#section3 #warap h4{padding-right:0px}
#section3 #warap h4 img,#section3 #warap h5 img{ width:80%; }

}