.draw2
{
	-webkit-transition: color 0.25s;
          transition: color 0.25s;
		  
  color: #f45e61;/*60daaa | f45e61*/
  box-shadow: inset 0 0 0 0px #f45e61;
  
  
  -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
          transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}

.draw3{
	animation-name: draw3;
	-webkit-animation-name: draw3;	

	animation-duration: 0.25s;	
	-webkit-animation-duration: 0.25s;

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

	visibility: visible !important;
}

@keyframes draw3 {
	0% {
			
	}
	100% {
		color:#f45e61;
	}
}


/*
==============================================
fadeIn
==============================================
*/
.fadeIn
{
	animation-name: fadeIn;
	-webkit-animation-name: fadeIn;	
	
	animation-duration: 2s;	
	-webkit-animation-duration: 2s;
}

.fadeIn1,.fadeIn2,.fadeIn3,.fadeIn4,.fadeIn5,.fadeIn6{
	opacity:0;
	animation-name: fadeIn;
	-webkit-animation-name: fadeIn;	

	/*animation-duration: 2s;	
	-webkit-animation-duration: 2s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;	*/
	
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
	visibility: visible !important;
}

.fadeIn1{ 
	animation-delay: 0.5s;
	animation-duration: 0.5s;	
	-webkit-animation-duration: 0.5s;
}

@keyframes fadeIn {
	0% {
		transform: scale(1);
		opacity: 0.0;		
	}
	60% {
		transform: scale(1);	
	}
	80% {
		transform: scale(1);
		opacity: 1;	
	}	
	100% {
		transform: scale(1);
		opacity: 1;	
	}		
}

@-webkit-keyframes fadeIn {
	0% {
		-webkit-transform: scale(0);
		opacity: 0.0;		
	}
	60% {
		-webkit-transform: scale(1);
	}
	80% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}	
	100% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}		
}


/*
==============================================
zoomIn
==============================================
*/

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  animation-name: zoomIn;
  
  animation-duration: 0.5s;	
  -webkit-animation-duration: 0.5s;

  animation-timing-function: ease-in-out;	
  -webkit-animation-timing-function: ease-in-out;	
  
  visibility: visible !important;
}


/*
==============================================
spinner
==============================================
*/

.spinner {
  /*margin: 50% auto 0;*/
  margin:50% auto;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #fff;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}


/*
==============================================
labflash
==============================================
*/

.labflash{
	animation-name: labflash;
	-webkit-animation-name: labflash;	

	animation-duration: 0.8s;	
	-webkit-animation-duration: 0.8s;

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

	visibility: visible !important;
}

@keyframes labflash {
	0% {		
		opacity: 0.0;		
	}
	20% {		
		opacity: 1.0;		
	}
	50% {		
		opacity: 0.0;		
	}
	60% {
		opacity: 1;
	}
	90% {
		opacity: 0;	
	}	
	100% {
		opacity: 1;	
	}		
}

@-webkit-keyframes labflash {
	0% {		
		opacity: 0.0;		
	}
	20% {		
		opacity: 1.0;		
	}
	50% {		
		opacity: 0.0;		
	}
	60% {
		opacity: 1;
	}
	90% {
		opacity: 0;	
	}	
	100% {
		opacity: 1;	
	}	
}

/*
==============================================
popup
==============================================
*/

.popup{
	animation-name: popup;
	-webkit-animation-name: popup;	

	animation-duration: 1.2s;	
	-webkit-animation-duration: 1.2s;

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

	visibility: visible !important;
}

@keyframes popup {
	0% {		
		opacity: 0.0;		
	}
	99% {		
		opacity: 0.0;		
	}
	100% {
		opacity: 1;	
	}		
}

@-webkit-keyframes popup {
	0% {		
		opacity: 0.0;		
	}
	99% {		
		opacity: 0.0;		
	}
	100% {
		opacity: 1;	
	}	
}

/*
==============================================
flash
==============================================
*/

.flash{
	animation-name: flash;
	-webkit-animation-name: flash;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;
	
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	
	visibility: visible !important;
}

@keyframes flash {
	0% {		
		opacity: 0;		
	}
	100% {
		opacity: 1;	
	}		
}

@-webkit-keyframes flash {
	0% {		
		opacity: 0;		
	}
	100% {
		opacity: 1;	
	}	
}

/*
==============================================
floating
==============================================
*/

.floating{
	animation-name: floating;
	-webkit-animation-name: floating;

	animation-duration: 3s;	
	-webkit-animation-duration: 3s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes floating {
	0% {
		transform: translateY(0%);	
	}
	50% {
		transform: translateY(3%);	
	}	
	100% {
		transform: translateY(0%);
	}			
}

@-webkit-keyframes floating {
	0% {
		-webkit-transform: translateY(0%);	
	}
	50% {
		-webkit-transform: translateY(3%);	
	}	
	100% {
		-webkit-transform: translateY(0%);
	}			
}

/*
==============================================
fadeout
==============================================
*/

.fadeout1,.fadeout2,.fadeout3{
	animation-name: fadeout;
	-webkit-animation-name: fadeout;	

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

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;	
	
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;

	visibility: visible !important;
}

.fadeout1{animation-delay: 0.2s;}
.fadeout2{animation-delay: 0.8s;}
.fadeout3{animation-delay: 1.4s;}

@keyframes fadeout {
	0% {		
		opacity: 1;
	}
	100% {
		opacity: 0;	
	}		
}

@-webkit-keyframes fadeout {
	0% {		
		opacity: 1;		
	}
	100% {
		opacity: 0;	
	}	
}

/*
==============================================
pulse
==============================================
*/

.pulse{
	animation-name: pulse;
	-webkit-animation-name: pulse;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.9);
	}
	50% {
		transform: scale(1);
	}	
	100% {
		transform: scale(0.9);
	}			
}

@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scale(0.95);	
	}
	50% {
		-webkit-transform: scale(1);
	}	
	100% {
		-webkit-transform: scale(0.95);
	}			
}

/*
==============================================
expandUp
==============================================
*/


.expandUp{
	animation-name: expandUp;
	-webkit-animation-name: expandUp;	

	animation-duration: 0.7s;	
	-webkit-animation-duration: 0.7s;

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

	visibility: visible !important;	
}

@keyframes expandUp {
	0% {
		transform: translateY(100%) scale(0.6) scaleY(0.5);
	}
	60%{
		transform: translateY(-7%) scaleY(1.12);
	}
	75%{
		transform: translateY(3%);
	}	
	100% {
		transform: translateY(0%) scale(1) scaleY(1);
	}	
}

@-webkit-keyframes expandUp {
	0% {
		-webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);
	}
	60%{
		-webkit-transform: translateY(-7%) scaleY(1.12);
	}
	75%{
		-webkit-transform: translateY(3%);
	}	
	100% {
		-webkit-transform: translateY(0%) scale(1) scaleY(1);
	}	
}

/*
==============================================
flipInY
==============================================
*/

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
  
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

/*
==============================================
ZoomIn
==============================================
*/

.ZoomIn{
	animation-name: ZoomIn;
	-webkit-animation-name: ZoomIn;	

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

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

	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;

	visibility: visible !important;	
}

@keyframes ZoomIn {
	0% {
		transform: scale(0.0);	
		opacity:0;
	}
	90% {
		transform: scale(1.2);
		opacity:0.8;
	}
	100% {
		opacity:1;
		transform: scale(1);
	}		
}

@-webkit-keyframes ZoomIn {
	0% {
		-webkit-transform: scale(0.0);	
	}
	90% {
		-webkit-transform: scale(1.2);	
	}	
	100% {
		-webkit-transform: scale(1);
	}
}


/*
==============================================
crossleft
==============================================
*/

.crossleft{
	animation-name: crossleft;
	-webkit-animation-name: crossleft;	

	animation-duration: 0.8s;	
	-webkit-animation-duration: 0.8s;

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

	visibility: visible !important;
}

@keyframes crossleft {
	0% {		
		opacity: 1;		
	}	
	100% {
		opacity: 0;
		transform: translateX(-100%);		
	}		
}

@-webkit-keyframes crossleft {
	0% {		
		opacity: 1;		
	}	
	100% {
		opacity: 0;
		-webkit-transform: translateX(-100%);		
	}	
}