/* --------------------------------------------------------- */
/* SETTING THIS JUST IN CASE I NEED TO OVERRIDE THE TEMPLATE */
/* --------------------------------------------------------- */
body,
html {
    font-family: "museo-sans", "Trebuchet MS", Tahoma, Arial, sans-serif !important;
    background: white !important;
    font-weight: 300;
    font-size: 18px !important;
}

.lp-content {
    font-family: "museo-sans", "Trebuchet MS", Tahoma, Arial, sans-serif !important;
}

/* ------------------------------------------------------------ */
/* BACKGROUNDS AND COLORED BOXES AND VARIOUS STRUCTURAL HELPERS */
/* ------------------------------------------------------------ */

.back-box {
    min-height: 250px;
}

.box-padding {
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    padding-right: 30px;
}

.top-margin {
    margin-top: 50px;
}

.top-margin-medium {
    margin-top: 30px;
}

.top-margin-small {
    margin-top: 15px;
}

.top-margin-tiny {
    margin-top: 5px;
}

.bottom-margin {
    margin-bottom: 50px;
}


.top-padding {
    padding-top: 50px;
}

.bottom-padding {
    padding-bottom: 50px;
}

.bottom-padding-medium {
    padding-bottom: 30px;
}

.back-blue {
    background-image: URL(https://cdn.innovativelanguage.com/sns/em/2020/landing+pages/freepath/blueback.gif);
}

.back-white {
    background-image: URL(https://cdn.innovativelanguage.com/sns/em/2020/landing+pages/freepath/whiteback.gif);
}

.back-grey {
    background-color: #F3F2F0;
}

.back-purple {
    background-color: #963cbd;
}

.center-content {
    max-width: 980px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
}

.list {
    margin: 0;
}

.list li {
    padding-left: 10px;
    margin-left: -20px;
    margin-top: 5px;
}

/* ------- */
/* BUTTONS */
/* ------- */

/* Master setting */
.btn {
    display: inline-block;
    text-align: center;
    height: 68px;
    line-height: 68px;
    width: 300px;
    max-width: 100%;
    border-radius: 50px;
    border: none;
    font-family: "museo-sans", "Trebuchet MS", Tahoma, Arial, sans-serif !important;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 1px;
    padding-left: 5px;
    padding-right: 5px;
    cursor: pointer;
    text-decoration: none;


}

button:focus {
    outline: 0;
}

/* Blue button */
.btn-blue {

    background-color: #0076D1;
    color: white;
}

.btn-blue:hover {
    background-color: #00599a;
}

.btn-blue:active {
    background-color: #003763;
}

/* Green button */
.btn-green {
    background-color: #8bc79f;
    color: black;
}

.btn-green:hover {
    background-color: #80ae8f;
}

.btn-green:active {
    background-color: #72907c;
}

/* Clear white accent button */
.btn-clear-white {
    background-color: RGBA(0, 0, 0, 0);
    border: 1px solid white;
    box-sizing: border-box;
    color: white;
}

.btn-clear-white:hover {
    background-color: RGBA(255, 255, 255, .2);
}

.btn-clear-white:active {
    background-color: RGBA(255, 255, 255, .4);
}

/* Clear black accent button */
.btn-clear-black {
    background-color: RGBA(0, 0, 0, 0);
    border: 1px solid black;
    box-sizing: border-box;
    color: black;
}

.btn-clear-black:hover {
    background-color: RGBA(0, 0, 0, .2);
}

.btn-clear-black:active {
    background-color: RGBA(0, 0, 0, .4);
}

/* ----------------- */
/* FONTS AND HEADERS */
/* ----------------- */


.text-white {
    color: white !important;
}

.text-black {
    color: black !important;
}

.body-text {
    font-family: "museo-sans", "Trebuchet MS", Tahoma, Arial, sans-serif;
    font-size: 18px;
    line-height: 29px;
    font-weight: 300;
}

.text-small {
    font-size: 18px;
}

.titles {
    font-family: "museo-sans", "Trebuchet MS", Tahoma, Arial, sans-serif;
    line-height: 130%
}

.small-title {
    font-size: 22px;
}

.medium-title {
    font-size: 26px;
}

.large-title {
    font-size: 28px;
}

.xlarge-title {
    font-size: 38px;
}

.weight-100 {
    font-weight: 100;
}

.weight-300 {
    font-weight: 300;
}

.weight-700 {
    font-weight: 700;
}

.weight-900 {
    font-weight: 900;
}

/* ----- */
/* TOOLS */
/* ----- */

/* For specific line breaks in long sentences */
span.line {
    display: inline-block;
    line-height: 29px;
}

.box-zero {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}

/* For hunting down bad behaviour on elements */
.border {
    border: 1px solid red;
    box-sizing: border-box;
}


/* -------------------- */
/* CUSTOM FOR THIS PAGE */
/* -------------------- */

.img-heart {
    height: 60px;
}

.box-header {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 45px;
    padding-bottom: 115px;
}


/* different login buttons for different sizes */
#top_narrow_button {
    display: none;
}

#top_wide_button {
    display: inline-block;
}

#bottom_narrow_button {
    display: none;
}

#bottom_wide_button {
    display: inline-block;
}


/* --------------- */
/* TEMPLATE TWEAKS */
/* --------------- */

/* Hide video in signup box*/
.fla--d-video-box {
    display: none !important;
}

/* fix bottom border on level select */

.fla--d-level, fla--d-email {
    height: 38px !important;
}

/* fix color on signup button */

.fla--d-submit {
    background-color: #0076D1 !important;
}

.fla--d-submit:hover {
    background-color: #00599a !important;
}

.fla--d-submit:active {
    background-color: #003763 !important;
}



/* --------------- */
/* SMALLER WINDOWS */
/* --------------- */


@media (max-width: 980px) {
    .center-on-medium{
    text-align: center;
}
}

@media (min-width: 980px) {
    .small-img-on-small {
        max-height: 114px;
        width: auto;
    }

    #top_wide_button {
        display: none;
    }

    #top_narrow_button {
        display: inline-block;
    }

    #bottom_wide_button {
        display: none;
    }

    #bottom_narrow_button {
        display: inline-block;
    }
    
    

}

@media (max-width: 600px) {
    
    

    /* Center Inline Elements on small */
    .small-img-on-small {
        max-width: 50px;
        max-height: 50px;
    }

    /* Center Inline Elements on small */
    .center-text-on-small {
        text-align: center
    }



}

@media (max-width: 414px) {

    .left-on-small {
        text-align: left;
    }

    /*Smaller xlarge title*/
    .xlarge-title {
        font-size: 28px;
    }

    .large-title {
        font-size: 26px;
    }

    .small-title {
        font-size: 18px;
    }

    .top-margin {
        margin-top: 30px;
    }

    .box-header {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 35px;
        padding-bottom: 55px;
    }

    .btn {
        text-align: center;
        display: inline-block;
        height: 68px;
        min-width: 280px;
        max-width: 100%;
        line-height: 68px;
        border-radius: 50px;
        font-family: "museo-sans", "Trebuchet MS", Tahoma, Arial, sans-serif !important;
        font-weight: 700;
        font-size: 20px;
        letter-spacing: 0px;
        padding-left: 0;
        padding-right: 0;
        cursor: pointer;
        text-decoration: none;

    }

    .narrow {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        width: 100%
    }
}