#landing {
    background: linear-gradient(to bottom right, #FDF143, #fe9b45, #FE4747);
}


.landing_bg {
    height:26rem;
    margin-bottom: 5rem; /*this keeps the text under the landing pic from overlaping*/
}

.landing_pic{
    background-image: url("../graphics/ISL_front_hero.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.hero-img {background-image:linear-gradient(to right, white, 20%, transparent), url("../graphics/hero1_m.png");
    height:12rem;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;

}

.hero-img2 {background-image:linear-gradient(to right, white, 20%, transparent), url("../graphics/hero2_m.png");
    height:12rem;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;

}

.hero-img3 {background-image:linear-gradient(to right, white, 20%, transparent), url("../graphics/hero3_m.png");
    height:12rem;
    width: 100%;
    background-position: right 0 bottom 35%;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;

}



.logo-max-size {
    max-height:10rem;
}

.info-icon {
    font-size: 3em;
    display: inline;
}

.fa-gradient {
    background: linear-gradient(90deg, #46BCFF, #46FEE7, #47FE7A );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.info-text {
    border: none;
}

/*// Extra small devices (portrait phones, less than 576px)*/
/*// No media query since this is the default in Bootstrap*/


/*// Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

    .landing_bg {
        height:26rem;
        margin-bottom: 8em;
    }

    .logo-max-size {
        max-height:15rem;
    }

    .subheading {
        padding-top:3rem;
    }

}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {

    .landing_bg {
        height:35rem;
        margin-bottom: 0;
    }

    .subheading {
        padding-top:3rem;
    }

    .logo-max-size {
        max-width:50%;
    }


    .subheading {
        padding-top:3rem;
    }

    .hero-img {background-image:linear-gradient(to right, white, 20%, transparent), url("../graphics/hero1_x768.png");
        height:16rem;
    }

    .hero-img2 {background-image:linear-gradient(to right, white, 20%, transparent), url("../graphics/hero2_x768.png");
        height:16rem;
    }

    .hero-img3 {background-image:linear-gradient(to right, white, 20%, transparent), url("../graphics/hero3_x768.png");
        height:16rem;
    }

}

/*// Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

    .landing_bg {
        height:20rem;
        margin-bottom: 1rem;
    }

    .logo-max-size {
        max-height:20rem;
        max-width: none;
    }

    .hero-img {background-image:linear-gradient(to right, white, 20%, transparent), url("../graphics/hero1_x1024.png");

    }

    .hero-img2 {background-image:linear-gradient(to right, white, 20%, transparent), url("../graphics/hero2_x1024.png");

    }

    .hero-img3 {background-image:linear-gradient(to right, white, 20%, transparent), url("../graphics/hero3_x1024.png");

    }

}

/*// Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

    .logo-max-size {
        max-width:70%;
    }

    .underherotext {
        height:20em;
    }

    .hero-img {background-image:linear-gradient(to right, white, 20%, transparent), url("../graphics/hero1_x1366.png");
        height:20rem;
        background-size: cover;
        position: relative;
    }

    .hero-img2 {background-image:linear-gradient(to right, white, 20%, transparent), url("../graphics/hero2_x1366.png");
        height:20rem;
        background-size: cover;
        position: relative;
    }

    .hero-img3 {background-image:linear-gradient(to right, white, 20%, transparent), url("../graphics/hero3_x1366.png");
        height:20rem;
        background-size: cover;
        position: relative;
    }

}

/*// BECAUSE!!!! */
@media (min-width: 1440px) {
/* hero image will overlap text if this isn't set (Only happens @ and above 1440p */
    .hero-img3 {
        margin-top: 5rem;
    }

}

@media (min-width: 1920px) {

    .landing_bg {
        height:26rem;
        margin-bottom: 6rem;
    }

    .logo-max-size {
        max-height:30rem;
        max-width: none;
    }

    .hero-img {background-image:linear-gradient(to right, white, 20%, transparent), url("../graphics/hero1_x1920.png");
        height:30rem;
    }

    .hero-img2 {background-image:linear-gradient(to right, white, 20%, transparent), url("../graphics/hero2_x1920.png");
        height:30rem;
    }

    .hero-img3 {background-image:linear-gradient(to right, white, 20%, transparent), url("../graphics/hero3_x1920.png");
        height:30rem;
    }

}

@media (min-width: 2000px) {

    .logo-max-size {
        max-width:52%;
    }



}