.line-1, .line-3 {
	transform: rotate(0) translate(0);
	position: absolute;
	display: block;
	transition: 0.5s transform linear;
	-moz-transition:  0.5s transform linear;
	-webkit-transition:  0.5s transform linear;
	-o-transition: 0.5s transform linear;
	-ms-transition: 0.5s transform linear;
	will-change: all;
}

header .navbar .navbar-toggler .rotate-forwards {
	transform: rotate(45deg) translate( -4px, -9px);
	-webkit-transform: rotate(45deg) translate( -4px, -9px);
	transition: 0.5s all ease-in-out;
	-moz-transition:  0.5s all ease-in-out;
	-webkit-transition:  0.5s all ease-in-out;
	-o-transition: 0.5s all linear;
	-ms-transition: 0.5s all linear;
		will-change: all;

}

header .navbar .navbar-toggler .rotate-backwards {
	transform: rotate(-45deg) translate(-5px, 10px);
	-webkit-transform: rotate(-45deg) translate(-5px, 10px);
	transition: 0.5s transform linear;
	-moz-transition: 0.5s transform linear;
	-webkit-transition: 0.5s transform linear;
	-o-transition: 0.5s transform linear;
	-ms-transition: 0.5s transform linear;
		will-change: transform;

}

header .navbar .navbar-toggler .line-2 {
	margin: 4px auto;
	width: 100%;
	transition: 0.25s width;
	-moz-transition: 0.25s width;
	-webkit-transition: 0.25s width;
	-o-transition: 0.25s width;
	-ms-transition: 0.25s width;
}


header .navbar .navbar-toggler .remove-line {
	width: 0%;
	transition: 0.25s width;
}

/*  */

@media only screen and (min-width: 992px) {
    .instrument-product-column {opacity: 0}
    
    .column-animation {
        animation-name: column-animation;
        animation-fill-mode: forwards;
        animation-play-state: running;
        animation-duration: 1.5s;
    }
    
    @keyframes column-animation {
        0% { transform: translateY(70px);
            opacity: 0; }
        100% { transform: translateY(0px); opacity: 1}
    }

    .introduction-wrapper, .services-items-content-wrapper, .hero-image-content,
    .about-history-content-column{
        animation-name: introduction-animation;
        animation-fill-mode: forwards;
        animation-play-state: running;
        animation-duration: 2s;
    }
    
    @keyframes introduction-animation {
        0% { transform: translateY(50px);
            opacity: 0; }
        100% { transform: translateY(0px); opacity: 1}
    }
	
	 .plane-animation {
        animation-name: plane-animation;
        animation-fill-mode: forwards;
        animation-play-state: running;
        animation-duration: 2s;
    }
    
    @keyframes plane-animation {
        0% { padding-top: 150px;
            }
		
        100% { padding-top: 0px}
    }
    
    .services-items-image-column img, .services-items-image-column:after,
    .about-history-image-column, .about-history-image-column:after
        {
        animation-name: service-image-animation;
        animation-fill-mode: forwards;
        animation-play-state: running;
        animation-duration: 2s;
    }
        @keyframes service-image-animation {
        0% { transform: translateY(-50px);
            opacity: 0; }
        100% { transform: translateY(0px); opacity: 1}
    }
	
	.link-button.inquire-button:hover:before {

		
		animation: 1s ease-in infinite forwards running phone-animation;
	}
	
	@keyframes phone-animation {
		0% {
			transform: rotate(0deg)
		}
		
		10% {
			transform: rotate(0deg)
		}
		
		20% {
			transform: rotate(15deg)
		}
		
		30% {
			transform: rotate(0deg)
		}
		
		40% {
			transform: rotate(15deg)
		}
		
		50% {
			transform: rotate(0deg)
		}
		
		60% {
			transform: rotate(0deg)
		}
		
		70% {
			transform: rotate(0deg)
		}
		
		80% {
			transform: rotate(15deg)
		}
		
		
		90% {
			transform: rotate(0deg)
		}
		
		100% {
			transform: rotate(15deg);
		}

	}

}