/******************************/
/* head
/******************************/

#header{
    background: rgba(33,32,31,0.5);
    width: 100%;
    height: 75px;
    display: block;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 104;
}
#logoFull{
	background: url('../media/images/Full Logo - White-08.png') no-repeat;
    background-size: contain;
	width: 350px;
    height: 100px;
    display: block;
    position: fixed;
    top: 3px;
    left: 15px;
    z-index: 100;
}
#fbLogo{
	position: fixed;
	top: 20px;
	right: 340px;
	width: 40px;
	height: 40px;
	z-index: 100;
	display: block;
}
a.rollIconFB{
	display: block;
	width: 40px;
	height: 40px;
	background: url('../media/images/FacebookLogo.png') no-repeat;
	background-size: 40px 80px;
	background-position: 0 0;	
}
a.rollIconFB:hover{
	background-position: 0 -40px;
}

#spotifyLogo{
	position: fixed;
	top: 20px;
	right: 190px;
	width: 40px;
	height: 40px;
	z-index: 100;
	display: block;
}
a.rollIconSpot{
	display: block;
	width: 40px;
	height: 40px;
	background: url('../media/images/SpotifyLogo.png') no-repeat;
	background-size: 40px 80px;
	background-position: 0 0;	
}
a.rollIconSpot:hover{
	background-position: 0 -40px;
}

#appleLogo{
	position: fixed;
	top: 20px;
	right: 140px;
	width: 40px;
	height: 40px;
	z-index: 100;
	display: block;
}
a.rollIconApp{
	display: block;
	width: 40px;
	height: 40px;
	background: url('../media/images/AppleLogo.png') no-repeat;
	background-size: 40px 80px;
	background-position: 0 0;	
}
a.rollIconApp:hover{
	background-position: 0 -40px;
}

#twitterLogo{
	position: fixed;
	top: 20px;
	right: 290px;
	width: 40px;
	height: 40px;
	z-index: 100;
	display: block;
}
a.rollIconTweet{
	display: block;
	width: 40px;
	height: 40px;
	background: url('../media/images/twitter.png') no-repeat;
	background-size: 40px 80px;
	background-position: 0 0;	
}
a.rollIconTweet:hover{
	background-position: 0 -40px;
}

#instaLogo{
	position: fixed;
	top: 20px;
	right: 390px;
	width: 40px;
	height: 40px;
	z-index: 100;
	display: block;
}
a.rollIconInsta{
	display: block;
	width: 40px;
	height: 40px;
	background: url('../media/images/instaLogo.png') no-repeat;
	background-size: 40px 80px;
	background-position: 0 0;	
}
a.rollIconInsta:hover{
	background-position: 0 -40px;
}

#youtubeLogo{
	position: fixed;
	top: 20px;
	right: 240px;
	width: 40px;
	height: 40px;
	z-index: 100;
	display: block;
}
a.rollIconTube{
	display: block;
	width: 40px;
	height: 40px;
	background: url('../media/images/youtube.png') no-repeat;
	background-size: 40px 80px;
	background-position: 0 0;	
}
a.rollIconTube:hover{
	background-position: 0 -40px;
}

#amazonLogo{
	position: fixed;
	top: 20px;
	right: 90px;
	width: 40px;
	height: 40px;
	z-index: 100;
	display: block;
}
a.rollIconAmazon{
	display: block;
	width: 40px;
	height: 40px;
	background: url('../media/images/amazon2.png') no-repeat;
	background-size: 40px 80px;
	background-position: 0 0;	
}
a.rollIconAmazon:hover{
	background-position: 0 -40px;
}

#soundcloudLogo{
	position: fixed;
	top: 20px;
	right: 40px;
	width: 40px;
	height: 40px;
	z-index: 100;
	display: block;
}
a.rollIconCloud{
	display: block;
	width: 40px;
	height: 40px;
	background: url('../media/images/soundcloud.png') no-repeat;
	background-size: 40px 80px;
	background-position: 0 0;	
}
a.rollIconCloud:hover{
	background-position: 0 -40px;
}

/******************************/
/* main / body
/******************************/


body{
	/*background: url('../media/images/Clouds_01.jpeg') no-repeat;*/
	background-color: #000000;
        background-size: cover;
}

#mainWin{
	position: absolute;
	top: 76px;
	left: 20%;
	width: 60%;
	height: 100%;
	z-index: 101;
	display: block;
}

#bio{
	position: absolute;
	top: 0;
	left: 20%;
	width: 65%;
	height: 100%;
	font-family: verdana, arial, courier;
	font-size: 12px;
	color: #ffffff;
	z-index: 102;
	padding: 10px;
	display: block;
}

#vidFrame{
	position: relative;
	height:70%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 102;
	display: block;
}

#rightPanel{
	position: fixed;
	right: 0;
	top: 76px;
	background: url('../media/images/RightPanel.png') no-repeat;
	background-size: 100%;
	width: 20%;
	height: 100%;
	opacity: 0.3;
	z-index: 100;
	display: block;
}

#leftPanel{
	position: fixed;
	left: 0;
	top: 76px;
	background: url('../media/images/LeftPanel.png') no-repeat;
	background-size: 100%;
	width: 20%;
	height: 100%;
	opacity: 0.3;
	z-index: 100;
	display: block;
}


/******************************/
/* foot
/******************************/

#footer {
	position: fixed;
	bottom: 0px;
	left: 0px;
	height: 50px;
	padding-top: 14px;
	background: #000000;
	width: 100%;
	z-index: 104;
}

#mailTo{
	position: fixed;
	bottom: 40px;
	left: 50%;
	color: #ffffff;
	margin: 0 0 0 -250px;
	font-family: verdana, arial, courier;
	font-size: 16px;
	display: block;

}

a:link { color:#ffffff; font-style: italic; text-decoration: none; cursor: pointer;}
a:visited { color:#ffffff; font-style: italic; text-decoration: none; cursor: pointer;}
a:hover { color:#C92724;font-style: italic; cursor: pointer;}
a:active { color:#C92724; font-style: italic; text-decoration: none; cursor: pointer;}


#copyright {
	position: absolute;
	bottom: 15px;
	left: 50%;
	color: #ffffff;
	margin: 0 0 0 -200px;
	font-family: verdana, arial, courier;
	font-size: 12px;
}