<!--Анимация снизу вверх из под рамки-->

<style>
.header_hidden_top {
    overflow: hidden;
    opacity: 1;
    transition: all 1.2s ease-out;
}
.header_hidden_top .tn-atom {
    overflow: hidden;
    opacity: 0;
}
 .header_hidden_topVisible .tn-atom {
  animation: an_6 1s 1 both;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
            animation-delay:0.5s;
            
        }

        @keyframes an_6 {
            from{
                opacity: 0;
                transform: perspective(1000px) translate3d(0px, 200px, 0px) rotate3d(-100, 0, 0, 0deg);
            }
            to{
                opacity: 1;
                transform: perspective(500px) translate3d(0, 0, 0);
            }
        }
</style>

<script>
    function checkForVisibility() {
  var header_hidden_top = document.querySelectorAll(".header_hidden_top");
  header_hidden_top.forEach(function(header_hidden_top) {
    if (isElementInViewport(header_hidden_top)) {
      header_hidden_top.classList.add("header_hidden_topVisible");
    } else {
    //   header_hidden_top.classList.remove("header_hidden_topVisible");
    }
  });
}

function isElementInViewport(el) {
  var rect = el.getBoundingClientRect();

  return (
    rect.top >= -500 &&
    rect.left >= -500 &&
    rect.bottom <=
      (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

if (window.addEventListener) {
  addEventListener("DOMContentLoaded", checkForVisibility, false);
  addEventListener("load", checkForVisibility, false);
  addEventListener("scroll", checkForVisibility, false);
}
</script>

<!--Отрубаем на телефонах-->
<script>
    jQuery(document).ready(function(){
  function classFunction(){
    if(jQuery('body').width()<376){ jQuery('.header_hidden_top').removeClass('header_hidden_top').addClass('header_hidden_top_false');
    }
    else{
      jQuery('.header_center_top_false').removeClass('header_hidden_top_false').addClass('header_hidden_top');
    }
  }
  
  classFunction();
  jQuery(window).resize(classFunction);
 })
</script>