body {font-family: 'Raleway', sans-serif;
             font-size: 14pt;
             background-color: #ffffff;
             color: #000000;
             height:100%; margin:0; padding:0;
}


.shaela, .sf-sidebox {display: none}

.spacer {display: none;}

.sf-centeredwrapper h1 {font-family: "Oswald";
    font-size: 36pt;
    background-color: #000000;
    color: #ffffff;
    padding: 15px; margin: 0;
    font-weight: 400; line-height: 1}


.sf-content {transition: all  0.4s ease; line-height: 1.5;}

.sf-content a:link, .sf-content a:visited {
   text-decoration: none;
   color: #FB0901;
}

.sf-content a:hover, .sf-content a:active {
   text-decoration: underline;
   color:#FB0901;
}

.headline {font-family: "Oswald";
    background-color: #000000;
    text-align: center;
    font-size: 41pt;
    color: #FFFFFF;
    padding-top: 0px;
    padding-bottom: 0px;
    margin: 0px;}

.sf-centeredwrapper h2, .sf-centeredwrapper h3 {font-family: "Oswald";
    font-size: 18pt;
    background-color: #000000;
    color: #ffffff;
    padding: 15px; margin: 0;
    font-weight: 400; line-height: 1}

.sf-centeredwrapper h4 {font-family: 'Raleway', sans-serif;
    font-size: 12pt;
    font-weight: bold;
    background-color: #000000;
    color: #ffffff;
    padding: 15px; margin: 0;
    font-weight: 400; line-height: 1}

.sf-centeredwrapper h5 {font-family: "Oswald";
    font-size: 24pt;
    background-color: #ffffff;
    color: #000000;
    padding: 15px; margin: 0;
    font-weight: 400; line-height: 1}

.sf-centeredwrapper h6 {font-family: "Oswald";
    font-size: 18pt;
    background-color: #ffffff;
    color: #000000;
    padding: 15px; margin: 0;
    font-weight: 400; line-height: 1}

.clear {clear: both}

.sf-centeredwrapper p {padding-left: 5%; padding-right: 5%; margin-top: 20px; margin-bottom: 20px;}

.sf-centeredwrapper blockquote {padding-left: 5%; padding-right: 5%}


.sf-paddedwrapper {padding-left: 5%; padding-right: 5%; margin-top: 20px; margin-bottom: 20px;}

.sf-photoheader img, .sf-fullwidth, .sf-fullwidth img {width: 100%; height: auto; display: block;}

.sf-photoheader p, .sf-awardsphotobox {background-color: #000000; font-family: "Oswald";
                   color: #ffffff; font-size: 12pt; font-style: italic;
                   margin: 0px;}

.sf-awardsphotobox {padding: 0px; margin-top: -20px}
.sf-awardsphotobox p {padding-bottom: 15px}

.sf-fullwidth {font-family: "Oswald"; background-color: #000000;
                   color: #ffffff; font-size: 12pt; font-style: italic;
                   margin: 0px;}

.sf-fullwidth p {padding-bottom: 15px}


@media (min-width: 650px) {
.sf-photoheader img {width: 400px; float: left; margin: 15px}
}


.sf-focus {padding: 15px; background: #F2F2F2; overflow: auto; height: auto;
           margin-top: 15px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px;
           border-top: 1px solid #000000; border-bottom: 1px solid #000000;}
.sf-focus img {float: left; max-width: 100%; height: auto; padding-right:15px;}
.sf-focus p {padding-left: 15px;}

.sf-photoheaderz {float: left; 
    font-size: 7pt;
    font-style: italic;
    color: #636262;
    text-align: left;
    margin-right: 15px; margin-left: 5%;
}

.sf-photoheaderz img {max-width: 100%; height:auto;}

.sf-left {float: left; max-width: 100%; height: auto; margin-right: 15px; margin-bottom: 15px}
.sf-right {float: right; max-width: 100%; height: auto; margin-left: 15px; margin-bottom: 15px}


.inputbox {width: 100%; margin-bottom: 10px;}




/* For parallax - also include class mbr-parallax-background */

.sf-ratiobox {
  width: 100%;
  padding-bottom: 35%;
  background-size: cover;
}

.sf-carouselpromotext {color: #ffffff; background: #000000; padding: 5px; margin: 15px;}

.sf-buttons, .whitebutton {
    font-family: "Oswald";
    border-radius: 5px; padding: 10px; margin: 5px;
}

a.sf-buttons:link, a.sf-buttons:visited{ 
   text-decoration:none; 
   color: #000000;
   
}

a.sf-buttons:hover{ 
   text-decoration:none; 
   color:#ffffff;
}

a.sf-buttons:active{ 
   text-decoration:none; 
   color:#000000;
}

a.whitebutton:link, a.whitebutton:visited{ 
   text-decoration:none; 
   color: #000000;
}

a.whitebutton:hover{ 
   text-decoration:none; 
   font-style: italic;
   color:#000000;
}

a.whitebutton:active{ 
   text-decoration:none; 
   color:#000000;
}




/* Headshot grid - width is 1/3 width of sf-content */

.sf-members {float: left;
   width: 211px;
   height: 80px;
   margin-top: 0px;
   margin-left: 15px;
   margin-right: 3px;
   margin-bottom: 15px;
}


.sf-headshot {float: left; margin-right: 7px;}

.sf-leftheadshot {float:left; margin-right: 15px; clear: both; max-width: 100%; height: auto;}

/* CSS for member bio popups */

/* jqModal base Styling courtesy of;
	Brice Burgess <bhb@iceburg.net> */

/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
	the Window's z-index value will be set to 3000 by default (via jqModal.js). */
	
.jqmWindow {
    display: none;
    position: fixed;
    top: 17%;
    left: 50%;
    margin-left: -425px;
    width: 850px;
    z-index: 30000;
}

.sf-biobox {
    width: 100%;
	height: 400px;
    overflow-y:auto;
    background-color: #ffffff;
    color: #000000;
    border: 5px solid #000000;
    padding: 0px;
    float: left;
}



.sf-closebutton {background:url('http://www.sacredfools.org/images/elements/closebutton-round.png');
   width: 37px;
   height: 36px;
   margin-top: 0px;
   background-repeat: no-repeat;
   background-position: center;
   font-size: 0.0; line-height: 0.0;
   text-decoration: none; text-indent: -9999px;
   position: absolute;
   top: -17px;
   left: 820px;
}


@media (max-width: 875px) {

.jqmWindow {
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    margin-left: 0;
    width: 100%;
    height: 100%;
    z-index: 30000;
}

.sf-biobox {
    width: 100%;
	height: 100%;
    overflow-y:auto;
    background-color: #ffffff;
    color: #000000;
    border: 5px solid #000000;
    padding: 0px;
    float: left;
}

.sf-closebutton {background:url('http://www.sacredfools.org/images/elements/closebutton-round.png');
   width: 37px;
   height: 36px;
   margin-top: 0px;
   background-repeat: no-repeat;
   background-position: center;
   font-size: 0.0; line-height: 0.0;
   text-decoration: none; text-indent: -9999px;
   position: absolute;
   top: 2%;
   left: 2%;
}

}



@media (max-width: 500px) {

.sf-leftheadshot {width: 100%; height: auto;}

}


.jqmOverlay { background-color: #000; }

/* Background iframe styling for IE6. Prevents ActiveX bleed-through (<select> 
form elements, etc.) */
* iframe.jqm {position:absolute;top:0;left:0;z-index:-1;
	width: expression(this.parentNode.offsetWidth+'px');
	height: expression(this.parentNode.offsetHeight+'px');
}

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}


.sf-columnblock {
    padding: 15px;
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

@media (max-width: 650px) {

.sf-columnblock {
    padding: 15px;
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}
}

.sf-associates {padding-left: 1em; text-indent: -1em; /* indent associate member names that wrap */
    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera prevent names wrapping to next column  */
    page-break-inside: avoid; /* Firefox prevent names wrapping to next column  */
    break-inside: avoid; /* IE 10+ prevent names wrapping to next column */
} 

.sf-credit {font-weight: bold; padding-top: 5px}
.sf-name {padding-bottom: 5px}

.sf-memberwrapper {width: 75%; float: left; border-right: solid 1px #000000;}

.sf-staffbox {
    text-align: center;
}

.sf-staffheader {font-family: "Oswald";
    font-size: 24pt;
    background-color: #ffffff;
    color: #000000;
    padding: 5px; margin: 0;}

.sf-stafflink {display: none}


@media (max-width: 975px) {

.sf-memberwrapper {width: 100%; border: none; float: none;}

.sf-staffcolumns{clear: both;
    padding: 15px;
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

.sf-staffheader {font-family: "Oswald";
    font-size: 36pt;
    background-color: #000000;
    color: #ffffff;
    padding: 15px; margin: 0;}

.sf-stafflink {display: inline}

}



@media (max-width: 650px) {

.sf-staffcolumns {
    padding: 15px;
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}
}



.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }



/* Shows flexbox for front page */

.sf-ratiobox {
  width: 100%;
  padding-bottom: 35%;
  background-size: cover;
}

.sf-showbox {
  display: flex;
  align-items: left;
  flex-direction: row;
  flex-wrap: wrap;
}

.shows-image {
    background-position: center;
    background-size: 100%;
    -moz-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

.shows-image:hover {
    background-size: 200%;
}

.sf-show {flex-basis: 25%; background-color: red; position: relative;}

@media (max-width: 768px) {.sf-show {flex-basis: 50%;}
}

@media (max-width: 480px) {.sf-show {flex-basis: 100%;}
}

.showtitle {
    position: absolute;
    bottom: 0px;
    width: 100%;
    color: #ffffff;
    text-align: center;
    padding: 0px; margin: 0px;
    font-family: 'Roboto', sans-serif;
    font-size: 12pt;
    font-weight: 500;
    background-color: rgba(61, 69, 79, 0.75)
}

.showtitle p {padding: 0px; margin: 5px}


/* program formatting */


.paper {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.75), 0 6px 20px 0 rgba(0, 0, 0, 0.75);
	background-color: #F3F1E4;
	font-family:"Times New Roman";
	margin: auto;
	width: 70%;
	margin-top: 15px; margin-bottom: 15px; padding: 35px;
	}


.paperheader {font-size: 18pt; font-weight: bold}

ul.leaders {
    max-width: 40em;
    padding: 0;
    overflow-x: hidden;
    list-style: none}
ul.leaders li:after {
    float: left;
    width: 0;
    white-space: nowrap;
    content:
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "}
ul.leaders span:first-child {
    padding-right: 0.33em;
    background: white}
ul.leaders span + span {
    float: right;
    padding-left: 0.33em;
    background: white;
    position: relative;
    z-index: 1}

.extracharacters {text-align: right; font-style: italic}

.listspacer {padding-bottom: 100px}

.leaders {display: block; margin-left: auto; margin-right: auto; margin-top: 0}
.titlesplit {display: none}
.sf-focus {border: 1px solid #000000;}

.centeredtext {text-align: center}
.centeredtext p {margin-bottom: 5px}

@media (max-width: 550px) {
.titlepage, .sf-focus {font-size: 10pt;}
.titlesplit {display: inline}
}


@media (max-width: 360px) {
.titlepage {font-size: 8pt;}
}


@media (max-width: 310px) {
.titlepage {font-size: 7pt;}
}

.programadwrapper {margin: 15px; border: 1px solid #000000;
display: block;
margin-left: auto;
margin-right: auto;
width: 75%;
}

.programadheadline {text-align: center;
background-color: #000000;
color: #ffffff; 
padding: 15px;}

.programadheader {text-align: center;
	font-family: "Oswald";
    font-size: 24pt;
	background-color: #BDBCBC;
    color: #000000;
    padding: 15px; margin: 0;
    font-weight: 400; line-height: 1
}

.programadimage {width: 100%;}

.programadtext p {text-align: center; padding: 7px}