/****
* TABLE OF CONTENTS:
* 1. General settings
* 2. Menu
* 3. "Welcome" step
* 4. "Featuring" step
* 5. "Safety" steo
* 6. "Sponsors" step
* 7. "Contact" page
* 8. Legacy - for non-3d and non-CSS3 browsers
***/




/****  1. General settings ****/
@import url(http://fonts.googleapis.com/css?family=Advent+Pro:400,200,600);

body {
	font-family: 'Advent Pro', sans-serif;
	color: #fff;
	background: #120201	 url(images/bg.jpg) no-repeat top center;
	background-attachment: fixed;
}

a {
	color: #fff;
	text-decoration: none;
}
em {
	font-style: normal;
}

/** main container **/
#animationContainer {z-index: 1;}

/** helpers **/
.clearer {clear: both;}
.green {color: #3ab206;}



/** stars background **/
#stars {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: transparent url(images/stars.png) no-repeat top center; 
	z-index: 0;
}


/** steps general rules **/
.step {width: 900px; opacity: 0; transition: opacity 1s; -webkit-transition-property: opacity; -webkit-transition-duration: 1000ms;}
.step span {display: block;}
.step span.light {font-weight: 200;}
.step .column1 {
	float: left;
	width: 350px;
}
.step .column2 {
	float: right;
	width: 350px;
}
.step .header {display: block;margin: 0 auto;}


.step.active {
	opacity: 1;
}

.step.active + .step {
	opacity: 0.15;
}



/****  2. Menu ****/
#menu { position: fixed; z-index: 5; top: 30px; left: 10px;}

#menu ul {list-style: none; padding: 0; display: block; margin: 0 auto; }
#menu ul li {list-style: none; margin: 3px 0; padding: 3px 5px; text-align: left;} 
#menu ul li.current,
#menu ul li:hover {background: #dc0100; border-radius: 5px; font-weight: 600;}
#menu ul li a {color: #fff; font-size: 23px; text-transform: uppercase; text-decoration: none;display:block;width:100%; outline: none}




/****  3. "Welcome" step ****/
#welcome {}
#welcome .header {
	background: transparent url(images/welcome/header.png) no-repeat 0 0;
	width: 877px;
	height: 350px;
}
#welcome #date {line-height: 60px;}
#welcome #date .line1, .line1 {	font-size: 88px; }
#welcome #date .line2, .line2 {	font-size: 55px; font-weight: 600;}

#welcome #date .line3, .line 3 {	font-size: 45px; line-height: 40px;}
#welcome #date .line4, .line4 {	font-size: 35px; line-height: 30px;}

#welcome address {font-style: normal;  line-height: 60px;}
#welcome address .organization-name {font-size: 70px; font-weight: 600;}
#welcome address .street-address {font-size: 52px;}
#welcome address .info {font-size: 32px; line-height: 31px;}
#welcome address .facebook,
#welcome address .facebook a {font-size: 32px; text-decoration: none;  line-height: 31px;}


#welcome #bottomLine { text-align: center; letter-spacing: 9px; font-size: 41px; margin: 25px 0 0 0; }

#welcome #socialIcons { margin-right: 40px; margin-top:10px}
#welcome #socialIcons a { width: 40px; height: 42px; display: block; background: transparent url(images/welcome/socialIcons.png) no-repeat 0 0; float: right; margin: 0 0 0 20px;}
#welcome #socialIcons a:hover { background-image: url(images/welcome/socialIconsHover.png)}

#welcome #socialIcons .facebook {background-position: 0 0;}
#welcome #socialIcons .googleplus {background-position: -60px 0;}
#welcome #socialIcons .vimeo {background-position: -120px 0;}
#welcome #socialIcons .twitter {background-position: -180px 0;}

/****  4. "Featuring" step ****/
#featuring {}
#featuring .header {
	background: transparent url(images/featuring/header.png) no-repeat 0 0;
	width: 877px;
	height: 350px;
}

#featuring #drinksMenu {}
#featuring #drinksMenu .line1 {border-top: 5px solid #fff; text-align: center; border-bottom: 5px solid #fff; font-size: 88px; line-height: 88px; font-weight: 600;}
#featuring #drinksMenu .line2 {font-size: 26px; letter-spacing: 15px; text-align: center;} 

#featuring #drinksMenu .line3 {font-size: 90px; } 
#featuring #drinksMenu .line3 em {font-size: 50px; position: relative; top: -30px; font-weight: 600;} 
#featuring #drinksMenu .line3 em sup {font-size: 27px; font-weight: 600;} 

#featuring #drinksMenu .line4 {font-size: 50px; border-top: 2px solid #fff; border-bottom: 2px solid #fff;} 
#featuring #drinksMenu .line4 em { font-size: 40px; position: relative; top: -10px; margin: 0; font-weight: 600;} 
#featuring #drinksMenu .line4 em sup {font-size: 21px; font-weight: 600;} 

#featuring #drinksMenu .line5 {font-size: 38px; border-bottom: 2px solid #fff;}
#featuring #drinksMenu .line5 em {font-size: 35px; font-weight: 600;}
#featuring #drinksMenu .line5 em sup {font-size: 19px; font-weight: 600;}

#featuring #drinksMenu .line6 {font-size: 25px; border-bottom: 5px solid #fff; padding: 2px 0;}

#featuring #cast {}
#featuring #cast .line1 {font-size: 92px; line-height: 92px; text-align: center; border-top: 5px solid #fff; border-bottom: 5px solid #fff; font-weight: 600;}
#featuring #cast .line2 {font-size: 26px; letter-spacing: 5px; text-align: center;}

#featuring #cast .line3 {font-size: 55px; text-align: center;} 
#featuring #cast .line4 {font-size: 20px; text-align: center; border-bottom: 2px solid #fff;} 


#featuring #cast .line5 {font-size: 55px; text-align: center;} 
#featuring #cast .line6 {font-size: 20px; text-align: center; border-bottom: 2px solid #fff;}

#featuring #cast .line7 {font-size: 30px; text-align: center;} 
#featuring #cast .line8 {font-size: 20px; text-align: center; border-bottom: 5px solid #fff;} 


/****  5. "Safety" step ****/
#safety .header {background: transparent url(images/safety/header.png) no-repeat 0 0; width: 877px; height: 491px;}

#safety .column1 span {font-size: 24px; text-align: center; margin: 0 0 25px 0; text-align: left;}
#safety .column1 p {font-size: 16px; margin: 0 0 15px 0; text-align: left;}

#safety .column2 span {font-size: 24px; text-align: center; margin: 0 0 25px 0; text-align: right;}
#safety .column2 p {font-size: 16px; margin: 0 0 15px 0; text-align: right;}


/****  6. "Sponsors" step ****/
#sponsors .header {background: transparent url(images/sponsors/header.png) no-repeat 0 0; width: 877px; height: 491px;}

#sponsors .column1 span {font-size: 26px; margin: 0 0 25px 0;}
#sponsors .column2 img {margin: 60px 0 0 0;}

/****  7. "Contact" step ****/
.ctLegacy #animationContainer #contact.step {margin-bottom: 300px}
#contact .header {
	background: transparent url(images/contact/header.png) no-repeat 0 0;
	width: 877px;
	height: 350px;
}

#contact .column1 span {font-size: 23px; margin: 0 0 15px 0;}
#contact .column1 textarea {
	border: 1px solid #550606;
	border-radius: 5px;
	background: #450605;
	color: #fff;
	width: 350px;
	height: 175px;
	padding: 5px;
	font-size: 13px;
	overflow-y: auto
}
#contact .column1 input {
	border: 1px solid #550606;
	border-radius: 5px;
	background: #450605;
	color: #fff;
	width: 350px;
	height: 25px;
	margin: 20px 0 0 0;
	padding: 0 5px;
	font-size: 13px;
}
#contact .column1 input[type=submit] {background: #cf0000; line-height: 30px; border: 0; font-weight: 600; height: 31px; width: 100px;}

#contact .column2 {float: left; margin: 0 0 0 5px;}
#contact .column2 span {font-size: 23px; margin: 10px 0 25px 0;}
#contact .column2 p {margin: 0;}
#contact .column2 a {}
#contact .column2 a img {border: 1px solid #550606; border-radius: 5px; margin: 0 0 5px 0;}


#contact .column3 {float: left; width: 250px; margin: 0 0 0 35px; padding: 100px 0 0 0;}
#contact .column3 address { font-style: normal; font-size: 16px;}
#contact .column3 address .street-address { margin: 0 0 15px 0;}
#contact .column3 address .telephones { margin: 0 0 15px 0;}



/****  8. Legacy - for non-3d and non-CSS3 browsers ****/
.ctLegacy {}
.ctLegacy #animationContainer {margin: 0 auto; min-width: 960px; max-width: 1400px; width: 90%;}
.ctLegacy #animationContainer .step {margin: 0px auto 150px auto; width: 90%;max-width: 900px; position: relative; opacity: 1;}

.ctLegacy #menu {position: fixed;  top: 100px; left: 25px; display: none; background: transparent url(../images/menuBg.png) repeat 0 0; border-radius: 5px;  }
.ctLegacy #stars {position: fixed; z-index: -1;}