@charset "UTF-8";
/* CSS Document */


a, a:hover{
	transition-property: background-color;
	transition-duration: 1s;
 	transition-timing-function: ease-out;
	-webkit-transition: background-color 1s, -webkit-transform 1s ease-out;			}



.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

body.site { 
  background: url(images/bg.jpg) no-repeat center center fixed #daedf1; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body{	background-color:#daedf1;
}

body, html, *{  
	padding:0;
 	margin:0;
	}

a{ text-decoration:none;}

h1, h2{	font-family: "bebas-neue", Arial, sans-serif; font-weight:normal;}


#header{
	width:100%;
	text-align:center;
	border-top:2px solid #FFF;
	border-bottom:2px solid #FFF;
	display:block;
}

#header ul{
	display: inline-block;
	width:20%;
	float:left;
	margin:0;
	}
	
#header li a{
	width:90%;
	display:block;
	border-bottom:2px solid #FFF;
	min-height:22px;
	background-color:rgba(255,255,255,0);
	font: 18px/23px "bebas-neue", Arial, sans-serif;letter-spacing: 3px;
	color:rgba(44,51,51,.9);
	padding:5px 0 0 10%;
transition-property: background-color;
	transition-duration: 1s;
 	transition-timing-function: ease-out;
	-webkit-transition: background-color 1s, -webkit-transform 1s ease-out;			text-align:left;
}


#header li:last-child a{
	border-bottom:none;
	padding-bottom:2px;
	}


#header li a.current, #header li a:hover{
	background-color:rgba(255,255,255,.8);
	transition-property: background-color;
	transition-duration: 1s;
 	transition-timing-function: ease-out;
	-webkit-transition: background-color 1s, -webkit-transform 1s ease-out;	
	
	border-right:2px solid #FFF;

	}
	
	
	

#derma{
	background: url(images/derma.png)center center no-repeat; 
	background-size:contain;
  	-moz-background-size: contain;
	min-height:180px;
	width:60%;
	border-left:2px solid #FFF;
	border-right:2px solid #FFF;
	padding:0;
	display: block;
	margin:0;
	float:left;
	}
	
	


#content{
	width:100%;
}


#main{
	left:20%;
	width:60%;
	padding:4% 0;
	border-left:2px solid #FFF;
	border-right:2px solid #FFF;
	border-bottom:2px solid #FFF;
	position:absolute;
	font-family: "bebas-neue", Arial, sans-serif;
	letter-spacing:1px;
}


/* THE MUSICAL */

.themusical{
	background-color:rgba(44,51,51,.5);
	font-size:28px;
	line-height:26px;
	letter-spacing:30px;
	color:rgba(255,255,255,.9);
	}

.themusical p{
	margin-bottom:20px;
	text-align:center;
	padding:0 5%;
		}

.themusical p:last-child{
	margin-bottom:0;
	}


/* THE CAST */

.casttheme, .scleroderma{
	background-color:rgba(255,255,255,1);
	font-size:16px;
	line-height:1.3em;
	}


.casttheme h1, .scleroderma h1{
	font-size:1.8em;
	line-height:1em;
	letter-spacing:4px;
	margin-bottom:20px;
	color: rgb(44,51,51)}
	
.cast h2{
	font-size:1.4em;
	line-height:1em;
	letter-spacing:3px;
	margin-bottom:20px;
	color: rgb(44,51,51)}
	
.cast, .sscleroderma{
	width:90%;
	margin:0 auto 40px auto;
	padding:0;
}


.cast p{
	width:65%;
	color: rgb(44,51,51);
	margin-bottom:15px;
	}

.scleroderma p{
	width:100%;
	color: rgb(44,51,51);
	margin-bottom:15px;
	}

.cast a, .scleroderma a{
	color: rgb(44,51,51);
	text-decoration:underline;
	}

.cast img{
	max-width:30%;
	float:right;
	}


.cast:last-child{
	margin-bottom:0;
	}

#buy{
	float:right;
	margin:50px 3% 0 0;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
	background-color:#FFF;
	padding:23px 0 0 0;
	height:57px;	
	width:80px;
	background-color:rgba(255,255,255,.7);
	font-size:16px;
	line-height:16px;
	letter-spacing:3px;
	font-family: "bebas-neue", Arial, sans-serif;
	color: rgb(44,51,51);
}
	
#buy:hover{
	color: rgb(44,51,51);
	background-color:rgba(255,255,255,.9);
	}
	
	
	
	
	
	/*listen*/
	ui360,
.sm2-360ui {
  /* size of the container for the circle, etc. */
  width:50px;
  height:50px;
}





.soon{
	width:100%;  height:90%; background: url(images/poster2.jpg)center center no-repeat; display:block; position:absolute;
	top:5%;	background-size:contain;
  	-moz-background-size: contain;}

.soon h1{
	text-indent:-4000px;}
	
#header select {
  display: none;
  visibility:hidden;
}

.tic{
	display:none;
	visibility:hidden;}
	
	/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
#main{
	left:0;
	width:96%;
	padding:4% 2%;
	
}

.cast p{
	width:96%;
	color: rgb(44,51,51);
	margin-bottom:15px;
	}

.cast img{
	margin:0 0 5px 5px;:
	}

#header{
	border:none;}


#header ul{
	display: inline-block;
	width:100%;
	margin:0;
	position:absolute;
	top:90px;
	}

#derma{
	width:100%;
	border-left:0px solid #FFF;
	border-right:0px solid #FFF;
	padding:0;
		min-height:100px;
height:100px;
	position:absolute;
	top:0;
	margin:0;
	float:right;
	}

#header li a.current, #header li a:hover{
	border-right:0px solid #FFF;

	}

#header ul     { display: none;
}
 
  #header select { display: inline-block; 
  visibility:visible;
width:88%;
	margin:0 auto;
	position:absolute;
	left:6%;
	top:105px;

  }

body.site { 
  background-color:#d5ebe9;
  background-image:none;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#buy{
	display:none;
	visibility:hidden;	
	}

#content{
	position:absolute;
	top:130px;
}

}