﻿*{box-sizing:border-box;margin:0;padding:0;font-weight:300}
body{color:#fff;font-weight:300;font-family:'Source Sans Pro',sans-serif}
body ::-webkit-input-placeholder{color:#fff;font-weight:300;font-family:'Source Sans Pro',sans-serif}
body :-moz-placeholder{color:#fff;font-weight:300;font-family:'Source Sans Pro',sans-serif;opacity:1}
body ::-moz-placeholder{color:#fff;font-weight:300;font-family:'Source Sans Pro',sans-serif;opacity:1}
body :-ms-input-placeholder{color:#fff;font-weight:300;font-family:'Source Sans Pro',sans-serif}
.wrapper{position:absolute;top:20%;left:0;overflow:hidden;width:100%;height:500px;background:#50a3a2;background:-webkit-linear-gradient(top left,#50a3a2 0,#53e3a6 100%);background:linear-gradient(to bottom right,#50a3a2 0,#53e3a6 100%);opacity:.8}
.wrapper.form-success .container h1{-webkit-transform:translateY(85px);transform:translateY(85px);-ms-transform:translateY(85px)}
.container{margin:0 auto;padding:80px 0;height:400px;max-width:600px;text-align:center}
.container h1{font-weight:200;font-size:40px;-webkit-transition-timing-function:ease-in-put;transition-timing-function:ease-in-put;-webkit-transition-duration:1s;transition-duration:1s}
form{position:relative;z-index:2;padding:20px 0}
form input{display:block;margin:0 auto 10px auto;padding:10px 15px;width:250px;outline:0;border:1px solid rgba(255,255,255,.4);border-radius:3px;background-color:rgba(255,255,255,.2);color:#fff;text-align:center;font-weight:300;font-size:18px;-webkit-transition-duration:.25s;transition-duration:.25s;-webkit-appearance:none;-moz-appearance:none;appearance:none}
form input:hover{background-color:rgba(255,255,255,.4)}
form input:focus{width:300px;background-color:#fff;color:#53e3a6}
form button{padding:10px 15px;width:250px;outline:0;border:0;border-radius:3px;background-color:#fff;color:#53e3a6;font-size:18px;cursor:pointer;-webkit-transition-duration:.25s;transition-duration:.25s;-webkit-appearance:none;-moz-appearance:none;appearance:none}
form button:hover{background-color:#f5f7f9}
.bg-bubbles{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%}
.bg-bubbles li{position:absolute;bottom:-160px;display:block;width:40px;height:40px;background-color:rgba(255,255,255,.15);list-style:none;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-animation:square 25s infinite;animation:square 25s infinite}
.bg-bubbles li:nth-child(1){left:10%}
.bg-bubbles li:nth-child(2){left:20%;width:80px;height:80px;-webkit-animation-delay:2s;animation-delay:2s;-webkit-animation-duration:17s;animation-duration:17s}
.bg-bubbles li:nth-child(3){left:25%;-webkit-animation-delay:4s;animation-delay:4s}
.bg-bubbles li:nth-child(4){left:40%;width:60px;height:60px;background-color:rgba(255,255,255,.25);-webkit-animation-duration:22s;animation-duration:22s}
.bg-bubbles li:nth-child(5){left:70%}
.bg-bubbles li:nth-child(6){left:80%;width:120px;height:120px;background-color:rgba(255,255,255,.2);-webkit-animation-delay:3s;animation-delay:3s}
.bg-bubbles li:nth-child(7){left:32%;width:160px;height:160px;-webkit-animation-delay:7s;animation-delay:7s}
.bg-bubbles li:nth-child(8){left:55%;width:20px;height:20px;-webkit-animation-delay:15s;animation-delay:15s;-webkit-animation-duration:40s;animation-duration:40s}
.bg-bubbles li:nth-child(9){left:25%;width:10px;height:10px;background-color:rgba(255,255,255,.3);-webkit-animation-delay:2s;animation-delay:2s;-webkit-animation-duration:40s;animation-duration:40s}
.bg-bubbles li:nth-child(10){left:90%;width:160px;height:160px;-webkit-animation-delay:11s;animation-delay:11s}
@-webkit-keyframes square{0%{-webkit-transform:translateY(0);transform:translateY(0)}
100%{-webkit-transform:translateY(-700px) rotate(600deg);transform:translateY(-700px) rotate(600deg)}
}
@keyframes square{0%{-webkit-transform:translateY(0);transform:translateY(0)}
100%{-webkit-transform:translateY(-700px) rotate(600deg);transform:translateY(-700px) rotate(600deg)}
}
.img{display:none;margin:auto;margin-bottom:10px;width:80px;height:30px;border-radius:3px;opacity:1}
.img img{width:100%;height:100%;border:0}
.imgShow-an{animation:show 1s;-webkit-animation:show 1s}
@-webkit-keyframes show{0%{height:0;opacity:0}
100%{height:30px;opacity:1}
}
@keyframes show{0%{height:0;opacity:0}
100%{height:30px;opacity:1}
}
.imgHide-an{animation:hide 1s;-webkit-animation:hide 1s}
@-webkit-keyframes hide{0%{height:30px;opacity:1}
100%{height:0;opacity:0}
}
@keyframes hide{0%{height:30px;opacity:1}
100%{height:0;opacity:0}
}