@font-face {
    font-family: "Montserrat";
    src: url("/assets/fonts/Montserrat-Thin.ttf");
    font-weight: 100;
}
@font-face {
    font-family: "Montserrat";
    src: url("/assets/fonts/Montserrat-ExtraLight.ttf");
    font-weight: 200;
}
@font-face {
    font-family: "Montserrat";
    src: url("/assets/fonts/Montserrat-Light.ttf");
    font-weight: 300;
}
@font-face {
    font-family: "Montserrat-Regular";
    src: url("/assets/fonts/Montserrat.ttf");
    font-weight: 400
}
@font-face {
    font-family: "Montserrat";
    src: url("/assets/fonts/Montserrat-Medium.ttf");
    font-weight: 500;
}
@font-face {
    font-family: "Montserrat";
    src: url("/assets/fonts/Montserrat-SemiBold.ttf");
    font-weight: 600;
}
@font-face {
    font-family: "Montserrat";
    src: url("/assets/fonts/Montserrat-Bold.ttf");
    font-weight: 700;
}
@font-face {
    font-family: "Montserrat";
    src: url("/assets/fonts/Montserrat-ExtraBold.ttf");
    font-weight: 800;
}
@font-face {
    font-family: "Montserrat";
    src: url("/assets/fonts/Montserrat-Black.ttf");
    font-weight: 900;
}

* {
    font-size: 100%;
    font-family: 'Montserrat', sans-serif;
    }

.bg-main {
    background-image: linear-gradient(to bottom, transparent, white), url("/img/bg.jpg");
    background-repeat: no-repeat;
    background-size: contain;
    background-attachment: fixed;
    background-position: center top;
}

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

.text-red {
    color: #a71c20
}
.bg-red {
    background: #a71c20;
}
.btn-red {
    background: linear-gradient(#de0027, #ac012a);
    color: white;
    font-size: 0.9em;
}
.btn-red:hover {
    color: white;
    opacity: 90%;
}

.ts-white {
    text-shadow: 0px 0px 1em white, 0 0 5em white, 0 0 5em white;
}

/* Media Queries */
@media screen and (min-width: 1920px) {
    .bg-main {
        background-size: cover;
    }
}
@media screen and (max-width: 992px) {
    .bg-main {
        background-image: linear-gradient(to bottom, transparent, white 75%), url("/img/bg.jpg");
    }
}
@media screen and (max-width: 768px) {
    .bg-main {
        background-image: linear-gradient(to bottom, transparent, white 50%), url("/img/bg.jpg");
    }
}
@media screen and (max-width: 567px) {
    .bg-main {
        background-image: linear-gradient(to bottom, transparent, white 25%), url("/img/bg.jpg");
    }
}