@charset "utf-8";
/* CSS Document for Ancillary Sites*/

body {background-color: #ffffff; font-family: 'Palatino Linotype', 'Book Antiqua', 'Palatino', serif; margin:0;}
	a {color: #333399; text-decoration: none}

			/* whitespace container around the whole thing */
	div.row {margin: 35px;
		/*margin-left:25px;*/}
		
			/* Clear floats after the columns */
	div.row::after {content: ""; display: table; clear: both;}
	
			/* link style */
	a:hover {color: #000099; text-decoration: underline;}
	
			/* image style */
	img {pointer-events: none;}
		
	.img-dropshadow {
		-webkit-box-shadow: -10px 10px 8px 0 rgba(0, 0, 0, 0.15);
  		box-shadow: -10px 10px 8px 0 rgba(0, 0, 0, 0.15);
  		/*max-height: 700px;*/
		}
	
			/* .sidebar styles (left block) */
	div.sidebar {background-color: #ffffff; float:left; width: 20%; font-size: .75em;  text-align: center; padding-top: 20px;}
	div.sidebar img {width: 100%; display: block; margin-left: auto; margin-right: auto; margin-bottom: 20px;}
	div.sidebar p {line-height: 100%; padding: 3px; text-align: center;}
	
			/* buttons on sidebar */
	div.buttons {width: 80%; align-content: center; text-align: center; font-family: "HCo Gotham", "Helvetica", "Arial", "Helvetica Neue", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: 300; padding: 5px; background-color: #ffffff; border-left: 2px solid #dfdede; border-top: 2px solid #dfdede; border-bottom: 2px solid #bbbbbb; border-right: 2px solid #bbbbbb; margin: auto; color: #757575;}
	.buttons a {text-decoration: none; /*color: #757575;*/}
	div.buttons:hover {background: #F3F3F3; }
	
			/* .mainarea styles (right block)*/
	div.mainarea {float:left; width:70%; padding-top: 10px; margin-left: 5%;}
	
			/* .intro styles (inside mainarea top) */
	div.intro {background-color: #ffffff; width: 100%; margin-bottom: 10px;}
	div.intro p {font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-size: 95%; padding-left: 0px; padding-right: 20px;}
	
			/* .text styles (inside mainarea middle) */
	div.text {background-color: #ffffff; width: 95%; margin-left: 5%}
	div.text p {font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-size: 95%; padding-left: 20px; padding-right: 20px;}
	div.text li {font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-size: 95%; padding-right: 20px; padding-bottom: 10px;}
	h1, h2, h3, h4, h5, h6 {font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; }
	h1 {font-size: 30px; letter-spacing: .1em; font-weight: 500; color: #EB796F; margin-top: -10px;}
	h2 {font-size: 20px; letter-spacing: .05em; font-weight: 500; color: #EB796F; padding-top: 10px; margin-top: 0px;}
	h3 {font-size: 18px; letter-spacing: .05em; font-weight: 500; color: #222222; margin-top: -15px;}
	h4 {font-size: 14px; font-weight: 300; color: #333333; margin-top: -10px;}
	h6.chapter {font-size: 14px; letter-spacing: .1em; line-height: 100%; font-weight: 700; color: #EB796F;}
		
	.audiosamples {
		margin-top:4em;
        margin-right: 20px;
        margin-left: 20px;
		width: 100%;
		}
		
	.container {
        margin: 2em; /* I moved this here to separate your container divs inside the row */
		margin-top: 1.5em;
		text-align: center;
		width: 75%;
		}
   
	.audioPlayer{
		
        /*display: block;*/
        border-radius: 20px;
        margin:0;
		width: 80%;
        }

		@media screen and (max-width: 992px){
			div.row {text-align: center; margin: 5px;}
			div.sidebar{width: 80%; text-align: center; margin-right: 10%; margin-left: 10%;}
			div.mainarea {width: 80%; text-align: center; margin-right: 10%; margin-left: 10%;}
			.audiosamples .container {text-align:center;}
			div.container {text-align: center; min-height: 3em;}
			div.buttons {min-height: 1.75em; font-size: 3em; text-align: center;}
			div.intro p {padding-left: 0px; padding-right: 0px; font-size: 1.5rem;}
			h1 {font-size: 5rem;}
			h2 {font-size: 3rem;}
			h3 {font-size: 2rem;}
		}