/*@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,700,400italic,300italic,300,600,600italic,700italic);*/
@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700);
@import url(https://fonts.googleapis.com/css?family=Roboto:900);
@import url(https://fonts.googleapis.com/css?family=Titillium+Web);

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
    License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}


strong, b { font-weight: bold; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/** End CSS reset **/

/** Responsive stuff*/
.grid-2{width:49%;}
.grid-3{width: 33%;}
.grid-4{width: 24%;}

[class*="grid-"]{
    display: inline-block;
    vertical-align: top;
    padding: 15px;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: left;
    padding: 15px;
}

.row{
    clear: both;   
}
h1,h2,h3,h4,h5,h6{
    font-family: "Roboto", sans-serif;
}

p,td{
	font-family:"Noto Sans", sans-serif;
}

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

body {
	background: #EEE /*url(../images/back2.png)*/;
	font-family: "Noto Sans", sans-serif;
	font-size: 12px;
}

a {
	color: #497097;
	text-decoration: none;
}

a:hover {
	border-bottom: 1px dotted #1A2836;
	color: #1A2836;
}

div.post ul {
	margin-top: 0.5em;
	margin-left: 2em;
}

div.post {
	margin-bottom: 1em;
}

div#container {

}

div#content {
	text-align: center;
	margin: 1em auto;
	/*width: 83.75em;*/
    width: 1000px;
}

div#content.nomargin {
	margin-top: 0;
}
/*HTML 5 Migration */
section{
    text-align: center;
	margin: 1em auto;
    width: 1000px;
}
section.nomargin{
    margin-top: 0;
}

hr {
	background: #000;
	height: 0.083em;
	border: none;
}

p {
	margin: 0.5em 0;
	line-height: 1.5em;
    text-align: justify;
}

p:first-child { 
	margin: 0;
}

.left { float: left; }
.text-left { text-align: left; }

.text-center, .post.text-center { text-align: center; }

.right { float: right; }
.text-right { text-align: right; }

.flash .small {
	float: right;
	font-size: 85%;
}

.flash {
	color: #FFF;
	padding: 0.5em;
	cursor: default;
}

.flash:hover {
	text-decoration: underline;
}

.flash.error {
	background: #711;
}

.flash.notice {
	background: #8b832b;
}

.flash.success { 
	background: #171;
}

.flash p {
	margin: 0;
	line-height: 1em;
	display: inline;
}

footer {
	padding: 1em 0em 2em 1em;
	color: #777;
	clear: both;
	width: 83.333em;
	margin: 0 auto;
}

footer ul#nav {
	list-style-type: none;
	margin: 0;
	float: left;
}

footer ul#nav li {
	display: inline;
	text-transform: lowercase;
}

footer ul#nav li a {
	text-decoration: none;
	color: #777;
	margin-right: 1em;
}

footer ul#nav li a:hover {
	color: #222;
	border-bottom: 0.083em dotted #777;
}

div#slideshow {
	width: 83.333em;
	height: 25em;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

ul#slideshowContent {
    width:83.333em;
    position: absolute;
	top: 0;
	margin: 0;
}

.column {
	display: inline-block;
	vertical-align: top;
}

.three {
	width: 33%;
}

.two {
	width: 41.667em;
}

.one {
	max-width: 83.333em;
}

.quarter {
	width: 20.667em;
}

.three-quarters {
	width: 62.5em;
}

/*ul#slideshowContent li:last-child {
	top: -300px;
}*/

li.slideshowImage {
    float: left;
    position: relative;
	display: none;
}

li.slideshowImage.current {
	display: block !important;
	top: 0px;
}
li.slideshowImage.next {
	display: block !important;
	top: -25em;
	z-index: -1;
}
li.slideshowImage.hidden {
	display: none;
}

li.slideshowImage span {
    position: absolute;
	font: 1.167em Arial, Helvetica, sans-serif;
    padding: 0.833em 1.083em;
    width: 83.333em;
    background-color: #000;
    filter: alpha(opacity=70);
    opacity: 0.7;
    color: #fff;
    display: none;
}

li.slideshowImage span h3 {
	font-weight: bold;
	font-size: 1.333em;
}

li.slideshowImage span p {
	margin-top: 0.5em;
}

li.slideshowImage span.left {
	top: 0;
    left: 0;
	width: 9.167em !important;
	height: 23.333em;
}

li.slideshowImage span.right {
	right: 0;
	bottom: 0;
	width: 9.167em !important;
	height: 23.333em;
}

.top {
	top: 0;
	left: 0;
}
.bottom {
	bottom: 0;
    left: 0;
}

.science {
	background-color: #3ab14a;
}

.technology {
	background-color: #7398cf;
}

.engineering {
	background-color: #ed5025;
}

.mathematics {
	background-color: #ebaf20;
}

table {
	width: 100%;
}

table th, table td {
	text-align: center;
	padding: 0.25em 0em;
    border: none;
	/*border: 0.083em solid #ccc;*/
}

table th {
	font-family: "Noto Sans", sans-serif;
	font-size: 120%;
	font-weight: bold;
}

table td {
	
}

table.plain {
	width: auto;
}

table.plain th, table.plain td {
	padding: 5px 0px;
	border: none;
}

/* content */
div#nav-posts {
	background: rgba(60, 60, 60, 0.3);
	width: 1000px;
	padding: 1em;
	-moz-border-radius: 0 0 1em 1em;
	border-radius: 0 0 1em 1em;
}

div#nav-posts a {
	color: #273B4F;
}

div#nav-posts a:hover {
	color: #0D1319;
	border: none;
}

div.post {
	margin-top: 1em;
	font-size: 1.167em;
	text-align: left;
}

div.post.singular {
	background: #FFF;
	padding: 1em;
	box-shadow: 0 0 0.5em #777;
}

div.post h1 {
	width: 100%;
	font-family: "Noto Sans", sans-serif;
	font-weight: bold;
	font-size: 2.5em;
	margin: 0.25em 0 0.5em 0;
}

div.post h1 a:hover {
	border: none;
}

div.post h2 {
	font-family: "Noto Sans", sans-serif;
	font-weight: bold;
	font-size: 1.667em;
	margin: 0.25em 0 0.5em 0;
}

div.post p {
	text-indent: 2em;
	margin-bottom: 0.5em;
}

div.post h3 {
	font-weight: normal;
	font-size: 1em;
	color: #777;
}

div#comments {
	background: rgba(80, 80, 80, 0.2);
	padding: 0.5em 1em 1em 1em;
	border-radius: 0 0 1em 1em;
	width: 53.167em;
	margin: 0 auto;
}

div#comments h3 {
	font-size: 2.333em;
	float: left;
	text-shadow: 0 0.083em rgba(255, 255, 255, 0.5);
}

div#comments-meta {
	display: inline;
	float: right;
}

div#comments input, div#comments textarea {
	border-radius: 0.417em;
	background: #E8E8E8;
	font-family: "Noto Sans", sans-serif;
	border: 0.083em solid #777;
	padding: 0.25em;
}

div#comments input:hover, div#comments textarea:hover {
	background: #EEE;
	box-shadow: 0 0 0.3em #2593d5;
}

div#comments input:focus, div#comments textarea:focus {
	background: #EEE;
}

div#comments-meta label {
	margin-left: 1em;
}

div#comments-meta input {
	width: 12.5em;
}

div#comments-box {
	padding-top: 1em;
	clear: both;
}

div#comments-box textarea {
	width: 52.5em;
}

div#maincol {
	padding: 0.5em;
	float: left;
	width: 1000px;
}

div#sidebar {
	float: right;
	width: 18.75em;
	padding: 1em;
}

div#sidebar h3 {
	font-weight: bold;
	font-size: 1.167em;
	margin-bottom: 0.25;
}

div#sidebar ul.widgets {
	margin: 0;
}

div#sidebar ul.widgets li.widget-container {
	list-style-type: none;
	margin-bottom: 1em;
}

div#sidebar li {
	margin-bottom: 0.167em;
}

div.clear {
	clear: both;
}

div#faqQuestions {
	margin-top: 2em;
}

div#faqQuestions a {
	color: #497097;
}

ul {
	list-style-type: disc;
	margin: 1em 0 1em 4em;
}

ol {
	list-style-type: decimal;
	margin-left: 4em;
}

li {
	margin-bottom: 0.5em;
	line-height: 1.3em;
}

ul ul {
	margin: 0 0 0 2em;
	list-style-type: circle;
}

em {
	font-style: italic;
}


body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
}
/*end*/

nav ul ul {
	top:-999px;
	position:absolute;
	transition: top 0.25s ease;
}

nav ul li:hover > ul {
	top:2.625em;
}

nav ul{
	background-color:transparent;
	list-style:none;
	font-family:"Noto Sans", sans-serif;
	margin-top:0.167em	;
	/* margin-left:37%; */
	
	position:relative;
	/* display: inline-table; */
}

nav ul:after {
	content: "";
	clear: both;
	display: block;
}

nav ul li {
	/* float:left; */
}

nav ul li:hover{
	/* background-color:#333333; */
}

nav ul li a {
	/* display: block; */
	padding: 0.417em;
	color:#fff;
	
}

nav ul ul {
	background-color:#222;
	border-radius: 0px;
	padding: 0;
}

nav ul ul li{
	float: none;
	position:relative;
}

nav ul ul li a{
	padding: 0.417em 0.667em;
	color: #fff;
	line-height:1.667em;
	font-size:1.333em;
}

nav ul ul ul{
	position:absolute;
	left:100%;
	top:0;
}
input[type='text'],input[type='email']{
    width: 100%;
}
textarea{
   width: 100%;
    resize: none;
}

input[type='text'], input[type='password'], input[type='submit'], select, button, textarea, input[type='email'] {
	background: #E2E2E2;
	border: 0.083em solid #CCC;
	padding: 0.25em;
	font-size: 1em;
	margin: 0 1em;
}

.g-recaptcha{
    padding: 0.25em;
    margin: 0 1em;
}

input[type='text']:hover, input[type='password']:hover, input[type='submit']:hover, select:hover, button:hover, textarea:hover, input[type='text']:hover {
	background: #DDD;
	border: 1px solid #BBB;
}

input[type='text']:focus, input[type='password']:focus, input[type='submit']:active, select:focus, button:active, textarea:focus, input[type='text']:focus{
	background: #EEE;
	border: 0.083em solid #AAA;
}

/**input[type='text'], input[type='password'] {
	width: 14.583em;
}*/

input[type='text'].num {
	width: 2.083em;
}

input[type='submit'] {
	padding-left: 0.417em;
	text-transform: uppercase;
	letter-spacing: 0.167em;
}

.sub_input{
	width: 34.2em !important;
}

table#contact textarea {
	margin: 1em;
	width: 37.5em;
}

#board-wrap{
	background-color:#dddddd;
}

#board{
	width:71.786em;
	margin:0 auto;
}

#mentors-wrap{
	background-color:#4a3e3d;
}

#mentors{
	width:71.786em;
	margin:0 auto;
}

#mentors-wrap,#board-wrap{
	padding:0.714em;
}

#board-head{
	background-image:url(../images/MeetTheBoard.svg);
	background-position:center center;
	background-size:contain;
	background-repeat:no-repeat;
	height:17.857em;
}

#mentor-head{
	background-image:url(../images/MeetTheMentors.svg);
	background-position:center center;
	background-size:contain;
	background-repeat:no-repeat;
	height:17.857em;
}

.team-member p{
	font-size:0.95em;
	text-align:justify;
	width:17.857em;
	margin:0 auto;
	line-height:1.4em;
}

#mentors p, #mentors h2, #mentors h3{
	color:#DDD;
}

#board p, #board h2, #board h3{
	color:#222;
}

.team-member h2, .team-member h3{
	font-size:1.143em !important;
	margin:5px 0;
}

#load-wrap{
	margin:5px auto;
	text-align:center;
	width:83.333em;
}

#sm-wrap{
	position:fixed;
	top:300px;
	border-radius:0px 8px 8px 0px;
	background-color:#222;
	border-color:#333;
	box-shadow:0px 0px 10px #000;
	padding:2px 5px 8px;
	z-index:999;
}

#primary-content{
	margin-top:6.25em;
}

#loading2{
	margin:auto;
	padding:5px;
}

/*
    STEM Summer Page CSS
**/

#jumbotron{
    width: 100%;
    overflow: hidden;
}

#jumbotron img{
    left: 50%;
    margin-left: -960px;
    margin-top: -2px;
    position: relative;
}
#left{
    width: 50%;
    padding-right: 20px;
    clear: left;
    float: left;
    overflow: hidden;
}
#left img{
    max-width: 480px;
}
.department #left img{
    margin-top: 1em;   
}
#right{
    width: 50%;
    padding-left: 20px;
    clear: right;
    float: right;
    overflow: hidden;
}
#right img{
    max-width: 480px;
}
.department #right img{
    position: relative;
    left: -20px;
}
#jumpTo{
    clear: both;   
}
#jumpTo img{
    max-width: 200px;
    -webkit-transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -o-transition: opacity .25s ease-in-out;
    transition: opacity .25s ease-in-out;
}
#jumpTo img.top:hover{
    opacity: .8;
    text-decoration: none;
}
div.department h1{
    font-family: 'Roboto', 'sans-serif';
    font-size: 4.5em;
}
div.department h1 img{
    height: .75em;
    padding-right: .2em;
}
div.department{
    text-indent: 2em;
    font-family: 'Noto-sans', 'sans-serif';
    font-size: 14px;
}
#largerText{
    font-size: 1.5em;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    text-indent: 0px;
}
#noIndent{
    text-indent: 0px;
    font-size: 100%;
}
table#when, table#when td{
    border: 0.083em solid #222;
}
table#when td span{
    font-family: 'Titillium Web', sans-serif;
    font-size: 1.5em;
}
/* Fixes anchor links being blocked by the fixed header */
.offset:before {
	display: block; 
 	content: " "; 
  	height: 76px;      /* Give height of your fixed element */
        margin-top: -76px; /* Give negative margin of your fixed element */  	
        visibility: hidden; 
}
#time{
    text-align: center;
    font-size: 2em;
}

@media only screen and (max-width: 768px) {
    [class*="col-"]{
        width: 100%;
    }
    [class*="grid-"]{
        width: 100%;   
    }
    .hide-on-mobile{
        display: none;
    }
    .hide-on-desktop{
        display: block;   
    }
}