*,:before,:after{box-sizing:border-box}
.sea{margin:40px auto 0;overflow:hidden}
.sea .bubble{position:absolute;width:7px;height:7px;border-radius:50%;background-color:#6bafca;opacity:.9;-webkit-animation:bubble1-h-movement 1s ease-in infinite,bubble1-v-movement 300ms ease-in-out infinite alternate,bubble-scale-movement 300ms ease-in-out infinite alternate;animation:bubble1-h-movement 1s ease-in infinite,bubble1-v-movement 300ms ease-in-out infinite alternate,bubble-scale-movement 300ms ease-in-out infinite alternate}
.sea .bubble:after{position:absolute;content:"";width:7px;height:7px;border-radius:50%;background-color:#6bafca;opacity:.9;top:-20px;left:100px;width:9px;height:9px}
.sea .circle-wrapper{position:relative;background:-webkit-linear-gradient(#2c647a,#204858);background:linear-gradient(#2c647a,#204858);width:300px;height:300px;margin:10px auto 0;overflow:hidden;z-index:0;border-radius:50%;padding:0 50px;border:6px solid #3e8caa}
.sea .submarine-wrapper{height:300px;width:300px;padding:30px 50px 30px 150px;margin:0 auto;-webkit-animation:diving 3s ease-in-out infinite,diving-rotate 3s ease-in-out infinite;animation:diving 3s ease-in-out infinite,diving-rotate 3s ease-in-out infinite}
.sea .submarine-wrapper .submarine-body{width:150px;height:80px;position:absolute;margin-top:50px;left:25px;background-color:#D93A54;border-radius:40px;background:-webkit-linear-gradient(#D93A54,#bc243d);background:linear-gradient(#D93A54,#bc243d)}
.sea .submarine-wrapper .submarine-body .light{position:absolute;width:0;height:0;border-style:solid;border-width:0 40px 150px;border-color:transparent transparent #377c98;-webkit-transform:rotate(-50deg);transform:rotate(-50deg);top:40px;left:99%}
.sea .submarine-wrapper .submarine-body .light:after{content:"";position:absolute;width:20px;height:13px;border-radius:5px;background-color:#d12844;margin-left:-10px}
.sea .submarine-wrapper .submarine-body .window{width:37px;height:37px;position:absolute;margin-top:23px;right:18px;background:-webkit-linear-gradient(#1e4554,#183642);background:linear-gradient(#1e4554,#183642);border-radius:50%;border:3px solid #D93A54}
.sea .submarine-wrapper .submarine-body .window:after{content:"";position:absolute;margin-top:3px;margin-left:3px;width:25px;height:25px;border-radius:50%;background-color:transparent;opacity:.8;left:0;border-top:3px solid #fff;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
.sea .submarine-wrapper .submarine-body .engine{width:30px;height:30px;position:absolute;margin-top:32px;left:53px;background-color:#bc243d;border-radius:50%;border:5px solid #D93A54}
.sea .submarine-wrapper .submarine-body .engine:after,.sea .submarine-wrapper .submarine-body .engine:before{position:absolute;content:"";border-radius:2px;background-color:#fff;-webkit-animation:spin 900ms linear infinite;animation:spin 900ms linear infinite;opacity:.8}
.sea .submarine-wrapper .submarine-body .engine:after{top:8px;left:0;width:20px;height:4px}
.sea .submarine-wrapper .submarine-body .engine:before{left:8px;width:4px;height:20px}
.sea .submarine-wrapper .helix{width:30px;height:70px;position:absolute;margin-top:55px;left:0;background-color:#D93A54;border-radius:7px;background:-webkit-linear-gradient(#D93A54,#bc243d);background:linear-gradient(#D93A54,#bc243d)}
.sea .submarine-wrapper .helix:after{content:"";position:absolute;margin-top:5px;margin-left:-9px;width:17px;height:60px;border-radius:3px;background-color:transparent;opacity:.8;background:-webkit-linear-gradient(top,#D93A54,#D93A54 50%,#e57a8c 50%,#e57a8c);background:linear-gradient(to bottom,#D93A54,#D93A54 50%,#e57a8c 50%,#e57a8c);background-size:100% 20px;-webkit-animation:helix-movement 110ms linear infinite;animation:helix-movement 110ms linear infinite}
.sea .submarine-wrapper .hat{width:65px;height:25px;position:absolute;margin-top:26px;left:70px;background-color:#D93A54;border-radius:10px 10px 0 0;background:-webkit-linear-gradient(#D93A54,#d72d49);background:linear-gradient(#D93A54,#d72d49)}
.sea .submarine-wrapper .hat .periscope{position:absolute;width:7px;height:20px;background-color:#D93A54;margin-top:-27px;margin-left:32px;border-radius:5px 5px 0 0}
.sea .submarine-wrapper .hat .periscope:after,.sea .submarine-wrapper .hat .periscope:before{content:"";position:absolute;width:15px;height:7px;border-radius:5px;background-color:#D93A54}
.sea .submarine-wrapper .hat .leds-wrapper{width:53px;height:13px;position:relative;top:7px;left:7px;background-color:#D93A54;border-radius:10px;background:-webkit-linear-gradient(#b3233a,#a21f35);background:linear-gradient(#b3233a,#a21f35)}
.sea .submarine-wrapper .hat .leds-wrapper .leds{position:absolute;margin-top:4px;margin-left:7px;width:5px;height:5px;border-radius:50%;background-color:#fff;-webkit-animation:leds-off 500ms linear infinite;animation:leds-off 500ms linear infinite}
.sea .submarine-wrapper .hat .leds-wrapper .leds:after,.sea .submarine-wrapper .hat .leds-wrapper .leds:before{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background-color:#fff}
.sea .submarine-wrapper .hat .leds-wrapper .leds:after{margin-top:0;margin-left:17px}
.sea .submarine-wrapper .hat .leds-wrapper .leds:before{margin-top:0;margin-left:34px}
@-webkit-keyframes spin {
100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
}
@keyframes spin {
100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
}
@-webkit-keyframes leds-off {
100%{opacity:.3}
}
@keyframes leds-off {
100%{opacity:.3}
}
@-webkit-keyframes helix-movement {
100%{background:-webkit-linear-gradient(top,#e57a8c 50%,#e57a8c,#D93A54,#D93A54 50%);background:linear-gradient(to bottom,#e57a8c 50%,#e57a8c,#D93A54,#D93A54 50%);background-size:100% 20px}
}
@keyframes helix-movement {
100%{background:-webkit-linear-gradient(top,#e57a8c 50%,#e57a8c,#D93A54,#D93A54 50%);background:linear-gradient(to bottom,#e57a8c 50%,#e57a8c,#D93A54,#D93A54 50%);background-size:100% 20px}
}
@-webkit-keyframes diving {
0%{margin-top:5px}
50%{margin-top:15px}
100%{margin-top:5px}
}
@keyframes diving {
0%{margin-top:5px}
50%{margin-top:15px}
100%{margin-top:5px}
}
@-webkit-keyframes diving-rotate {
0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
50%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}
75%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}
100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
}
@keyframes diving-rotate {
0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
50%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}
75%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}
100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
}
@-webkit-keyframes bubble1-h-movement {
0%{margin-left:80%}
100%{margin-left:-100%}
}
@keyframes bubble1-h-movement {
0%{margin-left:80%}
100%{margin-left:-100%}
}
@-webkit-keyframes bubble2-h-movement {
0%{margin-left:65%}
100%{margin-left:-5%}
}
@keyframes bubble2-h-movement {
0%{margin-left:65%}
100%{margin-left:-5%}
}
@-webkit-keyframes bubble1-v-movement {
0%{margin-top:115px}
100%{margin-top:160px}
}
@keyframes bubble1-v-movement {
0%{margin-top:115px}
100%{margin-top:160px}
}
@-webkit-keyframes bubble2-v-movement {
0%{margin-top:115px}
100%{margin-top:90px}
}
@keyframes bubble2-v-movement {
0%{margin-top:115px}
100%{margin-top:90px}
}
@-webkit-keyframes bubble-scale-movement {
0%{-webkit-transform:scale(1.4);transform:scale(1.4)}
100%{-webkit-transform:scale(0.9);transform:scale(0.9)}
}
@keyframes bubble-scale-movement {
0%{-webkit-transform:scale(1.4);transform:scale(1.4)}
100%{-webkit-transform:scale(0.9);transform:scale(0.9)}
}
@-webkit-keyframes light-movement {
0%{-webkit-transform:rotate(-40deg);transform:rotate(-40deg)}
50%{-webkit-transform:rotate(-70deg);transform:rotate(-70deg)}
100%{-webkit-transform:rotate(-40deg);transform:rotate(-40deg)}
}
@keyframes light-movement {
0%{-webkit-transform:rotate(-40deg);transform:rotate(-40deg)}
50%{-webkit-transform:rotate(-70deg);transform:rotate(-70deg)}
100%{-webkit-transform:rotate(-40deg);transform:rotate(-40deg)}
}