@font-face {
    font-family: 'OfficinaSansITC';
    src: url('../fonts/OfficinaSansITC-Medium.eot');
    src: url('../fonts/OfficinaSansITC-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/OfficinaSansITC-Medium.woff2') format('woff2'),
        url('../fonts/OfficinaSansITC-Medium.woff') format('woff'),
        url('../fonts/OfficinaSansITC-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Urbane Rounded';
    src: url('../fonts/UrbaneRounded-Bold.eot');
    src: url('../fonts/UrbaneRounded-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/UrbaneRounded-Bold.woff2') format('woff2'),
        url('../fonts/UrbaneRounded-Bold.woff') format('woff'),
        url('../fonts/UrbaneRounded-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Urbane Rounded';
    src: url('../fonts/UrbaneRounded-DemiBold.eot');
    src: url('../fonts/UrbaneRounded-DemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/UrbaneRounded-DemiBold.woff2') format('woff2'),
        url('../fonts/UrbaneRounded-DemiBold.woff') format('woff'),
        url('../fonts/UrbaneRounded-DemiBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
:root{
    --light-color:#fdffff;
    --dark-color: #000000;
    --primary-color:#23518f;
}
.color-primary{
    color: var(--primary-color);
}
.color-light{
    color: var(--light-color);
}
.border.color-primary{
    border-color: var(--primary-color)!important;
}
.font-secondary{
    font-family: 'Urbane Rounded', sans-serif;
}
.container-fluid{
    padding: 0 15.625rem !important;
}
html{
    font-size: 17px;
}
body{
    font-family: 'OfficinaSansITC', sans-serif;
    color: var(--light-color);
    font-weight: normal;
    background-color: #4397ce;
    line-height: 1;
}
ul{
    padding-left: 1rem;
}
ul li{
    margin-bottom: .75rem;
}
.icone-lampada{
    width: 4.6875rem;
}
.icone-chapeu{
    top: -0.625rem;
    right: 0;
    width: 100%;
    max-width: 4.375rem;
}
.h90-vh{
    height: 93vh;
}
.h10-vh{
    height: 7vh;
}
.bg-degrade{
    background: #B9D8ED;
    background: linear-gradient(180deg, rgba(185, 216, 237, 1) 0%, #4397ce 25%);
}
.decal-degrade{
    background: #21377A;
    background: linear-gradient(180deg, rgba(33, 55, 122, 1) 0%, rgba(15, 28, 79, 1) 100%);
}
.barra div{
    display: block;
    /* width: 35px;
    height: 2px; */
    width: 2.1875rem;
    height: 0.125rem;
    background: #fff;
}
.barra div:nth-child(10n+1) {
    width: 3.125rem;
}
.barra div:nth-child(10n+6  ) {
    width: 3.4375rem;
}
.btn-custom{
    width: 22rem;
    height: 5.5rem;
}
.btn-laranja{
    background-image: url('../images/btn-laranja.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.btn-amarelo{
    background-image: url('../images/btn-amarelo.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.btn-azul{
    background-image: url('../images/btn-azul.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.btn-roxo{
    background-image: url('../images/btn-roxo.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.cta__button{
    text-align: center;
}

@media screen and (max-width: 1680px) {
    .container-fluid{
        padding: 0 9rem !important;
    }
}

@media screen and (max-width: 1600px) {
    html{
        font-size: 15px;
    }  
}

@media screen and (max-width:1440px) {
    html{
        font-size: 14px;
    }
    .icone-chapeu{
        top: -0.625rem;
        right: 2rem;
        width: 100%;
        max-width: 4rem;
    }
    .img-fluid{
        max-width: 90%;
        height: auto;
    }
}

@media screen and (max-width:1366px) {
    html{
        font-size: 12px;
    }
    .icone-chapeu{
        top: -0.625rem;
        right: 4rem;
        width: 100%;
        max-width: 4rem;
    }
}
@media screen and (max-width:1199px) {
    html{
        font-size: 12px;
    }
}
@media screen and (max-width:991px) {
    html{
        font-size: 8px;
    }
    .h90-vh{
        height: auto!important;
        min-height: 90vh;
    }
    .h10-vh{
        height: auto!important;
    }
    .fs-1 {
        font-size: calc(2.375rem + 1.5vw) !important;
    }
    .fs-2 {
        font-size: calc(2.45rem + .9vw) !important;
    }
    .fs-3 {
        font-size: calc(1.8rem + .6vw) !important;
    }
    .fs-5 {
        font-size: 1.7rem !important;
    }
    .btn-custom {
        width: 30rem;
        height: 7.5rem;
    }
    .img-fluid {
        max-width: 70%;
        height: auto;
    }

    .btn-custom .fs-6{
        font-size: 1.4rem !important;
    }
    ul{
        list-style-position: inside;
    }
    ul li br{
        display: none;
    }
    .mobile-width{
        max-width: 80%;
        margin: 0 auto;
    }
    .container-fluid{
        padding: 0 2% !important;
    }
    .info{
        text-align: right;
        padding-right: 2rem;
    }
    .icone-chapeu {
        top: 2rem;
        right: 1rem;
        width: 100%;
        max-width: 5rem;
    }
    .icone-lampada{
        position: absolute;
        top: 10rem;
        left: 18px;
    }
    .barra {
        left: 5rem;
     }
    .barra div:nth-child(10n+1) {
        width: 4.125rem;
    }
    .barra div {
        display: block;
        width: 2.1875rem;
        height: 0.25rem;
        background: #fff;
    }
}
@media (min-width: 1200px) {
    .fs-1 {
        font-size: 2.3rem !important;
    }
    .fs-3 {
        font-size: 1.7rem !important;
    }
}