@charset "UTF-8";
/* CSS Document */

/* X-Small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap */
.image-hero {
    background-image: url(../imgs/561593197.jpg);
    background-repeat: no-repeat;
    background-position: 50% 20%;
    background-size: cover;
    height: 70vh;
}
.text-container .content {
    color: #ffffff;
    line-height: 1.2;
    width: 100%;
}
.text-container-2 .content-2 {
    padding: 0px 20px 40px 20px;
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
.image-hero {
    background-image: url(../imgs/561593197.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    height: 100vh;
}
.text-container .content {
    position: absolute;
    bottom: 0;
    background-image: linear-gradient(0deg, rgba(240,240,240), rgba(240,240,240, 0.8) 60%, rgba(240,240,240,0));
    color: #ffffff;
    padding: 60px 20px 0px 20px;
    line-height: 1.2;
    width: 100%;
}
.text-container-2 {
    position: relative;
    margin: 0 auto;
}
.text-container-2 .content-2 {
    position: absolute;
    top: 0;
    background-image: linear-gradient(180deg, rgba(240,240,240), rgba(240,240,240, 0.88) 80%, rgba(240,240,240,0));
    color: #ffffff;
    padding: 0px 20px 40px 20px;
    line-height: 1.2;
    width: 100%;
}
}