﻿.header-style4 .header-menu li:after{
    content: 'none';
    font-size: 0;
    display: block;
    width: 1px;
    height: 30px;
    background-color: #FFF;
    margin: 0 auto;
    position: absolute;
    bottom: -35px;
    left: calc(50% - 1px);
    transform: scale(1,0);
    transform-origin: top;
    transition: all .3s linear;
}
.header-style4 .header-menu li:hover:after{
    transform: scale(1);
}


.header-menu2-box .header-menu2 li a{
    position: relative;
}
.header-menu2-box .header-menu2 li a:after{
    content: 'none';
    font-size: 0;
    width: 0%;
    height: 1px;
    display: block;
    background-color: #000;
    position: absolute;
    bottom: -5px;
    left: 0;
    transition: all .3s linear;

}
.header-menu2-box .header-menu2 li a:hover:after,
.header-menu2-box .header-menu2 li.active a:after{
   width: 100%;  
}

.products-list-more-link{
    transition: all .3s linear;
}
.products-list-more-link:hover{
    color: #ff5400;
    font-weight: bold;
}

.porducts-class-list a:after{
    content: 'none';
    font-size: 0;
    display: block;
    width: 100%;
    height: 1px;
    transform: scale(0,1);
    background-color: #000;
    transition: all .3s linear;
}
.porducts-class-list a:before{
    content: 'none';
    font-size: 0;
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    transform: scale(0,1);
    top: 0;
    left: 0;
    background-color: #000;
    transition: all .3s linear;
}
.porducts-class-list a:hover:after,
.porducts-class-list.active a:after,
.porducts-class-list a:hover:before,
.porducts-class-list.active a:before{
    transform: scale(1,1);
}

.contact-link{
    transition: all .3s linear;
}
a.contact-link:hover{
    color: #ff5400;
}

.contact-list-button:hover .contact-button{
    background-color: #000;
    color: #FFF;
    font-weight: bold;
}

.contact-list-button:hover .contact-button-p{
    color: #FFF;
}
.contact-list-button:hover .contact-button-p span{
    animation: arrow-right2 1s linear 0s infinite alternate;
}

.products-list:hover .products-list-mask,
.products-page-more-list:hover .products-page-more-mask{
    opacity: 1;
}


@keyframes arrow-right2 {
  from {
    opacity: 0.6;
    -webkit-transform: none;
    transform: none;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(30%,0, 0);
    transform: translate3d(30%, 0, 0);
  }
}