/* 
Name: Portals SXSW 2014
Authors: Portals
Illustration & Design by Laurent Hrybyk (copyright Laurent Hrybyk 2014)
Date: 2014-02-27
*/

/* TYPOGRAPHY */
/* 


font-family: 'Neucha', cursive;

*/




/* ALL */
/* ----------------------------------------- */

body { background: url(../images/stars.png); overflow-x: hidden; overflow-y: hidden; color: #d15527; font-family: 'Neucha', cursive; }
.scrollv { overflow-y: auto !important; }

a { color: #A73206;
text-decoration: none;
}

a:hover {
	color: #21A9AF;
}

span {
padding: 0px 10px 10px 10px;
letter-spacing: 0.06em;
font-style: italic;
font-size: 16px;
color: #C7ECE5;
}

.wrap { width: 100%; margin: 0 auto;; position:relative; z-index:99;}
#shooting1 {
position:absolute; z-index:5;
top: 5%;
right: 15%;
}
#shooting2 {
position:absolute; z-index:5;
top: 35%;
right: 30%;
}
#shooting3 {
position:absolute; z-index:5;
top: 45%;
right: 67%;
}
#shooting4 {
position:absolute; z-index:5;
top: 45%;
right: 87%;
}

h1, h2 { font-weight: normal; text-transform: uppercase; text-align: center; }

h1 { font-size: 111px; letter-spacing: -5px; padding-top: 30px; }
h2 { font-size: 50px; letter-spacing: -2px;   }
h3 { font-size: 22px; font-weight: normal; text-align: center; padding-top: 5px;  }

h3 a, h2 a  { text-decoration: none; }
h3 a:hover, h2 a:hover { text-decoration: underline; }

.options, .options-vendors { list-style: none; overflow: hidden; z-index: 200;}
.options li { float: left;  width: 20%; height: 120px; z-index: 200;}
.options li:last-child { margin-right: 0; }

.options a { display: block; width: 150px; 
			text-decoration: none; font-size: 25px; text-align: center; padding-top: 35px;  
			margin: 0 auto; z-index: 200; }
	.options a big { display: block; font-size: 50px; z-index: 200;}
.footer {
list-style: none;
overflow: hidden;
z-index: 260;
margin: 0 auto 0 auto;
width: 50%;
text-align: center;
padding-left: 25px;
position: absolute;
}
.footer li {float: left;  z-index: 260; padding-right: 20px;
}

.footer-social {
list-style: none;
overflow: hidden;
z-index: 200;
margin: 0 auto 0 auto;
width: 100%;
text-align: center;
position: absolute;
}


.footer-social li {
float: right;
padding-right: 20px;
z-index: 200;
display: inline;
}
.bands-left li{
height: 57px; z-index: 250;text-align left; position: relative;
}

.bands-right li{height: 57px; z-index: 200; text-align:right;
}

.bands-right {
list-style: none; overflow: hidden;
	padding-right: 20px;
}
.bands-left {
list-style: none; overflow: hidden;
	padding-left: 20px;
	width: 50%;
}
.bands { 
position: absolute;
top: 100px;
width: 100%;
}

.venue-info-left, .venue-info-right {
position: absolute;
top: 100px;
}

.venue-info-left {
width: 60%;
padding-left: 20px;
z-index:300;
}

.venue-info-left p {
padding: 5px 0px;
}

.venue-info-right {
width: 98%;
padding-right: 20px;
text-align: right;
}
.venue-info-right li {
padding-top:10px;
}
.venue-info-right img, .options-vendors li img {
border: 4px solid #F1F1F1;
}

p {
font-size: 20px;
padding: 15px 35px;
line-height: 32px;
letter-spacing: .05em;
text-align: justify;
}
.center {
	width: 100%;
	text-align: center;
	margin: 10px 0px;
}
.intro p {
padding: 15px 225px;
}
.rabbl {
padding: 50px 0px 30px 0px;
}

.options-vendors li {
float: right;
width: 11%;
z-index: 200;
}

.options-vendors {
position: absolute;
width: 97%;
text-align: right;
top: 100px;
}

.vendor-left p {
font-size: 20px;
padding: 15px 35px;
line-height: 32px;
letter-spacing: .05em;
text-align: justify;
width: 40%;
position: absolute;
z-index: 320;
top: 10px;
}

#page_lineup object {
position: absolute;
margin-left: -117px;

z-index: 400;
}

.sxsw {
	padding: 20px 0px;
	}
div.addthis_toolbox.addthis_default_style {
opacity: .5;
padding-top:20px;
width: 322px;
text-align: center;
margin: 0 auto;
z-index:999;
}
div.addthis_toolbox.addthis_default_style:hover {
opacity: .9;
}
a.addthis_button_tweet.at300b {
width: 104px;
}
a.addthis_button_facebook_like.at300b {
width: 113px;
}
/* SPECIFICS */
/* ----------------------------------------- */
.big li { width: 50%; height: auto; }
.big li a { width: 300px; height: 190px; padding-top: 110px; margin: 0 5%; }
.big li:first-child a { float: right; }

.small li { width: 100%; height: auto; }
.small li a  { width: 180px; height: 115px; padding-top: 65px; font-size: 20px; }
.small a big { font-size: 35px }


.documentation h2 { padding: 40px 0 20px 0; } 
.download h2:first-child, .documentation h2:first-child, .what h2:first-child { padding-top: 8%; }

.list { font-size: 25px; list-style: disc; margin: 3% 10%}
.list li { margin: 10px 0; }

.documentation .wrap { overflow: hidden; padding-bottom: 50px; }

#page_venue  {
	background:url(../images/canyonsleft.png) bottom left repeat-x;
	background-size: contain;
	
}

#page_lineup  {
	background:url(../images/canyonsmiddle.png) bottom left repeat-x;
	background-size: contain;
	
}

#page_vendors {
	background:url(../images/canyonsright.png) bottom left repeat-x;
	background-size: contain;
	
}

/* MEDIA QUERIES */
/* ----------------------------------------- */

@media screen and (max-width: 1000px) {
 
h1 { font-size: 90px }
h2 { font-size: 40px; letter-spacing: normal; }

.home, .download { overflow-y: scroll; }

.intro p {
padding: 15px 125px;
}

.venue-info-left {
width: 40%;
padding-left: 20px;
z-index:300;
}

#page_venue  {
	background:url(../images/canyonsleft.png) bottom left repeat-x;
	background-size: contain;
	
}

#page_lineup  {
	background:url(../images/canyonsmiddle.png) bottom left repeat-x;
	background-size: contain;
	
}

#page_vendors {
	background:url(../images/canyonsright.png) bottom left repeat-x;
	background-size: contain;
	
}
}

@media screen and (max-width: 800px) {
.venue-info-left {
width: 30%;
padding-left: 20px;
z-index:300;
}
.intro p {
padding: 15px 75px;
}
 
#page_venue  {
	background:url(../images/canyonsleft.png) bottom left repeat-x;
	background-size: contain;
	
}

#page_lineup   {
	background:url(../images/canyonsmiddle.png) bottom left repeat-x;
	background-size: contain;
	
}

#page_vendors  {
	background:url(../images/canyonsright.png) bottom left repeat-x;
	background-size: contain;
	
}

}

@media screen and (max-width: 480px) {
 .intro p {
padding: 15px 15px;
}

#page_venue  {
	background:url(../images/canyonsleft.png) bottom left repeat-x;
	background-size: contain;
	
}

#page_lineup  {
	background:url(../images/canyonsmiddle.png) bottom left repeat-x;
	background-size: contain;
	
}

#page_vendors  {
	background:url(../images/canyonsright.png) bottom left repeat-x;
	background-size: contain;
	
}
}