/* @keyframes duration | easing-function | delay |iteration-count | direction | fill-mode | play-state | name */

.fade2HideShow{
	display: block;
	position: relative;
}


.fade2HideShow .layer-1{
	display: block;
	position: absolute;
	opacity: 0;
	top:0;
}

.fade2HideShow .layer-2{
	display: block;
	position: absolute;
  	z-index: 1;
  	top:0;
  	opacity: 0;
}


.fade2HideShow.on .layer-1{
	animation: fadeInOut 4s;
 	-moz-animation: fadeInOut 4s; /* Firefox */
 	-webkit-animation: fadeInOut 4s; /* Safari and Chrome */
 	-o-animation: fadeInOut 4s; /* Opera */
 	z-index: 1;
}

.fade2HideShow.on .layer-2{
	animation: 4s ease-in 3s 1 normal forwards running fadeIn;
 	-moz-animation: 4s ease-in 3s 1 normal forwards running fadeIn; 
 	-webkit-animation: 4s ease-in 3s 1 normal forwards running fadeIn;
 	-o-animation: 4s ease-in 3s 1 normal forwards running fadeIn; 

}



@keyframes fadeInOut {
    from {
         opacity: 0;
    }
    50%{
    	opacity: 1;
    }
    to {
       opacity: 0;
    }
}
@-moz-keyframes fadeInOut {
    from {
         opacity: 0;
    }
    50%{
    	opacity: 1;
    }
    to {
       opacity: 0;
    }
}
@-webkit-keyframes fadeInOut {
     from {
         opacity: 0;
    }
    50%{
    	opacity: 1;
    }
    to {
       opacity: 0;
    }
}
@-o-keyframes fadeInOut {
    from {
         opacity: 0;
    }
    50%{
    	opacity: 1;
    }
    to {
       opacity: 0;
    }
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-moz-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes fadeIn {
     from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-o-keyframes fadeIn { 
     from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
