@keyframes hero-scroll {
0% {height:  0px; opacity: 100%; top: 0px}
50% {height:  30px; opacity: 100%; top: 30px}
100% {height:  0px; opacity: 100%; top: 0px}
}

.hero-scroll p:after{
    animation: hero-scroll  2.2s infinite ease-in-out;
}


/*--------------------menu------------------------------*/


.menu:before {
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    background: #fff;
    position: absolute;
    top: 0;
    transition: all 0.4s;
}

.menu:after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    position: absolute;
    top: 12px;
    right: 0;
    transition: all 0.4s;
}

.menu-close:before {
    transform: rotate(45deg);
    top: 15px;
}

.menu-close:after {
    transform: rotate(135deg);
    width: 30px;
    top: 15px;
}


.menu:hover:before {
    width: 25px;
    top: 12px;
    right: 0;
}

.menu:hover:after {
    width: 30px;
    top: 0;
    right: 0;
}

.menu-close:hover:before {
    transform: rotate(0);
    width: 30px;
}

.menu-close:hover:after {
    transform: rotate(0);
    top: 12px;
}


/*--------------------menu------------------------------*/









/*--------------------btn------------------------------*/

.btn-black:after {
    content: "";
    display: block;
    position: absolute;
    height: 2px;
    width: 30px;
    background: #fff;
    top: 0px;
    left: 0;
    animation: btn-black  3s infinite;
}


.btn-black:hover::after {
    animation: btn-black-hover 0.4s ease-in-out;
    animation-fill-mode: forwards;
}

.btn-white:after {
    content: "";
    display: block;
    position: absolute;
    height: 2px;
    width: 30px;
    background: #333;
    top: 0px;
    left: 0;
    animation: btn-black  3s infinite;
}

.btn-white:hover::after {
    animation: btn-black-hover 0.4s ease-in-out;
    animation-fill-mode: forwards;
}


@keyframes btn-black {
0% {top: 0; left: 0; width: 2px;}
15% {width: 30px;}
30% {top: 0; left: 100%; width: 2px;}
45% {top: 100%; left: 100%; width: 2px;}
60% {width: 30px;}
75% {left: 0; top: 100%; width: 2px;}
100% {left: 0; top: 0; width: 2px;}
}


@keyframes btn-black-hover {
0% {top: 0; left: 0; width: 30px;}
100% {top: 0; left: 0; width: 100%;}
}






/*--------------------messenger-fixed------------------------------*/



.messenger-fixed-icon .social-one:hover {
    border: solid #dfdfe6 1px;
}

.messenger-fixed-icon .social-one:after{
    content: "";
    position: absolute;
    height: 3px;
    width: 3px;
    background: #131315;
    top: 29px;
    left: 28px;
    opacity: 0;
}

.messenger-fixed-icon .social-one:hover::after{
    content: "";
    position: absolute;
    height: 3px;
    width: 3px;
    background: #131315;
    top: 29px;
    left: 29px;
    animation: messenger-fixed-animation 2s infinite linear;
}



@keyframes messenger-fixed-animation {
    from { transform: rotate(0deg) translateX(32px); opacity: 1;}
    to   {  transform: rotate(360deg) translateX(32px); opacity: 1;}
}

.messenger-fixed-pulse:after {
    content: "";
    height: 80px;
    width: 80px;
    position: relative;
    display: block;
    position: absolute;
    animation: messenger-fixed-pulse 1.5s .65s ease-out infinite;;
    border-radius: 100%;
    top: 0;
    left: 0;
}

.messenger-fixed-pulse:before {
    content: "";
    height: 80px;
    width: 80px;
    position: relative;
    display: block;
    position: absolute;
    animation: messenger-fixed-pulse 1.5s .5s ease-out infinite;;
    border-radius: 100%;
    top: 0;
    left: 0;
}

@keyframes messenger-fixed-pulse {
     0% {
    transform: scale(1);
    box-shadow: 0 0 2px rgba(0,0,0,0.35), inset 0 0 1px rgba(0,0,0,0.35);
  }
  95% {
    box-shadow: 0 0 50px rgba(0,0,0,0), inset 0 0 30px rgba(0,0,0,0);
  }
  100% {
    transform: scale(2.25);
}