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

*{
	margin:0px;
	padding: 0px;
	font-family: 'Chivo', sans-serif;
	color:#3a3a3a;
	background-color:#f3efde;
	
}
a{
	text-decoration:none;	
}
a:hover{
}
#main{
	text-align:center;
	max-width:85%;		
	margin:0px auto;
	height:100%;
}
#site-title-block{
	font-family: "Asul", serif;
    text-align: left;
    font-size: 2.5em;
    line-height: 40px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 20px;
    margin-bottom: 20px;
    border-bottom-style: solid;
    padding-bottom: 10px;
    height: 143px;
    border-color: #3c3c3c;
}
#logo-container{
	max-width:250px;
	margin-bottom:6px;	
}
#logo{
	width:100%;	
	margin-top:10px;
	
}
#content-wrapper{
	overflow:hidden;
	/*border-bottom-style: solid;
    padding-bottom: 15px;
    border-color: #3c3c3c;*/
}

#photo-content, #about-content, #artist-content{
	width:70%;
	float:left;
	margin-bottom:35px;
}
#photo-content{
	width:68%;
}
#about-content{
	text-align:justify;
	line-height:25px;	
}
#photo{
	width:100%;
	/*background-image:url(img/kv.jpg);*/
	height:500px;	
	background-size:contain;
	background-repeat: no-repeat;
	transition: background-image 0.2s ease-in-out;
	cursor:pointer;
}
#artist-photo{
	float:right;
	width:50%;	
	text-align:center;
	font-size:13px;
}
.artist-page-pic{
	max-width:100%;
}
#artist-info{
	width:45%;
	float:left;
	text-align: justify;
    font-size: 13px;	
}
#side-nav{
	/*
	width: 29%;
    float: right;
    border-left-width: 1px;
    border-left-style: solid;
    border-color: #a0a0a0;
	height:500px;
	position:relative;*/
	width: 22%;
    float: right;
    border-left-width: 1px;
    border-left-style: solid;
    border-color: #a0a0a0;
    height: 470px;
    position: relative;
    padding-left: 25px;
}
h1{
	text-align:left;
	font-size:18px;
	padding-left:25px;
	font-style:italic;
	letter-spacing:1px;
}
h2{
	font-size:18px;
	text-transform: uppercase;
    margin-bottom: -20px;
    font-style: italic;
}
h3{
	text-align: left;
    font-size: 18px;
    font-style: italic;
    letter-spacing: 1px;
		
}
ul{
	padding-left:25px;
	padding-top:25px;
	text-align:left;
	list-style:none;	
	text-transform:uppercase;
	font-size: 13px;
}
ul li{
	padding-bottom:5px;	
}
ul li a:hover, #about-content a:hover, h1 a:hover:not(.artists), #artist-photo a:hover, #mobile-bio a:hover, #job-description-container a:hover, #artist-info a:hover, #mobile-about-bio a:hover{
	text-decoration:underline;
	text-decoration-color:#3e44f2;
}

.about{
	margin-top:25px;	
	margin-bottom:25px;
}
#footer{
    padding: 10px;
    text-align: left;
    font-size: 11px;	
	padding-left:0px;
	display:none;
}
#fixed-footer{
	position:fixed;
	left:0px;
	bottom:0px;
	height:30px;
	width:100%;
	margin-top:-10px;
}
#fixed-content{
	/*
	max-width: 85%;
    margin: 0px auto;
    font-size: 11px;
    text-align: left;
    border-top-style: solid;
    border-width: 3px;
    border-color: #3c3c3c;
    padding-top: 5px;
	*/
	    text-align: left;
    max-width: 85%;
    margin: 0px auto;
    font-size: 11px;
	border-top-style: solid;
    padding-top: 5px;
}

#socials{
	text-align: left;
    position: absolute;
}
.social-icon{
	padding-left:25px;	
}
.clear{
	clear:both;	
}
#mobile-bio{
	display:none;	
}
#mobile-about-bio{
	display:none;
	text-align: justify;
	font-size: 13px;
}	
#job-description-container{
    font-size: 13px;
    text-align: left;
    width: 70%;
    float: left;
	height:1000px;
}
.job-title{
	text-decoration:underline;
	text-transform:uppercase;	
}
@media only screen and (max-width: 500px) {
	#artist-info{
		display:none;	
	}
	#mobile-about-bio{
		display:inline;
	}
	#artist-photo{
		width:100%;	
	}
	#side-nav{
		width:100%;
		padding-bottom:10px;
		margin-top:50px;
	}	
	#photo-content, #about-content, #artist-content{
		width:100%;
		height:300px;
	}

	#mobile-bio{
		display:inherit;
		margin-top: 230px;
		width: 100%;
		position: relative;	
		font-size: 13px;
    	text-align: left;
	}
	h1, ul{
		padding-left:0px;	
	}
	#socials{
		position:relative;
		margin-left:-25px;	
	}
	#job-description-container{
		height:1300px;
		width:100%;	
	}
}
/* Custom, iPhone Retina */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}