@charset "utf-8";
/* CSS Document */

/* =============================================================================================== */
/* Cloud Animation */
/* =============================================================================================== */

.cloud {
	width: 200px;
	height: 60px;
	background: #fff;
	border-radius: 200px;
	-moz-border-radius: 200px;
	-webkit-border-radius: 200px;
	position: relative;
}
.cloud:after {
	content: '';
	position: absolute;
	background: #FFF;
	width: 80px;
	height: 80px;
	top: -40px;
	left: 20px;
	-webkit-border-radius: 200px;
	-moz-border-radius: 200px;
	border-radius: 200px;
}
.cloud:before {
	content: '';
	position: absolute;
	background: #FFF;
	width: 100px;
	height: 100px;
	top: -60px;
	right: 30px;
	-webkit-border-radius: 200px;
	-moz-border-radius: 200px;
	border-radius: 200px;
}
/*Time to animate*/
.x1 {
	top: 10px;
	-webkit-animation: moveclouds 65s linear infinite;
	-moz-animation: moveclouds 65s linear infinite;
	-o-animation: moveclouds 65s linear infinite;
	-ms-animation: moveclouds 65s linear infinite;
}
/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
	left: 250px;
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-ms-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0.6; /*opacity proportional to the size*/
	/*Speed will also be proportional to the size and opacity*/
	/*More the speed. Less the time in 's' = seconds*/
	-webkit-animation: moveclouds 75s linear infinite;
	-moz-animation: moveclouds 75s linear infinite;
	-o-animation: moveclouds 75s linear infinite;
	-ms-animation: moveclouds 75s linear infinite;
}
.x3 {
	left: 130px;
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.8; /*opacity proportional to the size*/
	-webkit-animation: moveclouds 70s linear infinite;
	-moz-animation: moveclouds 70s linear infinite;
	-o-animation: moveclouds 70s linear infinite;
	-ms-animation: moveclouds 70s linear infinite;
}
.x4 {
	left: 970px; top: 45px;
	-webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	transform: scale(0.75);
	opacity: 0.75; /*opacity proportional to the size*/
	-webkit-animation: moveclouds 65s linear infinite;
	-moz-animation: moveclouds 65s linear infinite;
	-o-animation: moveclouds 65s linear infinite;
	-ms-animation: moveclouds 65s linear infinite;
}
.x5 {
	left: 1200px;
	top: -200px;
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.8; /*opacity proportional to the size*/
	-webkit-animation: moveclouds 75s linear infinite;
	-moz-animation: moveclouds 75s linear infinite;
	-o-animation: moveclouds 75s linear infinite;
	-ms-animation: moveclouds 75s linear infinite;
}


 @-webkit-keyframes moveclouds {
 0% {
margin-left: 1200px;
}
 100% {
margin-left: -1200px;
}
}
@-moz-keyframes moveclouds {
 0% {
margin-left: 1200px;
}
 100% {
margin-left: -1200px;
}
}
@-o-keyframes moveclouds {
 0% {
margin-left: 1200px;
}
 100% {
margin-left: -1200px;
}
}
 @-ms-keyframes moveclouds {
 0% {
margin-left: 1200px;
}
 100% {
margin-left: -1200px;
}
}



@media screen and (min-width: 800px) and (max-width: 1199px) {

 @-webkit-keyframes moveclouds {
 0% {
margin-left: 1000px;
}
 100% {
margin-left: -1000px;
}
}
@-moz-keyframes moveclouds {
 0% {
margin-left: 1000px;
}
 100% {
margin-left: -1000px;
}
}
@-o-keyframes moveclouds {
 0% {
margin-left: 1000px;
}
 100% {
margin-left: -1000px;
}
}
 @-ms-keyframes moveclouds {
 0% {
margin-left: 1000px;
}
 100% {
margin-left: -1000px;
}
}
}


@media screen and (max-width: 799px) {

 @-webkit-keyframes moveclouds {
 0% {
margin-left: 700px;
}
 100% {
margin-left: -700px;
}
}
@-moz-keyframes moveclouds {
 0% {
margin-left: 700px;
}
 100% {
margin-left: -700px;
}
}
@-o-keyframes moveclouds {
 0% {
margin-left: 700px;
}
 100% {
margin-left: -700px;
}
}
 @-ms-keyframes moveclouds {
 0% {
margin-left: 700px;
}
 100% {
margin-left: -700px;
}
}
}

/*

==============================================
broadcast
==============================================
*/

.broadcast {
	animation-name: broadcast;
	-webkit-animation-name: broadcast;
	animation-duration: 1.7s;
	-webkit-animation-duration: 1.7s;
	animation-timing-function: ease-in-out;
	-webkit-animation-timing-function: ease-in-out;
}
 @keyframes broadcast {
 0% {
 -webkit-transform: scale(0);
 opacity: 1;
}
 70% {
 opacity: 1;
}
 80% {
 opacity: 0.7;
}
 100% {
 -webkit-transform: scale(1);
 opacity: 0.1;
}
}
 @-webkit-keyframes broadcast {
 0% {
 -webkit-transform: scale(0);
 opacity: 1;
}
 70% {
 opacity: 1;
}
 80% {
 opacity: 0.7;
}
 100% {
 -webkit-transform: scale(1);
 opacity: 0.1;
}
}

/*

==============================================
Typing animation
==============================================
*/

.animated-type p { 
    white-space:nowrap;
    overflow:hidden;
    border-right: .1em solid #1e78b2;
	
    -webkit-animation: typing 5s steps(10, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
    -moz-animation: typing 5s steps(10, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
}

@-webkit-keyframes typing {
    from { width: 0 }
    to { width:6.19em}
}

@-moz-keyframes typing {
    from { width: 0 }
    to { width:6.19em}
}

@-webkit-keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #1e78b2 }
}

@-moz-keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #1e78b2 }
}