@import url("/_css/common_resetCss.css");
@import url("/_fonts/rockwell-webfont/font.css");
@import url("/_fonts/rokasfreestyle-webfont/font.css");
@import url("/_fonts/font-awesome/css/font-awesome.css");

@charset "UTF-8";

::-webkit-scrollbar {
    width: 10px;
	background-color:rgba(0,0,0,.1);
}
::-webkit-scrollbar-thumb {
	background-color:rgba(255,255,255,.1);
}

::selection {
	background-color:rgba(135,117,142,.4);
}

html, body {margin:0;padding:0;height:100%;}

body {
	position:relative;
	display:block;
	width:100%; height:100%; max-width:1800px;
	margin:0px auto;
	background:url('/_images/bg_home.jpg') top no-repeat;
	background-size:cover;
	text-align: center;
	
	font-family: 'Rockwell';
	font-size:18px;
	line-height:24px;
	letter-spacing:.03em;
	color:#4D4D4D;
	
}
	#bg_bio {
		background:url('/_images/bg_bio.jpg') top no-repeat;
		background-size:cover;
	}
	#bg_dates {
		background:url('/_images/bg_media.jpg') top no-repeat;
		background-size:cover;
	}
	#bg_media {
		background:url('/_images/bg_dates.jpg') top no-repeat;
		background-size:cover;
	}
	#bg_bookMe {
		background:url('/_images/bg_bookMe.jpg') top no-repeat;
		background-size:cover;
	}
	
	.background {
		position:absolute; left:0px; top:0px;
		display:block;
		width:100%; height:100%;
		opacity:0;

		-webkit-transition: all .25s ;
		-moz-transition: all .25s ;
		-ms-transition: all .25s ;
		-o-transition: all .25s ;
		transition: all .25s ;
	}
	
	.bg_active {
		opacity:1;
	}
	
	.clear {clear:both; }
	
	.desktop {display:block; }
	.mobile {display:none; }

/*************************************************************/
/***************************HEADER****************************/
/*************************************************************/



	


/*************************************************************/
/***************************CONTENT***************************/
/*************************************************************/
a {
	cursor:pointer; 
	outline-width: 0;
	
	text-decoration:none;

	-webkit-transition: all .25s ;
	-moz-transition: all .25s ;
	-ms-transition: all .25s ;
	-o-transition: all .25s ;
	transition: all .25s ;
}

a.button, input.submit {
	display:inline-block;
	margin-bottom:20px; padding:10px; border:2px solid #FFF; outline: 10px solid #F7931E;
	background:#F7931E;
	
	font-family:'Rockwell';
	font-size:21px; 
	color:#FFF;
	text-align:center;
	text-transform:capitalize;
	
	/*-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;*/
	
	cursor:pointer;
}
	
	a.button:hover, a.button:focus, input.submit:hover, input.submit:focus {
		outline: 10px solid #F9B361;
		background:#F9B361; 
		color:#FFF;
	}
	
	a.donate {
		background:#D3C36B;
	}
		a.donate:hover, a.donate:focus {
			background:#6952OC;
		}

#frame {
	display:block;
	position:absolute; top:4%; left:4%;
	width:91%; height:90%;
	/*margin:2% auto;*/
	border:5px solid #FFF;
	border-bottom:0px;
	
	overflow-y:auto;
	overflow-x:hidden;
}
	#frameBottomLeft, #frameBottomRight {width:40%; height:5px; background:#FFF; }
	#frameBottomLeft {position:absolute; left:4%; top:94%; }
	#frameBottomRight {position:absolute; left:55%; top:94%; margin-left:6px; }
	
	nav {
		position:absolute; bottom:4%; right:6.5%;
		width:45%; 
		text-align:right;
	}
		nav ul li {
			display:inline-block;
			margin:0px; padding:0px;
			
			font-family:'Rockwell-bold', 'Rockwell';
			font-size:24px;
			text-transform:uppercase;
		}
			nav a {
				display:inline-block;
				padding:5px 14px;
				color:#FFF;
				opacity:1;
			}
			nav a:hover {opacity:.6; text-decoration:underline; }
			
			nav ul li:first-child a {
				padding-left:0px;
			}
			nav ul li:last-child a {
				padding-right:0px;
			}
			
		.menu {display:none; }
			
	#logo {
		position:absolute; bottom:3%; left:50%;
		margin-left:-30px;
	}
		.logo {
			position:absolute; right:10px; bottom:1%;
		}
		
		#logo a, .logo a {
			display:block;
			width:60px; height:60px;
			padding:0px;
			color:transparent;
			
			background:url('/_images/logo_white.png') center no-repeat;
			background-size:contain;
			
			overflow:hidden;
		}
			.logo a {width:40px; height:40px; }
		#logo a:hover, .logo a:hover {opacity:.6;}
		
	#copyright {
		position:absolute; bottom:2.5%; right:4.5%;
		width:40%; 
		color:#FFF;
		
		font-family: 'Rockwell';
		font-size:12px;
		text-align:right;	
	}
		#copyright a {
			color:#FFF;
			opacity:.6;
		}
		#copyright a:hover {
			opacity:1;
			text-decoration:underline;
		}


#home, #bio, #dates, #media, #bookMe {
	display:block;
	position:relative;
	width:100%; min-height:100%;
	/*border:1px solid #000;*/
	
	text-align:center;
	
}
	#home img {
		position:absolute; top:18%; left:-1%;
		width:102%; height:auto; 
	}
		/*#home img.mobile {display:none; }*/
	
#bio {
	
}
	#bio .content {
		width:600px;
	}
	

#dates {
	
}
	#dates .content {
		width:600px;
	}
	.tourDate {
		display:block;
		height:auto;
		padding:5px 8px;
		overflow:hidden;
		
		text-align:left;
	}
		.tourDate:nth-child(even) {
			background:rgba(255,255,255,.1);
		}
		.tourDate:nth-child(odd) {
			background:rgba(255,255,255,.05);
		}
		
		.tourDate h3 {
			padding-top:5px; 
			
			font-weight:bold;
			font-size:24px;
		}
		
		.tourDate h4 {
			color:#FFFBBC;
			
		}
		
		.date {
			display:inline-block;
			float: left;
			margin-right:20px; padding:5px 8px;
			background:#FFF;
			
			font-family:'Rockwell';
			text-align:center;
			color:#000;
			text-transform:uppercase;
		}
			.month {
				font-size:18px;
				display:block;
			}
			.day {
				display:block;
				
				font-size:36px;
				color:#161616;
			}
			.weekday {
				font-size:18px;
				display:block;
			}

		.dateInfo {
			display:block;
			float:none;
			width:auto;
			padding-left:80px;
		}
			.dateInfo p {
				margin-bottom:0px !important;
			}

#media {
	
}
	.vid-container {
		position: relative;
		height: 0; 
		padding-bottom: 40%; padding-top: 0px; 
	}
	
	.vid-container iframe, .vid-container object, .vid-container embed {
		position: absolute; top: 0; left: 0;
		width: 100%; height: 100%; 
	}
	
	/*.vid-list-container {
		width: 92%;
		margin-top: 20px; margin-left:4%; padding-bottom: 20px;
		overflow: hidden;
	}
	
	.vid-list {
		position: relative; top:0; left: 0;
		width: 1344px;
	}*/
	
	.vid-item {
		display:inline-block;
		/*float: left;*/
		width: 148px; height: auto;
		margin: 0; padding: 10px 20px 10px 0px; 
		vertical-align:top;
		
		cursor:pointer;
	}
	
	.thumb {
		height: 84px;
		overflow:hidden;
	}
	
	.thumb img {
		position: relative; top: -13px;
		width: 100%;
	}
	
	.vid-item .desc {
		margin-top:5px;
		/*color: #21A1D2;*/
		font-size: 15px;
	}
	

#bookMe {
	
}
	#bookMe ul, #bookMe p {
		float:none;
		width:800px;
		margin:40px auto; 
		
		text-align:center;
	}
	#bookMe ul li {
		display:inline-block;
		width:16%; min-width:80px;
		margin:40px auto;
	}
	#bookMe ul li.large {width:49%; text-align:center; }

	#bookMe ul li.large a.icon {padding:180px 0px 0px 0px; }
		
	#bookMe a.icon {
		display:inline-block;
		width:100%; height:0px;
		padding:60px 0px 0px 0px; 
		color:#FFF;
		opacity:1;
		
		font-size:24px;
		text-align:center;
	}
		#bookMe a.icon:hover {
			opacity:.6;
		}
		#bookMe a.email {background:url('/_images/icon_email.png') top center no-repeat; background-size:contain; }
		#bookMe a.phone {background:url('/_images/icon_phone.png') top center no-repeat; background-size:contain; }
		#bookMe a.facebook {background:url('/_images/icon_fb.png') top center no-repeat; background-size:contain; }
		#bookMe a.twitter {background:url('/_images/icon_tw.png') top center no-repeat; background-size:contain; }
		#bookMe a.instagram {background:url('/_images/icon_ig.png') top center no-repeat; background-size:contain; }
		#bookMe a.youtube {background:url('/_images/icon_yt.png') top center no-repeat; background-size:contain; }
		#bookMe a.behance {background:url('/_images/icon_be.png') top center no-repeat; background-size:contain; }
		#bookMe a.tumblr {background:url('/_images/icon_tumblr.png') top center no-repeat; background-size:contain; }
	

.content {
	padding:80px 40px;
	color:#FFF;	
	
	text-align:left;
}
	.content h1 {
		margin-bottom:20px;
		
		font-family:'rokasfreestyle1';
		font-size:72px;
		letter-spacing:.05em;
	}
	.content h2 {
		margin-bottom:20px;
		
		font-family:'Rockwell-bold';
		font-size:24px;
	}
	.content p, ul {
		margin-bottom:40px;
		
		font-family: 'Rockwell';
		font-size:16px;
		line-height:24px;
	}
	.content em {font-family:'Rockwell-bold-italic', 'Rockwell-bold', 'Rockwell' !important; }
	
	.content blockquote {
		margin-bottom:40px; padding-left:60px; padding-right:60px;
		color:#FFFBBC;
		
		font-family:'Rockwell-italic', 'Rockwell' !important;
		/*font-family:'rokasfreestyle1';*/
		letter-spacing:.05em;
		font-size:48px;
		text-align:center;
		line-height:normal;
	}
	.content a, .photoCredit a {
		color:#FFFBBC;
	}
		.content a:hover, .photoCredit a:hover {
			color:#FFF;
		}

.photoCredit {
	display:block; 
	position:absolute; top:auto; left:10px; bottom:1%;
	
	font-size:12px;
	color:#FFF;
}
	
	


/*************************************************************/
/***************************FOOTER****************************/
/*************************************************************/


/*******SCREEN SIZE*******/
@media screen and (max-width: 1206px){
	nav ul li {
			display:block;
	}
	nav a {
		padding:5px 0px;
	}

	#copyright {
		position:absolute; top:95.5%; bottom:auto; right:4.5%;
		width:auto; 
	}
	
}
	
@media screen and (max-width: 824px){
	#bookMe ul, #bookMe p {
		width:auto;
	}
		#bookMe ul li {width:30%; }

@media screen and (max-width: 624px){
body {background:url('/_images/bg_home-mobile.jpg') top no-repeat; background-size:cover; }
	#bg_bio {background:url('/_images/bg_bio-mobile.jpg') top no-repeat; background-size:cover; }
	#bg_dates {background:url('/_images/bg_media-mobile.jpg') top no-repeat; background-size:cover; }
	#bg_media {background:url('/_images/bg_dates-mobile.jpg') top no-repeat; background-size:cover; }
	#bg_bookMe {background:url('/_images/bg_bookMe-mobile.jpg') top no-repeat; background-size:cover; }
	
	body, #bg_dates, #bg_bookMe {
		background-position:60% 0%;
	}
	#bg_bio, #bg_media {
		background-position:80% 0%;
	}
	
	.desktop {display:none; }
	.mobile {display:block; }


	#frame {
		position:relative;
		top:0%; left:0%;
		width:auto; height:100%;
		border:0px;
	}
		#frameBottomLeft, #frameBottomRight, #logo, #copyright {display:none; }
	
	#home img {
		top:30%;
	}

	#bio .content, #dates .content {
		width:auto;
	}
	#bookMe a.icon {
		font-size:16px;
	}

	.content {
		padding:80px 20px;
	}
		.content h1 {
			font-size:36px;
		}
		.content blockquote {
			padding-left:7%; padding-right:7%;
			font-size:24px;
		}
	
	
	.vid-item {
		width: 30%; height: auto;
		padding-right:3%; 
	}
		.thumb {height: auto; }
		.thumb img {top:0; }
		
		.vid-item .desc {
			font-size: 12px;
			line-height:18px;
		}
		
	nav {
		display:block;
		bottom:auto; right:auto; top:0; left:0;
		width:100%; height:auto;
		margin:0px; padding:0px;
		background:rgba(0,0,0,.6);
		text-align:left;
	}
		nav ul {
			display:none;
		
			-webkit-transition: all .25s ;
			-moz-transition: all .25s ;
			-ms-transition: all .25s ;
			-o-transition: all .25s ;
			transition: all .25s ;
		}
			nav.open ul {
				display:block; 
			
				-webkit-transition: all .25s ;
				-moz-transition: all .25s ;
				-ms-transition: all .25s ;
				-o-transition: all .25s ;
				transition: all .25s ;
			}
			
		nav ul li {
			display:block;
			font-size:48px;
		}
			nav a {
				display:block;
				padding:20px;
			}
			nav a:hover {opacity:.6; text-decoration:underline; }
			
			nav ul li:first-child a {
				padding-left:20px;
			}
			nav ul li:last-child a {
				padding-right:20px;
			}
			
		.menu {
			display:block;
			background:url('/_images/icon_menu.png') right no-repeat; background-size:contain;
		}
}

@media screen and (max-height: 380px){
	#home, #bio, #dates, #media, #bookMe {
		min-height:380px;
	}

	#home img {
		top:10%; left:25%;
		width:50%;
	}
}
	
