.diamonds {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    overflow: hidden;
    pointer-events: none
}
.diamond {
    position: absolute;
    width: 5px;
    height: 5px;
    transform: rotate(45deg);
    background: #ededed;
/*    border-radius: 100%;*/
    pointer-events: none
}


@-webkit-keyframes animateTop {
 0% {
        margin-top: 0
    }
    
    100% {
        margin-top: -100%
    }
}
@-moz-keyframes animateTop {
 0% {
        margin-top: 0
    }
    
    100% {
        margin-top: -100%
    }
}
@keyframes animateTop {
    0% {
        margin-top: 0
    }
    
    100% {
        margin-top: -100%
    }
}

@-webkit-keyframes animateLeft {
    0% {
        margin-right: 0
    }
    
    100% {
        margin-right: -100%
    }
}
@-moz-keyframes animateLeft {
    0% {
        margin-left: 0
    }
    
    100% {
         margin-right: -100%
    }
}
@keyframes animateLeft {
    0% {
        margin-right: 0
    }
    
    100% {
         margin-right: -100%
    }
}


@-webkit-keyframes animateRight {
    0% {
        margin-right: 0
    }
    
    100% {
        margin-right: 100%
    }
}
@-moz-keyframes animateRight {
    0% {
        margin-right: 0
    }
    
    100% {
       margin-right: 100%
    }
}
@keyframes animateRight {
    0% {
        margin-right: 0
    }
    
    100% {
        margin-right: 100%
    }
}


@-webkit-keyframes animateTopLeft {
 0% {
        margin-top: 0;
         margin-right: 0
    }
    
    100% {
        margin-top: -33%;
        margin-right: -33%
    }
}
@-moz-keyframes animateTopLeft {
 0% {
        margin-top: 0;
         margin-right: 0
    }
    
    100% {
        margin-top: -33%;
        margin-right: -33%
    }
}
@keyframes animateTopLeft {
    0% {
        margin-top: 0;
         margin-right: 0
    }
    
    100% {
        margin-top: -33%;
        margin-right: -33%
    }
}


@-webkit-keyframes animateTopRight {
    0% {
        margin-top: 0;
        margin-right: 0
    }
    
    100% {
        margin-top: -33%;
        margin-right: 33%
    }
}
@-moz-keyframes animateTopRight {
    0% {
        margin-top: 0;
        margin-right: 0
    }
    
    100% {
        margin-top: -33%;
        margin-right: 33%
    }
}
@keyframes animateTopRight {
    0% {
        margin-top: 0;
         margin-right: 0
    }
    
    100% {
        margin-top: -33%;
        margin-right: 33%
    }
}



/*@-webkit-keyframes animatebottomRight {
    0% {
        margin-top: 0;
        margin-left: 0
    }
    
    100% {
        margin-top: 33%;
        margin-left: 33%
    }
}
@-moz-keyframes animatebottomRight {
     0% {
        margin-top: 0;
        margin-left: 0
    }
    
    100% {
        margin-top: 33%;
        margin-left: 33%
    }
}*/
@keyframes animatebottomRight {
    0% {
        margin-top: 0;
        margin-right: 0
    }
    
    100% {
        margin-top: 33%;
        margin-right: 33%
    }
}


@-webkit-keyframes animatebottomLeft {
    0% {
        margin-top: 0;
        margin-right: 0
    }
    
    100% {
        margin-top: 33%;
        margin-right: -33%
    }
}
@-moz-keyframes animatebottomLeft {
     0% {
        margin-top: 0;
        margin-right: 0
    }
    
    100% {
        margin-top: 33%;
        margin-right: -33%
    }
}
@keyframes animatebottomLeft {
    0% {
        margin-top: 0;
        margin-right: 0
    }
    
    100% {
        margin-top: 33%;
        margin-right: -33%
    }
}

.d1 {
    right: 30%;
    top: 70%;
    width: 10px;
    height: 10px;
    background: #018ad3;
    -webkit-animation: animateTopLeft 32s linear infinite;
    -moz-animation: animateTopLeft 32s linear infinite;
    animation: animateTopLeft 32s linear infinite;
}


.d2 {
    right: 65%;
    top: 90%;
    background: #2f3192;
    -webkit-animation: animateTopLeft 46s linear infinite;
    -moz-animation: animateTopLeft 46s linear infinite;
    animation: animateTopLeft 46s linear infinite;
}

.d3 {
    right: 20%;
    top: 25%;
    background: #018ad3;
    -webkit-animation: animatebottomRight 34s linear infinite;
    -moz-animation: animatebottomRight 34s linear infinite;
    animation: animatebottomRight 34s linear infinite;
}


.d4 {
    right: 5%;
    top: 50%;
    background: #2f3192;
    -webkit-animation: animatebottomRight 37s linear infinite;
    -moz-animation: animatebottomRight 37s linear infinite;
    animation: animatebottomRight 37s linear infinite;
    opacity: 0.75
}

.d5 {
    right: 50%;
    top: 60%;
    background: #018ad3;
    opacity: 0.75;
    -webkit-animation: animateLeft 54s linear infinite;
    -moz-animation: animateLeft 54s linear infinite;
    animation: animateLeft 54s linear infinite;
}


.d6 {
    right: 10%;
    top: 80%;
    background: #2f3192;
    -webkit-animation: animateRight 62s linear infinite;
    -moz-animation: animateRight 62s linear infinite;
    animation: animateRight 62s linear infinite;
}


.d7 {
    right: 30%;
    top: 100%;
    width: 10px;
    height: 10px;
    opacity: 0.75;
    background: #018ad3;
    -webkit-animation: animateTop 45s linear infinite;
    -moz-animation: animateTop 45s linear infinite;
    animation: animateTop 45s linear infinite;
}

.d8 {
    right: 5%;
    top: 45%;
    width: 7px;
    height: 7px;
    background: #2f3192;
    -webkit-animation: animateTopRight 48s linear infinite;
    -moz-animation: animateTopRight 48s linear infinite;
    animation: animateTopRight 48s linear infinite;
}

.d9 {
    right: 25%;
    top: 90%;
    width: 7px;
    height: 7px;
    opacity: 0.75;
    background: #2f3192;
    -webkit-animation: animateTopRight 32s linear infinite;
    -moz-animation: animateTopRight 32s linear infinite;
    animation: animateTopRight 32s linear infinite;
}

.d10 {
    right: 5%;
    top: 25%;
    background: #018ad3;
    -webkit-animation: animateRight 24s linear infinite;
    -moz-animation: animateRight 24s linear infinite;
    animation: animateRight 24s linear infinite;
}

.d11 {
    right: 45%;
    top: 35%;
    width: 8px;
    height: 8px;
    opacity: 0.75;
    background: #2f3192;
    -webkit-animation: animatebottomLeft 38s linear infinite;
    -moz-animation: animatebottomLeft 38s linear infinite;
    animation: animatebottomLeft 38s linear infinite;
}


.d12 {
    right: -10%;
    top: 72%;
    width: 8px;
    height: 8px;
    opacity: 0.75;
    background: #018ad3;
    -webkit-animation: animateTopRight 55s linear infinite;
    -moz-animation: animateTopRight 55s linear infinite;
    animation: animateTopRight 55s linear infinite;
}


.d13 {
    right: -10%;
    top: 40%;
    background: #2f3192;
    -webkit-animation: animatebottomRight 50s linear infinite;
    -moz-animation: animatebottomRight 50s linear infinite;
    animation: animatebottomRight 50s linear infinite;
}

.d14 {
    right: 40%;
    top: 90%;
    background: #018ad3;
    -webkit-animation: animateTopRight 40s linear infinite;
    -moz-animation: animateTopRight 40s linear infinite;
    animation: animateTopRight 40s linear infinite;
}

.d15 {
    right: 70%;
    top: 72%;
    width: 15px;
    height: 15px;
    opacity: 0.5;
    background: #2f3192;
    -webkit-animation: animateLeft 44s linear infinite;
    -moz-animation: animateLeft 44s linear infinite;
    animation: animateLeft 44s linear infinite;
}



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

    animation-duration: 1.6s;   
    -webkit-animation-duration: 1.6s;

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

    visibility: visible !important;         
}

@keyframes bigEntrance {
    0% {
        transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
        opacity: 0.2;
    }
    30% {
        transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);        
        opacity: 1;
    }
    45% {
        transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    60% {
        transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);     
        opacity: 1;
    }   
    75% {
        transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    90% {
        transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);      
        opacity: 1;
    }   
    100% {
        transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }       
}

@-webkit-keyframes bigEntrance {
    0% {
        -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
        opacity: 0.2;
    }
    30% {
        -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);        
        opacity: 1;
    }
    45% {
        -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    60% {
        -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);     
        opacity: 1;
    }   
    75% {
        -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    90% {
        -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);      
        opacity: 1;
    }   
    100% {
        -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }               
}


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

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

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

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

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


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

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

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

    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%; 

    visibility: visible !important;     
}

@keyframes hatch {
    0% {
        transform: rotate(0deg) scaleY(0.6);
    }
    20% {
        transform: rotate(-2deg) scaleY(1.05);
    }
    35% {
        transform: rotate(2deg) scaleY(1);
    }
    50% {
        transform: rotate(-2deg);
    }   
    65% {
        transform: rotate(1deg);
    }   
    80% {
        transform: rotate(-1deg);
    }       
    100% {
        transform: rotate(0deg);
    }                                   
}

@-webkit-keyframes hatch {
    0% {
        -webkit-transform: rotate(0deg) scaleY(0.6);
    }
    20% {
        -webkit-transform: rotate(-2deg) scaleY(1.05);
    }
    35% {
        -webkit-transform: rotate(2deg) scaleY(1);
    }
    50% {
        -webkit-transform: rotate(-2deg);
    }   
    65% {
        -webkit-transform: rotate(1deg);
    }   
    80% {
        -webkit-transform: rotate(-1deg);
    }       
    100% {
        -webkit-transform: rotate(0deg);
    }       
}


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

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

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

    transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;        
}

@keyframes stretchRight {
    0% {
        transform: scaleX(0.3);
    }
    40% {
        transform: scaleX(1.02);
    }
    60% {
        transform: scaleX(0.98);
    }
    80% {
        transform: scaleX(1.01);
    }
    100% {
        transform: scaleX(0.98);
    }               
    80% {
        transform: scaleX(1.01);
    }
    100% {
        transform: scaleX(1);
    }                           
}

@-webkit-keyframes stretchRight {
    0% {
        -webkit-transform: scaleX(0.3);
    }
    40% {
        -webkit-transform: scaleX(1.02);
    }
    60% {
        -webkit-transform: scaleX(0.98);
    }
    80% {
        -webkit-transform: scaleX(1.01);
    }
    100% {
        -webkit-transform: scaleX(0.98);
    }               
    80% {
        -webkit-transform: scaleX(1.01);
    }
    100% {
        -webkit-transform: scaleX(1);
    }       
}


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

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

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

    visibility: visible !important; 
}

@keyframes slideRight {
    0% {
        transform: translateX(-150%);
    }
    50%{
        transform: translateX(8%);
    }
    65%{
        transform: translateX(-4%);
    }
    80%{
        transform: translateX(4%);
    }
    95%{
        transform: translateX(-2%);
    }           
    100% {
        transform: translateX(0%);
    }   
}

@-webkit-keyframes slideRight {
    0% {
        -webkit-transform: translateX(-150%);
    }
    50%{
        -webkit-transform: translateX(8%);
    }
    65%{
        -webkit-transform: translateX(-4%);
    }
    80%{
        -webkit-transform: translateX(4%);
    }
    95%{
        -webkit-transform: translateX(-2%);
    }           
    100% {
        -webkit-transform: translateX(0%);
    }
}


.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);
        opacity: 0.7;       
    }
    50% {
        transform: scale(1);
        opacity: 1; 
    }   
    100% {
        transform: scale(0.9);
        opacity: 0.7;   
    }           
}

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

@-webkit-keyframes slideInUp {
	0% {
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
		visibility: visible
	}

	to {
		-webkit-transform: translateZ(0);
		transform: translateZ(0)
	}
}

@keyframes slideInUp {
	0% {
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
		visibility: visible
	}

	to {
		-webkit-transform: translateZ(0);
		transform: translateZ(0)
	}
}

.animate__slideInUp {
	-webkit-animation-name: slideInUp;
	animation-name: slideInUp
}

[data-animate] {
    visibility: hidden;
}

[data-animate-once] {
    visibility: hidden;
}

.bounce, .pulse, .floating, .tossing, .pullUp, .pullDown, .stretchLeft, .stretchRight {
    visibility: visible !important;
}