html, body { min-height: 100vh; overflow-x: hidden; }
html { background-color: #000; }
body { background: #000; color:#000; font-family: "Oxanium", sans-serif; }
a, a:visited { color: inherit; }
p { font-family: "Oxanium", sans-serif; padding: 0;  margin: 0; }	 
.landing-title-container p { font-weight:800; color: #fff; text-align: center; }
.landing-title-container img { padding-top:100px; display: block; margin: 0px auto; text-align: center; }
.vertical-header { transform: translate(-50%, -50%) rotate(-90deg); position: fixed; font-size: 10vw; line-height: 1em; top: 50%; left: 5vw; color: #000; font-family: "Oxanium", sans-serif; transition: 0.5s; z-index: 2; }
.box-header { background: #7E827A; display: inline-block; padding: 10px; color: #fefefe; font: 40px "Open Sans", sans-serif; box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.75); }
.content-float-right { box-sizing: border-box; width: 90vw; margin-top: 50px; margin-left: 10vw; padding: 3vh 5vw; }
.quote-text { text-align: center; position: absolute; top: 50%; left: 77%; transform: translate(-50%, -50%); font-size: 7vh; width: 100%; font-family: "Oxanium", sans-serif; color: #4E262A; font-weight: bold; }
.first-ltr { font-family: "Oxanium", sans-serif; font-size: 20px; line-height: 1.5em; background: #000; color: #fefefe; padding: 15px; box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.75); margin: 10px; }
.first-ltr:first-letter { font-size: 40px; float: left; padding: 15px; margin-right: 10px; background: #fefefe; color: #000; }
.row { width: 100%; position: relative; margin-bottom: 20px; }
.row::after { content: ""; display: block; clear: both; }
.col-2, .col-2-f { width: 50%; float: left; }
.col-4, .col-4-2 { width: 25%; float: left; }
.col-4-2-1 { width: 25%; float: left; }
.center-inline-container { text-align: center; }
.brdr-pic-1 { border: 8px double #000; }
.larg-pic-shadow { width: 80%; display: block; margin: 20px auto; box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.7); }
.full-width { width: 100%; }
.max-80 { max-width: 80%; margin: auto; }
.shadow { box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.75); }
.shadow-2 { box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.75); }
.frame { border: 3px solid #7E827A; }
.video-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.title-1 { font-family: "Oxanium", sans-serif; font-size: 36px; text-align: center; text-decoration: underline; line-height: 2em; color: #000; }
.title-2 { font-family: "Oxanium", sans-serif; font-size: 24px; line-height: 2em; text-align: center; }
.btn { padding: 5px; font-family: "Oxanium", sans-serif; font-size: 24px; line-height: 1.5em; border-radius: 10px; display: inline-block; border: 3px solid black; background: #fefefe; cursor: pointer; box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.75); position: relative; top: 0px; left: 0px; transition: 0.25s; text-decoration: none; }
.btn:hover { box-shadow: 13px 13px 0px 2px rgba(0, 0, 0, 0.6); top: -3px; left: -3px; }
.btn:active { box-shadow: 7px 7px 0px -2px rgba(0, 0, 0, 0.8); top: 3px; left: 3px; }
.close-btn { background: #743621; color: #fefefe; }
.mrg-t-60 { margin-top: 60px; }

.mrg-t-30 { margin-top: 30px; }
@-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
.fade-in { opacity: 1; -webkit-animation: fade-in 0.5s ease-in;   animation: fade-in 0.5s ease-in; }
.hide-overflow { overflow-y: hidden; }
.show-more { height: 140px; overflow: hidden; position: relative; }
.hide-sentence { height: 0px; width: 0px; display: inline-block; opacity: 0; overflow: hidden; transition: 0.5s; }
.clearfix::after { content: ""; display: table; clear: both; }
.show-more-toggle { background: #fefefe; color: #000; font-weight: bold; display: block; position: absolute; bottom: 0px; width: calc(100% - 30px); text-align: center; cursor: pointer; transition: 0.5s; }
.show-more-toggle:hover { background: rgba(254, 254, 254, 0.9); bottom: -3px; }
.tools-container { text-align: center; }
.tool-item { margin: 10px 2%; display: inline-block; }
.tool-img { width: 100px; border: 3px solid #000; box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.75); border-radius: 5px; transition: 0.2s; filter: grayscale(100%); cursor: pointer; }
.tool-img:hover { box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.5); }
@-webkit-keyframes tool-img-anm { 0% { filter: grayscale(100%); } 20% { filter: grayscale(0%); } 100% { filter: grayscale(100%); } }
@keyframes tool-img-anm { 0% { filter: grayscale(100%); } 20% { filter: grayscale(0%); } 100% { filter: grayscale(100%); } }
.tool-text { width: 90%; max-width: 350px; text-align: left; margin: 0 auto; display: none; }
.close-tool { display: none; }
.tool-active { display: block; margin: 10px auto; -webkit-animation: fade-and-grow 1s forwards;   animation: fade-and-grow 1s forwards; }
@-webkit-keyframes fade-and-grow { 0% { opacity: 0; overflow: hidden; } 100% { opacity: 1; overflow: visible; } }
@keyframes fade-and-grow { 0% { opacity: 0; overflow: hidden; } 100% { opacity: 1; overflow: visible; } }
.tool-active .tool-img { filter: grayscale(0%) !important; -webkit-animation: none !important;   animation: none !important; cursor: default; }
.tool-active .tool-text { display: block; margin: 15px auto; }
.tool-active .close-tool { display: inline-block; }
.fader { -webkit-appearance: none; margin: 32.5px 0; width: 150px; }
.fader:focus { outline: none; }
.fader::-webkit-slider-runnable-track { width: 150px; height: 8px; cursor: pointer; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; box-shadow: 0px 0px 0px transparent, 0 0 0px rgba(13, 13, 13, 0); background: #000; border: 0px solid transparent; border-radius: 0px; }
.fader::-webkit-slider-thumb { box-shadow: 0px 0px 0px #111, 0 0 0px #1e1e1e; border: 8px solid #000; height: 56px; width: 30px; border-radius: 20%; background: #fefefe; cursor: pointer; -webkit-appearance: none; margin-top: -24.5px; }
.fader:focus::-webkit-slider-runnable-track { background: #204353; }
.fader::-moz-range-track { width: 150px; height: 16px; cursor: pointer; -moz-transition: all 0.2s ease; transition: all 0.2s ease; box-shadow: 0px 0px 0px transparent, 0 0 0px rgba(13, 13, 13, 0); background: #000; border: 0px solid transparent; border-radius: 0px; }
.fader::-moz-range-thumb { box-shadow: 0px 0px 0px #111, 0 0 0px #1e1e1e; border: 8px solid #000; height: 65px; width: 30px; border-radius: 20%; background: #fefefe; cursor: pointer; }
.fader::-ms-track { width: 150px; height: 16px; cursor: pointer; -ms-transition: all 0.2s ease; transition: all 0.2s ease; background: transparent; border-color: transparent; border-width: 30px 0; color: transparent; }
.fader::-ms-fill-lower { box-shadow: 0px 0px 0px transparent, 0 0 0px rgba(13, 13, 13, 0); background: #12252f; border: 0px solid transparent; border-radius: 0px; }
.fader::-ms-fill-upper { box-shadow: 0px 0px 0px transparent, 0 0 0px rgba(13, 13, 13, 0); background: #000; border: 0px solid transparent; border-radius: 0px; }
.fader::-ms-thumb { box-shadow: 0px 0px 0px #111, 0 0 0px #1e1e1e; border: 8px solid #000; height: 65px; width: 30px; border-radius: 20%; background: #fefefe; cursor: pointer; }
.fader:focus::-ms-fill-lower { background: #000; }
.fader:focus::-ms-fill-upper { background: #204353; }
#index-page { background: #7E827A; background: #fefefe; }
.landing-title-container { height: calc(100vh - 45px); min-height: 400px; width: 36%; float: left; }
.mixer-container h1 { font-family: "Poppins", sans-serif; font-size: 10vh; text-align: center; padding-top: 0vh; color: #000; width: 100%; position: relative; z-index: 0; margin: 0; }
.mixer-container p.message { font-family: "Poppins", sans-serif; font-size: 2vh; text-align: center; padding: 0 5vh 5vh 5vh; color: #000; font-weight:500; width: 100%; position: relative; z-index: 0; }

.landing-play-btn-container { height: 30vh; width: 100%; position: relative; float: left; min-height: 70px; min-width: 70px; }
.landing-play-btn-container button { display: none; }
.landing-play-btn-container .landing-play-btn { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; }
.play-btn, .pause-btn { box-sizing: border-box; width: 20vh; height: 20vh; border-radius: 50%; background: rgba(255, 255, 255, 0.5); border: 5px solid #fff; cursor: pointer; -webkit-animation: loop-playing infinite 4.53s ease-in-out;   animation: loop-playing infinite 4.53s ease-in-out; transition: 0.5s; }
.play-btn::after, .pause-btn::after { content: ""; position: absolute; height: 0px; width: 0px; border: 6vh solid transparent; border-left: 10vh solid #fff; top: 3.5vh; left: 6vh; transition: 0.25s; }
.play-btn::before, .pause-btn::before { content: ""; position: absolute; height: 10vh; width: 0px; border: 0px solid transparent; border-left: 3.5vh solid #fff; top: 4vh; left: 5vh; opacity: 0; transition: 0.25s; }
.play-btn:hover::after, .pause-btn:hover::after { border-left-color: #000; }
.play-btn:hover::before, .pause-btn:hover::before { border-left-color: #000; }
.pause-btn { transform: rotate(180deg); background: rgba(5, 5, 5, 0.2); transition: 0.25s; }
.pause-btn::after { content: ""; position: absolute; height: 10vh; width: 0px; border: 0px solid transparent; border-left: 3.5vh solid #703030; top: 4vh; left: 10vh; }
.pause-btn::before { opacity: 1; }
.mixer-container { box-sizing: border-box; float: right; position: relative; margin-right: 3%; width: 60%; 
border-radius: 0 0 20px 20px; border: 0; border-top: 0vh solid #703030; min-height: 600px; font-family: "Oxanium", sans-serif; background: #fff; transition: 0.5s; padding: 50px; }
.mixer-off { transition: 1s; filter: brightness(90%); }
.mixer-off:hover { transition: 0.25s; filter: brightness(95%); }
.main-loops-container { padding: 25px 0 50px 0; text-align: center; }
.loop-btn-stopped:focus, .loop-btn-playing:focus { outline: none; }
.loop-btn-stopped { box-sizing: border-box; border: 2px solid #000; color: #000; font-family: "Oxanium", sans-serif; font-weight: bold; cursor: pointer; transition: 0.25s; }
@-webkit-keyframes loop-playing { 0% { filter: brightness(100%); } 50% { filter: brightness(120%); } 100% { filter: brightness(100%); } }
@keyframes loop-playing { 0% { filter: brightness(100%); } 50% { filter: brightness(120%); } 100% { filter: brightness(100%); } }
.loop-btn-playing { box-sizing: border-box; border: 2px solid #000; background: #000; color: #cbcbcb; font-family: "Oxanium", sans-serif; font-weight: bold; cursor: pointer; transition: 0.25s; -webkit-animation: loop-playing infinite 4.53s ease-in-out;   animation: loop-playing infinite 4.53s ease-in-out; }
.loop-btn-large { min-height: 30px; height: 5vh; border-radius: 30px; padding: 0vh 10%; line-height: 1em; font-size: 14px; margin-bottom: 5px; }
.loop-btn-small { border-radius: 50%; margin: 3px 5px; width: 32px; height: 32px; }
.channel-strip { float: left; width: 25%; }
.loop-btns { text-align: center; }
.icon { text-align: center; min-height: 30px; height: 5vh; margin: 20px 0; }
.icon img { height: 100%; margin-top: 1vh; }
.filter-section { position: relative; color: #703030; height: 70px; }
.filter-section .label-left { position: absolute; left: 5%; font-size: 10px; text-transform:uppercase; }
.filter-section .label-center { position: absolute; transform: translate(-50%, 0%); left: 50%; text-align: center; font-weight: bold; bottom: 0; text-transform:uppercase; }
.filter-section .label-right { position: absolute; right: 5%; font-size: 10px; text-transform:uppercase; }
.volume-container { position: relative; height: 200px; width: 85px; margin: auto; }
.volume-container::after { content: "Volume"; width: 100%; text-align: center; position: absolute; bottom: -15px; font-weight: bold; text-transform:uppercase; color: #703030; font-size: 15px; }
.volume-section { width: 0px; height: 0px; position: absolute; bottom: 10%; transform: translateX(-50%) translateY(-50%) rotate(-90deg); }
.help-hint { position: absolute; max-width: 190px; background: #703030; color: #fefefe; text-align: center; border-radius: 20px; padding: 5px; text-transform:uppercase; }
.help-hint::before { content: ""; width: 0px; height: 0px; position: absolute; transform: translate(-50%, -100%); top: 0px; left: 50%; border: 5px solid transparent; border-bottom: 5px solid #703030; }
#mixer-audio-visual { width: 105%; position: absolute; transform: translate(-50%, -50%); left: 51%; top: 50%; opacity: 0; transition: 0.5s; }
.audio-error::before { content: "Sorry your browser does not support the web audio api"; display: block; position: absolute; color: black; background: purple; top: 0px; font-size: 38px; width: 100%; height: 200px; }
.sail-loading::after { content: "Searching for inspiration"; position: absolute; color: #000; font-weight: bold; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 24px; -webkit-animation: loading-text 4s infinite linear;   animation: loading-text 4s infinite linear; }
.slider { -webkit-appearance: none; margin: 25px 0; width: 80%; }
.slider:focus { outline: none; }
.slider::-webkit-slider-runnable-track { width: 80%; height: 5px; cursor: pointer; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; box-shadow: 0px 0px 0px transparent, 0 0 0px rgba(13, 13, 13, 0); background: #000; border: 0px solid transparent; border-radius: 0px; }
.slider::-webkit-slider-thumb { box-shadow: 0px 0px 0px #111, 0 0 0px #1e1e1e; border: 5px solid #000; height: 30px; width: 20px; border-radius: 30%; background: #fefefe; cursor: pointer; -webkit-appearance: none; margin-top: -15px; }
.slider:focus::-webkit-slider-runnable-track { background: #204353; }
.slider::-moz-range-track { width: 80%; height: 8px; cursor: pointer; -moz-transition: all 0.2s ease; transition: all 0.2s ease; box-shadow: 0px 0px 0px transparent, 0 0 0px rgba(13, 13, 13, 0); background: #000; border: 0px solid transparent; border-radius: 0px; }
.slider::-moz-range-thumb { box-shadow: 0px 0px 0px #111, 0 0 0px #1e1e1e; border: 5px solid #000; height: 40px; width: 20px; border-radius: 30%; background: #fefefe; cursor: pointer; }
.slider::-ms-track { width: 80%; height: 8px; cursor: pointer; -ms-transition: all 0.2s ease; transition: all 0.2s ease; background: transparent; border-color: transparent; border-width: 20px 0; color: transparent; }
.slider::-ms-fill-lower { box-shadow: 0px 0px 0px transparent, 0 0 0px rgba(13, 13, 13, 0); background: #12252f; border: 0px solid transparent; border-radius: 0px; }
.slider::-ms-fill-upper { box-shadow: 0px 0px 0px transparent, 0 0 0px rgba(13, 13, 13, 0); background: #000; border: 0px solid transparent; border-radius: 0px; }
.slider::-ms-thumb { box-shadow: 0px 0px 0px #111, 0 0 0px #1e1e1e; border: 5px solid #000; height: 40px; width: 20px; border-radius: 30%; background: #fefefe; cursor: pointer; }
.slider:focus::-ms-fill-lower { background: #000; }
.slider:focus::-ms-fill-upper { background: #204353; }
.slider { margin-left: 10%; }
 
@media (max-height: 285.7142857143px) { .quote-text { font-size: 20px; } }
@media (min-height: 428.5714285714px) { .quote-text { font-size: 30px; } }
@media (max-height: 333.3333333333px) { .mixer-container h1 { font-size: 20px; } }
@media (min-height: 533.3333333333px) { .mixer-container h1 { font-size: 30px; } }
@media (max-width: 920px) {
	.mrg-t-60 { margin-top: 30px; }
	.landing-title-container img { padding-top: 50px; }
	.mixer-container p.message { padding: 10px 20px; }
	.landing-title-container { width: 100%; height: inherit; min-height: 200px; margin-bottom: 50px; }
	.landing-title-container p { width:100%; padding-top: 1vh; color:#fff; font-family: "Poppins", sans-serif; } 
	.landing-title-container .landing-play-btn-container { width: 100%; height: 24vh; text-align: center; } 
	.loop-btn-small { margin: 3px 1px; width: 24px; height: 24px; }
	.mixer-container { width: 100%; min-width: 100%; border-top: 5px solid #703030; height: inherit; border-radius: 0%; overflow: hidden; margin:0; padding: 35px 10px 20px 10px; } 
	#mixer-audio-visual { width: 100%; transform: rotate(90deg) translate(-25%, 0%); position: absolute; top: 50%; left: 50%; transform: rotate(0deg) translate(0%, 0%); top: 0%; left: 0%; } 



.filter-section .label-left, .filter-section .label-right { opacity: 0; } 
}




@-webkit-keyframes artsy { 0% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(-140deg); } 100% { filter: hue-rotate(0deg); } }
@keyframes artsy { 0% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(-140deg); } 100% { filter: hue-rotate(0deg); } }
#card-container { width: 400px; height: 200px; box-shadow: 4px 4px 10px 3px rgba(0, 0, 0, 0.5); background: #C9FAFF; overflow: hidden; position: relative; margin: auto; -webkit-animation: artsy infinite 10s;   animation: artsy infinite 10s; }
#index-page #card-container { position: absolute; transform: translate(-50%, -50%) translate3d(0, 0, 0); top: 50%; left: 50%; opacity: 0.7; }
@-webkit-keyframes dot1 { 0% { opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dot1 { 0% { opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
@-webkit-keyframes dot2 { 0% { opacity: 0; } 25% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dot2 { 0% { opacity: 0; } 25% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
@-webkit-keyframes dot3 { 0% { opacity: 0; } 50% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dot3 { 0% { opacity: 0; } 50% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 0; } }
#dot-dot-dot { color: #000; position: absolute; font-size: 40px; left: 257px; top: 88px; z-index: 100; -webkit-animation: dot1 4s infinite linear;   animation: dot1 4s infinite linear; }
#dot-dot-dot::before { color: #000; font-size: 40px; position: absolute; content: "."; left: 10px; top: 0px; -webkit-animation: dot2 4s infinite linear;   animation: dot2 4s infinite linear; }
#dot-dot-dot::after { color: #000; font-size: 40px; position: absolute; content: "."; left: 20px; top: 0px; -webkit-animation: dot3 4s infinite linear;   animation: dot3 4s infinite linear; }
#water { list-style: none; }
@-webkit-keyframes wave { 0% { top: 170px; } 50% { top: 180px; } 100% { top: 170px; } }
@keyframes wave { 0% { top: 170px; } 50% { top: 180px; } 100% { top: 170px; } }
#water li { box-shadow: -5px 4px 5px 0px rgba(0, 0, 0, 0.75); top: 170px; width: 200px; height: 200px; position: absolute; -webkit-animation: wave 2s infinite;   animation: wave 2s infinite; }
#water li:first-child { background: linear-gradient(135deg, #3d7fa8 0%, #004878 50%, #1173b0 50%, #004878 100%); transform: rotate(-30deg); box-shadow: -7px -4px 5px 0px rgba(0, 0, 0, 0.75); }
#water li:nth-child(2) { background: linear-gradient(135deg, #040438 0%, #040438 50%, #0000a6 50%, #060652 100%); left: 150px; transform: rotate(-50deg); box-shadow: -7px -4px 5px 0px rgba(0, 0, 0, 0.75); }
#water li:nth-child(3) { background: linear-gradient(45deg, #040438 0%, #579394 50%, #a1fcff 50%, #a1fcff 100%); left: 0px; transform: rotate(27deg); }
#water li:nth-child(4) { background: linear-gradient(45deg, #3d7fa8 0%, #004878 50%, #1173b0 50%, #004878 100%); left: 240px; transform: rotate(27deg); -webkit-animation-delay: 0.2s;   animation-delay: 0.2s; }
#water li:nth-child(5) { background: linear-gradient(135deg, #040438 0%, #040438 50%, #0000a6 50%, #060652 100%); left: -120px; transform: rotate(-30deg); -webkit-animation-delay: 0.3s;   animation-delay: 0.3s; box-shadow: -7px -4px 5px 0px rgba(0, 0, 0, 0.75); }
#water li:nth-child(6) { background: linear-gradient(45deg, #040438 0%, #579394 50%, #a1fcff 50%, #a1fcff 100%); left: 250px; transform: rotate(47deg); -webkit-animation-delay: 0.1s;   animation-delay: 0.1s; }
#water li:nth-child(8) { background: linear-gradient(135deg, #3d7fa8 0%, #004878 50%, #1173b0 50%, #004878 100%); transform: rotate(-40deg); left: 0px; -webkit-animation-delay: 0.7s;   animation-delay: 0.7s; box-shadow: -7px -4px 5px 0px rgba(0, 0, 0, 0.75); }
#water li:nth-child(9) { background: linear-gradient(135deg, #040438 0%, #040438 50%, #0000a6 50%, #060652 100%); left: 240px; transform: rotate(-20deg); -webkit-animation-delay: 0.2s;   animation-delay: 0.2s; box-shadow: 0px -4px 5px 0px rgba(0, 0, 0, 0.75); }
#water li:nth-child(10) { background: linear-gradient(45deg, #040438 0%, #579394 50%, #a1fcff 50%, #a1fcff 100%); left: 150px; transform: rotate(27deg); -webkit-animation-delay: 0.5s;   animation-delay: 0.5s; }
@-webkit-keyframes sail { 0% { top: 85px; left: -200px; } 25% { transform: rotate(10deg); } 50% { top: 110px; } 75% { transform: rotate(-10deg); } 100% { top: 85px; left: 400px; } }
@keyframes sail { 0% { top: 85px; left: -200px; } 25% { transform: rotate(10deg); } 50% { top: 110px; } 75% { transform: rotate(-10deg); } 100% { top: 85px; left: 400px; } }
#boat { width: 160px; height: 0px; position: absolute; border-bottom: 50px solid #333; border-top: 30px solid transparent; border-radius: 40%; top: 90px; left: 100px; -webkit-animation: sail 10s infinite linear;   animation: sail 10s infinite linear; box-shadow: -2px 3px 1px 0px rgba(0, 0, 0, 0.5); }
#boat #sail-left { position: absolute; width: 0px; height: 0px; border-right: 60px solid #333; border-top: 80px solid transparent; border-bottom: 0px solid transparent; top: -90px; box-shadow: 2px 3px 1px 0px rgba(0, 0, 0, 0.5); }
#boat #sail-left:after { content: ""; height: 90px; width: 5px; background: #333; position: absolute; top: -80px; left: 63px; box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.5); }
#boat #sail-right { position: absolute; width: 0px; height: 0px; border-left: 90px solid #333; border-top: 80px solid transparent; border-bottom: 0px solid transparent; top: -90px; left: 70px; box-shadow: -2px 3px 1px 0px rgba(0, 0, 0, 0.5); }
@-webkit-keyframes move-cloud1 { 0% { left: -210px; } 100% { left: 200px; } }
@keyframes move-cloud1 { 0% { left: -210px; } 100% { left: 200px; } }
#cloud1, #cloud2 { list-style: none; width: 100px; height: 0px; position: absolute; border-radius: 30% 50%; border-top: 30px solid #aaa; border-bottom: 20px solid transparent; top: 30px; left: 10px; -webkit-animation: move-cloud1 16s infinite linear;   animation: move-cloud1 16s infinite linear; box-shadow: -1px -2px 1px 0px rgba(0, 0, 0, 0.5); }
#cloud1:before, #cloud2:before { content: ""; position: absolute; width: 50px; height: 0px; border-radius: 40% 30%; border-top: 45px solid #aaa; border-bottom: 20px solid transparent; top: -45px; left: 20px; }
@-webkit-keyframes move-cloud2 { 0% { left: 200px; } 100% { left: 500px; } }
@keyframes move-cloud2 { 0% { left: 200px; } 100% { left: 500px; } }
#cloud2 { left: 200px; width: 80px; border-top: 20px solid #aaa; -webkit-animation: move-cloud2 16s infinite linear;   animation: move-cloud2 16s infinite linear; }
#cloud2:before { width: 40px; top: -30px; border-top: 30px solid #aaa; }
@-webkit-keyframes rain { 0% { top: -50px; color: #3d7fa8; } 80% { color: transparent; } 100% { top: 230px; } }
@keyframes rain { 0% { top: -50px; color: #3d7fa8; } 80% { color: transparent; } 100% { top: 230px; } }
#rain { width: 400px; height: 200px; }
#rain li { color: #3d7fa8; position: absolute; list-style: none; -webkit-animation: rain 1s infinite linear;   animation: rain 1s infinite linear; top: -50px; }
#rain li::before { content: "."; position: absolute; top: 0px; font-size: 30px; }
#rain li:first-child { left: 100px; -webkit-animation-delay: 0.1s;   animation-delay: 0.1s; }
#rain li:nth-child(2) { left: 150px; -webkit-animation-delay: 0.3s;   animation-delay: 0.3s; }
#rain li:nth-child(3) { left: 200px; -webkit-animation-delay: 0.2s;   animation-delay: 0.2s; }
#rain li:nth-child(4) { left: 250px; -webkit-animation-delay: 0.4s;   animation-delay: 0.4s; }
#rain li:nth-child(5) { left: 250px; -webkit-animation-delay: 0.7s;   animation-delay: 0.7s; }
#rain li:nth-child(6) { left: 300px; -webkit-animation-delay: 0.15s;   animation-delay: 0.15s; }
#rain li:nth-child(7) { left: 350px; -webkit-animation-delay: 0.6s;   animation-delay: 0.6s; }
#rain li:nth-child(8) { left: 400px; -webkit-animation-delay: 0.4s;   animation-delay: 0.4s; }
#rain li:nth-child(9) { left: 29px; -webkit-animation-delay: 0.2s;   animation-delay: 0.2s; }
#rain li:nth-child(10) { left: 59px; -webkit-animation-delay: 0.8s;   animation-delay: 0.8s; }
#rain li:nth-child(11) { left: 129px; -webkit-animation-delay: 0.2s;   animation-delay: 0.2s; }
#rain li:nth-child(12) { left: 169px; -webkit-animation-delay: 0.65s;   animation-delay: 0.65s; }
#rain li:nth-child(13) { left: 269px; -webkit-animation-delay: 0.1s;   animation-delay: 0.1s; }
#rain li:nth-child(14) { left: 339px; -webkit-animation-delay: 0.53s;   animation-delay: 0.53s; }
#rain li:nth-child(15) { left: 379px; }