.fade-cont-in {
  -webkit-animation-name: web-fade-cont;
  -webkit-animation-duration: 0.8s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
  -moz-animation: moz-fade-cont 0.8s ease-in-out;
  -ms-animation: ms-fade-cont 0.8s ease-in-out;
  -o-animation: o-fade-cont 0.8s ease-in-out;
  animation-name: fade-cont;
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 1s;
}

@keyframes fade-cont {
  0 {
    width: 0rem;
  }
  100% {
    width: 27.5rem;
  }
}

@-webkit-keyframes web-fade-cont {
  0 {
    width: 0rem;
  }
  100% {
    width: 27.5rem;
  }
}

@-moz-keyframes moz-fade-cont {
  0% {
    width: 0rem;
  }
  100% {
    width: 27.5rem;
  }
}

@-ms-keyframes ms-fade-cont {
  0% {
    width: 0rem;
  }
  100% {
    width: 27.5rem;
  }
}

@-o-keyframes o-fade-cont {
  0% {
    width: 0rem;
  }
  100% {
    width: 27.5rem;
  }
}

.fade-cont-out {
  -webkit-animation-delay: web-fade 0.8s ease-in-out; /* Chrome */
  -moz-animation-delay: moz-fade 0.8s ease-in-out; /* Firefox */
  -ms-animation-delay: ms-fade 0.8s ease-in-out; /* Internet Explorer */
  -o-animation-delay: o-fade 0.8s ease-in-out; /* Opera */
  animation: fade 0.8s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes fade {
  0% {
    width: 27.5rem;
  }
  100% {
    width: 0rem;
  }
}

@keyframes web-fade {
  0% {
    width: 27.5rem;
  }
  100% {
    width: 0rem;
  }
}

@keyframes moz-fade {
  0% {
    width: 27.5rem;
  }
  100% {
    width: 0rem;
  }
}

@keyframes ms-fade {
  0% {
    width: 27.5rem;
  }
  100% {
    width: 0rem;
  }
}

@keyframes o-fade {
  0% {
    width: 27.5rem;
  }
  100% {
    width: 0rem;
  }
}

.fade-content-in {
  -webkit-animation-delay: web-fade-in 1.8s linear; /* Chrome */
  -moz-animation-delay: moz-fade-in 1.8s linear; /* Firefox */
  -ms-animation-delay: ms-fade-in 1.8s linear; /* Internet Explorer */
  -o-animation-delay: o-fade-in 1.8s linear; /* Opera */
  animation: fade-in 1.8s linear;
  animation-fill-mode: forwards;
  animation-delay: 1s;
}

@keyframes fade-in {
  0% {
    display: none;
    opacity: 0;
  }
  35% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}

@keyframes web-fade-in {
  0% {
    display: none;
    opacity: 0;
  }
  35% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}

@keyframes moz-fade-in {
  0% {
    display: none;
    opacity: 0;
  }
  35% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}

@keyframes ms-fade-in {
  0% {
    display: none;
    opacity: 0;
  }
  35% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}

@keyframes o-fade-in {
  0% {
    display: none;
    opacity: 0;
  }
  35% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}

.fade-content-out {
  -webkit-animation-delay: web-fade-out 0.22s linear; /* Chrome */
  -moz-animation-delay: moz-fade-out 0.22s linear; /* Firefox */
  -ms-animation-delay: ms-fade-out 0.22s linear; /* Internet Explorer */
  -o-animation-delay: o-fade-out 0.22s linear; /* Opera */
  animation: fade-out 0.22s linear;
  animation-fill-mode: forwards;
}

@keyframes fade-out {
  0% {
    display: block;
    opacity: 1;
  }
  1% {
    display: block;
    opacity: 1;
  }
  80% {
    display: none;
    opacity: 0;
  }
  100% {
    display: none;
    opacity: 0;
  }
}

@keyframes web-fade-out {
  0% {
    display: block;
    opacity: 1;
  }
  1% {
    display: block;
    opacity: 1;
  }
  80% {
    display: none;
    opacity: 0;
  }
  100% {
    display: none;
    opacity: 0;
  }
}

@keyframes moz-fade-out {
  0% {
    display: block;
    opacity: 1;
  }
  1% {
    display: block;
    opacity: 1;
  }
  80% {
    display: none;
    opacity: 0;
  }
  100% {
    display: none;
    opacity: 0;
  }
}

@keyframes ms-fade-out {
  0% {
    display: block;
    opacity: 1;
  }
  1% {
    display: block;
    opacity: 1;
  }
  80% {
    display: none;
    opacity: 0;
  }
  100% {
    display: none;
    opacity: 0;
  }
}

@keyframes o-fade-out {
  0% {
    display: block;
    opacity: 1;
  }
  1% {
    display: block;
    opacity: 1;
  }
  80% {
    display: none;
    opacity: 0;
  }
  100% {
    display: none;
    opacity: 0;
  }
}