body {
  margin: 0;
  padding: 0;
  width:100vw;
  height: 100vh;
  background-color: #eee;
}
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height:100%;
}

/* ------------------Wrapper------------------ */

.loader-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ffffff;
  display:flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}


@-webkit-keyframes loader-wrapper {
  0% { height: 0%;}
  25% { height: 0%;}
  50% { height: 100%;}
  75% { height: 100%;}
  100% { height: 0%;}
  }
  
@keyframes loader-wrapper {
    0% { height: 0%;}
    25% { height: 0%;}
    50% { height: 100%;}
    75% { height: 100%;}
    100% { height: 0%;}
    }
  
  


/* ------------------Left/Right Divs------------------ */

.left {
  position: relative;
  display:inline-block;
  float: left;
  width: 250px;
  height: 250px;
}

.right {
  position: relative;
  display:inline-block;
  float: left;
  width: 250px;
  height: 250px;
}

.heart {  
  position: absolute;
  display:block;
  float: left;
  width: 120px;
  height: 120px;
  padding-bottom: 250px;
}

.text {  position: absolute;
  display:block;
  float: left;
  width: auto;
  height: auto;
  padding-top: 250px;

}


/* ------------------Imgs------------------ */

.natus2 {display: block;position: absolute; left: 0px; bottom: 50px;}
.natus1 {display: block;position: absolute; left: 0px; bottom: 50px;}
.themis2 {display: block;position: absolute; right: 70px; bottom: 70px;}
.themis {display: block;position: absolute; right: 70px; bottom: 70px;}

/* ------------------NATUS------------------ */

.right {
  animation-name: natus1;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: reverse;
  animation-fill-mode: forwards;
    
}

.natus2 {
  animation-name: natus2;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: reverse;
  animation-fill-mode: forwards;
    
}


@-webkit-keyframes natus2 {
  0% {opacity: 0;}
  60% {opacity: 0;}
  65% {opacity: 100;}
  100% {opacity: 100;}
}

@keyframes natus2 {
  0% {opacity: 0;}
  60% {opacity: 0;}
  65% {opacity: 100;}
  100% {opacity: 100;}
}


@-webkit-keyframes natus1 {
    
  0% {
    transform:rotate(-10deg);
    transform-origin:70% right;
  }

  30% {
    transform:rotate(-5deg);
  }
  60% {
    transform:rotate(-15deg);
  }
  70% {
    transform:rotate(-25deg);
  }

  100% {
    transform:rotate(-10deg);
    transform-origin: 70% right;
    opacity: 100;
}

}

@keyframes natus1 {
    
  0% {
    transform:rotate(-10deg);
    transform-origin:70% right;
  }

  30% {
    transform:rotate(-5deg);
  }
  60% {
    transform:rotate(-15deg);
  }
  70% {
    transform:rotate(-25deg);
  }

  100% {
    transform:rotate(-10deg);
    transform-origin: 70% right;
    opacity: 100;
}

}


/* ------------------THEMIS------------------ */

.left {
  animation-name: themis;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: reverse;
  animation-fill-mode: forwards;
    
}

.themis2 {
  animation-name: themis2;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: reverse;
  animation-fill-mode: forwards;
    
}


@-webkit-keyframes themis2 {
    
  0% {
    opacity: 0;
  }
  
  60% {
    opacity: 0;
  }

  65% {opacity: 100;
  }

  100% {
    opacity: 100;
}

}


@-webkit-keyframes themis {
    
  0% {
    transform:rotate(10deg);
    transform-origin:70% right;
  }

  30% {
    transform:rotate(5deg);
  }
  60% {
    transform:rotate(15deg);
  }
  70% {
    transform:rotate(25deg);
  }

  100% {
    transform:rotate(10deg);
    transform-origin: 70% right;
    opacity: 100;
}

}


@keyframes themis2 {
    
  0% {
    opacity: 0;
  }
  
  60% {
    opacity: 0;
  }

  65% {opacity: 100;
  }

  100% {
    opacity: 100;
}

}


@keyframes themis {
    
  0% {
    transform:rotate(10deg);
    transform-origin:70% right;
  }

  30% {
    transform:rotate(5deg);
  }
  60% {
    transform:rotate(15deg);
  }
  70% {
    transform:rotate(25deg);
  }

  100% {
    transform:rotate(10deg);
    transform-origin: 70% right;
    opacity: 100;
}

}

/* ------------------HEART------------------ */

.heart {  
  animation: heart 0.8s ease-out 0s 1 normal both;
}

@keyframes heart {
    
  0% {
    transform:translateY(0) scale(0);
    transform-origin:bottom;
    opacity: 0;
  }

  50% {opacity: 0;}



  100% {
    transform:translateY(-50px);
  }
}

@-webkit-keyframes heart {
    
  0% {
    transform:translateY(0) scale(0);
    transform-origin:bottom;
    opacity: 0;
  }

  50% {opacity: 0;}



  100% {
    transform:translateY(-50px);
  }
}

/* ------------------Fonts------------------ */

.fonts {  
  font-family: 'Inria Serif', serif;
  color: #ffffff; transform: scale(0.95);padding: 15px; transition: 0.3s ease-in-out;
  text-shadow: -1px -1px 0 #ffe76c, 1px -1px 0 #FFB6D3, -1px 1px 0 #FFB6D3, 1px 1px 0 #FFB6D3;
  letter-spacing: -0.175rem;
  font-size: 3.5em;
  line-height: 0.75;
  font-weight: 700;}



.fonts {
	-webkit-animation: fonts 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
	        animation: fonts 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
}





@-webkit-keyframes fonts {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    letter-spacing: 0.2em;
    opacity: 1;
  }
}
@keyframes fonts {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    letter-spacing: 1em;
    opacity: 1;
  }
}