@font-face {
    font-family: 'robotoblack';
    src: url('../fonts/roboto-black.eot');
    src: url('../fonts/roboto-black.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-black.woff2') format('woff2'),
         url('../fonts/roboto-black.woff') format('woff'),
         url('../fonts/Roboto-Black.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}


.slider-logo { color:#fff; text-decoration:none; position:relative;  font-family: 'robotoblack'; display:block; width:227px; height:165px; font-size:20px; line-height:1;}
.slider-logo > p { float:left; width:18px; position:absolute; z-index:3; height:20px; overflow:hidden;  top:138px; margin:0; padding:0;}
.slider-logo  p strong {position:absolute; width:16px; height:140px; left:0;}
.slider-logo  p.f-l { left:82px;}
.slider-logo  p.s-l { left:112px; }
.slider-logo  p.t-l { left:142px;}
.slider-logo  p.g-l { left:172px; }
.slider-logo  p.q-l { left:198px; }
.slider-logo  p.s-l strong{  height:250px}
.slider-logo  p.t-l  strong{  height:300px;}
.slider-logo  p.g-l strong { height:320px;}
.slider-logo  p.q-l  strong{ height:400px;}
.slider-logo p span{ display:block;}

.slider-logo  p.s-l strong  {
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	

	animation-duration: 1.3s;	
	-webkit-animation-duration: 1.3s;
	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	

						
}
.slider-logo:hover  p.s-l strong 
 {
	animation-name: slideDown2;
	-webkit-animation-name: slideDown2;	

	animation-duration: 1.3s;	
	-webkit-animation-duration: 1.3s;
	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	

						
}
.slider-logo  p.q-l strong {
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	
	
	animation-duration: 2.5s;	
	-webkit-animation-duration: 2.5s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	

							
}
.slider-logo:hover  p.q-l strong{
	animation-name: slideDown2;
	-webkit-animation-name: slideDown2;	
	
	animation-duration: 2.5s;	
	-webkit-animation-duration: 2.5s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	

							
}
.slider-logo  p.f-l  strong {
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;

		
}
.slider-logo:hover  p.f-l  strong {
	animation-name: slideDown2;
	-webkit-animation-name: slideDown2;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;

		
}
.slider-logo  p.t-l strong {
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	

	animation-duration: 1.9s;	
	-webkit-animation-duration: 1.9s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;


}
.slider-logo:hover  p.t-l  strong {
	animation-name: slideDown2;
	-webkit-animation-name: slideDown2;	

	animation-duration: 1.9s;	
	-webkit-animation-duration: 1.9s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;


}
.slider-logo  p.g-l strong {
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	

	animation-duration: 2.2s;	
	-webkit-animation-duration: 2.2s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;

			
}
.slider-logo:hover  p.g-l strong {
	animation-name: slideDown2;
	-webkit-animation-name: slideDown2;	

	animation-duration: 2.2s;	
	-webkit-animation-duration: 2.2s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;

			
}

@keyframes slideDown {
	
	0% {
		transform: translateY(-100%);
	}
	
	100% {
		transform: translateY(0%);
		visibility: visible !important;
	}
	
}

@-webkit-keyframes slideDown {
	
	0% {
		-webkit-transform: translateY(-100%);
	}
	
	100% {
		-webkit-transform: translateY(0%);
		visibility: visible !important;
	}	

}



@keyframes slideUp {
		
	0% {
		transform: translateY(100%);
	}
	50%{
		transform: translateY(-8%);
	}
	65%{
		transform: translateY(4%);
	}
	80%{
		transform: translateY(-4%);
	}
	95%{
		transform: translateY(2%);
	}			
	100% {
		transform: translateY(0%);
		visibility: visible !important;
	}	

}

@-webkit-keyframes slideUp {
	
	0% {
		-webkit-transform: translateY(100%);
	}
	50%{
		-webkit-transform: translateY(-8%);
	}
	65%{
		-webkit-transform: translateY(4%);
	}
	80%{
		-webkit-transform: translateY(-4%);
	}
	95%{
		-webkit-transform: translateY(2%);
	}			
	100% {
		-webkit-transform: translateY(0%);
		visibility: visible !important;
	}	
	
}

@keyframes slideDown2 {
	
	0% {
		transform: translateY(-100%);
	}
	
	100% {
		transform: translateY(0%);
		visibility: visible !important;
	}
	
}

@-webkit-keyframes slideDown2 {
0% {
		transform: translateY(-100%);
	}
	
	100% {
		transform: translateY(0%);
		visibility: visible !important;
	}

}



@keyframes slideUp2 {
		
	0% {
		transform: translateY(100%);
	}
	50%{
		transform: translateY(-8%);
	}
	65%{
		transform: translateY(4%);
	}
	80%{
		transform: translateY(-4%);
	}
	95%{
		transform: translateY(2%);
	}			
	100% {
		transform: translateY(0%);
		visibility: visible !important;
	}	

}

@-webkit-keyframes slideUp2 {
	
	0% {
		-webkit-transform: translateY(100%);
	}
	50%{
		-webkit-transform: translateY(-8%);
	}
	65%{
		-webkit-transform: translateY(4%);
	}
	80%{
		-webkit-transform: translateY(-4%);
	}
	95%{
		-webkit-transform: translateY(2%);
	}			
	100% {
		-webkit-transform: translateY(0%);
		visibility: visible !important;
	}	
	
}