.banner{
    position: relative;
}

.banner .banner-bg-preto{
    background-color: #171717;
}

.banner .banner-bg-cinsa{
    background-color: #2b2b2b;
}

.banner .banner-bg-amarelo{
    background-color: #edc43f;
}

.banner .banner-bg-azul-claro{
    background-color: #00b3e2;
}

.banner .banner-bg-azul-escuro{
    background-color: #00567b;
}

.banner .bannerTop-heigth{
    height: 144px;
    position: relative;
}

.banner .bannerTop-btn-control{
    display: inline-block;
    text-decoration: none;
    line-height: 0;
}

.banner .bannerTop-btn-control *{
    fill: #fff;
}

.banner.banner-layout-t2 .bannerTop-heigth{
    height: 96px;
}

.banner .bannerTop-btn-center{
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}


.banner .banner-fundo-over{
    overflow: hidden;
}

.banner .banner-fundo-item{
    position: relative;
    padding-top: 433px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

.banner.banner-layout-t2 .banner-fundo-item{
    padding-top: 0;
    min-height: 433px;
}



.banner .banner-fundo-texto{
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);

    color: rgb(255, 255, 255);
    line-height: 1.202;
    font-weight: 700;
    font-size: 145px;
    text-align: center;
}


.banner.banner-layout-t2 .banner-fundo-texto{
    font-size: 69px;
    color: rgb(255, 255, 255);
    font-weight: 800;
    line-height: 1;
    text-align: left;
}





.banner .bannerFront{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 100;
}

.banner.banner-layout-t2 .bannerFront{
    top: -15px;
}

.banner .banner-frente-over{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.banner .banner-frente{
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.banner .banner-frente .slick-list,
.banner .banner-frente .slick-list .slick-track{
    height: 100%;
}

.banner .banner-frente-item{
    height: 100%;
    position: relative;
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain;

    /*transition: opacity ease-in-out 333ms;*/
    transition: transform ease-in-out 0ms;
    transform: translateX(-20%);
}

.banner .slick-active .banner-frente-item{
    transition-duration: 999ms;
    transform: translateX(0);
}

.banner .slick-slide-out .banner-frente-item{
    transition-duration: 999ms;
    transform: translateX(20%);
}







.banner.banner-layout-t3 .banner-fundo-item{
    min-height: 400px;
    padding-top: 0;
    height: 100vh;
}

.banner.banner-layout-t3 .banner-arrows{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.banner.banner-layout-t3 .banner-arrows > div{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
}

.banner.banner-layout-t3 .banner-arrows-left{
    pointer-events: all;
    float: left;
}

.banner.banner-layout-t3 .banner-arrows-rigth{
    pointer-events: all;
    float: right;
}


.banner.banner-layout-t3 .banner-fundo-texto{
    transform: translateX(100px);
    transition: all ease-in-out 333ms;
    transition-delay: 1100ms;
    opacity: 0;
}

.banner.banner-layout-t3 .slick-slide.slick-current.slick-active .banner-fundo-texto{
    transform: translateX(0);
    opacity: 1;
}