h2.webAnimated, p.webAnimated, img.webAnimated, button.webAnimated, div.webAnimated {
  opacity: 0;
}

h2.webAnimated.fade, p.webAnimated.fade, img.webAnimated.fade, button.webAnimated.fade, div.webAnimated.fade {
  transition: 0.3s ease-in all;
  -webkit-transition: .5s ease-in all;
  -o-transition: .5s ease-in all;
  animation: zoom 0.3s ease-in-out;
  opacity: 1;
}

@-webkit-keyframes color_change {
  from {
    color: #121212;
  }
  to {
    color: #2F80ED;
  }
}

@-moz-keyframes color_change {
  from {
    color: #121212;
  }
  to {
    color: #2F80ED;
  }
}

@-ms-keyframes color_change {
  from {
    color: #121212;
  }
  to {
    color: #2F80ED;
  }
}

@-o-keyframes color_change {
  from {
    color: #121212;
  }
  to {
    color: #2F80ED;
  }
}

@keyframes color_change {
  from {
    color: #121212;
  }
  to {
    color: #2F80ED;
  }
}


@-webkit-keyframes color_change_to_black {
  from {
    color: #2F80ED;
  }
  to {
    color: #121212;
  }
}

@-moz-keyframes color_change_to_black {
  from {
    color: #2F80ED;
  }
  to {
    color: #121212;
  }
}

@-ms-keyframes color_change_to_black {
  from {
    color: #2F80ED;
  }
  to {
    color: #121212;
  }
}

@-o-keyframes color_change_to_black {
  from {
    color: #2F80ED;
  }
  to {
    color: #121212;
  }
}

@keyframes color_change_to_black {
  from {
    color: #2F80ED;
  }
  to {
    color: #121212;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


@keyframes zoomIn {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.08);
  }
}

@keyframes rotatorFromZero {
  0% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(-4deg) scale(0.99);
  }
  50% {
    transform: rotate(-8deg) scale(0.98);
  }
  75% {
    transform: rotate(-4deg) scale(0.99);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}


.dp_content[data-fx="5"] div::after,
div.content__text-link[data-fx="5"]::after {
  content: '';
  z-index: -1;
  width: 100%;
  bottom: 0.25rem;
  left: 0;
  position: absolute;
  height: 0px;
  background: currentColor;
  transform: scale3d(0,1,1);
  transform-origin: 100% 50%;
  transition: transform 0.7s cubic-bezier(0.860, 0.000, 0.070, 1.000);
}

/*div.content__text-link[data-fx="5"]::after {*/
/*  bottom: 0;*/
/*}*/

.dp_content{
 position: relative;
}

/*.dp_content[data-fx="5"] div::after,*/
/*div.content__text-link[data-fx="5"]::after {*/
/*  transform: scale3d(1,1,1)*/
/*}*/
@keyframes loop {
  0% { transform-origin: 0% 50%; transform: scale3d(0,1,1); }
  50% { transform-origin: 0% 50%; transform: scale3d(1,1,1); }
  51% { transform-origin: 100% 50%; }
  100% { transform-origin: 100% 50%; transform: scale3d(0,1,1); }
}

.hover-reveal {
  position: absolute;
  width: 400px;
  height: 600px;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}

.hover-reveal__inner,
.hover-reveal__img {
  width: 100%;
  height: 100%;
  position: relative;
}

.hover-reveal__deco {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #f0f2f4;
}

.hover-reveal__img {
  background-size: cover;
  background-position: 50% 50%;
}

@-webkit-keyframes fadeUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px)
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px)
  }
}

@keyframes fadeUp {
  0% {
    opacity: 0.5;
    -webkit-transform: translateY(60px);
    transform: translateY(60px)
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px)
  }
}

@-webkit-keyframes fadeUpSmall {
  0% {
    opacity: 0;
    -webkit-transform: translateY(15px);
    transform: translateY(15px)
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px)
  }
}

@keyframes fadeUpSmall {
  0% {
    opacity: 0;
    -webkit-transform: translateY(15px);
    transform: translateY(15px)
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px)
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }
  to {
    opacity: 1
  }
}


@media screen and (min-width: 1820px) {
  .hover-reveal{
    width: 400px;
    height: 600px;
  }
}

@media screen and (min-width: 1024px) and (max-width:1500px){
  .hover-reveal{
    width: 300px;
    height: 450px;
  }
}


.animated:not('.bc__popup-message') {
  opacity: 0;
}

.animated.fadeUp {
  opacity: 1;
}

.animatedAfter {
  -webkit-transition: 0.8s ease;
  -o-transition: 0.8s ease;
  transition: 0.8s ease;
  opacity: 0;
  -webkit-transform: translateY(60px);
  -ms-transform: translateY(60px);
  transform: translateY(60px)
}

.animatedAfter.fadeUp {
  -webkit-transition: .5s ease;
  -o-transition: .5s ease;
  transition: .5s ease;
  opacity: 1;
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px)
}

@keyframes underline {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@media screen and (max-width: 1024px) {
  .animated,.animatedAfter{
    opacity: 1;
  }
  .animatedAfter{
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes zoom {
  0%{
    opacity: 0;
    transform: scale(0)
  }
  10%{
    opacity: 0.1;
    transform: scale(0.1)
  }
  20%{
    opacity: 0.2;
    transform: scale(0.2)
  }
  30%{
    opacity: 0.3;
    transform: scale(0.3)
  }
  40%{
    opacity: 0.4;
    transform: scale(0.4)
  }
  50%{
    opacity: 0.5;
    transform: scale(0.5)
  }
  60%{
    opacity: 0.6;
    transform: scale(0.6)
  }
  70%{
    opacity: 0.7;
    transform: scale(0.7)
  }
  80%{
    opacity: 0.8;
    transform: scale(0.8)
  }
  90%{
    opacity: 0.9;
    transform: scale(0.9)
  }
  100%{
    opacity: 1;
    transform: scale(1.0)
  }


}