/*-----------------------------------------------------------------------------
	Name	    : Animations
	Description	: animations setings
	Author		: artibaj
	Author URL	: http://www.artibaj.com
	Created		: November 01 2018
	License		: All Rights Reserved. Do Not Copy!
-------------------------------------------------------------------------------*/

/**/

@-webkit-keyframes scaleXLeftRightLoop {
 0% {
 -webkit-transform: scaleX(0);
 transform: scaleX(0);
 -webkit-transform-origin: left;
 transform-origin: left;
}
 47% {
 -webkit-transform:scaleX(1);
 transform: scaleX(1);
 -webkit-transform-origin: left;
 transform-origin: left;
}
 48% {
 -webkit-transform: scaleX(1);
 transform:scaleX(1);
 -webkit-transform-origin: right;
 transform-origin: right;
}
 95% {
 -webkit-transform:  scaleX(0);
 transform: scaleX(0);
 -webkit-transform-origin: right;
 transform-origin: right;
}
 96% {
 -webkit-transform:  scaleX(0);
 transform: scaleX(0);
 -webkit-transform-origin: left;
 transform-origin: left;
}
 100% {
 -webkit-transform:  scaleX(0);
 transform:  scaleX(0);
}
}
@keyframes scaleXLeftRightLoop {
 0% {
 -webkit-transform: scaleX(0);
 transform: scaleX(0);
 -webkit-transform-origin: left;
 transform-origin: left;
}
 47% {
 -webkit-transform:scaleX(1);
 transform: scaleX(1);
 -webkit-transform-origin: left;
 transform-origin: left;
}
 48% {
 -webkit-transform: scaleX(1);
 transform:scaleX(1);
 -webkit-transform-origin: right;
 transform-origin: right;
}
 95% {
 -webkit-transform:  scaleX(0);
 transform: scaleX(0);
 -webkit-transform-origin: right;
 transform-origin: right;
}
 96% {
 -webkit-transform:  scaleX(0);
 transform: scaleX(0);
 -webkit-transform-origin: left;
 transform-origin: left;
}
 100% {
 -webkit-transform:  scaleX(0);
 transform:  scaleX(0);
}}





/* abcreativity-pulse */
 @-webkit-keyframes abcreativity_pulse {
 0% {
 -webkit-transform: scale(0.7);
 -ms-transform: scale(0.7);
 transform:scale(0.7);
 opacity: 1;
}
 60% {
 -webkit-transform: scale(1.2);
 -ms-transform: scale(1.2);
 transform:scale(1.2);
 opacity: 1;
}
 100% {
 -webkit-transform: scale(1);
 -ms-transform: scale(1);
 transform:scale(1);
 opacity: 1;
}
}
 @keyframes abcreativity_pulse {
 0% {
 -webkit-transform: scale(0.7);
 -ms-transform: scale(0.7);
 transform:scale(0.7);
 opacity: 1;
}
 60% {
 -webkit-transform: scale(1.2);
 -ms-transform: scale(1.2);
 transform:scale(1.2);
 opacity: 1;
}
 100% {
 -webkit-transform: scale(1);
 -ms-transform: scale(1);
 transform:scale(1);
 opacity: 1;
}
}
/*
.abcreativity-pulse {
    -webkit-animation-name: abcreativity-pulse;
    animation-name: abcreativity-pulse;
}
*/


/* spin arrond */
 @-webkit-keyframes spinAround {
 from {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 to {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
 @keyframes spinAround {
 from {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 to {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
.spinAround {
    -webkit-animation-name: spinAround;
    animation-name: spinAround;
}



/* spin around CW */
 @-webkit-keyframes spinAroundCW {
 from {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 to {
 -webkit-transform: rotate(720deg);
 transform: rotate(720deg);
}
}
 @keyframes spinAroundCW {
 from {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 to {
 -webkit-transform: rotate(720deg);
 transform: rotate(720deg);
}
}
/* spin around CCW */

 @-webkit-keyframes spinAroundCCW {
 from {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
 to {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
}
 @keyframes spinAroundCCW {
 from {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
 to {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
}
.spinAroundCCW {
    -webkit-animation-name: spinAroundCCW;
    animation-name: spinAroundCCW;
}
.leaf-shaped-element {
    float: left;
    width: 400px;
    height: 400px;
    shape-outside: url(../images/leaf.png);
    shape-margin: 15px;
    shape-image-threshold: 0.5;
    background: #009966 url(../images/1_1.jpg);
    -webkit-mask-image: url(../images/leaf.png);
    mask-image: url(../images/leaf.png);
}


/* Animations */
@-webkit-keyframes moveBottom {
 0%, 100% {
 -webkit-transform: translateY(0%);
 transform: translateY(0%);
}
 50% {
 -webkit-transform:translateY(20%);
 transform: translateY(20%);
}
}
 @keyframes moveBottom {
 0%, 100% {
 -webkit-transform: translateY(0%);
 transform: translateY(0%);
}
 50% {
 -webkit-transform:translateY(20%);
 transform: translateY(20%);
}
}
.moveBottom {
    -webkit-animation-name: moveBottom;
    animation-name: moveBottom;
}
 @-webkit-keyframes moveBottom2 {
 0%, 100% {
 -webkit-transform: scale(1) translateY(0%);
 transform:  scale(1) translateY(0%);
}
 50% {
 -webkit-transform: scale(0.5) translateY(60px);
 transform: scale(0.5) translateY(60px);
}
}
 @keyframes moveBottom2 {
0%, 100% {
 -webkit-transform: scale(1) translateY(0%);
 transform:  scale(1) translateY(0%);
}
 50% {
 -webkit-transform: scale(0.5) translateY(60px);
 transform: scale(0.5) translateY(60px);
}
}
.moveBottom2 {
    -webkit-animation-name: moveBottom2;
    animation-name: moveBottom2;
}
 @-webkit-keyframes increaseHeight {
 0% {
 height: 0;
 border-left-color: #FF0000;
 border-right-color: #FF0000;
 left:-2px;
}
 100% {
 height: 100%;
 border-left-color: #FF0000;
 border-right-color: #FF0000;
 left:-2px;
}
}
 @keyframes increaseHeight {
 0% {
 height: 0;
 border-left-color: #FF0000;
 border-right-color: #FF0000;
 left:-2px;
}
 100% {
 height: 100%;
 border-left-color: #FF0000;
 border-right-color: #FF0000;
 left:-2px;
}
}
.increaseHeight {
    -webkit-animation-name: increaseHeight;
    animation-name: increaseHeight;
}
 @-webkit-keyframes increaseWidth {
 0% {
 width: 0;
 border-top-color: #FF0000;
 left:50%;
 transform: translateX(-50%);
}
 100% {
 width: 100%;
 border-top-color: #FF0000;
 left:50%;
 transform: translateX(-50%);
}
}
 @keyframes increaseWidth {
 0% {
 width: 0;
 border-top-color: #FF0000;
 left:50%;
 transform: translateX(-50%);
}
 100% {
 width: 100%;
 border-top-color: #FF0000;
 left:50%;
 transform: translateX(-50%);
}
}
.increaseWidth {
    -webkit-animation-name: increaseWidth;
    animation-name: increaseWidth;
}
 @-webkit-keyframes increaseWidth2 {
 0% {
 width: 0;
 border-bottom-color: #FF0000;
}
 100% {
 width: 50%;
 border-bottom-color: #FF0000;
}
}
 @keyframes increaseWidth2 {
 0% {
 width: 0;
 border-bottom-color: #FF0000;
}
 100% {
 width: 50%;
 border-bottom-color: #FF0000;
}
}
.increaseWidth2 {
    -webkit-animation-name: increaseWidth2;
    animation-name: increaseWidth2;
}
 @-webkit-keyframes increaseWidth3 {
 0% {
 width: 0;
 border-bottom-color: #FF0000;
}
 100% {
 width: 50%;
 border-bottom-color: #FF0000;
}
}
 @keyframes increaseWidth3 {
 0% {
 width: 0;
 border-bottom-color: #FF0000;
}
 100% {
 width: 50%;
 border-bottom-color: #FF0000;
}
}
.increaseWidth3 {
    -webkit-animation-name: increaseWidth3;
    animation-name: increaseWidth3;
}
 @keyframes bouncePlaceHorizontal {
 0%, 100% {
 transform: translateX(-0.75rem);
}
 50% {
 transform: translateX(0.75rem);
}
}
 @-webkit-keyframes resizeWidth {
 from {
 width:0;
}
 to {
 width:100%;
}
}
 @keyframes resizeWidth {
 from {
 width:0;
}
 to {
 width:100%;
}
}
.resizeWidth {
    -webkit-animation-name: resizeWidth;
    animation-name: resizeWidth;
}