/* make keyframes that tell the start state and the end state of our object */
 
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fade-in {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
 
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}
.animated {
            /*background-image: url(/20220906113056oe_/https://www.sci.cuhk.edu.hk/css/images/logo.png);*/
            background-repeat: no-repeat;
            background-position: left top;
            -webkit-animation-duration: 3s;
            animation-duration: 3s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
} 
.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}
 
.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
}
 
.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}
.fade-in.four {
-webkit-animation-delay: 2.1s;
-moz-animation-delay: 2.1s;
animation-delay: 1.6s;
}
 
.fade-in.five {
-webkit-animation-delay: 2.5s;
-moz-animation-delay:2.5s;
animation-delay: 1.2s;
}
 
.fade-in.six {
-webkit-animation-delay: 2.9s;
-moz-animation-delay: 2.9s;
animation-delay: 0.7s;
} 
/*---hover box ---*/
.hvr-float-shadow {
  display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    position: relative;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}
.hvr-float-shadow:before {
  	    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    top: 100%;
    left: 5%;
    height: 10px;
    width: 90%;
    opacity: 0;
    background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform, opacity;
    transition-property: transform, opacity;
}
.hvr-float-shadow:hover {
  	-webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {
  	    opacity: 1;
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
}

@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

@-webkit-keyframes myfirst {
     0%   {opacity:0; top:-200px;}
    
    100% {opacity:1; top:0px;}
}
@-moz-keyframes myfirst {
      0%   {opacity:0; top:-200px;}
    
    100% {opacity:1; top:0px;}
}
@keyframes myfirst {
     0%   {opacity:0; top:-200px;}
    
    100% {opacity:1; top:0px;}
}
@-webkit-keyframes mysecond {
     0%   {opacity:0; top:200px;}
    
    100% {opacity:1; top:0px;}
}
@-moz-keyframes mysecond {
      0%   {opacity:0; top:200px;}
    
    100% {opacity:1; top:0px;}
}
@keyframes mysecond {
     0%   {opacity:0; top:200px;}
    
    100% {opacity:1; top:0px;}
}