/* variaveis */

:root{
    --blockWidth: 0px;
    --blockWidthMult: 0px;
    --colorCustom: white;
}

/* banner simples */

.banner-block div {
    list-style: none;
}

.banner-block div, .banner-mult div{
    width: 100%;
}

.banner-block div a img{
    object-fit: cover;
    object-position: 50% 50% !important;
    width: 100%;
    max-height: 100vh;
    position: relative;
    z-index: 1;
}

.bannermapped img {
  width:100%;
}

.banner-block div a video, .videoWrapper {
/* banner video*/
    position: relative;
    overflow: hidden;
    width: 100%;
    max-height: 100vh;
    padding-bottom: 56.25%;
}

.banner-video video{
    object-fit: cover;
    object-position: 50% 50% !important;
    position: relative;
    width: 100%;
    max-height: 100vh;
}

.banner-video .videoWrapper iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* banner slider */

.banner-mult{
    width: 100%;
    overflow: hidden;
    position: relative;
}

.slider{
    width: var(--blockWidthMult) !important;
    display: flex;
}

.slide{
    display: flex;
    position: relative;
    top: 0;
}

.slide a img{
    object-fit: cover;
    width: var(--blockWidth, 100%);
    max-height: 100vh;
}

.controls{
    z-index: 99;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.prev i, .next i{
    cursor: pointer;
    opacity: 55%;
    color: var(--colorCustom) !important;
    font-size: 30px;
}

.prev i:hover, .next i:hover{
    opacity: 100%;
}

.prev{
    left: 5%;
}

.next{
    right:5%;
}

/* banner mosaico */

.banner-mosaic{
    width: 100%;
}

.banner-mosaic .images a img{
    width: 100%;
    height: 100%;
    vertical-align: middle;
    object-fit: cover;
}

.var1{
    display: flex;
}

.var1 .images{
    margin-right: 1%;
}

.var1 .images:last-child{
    margin-right: 0px;
}

.grid{
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 1fr 1fr;
    grid-gap: 1%;
}