@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700');

/*When you make <span>, create class for the <span>. <span> affects slideshow and modal's x(close).*/
html {height:100%;  background-color:#FFF;}
body {overflow-x:hidden; font-family:'Open Sans'; border-top:9px solid #404f5e;}

* { margin: 0; padding: 0; }

* {
  overflow-wrap: break-word;  word-wrap: break-word;
  -ms-word-break: break-all;  word-break: break-all;  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/******************************************Global Setting**********************************************/
.clear {clear: both;}

label.sr-only {display:none;}
span.sr-only {display:none;}

a#skiptocontent {
    position: absolute;
    left: 0;
    top: -95px;
    transition: all .2s;
    background-color: #0c63ae;
    color: #fff;
    padding: 10px 15px 14px 15px;
    font-size: 16px;
}
a#skiptocontent:focus {
    top: 0;
    z-index: 2000;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.display-flex { /*vertically centered*/
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
/*vertically centered*/
.centerV {display:flex; align-items:center;}
/*http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/*/
.centerV2 {position:relative; top:50%; transform:translateY(-50%);}
/*horizontally centered*/
.centerH {display:flex; justify-content:center;}

a:link, a:visited {color:#2196f3; transition:0.4s all; text-decoration:none; transition:all 0.4s;}
a:hover, a:active, a:focus {color:#0059c5;}

img {display:block; margin:0px; max-width:100%; height:auto;}
	a img {border:none;}

footer a:link, footer a:visited {color:#FFF; transition:all 0.4s;}

iframe {max-width:100%;}
/*iframe responsive*/
.video-container {position:relative; height:0; overflow:hidden;}
.video-container-16x9 {padding-bottom: 56.25%;}
.video-container-15x9 {padding-bottom: 54%;}
.video-container-7x3 {padding-bottom: 62%;}
.video-container-4x3 {padding-bottom:95%;}
/*.video-container iframe {position: absolute; top:0; left:0; width:100%; height:100%;}*/

.centeriframe {width:50%; 
    display:table-cell;
    height:100%;
    vertical-align:middle;
    text-align:center;}

/*Back to top*/
#scroll {
    position:fixed; cursor:pointer;
    right:10px; bottom:10px;
    width:50px; height:50px;
    background-color:#BABABA; opacity:0.5;
    text-indent:-9999px; display:none;
    -webkit-border-radius:12px; -moz-border-radius:12px; border-radius:12px
}
#scroll span {
    position:absolute;
    top:50%; left:50%; height:0; width:0;
    margin-left:-8px; margin-top:-12px;
    border:8px solid transparent;
    border-bottom-color:#FFF; transition:all 0.5s;
}
#scroll:hover {
    background-color:#933024;
    opacity:1;filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)";
}

/*********************************Button & Field***************************************/
.buttonwrap {
  display: inline-grid;
  grid-template-rows: 30px;
  grid-template-columns: 450px;
  grid-gap:3px;
  margin-bottom:1rem; margin-left:1.3rem;
}
.buttonwrap > div {display:flex; justify-content:center; align-items:center;}
.buttonwrap > div.deadline {margin:0 auto; font-weight:400; font-size:1.15rem; text-align:center; color:#CB0003;}

/*programs/read*/
.buttonwrap_center {
  display: inline-grid;
  grid-template-rows: 30px;
  grid-template-columns: 450px;
  grid-gap:3px;
  margin:1.3rem auto; display:flex; justify-content:center;
}

.button {
  font-family:'Raleway'; font-size:1.15rem; line-height:1.2rem; text-align:center; color:#FFF;
  border-radius:5px; display:block;
  border:none; background-color:#93bd3e;
  padding:6px 20px; text-transform:uppercase;
  transition: all 0.5s;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); cubic-bezier(.25,.8,.25,1);
}
.button:hover {background-color:#419aff;}
.button a {color:#FFF !important; }
.button span {cursor: pointer;
  display:block;
  position: relative;
  transition: 0.5s;}
.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.button:hover span {padding-right:15px;}
.button:hover span:after {opacity: 1; right:-10px;}

.field {border-radius:3px; border:solid 1px #c8c8c8; height:27px; transition:0.3s all; font-size:1.0rem;}
.field:hover {background-color:aliceblue;}
/*
.button_width350 {width:350px;}
.button_width550 {width:550px; padding:8px 20px;}
*/
/***********************************Anchor Links**************************************/
/*
.anchorlinks {margin:1rem;}
.anchorlinks.top {margin:-1rem 1rem 3rem 1rem !important;}
.anchorlinks ul {list-style:none; text-align:center;}
.anchorlinks ul li {display:inline-block;}
.anchorlinks ul li a {padding:0 20px; display:block; position:relative; text-decoration:none;}
.anchorlinks ul li a::before {
  content:"\f13a";
  font-family:FontAwesome;
  position:absolute;
  left:0; top:0;
  transition:all .2s;
}
.anchorlinks ul li a:hover::before {top:2px; color:#00aff0;}*/

.anchorlinks {max-width:1000px; margin:0 auto 3rem auto; text-align:center; font-size:1.0rem;}
/*.anchorlinks ul {list-style:none; margin:0;}
.anchorlinks ul li {display:inline-block;}
.anchorlinks li a {padding:5px;}
.anchorlinks li::after {content: " |";}
.anchorlinks li:last-child::after {display:none;}*/

/************************************List Links***************************************/
.subpage ul.listlink {margin:0 0.5rem 1.5rem 2rem;}
.subpage ul.listlink li {list-style-type:none; margin:0; line-height:1.48rem; padding:2px 0;}
.subpage ul.listlink li a {padding:10px 0; position:relative;}
.subpage ul.listlink li a::before {
  content:"\f0da"; font-size:1.2rem;
  font-family:FontAwesome;
  position:absolute;
  left:-14px; top:11px;
  transition:all .2s;
}
.subpage ul.listlink li a:hover::before {left:-10px; color:#419aff;}

/*sublevel*/
.subpage ul.listlink li ul {margin:0.1rem 0 0 1rem;}
.subpage ul.listlink li ul li {padding:0.1rem 0;}
.subpage ul.listlink li ul li a::before {content:"\f105"; font-size:1.0rem;}

/*no bullet on links*/
.subpage ul.listlink li a.nobullet {padding:0; position:static;}
.subpage ul.listlink li a.nobullet::before {content:none;}

/*no link in the list*/
.subpage ul.listlink li.nolink {list-style-type:none !important; margin-left:0; line-height:1.48rem; padding:4px 0; position:relative;}
.subpage ul.listlink li.nolink::before {
  content:"\f0da"; font-size:1.2rem;
  font-family:FontAwesome;
  position:absolute;
  left:-14px; top:4px;
}
.subpage ul.listlink li.nolink a::before {content:none;}

/*largefont*/
ul.listlink li a.largefont {font-size:1.38rem; padding:2px 0;}
ul.listlink li a.largefont::before {font-size:1.5rem; top:6px;}


.subpage ul.blacklink a {color:#000;}
.subpage ul.blacklink a:hover {color:#2196f3;}


/*
ul.listlink span {margin:5px 20px 2px 23px; display:block;}
ul.listlink span a {display:inline; padding:0;}
ul.listlink span a::before {content:none;}
*/


/*Go back link*
.goback {float:right; margin:-2rem 0.5rem 1rem 0.2rem;}
.goback a {padding:0 2.0rem; font-size:1.4rem; position:relative; display:block;}
.goback a::before {
  content:"\f04a"; font-size:1.4rem;
  font-family:FontAwesome;
  position:absolute;
  left:4px; top:0;
  transition:all .3s;
}
.goback a:hover::before {left:0; color:#00aff0;}

/********************************************Header********************************************/
.topwrapper {max-width:1100px; margin:0 auto; position:relative;}
header {display:block; height:121px;}
h1.logo {margin-top:0.3rem; margin-left:1rem; width:235px;}

/*Main Nav*/
.mobilemenu {display:none;}
nav.mainnav a.navhighlight  {color:#ab2128 !important;}
#mainnav {float:right; position:absolute; right:20px; top:35px; z-index:100;}
#mainnav ul, #mainnav li, div.menu ul, div.menu ul li, ul.menu, ul.menu li {list-style:none; padding:0; margin:0; display:inline;}
#mainnav ul li {float:left; position:relative;}
#mainnav ul li.dotline {border-right:1px dotted #999;}
#mainnav ul li a {
	text-decoration:none; color:#041a3a; font-size:1.4rem; font-weight:500;
	display:block; padding:13px 30px; margin:0;
	white-space:nowrap;
	-webkit-transition: background .3s ease-in-out;
	-moz-transition: background .3s ease-in-out;
	-o-transition: background .3s ease-in-out;
}

#mainnav ul li a:hover {background:#FFF; color:#ab2128;}
#mainnav ul ul {
	position:absolute; 
	top:-99999px; 
	left:0;
	opacity:0;
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	z-index:497;
	background:#FFF;
	 border:1px solid rgba(0,0,0,.2);
}
#mainnav ul ul li.first {padding-top:7px;}
#mainnav ul ul li.last {padding-bottom:11px;}
#mainnav ul ul li {height:26px; margin:0; width:100%;}
#mainnav ul ul li a {color:#041a3a; font-size:0.9rem; line-height:1.2rem; margin:0; padding:8px 12px; text-transform:none; font-weight:400;}
#mainnav ul ul li a:hover {background:#FFF; color:#ab2128;}
#mainnav ul ul ul { 
	position:absolute; 
	top:-99999px; 
	left:100%; 
	opacity: 0; 
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;

}
#mainnav ul li:hover>ul {opacity: 1; position:absolute; top:99%; left:0;}
#mainnav ul ul li:hover>ul {position:absolute; top:0; left:100%; opacity:1; z-index:497;}

.topborder {border-top:solid 1px #c7c7c7; background-color:#e5e5e5; height:3px;}

/*****************************************************Footer******************************************************/
footer {background-color:#404f5f; padding:40px 0; width:100%; color:#FFF; vertical-align:top; -webkit-flex:1; -ms-flex:1; flex:1;}
.footwrapper {text-align:center;}
.footrow {max-width:850px; margin:0.2rem auto; line-height:1.5;}
.footrow ul {list-style:none; margin:0;}
.footrow ul li {display:inline-block; padding:0.5rem;}
.footrow li a {padding:5px; display:inline-block; transition:all 0.3s;}
.footrow li a:hover {color:aquamarine;}
#footer-rows .footrow:nth-child(1) {font-size:1.2rem; border-bottom:solid 1px #FFF; max-width:600px;}
#footer-rows .footrow:nth-child(2) {font-size:0.8rem; margin:0.2rem auto;}
#footer-rows .footrow:nth-child(3) {font-size:1.0rem;}


/**************************************************HOMEPAGE******************************************************/
#slide {margin-top:-5px;}
.homewrapper {max-width:1100px; margin:calc(16vh + 30px) auto calc(5vh + 30px) auto;}

.homecol {-webkit-flex:1; -ms-flex:1; flex:1; position:relative;}
#home-columns .homecol:nth-child(1),
#home-columns .homecol:nth-child(2) {margin-right:25px;}

#home-columns .homecol:nth-child(1) .homeicon {background-image: url(../images/home/resources1.svg); background-repeat: no-repeat; background-size:160px; height:275px; transition:all 0.4s;}
#home-columns .homecol:nth-child(1) .homeicon:hover {background-image: url(../images/home/resources2.svg); background-repeat: no-repeat;}
#home-columns .homecol:nth-child(2) .homeicon {background-image: url(../images/home/research1.svg); background-repeat: no-repeat; background-size:160px; height:275px; transition:all 0.4s;}
#home-columns .homecol:nth-child(2) .homeicon:hover {background-image: url(../images/home/research2.svg); background-repeat: no-repeat;}
#home-columns .homecol:nth-child(3) .homeicon {background-image: url(../images/home/learning1.svg); background-repeat: no-repeat; background-size:160px; height:275px; transition:all 0.4s;}
#home-columns .homecol:nth-child(3) .homeicon:hover {background-image: url(../images/home/learning2.svg); background-repeat: no-repeat;}
.homeicon {
left:50%;
top:0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position:absolute;
text-align:center;
width:170px; height:285px; 
}
.homebox {margin:1rem; text-align:center;}
.homebox h2 {text-transform:uppercase; font-size:2.2rem; font-weight:500; margin:3.3rem 1rem 3rem 1rem; color:#041a3a;}
.homebox p {font-size:1.2rem; line-height:1.8rem; color:#404f5f; margin:0 1rem 0.5rem 1rem;}
.homebox a {display:block;}

section#home-columns {margin-top: calc(5vh + 70px);}
section.section {margin: 10vh 0 5vh 0;}

/*resources/inst*/
.inst {min-height:600px; max-width:1100px; margin:calc(6vh + 30px) auto;}
.instcol {-webkit-flex:1; -ms-flex:1; flex:1; position:relative; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);}
#inst-columns1 .instcol:nth-child(1),
#inst-columns1 .instcol:nth-child(2){margin-right:30px;}
#inst-columns2 .instcol:nth-child(1),
#inst-columns2 .instcol:nth-child(2){margin-right:30px;}

#inst-twocolumns .instcol:nth-child(1){margin-right:30px;}

#inst-columns1 .instcol:nth-child(1) .instbox {background-color:#60c3ae;}
#inst-columns1 .instcol:nth-child(2) .instbox {background-color:#e66c61;}
#inst-columns1 .instcol:nth-child(3) .instbox {background-color:#969fc8;}
.instbox {transition:all 0.4s;}
.instbox:hover {opacity:0.8;}
#inst-columns2 .instcol:nth-child(1) {background-color:#fcd965;}
#inst-columns2 .instcol:nth-child(2) {background-color:#74bbf3;}
#inst-columns2 .instcol:nth-child(3) {background-color:#bad3b6;}

.instbox {height:auto; align-items:center; justify-content:center; align-content:right; display:flex; flex-direction:row; flex-wrap:wrap; padding:2.43rem 0.5rem;}

.instbox i {font-size:6.5rem; text-align:center; color:#FFF; margin:1rem auto;}
.instbox h4 {height:90px;  width:99%; margin:1rem auto; text-align:center; color:#FFF; font-size:1.7rem !important; line-height:2.1rem !important; font-weight:400;
		     align-items: center; justify-content:center; align-content:right; display:flex; flex-direction:row; flex-wrap:wrap; transition:0.2s all;}
.instcol p {color:#333; text-align:center; margin:2rem 1rem !important; transition:all 0.4s;}
.instcol p:hover {color:#2196f3;}

section#inst-columns1,
section#inst-columns2,
section#inst-twocolumns {margin:calc(1.0vh + 15px);}

/**************************************************Landing Pages**************************************************/
.landing {min-height:600px; max-width:1100px;}
.landingcol {-webkit-flex:1; -ms-flex:1; flex:1; position: relative; border:1px solid rgba(0,0,0,.2);}

#landing-columns1 .landingcol:nth-child(1),
#landing-columns1 .landingcol:nth-child(2){margin-right:20px;}
#landing-columns2 .landingcol:nth-child(1),
#landing-columns2 .landingcol:nth-child(2){margin-right:20px;}

#landing-twocolumns1 .landingcol:nth-child(1){margin-right:20px;}
#landing-twocolumns2 .landingcol:nth-child(1){margin-right:20px;}

section#landing-columns1 {margin:calc(5vh + 10px) calc(1vh + 10px) calc(1vh + 10px) calc(1vh + 10px);}
section#landing-columns2 {margin:calc(1.0vh + 10px);}
section#landing-twocolumns1 {margin:calc(5vh + 10px) calc(1vh + 10px) calc(1vh + 10px) calc(1vh + 10px);}
section#landing-twocolumns2 {margin:calc(1.0vh + 10px);}

.landingcol h3 {
  font-size:1.6rem !important; line-height:1.9rem !important; text-align:center; font-weight:500 !important;
  height:65px; margin:1rem 0.5rem !important; color:#041a3a;
  align-items: center; justify-content:center; align-content:right; display: flex;
  flex-direction: row; flex-wrap: wrap; transition:0.2s all;
}
.landingcol h3:hover {color:#ab2128;}

.landingcol .learning-pic {height:210px; background-position:center; background-size:cover; background-repeat:no-repeat; transition: all 0.4s;}
.learning-pic:hover {opacity:0.8;}
#landing-columns1 .landingcol:nth-child(1) .learning-pic {background-image: url(../images/learning/index/workshops.jpg);}
#landing-columns1 .landingcol:nth-child(2) .learning-pic {background-image: url(../images/learning/index/tutorials.jpg);}
#landing-columns1 .landingcol:nth-child(3) .learning-pic {background-image: url(../images/learning/index/stem.jpg);}

.landingcol .research-pic {height:210px; background-position:center; background-size:cover; background-repeat:no-repeat; transition: all 0.4s;}
.research-pic:hover {opacity:0.8;}
#landing-columns1 .landingcol:nth-child(1) .research-pic {background-image: url(../images/research/index/defining.jpg);}
#landing-columns1 .landingcol:nth-child(2) .research-pic {background-image: url(../images/research/index/influential.jpg);}
#landing-columns1 .landingcol:nth-child(3) .research-pic {background-image: url(../images/research/index/logic.jpg);}
#landing-columns2 .landingcol:nth-child(1) .research-pic {background-image: url(../images/research/index/student.jpg);}
#landing-columns2 .landingcol:nth-child(2) .research-pic {background-image: url(../images/research/index/program.jpg);}
#landing-columns2 .landingcol:nth-child(3) .research-pic {background-image: url(../images/research/index/multistate.jpg);}

.landingcol .resources-pic {height:330px; background-position:center; background-size:cover; background-repeat:no-repeat; transition: all 0.4s;}
.resources-pic:hover {opacity:0.8;}
#landing-twocolumns1 .landingcol:nth-child(1) .resources-pic {background-image: url(../images/resources/index/outcomes.jpg);}
#landing-twocolumns1 .landingcol:nth-child(2) .resources-pic {background-image: url(../images/resources/index/matrix.jpg);}
#landing-twocolumns2 .landingcol:nth-child(1) .resources-pic {background-image: url(../images/resources/index/inst.jpg);}
#landing-twocolumns2 .landingcol:nth-child(2) .resources-pic {background-image: url(../images/resources/index/thinking.jpg);}

.landingcol .think-pic {height:210px; background-position:center; background-size:cover; background-repeat:no-repeat; transition: all 0.4s;}
.think-pic:hover {opacity:0.8;}
#landing-columns1 .landingcol:nth-child(1) .think-pic {background-image: url(../images/resources/think/critical.jpg);}
#landing-columns1 .landingcol:nth-child(2) .think-pic {background-image: url(../images/resources/think/problem.jpg);}
#landing-columns1 .landingcol:nth-child(3) .think-pic {background-image: url(../images/resources/think/mindful.jpg);}

/**************************************************SUBPAGE******************************************************/
.subpage {max-width:1100px; min-height:600px; font-size:1.1rem; line-height:1.55rem; font-weight:400; margin:calc(3vh + 10px) auto calc(6vh + 30px) auto;}

.subpage h2 {color:#404f5f; font-weight:500; font-size:2.8rem; line-height:3.0rem; margin:1.5rem 0.5rem 1.8rem 0.5rem; text-align:center; text-transform:uppercase;}
.subpage h3 {font-weight:400; font-size:2.3rem; line-height:2.5rem; margin:1rem 1rem 2rem 1rem; text-align:center;}
.subpage h4, .subpage h5 {font-weight:500;}
.subpage h4 {font-size:1.7rem; line-height:1.9rem; margin:1rem 0.5rem 0.5rem 0;}
.subpage h5 {font-size:1.3rem; line-height:1.5rem; margin:1rem 0.5rem 0.3rem 0.3rem;}

.subpage p {margin:0 0.2rem 1rem 0.5rem;}
.subpage p.br {margin:0 0.2rem 0.2rem 0.5rem;}
.center {text-align: center; margin:2rem 0.2rem;}

.subpage ul, .subpage ol {margin:0 0.2rem 1rem 2.2rem;}
.subpage ul ul {margin:0 0.2rem 0.1rem 1.2rem;}

strong {font-weight:600;}

.h2line {width:260px; margin:0 auto; text-align:center;}
.h2line hr {height:2px; border:none; color:#2196f3; background-color:#2196f3;}
 hr {height:1px; border:none; color:#666; background-color:#666; margin:2rem auto;}
 p.quote {color:#034cb0; font-style:italic;}

a.black {color:#000;}
a.black:hover {color:#2196f3;}

/*resources/matrix*/
.map {
	width:100%; height:300px; margin:0 auto; margin-bottom:5vh;
	background:url("../images/resources/matrix.jpg");
	background-size:100%; background-size:cover; background-position:center; background-repeat:no-repeat;	
    align-items:center; justify-content:flex-end; align-content:right; display:flex;
    flex-direction:row; flex-wrap:wrap;	
 }
.maptxt {max-width:62%;}
.maptxt h3 {font-size:5.3rem; line-height:5.3rem; font-weight:300;  margin-right:15px;}
.maptxt p {font-size:2.3rem; line-height:2.5rem; font-weight:200; margin-right:15px;}
.map {transition: 0.4s all;}
/*.map:hover {opacity:0.6; transform: scale(1.02);}*/
.map-link {display:block;}
.map-link .map {position:relative;}
.map-link .map::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: #ffffff;
	opacity: 0;
	transition: .4s all;
}
.map-link:hover .map::before {opacity:0.6;}
.map-link:hover .map {transform: scale(1.02);}
.maptxt {position:relative; padding-right:calc(50% - 540px);}

/*****resources/inst_strategies Grid*****/
.instgrid {display:grid; grid-template-columns:120px auto auto; margin-bottom:2rem;}
.instgrid > div {font-size:0.95rem; line-height:1.2rem; padding:0.5rem 0.2rem; border-left:1px #777 solid; border-bottom:1px #777 solid;}
.instgrid > div.head {font-size:1.1rem; line-height:1.45rem; font-weight:600; text-align:center; background-color:#404f5f; color:#FFF;}
.instgrid > div.last {border-right:1px #777 solid;}
.instgrid > div:nth-child(3) {border-right:1px #777 solid;}

/*resources_think_critical*/
.sphere {background:url("../images/resources/ball.png") no-repeat left top; background-size:70px; height:80px; margin-left:1rem; margin-top:1rem;}
.sphere > div {margin-left:5.5rem; font-size:1.2rem; line-height:1.4rem; position:relative; top:40%; transform:translateY(-40%);}


/********************************************Subpages Columns******************************************************
.subcol {-webkit-flex: 1; -ms-flex: 1; flex: 1;
  position: relative;
  border-bottom-right-radius:3px; border-bottom-left-radius:3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
#sub-columns1 .subcol:nth-child(1),
#sub-columns1 .subcol:nth-child(2){margin-right:20px;}
#sub-columns2 .subcol:nth-child(1),
#sub-columns2 .subcol:nth-child(2){margin-right:20px;}
#sub-columns3 .subcol:nth-child(1),
#sub-columns3 .subcol:nth-child(2){margin-right:20px;}
#sub-columns4 .subcol:nth-child(1),
#sub-columns4 .subcol:nth-child(2){margin-right:20px;}

#sub-twocolumns1 .subcol:nth-child(1){margin-right:20px;}
#sub-twocolumns2 .subcol:nth-child(1){margin-right:20px;}
#sub-twocolumns3 .subcol:nth-child(1){margin-right:20px;}

#sub-onecolumn-contest {width:50%; margin:0 auto; text-align:center;}

.topbar {
top:0; left:50%; background-color:#7bb804;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position:absolute;
text-align:center;
width:100.1%; height:10px; 
}

section#sub-columns1,
section#sub-columns2,
section#sub-columns3,
section#sub-columns4,
section#sub-twocolumns1,
section#sub-twocolumns2 {margin: calc(1.0vh + 15px);}

section#sub-onecolumn-contest {margin-top:0;}


.subcol h4, .subcol h5, .subcol h6 {
  font-size:1.7rem !important; line-height:1.9rem !important; text-align:center; font-weight:400 !important;
  height:60px; margin:1rem 0.2rem;
  align-items: center; justify-content:center; align-content:right; display: flex;
  flex-direction: row; flex-wrap: wrap; transition:0.2s all;
}

.subcol p {font-weight:300; text-align:left;}

/*resources/archive_contest*
.subcol .contest-pic {height:200px; background-position:center; background-size:cover; background-repeat:no-repeat; transition: all 0.4s;}
.contest-pic:hover {opacity:0.8;}
#sub-columns1 .subcol:nth-child(1) .contest-pic {background-image: url(../images/resources/archive/contest/win2017.jpg);}
#sub-columns1 .subcol:nth-child(2) .contest-pic {background-image: url(../images/resources/archive/contest/win2016.jpg);}
#sub-columns1 .subcol:nth-child(3) .contest-pic {background-image: url(../images/resources/archive/contest/win2015.jpg);}
#sub-columns2 .subcol:nth-child(1) .contest-pic {background-image: url(../images/resources/archive/contest/win2014.jpg);}
#sub-columns2 .subcol:nth-child(2) .contest-pic {background-image: url(../images/resources/archive/contest/win2013.jpg);}
#sub-columns2 .subcol:nth-child(3) .contest-pic {background-image: url(../images/resources/archive/contest/win2012.jpg);}
#sub-onecolumn-contest .subcol:nth-child(1) .contest-pic {background-image: url(../images/resources/archive/contest/win2011.jpg); height:300px;}


/********************************************Image Styles*************************************************/
.dropshadow {box-shadow: 3px 3px 4px #777;}
.width400 {width:400px;}
.width300 {width:300px;}
.width80p {max-width:80%;}
.marginright {margin:1rem 0.5rem 1.5rem 1.5rem;}
.floatright {float:right;}
.centerimg {margin:25px auto; text-align:center;}


/*
.marginleft {margin:1rem 1.5rem 1.5rem 1rem;}
.floatleft {float:left;}
*/
/******************************************************RESPONSIVE****************************************************/
@media screen and (max-width: 1150px) {
.subpage {max-width:95%;}
	
/**********Landing*************/
.landingcol .learning-pic {height:190px;}
.landingcol .research-pic {height:190px;}
.landingcol .resources-pic {height:290px;}

/************Subpage************/
.maptxt h3 {font-size:4.3rem; line-height:4.6rem;}
.maptxt p {font:1.7rem; line-height:2.3rem;}
}

@media screen and (max-width: 900px) {
header {height:auto;}
#mainnav {display:none;}
.mobilemenu {display:block; margin-top:1rem;}
.topborder {display:none;}
h1.logo {margin-top:0.45rem; margin-bottom:-0.5rem;}

/**********Homepage*************/
#home-columns.display-flex {-webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;}
#home-columns .homecol:nth-child(1),
#home-columns .homecol:nth-child(2) {margin: 0 0 140px 0;}
section#home-columns {margin-bottom:30px;}
.homebox {margin:0 2rem 3rem 2rem ;}


/************Landing************/
#landing-columns1.display-flex {-webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;}
#landing-columns2.display-flex {-webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;}

#landing-twocolumns1.display-flex {-webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;}
#landing-twocolumns2.display-flex {-webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;}

#landing-columns1 .landingcol:nth-child(1),
#landing-columns1 .landingcol:nth-child(2) {margin: 0 0 30px 0;}
#landing-columns2 .landingcol:nth-child(1),
#landing-columns2 .landingcol:nth-child(2) {margin: 0 0 30px 0;}

#landing-twocolumns1 .landingcol:nth-child(1) {margin:0 0 30px 0;}
#landing-twocolumns2 .landingcol:nth-child(1) {margin:0 0 30px 0;}

section#landing-columns1,
section#landing-columns2,
section#landing-twocolumns1,
section#landing-twocolumns2 {margin-bottom:30px;}

.landingcol .learning-pic {height:390px;}
.landingcol .research-pic {height:390px;}
.landingcol .resources-pic {height:390px;}

#inst-columns1.display-flex {-webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;}
#inst-columns1 .instcol:nth-child(1),
#inst-columns1 .instcol:nth-child(2) {margin: 0 0 30px 0;}
section#inst-columns1 {margin-bottom:30px;}

/************Subpage************/
.maptxt h3 {font-size:3.5rem; line-height:3.9rem;}
.maptxt p {font-size:1.5rem; line-height:1.8rem;}

/*Image styles*/
.width400 {width:45%;}
.width300 {width:35%;}

/*3 Columns*
#sub-columns1.display-flex {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
#sub-columns2.display-flex {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
#sub-columns3.display-flex {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
#sub-columns4.display-flex {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
#sub-columns1 .subcol:nth-child(1),
#sub-columns1 .subcol:nth-child(2){margin: 0 0 30px 0;}
#sub-columns2 .subcol:nth-child(1),
#sub-columns2 .subcol:nth-child(2){margin: 0 0 30px 0;}
#sub-columns3 .subcol:nth-child(1),
#sub-columns3 .subcol:nth-child(2){margin: 0 0 30px 0;}
#sub-columns4 .subcol:nth-child(1),
#sub-columns4 .subcol:nth-child(2){margin: 0 0 30px 0;}

#sub-onecolumn-contest {width:auto;}
#sub-onecolumn-contest .subcol:nth-child(1) .contest-pic {height:350px;}

section#sub-columns1,
section#sub-columns2,
section#sub-columns3,
section#sub-columns4 {margin:30px 0;}

section#sub-onecolumn-contest  {margin:30px 0;}

.subcol .grow-pic {height:430px;}

#sub-onecolumn-contest .subcol:nth-child(1) .contest-pic {height:400px;}*/

}


@media screen and (max-width: 768px) { /*iPad*/
#scroll {bottom:0;}

/************Landing************/
.landingcol .learning-pic {height:330px;}
.landingcol .research-pic {height:330px;}
.landingcol .resources-pic {height:330px;}


/************Subpage************/
.maptxt h3 {font-size:3.2rem; line-height:3.5rem; font-weight:300;}

/*
#sub-twocolumns1.display-flex {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
#sub-twocolumns2.display-flex {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
#sub-twocolumns1 .subcol:nth-child(1),
#sub-twocolumns1 .subcol:nth-child(2){margin: 0 0 30px 0;}
#sub-twocolumns2 .subcol:nth-child(1),
#sub-twocolumns2 .subcol:nth-child(2){margin: 0 0 30px 0;}
section#sub-twocolumns1,
section#sub-twocolumns2 {margin:0;}

#sub-onecolumn-contest .subcol:nth-child(1) .contest-pic {height:330px;}
.subcol .contest-pic {height:330px;}*/


/*Image styles*/
.width400 {width:75%;}
.width300 {width:75%;}
.marginright {margin:15px auto; text-align:center;}
.marginleft {margin:15px auto; text-align:center;}
.floatright {float:none;}
.floatleft {float:none;}

}

@media screen and (max-width: 540px) { /*Surface Plus*/
#scroll {display: none !important;}

/************Landing************/
.landingcol .learning-pic {height:250px;}
.landingcol .research-pic {height:250px;}
.landingcol .resources-pic {height:250px;}


/************Subpage************/
.map {height:220px}
.maptxt {max-width:72%;}
.maptxt h3 {font-size:2.45rem; line-height:2.45rem;}
.maptxt p {font-size:1.15rem; line-height:1.25rem;}

.instgrid {grid-template-columns:90px auto auto;}
.instgrid > div {font-size:0.8rem; line-height:1.0rem; padding:0.3rem 0.1rem;}
.instgrid > div.head {font-size:0.9rem; line-height:1.1rem;}

}

@media screen and (max-width: 414px) {


/************Landing************/
.landingcol h3 {font-size:1.4rem !important; line-height:1.6rem !important;}
.landingcol .learning-pic {height:180px;}
.landingcol .research-pic {height:180px;}
.landingcol .resources-pic {height:180px;}

/************Subpage************/
.subpage h2 {font-size:2.5rem; line-height:2.7rem;}
.subpage h3 {font-size:2.0rem; line-height:2.2rem;}
.subpage h4 {font-size:1.5rem; line-height:1.7rem;}

.maptxt {max-width:85%;}
.maptxt h3 {font-size:2.6rem; line-height:2.7rem;}
.maptxt p {font-size:1.1rem; line-height:1.4rem;}

/*
.subcol .grow-pic {height:180px;}
.subcol .elearn-pic {height:180px;}
.subcol .contest-pic {height:180px;}
#sub-onecolumn .subcol:nth-child(1) .contest-pic {height:180px;}*/


}

@media screen and (max-width: 320px) {
h1.logo {margin:1rem auto; text-align:center; max-width:90%;}

/************Landing************/
.landingcol h3 {font-size:1.2rem !important; line-height:1.4rem !important; height:40px;}

/************Subpage************/
.h2line {max-width:95%;}
.maptxt {max-width:88%;}
.maptxt h3 {font-size:2.1rem; line-height:2.2rem;}
.maptxt p {font-size:1.0rem; line-height:1.3rem;}

.instgrid {grid-template-columns:65px auto auto;}
.instgrid > div {font-size:0.7rem; line-height:0.9rem;}
.instgrid > div.head {font-size:0.75rem; line-height:1rem;}

}