/* verde: #969831 / viola: #f3426d */
html {scroll-behavior: smooth;}
body {font-family: 'Oswald', sans-serif; font-size: 16px; margin:0;}
input, button {font-family: 'Poppins', sans-serif; outline: 0;}
input[type="text"] {width: 100%; border-radius: 4px; border: 1px solid #777; height: 40px; padding: 0 10px; margin-bottom: 15px; box-sizing: border-box;}
textarea {width:100%; height: 80px; border: 1px solid #777; padding: 10px; box-sizing: border-box; border-radius: 4px; margin-bottom: 20px;}
h1, h2, h3, h4 {color:#26264b;}
h1 {}
h2 {font-weight: bold; font-size: 2.5em;}
h3 {font-size: 1em; font-weight: 500;}
h4 {font-size: 0.85em;}
p {font-weight: 300; font-size: 1.2em; color:#777;}
.wrapper {width: calc(100% - 60px); max-width:1200px; margin:0 auto;}
.w-100 {width:100%;}
.w-75 {width:75%;}
.w-50 {width:50%;}
.w-25 {width:25%;}
.mB_20 {margin-bottom:20px !important;}
.mT_20 {margin-top:20px !important;}
.two-columns {column-count: 2;}
.three-columns {column-count: 3;}
.txtCenter {text-align:center;}
.txtLeft {text-align:left;}
.txtRight {text-align:right;}
.i-block {display:inline-block;}
.block {display:block;}
.relative {position:relative;}
.separator {text-align:center; padding:20px 0; box-sizing: border-box;}
.bigTxt {color: #fff; font-size: 5em; line-height: 1.2em; margin: 0;}
.bigTxt span {background: linear-gradient(to bottom,rgba(0,0,0,0) 80%,#efa506 80%); background-size: 100px 1.19em;}
.mediumTxt {color:#fff; font-size: 2em; font-weight: 400; margin: 0; letter-spacing: .2em;}
.yellowTxt {color:#efa506; font-size: 1.8em; font-weight: 300; letter-spacing: .1em; margin-top: 20px;}
.pinkTxt {color:#f3426d; font-size: 1.8em; font-weight: 300; letter-spacing: .1em;}

/* Messaggio */
.msgContent {max-width: 500px; margin: 40px auto; padding: 20px; border: 1px solid #ddd;}
.msgContent .countdown {text-align: center;}
.msgContent h1 {font-family: "Arial", "Helvetica", sans-serif; border-left: 8px solid #969831; text-indent: 5px; color: #f3426d; font-size: 2em;}
.msgContent h3 {color: #969831; font-size: 0.9em; font-weight: 500; text-transform: uppercase;}

/* Header */
header {width:100%; height:100px; position:absolute; top:0; z-index:999;}
.headerBox {height:100%; max-width:1500px; margin:0 auto; display: grid; grid-template-columns: 20% 60% 20%; align-items:center; justify-items:center;}
.nav-header, .nav-utente {list-style: none; padding: 0;}
.nav-header li {display:inline-block;}
.nav-header a {text-decoration: none; color: #fff; float: left; padding-bottom:3px; margin-right: 15px; border-bottom:1px solid #fff; line-height: 15px;}
.nav-header li:last-child a {margin-right:0;}
.nav-utente a {padding:3px 20px; float:left;}
.headerBox img {padding:30px 20px; position: absolute; top: -50px; left: 50%; margin-left: -60px;}

/* Footer */
footer {width: 100%; padding-top: 30px; padding-bottom:30px; color: #fff; background-color:#f2426d; text-align: center;}
footer ul {list-style: none; display: grid; grid-template-columns: 20% 20% 20%; padding: 0; margin:0;}
footer li {display: grid; grid-template-columns: 1fr 3fr; grid-gap:10px; align-items:center;}
footer h5, footer p {margin: 0; margin-bottom: 15px; font-weight: normal;}
footer p {font-size:12px;}
footer a {text-decoration:none; color:#fff;}

/* Sezioni */
.sfondo-claim {background-image: url(../../condivisi/grafica/img-home.png); background-size:cover; background-repeat: no-repeat; background-position: center center;}
.claimBox {width: calc(100% - 60px); max-width:1200px; margin:0px auto; padding:170px 0 20px 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-right: auto; margin-left: auto; position: relative; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;}
.claimBox figure {width:50%; margin:0 10px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; justify-content:center; -webkit-justify-content:center; -ms-justify-content:center;}
.claimBox figure img {height: auto; max-width: 100%; z-index:999;}
.box {width:100%; margin:0 20px;}
.box fieldset {border:none; text-align:center; box-sizing:border-box;}
.box select, .box input[type="text"], .box input[type="email"], .box input[type="tel"] {margin-top:30px; margin-bottom:20px; padding: .25em; border: 0; border-bottom: 2px solid currentcolor; font-weight: bold; letter-spacing: .15em; border-radius: 0; background-color: transparent; color: #fff; font-family:'Oswald', sans-serif; font-size:2em;}
.box select option {color:#000;}
.box select:focus, select:active {outline: 0; border-bottom-color:#f3426d;}
.box input[type="text"]::placeholder, .box input[type="email"]::placeholder, .box input[type="tel"]::placeholder {color:#fff; opacity: 1;}
.contattoIndex {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0 40px;}
.sezNote {margin: 100px auto;}
.info-box {padding: 0 150px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center;  -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;}
.img-box {padding-right:150px; position:relative; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-self: baseline;}
.img-box span {color:#26264b; opacity: 0.2; font-size: 5em; font-weight:bold;}
.img-box img {position: absolute; display: block; bottom: -30px; right: 125px;}
/*.sezChiSiamo {background-image: url(../../condivisi/grafica/girandola-grande.png); background-size:auto 100%; background-repeat: no-repeat; background-position: center right;}*/
.boxChiSiamo {width: calc(100% - 60px); max-width:1200px; margin:0px auto; padding:100px 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-right: auto; margin-left: auto; position: relative; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;}
.boxChiSiamo figure {width:40%; margin:0 10px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; justify-content:center; -webkit-justify-content:center; -ms-justify-content:center;}
.boxChiSiamo figure img {height: auto; max-width: 100%; z-index:999;}
.txtChiSiamo {width:100%; margin:0 10px;}
.sezSupporto {padding:50px 0; margin-top:-1px; background-image: url(../../condivisi/grafica/banner-festa.jpg); background-size:cover; background-repeat: no-repeat; background-position: center center;}
.wrapSponsor {background-color: #f4f2ee; padding: 20px;}
.wrapSponsor ul {list-style: none; display: grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr; grid-gap:20px; padding: 0;}

/* Popup */
.popUpHome {box-shadow: 0px 4px 8px #0000001A; background-color: #fff; border-radius: 4px; padding:40px 100px; width:80%; height:80%; margin: 0 auto; position: fixed; top: 100px; left: 0; right: 0; z-index: 1000; box-sizing: border-box; overflow:auto;}
.popUpHelp {box-shadow: 0px 4px 8px #0000001A; background-color: #fff; border-radius: 4px; padding: 50px; width:30%; height: auto; margin: 0 auto; position: fixed; top: 220px; left: 0; right: 0; z-index: 1000; box-sizing: border-box;}
.chiudiPopUp {width:100%; display:inline-block; height:30px; position:relative;}
.popUpOff {display:grid; width: 30px; height: 30px; text-align: center; border-radius: 50%; position: absolute; right:0; top:0; cursor: pointer; align-content:center; justify-content:center; background-color:#f3426d;}
.popUpOff:after {content:"\00d7"; font-size: 20px; color:#fff;}

/* Swiper */
.swiper-container {width: 100%; height: 100%; margin-left: auto; margin-right: auto;}
.swiper-slide {color:#777777; background: #fff;}
.swiper-pagination {position:unset !important;}
.swiper-pagination-bullet-active {background-color:#26264b !important;}
.swiper-button-prev:before, .swiper-button-prev:after, .swiper-button-next:before, .swiper-button-next:after {left: 0%; height: 20%; width: 100%; content: "" !important; position: absolute; background: #f3426d; border-radius: 0.2rem; display: block;}
.swiper-button-prev:before {-webkit-transform: rotate(45deg); transform: rotate(45deg);  top: 55%;}
.swiper-button-prev:after {-webkit-transform: rotate(-45deg); transform: rotate(-45deg); bottom: 55%;}
.swiper-button-next:before {-webkit-transform: rotate(-45deg); transform: rotate(-45deg); top: 55%;}
.swiper-button-next:after {-webkit-transform: rotate(45deg); transform: rotate(45deg);  bottom: 55%;}

/* Frecce */
.arrow {position: relative; width: 2rem; height:1.350em; display: inline-block;}
.arrow.down:before, .arrow.down:after {content: "";  position: absolute; background:#efa506;  border-radius: 0.2rem; display: block;-webkit-transform: rotate(45deg); transform: rotate(45deg); top: -5%; height: 110%; width: 25%;}
.arrow.down:after {-webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.arrow.down:before {left: 55%;}
.arrow.down:after {right: 55%;}

/************/
/* CHECKBOX */
/************/
/* Switch */
.checkboxSwitch {display:inline-block; height:34px; text-indent: 60px; line-height: 30px; position:relative; color: #fff; font-size:1.5em; font-weight: 500; margin:10px;}
.checkboxSwitch input {position: absolute; opacity:0; width:0; height:0;}
.checkboxSwitch .slider {position:absolute; width:55px; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#dbcdd2; -webkit-transition:.4s; transition:.4s;}
.checkboxSwitch .slider:before {position:absolute; content:""; height:26px; width:26px; left:4px; bottom:4px; background-color:white; -webkit-transition:.4s; transition:.4s;}
.checkboxSwitch input:checked + .slider {background-color:#f3426d;}
.checkboxSwitch input:focus + .slider {box-shadow:0 0 1px #2196F3;}
.checkboxSwitch input:checked + .slider:before {-webkit-transform: translateX(21px); -ms-transform: translateX(21px); transform: translateX(21px);}
.checkboxSwitch .slider.round {border-radius:34px;}
.checkboxSwitch .slider.round:before {border-radius:50%;}

/* Button */
.checkboxButton {display:inline-block; width:auto; height:35px;}
.checkboxButton input {opacity:0; width:0; height:0;}
.checkboxButton .button {cursor:pointer; padding: 10px; border: 1px solid #969831; background-color:#fff; color: #969831; border-radius: 25px; -webkit-transition:.4s;transition:.4s;}
.checkboxButton input:checked + .button {background-color:#f3426d; color: #fff; border-color: #f3426d;}
.checkboxButton input:focus + .button {box-shadow:0 0 1px #2196F3;}

/* Square */
.checkboxSquare {display:inline-block; width:auto; height:30px; font-weight: bold; /*margin: 0 15px 20px 0;*/}
.checkboxSquare input {position: absolute; opacity:0; width:0; height:0;}
.checkboxSquare .button {position: relative; display: block; cursor:pointer; width: 28px; height: 28px; text-align: center; line-height: 30px; border: 2px solid #aaa; background-color:#fff; color: #aaa; -webkit-transition:.4s;transition:.4s;}
.checkboxSquare .button::after {content:""; position: absolute; top: 2px; left: 2px; display: block; width: 22px; height: 22px; line-height: 24px; border: 1px solid #d4d4d4;}
.checkboxSquare input:checked + .button {color: #fff; border-color: #f3426d; box-shadow: 0 0 10px 0px #777; }
.checkboxSquare input:checked + .button::after {border: 8px solid #f3426d; top: 0; left: 0; width: 12px;height: 12px;}

/************/
/* PULSANTI */
/************/
.btn {cursor:pointer; padding: 10px 20px; font-weight: 500; text-align: center; border: 0; border-radius: 25px; -webkit-transition:.4s;transition:.4s; background-position: 80% center; background-repeat: no-repeat; margin:5px; text-decoration:none; display:inline-block; font: 400 13.3333px 'Oswald';}
.btn.oliva {background-color: #969831; color: #fff; border: 1px solid #969831;}
.btn.blu {-webkit-appearance: none; background: -webkit-gradient(to right, #f3426d 0%, #ae97ff 50%, #f3426d 100%); background: linear-gradient(to right, #f3426d 0%, #ae97ff 50%, #f3426d 100%); background-size: 500%; border: none; border-radius: 5rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); color: #fff; cursor: pointer; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0.05em; outline: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 1em;}
.btn.blu:hover {animation-name: gradient; -webkit-animation-name: gradient; animation-duration: 2s; -webkit-animation-duration: 2s; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;}
@keyframes gradient {0% {background-position: 0% 50%;} 100% {background-position: 100%;}}
.btn.bianco {background-color: #fff; color: #f3426d; border: 1px solid #fff;}

@media screen and (min-width: 0px) and (max-width: 600px) {	
.bigTxt {font-size:3em;}
.mediumTxt {font-size:1em;}
.yellowTxt {font-size:1em;}
.two-columns, .three-columns {column-count: 1;}
.nav-header a {float: none; border-right: none; margin-right: 0; padding-right: 0; margin-bottom:5px; padding-bottom:5px; display: inline-block;}	
.nav-utente {display:grid; grid-template-columns:1fr; margin-top:0;}	
.nav-utente a {float:none; font-size: .9em;}	
.nav-header li {display:block;}
.stepNav .btn {min-width:120px; margin-bottom:10px;}	
header {height:270px; background-size:auto 100%; background-position: -370px center; text-align:center;}	
.headerBox {grid-template-columns: 1fr; grid-gap:5px;}	
.headerBox img {padding:20px; position: unset; margin-left: unset;}	
.checkboxSwitch {font-size:1.3em;}
.claimBox {padding:300px 0 20px 0;}	
.claimBox {flex-direction: column; justify-content: center; -webkit-justify-content: center; -ms-justify-content: center;}	
.claimBox figure, .box {width:100%; margin-bottom:30px;}
.box select, .box input[type="text"], .box input[type="email"], .box input[type="tel"]{width:100%; margin-bottom:0; font-size: 1.3em;}
.sezNote {margin:50px auto; padding: 0 20px; box-sizing:border-box;}
.contattoIndex {grid-template-columns:1fr;}
.info-box {flex-direction: column; padding: 0 35px;}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {left:0 !important;}	
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {right:0 !important;}
.img-box {padding: 0; justify-content: center; margin: 0 auto 40px auto;}
.img-box img {right:-10px;}
.boxChiSiamo {flex-direction: column; flex-flow: column-reverse; padding: 50px 0;}
.txtChiSiamo, .boxChiSiamo figure {width:100%;}		
.wrapSponsor ul {grid-template-columns:47% 47%;}
.wrapSponsor img {height:100px; width:100px;}	
.popUpHome, .popUpHelp {padding: 20px; width: 90%; height: 97%; top: 10px;}
}
/* ----------------------- SMARTPHONE ------------------*/
@media screen and (min-width: 601px) and (max-width: 768px) {
.three-columns {column-count: 1;}
.headerBox {grid-template-columns: 1fr 1fr 1fr; grid-gap:10px;}
.nav-header a {float: none;}	
.headerBox img {margin-left:-130px;}	
.nav-utente a {margin-bottom: 10px;}	
.claimBox {width:100%;  padding:150px 0 20px 0;}		
.claimBox figure {width:50%;}	
.info-box {padding: 0 50px;}	
.img-box {padding-right: 80px;}
.img-box img {right:35px;}	
.sezNote {padding: 0 20px; box-sizing:border-box;}	
.boxChiSiamo {flex-direction: column; flex-flow: column-reverse; padding: 50px 0;}
.txtChiSiamo, .boxChiSiamo figure {width:100%;}	
.juryBox h2, .awardsBox h2 {font-size:3em;}		
.wrapSponsor ul {grid-template-columns:1fr 1fr 1fr;}
.popUpHome, .popUpHelp {width:80%;}		
}
/* ----------------------- TABLET LANDSCAPE ------------------*/
@media screen and (min-width: 769px) and (max-width: 1024px) {
.three-columns {column-count: 1;}	
.headerBox {grid-template-columns: 1fr 1fr 1fr; grid-gap:10px;}
.nav-header a {float: none;}	
.headerBox img {margin-left:-130px;}	
.nav-utente a {margin-bottom: 10px;}	
.sezNote {padding: 0 20px; box-sizing:border-box;}
.boxChiSiamo {flex-direction: column; flex-flow: column-reverse; padding: 50px 0;}
.txtChiSiamo, .boxChiSiamo figure {width:100%;}	
.wrapSponsor ul {grid-template-columns:1fr 1fr 1fr 1fr;}	
}
/* ----------------------- OVER ------------------*/
@media only screen and (min-width: 1025px){

}