:root {
    --bg-width: 1920px;
    --bg-height: 570px;
    --width: 1170px;
    --height: 570px;
}
.banners, .banners > ul.imagens-banner {
    width: 100%;
    overflow: hidden;
    position:relative;
}

.banners {
    box-shadow: 0px 5px 15px -2px rgb(0 0 0 / 30%);
    line-height: 0px;
    max-width: var(--bg-width);
    margin: auto;
    /*border-radius: 30px;*/
    /*padding: 20px;*/
    /*background-color: rgba(0,0,0,0.2);*/
    /*background-color: rgba(255,255,255,0.08);*/
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.banners > ul.imagens-banner {
    display: -webkit-inline-box;
    padding:0;
    margin:0;
    margin: auto;
    list-style:none;
    /*border-radius: 30px;*/
    box-shadow: 0px 5px 15px -2px rgb(0 0 0 / 30%);
}

.banners > ul.imagens-banner li {
    width:100%;
    max-height:var(--height);
    max-width: var(--bg-width);
    background-size: cover;
    text-align:center;
    overflow:hidden;
}

.banners > ul.imagens-banner li img {
    width: 100%;
    max-width: var(--width);
    height: 100%;
    max-height: var(--height);
    margin:auto;
}
.zoom-banners {
    position: fixed;
    width: 100%;
    background-color: #fff;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 99999;
    box-shadow: inherit !important;
}
.zoom-banners > ul.imagens-banner{
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.vertical-align {
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.icon-expand-banner {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 999999;
    border-radius: 100%;
    background-color: rgba(0,0,0,0.3);
    padding: 15px;
    color: #fff;
    font-size: 20px;
    /*display:none;*/
}
.icon-expand-banner:hover {
    background-color: rgba(0,0,0,0.2);
    cursor:pointer;
}
.nav-banners {
    position: absolute;
    left: 20px;
    right: 20px;
    z-index: 9999999;
    display: inline-table;
    list-style-type: none;
    margin: 10px auto;
    padding: 0px;
    z-index: 10;
    bottom: 20px;
}
.nav-banners li {
    background-color: rgba(0,0,0,0.3);
    border-radius: 30px;
    padding: 10px;
    margin:2px;
    float:left;
    position:relative;
}
.nav-banners li span {
    position: absolute;
    font-size: 10px;
    top: 10px;
    left: 0px;
    font-weight: bold;
    color: #ffffff;
    width: 100%;
    text-align: center;
}

.nav-banners li:hover {
    background-color: rgba(0,0,0,0.2);
    cursor: pointer;
}
/*.nav-previous, .nav-next{
    display:none;
}*/
.zoom-banners > .nav-previous, .zoom-banners > .nav-next, .nav-previous, .nav-next {
    position: absolute;
    font-size: 60px;
    padding: 20px;
    display: block;
    color:rgba(0,0,0,0.3);
}
.zoom-banners > .nav-previous:hover, .zoom-banners > .nav-next:hover, .nav-previous:hover, .nav-next:hover {
    color: rgba(0,0,0,0.2);
    cursor:pointer;
}
.zoom-banners > .nav-next, .nav-next {
    right: 20px;
}
.zoom-banners .nav-banners {
    display: inline-table !important;
    bottom: 20px;
}
/*.padding-principal{
    padding:0px 20px;
    box-sizing:border-box;
}*/
.padding-10 {
    padding: 10px;
    box-sizing: border-box;
}
.padding-20 {
    padding: 20px;
    box-sizing: border-box;
}
.padding-30 {
    padding: 30px;
    box-sizing: border-box;
}
.padding-40 {
    padding: 40px;
    box-sizing:border-box;
}
.display-none{
    display:none;
}
.display-block {
    display: block;
}
@media screen and (max-width:1002px) {
    /*.padding-principal {
        padding: 0px 20px !important;
    }*/
    .banners {
        padding:10px !important;
    }

    .nav-banners{
        /*display:none !important;*/
    }
    .nav-previous, .nav-next{
        font-size:40px !important;
    }
    .icon-expand-banner {
        padding: 5px !important;
        font-size: 15px !important;
    }
    .zoom-banners > .nav-previous, .nav-previous {
        padding: 0px 10px !important;
    }
    .zoom-banners > .nav-next, .nav-next {
        padding: 0px !important;
    }

}

@media screen and (max-width: 767px){
    /*.icon-expand-banner{
        display:block !important;
    }*/
    .nav-banners, .nav-previous, .nav-next, .icon-expand-banner {
        display: none !important;
    }

    .banners{
        padding:0px !important;
    }
    .banners > ul.imagens-banner{
        border-radius:0px !important;
    }

}