html {

  margin:0;
  padding:0;
}

body {

  
  background-color:#395D6D;
  margin:auto;
}

.container {

  margin:auto;
  width:80%;
  text-align: center;
  position:relative;
  height:100vh;

}
.text {


  width:30%;
  text-align: center;
  z-index: 0;
  position:absolute;
  background-color:white;
  padding-bottom:3rem;
  padding-top:3rem;
  padding-left:3rem;
  padding-right:3rem;
  left:0;
  right:0;
  margin-right:auto;
  margin-left:auto;
  top:30%;
  box-shadow: 7px 7px 10px #27414C;
  justify-content: space-around;
  align-items:center;
  flex-wrap:wrap;

}


h1 {

  font-family: 'Lato', sans-serif;
  font-weight: 900;
  font-size:2rem;
  text-align:center;
  margin:auto;
  color:#395D6D;
  letter-spacing: .10rem;
  padding-bottom:.5rem;
}

h2 {

  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size:1rem;
  text-align:center;
  margin:auto;
  color:#395D6D;
  letter-spacing: .10rem;
  padding-bottom: 2rem;

}

h3 {

  font-family: 'Lato', sans-serif;
  font-weight: 900;
  font-size:.8rem;
  text-align:center;
  margin:auto;
  letter-spacing: .10rem;
}

.button {

  width:6rem;
  border:3px solid #FCA671;
  margin:auto;
  text-align:center;
  padding:.5rem;
  color:#FCA671;
}

#home:hover {
  background-color:#FCA671;
  color:white;
}


svg {
  text-align: center;
  position: absolute;
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
  height:100%;
  
}


#hotel-top {
 
  -webkit-animation: fall-8 8s ease-in infinite;
  opacity: .5;
}


#left-martini-page {

-webkit-animation: fall-8 8s ease-in infinite;
opacity: .5;

        
}

#top-spa {

  -webkit-animation: fall-7 7s ease-in infinite;
  .opacity:.75;
  

}

#chemistry-big {

  -webkit-animation: fall-12 12s ease-in infinite;


}

#comp-big {

  -webkit-animation: fall-13 13s ease-in infinite;

          animation: fall-13 13s ease-in infinite;
  opacity: .5;
}

#martini-bottom {

  -webkit-animation: fall-12 12s ease-in infinite;

          animation: fall-12 12s ease-in infinite;
  
  

}

#spa-bottom {

 -webkit-animation: fall-10 10s ease-in infinite;

         animation: fall-10 10s ease-in infinite;
  
}

#hotel-bottom {

  -webkit-animation: fall-10 10s ease-in infinite;
  opacity:.25;

}

#chemistry-little {

  -webkit-animation: fall-8 8s ease-in infinite;
 
}

#hotel-tiny {

  -webkit-animation: fall-10 10s ease-in infinite;  
}

#chemistry-top-right {

  -webkit-animation: fall-10 10s ease-in infinite;
  
}

#comp-little {

  -webkit-animation: fall-7 7s ease-in infinite;

}

.page-fall2 {

  -webkit-animation: fall-12 12s ease-in infinite;
  


}

.page-fall3 {

  -webkit-animation: fall-13 13s ease-in infinite;
  opacity: .5;

}

@-webkit-keyframes fall-13 {
  from{
    -webkit-transform: translateY(-700px);
            transform: translateY(-700px);
  }
  to {
    -webkit-transform: translateY(800px);
            transform: translateY(800px)
  }
}

@-webkit-keyframes fall-7 {
  from{
    -webkit-transform: translateY(-700px);
            transform: translateY(-700px);
  }
  to {
    -webkit-transform: translateY(800px);
            transform: translateY(800px)
  }
}

@-webkit-keyframes fall-8 {
  from{
    -webkit-transform: translateY(-700px);
            transform: translateY(-700px);
  }
  to {
    -webkit-transform: translateY(800px);
            transform: translateY(800px)
  }
}

@-webkit-keyframes fall-10 {
  from{
    -webkit-transform: translateY(-700px);
            transform: translateY(-700px);
  }
  to {
    -webkit-transform: translateY(800px);
            transform: translateY(800px)
  }
}

@-webkit-keyframes fall-12 {
  from{
    -webkit-transform: translateY(-700px);
            transform: translateY(-700px);
  }
  to {
    -webkit-transform: translateY(800px);
            transform: translateY(800px)
  }
}