.tooltip-wrap {
  position: relative;
  padding-top: 40%;
  padding-left: 50%;
}
.tooltip-wrap .tooltip-content {
  display: none;
  position: absolute;
  line-height: 1.6;
  width: 30%;
  height: 30%
  bottom: 5%;
  top: 78%;
  left: 55%;
  right: 90%;
  background-color: black;
  color: white;
  padding: .7em;
  letter-spacing: 2vh;
}
.tooltip-wrap:hover .tooltip-content {
  display: block;
}




.ml3 {
  font-weight: 900;
  font-size: 9.5em;
  text-align: center;
}
.element {
  background: #222;
  color: #fff1c6;
  font-family: sans-serif;
  font-weight: bold;
  padding: 5px; 
  padding-left: 175px;
  font-size: 50px;
}

.section {
  height: 200vh;
  position: relative;
  background-size: contain;
  background-attachment: fixed;
  background-position: center;
}

#element-1{
animation: blur-this 2s infinite alternate;
  background: black;
  right: 15vw;
}

@keyframes blur-this {
  0% {
    opacity: 0.25
  }
  100% {
    opacity: 1;
  }
}

#section-1 {
  background-image: url(../img/beach1.png);
 
}

#section-2 {
  background-image: url(../img/week1.png);
  
}

#section-3 {
  background-image: url(../img/week2.png);
}

#section-4 {
  background-image: url(../img/week3.png);
}

#section-5 {
  background-image: url(../img/week4.png);
}

#section-6 {
  background-image: url(../img/week5.png);
}

#section-7 {
  background-image: url(../img/week6.png);
}

#section-8 {
  background-image: url(../img/week7.png);
}

#section-9 {
  background-image: url(../img/week8.png);
}

#section-10 {
  background-image: url(../img/week9.png);
}

#section-11 {
  background-image: url(../img/week10.png);
}


.container{

  padding-top: 25vh;
  padding-left: vh;
  padding-right: vh;
}


#cloud{
  padding-top: 10vh;
  padding-left: 180vh;
  filter: sepia(100%); 
      -webkit-filter: sepia(100%);
}



#cloudtwo{
  padding-top: 20vh;
  padding-left: 80vh;
  filter: sepia(100%); 
      -webkit-filter: sepia(100%);

}

#cloudthree{
  padding-top: 12vh;
  padding-left: 280vh;
  filter: sepia(100%); 
      -webkit-filter: sepia(100%);


}

#cloudfour{
  padding-top: 14vh;
  padding-left: 290vh;


}

#cloudfive{
  padding-top: 15vh;
  padding-left: 140vh;


}

#cloudsix{
  padding-top: 11vh;
  padding-left: 240vh;


}

#cloudseven{
  padding-top: 11vh;
  padding-left: 240vh;


}

#cloudeight{
  padding-top: 12vh;
  padding-left: 230vh;


}

#cloudnine{
  padding-top: 16vh;
  padding-left: 160vh;


}

#cloudten{
  padding-top: 12vh;
  padding-left: 300vh;


}

#cloudeleven{
  padding-top: 15vh;
  padding-left: 240vh;


}
#cloudtwelve{
  padding-top: 15vh;
  padding-left: 80vh;


}

#cloudthirteen{
  padding-top: 12vh;
  padding-left: 280vh;


}

#cloudfourteen{
  padding-top: 16vh;
  padding-left: 280vh;


}

#cloudfifteen{
  padding-top: 15vh;
  padding-left: 180vh;


}

#cloudsixteen{
  padding-top: 12vh;
  padding-left: 290vh;


}

#cloudseventeen{
  padding-top: 25vh;
  padding-left: 200vh;
  filter: sepia(100%); 
      -webkit-filter: sepia(100%);


}

#cloudeighteen{
  padding-top: 15vh;
  padding-left: 80vh;
  filter: sepia(100%); 
      -webkit-filter: sepia(100%);


}

#cloudnineteen{
  padding-top: 10vh;
  padding-left: 340vh;
  filter: sepia(100%); 
      -webkit-filter: sepia(100%);


}

#cloudtwentie{
  padding-top: 20vh;
  padding-left: 270vh;
  filter: sepia(60%); 
      -webkit-filter: sepia(50%);


}

#cloudtwentieone{
  padding-top: 16vh;
  padding-left: 80vh;
 


}

#cloudtwentietwo{
  padding-top: 12vh;
  padding-left: 200vh;

}

#cloudtwentiethree{
  padding-top: 12vh;
  padding-left: 210vh;


}

#cloudtwentiefour{
  padding-top: 15vh;
  padding-left: 120vh;



}

#cloudtwentiefive{
  padding-top: 12vh;
  padding-left: 290vh;



}

#cloudtwentiesix{
  padding-top: 18vh;
  padding-left: 190vh;



}

#cloudtwentieseven{
  padding-top: 15vh;
  padding-left: 290vh;



}

#cloudtwentieeight{
  padding-top: 12vh;
  padding-left: 190vh;



}

#cloudtwentienine{
  padding-top: 12vh;
  padding-left: 190vh;



}

#cloudthirty{
  padding-top: 15vh;
  padding-left: 280vh;


}

#cloudthirtyone{
  padding-top: 12vh;
  padding-left: 300vh;


}


.hovering {

  padding-top: 139px;
  padding-left: 400px;
  padding-bottom: 40px;
  background: url(../img/cloud2.png) bottom no-repeat;
  background-size: 700px 200px;

    -webkit-animation-name: hovering;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: hovering;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
    animation-name: hovering;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

 
@-webkit-keyframes hovering {
    from {-webkit-transform:translate(0, 0px);}
    50% {-webkit-transform:translate(0, -25px);}
    to {-webkit-transform: translate(0, -0px);}
}

 
@-moz-keyframes hovering {
    from {-moz-transform:translate(0, 0px);}
    50% {-moz-transform:translate(0, -25px);}
    to {-moz-transform: translate(0, -0px);}
}

@keyframes hovering {
    from {transform:translate(0, 0px);}
    50% {transform:translate(0, -25px);}
    to {transform: translate(0, -0px);}
}