/*
****************************************************************
Other Styles / except the first screen /
****************************************************************
*/

/*--------------------------------------------------------------
=== HEADER ===
--------------------------------------------------------------*/
header.sticky-header { top: 0; padding: 3px 0; background: #fff; box-shadow: var(--box-shadow);}
header.sticky-header #logo img { width: 110px; min-width: 110px;}


/*--------------------------------------------------------------
=== TYPOGRAPHY & COLORS ===
--------------------------------------------------------------*/
h1, .h1 {}
h2, .h2 {}
h3, .h3 { margin-bottom: .6rem; font-size: var(--font-size_h3); line-height: 1.4; font-weight: 600;}
h3.event-title, .h3.event-title { font-size: var(--font-size_news-title); line-height: 1.4; font-weight: 700;}
h4, .h4 { margin-bottom: var(--mv-base); font-size: var(--font-size_h4); line-height: 1.4; font-weight: 700;}
section:not(.w-dark-bg) h4, .section:not(.w-dark-bg) .h4 { color: var(--blue);}
article h4:not(:first-child), article .h4:not(:first-child) { margin-top: calc(var(--mv-base) * 2); }

h5, .h5 { margin-bottom: calc(var(--mv-base) * .65); font-size: var(--font-size_h5); font-weight: 700;}

.pre-header { margin-bottom: var(--mv-base); padding-bottom: .5rem; font-size: var(--font-size_cap); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;}
.pre-header:not(.no-line) { border-bottom: 2px solid var(--gray-lighter);}
.w-dark-bg .pre-header { border-color: #fff;}

.subtitle { font-weight: 700;}

.tag { font-size: var(--font-size_tag); font-weight: 700; text-transform: uppercase; color: var(--gray-lighter);}
.news-title { margin-bottom: var(--mv-base); font-size: var(--font-size_news-title); font-weight: 700;}

.all-cap { font-size: var(--font-size_cap); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;}
.w-dark-bg .all-cap { color: var(--blue-lighter);}



    /*--------------------------------------------------------------
    === FOOTER ===
    --------------------------------------------------------------*/
footer { position: relative; padding: 3.5rem 0; font-size: 1.7rem; background: var(--blue);}
footer, footer a { color: #fff;}
footer a:hover, footer a:focus { color: var(--blue_lighter);}

footer .row .col-3 { text-align: right;}

.footer-nav { display: flex; flex-direction: column; gap: .4rem;}
footer .social, .footer-logo { margin-bottom: 2.3rem;}
footer .copyright, footer .legal { margin-top: 2.3rem;}

@media (max-width:767.98px) {
    footer .row .col-1 { order: 3; margin-top: 2.6rem;}
    footer .row .col-2 { order: 2;}
    footer .row .col-3 { order: 1; min-height: 110px; margin-bottom: 4.1rem; padding-top: 1rem;}

    #footer-logo { position: absolute; top: 3.4rem;}
    .footer-logo img { width: 11rem; height: 11rem;}
}
@media (min-width:768px) {
    footer { padding: 7.3rem 0 8.2rem;}
    footer .row { display: grid; grid-template-columns: 2fr 1fr 2fr; align-items:flex-end; gap: 2rem;}
}


/*--------------------------------------------------------------
=== BUTTONS & SEPARATORS & ANCHORS ===
--------------------------------------------------------------*/
.anchor { position: absolute;}
@media (max-width:767.98px) {
    .anchor { margin-top: -6rem;}
}
@media (min-width:768px) {
    .anchor { margin-top: -4rem;}
}

.divider {
    height: 1px;
    background: var(--gray-lighter);
    margin: 3.8rem 0 3rem;
}

.social-link { position: relative; display: inline-block; width: 2.4rem; height: 2.4rem;}
.social-link:before, .social-link:after { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: block; content: ""; transition: .25s ease-in-out; background-position: center; background-size: contain; background-repeat: no-repeat;}
.social-link:hover:before, .social-link:focus:before { opacity: 1;}
.social-link:hover:after, .social-link:focus:after { opacity: 0;}

.social-link.in:before { color: red; background-image: url("../img/icon-in-blue.svg");}
.social-link.in:after { background-image: url("../img/icon-in-white.svg");}


/*--------------------------------------------------------------
=== COMPONENTS ===
--------------------------------------------------------------*/

/* section-head */
.section-head { padding-bottom: 2rem; margin-bottom: 3rem; border-bottom: 2px solid var(--gray-lighter);}
section:not(.w-dark-bg) .section-head { color: var(--blue);}
.section-head *:last-child { margin-bottom: 0;}

/* image-circle */
.image-circle { display: inline-block; box-shadow: var(--box-shadow);}
.image-circle, .image-circle img { border-radius: 100%; overflow: hidden;}

/* footnote */
.footnote { margin-top: var(--mv-lg); font-size: var(--font-size_sm); font-weight: 600;}
section:not(.w-dark-bg) .footnote { color: var(--gray);}



    /* Accordion */
.accordion:not(:first-child) { margin-top: calc(var(--mv-base) * 3.4);}
.accordion-item {
    margin-bottom: 8px; transition: .25s ease-in-out;
}

.accordion-item button {
    width: 100%;
    padding: 1.2rem 2.4rem;
    text-align: left;
    border: 0;
    background: var(--blue);
    color: #fff;
    cursor: pointer;
    font-size: 2rem;
    font-weight: 700;
    position: relative;
}

.accordion-item button:after {
    content: "▾";
    position: absolute;
    right: 14px;
    top: calc(50% - 1.2rem);
    color: #fff;
    transition: .25s ease-in-out;
}
.accordion-item button.show:after { rotate: 180deg;}

.accordion-content {  opacity: 0; max-height: 0; overflow: hidden; transition: .25s ease-in-out;}
.show + .accordion-content, .expanded + .accordion-content { opacity: 1; max-height: 1000rem;}
.accordion-content-inner { padding: 1.5rem 2.4rem;}


/* === STORIES section */
.stories-section {}
.stories-wrapper { flex-wrap: wrap; gap: 2.8rem;}
.story-item { display: flex; flex-direction: column; flex: 0 0 calc(33.3333% - 2.8rem*2/3); background: #fff; box-shadow: var(--box-shadow);}
.story-img { position: relative; width: 100%; padding-bottom: 53.176%;}
.story-img img { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; object-position: center; object-fit: cover;}
.story-body { flex-grow: 1; padding: 3.7rem 3rem 5rem 3.4rem;}
.story-tag { margin-bottom: .8rem;}
.story-title, a.story-title, .story-title a, a.story-title a { display: block; margin-bottom: .8rem; font-size: 2.4rem; font-weight: 700; color: var(--blue)!important;}
a.story-title:hover, a.story-title:focus, .story-title a:hover, .story-title a:focus { color: var(--blue-lighter)!important;}
.story-desc { color: var(--text-color);}

@media (max-width:767.98px) {
}
@media (min-width:768px) {
    .story-item { margin-bottom: 4.5rem;}
    .stories-footer { text-align: center;}
}


/* === MEMBERS section */
.members-section { background: url("../img/members-bg.webp") left 36% center / cover no-repeat;}
.members-section, .members-section .section-title { color: #fff;}
.members-section .container { align-items: center;justify-content: space-between; gap: 6rem;}
.members-text { width: 428px; max-width: 100%;}
.members-card { width: 394px; max-width: 100%; padding: 4.1rem 4.9rem 4.1rem 5.8rem; background: var(--blue);}
.members-card .btn-line { margin-top: var(--mv-base)!important;}
@media (max-width:767.98px) {
}
@media (min-width:768px) {
    .members-section { padding: 10rem 0; background-position: center;}
}


/* === BECOME section */
.become-section { background: var(--yellow-light);}
.become-section .image-wrapper { margin-bottom: calc(var(--mv-base) * 3.5); position: relative; padding-bottom: 49.65%;}
.become-section .image-wrapper img { position: absolute; top: 0; width: 100%; height: 100%; object-fit: cover;}
@media (max-width:767.98px) {
}
@media (min-width:768px) {
    .become-section { padding-top: 9rem;}
    .become-section .row { padding-left: 5rem; padding-right: 5rem;}
}


/* === BIOMEDICAL CALLOUT section */
.biomedical-callout-section { color: #fff;}
@media (max-width:767.98px) {
    .biomedical-callout-section { padding-top: var(--container-ph); background: linear-gradient(115.41deg, #72A2E4 35.26%, #1D3F86 72.41%);}
    .biomedical-callout-section .image-bg { margin: 0 var(--container-ph);}
    .biomedical-callout-section .image-bg, .biomedical-callout-section .image-bg img { position: relative;}
}
@media (min-width:768px) {
    .biomedical-callout-section .row-2-cols { align-items: center; min-height: 303px;}
}


/* === HISTORY section */
.history-section {}
@media (max-width:767.98px) {
    .history-section .col-2 img { margin: 5rem auto 0; width: 220px;}
}
@media (min-width:768px) {
    .history-section { padding: 10rem 0 15rem;}
    .history-section .col-1 { flex-grow: 1;}
    .history-section .col-2 { flex: 0 0 280px; margin-left: calc(4rem + 7%);}
}


/* === BOARD section */
.board-row { margin-top: calc(var(--mv-base) * 6.5);}
.board-wrapper { padding-top: 3rem;}
.board-item { margin-bottom: 4rem;}
.board-item .name { font-size: 1.05em; font-weight: 700;}
.board-item .position {}
@media (max-width:767.98px) {
}
@media (min-width:768px) {
    .board-row { gap: 5rem;}
    .board-row .col-1 { flex: 0 0 33.3333%;}
    .board-row .col-2 { flex: 0 0 66.6666%;}
    .board-row .col-2 .board-wrapper { column-count: 2; column-gap: 4.3rem;}
    .board-item {display: block; page-break-inside: avoid; break-inside: avoid;}
}


/* === MEMBERSHIP ELIGIBILITY section */
.membership-e-section { padding-bottom: 0; background: var(--yellow-light);}
.membership-e-section .row { gap: 5rem;}
.membership-e-section .col-1 { flex: 0 0 25%;}
.membership-e-section .col-2 { flex: 0 0 75%;}
@media (max-width:767.98px) {
    .membership-e-section { padding-top: 22rem;}
}
@media (min-width:768px) {
    .membership-e-section { padding-top: 9rem;}
}


/* === BENEFITS of MEMBERSHIP section */
.benefits-m-section { background: var(--yellow-light);}


/* === VENDORS and PARTNERS section */
.partners-section { position: relative; text-align: center; background: var(--blue-light);}
.partner-item { margin-bottom: 5rem;}
.partner-logo { display: flex; justify-content: center; align-items: center; padding: 1rem; width: 100%; height: 153px; background: #fff;}
.partner-name { padding-top: 1rem; font-size: .85em; font-weight: 700; color: var(--blue);}

.modal-body .col-2 { padding-top: 1.5rem;}


@media (max-width:767.98px) {
}
@media (min-width:768px) {
    .partners-row { flex-wrap: wrap; gap: 2rem;}
    .partner-item { flex: 0 0 calc(25% - 2rem * 4 / 3);}

    .modal-body .partner-logo { margin-right: 8rem; min-width: 189px; height: auto!important;}
    .modal .modal-footer { padding-left: calc(269px + 5rem)!important;}
}


/* MODAL */
.modal { display: none; z-index: 1050; overflow: hidden; background: white; box-shadow: var(--box-shadow_popup);}
.modal .modal-dialog { padding: 2rem;}
.modal .modal-header { min-height: 40px;}
.modal .modal-content { z-index: 2; position: relative; margin: 0; display: flex; flex-direction: column; text-align: left; border: 0!important; background: none; box-shadow: none!important;}

.modal .modal-footer { height: auto;}

.modal .close { z-index: 3; position: absolute; right: 0; margin: 10px; background: none; font-weight: 300; width: 20px; height: 20px; font-size: 40px; line-height: 20px; color: var(--gray-cool); text-align: center;}
.modal .close:hover, .modal .close:focus { color: var(--blue);}

.slider-controls { display: flex; gap: 8rem;}
.slider-controls a { display: flex; align-items: center; gap: .5rem; font-size: var(--font-size_cap); font-weight: 700; letter-spacing: .05em;}
.slider-controls a:hover, .slider-controls a:focus { color: var(--blue-cool);}
.slider-controls a .ico { margin-top: 1px; position: relative; display: block; width: 1.4rem; height: 2.4rem;}
.slider-controls a.prev .ico { margin-left: -.3rem; transform: rotate(-180deg);}

.slider-controls a .ico:before, .slider-controls a .ico:after { position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); margin-left: 2px; width: 100%; height: 100%; background-position: center; background-size: contain; background-repeat: no-repeat; content: "";}
/*.slider-controls a .ico:before { opacity: 0; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAxNiAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgMkwxMyAxMi4yNzAzTDIuNTc4OTUgMjIiIHN0cm9rZT0iIzAzMDQ1RSIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+Cg==);}*/
.slider-controls a .ico:after { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAxNiAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgMkwxMyAxMi4yNzAzTDIuNTc4OTUgMjIiIHN0cm9rZT0iIzcyQTJFNCIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+Cg==);}

/*.slider-controls a:hover .ico:before { opacity: 1;}
.slider-controls a:hover .ico:after { opacity: 0;}*/

@media (max-width: 767.98px) {
    .modal { position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; overflow: auto;}
    .modal .modal-footer { padding: 5rem 1rem;}
    .slider-controls { justify-content: center;}
}
@media (min-width: 768px) {
    .modal { position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); width: 1000px;}
    .modal .modal-body { flex-grow: 1; padding: 2rem 5rem;}
    .modal .modal-body .row { align-items: flex-start;}
    .modal .modal-footer { padding: 5rem 5rem 6rem;}
}


/* === SCIENCE MATTERS section */
.science-m-section { background-image: url("../img/events-img.svg"); background-repeat: no-repeat;}

@media (max-width:767.98px) {
    .science-m-section {  background-position: center bottom -15%; background-size: 100vw 100vw;}
}
@media (min-width:768px) {
    .science-m-section { background-position: right bottom -25%; background-size: 584px 523px;}
}


/* === CURRENT MEMBERS section */
.current-members-section { background: var(--yellow-light);}
.current-members-section .section-head { text-align: center;}
.current-members-section .subsection-title { margin-top: var(--mv-base); margin-bottom: calc(var(--mv-base) * 2); color: var(--text-color);}
.current-members-section .subsection-title * { margin-bottom: 0!important; color: currentColor!important;}
.current-members-section .row { gap: calc(3rem + 6.5%);}
.current-members-section .col { flex-basis: 33.33%;}
.program-item { color: var(--blue);}
.program-item:not(:last-child) { margin-bottom: var(--mv-base);}


/* === STUDENT COMPETITION section */
.student-c-section { background: var(--blue-light);}
.student-c-section .image-wrapper-1 { width: 95%;}
.student-c-section .image-circle { z-index: 1; position: relative; float: right; width: 50.3%; margin-top: -20.1%;}


/* FORM */
.form-row:not(:last-child) { margin-bottom: 3rem;}

.input-wrapper { position: relative;}
.input-wrapper input.text-field { width: 100%;}
input.text-field { padding: .5rem 1rem; height: 4.3rem; font-size: 1.7rem; border-radius: 2px; border: 2px solid var(--gray-cool); background: none;}
.ico-eye { position: absolute; top:50%; transform: translateY(-50%); margin-left: -3rem; width: 2.6rem; height: 1.9rem; cursor: pointer; opacity: .65; background: url("../img/ico-eye.svg") center / contain no-repeat;}
.ico-eye-slash { background-image: url("../img/ico-eye-slash.svg");}


/* === LOGIN section */
.login-section { z-index: 1; position: relative;}
.login-row { padding: 2.4rem 5rem; display: flex; gap: 1.5rem; justify-content: space-between; align-items: center; color: #fff; background: var(--blue);}
.login-row * { white-space: nowrap;}
.login-title { padding-right: 3rem; font-size: var(--font-size_h5); font-weight: 700;}
.input-wrapper { width: 100%;}
.login-section input.text-field { color: #fff; border-color: #fff;}
.login-section .btn-forgot { margin-left: 2rem;}
@media (max-width:767.98px) {
    .login-row { border-radius: 4rem;}
    .login-section { margin-bottom: -13.5rem;}
}
@media (min-width:768px) {
    .login-section { margin: -4.5rem 0;}
    .login-row { border-radius: 8rem;}
}


/* === UPCOMING & PAST EVENTS & ALL EVENTS section */
.events-list-section {}
.events-list-section .row { gap: 5rem;}
.up-event-item { max-width: 580px;}
.event-image { margin-bottom: var(--mv-base);}
.event-date { margin-bottom: var(--mv-base); font-weight: 700;}
.event-link { font-size: 1.05em;}

.up-event-item .event-title, .past-event-item .event-title { display: block; margin-bottom: .6rem;}
.up-event-item .event-desc:not(:last-child), .past-event-item .event-desc:not(:last-child) { margin-bottom: var(--mv-base);}

.up-event-item:not(:last-child) { margin-bottom: calc(var(--mv-lg) * 1.35);}
.past-event-item:not(:last-child) { margin-bottom: var(--mv-lg);}


@media (max-width:767.98px) {
}
@media (min-width:768px) {
    .events-list-section .row { justify-content: space-between;}
    .events-list-section .col-1 { flex-basis: 55%;}
    .events-list-section .col-2 { flex-basis: 25%;}

}


/* === SPONSORSHIP section */
.sponsorship-section { background: var(--yellow-light);}


/* === SCIENCE MATTERS section */
.science-matters-section { padding: 0;}
.science-matters-section .container { z-index: 1; position: relative; margin-top: -24.5%;}
.science-matters-section .section-intro { margin-bottom: calc(var(--mv-lg) * 1.2);}



/* === ABOUT THE SCIENCE MATTERS PROGRAM section */
@media (max-width:767.98px) {
    .sm-program-section .row-2-cols { margin: 6rem 0 2rem;}
    .sm-program-section .row-2-cols .col-image { order: 0; margin-left: 20px; max-width: 320px;}
    .sm-program-section .row-2-cols .col-text { order: 1;}
}
@media (min-width:768px) {
    .sm-program-section .section-head { margin-bottom: calc(var(--mv-lg) * 1.3);}
    .sm-program-section .row-2-cols { align-items: center;}
    .sm-program-section .row-2-cols { margin-bottom: 6rem;}
    .sm-program-section .row-2-cols .col-image:first-child { padding-left: 4rem;}
    .sm-program-section .row-2-cols .col-image:last-child { margin-left: -1.7rem; padding-right: 4rem;}
}




/* === DONATE section */
.donate-section .subsection-title { margin-bottom: var(--mv-base); color: var(--blue);}
.donate-section .donate-text { margin-bottom: calc(var(--mv-base) * 1.8);}
.donate-section .btn-donate { width: 203px;}
.donate-section .logos-credit { margin-top: calc(var(--mv-base) * 2);}