#azienda { position: relative; margin-top: calc(4vh + 80px); width: 100%; height: auto; overflow: hidden;min-height: 150vh; } #azienda .subMenu { position: fixed; top: 80px; width: 100%; height: 4vh; overflow: hidden; z-index: 39; } #azienda .subMenu span { position: relative; width: 20%; float: left; height: 100%; background-color: #567e97; text-align: center; line-height: 4vh; color: #fff; font-family: 'Graphik-Regular'; font-size: 13px; cursor: pointer; border-right: 2px solid #fff; box-sizing: border-box; -webkit-transition: background-color .35s ease-in-out; -moz-transition: background-color .35s ease-in-out; -o-transition: background-color .35s ease-in-out; transition: background-color .35s ease-in-out; } #azienda .subMenu span:last-child { border-right: none; } #azienda .subMenu span:hover { background-color: #c22d31; -webkit-transition: background-color .35s ease-in-out; -moz-transition: background-color .35s ease-in-out; -o-transition: background-color .35s ease-in-out; transition: background-color .35s ease-in-out; } #azienda .subMenu span.active { background-color: #c22d31; -webkit-transition: background-color .35s ease-in-out; -moz-transition: background-color .35s ease-in-out; -o-transition: background-color .35s ease-in-out; transition: background-color .35s ease-in-out; } #azienda .sectionOne { position: relative; width: 100%; height: auto; background-color: #163446; overflow: hidden; } #azienda .sectionOne .row-1 .image img { position: relative; width: 100%; height: auto; display: block; } #azienda .sectionOne .row-2 .image img { position: relative; width: 100%; height: auto; display: block; } #azienda .sectionTwo { position: relative; width: 100%; height: auto; background-color: #2d3a3e; overflow: hidden; } #azienda .sectionTwo .item.giorgio .title .center { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } #azienda .sectionTwo .item.giorgio .title .center h2 span { color: #4f9bb1; font-family: 'Graphik-Medium'; font-size: 24px; } #azienda .sectionTwo .item.giorgio .title .center h2 em { color: #fff; font-family: 'Graphik-Medium'; font-size: 24px; font-style: normal; } #azienda .sectionTwo .item.giorgio .image img { width: 100%; height: auto; display: block; } #azienda .sectionTwo .item.giorgio .text .center p span { color: #fff; font-family: 'Graphik-Medium'; font-size: 15px; } #azienda .sectionTwo .item.andrea .image img { width: 100%; height: auto; display: block; } #azienda .sectionTwo .item.slider .title .content-title{position: absolute; top:50%; -webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);} #azienda .sectionTwo .item.slider .title .content-title .center { position: relative; width: 80%;} #azienda .sectionTwo .item.slider .title .content-title .center p span { color: #fff; font-family: 'Graphik-Medium'; font-size: 15px; line-height: 20px; } #azienda .sectionTwo .item.slider .title .content-title .sign img{position:relative;width: 45%; margin:40px auto 0 auto; display: block; } #azienda .sectionTwo .item.slider .slider img { position: absolute; width: 100%; height: auto; top: 0; left: 0; z-index: 9; } #azienda .sectionTwo .item.slider .slider img:first-child { position: relative; width: 100%; height: auto; display: block; z-index: 10; } #azienda .sectionTwo .item.slider .text .content-text{position: absolute; width: 30%; height: auto; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} #azienda .sectionTwo .item.slider .text .content-text h3 span{color: #fff; font-family: 'Graphik-Light';font-size: 35px;line-height: 45px;} #azienda .sectionThree .column.last img { position: relative; width: 30%; margin: 10vh 30%; height: auto; display: block; } #azienda .sectionThree .column.last p { position: absolute; top: calc(100% - 35vh); left: 50%; width: 35%; color: #fff; font-family: 'Graphik-Regular'; font-size: 15px; line-height: 20px; text-align: left; -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); } #azienda .sectionFour .item { position: relative; width: 100%; height: auto; padding: 5vh 0; text-align: center; } #azienda .sectionFour .item:first-child { background-color: #4e656c; } #azienda .sectionFour .item:nth-child(2) { background-color: #57747d; } #azienda .sectionFour .item:nth-child(3) { background-color: #3f555c; } #azienda .sectionFour .item:last-child{ background-color: #25414a; } #azienda .sectionFour .item img { width: 5%; height: auto; } #azienda .sectionFour .item h2 { color: #4f9bb1; font-family: 'Graphik-Light'; font-size: 30px; line-height: 40px; font-weight: normal; margin: 0 0 5vh 0; } #azienda .sectionFour .item p { color: #fff; font-family: 'Graphik-Regular'; font-size: 15px; line-height: 20px; } #azienda .sectionFour .item p span { color: #fff; font-family: 'Graphik-Medium'; font-size: 15px; } #azienda .sectionFive { position: relative; width: 100%; height: auto; overflow: hidden; } #azienda .sectionFive .text p { position: relative; width: 50%; margin: 0 25%; text-align: center; color: #163446; font-family: 'Graphik-Regular'; font-size: 15px; line-height: 20px; font-style: normal; } #azienda .sectionFive .text p span { color: #163446; font-family: 'Graphik-Medium'; font-size: 15px; line-height: 20px; font-style: normal; } #azienda .sectionFive .text2 p { position: relative; width: 50%; margin: 0 25%; text-align: center; color: #163446; font-family: 'Graphik-Regular'; font-size: 15px; line-height: 20px; font-style: normal; } #azienda .sectionFive .text2 p span { color: #163446; font-family: 'Graphik-Medium'; font-size: 15px; line-height: 20px; font-style: normal; } #azienda .wrap-slide-GM{position: absolute;left: 0;height: 100%;width: 100%;overflow: hidden;} #azienda .wrap-slide-GM .slide { position: relative; width: 36vw; height: 100%; } #azienda .lolloSlider { height: 53vh !important; } #azienda .arrow-GM{position: absolute; top:50%; z-index: 11; height: 56px; width: 56px;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);} #azienda .arrow-GM.next-GM { right: calc(35% - 70px) !important; } #azienda .arrow-GM .arrow{width: 100%; height: 100%;} #azienda { position: relative; margin-top: calc(4vh + 80px); width: 100%; height: auto; overflow: hidden;min-height: 150vh; } #azienda .subMenu { position: fixed; top: 80px; width: 100%; height: 4vh; overflow: hidden; z-index: 39; } #azienda .subMenu span { position: relative; width: 20%; float: left; height: 100%; background-color: #567e97; text-align: center; line-height: 4vh; color: #fff; font-family: 'Graphik-Regular'; font-size: 13px; cursor: pointer; border-right: 2px solid #fff; box-sizing: border-box; -webkit-transition: background-color .35s ease-in-out; -moz-transition: background-color .35s ease-in-out; -o-transition: background-color .35s ease-in-out; transition: background-color .35s ease-in-out; } #azienda .subMenu span:last-child { border-right: none; } #azienda .subMenu span:hover { background-color: #c22d31; -webkit-transition: background-color .35s ease-in-out; -moz-transition: background-color .35s ease-in-out; -o-transition: background-color .35s ease-in-out; transition: background-color .35s ease-in-out; } #azienda .subMenu span.active { background-color: #c22d31; -webkit-transition: background-color .35s ease-in-out; -moz-transition: background-color .35s ease-in-out; -o-transition: background-color .35s ease-in-out; transition: background-color .35s ease-in-out; } /*FORM FRANCHISING*/ body.page-id-169 #freddo .wpcf7-response-output{ color: white; } body.page-id-169 #freddo { position: relative; width: 100%; height: auto; overflow: hidden; background-color: #25414a; padding: 10vh 0vw; } body.page-id-169 #freddo #wrap-freddo{position: relative; width: 80vw; margin: 0 auto;} body.page-id-169 #freddo .wrap-fade-in{position: relative; overflow: hidden;width: 100%;} body.page-id-169 #freddo .wrap-fade-in.wrap-left{float:left;width: 45%;} body.page-id-169 #freddo .wrap-fade-in.wrap-right{float:right;width: 45%;} body.page-id-169 #freddo .wrap-fade-in h2 {position:relative;color: #4f9bb1; font-family: 'Graphik-Regular'; font-size: 35px; line-height: 40px; font-style: normal; text-align: center; margin-bottom: 1vh;top:120px; } body.page-id-169 #freddo .wrap-freddo__top p {position:relative;color: #fff; font-family: 'Graphik-Regular'; font-size: 22px; font-style: normal; text-align: center; margin-bottom: 5vh;top: 120px; } body.page-id-169 #freddo .wrap-fade-in span{ font-size: 16px; color: white; } body.page-id-169 #freddo .wrap-fade-in .stagger-left-form-franchising{position:relative;top:150px;} body.page-id-169 #freddo .wrap-fade-in .stagger-left-form-franchising p.informativa{font-size: 14px; color:#fff;} body.page-id-169 #freddo .wrap-fade-in .stagger-left-form-franchising p.informativa a{font-family: 'Graphik-Medium'; color:#fff;} body.page-id-169 #freddo .wrap-fade-in .stagger-right-form-franchising{position:relative;top:150px;} body.page-id-169 #freddo #wpcf7-f218-o1 { position: relative; width: 100%; clear: both; display: block; } body.page-id-169 #freddo .formCont { position: relative; width: 100%; clear: both; display: block; overflow: hidden; } body.page-id-169 #freddo .formCont .column { position: relative; width: 50%; float: left; } body.page-id-169 #freddo .formCont .column.first { padding-right: 5%;} body.page-id-169 #freddo .formCont .column.last { padding-left: 5%;} body.page-id-169 #freddo .formCont .column h3 { color: #4f9bb1; font-family: 'Graphik-Regular'; font-size: 20px; line-height: 30px; font-style: normal; margin-bottom: 10px;} body.page-id-169 #freddo .formCont .column input { border: none; border-bottom: 1px solid #fff; color: #fff; background: transparent; position: relative; display: block; width: 100%; font-size: 28px; margin-bottom: 50px;font-family: 'Graphik-Light'; font-weight: normal;} body.page-id-169 #freddo .formCont .column .container-nota-informativa-franchising .wpcf7-list-item{height: 20px;margin-top: 15px; margin-bottom: 20px;} body.page-id-169 #freddo .formCont .column .container-nota-informativa-franchising .wpcf7-list-item input{position: relative; width: 20px; float:left; margin-bottom: 0px; } body.page-id-169 #freddo .formCont .column .container-nota-informativa-franchising .wpcf7-list-item span{position: relative; width: calc(100% - 25px); float:left; margin-left: 5px; color:#fff;} body.page-id-169 #freddo .formCont .column select { margin-bottom: 20px;border: none;font-size: 16px;font-family: 'Graphik-Regular'; height: 30px; width: 100%;} body.page-id-169 #freddo .wrap-send{position: relative; width:0%; overflow:hidden;} body.page-id-169 #freddo .wrap-send .send { position: relative; width: 80vw; clear: both; display: block; overflow: hidden; margin-top: 2vh;} body.page-id-169 #freddo .wrap-send .send input { border: none; font-family: 'Graphik-Medium'; height: 60px; width: 100%; font-size: 18px; color: #25414a; background-color: #fff; border-radius: 0; cursor: pointer;} body.page-id-169 #freddo div.wpcf7-validation-errors{border: none; color:#c22d31;} body.page-id-169 #freddo div.wpcf7-response-output{padding: 0;} body.page-id-169 #freddo div.wpcf7-response-output.wpcf7-mail-sent-ok{border:none; color:#398f14;} body.page-id-169 #freddo .wpcf7-form-control-wrap.attivita .wpcf7-form-control.wpcf7-radio .wpcf7-list-item .wpcf7-list-item-label{font-size: 16px;text-align: center; color:#fff;} body.page-id-169 #freddo .formCont .column .wpcf7-form-control-wrap.attivita .wpcf7-form-control.wpcf7-radio .wpcf7-list-item input{width: 16px; height: 16px;margin: 5px auto 30px auto;} body.page-id-169 #freddo .wpcf7-list-item.first{margin-left: 0;} body.page-id-169 #freddo .dalle-ore{font-size: 15px;color:#fff;} body.page-id-169 #freddo .alle-ore{font-size: 15px;color:#fff;} #franchising .poster{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; } #franchising .poster__hit-area{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; cursor:pointer; } #franchising .bg{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: center center / cover no-repeat; } #franchising .img-play{ position: absolute; width: 96px; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #franchising h1.title{position:absolute;visibility: hidden; opacity: 0;top: 0;} #franchising h2.title{position:absolute;visibility: hidden; opacity: 0;top: 0;} #franchising .sectionOne { position: relative; width: 100%; height: auto; background-color: #163446; overflow: hidden; } #franchising .sectionOne .row-1 .image img { position: relative; width: 100%; height: auto; display: block; } #franchising .sectionOne .row-1 .text .center { position: absolute; width: 40%; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #franchising .sectionOne .row-1 .text .center h2 span{color:#4f9bb1;} #franchising .sectionOne .row-2 .image img { position: relative; width: 100%; height: auto; display: block; } #franchising .sectionOne .row-2 .text .center { position: absolute; width: calc(100% - 20vw); top: 50%; left: 10vw; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: left; } #franchising .sectionOne .row-2 .text .center p { color: #fff; font-family: 'Graphik-Regular'; font-size: 15px; font-style: normal; line-height: 20px; } #franchising .sectionOne .row-2 .text .center p span{font-size: 15px;} #franchising .sectionTwo { position: relative; width: 100%; height: auto; background-color: #2d3a3e; overflow: hidden; } #franchising .sectionTwo .item.stefano .title .content-title{position: absolute; top:50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);} #franchising .sectionTwo .item.stefano .title .center h2 { color: #fff; font-family: 'Graphik-Light'; font-size: 24px; line-height: 30px; font-style: normal; } #franchising .sectionTwo .item.stefano .title .center h2 span { color: #4f9bb1; font-family: 'Graphik-Medium'; font-size: 24px; } #franchising .sectionTwo .item.stefano .title .center h2 em { color: #fff; font-family: 'Graphik-Medium'; font-size: 24px; font-style: normal; } #franchising .sectionTwo .item.stefano .image img { width: 100%; height: auto; display: block; } #franchising .sectionTwo .item.stefano .text .center p span { color: #fff; font-family: 'Graphik-Medium'; font-size: 15px; } #franchising .sectionTwo .item.andrea .image img { width: 100%; height: auto; display: block; } #franchising .sectionTwo .item.slider .title .content-title .center p span { color: #fff; font-family: 'Graphik-Medium'; font-size: 15px; line-height: 20px; } #franchising .sectionTwo .item.slider .title .content-title .sign{position: relative;width: 80%; height: auto; } #franchising .sectionTwo .item.slider .title .content-title .sign img{position:relative;width: 45%; margin:40px auto 0 auto; display: block; } #franchising .sectionTwo .item.slider .slider img { position: absolute; width: 100%; height: auto; top: 0; left: 0; z-index: 9; } #franchising .sectionTwo .item.slider .slider img:first-child { position: relative; width: 100%; height: auto; display: block; z-index: 10; } #franchising .sectionThree { position: relative; width: 100%; height: auto; background-color: #10262c; overflow: hidden; padding: 0 10vw; display: flex; } #franchising .sectionThree .column { position: relative; width: 50%; float: left; z-index: 3; align-items: stretch; } #franchising .sectionThree .column.first img { width: calc(100% - 10vw); height: auto; display: block; margin-bottom: 20vh; } #franchising .sectionThree .column.first p { position: absolute; bottom: 5vh; left: calc(50% - 5vw); width: 60%; color: #fff; font-family: 'Graphik-Regular'; font-size: 15px; line-height: 20px; margin-top: 5vh; } #franchising .sectionThree .column.last img { position: relative; width: 30%; margin: 10vh 30%; height: auto; display: block; } #franchising .sectionThree .column.last p { position: absolute; top: calc(100% - 35vh); left: 50%; width: 35%; color: #fff; font-family: 'Graphik-Regular'; font-size: 15px; line-height: 20px; text-align: left; -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); } #franchising .sectionThree .pattern { position: absolute; top: auto; bottom: 0; left: 20vw; width: 70vw; height: 40vh; background-size: 30px 32px; background-repeat: repeat; background-image: url(../img/logopattern2.svg); background-position: left top; opacity: 0.05; z-index: 2; } #franchising .sectionFour { position: relative; width: 100%; height: auto; overflow: hidden; } #franchising .sectionFour .item { position: relative; width: 100%; height: auto; text-align: center; height: 20vh} #franchising .sectionFour .item:first-child { background-color: #4e656c; } #franchising .sectionFour .item:nth-child(2) { background-color: #57747d; } #franchising .sectionFour .item:nth-child(3) { background-color: #3f555c; } #franchising .sectionFour .item:nth-child(4) { background-color: #4e656c; } #franchising .sectionFour .item:last-child{ background-color: #25414a; } #franchising .sectionFour .item img { width: 5%; height: auto; } #franchising .sectionFour .item h2 { color: #4f9bb1; font-family: 'Graphik-Light'; font-size: 30px; line-height: 40px; font-weight: normal; margin: 0 0 5vh 0; } #franchising .sectionFour .item p span { color: #fff; font-family: 'Graphik-Medium'; font-size: 15px; } #franchising .sectionFive { position: relative; width: 100%; height: auto; overflow: hidden;background-color: #163446 } #franchising .sectionFive .image img { display: block; width: 100%; height: auto; } #franchising .sectionFive .image h3 span { color: #fff; font-family: 'Graphik-Light'; font-size: 35px; line-height: 45px; } #franchising .sectionFive .text { position: relative; width: 100%; height: auto; padding: 15vh 0; background-color: #cbd8da; } #franchising .sectionFive .text p { position: relative; width: 50%; margin: 0 25%; text-align: center; color: #163446; font-family: 'Graphik-Regular'; font-size: 15px; line-height: 20px; font-style: normal; } #franchising .sectionFive .text p span { color: #163446; font-family: 'Graphik-Medium'; font-size: 15px; line-height: 20px; font-style: normal; } #franchising .sectionFive .text2 { position: relative; width: 100%; height: auto; padding: 15vh 0; background-color: #fff; } #franchising .sectionFive .text2 p { position: relative; width: 50%; margin: 0 25%; text-align: center; color: #163446; font-family: 'Graphik-Regular'; font-size: 15px; line-height: 20px; font-style: normal; } #franchising .sectionFive .text2 p span { color: #163446; font-family: 'Graphik-Medium'; font-size: 15px; line-height: 20px; font-style: normal; } #franchising .wrap-slide-GM{position: absolute;left: 0;height: 100%;width: 100%;overflow: hidden;} #franchising .wrap-slide-GM .slide { position: relative; width: 36vw; height: 100%; } #franchising .lolloSlider { height: 53vh !important; } #franchising .arrow-GM{position: absolute; top:50%; z-index: 11; height: 56px; width: 56px;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);} #franchising .arrow-GM.next-GM { right: calc(35% - 70px) !important; } #franchising .arrow-GM .arrow{width: 100%; height: 100%;} #franchising { position: relative; margin-top: calc(4vh + 80px); width: 100%; height: auto; overflow: hidden;min-height: 150vh; } #franchising .subMenu { position: fixed; top: 80px; width: 100%; height: 4vh; overflow: hidden; z-index: 39; } #franchising .subMenu span { position: relative; width: 20%; float: left; height: 100%; background-color: #567e97; text-align: center; line-height: 4vh; color: #fff; font-family: 'Graphik-Regular'; font-size: 13px; cursor: pointer; border-right: 2px solid #fff; box-sizing: border-box; -webkit-transition: background-color .35s ease-in-out; -moz-transition: background-color .35s ease-in-out; -o-transition: background-color .35s ease-in-out; transition: background-color .35s ease-in-out; } #franchising .subMenu span:last-child { border-right: none; } #franchising .subMenu span:hover { background-color: #c22d31; -webkit-transition: background-color .35s ease-in-out; -moz-transition: background-color .35s ease-in-out; -o-transition: background-color .35s ease-in-out; transition: background-color .35s ease-in-out; } #franchising .subMenu span.active { background-color: #c22d31; -webkit-transition: background-color .35s ease-in-out; -moz-transition: background-color .35s ease-in-out; -o-transition: background-color .35s ease-in-out; transition: background-color .35s ease-in-out; } /*********************************************************************************************************************************/ #franchising .sectionOne .video{ position: relative; width: 65%; overflow: hidden; float: left; opacity: 0; visibility: hidden; } #franchising .sectionOne .video__wrapper{ position: relative; width: 65vw; height:calc(65vw / 1.7777); overflow: hidden; } #franchising .sectionOne iframe{width: 100%;height: 100%;} #franchising .sectionOne .row-1{position: relative; width: 100%; height: auto; overflow: hidden; } #franchising .sectionOne .row-1 .image{ position: relative; width: 0%;height:calc(65vw / 2.56); overflow: hidden; float: left;} #franchising .sectionOne .row-1 .image.is-in{width: 65%;-webkit-transition: width 0.8s ease-in-out;-o-transition: width 0.8s ease-in-out;transition: width 0.8s ease-in-out;} #franchising .sectionOne .row-1 .image .image-franchising{width: 65vw; height:calc(65vw / 2.56);} #franchising .sectionOne .row-1 .text{position: relative;width: 35%;overflow: hidden;float: right;height:calc(65vw / 1.7777);} #franchising .sectionOne .row-1 .text .center{overflow:hidden;} #franchising .sectionOne .row-1 .text .center h2{position:relative;color:#fff; font-family: 'Graphik-Light';top:250px;} #franchising .sectionOne .row-1 .text .center h2.is-in{top:0;-webkit-transition: top 0.8s ease-in-out;-o-transition: top 0.8s ease-in-out;transition: top 0.8s ease-in-out;} #franchising .sectionOne .row-2{position: relative; width: 100%; height: auto; overflow: hidden; } #franchising .sectionOne .row-2 .image { position: relative; width: 0%; height: auto; overflow: hidden; float: right;height:calc(50vw / 2.265);} #franchising .sectionOne .row-2 .image.is-in{width: 50%;-webkit-transition: width 0.8s ease-in-out;-o-transition: width 0.8s ease-in-out;transition: width 0.8s ease-in-out;} #franchising .sectionOne .row-2 .image .image-franchising{width: 50vw; height:calc(50vw / 2.265); position: absolute; right: 0} #franchising .sectionOne .row-2 .text { position: relative; width: 50%; height:calc(50vw / 2.265); overflow: hidden; float: left;} #franchising .sectionOne .row-2 .text .center{overflow:hidden;} #franchising .sectionOne .row-2 .text .center p { position:relative;color: #fff; font-family: 'Graphik-Regular'; font-size: 15px; line-height: 20px; top:200px;} #franchising .sectionOne .row-2 .text .center p.is-in {top:0;-webkit-transition: top 0.8s ease-in-out;-o-transition: top 0.8s ease-in-out;transition: top 0.8s ease-in-out;} #franchising .sectionTwo .item.stefano{position: relative; width: 100%;} #franchising .sectionTwo .item.stefano .box-riempitivo{width: 10%;height: calc(22.5vw / 0.813); float:left;} #franchising .sectionTwo .item.stefano .title{position: relative;height: calc(22.5vw / 0.813);width: 22.5%; float: left} #franchising .sectionTwo .item.stefano .image{position: relative; float:left;height: calc(22.5vw / 0.813); overflow:hidden; width:0%;} #franchising .sectionTwo .item.stefano .image .image-franchising{width: 22.5vw; height: calc(22.5vw / 0.813);} #franchising .sectionTwo .item.stefano .text{position: relative; width: 45%; height: calc(22.5vw / 0.813); float: right;} #franchising .sectionTwo .item.stefano .title .content-title .center { position: relative; width: 100%; overflow: hidden;} #franchising .sectionTwo .item.stefano .title .content-title .center h2{position: relative; top:200px;} #franchising .sectionTwo .item.stefano .text .center { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: left;overflow: hidden;} #franchising .sectionTwo .item.stefano .text .center p { position:relative;color: #fff; font-family: 'Graphik-Regular'; font-size: 15px; line-height: 20px;top:200px; } #franchising .sectionTwo .item.stefano .title .content-title .sign{width: 40%; position: relative; margin: 20px auto 0 auto; opacity:0; top:60px;} #franchising .sectionTwo .item.andrea{position: relative; width: 100%;margin-left: 0%;} #franchising .sectionTwo .item.andrea .box-riempitivo{width: 10%;height: calc(22.5vw / 0.813); float:left;} #franchising .sectionTwo .item.andrea .image{position: relative;width:0%;float: left;height: calc(22.5vw / 0.813); overflow:hidden;} #franchising .sectionTwo .item.andrea .image .image-franchising{position: relative;width: 22.5vw;float: left;height: calc(22.5vw / 0.813);} #franchising .sectionTwo .item.andrea .text{position: relative; width: 67.5%; height: calc(22.5vw / 0.813); float: right;} #franchising .sectionTwo .item.andrea .text .pattern { position: relative; width: 100%; height: 100%; background-size: 30px 32px; background-repeat: repeat; background-image: url(../img/logopattern2.svg); background-position: left top; opacity: 0.05; z-index: 2; opacity:0;} #franchising .sectionTwo .item.andrea .text .center { position: absolute; width: 50%; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: left;overflow:hidden;} #franchising .sectionTwo .item.andrea .text .center p { position:relative;color: #fff; font-family: 'Graphik-Regular'; font-size: 15px; line-height: 20px;top:200px; } #franchising .sectionTwo .item.slider { position: relative; width: 100%; } #franchising .sectionTwo .item.slider .box-riempitivo{width: 10%; height:calc(35vw / 1.332); float:left;} #franchising .sectionTwo .item.slider .title { position: relative; width: 22.5%;height:calc(35vw / 1.332); float:left; } #franchising .sectionTwo .item.slider .slider { position: relative; width: 0%;height:calc(35vw / 1.332);float:left; overflow:hidden;} #franchising .sectionTwo .item.slider .slider .image-franchising{width: 35vw; height:calc(35vw / 1.332);float: left} #franchising .sectionTwo .item.slider .title .content-title{position: absolute; top:50%; -webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);} #franchising .sectionTwo .item.slider .title .content-title .center { position: relative; width: 80%; overflow:hidden;} #franchising .sectionTwo .item.slider .title .content-title .center p {position:relative; color: #fff; font-family: 'Graphik-Regular'; font-size: 15px; line-height: 20px; font-style: normal; top:160px;} #franchising .sectionFour .item .wrap-fade-in{position: relative; overflow: hidden; top:50%; -webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);} #franchising .sectionFour .item .wrap-fade-in p {position:relative;color: #fff; font-family: 'Graphik-Regular'; font-size: 15px; line-height: 20px; top:170px;} #franchising .sectionFive .image{position: relative;width: 0%;height: calc(100vw / 2.56); overflow: hidden;} #franchising .sectionFive .image .image-franchising{width: 100vw; height: calc(100vw / 2.56);} #franchising .sectionFive .image .image-franchising .shadow{position: absolute; width: 100vw; height: calc(100vw / 2.56); left: 0; top:0; opacity:0.1;background-color: #000} #franchising .sectionFive .image .wrap-fade-in {position: absolute; top: 50%; left: 10vw; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);overflow:hidden;} #franchising .sectionFive .image .wrap-fade-in h3 { position: relative; color: #fff; font-family: 'Graphik-Medium'; font-size: 35px; line-height: 40px; font-style: normal; top:200px;} #franchising .sectionFive .text .wrap-fade-in{ position: relative; overflow:hidden;} #franchising .sectionFive .text2 .wrap-fade-in{ position: relative; overflow:hidden;} #franchising .sectionFive .text .wrap-fade-in p{ position: relative; top:150px;} #franchising .sectionFive .text2 .wrap-fade-in p{ position: relative; top:150px;} #azienda .poster{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; } #azienda .poster__hit-area{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; cursor:pointer; } #azienda .bg{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: center center / cover no-repeat; } #azienda .img-play{ position: absolute; width: 96px; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #azienda .sectionOne .video{ position: relative; width: 65%; overflow: hidden; float: left; opacity: 0; visibility: hidden; } #azienda .sectionOne .video__wrapper{ position: relative; width: 65vw; height:calc(65vw / 1.7777); overflow: hidden; } #azienda .sectionOne iframe{width: 100%;height: 100%;} #azienda .sectionOne .row-1 { position: relative; width: 100%; height: auto; overflow: hidden; float: left; } #azienda .sectionOne .row-1 .image { position: relative; width: 0%; height:calc(65vw / 2.758); overflow: hidden; float: left;} #azienda .sectionOne .row-1 .image.is-in{width: 65%;-webkit-transition: width 0.8s ease-in-out;-o-transition: width 0.8s ease-in-out;transition: width 0.8s ease-in-out;} #azienda .sectionOne .row-1 .image .image-azienda{width: 65vw; height:calc(65vw / 2.758);} #azienda .sectionOne .row-1 .text { position: relative; width: 35%; height:calc(65vw / 1.7777); overflow: hidden; float: right; } #azienda .sectionOne .row-1 .text .center{position: absolute; width: 40%; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); overflow: hidden} #azienda .sectionOne .row-1 .text .center p { position:relative;color: #fff; font-family: 'Graphik-Regular'; font-size: 15px; line-height: 20px;top:200px; } #azienda .sectionOne .row-1 .text .center p.is-in{top:0;-webkit-transition: top 0.8s ease-in-out;-o-transition: top 0.8s ease-in-out;transition: top 0.8s ease-in-out;} #azienda .sectionOne .row-2 { position: relative; width: 100%; height: auto; overflow: hidden; float: left; } #azienda .sectionOne .row-2 .image { position: relative; width: 0%;height:calc(50vw / 2.265); overflow: hidden; float: right; } #azienda .sectionOne .row-2 .image.is-in{width: 50%;-webkit-transition: width 0.8s ease-in-out;-o-transition: width 0.8s ease-in-out;transition: width 0.8s ease-in-out;} #azienda .sectionOne .row-2 .image .image-azienda{position:absolute; right:0; width: 50vw;height:calc(50vw / 2.265); } #azienda .sectionOne .row-2 .text { position: relative; width: 50%; height:calc(50vw / 2.265);overflow: hidden; float: left; } #azienda .sectionOne .row-2 .text .center { position: absolute; width: calc(100% - 20vw); top: 50%; left: 10vw; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: left;overflow: hidden; } #azienda .sectionOne .row-2 .text .center p { position: relative;color: #fff; font-family: 'Graphik-Regular'; font-size: 15px; font-style: normal; line-height: 20px;top:200px;} #azienda .sectionOne .row-2 .text .center p.is-in{top:0;-webkit-transition: top 0.8s ease-in-out;-o-transition: top 0.8s ease-in-out;transition: top 0.8s ease-in-out;} #azienda .sectionTwo .item.giorgio { position: relative; width: 100%;height: calc(22.5vw / 0.813);} #azienda .sectionTwo .item.giorgio .box-riempitivo{width: 10%;height: 100%;; float: left;} #azienda .sectionTwo .item.giorgio .title { position: relative; margin-left: 10%;width: 22.5%; float:left; height: 100%;} #azienda .sectionTwo .item.giorgio .image { position: relative; width: 0%; float:left; overflow:hidden;height: 100%;} #azienda .sectionTwo .item.giorgio .image .image-azienda{ position: relative; width: 22.5vw;float:left;height: 100%;} #azienda .sectionTwo .item.giorgio .text { position: relative; width: 45%; float:right; height: 100%;} #azienda .sectionTwo .item.giorgio .title .center{overflow:hidden;} #azienda .sectionTwo .item.giorgio .title .center h2 { position:relative;color: #fff; font-family: 'Graphik-Light'; font-size: 24px; line-height: 30px; font-style: normal; top:250px;} #azienda .sectionTwo .item.giorgio .text .center { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: left;overflow: hidden } #azienda .sectionTwo .item.giorgio .text .center p { position: relative;color: #fff; font-family: 'Graphik-Regular'; font-size: 15px; line-height: 20px; top:150px;} #azienda .sectionTwo .item.andrea .text .pattern { position: relative; width: 100%; height: 100%; background-size: 30px 32px; background-repeat: repeat; background-image: url(../img/logopattern2.svg); background-position: left top; opacity: 0.05; z-index: 2; opacity:0;} #azienda .sectionTwo .item.andrea { position: relative; width:100%;height: calc(22.5vw / 0.813);} #azienda .sectionTwo .item.andrea .box-riempitivo{width: 10%;height: 100%; float: left;} #azienda .sectionTwo .item.andrea .image { position: relative; width: 0%;margin-left: 10%; float: left;height: 100%; overflow:hidden;} #azienda .sectionTwo .item.andrea .image .image-azienda{ position: relative; width: 22.5vw;height: 100%;} #azienda .sectionTwo .item.andrea .text { position: relative; width: 67.5%;height: 100%; float: right} #azienda .sectionTwo .item.andrea .text .center { position: absolute; width: 50%; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: left; overflow: hidden;} #azienda .sectionTwo .item.andrea .text .center p { position:relative;color: #fff; font-family: 'Graphik-Regular'; font-size: 15px; line-height: 20px; top:150px;} #azienda .sectionTwo .item.andrea .text .center p span{color: #4f9bb1; font-family: 'Graphik-Bold'; font-size: 15px;} #azienda .sectionTwo .item.slider {position: relative; width: 100%;height: calc(35vw / 1.332);} #azienda .sectionTwo .item.slider .box-riempitivo{width: 10%;height: 100%; float: left;} #azienda .sectionTwo .item.slider .title {position: relative; margin-left: 10%;width: 22.5%; float:left;height: 100%; } #azienda .sectionTwo .item.slider .slider {position: relative; width: 0%; height: 100%; float:left; overflow: hidden;} #azienda .sectionTwo .item.slider .slider .image-azienda{position: relative; overflow:hidden; width:35vw;height: 100%;} #azienda .sectionTwo .item.slider .text {position: relative; width: 32.5%; height: auto; float:right; height: 100%;} #azienda .sectionTwo .item.slider .title .content-title .center p { color: #fff; font-family: 'Graphik-Regular'; font-size: 15px; line-height: 20px; font-style: normal; opacity:0;} #azienda .sectionTwo .item.slider .title .content-title .sign{position: relative;width: 80%; height: auto; opacity:0;} #azienda .sectionTwo .item.slider .text .content-text{overflow: hidden} #azienda .sectionTwo .item.slider .text .content-text h3{position:relative;color: #fff; font-family: 'Graphik-Medium';font-size: 35px;line-height: 40px;font-style: normal;top:250px;} #azienda .sectionThree { position: relative; width: 100%; height: calc(30vw / 0.820 + 20vh); background-color: #10262c; overflow: hidden;} #azienda .sectionThree .box-riempitivo{width: 10%; height: calc(30vw / 0.820); float:left;} #azienda .sectionThree .column.first { position: relative;margin-left: 10%; width: 40%; float: left; z-index: 3; } #azienda .sectionThree .column.first .wrap-fade-in { position: absolute; left: calc(50% - 5vw); width: 60%; margin-top: 5vh;overflow: hidden; } #azienda .sectionThree .column.first .wrap-fade-in p {position: relative; color: #fff; font-family: 'Graphik-Regular'; font-size: 15px; line-height: 20px; top:150px; } #azienda .sectionThree .column.first .image{position:relative; width: 0vw; overflow: hidden; height: calc(30vw / 0.820);} #azienda .sectionThree .column.first .image .image-azienda{width: 30vw; height: calc(30vw / 0.820);} #azienda .sectionThree .column.first .image .image-azienda img { width: 100%; height: auto; } #azienda .sectionThree .column.last { position: relative;margin-right: 10%; width: 40%; float: right; z-index: 3; height: calc(30vw / 0.820);opacity:0;} #azienda .sectionThree .box-riempitivo.last{width: 10%; height: calc(30vw / 0.820); float:right;} #azienda .sectionThree .pattern { position: absolute; top: auto; bottom: 0; left: 20vw; width: 70vw; height: 40vh; background-size: 30px 32px; background-repeat: repeat; background-image: url(../img/logopattern2.svg); background-position: left top; opacity: 0.05; z-index: 2; opacity:0;} #azienda .sectionFour { position: relative; width: 100%; height: auto; overflow: hidden;background-color: #10262c; } #azienda .sectionFour .item .wrap-fade-in img{position: relative; top:200px;} #azienda .sectionFour .item .wrap-fade-in h2{position: relative; top:200px;} #azienda .sectionFour .item .wrap-fade-in p{position: relative; top:200px;} #azienda .sectionFour .item:nth-child(1) .wrap-fade-in{overflow:hidden;} #azienda .sectionFour .item:nth-child(2) .wrap-fade-in{overflow:hidden;} #azienda .sectionFour .item:nth-child(3) .wrap-fade-in{overflow:hidden;} #azienda .sectionFour .item:nth-child(4) .wrap-fade-in{overflow:hidden;} #azienda .sectionFive .row{ position: relative; width: 100%;height:calc(100vw / 4.413); background-color: #10262c; } #azienda .sectionFive .row .image { position: relative; width: 0%; height: 100%;overflow:hidden; } #azienda .sectionFive .row .image .image-azienda{ width: 100vw; height: 100%; } #azienda .sectionFive .row .image img { display: block; width: 100%; height: 100%; } #azienda .sectionFive .row .wrap-fade-in{ position: absolute; top: 50%; left: 10vw; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);overflow:hidden;} #azienda .sectionFive .row .wrap-fade-in h3 { position:relative;color: #fff; font-family: 'Graphik-Medium'; font-size: 35px; line-height: 40px; font-style: normal;top:220px;} #azienda .sectionFive .row h3 span { color: #fff; font-family: 'Graphik-Light'; font-size: 35px; line-height: 45px; } #azienda .sectionFive .text { position: relative; width: 100%; height: auto; padding: 15vh 0; background-color: #cbd8da;} #azienda .sectionFive .text .wrap-fade-in{position: relative; overflow:hidden;} #azienda .sectionFive .text { position: relative; width: 100%; height: auto; padding: 15vh 0; background-color: #cbd8da;} #azienda .sectionFive .text .wrap-fade-in p{top:200px;} #azienda .sectionFive .text2 { position: relative; width: 100%; height: auto; padding: 15vh 0; background-color: #fff; } #azienda .sectionFive .text2 .wrap-fade-in{position: relative; overflow:hidden;} #azienda .sectionFive .text2 .wrap-fade-in p{top:200px;} /*PAGINA VOLANTINO*/ .pagina-volantino{ position: relative; width: 100%; margin-top: 80px; opacity:0; visibility: hidden; } .pagina-volantino .img{ line-height: 0; } .pagina-volantino .durata{ /*background-color: #000;*/ position: absolute; height: 5vh; width:calc((80vw - ((100vh - 160px) * 2 * 0.7066)) / 2); left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .pagina-volantino .durata__wrapper{ padding:1.25rem 0; position: relative; text-align: center; opacity: 0; visibility: hidden; } .pagina-volantino .durata__wrapper p{ color: #fff; font-size: 1rem; } .pagina-volantino .pagina__wrapper{ position: relative; width: 100%; height:calc(100vh - 160px); background-color: #af0d14; } .pagina-volantino .pagina__wrapper .nessuna-offerta{ position: relative; width: calc((100vh - 160px) * 0.7066); height: calc(100vh - 160px); margin: 0 auto; } .pagina-volantino .pagina__wrapper .slider{ position: relative; width: 80vw; height: 100%; margin: 0 auto; } .pagina-volantino .pagina__wrapper .slide{ position: relative; margin: 0 auto; width:calc((100vh - 160px) * 0.7066); height: calc(100vh - 160px); background:center center / cover no-repeat; cursor:pointer; } .pagina-volantino .logo-pattern{ position:absolute; top:50%; left:50%; width: 100%; height: 100%; opacity:0.2; background-size:20px 20px; background-repeat: repeat; background-position: top left; background-image: url(../img/logopattern2.svg); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .pagina-volantino .megafono-promozioni{position: relative; width:23%; margin: 0 auto; top:5%;} .pagina-volantino .pesce-promozioni{ position: absolute; width:50%; margin: 0 auto; top:50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .pagina-volantino .sfoglia{ position: absolute; width: 70%; left:15%; text-align: center; top:50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .pagina-volantino .sfoglia .wrap-fade-in{ position: relative; overflow: hidden; } .pagina-volantino .sfoglia .wrap-fade-in p{ position:relative; font-size: 16px; color:#fff; /*top:130px;*/ } .pagina-volantino .sfoglia .wrap-fade-in h4{ position:relative; font-size: 40px; color:#fff; font-family: 'Graphik-Medium'; display: block; margin-bottom: 25px; /*top:130px;*/ } .pagina-volantino .sfoglia .wrap-fade-in h4.nessuna-offerta-attiva{margin: 0 auto; width: 80%} .pagina-volantino .control{ position: absolute; top: 50%; width: 56px; z-index: 111; opacity:1; -webkit-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; cursor:pointer; } .pagina-volantino .control.swiper-button-disabled{ cursor:default; opacity: 0.4; } .pagina-volantino .control-left{ left: calc((10vw + (80vw - ((100vh - 160px) * 2 * 0.7066)) / 4) / 2); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .pagina-volantino .control-right{ right: calc((10vw + (80vw - ((100vh - 160px) * 2 * 0.7066)) / 4) / 2); -webkit-transform: translateX(50%); -ms-transform: translateX(50%); -o-transform: translateX(50%); transform: translateX(50%); } .pagina-volantino .image__arrow{ position: relative; width: 100%; } .pagina-volantino .image__circle{ position: absolute; left: 50%; top: 50%; width: 100%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .pagina-volantino .image__circle .img.rotate{ -webkit-animation: cta-rotation 1s linear infinite; -o-animation: cta-rotation 1s linear infinite; animation: cta-rotation 1s linear infinite; } .pagina-volantino .full{ position: fixed; top: 80px; left: 0; height: calc(100vh - 80px); right: 0; top:0; z-index: 11; display: none; } /*.page-volantino .full .full__bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: background: #af0d14; opacity:0; visibility: hidden; }*/ .pagina-volantino .full__container{ position: relative; overflow-y: scroll; height: 100%; width: 100%; } .pagina-volantino .full__container::-webkit-scrollbar {display: none;} .pagina-volantino .full__wrapper{position: relative; height: calc(70vw * 1.4); width: 70vw; margin: 0 auto; top:80px;} .pagina-volantino .full__wrapper .img-full{ position: absolute; left: 0; top: 0; width: 70vw; height: 100%; opacity:0; visibility: hidden; } .pagina-volantino .full__wrapper .img-full .bg-img{ position: relative; width: 100%; height: 100%; background:center center / cover no-repeat; } .pagina-volantino .chiudi-full{ position: absolute; left: calc(85vw + 2.5rem); top: calc(80px + 2.5rem); width: 24px; opacity: 0; visibility: hidden; } .pagina-volantino .chiudi-full__hit-area{ position:absolute; left: 50%; top: 50%; width: 150%; height: 150%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); cursor: pointer; } /*.pagina-volantino .slider{ position: relative; width: 100%; height:calc(100vh - 160px); } .pagina-volantino .slider__container{ position: relative; width: 80%; height: 100%; margin: 0 auto; } .pagina-volantino .slide{ position: absolute; width: 50%; height: 100%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .pagina-volantino .slide__wrapper{ }*/ /*FIDELITY CARD*/ .pagina-fidelity-card{ overflow: hidden; } .pagina-fidelity-card input:focus, .pagina-fidelity-card select:focus, .pagina-fidelity-card textarea:focus, .pagina-fidelity-card button:focus { outline: none; } .pagina-fidelity-card ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-size: 1.1rem; color: #fff; opacity:0.5; } .pagina-fidelity-card ::-moz-placeholder { /* Firefox 19+ */ font-size: 1.1rem; color: #fff; opacity:0.5; } .pagina-fidelity-card :-ms-input-placeholder { /* IE 10+ */ font-size: 1.1rem; color: #fff; opacity:0.5; } .pagina-fidelity-card :-moz-placeholder { /* Firefox 18- */ font-size: 1.1rem; color: #fff; opacity:0.5; } .pagina-fidelity-card .img{ line-height: 0; } .pagina-fidelity-card p{ color:#fff; } .pagina-fidelity-card p a{ color:#fff; } .pagina-fidelity-card .uppercase{text-transform: uppercase;} .pagina-fidelity-card .sipario-thanks-iscrizione-promozioni{position: fixed; width: 100vw; height: calc(100vh - 160px); top:80px; left:100vw; background-color: #af0d14;z-index: 61;} .pagina-fidelity-card .sipario-thanks-iscrizione-promozioni .text{position: relative; overflow:hidden;top:50%; -webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);text-align: center;} .pagina-fidelity-card .sipario-thanks-iscrizione-promozioni h1{position:relative;font-size: 70px;color:#fff; top:100px;} .pagina-fidelity-card .container-form{ position: relative; float:right; width: 100%; } .pagina-fidelity-card .container-form .titolo-form{ position: relative; width: 80%; margin:80px auto 5rem auto; text-align: center; visibility: hidden; opacity:0; -webkit-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); } .pagina-fidelity-card .container-form .titolo-form h3{ font-family: 'Graphik-Regular'; font-size: 32px; color:#fff; } .pagina-fidelity-card .container-form #form-promozioni{ width: 60%; position: relative; margin:0 auto 80px auto; } .pagina-fidelity-card .container-form ol li label{ color:#fff; position: relative; display:block; font-size: 26px; display: none } .pagina-fidelity-card .container-form ol li label.label-select-promozioni{ font-size: 1.1rem; } .pagina-fidelity-card .container-form ol li label.label-checkbox-informativa-promozioni{ color:#fff; } .pagina-fidelity-card .container-form ol li label.label-checkbox-informativa-promozioni a{ color:#fff; } .pagina-fidelity-card .container-form ol li input{ border: none; border-bottom: 1px solid #fff; background-color: transparent; color:#fff; position: relative; display:block; width:100%; font-size: 24px; } .pagina-fidelity-card .wrap-coppia-form{ opacity:0; visibility: hidden; -webkit-transform: translateY(120px); -ms-transform: translateY(120px); -o-transform: translateY(120px); transform: translateY(120px); } .pagina-fidelity-card{ position:relative; margin-top: 80px; } .pagina-fidelity-card .left{ position: relative; float:left; width: 50%; height: calc(100vh - 160px); } .pagina-fidelity-card .left .txt{ position: absolute; width: 50%; left: 50%; top: 75%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } .pagina-fidelity-card .left .txt p{ font-size: 28px; } .pagina-fidelity-card .left .txt span{ font-size: 32px; font-family: 'Graphik-Medium'; } .pagina-fidelity-card .left .txt__white{ margin-bottom: 2.5rem; opacity:0; visibility: hidden; -webkit-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); } .pagina-fidelity-card .left .txt__blu{ opacity:0; visibility: hidden; -webkit-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); } .pagina-fidelity-card .left .txt__white p{ color:#fff; } .pagina-fidelity-card .left .txt__blu p{ color:#0A3A5B; } .pagina-fidelity-card .left .image{ position: relative; width: 0%; height: 100%; overflow: hidden; } .pagina-fidelity-card .left .image__wrapper{ position: absolute; left: 0; top: 0; width: 50vw; height: 100%; } .pagina-fidelity-card .left .image__wrapper .img{ position: relative; width: 100%; height: 100%; background: center center / cover no-repeat; } .pagina-fidelity-card .left .image__overlay{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; opacity:0.25; } .pagina-fidelity-card .right{ position: relative; float:right; width: 50%; height: calc(100vh - 160px); background-color: #AF0D14; } .pagina-fidelity-card .right .maintenance h2{ padding:0.5rem 0; color:#fff; text-align: center; } .pagina-fidelity-card .right .container-form__bg{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: #AF0D14; } .pagina-fidelity-card .submit-promozioni{ color:#AF0D14; } .pagina-fidelity-card .regolamento-fidelity-card{ position: relative; float:left; } .bold-lollo{font-family: 'Graphik-Bold' !important;} .big{font-size: 24px !important} @-webkit-keyframes cta-rotation { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } @-o-keyframes cta-rotation { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg);; } } @-moz-keyframes cta-rotation { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);; } 100% { -webkit-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg);; } } @keyframes cta-rotation { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);; } 100% { -webkit-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg);; } }