﻿#sezione-banner-eventi{padding:10px 0 20px;background-color:#EDEDED}
.banner-container {display: block;width: 50%;}
.banner-container figure {margin: 15px 13px;background: #42b078;overflow: hidden}
.banner-container a {position: relative;display: block}
.banner-container figcaption {position: absolute;top: 0;bottom: 0;width: 100%}
.banner-container img {width: 103%;opacity: 0.8;transform: translate3d(-2%,0,0);transition: opacity 0.35s, transform 0.35s;will-change: opacity, transform}
.banner-container figcaption {padding: 10px;color: #fff;text-transform: uppercase;}
.banner-container span {font-weight: 800;}
.banner-container figcaption h2 {position: relative;overflow: hidden;word-spacing: -0.10em;font-size: 24px;text-shadow: 2px 2px black;margin: 0;padding: 10px 0;}
.banner-container figcaption h2::after {position: absolute;bottom: 0;left: 0;width: 100%;height: 3px;background: #fff;content: '';-webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s;-webkit-transform: translate3d(-100%,0,0);transform: translate3d(-100%,0,0);will-change:transform}
.banner-container figcaption p {text-shadow: 0px 0px 10px #000;font-size: 20px;margin: 0;padding: 0;transition: opacity 0.35s, transform 0.35s;opacity: 0;transform: translateX(100%);will-change: opacity, transform}
.banner-container figure:hover h2::after {transform: translate3d(0,0,0);}
.banner-container figure:hover p {transform: translate3d(0,0,0);opacity: 1}
.banner-container figure:hover img {opacity: .4;transform: translateX(0)}



@media(min-width:1336px){
    .banner-container figure {margin:15px 50px}
    .banner-container figcaption h2 {font-size:22px}
    .banner-container figcaption p {font-size:20px}    
}



@media(min-width:1680px){
    .banner-container figure {margin:15px 100px}   
}


@media(min-width:1820px){
    .banner-container{width:25%}
    .banner-container figure {margin:15px 13px}
    .banner-container figcaption h2 {font-size:18px}
    .banner-container figcaption p {font-size:16px}
}

@media(min-width:1920px){
    .banner-container figcaption h2 {font-size:20px}
}