:root {
  --azzurro-rgb: 38, 255, 245;
  --azzurro: rgb(var(--azzurro-rgb));
  --rosa-rgb: 255, 123, 205;
  --rosa: rgb(var(--rosa-rgb));
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-size: cover;
  background-position: center;
}

/* General */

.desktop-on {
  display: inital;
}

.mobile-css {
  display: none;
}

.black {
  color: black;
}

.white {
  color: white;
}

.rosa {
  color: var(--rosa);
}

.bg-rosa {
  background-color: var(--rosa);
}

.azzurro {
  color: var(--azzurro);
}

.bg-azzurro {
  background-color: var(--azzurro);
}

.absolute {
  position: absolute;
}

.uppercase {
  text-transform: uppercase;
}

.grade {
  background: -webkit-linear-gradient(180deg, var(--rosa), var(--azzurro));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

.column-count-2 {
  column-count: 2;
}

section {
  position: relative;
}

img {
  display: block;
  max-width: 100%;
  pointer-events: none;
}

img.cloth-img,
img.ui-draggable,
img.ui-draggable-handle {
  pointer-events: initial;
}

.arrow-down {
  position: absolute;
  bottom: 0;
}

.ff-helvetica-neue strong {
  font-family: "HelveticaNeue Bold";
}

.ff-helvetica-neue em {
  font-family: "HelveticaNeue Italic";
}

.text-center {
  text-align: center;
}

/* ::selection {
  background-color: black;
  color: white;
} */

div.shape {
  position: absolute;
}

div.shape img.shape {
  position: absolute;
}

div.shape img.spinner {
  position: relative;
}

/* General mobile */

@media (max-width: 700px) {
  .bolla-solo-desktop {
    display: none!important;
  }
  section#app .contenitore-app .grid-el.vestiti .arrows button.arrow {
    height: 75px!important;
  }
  .column-count-2 {
    column-count: 1;
  }

  .desktop-on {
    display: none;
  }

  .mobile-css {
    display: initial;
  }
}

@media (max-width: 320px) {
  span.ff-termina.grade {
    font-size: 12.5vw;
  }
}

/* Sezioni */

/* Hero */

section#hero {
  position: relative;
  padding-left: 5.3vw;
  overflow: hidden;
}

section#hero h2,
section#hero h1 {
  font-size: 10vw;
  line-height: 0.82;
  margin-top: 10vw;
  margin-bottom: 10vw;
}

section#hero .immagine {
  background-image: url(https://static2-advtools.rcsobjects.it/native-adv/longform/f03/corriere/hugoboss01/images/bg-hero.jpg);
  background-position: 50% 33%;
  left: 6.75vw;
  overflow: hidden;
  position: relative;
}

section#hero .immagine h1 {
  transform: translateX(-6.75vw);
}

section#hero .immagine div.shape {
  left: 77%;
  top: 40%;
}

section#hero .immagine div.shape img.shape {
  top: -9%;
  left: -9%;
}

section#hero .immagine .testo {
  margin-left: 7.2vw;
  margin-bottom: 7.2vw;
  width: 76vw;
  column-gap: 2.8vw;
}

section#hero .arrow-down {
  left: calc(3.5vw + 5.3vw);
}

/* Hero mobile */

@media (max-width: 700px) {
  section#hero h2,
  section#hero h1 {
    margin-top: 17.3vh;
    font-size: 17.4vw;
    line-height: 1;
  }

  section#hero .immagine div.shape {
    top: 5vh;
    right: 13vw;
    left: initial;
  }

  section#hero .immagine .testo p {
    line-height: 1.5625;
  }

  section#hero .immagine .testo p:not(:last-child) {
    margin-bottom: 1em;
  }

  section#hero .arrow-down {
    bottom: 35%;
    left: -1vw;
  }

  section#hero .immagine .testo {
    margin-bottom: 23vh;
  }
}

/* Identità di genere */

section#identita-di-genere {
  margin-bottom: 9.3vw;
}

section#identita-di-genere .testo-largo {
  padding-left: 5vw;
  padding-right: 5vw;
  padding-top: 8vw;
}

section#identita-di-genere .testo-largo h3 {
  font-family: "Freight Big Light";
  line-height: 1.08;
  font-size: 60px;
  margin-bottom: 3.8vw;
}

section#identita-di-genere .testo-normale {
  padding-left: 20vw;
  padding-right: 20vw;
}

section#identita-di-genere .testo-normale p {
  line-height: 1.43;
}

section#identita-di-genere .arrow-down {
  right: 11vw;
}

/* Identità di genere mobile */

@media (max-width: 700px) {
  section#identita-di-genere .arrow-down {
    right: initial;
    left: 5vw;
  }
}

/* Diverso */

section#diverso {
  background-image: url(https://static2-advtools.rcsobjects.it/native-adv/longform/f03/corriere/hugoboss01/images/diverso.jpg);
  background-position: 50% 35%;
  padding-top: 7vw;
  padding-bottom: 7vw;
}

section#diverso h2,
section#diverso h3 {
  font-family: "Freight Big Light";
  line-height: 1;
}

section#diverso h3 {
  padding-left: 17vw;
  padding-right: 17vw;
  font-size: 4.2vw;
}

section#diverso h2 {
  font-size: 11.9vw;
  margin-bottom: 2.5vw;
}

section#diverso h2 span {
  font-size: 7.4vw;
}

section#diverso h2 span.grade {
  font-family: "Termina Bold";
}

section#diverso h2 span.grade.n1 {
  background: -webkit-linear-gradient(0deg, #27fff5, #3ef0f0);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

section#diverso h2 span.grade.n2 {
  background: -webkit-linear-gradient(0deg, #62dbea, #9ab9e0);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

section#diverso h2 span.grade.n3 {
  background: -webkit-linear-gradient(0deg, #baa5da, #ff7ccd);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

section#diverso .credits p:first-child {
  font-size: 26px;
}

/* Diverso mobile */

@media (max-width: 700px) {
  section#diverso {
    padding-top: 12vh;
    padding-bottom: 7.2vh;
  }

  section#diverso h3 {
    font-size: 7.2vw;
    line-height: 1.17;
    padding-left: 11vw;
    padding-right: 11vw;
    margin-bottom: 3vh;
  }

  section#diverso img.mobile-css {
    margin-bottom: 5.6vh;
  }
}

/* Stereotipi */

section#stereotipi {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  overflow: hidden;
}

section#stereotipi .col.col-1 {
  background-image: url(https://static2-advtools.rcsobjects.it/native-adv/longform/f03/corriere/hugoboss01/images/stereotipi.jpg);
}

section#stereotipi .col.col-2 {
  padding: 3.3vw 8.75vw 4vw 3.125vw;
}

section#stereotipi .col.col-2 h2 {
  font-size: 3.8vw;
  line-height: 1.1;
  margin-bottom: 8.3vw;
}

section#stereotipi .col.col-2 h2 span {
  font-size: 1.2em;
}

section#stereotipi .col.col-2 p {
  font-size: 15px;
  line-height: 1.3333;
}

section#stereotipi div.shape {
  left: 33%;
  top: 57%;
}

section#stereotipi div.shape img.shape {
  left: 31%;
  top: -10%;
}

/* Stereotipi mobile */

@media (max-width: 700px) {
  section#stereotipi {
    grid-template-columns: 1fr;
  }

  section#stereotipi .col.col-1 {
    height: 100vw;
    order: 2;
  }

  section#stereotipi .col.col-2 {
    padding: 5vh 8.75vw 7.8vh 5.5vw;
  }

  section#stereotipi .col.col-2 h2 {
    font-size: 12vw;
    margin-bottom: 13.6vh;
  }

  section#stereotipi .col.col-2 p {
    font-size: 16px;
    line-height: 1.5;
  }

  section#stereotipi div.shape {
    left: 73%;
    margin-top: 400px;
    top: 72%;
  }
}

/* Non si è soli */

section#non-soli {
  background-image: url(https://static2-advtools.rcsobjects.it/native-adv/longform/f03/corriere/hugoboss01/images/non-soli-bg.jpg);
  padding-top: 36vh;
  padding-bottom: 30vh;
  margin-bottom: 9.3vw;
}

section#non-soli h2 {
  padding-left: 12vw;
  padding-right: 12vw;
  font-size: 4.2vw;
  margin-bottom: 5.375vh;
}

/* Non si è soli mobile */

@media (max-width: 700px) {
  section#non-soli {
    background-image: url(https://static2-advtools.rcsobjects.it/native-adv/longform/f03/corriere/hugoboss01/images/non-soli-bg-mob.jpg);
    margin-bottom: 6.4vh;
  }

  section#non-soli h2 {
    font-size: 8.7vw;
    padding-left: 4vw;
    padding-right: 4vw;
  }

  section#non-soli h2 span {
    font-size: 1.17em;
  }
}

/* Tetto */

section#tetto {
  margin-bottom: 11.25vw;
}

section#tetto .heading {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 5vw;
}

section#tetto .heading h2 {
  font-size: 5.2vw;
  line-height: 1.1;
  margin-left: 5vw;
}

section#tetto .heading .bg-rosa {
  padding: 2.222vw 12.8vw 2.222vw 2.222vw;
  position: relative;
}

section#tetto .heading .bg-rosa h3 {
  font-size: 2.8vw;
  line-height: 1.125;
}

section#tetto .heading .bg-rosa h3 strong {
  font-family: "Freight Big Bold";
}

section#tetto .heading .bg-rosa div.shape {
  left: 74%;
  bottom: 0%;
  transform: translateY(50%);
}

section#tetto .heading .bg-rosa div.shape img.shape {
  left: 10%;
  top: 10%;
}

section#tetto .content {
  margin-left: 18.9vw;
  margin-right: 5.5vw;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 2.5vw;
}

section#tetto .content p {
  font-size: 21px;
  line-height: 1.43;
}

section#tetto .content p:not(:last-child) {
  margin-bottom: 24px;
}

section#tetto .content .col.col-2 {
  margin-top: 13.8vw;
}

section#tetto .arrow-down {
  left: 11vw;
  bottom: 8vw;
}

/* Tetto mobile */

@media (max-width: 700px) {
  section#tetto {
    margin-bottom: 11.16vh;
  }

  section#tetto .heading,
  section#tetto .content {
    grid-template-columns: 1fr;
  }

  section#tetto .heading {
    margin-bottom: 13vh;
  }

  section#tetto .heading h2 {
    font-size: 12vw;
    margin-left: 9.2vw;
    margin-bottom: 5.6vh;
  }

  section#tetto .heading h2 span {
    font-size: 1.35em;
  }

  section#tetto .heading .bg-rosa {
    width: 85.5%;
    padding: 5vh 18vw 5vh 9.2vw;
  }

  section#tetto .heading .bg-rosa h3 {
    font-size: 5.8vw;
  }

  section#tetto .heading .bg-rosa div.shape {
    left: initial;
    right: -10%;
  }

  section#tetto .content {
    margin-left: 5.6vw;
  }

  section#tetto .content p {
    font-size: 16px;
  }

  section#tetto .content .col.col-1 p:last-child {
    margin-left: 6vw;
  }

  section#tetto .content .col.col-2 {
    margin-left: 6vw;
    margin-top: 0;
  }

  section#tetto .arrow-down {
    left: 5vw;
    bottom: initial;
    top: 127vh;
  }
}

@media (max-width: 320px) {
  section#tetto .arrow-down {
    top: 145vh;
  }
}

/* Gabbia */

section#gabbia {
  padding-bottom: 4vw;
}

section#gabbia img.main {
  width: 65vw;
  margin: auto;
}

section#gabbia h2 {
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3vw;
}

section#gabbia .credits {
  top: 53%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

section#gabbia .credits > *:not(:last-child) {
  margin-right: 10px;
}

section#gabbia .credits p {
  line-height: 1;
}

section#gabbia .credits p:first-child {
  font-size: 26px;
}

section#gabbia .credits p:last-child {
  font-size: 23px;
  line-height: 1.25;
}

/* Gabbia mobile */

@media (max-width: 700px) {
  section#gabbia h2 {
    top: 12vw;
    font-size: 8.7vw;
    width: 85%;
  }

  section#gabbia img.main {
    width: 100vw;
  }

  section#gabbia .credits {
    top: initial;
    bottom: 17vw;
    width: 90%;
    justify-content: center;
  }

  section#gabbia .credits p:first-child {
    font-size: 21px;
  }

  section#gabbia .credits p:last-child {
    font-size: 16px;
  }
}

/* Senza regole */

section#senza-regole > h2.absolute {
  top: 3.7vw;
  left: 5vw;
  font-size: 4.3vw;
  z-index: 99;
}

section#senza-regole .split-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

section#senza-regole .split-content .col.col-1 {
  padding: 12.6vw 11.1111vw 4.6vw 5vw;
}

section#senza-regole .split-content .col.col-1 p {
  font-size: 16px;
}

section#senza-regole .split-content .col.col-1 p:not(:last-child) {
  margin-bottom: 18px;
}

section#senza-regole .split-content .col.col-2 {
  position: relative;
  background-repeat: no-repeat;
  overflow: hidden;
  background-image: url(https://static2-advtools.rcsobjects.it/native-adv/longform/f03/corriere/hugoboss01/images/senza-regole.jpg);
}

section#senza-regole .split-content .col.col-2 div.shape {
  left: 13%;
  top: 70%;
}

section#senza-regole .split-content .col.col-2 div.shape img.shape {
  left: 15%;
  top: -15%;
}

/* Senza regole mobile */

@media (max-width: 700px) {
  section#senza-regole {
    padding: 6.7vh 5.8vw 0 5.8vw;
  }

  section#senza-regole > h2.absolute {
    position: initial;
    font-size: 12vw;
    line-height: 1;
    margin-bottom: 17vh;
  }

  section#senza-regole > h2 span {
    white-space: initial;
  }

  section#senza-regole .split-content {
    grid-template-columns: 1fr;
  }

  section#senza-regole .split-content .col.col-1 {
    padding: initial;
    padding-bottom: 10vh;
  }

  section#senza-regole .split-content .col.col-1 p {
    line-height: 1.5;
  }

  section#senza-regole .split-content .col.col-2 {
    height: 100vw;
    margin-left: -5.8vw;
    margin-right: -5.8vw;
  }

  section#senza-regole .split-content .col.col-2 div.shape {
    top: 60%;
  }
}

/* GenZ */

section#genz .container-genz {
  background-image: url(https://static2-advtools.rcsobjects.it/native-adv/longform/f03/corriere/hugoboss01/images/genz-bg.png);
  padding-top: 0.5vw;
  background-repeat: no-repeat;
  padding-bottom: 1.8vw;
  margin-bottom: 9vw;
  background-size: 120%;
}

section#genz img {
  width: 66vw;
  margin: auto;
}

section#genz h3.absolute {
  top: 50%;
  left: 50%;
  transform: translateX(-50%) rotate(-10deg);
  background-color: var(--azzurro);
  font-size: 3.5vw;
  width: 85vw;
  /* line-height: 1.6; */
}

section#genz .credits.absolute {
  top: 70%;
  left: 55%;
}

section#genz .credits.absolute p:first-child {
  font-size: 26px;
}

section#genz .credits.absolute p:last-child {
  font-size: 19px;
}

/* GenZ mobile */

@media (max-width: 700px) {
  section#genz {
    height: 100vh;
    background-image: url(https://static2-advtools.rcsobjects.it/native-adv/longform/f03/corriere/hugoboss01/images/genz-mob.jpg);
    margin-bottom: 12vh;
  }

  section#genz img {
    display: none;
  }

  section#genz h3.absolute {
    font-size: 6.7vw;
  }

  section#genz h3.absolute span {
    font-size: 0.7em;
  }

  section#genz .credits.absolute {
    top: 64%;
    left: 62%;
  }

  section#genz .credits.absolute p {
    color: white;
  }

  section#genz .credits.absolute p:first-child {
    font-size: 21px;
  }

  section#genz .credits.absolute p:last-child {
    font-size: 16px;
  }
}

/* Trend */

section#trend {
  padding: 0 5vw;
  margin-bottom: 13vw;
}

section#trend h2 {
  font-size: 5.5vw;
  line-height: 1;
  margin-bottom: 2.4vw;
}

section#trend h3 {
  font-size: 3.1vw;
  line-height: 1.2;
  margin-bottom: 6.7vw;
}

section#trend div.shape {
  left: 56%;
  top: 10%;
}

section#trend div.shape img.shape {
  left: -13%;
  top: -13%;
  transform: scale(1.3, 1.3);
  min-width: 140px;
}

section#trend .content {
  margin-left: 15.5vw;
  column-gap: 3.3vw;
}

section#trend .content p {
  line-height: 1.4;
}

section#trend .arrow-down {
  left: 10vw;
}

/* Trend mobile */

@media (max-width: 700px) {
  section#trend h2 {
    font-size: 12vw;
    margin-bottom: 4.7vh;
  }

  section#trend h2 span {
    white-space: initial;
  }

  section#trend h3.mobile-css {
    font-size: 5.8vw;
    line-height: 1.25;
    display: block;
    width: 57.5vw;
    margin: 0;
  }

  section#trend .content {
    padding-top: 7vh;
    margin-left: 0;
  }

  section#trend .content p {
    padding-left: 2vw;
  }

  section#trend .content p:first-child {
    padding-left: 10.7vw;
    margin-bottom: 2em;
  }

  section#trend .arrow-down {
    left: 5vw;
    bottom: initial;
    top: 57%;
  }

  section#trend div.shape {
    left: 72%;
    top: 19%;
    width: 21%;
  }
}

@media (max-width: 320px) {
  section#genz {
    height: 73vh;
  }
  section#non-soli {
    padding-top: 23vh;
    padding-bottom: 23vh;
  }
  section#trend .arrow-down {
    top: 53%;
  }
  section#identita-di-genere .testo-largo h3 {
    font-size: 33px;
  }
}

/* App */

section#app .contenitore-app {
  display: grid;
  grid-template-columns: 8fr 2fr;
}

section#app .contenitore-app .grid-el.screen {
  background-image: linear-gradient(to top, var(--azzurro), var(--rosa));
  padding-top: 2.7vw;
  padding-bottom: 5.2vw;
  text-align: center;
  position: relative;
}

section#app .contenitore-app img.be-your-boss-type {
  left: 50%;
  top: 27%;
  transform: translateX(-50%);
}

section#app .contenitore-app h2 {
  font-size: 1.4vw;
  margin-bottom: 1.35vw;
}

section#app .contenitore-app .manichini {
  display: flex;
  align-items: center;
  justify-content: center;
}

section#app .contenitore-app .manichini .manichino-cont {
  position: relative;
}

section#app .contenitore-app .manichini .manichino-cont img.manichino {
  width: 13vw;
  max-width: initial;
}

section#app .contenitore-app .manichini .manichino-cont img.vestito-su-manichino {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

section#app .contenitore-app .grid-el.vestiti {
  display: grid;
  place-items: center;
  position: relative;
}

section#app .contenitore-app .grid-el.vestiti .clothes-grid-cont {
  position: absolute;
  height: 80%;
  width: 70%;
  overflow-x: visible;
  z-index: 9;
  top: 10%;
  left: 15%;
  padding-bottom: 4px;
}

section#app .contenitore-app .grid-el.vestiti .clothes-grid-cont .clothes-cont {
  height: 100%;
  overflow-y: hidden;
}

section#app .contenitore-app .grid-el.vestiti .clothes-grid .cloth.already-picked {
  opacity: 30%;
  border: 0 !important;
  cursor: no-drop;
}

section#app .contenitore-app .grid-el.vestiti .clothes-grid .cloth.already-picked img {
  pointer-events: none;
  cursor: no-drop;
}

section#app .contenitore-app .grid-el.vestiti .clothes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0.83vw;
  transition-property: margin;
  transition-duration: 0.3s;
}

section#app .contenitore-app .grid-el.vestiti .clothes-grid .cloth {
  padding: 0.8vw;
  border: 1px dotted rgba(0, 0, 0, 0.5);
  margin-bottom: 1.5px;
}

section#app .contenitore-app .grid-el.vestiti .clothes-grid .cloth img {
  width: 100%;
  height: 6.7vw;
  object-fit: cover;
  object-position: center;
  cursor: grab;
}

section#app .contenitore-app .grid-el.vestiti .arrows {
  width: 100%;
  height: 94%;
  left: 0;
  top: 3%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}

section#app .contenitore-app .grid-el.vestiti .arrows button.arrow {
  all: unset;
  cursor: pointer;
  position: relative;
  width: 11px;
  height: 18px;
}

section#app .contenitore-app .grid-el.vestiti .arrows button.arrow.disabled {
  opacity: 0.2;
  pointer-events: none;
  transition-property: opacity;
  transition-duration: 0.3s;
}

section#app .contenitore-app .grid-el.vestiti .arrows button.arrow img {
  width: 100%;
  height: 100%;
}

body.risposta-visibile .app-response {
  opacity: 1;
  visibility: visible;
  transition: all 300ms ease-in-out;
}

body.risposta-visibile {
  overflow: hidden;
}

.app-response {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  opacity: 0;
  z-index: 99;
  visibility: hidden;
}

.close-response {
  padding: 10px;
  background: #fff;
  transition: all 300ms ease-in-out;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

.close-response:hover {
  color: #fff;
  background: #000;
}

.app-response .container-response {
  top: 0;
  right: 0;
  z-index: 9999;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  background-image: linear-gradient(to top, var(--azzurro), var(--rosa));
  padding: 6vw;
}

/* Learn more */

section#learn-more {
  background-image: url(https://static2-advtools.rcsobjects.it/native-adv/longform/f03/corriere/hugoboss01/images/learn-more-bg.jpg);
  background-position: 50% 30%;
  padding: 0;
  display: grid;
  place-items: center;
}

section#learn-more a.button {
  /* font-family: "HelveticaNeue Bold"; */
  line-height: 1;
  font-size: 16px;
  color: black;
  background-color: white;
  padding: 1em 2em;
  text-decoration: none;
}

section#learn-more a.button:hover {
  color: white;
  background-color: black;
}

section#learn-more p.absolute {
  bottom: 10%;
  left: 55%;
  font-size: 4.2vw;
}

/* Learn more mobile */

section#learn-more p.absolute {
  display: none;
}

/* Fine */

.arrow-down a {
  cursor: pointer;
  position: relative;
  top: 0;
  transition: top 300ms ease-in-out;
}

.arrow-down a:hover {
  top: 20px;
}

.img-1 {
  max-height: 80vh;
  position: absolute;
  width: 100%;
}

section#non-soli {
  background-size: cover;
  background-repeat: no-repeat;
}

/*video*/
.video-inline {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: auto;
}
.video-inline video {
  position: relative;
  display: block;
  width: 100%;
  background-color: #000;
  height: auto;
}
.video-inline:not(".onair") video {
  object-fit: cover;
}
.video-inline .video-button {
  display: block;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  z-index: 100;
  cursor: pointer;
  position: absolute;
  border-radius: 100%;
  transition: all 400ms;
}
.video-inline .video-button.on-play {
  color: #fff;
  right: 20px;
  bottom: -100px;
  border: 1px solid;
  border-radius: 0;
  font-size: 14px;
}
.video-inline .video-button.on-play[data-command="pause"] {
  margin-right: 50px;
}
.video-inline .video-button.on-play[data-command="fullscreen"] {
}
.video-inline .video-button.on-stop {
  position: absolute;
  width: 120px;
  height: 120px;
  left: 50%;
  top: 50%;
  margin: -60px -60px;
  cursor: pointer;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  background-repeat: no-repeat;
  text-align: center;
  transition: all 500ms;
  background: transparent;
  outline: 0;
  border: 0;
  z-index: 10;
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.7);
}
.video-inline .video-button.on-stop:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 20px 28px;
  border-color: transparent transparent transparent #75d0e7;
  top: 50%;
  left: 50%;
  margin: -20px -10px;
  background: #;
  color: #75d0e7;
}
.video-inline.video-fullwidth {
  margin: 0;
}
.video-inline.onair .video-button.on-play {
  bottom: 20px;
}
.video-inline.onair .video-button.on-stop {
  opacity: 0;
  z-index: -100;
}

.ui-draggable-helper {
  width: auto !important;
  left: -150px;
  top: -150px;
}

section#identita-di-genere .testo-normale p em,
section#identita-di-genere .testo-normale p strong {
  font-family: "HelveticaNeue" !important;
}

.pallino-animato {
  -webkit-animation-name: steam;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-name: steam;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  position: relative;
}
button,
a {
  -webkit-tap-highlight-color: transparent !important;
}
body * {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
* {
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
}

@-webkit-keyframes steam {
  0%,
  100% {
    -webkit-transform: skewX(2deg);
    opacity: 1;
  }
  25% {
    -webkit-transform: skewX(-8deg);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: skewX(-2deg);
    opacity: 0.7;
  }
  75% {
    -webkit-transform: skewX(8deg);
    opacity: 0.9;
  }
}
@keyframes steam {
  0%,
  100% {
    transform: skewX(2deg);
    opacity: 1;
  }
  25% {
    -webkit-transform: skewX(-8deg);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: skewX(-2deg);
    opacity: 0.7;
  }
  75% {
    -webkit-transform: skewX(8deg);
    opacity: 0.9;
  }
}

@media (min-width: 701px) {
  
	#right_top_area a, .rightimg a {pointer-events: none; cursor: default;}
  .bolla-solo-mobile {
    display: none!important;
  }
  #bannerGizmo .close {
    z-index: 9999999 !important;
  }
  section#hero .immagine .testo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .slideup {
    overflow: hidden;
    display: block;
  }
  .slideup > * {
    transition: all 800ms;
    transform: translate3d(0px, 100%, 0px);
    display: block;
  }
  .slideup.appeared > * {
    transform: translate3d(0px, 0%, 0px);
  }
  section#hero .arrow-down {
    left: 0;
    margin-top: -40px;
    bottom: 79px;
  }
}

@media only screen and (min-width: 701px) and (max-width: 990px) {
  section#identita-di-genere .testo-largo span {
    white-space: unset;
  }
}
@media only screen and (max-width: 701px) {
  .app-response .container-response {
    width: 80% !important;
    padding: 20vw 9vw !important;
  }
  section#senza-regole .split-content .col.col-2 div.shape {
    left: 17%;
  }
  section#diverso {
    background-position: center !important;
  }
  .site-main {
    overflow-x: hidden;
    margin-top: 63px;
  }
  section#identita-di-genere .testo-largo span {
    white-space: unset;
  }
  .site-main .fs-20,
  .site-main {
    font-size: 16px;
  }
  section#identita-di-genere .testo-largo h3 {
    font-size: 46px;
    padding-top: 45px;
    padding-bottom: 28px;
  }
  section#identita-di-genere .testo-largo span.mobile-css {
    display: block;
  }
  section#identita-di-genere .testo-normale {
    padding-left: 15vw;
    padding-right: 6vw;
  }
  .video-inline .video-button.on-stop {
    width: 68px;
    height: 68px;
    transform: translate(-50%, -50%);
    margin: 0;
  }
}

/* App Mobile */

@media only screen and (max-width: 480px) {
  section#non-soli,
  section#genz {
    background-size: contain !important;
    background-repeat: no-repeat;
  }
}

@media (max-width: 700px) {
  section#genz .container-genz {
    background: none;
  }
  .wrong-warning {
    font-size: 50vw!important;
  }
  #right_top_area a {
    position: relative;
    z-index: 999999;
    pointer-events: default;
  }
  section#diverso img.mobile-css {
    max-width: 78%;
  }
  section#app .contenitore-app {
    grid-template-columns: 1fr;
  }

  section#app .contenitore-app .grid-el.screen {
    padding: 6vh 3vw;
  }

  section#app .contenitore-app h2 {
    font-size: 4.4vw;
    margin-bottom: 0;
  }

  section#app .contenitore-app img.be-your-boss-type {
    max-width: initial;
    top: 33%;
    width: 150%;
  }

  section#app .contenitore-app .manichini {
    margin-top: 4vh;
  }

  section#app .contenitore-app .manichini .manichino-cont:not(:last-child) {
    margin-right: 10vw;
  }

  section#app .contenitore-app .manichini .manichino-cont img.manichino {
    width: 33vw;
  }

  section#app .contenitore-app .grid-el.vestiti {
    height: 15vh;
  }

  section#app .contenitore-app .grid-el.vestiti .clothes-grid-cont {
    width: 80%;
    left: 10%;
    overflow-x: initial;
    overflow-y: visible;
  }

  section#app .contenitore-app .grid-el.vestiti .clothes-grid {
    display: flex;
    position: relative;
    flex-wrap: nowrap;
    height: 100%;
  }

  section#app .contenitore-app .grid-el.vestiti .clothes-grid .cloth:first-child {
    margin-left: 0;
  }

  section#app .contenitore-app .grid-el.vestiti .clothes-grid .cloth {
    margin-right: 2vw;
    height: 100%;
    /* display: inline-block; */
  }

  section#app .contenitore-app .grid-el.vestiti .clothes-grid .cloth img {
    max-width: initial;
    width: 55px;
    height: 100%;
  }

  section#app .contenitore-app .grid-el.vestiti .arrows {
    flex-direction: initial;
    padding-left: 4%;
    padding-right: 4%;
  }

  section#app .contenitore-app .grid-el.vestiti .arrows button.arrow img {
    transform: rotate(-90deg);
  }
}

.wrong-warning {
  opacity: 0;
  visibility: hidden;
  transition: all 300ms ease-in-out;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 9;
  font-size: 22vw;
  transform: translate(-50%, -50%);
}
.wrong-warning.wrong-active {
  opacity: 1;
  visibility: visible;
}

#cta {
  padding: 10vw 0;
  text-align: center;
}

#cta a {
  background: #000;
  color: #fff;
  border: 1px solid #000;
  padding: 18px 35px;
  text-decoration: none;
  font-size: 17px;
  transition: all 300ms ease-in-out;
}
#cta a:hover {
  background: #fff;
  color: #000;
}

@media (max-width: 700px) {
  #cta {
    padding: 100px 0;
    text-align: center;
  }
  #cta a {
    padding: 13px 35px;
    font-size: 13px;
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) and (min-width: 701px) {
  section#app .contenitore-app .grid-el.vestiti .clothes-grid-cont {
    left: 21%;
  }
  section#app .contenitore-app .grid-el.screen {
    width: 80%;
    float: left;
  }
  section#app .contenitore-app .grid-el.vestiti {
    width: 20%;
    float: left;
  }
  section#app .contenitore-app .grid-el.vestiti .clothes-grid {
    display: table;
    width: 100% !important;
  }
  section#app .contenitore-app .grid-el.vestiti .clothes-grid .cloth img {
    height: 6vw;
  }
  section#app .contenitore-app .grid-el.vestiti .clothes-grid .cloth {
    width: calc(50% - 30px);
    margin-bottom: 15px;
    float: left;
  }
  section#app .contenitore-app .grid-el.vestiti .clothes-grid .cloth:nth-child(n + 1) {
    margin-right: 15px;
  }
  section#stereotipi,
  section#tetto .heading,
  section#tetto .content,
  section#senza-regole .split-content,
  section#app .contenitore-app {
    display: flex;
  }
  section#tetto .content .col-1 {
    width: 50%;
    float: left;
    padding-right: 25px;
  }
  section#tetto .content .col-2 {
    width: 50%;
    float: left;
    padding-left: 25px;
  }
  section#senza-regole .split-content .col-1,
  section#senza-regole .split-content .col-2,
  section#stereotipi .col-1,
  section#stereotipi .col-2,
  section#tetto .heading h2,
  section#tetto .heading .bg-rosa {
    width: 50%;
    float: left;
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  a {
    text-decoration: none;
  }
  section#app .contenitore-app .grid-el.vestiti .clothes-grid .cloth.already-picked {
    opacity: 0.3;
  }
  .site-main {
    overflow-x: hidden;
  }
  section#genz h3.absolute {
    transform: translateX(-50%) rotate(-10deg) !important;
  }
  section#hero .immagine h1 {
    margin-left: -6.75vw;
    transform: none !important;
  }
  .appearance {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .bg-rosa {
    background-color: #ff7bcd;
  }
  section#genz h3.absolute {
    background-color: #26fff5;
  }
  section#app .contenitore-app .grid-el.screen {
    background: linear-gradient(#ff7bcd, #26fff5);
  }
}

#left_sponsor a {
  pointer-events: none;
  cursor: default;
}

#bannerGizmo > div {
  z-index: 9999 !important;
}

section p strong,
section p em {
  font-family: "HelveticaNeue" !important;
}

@media only screen and (min-width: 701px) and (max-width: 1100px) {
  section#identita-di-genere .testo-largo {
    padding-left: 8vw;
    padding-right: 8vw;
  }
  section#non-soli h2 {
    padding-left: 4vw;
    padding-right: 4vw;
  }
  section#tetto .heading h2 {
    margin-left: 8vw;
  }
  section#senza-regole .split-content .col.col-1 {
    padding: 12.6vw 6.1111vw 4.6vw 8vw;
  }
  section#senza-regole > h2.absolute {
    left: 8vw;
  }
  section#trend {
    padding: 0 8vw;
  }
}

@media only screen and (max-width: 700px) {
  section#non-soli {
    background-position: center center!important;
  }
  section#genz h3.absolute {
    top: 41%;
  }
  section#app .contenitore-app .grid-el.vestiti .clothes-grid-cont .clothes-cont {
    overflow-y: visible;
  }
  section#app .contenitore-app .grid-el.vestiti .arrows button.arrow {
    z-index: 99;
    touch-action: manipulation;
  }
  .bg-bianco {
    position: absolute;
    left: 0;
    width: 10vw;
    height: 15vh;
    background: #fff;
    z-index: 9;
    bottom: 0;
  }
  .bg-bianco2 {
    position: absolute;
    right: 0;
    width: 11vw;
    height: 15vh;
    background: #fff;
    z-index: 9;
    bottom: 0;
  }
  section#stereotipi div.shape {
    left: 66%;
    top: 45%;
  }
  section#stereotipi div.shape img.shape {
    left: -14%;
    top: -10%;
  }
  section#trend div.shape img.shape {
    left: -27%;
    min-width: 105px;
    top: -31%;
  }
}
@media only screen and (min-width: 701px) {
  section#tetto .heading h2 {
    line-height: 1;
  }
  section#tetto .heading h2 span {
    line-height: 1.2;
  }
}