html {
  scroll-behavior: smooth;
}
	
* {box-sizing: border-box; font-family: 'DM Sans', sans-serif;}
body { margin: 0;}
h1, h2, h3, h4, h5 , h5 {font-family: 'Poppins', sans-serif;}
.header {background-color:#fff;}
input[type=text], textarea {padding: 10px; width: 100%; font-size: 17px; border: 1px solid #aaaaaa; border-radius:5px;}
.claim h1 {font-size:2.5em;}
.claim h2 {font-size:1.5em;}
.footer {background-color:#333;}	
.sez h2, .sez h3 {font-weight:bold; color:limegreen;}	
.footer a {color:#fff; display:block; text-decoration:none; }	
.footer {font-size:.9em;}	
.ico {background-repeat: no-repeat; background-size: 100% auto; background-position: center; width: 180px; height: 180px; display: inline-block; padding-top: 180px; text-align: center;}
.separatore {border: 2px solid #ffb310; width: 80px;}

.bigButton {background-color:#ffedcf; cursor:pointer;}
.bigButton:hover {background-color:#ffb310; color:#fff;}

.txt-verde {color:#28a745;}
.bg-giallo {background-color:#ffb310;}
.bg-gialloChiaro {background-color:#ffedcf;}
.bg-verde {background-color:#28a745;}

.btn-verde {background-color:#28a745;}
.btn-verde:hover {background-color:#ffb310;}

.btn-giallo {background-color:#ffb310;}
.btn-giallo:hover {background-color:#28a745;}

.topnav {
  overflow: hidden;
  color:#000;
  float:right;	
	position:absolute;
	right:40px; 
	top:16px;
}

.topnav a {
  float: left;
    display: block;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover:not(:first-child) {
  background-color: none;
}

.topnav .icon {
  display: none;
}
.topnav .icon:hover {
  background-color: none;
}

  .topnav a:not(:first-child) {display: none; background-color:#fff;}
  .topnav a.icon {
    float: right;
    display: block;
	  color:#000;
	  padding: 17px;
  }

.topnav.responsive .finestra {display:inline-block;}
.topnav .finestra {display:none;}
  .topnav.responsive {display:inline-block; width:20%; z-index:999;}
  .topnav.responsive .icon {width:49px; text-align:right; background-color:#ddd; float:right;}
  .topnav.responsive a {width:100%;
    display: block;
    text-align: left;
	  color: #333;
	  position: relative;
  }

.topnav.responsive a.active {font-weight:bold;}
.topnav.responsive a.active::after {content: '';
    position: absolute;
    bottom: 10px;
    left: 0px;
    right: 89%;
    height: 3px;
    background-color: #ffb310;}

#popupcontatti {position: absolute; z-index: 11; top: 50px; background-color: rgb(254 254 254); width: 500px; left: 50%; margin-left: -250px; display: block; border: 2px solid #767676; border-radius: 4px; display: none; }	
	
/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
  display: none;
  overflow: hidden;
}

button {
  background-color: #4CAF50;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}


/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: transparent;
  border: 1px solid #28a745; 
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
	background-color:#28a745;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #4CAF50;
}
	
.cc-selector input, .cc-selector-2 input, .cc-selector-3 input {
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

.int{background-image:url(../img/int.png);}
.intevoce{background-image:url(../img/int+tel.png);}
.modem{background-image:url(../img/modem.png);}
.nomodem{background-image:url(../img/nomodem.png);}
.nonso{background-image:url(../img/man.png);}
	
.cc-selector-3 input:active +.drinkcard-cc, .cc-selector-2 input:active +.drinkcard-cc, .cc-selector input:active +.drinkcard-cc{opacity: .9;}
.cc-selector-3 input:checked +.drinkcard-cc, .cc-selector-2 input:checked +.drinkcard-cc, .cc-selector input:checked +.drinkcard-cc{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    height:60px;
	padding-left: 70px;
    line-height: 60px;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
            filter: brightness(1.8) grayscale(1) opacity(.7);
}
.drinkcard-cc:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}	

.select2-container--open .select2-dropdown {top:-39px};
.logoSX {width:100%:}
.logoDX {width:9%}	
	
.bounce-in-left {
	animation: bounce-in-left 1.1s both;
}

@keyframes bounce-in-left {
  0% {
    transform: translateX(-600px);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    transform: translateX(0);
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    transform: translateX(-68px);
    animation-timing-function: ease-in;
  }
  72% {
    transform: translateX(0);
    animation-timing-function: ease-out;
  }
  81% {
    transform: translateX(-28px);
    animation-timing-function: ease-in;
  }
  90% {
    transform: translateX(0);
    animation-timing-function: ease-out;
  }
  95% {
    transform: translateX(-8px);
    animation-timing-function: ease-in;
  }
  100% {
    transform: translateX(0);
    animation-timing-function: ease-out;
  }
}
	
.bounce-in-up {
	animation: bounce-in-up 1.1s both;
}

@keyframes bounce-in-up {
  0% {
    transform: translateY(1500px);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    transform: translateY(0);
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    transform: translateY(68px);
    animation-timing-function: ease-in;
  }
  72% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  81% {
    transform: translateY(28px);
    animation-timing-function: ease-in;
  }
  90% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  95% {
    transform: translateY(8px);
    animation-timing-function: ease-in;
  }
  100% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
}
	
	
/*Extra small devices (portrait phones, less than 576px)*/
@media screen and (max-width: 575.98px) {
.logoSX {width:50%;}
.logoDX {width:20%;}
.ico {padding-top:140px; width:140px; height:140px;}
#popupcontatti {width:320px; margin-left:-160px;}	
.imgRiga1 {width:100%; padding-bottom:20px;}
.topnav {right:10px; top:13px}
.topnav a.icon {padding:8px;}	
.topnav.responsive .icon {width:31px;}
.topnav.responsive {width:95%;}
.bullets {margin-top:40px;}	
.m-switch {display:block;}	
.d-switch {display:none;}	
}

/*Small devices (landscape phones, 576px and up)*/
@media screen and (min-width: 576px) and (max-width: 767.98px) {	
.imgRiga1 {width:100%; padding-bottom:20px;}	
.topnav {right:10px; top:10px}	
.topnav.responsive {width:44%;}	
.bullets {margin-top:40px;}
.m-switch {display:block;}	
.d-switch {display:none;}		
}

/*Medium devices (tablets, 768px and up)*/
@media screen and (min-width: 768px) and (max-width: 991.98px) { 
.ico {padding-top:150px; width:150px; height:150px;}	
.logoDX {width:14%;}	
.imgRiga1 {width:100%; padding-bottom:20px;}	
.topnav {right:10px; top:10px}	
.topnav.responsive {width:44%;}	
.bullets {margin-top:40px;}	
.m-switch {display:block;}	
.d-switch {display:none;}			
}

/*Large devices (desktops, 992px and up)*/
@media screen and (min-width: 992px) and (max-width: 1199.98px) { 
.ico {padding-top:150px; width:150px; height:150px;}
.logoDX {width:14%;}
.imgRiga1 {float:right; padding-left:20px;}	
.bordoDx {border-right: 1px solid #adb5bd;}	
.bullets {margin-top:-25px;}	
.m-switch {display:none;}	
.d-switch {display:block;}		
}

/*Extra large devices (large desktops, 1200px and up)*/
@media screen and (min-width: 1200px) {
.imgRiga1 {float:right; padding-left:20px;}	
.bordoDx {border-right: 1px solid #adb5bd;}
.bullets {margin-top:-25px;}		
.m-switch {display:none;}	
.d-switch {display:block;}		
}