@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:100&display=swap');

body {
  margin: 0px;
  font-family: Roboto;
  min-height: 100%;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  /* animation: fadeInBody 1s ease-in!important; */
}
@keyframes fadeInBody {
  0% {
    opacity: 0;
  }
  70%{
  }
  100% {
    opacity: 1;
  }
}
html {
  height: 100%;
}
#main {
  height: calc(100vh - 100px);
  width: 100%;
  position: fixed;
  top: 100px;
}
.iframe {
  border: 0px;
  width: 100%;
  position: absolute;
  opacity: 0;
}
#messagerOverlay {
  z-index: 1;
  position: fixed;
  bottom: 10px;
  right: 10px;

}
#messagerButton {
  background-color: black;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  background-image: url("/font-awesome/comments.svg");
}
#messagerButton:hover {
  background-image: url("/font-awesome/comments-solid.svg");
  background-size: 2rem;
}

#messager {
  overflow: hidden;
  width: 300px;
  height: 400px;
  background-color: white;
  position: absolute;
  bottom: 80px;
  right: 0px;
  transition: right .5s, bottom .5s, transform 1s ;
  box-shadow: 10px 10px 21px 0px rgba(0,0,0,0.75);
  border-radius: 15px;
  -webkit-transform: scale(1);
  transform: scale(1);
}
#messager iframe {
  border-radius: 10px;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  border: 0px;
}
.hiddenMessager {
  /* bottom: -50px!important; */
  right: -400px!important;
  -webkit-transform: scale(.1)!important;
  transform: scale(.1)!important;
  /* animation: icon-appear .25s ease; */
}
#closeButton {
  background-image: url("/font-awesome/close.svg");
  position: absolute;
  top: -5px;
  right: -5px;
}
#closeButton:active {
  animation: icon-appear .1s ease;
}
#closeButton:hover {
  background-size: 2rem;
}
.appear {
  animation: icon-appear .5s ease;
  opacity: 1;
}
.closeIcon {
  background-image: url("/font-awesome/close.svg")!important;
  animation: icon-disappear .5s ease;
}
@keyframes icon-appear {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes icon-disappear {
  0% {
    opacity: 0;
    -webkit-transform: scale(.5);
    transform: scale(.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.hidden {
  display: none;
}
#fourOfour {
  font-size: 3rem;
  color: white;
}
#loading {
  position: absolute;
  top: 0px;
  margin-top: calc(50% - 500px);
  width: 100%;
}
.noverflow {
  overflow: hidden;
  position: relative;
}
/* Adapted from https://loading.io/css/ */
.lds-ripple {
  position: relative;
  left: calc(50% - 200px);
  width: 400px;
  height: 400px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  animation: lds-ripple 3s ease infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -.75s;
}
.lds-ripple div:nth-child(3) { /* Added */
  animation-delay: -1.5s;
}
.lds-ripple div:nth-child(4) { /* Added */
  animation-delay: -2.25s;
}
@keyframes lds-ripple { /* Larger */
  0% {
    top: 200px;
    left: 200px;
    width: 10px;
    height: 10px;
    opacity: 0;
  }
  30% {
    opacity: .3
  }
  70% {
    opacity: 0;
  }
  100% {
    top: -1px;
    left: -1px;
    width: 400px;
    height: 400px;
    opacity: 0;
  }
}
.center {
  position: relative;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
}