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


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

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


a.btn-white {font-weight: bold; color: #ffffff}


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

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

.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;}

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

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

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

.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 {width: 100%; height: auto;}
.sf-photoheader p {background-color: #000000; font-family: "Oswald";
                   color: #ffffff; font-size: 12pt; font-style: italic;
                   margin: 0px; padding-top: 5px; padding-bottom: 5px;}


.sf-focus {width: 100%; padding: 15px; background: #F2F2F2; overflow: auto; height: auto;
           margin-top: 15px; margin-bottom: 15px; 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;
}


a.bluebutton {background: #3CA2D9; font-size: 25px;}
a.pinkbutton {background: #CB1680; font-size: 25px;}
a.blackbutton {background: #000000; font-size: 25px; border: solid #ffffff 1px}
a.whitebutton {background: #FFFFFF; font-size: 25px; border: solid #000000 1px}
a.yellowbutton {background: #EFD402; font-size: 25px;}



@media (max-width: 500px) {

a.bluebutton {font-size: 15px;}
a.pinkbutton {font-size: 15px;}
a.blackbutton {font-size: 15px;}
a.whitebutton {font-size: 15px;}
a.yellowbutton {font-size: 15px;}

}


/* 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-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%; }