.clouds{
	position:absolute;
	pointer-events:none;
	overflow:hidden;
	width:100%;
	height:100%;
	top:0;
	left:0;
}
.cloud{
	width:200%;
	height:100%;
	background-image:url(../img/design/plain-clouds.png);
	background-size:cover;
	background-repeat:no-repeat
}
.cloud-anim{
	-webkit-animation:cloudanim 120s ease-in-out infinite;
	-moz-animation:cloudanim 120s ease-in-out infinite;
	-ms-animation:cloudanim 120s ease-in-out infinite;
	-o-animation:cloudanim 120s ease-in-out infinite;
	animation:cloudanim 120s ease-in-out infinite
}

/* =====
 Css animation -------- */

.transition{
	-webkit-transition: all 500ms linear;
    -moz-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    -ms-transition: all 300ms linear;
    transition: all 500ms linear;
}
.transition2{
	-webkit-transition: all 1100ms linear;
    -moz-transition: all 1100ms linear;
    -o-transition: all 1100ms linear;
    -ms-transition: all 1100ms linear;
    transition: all 1100ms linear;
}

@-webkit-keyframes spinAround {
	from {
		-webkit-transform: rotate(0deg)
	}
	to {
		-webkit-transform:scale(5.0) rotate(80deg);
	}
}
@-moz-keyframes spinAround {
	from {
		-moz-transform: rotate(0deg)
	}
	to {
		-moz-transform: scale(5.0) rotate(80deg);
	}
}
@keyframes spinAround {
	from {
		transform: rotate(0deg)
	}
	to {
		transform: scale(5.0) rotate(80deg);
	}
}
.animated {
	-webkit-animation-duration: 1.3s;
	   -moz-animation-duration: 1.3s;
	     -o-animation-duration: 1.3s;
	        animation-duration: 1.3s;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
}
.animated.hinge {
	-webkit-animation-duration: 2s;
	   -moz-animation-duration: 2s;
	     -o-animation-duration: 2s;
	        animation-duration: 2s;
}

@-webkit-keyframes flipInX {
 0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    transform: scale(.9);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes flipInX {
 0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    transform: scale(.9);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-o-keyframes flipInX {
 0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    transform: scale(.9);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes flipInX {
 0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    transform: scale(.9);
  }

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

.flipInX {
	-webkit-backface-visibility: visible !important;
	-webkit-animation-name: flipInX;
	-moz-backface-visibility: visible !important;
	-moz-animation-name: flipInX;
	-o-backface-visibility: visible !important;
	-o-animation-name: flipInX;
	backface-visibility: visible !important;
	animation-name: flipInX;
}
@-webkit-keyframes cloudanim{0%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%)}100%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}}@-moz-keyframes cloudanim{0%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%)}100%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}}@-ms-keyframes cloudanim{0%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%)}100%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}}@keyframes cloudanim{0%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%)}100%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes bouncingBox{0%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}25%{-webkit-transform:translateY(-15%);-moz-transform:translateY(-15%);-ms-transform:translateY(-15%);-o-transform:translateY(-15%);transform:translateY(-15%)}75%{-webkit-transform:translateY(15%);-moz-transform:translateY(15%);-ms-transform:translateY(15%);-o-transform:translateY(15%);transform:translateY(15%)}100%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}@-moz-keyframes bouncingBox{0%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}25%{-webkit-transform:translateY(-15%);-moz-transform:translateY(-15%);-ms-transform:translateY(-15%);-o-transform:translateY(-15%);transform:translateY(-15%)}75%{-webkit-transform:translateY(15%);-moz-transform:translateY(15%);-ms-transform:translateY(15%);-o-transform:translateY(15%);transform:translateY(15%)}100%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}@-ms-keyframes bouncingBox{0%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}25%{-webkit-transform:translateY(-15%);-moz-transform:translateY(-15%);-ms-transform:translateY(-15%);-o-transform:translateY(-15%);transform:translateY(-15%)}75%{-webkit-transform:translateY(15%);-moz-transform:translateY(15%);-ms-transform:translateY(15%);-o-transform:translateY(15%);transform:translateY(15%)}100%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}@keyframes bouncingBox{0%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}25%{-webkit-transform:translateY(-15%);-moz-transform:translateY(-15%);-ms-transform:translateY(-15%);-o-transform:translateY(-15%);transform:translateY(-15%)}75%{-webkit-transform:translateY(15%);-moz-transform:translateY(15%);-ms-transform:translateY(15%);-o-transform:translateY(15%);transform:translateY(15%)}100%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}