/* by Karen Zhou */

/*
=======================
NOTES
=======================
- --black and --white are not true black and white to lower the contrast
*/

/*
==========================================================================================================================================
VARIABLE DECLARATIONS
==========================================================================================================================================
*/
:root {

    /*--- Universal Colors ---*/
    --black: #141414;
    --white: #FDFDFD;
    --lighten: rgba(256,256,256,0.5);
    --shadow: rgba(0,0,0,0.2);

    /*
    --- Theme Colors ---
    #42C6D1 (teal)
    #A0EBDD (light teal)
    #B3ACEA (purple)
    #DBD6FE (purple hover)
    #FD9B5F (orange)
    #FBF1A2 (yellow)
    #692F83 (dark purple)
    #12809A (dark teal)
    */
    --primary: #42C6D1;
    --secondary: #A0EBDD;
    --primary_accent: #B3ACEA;
    --primary_hover: #DBD6FE;
    --secondary_accent: #FD9B5F;
    --tertiary_accent: #FBF1A2;
    --interface_accent: #692F83;
    --decorative_accent: #12809A;
    --decorative_text_color: #0B4856;
    --bg_color: #ffeed7;
    --bg_color2: #71d8da;

    /*
    --- Fonts ---
    Decorative Text: Montserrat 400, 500, 600, 700
    Copy Text: Varela Round
    */


    --decorative_font_family: 'Montserrat', sans-serif;
    --decorative_font_weight: 400;
    --copy_font_family: 'Varela Round', sans-serif;
    --copy_font_weight: 400;
    --hyperlink_family: 'Varela Round', sans-serif;
    --small-text: 0.8rem;

    /*--- Borders ---*/
    --rounded: 1rem;
    --small_rounded: 0.3rem;
    --untabbed_transparent: 1px solid transparent;
    --tab_focus: 2px solid;

    /*--- Misc ---*/
    --hover-transition-time: 0.2s;
    --scroll-factor: 0.5;
}


/*
==========================================================================================================================================
UNIVERSAL STYLES
==========================================================================================================================================
*/
.banish{
    /*position: absolute;
    left: -1000px;
    top: auto;*/
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--white);
}
html{
    scroll-behavior: smooth;
}
body{
    background-color: var(--bg_color);
}
main{
    background-color: var(--bg_color2);
    background-image: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,0), var(--primary));  
}
label{
    font-family: var(--decorative_accent);
    color: var(--black);
}
input {
    margin-bottom: 0.5rem;   
    padding: 0.1rem 0.5rem !important;
    height: 1.5rem;
    border: 1px solid var(--decorative_accent) !important;
    border-radius: var(--small_rounded) !important;
    font-size: 90% !important;
    font-family: var(--copy_font_family) !important;
    color: #5D5D5D;
}
input:focus {
    outline: var(--tab_focus) var(--interface_accent)!important;
}
hr{
    margin: 2rem 0;
    width: 80%;
    border-bottom: 1px solid var(--decorative_accent);
}

.material-icons-round {
    vertical-align: text-bottom;
    font-size: 1.2em !important;
}

/*
==========================================================================================================================================
CLASSES
==========================================================================================================================================
*/
.go-btn {
    margin: 0.2rem;
    padding: 0.2rem 1rem;
    background-color: var(--primary_accent);
    outline: none;
    border: none;
    border-radius: var(--small_rounded);
    text-transform: uppercase;
    text-align: center;
    text-decoration: none !important;
    font-family: var(--decorative_font_family);
    font-weight: 600;
    color: var(--black) !important;
    transition-duration: var(--hover-transition-time);
    cursor: pointer;
}
.go-btn:hover {
    background-color: var(--primary_hover);
}
.go-btn:focus {
    outline: 2px solid var(--interface_accent);
}

.hyperlink:link, .hyperlink:visited {
    padding: 0.1rem;
    font-family: var(--hyperlink_family);
    color: var(--interface_accent);
    text-decoration: underline;
    transition-duration: var(--hover-transition-time);
}
.hyperlink:hover, .hyperlink:active {
    background-color: var(--primary_hover);
    border-radius: var(--small-rounded);
    font-family: var(--hyperlink_family);
    color: var(--black);
}   
.hyperlink:focus {
    border-radius: var(--small_rounded);
    outline: var(--tab_focus) var(--interface_accent);
}

.content {
  display: block;
  z-index: 2;
  padding: 1rem 0 2rem 0;
  /*background-color: var(--bg_color2);
  background-image: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,0), var(--primary));*/
}
/*
=====================================================================================================================================================
NAVBAR
=====================================================================================================================================================
*/
.navigation{
    position: fixed;
    top: 0;
    z-index: 2;
    width: 100%;
    padding: 0.5rem 1rem;
    /*background-color: var(--bg_color);*/
    backdrop-filter: blur(250px);
}
/* Navbar div that contains the links */
.navmenu{
    overflow: hidden;
    /*display: flex;
    align-items: center;*/
}
/* navbar logo */
.navlogo{
    display: block;
    float: left;
    padding: 0.1rem;
    border: 2px solid transparent;
}
.navlogo:active{
    border: 2px solid var(--interface_accent);
}
.navlogo:focus{
    border: 2px solid var(--interface_accent);
    outline: none !important;
}
.navlogo img{
    width: auto;
}
/* navbar links */
.navlink{
    display: block;
    float: left;
    padding: 0.1rem 1rem;
    margin-top: 7px;
    border-radius: var(--rounded);
    font-weight: var(--copy_font_weight);
    font-family: var(--copy_font_family);
    transition-duration: var(--hover-transition-time);
    text-decoration: none !important;
}
.navlink:link, .navlink:visited{
    color: var(--black);
}
.navlink:hover{
    background-color: var(--white);
}
.navlink:active{
    background-color: var(--white);
    outline: 2px solid var(--interface_accent);
}
.navlink:focus{
    outline: 2px solid var(--interface_accent);
}
.login-btn{
    max-width: 175px;
    display: block;
    float: right;
    margin-top: 7px;
    margin-left: auto;
    margin-right: 5px;
    padding: 0.1rem 1rem;
    background-color: var(--primary_accent);
    outline: transparent 2px solid;
    border-radius: var(--rounded);
    cursor: pointer;
    text-decoration: none !important;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none !important;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--decorative_font_family);
    color: var(--black) !important;
    transition-duration: var(--hover-transition-time);
}
.login-btn:hover {
    outline: 2px solid transparent;
    background-color: var(--primary_hover);
    text-decoration: none !important;
}
.login-btn:active{
    background-color: var(--primary_hover);
    outline: 2px solid var(--interface_accent);
    text-decoration: none !important;
}
.login-btn:focus {
    outline: 2px solid var(--interface_accent);
    text-decoration: none !important;
}

/*
The bars icon that expand and collapse.
 */
.navmenu .navicon{
    display: none;
}
.navlogo img{
    height: 40px;
} 

/*
When the screen is less than 1098 pixels wide, hide all links. 
Show the link that contains should open and close with navicon (.navicon)
*/
@media screen and (max-width: 1097px){
    .navmenu a:not(:first-child) {
        display: none;
    }
    .navlogo img{
        height: 32px;
    }
    .navmenu a.navicon{
        display: block;
        float: right;
        color: var(--black);
    }
    .navmenu.responsive {
        position: relative;
    }
    .navmenu.responsive a.navicon {
        float: none;
        position: absolute;
        right: 0;
        top: 0;
    }
    .navmenu.responsive a.navlink{
        float: none;
        display: block;
        text-align: left;
    }
    .navmenu.responsive a.navlogo{
        float: none;
        display: block;
        text-align: left;
    } 
    .navmenu.responsive a.login-btn{
        display: block;
        text-align: center;
        float: left;
    }
}


/*
==========================================================================================================================================
BANNER
==========================================================================================================================================
*/
.banner{
    margin-bottom: -10px;
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    background-color: var(--bg_color);
}
.banner-content{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 5rem;
}
.banner-blurb{
    max-width: 700px;
}
.banner-blurb h1{
    margin-bottom: 2vh;
    text-align: left;
    font-family: var(--decorative_font_family);
    font-weight: 600;
    color: #006c85;
}
.banner-blurb p{
    text-align: left;
    font-family: var(--copy_font_family);
    font-size: 1rem;
    font-weight: 400;
    color: var(--black);
}
.banner-verticals{
    display: flex;
    align-items: center;
    width: 100%;
}
.banner-verticals-menu{
    display: flex;
    flex-direction: column;
}
.banner-verticals-menu p{
    max-width: 300px;
    position: relative;
    margin-bottom: 10px;
    font-family: var(--decorative_font_family);
    font-weight: 500;
    color: var(--black);
    background-color: var(--white);
    border-radius: 30px;
}
.banner-verticals-menu p:after{
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-left-color: var(--white);
    border-right: 0;
    border-bottom: 0;
    margin-top: -7px;
    margin-right: -15px;
}
.bubble{
    display: block;
    top: 0px;
    padding: 0.3rem;
    margin-bottom: 10px;
    text-align: center;
    border-radius: 30px;
    background-color: #fff5e9;
    border: none;
    outline: 2px solid var(--white);
    backdrop-filter: blur(50px);
    font-family: var(--decorative_font_family);
    font-weight: 500;
    color: var(--black);
    text-decoration: none; 
    transition: transform var(--hover-transition-time); 
}
.bubble:hover{
    background-color: var(--white);
    box-shadow: #f9dfaf 0px 7px;
    transform: translateY(-3px);
    color: var(--black);
    text-decoration: none !important;
}
.bubble:active{
    background-color: var(--white);
    transform: translateY(0);
    box-shadow: none;
    outline: 2px solid var(--interface_accent);
}
.bubble:focus{
    outline: 2px solid var(--interface_accent);
}
.banner-verticals-img{
    max-width: 500px;
    width: 50%;
}

/*Banner Sizing*/
@media screen and (min-width: 1515px){
    .banner{
        padding-top: 6rem;
    }
    .banner-content{
        flex-direction: row;
        padding: 1rem 5rem;
    }
    .banner-blurb{
        width: 60%;
        margin-right: 2rem;
    }
    .banner-blurb h1{
        font-size: 3rem;
    }
    .banner-verticals{
        justify-content: right;
        width: 40%;
    }
    .banner-verticals-menu p{
        padding: 1rem 2rem;
    }
    .bubble{
        max-width: 250px;
        margin-left: 2rem;
    }
    .banner-verticals-img{
        display: block;
        max-width: 400px;
        width: 70%;
    }
}
@media screen and (max-width: 1514px) and (min-width: 1080px){
    .banner{
        padding-top: 6rem;
    }
    .banner-content{
        flex-direction: row;
        padding: 1rem 5rem;
    }
    .banner-blurb{
        max-width: 50%;
        margin-right: 2rem;
    }
    .banner-blurb h1{
        font-size: 2.7rem;
    }
    .banner-verticals{
        justify-content: right;
    }
    .banner-verticals-menu p{
        padding: 1rem 2rem;
    }
    .bubble{
        max-width: 250px;
        margin-left: 2rem;
    }
    .banner-verticals-img{
    display: block;
    max-width: 300px;
    width: 70%;
    }
}
@media screen and (max-width: 1079px) and (min-width: 541px){
    .banner{
        padding-top: 6rem;
    }
    .banner-content{
        flex-direction: column;
        padding: 1rem 10vw;
    }
    .banner-blurb{
        margin-bottom: 2rem;
    }
    .banner-blurb h1{
        font-size: 2.5rem;
    }
    .banner-verticals{
        justify-content: center;
    }
    .banner-verticals-menu p{
        padding: 1rem 2rem;
    }
    .bubble{
        width: 100%;
    }
    .banner-verticals-img{
    display: block;
    max-width: 500px;
    width: 40%;
    }
}
@media screen and (max-width: 540px){
    .banner{
        padding-top: 3rem;
    }
    .banner-content{
        flex-direction: column;
        padding: 1rem 10vw;
    }
    .banner-blurb h1{
        font-size: 2rem;
    }
    .banner-verticals{
        justify-content: center;
    }
    .banner-verticals-menu p{
        padding: 0.6rem 1.2rem;
    }
    .bubble{
        width: 100%;
    }
    .banner-verticals-img{
    display: none;
    }
}
/*
==========================================================================================================================================
SECTIONS
==========================================================================================================================================
*/
.topic{
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
    padding: 3rem;
    background-color: var(--lighten);
    border-radius: var(--small_rounded);
}
.topic div{
    margin-bottom: 1rem;
}
.topic h1{
    margin-bottom: 5vmin;
    text-align: center;
    font-family: var(--decorative_font_family);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--decorative_text_color);
}
.topic h2{
    margin-top: 3rem;
    margin-bottom: 3rem;
    text-align: center;
    font-family: var(--decorative_font_family);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--decorative_text_color);
}
.topic h3{
    margin-bottom: 0.7rem;
    font-family: var(--decorative_font_family);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--black);
}
.topic h4{
    font-family: var(--decorative_font_family);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--black);
}
.topic p{
    margin-bottom: 0.2rem;
    text-align: justify;
    font-family: var(--copy_font_family);
    color: var(--black);
}
.verticals div{
    margin-bottom: 3rem;
    padding-left: 1rem;
    border-radius: var(--small_rounded);
    border-left: 5px solid var(--primary);
}

/* ------------------------------------------------------------------------------------------------------------------------------
ABOUT
*/
#about img{
    display: flex;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    width: 100%;
    max-width: 200px;
}
#about h3{
    margin-top: 2rem;
    text-transform: uppercase;
}
#talkingpoints img{
    display: flex;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    width: 60%;
    max-width: 100px;
}
#talkingpoints h3{
    margin-bottom: 0.7rem;
}
#talkingpoints p{
    margin-bottom: 0.5rem;
}
#talkingpoints div{
    padding: 0 1rem;
    border-left: 5px solid var(--primary);
}

/* ------------------------------------------------------------------------------------------------------------------------------
RESOURCES
*/
.resources-btn{
    margin-bottom: 0.2rem;
    padding: 1rem;
    display: inline-block;
    width: 100%;
    background-color: var(--primary_accent);
    border: none;
    border-radius: var(--rounded);
    text-align: center;
    text-decoration: none !important;
    font-family: var(--decorative_font_family);
    font-weight: 600;
    color: var(--black) !important;
    transition-duration: var(--hover-transition-time);
    cursor: pointer;
}
.resources-btn:hover{
    background-color: var(--primary_hover);
}
.resources-btn:active{
    background-color: var(--primary_hover);
    outline: var(--tab_focus) var(--interface_accent);
}
.resources-btn:focus{
    outline: var(--tab_focus) var(--interface_accent);
}

/* ------------------------------------------------------------------------------------------------------------------------------
TEMPORARY: Subject Pills Color Control
*/
#subjects img{
    display: flex;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    width: 100%;
    min-width: 50px;
    max-width: 150px;
}
.nav-pills > li > a {
    display: inline-block;
    margin: 0.5rem;
    padding: 0.8rem;
    border-radius: 100rem;
    background-color: var(--decorative_accent);
}
.nav-pills > li > a:hover{
    background-color: var(--lighten);
}
li.active > a, li.active > a:hover, li.active > a:focus{
    background-color: var(--lighten);
    /*outline: 5px solid var(--decorative_accent);*/
}
/* Responsive Subject Pill Image Resize */
.newpill{
    margin: 0 auto !important;
}

.nav-pills > div > a {
    display: block;
    margin: 0.5rem;
    padding: 0.5rem;
    border-radius: 100rem;
    background-color: var(--decorative_accent);
}
.nav-pills > div > a:hover{
    background-color: var(--lighten);
}
div.active > a, div.active > a:hover, div.active > a:focus{
    background-color: var(--lighten);
    /*outline: 5px solid var(--decorative_accent);*/
}

@media screen and (max-width: 3000px) and (min-width: 1200px) {
    .smscrmpadding{
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
    .pillimage {
        width: 10% !important;
        height: auto !important;
    }
    /*.newpill{
        max-width: 80% !important;
        display: initial;
    }*/
}
@media screen and (max-width: 1199px) and (min-width: 1001px) {
    .smscrmpadding{
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    .pillimage {
        height: 83px;
        width: 83px;
    }
}
@media screen and (max-width: 1000px) and (min-width: 801px) {
    .smscrmpadding{
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .pillimage {
        height: 80px;
        width: 80px !important;
    }
}
@media screen and (max-width: 800px) and (min-width: 1px) {
    .hidemobile{
        display: none;
    }
    .nav-pills li{
        width: 88px;
    }
    .smscrmpadding{
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    .pillimage {
        height: 60px;
        width: 60px !important;
    }
    .hidedesk{
        display: block !important;
    }
}

.icon{
        margin: 0 !important;
        height: 40px;
        width: 40px;
    }
.hidedesk{
        display: none;
    }
.tabsubjects h3{
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--decorative_accent);
    text-align: center;
    text-transform: uppercase;
}
.tabsubjects li{
    font-family: var(--copy_font_family);
}

/* ------------------------------------------------------------------------------------------------------------------------------
CONTACT
*/
.contact {
    margin: 3rem auto;
    padding: 3rem;
    text-align: center; 
}
.contact div{
    margin: 1rem 0;
    font-family: var(--copy_font_family);
    color: var(--black);
}
.contact h2{
    font-weight: 600;
}
.contact img{
    width: 67%;
    height: 80%;
    max-height: 168px;
    max-width: 200px;
}

/*
==========================================================================================================================================
MODAL
Adding onto Bootstrap's modal classes
==========================================================================================================================================
*/

.modal-header {
    margin: 0 !important;
    background-color: var(--secondary) !important;
    font-family: var(--decorative_font_family);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--black);
}
.modal-close {
    /*margin: 0rem 0rem 0rem 10rem !important;*/
    /*padding: 0.5rem !important;*/
    border-radius: 20rem;
    color: var(--interface_accent) !important;
    opacity: 1.0;
    text-shadow: none !important;
}
.modal-close:hover, .modal-close:active {
    border-radius: 20rem;
    background-color: var(--lighten);
    color: var(--black) !important;
    opacity: 1.0;
    text-shadow: none !important;
}
.modal-close:focus {
    outline: var(--tab_focus) var(--interface_accent);
}

.modal-body{
    margin-bottom: 2rem !important;
}
.modal-body p{
    margin-top: 1.5rem;
    margin-bottom: 0.5rem !important;
    font-family: var(--decorative_font_family);
    font-weight: 500;
    color: var(--black);
}
.modal-body li{
    padding: 0.5rem !important;
    border: none !important;
}
.modal-body a:link, .modal-body a:visited {
    padding: 0.3rem;
    font-family: var(--copy_font_family);
    color: var(--decorative_accent);
    text-decoration: none;
    transition-duration: var(--hover-transition-time);
}
.modal-body a:hover, .modal-body a:active {
    background-color: var(--primary_hover);
    border-radius: var(--small_rounded);
    font-family: var(--hyperlink_family);
    color: var(--black);
}   
.modal-body a:focus {
    border-radius: var(--small_rounded);
    outline: var(--tab_focus) var(--interface_accent);
    color: var(--interface_accent);
}
.modal-footer {
    margin: 0 !important;
    background-color: var(--secondary);
}

/*
==========================================================================================================================================
FOOTER
==========================================================================================================================================
*/
.footbar{
    padding: 2rem;
    background-color: #006072;
    text-align: center;
}
.footbar hr{
    display: block;
    margin-top: 2rem;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
    border-top: 1px solid var(--decorative_accent);
}
.footbar h3{
    margin-top: 1.5rem;
    font-family: var(--decorative_font_family);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--white);
    text-transform: uppercase;
}
.footbar ul{
    padding: 0;
    list-style: none;
}
.footbar li{
    margin-bottom: 0.5rem;
    color: var(--secondary);
}
.footbar a:link, .footbar a:visited {
    padding: 0.1rem 0.5rem;
    border-radius: var(--rounded);
    /*border-bottom: 1px solid var(--secondary);*/
    font-family: var(--hyperlink_family);
    color: var(--secondary);
    text-decoration: none;
    transition-duration: var(--hover-transition-time);
} 
.footbar a:hover {
    background-color: var(--primary_hover);
    font-family: var(--hyperlink_family);
    color: var(--black);
}
.footbar a:active{
    background-color: var(--primary_hover);
    font-family: var(--hyperlink_family);
    color: var(--black);
    outline: var(--tab_focus) var(--secondary);
    border-bottom: 0;
}
.footbar a:focus {
    border-bottom: 0;
    outline: var(--tab_focus) var(--secondary);
}
.copyright{
    font-family: var(--copy_font_family);
    font-size: var(--small-text);
    color: var(--white);
}
.copyright p{
    margin: 0;
}