@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Gloock&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

:root {
  --ff: "Montserrat", sans-serif;
  --fontitolo: "Playfair Display", serif;
  --colorp: #f9f9f9;
  --colorp2: #fff;
  --colora: #f614c1;
  --colora2: #4e16f7;
  --colora3: #dbe753;
  --colorbody: #1e1e1e;
  --colors: #333;

  --gradient1: linear-gradient(45deg, var(--colora) 0%, var(--colora2) 70%);
  --gradient2: linear-gradient(45deg, var(--colora3) 0%, var(--colora2) 100%);
  --gradient3: linear-gradient(45deg, lightgrey 0%, white 50%);


  --h1: bold 10vw var(--ff);
  --h2: 400 5vw "Gloock", serif, normal;
  --h2b: 400 6vw "Playfair Display", serif, auto, normal;
  --h3: 100 2vw "Playfair Display", serif, auto, normal;
  --h4: 400 5vw  "Luckiest Guy", normal;


  --links: 18px/18px var(--ff);
  --p: 18px/30px var(--ff);
  --p1: 24px/30px var(--ff);
  --p2: 36px/48px var(--ff);
  --subtext: 12px/20px var(--ff);
  --transition: 0.3s ease-in-out;
  --shadow: #00000030 0px 0px 10px 0px;
}



* {
  margin:0;
  padding:0;
  border:0;
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  background-color: transparent;
}

body, html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body{
  width: 100%;
  color:white;
  background-size: 100% 100%;
  background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px;
  background: radial-gradient(49% 81% at 45% 47%, #FFE20345 0%, #073AFF00 100%),radial-gradient(113% 91% at 17% -2%, #00D4FFFF 1%, #FF000000 99%),radial-gradient(142% 91% at 83% 7%, #E0FF00FF 1%, #FF000000 99%),radial-gradient(142% 91% at -6% 74%, #030619AB 1%, #FF000000 99%),radial-gradient(142% 91% at -6% 74%, #0900FFFF 1%, #FF000000 99%),radial-gradient(142% 91% at 111% 84%, #FF07E600 -1%, #FF0000FF 100%),radial-gradient(142% 91% at 111% 84%, #3C00FFFF 0%, #FF0000FF 100%);  
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  
}


h1 {
  font-weight: 700;
  max-width: 100%;
  background: linear-gradient(90deg, #00ADFFFF 0%, #5BF5EFFF 23%, #66EE6CFF 43%, #FCF67CFF 63%, #CF90F8FF 83%, #7172FFFF 99%);
  background-clip: text;
  color: transparent;
  display:block;
  font: var(--h1);
  font-size: clamp(43px, 10vw, 200px);
  margin: 0;
  margin-top:40px;
  text-shadow: #00000030 2px 2px;
  animation:  colorfulh1 20s infinite;
  animation: zoominposition 0.7s ease-in-out;
}

@keyframes zoominposition {
  from {
    scale: 600% 600%;
    opacity: 0;
  }

  to {
    scale: 100% 100%;
    opacity: 1;
  }
}


@keyframes colorfulh1 {
  100% {
    filter: hue-rotate(360deg);  
  }
}


h2
{
  background-image: linear-gradient(45deg, #00FFF3FF 0%, #00FF9EFF 50%, #C0FF00FF 100%);

  background-clip: text;
  color: transparent;
  display:block;
  margin: 0;
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-size: clamp(32px, 8vw, 150px);
  font-weight: 600 ;
  font-style: italic;
  text-shadow: #00000030 1px 1px;
  animation: zoominposition 0.7s ease-in-out;
  animation-delay:200ms;
}

h3{
  color: white;
  display:block;
  padding:2em 1em;
  text-shadow: #00000030 1px 1px;
  font-size: clamp(20px, 2.5vw, 70px);
  line-height: clamp(22px, 2.5vw, 40px);
  opacity: 1 !important;
  position: relative;

}

h3 > span
{
  color: white;
  font: var(--h3);
  font-size: 1em;
  color: #0ef;
  text-shadow: 0 0 5px #0ef;
  display: inline-block;
  /* NON serve position: relative per il cursore, se il cursore è inline */
  animation: colorful 4s infinite;
}

h3,
h3 > span {
  text-shadow: #1e1e1e 1px 1px;
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 50 ;

}


@keyframes slide {
  100% {
      top: -360px;
  }
}

@keyframes colorful {
  100% {
      filter: hue-rotate(360deg);
  }
}

h4, h4 a{
  color: white;
  display:block;
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-size: 3em;
  font-weight: 600 ;
  font-style: italic;
  text-align: left;
  background-clip: text;

  text-shadow: #00000030 2px 2px;
  margin: 0;
  width:fit-content;
  mix-blend-mode:add;
  transform: translate3d(0,0,0);
}




h5, h5 > label {
  text-align: left;
  margin:0;
  margin-top:40px;
  color: white;
  display:block;
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-size: 1.8em;
  font-weight: 400 ;
  font-style: italic;
  text-align: left;
  background-clip: text;

  text-shadow: #00000030 2px 2px;
  color:#f9f1cf;
}

h5 > label {
  font-size:1em;
 
}

strong{
  font-weight: 500;
}


.sale {
  width: fit-content;
  margin-right:50px;
  display:inline-block;
}

.scrittaorariolezioni {
  display: inline-block;
  margin-right:50px;
}

#orariosala2
{
  display: none;

    transition: all 1.5s ease;

}

#scrittasala2 {
  display:none;
}

#scrittasala2:hover{
  display:contents;
}

.sale:hover {
  cursor:pointer;
}

h6 {
  font-size: 1.7em;
  text-shadow: #00000030 2px 2px;
  color:#f9f1cf;
  font-weight: 300;

}

p{
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  text-shadow: #00000030 1px 1px;
  padding:0;
}

p > b{
  font-weight: 400;
  color:#5ffbc2;
}

a,
.gridcard a,
.contatti a,
.social-insegnanti a{
 
  background-image: linear-gradient(45deg, #008793 0%, #00bf72 30%, #a8eb12 100%);
  background: var(--gradient1);
  background: linear-gradient(90deg, #FCF67C 0%, #CF90F8 90%);
  background-clip: text;
  color: transparent;
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  text-decoration: none;
  text-shadow: #e9eaeb95 1px 1px;
  text-shadow: #00000030 1px 1px;
  margin: 0;
  transition: all 0.5s ease-in-out;
}

.social-insegnanti a, .social-insegnanti p {

  text-shadow: #00000050 1px 1px;
}

div a {
  background: none;
  color:white;
}

a:hover,
.gridcard a:hover,
.contatti a:hover,
.social-insegnanti a:hover{
 
    background-image: linear-gradient(45deg, #00e8fd 0%, #03ff9a 30%, #b5ff15 100%);
    transition: all 0.5s ease-in-out;
    /* text-shadow: none; */
}

div a:hover {
  background-image: none;
}

.contenitore
{
  width:80%;
  margin:auto;
}

.sezione 
{
  width:100%;
  margin-top:10vw;
}

.sezione:first-child{
  margin-top:1vh;
}

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* background: rgba(0,0,0,0.5); */
  background-image: linear-gradient(90deg, rgba(31, 4, 32, 0.80),rgba(12, 12, 93, 0.80));
  color:white;
  margin-bottom:100px;
  position: relative;
  overflow: hidden;
  height: 40vw;
  min-height: 500px;
   -webkit-mask-image: linear-gradient(black 70%, transparent 97%);
  mask-image: linear-gradient(black 70%,  transparent 97%); 
}

.videobg {
  position:absolute;
  z-index: -1;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  /* min-width: 100%;
  min-height: 50%; */
  width: 100%;
  height: auto;
  object-fit: cover;
  min-width: 1080px;
  background-image: url(video/bgvideo.jpg);
  background-size: cover;
  resize: both;
  overflow: scroll;

}

.fadenero
{
  margin-top: -600px;
  width: 100%;
  height:600px;
  z-index:-1;
  position: absolute;
  mix-blend-mode: add;
  opacity: 0.5;
  display: none;
}

video {
  aspect-ratio: 16/9;
  background-size: cover;
  background-image: url(video/bgvideo.jpg);
  background-size: cover;
  resize: both;
  overflow: scroll;
  mix-blend-mode: darken;
}


/* ***************** CARDS ************** */

.flex-cards {
  width: 100%;
  margin: auto;
  margin-top:70px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  text-align: left;
  align-content: center;
}

.grid-cards {
  width: 100%;
  margin: auto;
  display: grid;
  gap: 10px;
  flex-wrap: wrap;
  text-align: left;
  align-content: center;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

}

.flex-cards > div {
  flex: 1;
}
.card > p ,
.gridcard >p {
  margin: 0px;
  line-height: 24px;
  color:#333;
  color:whitesmoke;
  font-size:1.2em;
}

.card {
  margin:auto;
  height: auto;
  margin-top: 40px;
  min-width:250px;
  width:100%;
  background-color: rgba(245, 237, 237, 0.2);
  border:color(srgb red green blue);
  border-radius: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: left;
  justify-content: center;
  transition: var(--transition);
  box-shadow: var(--shadow);
  padding:15px;
  background-image: linear-gradient(to right top, #05193720, #004d7a20, #00879320, #00bf7220, #a8eb1220);
  
}

.card::after {
  background-color: black;
  border: black 4px solid;
}

.card-insegnanti {
  margin:auto;
  height: auto;
  margin-top: 60px;
  min-width:230px;
  width: 100%;
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  text-align: left;
  align-content: left;
  
  background-color: rgba(245, 237, 237, 0.2);
  border:color(srgb red green blue);
  border-radius: 12px;
  flex: 1;
  flex-direction: row;
  align-items: top;
  justify-content: center;
  transition: var(--transition);
  box-shadow: var(--shadow);
  background-image: linear-gradient(to right top, #05193720, #004d7a20, #00879320, #00bf7220, #a8eb1220);
  padding-bottom:20px;
}

.card-insegnanti:nth-child(odd) {
  flex-direction: row-reverse;
}

.card-insegnanti{
  position:relative;
  animation: card1 1s ease;
}

.animacard:nth-child(even){
  position:relative;
  transform: translateY(450px);
  opacity:0;
  transition: all 1.5s ease;
}

.animacard.active:nth-child(even) {
  transform: translateY(0px);
  opacity:1;
}

.reveal:nth-child(even){
  position:relative;
  transform: translateX(450px);
  opacity:0;
  transition: all 1.5s ease;
}

.reveal.active:nth-child(even) {
  transform: translateX(0px);
  opacity:1;
}

.reveal:nth-child(odd){
  position:relative;
  transform: translateX(-450px);
  opacity:0;
  transition: all 1.5s ease;
}

.reveal.active:nth-child(odd) {
  transform: translateX(0px);
  opacity:1;
}

.animatitoli {
  position:relative;
  transform: scale(800%);
  opacity:0;
  transition:  1s ease;
}

h4:first-child , h4 a:first-child{
  position:relative;
  animation: titolo1 1s ease;
}

@keyframes titolo1 {
  0% {
    opacity:0;
    scale:800%;
  }

  100% {
    opacity:1;
    scale:100%;
  }
  
}

@keyframes card1 {
  0% {
    opacity:0;
    transform: translateX(+450px);
  }

  100% {
    opacity:1;
    transform: translateX(0px);
  }
  
}

.animatitoli.active {
  transform: scale(100%);
  opacity:1;
}

.testo-insegnanti {
  margin:auto;
  height: auto;
  min-width:250px;
  width:100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: start;
  padding:20px;
  font-size: 1.2em;
}

.card-insegnanti::after {
  background-color: black;
  border: black 4px solid;
}

.social-insegnanti {
  display: flex;
  justify-content: center;
  align-content: center;
  gap: 5px;
  margin-top: 10px;
  text-transform: lowercase;
  font-size: 1.2em;
  height: 40px;
}

.social-insegnanti img
{
  width:40px;
  filter: drop-shadow(0px 0px 3px #ea86fa);
  transition: all 0.5s ease-in-out;
}

@keyframes sfuma {
  0%{
    filter:drop-shadow(drop-shadow(0px 0px 3px #ea86fa));
  }
  100%{
    filter: drop-shadow(0px 0px 2px #10dbed);
  }
}

.social-insegnanti img:hover {
  
  filter: drop-shadow(0px 0px 2px #10dbed);
  transition: all 0.5s ease-in-out;

}


.social-insegnanti p
{
  height: 40px;
  padding-top:5px
}


.gridcard {
  margin:auto;
  height: auto;
  margin-top: 40px;
  min-width:250px;
  background-color: rgba(245, 237, 237, 0.2);
  border:color(srgb red green blue);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: left;
  justify-content: center;
  transition: var(--transition);
  box-shadow: var(--shadow);
  padding:15px;
  background-image: linear-gradient(to right top, #05193720, #004d7a20, #00879320, #00bf7220, #a8eb1220);
  background-color: #00000030;
}

.card:hover,
.gridcard:hover,
.card-insegnanti:hover {

  scale: 1.02;
  /* background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1); */
  
  transition: var(--transition);
  color:white;
}

.card:hover > p,
.gridcard:hover > p{
  color:white;
}

/* ***************** CARDS ************** */


.fotoinsegnanti {
  margin:auto;
  margin: -50px 10px 0 10px;
  max-width:280px;

}

.fotoinsegnanti, 
.nomefoto,
.nomefotolungo, 
.corsi-insegnanti {
  text-align: center;
}

.nomefoto,
.nomefotolungo {
  font-weight: 200;
  font-size: 2.5em;
  text-shadow: #5ffbf170 2px 0px;
  flex-direction: column;
}

.nomefotolungo {
  font-size: 2em;
}

.corsi-insegnanti {
  text-transform: uppercase;
  text-shadow: #aa8fd880 2px 0px;
  flex-direction: column;

}

.titolicard {
  text-align: left;
  margin:0;
  display:block;
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-size: 1.5em;
  font-weight: 400 ;
  font-style: italic;
  text-align: left;
  background-clip: text;

  text-shadow: #00000030 2px 2px;
  color:#f9f1cf;;
}

.YTcontainer {
    aspect-ratio: 16/9;
  align-content: center;
  width:100%;
  height:auto;
}

 #footer
{
  padding-top:50px;
  padding-bottom:50px;
  background-color: rgba(0, 0, 0, 0.7);
  width:100%;
  font-size: 1.2em;
}

#footer a {
  text-shadow:none;
}

.flexcontatti {
  width: 100%;
  margin: auto;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  text-align: left;
  align-content: center;
  justify-content: space-around;
  vertical-align: middle;
}

.SN {
  max-width:300px;
  height:50px;
  margin-top:40px;
  display: flex; 
}

.SN-item {
  flex:wrap;
  gap:5px;
  height: auto;
}

.SN-item img {
  height: 50px;
  filter: drop-shadow(0px 0px 3px #ea86fa);
  
}

.SN-item img:hover {
  filter: drop-shadow(0px 0px 2px #10dbed);
}

.backdrop{
  position: absolute; top: 0; bottom: 0; left: 0; right: 0;
  background-size: cover;
  color:white;
  background-size: 100% 100%;
  background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px;
  background-image: radial-gradient(49% 81% at 45% 47%, #FFE20345 0%, #073AFF00 100%),radial-gradient(113% 91% at 17% -2%, #00D4FFFF 1%, #FF000000 99%),radial-gradient(142% 91% at 83% 7%, #E0FF00FF 1%, #FF000000 99%),radial-gradient(142% 91% at -6% 74%, #030619AB 1%, #FF000000 99%),radial-gradient(142% 91% at -6% 74%, #0900FFFF 1%, #FF000000 99%),radial-gradient(142% 91% at 111% 84%, #FF07E600 -1%, #FF0000FF 100%),radial-gradient(142% 91% at 111% 84%, #3C00FFFF 0%, #FF0000FF 100%);  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  height:100vh;

}



.evidenziatore{
  position:relative;
  width: 90%;
  height: 15px;
  margin-top: -25px;

  background-color:red;
  font-size: 0.5em;

  padding: 0.1em 0.4em;
  border-radius: 0.8em;
  background: transparent;
  background: linear-gradient(90deg, #00ADFF50 0%, #5BF5EF50 23%, #66EE6C50 43%, #FCF67C50 63%, #CF90F850 83%, #7172FF50 99%);
  animation:  colorfulh1 5s infinite;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  mix-blend-mode:lighten;
  transform: translate3d(0,0,0);
}
 /* -------------  aggiustare l'arrivo dei link interni all'altezza giusta   -----------------  */

#paolo,
#sara,
#federica,
#rossella,
#annachiara,
#denise,
#yinyoga, #hiphopbabies, #danzatricita, #preprimary, #primary, #classico, #modern, #hiphop, #heels, #house, #poledance, #classicoadulti, #modernadulti, #hiphopadulti, #yoga, #pilates, #bodyflying, #ginnasticadolce
{
  scroll-margin-top: 100px;
}



#yinyoga, #hiphopbabies, #danzatricita, #preprimary, #primary, #modernadulti, #house, #classicoadulti, #hiphopadulti, #hiphop, #modern, #classico, #heels, #ginnasticadolce, #yoga, #pilates, #bodyflying, #poledance {
  background-blend-mode:darken;
  background-position-y: 30px;
  background-position-x: center;
  background-repeat: no-repeat;
}


#danzatricita {
  background-image: url(../img/corsi/corsi-bg/danzatricita.png);
}

#preprimary {
  background-image: url(../img/corsi/corsi-bg/preprimary.png);
}

#primary {
  background-image: url(../img/corsi/corsi-bg/primary.png);
}

#classico {
  background-image: url(../img/corsi/corsi-bg/classico.png);
}

#modern {
  background-image: url(../img/corsi/corsi-bg/modern.png);
  background-position-y: -200px;
  background-position-x: -200px;
  background-size: 200%;
}

#house {
  background-image: url(../img/corsi/corsi-bg/house.png);
}

#heels {
  background-image: url(../img/corsi/corsi-bg/heels.png);
}

#hiphop {
  background-image: url(../img/corsi/corsi-bg/hiphop.png);
}

#hiphopbabies {
  background-image: url(../img/corsi/corsi-bg/hiphopbabies.png);
}

#classicoadulti {
  background-image: url(../img/corsi/corsi-bg/classicoadulti.png);
}

#modernadulti {
  background-image: url(../img/corsi/corsi-bg/modernadulti.png);
}

#hiphopadulti {
  background-image: url(../img/corsi/corsi-bg/hiphopadulti.png);
}

#poledance {
  background-image: url(../img/corsi/corsi-bg/pole.png);
  background-position-y: 0px;
  background-size: 92%;
}

#yoga {
  background-image: url(../img/corsi/corsi-bg/yoga.png);
}

#yinyoga {
  background-image: url(../img/corsi/corsi-bg/yinyoga.png);
    background-position-y:-50px;
}

#bodyflying {
  background-image: url(../img/corsi/corsi-bg/bodyflying.png);
  background-position-y: 0px;
}

#pilates {
  background-image: url(../img/corsi/corsi-bg/pilates.png);
  background-size: 90%;

  background-position-y: 10px;
  background-position-x: right;
}

#ginnasticadolce {
  background-image: url(../img/corsi/corsi-bg/ginnasticadolce.png);
  background-size: 80%;
  background-position-x: right;
  background-position-y: 10px;
}

 /* -------------  TESTO INIZIALE A COMPARSA   -----------------  */
 
 h3 > span{
  position: relative;      /* fondamentale */
  display: inline-block;   /* evita comportamenti strani */
}

/* cursore DOPO la parola */
h3 > span::after{
  content: "";
  height: 1em;
  width: 2px;
  display: inline-block;
  margin-left: .15em;
  background: #BD53ED;
  animation: blink .7s infinite;
  vertical-align: -0.15em;
}

h3 > span.stop-blinking::after{
  animation: none;
}

/* disattivo il vecchio before (per sicurezza) */
h3 > span::before{
  content: none !important;
}

@keyframes blink {
  50% { opacity: 0 }
}

@keyframes colorfulBG {
  100% {
    backdrop-filter: hue-rotate(360deg);  
  }
}

 /* -------------  MEDIA QUERY   -----------------  */


@supports (-webkit-touch-callout: none) {
  .card, .gridcard, .card-insegnant {
    background-color: #00000030;
  }
  
  body {
    /* background: linear-gradient(315deg, rgba(101,0,94,1) 3%, rgba(60,132,206,1) 38%, rgb(11, 175, 164) 68%, rgb(16, 154, 32) 98%); */
    background-image: linear-gradient(90deg, rgb(3, 113, 164) 0%, rgb(57, 163, 160) 23%, rgb(52, 126, 55) 43%, rgb(184, 175, 2) 63%, rgb(183, 133, 217) 83%, rgb(84, 84, 190) 99%);
    animation: gradient 70s ease infinite;
    background-size: 500% 500%;
    background-attachment: fixed;
    overflow-x: hidden;
  }

  /* h1, h2 {
    animation:none;
  }

  .animatitoli {
    position:relative;
    transform: scale(100%);
    transform: translateY(0px);
    opacity:1;
    transition:none;
  }

  .animatitoli.active {
    transform: translateY(0px);
    transform: scale(100%);
    transition: none;
    opacity:1;
    } */
}

@media (orientation: portrait) {
  #orariolezioni {
    display:none;
   }
  
   .card, .gridcard, .card-insegnant {
    background-color: #00000030;
  }
  
  body {
    /* background: linear-gradient(315deg, rgba(101,0,94,1) 3%, rgba(60,132,206,1) 38%, rgb(11, 175, 164) 68%, rgb(16, 154, 32) 98%); */
    background-image: linear-gradient(90deg, rgb(3, 113, 164) 0%, rgb(57, 163, 160) 23%, rgb(52, 126, 55) 43%, rgb(184, 175, 2) 63%, rgb(183, 133, 217) 83%, rgb(84, 84, 190) 99%);
    animation: gradient 70s ease infinite;
    background-size: 500% 500%;
    background-attachment: fixed;
    overflow-x: hidden;
  
  }
  
  
  /* .animatitoli {
    position:relative;
    transform: scale(100%);
    transform: translateY(0px);
    opacity:1;
    transition: none;
  }
  
  .animatitoli.active {
    transform: translateY(0px);
    transform: scale(100%);
    transition:none;
    opacity:1;
    }
  
    h1, h2 {
      animation:none;
    } */

}

/* @media only screen  {
  .card, .gridcard, .card-insegnant {
    background-color: #00000030;
  }
  
  body {
    background-image: linear-gradient(90deg, rgb(3, 113, 164) 0%, rgb(57, 163, 160) 23%, rgb(52, 126, 55) 43%, rgb(184, 175, 2) 63%, rgb(183, 133, 217) 83%, rgb(84, 84, 190) 99%);
    animation: gradient 70s ease infinite;
    background-size: 500% 500%;
    background-attachment: fixed;
  }

  .animatitoli {
    position:relative;
    transform: scale(100%);
    transform: translateY(450px);
    opacity:0;
    transition: all 1.5s ease;
  }

  .animatitoli.active {
    transform: translateY(0px);
    transform: scale(100%);
    transition: all 1.5s ease;
    opacity:1;
    }



} */

@keyframes gradient {
  0% {
      background-position: 0% 0%;
  }
  50% {
      background-position: 100% 100%;
  }
  100% {
      background-position: 0% 0%;
  }
}


@media only screen and (max-width: 780px) {
 #orariolezioni {
  display:none;
 }

 .card, .gridcard, .card-insegnanti {
  background-color: #00000030;
}

body {
  /* background: linear-gradient(315deg, rgba(101,0,94,1) 3%, rgba(60,132,206,1) 38%, rgb(11, 175, 164) 68%, rgb(16, 154, 32) 98%); */
  background-image: linear-gradient(90deg, rgb(3, 113, 164) 0%, rgb(57, 163, 160) 23%, rgb(52, 126, 55) 43%, rgb(184, 175, 2) 63%, rgb(183, 133, 217) 83%, rgb(84, 84, 190) 99%);
  animation: gradient 70s ease infinite;
  background-size: 500% 500%;
  background-attachment: fixed;
  overflow-x: hidden;

}


 /* -------------  AGGIUNTE   -----------------  */


/* .animatitoli {
  position:relative;
  transform: scale(100%);
  transform: translateY(0px);
  opacity:1;
  transition: none;
}

.animatitoli.active {
  transform: translateY(0px);
  transform: scale(100%);
  transition: none;
  opacity:1;
  }

  h1, h2 {
    animation:none;
  } */


}