/* home pages styles.
   requires:    nothing
   ========================================================================== */

/* ==========================================================================
   setup the environment
   ========================================================================== */

.cf:after,
.cf:before {
    clear: both;
    content: '';
    display: table;
}

.full-visible { display: none; }

.not-full-visible { display: block; }

.full-visible.half-visible {
    opacity: 0.2;
    filter: alpha(opacity=50);
    display: block;
    height: 1.875rem;
    overflow: hidden;
    background: #ffb76b;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ffb76b 0%, #fd6634 84%, #ff7f04 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffb76b 0%, #fd6634 84%, #ff7f04 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffb76b 0%, #fd6634 84%, #ff7f04 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

/* ==========================================================================
   page structure
   ========================================================================== */

.grid>* {
    display: block;
    float: left;
}

#home-page-wrapper { width: 100%; }

.zero.samples #outercontainer #container img {
    max-width: 100%;
}

.zero.samples {
    height: auto;    
}

#home-page-width { width: 100%; }

#home-page-shadow {
    text-align: left;
    width: 100%;
}

#home #tail-button { height: 0; }

#home #nav ul#resources-sub-menu { padding-top: 0; }

#home #nav ul#top-menu {
    width: 730px;
    margin: 0 auto;
    display: block;
    font-size: 1rem;
}

/* ==========================================================================
   nav
   ========================================================================== */

#home #nav,
#home #nav ul,
body#home #nav ul li ul { height: 75px; }

#home #nav li a span { font-size: 0.9375rem !important; }

#home #nav #logo { width: 15.625rem; }

#home #get-involved-box {
    max-width: 64.5rem;
    width: 100%;
    z-index: 12;
    height: 0;
    margin-top: 0rem;
}

#home .get-involved-box { top: 0; }

#home-page-wrapper #top-menu {
    padding: 0;
    background: #fff;
    z-index: 10;
}

ul#resources-sub-menu { margin-top: -0.625rem; }

#features-bubbles {
    background-color: #fd6634;
    margin-top: 5.625rem;
    padding: 3.75rem 0 4.0625rem;
    position: relative;
    background-image: url("../img/home-features.png");
}

#home #logo { margin: 0 auto; }

#home #nav ul { padding-top: 0.75rem; }

#home .get-involved-text { margin: 1.625rem 0.9375rem 1.125rem 0.9375rem; }

/* ==========================================================================
   main content
   ========================================================================== */

#home #not-color-box {
    margin-top: 6.25rem;
}

span.trail {
    color: #747474;
    font-size: 1.5625rem;
    font-weight: 300;
    display: inline-block;
    text-align: center;
    max-width: 52.6875rem;
    width: 100%;
}

#home #subhead {
    margin-top: 8.125rem;
    padding-left: 8.5rem;
}

div#global-content-wrapper { margin: 0 0 1.25rem 0; }

img#home-menu-bottom {
    clear: both;
    display: block;
    height: 0.5625rem;
    left: -0.6875rem;
    position: relative;
    width: 55.0625rem;
    z-index: 9999;
}

div#global-content-width {
    position: relative;
    top: -0.5625rem;
}

img#global-content-top { display: block; }

div#global-content-padding { padding: 1.25rem 1.5625rem 1.875rem 1.5625rem; }

/* ==========================================================================
   page styles
   ========================================================================== */

h1#home-banner {
    margin: 0;
    font-size: inherit;
}

#home-banner span { display: none; }

span.title {
    color: white;
    width: 7.5rem;
    display: inline-block;
    text-align: left;
    font-size: 1.125rem;
}

.top span.title {
    color: #fc4002;
    font-size: 1.5625rem;
    font-weight: 600;
}

.top .adventures-title {
    margin-bottom: 0;
    margin-top: -2.0625rem;
    background: #fd6634;
    text-align: center;
    color: #fff;
    font-family: inherit;
    font-size: 2.875rem;
    font-weight: 400;
    display: inline-block;
    vertical-align: top;
    padding: 0.625rem;
}

.top .adventures-title a {
    font-size: inherit !important;
    color: #fff;
    line-height: inherit !important;
}

.top .adventures-title span {
    font-size: 18px;
    line-height: 1.2;
    display: inline-block;
    width: 16.45rem;
    text-align: left;
    font-weight: 400;
    font-family: "Enriqueta", Arial, sans-serif;
}

.top span.beyond-title {
    width: 15.625rem;
    height: 2.5rem;
    background: #ff9432;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 300;
    color: #fff;
    padding-top: 0.375rem;
    display: inline-block;
    vertical-align: top;
}

#interest h2.sub-title {
    color: #fc4002;
    font-weight: 400;
}

span.title.center { text-align: center; }

#project-camps span.title {
    margin-top: 48.4375rem;
    vertical-align: top;
}

/* ==========================================================================
   Bubbles
   ========================================================================== */

.bubble_wrapper {
    display: inline-flex;
    align-items: center;
    font-family: "Bebas Neue", sans-serif;
    color: #f64324;
    font-size: 24px;
}

#comp-adventures .bubble_wrapper img {
    width: 376px;
    height: auto;
}

#summer-research-program .img-right img {
    width: 224px;
    height: auto;
}

#summer-research-program .bubble_wrapper {
    margin-top: -69px;
}

#middle-summer-program .bubble_wrapper img {
    width: 350px;
    height: 196px;
}

#emerging-leaders-program .bubble_wrapper img {
    width: 288px;
    height: 162px;
}

#spring-program .bubble_wrapper img {
    height: auto;
    width: 206px;
}

#middle-summer-program .bubble_wrapper img {
    width: 196px;
    height: auto;
}

#middle-summer-program .bubble_wrapper,
#spring-program .bubble_wrapper { margin-top: -38px; }

#emerging-leaders-program {
    display: flex;
    margin-top: -61px;
    padding-bottom: 10px;
}

#emerging-leaders-program .bubble_wrapper { margin: 0 auto; }

#emerging-leaders-program .bubble_wrapper img {
    width: 162px;
    height: auto;
}

#comp-adventures .bubble_wrapper {
    font-size: 2.1875rem;
    margin-top: -88px;
}

.bubble_wrapper .text-left {
    text-align: right;
    margin-right: 6px;
}

.bubble_wrapper .text-right {
    text-align: left;
    margin-left: 6px;
}

.bubble_wrapper span {
    display: block;
    line-height: 0.9;
    white-space: nowrap;
}

.zero .page-width.base, #comp-proj-clubs, #top-level {
    display: flex !important;
    justify-content: space-between;
}

#comp-proj-clubs {
    max-width: 938px;
}

#top-level {
    max-width: 55.4375rem;
    gap: 3rem;
    margin-right: 8rem;
}

#robot-1 { 
    margin-left: 0rem; 
    margin-top: 35px;
}

#comp-proj-clubs img#yellow-background {
    z-index: -10;
    position: absolute;
    margin: 0 0 0 192px;
}

#robot-2 {
    width: 200px;
    margin-top: -96px;
    margin-left: 53px;
}

#robot-2 img { margin-left: 109px; }

#robot-3 {
    position: absolute;
    z-index: 2;
    top: -30.5%;
    left: calc(50% + 54px);
    transform: translate(-50%, -50%);
}

#robot-3 img {
    margin-top: 42px;
    margin-left: 64px;
}

/* ==========================================================================
   I WANT TO .... & adventures
   ========================================================================== */

#adventures h3 {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
}

#interest .table-content {
    display: flex;
    justify-content: space-between;
}

.table-content p { line-height: 1.63; }

#interest .table-content > div {
    width: 23%;
}

#interest .table-content h3 { margin-bottom: 10px; }

h2.sub-title {
    margin: 3.125rem 0 1.875rem 0;
    font-weight: 400;
    font-size: 35px;
    font-family: 'Enriqueta', Arial, sans-serif;
}

#home #adventures h2 {
    color: #fc4002;
    font-size: 24px;
    margin: 55px 0 40px;
    font-family: 'Enriqueta', Arial, sans-serif;
    font-weight: 400;
    text-align: center;
    line-height: 22px;
    border-top: 1px solid #d8d8d8;
    padding: 57px 0 0 0;
}

#interest .table-content span.link {
    color: #fc4002;
    font-size: 16px;
    font-weight: 400;
}

#interest .table-content span.link:hover { color: #f77700; }

#adventures .table,
#adventures .table-content { display: table; }

#adventures .table-content>* { vertical-align: top; }

#adventures .table>*:last-child,

#adventures .table a {
    background: #429cb1;
    color: #fff;
    display: table-cell;
    height: 127px;
    position: relative;
    text-align: center;
    width: 142px;
}

#adventures .table div.orange a { background: #fd6634; }

#adventures .table>*:last-child a { margin-right: 0; }

#adventures .table a img {
    left: 0;
    opacity: 0.2;
    position: absolute;
    top: 0;
}

#adventures .table>*:first-child a img { opacity: 0.7; }

#adventures .table a:hover img { opacity: 1; }

#adventures .table a h3 {
    display: table-cell;
    height: 127px;
    padding: 0 12px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 142px;
    font-weight: 600;
    font-size: 17px;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    line-height: 1.3;
}

#adventures .table a:hover h3 { opacity: 0; }

#adventures .table a:hover h3.hover-for-text { opacity: .5; }

/* ==========================================================================
   Zero
   ========================================================================== */

.page-width.v_gallery {
    max-width: 1100px ;
}

.grades {
    display: inline-block;
    vertical-align: top;
    max-width: 22.5rem;
    width: 100%;
}

.zero.top.second .grades { margin-top: -1.25rem; }

.zero.top.second .page-width {
    padding: 0 !important;
    width: 69.5rem;
}

#project-camps { 
    width: auto;
}

.zero.top a:hover { opacity: 0.9; }

.zero.top #project-camps img { margin-top: -110px; }

.zero.top {
    padding: 0;
    height: 541px;
    background: #ffbd39;
}

.zero.top.second {
    background-color: #ffca61;
    margin-top: 0px;
    height: auto;
}

.zero.top a {
    font-size: 16px;
    line-height: 1.3;
}

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

/* ==========================================================================
   Features
   ========================================================================== */

#features {
    margin: 60px 0 3.125rem;
    position: relative;
}

#features.grid>* {
    color: #787878;
    padding-right: 42px;
    width: 270px;
}

#features.grid>*:last-child {
    padding-right: 0;
    width: 228px;
}

#features a small { color: #939393; }

#features a:hover,
#features a:hover small { color: #dd1100; }

#features a p {
    margin-top: 6px;
    width: 228px;
}

/* ==========================================================================
   Zero Samples
   ========================================================================== */

.zero {
    background: #fd6634;
    margin-top: 90px;
    padding: 60px 0 65px;
    position: relative;
}

.zero>div>hr {
    border-top: 5px solid #ff8f2d;
    left: 0;
    position: absolute;
    right: 0;
    top: 136px;
    width: 100%;
}

.zero.samples h1 {
    color: #fff;
    font-family: 'Enriqueta', Arial, sans-serif;
    font-size: 36px;
    margin: 0;
    position: relative;
    text-align: center;
}

.zero.samples h1 img { vertical-align: middle; }

.zero.samples h1 .arrow {
    background: #fd6634;
    margin: 0 200px -20px 0;
}

.zero.samples h1 .left,
.zero.samples h1 .right { margin: -5px 0 0 0; }

.zero.samples h1 span {
    background: #fd6634;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 60px;
    text-transform: uppercase;
}

.zero.samples h2 {
    color: #fff;
    font-size: 24px;
    text-transform: uppercase;
    text-align: center;
    margin: 1.875rem 0 3.125rem;
    font-weight: 400;
    font-family: 'Source Sans Pro', Arial, sans-serif;
}

.zero .large-tiles hr,
.zero .medium-tiles hr {
    border-top: 1px solid #ccc;
    margin: 8px 0 10px;
}

.zero .smallest-tiles:last-child { margin: 0 auto; }

.zero .large-tiles.grid>*,
.zero .medium-tiles.grid>*,
.zero .small-tiles.grid>*,
.zero .smallest-tiles.grid>* {
    background: #fff;
    border-radius: 8px;
}

.zero .large-tiles.grid>* {
    height: 365px;
    margin: 0 10px 10px 0;
    padding: 10px;
    width: 250px;
}

.zero .large-tiles h3,
.zero .medium-tiles h3 {
    color: #767676;
    font-size: 15px;
    font-weight: 300;
    margin: 10px auto 0px auto;
    text-align: center;
    font-family: 'Source Sans Pro', Arial, sans-serif;
}

.zero .large-tiles .grid,
.zero .medium-tiles .grid {
    color: #429cb1;
    font-size: 10px;
    text-transform: uppercase;
}

.zero .large-tiles .grid>*:last-child,
.zero .medium-tiles .grid>*:last-child { margin-top: 8px; }

.zero .large-tiles .grid img,
.zero .medium-tiles .grid img { margin-right: 10px; }

.zero .large-tiles .grid span,
.zero .medium-tiles .grid span { color: #737373; }

.zero .medium-tiles.grid>* {
    height: 335px;
    margin: 0 7px 8px 0;
    padding: 11px;
    width: 200px;
}

.zero .small-tiles.grid>* {
    margin: 0 6px 6px 0;
    padding: 8px 0;
    text-align: center;
    width: 123px;
}

.zero .smallest-tiles.grid>* {
    margin: 0 9.6px 8px 0;
    padding: 8px 0;
    text-align: center;
    width: 9.1%;
}

.zero .large-tiles.grid>a:hover,
.zero .medium-tiles.grid>a:hover,
.zero .small-tiles.grid>a:hover,
.zero .smallest-tiles.grid>a:hover { box-shadow: 0 2px 13px #9e0b00; }

.zero .large-tiles.grid>*:last-child,
.zero .medium-tiles.grid>*:last-child,
.zero .small-tiles.grid>*:last-child,
.zero .smallest-tiles.grid>*:last-child { margin-right: 0; }

p.center {
    display: block;
    text-align: center;
}

#button-for-full {
    background: #fff;
    border-radius: 5px;
    border: 1px solid #fc4002;
    color: #fc4002;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    margin-left: 10px;
    padding: 8px 35px;
    text-transform: uppercase;
}

#button-for-full:hover {
    background: #fc4002;
    color: #fff;
}

.button-center {
    display: block;
    width: 250px;
    margin: 1.25rem auto 0 auto;
}

.left-column { display: inline-block; }

.right-column {
    display: inline-block;
    padding-left: 10px;
    vertical-align: middle;
    vertical-align: top;
    margin-top: 16px;
}

.right-column span {
    text-transform: uppercase;
    color: #7f7f7f;
    font-weight: 400;
    width: 200px;
    display: inline-block;
}

div.column-two {
    display: inline-block;
    width: 700px;
    margin: 0 auto;
    text-align: right;
}

/* ==========================================================================
   popups
   ========================================================================== */

.mfp-content {
    max-width: 550px;
    padding: 10px 0;
}

button.mfp-close {
    top: 0 !important
}

#popup-header {
    background: #429cb1;
    color: #fff;
    padding: 15px 1.875rem;
    text-transform: uppercase;
    max-width: 550px;
}

#popup-header>* {
    display: inline-block;
    vertical-align: middle;
}

#popup-header>*:last-child { max-width: 60%; }

#popup-header img { margin-right: 15px; }

#home #popup-main { margin-top: 0; }

#popup-main {
    background: #fff;
    color: #787878;
    display: block;
    padding: 1.25rem 1.875rem;
    max-width: 550px;
}

#popup-main img {
    max-width: 100%;
    height: auto;
}

#popup-main a { color: #fc4002; }

#popup-main a:hover { color: #dd1100; }

#popup-main h1 {
    color: #1b90a9;
    font-size: 18px;
    font-weight: 300;
    font-family: inherit;
    margin: 0;
}

#popup-main div {
    margin-top: 1.5625rem;
    text-align: center;
}

#popup-main h2 {
    color: #1b90a9;
    font-size: 15px;
    font-weight: 600;
    margin: 1.5625rem 0 0 0;
    text-transform: uppercase;
}

#popup-main p {
    color: #787878;
    font-size: 14px;
    line-height: 18px;
}

/* ==========================================================================
   global override
   ========================================================================== */

#home main {
    margin-top: 8.75rem !important;
}


/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for medium screens (1200px)
   ========================================================================== */

@media all and (max-width: 1200px) {
    #home #subhead {
        margin-top: unset; 
        padding-left: unset; 
        margin: 0 auto;
    }
    h1#home-banner {
        margin: 0 auto;
        text-align: center;
    }
    h1#home-banner img { margin: 0 auto; }

    /*=================================    bubbles*/
    #comp-proj-clubs { justify-content: space-between; }

    #robot-3 { top: -30.5%; }

    #summer-research-program .bubble_wrapper { margin-left: 21px; }

    #robot-2 img { margin-left: 0; }

    #comp-proj-clubs { max-width: 938px; }

    /*=================================    zero*/
    .zero.top.second .page-width {
        padding: 0 20px !important;
        width: auto !important;
    }
}

/* styles for medium screens (900px)
   ========================================================================== */

@media all and (max-width: 900px) {
    #home #nav ul#top-menu {
        width: 100%;
        display: none;
    }
    #home #nav li a span { font-size: 13px !important; }

    #home .page-width { padding: 0 1.25rem !important; }

    /*=================================    bubbles*/

    #middle-summer-program .bubble_wrapper img,
    #emerging-leaders-program .bubble_wrapper img,
    #spring-program .bubble_wrapper img {
        width: 166px !important;
    }
    .bubble_wrapper:not(#comp-adventures .bubble_wrapper) {
        font-size: 18px !important;
    }
    #comp-adventures .bubble_wrapper {
        font-size: 1.5rem;
        margin-top: -69px;
    }
    #emerging-leaders-program { margin-top: -25px; }

    #robot-1 img {
        width: 120px;
        height: auto;
    }

    #robot-3 {
        top: -23%;
        left: calc(50% + 20px);
    }

    #robot-3 img {
        width: 100px;
        height: auto;
    }

    #robot-2 {
        width: unset;
        margin-top: -43px;
    }

    #robot-2 img {
        width: 100px;
        height: auto;
        margin-top: 0;
        margin-left: 53px;
    }

    .zero.top.second { height: auto; }

    #top-level {
        margin-right: 2rem;
        max-width: 774px;
    }
    #comp-proj-clubs {
        max-width: 802px;
        margin-right: 18px;
    }
    
    /*=================================    I want to...*/

    #interest .table-content { flex-wrap: wrap; }

    #interest .table-content > div {
        width: 50%;
        margin-bottom: 2rem;
    }

    .table-content p { margin-right: 13px; }
}

/* styles for medium screens (600px)
   ========================================================================== */

@media all and (max-width: 600px) { 

    /*=================================    bubbles*/

    #top-level {
        flex-direction: column-reverse;
        max-width: 469px !important;
        margin: 0 auto;
    }

    .page-width.mb { max-width: 500px !important; }

    #comp-adventures .bubble_wrapper {
        margin-top: 24px;
        float: right;
        font-size: 20px;
    }
    
    #comp-proj-clubs { flex-direction: column; }

    #robot-1 { margin-top: -96px; }

    #robot-1 img { width: 107px; }

    #robot-2 { margin-left: 0; }

    #robot-2 img {
        margin-left: 6px;
        width: 106px;
    }

    #robot-3 { 
        top: unset;
        left: unset;
        transform: unset;
        position:relative; 
        margin-top: -187px;
    }

    #robot-3 img {
        float: right;
        margin-top: 64px;
    }

    #comp-adventures .bubble_wrapper img { width: 249px; }

    .zero.top { height: auto; }

    .zero.top.second { height: auto !important; }

    .bubble_wrapper:not(#comp-adventures .bubble_wrapper) { float: right; }

    .zero .page-width.base { flex-direction: column; }

    .zero .page-width.base .program {
        display: flex;
        flex-direction: column-reverse;
    }
    #middle-summer-program .bubble_wrapper img, #emerging-leaders-program .bubble_wrapper img, #spring-program .bubble_wrapper img {
        width: 224px !important;
    }
    .bubble_wrapper:not(#comp-adventures .bubble_wrapper) { margin-top: 0rem; }

    #middle-summer-program .bubble_wrapper { float: left !important; }

    #emerging-leaders-program { margin-top: -23px; }

    #emerging-leaders-program .bubble_wrapper {
        float: left !important;
        margin-left: 0;
    }

    #summer-research-program { margin-top: -42px; }

    /*=================================    I want to...*/

    #interest .table-content { flex-direction: column; }

    #interest .table-content > div {
        width: 100%;
        margin-bottom: 2rem;
    }

    .table-content p { margin-right: 0rem; }
    
}

/* styles for medium screens (320px)
   ========================================================================== */

@media all and (max-width: 320px) {}