@charset "utf-8";
/* CSS Document */
/* .body-background{
	background-image: url("../images/thankyouBG.png");
} */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url("https://fonts.googleapis.com/css?family=Questrial");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");
i{padding: 5px;}
body{
	font-size: 18px;
	font-family: questrial;
	font-style: normal;
	font-weight: 400;
	display: flex;
    flex-direction: column;
    height: 100vh;
	background-color: #fff;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;

}
a{
	text-decoration: none;
	color:#086A7B; 
}
a:hover{
	text-decoration: none ;
	color: #022d35;
}
.welcomepg{
	/* background-image: url("../images/thankyouBG.png"); */
	background-image: radial-gradient(132deg, #d9f4f8 0%, #afeffd 100%);
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;	
	background-color:#d8faff;
}
/*Nav Bar*/
.navbar {
	padding-top: 0px !important;
	z-index: 100;
	opacity: 1;
	color: #086A7B;
	width: 100%;
	justify-content: right;
}
.navbar .navbar-text, .material-symbols-outlined {
  color: #086A7B;
}
.nav-item, .material-symbols-outlined {
	padding: 0.5rem;	
	/* display: flex; */
	align-items: center;
}
.navbar .navbar-nav .nav-link {
	color: #086A7B;
	border-radius: 0 0 0.5rem 0.5rem;
	padding: 0.5rem 2em;
	font-weight: 700;
	height: 4rem;
    align-items: center;
    display: flex;
}
/* .navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus,
.navbar .nav-item .nav-link .material-symbols-outlined:hover{
  color: #ffffff;
  background-color: #086A7B;
} */
.collapse ul li {
	color: #086A7B;
}
footer {
	color: #086A7B;
	padding-top: 1rem;
}
ul.about {
	list-style-type: disc;
}
/* .galleryContainer {
	background-color: #FFFFFF;
} */
.hero{
	padding: 8rem 0;

}
.hero1{
	/* background-color: #FFDEE9; */
	/* background-image: linear-gradient(198deg, #ffffff 20%, #affffc 100%); */	
	/* background-size: 80%; */
	background-repeat:no-repeat;
	background-position-x: 100%;
	background-blend-mode: multiply;
	padding: 15rem 0;
}
.hero2{
	background: url("../images/hero2.jpg"), linear-gradient(to top,rgba(255, 255, 255),rgba(255, 255, 255, 1));
	background-size: cover;
	background-position-y: 50%;
	/* background-blend-mode: multiply; */
	padding: 15rem 0;
	/* margin: 2.25rem 0; */
}
.hero3{
	background: url("../images/revamp-hero.png");
	background-size: 35%;
	background-position-x: 20%;
	background-repeat: no-repeat;
	/* background-blend-mode: multiply; */
	padding: 15rem 0;
	/* margin: 2.25rem 0; */
}
.carousel-control-next-icon, .carousel-control-prev-icon {
    background-color: black;
	background-size: 80%;
    border-radius: 2rem;
    padding: 1rem;
}
.carousel-indicators [data-bs-target] {
	background-color: black;
}
.carousel{
	height: 30rem;
}
.rowSpace > .row{
	margin: 5rem 0;
}
/* button.website {
	border-radius: 25px;
	text-align: center;
	font-size: medium;
	background-color: #FFFFFF;
	border-color: #086A7B;
	margin-top: 15px;
	[disabled]margin-right: 50px; */
	/* [disabled]margin-bottom: 50px;
	margin-left: 125px;
	font-family: questrial;
	font-style: normal;
	font-weight: 700;
	color: #086A7B;
	padding-top: 5px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 5px;
	-webkit-box-shadow: 0px 0px;
	box-shadow: 0px 0px;
} */
button {
	border-radius: 25px;
	text-align: center;
	font-size: medium;
	background-color: #FFFFFF;
	border-color: #086A7B;
	margin: 8px;
	font-family: questrial;
	font-style: normal;
	font-weight: 700;
	color: #086A7B;
	padding: 5px 10px;
	-webkit-box-shadow: 0px 0px;
	box-shadow: 0px 0px;
}
button.project{
	border-radius: 0;
	padding: 0.5rem 1rem;
	display: flex;
    align-items: center;
	width: 18rem;
	text-align: center;	
	justify-content: center;
}
/* input.submit {
	border-radius: 25px;
	text-align: center;
	font-size: medium;
	background-color: #FFFFFF;
	border-color: #086A7B;
	font-family: questrial;
	font-style: normal;
	font-weight: 700;
	color: #086A7B;
	padding-top: 5px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 5px;
	-webkit-box-shadow: 0px 0px;
	margin: auto;
	box-shadow: 0px 0px;
}
button.thankyou {
	border-radius: 25px;
	text-align: center;
	font-size: small;
	background-color: #FFFFFF;
	border-color: #086A7B;
	margin-top: auto;
	margin-right: auto;
	margin-left: 45%;
	margin-bottom: auto;
	font-family: questrial;
	font-style: normal;
	font-weight: 700;
	color: #086A7B;
	padding: 10px;
	-webkit-box-shadow: 0px 0px;
	box-shadow: 0px 0px;
} */
.mybImg > .row > .col-lg-7 > h3{
	margin:0;	
}
/* .island {
	background-image: url("../images/header.png");
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	margin: -45vh 0 0 0;
	display: flex;	
} */
p.homepage {
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	z-index: 10;
	font-size: 1.25rem;
	display: block;
	position: relative;
	text-align: left;
}
h1{
	font-size: 4rem;
	margin: 0px;
	font-weight: 600;
	text-align: left;
}
h2 {
	font-size: 2.5rem;
	font-style: normal;
	font-weight: 600;
	/* color: #252525; */
	padding: 1rem 0;
}

h3 {
	font-size: 1.5rem;
	text-align: left;
	font-weight: 600;
	/* color: #1c1c1c; */
	padding: 0.5rem 0;
	margin:0; 
}
h4 {
	font-size: 1.5rem;
	font-weight: 600;
	/* color: #086A7B; */
	text-align: left;
}
#education{
	color: #000000;
	font-family: questrial;
	font-style: normal;
	font-weight: 400;
	font-size: 14pt;
}
.circle{
	margin: auto;
	text-align: center;
	display: block;
}
@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.bounceInLeft {
  animation-name: bounceInLeft;
}
ul.about {
	list-style-type: none;
	list-style-image: url(../images/check.png);
	color: #000000;
	font-family: questrial;
	font-style: normal;
	font-weight: 400;
	font-size: 14pt;
}
/* div.graphic {
	margin-top: 150px;
	margin-bottom: 150px;
} */
div.aboutRow {
	margin: 1rem 0 5rem 0;
    text-align: center;
}
.about {
	padding: 5rem 0 5rem 0;
	background-color: white;
}
.img-responsive {
	width: 100%;
	height: 100%;
	max-width: 350px;
}
.overlay > p {
	font-family: questrial;
	font-style: normal;
	font-weight: 400;
	color: #086A7B;
	margin-top: 35%;
	font-size: large;
}
.modalBigImg {
	margin: auto;
	width: 100%;
	text-align: center;
	padding-top: 10%;
	height: auto;
	padding-bottom: 11%;
}
/* .containerThanks {
	background-color: #BAE6EF;
	background-size: cover;
	background-image: url(../images/thankyouBG.png);
	width: 100%;
	height: 100%;
	margin: auto;
	display: block;
	padding-top: 20%;
} */
p.thanks {
	text-align: center;
	color: #086A7B;
}
/* h1.thanks {
	color: #086A7B;
	margin: auto;
	text-align: center;
	font-family: lobster-two;
	font-style: normal;
	font-weight: 400;
	font-size: 50px;
	padding-bottom: 15px;
} */
@media (max-width: 424px) {
	.graphic {
		/* border: 1px solid #BAE6EF; */
		display: flex;
		/* height: 16rem; */
		width: 100%;
		padding: 1.5rem;
		position: relative;
		/* float: left; */
		justify-content: center;
		flex-direction: column;
	}
	.hero2{
		background-size: auto;
	}
}
@media (min-width:425px){	
	.graphic {
		/* border: 1px solid #BAE6EF; */
		display: flex;
		height: 500px;
		padding: .75rem;    
		position: relative;
		float: left;
	}
	.graphic:hover {
		border: 2px solid #086A7B;
		border-radius: 1.5rem;
	}
	.graphic > img{
		width: 10rem;
		object-fit: none;
	}
}
@media (max-width: 575px) {
	.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item {
		color: #0a1e5e;
	}
	.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
	.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus {
		color: #ffffff;
	}
	.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active {
		color: #ffffff;
		background-color: #0a1e5e;
	}
	.website {
		margin: auto;
	}
	div.navContainer {
		width: 100%;
		background-color: #BAE6EF;
		margin: auto;
		display: block;
		height: auto;		
	}
	h2{ 
		padding: 1rem 0;
	}
	.navbar-default .navbar-collapse{
		border: none;
	}
}
@media (max-width: 767px) {
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #0a1e5e;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #ffffff;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #ffffff;
    background-color: #0a1e5e;
  }
	.navbar-default .navbar-nav > li > a:focus,
	.navbar-default .navbar-nav > li > a:hover {
	  color: #fff;
	  background-color: #086a7b;
		padding: 25px;
	}
	.clipCol{
		margin: 5% 0 5% 0;
	  }
	  footer{
		display: none;
	  }
}
@media (max-width: 991px) {
	 .navbar-nav > li > a {
	padding-bottom: 5px;
	width: 100%;
	}
	 .navbar-nav > li > a {
	padding-bottom: 5px;
	width: 100%;
	}
	 .navbar-nav > li > a {
	padding-bottom: 5px;
	width: 100%;
	}
  /* .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #0a1e5e;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #ffffff;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #ffffff;
    background-color: #0a1e5e;
  } */
}
@media (min-width: 992px){
	/* .navbar-expand-lg .navbar-collapse{
		height: 4rem;
	} */
	.hobbyCtn{
		margin: 15rem 5rem 5rem 5rem;
	}
	.collegCtn{
		margin: 5rem;
	}
	.navbar-expand-lg .navbar-nav{
		align-items: center;
		margin: auto;
	}
	.navbar .navbar-nav .nav-link:not(.disabled):hover,
	.navbar .navbar-nav .nav-link:not(.disabled):focus{
		border-radius: 0 0 0.5rem 0.5rem;
		padding: 0.5rem 2rem;
	}
}
@media (min-width: 1199px) {
  /* .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #0a1e5e;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #ffffff;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #ffffff;
    background-color: #0a1e5e;
  } */
	.container {
		max-width: 1200px;
	}
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
  color: #0a1e5e;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
  color: #ffffff;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
  color: #ffffff;
  background-color: #0a1e5e;
}
/*Contact Form*/
				div.contactinfo		{	max-width: 2000px;
								width: 100%;
								color: #323232;
								margin-top: 50px;
								margin-left: 50px;
								margin: auto;}
				input.contactform, textarea.contactform	
								{
	padding: 10px 10px 10px 10px;
	margin: auto;
	border: 1pt;
	border-radius: 5px;
	background-color: #F3F3F3;
	box-shadow: 2px 2px 10px #888888;
	width: 85%;
	font-family: verdana;
	max-width: 550px;
	display: block;
	color: #000000;
}
				a.contactinfo	{
	color: #213b73;
	margin: auto;
	font-weight: bold;
	display: block;
}
div.contact {
	margin-top: 25px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: auto;
}
label.contactform {
	margin: auto;
	display: block;
	text-align: center;
	color: #000000;
}
.seperator {
	margin-top: 125px;
	margin-right: auto;
	margin-left: auto;
	display: block;
	width: 100%;
	max-width: 300px;
	border-top: thick dotted #D7D7D7;
}
/*Gallery*/
	/* * {box-sizing:border-box} */
		/* Slideshow container */
		/* .slideshow-container1 {
		  max-width: 1000px;
		  position: relative;
		  margin: auto;
		}
		
		.dot1a 		{	background-image: url('../images/1a.png');
						cursor: pointer;
						height: 150px;
						width: 250px;
						margin: 0 10px;
						border-radius: 5%;
						display: inline-block;
						opacity: .8;}
		.dot2a 		{	background-image: url('../images/2a.png');
						cursor: pointer;
						height: 150px;
						width: 250px;
						margin: 0 10px;
						border-radius: 5%;
						display: inline-block;
						opacity: .8;}
		.dot3a		{	background-image: url('../images/3a.png');
						cursor: pointer;
						height: 150px;
						width: 250px;
						margin: 0 10px;
						border-radius: 5%;
						display: inline-block;
						opacity: .8;}
		.dot4a 		{	background-image: url('../images/4a.png');
						cursor: pointer;
						height: 150px;
						width: 250px;
						margin: 0 10px;
						border-radius: 5%;
						display: inline-block;
						opacity: .8;}
		.dot5a 		{	background-image: url('../images/5a.png');
						cursor: pointer;
						height: 150px;
						width: 250px;
						margin: 0 10px;
						border-radius: 5%;
						display: inline-block;
						opacity: .8;}
		.dot1a:hover 	{	opacity: 1;}
		.dot2a:hover 	{	opacity: 1;}
		.dot3a:hover 	{	opacity: 1;}
		.dot4a:hover 	{	opacity: 1;}
		.dot5a:hover 	{	opacity: 1;}
.active, .dot:hover {
		  background-color: #717171;
		}
.mySlides {
			display: none;
			margin-top: 50px;
		} */
/* Next & previous buttons */
		/* .prev, .next {
		  cursor: pointer;
		  position: absolute;
		  width: auto;
		  margin-top: -22px;
		  padding: 16px;
		  color: white;
		  font-weight: bold;
		  font-size: 18px;
		  transition: 0.6s ease;
		  border-radius: 0 3px 3px 0;
		}
		/* Position the "next button" to the right */
		.next {
		  right: 0;
		  border-radius: 3px 0 0 3px;
		}
		/* On hover, add a black background color with a little bit see-through */
		.prev:hover, .next:hover {
		  background-color: rgba(0,0,0,0.8);
		} */
/* Fading animation */
		/* .fade {
		  -webkit-animation-name: fade;
		  -webkit-animation-duration: 10s;
		  animation-name: fade;
		  animation-duration: 1.5s;
		}
		@-webkit-keyframes fade {
		  from {opacity: .4} 
		  to {opacity: 1}
		}
		@keyframes fade {
		  from {opacity: .4} 
		  to {opacity: 1}
		} */

/*Go to Top Button*/		
	#myBtn {
	display: none;
	position: fixed;
	bottom: 45px;
	right: 30px;
	z-index: 99;
	font-size: 18px;
	border: none;
	outline: none;
	background-color: #086A7B;
	color: white;
	cursor: pointer;
	padding: 15px;
	border-radius: 60px;
}
#myBtn:hover {
  background-color: #555;
}
.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  /* background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%); */
  background: linear-gradient(45deg, #ff89e9 0%,#05abe0 100%);
  border-radius: 0.5rem;
}
.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  padding: 3em;
  text-align: left;
}
.hovereffect img {
  display: block;
  position: relative;
  max-width: none;
  width: calc(100% + 60px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.45s;
  transition: opacity 0.35s, transform 0.45s;
  -webkit-transform: translate3d(-40px,0,0);
  transform: translate3d(-40px,0,0);
}
.hovereffect .overlay:before {
  position: absolute;
  top: 20px;
  right: 20px;
  bottom: 20px;
  left: 20px;
  border: 1px solid #fff;
  content: '';
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.45s;
  transition: opacity 0.35s, transform 0.45s;
  -webkit-transform: translate3d(-20px,0,0);
  transform: translate3d(-20px,0,0);
}
.hovereffect a, .hovereffect p {
  color: #086a7b;
font-weight: 700;
	font-size: 12pt;
	margin-top: 50%;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.45s;
  transition: opacity 0.7s, transform 0.45s;
  -webkit-transform: translate3d(-10px,0,0);
  transform: translate3d(-10px,0,0);
	background-color: #fff;
	
}
.hovereffect:hover img {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
.hovereffect:hover .overlay:before,
.hovereffect:hover a, .hovereffect:hover p {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
	text-decoration: none;
}
#about, #work, #contact:hover{
	text-decoration: none;
}
.align-left , .myb > div > div > p{
	text-align:left !important;
}
/* .graphicCtn , .myb > div > div > img, .container-fluid >.mybImg{
	border-radius: 25px;
	background-color: white;
	padding: 15px;
	/* box-shadow: 0px 0px 20px 9px #0b46512b; 
} */
.highLightCtn{
	background-color: #cef2f3;
	padding: 2rem 2rem;
}
.gallery {
	display: block;
}
.certificates > img, img.home {
	width: 100%;
}
.gallery::-webkit-scrollbar, .gallery:-webkit-scrollbar-track, .gallery::-webkit-scrollbar-thumb {
	width: 50%;
	height: 50%;
}
.illustrationCtn {
		display: inline-block;
		margin: 0 0.5rem;
	  
		animation: animate__fadeInDown; /* referring directly to the animation's @keyframe declaration */
		animation-duration: 2s; /* don't forget to set a duration! */
}
.modal-body > img{
	height: 100%;
	display: block;
	margin: auto;
}
.modal-header{
	border: none;
}

.uiuxcard{
	border-radius: 25px;
	background-color: rgba(255, 255, 255, 0.5);
	margin: auto;
	padding: 25px;
}
/* .uiuxcard:hover{
	background-color: rgba(2255,255,255,1);
	box-shadow: 10px 10px 15px #0000001f;
} */
.paddingBtm100px{
	padding-bottom: 100px;
}
.paddingTop100px{
	padding-top: 100px;
}
.paddingTop200px{
	padding-top: 200px;
}
.myb, .mybImg{
	margin-bottom: 50px;;
}
.buttonIcon{
	width: 15px;
	margin: 0px 10px;
}
/* .smallHeader{
	font-weight: 700;
} */
.clipCol {
	height: 1500px;
	overflow: auto;	
}
img{
	border-radius: 1rem;
}

/* Custom Scrollbar */
/* width */
::-webkit-scrollbar {
	width: 10px;

  }
  
  /* Track */
  ::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px rgb(177, 177, 177); 
	border-radius: 10px;
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
	background: rgb(8 106 123);; 
	border-radius: 10px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
	background: rgb(8 106 123);; 
  }

  ::-webkit-resizer{
	width: 50%;
  }

/* clouds */
  * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
  }

  .cloudBg{
	margin-top: 5rem;
	position: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: -10;
	width: 125%;
  }
  
  .cloud {
	-webkit-animation: clouds 60s infinite linear;
	-moz-animation: clouds 60s infinite linear;
	-ms-animation: clouds 60s infinite linear;
	-o-animation: clouds 60s infinite linear;
	animation: clouds 60s infinite linear;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	position: relative;
	margin: 40px 0 0 0;
	width: 60px;
	height: 5px;
	background: #f7e7eb;
  }
  .cloud.tiny {
	-moz-transform: scale(0.5, 0.5);
	-ms-transform: scale(0.5, 0.5);
	-webkit-transform: scale(0.5, 0.5);
	transform: scale(0.5, 0.5);
  }
  .cloud.small {
	-moz-transform: scale(1, 1);
	-ms-transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
  }
  .cloud.normal {
	-moz-transform: scale(2, 2);
	-ms-transform: scale(2, 2);
	-webkit-transform: scale(2, 2);
	transform: scale(2, 2);
  }
  .cloud.large {
	-moz-transform: scale(4, 4);
	-ms-transform: scale(4, 4);
	-webkit-transform: scale(4, 4);
	transform: scale(4, 4);
  }
  .cloud div {
	-moz-box-shadow: inset -2px -3px 0 0 #f7e7eb;
	-webkit-box-shadow: inset -2px -3px 0 0 #f7e7eb;
	box-shadow: inset -2px -3px 0 0 #f7e7eb;
	position: absolute;
	border-radius: 50%;
	width: 12px;
	height: 12px;
	left: -3px;
	bottom: 0;
	background: #fafbf0;
	z-index: 10;
  }
  .cloud div:first-child + div {
	-moz-transform: scale(1.6, 1.6);
	-ms-transform: scale(1.6, 1.6);
	-webkit-transform: scale(1.6, 1.6);
	transform: scale(1.6, 1.6);
	margin: 0 0 4px 13px;
	z-index: 9;
  }
  .cloud div:first-child + div + div {
	-moz-transform: scale(2.4, 2.4);
	-ms-transform: scale(2.4, 2.4);
	-webkit-transform: scale(2.4, 2.4);
	transform: scale(2.4, 2.4);
	margin: 0 0 9px 32px;
	z-index: 8;
  }
  .cloud div:first-child + div + div + div {
	-moz-transform: scale(1.3, 1.3);
	-ms-transform: scale(1.3, 1.3);
	-webkit-transform: scale(1.3, 1.3);
	transform: scale(1.3, 1.3);
	margin: 0 0 2px 50px;
	z-index: 7;
  }
  
  @-webkit-keyframes clouds {
	0% {
	  left: -50%;
	}
	100% {
	  left: 110%;
	}
  }
  @-moz-keyframes clouds {
	0% {
	  left: -50%;
	}
	100% {
	  left: 120%;
	}
  }
  @-ms-keyframes clouds {
	0% {
	  left: -50%;
	}
	100% {
	  left: 120%;
	}
  }
  @keyframes clouds {
	0% {
	  left: -50%;
	}
	100% {
	  left: 120%;
	}
  }
  .cloud-1 {
	-webkit-animation-duration: 263s;
	-moz-animation-duration: 263s;
	-ms-animation-duration: 263s;
	-o-animation-duration: 263s;
	animation-duration: 263s;
	margin-left: 20%;
  }
  
  .cloud-2 {
	-webkit-animation-duration: 99s;
	-moz-animation-duration: 99s;
	-ms-animation-duration: 99s;
	-o-animation-duration: 99s;
	animation-duration: 99s;
	margin-left: 90%;
  }
  
  .cloud-3 {
	-webkit-animation-duration: 142s;
	-moz-animation-duration: 142s;
	-ms-animation-duration: 142s;
	-o-animation-duration: 142s;
	animation-duration: 142s;
	margin-left: 50%;
  }
  
  .cloud-4 {
	-webkit-animation-duration: 152s;
	-moz-animation-duration: 152s;
	-ms-animation-duration: 152s;
	-o-animation-duration: 152s;
	animation-duration: 152s;
	margin-left: 43%;
  }
  
  .cloud-5 {
	-webkit-animation-duration: 215s;
	-moz-animation-duration: 215s;
	-ms-animation-duration: 215s;
	-o-animation-duration: 215s;
	animation-duration: 215s;
	margin-left: 83%;
  }
  
  .cloud-6 {
	-webkit-animation-duration: 139s;
	-moz-animation-duration: 139s;
	-ms-animation-duration: 139s;
	-o-animation-duration: 139s;
	animation-duration: 139s;
	margin-left: 73%;
  }
  
  .cloud-7 {
	-webkit-animation-duration: 109s;
	-moz-animation-duration: 109s;
	-ms-animation-duration: 109s;
	-o-animation-duration: 109s;
	animation-duration: 109s;
	margin-left: 69%;
  }
  
  .cloud-8 {
	-webkit-animation-duration: 121s;
	-moz-animation-duration: 121s;
	-ms-animation-duration: 121s;
	-o-animation-duration: 121s;
	animation-duration: 121s;
	margin-left: 100%;
  }
  
  .cloud-9 {
	-webkit-animation-duration: 101s;
	-moz-animation-duration: 101s;
	-ms-animation-duration: 101s;
	-o-animation-duration: 101s;
	animation-duration: 101s;
	margin-left: 10%;
  }
  
  .cloud-10 {
	-webkit-animation-duration: 126s;
	-moz-animation-duration: 126s;
	-ms-animation-duration: 126s;
	-o-animation-duration: 126s;
	animation-duration: 126s;
	margin-left: 14%;
  }
  
  .cloud-11 {
	-webkit-animation-duration: 96s;
	-moz-animation-duration: 96s;
	-ms-animation-duration: 96s;
	-o-animation-duration: 96s;
	animation-duration: 96s;
	margin-left: 73%;
  }
  
  .cloud-12 {
	-webkit-animation-duration: 83s;
	-moz-animation-duration: 83s;
	-ms-animation-duration: 83s;
	-o-animation-duration: 83s;
	animation-duration: 83s;
	margin-left: 51%;
  }