body {text-align: left; margin: 0; padding: 0; height: 100%; background-color: #ffffff; }

a {outline: 0; }

@media screen and (min-width: 700px) {#menu-icon {
display: none
}}

@media screen and (max-width: 700px) {#menu-icon {
width: 40px;
height: 40px;
margin: auto;
padding: 5px;
display: block;
z-index: 999;
}}

#nav {
clear: both;
top: 38px;
width: 100%;
margin-left: -40px;
display: none;
list-style-type: none;
}

li {
	display:block;
	width:300px;
     	height: 40px;
	margin: auto;
	margin-bottom: 20px;
	text-align: center;
       	line-height: 40px;
	text-decoration: none;
}


li a {
	display:block;
	width:300px;
     	height: 40px;
	margin: auto;
	margin-bottom: 20px;
	text-align: center;
	line-height: 45px;
	font-family: 'Arial', sans-serif; font-size: 24px; color: #ffffff;
	text-decoration: none;
        background-color: #990000;
}
li a:hover {background-color: #cc0000;}


#navbar {position: fixed; z-index: 2; top: 0px; width: 100%; height: 40px; text-align: right; font-family: 'Arial', sans-serif; font-size: 15px; color: #ffffff;
background: rgba(128, 0, 0, 0.8);} 
#navbar { }
#navbar a:link {color: #ffffff; text-decoration: none;}
#navbar a:visited {color: #ffffff; text-decoration: none;}
#navbar a:hover {color: #ffffff; text-decoration: none;}
#navbar a {outline: 0; }
@media only screen and (max-width: 700px){
			#navbar { display: none } }

.jump {display: inline-block; padding: 0 2% 0 2%; line-height: 40px;}
.jump:hover {background-color: #cc0000; transition-duration: 0.3s;}

/* make keyframes that tell the start state and the end state of our object */

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:3s;
	-moz-animation-duration:3s;
	animation-duration:3s;
      
}

.fade-in.one {-webkit-animation-delay: 1s;
        -moz-animation-delay: 1s;
        animation-delay: 1s;
        margin: 25% 0 0 40%; width: 300px; height: 300px; max-width: 100%; background-image: url('red-circle.png'); background-size: contain; background-repeat: no-repeat; 

}
        @media only screen and (max-width: 1000px){
			.fade-in.one {margin: 25% auto; } }
        
.fade-in.two {-webkit-animation-delay: 3s;
        -moz-animation-delay: 3s;
        animation-delay: 3s;
        padding: 30% 2%; font-size: 30px; color: #ffffff; text-align: center; 
}
        @media only screen and (max-width: 1000px){
			.fade-in.two {font-size: 20px; } }

#pane-1{width: 100%; }
	@media only screen and (max-width: 700px){
			#pane-1 {position:absolute; left:-9999px; padding: 0;} }

#pane-m-1{width: 700px; max-width: 96%; text-align: center; }
	@media only screen and (min-width: 700px){
			#pane-m-1 { display:none; } }

#pane-1-text{width: 40%; padding: 10% 0 10% 10%; font-family: 'Lustria', serif; font-size: 22px; color: #000000; text-align: left; }

@media only screen and (max-width: 1000px){
			#pane-1-text {width: 30%; padding: 10% 0 10% 5%; font-size: 18px; } }

@media only screen and (max-width: 700px){
			#pane-1-text {width: 92%; padding: 0 4%; } }


#welcon {margin-top: 80%; text-align: left;}
        
@media only screen and (max-width: 700px){
			#welcon {width: 90%; margin: 0; padding: 20px; } }

#pane-2{width: 100%; padding: 50px 0 4% 0; }
	@media only screen and (max-width: 1200px){
			#pane-2 {position:absolute; left:-9999px; padding: 0; } }

#pane-t-2{width: 92%; padding: 4%; background-color: #000000; font-family: 'Lustria', serif; font-size: 18px; color: #ffffff; text-align: left; }
	@media only screen and (min-width: 1200px){
		#pane-t-2 { display:none; } }

@media only screen and (max-width: 700px){
			#pane-t-2 { display:none; } }


#pane-m-2{width: 92%; padding: 4%; background-color: #000000; font-family: 'Lustria', serif; font-size: 18px; color: #ffffff; text-align: left; }
	@media only screen and (min-width: 700px){
			#pane-m-2 { display:none; } }

#pane-3 {width: 100%; padding: 100px 0 50px 0; }
	@media only screen and (max-width: 700px){
			#pane-3 {position:absolute; left:-9999px; padding: 0; } }

#pane-m-3{width: 700px; max-width: 92%; padding: 4%; font-family: 'Lustria', serif; font-size: 18px; color: #000000; text-align: left; }
	@media only screen and (min-width: 700px){
			#pane-m-3 { display:none; } }

.mob-pic {width: 300px; max-width: 100%; margin: 4% 0 4% 0; border-style: solid; border-width: 1px; border-color: #000000; }

#pane-4{width: 100%; padding: 15% 0 15% 0; }
        @media only screen and (max-width: 700px){
			#pane-4 {position:absolute; left:-9999px; padding: 0; } }
	
#pane-m-4{width: 640px; max-width: 92%; padding: 4%; background-color: #000000; }
	@media only screen and (min-width: 700px){
			#pane-m-4 { display:none; } }

.panev {position: relative; width: 1500px; max-width: 100%; margin: auto; padding: 50px 0 50px 0; background-color: #000000 }
@media screen and (max-width: 800px){
	.panev {padding: 0 } }


#artist-content {display: inline-block; width: 80%; margin: 0 0 50px 10%; text-align: left; font-family: 'Lustria', serif; font-size: 18px; color: #000000;}
		
		#artist-content a:link {color: #800000; text-decoration: underline;}
                
		#artist-content a:visited {color: #800000; text-decoration: underline;}
                
		#artist-content a:hover {color: #800000; text-decoration: none;}
                
		#artist-content a {outline: 0; }
       			 @media only screen and (max-width: 700px){
					#artist-content {width: 96%; padding: 4%; margin: auto; background-color: #ffffff; } }

.artist-pic {float: left; margin-right: 2%; border-style: solid; border-width: 1px; border-color: #000000;}

.t-ragtime {float: left; margin-right: 2%; max-width: 250px;}

#rev-content {width: 40%; margin: 10% 0 0 50%; text-align: left; font-family: 'Lustria', serif; font-size: 20px; color: #ffffff;}
	            @media only screen and (max-width: 1200px){
			#rev-content {width: 90%; padding: 4% 0 4% 0; margin: auto;} }

#contact-content {width: 40%; margin-left: 50%; background: rgba(0, 0, 0, 0.8); padding: 20px; border-radius: 10px; text-align: left; font-family: 'Lustria', serif; font-size: 20px; color: #ffffff;}
	#contact-content a:link {color: #99ebff; text-decoration: underline;}
        #contact-content a:visited {color: #99ebff; text-decoration: underline;}
        #contact-content a:hover {color: #99ebff; text-decoration: none;}
        #contact-content a {outline: 0; }
        @media only screen and (max-width: 700px){
			#contact-content {width: 70%; margin: 0 auto 0 auto; padding: 0; text-align: center;} }

#social {width: 90%; text-align: left;}
        @media only screen and (max-width: 700px){
			#social {width: 100%; text-align: center; } }

.row {display: inline-block; margin-right: 40px;}
        @media only screen and (max-width: 700px){
			.row {text-align: right; margin: 0 0 0 40px; } }


.hand {position: fixed; right: 30px; bottom: 30px; z-index: 9999}
	@media only screen and (max-width: 500px){
			.hand {right: 10px; bottom: 10px; } }

.title {font-family: 'Lustria', serif; font-size: 40px; letter-spacing: 10px; color: #99ebff; }
	@media only screen and (max-width: 700px){
			.title {margin-right: -10px; text-align: center; font-size: 20px; } }

img {max-width: 100%;}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

#footer {width: 100%; padding: 4% 0 4% 0; background-color: #000000; font-family: 'Arial', sans-serif; font-size: 12px; letter-spacing: 1px; color: #ffffff; text-align: center; }
#footer a:link {color: #99ebff; text-decoration: underline;}
#footer a:visited {color: #99ebff; text-decoration: underline;}
#footer a:hover {color: #99ebff; text-decoration: none;}
#footer a {outline: 0; }