@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Unica+One&display=swap');

html, body{width:100%; height: 100%; max-width: 100%; margin:0px !important; padding: 0px; font-family: 'Open Sans', sans-serif; font-size:16px; color: #666; box-sizing:content-box}

a{text-decoration: none; color: rebeccapurple}
h1{font-family: 'Fredericka the Great', cursive; font-size:36px; text-transform: uppercase; font-weight:normal; text-shadow:1px 1px 1px #000}
h2{font-family: 'Fredericka the Great', cursive; text-transform: uppercase; font-weight:normal}
h2{font-size:24px; color: #000}
h3{font-size:16px}

strong{color:#333}
div{position: relative; box-sizing:border-box}

input[type=text], input[type=email], input[type=tel]{border:1px solid #ccc; padding:6px; border-radius:3px}
textarea{}

hr{width:100%}
hr{
    overflow: visible; /* For IE */
    padding: 0;
    border: none;
    border-top: medium double #ccc;
    color: #333;
    text-align: center;
	color:#ccc;
	margin: 90px 0;
}
hr:after{
    content: "𝄞";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
	font-size:40px
}

#top{z-index: 1000}
.button{background-color: rebeccapurple; color:#fff; font-weight:700; border:0px; border-radius:3px; padding: 6px 20px}
.floatleft{float:left; margin: 0 30px 30px 0}
.floatright{float:right; margin: 0 0 30px 30px}
.navActive{color:rebeccapurple !important; border-bottom:3px solid rebeccapurple}

.content{max-width:1200px; margin: 0 auto; padding: 60px 40px 100px; width:100%}
.content p{line-height: 30px}
.content h1{margin: 0 0 40px}
.content iframe{max-width: 100%; height: auto}

.nav{display:flex; position: absolute; right:30px; top:15px}

.nav > ul{z-index:100; transition:all 500ms ease; display:flex; list-style:none}
.nav > ul a{display:block; padding: 10px 16px; color: #333; font-weight:700; font-size:18px; text-transform: uppercase;font-family: 'Unica One', cursive; transition: all 300ms ease}
.nav > ul a:hover{background-color:#442cc0; background-color: rgba(70,46,194,0.5)}

#floatingnav{position:fixed; top:-200px; left:0px; height:100px; width:100%; background-color: #fff; box-shadow:0px 2px 15px #666; z-index: 100; transition:all 300ms ease}
#floatingnav > div{margin: 0 auto; max-width:1200px; position: relative}
#floatingnav.show{top:0px}
#floatingnav .logo{left:10px; margin: 10px 0; font-size:36px}
#floatingnav .logo > div:nth-of-type(2){left:184px; top:30px}
#floatingnav .nav{position: absolute; top:0px; right:10px}

.fullscreen{width:100%; height: 100%; position: absolute; top:0px; left:0px; display: flex; vertical-align: middle; align-content: center; align-items: center; z-index: 1; background-size: cover; background-position: center left; background-repeat: no-repeat}
.fullscreen > div{flex-grow: 1; text-align: center}

#mobnavbutton{width:50px; height: 50px; z-index: 100; position: fixed; top:30px; right:-100px; transition:all 1s ease; cursor:pointer}
#mobnavbutton > div{border:3px solid #333; border-radius:2px; margin: 10px 0px; box-shadow:1px 1px 1px #000}

#mobnav{position: fixed; top:110px; right:-300px; z-index: 1100; background-color: #fff; min-width:200px; transition:all 500ms ease}
#mobnav ul{flex-direction: column; margin: 0px !important; padding: 0px !important; width:100%}
#mobnav li{margin: 0px; padding: 0px; border-bottom:1px solid #efefef}
#mobnav.active{right:15px !important}

#hero{width:100%; padding-bottom: 32%; background-color: #ccc; background-image: url("clarinet.jpg"); background-size: cover; background-position: top center}

.logo{max-width: 1200px; margin: 20px auto 30px; padding:0 5px 0; font-family: 'Fredericka the Great', cursive; font-size:50px; cursor:pointer}
.logo > div:nth-of-type(2){position: absolute; top:45px; left:280px; font-size:30px; color: rebeccapurple}

footer{background-color: #2B2B2B; color: #fff; padding: 60px 10px; width:100%; font-size:14px; box-sizing: border-box}
footer > div{max-width:1200px; margin: 0 auto; display: flex}
footer > div > div{flex-grow: 1; width:50%}
footer > div > div:last-of-type{text-align: right}
footer a{color: #fff}
footer a:hover{opacity: 0.9}

#top{position: fixed; bottom:150px; right:-50px; font-size:40px; opacity: 0.4; cursor:pointer; transition:all 300ms ease}
#top:hover{opacity:1}
.show{right:30px !important}

.mailchimp{background-color: #efefef; padding: 0 30px 30px; border:1px solid #ccc; border-radius:4px}
.indicates-required{font-size:12px; padding: 0 0 20px; display: block}
label{font-size:14px; display: inline-block; width:110px}
.mc-field-group{padding: 0 0 10px}

.credit{opacity: 0.2}
.credit:hover{opacity: 0.7}

.contactFlex{display:flex}
.contactFlex > div{width:50%; border-radius:10px}

/* video wrap */
.videoWrapper{
	position: relative;
	padding-bottom: 56.25%;
	background-color: #000;
	height:0px;
	transition: all 300ms ease;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	z-index: 1
}

@media (min-width: 1600px){
	#hero{padding-bottom: 0; height: 400px; background-position: center center}
}

@media (max-width: 1140px){
	#nav{top:-100px}
	#floatingnav .nav{display:none}
	#mobnavbutton{right:30px}
}
@media (max-width: 799px){
	body{background-position: left center}
	footer > div{flex-direction:column}
	footer > div > div{width:100%; max-width:100%; text-align: center !important; padding: 5px 5px}
	.contactFlex{flex-direction:column}
	.contactFlex > div{width:100%}
}
@media (max-width: 600px){
	.content img{width:100%; max-width:100%; height:auto; float:none; margin: 15px 0}
}
@media (max-width: 500px){
	hr:after{display:none}
	#mobnavbutton{top:10px; right:15px}
	#hero{padding-bottom: 50%; max-width: 100%}
	.logo{max-width: 80%; font-size:30px; left:-20px}
	.logo > div:nth-of-type(2){top:25px; left:170px; font-size:20px}
	#top{bottom:60px; z-index: 1000}
	#mobnavbutton{width:40px; height:40px}
	#mobnavbutton > div{border:2px solid #333;}
	#mobnav{top:80px; box-shadow:2px 2px 5px #666}
}


@media (min-width: 799px){
	@media (max-height: 730px){
		body{background-position: left top -100px}
	}
}