/* Animation for fade effect */




/*fadeIn*/
@keyframes PL_fadeIn {
    from {
        transform: translate3d(0,0,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes PL_fadeIn {
    from {
        transform: translate3d(0,0,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

.PL_fadeIn {
    opacity: 0;
    animation-name: PL_fadeIn;
    -webkit-animation-name: PL_fadeIn;
	-ms-animation-name: PL_fadeIn;
}

.PL_animatedFadeIn {
    opacity: 0
}

/*fadeInUp*/

@keyframes PL_fadeInUp {
    from {
        transform: translate3d(0,30px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes PL_fadeInUp {
    from {
        transform: translate3d(0,30px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

.PL_fadeInUp {
    opacity: 0;
    animation-name: PL_fadeInUp;
    -webkit-animation-name: PL_fadeInUp;
	-ms-animation-name: PL_fadeInUp;
}

.PL_animatedFadeInUp {
    opacity: 0
}


/*fadeInUp02*/
@keyframes PL_fadeInUp02 {
    0% {
        transform: translate3d(0,-30px,0)
    }

    50% {
        transform: translate3d(0,10px,0);
        opacity: 0.5
    }
	100% {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

.PL_fadeInUp02 {
    opacity: 0;
    animation-name: PL_fadeInUp02;
    -webkit-animation-name: PL_fadeInUp02;
	-ms-animation-name: PL_fadeInUp02;
}

.PL_animatedFadeInUp02 {
    opacity: 0
}



/*fadeInUp01_scale*/
@keyframes PL_fadeInUp01_scale {
   0% {
        transform: translate3d(0,100px,0)
	
    }

    50% {
        transform: translate3d(0,-30px,0);
		filter: brightness(100%);
        opacity: 0.5
    }
	75% {
        transform: translate3d(0,0,0);
		transform: scale(1.1);
        opacity: 1
    }
	100% {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}
@-webkit-keyframes PL_fadeInUp01_scale {
    0% {
        transform: translate3d(0,100px,0)
    }

    50% {
        transform: translate3d(0,-30px,0);
        opacity: 0.5
    }
	75% {
        transform: translate3d(0,0,0);
		transform: scale(1.1);
        opacity: 1
    }
	100% {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}


.PL_fadeInUp01_scale {
    opacity: 0;
    animation-name: PL_fadeInUp01_scale;
    -webkit-animation-name: PL_fadeInUp01_scale;
	-ms-animation-name: PL_fadeInUp01_scale;
}

.PL_animatedFadeInUp01_scale {
    opacity: 0
}


/*fadeInUp01_scale03*/
@keyframes PL_fadeInUp03_scale {
    0% {
        transform: translate3d(0,0,0);
		opacity: 1
    }

    50% {
        transform: translate3d(0,0,0);
		
       opacity: 1
    }
	75% {
        transform: translate3d(0,0,0);
		transform: scale(1.15);
        opacity: 1
    }
	100% {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes PL_fadeInUp03_scale {
    0% {
        transform: translate3d(0,0,0);
		opacity: 1
    }

    50% {
        transform: translate3d(0,0,0);
	
        opacity: 1
    }
	75% {
        transform: translate3d(0,0,0);
		transform: scale(1.15);
        opacity: 1
    }
	100% {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}


.PL_fadeInUp03_scale {
    opacity: 1;
    animation-name: PL_fadeInUp03_scale;
    -webkit-animation-name: PL_fadeInUp03_scale;
	-ms-animation-name: PL_fadeInUp03_scale;
	animation-iteration-count: 10;
}

.PL_fadeInUp03_scale {
    opacity: 0
}



/*brightness 02*/				  

	@keyframes brightness02 {
	  0% { 
		filter:brightness(100%);
	  }
	  94% { 
		filter:brightness(100%);
	  }
	  95% { 
		filter:brightness(500%);
	  }
	  100% { 
		filter:brightness(100%);
	  }
	}


.brightness02 { 
	-webkit-animation:brightness02 1.5s -0.1s linear infinite ; 
	-ms-animation-name: brightness02 1.5s -0.1s linear infinite ; 
	animation:brightness02 1.5s -0.1s linear infinite ;
	animation-iteration-count: 6;}

/*fadeInUp02*/	
@-webkit-keyframes PL_fadeInUp02 {
    0% {
        transform: translate3d(0,200px,0)
    }

    50% {
        transform: translate3d(0,-30px,0);
        opacity: 0.5
    }
	100% {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}



/*fade animated speed*/
.PL_animated {
    animation-duration: 1.5s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
	-ms-animation-duration: 1.5s;
    -ms-animation-fill-mode: both;
}

.PL_animated_3s {
    animation-duration: 3s;
    animation-fill-mode: both;
    -webkit-animation-duration: 3s;
    -webkit-animation-fill-mode: both;
	-ms-animation-duration: 3s;
    -ms-animation-fill-mode: both;
}

.PL_animated_5s {
    animation-duration: 5s;
    animation-fill-mode: both;
    -webkit-animation-duration: 5s;
    -webkit-animation-fill-mode: both;
	-ms-animation-duration: 5s;
    -ms-animation-fill-mode: both;
}

.PL_animated_6s {
    animation-duration: 6s;
    animation-fill-mode: both;
    -webkit-animation-duration: 6s;
    -webkit-animation-fill-mode: both;
	-ms-animation-duration: 6s;
    -ms-animation-fill-mode: both;
}

.PL_animated_8s {
    animation-duration: 8s;
	animation-timing-function: ease-in-out;
    animation-fill-mode: both;
    -webkit-animation-duration: 8s;
    -webkit-animation-fill-mode: both;
	-webkit-animation-timing-function: ease-in-out;
    -ms-animation-duration: 8s;
    -ms-animation-fill-mode: both;
	-ms-animation-timing-function: ease-in-out;
		
}


/*ani_linear-gradient_color*/	
.ani_linear-gradient_color {
  /*text-align: center;*/
  background: linear-gradient(to right, #81e1fb 20%, #004ea2 40%, #e5f2f7 50%, #a0e5f5 80%);
  background-size: 200% auto;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation:ani_linear-gradient_color 5s linear infinite;
  -ms-background-clip: text;
  -ms-text-fill-color: transparent;
  -ms-animation:ani_linear-gradient_color 5s linear infinite;
	/*IE6~IE8的語法,結果不支援*/
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#81e1fb', endColorstr='#004ea2',GradientType=0 ); /* IE6-9 */
	/*IE5以下的語法,結果不支援*/
  -pie-background: linear-gradient(to right, #81e1fb 20%, #004ea2 40%, #e5f2f7 50%, #a0e5f5 80%);
  -pie-background-clip: text;
  -pie-text-fill-color: transparent;
  -pie-animation:ani_linear-gradient_color 5s linear infinite;	
}
@-webkit-keyframes ani_linear-gradient_color {
  to {
    background-position: 200% center;
  }
}
@keyframes ani_linear-gradient_color {
  to {
    background-position: 200% center;
  }
}