@font-face{
	font-family: roboto;
	src: url(font/Roboto-Condensed.tff);
}
@font-face{
	font-family: roboto;
	src: url(font/Roboto-BoldCondensed.tff);
	font-weight: bold;
}
@font-face{
	font-family: roboto;
	src: url(font/Roboto-BoldCondensedItalic.tff);
	font-weight: bold;
	font-style: italic;
}
@font-face{
	font-family: roboto;
	src: url(font/Roboto-CondensedItalic.tff);
	font-style: italic;
}

body{
	margin: 0;
	padding: 0;
	background-color: #dcd0d0;
	font-family: roboto;
	font-size: 1.4vw;
	color: #4E0F18;


}

@media (min-device-width:320px) and (max-device-width:768px) {
body {
	overflow-y: hidden;
	}
}

li a, li a:link, li a:active, li a:visited{
	text-decoration: none;
	color: white;
}

a, a:link, a:active, a:visited{
	color: #381e1e;
	font-weight: bold;
}
a:hover{
	color: #9b2434;
}

#header{
	height: 130px;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI3MCUiIHN0b3AtY29sb3I9IiM0ZTBmMTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI4MCUiIHN0b3AtY29sb3I9IiM0ZTBmMTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNGUwZjE4IiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top,  rgba(78,15,24,1) 70%, rgba(78,15,24,1) 80%, rgba(78,15,24,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(70%,rgba(78,15,24,1)), color-stop(80%,rgba(78,15,24,1)), color-stop(100%,rgba(78,15,24,0)));
background: -webkit-linear-gradient(top,  rgba(78,15,24,1) 70%,rgba(78,15,24,1) 80%,rgba(78,15,24,0) 100%);
background: -o-linear-gradient(top,  rgba(78,15,24,1) 70%,rgba(78,15,24,1) 80%,rgba(78,15,24,0) 100%);
background: -ms-linear-gradient(top,  rgba(78,15,24,1) 70%,rgba(78,15,24,1) 80%,rgba(78,15,24,0) 100%);
background: linear-gradient(to bottom,  rgba(78,15,24,1) 70%,rgba(78,15,24,1) 80%,rgba(78,15,24,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e0f18', endColorstr='#004e0f18',GradientType=0 );

	position: fixed;
	width: 100%;
	z-index: 10;

}



#wrapper{
	padding-top: 130px;
	margin-left:auto;
    margin-right: auto;
	bottom: 0px; /*Set bottom value to HeightOfBottomFrameDiv*/
	overflow: auto;
    width: 100%;
    z-index: -10;
    background-color: #4e0f18;
}

#bgwrapper{
margin: 0;
padding: 0;
background: #4e0f18;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiM0ZTBmMTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiNkY2QwZDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #4e0f18 25%, #dcd0d0 40%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,#4e0f18), color-stop(40%,#dcd0d0));
background: -webkit-linear-gradient(top,  #4e0f18 25%,#dcd0d0 40%);
background: -o-linear-gradient(top,  #4e0f18 25%,#dcd0d0 40%);
background: -ms-linear-gradient(top,  #4e0f18 25%,#dcd0d0 40%);
background: linear-gradient(to bottom,  #4e0f18 25%,#dcd0d0 40%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e0f18', endColorstr='#dcd0d0',GradientType=0 );


}

#homepage{

text-align: center;
margin: auto;
	margin-bottom: 20px;
}



#page{
	width: 790px;
	background-color: white;
	margin: 10px auto;
	padding: 30px 65px 55px 65px;
	box-shadow: 7px 7px 13px #888888;
	-moz-border-radius: 5px;
	border-radius: 5px;


}

#page p{
	width: 700px;
}

#guitar-r{
	position: absolute;
	float: right;
	right: 0;
	top: 2500px;
	display: none;
}
#guitar-l{
	position: absolute;
	float:left;
	left: 0;
	top: 1500px;
	display: none;
}

img.center{
	display: block;
	margin: 0 auto 55px auto;
}

#header ul{
padding: 0 0;
display: flex;
justify-content: center;
list-style: none;
height: 40px;
}
#header ul li{
	float: left;
	display: block;
	color: white;
	font-size: 2.7vw;
	margin-left: 30px;
	height: 78px;
	animation-name: out;
	animation-duration: 1s;
	text-shadow: 0px 0px 0px #ff0000;
	transition: 1s all ease;
}

#header ul li.topmargin{
	margin-top: 16px;
}



#header ul li:hover{
		text-shadow: -2px -2px 4px #ff0000;
	animation-name: shadow-wiggle;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: all ease;
	animation-direction: alternate;

}

#header ul li.selected{
	border-bottom: 10px solid white;
}

.portraits{
	text-align: center;
	float: left;
	width: 45%;
	background-color: #dcd0d0;
		-moz-border-radius: 7px;
border-radius: 7px;
border: 1px solid #c2aeb1;
padding: 20px 0;


}

.margin{margin-right: 70px;}



.portraits img{
	-moz-border-radius: 7px;
border-radius: 7px;

box-shadow: 3px 3px 2px #888888;
}

p.title{
	text-align: center;
	font-size: 30px;
}

.polaroid{
box-shadow: 3px 3px 10px #888888;
			-moz-border-radius: 4px;
border-radius: 4px;
margin-right: 20px;
margin-bottom: 10px;
}






#footer{
	padding: 20px auto;
	margin:0;
	text-align: center;
	width: 100%;
	font-size: 12px;
	color: #999;
	background-color: white;
}

#footer a, #footer a:link, #footer a:active, #footer a:visited{
	color: #999;
	font-weight: normal;
	font-size: 10px;
}

.frameBox{
	box-shadow: 7px 7px 13px rgba(0,0,0,0.5);
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#faqTOC{
	display: block;
	background-color: #efefef;
	padding: 8px 30px;
	margin-top: -22px;
	border: 1px solid #4E0F18;
	border-radius: 5px;

}

#faqTOC ol li a{
	color: black;
	text-decoration: underline;
	font-weight: normal;
}

#faqTOC ol li a:hover{

	color: #4E0F18;
}

#faqContent p{
	margin-left: 18px;
}

#faqUpLink{
	font-weight: lighter;
	font-size: 11px;
	margin-left: 538px;
}

@keyframes shadow-wiggle {
    0%   {text-shadow: -2px -2px 3px #ff0000;}
    100% {text-shadow: -3px -3px 8px #ff0000;}
}

.section-title{
	font-family: roboto;
	font-weight: bold;
	color: white;
	text-align: right;
	font-size: xx-large;
	margin: 0 5vw 0 0;
	text-shadow: -2px -2px 4px #ff0000;
	animation-name: shadow-wiggle;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: all ease;
	animation-direction: alternate;
 	padding: 0;
}

.title-black{
	color: black !important;
}

#contacts{
	display: flex;
}
#contacts > div{
	 padding: 0px;
	width: 50%;

}

#underwrapper{

	background-color: white;
}

#textDiv{

}

#underwrapper span{
	padding: 0 35px;
}

#about{
	padding: 5vw;
	margin: 1.5vw;
	background-color: #ffecec;
}

#submissions, #fans, #social{
	background-color: #ffecec;
	margin: 1.5vw;
	width: 36vw;
	padding: 1vw 3vw 3vw 3vw;
	min-width: 320px;
	float: left;
}
#contacts #submissions{
	padding: 1vw 3vw 3vw 3vw;
}

#fans img{
	width: 9vw;
}
#fans div{
	font-size: 0.8vw;
	text-decoration: none;
}

#submissions ul{

	padding: 1.4vw;
}
#social img{
	width: 9vw;
	display: block;
	clear: both;
	margin-bottom: 4px;
}

#social > div{

	width: 10vw;
}

#social div{
		float: left;
		font-size: 0.8vw;
		text-decoration: none;
		padding: 10px;
}

#fans a{
	text-align: center;
}