/* Styles for featured-content block */

.featured-content .btn-tertiary,
.featured-content .btn-secondary {
    font-size: 20px !important;
}

@media (min-width: 1200px) {
    .featured-content .text-wrap {
        padding-left: 124px;
    }
}

.featured-content {
    position: relative;
    z-index: 2;
}

.featured-content::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00419D;
    transform: skew(0deg, -2deg);
    transform-origin: top left;
    display: block;
}

.space-vector-down::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #E8EDF5;
    transform: skew(0deg, -2deg);
    transform-origin: top left;
    display: block;
    z-index: 0;
}

.space-vector-up::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f9f9f9;
    transform: skew(0deg, -2deg);
    transform-origin: top left;
    display: block;
    z-index: 0;
}

.banner-vector-mobile {
    position: absolute;
    width: 100%;
    bottom: -40px;
    z-index: 2;
}

.banner-vector-desktop {
    position: absolute;
    width: 100%;
    bottom: -25px;
    z-index: 2;
}

.banner-vector-up-mobile {
    position: absolute;
    width: 100%;
    top: 10px;
    z-index: 2;
}

.banner-vector-up-desktop {
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 2;
}

@media (min-width: 500px) {
    .banner-vector-mobile {
        bottom: -60px;
    }
    .banner-vector-up-mobile {
        top: 15px;
    }
}

@media (min-width: 576px) {
    .banner-vector-up-mobile {
        top: 0;
    }
}

@media (min-width: 768px) {
    .banner-vector-up-desktop {
        top: -5px;
    }
}

@media (min-width: 900px) {
    .banner-vector-up-desktop {
        top: -10px;
    }
    .banner-vector-desktop {
        bottom: -35px;
    }
}

@media (min-width: 1000px) {
    .banner-vector-up-desktop {
        top: -20px;
    }
    .banner-vector-desktop {
        bottom: -40px;
    }
}

@media (min-width: 1300px) {
    .banner-vector-up-desktop {
        top: -30px;
    }
    .banner-vector-desktop {
        bottom: -60px;
    }
}

@media (min-width: 1400px) {
    .banner-vector-up-desktop {
        top: -20px;
    }
} 

@media (min-width: 1500px) {
    .banner-vector-up-desktop {
        top: -28px;
    }
    .banner-vector-desktop {
        bottom: -70px;
    }
}

@media (min-width: 1800px) {
    .banner-vector-up-desktop {
        top: -50px;
    }
}