.blur {filter: blur(4px);}
.blur2 {filter: blur(20px);}
.blur3 {filter: blur(50px);}
.brightness {filter: brightness(250%);}
.contrast {filter: contrast(180%);}
.grayscale {filter: grayscale(100%);}
.huerotate {filter: hue-rotate(180deg);}
.invert {filter: invert(100%);}
.opacity {filter: opacity(50%);}
.saturate {filter: saturate(7);}
.sepia {filter: sepia(100%);}
.shadow {filter: drop-shadow(8px 8px 10px green);}


@keyframes flickerAnimation {
  0%   { opacity:1; }
  10%  { opacity:0; }
  100% { opacity:1; }
  }
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  10%  { opacity:0; }
  100% { opacity:1; }
  }
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  10%  { opacity:0; }
  100% { opacity:1; }
  }
@-webkit-keyframes flickerAnimation{
  10%   { opacity:1; }
  20%  { opacity:0; }
  100% { opacity:1; }
}

.rotate {
  animation: rotation 30s infinite linear;
}


.rotate2 {
  animation: rotation 60s infinite linear;
}

.rotate3 {
  animation: rotation 1s forwards linear;
}

@-webkit-keyframes rotation {
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes growshrink{
 
	
  0%   { transition:1ms;
	     transform:scale(0); 
		 opacity:1;		 
		}

	 	
  100% { transition:1ms;
	transform:scale(1);
	filter: hue-rotate(50deg);
	filter: hue-rotate(100deg);
	filter: hue-rotate(150deg);
	filter: hue-rotate(200deg);
	filter: hue-rotate(250deg);
	filter: hue-rotate(300deg);
	filter: hue-rotate(360deg);
	opacity:1;
	}
}

@-webkit-keyframes spinner{
 
	
  0%   { -webkit-transform: scaleX(1);
  transform: scaleX(1);	 
		}

	 	
    100%   { -webkit-transform: scaleX(1);
  			transform: scaleX(-1);		 
		}
}

@-webkit-keyframes spinner2{
 
	
  0%   { -webkit-transform: scaleX(-1);
  transform: scaleX(-1);	 
		}

	 	
    100%   { -webkit-transform: scaleX(1);
  			transform: scaleX(1);		 
		}
}

@-webkit-keyframes growshrink2{
 
	
  0%   { transition:1ms;
	     transform:scale(0); 
		 opacity:1;		 
		}

	 	
  100% { transition:1ms;
	transform:scale(1);
	opacity:1;
	}
}

@-webkit-keyframes colorchange{

	 		
   0% { transition:1ms;
	filter: hue-rotate(0deg);
	
	opacity:0.2;
	}
		
  100% { transition:1ms;
	filter: hue-rotate(360deg);
	
	opacity:0.2;
	}
}

@-webkit-keyframes colorchange2{

	 		
   0% { transition:0.5ms;
	filter: hue-rotate(0deg);
	
	
	}
		
  100% { transition:0.5ms;
	filter: hue-rotate(360deg);
	
	
	}
}


@-webkit-keyframes colorchange3{

	 		
   0% { transition:0.5ms;
	filter: hue-rotate(0deg);
	
	}
		
  100% { transition:0.5ms;
	filter: hue-rotate(360deg);
	
	}
}

.animate-picturescroll
{
	-webkit-animation: slide 300s infinite;
   -moz-animation: slide 300s linear infinite;
   -o-animation: slide 300s linear infinite;
    animation: slide 200s linear infinite;
	}
	
@keyframes slide{

  100%{
    -webkit-transform: translateX(10%);
  }
}



.animate-spinner {
   -webkit-animation: spinner 2s forwards;
   -moz-animation: spinner 2s forwards;
   -o-animation: spinner 2s forwards;
    animation: spinner 0.5s forwards;
}

.animate-spinner-invert {
   -webkit-animation: spinner2 2s forwards;
   -moz-animation: spinner2 2s forwards;
   -o-animation: spinner2 2s forwards;
    animation: spinner2 0.5s forwards;
}

.animate-flicker {
   -webkit-animation: flickerAnimation 2s forwards;
   -moz-animation: flickerAnimation 2s forwards;
   -o-animation: flickerAnimation 2s forwards;
    animation: flickerAnimation 5s forwards;
}


.animate-grower {
   -webkit-animation: growshrink 1s infinite;
   -moz-animation: growshrink 1s infinite;
   -o-animation: growshrink 1s infinite;
   animation: growshrink 3s forwards;
}

.animate-grower2 {
   -webkit-animation: growshrink2 1s infinite;
   -moz-animation: growshrink2 1s infinite;
   -o-animation: growshrink2 1s infinite;
   animation: growshrink2 3s forwards;
}

.animate-colorchanger {
   -webkit-animation: colorchange 5s infinite;
   -moz-animation: colorchange 5s infinite;
   -o-animation: colorchange 5s infinite;
    animation: colorchange 5s infinite;
	opacity:0.2;
}

.animate-colorchanger2 {
   -webkit-animation: colorchange2 1s infinite;
   -moz-animation: colorchange2 1s infinite;
   -o-animation: colorchange2 1s infinite;
    animation: colorchange2 1s forwards;
}

.animate-colorchanger3 {
   -webkit-animation: colorchange3 1s infinite;
   -moz-animation: colorchange3 1s infinite;
   -o-animation: colorchange3 1s infinite;
    animation: colorchange3 1s infinite;
}

.animate-colorchanger4 {
   -webkit-animation: colorchange2 1s infinite;
   -moz-animation: colorchange2 1s infinite;
   -o-animation: colorchange2 1s infinite;
    animation: colorchange2 1s infinite;
}

.growerstyle
{
	height:50px;
	width:50px;
	background-color:#0F0;
	border-radius:100px;
	}
	
.growerdiv
{
	position:relative;
	top:-50px;
	left:-110px;
	z-index:1;
	}
		
.wop3 {
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
  
  
}

.wop3:first-of-type {    /* For increasing performance 
                       ID/Class should've been used. 
                       For a small demo 
                       it's okaish for now */
  animation: showup3 2s forwards;

}

.wop3:last-of-type {
  width:0px;
  animation: reveal3 2s forwards;

}

.wop3:last-of-type span {
  margin-left:-355px;
  animation: slidein3 5s forwards;
}

@keyframes showup3 {

    100% {opacity:1;}
}

@keyframes slidein3 {
    0% { margin-left:-800px; }
    20% { margin-left:-800px; }
    35% { margin-left:0px; }
    100% { margin-left:0px;}

}

@keyframes reveal3 {

    100% {opacity:1;width:800px;text-wrap:normal;}
}

.wop {
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
  
  
}

.wop:first-of-type {    /* For increasing performance 
                       ID/Class should've been used. 
                       For a small demo 
                       it's okaish for now */
  animation: showup 2s forwards;

}

.wop:last-of-type {
  width:0px;
  animation: reveal 2s forwards;

}

.wop:last-of-type span {
  margin-left:-355px;
  animation: slidein 5s forwards;
}

@keyframes showup {

    100% {opacity:1;}
}

@keyframes slidein {
    0% { margin-left:-800px; }
    20% { margin-left:-800px; }
    35% { margin-left:0px; }
    100% { margin-left:0px;}

}

@keyframes reveal {

    100% {opacity:1;width:380px;text-wrap:normal;height:150px;}
}

	
.wop2 {
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
  
  
}

.wop2:first-of-type {    /* For increasing performance 
                       ID/Class should've been used. 
                       For a small demo 
                       it's okaish for now */
  animation: showup2 2s forwards;

}

.wop2:last-of-type {
  width:0px;
  animation: reveal2 1s forwards;

}

.wop2:last-of-type span {
  margin-left:-355px;
  animation: slidein2 5s forwards;
}

@keyframes showup2 {

    100% {opacity:1;}
}

@keyframes slidein2 {
    0% { margin-left:-900px;opacity:0; }
    20% { margin-left:-900px;  }
    35% { margin-left:0px;  }
    100% { margin-left:0px;opacity:1; }

}

@keyframes reveal2 {

    100% {opacity:1;width:500px;text-wrap:normal;}
}


p {
  font-size:12px;
  color:#999;
  margin-top:200px;
}
	
.newactionbuttonstyle
{
	background-color:#fedc00;
	width:50px;
	height:55px;
	border-radius:50px;
	text-align:center;
	font-size:0px;
	border:3px #fff solid;
	}
		
.newactionbuttonstyle:hover
{
	background-color:#fedc00;
	width:50px;
	height:55px;
	border-radius:50px;
	text-align:center;
	font-size:0px;
	border:3px #fff solid;
	}
		
.newactionbuttonstyle2
{
	background-color:#fedc00;
	width:40px;
	height:45px;
	border-radius:50px;
	text-align:center;
	font-size:0px;
	border:3px #fff solid;
	cursor:pointer;
	}
		
.newactionbuttonstyle2:hover
{
	background-color:#fedc00;
	width:40px;
	height:45px;
	border-radius:50px;
	text-align:center;
	font-size:0px;
	border:3px #fff solid;
	cursor:pointer;
	}
			
.newactionbuttonstyle3
{
	background-color:#fedc00;
	width:30px;
	height:35px;
	border-radius:50px;
	text-align:center;
	font-size:0px;
	border:3px #fff solid;
	cursor:pointer;
	}
		
.newactionbuttonstyle3:hover
{
	background-color:#fedc00;
	width:30px;
	height:35px;
	border-radius:50px;
	text-align:center;
	font-size:0px;
	border:3px #fff solid;
	cursor:pointer;
	}

.hovernohover
{
	background-color:transparent;
	}
	
.hovernohover:hover
{
	background-color:#ddd;
	}
	
.newhover3
{
	opacity:0;
	}
		
.newhover3:hover
{
	opacity:1;
	}