#playtheoboe
{
	/* background-image: url("/_img/youcanplay_bg.png"); */
	background-color: rgba(253,  181,  49, 0.84);
	padding: 0; margin: 0; 

}

#reed {float: left;}
.sb_registration {width: 100%; max-width: 900px;}
#playtheoboe #logo
{
	width: 35%;
	float: left;
}


#play-header
{
	width: 60%;
	float: right;
	padding-right: 3%;
	
}

#play-header h1
{
	margin-bottom: 0;
	font-family: Arial, sans serif;
	font-weight: 800;
	text-transform: uppercase;
}

#play-header h2 {color: #FFF; size: 24px; font-weight: 400;}

#abstract-oboe
{
	height: 30em;
	width: auto;
	float: left;
	margin-top: 0; padding-top: 0;
	margin-right: 4em;
}

#abstract-oboe-horiz
{
	display: none;
}

div#play-body
{
	width: 80%;
	margin: auto auto;
	font-size: 22px; 
	line-height: 1.4;
}

	  
  a, a:link, a:visited, a:active {color: #546B39; text-decoration: none;}
  a:hover {background-color: #B9D991;}


div.quote {
	border-top: 1px dotted #9c9c9c;
	border-bottom: 1px dotted #9c9c9c;
	margin: 2em 4em;
}

p.quote {
	font: "Playfair Display", serif; 1em; weight: normal; font-style: italic; color: #717171;
}

/* FORM STUFF */
	.label {margin: 2px 0;}
	.field {margin: 0 0 20px 0;}	
		.content {width: 960px;margin: 0 auto;}
		div#central {margin: 40px 0px 100px 0px;}
		@media all and (min-width: 768px) and (max-width: 979px) {.content {width: 750px;}}
		@media all and (max-width: 767px) {
			body {margin: 0 auto;word-wrap:break-word}
			.content {width:auto;}
			div#central {	margin: 40px 20px 100px 20px;}
		}
		body {font-family: 'Lato',Arial,sans-serif;background:#ffffff;margin: 0 auto;-webkit-font-smoothing: antialiased;  font-size: initial;line-height: 1.7em;}	
		input, textarea {width:100%;padding: 15px;font-size:1em;border: 1px solid #A1A1A1;	}
		button {
			padding: 12px 60px;
			background: #B9D991;
			border: none;
			color: rgb(40, 40, 40);
			font-size:1em;
			font-family: "Oswalt", "Helvetica", "Arial", sans-serif;
			cursor: pointer;	
		}
		#message {  padding: 0px 40px 0px 0px; }
		#mail-status {
			padding: 12px 20px;
			width: 100%;
			display:none; 
			font-size: 1em;
			font-family: "Oswalt", sans-serif;
			color: rgb(40, 40, 40);
		}
	  .error{background-color: #F7902D;  margin-bottom: 40px;}
	  .success{background-color: #48e0a4; }
		.g-recaptcha {margin: 0 0 25px 0;}	







/* ---- HEADER -- */  
	div#header {width: 100%; margin-bottom: 0em;}
	img.mainheader {display: block; text-align: center; margin-left: auto; margin-right: auto; margin-top: 4em; margin-bottom: 5em;}
	#header img.mainheader {display: block; margin-left: auto; margin-right: auto; margin-top: 3em; margin-bottom: 2em; width: 40%;}
  
	/* NAV---------- */  
	/* Style the navigation menu */
.navbar {	
	width: 100%;
	background-color: #FFF;
	overflow: auto;
	color: #5e5e5e;
	margin-bottom: 1em;
	margin-top: 0;
	border-bottom: 1px dotted black;
}

/* Navigation links */
.navbar a {
display: block;
  float: left;
  padding: 12px 0;
  color: #5e5e5e;
  text-decoration: none;
  font-size: 1.25em;
  text-transform: uppercase;
  margin-top: 0;
  width: 20%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
  text-align: center; /* If you want the text to be centered */
}

/* Add a background color on mouse-over */
.navbar a:hover {
  background-color: #dcdcdc;
}

/* Style the current/active link */
.navbar a.active,
body#bio div#main div.navbar a.bio,
body#teaching div#main div.navbar a.teaching,
body#concerts div#main div.navbar a.concerts,
body#listen div#main div.navbar a.listen
{
  background-color: #ececec;
  color: #888888;
}

.vidcontainer {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    margin-bottom: 2em;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* Add responsiveness - on screens less than 500px, make the navigation links appear on top of each other, instead of next to each other */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3),
 only screen 
 and (max-width: 720px){
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    padding-left: 1.5em;
    text-align: left; /* If you want the text to be left-aligned on small screens */
  }
  #header img.mainheader {margin-left: auto; margin-right: auto; margin-bottom: 0; width: 60%;}
  #playtheoboe #logo
{
	width:80%;
	float: none;
	margin-left: auto; margin-right: auto;
}


#play-header
{
	width: 80%;
	float: none;
	margin-left: auto; margin-right: auto;
	
}

#play-header h1
{
	font-size: 6em;
	margin-bottom: 0;
	font-family: Arial, sans serif;
	font-weight: 800;
	text-transform: uppercase;
}

#abstract-oboe
{
	display: none;
}
#abstract-oboe-horiz
{
	display: block;
	height: auto;
	width: 100%;
	float: none;
	margin-top: 1em; padding-top: 0;
	margin-bottom: 1em;
}

div#play-body
{
	width: 90%;
	margin: auto auto;
	font-size: 24px; 
	line-height: 1.5;
}
}
  
    div#main {margin:0 0 5em 0; max-width: 52em; display: block; margin-left: auto; margin-right: auto;}
	
	/* ul#nav {display: block; text-align: center;  margin-bottom: 2em; margin-top: 1em; margin-left: auto; margin-right: auto; width: 100%;}
	ul#nav li {display: inline; padding: 0em 1.5em; margin: 0; border-left: 1px solid #7d7676; text-transform: uppercase;} */

    h1 {font: 4em "Playfair Display", serif; weight: normal; font-style: italic; color: #000000;}
    p {font: 1.3em "Lato", sans-serif; line-height: 1.5em; weight: 400; color: #000000;}
    h3, h5, summary {font: 1.3em "Oswald", sans-serif; color:#FFF; background-color: #717171; font-weight: 300; text-transform: uppercase; letter-spacing: .2em; text-align: right; padding: .5em 1em; margin-top: -.5em; border-radius: 0 1em 1em 0; }
  
    h4 {font: 1.3em "Oswald", sans-serif; color:#FFF; background-color: #717171; font-weight: 300; text-transform: uppercase; letter-spacing: .2em; text-align: right; padding: .5em 1em; margin-top: -.5em; border-radius: 0 1em 1em 0; }
	h2 {font: 2.5em "Oswald", sans-serif; Color: #717171; font-weight: 300;}
    summary {
	    font: 1.3em "Oswald", sans-serif; color:#FFF; 
	    background-color: #717171; 
	    font-weight: 300; 
	    text-transform: uppercase; 
	    letter-spacing: .2em; 
	    padding: .5em 1em;
	    border-radius: 0;
	    margin-top: 0;
	    margin-left: 0;
	    padding-left: 3em;
	    }
    section details div p {font-size: 1.1em;}
    section details div {margin-left: 1em; margin-right: 1em; max-width: 52em;}
  
    h3 {text-align: left; margin-top: 2em;}
    
    h5 {font: 1.3em "Oswald", sans-serif; color: #717171; background-color: transparent; text-align: left; padding: 0; margin: 0; text-transform:none; letter-spacing: .05em;}

    hr {color: #b6b6b6;}
    span.title {color: #D2061F;}
    li {margin-top: .8em;}
    li strong {color: #434343;}
    li.special {background-color:#ffe6a0;}
    span.postponed {text-decoration: line-through;}
    
    /* FOOTER STUFF */
footer  {
    background-color: #555;
    color: #bbb;
    line-height: 1.7;
}

footer * li {list-style: none; padding-left: 0; margin-left: 0; margin-bottom: 0; margin-top: 0;
}
footer * ul {padding-left: 0; margin-left: 0; margin-bottom: 2em;}
footer a {
    text-decoration: none;
    color: #eee;
}
/* a:hover {
    text-decoration: underline;
} */
.ft-title {
    color: #fff;
    font-size: 1.375rem;
    padding-bottom: 0.2rem;
    margin-bottom: .2rem;
    
}

.ft-main-item li, .ft-main-item p {color: #bcbcbc;}
.ft-main-item li a {color: #FFF;}
/* STICK THE FOOTER AT THE BOTTOM */


div.container {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
.container {
    flex: 1;    /* same as flex-grow: 1; */
}

/* LINE UP THE MAIN FOOTER */ 
.ft-main {
    padding: 1.25rem 1.875rem;
    display: flex;
    flex-wrap: wrap;
}
.ft-main-item {
	font-size: 1.1em;
    padding: 1.25rem;
    min-width: 12.5rem /*200px*/;
}



@media only screen and (min-width: 29.8125rem /*477px*/) {
    .ft-main {
        justify-content: space-around;
    }
}
@media only screen and (min-width: 77.5rem /*1240px*/ ) {
    .ft-main {
        justify-content: space-evenly;
    }
}

/* NEWSLETTER STYLES */
footer * form {
	padding-top: 2em;
    display: flex;
    flex-wrap: wrap;
}
footer * input[type="email"] {
    border: 0;
    padding: 0.625rem;
    margin-top: 0.3125rem;
}
footer * input[type="submit"] {
    background-color: #00d188;
    color: #fff;
    cursor: pointer;
    border: 0;
    padding: 0.625rem 0.9375rem;
    margin-top: 0.3125rem;
}

/* SOCIAL FOOTER */ 

.ft-social {
    padding: 0 1.875rem 1.25rem;
}
.ft-social-list {
    display: flex;
    justify-content: center;
    border-top: 1px #777 solid; 
    padding-top: 1.25rem;
}
.ft-social-list li {
    margin: 0.5rem;
    font-size: 1.25rem;
}


/* LEGAL FOOTER */
.ft-legal {
    padding: 0.9375rem 1.875rem;
    background-color: #333;
}
.ft-legal-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.ft-legal-list li {
    margin: 0.125rem 0.625rem;
    white-space: nowrap;
}
/* one before the last child */
.ft-legal-list li:nth-last-child(2) {
    flex: 1;       /* same as flex-grow: 1; */
}