/* FAIXA TOP */
    .video-background {
        position: absolute;
        right:0;
        top:0;
        overflow: hidden;
        width: 100vw;
        height: 100vh;
        z-index:0;
    }
    .video-background iframe {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100vw;
      height: 100vh;
      transform: translate(-50%, -50%);
    }

    @media (min-aspect-ratio: 16/9) {
      .video-background iframe {
        /* height = 100 * (9 / 16) = 56.25 */
        height: 56.25vw;
      }
    }
    @media (max-aspect-ratio: 16/9) {
      .video-background iframe {
        /* width = 100 / (9 / 16) = 177.777777 */
        width: 177.78vh;
      }
    }

/* FAIXA SERVIÇO */
    .faixa-servico .card:hover{
    	box-shadow:0 0 1rem rgba(0,0,0,.15)!important;
    }

/* FAIXA QUEM SOMOS */
    .faixa-quemsomos .logosvg_frame{
        width:283.88px;
        height:131.72px;
        margin:0 auto;
        display:block;
    }
    .faixa-quemsomos .logosvg_farol{
        width:310px;
        height:214.31px;
        margin:0 auto;
        display:block;
    }

/* FAIXA PORTFÓLIO */
    .faixa-portfolio .swiper-slide{
        width:265px;
    }
    .faixa-portfolio .card-portfolio{
        max-width:265px;
    }
    .faixa-portfolio .card-portfolio .imagem-portfolio{
        width:265px;
        height:345px;
        object-fit:cover;
    }
    .faixa-portfolio .card-portfolio .background-imagem-portfolio{
        width:100%;
        height:345px;
        opacity:0;
        transition: 0.3s;
    }
    .faixa-portfolio .card-portfolio .background-imagem-portfolio p{
        opacity:0;
        transition: 0.3s;
    }
    .faixa-portfolio .card-portfolio .background-imagem-portfolio:hover{
        opacity:1;
        background:rgba(0,0,0,.4);
    }
    .faixa-portfolio .card-portfolio .background-imagem-portfolio:hover p{
        opacity:1;
    }

/* BENEFÍCIOS */
    .faixa-beneficios{
        padding-top:6rem !important;
        padding-bottom:6rem !important;
        background:url('imagens/bg-beneficios.png') center bottom no-repeat;
        background-size:cover;
    }
    .webp .faixa-beneficios{
        background:url('imagens/webp/bg-beneficios.webp') center bottom no-repeat;
    }
    .ingredients{
        position:relative;
    }
    .ingredients .center-image{
        width:400px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        z-index: 1;
        top: 30px;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
    }
    .ingredients .center-image.to-right {
        left: 61%;
    }
    .ingredients .center-image.to-left {
        left: 38%;
    }
    .ingredients .hashtag{
        font-size: 20px;
        margin-bottom: 5px;
    }
    .ingredients .title{
        font-size: 46px;
        font-weight: bold;
        line-height: 40px;
    }
    .ingredients .description{
        font-size: 16px;
        line-height: 20px;
        font-weight: 300;
        margin-bottom: 10px;
    }
    .ingredients .unico span{
        font-size: 18px;
        margin-bottom: 21px;
        vertical-align:middle;
    }
    .ingredients .disable-opacity {
        opacity: 0.2 !important;
    }
    .ingredients .left-image {
        position: absolute;
        left: 0;
        height:100%;
        display:none;
        z-index:9999;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
    }
    .ingredients .right-image {
        position: absolute;
        right: 0;
        height:100%;
        display:none;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
    }

    .left-ingredients{
        background:#FFF;
        color:var(--bs-primary);
        text-align:right;
        height:500px;
    }
    .left-ingredients.active {
        flex-basis: 25%;
    }
    .left-ingredients.expand {
        height: 800px;
    }
    .left-ingredients.active .content, .right-ingredients.active .content  {
        width: 500px;
    }
    .right-ingredients.expand .content  {
        width: 340px;
    }
    .right-ingredients.expand.active .content  {
        width: 500px;
    }
    .left-ingredients .content, .right-ingredients .content{
        position: absolute;
        right: 170px;
        width: 400px;
        text-align: right;
        margin-top: 35px;
        font-family: "Poppins", sans-serif;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
    }
    .left-ingredients hr, .right-ingredients hr{
        width: 200px;
        border: 1px solid var(--bs-primary);
        display: inline-block;
        margin-bottom: 5px;
        margin-top: 0px;
        opacity:1;
    }
    .left-ingredients .geral.active .unico .titulo {
        padding: 5px;
        background-color: var(--bs-primary);
        color: #FFF;
        border-radius: 5px;
        width:fit-content;
    }
    .geral .unico .titulo object{
        vertical-align:middle;
    }
    .left-ingredients .geral.active .unico .description, .right-ingredients .geral.active .unico .description {
        font-size: 14px;
        line-height: 16px;
        margin-bottom: 10px;
        margin-top: 5px;
        display:block !important;
    }

    .right-ingredients{
        background:var(--bs-primary);
        color:#FFF;
    }
    .right-ingredients.active {
        flex-basis: 25%;
    }
    .right-ingredients.expand {
        height: 800px;
    }
    .right-ingredients .content{
        right:0;
        left: 170px;
        text-align: left;
    }
    .right-ingredients hr{
        border: 1px solid #FFF;
    }
    .right-ingredients .geral.active .unico .titulo {
        padding: 5px;
        background-color:#FFF;
        color: var(--bs-primary);
        border-radius: 5px;
        width:fit-content;
    }

@media (max-width: 575.98px) {
    /* FAIXA TOPO */
        /*.faixa-topo::after{
            border-width: 30px 0 0 100vw;
        }*/

    /* BENEFÍCIOS */
        .faixa-beneficios{
            padding-top:6rem !important;
            padding-bottom:6rem !important;
            background:url('imagens/bg-beneficios-mobile.png') center no-repeat;
            background-size:cover;
        }
        .webp .faixa-beneficios{
            background:url('imagens/webp/bg-beneficios-mobile.webp') center no-repeat;
            background-size:cover;
        }
        .ingredients .hashtag{
            font-size:14px;
            margin-bottom:0;
        }
        .ingredients .title{
            font-size:22px;
            line-height:24px;
        }
        .ingredients .description{
            display:none;
        }
        .ingredients .center-image.to-left{
            left:11%;
        }
        .ingredients .center-image.to-right{
            left:87%;
        }
        .left-ingredients hr, .right-ingredients hr{
            width:125px;
            margin:0;
        }
        .left-ingredients.active .right-ingredients .content{
            display:none;
        }
        .left-ingredients .content, .right-ingredients .content{
            width:165px;
        }
        .left-ingredients, .right-ingredients{
            height:750px;
        }
        .left-ingredients.active, .right-ingredients.active{
            flex-basis:85%;
        }
        .left-ingredients.active .content, .right-ingredients.active .content{
            width:320px !important;
        }
        .right-ingredients.active .content{
            bottom: 10px;
        }
        .left-ingredients.expand{
            height:1200px;
        }
        .right-ingredients.expand{
            height:1200px;
        }
        .ingredients .left-image{
            left:-10px;
            height:450px;
        }
        .ingredients .right-image{
            right:-10px;
            height:450px;
        }
        .left-ingredients .content{
            bottom: 127px;
            right: 10px;
        }
        .right-ingredients .content{
            bottom: 75px;
            left: 10px;
        }
        .left-ingredients .btn{
            bottom:20px;
            right:10px;
        }
        .right-ingredients .btn{
            bottom:20px;
        }
        .left-ingredients.expand .btn, .right-ingredients.expand .btn{
            display:none !important;
        }
        .left-ingredients.active .icon_open{
            display:inline-block !important;
        }
        .left-ingredients.active .icon_close{
            display:none !important;
        }
}