@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;900&display=swap');
:root {
    --green-torpedo: #033d54;
    --avocado-torpedo: #5b7137;
    --orange-torpedo: #fb9809;
    --dark-torpedo: #4D4F56;
    --brown-torpedo: #3A0C13;
    --dark-blue: rgb(38, 42, 52);
    --light-torpedo: rgb(167, 167, 167);
}

.add-comment {
    background-color: var(--dark-blue);
}


/*Banner title*/

.bg-text-banner-2 {
    background-color: var(--brown-torpedo);
    padding: 20px 20px 10px 40px;
    height: auto;
}

.bg-text-banner {
    background-color: var(--brown-torpedo);
    padding: 20px 0px 20px 40px;
    height: auto;
}

.brown-triangle {
    background: linear-gradient(100deg, #3A0C13 50%, transparent 50%);
    width: 100px;
    height: auto;
    margin-left: -10px;
    z-index: 1000;
}

.brown-triangle-2 {
    background: linear-gradient(100deg, #3A0C13 50%, transparent 50%);
    width: 100px;
    height: auto;
}

.brown-triangle-3 {
    background: linear-gradient(100deg, #3A0C13 50%, transparent 50%);
    width: 50px;
    height: auto;
}

.text-banner-cont {
    width: 640px;
    height: auto;
}

.text-banner-cont-2 {
    width: 850px;
    height: auto;
}

.text-banner-cont-3 {
    width: 635px;
    height: auto;
}

@media screen and (max-width:991.98px) {
    .bg-text-banner {
        background-color: var(--brown-torpedo);
        padding: 20px 0px 25px 40px;
        height: auto;
    }
    .bg-text-banner-2 {
        background-color: var(--brown-torpedo);
        padding: 15px 20px 0px 40px;
        height: auto;
    }
    .add-comment {
        background-color: var(--dark-blue);
    }
    .brown-triangle {
        background: linear-gradient(100deg, #3A0C13 50%, transparent 50%);
        width: 100px;
        height: auto;
        margin-left: -10px;
    }
    .brown-triangle-2 {
        background: linear-gradient(95deg, #3A0C13 50%, transparent 50%);
        width: 100px;
        height: auto;
    }
    .text-banner-cont {
        width: 500px;
        height: auto;
    }
    .text-banner-cont-2 {
        width: 620px;
        height: auto;
    }
    .font-S-banner {
        font-size: 2.3em !important;
        font-weight: 900;
        line-height: 1em;
    }
    .font-S-banner-2 {
        font-size: 2.8em !important;
        font-weight: 900;
        line-height: 1em;
        position: relative;
        z-index: 3000;
        font-family: 'Lato', sans-serif;
    }
    .text-banner-cont-3 {
        width: 485px;
        height: auto;
    }
}

@media (max-width:767.98px) {
    .bg-text-banner {
        background-color: var(--brown-torpedo);
        padding: 15px 0px 22px 30px;
        height: auto;
    }
    .add-comment {
        background-color: var(--dark-blue);
    }
    .brown-triangle {
        background: linear-gradient(100deg, #3A0C13 50%, transparent 50%);
        width: 100px;
        height: auto;
        margin-left: -10px;
    }
    .brown-triangle-2 {
        background: linear-gradient(95deg, #3A0C13 50%, transparent 50%);
        width: 100px;
        height: auto;
    }
    .text-banner-cont {
        width: 370px;
        height: auto;
    }
    .text-banner-cont-2 {
        width: 480px;
        height: auto;
    }
    .font-S-banner {
        font-size: 1.7em !important;
        font-weight: 900;
        line-height: 1em;
    }
    .font-S-banner-2 {
        font-size: 2.4em !important;
        font-weight: 900;
        line-height: 1em;
        position: relative;
        z-index: 3000;
        font-family: 'Lato', sans-serif;
    }
    .font-S-ten {
        font-size: 1.7em !important;
        font-weight: 600;
        line-height: 1.3em;
    }
    .font-S-gracias-1 {
        font-size: 1.8em !important;
    }
    .font-S-gracias-2 {
        font-size: .8em !important;
    }
}

@media (max-width:575.98px) {
    .bg-text-banner {
        background-color: var(--brown-torpedo);
        padding: 10px 0px 10px 20px;
        height: auto;
    }
    .add-comment {
        background-color: var(--dark-blue);
    }
    .brown-triangle {
        background: linear-gradient(100deg, #3A0C13 50%, transparent 50%);
        width: 100px;
        height: auto;
        margin-left: -10px;
    }
    .brown-triangle-2 {
        background: linear-gradient(95deg, #3A0C13 50%, transparent 50%);
        width: 100px;
        height: auto;
    }
    .text-banner-cont {
        width: 275px;
        height: auto;
    }
    .text-banner-cont-2 {
        width: 360px;
        height: auto;
    }
    .font-S-banner {
        font-size: 1.2em !important;
        font-weight: 900;
        line-height: 1em;
    }
    .font-S-banner-2 {
        font-size: 1.9em !important;
        font-weight: 900;
        line-height: 1em;
        position: relative;
        z-index: 3000;
        font-family: 'Lato', sans-serif;
    }
    .font-S-ten {
        font-size: 1.5em !important;
        font-weight: 600;
        line-height: 1.3em;
    }
    .font-S-gracias-1 {
        font-size: 1.8em !important;
    }
    .font-S-gracias-2 {
        font-size: .8em !important;
    }
}

@media (max-width:400px) {
    .text-banner-cont {
        width: 245px;
        height: auto;
    }
    .font-S-banner {
        font-size: 1em !important;
        font-weight: 900;
    }
    .text-banner-cont-2 {
        width: 230px;
        height: auto;
    }
    .font-S-ten {
        font-size: 1.3em !important;
        font-weight: 600;
        line-height: 1.3em;
    }
    .font-S-banner-2 {
        font-size: 1.8em !important;
        font-weight: 900;
        line-height: 1em;
        position: relative;
        z-index: 3000;
        font-family: 'Lato', sans-serif;
    }
    .font-S-gracias-1 {
        font-size: 1.8em !important;
    }
    .font-S-gracias-2 {
        font-size: .8em !important;
    }
}


/**/

.font-weight-500 {
    font-weight: 500 !important;
}

.color-T-light {
    color: var(--light-torpedo);
}

.color-T-green {
    color: var(--green-torpedo);
}

.color-T-orange {
    color: var(--orange-torpedo);
}

.color-T-avocado {
    color: var(--avocado-torpedo);
}

.color-T-black {
    color: black !important;
}

.color-T-dark {
    color: var(--dark-torpedo)
}

.gray-light {
    color: #D6D6D7;
}

.font-S-zero {
    font-size: .5em;
    font-weight: 600;
}

.font-S-one {
    font-size: .9em;
    font-weight: 600;
}

.font-S-two {
    font-size: 1em;
    font-weight: 600;
}

.font-S-three {
    font-size: 1.1em;
    font-weight: 400;
}

.font-S-four {
    font-size: 1.2em;
    font-weight: 400;
}

.font-S-five {
    font-size: 1.3em;
    font-weight: 400;
}

.font-S-six {
    font-size: 1.4em;
    font-weight: 600;
    line-height: 1em;
}

.font-S-seven {
    font-size: 1.5em;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    line-height: 1em;
}

.font-S-eight {
    font-size: 2.1em;
    font-weight: 700;
}

.font-S-banner {
    font-size: 3.3em;
    font-weight: 900;
    line-height: 1em;
    position: relative;
    z-index: 3000;
    font-family: 'Lato', sans-serif;
}

.font-S-banner-2 {
    font-size: 3.3em;
    font-weight: 900;
    line-height: 1em;
    position: relative;
    z-index: 3000;
    font-family: 'Lato', sans-serif;
}

.font-S-ten {
    font-size: 1.9em;
    font-weight: 600;
}

.font-S-gracias-1 {
    font-size: 2.3em;
}

.font-S-gracias-2 {
    font-size: 1.2em !important;
}

.text-gray {
    color: rgb(74, 74, 74);
}

.text-light-gray {
    color: rgb(155, 155, 155);
}

.text-mini-gray {
    font-weight: 400;
    color: rgb(122, 122, 122);
}