html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    overflow-y: hidden;
    overflow-x: hidden;
    background-color: white;
}

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");

#scrittaclick {
  color: white;
  -webkit-text-stroke: 1px black;
}

#scrittaclick:hover {
  color:black;
    text-decoration: underline;
}
#prog1 {
  z-index:10;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  position:absolute;
}

.carousel-inner
{
   width: 100%;
   height: auto;
   filter: grayscale(90%);


}


.carousel-inner:hover
{
   filter: grayscale(10%);
  cursor: pointer;

}
 /*
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  min-height: 300px;

} */

.glyphicon {
  top:50%;
  left:2%;
  transform: translate(-50%,-50%);
  font-size: 34px;
color:white;
}



#myCarousel{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index:2;
}

.compaio {
  display: block;
}

.carousel-indicators {
  bottom: 0px;
}
.carousel-indicators li {
  border: 1px solid black;
  border-radius: 0;
  background-color: black;
}

.carousel-control:active{
  opacity: 0.8;
}

.carousel-control:focus{
  opacity: 0.3;
}

.carousel-control:hover{
  opacity: 0.8;
}

.carousel-indicators .active {
  color: transparent;
}

.header {
  color:white;
}
.circle {
	position: absolute;
  border: solid 4px white;
	width: 50px;
	height: 50px;
  border-radius: 50%;
  z-index:4;
}

.circlepost {
  position: absolute;
  border: solid 3px black;
	width: 50px;
	height: 50px;
  border-radius: 50%;
}

.circleover {
  position: absolute;
  border: solid 3px red;
	width: 50px;
	height: 50px;
  border-radius: 50%;
}


.header {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
      font-family: 'Kanit', sans-serif;
    font-size: 29vh;
    z-index: 1;
    color: rgba(0, 0, 0, 0);
    -webkit-text-stroke: 1px black;
    opacity: 0;
}


.headerdopo {
    position: absolute;
    top: 30%;
    left: 50%;
    display:flex;
    transform: translate(-50%, -50%);
      font-family: 'Kanit', sans-serif;
    font-size: 10vh;
    z-index: 10;
    color: rgba(0, 0, 0, 0);
    -webkit-text-stroke: 1px black;
    opacity: 1;
    text-align: center;
}

a {
  color:black;
  font-family: "Kanit";
  font-weight: normal;
}
a:hover {
  color:black;
  font-family: "Kanit";
}
a:focus {
  color:black;
  font-family: "Kanit";
}

a:active {
  color:black;
  font-family: "Kanit";
}

.container1 {
    width: 100%;
    height: 100vh;
    margin: 0px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
    animation: slide-out-container1 8s cubic-bezier(0.97, 0.01, 0.36, 0.99) 2.8s;
    animation-fill-mode: forwards;
    z-index: 3;
}


.container2 {
    width: 100%;
    height: 100vh;
    margin: 0px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F2F2F2;
    animation: slide-out-container2 16s cubic-bezier(0.97, 0.01, 0.36, 0.99) 2.8s;
    animation-fill-mode: forwards;
      z-index: 3;

}

.container3 {
    width: 100%;
    height: 100vh;
    margin: 0px auto;
    position: absolute;
    justify-content: center;
    align-items: center;
    background: white;
display: flex;
      z-index: 9;
}

.progettoshow {
  text-align: center;
}


.frecc {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Roboto";
  font-size: 5vh;
  z-index: 12;
  font-weight: bold;
  opacity: 1;
  color: black;
  display: flex;
  margin-bottom: 3vh;
}

.frecc:hover {
  text-decoration: underline;
}

.lnk {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Roboto";
  font-size: 5vh;
  z-index: 10;
  font-weight: bold;
    opacity: 1;
    color: black;
    display: flex;
}


.mai {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Roboto";
  font-size: 5vh;
  z-index: 10;
  display:flex;
  font-weight: bold;
  opacity: 1;
  color:black;
}



.text-wrapper {
    color: white;
    position: absolute;
}

.text-wrapper2 {
    color: white;
    position: absolute;
}

.text {
      font-family: 'Kanit', sans-serif;
    font-weight: lighter;
    font-size: 54px;
}

.text-1,
.text-3,
.text-4,
.text-8,
.text-9,
.text-11 {
    color: rgba(0, 0, 0, 0);
    -webkit-text-stroke: 0.2px white;
}

.text-pres {
    color: black;
    vertical-align: middle;

}


.menuvoicealto {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Kanit', sans-serif;
  font-size: 3vh;
  z-index: 1;
  font-weight: bold;
  opacity: 0;
  color:black;

}

.menuvoicebasso {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translate(-50%, -50%);
font-family: 'Kanit', sans-serif;
  font-size: 2vh;
  z-index: 1;
  font-weight:200;
    opacity: 0;
    color: black;
    text-align: center;
}

.showme {
  animation: showmeanim 1s linear;
  animation-fill-mode: forwards;
}


@keyframes showmeanim {
    0% {
      opacity: 0;
    }

    100% {
        opacity: 1 ;
    }
}


#contacts:hover {
  text-decoration: underline;
}

/* #about:hover {
  text-decoration: underline;
} */

#primascritta {
  font-size: 45px;
  text-align: center;
}

#secondascritta {
  font-size: 25px;
  text-align: center;
  padding-left: 20%;
  padding-right: 20%;
}



@keyframes sayhi {
    0% {
        background-color: none;
    }
    1% {

    }
    99% {
          background-color: red;
    }
    100% {
        background-color: red;
    }
}


@keyframes blink {
    0% {
        opacity: 0%;
    }
    1% {
        opacity: 100%;
    }
    99% {
        opacity: 100%;
    }
    100% {
        opacity: 0;
    }
}


@keyframes testopresent {
    0% {
        opacity: 0%;
    }
    65% {
      opacity:0%;
    }

    90% {
        opacity: 100%;
    }
    100% {
        opacity: 0%;
    }
}


.text-pres {
  animation: testopresent 8s linear 0.3s;

}

.text-1 {
    animation: blink 0.8s linear 0.9s, blink 0.8s linear 2s;
    opacity: 0;
}

.text-2 {
    animation: blink 0.8s linear 0.8s, blink 0.8s linear 2.1s;
    opacity: 0;
}

.text-3 {
    animation: blink 0.8s linear 0.7s, blink 0.8s linear 2.2s;
    opacity: 0;
}

.text-4 {
    animation: blink 0.8s linear 0.6s, blink 0.8s linear 2.3s;
    opacity: 0;
}

.text-5 {
    animation: blink 0.8s linear 0.5s, blink 0.8s linear 2.4s;
    opacity: 0;
}

.text-6 {
    animation: blink 0.8s linear 0.4s, blink 0.8s linear 2.5s, slide-out 1s linear 3.2s;
    opacity: 0;
}

.text-7 {
    animation: blink 0.8s linear 0.5s, blink 0.8s linear 2.4s;
    opacity: 0;
}

.text-8 {
    animation: blink 0.8s linear 0.6s, blink 0.8s linear 2.3s;
    opacity: 0;
}

.text-9 {
    animation: blink 0.8s linear 0.7s, blink 0.8s linear 2.2s;
    opacity: 0;
}

.text-10 {
    animation: blink 0.8s linear 0.8s, blink 0.8s linear 2.1s;
    opacity: 0;
}

.text-11 {
    animation: blink 0.8s linear 0.9s, blink 0.8s linear 2s;
    opacity: 0;
}

@keyframes slide-out {
    0% {
        opacity: 0%;
    }
    1% {
        opacity: 100%;
    }

    19% {
        opacity: 100%;
    }
    20% {
        opacity: 0%;
    }

    39% {
        opacity: 0%;
    }
    40% {
        opacity: 100%;
    }

    59% {
        opacity: 100%;
    }
    60% {
        opacity: 0%;
    }

    79% {
        opacity: 0%;
    }
    80% {
        opacity: 100%;
    }

    100% {
        opacity: 100%;
    }
}

@keyframes slide-out-container1 {
    0% {
        height: 100vh;
    }

    40% {
        height: 100vh;
    }

    100% {
        height: 0%;
    }
}

@keyframes slide-out-container2 {
    0% {
        height: 0vh;
    }

    40% {
        height: 100vh;
    }

    100% {
        height: 0vh;
    }
}

@keyframes slide-out-cont3 {
    0% {
        height: 0vh;
    }

    40% {
        height: 100vh;
    }

    100% {
        height: 100vh;
    }
}

@media (max-width: 990px) {


    .text {
        font-size: 24px;
    }

    #primascritta {
      font-size: 20px;
      text-align: center;
    }

    #secondascritta {
      font-size: 20px;
      text-align: center;
      padding-left: 45px;
      padding-right: 45px;
    }

    .header {
      -webkit-text-stroke: 1.2px black;
    }

.circle {
  border: transparent;
}

.circlepost {
  border: transparent;
}

.glyphicon {
  left:25%;
}

.carousel-indicators {
  bottom: -10px;
}

}

@media only screen and (max-width: 600px) {
  .header {
      font-size: 14vh;
  }

  .headerdopo {
    font-size: 5vh;
  }
  .circle {
    border: transparent;
  }

  .circlepost {
    border: transparent;
  }
  .carousel-indicators {
    bottom: -10px;
  }


}