/*Sliding Text and Icon Menu Style*/
/*@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(https://fonts.googleapis.com/css?family=Alegreya);*/

ul.sti-menu{
	position:relative;
	margin:0;
	list-style:none;
	display:block;
	padding:5px 0 0 0;
}
.sti-menu li{
	height:130px;
}
.sti-menu:hover {

	background:#000 !important;
	transition:all linear 1s;
}
.sti-menu:hover li a h2, .sti-menu:hover li a h3 {

	color: #0F0 !important;
}

.sti-menu:hover .sti-icon {
	background-image:url("https://www.technowize.com/wp-content/themes/tempest/images/info-hover.png");
 -webkit-animation-name: bounceInDown; 
    animation-name: bounceInDown; 
	-webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
	}
@-webkit-keyframes bounceInDown { 
   0% { 
       opacity: 0; 
        -webkit-transform: translateY(-2000px); 
    } 
    60% { 
        opacity: 1; 
        -webkit-transform: translateY(30px); 
    } 
    80% { 
        -webkit-transform: translateY(-10px); 
    } 
    100% { 
        -webkit-transform: translateY(0); 
    } 
} 

@keyframes bounceInDown { 
    0% { 
        opacity: 0; 
        transform: translateY(-2000px); 
    } 
    60% { 
        opacity: 1; 
        transform: translateY(30px); 
    } 
    80% { 
        transform: translateY(-10px); 
    } 
    100% { 
        transform: translateY(0); 
    } 
} 


.sti-menu li a{

	text-align:center;

}
.sti-menu li a h2{
	color:#000;
	font-family: 'Oswald', sans-serif !important; 
	font-size:22px;
	font-weight:700;
	text-transform:uppercase;
}
.sti-menu:hover a h2 {
    -webkit-animation-name: bounceInLeft; 
    animation-name: bounceInLeft;
	-webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
}
@-webkit-keyframes bounceInLeft { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateX(-2000px); 
    } 
    60% { 
        opacity: 1; 
        -webkit-transform: translateX(30px); 
    } 
    80% { 
        -webkit-transform: translateX(-10px); 
    } 
    100% { 
        -webkit-transform: translateX(0); 
    } 
} 

@keyframes bounceInLeft { 
    0% { 
        opacity: 0; 
        transform: translateX(-2000px); 
    } 
    60% { 
        opacity: 1; 
        transform: translateX(30px); 
    } 
    80% { 
        transform: translateX(-10px); 
    } 
    100% { 
        transform: translateX(0); 
    } 
} 




.sti-menu li a h3{

	font-weight:400;
	font-size:18px;
	font-style:italic;
	color: #111;
	font-family: 'Alegreya', serif !important;}

.sti-menu:hover a h3 {
	-webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
	-webkit-animation-name: bounceInRight; 
    animation-name: bounceInRight; 
}

@-webkit-keyframes bounceInRight { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateX(2000px); 
    } 
    60% { 
        opacity: 1; 
        -webkit-transform: translateX(-30px); 
    } 
    80% { 
        -webkit-transform: translateX(10px); 
    } 
    100% { 
        -webkit-transform: translateX(0); 
    } 
} 

@keyframes bounceInRight { 
    0% { 
        opacity: 0; 
        transform: translateX(2000px); 
    } 
    60% { 
        opacity: 1; 
        transform: translateX(-30px); 
    } 
    80% { 
        transform: translateX(10px); 
    } 
    100% { 
        transform: translateX(0); 
    } 
} 

.sti-icon{
	width:100px;
	height:50px;
	background-position: top center;
	background-repeat:no-repeat;
	background-color:transparent;
}
.sti-icon-info{
	background-image:url(https://www.technowize.com/wp-content/themes/tempest/images/info.png);
	display:block;
	margin:0 auto;
}