/* Landing Page CSS */
/* Clouds */
#welcome {
    padding: 230px;
    max-height: 100%;
    text-align: center;
    overflow-x: hidden;
}

.clouds_background {
    overflow-x: hidden;
}

@-webkit-keyframes animateCloud {
    0% {
        margin-left: -25%;
    }
    100% {
        margin-left: 140%;
    }
}

@-moz-keyframes animateCloud {
    0% {
        margin-left: -25%;
    }
    100% {
        margin-left: 140%;
    }
}

@keyframes animateCloud {
    0% {
        margin-left: -25%;
    }
    100% {
        margin-left: 140%;
    }
}

#welcome .cloud {
    position: fixed;
    top: 0;
    left: 0;
}

#welcome .cloud.cloud-1 {
    top: 20%;
    left:-500px;

	-webkit-animation: animateCloud 90s linear infinite;
	-moz-animation: animateCloud 90s linear infinite;
	animation: animateCloud 90s linear infinite;
	
	-webkit-transform: scale(0.45);
	-moz-transform: scale(0.45);
	transform: scale(0.45);
    
    z-index: 5;
}

#welcome .cloud.cloud-2 {
    top: 10%;
    left:-30px;
    
    -webkit-animation: animateCloud 100s linear infinite;
	-moz-animation: animateCloud 100s linear infinite;
	animation: animateCloud 100s linear infinite;
	
	-webkit-transform: scale(0.2);
	-moz-transform: scale(0.2);
	transform: scale(0.2);
    
    z-index: 4;
}

#welcome .cloud.cloud-3 {
	top:-8%;
	left:-20px;
    -webkit-animation: animateCloud 75s linear infinite;
	-moz-animation: animateCloud 75s linear infinite;
	animation: animateCloud 75s linear infinite;
	
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	transform: scale(0.3);
    
    z-index: -2;
}

/* Registration */
.logo {
    margin-top: -18%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.logo img {
    width: 40vw;
    height: auto;
}

.row.info {
    margin-top: -20%;
    font-weight: 400;
    color: #FF74AA;
    text-align: center;
}

.btn {
    -webkit-transition: background-color .4s linear, border-color .4s linear, color .4s linear;
    -moz-transition: background-color .4s linear, border-color .4s linear, color .4s linear;
    -o-transition: background-color .4s linear, border-color .4s linear, color .4s linear;
    -ms-transition: background-color .4s linear, border-color .4s linear, color .4s linear;
    font-weight: 700;
    background-color: transparent;
    border: 2px solid #2ECC71;
    color: #2ECC71;
}

.mouse {
  display: block;
  height: 46px;
  left: 50%;
  margin: 10px 0 0 -13px;
  position: absolute;
  width: 26px;
}

.mouse span {
  display: block;
  font-size: 1.5em;
  margin: 6px auto;
}
.grass{ position:absolute; bottom:0; left:0;    -webkit-animation: grassmove 5s linear infinite;
	-moz-animation: grassmove 5s linear infinite;
	animation: grassmove  5s linear infinite;
	z-index:10;
	width:100vw;
	
}

@-webkit-keyframes grassmove{
    0% { transform:translate(0,-100%,0);
    }
	50%{  transform:translate(0,0,0);
}
    100% {
          transform:translate(0,100%,0);
    }
}

#welcome .cloud.cloud-3:hover{
animation-play-state: paused;
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	-o-animation-play-state: paused;
	-ms-animation-play-state: paused;	}
#welcome .cloud.cloud-2:hover{
animation-play-state: paused;
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	-o-animation-play-state: paused;
	-ms-animation-play-state: paused;	}
#welcome .cloud.cloud-1:hover{
animation-play-state: paused;
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	-o-animation-play-state: paused;
	-ms-animation-play-state: paused;	}