/* ----------------------------------------
    generics
----------------------------------------*/

.header-gradient {
    position: relative;
    z-index: 9998;
}

.header-gradient + div .container {
    position: relative;
    z-index: 9998;
}

#missionTarget {
    position: relative;
}

.gradient-wrapper {
    left: 0;
    width: 100%;
    position: absolute;
    background-image: url("https://redtoucan-admin.azurewebsites.net/media/l0eezt5n/gradient.png");
    background-size: cover;
}

/* ----------------------------------------
    phone media queries 
----------------------------------------*/

@media screen and (max-width: 390px) {
    .gradient-wrapper {
        height: 195%;
        top: -195%;
    }
}

@media screen and (min-width: 391px) and (max-width: 576px) {
    .header-gradient.header-content {
        margin-top: 85vw;
    }

    .header-gradient.header-content .container {
        margin-top: inherit;
    }

    .gradient-wrapper {
        height: 195%;
        top: -195%;
    }
}

@media screen and (min-width: 577px) and (max-width: 769px) {
    .header-gradient.header-content .container {
        margin-top: inherit;
    }

    .gradient-wrapper {
        height: 180%;
        top: -180%;    
    }
}

/* ----------------------------------------
    tablet media queries 
----------------------------------------*/

@media screen and (min-width: 769px) and (max-width: 992px) {
    .gradient-wrapper {
        height: 190%;
        top: -190%;
    }
}

@media screen and (max-width: 992px) {
    .footer-container {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ----------------------------------------
    laptop media queries 
----------------------------------------*/

@media screen and (min-width: 993px) and (max-width: 1200px) {
    .gradient-wrapper {
        height: 200%;
        top: -200%;
    }
}

/* ----------------------------------------
    desktop media queries 
----------------------------------------*/

@media screen and (min-width: 1201px) {
    .gradient-wrapper {
        height: 220%;
        top: -220%;
    }
}