@font-face {
    font-family: 'LFT Etica';
    src: url('../fonts/LFTEtica-Regular.eot');
    src: url('../fonts/LFTEtica-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/LFTEtica-Regular.woff2') format('woff2'),
        url('../fonts/LFTEtica-Regular.woff') format('woff'),
        url('../fonts/LFTEtica-Regular.ttf') format('truetype'),
        url('../fonts/LFTEtica-Regular.svg#LFTEtica-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'LFT Etica';
    src: url('../fonts/LFTEtica-SemiBold.eot');
    src: url('../fonts/LFTEtica-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/LFTEtica-SemiBold.woff2') format('woff2'),
        url('../fonts/LFTEtica-SemiBold.woff') format('woff'),
        url('../fonts/LFTEtica-SemiBold.ttf') format('truetype'),
        url('../fonts/LFTEtica-SemiBold.svg#LFTEtica-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'LFT Etica';
    src: url('../fonts/LFTEtica-Bold.eot');
    src: url('../fonts/LFTEtica-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/LFTEtica-Bold.woff2') format('woff2'),
        url('../fonts/LFTEtica-Bold.woff') format('woff'),
        url('../fonts/LFTEtica-Bold.ttf') format('truetype'),
        url('../fonts/LFTEtica-Bold.svg#LFTEtica-Bold') format('svg');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --primary-color: #a8191b;
    --secondary-color: #ffffff;
    --terciary-color: #ecbd2d;
}
.bg-color-secondary {
    background-color: var(--secondary-color);
}
.f-color-terciary {
    color: var(--terciary-color);
}
.fs-0 {
    font-size: 3.2rem!important;
}
.fs-1 {
    font-size: 3rem!important;
}
body {
    margin: 0;
    font-family: 'LFT Etica', Arial, sans-serif;
    background-color: var(--primary-color);
    color: var(--secondary-color);
}
.btn{
    width: 350px;
    font-size: 1.6rem;
    font-weight: bold;
}
.btn,
.btn:hover,
.btn:focus,
.btn:active,
.btn:visited {
    background-color: var(--secondary-color)!important;
    color: var(--primary-color)!important;
}
.slogan {
    max-width: 488px;
    width: 80%;
}
.logotipo{
    max-width: 330px;
    width: 55%;
}
.menu-footer{
    list-style-position: inside;
    color: var(--terciary-color);
    padding: 0;
}
.menu-footer li a{
    margin-left: -6px;
    color: var(--secondary-color);
    text-decoration: none;
}

@media screen and (min-width: 768px) {
    .bgImage {
        background-image: url('../images/bg.png');
        background-size: contain;
        background-position: left center;
        background-repeat: no-repeat;
         background-position-x: 0;
    }    
}

@media screen and (max-width: 1440px) {
    .bgImage{
        background-position-x: -70px;
    }
}

@media screen and (max-width: 1400px) {
    .fs-0 {
        font-size: 2.6rem!important;
    }
    .fs-1 {
        font-size: 2.4rem!important;
    }
    .fs-2{
        font-size: 1.6rem!important;
    }
    .btn{
        width: 290px;
        font-size: 1.3rem;
    }
    .slogan{
        width: 65%;
    }
    .logotipo{
        width: 45%;
    }
     .bgImage{
        background-position-x: 0;
    }
    
}

@media screen and (max-width: 768px) {
    .vh-100 {
        height: auto!important;
    }
    .fs-0 {
        font-size: 2.2rem!important;
    }
    .fs-1 {
        font-size: 2rem!important;
    }
    .fs-2{
        font-size: 1.4rem!important;
    }
    .btn{
        width: 260px;
        font-size: 0.9rem;
    }
    .slogan{
        width: 300px;
        max-width: 100%;
    }
    .logotipo{
        width: 250px;
        max-width: 100%;
    }
    .bgImage{
        background-position-x: 0;
    }
    
}