html{
        font-size: 90%;
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    html{
        font-size: 210%;
    }
}
@font-face {
  font-family: 'MarkerFelt';
  src: url('MarkerFelt.ttf'); 
}

html{
	font-family: "Open Sans", sans-serif;
	border: none;
	margin: 0;
	padding: 0;  
}	
body{
	display: block;
	margin: 0;
	padding: 0;
	/*background-color: #ffeeaa;*/
	background-color: #FFF5CC;
	text-align: center;
}
a{
	color: inherit;
	text-decoration: inherit; 
}

#logo-block{
	text-align: center;
	margin-bottom: 1rem;
	margin-top: 1rem;
}
#logo-main{
	height: 5rem;
	opacity: 0.75;
	display: inline-block;
    float: left;
    padding: 0.5rem 0;
    padding-left: 1rem;
}
#logo-title{
	text-align: center;
	font-size: 1.5rem;
	opacity: 0.75;
	display: inline-block;
	padding-left: 1rem;
	vertical-align: top;
	padding-top: 4rem;
}
#menu{
	text-align: center;
	width: 100%;
	background-color: #FFC000;
	/*padding: 0.5rem 0;*/
	height: 6rem;
	box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
}
#menu-wide{
    display: inline-block;
	text-align: right;
	width: 100%;
    max-width: 75rem;
}
#menu-wide a{
  display: inline-block;
}
#menu-wide span{
    letter-spacing: -0.075em;
    font-weight: 600;
	text-align: center;
	transition: all 0.3s ease;
	display: inline-block;
	cursor: pointer;
	box-sizing: border-box;
	font-size: 1.25rem;
	/*font-weight: bold;*/
	height: 6rem;
    padding: 0 2rem;
    line-height: 6rem;
    color: rgba(0,0,0,0.6);
}
#menu-wide span:hover{
    color: rgba(0,0,0,0.85);
    background-color: rgba(255,255,255,0.25);
}
#menu-wide span:active, #menu span.selected{
	transition: all 0.0s ease;
	/*box-shadow: inset 0px 0px 3.5rem -0.5rem rgba(0,0,0,0.3), 0px 0px 3.5rem -0.5rem rgba(0,0,0,0.3);*/
	/*background-color: #CC9A00;*/
    background-color: rgba(0,0,0,0.15);
}
#menu-short{

}
#overflow-button{
	display: inline-block;
	float: right;
	padding: 1.75rem;
	cursor: pointer;
}
#overflow-button:active{
    background-color: rgba(0,0,0,0.15);
}
#overflow-button div{
	background-color: rgba(0,0,0,0.75);
	height: 0.5rem;
	width: 3rem;
	margin: 0.25rem 0rem;
	border-radius: 0.25rem;
}
#overflow-menu{
	transition: height 0.3s ease-in;
	background-color: #FFC000;
	position: absolute;
	right: 0;
	top: 6rem;
	/*width: 10rem;*/
	box-shadow: 0px 1px 10px rgba(0,0,0,0.3); 
	/* A little hack here, to hide the top shadow using 'clip'. Shadows start in negative values relative to their parent container. 
	The 'rect' defines the top, right, bottom, and left points at which we clip the image. 
	We clip the image at 0px top, which means the top shadow isn't shown, and then clip at a negative left value (so that all the left shadow is shown), 
	and a huge bottom and right value, so those shadows are shown too*/
    clip: rect(0px,10000px,10000px,-10000px);
    overflow: hidden;
    z-index: 100;
    height: 0px;
}
#overflow-menu.selected{
	transition: height 0.3s ease-out;
    height: 36rem;
	  /*the overflow menu items are 4.5rem high, so the total height above must equal the number of items in the menu x 4.5*/
}
#overflow-menu a{
	display: block;
	text-align: left;
	font-size: 1.5rem;
	padding: 1.5rem 2rem;
	padding-right: 6rem;
	border-top: 1px solid rgba(0,0,0,0.25);
}
#overflow-menu a.selected, #overflow-menu a:active{
    background-color: rgba(0,0,0,0.15);
}
#content-container{
    width: 100%;
    max-width: 80rem;
    text-align: center;
    display: inline-block;
    position: relative;
    top: 0;
}
.content{
    transition: opacity 0.15s ease 0s, z-index 0s ease 0.45s, height 0s ease 0.45s;
    clear: both;
    vertical-align: top;
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    display: inline-block;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}
.content:not(.selected){
	opacity: 0;
	pointer-events: none;
    /*display: none;*/
    height: 0;
    overflow: hidden;
}
.content.selected{
    transition: opacity 0.4s ease 0s, z-index 0s ease 0.45s, height 0s ease 0s; 
	opacity: 1;
}
.content-title{
	text-align: center;
	width: 100%;
	font-size: 3rem;
	color: rgba(0,0,0,0.75);
	padding: 2rem 0;
	font-weight: 300;

    padding-left: 2rem;
    padding-right: 2rem;
    margin: 0 auto;
    box-sizing: border-box;
}
.content-title .sub-title{
	font-size: 1.5rem;
	font-weight: 600;
}
.content-box{
    vertical-align: top;
    text-align: left;
    margin: 0.5rem;
    margin-bottom: 1rem;
    width: 22.5rem;
    min-height: 10rem;
    padding: 0rem;
    display: inline-block;
    box-sizing: border-box;
}
.content-box.double-wide{
    min-width: 25rem;
    max-width: 55rem;
    width: auto;
}
.content-box.notso-wide{
    min-width: 25rem;
    max-width: 45rem;
    width: auto;
}
.content-box .fa.header{
    font-size: 5rem;
    text-align: center;
    width: 100%;
    opacity: 0.75;
    padding-bottom: 0.25rem;
    /*border-bottom: 1px solid rgba(0,0,0,0.5);*/
}
.content-box .header:not(.fa){
	text-align: center;
    color: rgba(0,0,0,0.75);
    font-size: 1.5rem;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
}
.content-box .body{
	margin-top: 0.5rem;
	padding: 0 1rem;
	color: rgba(0,0,0,0.75);

    /*text-align: justify;*/
    /*text-justify: inter-word;*/
}
.content-box .body p{
    -webkit-margin-before: 0.5em;
    -webkit-margin-after: 0.5em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}
.content-box .body div{
    display: inline-block;
}
.content-box .body p:not(.sub-title){
    padding-left: 0.5rem;
    line-height: 1.25;
}
.content-box.double-wide .body p:not(.sub-title){
    padding-left: 2rem;
}
.content-box .body p.sub-title{
	font-weight: 600;
	text-align: center;
	padding-bottom: 0.5em;
}
.content-box .content-title{
    padding-bottom: 0.5rem;
    padding-top: 0rem;
}
.line-break{
	height: 1px;
	width: 100%;
    max-width: 25rem;
    margin: 0 auto;

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.25+10,0.5+50,0.25+90,0+100 */
	background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 10%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.25) 90%, rgba(0,0,0,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(10%,rgba(0,0,0,0.25)), color-stop(50%,rgba(0,0,0,0.5)), color-stop(90%,rgba(0,0,0,0.25)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 10%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.25) 90%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 10%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.25) 90%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 10%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.25) 90%,rgba(0,0,0,0) 100%); /* IE10+ */
	background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 10%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.25) 90%,rgba(0,0,0,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
}
#us-allan, #us-janet, #us-anthony, #us-other, #us-isaac{
	text-align: center;
}

#us-allan img, #us-janet img, #us-anthony img, #us-other img, #us-isaac img{
	background-image: url("isaac_headshot.png");
	background-repeat: no-repeat;
	font-size: 10rem;
	background-size: 1em;
	border-radius: 1em;
	width: 1em;
	height: 1em;
}
#us-allan img{
	background-image: url("allan.jpg");
}
#us-janet img{
	background-image: url("janet.jpeg");
}
#us-anthony img{
	background-image: url("anthony.jpg");
}
#us-other img{
	background-image: url("otherstaff.png");
}
#us-isaac img{
	background-image: url("isaac_headshot.png");
}

.standard-link{
    color: #0645AD;
    font-weight: bold;
}
.standard-link:visited{
    color: #0B0080;
}

.standard-link:hover{
    text-decoration: underline;   
}

.contact-icon{
    font-size: 1.75rem !important;
    color: #333;
}
.contact-item{
    color: #333;
    vertical-align: middle;
    padding-left: 0.75rem;
}

#contact-info{
    margin-left: 3rem;
}
#contact-info td{
    padding-bottom: 1rem;
}

#hafu-anim{    
    background-repeat: no-repeat;
    font-size: 5.25rem;
    background-size: 1em;
    margin: 0 auto;
    width: 1em;
    height: 1em;
    background-image: url("hafuanim.gif");
}