img {
    display: block;
}

.radio {
    float: left;
    margin-top: 3px;
    box-sizing: border-box;
}

/*-----------Header----------------*/

.header {
    background-color: var(--white);
    width: 100%;
    margin: 0;
    padding: 0 50px 15px 30px;
    position: sticky;
    top: 0;
    z-index: 15;
}

.header .grid-3-1 {
    grid-template-columns: 71% 29%;
}

.grid-2-2-3 {
    display: grid;
    grid-template-columns: .95fr .95fr .95fr .95fr 2.10fr;
    grid-gap: 5px;
    justify-items:center;
}

.logo-main {
    padding: 5px 0 0 30px;
}

.student {
    font-size: 32px;
    color: #fff;
    margin: 7px 0 10px 0;
    padding-bottom: 5px;
    line-height: 32px;
    font-family: 'reykjavikoned';
}

.student-tag {
    width: 75%;
}

.student-tag .randomizer {
    width: 152px;
    line-height: 40px;
}

.student-tag select {
    min-width: 140px;
}


.login {
    align-self: center;
    line-height: 12px;
}

.login a {
    font-size: 12px;
    text-decoration: none;
}
.login .grid-2 {
    grip-gap: 0!important;
}

.lower-text {
    transform: skewX(20deg);
}

.lower{
    align-items: center;
    background-color: var(--turquoise);
    color: #fff;
    display: inline-block;
    height: auto;
    position: relative;
    text-decoration: none;
    width: auto;
    transform: skewX(-20deg);
}

.lower:hover{
  background-color: var(--turquoisedk);
}

.lower .fa-thin {
    font-size: 1.25rem;
    font-weight: 300;
}

input[type="checkbox"].lower {
  display:none;
}

.lower label{
  font-family: skolar-sans-latin,sans-serif;
  text-align:center;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
     padding: 10px 15px;
}

.lower label:hover{
  cursor:pointer;
}

.menu-overlay{
	position: fixed;
    text-align: left;
	width: 100%;
	height: 100%;
	top: 120px;
	left: 0;
	background-color: var(--white);
    padding: 50px 100px;
    z-index: 10;
}

.menu-overlay p, .menu-overlay a {
    font-size: 16px;
    color: var(--black);
}

.menu-overlay a:hover {
    text-decoration: underline;
}

.menu-overlay label{
    position: absolute;
	right: 20px;
	top: 20px;
	z-index: 100;
    cursor:pointer;
    color: var(--black);
}

.lower~.overlay-hugeinc{
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s, visibility 0s 0.5s;
}

#op:checked~.overlay-hugeinc{
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s;
}

.lower~.overlay-hugeinc{
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s, visibility 0s 0.5s;
}

#op:checked~.overlay-hugeinc{
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s;
}

.contact a {
    color: var(--orange);
}

.select {
    border: 2px solid var(--orange);
    border-radius: 0;
}

/*------------Main Layout--------------*/

.banner {
    position: relative;
    background: url("/images/top.jpg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    padding-top: 455px;
    height: 823px;
    z-index: 5;
    overflow: hidden;
}

.banner h1 {
    text-shadow: 5px 5px 5px rgba(26,18,15,.4);
    font-size: 110px;
    margin-bottom: 16px;
}

.hero_background:after {
border-color: transparent #ffffff transparent transparent;
}

.hero:after {
border-style: solid;
border-width: 149px 100vw 0 0;
bottom: 0;
content: "";
display: block;
height: 0;
left: 0;
position: absolute;
width: 0;
z-index: 10;
}
.banner-text {
    margin: 60px 0 0 10px;
    padding: 5px 25px;
    color: var(--white);
}

.banner-grid {
    display: grid;
    grid-template-columns: 125px 550px;
    grid-gap: 0;
}

button, .button, .button-or, .button-tq, .button-pl {
 align-items: center;
display: inline-block;
height: auto;
text-decoration: none;
width: auto;
    transform: skewX(-20deg);
    z-index: 0;
}

.button {
    background-color: var(--white);
}

.button-or {
    background-color: var(--orange);
}

.button-tq {
    background-color: var(--turquoise);
}

.button-pl {
    background-color: var(--plum);
}

button, .button a, .button-or a, .button-tq a, .button-pl a {
    font-family: skolar-sans-latin,sans-serif;
  text-align:center;
  font-size: 18px;
  font-weight: 700;
    text-decoration: none;
    transform: skewX(20deg);
    display: block;
    padding: 10px 12px 14px;
    line-height: 17px;
    
}

.button-or span {
    font-family: skolar-sans-latin,sans-serif;
  text-align:center;
  font-size: 18px;
  font-weight: 700;
    text-decoration: none;
    transform: skewX(20deg);
    display: block;
padding: 2px 12px 0;
    line-height: 17px;
    cursor: pointer;
}
button {
    color: var(--white);
    margin-left: 10px;
    
}

.button a {
    color: var(--black);
}

.button-or a, .button-tq a, .button-pl a {
    color: var(--white);
}

.button:hover {
    background-color: var(--tandk);
}

.button-or:hover {
    background-color: var(--orangedk);
}

.button-tq:hover {
    background-color: var(--turquoisedk);
}

.button-pl:hover {
    background-color: var(--plumdk);
}

.login-block .button-or {
    border-radius:0;
    color: var(--white);
    font-size: 18px;
    font-weight: 700;
    width: auto;
}

.play:hover {
    color: var(--tandk);
}

.top-box {
    position: absolute;
    top: 780px;
    z-index: 5;
    left: 0;
    right: 0;
    margin: auto;   
}

.quote, .register {
    display: grid;
    grid-template-columns: 55% 45%;
    grid-gap: 0;
    background-color: var(--orange);
}

.quote {
    align-items: center;
}

.quote-padding {
    padding: 15px 30px;
}

blockquote {
    width:90%;
    font-size: 19px;
    line-height: 1.25;
    position: relative;
    color: var(--white);
    z-index: -1;
    padding: 0;
    margin:0 10px 0 25px;
    font-style: italic;
}

blockquote p:before {
    font-family: "Font Awesome 5 Pro";
    content: "\f10d";
    vertical-align: bottom;
    color: white;
    font-size: 2.5em;
    font-weight: 900;
    position: absolute;
    top: -55px;
    left: -15px;
}

blockquote p:after {
    font-family: "Font Awesome 5 Pro";
    content: "\f10e";
    vertical-align: top;
    color: white;
    font-size: 2.5em;
    font-weight: 900;
    position: absolute;
    bottom: -55px;
    right: -15px;
}

cite {
    font-size: 15px;
    display: block;
    font-style: italic;
    color: var(--white);
    margin: 0 0 0 25px;
    
}

.panel blockquote p:before {
    font-size: 1.5em;
    top: -15px;
    left: -30px;
}

.panel blockquote p:after {
    display: none;
}

.blog blockquote {
    color: inherit;
}

.blog .margin {
    margin: 20px 100px;
}

.blog cite {
    margin: 5px 0;
}

.img_center {
    margin: 0 auto;
}

.web {
    background: url("/images/Backgrounds/background-spiderweb-02-black.png") no-repeat 100% 100%;
    background-size: contain;
    content: '';
    display: block;
    height: 100%;
    opacity: .15;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: -1;
}

.weblg {
    background: url("/images/Backgrounds/background-spiderweb-05-black.svg") no-repeat 100% 100%;
    background-size: contain;
    content: '';
    display: block;
    height: 100%;
    opacity: .15;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: -1;
}

.webbtm {
    background: url("/images/Backgrounds/background-spiderweb-03-black.png") no-repeat 100% 100%;
    background-size: contain;
    content: '';
    display: block;
    height: 100%;
    opacity: .30;
    position: absolute;
    right: 105px;
    bottom: 0;
    width: 100%;
    z-index: -1;
}

.play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
    color: var(--white);
    font-size: 105px;
}

/*.play-img {
    background: url("/images/rq2.jpg") no-repeat 100% 100%;
    background-size: cover;
    top:0;
    left:0;
    display: block;
    height: 450px;
    z-index: 1;
}*/

.header:first-child {
    z-index: 900;
}
.modal,
.modal-box {
    z-index: 900;
}

.modal {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, .8);
    overflow: auto;
     z-index: 900;
}

.modal-box {
    position: relative;
    align-items: center;
    justify-content: center;
    max-width: 60%;
    margin: 100px auto;
    border-radius: 10px;
    animation-name: modalbox;
    animation-duration: .4s;
    animation-timing-function: cubic-bezier(0, 0, .3, 1.6);
}

.modal-body {
    background: #fff;
    padding: 40px;
    border-radius: 10px;
    position: relative;
    border: 3px solid;
}

/* Close Button */
.close-modal {
    width: 20%;
    margin: 0 auto;
    cursor: pointer;
    text-align: center;
}

.close-x {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 10px;
    margin-right: 20px;
    font-weight: bold;
}

/*   Home Page Styles      */

.page-home {
    padding: 15px 0 0;
}

.page-home a {
    text-decoration: none;
    font-weight: normal;
    padding: 0;
    margin: 0;
}

.module1 {
    background-color: var(--white);
    padding: 75px 0 40px;
}

.module2 {
    background-color: var(--tan);
    padding: 50px 0 40px;
}

.cutout-media {
    display: flex;
    margin: 0 -20px;
}

.first {
    flex: 0 0 50px;
}

.cutout-media>* {
padding: 0 20px;
}

.cutout-media img {
 height: auto;
    max-width: 100%;
}

.media {
    margin-bottom: -5px;
    position: relative;
}

.cutout_content {
width: 64%;
margin-top: -56px;
}

/*@media (min-width:992px)
.cutout_content {
margin-top: -56px;
width: 80%;
}
@media (min-width:768px)
.cutout__content {
margin-top: -16px;
}*/
.cutout_content {
position: relative;
z-index: 1;
}
.cutout_content:before {
background-color: var(--tan);
    }

.cutout_content:before {
content: "";
display: block;
height: 135px;
left: -204px;
position: absolute;
top: -60px;
transform: skewX(255deg);
width: 100%;
z-index: -1;
}

.hero-media, .ceratopsian-media, .cldq1-media, .cldq2-media, .cldq3-media, .ceramics-media, .rangecreek-media, .u1-media, .u2-media, .u3-media, .u4-media, .bats-media, .va-media, .fungi-media, .aspen-media {
    min-height: 280px;
    position: relative;
}

.hero-media {
    background-color: var(--orange);
}
.hero-media:before {
content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
width: 100%;
background: linear-gradient(90deg,rgba(26,18,15,.2),rgba(26,18,15,0));
left: 0;
}

.hero-media:after{
background-image: url("/images/Backgrounds/background-spiderweb-01-black.svg");
background-position: 100%;
background-repeat: no-repeat;
background-size: contain;
opacity: .15;
right: 0;
    content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}

.ceratopsian-media:before, .cldq1-media:before, .cldq2-media:before, .cldq3-media:before, .ceramics-media:before, .rangecreek-media:before, .u1-media:before, .u2-media:before, .u3-media:before, .u4-media:before, .bats-media:before, .va-media:before, .fungi-media:before, .aspen-media:before  {
content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
width: 100%;
/*background: linear-gradient(90deg,rgba(26,18,15,.2),rgba(26,18,15,0));*/
left: 0;
}

.ceratopsian-media:after{
background-image: url("/images/investigations/ceratopsians.jpg");
background-position: 100%;
background-repeat: no-repeat;
background-size: contain;
right: 0;
    content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}


.cldq1-media:after{
background-image: url("/images/investigations/cldq1.jpg");
background-position: 100%;
background-repeat: no-repeat;
background-size: contain;
/*opacity: .15;*/
right: 0;
    content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}

.cldq2-media:after{
background-image: url("/images/investigations/cldq2.jpg");
background-position: 100%;
background-repeat: no-repeat;
background-size: contain;
/*opacity: .15;*/
right: 0;
    content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}

.cldq3-media:after{
background-image: url("/images/investigations/cldq3.jpg");
background-position: 100%;
background-repeat: no-repeat;
background-size: contain;
/*opacity: .15;*/
right: 0;
    content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}

.ceramics-media:after{
background-image: url("/images/investigations/ceramics.jpg");
background-position: 100%;
background-repeat: no-repeat;
background-size: contain;
/*opacity: .15;*/
right: 0;
    content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}

.rangecreek-media:after{
background-image: url("/images/investigations/rangecreek.jpg");
background-position: 100%;
background-repeat: no-repeat;
background-size: contain;
/*opacity: .15;*/
right: 0;
    content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}

.u1-media:after{
background-image: url("/images/investigations/u1.jpg");
background-position: 100%;
background-repeat: no-repeat;
background-size: contain;
/*opacity: .15;*/
right: 0;
    content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}

.u2-media:after{
background-image: url("/images/investigations/u2.jpg");
background-position: 100%;
background-repeat: no-repeat;
background-size: contain;
/*opacity: .15;*/
right: 0;
    content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}

.u3-media:after{
background-image: url("/images/investigations/u3.jpg");
background-position: 100%;
background-repeat: no-repeat;
background-size: contain;
/*opacity: .15;*/
right: 0;
    content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}

.u4-media:after{
background-image: url("/images/investigations/u4.jpg");
background-position: 100%;
background-repeat: no-repeat;
background-size: contain;
/*opacity: .15;*/
right: 0;
    content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}

.bats-media:after{
background-image: url("/images/investigations/bats.jpg");
background-position: 100%;
background-repeat: no-repeat;
background-size: contain;
/*opacity: .15;*/
right: 0;
    content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}

.va-media:after{
background-image: url("/images/investigations/va.jpg");
background-position: 100%;
background-repeat: no-repeat;
background-size: contain;
/*opacity: .15;*/
right: 0;
    content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}

.fungi-media:after{
background-image: url("/images/investigations/fungi.jpg");
background-position: 100%;
background-repeat: no-repeat;
background-size: contain;
/*opacity: .15;*/
right: 0;
    content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}

.aspen-media:after{
background-image: url("/images/investigations/aspen.jpg");
background-position: 100%;
background-repeat: no-repeat;
background-size: contain;
/*opacity: .15;*/
right: 0;
    content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}

.hero_content{
 background-color: #fff;
display: inline-block;
left: 0;
margin: -76px 0 20px 0;
max-width: 80%;
padding: 15px 24px 0;
    position: relative;
z-index: 10;
}

.hero_content:after {
background-color: #fff;
content: "";
display: block;
height: 88px;
left: 76px;
position: absolute;
right: 50%;
top: 0;
transform: skewX(50deg);
width: 100%;
z-index: -1;
}

.breadcrumb {
    color: var(--black);
    font-size: 13px;
}

.breadcrumb a {
    text-decoration: none;
    color: var(--black);
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.subject {
    font-family: skolar-sans-latin,sans-serif;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
}

.paleontology {
    border: 3px solid var(--orange);
}

.archaeology {
    border: 3px solid var(--turquoise);
}

.ecology {
    border: 3px solid var(--plum);
}

.investigations {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-gap: 15px;
    padding: 15px 0;
}

.support {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-gap: 15px;
    padding: 15px 0;
}

.justify {
    display: flex;
   /*  justify-content: center;*/
   align-items: center;
}

/*------------Accordian____________*/

.accordion {
    position: relative;
    background-color: var(--tan);
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

.accordion h3 {
    color: var(--black)!important;
    text-decoration: none;
}

.accordion:after {
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f0Da";
    font-size: 25px;
    color: var(--orange)!important;
    margin-left: 5px;
    position: absolute;
    top: 25px;
    right: 25px;
}

.active:after {
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f0D7";
}

/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.panel cite, .panel blockquote, .panel blockquote p:before, .blog cite  {
        color: var(--black)!important;
    } 


.box {
    width: 60%;
    padding: 30px;
    position: relative;
    background-color: var(--orange);
    color: var(--white);
    margin: 0 auto;
}

.box:before {
    background: url("/images/Backgrounds/background-spiderweb-05-black.svg") no-repeat 100% 100%;
    background-size: contain;
    content: '';
    display: block;
    height: 100%;
    opacity: .45;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
}

.filter {
    width: 75%;
    padding: 30px 0;
}

.filter a {
    font-family: "skolar-sans-latin", sans-serif;
    color: var(--white);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
}

/******* About Page ********************/

/*#video_hero {
    position: relative;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    max-height: 625px !important;
    background-image: url(/images/about-rq.jpg);
    background-size: cover;
}

@media (max-width: 959px) {
    #video_hero {
        background-image: url(/images/about-rq.jpg) !important;
        max-height: 550px !important;
    }
}

@media (max-width: 750px) {
    #video_hero {
        max-height: 320px !important;
    }
}*/

/******* Ed Corps ********************/

.egrid {
    display: grid;
    grid-template-columns: 3.25fr .75fr;
    grid-gap: 125px;
}

.menu-title {
    font-family: 'reykjavikone';
    font-weight: bold;
    color: var(--orange);
    text-decoration: none;
    font-size: 24px;
}

.sub {
    font-family: 'reykjavikone';
    padding-left: 15px;
    font-size: 22px;
    border-left: 1px solid var(--gray);
}

.sub p {
    margin:0 0 5px 0;
}

.sub a {
    color: var(--black);
    text-decoration: none;
}

.sub a:hover {
    text-decoration: underline;
}

/* Ed Corps Form */
.edcorps-page form label {
    margin-left: 0;
    padding-top: calc(.375rem + 1px);
    padding-bottom: calc(.375rem + 1px);
    margin-bottom: 0;
    line-height: 1.5;
    min-width: 25%;
    display: inline-flex;
    font-family: 'reykjavikone';
    font-size: 24px;
}

.edcorps-page form input[type="checkbox"],
.edcorps-page form input[type="radio"] {
    float: none;
    margin: 0 10px;
}

.edcorps-page form .form-group {
    margin: 10px 0;
}

.edcorps-page form .form-control {
    height: 42px;
}

.edcorps-page form textarea.form-control {
    padding: 10px 20px;
}

.edcorps-page form .form-control.full-control {
    width: 100%;
}

.edcorps-page form textarea.form-control {
    min-height: 100px;
}

.edcorps-page form .comment {
    color: #685852;
    font-size: 14px;
    margin-left: 10px;
    display: inline-block;
}

.edcorps-page .disabled {
    opacity: .5;
}

.checkmark {
    top: 5px;
     background-color: var(--gray);
}

.radio {
    top: 10px;
    background-color: var(--gray);
}
.edcorps-page .leaderboard-tabs .tabs-nav ul {
    margin: 0;
    padding: 0;
}

.edcorps-page .leaderboard-tabs .tabs-nav li {
    display: inline-block;
    background: var(--orangelt);
    border: 1px solid var(--orangelt);
    color: var(--white);
    margin: 0;
}

.edcorps-page .leaderboard-tabs .tabs-nav a {
    display: block;
    padding: 10px 15px;
    font-weight: bold;
    color: var(--white) !important;
    text-decoration: none;
}

.edcorps-page .leaderboard-tabs .tabs-nav a:hover,
.edcorps-page .leaderboard-tabs .tabs-nav li.active a {
    text-decoration: none;
}

.edcorps-page .leaderboard-tabs .tabs-nav li.active {
    color: #FFFFFF;
    background: var(--orange);
    border: 1px solid var(--orange);
}

.edcorps-page .leaderboard-tabs .tabs-nav li.active:after {
    content: none;
}

.edcorps-page .leaderboard-tabs .tabs-nav ul li {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.edcorps-page .leaderboard-tabs .tabs-nav ul li a {
    padding: 5px 15px;
}

.edcorps-page .leaderboard-tabs .tabs-nav li.active a {
    color: inherit;
}

.edcorps-page .leaderboard-tabs .tabs-content {
    border: 1px solid var(--orange);
    background: transparent;
    overflow: hidden;
    padding: 10px;
}

.edcorps-page .leaderboard-tabs .members td {
    padding: 8px 5px;
}

.edcorps-page .leaderboard-tabs .members td.grid-3-1 {
    padding: 8px 15px 8px 5px !important;
}

.edcorps-page .leaderboard-tabs .members td.bold {
    font-weight: bold;
}

.edcorps-page table th {
    color: var(--white);
    background: var(--orange);
    text-transform: uppercase;
    font-family: 'reykjavikone';
    font-size: 22px;
}

.edcorps-page table tr:hover {
    background: inherit;
}

.edcorps-page table.rewards th {
    text-align: center;
}

.edcorps-page table.rewards tr.odd td {
    background: var(--white);
}

.edcorps-page table.rewards tr.even td {
    background: var(--gray);
}

.edcorps-page table.activity-history tr.editActivityRow:hover,
.edcorps-page table.activity-history tr.editActivityRow:hover td {
    cursor: pointer;
    /*background: #bdbdbd;*/
}

.edcorps-page table.activity-history tr.pending td.status {
    background: var(--orange);
    font-weight: bold;
    color: var(--white);
}

.edcorps-page table.activity-history tr.approved td.status {
    background: var(--turquoise);
    font-weight: bold;
    color: var(--white);
}

.edcorps-page table.activity-history tr.revising td.status {
    background: var(--turquoise);
    font-weight: bold;
    color: var(--white);
}

.edcorps-page table.activity-history tr.rejected td.status {
    background: var(--plum);
    font-weight: bold;
    color: var(--white);
}

.edcorps-page table.activity-history th {
    color: var(--white);
    background: var(--turquoise);
    border: 1px solid var(--gray);
    font-size: 22px;
    text-transform: none;
}

.form-width {
    width: 66%;
}

.mobile {display: none; /* This is for the mobile menu, this keeps it hidden in the bigger versions */}

	.hidebox {
		border: 1px solid #bbb;
   		padding: 15px;
    	border-radius: 5px;
		margin: 15px 3px;
        background: #b5664c;
        color: #fff;
        cursor: pointer;
        width: 24%;
        }

	.hidebox a {
		color: #c7dcfc;
		font-weight: normal;
		}

	.hidebox a:hover {
		color: #fff;
		}

.hidden2>div {
	display:none;
}

.visible>div {
	display:block;
}

/*		10 Column Layout: 992px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

@media only screen and (min-width: 992px) and (max-width: 1221px) {

.height {
    height: 300px;
}
    
  .col-center {
        width: 70%;
    }     
   /*-----------Header----------------*/

.header {
    padding: 0 15px 15px;
}

.header .grid-3-1 {
    grid-template-columns: 60% 38%;
} 
    
/*------------Main Layout-----------*/
    
.banner {
    padding-top: 285px;
    height: 623px;
    }
.banner h1 {
 font-size: 100px;
    margin-bottom: 20px;
}
    
.top-box {
   top: 593px;
} 

.quote {
  grid-template-columns: 55% 45%;
}
    
.quote-padding {
    padding: 0 15px;
}
    
    blockquote {
         margin:0 10px 0 15px;
    }    
    
cite {
    margin: 0 0 0 10px
    
}    
    
.register {
  grid-template-columns: 50% 50%;
}
    
.modal-box {
    max-width: 70%;
}
    
.form-width {
    width: 70%;
} 
    
/******* Ed Corps ********************/

.egrid {
    grid-template-columns: 3.1fr .90fr;
    grid-gap: 75px;
}   
}

/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .float-left {
        max-width: 80%;
    }
    .height {
        height: 405px;
    }
    
    /*-----------Header----------------*/

.header {
    padding: 0 35px 15px 15px;
}
    
.header .grid-3-1 {
    grid-template-columns: 58% 42%;
}
    
.grid-2-2-3 {
    grid-template-columns: .8fr .8fr .8fr .8fr 2fr;
}
    
.logo-main {
    padding: 5px 0 0 15px;
    width: 70%;
}
    
.lower label{
  font-size: 1.4rem;
  padding: 8px 13px;
}
    
.menu-overlay{
	top: 110px;
	padding: 30px 50px;
}
    
/*------------Main Layout-----------*/
    
.banner {
    padding-top: 235px;
    height: 575px;
    }
.banner h1 {
 font-size: 85px;
    margin-bottom: 30px;
}
    
.hero-media:after, .ceratopsian-media:after, .cldq1-media:after, .cldq2-media:after, .u1-media:after, .u2-media:after, .u3-media:after, .u4-media:after, .bats-media:after, .va-media:after, .aspen-media:after, .fungi-media:after {
    background-position: bottom right -40px;
    background-size: cover;
    }

.cldq3-media:after   
   {
    background-position: top left -310px;
    background-size: cover;
    } 
    
.ceramics-media:after    
   {
    background-position: top left;
    background-size: cover;
    } 
    
.rangecreek-media:after   
   {
    background-position: bottom center;
    background-size: cover;
    }        
    
.top-box {
   top: 540px;
}
    
    .col-center {
        width: 80%;
    }    

    .button {
        margin: 0;
    }
    
.register {
  grid-template-columns: 50% 50%;
}
    
.quote {
    margin: 0 70px;
  grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
}    
    
.quote-padding {
    padding: 0 15px;
}    
    
blockquote {
    font-size: 18px;
    line-height: 1.25;
    margin:0 5px;
}    
    
blockquote p:before {
    font-size: 1.5em;
    left: -10px;
}
    
blockquote p:after {
    font-size: 1.5em;
    right: -10px;
}    
    
cite {
 margin: 0 0 0 5px
    
}    
    
.play {
  font-size: 65px;
}    
    
.register {
    line-height: 20px;
}

.hidebox {
    width: 49%;
}
    
    .create .grid-2 {
        grid-template-columns: 1fr;
    }    
    
.module1 {
padding: 15px 0;
}     
.module2 {
padding: 15px 0;
}    
     .cutout_content {
        margin-top: 10px;
        width: 100%;
    }    
    .cutout_content:before {
        display: none;
    }
    
    .cutout-media {
        margin: 0;
    }
    .cutout-media>* {
padding: 0 5px;
}
    
.modal-box {
    max-width: 95%;
    margin: 50px auto;
}  
    
.form-width {
    width: 90%;
} 
    
.egrid {
    grid-template-columns: 3.4fr 1.6fr;
    grid-gap: 30px;
} 
.egrid .grid-4, .egrid .grid-3 {
    grid-template-columns: 1fr 1fr;
}    
    
}

/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436  */

@media only screen and (min-width: 480px) and (max-width: 767px) {

.height {
    height: 455px;
}
    
    .cover img {
        object-fit: none;
        max-width: 100%;
    }   
    
   /*-----------Header----------------*/

.header {
    padding: 0 30px 10px 5px;
}

.header .grid-3-1 {
    grid-template-columns: 58% 42%;
} 
    
.grid-2-2-3 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1.5fr;
}
    
    .grid-3-1 {
        grid-template-columns: 1fr;
    }    
      
    
.logo-main {
    padding: 5px 0 0 10px;
    width: 70%;
}
    
.lower label{
  font-size: 1.4rem;
  padding: 6px 11px;
} 
    
    .hidden {
        display: none;
    }
    
.menu-overlay{
	top: 90px;
	padding: 30px 50px;
    overflow-y:scroll;
    overflow-x:hidden;
}   

    .menu-overlay .grid-3 {
        grid-template-columns: 1fr 1fr;
        grid-gap: 0;
    }
    
.hero_content {
    display: block;
    max-width: 100%;
    margin: -77px 0 10px 0;
    padding: 10px 15px 0;
    }    

.hero_content:after {
display: none;    
} 
.hero-media, .ceratopsian-media, .cldq1-media, .cldq2-media, .cldq3-media, .ceramics-media, .rangecreek-media, .u1-media, .u2-media, .u3-media, .u4-media, .bats-media, .va-media, .fungi-media, .aspen-media {
    min-height: 180px;
}
.hero-media:after, .ceratopsian-media:after, .cldq1-media:after, .cldq2-media:after, .u1-media:after, .u2-media:after, .u3-media:after, .u4-media:after, .bats-media:after, .va-media:after, .aspen-media:after {
    background-position: bottom 50px right;
    background-size: cover;
    }

.cldq3-media:after   
   {
    background-position: top -10px left -170px;
    background-size: cover;
    } 
    
.ceramics-media:after    
   {
    background-position: top -100px center;
    background-size: cover;
    } 
    
.rangecreek-media:after   
   {
    background-position: bottom center;
    background-size: cover;
    }     
    
.fungi-media:after   
   {
    background-position: bottom 25px right;
    background-size: cover;
    }     
   
    
/*------------Main Layout-----------*/
    
.banner {
    padding-top: 75px;
    height: 470px;
    }
.banner-grid {
    grid-template-columns: 115px 350px;
}    
    
.banner h1 {
 font-size: 75px;
    margin-bottom: 5px;
}
    
    .banner-text {
        text-shadow: 5px 5px 5px rgba(26,18,15,.4);
    }    
    
.top-box {
   top: 366px;
}

    .button {
        margin: 0;
    }    

.quote, .register {
    grid-template-columns: 1fr;
} 
     blockquote p:before {
    font-size: 1.5em;
    left: -25px;
      top: -25px;
}
    
blockquote p:after {
    font-size: 1.5em;
    right: -20px;
    bottom:-20px;
}   
.module2, .module1 {
padding: 15px 0;
}
    .cutout_content {
        margin-top: 10px;
        width: 100%;
    }    
    .cutout_content:before {
        display: none;
    }
    
    .cutout-media {
        margin: 0;
    }
    .cutout-media>* {
padding: 0 5px;
}
    
.filter {
    width: 100%;
    padding: 30px 0;
}
    
 .filter a {
    font-size: 13px;
}

.egrid .grid-3 {
    grid-template-columns: 1fr;
}         
    
.investigations {
    grid-template-columns: 1.5fr 2.5fr;
}
.investigations .grid-2, .egrid .grid-4 {
    grid-template-columns: 1fr 1fr;
}
    
    .hidebox {
    width: 49%;
} 
    
.modal-box {
    max-width: 95%;
    margin: 50px auto;
}
    
.mobile {display: block;
    font-family: 'reykjavikone';
    font-weight: 900;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--black);
    letter-spacing: 2px;
    font-size: 20px;
    }
.menu-hidden {display: none;}
.menu-unhidden {display: block;}     

    .modal-body {
        padding: 20px;
    }
      .padt {
        padding-top: 25px;
    }   
.egrid {
    grid-template-columns: 1fr;
    grid-gap: 10px;
}   
    .ebody {
        grid-row: 2;
    }
    
    .ebody .bottom-padding {
        padding-bottom: 36px;
    }    
    .emenu {
        border: 1px solid var(--gray);
        padding: 15px 10px;
        grid-row: 1;
    }      
 .form-width {
    width: 100%;
}  
}    

/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252 */

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

.height {
    height: 455px;
}
    
    .cover img {
        object-fit: none;
        max-width: 100%;
    }
    
.float-left {
    max-width: 80%;
}


   /*-----------Header----------------*/

.header {
    padding: 0 38px 10px 5px;
}

.header .grid-3-1 {
    grid-template-columns: 1fr;
    grid-gap: 20px;
} 
    
.grid-2-2-3 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}    
    
.logo-main {
    padding: 5px 0 0 10px;
    width: 100%;
}
    
.lower label{
  font-size: 1.4rem;
  padding: 6px 11px;
} 
    
    .hidden {
        display: none;
    }
    
.menu-overlay{
    top: 80px;
	padding: 30px 25px;
    overflow-y:scroll;
    overflow-x:hidden;
}      

    .menu-overlay .grid-3 {
        grid-template-columns: 1fr;
        grid-gap: 0;
    }
    
/*------------Main Layout-----------*/
    
.banner-grid {
    grid-template-columns: 1fr;
}
    
.banner {
    padding-top: 0;
    height: 490px;
    }
.banner h1 {
 font-size: 45px;
    margin-bottom: 5px;
}
    
.banner-text {
    margin: 0;
    padding: 0 15px;
    text-shadow: 5px 5px 5px rgba(26,18,15,.4);
}    
    
.top-box {
   top: 375px;
}

    .button {
        margin: 0;
    }
    
.button-or, .button-tq, .button-pl {    
    margin-bottom: 10px;
    }

.quote, .register {
    grid-template-columns: 1fr;
}    
  blockquote p:before {
    font-size: 1.5em;
    left: -25px;
      top: -25px;
}
    
blockquote p:after {
    font-size: 1.5em;
    right: -10px;
    bottom:0;
}   
     .cutout_content {
        margin-top: 10px;
        width: 100%;
    }    
    .cutout_content:before {
        display: none;
    }
    
    .cutout-media {
        margin: 0;
    }
    .cutout-media>* {
padding: 0 5px;
} 

.hero_content {
    display: block;
    max-width: 100%;
    margin: -77px 0 10px 0;
    padding: 10px 15px 0;
    }    

.hero_content:after {
display: none;    
} 
.hero-media, .ceratopsian-media, .cldq1-media, .cldq2-media, .cldq3-media, .ceramics-media, .rangecreek-media, .u1-media, .u2-media, .u3-media, .u4-media, .bats-media, .va-media, .fungi-media, .aspen-media {
    min-height: 180px;
}
.hero-media:after, .ceratopsian-media:after, .cldq1-media:after, .cldq2-media:after, .u1-media:after, .u2-media:after, .u3-media:after, .u4-media:after, .bats-media:after, .va-media:after, .aspen-media:after {
    background-position: bottom 50px right;
    background-size: cover;
    }

.cldq3-media:after   
   {
    background-position: top -10px center -170px;
    background-size: cover;
    } 
    
.ceramics-media:after    
   {
    background-position: top -100px center;
    background-size: cover;
    } 
    
.rangecreek-media:after   
   {
    background-position: bottom center;
    background-size: cover;
    }     
    
.fungi-media:after   
   {
    background-position: bottom 25px right;
    background-size: cover;
    }         
    
.filter {
    width: 100%;
}

.filter a {
    font-size: 16px;
}    
    
.filter .grid-4, .investigations .grid-2, .egrid .grid-4 {
    grid-template-columns: 1fr 1fr;
}         
    
.investigations, .support, .egrid {
    grid-template-columns: 1fr;
    }

.modal-box {
    max-width: 95%;
    margin: 50px auto;
}

    .modal-body {
        padding: 20px;
    }
    
.close-x {
    margin-top: 0px;
    margin-right: 5px;
} 
    
.accordion {
    padding-right: 40px;
}
    
.egrid {
    grid-template-columns: 1fr;
    grid-gap: 10px;
}    
    .ebody {
        grid-row: 2;
    }
    .emenu {
        border: 1px solid var(--gray);
        padding: 15px 10px;
        grid-row: 1;
    }    
 
.edcorps-page table.activity-history th {
    font-size: 14px;
}
    
.edcorps-page table.activity-history {
    font-size: 12px;
}    
    
.mobile {display: block;
    font-family: 'reykjavikone';
    font-weight: 900;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--black);
    letter-spacing: 2px;
    font-size: 20px;
    }
.menu-hidden {display: none;}
.menu-unhidden {display: block;}    
  
    .ebody .bottom-padding {
        padding-bottom: 36px;
    }
    
    .padt {
        padding-top: 25px;
    }    
    
 .form-width {
    width: 100%;
}

.box {
    width: 90%;
    padding: 30px;
} 
    
.hidebox {
    width: 100%;
}    
    
    .footer .padl, .footer .padr {
        padding: 0;
    }    
    
}