@charset "utf-8";
/* CSS Document */
/* color scheme
*  vocal - red #f44336
*  bio - sepia
*  hybrid - teal #009688
*  orchestral, chamber - blue #2196F3
*  nav - indigo #3f51b5 (also top nav)
*  Modal functionality from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_bottom
*/

a.plain{text-decoration:none}
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", Arial, sans-serif}
h1 {letter-spacing:0.16em}
img {width:100%}
p{margin:0.53em 0}

/* divs and other page structure */
.saw-body{margin-bottom:2.14em}
.saw-clearfix::after {content: "";clear: both;display: table;}
.saw-cursorPlay{cursor: url(images/play.png) 17 17, pointer;}
.saw-cursorPause{cursor: url(images/pause.png) 17 17, pointer;}
.saw-footer{background-image:url("images/saw-footer.jpg");background-repeat:no-repeat;}
.saw-header{background-image:url("images/saw-header.jpg");background-repeat:no-repeat;}
.saw-pageGrid{margin:2.14em auto 0 auto}
.saw-vidContainer{position: relative;width: 100%;height: auto!important; padding-bottom: 56.25%;}
.saw-vid{position: absolute;top: 0;left: 0;width: 100%;height: 100%}
/* Modal Dialog */
.saw-modal{display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /*  width */
  height: 100%; /*  height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  -webkit-animation-name: fadeIn; /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}
.saw-modal-content {position:relative;bottom:0;background-color:#fefefe;max-width:800px;min-width:400px;margin:5.35em auto 0.53em;-webkit-animation-name:slideIn;-webkit-animation-duration: 0.4s;animation-name: slideIn;animation-duration: 0.4s}
.saw-close {color:#676767;float:right;font-size:28px;font-weight:bold;}
.saw-close:hover,.saw-close:focus {color:#4960df;text-decoration: none;cursor:pointer;}
.saw-modal-header {padding: 2px 16px;background-image:url("images/saw-header.jpg");background-repeat:no-repeat;color:#676767;text-align:left;}
.saw-modal-body {padding:0 0.53em 1.07em;}
.saw-modal-footer {padding:1.07em;background-image:url("images/saw-footer.jpg");background-repeat:no-repeat;color:#676767;text-align:center}

/* Modal Animation */
@-webkit-keyframes slideIn {
  from {bottom: -300px; opacity: 0} 
  to {bottom: 0; opacity: 1}
}
@keyframes slideIn {
  from {bottom: -300px; opacity: 0}
  to {bottom: 0; opacity: 1}
}
@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}
@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

/* navigation buttons */
.saw-pointer{cursor:pointer}
.saw-button{border:none;display:inline-block;padding:.267 .533em;vertical-align:middle;overflow:hidden;text-decoration:none;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap;color:#676767;font-variant:small-caps}
.saw-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.saw-button-active{opacity:1!important;color:#000}
.saw-button:disabled{cursor:not-allowed;opacity:0.3}
.saw-button:hover,.saw-button:focus{color:#4960df!important;font-weight:400!important}
.saw-button-narrow{padding:0.533em 0.533em}
.saw-button-wrap{white-space:normal!important}
.saw-inlineIcon{max-width:22px!important;margin:0!important}
.saw-inlineIconHeight{max-height:16px!important;max-width:16px!important;margin:0!important}


/* paragraphs, lists and headings */
.saw-footerImg{max-width:24px}
.saw-heading{margin:0.53em 0 0 0;padding-bottom:0}
.saw-subhead{margin:0 0 0.53em 0}
.saw-copyright{margin:0 0 0.53em 0}
.saw-byline{margin:0.1em 0 0.53em 0;font-style:italic}
.saw-credit{margin:0.1em 0 0.53em 0;font-style:italic;text-align:right}
.saw-nomargin{margin:0}
.saw-date{margin:1em 0 0 0;text-align:right}
.saw-ul{list-style-type:none;padding:0.53em 1.07em;margin:0;text-align:left}.saw-ul li{padding:0;}.w3-ul li:last-child{padding-bottom:0.533em}

/* text */
.saw-title{font-style:italic}
.saw-smallcaps{font-variant:small-caps}
.saw-padding{padding:1.07em}
/* opacity and filters */
.saw-hover-opacity60:hover{opacity:0.60!important}
.saw-hover-filter-off:hover{filter:none}
.saw-hover-grayscale15:hover{filter:grayscale(15%)}
.saw-sepia, .saw-hover-sepia:hover{filter:sepia(15%)}

/* audio controls */
#playDiv{width:100%;text-align:center;padding:0 1.07em}
#nowPlaying{text-align:center;vertical-align:middle;font-size:medium;padding:0.53em 0;}
#ctrls{text-align:right;vertical-align:middle;font-size:medium;padding:0.53em 0;}
#prevBtn{max-width:5%;float:left;text-align:right;font-size:medium;padding:0}
#pauseBtn{max-width:5%;float:left;text-align:center;font-size:medium;padding:0}
#nextBtn{max-width:5%;float:left;text-align:left;font-size:medium;padding:0}
#volBtn{max-width:6%;float:left;text-align:center;font-size:medium;padding:0}
#prog{width:45%;height:100%;float:left;text-align:left;font-size:medium;padding:0.53em;border-radius:4px;}
#vol{width:34%;height:100%;float:left;text-align:left;font-size:medium;padding:0.53em;border-radius:4px;}
#progMax{width:90%;height:7px;float:left;vertical-align:bottom;font-size:medium;border-radius:4px;}
#volMax{width:90%;height:7px;float:left;vertical-align:bottom;font-size:medium;border-radius:4px;}
#progBar{width:1%;height:7px;float:left;vertical-align:bottom;border-radius:4px;}
#volBar{width:100%;height:7px;float:left;vertical-align:bottom;border-radius:4px;}