body{
  background: white;
  overflow-x: hidden;
  font-family: 'Poppins', sans-serif;
  color: #3E3E3D;
}
h1,h2,h3,h4,h5,h6{
  font-weight: 500;
  color:white;
}
p{
  color: #3E3E3D;
}
hr{
  border-top-color: White !important;
}
/* header */
header {
  height: 100vh;
  background: rgb(106,170,220);
  background: linear-gradient(90deg, rgba(106,170,220,1) 0%, rgba(152,255,201,1) 100%);
}
.main-title{
  font-size: 80px;
  color: white;
  font-weight: 800;
}
.alternative-title{
  color: #69A7DD;
}
.nav-link{
  color: #69A7DD !important;
  text-transform: uppercase;
}
 .active{
   font-weight: bold;
 }
.scrolled{
  background: white !important;
  transition: background-color 200ms linear;

}
.arrow {
  color: white;
}
.arrow:hover {
  color: white;
}
.title-container{
  top: 80px;
  position: relative;
}
/* main */
.gradient {
  background: rgb(106,170,220);
  background: linear-gradient(90deg, rgba(106,170,220,1) 0%, rgba(152,255,201,1) 100%);
}
.rotation{
  transform: rotate(180deg);
  position: relative;
  bottom: 10px;
}
.card-cd {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  background: white;
  transition: 0.3s;
  margin-bottom: 40px;
}

/* On mouse-over, add a deeper shadow */
.card-c:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.cd-title{
  color: #69A7DD;
}
.credits{
  color: #69A7DD;
  font-weight: 500;
}
.wave{
  width: 300px;
}
/*footer */
footer {
  background:#69A7DD;
}
footer a {
  color: white;

}
footer a:hover {
  color: #e1e1e1;
  text-decoration: none;

}
footer small {
  color: white;

}
.footer-svg{
  position:relative;
  top: 10px;
}

/* animazioni */
.glitch {
  position: relative;
  color: white;
  mix-blend-mode: lighten;
}
.glitch:before, .glitch:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  width: 100%;
  background: black;
  clip: rect(0, 0, 0, 0);
}
.glitch:before {
  left: -1px;
  text-shadow: 1px 0 rgba(255, 0, 0, 0.7);
}
.glitch:after {
  left: 1px;
  text-shadow: -1px 0 rgba(0, 0, 255, 0.7);
}
.glitch.is-glitching:before {
  text-shadow: 4px 0 rgba(255, 0, 0, 0.7);
  animation: glitch-1 0.8s infinite ease-in-out alternate-reverse;
}
.glitch.is-glitching:after {
  text-shadow: -5px 0 rgba(0, 0, 255, 0.7);
  animation: glitch-2 0.8s infinite ease-in-out alternate-reverse;
}

@keyframes glitch-1 {
  0% {
    clip: rect(36px, 9999px, 9px, 0);
  }
  25% {
    clip: rect(25px, 9999px, 99px, 0);
  }
  50% {
    clip: rect(50px, 9999px, 102px, 0);
  }
  75% {
    clip: rect(30px, 9999px, 92px, 0);
  }
  100% {
    clip: rect(91px, 9999px, 98px, 0);
  }
}
@keyframes glitch-2 {
  0% {
    top: -1px;
    left: 1px;
    clip: rect(65px, 9999px, 119px, 0);
  }
  25% {
    top: -6px;
    left: 4px;
    clip: rect(79px, 9999px, 19px, 0);
  }
  50% {
    top: -3px;
    left: 2px;
    clip: rect(68px, 9999px, 11px, 0);
  }
  75% {
    top: 0px;
    left: -4px;
    clip: rect(95px, 9999px, 53px, 0);
  }
  100% {
    top: -1px;
    left: -1px;
    clip: rect(31px, 9999px, 149px, 0);
  }
}



/* Center the loader */
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
}

.wrap {
  position: absolute;
  width: 100px;
  height: 200px;
  left: 50%;
  margin-left: -50px;
  top: 50%;
  margin-top: -100px;
}

.drop {
  width: 40px;
  height: 40px;
  left: 50%;
  margin-left: -20px;
  position: absolute;
  animation: drop 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s infinite;
}

.drop circle {
  fill: #2a96ed;
}

.drop-outer {
  position: absolute;
  box-sizing: border-box;
  /* border: 1px solid #333; */
  width: 100px;
  height: 200px;
  overflow: hidden;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  background-clip: padding-box;
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

.ripple {
  position: absolute;
  box-sizing: border-box;
  width: 240px;
  height: 240px;
  top: 68px;
  left: -70px;
  perspective: 100;
  transform: rotateX(65deg);
}

.ripple .ripple-svg {
  position: absolute;
  width: 240px;
  height: 240px;
  opacity: 0;
}

.ripple .ripple-svg circle {
   fill: none;
   stroke: #2a96ed;
   stroke-width: 10px;
   stroke-alignment: inner;
}

.ripple-1 {
  animation: ripple 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s infinite;
}

.ripple-1 .ripple-svg {
  animation: fade-in-out 2s linear 0s infinite;
}

.ripple-1 .ripple-svg circle {
  animation: border 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s infinite;
}

.ripple-2 {
  animation: ripple 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s infinite;
}

.ripple-2 .ripple-svg {
  animation: fade-in-out 2s linear 0.2s infinite;
}

.ripple-2 .ripple-svg circle {
  animation: border 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s infinite;
}

.ripple-3 {
  animation: ripple 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s infinite;
}

.ripple-3 .ripple-svg {
  animation: fade-in-out 2s linear 0.35s infinite;
}

.ripple-3 .ripple-svg circle {
  animation: border 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s infinite;
}



@keyframes drop {
  0% {
    transform: scale3d(0.01,0.01,0.01) translateY(0)
  }
  10% {
    transform: scale3d(1,1,1)
  }
  44% {
    transform: scale3d(1,1,1) translateY(200px)
  }
  100% {
    transform: scale3d(1,1,1) translateY(200px)
  }
}

@keyframes fade-in-out {
  0% {opacity: 0}
  42% {opacity: 0}
  52% {opacity: 1}
  65% {opacity: 1}
  100% {opacity: 0}
}

@keyframes ripple {
  0% { transform: rotateX(65deg) scale3d(0.2, 0.2, 0.2) }
  42% { transform: rotateX(65deg) scale3d(0.2, 0.2, 0.2) }
  100% { transform: rotateX(65deg) scale3d(0.9, 0.9, 0.9) }
}

@keyframes border {
  0% { stroke-width: 6px }
  42% { stroke-width: 6px }
  100% {stroke-width: 2px }
}


#myDiv {
  display: none;
}

@media screen and (max-width:768px){
  header {
    height: 75vh;
    background: rgb(106,170,220);
    background: linear-gradient(90deg, rgba(106,170,220,1) 0%, rgba(152,255,201,1) 100%);
  }
  .main-title{
    font-size: 40px;
    color: white;
    font-weight: 800;
  }
  .wave{
    width: 300px;
  }
.separator-1{
		display:none !important;
	}

}
@media screen and (max-width:480px){
  header {
    height: 50vh;
    background: rgb(106,170,220);
    background: linear-gradient(90deg, rgba(106,170,220,1) 0%, rgba(152,255,201,1) 100%);
  }
  .main-title{
    font-size: 40px;
    color: white;
    font-weight: 800;
  }
  .wave{
    width: 300px;
  }
	.separator-1{
		display:none !important;
	}
	#wave{
		position: relative;
		top:20px;
	}
  .credits-list{
    list-style-type: none;
  }
  .title-container{
    top: 60px;
    position: relative;
  }

}