.js-loading *, .js-loading *:before, .js-loading *:after {

-webkit-animation-play-state: paused !important;
        animation-play-state: paused !important;

}

main.page-content {

min-height: 200px;

}

div.home-main {

height: 85vh;
padding: 0 3rem;
@include flexbox_parent(row, flex-start, center);

p:first-of-type {
  margin-top: 1rem;
}

}

div.home-latest-posts {

padding: 0 3rem;

}

div.home-main {

background: #888888;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 85vh;
-webkit-box-pack: flex-start;
    -ms-flex-pack: flex-start;
        justify-content: flex-start;
overflow: hidden;
position: relative;
text-align: flex-start;
-webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;

-webkit-perspective: 100px;

        perspective: 100px;

h1 {
  -webkit-animation: no-transform 1s ease-in forwards;
          animation: no-transform 1s ease-in forwards;
  opacity: 0;
}
p {
  -webkit-animation: no-transform 1s 1.2s ease-in forwards;
          animation: no-transform 1s 1.2s ease-in forwards;
  opacity: 0;
}

}

.home-main:before {
  -webkit-animation: spin 40s linear infinite;
          animation: spin 40s linear infinite;
  background-image: -webkit-linear-gradient(135deg, #858f96 4%, #596164 96%);
  background-image: linear-gradient(135deg, #858f96 4%, #596164 96%);
  background-size: cover;
    bottom: 0;
  content: "";
    left: 0;
  opacity: 0;
  position: absolute;
    right: 0;
    top: 0;
  z-index: -1;
}

.home-main:after {
  -webkit-animation: spin 20s 10s linear infinite;
          animation: spin 20s 10s linear infinite;
  background-image: -webkit-linear-gradient(45deg, #dcdddf 0%, #ebebeb 100%);
  background-image: linear-gradient(45deg, #dcdddf 0%, #ebebeb 100%);
  background-size: cover;
    bottom: 0;
  content: "";
    left: 0;
  opacity: 0;
  position: absolute;
    right: 0;
    top: 0;
  z-index: -1;
}

.home-latest-posts {

-webkit-animation: no-transform 2s 1.5s ease-in forwards;
        animation: no-transform 2s 1.5s ease-in forwards;
opacity: 0;
margin-top: 3rem;

*:hover, *:active, *:focus {
  text-decoration: none;
  outline: none;
  color: inherit !important;
}

h1 {
  margin-bottom: 2rem;
}
ul {
  margin-right: 3rem;

  li {
    margin-bottom: 1.5rem;
    border-bottom: solid #dcdddf;
    padding: 0.5rem;
  }
}

}

.wrapper {

-webkit-animation: no-transform 1.5s ease-in forwards;
        animation: no-transform 1.5s ease-in forwards;
opacity: 0;

}

/* Animations */

@-webkit-keyframes spin {

0% {
  opacity: 0;
}
50% {
  opacity: 0.95;
}
100% {
  opacity: 0;
  -webkit-transform: rotateZ(180deg);
          transform: rotateZ(180deg);
}

}

@keyframes spin {

0% {
  opacity: 0;
}
50% {
  opacity: 0.95;
}
100% {
  opacity: 0;
  -webkit-transform: rotateZ(180deg);
          transform: rotateZ(180deg);
}

}

@-webkit-keyframes no-transform {

100% {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}

}

@keyframes no-transform {

100% {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}

}