.background-image {
  width:100%;
  min-height:300px;
  background: url(clouds.jpg) repeat;
  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%{
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px);
  }

  100%{
    -webkit-transform: translateX(-0px);
    transform: translateX(-0px); 
  }

}

@-webkit-keyframes floating{
  0%{
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px);
  }

  100%{
    -webkit-transform: translateX(-0px);
    transform: translateX(-0px); 
  }

}

body {
  height:100%;
  background:none;
  background: #98cbe6;
}

.web-content {
  margin:auto;
  max-width:850px;
  background-color:#ececec;
}

.web-heading {
  margin:auto;
  max-width:850px;
}

.web-cont {
  margin:auto;
  max-width:850px;
}


.web-heading img {
  margin:auto;
  max-width:150px;
}

.header-wrapper {
  margin-bottom:15px;
  margin-top:15px;
}

.navbar {
  margin-bottom:0px;
  border-radius:0px;
}

.hover-trans {
  opacity:0.4;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.hover-trans:hover {
  opacity:1;
}

header .heading {
  height:200px;
}

.pull-right {
  float:right;
}

.logo-holder img {
  max-width:100%;
  border-radius: 15px 15px 0px 0px;
}

*{ margin: 0; padding: 0;}

body {
  overflow-x: hidden;
}

#clouds{
  z-index:-1;
  padding: 100px 0;
  position:absolute;
}

.cloud {
  width: 200px; height: 60px;
  background: #fff;
  
  border-radius: 200px;
  -moz-border-radius: 200px;
  -webkit-border-radius: 200px;
  
  position: relative; 
}

.cloud:before, .cloud:after {
  content: '';
  position: absolute; 
  background: #fff;
  width: 100px; height: 80px;
  position: absolute; top: -15px; left: 10px;
  
  border-radius: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  -moz-transform: rotate(30deg);
}

.cloud:after {
  width: 120px; height: 120px;
  top: -55px; left: auto; right: 15px;
}

/*Time to animate*/
.x1 {
  -webkit-animation: moveclouds 15s linear infinite;
  -moz-animation: moveclouds 15s linear infinite;
  -o-animation: moveclouds 15s linear infinite;
}

/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
  left: 200px;
  
  -webkit-transform: scale(0.6);
  -moz-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 25s linear infinite;
  -moz-animation: moveclouds 25s linear infinite;
  -o-animation: moveclouds 25s linear infinite;
}

.x3 {
  left: -250px; 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 20s linear infinite;
  -moz-animation: moveclouds 20s linear infinite;
  -o-animation: moveclouds 20s linear infinite;
}

.x4 {
  left: 470px; top: -250px;
  
  -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 18s linear infinite;
  -moz-animation: moveclouds 18s linear infinite;
  -o-animation: moveclouds 18s linear infinite;
}

.x5 {
  left: -150px; top: -150px;
  
  -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 20s linear infinite;
  -moz-animation: moveclouds 20s linear infinite;
  -o-animation: moveclouds 20s linear infinite;
}

@-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;}
}