@import url(https://fonts.googleapis.com/css?family=opensans:500); body{ background: #33cc99; color:#fff; font-family: 'Open Sans', sans-serif; max-height:700px; overflow: hidden; } .c{ text-align: center; display: block; position: relative; width:80%; margin: auto; } ._503{ font-size: 160px; position: relative; display: inline-block; z-index: 2; height: 160px; letter-spacing: 15px; } .hr{ height: 4px; background-color: #ffffff; border: none; } ._1{ text-align:center; display:block; position:relative; letter-spacing: 12px; font-size: 2.5em; line-height: 80%; } ._2{ text-align:center; display:block; position: relative; font-size: 20px; } .btn{ background-color: rgb( 255, 255, 255 ); position: relative; display: inline-block; width: 358px; padding: 5px; z-index: 5; font-size: 25px; margin: 20px auto; color:#33cc99; text-decoration: none; margin-right: 10px } .article{ margin-left: 10%; margin-right: 10%; } .cloud { width: 350px; height: 120px; background: #FFF; background: linear-gradient(top, #FFF 100%); background: -webkit-linear-gradient(top, #FFF 100%); background: -moz-linear-gradient(top, #FFF 100%); background: -ms-linear-gradient(top, #FFF 100%); background: -o-linear-gradient(top, #FFF 100%); border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; position: absolute; margin: 120px auto 20px; z-index:-1; transition: ease 1s; } .cloud:after, .cloud:before { content: ''; position: absolute; background: #FFF; z-index: -1 } .cloud:after { width: 100px; height: 100px; top: -50px; left: 50px; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; } .cloud:before { width: 180px; height: 180px; top: -90px; right: 50px; border-radius: 200px; -webkit-border-radius: 200px; -moz-border-radius: 200px; } .x1 { top:-100px; left:100px; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); transform: scale(0.3); opacity: 0.65; -webkit-animation: moveclouds 15s linear infinite; -moz-animation: moveclouds 15s linear infinite; -o-animation: moveclouds 15s linear infinite; } .x1_5{ top:-80px; left:250px; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); transform: scale(0.3); opacity: 0.85; -webkit-animation: moveclouds 17s linear infinite; -moz-animation: moveclouds 17s linear infinite; -o-animation: moveclouds 17s linear infinite; } .x2 { left: 250px; top:0px; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); transform: scale(0.6); opacity: 0.6; -webkit-animation: moveclouds 25s linear infinite; -moz-animation: moveclouds 25s linear infinite; -o-animation: moveclouds 25s linear infinite; } .x3 { left: 250px; top : 20px; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); transform: scale(0.9); opacity: 0.8; -webkit-animation: moveclouds 70s linear infinite; -moz-animation: moveclouds 70s linear infinite; -o-animation: moveclouds 70s linear infinite; } .x4 { left: 470px; top: 100px; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); transform: scale(0.75); opacity: 0.75; -webkit-animation: moveclouds 18s linear infinite; -moz-animation: moveclouds 18s linear infinite; -o-animation: moveclouds 18s linear infinite; } .x5 { left: 200px; top: 200px; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); transform: scale(0.5); opacity: 0.8; -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;} }