.avantage { background-image: url(/images/interface/slide5.jpg); background-size: cover; padding: 70px 0px; position: relative; text-align: center; &:after { background-color: rgba(0, 0, 0, 0.7); content: ''; display: block; position: absolute; z-index: 1; width: 100%; left: 0; top: 0; bottom: 0; } .banner { position: relative; z-index: 3; } h4 { font-size: 40px; color: #fff; font-family: 'Fugaz One', cursive !important; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 60px; text-align: center; margin-top: 0px; } } .numbers{ background-color: #cc4b14; padding: 30px 0px; } .center_programme { font-size: 0; max-width: 1140px; margin: auto; .primes_left { display: inline-block; width: 70%; vertical-align: middle; .bloc_primes_img { width: 100%; display: block; margin-bottom: 30px; .primes_img { display: inline-block; vertical-align: bottom; } .primes_legende_img { display: inline-block; vertical-align: bottom; font-size: 16px; padding-left: 10px; font-size: 20px; font-style: italic; } } p { font-size: 16px; margin-bottom: 20px; } p.chevrons { &:before { content: '>'; color: #cc4b14; font-weight: 600; padding-right: 6px; } } span { font-size: 26px; font-style: italic; color: #e40011; font-weight: 800; text-transform: uppercase; } .soulign { color: #000; text-decoration: underline !important; } } .primes_right { display: inline-block; width: 30%; vertical-align: middle; a { font-family: 'Fugaz One', cursive !important; background-color: #ffe500; font-size: 20px; color: #000; text-transform: uppercase; letter-spacing: 1px; font-size: 22px; padding: 5px 15px; display: inline-block; margin-top: 10px; } } } .banner { max-width: 1140px; margin: auto; .desc_actu { text-align: center; width: 100%; box-sizing: border-box; } } .row_avantage { font-size: 0; margin-left: -1.5%; margin-right: -1.5%; } .block_avantage { &:nth-child(1) { .container_picto { width: 70px; } &:hover { .container_picto { width: 90px; height: 120px; } } background-image: url(/images/interface/background_bloc_left_transp.png); } &:nth-child(2) { .container_picto { width: 88px; } &:hover { .container_picto { width: 112px; height: 120px; } } background-image: url(/images/interface/background_bloc_left2_transp.png); } &:nth-child(3) { .container_picto { width: 73px; } &:hover { .container_picto { width: 94px; height: 120px; } } background-image: url(/images/interface/background_bloc_right2_transp.png); } &:last-child { .container_picto { width: 149px; } &:hover { .container_picto { width: 191px; height: 120px; } } } vertical-align: top; display: inline-block; width: 22%; background-color: #fff; margin: 0 1.5%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; border-radius: 10px; background-repeat: no-repeat; background-size: cover; text-align: center; padding: 10px; padding-bottom: 20px; min-height: 330px; &:hover { background-color: #000; h5 { color: #cd4a12; font-size: 18px; } .img_av_hover { opacity: 1; } .img_av { opacity: 0; } img { max-height: 90px; position: absolute; top: 0px; left: 0; } p { color: #fff; font-size: 20px !important; } } &:nth-child(4) { background-image: url(/images/interface/background_bloc_right_transp.png); } img { max-height: 70px; margin-top: 30px; -webkit-transition: max-height 0.3s; -moz-transition: max-height 0.3s; -ms-transition: max-height 0.3s; -o-transition: max-height 0.3s; transition: max-height 0.3s; left: 0; position: absolute; } h5 { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; font-size: 25px; font-weight: 500; font-family: 'Russo One', sans-serif !important; margin-top: 20px; margin-bottom: 20px; } p { font-size: 18px !important; line-height: 20px !important; color: #CC4B14; font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } } @media screen and (max-width: 950px) { .avantage { h4 { font-size: 30px; } } .row_avantage { margin: 0; padding: 20px; } .block_avantage { width: 47%; max-width: 350px; margin-bottom: 30px; } } @media screen and (max-width: 540px) { .block_avantage { width: 100%; max-width: 350px; margin-bottom: 30px; } .numbers { padding: 30px 20px; } }