@font-face { font-family: 'Rubik'; src: url('../fonts/Rubik-Light.ttf');} @font-face { font-family: 'Rubik-reg'; src: url('../fonts/Rubik-Regular.ttf');} @font-face { font-family: 'Rubik-bold'; src: url('../fonts/Rubik-Bold.ttf');} @font-face { font-family: 'Rubik-medium'; src: url('../fonts/Rubik-Medium.ttf');} @font-face { font-family: 'Rubik-eb'; src: url('../fonts/Rubik-ExtraBold.ttf');} html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: none; } table { border-collapse: collapse; border-spacing: 0; } html * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .fallback1{display:none} .imgcircle1{border-radius:50%; border:solid 4px #ffb400} /* background scenery */ body { font-family: "Rubik-reg", sans-serif; font-weight: 300; letter-spacing: 1px; color: #666666; background-color: #fffff2; height: 200vh; /* Fix for fullsize scrolling behaviour on android */ } .mt-l { margin-top: 0.7em; } .mt-m { margin-top: 2em; } @media all and (max-width: 1200px) { .mt-l { margin-top: 3em; } .mt-m { margin-top: 1.5em; } } @media all and (max-width: 960px) { .mt-l { margin-top: 1.5em; } .mt-m { margin-top: 1em; } } .subhead { font-size: 0.8em; text-transform: uppercase; letter-spacing: 1px; line-height: 1.2; font-family: "Rubik-reg", sans-serif;color:#333;} h1, .like-h1 { font-weight: 900; text-transform: uppercase; letter-spacing: 1px; line-height: 1.4; color:#333;} h1 sub, .like-h1 sub { text-transform: lowercase; } h2, .like-h2 { font-size: 32px; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; line-height: 2; }  h3, .like-h3 { font-size: 1.2em; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; line-height: 2; }  .subhead + h1, .subhead + .like-h1 { margin-top: .75em; }  p { font-size: 14px; line-height: 1.4; } p strong {font-weight:700}  @media all and (max-width: 1200px) { .subhead { font-size: 11.66667px; } h1, .like-h1 { font-size: 40.83333px; } h2, .like-h2 { font-size: 26.66667px; } p { font-size: 13.33333px; } }   @media all and (max-width: 480px) { .subhead { font-size: 15px; margin-top:10px; letter-spacing:1px;} h1, .like-h1 { font-size: 17px; } h2, .like-h2 {font-size: 26.66667px;} p {font-size: 13.33333px;} }    * + p { margin: 1em 0 0 0; }  a { color: #666666; text-decoration: none; } 

.btn i {color:#f2f2f2} 
a.btn { text-transform: uppercase; letter-spacing: 1px; font-family:"Rubik-bold", sans-serif; font-size:12px; background-color: #ffb400; padding: 1em 3em; -webkit-border-radius: 99999px; -moz-border-radius: 99999px; border-radius: 99999px; text-align: center; display: inline-block; -webkit-transition: all .2s ease; -o-transition: all .2s ease; -moz-transition: all .2s ease; transition: all .2s ease; color:#f2f2f2; border: 3px outset #F7C80F8C; background: rgb(210,148,0); background: linear-gradient(135deg, rgba(210,148,0,1) 0%, rgba(255,180,0,1) 59%);}

a.btn:hover { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); background-color: #ca920c; color:#f2f2f2;} 
a.btn.disabled { opacity: 0; pointer-events: none; } 
a.btn.small-inverted { background-color: #666666; color: #ca920c; padding: .75em 1.5em; font-size: .8em; }  



.btn4 i {color:#ffb400;font-size:15px; } 
a.btn4 { padding: 1em; text-align: center; display: inline-block;}
a.btn4:hover { color:#000;} 
a.btn4.disabled { opacity: 0; pointer-events: none; } 
a.btn4.small-inverted { background-color: #666666; color: #ca920c; padding: .75em 1.5em; font-size: .8em; }  


@media all and (max-width: 480px) { .btn i {font-size:15px; padding:.5em;border-radius:50%;min-width:30px;} .btn2 i {font-size:20px; padding:.2em;margin: 0 10px 0 0;color:#ffb400; } .btn2 span {font-weight:bold} .btn3 i {font-size:20px; padding:.2em;margin: 0 10px} .btn4 i {font-size:15px; padding:.5em;border-radius:50%;min-width:30px;}}   


@media all and (max-width: 960px) { a.btn.small-inverted { font-size: .7em; }} @media all and (max-width: 960px) { a.btn { padding: .8em 2em; } } @media all and (max-width: 480px) { a.btn { padding: .5em; margin:3px auto;}  }  
a.btn-inline { display: inline-block; position: relative; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #ffb400; font-size: 17px; padding-bottom: 4px; -webkit-transition: all .2s ease; -o-transition: all .2s ease; -moz-transition: all .2s ease; transition: all .2s ease; } 
@media all and (max-width: 1200px) { a.btn-inline { font-size: 16px; } } @media all and (max-width: 960px) { a.btn-inline { font-size: 2vw; } } a.btn-inline::after { display: block; content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 4px; background: #ffb400; -webkit-transition: all .2s ease; -o-transition: all .2s ease; -moz-transition: all .2s ease; transition: all .2s ease; } a.btn-inline:hover::after { bottom: -7px; }  .align-center { text-align: center; }  

@media all and (max-width: 900px) { h1, .like-h1 { font-size: 3.8vw; } h2, .like-h2 { font-size: 4vw; } p { font-size: 90%; } a { font-size: 90%; } }  @media all and (min-width: 961px) and (max-height: 768px) { h1, .like-h1 { font-size: 1.0em; } h2, .like-h2 { font-size: 0.9em; } p {} a {} }  #preloader { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: block; -webkit-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; opacity: 0; z-index: 80; background-color: #fffff2; } #preloader .loader-wrapper { position: fixed; left: 50%; top: 50%; width: auto; height: auto; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } #preloader .loader-wrapper img.loader { width: 101px; height: auto; display: inline-block; } #preloader .loader-wrapper .txt { font-size: 13px; font-family:"Rubik-bold", sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #f2f2f2; display: inline-block; margin-top: 1.5em; }               @media all and (min-width: 961px) and (max-height: 768px) { body #interface .border .logo { width: 120px; height: 120px; } body #interface .border .logo svg { width: 36.8px; } }  @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }  @-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } }  @-o-keyframes spin { 0% { -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } }  @keyframes spin { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }  #interface { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } #interface .border { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 95; pointer-events: none; } #interface .border .logo { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; top: -1px; left: 50%; pointer-events: auto; width: 197px; height: 122px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); -webkit-transform-origin: center top; -moz-transform-origin: center top; -ms-transform-origin: center top; -o-transform-origin: center top; transform-origin: center top; background-image: url('../img/sup_black.svg'); z-index: 10; -webkit-background-size: contain; -moz-background-size: contain; background-size: contain; background-position: center; background-repeat: no-repeat; -webkit-transition: -webkit-transform .2s ease; transition: -webkit-transform .2s ease; -o-transition: -o-transform .2s ease; -moz-transition: transform .2s ease, -moz-transform .2s ease; transition: transform .2s ease; transition: transform .2s ease, -webkit-transform .2s ease, -moz-transform .2s ease, -o-transform .2s ease; } #interface .border .logo:hover { -webkit-transform: translateX(-50%) scale(1.05) translateY(-1%); -moz-transform: translateX(-50%) scale(1.05) translateY(-1%); -ms-transform: translateX(-50%) scale(1.05) translateY(-1%); -o-transform: translateX(-50%) scale(1.05) translateY(-1%); transform: translateX(-50%) scale(1.05) translateY(-1%); } #interface .border .logo svg { width: 50px; height: auto; } @media all and (max-width: 1200px) { #interface .border .logo { width: 145px; height: 90px; } #interface .border .logo svg { width: 36.8px; } } @media all and (max-width: 960px) { #interface .border .logo {height: 90px;} #interface .border .logo svg { width: 26px; } } #interface .border .border-img { position: absolute; background-repeat: no-repeat; } #interface .border .border-img.top { top: 0; left: 0; width: 100%; height: 110px; background-image: url("../img/interface/border_top.png"); -webkit-background-size: 100% 54px; -moz-background-size: 100% 54px; background-size: 100% 54px; background-position: top center; } #interface .border .border-img.right { right: 0; top: 0; width: 29px; height: 100%; background-image: url("../img/interface/border_right.png"); -webkit-background-size: 29px 100%; -moz-background-size: 29px 100%; background-size: 29px 100%; background-position: right center; } #interface .border .border-img.bottom { left: 0; bottom: 0; width: 100%; height: 28px; background-image: url("../img/interface/border_bottom.png"); -webkit-background-size: 100% 28px; -moz-background-size: 100% 28px; background-size: 100% 28px; background-position: bottom center; } #interface .border .border-img.left { left: 0; top: 0; width: 41px; height: 100%; background-image: url("../img/interface/border_left.png"); -webkit-background-size: 41px 100%; -moz-background-size: 41px 100%; background-size: 41px 100%; background-position: left center; } #interface .border .noise-img { position: absolute; width: 65px; height: 65px; background-repeat: no-repeat; -webkit-background-size: 100% 100%; -moz-background-size: 100%; background-size: 100%; } #interface .border .noise-img.top-left { background-image: url("../img/interface/noise_top_left.png"); top: -1px; left: -1px; } #interface .border .noise-img.top-right { background-image: url("../img/interface/noise_top_right.png"); top: -1px; right: -1px; } #interface .border .noise-img.bottom-left { background-image: url("../img/interface/noise_bottom_left.png"); bottom: -1px; left: -1px; } #interface .border .noise-img.bottom-right { background-image: url("../img/interface/noise_bottom_right.png"); bottom: -1px; right: -1px; } #interface .elements { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 94; pointer-events: none; } #interface .elements > * { pointer-events: auto; } #interface .elements .navigation { position: absolute; left: 40px; bottom: 40px; } #interface .elements .navigation{ position: absolute; right: 40px; bottom: 40px; }  #interface .elements .navigation ul li { display: inline-block; margin-right: 1em; } #interface .elements .navigation ul li a { display: inline-block; color: #666;font-family: "Rubik-reg", sans-serif; text-transform: none; text-decoration: none; font-size: 14px; letter-spacing:1px; -webkit-transition: -webkit-transform .2s ease; transition: -webkit-transform .2s ease; -o-transition: -o-transform .2s ease; -moz-transition: transform .2s ease, -moz-transform .2s ease; transition: transform .2s ease; transition: transform .2s ease, -webkit-transform .2s ease, -moz-transform .2s ease, -o-transform .2s ease; } #interface .elements .navigation ul li a:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 

#interface .elements .navigationr{ position: absolute; right: 65px; top: 40px;}  
#interface .elements .navigationr ul li { display: inline-block; margin-right: 1em; } 
#interface .elements .navigationr ul li a { display: inline-block; color: #333;font-family: "Rubik-reg", sans-serif; font-weight:700; text-transform: none; text-decoration: none; font-size: 16px; letter-spacing:1px; -webkit-transition: -webkit-transform .2s ease; transition: -webkit-transform .2s ease; -o-transition: -o-transform .2s ease; -moz-transition: transform .2s ease, -moz-transform .2s ease; transition: transform .2s ease; transition: transform .2s ease, -webkit-transform .2s ease, -moz-transform .2s ease, -o-transform .2s ease; }
#interface .elements .navigationrb{ position: absolute; left: 130px; top: 25px; }  
#interface .elements .navigationrb ul li { display: inline-block; } 
#interface .elements .navigationrb ul li a { display: inline-block; color: #333;font-family: "Rubik-reg", sans-serif; font-weight:700; text-transform: none; text-decoration: none; font-size: 14px; letter-spacing:1px; -webkit-transition: -webkit-transform .2s ease; transition: -webkit-transform .2s ease; -o-transition: -o-transform .2s ease; -moz-transition: transform .2s ease, -moz-transform .2s ease; transition: transform .2s ease; transition: transform .2s ease, -webkit-transform .2s ease, -moz-transform .2s ease, -o-transform .2s ease; }

#interface .elements .navigationl{ position: absolute; left: 40px; top: 40px;}  
#interface .elements .navigationl ul li { display: inline-block; margin-right: 1em; } 
#interface .elements .navigationl ul li a { display: inline-block; color: #333;font-family: "Rubik-reg", sans-serif; font-weight:700; text-transform: none; text-decoration: none; font-size: 14px; letter-spacing:1px; -webkit-transition: -webkit-transform .2s ease; transition: -webkit-transform .2s ease; -o-transition: -o-transform .2s ease; -moz-transition: transform .2s ease, -moz-transform .2s ease; transition: transform .2s ease; transition: transform .2s ease, -webkit-transform .2s ease, -moz-transform .2s ease, -o-transform .2s ease; }

#interface .elements .navigation ul li a:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }   #interface .elements .social { position: absolute; top: 40px; right: 40px; } #interface .elements .social ul li { display: inline-block; } #interface .elements .social ul li:not(:last-child) { margin-right: .1em; font-size:17px;} #interface .elements .social ul li a { padding: .2em; } #interface .elements .social ul li a:hover svg { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } #interface .elements .social ul li a svg { height: 14px; width: 20px; /* fix for IE 11 */ -webkit-transition: -webkit-transform .2s ease; transition: -webkit-transform .2s ease; -o-transition: -o-transform .2s ease; -moz-transition: transform .2s ease, -moz-transform .2s ease; transition: transform .2s ease; transition: transform .2s ease, -webkit-transform .2s ease, -moz-transform .2s ease, -o-transform .2s ease; } #interface .elements .eu-badge { position: absolute; right: 50px; bottom: 50px; height: 24px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: all .2s ease; -o-transition: all .2s ease; -moz-transition: all .2s ease; transition: all .2s ease; } #interface .elements .eu-badge p { text-transform: uppercase; text-align: right; font-size: 12px; line-height: 1.2; } .active-start #interface .elements .eu-badge { height: 63px; } #interface .elements .eu-badge .eu-flag { width: 36px; height: auto; margin-left: 10px; -webkit-transition: all .2s ease; -o-transition: all .2s ease; -moz-transition: all .2s ease; transition: all .2s ease; } .active-start #interface .elements .eu-badge .eu-flag { width: 92px; } @media all and (max-width: 960px) { #interface .elements .eu-badge { display: block; bottom: 30px; right: 30px; height: 34px; } body:not(.active-start):not(.active-result) #interface .elements .eu-badge { display: none; } #interface .elements .eu-badge p { position: absolute; left: 0; top: 50%; -webkit-transition: all .2s ease; -o-transition: all .2s ease; -moz-transition: all .2s ease; transition: all .2s ease; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 300px; opacity: 0; } #interface .elements .eu-badge.show p { opacity: 1; -webkit-transform: translateY(-50%) translateX(-105%); -moz-transform: translateY(-50%) translateX(-105%); -ms-transform: translateY(-50%) translateX(-105%); -o-transform: translateY(-50%) translateX(-105%); transform: translateY(-50%) translateX(-105%); } .active-start #interface .elements .eu-badge { height: 42px; } #interface .elements .eu-badge .eu-flag { width: 50px; margin-left: 0; position: relative; z-index: 1; } .active-start #interface .elements .eu-badge .eu-flag { width: 60px; } } #interface .elements .sound-toggle { position: absolute; top: 40px; left: 40px; } #interface .elements .sound-toggle audio { display: none; } #interface .elements .sound-toggle > span { display: block; height: 16px; width: 18px; } #interface .elements .sound-toggle .sound-on { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJ1dGUiIHZpZXdCb3g9IjAgMCAxNSAxMyI+ICA8ZGVmcz4gICAgPHN0eWxlPiAgICAgIC5jbHMtMSwuY2xzLTJ7ZmlsbDojZmZmfS5jbHMtMXtmaWxsLXJ1bGU6ZXZlbm9kZH0gICAgPC9zdHlsZT4gIDwvZGVmcz4gIDxwYXRoIGQ9Ik00MSA0NGgzdjVoLTNhLjkyOS45MjkgMCAwIDEtMS0xdi0zYTEuMDA3IDEuMDA3IDAgMCAxIDEtMXptMyAwbDYtNHYxM2wtNi00di01eiIgY2xhc3M9ImNscy0xIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDAgLTQwKSIvPiAgPHBhdGggZD0iTTEyIDNoMXY3aC0xek0xNCAyaDF2OWgtMXoiIGNsYXNzPSJjbHMtMiIvPjwvc3ZnPg==); } #interface .elements .sound-toggle .sound-off { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJ1dGUiIHZpZXdCb3g9IjAgMCAxNSAxMyI+ICA8ZGVmcz4gICAgPHN0eWxlPiAgICAgIC5jbHMtMXtmaWxsOiNmZmY7ZmlsbC1ydWxlOmV2ZW5vZGR9ICAgIDwvc3R5bGU+ICA8L2RlZnM+ICA8cGF0aCBkPSJNNDEgNDRoM3Y1aC0zYS45MjkuOTI5IDAgMCAxLTEtMXYtM2ExLjAwNyAxLjAwNyAwIDAgMSAxLTF6bTMgMGw2LTR2MTNsLTYtNHYtNXoiIGNsYXNzPSJjbHMtMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQwIC00MCkiLz48L3N2Zz4=); } #interface .elements .sound-toggle.off .sound-on { display: none; } #interface .elements .sound-toggle.off .sound-off { display: block; } #interface .elements .sound-toggle.on .sound-on { display: block; } #interface .elements .sound-toggle.on .sound-off { display: none; } @media all and (max-width: 960px) { #interface .elements > *:not(.sound-toggle):not(.eu-badge) { display: none; } } #interface .mobile-navigation-toggle { display: none; } @media all and (max-width: 960px) { #interface .mobile-navigation-toggle { display: block; position: fixed; top: 30px; right: 30px; cursor: pointer; z-index: 200; } #interface .mobile-navigation-toggle .mobile-navigation-btn::before { color: #666666; font-size: 1.5em; content:"\2630"} body.mobile-navigation-active #interface .mobile-navigation-toggle .mobile-navigation-btn::before { color: #ffb400; content:"\2716" } } #interface .mobile-navigation { display: none; } @media all and (max-width: 960px) { #interface .mobile-navigation { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; background: #f2f2f2; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; -webkit-transition: opacity .3s ease; -o-transition: opacity .3s ease; -moz-transition: opacity .3s ease; transition: opacity .3s ease; z-index: 95; } body.mobile-navigation-active #interface .mobile-navigation { opacity: 1; pointer-events: auto; background-color:#fffff2; z-index:120;} #interface .mobile-navigation .navigation ul { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -webkit-flex-direction: column-reverse; -moz-box-orient: vertical; -moz-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } #interface .mobile-navigation .navigation ul li:not(:last-child) { margin-top: 1.5em; } #interface .mobile-navigation .navigation ul li a { color: #244863; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; } #interface .mobile-navigation .social { position: absolute; bottom: 100px; left: 50%;font-size:2.2em; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } #interface .mobile-navigation .social ul li { display: inline-block; } #interface .mobile-navigation .social ul li:not(:last-child) { margin-right: .5em; } #interface .mobile-navigation .social ul li a { padding: .5em; } #interface .mobile-navigation .social ul li a:hover svg { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } #interface .mobile-navigation .social ul li a svg { height: 14px; -webkit-transition: -webkit-transform .2s ease; transition: -webkit-transform .2s ease; -o-transition: -o-transform .2s ease; -moz-transition: transform .2s ease, -moz-transform .2s ease; transition: transform .2s ease; transition: transform .2s ease, -webkit-transform .2s ease, -moz-transform .2s ease, -o-transform .2s ease; } #interface .mobile-navigation .social ul li a svg path { fill: #ffb400 !important; } } #interface .content { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 92; } #interface .content .screen { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: inherit; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: all .2s ease; -o-transition: all .2s ease; -moz-transition: all .2s ease; transition: all .2s ease; opacity: 0; pointer-events: none; } @media all and (max-width: 1200px) { #interface .content .screen { padding-top: 2em; } } #interface .content .screen .screen-content { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; max-width: 1110px; } #interface .content .screen .screen-content.text-content { max-width: 750px; margin-top:5px; /* fix for IE 11 */ } #interface .content .screen .screen-content.text-content > .subhead, #interface .content .screen .screen-content.text-content > .like-h1, #interface .content .screen .screen-content.text-content > p { width: 100%; } #interface .content .screen .screen-content .selector { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } #interface .content .screen .screen-content .selector li { cursor: pointer; margin: 20px; text-align: center; -webkit-transition: -webkit-transform .2s ease; transition: -webkit-transform .2s ease; -o-transition: -o-transform .2s ease; -moz-transition: transform .2s ease, -moz-transform .2s ease; transition: transform .2s ease; transition: transform .2s ease, -webkit-transform .2s ease, -moz-transform .2s ease, -o-transform .2s ease; max-width: 200px; } @media all and (max-width: 960px) { #interface .content .screen .screen-content .selector li { margin-right: 10px; max-width: 160px; } } #interface .content .screen .screen-content .selector li .selector-img { display: inline-block; width: 150px; height: 150px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: #666666; -webkit-transition: all .2s ease; -o-transition: all .2s ease; -moz-transition: all .2s ease; transition: all .2s ease; } #interface .content .screen .screen-content .selector li .selector-img-inline { width: 210px; margin: auto; } #interface .content .screen .screen-content .selector li .selector-img-inline.catch-mussels { display: none; } @media all and (max-width: 1200px) { #interface .content .screen .screen-content .selector li .selector-img-inline { width: 140px; } }  @media all and (max-width: 960px) { #interface .content .screen .screen-content .selector li .selector-img-inline { width: 100px; } }  #interface .content .screen .screen-content .selector li .selector-name { font-weight: 500; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; margin-top: 2em; -webkit-transition: all .2s ease; -o-transition: all .2s ease; -moz-transition: all .2s ease; transition: all .2s ease; line-height: 1.3; color:#333333;}  @media all and (max-width: 960px) { #interface .content .screen .screen-content .selector li .selector-name { font-size: 10px; word-break: break-all; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } }  #interface .content .screen .screen-content .selector li.selected { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } #interface .content .screen .screen-content .selector li.selected .selector-img { background: #ffb400; } #interface .content .screen .screen-content .selector li.selected .selector-name span { color: #ffb400; } #interface .content .screen .screen-content .selector li:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } #interface .content .screen .screen-content .selector li:last-child { margin-right: 20px; } #interface .content .screen .detail-content { position: absolute; left: -100vw; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: 1s all; -o-transition: 1s all; -moz-transition: 1s all; transition: 1s all; width: 410px; height: auto; padding: 80px 60px; background: url("../img/interface/detail-screen-background.png"); -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; background-size: 100% 100%; color: #244863; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { #interface .content .screen .detail-content { left: -100%; } } @media all and (max-width: 1200px) { #interface .content .screen .detail-content { padding: 60px 40px; } } @media all and (max-width: 960px) { #interface .content .screen .detail-content { padding: 30px 20px; } } #interface .content .screen .detail-content.right { left: auto; right: -100vw; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { #interface .content .screen .detail-content.right { right: -100%; } } .transport-road #interface .content .screen .detail-content.right { left: -100vw; right: auto; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .transport-road #interface .content .screen .detail-content.right { left: -100%; } } #interface .content .screen .detail-content span { -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } #interface .content .screen .detail-content .info-link { width: 24px; height: 24px; position: absolute; top: 30px; right: 30px; color: #ffb400; border: 1px solid #ffb400; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; text-align: center; padding-top: 3px; opacity: 0.7; -webkit-transition: opacity .2s ease; -o-transition: opacity .2s ease; -moz-transition: opacity .2s ease; transition: opacity .2s ease; } #interface .content .screen .detail-content .info-link:hover { opacity: 1; } #interface .content .screen[id*="selection"] { -webkit-transition: all .2s 0 ease; -o-transition: all .2s 0 ease; -moz-transition: all .2s 0 ease; transition: all .2s 0 ease; } #interface .content .screen[id*="selection"] .subhead { opacity: 0; -webkit-transform: translateY(-2vh); -moz-transform: translateY(-2vh); -ms-transform: translateY(-2vh); -o-transform: translateY(-2vh); transform: translateY(-2vh); -webkit-transition: .2s .1s all; -o-transition: .2s .1s all; -moz-transition: .2s .1s all; transition: .2s .1s all; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { #interface .content .screen[id*="selection"] .subhead { -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } } #interface .content .screen[id*="selection"] .like-h1 { opacity: 0; -webkit-transform: translateY(-2vh); -moz-transform: translateY(-2vh); -ms-transform: translateY(-2vh); -o-transform: translateY(-2vh); transform: translateY(-2vh); -webkit-transition: .2s 0s all; -o-transition: .2s 0s all; -moz-transition: .2s 0s all; transition: .2s 0s all; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { #interface .content .screen[id*="selection"] .like-h1 { -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } } #interface .content .screen[id*="selection"] .selector .selector-img-inline { opacity: 0; -webkit-transform: translateY(-2vh); -moz-transform: translateY(-2vh); -ms-transform: translateY(-2vh); -o-transform: translateY(-2vh); transform: translateY(-2vh); } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { #interface .content .screen[id*="selection"] .selector .selector-img-inline { -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } } #interface .content .screen[id*="selection"] .selector .selector-name { opacity: 0; -webkit-transform: translateY(2vh); -moz-transform: translateY(2vh); -ms-transform: translateY(2vh); -o-transform: translateY(2vh); transform: translateY(2vh); } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { #interface .content .screen[id*="selection"] .selector .selector-name { -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } } #interface .content .screen[id*="-detail"] .detail-content .like-h2, #interface .content .screen[id*="-detail"] .detail-content p, #interface .content .screen[id*="-detail"] .detail-content a { display: inline-block; opacity: 0; -webkit-transform: translateX(-2vw); -moz-transform: translateX(-2vw); -ms-transform: translateX(-2vw); -o-transform: translateX(-2vw); transform: translateX(-2vw); } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { #interface .content .screen[id*="-detail"] .detail-content .like-h2, #interface .content .screen[id*="-detail"] .detail-content p, #interface .content .screen[id*="-detail"] .detail-content a { -webkit-transform: translateX(-40px); -moz-transform: translateX(-40px); -ms-transform: translateX(-40px); -o-transform: translateX(-40px); transform: translateX(-40px); } } #interface .content .screen[id*="-detail"] .detail-content .info-link { opacity: 0; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } #interface .content .screen[id*="-detail"] .detail-content .btn-inline { position: relative; display: inline-block; } #interface .content .screen[id*="-detail"] .detail-content .btn-inline .click-here { opacity: 0; position: absolute; padding: 5px 10px; background-color: #ffb400; color: #666666; top: 50%; left: 100%; -webkit-transform: translate(30px, -50%); -moz-transform: translate(30px, -50%); -ms-transform: translate(30px, -50%); -o-transform: translate(30px, -50%); transform: translate(30px, -50%); pointer-events: none; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; white-space: nowrap; } #interface .content .screen[id*="-detail"] .detail-content .btn-inline .click-here.visible { opacity: 1; -webkit-transition: .3s all; -o-transition: .3s all; -moz-transition: .3s all; transition: .3s all; -webkit-animation: pulsatingInfoBoxLeft 2s infinite ease-in-out; -moz-animation: pulsatingInfoBoxLeft 2s infinite ease-in-out; -o-animation: pulsatingInfoBoxLeft 2s infinite ease-in-out; animation: pulsatingInfoBoxLeft 2s infinite ease-in-out; -webkit-animation-delay: .3s; -moz-animation-delay: .3s; -o-animation-delay: .3s; animation-delay: .3s; } #interface .content .screen[id*="-detail"] .detail-content .btn-inline .click-here::after { content: ""; position: absolute; left: -12px; width: 0; height: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); border-right: 12px solid #ffb400; border-top: 6px solid transparent; border-bottom: 6px solid transparent; } #interface .content .screen[id*="-detail"] .detail-content.right .like-h2, #interface .content .screen[id*="-detail"] .detail-content.right p, #interface .content .screen[id*="-detail"] .detail-content.right a { -webkit-transform: translateX(2vw); -moz-transform: translateX(2vw); -ms-transform: translateX(2vw); -o-transform: translateX(2vw); transform: translateX(2vw); } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { #interface .content .screen[id*="-detail"] .detail-content.right .like-h2, #interface .content .screen[id*="-detail"] .detail-content.right p, #interface .content .screen[id*="-detail"] .detail-content.right a { -webkit-transform: translateX(40px); -moz-transform: translateX(40px); -ms-transform: translateX(40px); -o-transform: translateX(40px); transform: translateX(40px); } } #interface .content .screen[id*="-detail"] .detail-content.right .info-link { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } #interface .content .screen[id*="-detail"] .detail-content.right .btn-inline .click-here { position: static; float: right; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); pointer-events: none; } #interface .content .screen[id*="-detail"] .detail-content.right .btn-inline .click-here.visible { -webkit-animation-name: pulsatingInfoBoxRight; -moz-animation-name: pulsatingInfoBoxRight; -o-animation-name: pulsatingInfoBoxRight; animation-name: pulsatingInfoBoxRight; } #interface .content .screen[id*="-detail"] .detail-content.right .btn-inline .click-here::after { position: absolute; left: 100%; border-right: none; border-left: 12px solid #ffb400; } .transport-road #interface .content .screen[id*="-detail"] .detail-content.right .like-h2, .transport-road #interface .content .screen[id*="-detail"] .detail-content.right p, .transport-road #interface .content .screen[id*="-detail"] .detail-content.right a { -webkit-transform: translateX(-2vw); -moz-transform: translateX(-2vw); -ms-transform: translateX(-2vw); -o-transform: translateX(-2vw); transform: translateX(-2vw); } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .transport-road #interface .content .screen[id*="-detail"] .detail-content.right .like-h2, .transport-road #interface .content .screen[id*="-detail"] .detail-content.right p, .transport-road #interface .content .screen[id*="-detail"] .detail-content.right a { -webkit-transform: translateX(-40px); -moz-transform: translateX(-40px); -ms-transform: translateX(-40px); -o-transform: translateX(-40px); transform: translateX(-40px); } } .transport-road #interface .content .screen[id*="-detail"] .detail-content.right .info-link { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } 
#interface .content .screen.screen-active { opacity: 1; pointer-events: auto; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); margin-top:18px;} #interface .content .screen.screen-active .detail-content { left: 0; -webkit-transition: 1s all; -o-transition: 1s all; -moz-transition: 1s all; transition: 1s all; } #interface .content .screen.screen-active .detail-content.right { left: auto; right: 0; } .transport-road #interface .content .screen.screen-active .detail-content.right { left: 0; right: auto; } @media all and (max-width: 960px) { #interface .content .screen.screen-active .detail-content p { margin-top: 1em; } #interface .content .screen.screen-active .detail-content .btn-inline { font-size: 1.8vw; } #interface .content .screen.screen-active .detail-content .btn-inline::after { height: 2px; bottom: -2px; } } #interface .content .screen.screen-active[id*="selection"] .subhead { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; -webkit-transition: .5s 1.3s all; -o-transition: .5s 1.3s all; -moz-transition: .5s 1.3s all; transition: .5s 1.3s all; } #interface .content .screen.screen-active[id*="selection"] .like-h1 { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; -webkit-transition: .5s 1.5s all; -o-transition: .5s 1.5s all; -moz-transition: .5s 1.5s all; transition: .5s 1.5s all; } #interface .content .screen.screen-active[id*="selection"] .selector li .selector-img-inline { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; -webkit-transition: .5s all; -o-transition: .5s all; -moz-transition: .5s all; transition: .5s all; } #interface .content .screen.screen-active[id*="selection"] .selector li:nth-child(1) .selector-img-inline, #interface .content .screen.screen-active[id*="selection"] .selector li:nth-child(1) .selector-name { -webkit-transition-delay: .5s; -moz-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; } #interface .content .screen.screen-active[id*="selection"] .selector li:nth-child(2) .selector-img-inline, #interface .content .screen.screen-active[id*="selection"] .selector li:nth-child(2) .selector-name { -webkit-transition-delay: .65s; -moz-transition-delay: .65s; -o-transition-delay: .65s; transition-delay: .65s; } #interface .content .screen.screen-active[id*="selection"] .selector li:nth-child(3) .selector-img-inline, #interface .content .screen.screen-active[id*="selection"] .selector li:nth-child(3) .selector-name { -webkit-transition-delay: .8s; -moz-transition-delay: .8s; -o-transition-delay: .8s; transition-delay: .8s; } #interface .content .screen.screen-active[id*="selection"] .selector li:nth-child(4) .selector-img-inline, #interface .content .screen.screen-active[id*="selection"] .selector li:nth-child(4) .selector-name { -webkit-transition-delay: .95s; -moz-transition-delay: .95s; -o-transition-delay: .95s; transition-delay: .95s; } #interface .content .screen.screen-active[id*="selection"] .selector li:nth-child(5) .selector-img-inline, #interface .content .screen.screen-active[id*="selection"] .selector li:nth-child(5) .selector-name { -webkit-transition-delay: 1.1s; -moz-transition-delay: 1.1s; -o-transition-delay: 1.1s; transition-delay: 1.1s; } #interface .content .screen.screen-active[id*="selection"] .selector li .selector-name { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; -webkit-transition: .5s all; -o-transition: .5s all; -moz-transition: .5s all; transition: .5s all; } #interface .content .screen.screen-active[id*="-detail"] .detail-content .like-h2, #interface .content .screen.screen-active[id*="-detail"] .detail-content p, #interface .content .screen.screen-active[id*="-detail"] .detail-content a, #interface .content .screen.screen-active[id*="-detail"] .detail-content .info-link { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; -webkit-transition: .5s 1s all; -o-transition: .5s 1s all; -moz-transition: .5s 1s all; transition: .5s 1s all; } #interface .content .screen.screen-active[id*="-detail"] .detail-content p { -webkit-transition-delay: 1.2s; -moz-transition-delay: 1.2s; -o-transition-delay: 1.2s; transition-delay: 1.2s; } #interface .content .screen.screen-active[id*="-detail"] .detail-content a { -webkit-transition-delay: 1.4s; -moz-transition-delay: 1.4s; -o-transition-delay: 1.4s; transition-delay: 1.4s; } #interface .content .screen.screen-active[id*="-detail"] .detail-content .info-link { -webkit-transition-delay: 1.6s; -moz-transition-delay: 1.6s; -o-transition-delay: 1.6s; transition-delay: 1.6s; } .transport-road #interface .content .screen.screen-active[id*="-detail"] .detail-content .like-h2, .transport-road #interface .content .screen.screen-active[id*="-detail"] .detail-content p, .transport-road #interface .content .screen.screen-active[id*="-detail"] .detail-content a { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } #interface .curtain { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; -webkit-transition: opacity .5s ease; -o-transition: opacity .5s ease; -moz-transition: opacity .5s ease; transition: opacity .5s ease; }  body[class*="selection"] #interface .curtain, body.active-language-switch #interface .curtain { opacity: .5; }  body.transport-animation-out #interface .curtain { opacity: .5; -webkit-transition: .5s 2s all; -o-transition: .5s 2s all; -moz-transition: .5s 2s all; transition: .5s 2s all; }  body.supboard-shellsupboard #interface .content .screen .screen-content .selector .catch-mussels-selector .selector-img-inline { display: none; } body.supboard-shellsupboard #interface .content .screen .screen-content .selector .catch-mussels-selector .selector-img-inline.catch-mussels { display: block; }  body.preloading #preloader { opacity: 1; pointer-events: all; }  body.preloading #interface > div { opacity: 0; -webkit-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; } body.preloading #interface > div.border { opacity: 1; }  body.preloading #app { opacity: 1; }  @media all and (max-width: 900px) { #interface .content .screen { padding-left: 40px; padding-right: 40px; } #interface .content .screen .screen-content.text-content { max-width: 100%; } }  @-webkit-keyframes pulsatingInfoBoxLeft { 0% { -webkit-transform: translate(30px, -50%); transform: translate(30px, -50%); } 10% { -webkit-transform: translate(20px, -50%); transform: translate(20px, -50%); } 20% { -webkit-transform: translate(30px, -50%); transform: translate(30px, -50%); } 30% { -webkit-transform: translate(20px, -50%); transform: translate(20px, -50%); } 40%, 100% { -webkit-transform: translate(30px, -50%); transform: translate(30px, -50%); } }  @-moz-keyframes pulsatingInfoBoxLeft { 0% { -moz-transform: translate(30px, -50%); transform: translate(30px, -50%); } 10% { -moz-transform: translate(20px, -50%); transform: translate(20px, -50%); } 20% { -moz-transform: translate(30px, -50%); transform: translate(30px, -50%); } 30% { -moz-transform: translate(20px, -50%); transform: translate(20px, -50%); } 40%, 100% { -moz-transform: translate(30px, -50%); transform: translate(30px, -50%); } }  @-o-keyframes pulsatingInfoBoxLeft { 0% { -o-transform: translate(30px, -50%); transform: translate(30px, -50%); } 10% { -o-transform: translate(20px, -50%); transform: translate(20px, -50%); } 20% { -o-transform: translate(30px, -50%); transform: translate(30px, -50%); } 30% { -o-transform: translate(20px, -50%); transform: translate(20px, -50%); } 40%, 100% { -o-transform: translate(30px, -50%); transform: translate(30px, -50%); } }  @keyframes pulsatingInfoBoxLeft { 0% { -webkit-transform: translate(30px, -50%); -moz-transform: translate(30px, -50%); -o-transform: translate(30px, -50%); transform: translate(30px, -50%); } 10% { -webkit-transform: translate(20px, -50%); -moz-transform: translate(20px, -50%); -o-transform: translate(20px, -50%); transform: translate(20px, -50%); } 20% { -webkit-transform: translate(30px, -50%); -moz-transform: translate(30px, -50%); -o-transform: translate(30px, -50%); transform: translate(30px, -50%); } 30% { -webkit-transform: translate(20px, -50%); -moz-transform: translate(20px, -50%); -o-transform: translate(20px, -50%); transform: translate(20px, -50%); } 40%, 100% { -webkit-transform: translate(30px, -50%); -moz-transform: translate(30px, -50%); -o-transform: translate(30px, -50%); transform: translate(30px, -50%); } }  @-webkit-keyframes pulsatingInfoBoxRight { 0% { -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } 10% { -webkit-transform: translate(10px, -50%); transform: translate(10px, -50%); } 20% { -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } 30% { -webkit-transform: translate(10px, -50%); transform: translate(10px, -50%); } 40%, 100% { -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } }  @-moz-keyframes pulsatingInfoBoxRight { 0% { -moz-transform: translate(0, -50%); transform: translate(0, -50%); } 10% { -moz-transform: translate(10px, -50%); transform: translate(10px, -50%); } 20% { -moz-transform: translate(0, -50%); transform: translate(0, -50%); } 30% { -moz-transform: translate(10px, -50%); transform: translate(10px, -50%); } 40%, 100% { -moz-transform: translate(0, -50%); transform: translate(0, -50%); } }  @-o-keyframes pulsatingInfoBoxRight { 0% { -o-transform: translate(0, -50%); transform: translate(0, -50%); } 10% { -o-transform: translate(10px, -50%); transform: translate(10px, -50%); } 20% { -o-transform: translate(0, -50%); transform: translate(0, -50%); } 30% { -o-transform: translate(10px, -50%); transform: translate(10px, -50%); } 40%, 100% { -o-transform: translate(0, -50%); transform: translate(0, -50%); } }  @keyframes pulsatingInfoBoxRight { 0% { -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); } 10% { -webkit-transform: translate(10px, -50%); -moz-transform: translate(10px, -50%); -o-transform: translate(10px, -50%); transform: translate(10px, -50%); } 20% { -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); } 30% { -webkit-transform: translate(10px, -50%); -moz-transform: translate(10px, -50%); -o-transform: translate(10px, -50%); transform: translate(10px, -50%); } 40%, 100% { -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); } }  #interface .content .screen.language-switch .language-container { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); max-width: 400px; max-height: -webkit-calc(100vh - 400px); max-height: -moz-calc(100vh - 400px); max-height: calc(100vh - 400px); } #interface .content .screen.language-switch .language-container .content-wrapper { position: relative; padding: 75px 50px 50px 50px; background: url("../img/interface/content_bg.png"); -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; background-size: 100% 100%; background-repeat: no-repeat; } @media all and (max-width: 960px) { #interface .content .screen.language-switch .language-container .content-wrapper { padding: 30px; } } #interface .content .screen.language-switch .language-container .content-wrapper .close-btn { width: 24px; height: 24px; position: absolute; top: 30px; right: 30px; color: #ffb400; border: 1px solid #ffb400; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; text-align: center; padding-top: 3px; opacity: 0.7; -webkit-transition: opacity .2s ease; -o-transition: opacity .2s ease; -moz-transition: opacity .2s ease; transition: opacity .2s ease; } @media all and (max-width: 960px) { #interface .content .screen.language-switch .language-container .content-wrapper .close-btn { top: 15px; right: 15px; } } #interface .content .screen.language-switch .language-container .content-wrapper .close-btn:hover { opacity: 1; } #interface .content .screen.language-switch .language-container .content-wrapper .close-btn-ie { width: 24px; height: 24px; position: absolute; top: 30px; right: 30px; color: #ffb400; border: 1px solid #ffb400; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; text-align: center; padding-top: 3px; opacity: 0.7; -webkit-transition: opacity .2s ease; -o-transition: opacity .2s ease; -moz-transition: opacity .2s ease; transition: opacity .2s ease; } @media all and (max-width: 960px) { #interface .content .screen.language-switch .language-container .content-wrapper .close-btn-ie { top: 15px; right: 15px; } } #interface .content .screen.language-switch .language-container .content-wrapper .close-btn-ie:hover { opacity: 1; } #interface .content .screen.language-switch .language-container .content-wrapper h2 { color: #244863; } @media all and (max-width: 960px) { #interface .content .screen.language-switch .language-container .content-wrapper h2 br { display: none; } } #interface .content .screen.language-switch .language-container .content-wrapper p { color: #244863; } #interface .content .screen.language-switch .language-container .content-wrapper a + p { margin-top: 0; } #interface .content .screen.language-switch .language-container .content-wrapper ul { margin-top: 1em; } #interface .content .screen.language-switch .language-container .content-wrapper ul li { padding: 1em 0; } #interface .content .screen.language-switch .language-container .content-wrapper ul li:nth-child(n+2) { border-top: 1px solid #eee; } #interface .content .screen.language-switch .language-container .content-wrapper ul li a { color: #ffb400; font-weight: 900; text-transform: uppercase; } @media all and (max-width: 960px) { #interface .content .screen.language-switch .language-container .content-wrapper ul { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } #interface .content .screen.language-switch .language-container .content-wrapper ul li { -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding: .75em 0; border-top: 1px solid #eee; } }  .active-result-detail #interface .content .screen.result#result { opacity: 0; }  #interface .content .screen.result .result-container { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); max-width: 1100px; } #interface .content .screen.result .result-container .content-wrapper { position: relative; width: 100%; height: 70%; max-height: 550px; background: url("../img/interface/content_bg.png"); -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; background-size: 100% 100%; background-repeat: no-repeat; } .active-result-detail #interface .content .screen.result .result-container .content-wrapper::before { content: ""; opacity: 0; position: absolute; width: -webkit-calc(100% - 80px); width: -moz-calc(100% - 80px); width: calc(100% - 80px); height: 100px; top: 29px; left: 30px; z-index: 10; pointer-events: none; background: -webkit-gradient(linear, left top, left bottom, from(white), to(rgba(255, 255, 255, 0))); background: -webkit-linear-gradient(top, white 0%, rgba(255, 255, 255, 0) 100%); background: -moz-linear-gradient(top, white 0%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(top, white 0%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(to bottom, white 0%, rgba(255, 255, 255, 0) 100%); } @media all and (max-width: 960px) { .active-result-detail #interface .content .screen.result .result-container .content-wrapper::before { height: 30px; } } .active-result-detail #interface .content .screen.result .result-container .content-wrapper.show-top-gradient::before { opacity: 1; } .active-result-detail #interface .content .screen.result .result-container .content-wrapper::after { content: ""; position: absolute; width: -webkit-calc(100% - 80px); width: -moz-calc(100% - 80px); width: calc(100% - 80px); height: 100px; bottom: 29px; left: 30px; z-index: 10; pointer-events: none; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(white)); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%); background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%); } @media all and (max-width: 960px) { .active-result-detail #interface .content .screen.result .result-container .content-wrapper::after { height: 30px; } } @media all and (max-width: 960px) { .active-result-detail #interface .content .screen.result .result-container .content-wrapper { width: 80%; } } @media all and (max-width: 1200px) { #interface .content .screen.result .result-container .content-wrapper { width: 80%; height: 60%; } } #interface .content .screen.result .result-container .content-wrapper .screen-content-wrapper { position: relative; overflow-y: auto; height: 100%; max-height: 60vh; } #interface .content .screen.result .result-container .content-wrapper .screen-content-wrapper::-webkit-scrollbar { width: 10px; } #interface .content .screen.result .result-container .content-wrapper .screen-content-wrapper::-webkit-scrollbar-track { background: #ebebeb; -webkit-border-radius: 10px; border-radius: 10px; } #interface .content .screen.result .result-container .content-wrapper .screen-content-wrapper::-webkit-scrollbar-thumb { background: #264d69; -webkit-border-radius: 10px; border-radius: 10px; } #interface .content .screen.result .result-container .content-wrapper .screen-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .active-result-detail #interface .content .screen.result .result-container .content-wrapper .screen-content { display: block; max-width: 740px; padding: 30px 20px 100px 20px; height: auto; } #interface .content .screen.result .result-container .content-wrapper .screen-content .button-container { opacity: 0; position: absolute; left: 50px; bottom: 50px; width: -webkit-calc(100% - 100px); width: -moz-calc(100% - 100px); width: calc(100% - 100px); display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } #interface .content .screen.result .result-container .content-wrapper .screen-content .button-container .btn-inline { font-size: 12px; color: #666666; padding: 1em; } #interface .content .screen.result .result-container .content-wrapper .screen-content .button-container .btn-inline::after { display: none; } #interface .content .screen.result .result-container .content-wrapper .screen-content .button-container .btn { max-width: 31%; } #interface .content .screen.result .result-container .content-wrapper .screen-content .video-container { position: absolute; top: 10px; left: 10px; width: -webkit-calc(100% - 20px); width: -moz-calc(100% - 20px); width: calc(100% - 20px); height: -webkit-calc(100% - 20px); height: -moz-calc(100% - 20px); height: calc(100% - 20px); overflow: hidden; } #interface .content .screen.result .result-container .content-wrapper .screen-content .video-container video { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 100%; } #interface .content .screen.result .result-container .content-wrapper .screen-content .text-container { position: absolute; width: 100%; height: 100%; top: 0; left: 0; text-align: center; text-transform: uppercase; } #interface .content .screen.result .result-container .content-wrapper .screen-content .text-container .co2-info { font-size: 26px; line-height: 1.1; position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 80%; } @media all and (max-width: 960px) { #interface .content .screen.result .result-container .content-wrapper .screen-content .text-container .co2-info { font-weight: 900; } } #interface .content .screen.result .result-container .content-wrapper .screen-content .text-container .co2kg-ghost { color: transparent; position: relative; } #interface .content .screen.result .result-container .content-wrapper .screen-content .text-container .co2kg-value { color: #666666; position: absolute; right: 0; top: 0; line-height: 1.15em; } #interface .content .screen.result .result-container .content-wrapper .screen-content .text-container .car-info { opacity: 0; font-size: 26px; line-height: 1; font-weight: 900; position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 80%; } #interface .content .screen.result .result-container .content-wrapper .screen-content .text-container .sharing-info { opacity: 0; font-size: 50px; line-height: 1; font-weight: 900; position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 80%; } @media all and (max-width: 1200px) { #interface .content .screen.result .result-container .content-wrapper .screen-content .text-container .co2-info { font-size: 16px; } #interface .content .screen.result .result-container .content-wrapper .screen-content .text-container .car-info { font-size: 16px; } #interface .content .screen.result .result-container .content-wrapper .screen-content .text-container .sharing-info { font-size: 24px; } } @media all and (max-width: 960px) { #interface .content .screen.result .result-container .content-wrapper .screen-content .text-container .co2-info { font-size: 13px; } #interface .content .screen.result .result-container .content-wrapper .screen-content .text-container .car-info { font-size: 13px; } #interface .content .screen.result .result-container .content-wrapper .screen-content .text-container .sharing-info { font-size: 20px; } } #interface .content .screen.result .result-container.finished .content-wrapper .screen-content .button-container { opacity: 1; -webkit-transition: 1s 1s all; -o-transition: 1s 1s all; -moz-transition: 1s 1s all; transition: 1s 1s all; } #interface .content .screen.result .result-container.finished .content-wrapper .screen-content .button-container .share-btn { -webkit-animation: pulsatingButton 2s infinite ease-in-out; -moz-animation: pulsatingButton 2s infinite ease-in-out; -o-animation: pulsatingButton 2s infinite ease-in-out; animation: pulsatingButton 2s infinite ease-in-out; -webkit-animation-delay: .3s; -moz-animation-delay: .3s; -o-animation-delay: .3s; animation-delay: .3s; } @media all and (max-width: 960px) { #interface .content .screen.result .result-container.finished .content-wrapper .screen-content .button-container { width: 96%; left: 2%; bottom: 20px; } #interface .content .screen.result .result-container.finished .content-wrapper .screen-content .button-container .btn-inline { font-size: 9px; text-align: center; } #interface .content .screen.result .result-container.finished .content-wrapper .screen-content .button-container .share-btn { padding: .7em 1.5em; text-align: center; } } #interface .content .screen.result .result-container.finished .content-wrapper .screen-content .text-container .co2-info { top: 18%; -webkit-transition: 1s all; -o-transition: 1s all; -moz-transition: 1s all; transition: 1s all; } #interface .content .screen.result .result-container.finished .content-wrapper .screen-content .text-container .car-info { opacity: 1; -webkit-transition: 1s 1s all; -o-transition: 1s 1s all; -moz-transition: 1s 1s all; transition: 1s 1s all; } #interface .content .screen.result .result-container.finished .content-wrapper .screen-content .text-container.second-transition .co2-info { opacity: 0; -webkit-transition: 1s all; -o-transition: 1s all; -moz-transition: 1s all; transition: 1s all; } #interface .content .screen.result .result-container.finished .content-wrapper .screen-content .text-container.second-transition .car-info { top: 18%; -webkit-transition: 1s all; -o-transition: 1s all; -moz-transition: 1s all; transition: 1s all; } #interface .content .screen.result .result-container.finished .content-wrapper .screen-content .text-container.second-transition .sharing-info { opacity: 1; -webkit-transition: 1s 1s all; -o-transition: 1s 1s all; -moz-transition: 1s 1s all; transition: 1s 1s all; }  #interface .content .screen#result-detail .result-container .content-wrapper { padding: 30px; height: auto; } @media all and (max-width: 960px) { #interface .content .screen#result-detail .result-container .content-wrapper { padding: 30px; } } #interface .content .screen#result-detail .result-container .content-wrapper .screen-content { position: static; color: #244863; max-width: 700px; margin: 0 auto; } #interface .content .screen#result-detail .result-container .content-wrapper .screen-content .chart-container { margin-top: 60px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #interface .content .screen#result-detail .result-container .content-wrapper .screen-content .chart-container .chart-sizer { position: relative; width: 150px; height: 150px; margin-right: 60px; } @media all and (max-width: 960px) { #interface .content .screen#result-detail .result-container .content-wrapper .screen-content .chart-container .chart-sizer { width: 100px; height: 100px; margin-right: 30px; } } #interface .content .screen#result-detail .result-container .content-wrapper .screen-content .chart-container .chart-description { text-align: left; } #interface .content .screen#result-detail .result-container .content-wrapper .screen-content .chart-container .chart-description .chart-line { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 1em; } #interface .content .screen#result-detail .result-container .content-wrapper .screen-content .chart-container .chart-description .chart-line .percent { font-weight: 900; font-size: 18px; margin-right: 1em; text-align: right; min-width: 3em; } #interface .content .screen#result-detail .result-container .content-wrapper .screen-content .chart-container .chart-description .chart-line .description { font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: #244863; font-size: 12px; line-height: 1.4; } #interface .content .screen#result-detail .result-container .content-wrapper .screen-content .chart-container .chart-description .chart-line:last-child { margin-bottom: 0; } #interface .content .screen#result-detail .result-container .content-wrapper .screen-content h3 { margin: 60px 0 30px 0; } #interface .content .screen#result-detail .result-container .content-wrapper .screen-content .steps { width: 100%; margin: auto; } #interface .content .screen#result-detail .result-container .content-wrapper .screen-content .steps li { position: relative; display: inline-block; padding: 90px 40px 0 40px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: #244863; font-size: 12px; line-height: 1.4; max-width: 200px; vertical-align: top; } #interface .content .screen#result-detail .result-container .content-wrapper .screen-content .steps li img { position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); width: 80px; } @media all and (max-width: 960px) { #interface .content .screen#result-detail .result-container .content-wrapper .screen-content .steps li { padding: 90px 20px 0 20px; } }  #interface .content .screen#result-share .result-container .content-wrapper { color: #244863; } #interface .content .screen#result-share .result-container .content-wrapper .share-result-option .selector-img-inline { height: 100px; } @media all and (max-width: 960px) { #interface .content .screen#result-share .result-container .content-wrapper .share-result-option .selector-img-inline { height: 40px; } }  @-webkit-keyframes pulsatingButton { 0% { -webkit-transform: scale(1); transform: scale(1); } 10% { -webkit-transform: scale(1.05); transform: scale(1.05); } 20% { -webkit-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scale(1.05); transform: scale(1.05); } 40%, 100% { -webkit-transform: scale(1); transform: scale(1); } }  @-moz-keyframes pulsatingButton { 0% { -moz-transform: scale(1); transform: scale(1); } 10% { -moz-transform: scale(1.05); transform: scale(1.05); } 20% { -moz-transform: scale(1); transform: scale(1); } 30% { -moz-transform: scale(1.05); transform: scale(1.05); } 40%, 100% { -moz-transform: scale(1); transform: scale(1); } }  @-o-keyframes pulsatingButton { 0% { -o-transform: scale(1); transform: scale(1); } 10% { -o-transform: scale(1.05); transform: scale(1.05); } 20% { -o-transform: scale(1); transform: scale(1); } 30% { -o-transform: scale(1.05); transform: scale(1.05); } 40%, 100% { -o-transform: scale(1); transform: scale(1); } }  @keyframes pulsatingButton { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 10% { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } 20% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } 40%, 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } }  #app { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 10; }  /* general styling */ body { overflow: hidden; } body .scene-board { position: absolute; overflow: show; width: 300vw; height: 300vh; bottom: 0; left: -100vw; } body .scene-board .scene { position: absolute; width: 100vw; height: 100vh; } body .scene-board .scene .backgrounds > div { position: absolute; left: -3vw; bottom: -3vh; width: 106vw; height: 106vh; background-repeat: no-repeat; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; background-size: 100% auto; background-position: center bottom; -webkit-transition: all 0.5s; -o-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; } body .scene-board .scene .backgrounds .front { z-index: 100; } body .scene-board .scene .backgrounds .layer1 { z-index: 80; } body .scene-board .scene .backgrounds .layer2 { z-index: 60; } body .scene-board .scene .backgrounds .layer3 { z-index: 40; } body .scene-board .scene .backgrounds .layer4 { z-index: 20; } body .scene-board .scene .backgrounds .back { left: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-position: top center; }  /* includes */ body .scene-board.moveFromUnderWater { -webkit-transition: bottom 1.4s; -o-transition: bottom 1.4s; -moz-transition: bottom 1.4s; transition: bottom 1.4s; -webkit-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); -moz-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); -o-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); } body .scene-board.moveFromUnderWater .scene.under-water .backgrounds > div:not(.back) { -webkit-transition-duration: 1s !important; -moz-transition-duration: 1s !important; -o-transition-duration: 1s !important; transition-duration: 1s !important; -webkit-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); -moz-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); -o-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); }  body .scene-board .scene.under-water { bottom: 0; left: 100vw; overflow: hidden; } body .scene-board .scene.under-water .backgrounds .front { background-image: url("../img/layer/under-water/under_water_front0423.png"); } body .scene-board .scene.under-water .backgrounds .species { opacity: 0; -webkit-transition: opacity .2s ease-in; -o-transition: opacity .2s ease-in; -moz-transition: opacity .2s ease-in; transition: opacity .2s ease-in; } body .scene-board .scene.under-water .backgrounds .species.show { opacity: 1; } body .scene-board .scene.under-water .backgrounds .layer1 { background-image: url("../img/layer/under-water/under_water_layer_10423.png"); } body .scene-board .scene.under-water .backgrounds .layer1 .b02 { position: absolute; bottom: 3vw; left: 20vw; width: 3.3vw; height: 19.7vw; } body .scene-board .scene.under-water .backgrounds .layer1 .b02 img:nth-child(1) { width: 37%; bottom: 0; left: 20%; z-index: 67; -webkit-animation-delay: 4.1s; -moz-animation-delay: 4.1s; -o-animation-delay: 4.1s; animation-delay: 4.1s; } body .scene-board .scene.under-water .backgrounds .layer1 .b02 img:nth-child(2) { width: 26%; bottom: 0; left: 50%; z-index: 66; -webkit-animation-delay: 4.6s; -moz-animation-delay: 4.6s; -o-animation-delay: 4.6s; animation-delay: 4.6s; } body .scene-board .scene.under-water .backgrounds .layer1 .b02 img:nth-child(3) { width: 43%; bottom: 0; right: 0; z-index: 65; -webkit-animation-delay: 4.3s; -moz-animation-delay: 4.3s; -o-animation-delay: 4.3s; animation-delay: 4.3s; } body .scene-board .scene.under-water .backgrounds .layer1 .b02 img:nth-child(4) { width: 36%; bottom: 0; left: 30%; z-index: 64; -webkit-animation-delay: 4.9s; -moz-animation-delay: 4.9s; -o-animation-delay: 4.9s; animation-delay: 4.9s; } body .scene-board .scene.under-water .backgrounds .layer1 .b02 img:nth-child(5) { width: 28%; bottom: 0; left: 60%; z-index: 63; -webkit-animation-delay: 5.2s; -moz-animation-delay: 5.2s; -o-animation-delay: 5.2s; animation-delay: 5.2s; } body .scene-board .scene.under-water .backgrounds .layer1 .b02 img:nth-child(6) { width: 46%; bottom: 0; left: 60%; z-index: 62; -webkit-animation-delay: 5.5s; -moz-animation-delay: 5.5s; -o-animation-delay: 5.5s; animation-delay: 5.5s; } body .scene-board .scene.under-water .backgrounds .layer1 .b02 img:nth-child(7) { width: 18%; bottom: 0; left: 60%; z-index: 61; -webkit-animation-delay: 4.7s; -moz-animation-delay: 4.7s; -o-animation-delay: 4.7s; animation-delay: 4.7s; } body .scene-board .scene.under-water .backgrounds .layer2 { background-image: url("../img/layer/under-water/under_water_layer_20423.png"); } body .scene-board .scene.under-water .backgrounds .layer2 .sg01 { position: absolute; bottom: 8vw; left: 2vw; width: 6.5vw; height: 15.6vw; } body .scene-board .scene.under-water .backgrounds .layer2 .sg01 img:nth-child(1) { height: 75%; bottom: 0; left: 0; z-index: 64; -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -o-animation-delay: .2s; animation-delay: .2s; } body .scene-board .scene.under-water .backgrounds .layer2 .sg01 img:nth-child(2) { height: 100%; bottom: 0; left: 0; z-index: 63; -webkit-animation-delay: .4s; -moz-animation-delay: .4s; -o-animation-delay: .4s; animation-delay: .4s; } body .scene-board .scene.under-water .backgrounds .layer2 .sg01 img:nth-child(3) { height: 40%; bottom: 17%; right: 0; z-index: 62; -webkit-animation-delay: 0; -moz-animation-delay: 0; -o-animation-delay: 0; animation-delay: 0; } body .scene-board .scene.under-water .backgrounds .layer2 .sg01 img:nth-child(4) { height: 61%; bottom: 15%; right: 0; z-index: 61; -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; } body .scene-board .scene.under-water .backgrounds .layer3 { background-image: url("../img/layer/under-water/under_water_layer_30423.png"); } body .scene-board .scene.under-water .backgrounds .layer3 .sg02 { position: absolute; bottom: 12.2vw; right: 9.2vw; width: 7.5vw; height: 15.6vw; } body .scene-board .scene.under-water .backgrounds .layer3 .sg02 img:nth-child(1) { height: 65%; bottom: 0; left: 0; z-index: 44; -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; -o-animation-delay: 1.5s; animation-delay: 1.5s; } body .scene-board .scene.under-water .backgrounds .layer3 .sg02 img:nth-child(2) { height: 86%; bottom: 2%; left: 0; z-index: 43; -webkit-animation-delay: 1.6s; -moz-animation-delay: 1.6s; -o-animation-delay: 1.6s; animation-delay: 1.6s; } body .scene-board .scene.under-water .backgrounds .layer3 .sg02 img:nth-child(3) { height: 79%; bottom: 21%; right: 0; z-index: 42; -webkit-animation-delay: 1.9s; -moz-animation-delay: 1.9s; -o-animation-delay: 1.9s; animation-delay: 1.9s; } body .scene-board .scene.under-water .backgrounds .layer3 .sg03 { position: absolute; bottom: 23vw; right: 5vw; width: 4.3vw; height: 18.6vw; } body .scene-board .scene.under-water .backgrounds .layer3 .sg03 img:nth-child(1) { height: 100%; bottom: 0; right: 0; z-index: 41; -webkit-animation-delay: 2.5s; -moz-animation-delay: 2.5s; -o-animation-delay: 2.5s; animation-delay: 2.5s; } body .scene-board .scene.under-water .backgrounds .layer3 .b01 { position: absolute; bottom: 13vw; left: 5vw; width: 2.7vw; height: 19.7vw; } body .scene-board .scene.under-water .backgrounds .layer3 .b01 img:nth-child(1) { width: 31%; bottom: 0; left: 20%; z-index: 50; -webkit-animation-delay: .1s; -moz-animation-delay: .1s; -o-animation-delay: .1s; animation-delay: .1s; } body .scene-board .scene.under-water .backgrounds .layer3 .b01 img:nth-child(2) { width: 21%; bottom: 0; left: 50%; z-index: 49; -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; } body .scene-board .scene.under-water .backgrounds .layer3 .b01 img:nth-child(3) { width: 36%; bottom: 0; right: 0; z-index: 48; -webkit-animation-delay: .3s; -moz-animation-delay: .3s; -o-animation-delay: .3s; animation-delay: .3s; } body .scene-board .scene.under-water .backgrounds .layer3 .b01 img:nth-child(4) { width: 25%; bottom: 0; left: 30%; z-index: 47; -webkit-animation-delay: .9s; -moz-animation-delay: .9s; -o-animation-delay: .9s; animation-delay: .9s; } body .scene-board .scene.under-water .backgrounds .layer3 .b01 img:nth-child(5) { width: 46%; bottom: 0; left: 60%; z-index: 46; -webkit-animation-delay: 1.2s; -moz-animation-delay: 1.2s; -o-animation-delay: 1.2s; animation-delay: 1.2s; } body .scene-board .scene.under-water .backgrounds .layer3 .b03 { position: absolute; bottom: 12vw; right: 12vw; width: 3.7vw; height: 19.7vw; } body .scene-board .scene.under-water .backgrounds .layer3 .b03 img:nth-child(1) { width: 40%; bottom: 0; left: 20%; z-index: 67; -webkit-animation-delay: 2.1s; -moz-animation-delay: 2.1s; -o-animation-delay: 2.1s; animation-delay: 2.1s; } body .scene-board .scene.under-water .backgrounds .layer3 .b03 img:nth-child(2) { width: 15%; bottom: 0; left: 50%; z-index: 66; -webkit-animation-delay: 1.6s; -moz-animation-delay: 1.6s; -o-animation-delay: 1.6s; animation-delay: 1.6s; } body .scene-board .scene.under-water .backgrounds .layer3 .b03 img:nth-child(3) { width: 20%; bottom: 0; left: 0; z-index: 65; -webkit-animation-delay: 1.9s; -moz-animation-delay: 1.9s; -o-animation-delay: 1.9s; animation-delay: 1.9s; } body .scene-board .scene.under-water .backgrounds .layer3 .b03 img:nth-child(4) { width: 28%; bottom: 0; left: 30%; z-index: 64; -webkit-animation-delay: 1.2s; -moz-animation-delay: 1.2s; -o-animation-delay: 1.2s; animation-delay: 1.2s; } body .scene-board .scene.under-water .backgrounds .layer3 .b03 img:nth-child(5) { width: 32%; bottom: 0; right: 20%; z-index: 63; -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; -o-animation-delay: 1.5s; animation-delay: 1.5s; } body .scene-board .scene.under-water .backgrounds .layer3 .b03 img:nth-child(6) { width: 13%; bottom: 0; left: 60%; z-index: 62; -webkit-animation-delay: 1.7s; -moz-animation-delay: 1.7s; -o-animation-delay: 1.7s; animation-delay: 1.7s; } body .scene-board .scene.under-water .backgrounds .layer4 { background-image: url("../img/layer/under-water/under_water_layer_40423.png"); } body .scene-board .scene.under-water .backgrounds .back { background-image: url("../img/layer/under-water/under_water_back0423-11.jpg"); } body .scene-board .scene.under-water .backgrounds .seagrass img { position: absolute; -webkit-transform-origin: bottom center; -moz-transform-origin: bottom center; -ms-transform-origin: bottom center; -o-transform-origin: bottom center; transform-origin: bottom center; -webkit-animation-name: seagrass; -moz-animation-name: seagrass; -o-animation-name: seagrass; animation-name: seagrass; -webkit-animation-duration: 10s; -moz-animation-duration: 10s; -o-animation-duration: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; -moz-animation-direction: alternate; -o-animation-direction: alternate; animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } body .scene-board .scene.under-water .backgrounds .bubbles img { position: absolute; -webkit-transform-origin: bottom center; -moz-transform-origin: bottom center; -ms-transform-origin: bottom center; -o-transform-origin: bottom center; transform-origin: bottom center; -webkit-animation-name: bubbles; -moz-animation-name: bubbles; -o-animation-name: bubbles; animation-name: bubbles; -webkit-animation-duration: 8s; -moz-animation-duration: 8s; -o-animation-duration: 8s; animation-duration: 8s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: forwards; -moz-animation-direction: forwards; -o-animation-direction: forwards; animation-direction: forwards; -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; }  @-webkit-keyframes seagrass { from, to { -webkit-transform: rotate(0); transform: rotate(0); } 30% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 60% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 80% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } }  @-moz-keyframes seagrass { from, to { -moz-transform: rotate(0); transform: rotate(0); } 30% { -moz-transform: rotate(10deg); transform: rotate(10deg); } 60% { -moz-transform: rotate(2deg); transform: rotate(2deg); } 80% { -moz-transform: rotate(-2deg); transform: rotate(-2deg); } }  @-o-keyframes seagrass { from, to { -o-transform: rotate(0); transform: rotate(0); } 30% { -o-transform: rotate(10deg); transform: rotate(10deg); } 60% { -o-transform: rotate(2deg); transform: rotate(2deg); } 80% { -o-transform: rotate(-2deg); transform: rotate(-2deg); } }  @keyframes seagrass { from, to { -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 30% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); } 60% { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); transform: rotate(2deg); } 80% { -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -o-transform: rotate(-2deg); transform: rotate(-2deg); } }  @-webkit-keyframes bubbles { from { opacity: 1; bottom: 0; -webkit-transform: none; transform: none; } 15% { opacity: 1; } 30% { opacity: 0; -webkit-transform: translateY(-19.7vw); transform: translateY(-19.7vw); } to { opacity: 0; bottom: 0; -webkit-transform: none; transform: none; } }  @-moz-keyframes bubbles { from { opacity: 1; bottom: 0; -moz-transform: none; transform: none; } 15% { opacity: 1; } 30% { opacity: 0; -moz-transform: translateY(-19.7vw); transform: translateY(-19.7vw); } to { opacity: 0; bottom: 0; -moz-transform: none; transform: none; } }  @-o-keyframes bubbles { from { opacity: 1; bottom: 0; -o-transform: none; transform: none; } 15% { opacity: 1; } 30% { opacity: 0; -o-transform: translateY(-19.7vw); transform: translateY(-19.7vw); } to { opacity: 0; bottom: 0; -o-transform: none; transform: none; } }  @keyframes bubbles { from { opacity: 1; bottom: 0; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } 15% { opacity: 1; } 30% { opacity: 0; -webkit-transform: translateY(-19.7vw); -moz-transform: translateY(-19.7vw); -o-transform: translateY(-19.7vw); transform: translateY(-19.7vw); } to { opacity: 0; bottom: 0; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } }  body .scene-board.moveToSurface { -webkit-transition: bottom 1.4s; -o-transition: bottom 1.4s; -moz-transition: bottom 1.4s; transition: bottom 1.4s; -webkit-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); -moz-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); -o-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); } body .scene-board.moveToSurface .scene.surface { overflow: visible; } body .scene-board.moveToSurface .scene.surface .backgrounds > div:not(.back) { -webkit-transition-duration: 1s !important; -moz-transition-duration: 1s !important; -o-transition-duration: 1s !important; transition-duration: 1s !important; -webkit-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); -moz-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); -o-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); -webkit-transition-delay: .5s; -moz-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; }  body .scene-board .scene.surface { bottom: 100vh; left: 100vw; overflow: visible; } body .scene-board .scene.surface.background-top-alignment .backgrounds .back { background-position: top center; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } body .scene-board .scene.surface .backgrounds .front { z-index: 21; left: -109vw; width: 318vw; height: 100vh; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; background-size: 100% auto; background-position: bottom 6vw left; background-image: url("../img/layer/surface/surface-ocean.png"); -webkit-animation-name: ocean; -moz-animation-name: ocean; -o-animation-name: ocean; animation-name: ocean; -webkit-animation-duration: 8s; -moz-animation-duration: 8s; -o-animation-duration: 8s; animation-duration: 8s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } body .scene-board .scene.surface .backgrounds .layer1 .shadow { z-index: 76; position: absolute; bottom: 8.3vw; left: -4.5vw; width: 57.4vw; } body .scene-board .scene.surface .backgrounds .layer1 .ship { z-index: 77; position: absolute; bottom: 12vw; left: 10vw; width: 29vw; -webkit-animation-name: ship1; -moz-animation-name: ship1; -o-animation-name: ship1; animation-name: ship1; -webkit-animation-duration: 8s; -moz-animation-duration: 8s; -o-animation-duration: 8s; animation-duration: 8s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } body .scene-board .scene.surface .backgrounds .layer1 .wave { z-index: 78; position: absolute; bottom: 10.4vw; left: -8vw; width: 67.9vw; -webkit-animation-name: wave1; -moz-animation-name: wave1; -o-animation-name: wave1; animation-name: wave1; -webkit-animation-duration: 4s; -moz-animation-duration: 4s; -o-animation-duration: 4s; animation-duration: 4s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } body .scene-board .scene.surface .backgrounds .layer2 .shadow { z-index: 56; position: absolute; bottom: 11vw; right: -15vw; width: 66.8vw; } body .scene-board .scene.surface .backgrounds .layer2 .ship { z-index: 57; position: absolute; bottom: 16vw; right: 8vw; width: 32vw; -webkit-animation-name: ship2; -moz-animation-name: ship2; -o-animation-name: ship2; animation-name: ship2; -webkit-animation-duration: 8s; -moz-animation-duration: 8s; -o-animation-duration: 8s; animation-duration: 8s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } body .scene-board .scene.surface .backgrounds .layer2 .wave { z-index: 58; position: absolute; bottom: 13vw; right: -14.5vw; width: 75.6vw; -webkit-animation-name: wave2; -moz-animation-name: wave2; -o-animation-name: wave2; animation-name: wave2; -webkit-animation-duration: 4s; -moz-animation-duration: 4s; -o-animation-duration: 4s; animation-duration: 4s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } body .scene-board .scene.surface .backgrounds .layer3 .birds01 { position: absolute; top: 7vw; right: 9vw; width: 24vw; -webkit-animation-name: birds1; -moz-animation-name: birds1; -o-animation-name: birds1; animation-name: birds1; -webkit-animation-duration: 3s; -moz-animation-duration: 3s; -o-animation-duration: 3s; animation-duration: 3s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } body .scene-board .scene.surface .backgrounds .layer3 .birds02 { position: absolute; top: 4vw; right: 12vw; width: 18vw; -webkit-animation-name: birds2; -moz-animation-name: birds2; -o-animation-name: birds2; animation-name: birds2; -webkit-animation-duration: 4s; -moz-animation-duration: 4s; -o-animation-duration: 4s; animation-duration: 4s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } body .scene-board .scene.surface .backgrounds .layer3 .wave { position: absolute; bottom: 20vw; left: -2vw; width: 81vw; -webkit-animation-name: wavebg; -moz-animation-name: wavebg; -o-animation-name: wavebg; animation-name: wavebg; -webkit-animation-duration: 3s; -moz-animation-duration: 3s; -o-animation-duration: 3s; animation-duration: 3s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } body .scene-board .scene.surface .backgrounds .layer4 { z-index: 19; left: -100vw; width: 300vw; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; background-size: 100% auto; background-position: bottom 25vw center; background-image: url("../img/layer/surface/mountains.png"); } body .scene-board .scene.surface .backgrounds .layer4 .clouds01 { position: absolute; top: 4vw; width: 24vw; -webkit-animation-name: cloud; -moz-animation-name: cloud; -o-animation-name: cloud; animation-name: cloud; -webkit-animation-duration: 360s; -moz-animation-duration: 360s; -o-animation-duration: 360s; animation-duration: 360s; -webkit-animation-delay: -148s; -moz-animation-delay: -148s; -o-animation-delay: -148s; animation-delay: -148s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-direction: normal; -moz-animation-direction: normal; -o-animation-direction: normal; animation-direction: normal; } body .scene-board .scene.surface .backgrounds .layer4 .clouds02 { position: absolute; top: 12vw; width: 18vw; -webkit-animation-name: cloud; -moz-animation-name: cloud; -o-animation-name: cloud; animation-name: cloud; -webkit-animation-duration: 360s; -moz-animation-duration: 360s; -o-animation-duration: 360s; animation-duration: 360s; -webkit-animation-delay: -184s; -moz-animation-delay: -184s; -o-animation-delay: -184s; animation-delay: -184s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-direction: normal; -moz-animation-direction: normal; -o-animation-direction: normal; animation-direction: normal; } body .scene-board .scene.surface .backgrounds .layer4 .clouds03 { position: absolute; top: 2vw; width: 20vw; -webkit-animation-name: cloud; -moz-animation-name: cloud; -o-animation-name: cloud; animation-name: cloud; -webkit-animation-duration: 360s; -moz-animation-duration: 360s; -o-animation-duration: 360s; animation-duration: 360s; -webkit-animation-delay: -84s; -moz-animation-delay: -84s; -o-animation-delay: -84s; animation-delay: -84s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-direction: normal; -moz-animation-direction: normal; -o-animation-direction: normal; animation-direction: normal; } body .scene-board .scene.surface .backgrounds .layer4 .clouds04 { position: absolute; top: 4vw; width: 22vw; -webkit-animation-name: cloud; -moz-animation-name: cloud; -o-animation-name: cloud; animation-name: cloud; -webkit-animation-duration: 360s; -moz-animation-duration: 360s; -o-animation-duration: 360s; animation-duration: 360s; -webkit-animation-delay: -216s; -moz-animation-delay: -216s; -o-animation-delay: -216s; animation-delay: -216s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-direction: normal; -moz-animation-direction: normal; -o-animation-direction: normal; animation-direction: normal; } body .scene-board .scene.surface .backgrounds .layer4 .clouds05 { position: absolute; top: 6vw; width: 16vw; -webkit-animation-name: cloud; -moz-animation-name: cloud; -o-animation-name: cloud; animation-name: cloud; -webkit-animation-duration: 360s; -moz-animation-duration: 360s; -o-animation-duration: 360s; animation-duration: 360s; -webkit-animation-delay: -244s; -moz-animation-delay: -244s; -o-animation-delay: -244s; animation-delay: -244s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-direction: normal; -moz-animation-direction: normal; -o-animation-direction: normal; animation-direction: normal; } body .scene-board .scene.surface .backgrounds .back { width: 300vw; height: 100vh; left: -100vw; background-position: bottom center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-image: url("../img/layer/surface/surface-back.jpg"); }  body.supboard-shrimp.catch-aquaculture_cert .scene-board .scene.surface .backgrounds .layer1 .mangrove.certified, body.supboard-shrimp.catch-aquaculture_cert .scene-board .scene.surface .backgrounds .layer2 .mangrove.certified { display: block; }  body.supboard-shrimp.catch-aquaculture_cert .scene-board .scene.surface .backgrounds .layer1 .mangrove.uncertified, body.supboard-shrimp.catch-aquaculture_cert .scene-board .scene.surface .backgrounds .layer2 .mangrove.uncertified { display: none; }  body.supboard-shrimp.catch-aquaculture_uncert .scene-board .scene.surface .backgrounds .layer1 .mangrove.uncertified, body.supboard-shrimp.catch-aquaculture_uncert .scene-board .scene.surface .backgrounds .layer2 .mangrove.uncertified { display: block; }  body.supboard-shrimp.catch-aquaculture_uncert .scene-board .scene.surface .backgrounds .layer1 .mangrove.certified, body.supboard-shrimp.catch-aquaculture_uncert .scene-board .scene.surface .backgrounds .layer2 .mangrove.certified { display: none; }  body.supboard-shrimp.catch-aquaculture_cert .scene-board .scene.surface .backgrounds .layer1 .ship, body.supboard-shrimp.catch-aquaculture_cert .scene-board .scene.surface .backgrounds .layer1 .wave, body.supboard-shrimp.catch-aquaculture_cert .scene-board .scene.surface .backgrounds .layer1 .shadow, body.supboard-shrimp.catch-aquaculture_cert .scene-board .scene.surface .backgrounds .layer2 .ship, body.supboard-shrimp.catch-aquaculture_cert .scene-board .scene.surface .backgrounds .layer2 .wave, body.supboard-shrimp.catch-aquaculture_cert .scene-board .scene.surface .backgrounds .layer2 .shadow, body.supboard-shrimp.catch-aquaculture_uncert .scene-board .scene.surface .backgrounds .layer1 .ship, body.supboard-shrimp.catch-aquaculture_uncert .scene-board .scene.surface .backgrounds .layer1 .wave, body.supboard-shrimp.catch-aquaculture_uncert .scene-board .scene.surface .backgrounds .layer1 .shadow, body.supboard-shrimp.catch-aquaculture_uncert .scene-board .scene.surface .backgrounds .layer2 .ship, body.supboard-shrimp.catch-aquaculture_uncert .scene-board .scene.surface .backgrounds .layer2 .wave, body.supboard-shrimp.catch-aquaculture_uncert .scene-board .scene.surface .backgrounds .layer2 .shadow { display: none; }  body.supboard-shrimp.catch-aquaculture_cert .scene-board .scene.surface .backgrounds .layer1 .mangrove, body.supboard-shrimp.catch-aquaculture_uncert .scene-board .scene.surface .backgrounds .layer1 .mangrove { position: absolute; } body.supboard-shrimp.catch-aquaculture_cert .scene-board .scene.surface .backgrounds .layer1 .mangrove.left, body.supboard-shrimp.catch-aquaculture_uncert .scene-board .scene.surface .backgrounds .layer1 .mangrove.left { left: 11vw; bottom: 14vw; width: 36vw; height: auto; } body.supboard-shrimp.catch-aquaculture_cert .scene-board .scene.surface .backgrounds .layer1 .mangrove.right, body.supboard-shrimp.catch-aquaculture_uncert .scene-board .scene.surface .backgrounds .layer1 .mangrove.right { right: 13vw; bottom: 25vh; width: auto; height: 66vh; }  body.supboard-shrimp.catch-aquaculture_cert .scene-board .scene.surface .backgrounds .layer2 .mangrove, body.supboard-shrimp.catch-aquaculture_uncert .scene-board .scene.surface .backgrounds .layer2 .mangrove { position: absolute; } body.supboard-shrimp.catch-aquaculture_cert .scene-board .scene.surface .backgrounds .layer2 .mangrove.left, body.supboard-shrimp.catch-aquaculture_uncert .scene-board .scene.surface .backgrounds .layer2 .mangrove.left { left: 7vw; bottom: 16vw; width: auto; height: 70vh; } body.supboard-shrimp.catch-aquaculture_cert .scene-board .scene.surface .backgrounds .layer2 .mangrove.right, body.supboard-shrimp.catch-aquaculture_uncert .scene-board .scene.surface .backgrounds .layer2 .mangrove.right { right: 10vw; bottom: 15vw; width: auto; height: 71vh; }  @-webkit-keyframes ocean { from, to { background-position: bottom 6vw left; } 40% { background-position: bottom 6.5vw left -3vw; } 70% { background-position: bottom 5.5vw left 2vw; } }  @-moz-keyframes ocean { from, to { background-position: bottom 6vw left; } 40% { background-position: bottom 6.5vw left -3vw; } 70% { background-position: bottom 5.5vw left 2vw; } }  @-o-keyframes ocean { from, to { background-position: bottom 6vw left; } 40% { background-position: bottom 6.5vw left -3vw; } 70% { background-position: bottom 5.5vw left 2vw; } }  @keyframes ocean { from, to { background-position: bottom 6vw left; } 40% { background-position: bottom 6.5vw left -3vw; } 70% { background-position: bottom 5.5vw left 2vw; } }  @-webkit-keyframes ship1 { from, to { -webkit-transform: rotate(0); transform: rotate(0); } 40% { -webkit-transform: rotate(-2.5deg); transform: rotate(-2.5deg); } 70% { -webkit-transform: rotate(2.5deg); transform: rotate(2.5deg); } }  @-moz-keyframes ship1 { from, to { -moz-transform: rotate(0); transform: rotate(0); } 40% { -moz-transform: rotate(-2.5deg); transform: rotate(-2.5deg); } 70% { -moz-transform: rotate(2.5deg); transform: rotate(2.5deg); } }  @-o-keyframes ship1 { from, to { -o-transform: rotate(0); transform: rotate(0); } 40% { -o-transform: rotate(-2.5deg); transform: rotate(-2.5deg); } 70% { -o-transform: rotate(2.5deg); transform: rotate(2.5deg); } }  @keyframes ship1 { from, to { -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 40% { -webkit-transform: rotate(-2.5deg); -moz-transform: rotate(-2.5deg); -o-transform: rotate(-2.5deg); transform: rotate(-2.5deg); } 70% { -webkit-transform: rotate(2.5deg); -moz-transform: rotate(2.5deg); -o-transform: rotate(2.5deg); transform: rotate(2.5deg); } }  @-webkit-keyframes ship2 { from, to { -webkit-transform: rotate(0); transform: rotate(0); } 40% { -webkit-transform: rotate(1.5deg); transform: rotate(1.5deg); } 70% { -webkit-transform: rotate(-1.5deg); transform: rotate(-1.5deg); } }  @-moz-keyframes ship2 { from, to { -moz-transform: rotate(0); transform: rotate(0); } 40% { -moz-transform: rotate(1.5deg); transform: rotate(1.5deg); } 70% { -moz-transform: rotate(-1.5deg); transform: rotate(-1.5deg); } }  @-o-keyframes ship2 { from, to { -o-transform: rotate(0); transform: rotate(0); } 40% { -o-transform: rotate(1.5deg); transform: rotate(1.5deg); } 70% { -o-transform: rotate(-1.5deg); transform: rotate(-1.5deg); } }  @keyframes ship2 { from, to { -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 40% { -webkit-transform: rotate(1.5deg); -moz-transform: rotate(1.5deg); -o-transform: rotate(1.5deg); transform: rotate(1.5deg); } 70% { -webkit-transform: rotate(-1.5deg); -moz-transform: rotate(-1.5deg); -o-transform: rotate(-1.5deg); transform: rotate(-1.5deg); } }  @-webkit-keyframes wave1 { from, to { left: -8vw; } 30% { left: -7vw; } 70% { left: -9vw; } }  @-moz-keyframes wave1 { from, to { left: -8vw; } 30% { left: -7vw; } 70% { left: -9vw; } }  @-o-keyframes wave1 { from, to { left: -8vw; } 30% { left: -7vw; } 70% { left: -9vw; } }  @keyframes wave1 { from, to { left: -8vw; } 30% { left: -7vw; } 70% { left: -9vw; } }  @-webkit-keyframes wave2 { from, to { right: -14.5vw; } 30% { right: -15.5vw; } 70% { right: -13.5vw; } }  @-moz-keyframes wave2 { from, to { right: -14.5vw; } 30% { right: -15.5vw; } 70% { right: -13.5vw; } }  @-o-keyframes wave2 { from, to { right: -14.5vw; } 30% { right: -15.5vw; } 70% { right: -13.5vw; } }  @keyframes wave2 { from, to { right: -14.5vw; } 30% { right: -15.5vw; } 70% { right: -13.5vw; } }  @-webkit-keyframes birds1 { from, to { top: 7vw; } 40% { top: 6.5vw; } }  @-moz-keyframes birds1 { from, to { top: 7vw; } 40% { top: 6.5vw; } }  @-o-keyframes birds1 { from, to { top: 7vw; } 40% { top: 6.5vw; } }  @keyframes birds1 { from, to { top: 7vw; } 40% { top: 6.5vw; } }  @-webkit-keyframes birds2 { from, to { top: 6vw; } 60% { top: 6.5vw; } }  @-moz-keyframes birds2 { from, to { top: 6vw; } 60% { top: 6.5vw; } }  @-o-keyframes birds2 { from, to { top: 6vw; } 60% { top: 6.5vw; } }  @keyframes birds2 { from, to { top: 6vw; } 60% { top: 6.5vw; } }  @-webkit-keyframes wavebg { from, to { left: -2vw; } 30% { left: -3vw; } 70% { left: -1vw; } }  @-moz-keyframes wavebg { from, to { left: -2vw; } 30% { left: -3vw; } 70% { left: -1vw; } }  @-o-keyframes wavebg { from, to { left: -2vw; } 30% { left: -3vw; } 70% { left: -1vw; } }  @keyframes wavebg { from, to { left: -2vw; } 30% { left: -3vw; } 70% { left: -1vw; } }  @-webkit-keyframes cloud { from { left: -30vw; } to { left: 310vw; } }  @-moz-keyframes cloud { from { left: -30vw; } to { left: 310vw; } }  @-o-keyframes cloud { from { left: -30vw; } to { left: 310vw; } }  @keyframes cloud { from { left: -30vw; } to { left: 310vw; } }  body .scene-board.moveToSky { -webkit-transition: bottom 1.4s; -o-transition: bottom 1.4s; -moz-transition: bottom 1.4s; transition: bottom 1.4s; -webkit-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); -moz-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); -o-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); } body .scene-board.moveToSky .scene.sky { overflow: visible; } body .scene-board.moveToSky .scene.sky .backgrounds > div:not(.back) { -webkit-transition-duration: 1s !important; -moz-transition-duration: 1s !important; -o-transition-duration: 1s !important; transition-duration: 1s !important; -webkit-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); -moz-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); -o-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); -webkit-transition-delay: .5s; -moz-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; } body .scene-board.moveToSky .scene.sky .backgrounds .front { -webkit-animation-name: cloud1opacity; -moz-animation-name: cloud1opacity; -o-animation-name: cloud1opacity; animation-name: cloud1opacity; -webkit-animation-duration: .4s; -moz-animation-duration: .4s; -o-animation-duration: .4s; animation-duration: .4s; -webkit-animation-delay: .5s; -moz-animation-delay: .5s; -o-animation-delay: .5s; animation-delay: .5s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; }  body .scene-board .scene.sky { top: 0; left: 100vw; overflow: hidden; } body .scene-board .scene.sky .backgrounds .front { -webkit-background-size: 32% auto; -moz-background-size: 32% auto; background-size: 32% auto; background-position: top 24vw right 9vw; background-image: url("../img/layer/sky/sky_cloud_02.png"); -webkit-animation-name: cloud1; -moz-animation-name: cloud1; -o-animation-name: cloud1; animation-name: cloud1; -webkit-animation-duration: 6s; -moz-animation-duration: 6s; -o-animation-duration: 6s; animation-duration: 6s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } body .scene-board .scene.sky .backgrounds .layer2 { -webkit-background-size: 63% auto; -moz-background-size: 63% auto; background-size: 63% auto; background-position: top 16vw center; background-image: url("../img/layer/sky/sky_plane.png"); -webkit-animation-name: plane; -moz-animation-name: plane; -o-animation-name: plane; animation-name: plane; -webkit-animation-duration: 7s; -moz-animation-duration: 7s; -o-animation-duration: 7s; animation-duration: 7s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } body .scene-board .scene.sky .backgrounds .layer4 { -webkit-background-size: 43% auto; -moz-background-size: 43% auto; background-size: 43% auto; background-position: top 9vw left 7vw; background-image: url("../img/layer/sky/sky_cloud_01.png"); -webkit-animation-name: cloud2; -moz-animation-name: cloud2; -o-animation-name: cloud2; animation-name: cloud2; -webkit-animation-duration: 8s; -moz-animation-duration: 8s; -o-animation-duration: 8s; animation-duration: 8s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } body .scene-board .scene.sky .backgrounds .back { background-position: bottom center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-image: url("../img/layer/sky/sky_back.png"); }  body.transport-animation-out .scene-board .scene.sky .backgrounds .layer2 { -webkit-animation: plane-out 2s ease-in-out forwards; -moz-animation: plane-out 2s ease-in-out forwards; -o-animation: plane-out 2s ease-in-out forwards; animation: plane-out 2s ease-in-out forwards; }  @-webkit-keyframes plane-out { to { -webkit-transform: translateX(-100vw); transform: translateX(-100vw); } }  @-moz-keyframes plane-out { to { -moz-transform: translateX(-100vw); transform: translateX(-100vw); } }  @-o-keyframes plane-out { to { -o-transform: translateX(-100vw); transform: translateX(-100vw); } }  @keyframes plane-out { to { -webkit-transform: translateX(-100vw); -moz-transform: translateX(-100vw); -o-transform: translateX(-100vw); transform: translateX(-100vw); } }  @-webkit-keyframes cloud1 { from, to { background-position: top 24vw right 9vw; } 40% { background-position: top 22vw right 9vw; } 70% { background-position: top 25vw right 9vw; } }  @-moz-keyframes cloud1 { from, to { background-position: top 24vw right 9vw; } 40% { background-position: top 22vw right 9vw; } 70% { background-position: top 25vw right 9vw; } }  @-o-keyframes cloud1 { from, to { background-position: top 24vw right 9vw; } 40% { background-position: top 22vw right 9vw; } 70% { background-position: top 25vw right 9vw; } }  @keyframes cloud1 { from, to { background-position: top 24vw right 9vw; } 40% { background-position: top 22vw right 9vw; } 70% { background-position: top 25vw right 9vw; } }  @-webkit-keyframes cloud1opacity { from { opacity: 0; } to { opacity: 1; } }  @-moz-keyframes cloud1opacity { from { opacity: 0; } to { opacity: 1; } }  @-o-keyframes cloud1opacity { from { opacity: 0; } to { opacity: 1; } }  @keyframes cloud1opacity { from { opacity: 0; } to { opacity: 1; } }  @-webkit-keyframes cloud2 { from, to { background-position: top 9vw left 7vw; } 50% { background-position: top 7vw left 7vw; } }  @-moz-keyframes cloud2 { from, to { background-position: top 9vw left 7vw; } 50% { background-position: top 7vw left 7vw; } }  @-o-keyframes cloud2 { from, to { background-position: top 9vw left 7vw; } 50% { background-position: top 7vw left 7vw; } }  @keyframes cloud2 { from, to { background-position: top 9vw left 7vw; } 50% { background-position: top 7vw left 7vw; } }  @-webkit-keyframes plane { from, to { background-position: top 16vw center; } 30% { background-position: top 17vw center; } 70% { background-position: top 15vw center; } }  @-moz-keyframes plane { from, to { background-position: top 16vw center; } 30% { background-position: top 17vw center; } 70% { background-position: top 15vw center; } }  @-o-keyframes plane { from, to { background-position: top 16vw center; } 30% { background-position: top 17vw center; } 70% { background-position: top 15vw center; } }  @keyframes plane { from, to { background-position: top 16vw center; } 30% { background-position: top 17vw center; } 70% { background-position: top 15vw center; } }  body .scene-board.moveToSea { -webkit-transition: bottom 1.4s, left 1.4s; -o-transition: bottom 1.4s, left 1.4s; -moz-transition: bottom 1.4s, left 1.4s; transition: bottom 1.4s, left 1.4s; -webkit-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); -moz-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); -o-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); } body .scene-board.moveToSea .scene.sea { overflow: visible; } body .scene-board.moveToSea .scene.sea .backgrounds > div:not(.back) { -webkit-transition-duration: 1s !important; -moz-transition-duration: 1s !important; -o-transition-duration: 1s !important; transition-duration: 1s !important; -webkit-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); -moz-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); -o-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); -webkit-transition-delay: .5s; -moz-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; }  body .scene-board .scene.sea { top: 100vh; left: 0; overflow: visible; } body .scene-board .scene.sea .backgrounds .layer1 .shadow { z-index: 76; position: absolute; bottom: 13vw; left: 6vw; width: 86vw; } body .scene-board .scene.sea .backgrounds .layer1 .ship { z-index: 77; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; -webkit-background-size: 67.5% auto; -moz-background-size: 67.5% auto; background-size: 67.5% auto; background-position: bottom 12vw left 11vw; background-image: url("../img/layer/sea/sea_ship_layer_01.png"); background-repeat: no-repeat; -webkit-animation-name: ship3; -moz-animation-name: ship3; -o-animation-name: ship3; animation-name: ship3; -webkit-animation-duration: 8s; -moz-animation-duration: 8s; -o-animation-duration: 8s; animation-duration: 8s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } body .scene-board .scene.sea .backgrounds .layer1 .wave { z-index: 78; position: absolute; bottom: 9.3vw; left: 4vw; width: 87vw; -webkit-animation-name: wave3; -moz-animation-name: wave3; -o-animation-name: wave3; animation-name: wave3; -webkit-animation-duration: 4s; -moz-animation-duration: 4s; -o-animation-duration: 4s; animation-duration: 4s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } body .scene-board .scene.sea .backgrounds .layer2 .ship { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; -webkit-background-size: 21.6% auto; -moz-background-size: 21.6% auto; background-size: 21.6% auto; background-position: bottom 25vw left 45vw; background-image: url("../img/layer/sea/sea_ship_layer_02.png"); background-repeat: no-repeat; -webkit-animation-name: ship3; -moz-animation-name: ship3; -o-animation-name: ship3; animation-name: ship3; -webkit-animation-duration: 8s; -moz-animation-duration: 8s; -o-animation-duration: 8s; animation-duration: 8s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } body .scene-board .scene.sea .backgrounds .layer3 .ship { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; -webkit-background-size: 18% auto; -moz-background-size: 18% auto; background-size: 18% auto; background-position: bottom 24vw left 57vw; background-image: url("../img/layer/sea/sea_ship_layer_03.png"); background-repeat: no-repeat; -webkit-animation-name: ship3; -moz-animation-name: ship3; -o-animation-name: ship3; animation-name: ship3; -webkit-animation-duration: 8s; -moz-animation-duration: 8s; -o-animation-duration: 8s; animation-duration: 8s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } body .scene-board .scene.sea .backgrounds .layer3 .ship .hook { position: absolute; bottom: 40.5vw; left: 62.1vw; width: 1.08vw; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -ms-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg); -webkit-animation-name: hook; -moz-animation-name: hook; -o-animation-name: hook; animation-name: hook; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-transform-origin: center top; -moz-transform-origin: center top; -ms-transform-origin: center top; -o-transform-origin: center top; transform-origin: center top; }  body.transport-animation-out .scene-board .scene.sea .backgrounds .layer1 .ship, body.transport-animation-out .scene-board .scene.sea .backgrounds .layer1 .shadow, body.transport-animation-out .scene-board .scene.sea .backgrounds .layer1 .wave, body.transport-animation-out .scene-board .scene.sea .backgrounds .layer2 .ship, body.transport-animation-out .scene-board .scene.sea .backgrounds .layer2 .shadow, body.transport-animation-out .scene-board .scene.sea .backgrounds .layer2 .wave, body.transport-animation-out .scene-board .scene.sea .backgrounds .layer3 .ship, body.transport-animation-out .scene-board .scene.sea .backgrounds .layer3 .shadow, body.transport-animation-out .scene-board .scene.sea .backgrounds .layer3 .wave, body.transport-animation-out .scene-board .scene.sea .backgrounds .layer4 .ship, body.transport-animation-out .scene-board .scene.sea .backgrounds .layer4 .shadow, body.transport-animation-out .scene-board .scene.sea .backgrounds .layer4 .wave { -webkit-animation: ship-out 8s ease-in-out forwards; -moz-animation: ship-out 8s ease-in-out forwards; -o-animation: ship-out 8s ease-in-out forwards; animation: ship-out 8s ease-in-out forwards; }  @-webkit-keyframes ship-out { to { -webkit-transform: translateX(-100vw); transform: translateX(-100vw); } }  @-moz-keyframes ship-out { to { -moz-transform: translateX(-100vw); transform: translateX(-100vw); } }  @-o-keyframes ship-out { to { -o-transform: translateX(-100vw); transform: translateX(-100vw); } }  @keyframes ship-out { to { -webkit-transform: translateX(-100vw); -moz-transform: translateX(-100vw); -o-transform: translateX(-100vw); transform: translateX(-100vw); } }  @-webkit-keyframes ship3 { from, to { -webkit-transform: rotate(0); transform: rotate(0); } 40% { -webkit-transform: rotate(-1.5deg); transform: rotate(-1.5deg); } 70% { -webkit-transform: rotate(1.5deg); transform: rotate(1.5deg); } }  @-moz-keyframes ship3 { from, to { -moz-transform: rotate(0); transform: rotate(0); } 40% { -moz-transform: rotate(-1.5deg); transform: rotate(-1.5deg); } 70% { -moz-transform: rotate(1.5deg); transform: rotate(1.5deg); } }  @-o-keyframes ship3 { from, to { -o-transform: rotate(0); transform: rotate(0); } 40% { -o-transform: rotate(-1.5deg); transform: rotate(-1.5deg); } 70% { -o-transform: rotate(1.5deg); transform: rotate(1.5deg); } }  @keyframes ship3 { from, to { -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 40% { -webkit-transform: rotate(-1.5deg); -moz-transform: rotate(-1.5deg); -o-transform: rotate(-1.5deg); transform: rotate(-1.5deg); } 70% { -webkit-transform: rotate(1.5deg); -moz-transform: rotate(1.5deg); -o-transform: rotate(1.5deg); transform: rotate(1.5deg); } }  @-webkit-keyframes wave3 { from, to { left: 2vw; } 30% { left: 1.5vw; } 70% { left: 3.5vw; } }  @-moz-keyframes wave3 { from, to { left: 2vw; } 30% { left: 1.5vw; } 70% { left: 3.5vw; } }  @-o-keyframes wave3 { from, to { left: 2vw; } 30% { left: 1.5vw; } 70% { left: 3.5vw; } }  @keyframes wave3 { from, to { left: 2vw; } 30% { left: 1.5vw; } 70% { left: 3.5vw; } }  @-webkit-keyframes hook { from, to { -webkit-transform: rotate(-3deg); transform: rotate(-3deg); } 50% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } }  @-moz-keyframes hook { from, to { -moz-transform: rotate(-3deg); transform: rotate(-3deg); } 50% { -moz-transform: rotate(3deg); transform: rotate(3deg); } }  @-o-keyframes hook { from, to { -o-transform: rotate(-3deg); transform: rotate(-3deg); } 50% { -o-transform: rotate(3deg); transform: rotate(3deg); } }  @keyframes hook { from, to { -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg); } 50% { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg); } }  body .scene-board.moveToRoad { -webkit-transition: bottom 1.4s, left 1.4s; -o-transition: bottom 1.4s, left 1.4s; -moz-transition: bottom 1.4s, left 1.4s; transition: bottom 1.4s, left 1.4s; -webkit-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); -moz-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); -o-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); } body .scene-board.moveToRoad .scene.road { overflow: visible; } body .scene-board.moveToRoad .scene.road .backgrounds > div:not(.back) { -webkit-transition-duration: 1s !important; -moz-transition-duration: 1s !important; -o-transition-duration: 1s !important; transition-duration: 1s !important; -webkit-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); -moz-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); -o-transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); transition-timing-function: cubic-bezier(0.42, -0.03, 0.56, 0.78); -webkit-transition-delay: .5s; -moz-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; }  body .scene-board .scene.road { top: 100vh; left: 200vw; overflow: visible; } body .scene-board .scene.road .backgrounds .layer1 .dock { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; -webkit-background-size: 60% auto; -moz-background-size: 60% auto; background-size: 60% auto; background-position: bottom 12vw left 15vw; background-image: url("../img/layer/road/dock.png"); background-repeat: no-repeat; } body .scene-board .scene.road .backgrounds .layer2 .cliff { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; -webkit-background-size: 53% auto; -moz-background-size: 53% auto; background-size: 53% auto; background-position: bottom 10.4vw right 0vw; background-image: url("../img/layer/road/land_front.png"); background-repeat: no-repeat; } body .scene-board .scene.road .backgrounds .layer2 .cliff .wave { position: absolute; bottom: 11.2vw; right: 0; width: 49vw; -webkit-animation-name: wave_road; -moz-animation-name: wave_road; -o-animation-name: wave_road; animation-name: wave_road; -webkit-animation-duration: 4s; -moz-animation-duration: 4s; -o-animation-duration: 4s; animation-duration: 4s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } body .scene-board .scene.road .backgrounds .layer3 .wave-back { position: absolute; bottom: 22.2vw; left: 0; width: 49vw; -webkit-animation-name: wave_road_back; -moz-animation-name: wave_road_back; -o-animation-name: wave_road_back; animation-name: wave_road_back; -webkit-animation-duration: 6s; -moz-animation-duration: 6s; -o-animation-duration: 6s; animation-duration: 6s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } body .scene-board .scene.road .backgrounds .layer3 .island { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 1; -webkit-background-size: 67% auto; -moz-background-size: 67% auto; background-size: 67% auto; background-position: bottom 16vw right 0vw; background-image: url("../img/layer/road/land_back.png"); background-repeat: no-repeat; } body .scene-board .scene.road .backgrounds .layer3 .island .truck1 { position: absolute; bottom: 31.2vw; left: 62.25vw; width: 19vw; } body .scene-board .scene.road .backgrounds .layer3 .island .truck2 { position: absolute; bottom: 30.2vw; left: 82.25vw; width: 19vw; } body .scene-board .scene.road .backgrounds .layer3 .island .crane { position: absolute; bottom: 28.2vw; left: 31.25vw; width: 20vw; height: 22.5vw; overflow: hidden; -webkit-transition: all 9s ease; -o-transition: all 9s ease; -moz-transition: all 9s ease; transition: all 9s ease; -webkit-transition-delay: 1.5s; -moz-transition-delay: 1.5s; -o-transition-delay: 1.5s; transition-delay: 1.5s; -webkit-animation-name: hook_road; -moz-animation-name: hook_road; -o-animation-name: hook_road; animation-name: hook_road; -webkit-animation-duration: 12s; -moz-animation-duration: 12s; -o-animation-duration: 12s; animation-duration: 12s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-transform-origin: center top; -moz-transform-origin: center top; -ms-transform-origin: center top; -o-transform-origin: center top; transform-origin: center top; } body .scene-board .scene.road .backgrounds .layer3 .island .crane .rope { position: absolute; bottom: 7.4vw; left: 50%; height: 19vw; } body .scene-board .scene.road .backgrounds .layer3 .island .crane .box { position: absolute; height: 8vw; bottom: 0; left: 27%; -webkit-animation-name: box_road; -moz-animation-name: box_road; -o-animation-name: box_road; animation-name: box_road; -webkit-animation-duration: 8s; -moz-animation-duration: 8s; -o-animation-duration: 8s; animation-duration: 8s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-transform-origin: center top; -moz-transform-origin: center top; -ms-transform-origin: center top; -o-transform-origin: center top; transform-origin: center top; }  body .scene-board .scene.road.active-scene .backgrounds .layer3 .island .crane { bottom: 24.5vw; height: 26.5vw; }  body.transport-animation-out .scene-board .scene.road .backgrounds .layer3 .island .truck1 { -webkit-animation: truck1-out 4s 1s linear forwards; -moz-animation: truck1-out 4s 1s linear forwards; -o-animation: truck1-out 4s 1s linear forwards; animation: truck1-out 4s 1s linear forwards; }  body.transport-animation-out .scene-board .scene.road .backgrounds .layer3 .island .truck2 { -webkit-animation: truck2-out 2s linear forwards; -moz-animation: truck2-out 2s linear forwards; -o-animation: truck2-out 2s linear forwards; animation: truck2-out 2s linear forwards; }  @-webkit-keyframes truck1-out { 0% { -webkit-transform: translateX(0vw) rotate(0deg); transform: translateX(0vw) rotate(0deg); } 50% { -webkit-transform: translateX(20vw) rotate(-6deg); transform: translateX(20vw) rotate(-6deg); } 100% { -webkit-transform: translateX(40vw) rotate(-2deg); transform: translateX(40vw) rotate(-2deg); } }  @-moz-keyframes truck1-out { 0% { -moz-transform: translateX(0vw) rotate(0deg); transform: translateX(0vw) rotate(0deg); } 50% { -moz-transform: translateX(20vw) rotate(-6deg); transform: translateX(20vw) rotate(-6deg); } 100% { -moz-transform: translateX(40vw) rotate(-2deg); transform: translateX(40vw) rotate(-2deg); } }  @-o-keyframes truck1-out { 0% { -o-transform: translateX(0vw) rotate(0deg); transform: translateX(0vw) rotate(0deg); } 50% { -o-transform: translateX(20vw) rotate(-6deg); transform: translateX(20vw) rotate(-6deg); } 100% { -o-transform: translateX(40vw) rotate(-2deg); transform: translateX(40vw) rotate(-2deg); } }  @keyframes truck1-out { 0% { -webkit-transform: translateX(0vw) rotate(0deg); -moz-transform: translateX(0vw) rotate(0deg); -o-transform: translateX(0vw) rotate(0deg); transform: translateX(0vw) rotate(0deg); } 50% { -webkit-transform: translateX(20vw) rotate(-6deg); -moz-transform: translateX(20vw) rotate(-6deg); -o-transform: translateX(20vw) rotate(-6deg); transform: translateX(20vw) rotate(-6deg); } 100% { -webkit-transform: translateX(40vw) rotate(-2deg); -moz-transform: translateX(40vw) rotate(-2deg); -o-transform: translateX(40vw) rotate(-2deg); transform: translateX(40vw) rotate(-2deg); } }  @-webkit-keyframes truck2-out { 0% { -webkit-transform: translateX(0vw) rotate(0deg); transform: translateX(0vw) rotate(0deg); } 50% { -webkit-transform: translateX(11vw) rotate(-3deg); transform: translateX(11vw) rotate(-3deg); } 100% { -webkit-transform: translateX(22vw) rotate(-1deg); transform: translateX(22vw) rotate(-1deg); } }  @-moz-keyframes truck2-out { 0% { -moz-transform: translateX(0vw) rotate(0deg); transform: translateX(0vw) rotate(0deg); } 50% { -moz-transform: translateX(11vw) rotate(-3deg); transform: translateX(11vw) rotate(-3deg); } 100% { -moz-transform: translateX(22vw) rotate(-1deg); transform: translateX(22vw) rotate(-1deg); } }  @-o-keyframes truck2-out { 0% { -o-transform: translateX(0vw) rotate(0deg); transform: translateX(0vw) rotate(0deg); } 50% { -o-transform: translateX(11vw) rotate(-3deg); transform: translateX(11vw) rotate(-3deg); } 100% { -o-transform: translateX(22vw) rotate(-1deg); transform: translateX(22vw) rotate(-1deg); } }  @keyframes truck2-out { 0% { -webkit-transform: translateX(0vw) rotate(0deg); -moz-transform: translateX(0vw) rotate(0deg); -o-transform: translateX(0vw) rotate(0deg); transform: translateX(0vw) rotate(0deg); } 50% { -webkit-transform: translateX(11vw) rotate(-3deg); -moz-transform: translateX(11vw) rotate(-3deg); -o-transform: translateX(11vw) rotate(-3deg); transform: translateX(11vw) rotate(-3deg); } 100% { -webkit-transform: translateX(22vw) rotate(-1deg); -moz-transform: translateX(22vw) rotate(-1deg); -o-transform: translateX(22vw) rotate(-1deg); transform: translateX(22vw) rotate(-1deg); } }  @-webkit-keyframes hook_road { from, to { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 50% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } }  @-moz-keyframes hook_road { from, to { -moz-transform: rotate(-2deg); transform: rotate(-2deg); } 50% { -moz-transform: rotate(2deg); transform: rotate(2deg); } }  @-o-keyframes hook_road { from, to { -o-transform: rotate(-2deg); transform: rotate(-2deg); } 50% { -o-transform: rotate(2deg); transform: rotate(2deg); } }  @keyframes hook_road { from, to { -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -o-transform: rotate(-2deg); transform: rotate(-2deg); } 50% { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); transform: rotate(2deg); } }  @-webkit-keyframes box_road { from, to { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 50% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } }  @-moz-keyframes box_road { from, to { -moz-transform: rotate(2deg); transform: rotate(2deg); } 50% { -moz-transform: rotate(-2deg); transform: rotate(-2deg); } }  @-o-keyframes box_road { from, to { -o-transform: rotate(2deg); transform: rotate(2deg); } 50% { -o-transform: rotate(-2deg); transform: rotate(-2deg); } }  @keyframes box_road { from, to { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); transform: rotate(2deg); } 50% { -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -o-transform: rotate(-2deg); transform: rotate(-2deg); } }  @-webkit-keyframes wave_road { from, to { -webkit-transform: translateY(0); transform: translateY(0); } 30% { -webkit-transform: translateY(-4%); transform: translateY(-4%); } 70% { -webkit-transform: translateY(1%); transform: translateY(1%); } }  @-moz-keyframes wave_road { from, to { -moz-transform: translateY(0); transform: translateY(0); } 30% { -moz-transform: translateY(-4%); transform: translateY(-4%); } 70% { -moz-transform: translateY(1%); transform: translateY(1%); } }  @-o-keyframes wave_road { from, to { -o-transform: translateY(0); transform: translateY(0); } 30% { -o-transform: translateY(-4%); transform: translateY(-4%); } 70% { -o-transform: translateY(1%); transform: translateY(1%); } }  @keyframes wave_road { from, to { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 30% { -webkit-transform: translateY(-4%); -moz-transform: translateY(-4%); -o-transform: translateY(-4%); transform: translateY(-4%); } 70% { -webkit-transform: translateY(1%); -moz-transform: translateY(1%); -o-transform: translateY(1%); transform: translateY(1%); } }  @-webkit-keyframes wave_road_back { from, to { left: 0vw; } 30% { left: -1vw; } 70% { left: 2vw; } }  @-moz-keyframes wave_road_back { from, to { left: 0vw; } 30% { left: -1vw; } 70% { left: 2vw; } }  @-o-keyframes wave_road_back { from, to { left: 0vw; } 30% { left: -1vw; } 70% { left: 2vw; } }  @keyframes wave_road_back { from, to { left: 0vw; } 30% { left: -1vw; } 70% { left: 2vw; } }  .detect-ie .wrapper-aquaculture-net-ie { width: 100vw; height: 100vh; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); -webkit-animation-name: aquaculture-collect-net; -moz-animation-name: aquaculture-collect-net; -o-animation-name: aquaculture-collect-net; animation-name: aquaculture-collect-net; -webkit-animation-duration: 8s; -moz-animation-duration: 8s; -o-animation-duration: 8s; animation-duration: 8s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }  .detect-ie .purse_seine { position: absolute; left: 50%; top: -10vh; width: 75vw; height: 105vh; -webkit-transform: translateX(-50%) scaleX(10) translateY(0); -moz-transform: translateX(-50%) scaleX(10) translateY(0); -ms-transform: translateX(-50%) scaleX(10) translateY(0); -o-transform: translateX(-50%) scaleX(10) translateY(0); transform: translateX(-50%) scaleX(10) translateY(0); opacity: 0; -webkit-animation: purse_seine-animation-ie 5s ease-in-out forwards; -moz-animation: purse_seine-animation-ie 5s ease-in-out forwards; -o-animation: purse_seine-animation-ie 5s ease-in-out forwards; animation: purse_seine-animation-ie 5s ease-in-out forwards; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .detect-ie .purse_seine.frontal { z-index: 900; } .detect-ie .purse_seine.behind { z-index: 0; } .detect-ie .purse_seine.animate { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; }  .detect-ie .gillnet { position: absolute; left: 0; top: 50%; width: 100%; z-index: 900; -webkit-transform: translateY(-100%) translateY(-50vh); -moz-transform: translateY(-100%) translateY(-50vh); -ms-transform: translateY(-100%) translateY(-50vh); -o-transform: translateY(-100%) translateY(-50vh); transform: translateY(-100%) translateY(-50vh); } .detect-ie .gillnet.animate { -webkit-animation: gillnet-animation 5s ease-in-out forwards; -moz-animation: gillnet-animation 5s ease-in-out forwards; -o-animation: gillnet-animation 5s ease-in-out forwards; animation: gillnet-animation 5s ease-in-out forwards; }  .detect-ie .wrapper-rope { position: absolute; width: 6.4vw; height: auto; -webkit-transition: -webkit-transform 1s ease-out; transition: -webkit-transform 1s ease-out; -o-transition: -o-transform 1s ease-out; -moz-transition: transform 1s ease-out, -moz-transform 1s ease-out; transition: transform 1s ease-out; transition: transform 1s ease-out, -webkit-transform 1s ease-out, -moz-transform 1s ease-out, -o-transform 1s ease-out; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .detect-ie .wrapper-rope .rope { position: relative; width: 4.2vw; height: auto; }  .detect-ie .trawl.animate { -webkit-animation: trawl-animation-ie 7s ease-in alternate; -moz-animation: trawl-animation-ie 7s ease-in alternate; -o-animation: trawl-animation-ie 7s ease-in alternate; animation: trawl-animation-ie 7s ease-in alternate; }  @-webkit-keyframes purse_seine-animation-ie { 0% { -webkit-transform: translateX(-50%) scaleX(10) translateY(0); transform: translateX(-50%) scaleX(10) translateY(0); opacity: 0; } 25% { -webkit-transform: translateX(-50%) scaleX(1) translateY(0); transform: translateX(-50%) scaleX(1) translateY(0); opacity: 1; } 75% { -webkit-transform: translateX(-50%) scaleX(1) translateY(0); transform: translateX(-50%) scaleX(1) translateY(0); opacity: 1; } 100% { -webkit-transform: translateX(-50%) scaleX(1) translateY(-100%); transform: translateX(-50%) scaleX(1) translateY(-100%); opacity: 1; } }  @-moz-keyframes purse_seine-animation-ie { 0% { -moz-transform: translateX(-50%) scaleX(10) translateY(0); transform: translateX(-50%) scaleX(10) translateY(0); opacity: 0; } 25% { -moz-transform: translateX(-50%) scaleX(1) translateY(0); transform: translateX(-50%) scaleX(1) translateY(0); opacity: 1; } 75% { -moz-transform: translateX(-50%) scaleX(1) translateY(0); transform: translateX(-50%) scaleX(1) translateY(0); opacity: 1; } 100% { -moz-transform: translateX(-50%) scaleX(1) translateY(-100%); transform: translateX(-50%) scaleX(1) translateY(-100%); opacity: 1; } }  @-o-keyframes purse_seine-animation-ie { 0% { -o-transform: translateX(-50%) scaleX(10) translateY(0); transform: translateX(-50%) scaleX(10) translateY(0); opacity: 0; } 25% { -o-transform: translateX(-50%) scaleX(1) translateY(0); transform: translateX(-50%) scaleX(1) translateY(0); opacity: 1; } 75% { -o-transform: translateX(-50%) scaleX(1) translateY(0); transform: translateX(-50%) scaleX(1) translateY(0); opacity: 1; } 100% { -o-transform: translateX(-50%) scaleX(1) translateY(-100%); transform: translateX(-50%) scaleX(1) translateY(-100%); opacity: 1; } }  @keyframes purse_seine-animation-ie { 0% { -webkit-transform: translateX(-50%) scaleX(10) translateY(0); -moz-transform: translateX(-50%) scaleX(10) translateY(0); -o-transform: translateX(-50%) scaleX(10) translateY(0); transform: translateX(-50%) scaleX(10) translateY(0); opacity: 0; } 25% { -webkit-transform: translateX(-50%) scaleX(1) translateY(0); -moz-transform: translateX(-50%) scaleX(1) translateY(0); -o-transform: translateX(-50%) scaleX(1) translateY(0); transform: translateX(-50%) scaleX(1) translateY(0); opacity: 1; } 75% { -webkit-transform: translateX(-50%) scaleX(1) translateY(0); -moz-transform: translateX(-50%) scaleX(1) translateY(0); -o-transform: translateX(-50%) scaleX(1) translateY(0); transform: translateX(-50%) scaleX(1) translateY(0); opacity: 1; } 100% { -webkit-transform: translateX(-50%) scaleX(1) translateY(-100%); -moz-transform: translateX(-50%) scaleX(1) translateY(-100%); -o-transform: translateX(-50%) scaleX(1) translateY(-100%); transform: translateX(-50%) scaleX(1) translateY(-100%); opacity: 1; } }  @-webkit-keyframes gillnet-animation-ie { 0% { -webkit-transform: translateY(-100%) translateY(-50vh); transform: translateY(-100%) translateY(-50vh); opacity: 1; } 40% { -webkit-transform: translateY(-85%); transform: translateY(-85%); opacity: 1; } 60% { -webkit-transform: translateY(-85%); transform: translateY(-85%); opacity: 1; } 99% { -webkit-transform: translateY(-100%) translateY(-50vh); transform: translateY(-100%) translateY(-50vh); opacity: 1; } 100% { -webkit-transform: translateY(-100%) translateY(-50vh); transform: translateY(-100%) translateY(-50vh); opacity: 0; } }  @-moz-keyframes gillnet-animation-ie { 0% { -moz-transform: translateY(-100%) translateY(-50vh); transform: translateY(-100%) translateY(-50vh); opacity: 1; } 40% { -moz-transform: translateY(-85%); transform: translateY(-85%); opacity: 1; } 60% { -moz-transform: translateY(-85%); transform: translateY(-85%); opacity: 1; } 99% { -moz-transform: translateY(-100%) translateY(-50vh); transform: translateY(-100%) translateY(-50vh); opacity: 1; } 100% { -moz-transform: translateY(-100%) translateY(-50vh); transform: translateY(-100%) translateY(-50vh); opacity: 0; } }  @-o-keyframes gillnet-animation-ie { 0% { -o-transform: translateY(-100%) translateY(-50vh); transform: translateY(-100%) translateY(-50vh); opacity: 1; } 40% { -o-transform: translateY(-85%); transform: translateY(-85%); opacity: 1; } 60% { -o-transform: translateY(-85%); transform: translateY(-85%); opacity: 1; } 99% { -o-transform: translateY(-100%) translateY(-50vh); transform: translateY(-100%) translateY(-50vh); opacity: 1; } 100% { -o-transform: translateY(-100%) translateY(-50vh); transform: translateY(-100%) translateY(-50vh); opacity: 0; } }  @keyframes gillnet-animation-ie { 0% { -webkit-transform: translateY(-100%) translateY(-50vh); -moz-transform: translateY(-100%) translateY(-50vh); -o-transform: translateY(-100%) translateY(-50vh); transform: translateY(-100%) translateY(-50vh); opacity: 1; } 40% { -webkit-transform: translateY(-85%); -moz-transform: translateY(-85%); -o-transform: translateY(-85%); transform: translateY(-85%); opacity: 1; } 60% { -webkit-transform: translateY(-85%); -moz-transform: translateY(-85%); -o-transform: translateY(-85%); transform: translateY(-85%); opacity: 1; } 99% { -webkit-transform: translateY(-100%) translateY(-50vh); -moz-transform: translateY(-100%) translateY(-50vh); -o-transform: translateY(-100%) translateY(-50vh); transform: translateY(-100%) translateY(-50vh); opacity: 1; } 100% { -webkit-transform: translateY(-100%) translateY(-50vh); -moz-transform: translateY(-100%) translateY(-50vh); -o-transform: translateY(-100%) translateY(-50vh); transform: translateY(-100%) translateY(-50vh); opacity: 0; } }  @-webkit-keyframes trawl-animation-ie { 0% { -webkit-transform: translateX(-100%) translateZ(0); transform: translateX(-100%) translateZ(0); } 100% { -webkit-transform: translateX(100%) translateZ(0); transform: translateX(100%) translateZ(0); } }  @-moz-keyframes trawl-animation-ie { 0% { -moz-transform: translateX(-100%) translateZ(0); transform: translateX(-100%) translateZ(0); } 100% { -moz-transform: translateX(100%) translateZ(0); transform: translateX(100%) translateZ(0); } }  @-o-keyframes trawl-animation-ie { 0% { transform: translateX(-100%) translateZ(0); } 100% { transform: translateX(100%) translateZ(0); } }  @keyframes trawl-animation-ie { 0% { -webkit-transform: translateX(-100%) translateZ(0); -moz-transform: translateX(-100%) translateZ(0); transform: translateX(-100%) translateZ(0); } 100% { -webkit-transform: translateX(100%) translateZ(0); -moz-transform: translateX(100%) translateZ(0); transform: translateX(100%) translateZ(0); } }  .swarm-front { z-index: 49; }  .swarm-middle { z-index: 45; }  .swarm-back { z-index: 40; }  .delay1 { -webkit-animation-delay: 300ms; -moz-animation-delay: 300ms; -o-animation-delay: 300ms; animation-delay: 300ms; }  .delay2 { -webkit-animation-delay: 600ms; -moz-animation-delay: 600ms; -o-animation-delay: 600ms; animation-delay: 600ms; }  .delay3 { -webkit-animation-delay: 900ms; -moz-animation-delay: 900ms; -o-animation-delay: 900ms; animation-delay: 900ms; }  .cod .body-gillnet, .cod .fin-back, .cod .fin-front { position: absolute; top: 0; left: 0; width: 100%; }  .cod { position: absolute; } .cod.reverse { -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); } .cod .container { -webkit-animation-name: cod-body; -moz-animation-name: cod-body; -o-animation-name: cod-body; animation-name: cod-body; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; -webkit-animation-direction: alternate; -moz-animation-direction: alternate; -o-animation-direction: alternate; animation-direction: alternate; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } .cod .body { position: relative; width: 100%; } .cod .body-gillnet { width: 100%; opacity: 0; -webkit-transition: opacity 1s 2s; -o-transition: opacity 1s 2s; -moz-transition: opacity 1s 2s; transition: opacity 1s 2s; } .cod .fin-back { -webkit-animation-name: cod-fin-back; -moz-animation-name: cod-fin-back; -o-animation-name: cod-fin-back; animation-name: cod-fin-back; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; -webkit-animation-direction: alternate; -moz-animation-direction: alternate; -o-animation-direction: alternate; animation-direction: alternate; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } .cod.large .fin-back { -webkit-transform-origin: 14% 0px; -moz-transform-origin: 14% 0px; -ms-transform-origin: 14% 0px; -o-transform-origin: 14% 0px; transform-origin: 14% 0px; } .cod.small .fin-back { -webkit-transform-origin: 15% 0px; -moz-transform-origin: 15% 0px; -ms-transform-origin: 15% 0px; -o-transform-origin: 15% 0px; transform-origin: 15% 0px; } .cod .fin-front { -webkit-animation-name: cod-fin-front; -moz-animation-name: cod-fin-front; -o-animation-name: cod-fin-front; animation-name: cod-fin-front; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; -webkit-animation-direction: alternate; -moz-animation-direction: alternate; -o-animation-direction: alternate; animation-direction: alternate; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } .cod.large .fin-front { -webkit-transform-origin: 72% 0px; -moz-transform-origin: 72% 0px; -ms-transform-origin: 72% 0px; -o-transform-origin: 72% 0px; transform-origin: 72% 0px; } .cod.small .fin-front { -webkit-transform-origin: 70% 0px; -moz-transform-origin: 70% 0px; -ms-transform-origin: 70% 0px; -o-transform-origin: 70% 0px; transform-origin: 70% 0px; } .cod.trawl-animation { -webkit-animation-name: trawl-collect; -moz-animation-name: trawl-collect; -o-animation-name: trawl-collect; animation-name: trawl-collect; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .cod.trawl-animation.reverse { -webkit-animation-name: trawl-collect-reverse; -moz-animation-name: trawl-collect-reverse; -o-animation-name: trawl-collect-reverse; animation-name: trawl-collect-reverse; } .cod.trawl-animation.animate { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } .cod.gillnet-animation { -webkit-transition: -webkit-transform 2s 3s ease-in-out; transition: -webkit-transform 2s 3s ease-in-out; -o-transition: -o-transform 2s 3s ease-in-out; -moz-transition: transform 2s 3s ease-in-out, -moz-transform 2s 3s ease-in-out; transition: transform 2s 3s ease-in-out; transition: transform 2s 3s ease-in-out, -webkit-transform 2s 3s ease-in-out, -moz-transform 2s 3s ease-in-out, -o-transform 2s 3s ease-in-out; } .cod.gillnet-animation .body-gillnet { opacity: 1; } .cod.gillnet-animation.animate { -webkit-transform: translateY(-100vh); -moz-transform: translateY(-100vh); -ms-transform: translateY(-100vh); -o-transform: translateY(-100vh); transform: translateY(-100vh); } .cod.gillnet-animation.animate.reverse { -webkit-transform: translateY(-100vh) scaleX(-1); -moz-transform: translateY(-100vh) scaleX(-1); -ms-transform: translateY(-100vh) scaleX(-1); -o-transform: translateY(-100vh) scaleX(-1); transform: translateY(-100vh) scaleX(-1); }  @-webkit-keyframes cod-body { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(20px); transform: translateY(20px); } }  @-moz-keyframes cod-body { 0% { -moz-transform: translateY(0); transform: translateY(0); } 100% { -moz-transform: translateY(20px); transform: translateY(20px); } }  @-o-keyframes cod-body { 0% { -o-transform: translateY(0); transform: translateY(0); } 100% { -o-transform: translateY(20px); transform: translateY(20px); } }  @keyframes cod-body { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } }  @-webkit-keyframes cod-fin-back { 0% { -webkit-transform: rotateY(-20deg); transform: rotateY(-20deg); } 100% { -webkit-transform: rotateY(20deg); transform: rotateY(20deg); } }  @-moz-keyframes cod-fin-back { 0% { -moz-transform: rotateY(-20deg); transform: rotateY(-20deg); } 100% { -moz-transform: rotateY(20deg); transform: rotateY(20deg); } }  @-o-keyframes cod-fin-back { 0% { transform: rotateY(-20deg); } 100% { transform: rotateY(20deg); } }  @keyframes cod-fin-back { 0% { -webkit-transform: rotateY(-20deg); -moz-transform: rotateY(-20deg); transform: rotateY(-20deg); } 100% { -webkit-transform: rotateY(20deg); -moz-transform: rotateY(20deg); transform: rotateY(20deg); } }  @-webkit-keyframes cod-fin-front { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(30deg); transform: rotateY(30deg); } }  @-moz-keyframes cod-fin-front { 0% { -moz-transform: rotateY(0deg); transform: rotateY(0deg); } 100% { -moz-transform: rotateY(30deg); transform: rotateY(30deg); } }  @-o-keyframes cod-fin-front { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(30deg); } }  @keyframes cod-fin-front { 0% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(30deg); -moz-transform: rotateY(30deg); transform: rotateY(30deg); } }  @-webkit-keyframes trawl-collect { to { -webkit-transform: translateX(100vw); transform: translateX(100vw); bottom: 15vh; } }  @-moz-keyframes trawl-collect { to { -moz-transform: translateX(100vw); transform: translateX(100vw); bottom: 15vh; } }  @-o-keyframes trawl-collect { to { -o-transform: translateX(100vw); transform: translateX(100vw); bottom: 15vh; } }  @keyframes trawl-collect { to { -webkit-transform: translateX(100vw); -moz-transform: translateX(100vw); -o-transform: translateX(100vw); transform: translateX(100vw); bottom: 15vh; } }  @-webkit-keyframes trawl-collect-reverse { to { -webkit-transform: translateX(100vw) scaleX(-1); transform: translateX(100vw) scaleX(-1); bottom: 15vh; } }  @-moz-keyframes trawl-collect-reverse { to { -moz-transform: translateX(100vw) scaleX(-1); transform: translateX(100vw) scaleX(-1); bottom: 15vh; } }  @-o-keyframes trawl-collect-reverse { to { -o-transform: translateX(100vw) scaleX(-1); transform: translateX(100vw) scaleX(-1); bottom: 15vh; } }  @keyframes trawl-collect-reverse { to { -webkit-transform: translateX(100vw) scaleX(-1); -moz-transform: translateX(100vw) scaleX(-1); -o-transform: translateX(100vw) scaleX(-1); transform: translateX(100vw) scaleX(-1); bottom: 15vh; } }  .mussle { position: absolute; /* &.aquaculture_uncert-animation, &.aquaculture-animation { animation-name: aquaculture-collect; animation-duration: 1s; animation-fill-mode: forwards; animation-timing-function: ease-in-out; animation-play-state: paused;  &.animate { animation-play-state: running; } } */ } .mussle.reverse { -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); } .mussle .mussle-img { position: absolute; top: 0; left: 0; width: 100%; } .mussle .mussle-back { position: absolute; top: 0; left: 0; width: 100%; -webkit-transform-origin: 13% 83%; -moz-transform-origin: 13% 83%; -ms-transform-origin: 13% 83%; -o-transform-origin: 13% 83%; transform-origin: 13% 83%; -webkit-animation-name: mussle-back; -moz-animation-name: mussle-back; -o-animation-name: mussle-back; animation-name: mussle-back; -webkit-animation-duration: 4s; -moz-animation-duration: 4s; -o-animation-duration: 4s; animation-duration: 4s; -webkit-animation-direction: alternate; -moz-animation-direction: alternate; -o-animation-direction: alternate; animation-direction: alternate; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } .mussle .mussle-front { position: relative; width: 100%; } .mussle.trawl-animation { -webkit-animation-name: trawl-collect; -moz-animation-name: trawl-collect; -o-animation-name: trawl-collect; animation-name: trawl-collect; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .mussle.trawl-animation.animate { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; }  /* @keyframes aquaculture-collect { from { opacity: 1; } to { opacity: 0; } } */ .fog { position: absolute; top: 50%; width: 100%; height: 100%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 1000; -webkit-transition: opacity 2s; -o-transition: opacity 2s; -moz-transition: opacity 2s; transition: opacity 2s; opacity: 0; } .fog.animate { opacity: 1; -webkit-animation: fog-movement 10s ease-in-out infinite; -moz-animation: fog-movement 10s ease-in-out infinite; -o-animation: fog-movement 10s ease-in-out infinite; animation: fog-movement 10s ease-in-out infinite; } .fog.left { left: 10%; } .fog.right { right: 10%; } .fog.overlay { width: 100%; height: 105vh; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }  @-webkit-keyframes fog-movement { 0%, 100% { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 50% { -webkit-transform: translate(-50.5%, -50%); transform: translate(-50.5%, -50%); } }  @-moz-keyframes fog-movement { 0%, 100% { -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 50% { -moz-transform: translate(-50.5%, -50%); transform: translate(-50.5%, -50%); } }  @-o-keyframes fog-movement { 0%, 100% { -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 50% { -o-transform: translate(-50.5%, -50%); transform: translate(-50.5%, -50%); } }  @keyframes fog-movement { 0%, 100% { -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 50% { -webkit-transform: translate(-50.5%, -50%); -moz-transform: translate(-50.5%, -50%); -o-transform: translate(-50.5%, -50%); transform: translate(-50.5%, -50%); } }  .wrapper-rope { position: absolute; width: 2.4vw; height: auto; -webkit-transition: -webkit-transform 1s ease-out; transition: -webkit-transform 1s ease-out; -o-transition: -o-transform 1s ease-out; -moz-transition: transform 1s ease-out, -moz-transform 1s ease-out; transition: transform 1s ease-out; transition: transform 1s ease-out, -webkit-transform 1s ease-out, -moz-transform 1s ease-out, -o-transform 1s ease-out; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .wrapper-rope .rope { position: relative; width: 1.2vw; height: auto; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .wrapper-rope .mussle { position: absolute; width: 140%; left: 0; -webkit-transform: scale(0) rotateZ(-webkit-calc(120deg * var(--counter))); -moz-transform: scale(0) rotateZ(-moz-calc(120deg * var(--counter))); -ms-transform: scale(0) rotate(calc(120deg * var(--counter))); -o-transform: scale(0) rotateZ(calc(120deg * var(--counter))); transform: scale(0) rotateZ(calc(120deg * var(--counter))); -webkit-animation-name: mussle-grow; -moz-animation-name: mussle-grow; -o-animation-name: mussle-grow; animation-name: mussle-grow; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; -webkit-animation-delay: 2s; -moz-animation-delay: 2s; -o-animation-delay: 2s; animation-delay: 2s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .wrapper-rope .v1 { top: -webkit-calc(5vh * var(--counter) + 20vh); top: -moz-calc(5vh * var(--counter) + 20vh); top: calc(5vh * var(--counter) + 20vh); } .wrapper-rope .v2 { top: -webkit-calc(5vh * var(--counter) + 10vh); top: -moz-calc(5vh * var(--counter) + 10vh); top: calc(5vh * var(--counter) + 10vh); -webkit-animation-delay: 400ms; -moz-animation-delay: 400ms; -o-animation-delay: 400ms; animation-delay: 400ms; } .wrapper-rope .v3 { top: -webkit-calc(5vh * var(--counter) + 15vh); top: -moz-calc(5vh * var(--counter) + 15vh); top: calc(5vh * var(--counter) + 15vh); -webkit-animation-delay: 800ms; -moz-animation-delay: 800ms; -o-animation-delay: 800ms; animation-delay: 800ms; } .wrapper-rope.rope1 { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .wrapper-rope.rope2 { -webkit-transition-delay: .25s; -moz-transition-delay: .25s; -o-transition-delay: .25s; transition-delay: .25s; } .wrapper-rope.rope3 { -webkit-transition-delay: .5s; -moz-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; } .wrapper-rope.rope4 { -webkit-transition-delay: .75s; -moz-transition-delay: .75s; -o-transition-delay: .75s; transition-delay: .75s; } .wrapper-rope.rope4 { -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } .wrapper-rope.animate { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .wrapper-rope.animate.step2 { -webkit-animation-name: mussle-ropes; -moz-animation-name: mussle-ropes; -o-animation-name: mussle-ropes; animation-name: mussle-ropes; -webkit-animation-delay: 4s; -moz-animation-delay: 4s; -o-animation-delay: 4s; animation-delay: 4s; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } .wrapper-rope.animate.step2 .mussle { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; }  @-webkit-keyframes mussle-ropes { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-150%); transform: translateY(-150%); } }  @-moz-keyframes mussle-ropes { 0% { -moz-transform: translateY(0); transform: translateY(0); } 100% { -moz-transform: translateY(-150%); transform: translateY(-150%); } }  @-o-keyframes mussle-ropes { 0% { -o-transform: translateY(0); transform: translateY(0); } 100% { -o-transform: translateY(-150%); transform: translateY(-150%); } }  @keyframes mussle-ropes { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-150%); -moz-transform: translateY(-150%); -o-transform: translateY(-150%); transform: translateY(-150%); } }  @-webkit-keyframes mussle-back { 0% { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); } 100% { -webkit-transform: rotateZ(10deg); transform: rotateZ(10deg); } }  @-moz-keyframes mussle-back { 0% { -moz-transform: rotateZ(0deg); transform: rotateZ(0deg); } 100% { -moz-transform: rotateZ(10deg); transform: rotateZ(10deg); } }  @-o-keyframes mussle-back { 0% { -o-transform: rotateZ(0deg); transform: rotateZ(0deg); } 100% { -o-transform: rotateZ(10deg); transform: rotateZ(10deg); } }  @keyframes mussle-back { 0% { -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); } 100% { -webkit-transform: rotateZ(10deg); -moz-transform: rotateZ(10deg); -o-transform: rotateZ(10deg); transform: rotateZ(10deg); } }  @-webkit-keyframes mussle-grow { 0% { -webkit-transform: scale(0) rotateZ(-webkit-calc(110deg * var(--counter))); transform: scale(0) rotateZ(calc(110deg * var(--counter))); } 100% { -webkit-transform: scale(1) rotateZ(-webkit-calc(110deg * var(--counter))); transform: scale(1) rotateZ(calc(110deg * var(--counter))); } }  @-moz-keyframes mussle-grow { 0% { -moz-transform: scale(0) rotateZ(-moz-calc(110deg * var(--counter))); transform: scale(0) rotateZ(calc(110deg * var(--counter))); } 100% { -moz-transform: scale(1) rotateZ(-moz-calc(110deg * var(--counter))); transform: scale(1) rotateZ(calc(110deg * var(--counter))); } }  @-o-keyframes mussle-grow { 0% { -o-transform: scale(0) rotateZ(calc(110deg * var(--counter))); transform: scale(0) rotateZ(calc(110deg * var(--counter))); } 100% { -o-transform: scale(1) rotateZ(calc(110deg * var(--counter))); transform: scale(1) rotateZ(calc(110deg * var(--counter))); } }  @keyframes mussle-grow { 0% { -webkit-transform: scale(0) rotateZ(-webkit-calc(110deg * var(--counter))); -moz-transform: scale(0) rotateZ(-moz-calc(110deg * var(--counter))); -o-transform: scale(0) rotateZ(calc(110deg * var(--counter))); transform: scale(0) rotateZ(calc(110deg * var(--counter))); } 100% { -webkit-transform: scale(1) rotateZ(-webkit-calc(110deg * var(--counter))); -moz-transform: scale(1) rotateZ(-moz-calc(110deg * var(--counter))); -o-transform: scale(1) rotateZ(calc(110deg * var(--counter))); transform: scale(1) rotateZ(calc(110deg * var(--counter))); } }  @-webkit-keyframes rope-swing { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(10px); transform: translateX(10px); } }  @-moz-keyframes rope-swing { 0% { -moz-transform: translateX(0); transform: translateX(0); } 100% { -moz-transform: translateX(10px); transform: translateX(10px); } }  @-o-keyframes rope-swing { 0% { -o-transform: translateX(0); transform: translateX(0); } 100% { -o-transform: translateX(10px); transform: translateX(10px); } }  @keyframes rope-swing { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } }  @keyframes trawl-collect { to { -webkit-transform: translateX(100vw); -moz-transform: translateX(100vw); -o-transform: translateX(100vw); transform: translateX(100vw); bottom: 10vh; } }  .salmon { position: absolute; } .salmon.reverse { -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); } .salmon .container { -webkit-animation-name: salmon-body; -moz-animation-name: salmon-body; -o-animation-name: salmon-body; animation-name: salmon-body; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; -webkit-animation-direction: alternate; -moz-animation-direction: alternate; -o-animation-direction: alternate; animation-direction: alternate; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } .salmon .tail { position: absolute; top: 0; left: 0; width: 100%; -webkit-transform-origin: 15% 0%; -moz-transform-origin: 15% 0%; -ms-transform-origin: 15% 0%; -o-transform-origin: 15% 0%; transform-origin: 15% 0%; -webkit-animation-name: salmon-fin-back; -moz-animation-name: salmon-fin-back; -o-animation-name: salmon-fin-back; animation-name: salmon-fin-back; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; -webkit-animation-direction: alternate; -moz-animation-direction: alternate; -o-animation-direction: alternate; animation-direction: alternate; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; z-index: 0; } .salmon .fin { position: absolute; top: 0; left: 0; width: 100%; -webkit-transform-origin: 15% 0%; -moz-transform-origin: 15% 0%; -ms-transform-origin: 15% 0%; -o-transform-origin: 15% 0%; transform-origin: 15% 0%; z-index: 100; } .salmon .body { position: relative; width: 100%; z-index: 50; } .salmon.trawl-animation { -webkit-animation-name: trawl-collect; -moz-animation-name: trawl-collect; -o-animation-name: trawl-collect; animation-name: trawl-collect; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .salmon.trawl-animation.animate { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } .salmon.aquaculture_uncert-animation:not(.aquaculture), .salmon.aquaculture_cert-animation:not(.aquaculture) { -webkit-animation-name: aquaculture-remove-salmon; -moz-animation-name: aquaculture-remove-salmon; -o-animation-name: aquaculture-remove-salmon; animation-name: aquaculture-remove-salmon; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .salmon.aquaculture_uncert-animation:not(.aquaculture).animate, .salmon.aquaculture_cert-animation:not(.aquaculture).animate { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } .salmon.gillnet-animation { -webkit-transition: -webkit-transform 2s 3s ease-in-out; transition: -webkit-transform 2s 3s ease-in-out; -o-transition: -o-transform 2s 3s ease-in-out; -moz-transition: transform 2s 3s ease-in-out, -moz-transform 2s 3s ease-in-out; transition: transform 2s 3s ease-in-out; transition: transform 2s 3s ease-in-out, -webkit-transform 2s 3s ease-in-out, -moz-transform 2s 3s ease-in-out, -o-transform 2s 3s ease-in-out; } .salmon.gillnet-animation .body-gillnet { opacity: 1; } .salmon.gillnet-animation.animate { -webkit-transform: translateY(-100vh); -moz-transform: translateY(-100vh); -ms-transform: translateY(-100vh); -o-transform: translateY(-100vh); transform: translateY(-100vh); } .salmon.gillnet-animation.animate.reverse { -webkit-transform: translateY(-100vh) scaleX(-1); -moz-transform: translateY(-100vh) scaleX(-1); -ms-transform: translateY(-100vh) scaleX(-1); -o-transform: translateY(-100vh) scaleX(-1); transform: translateY(-100vh) scaleX(-1); } .salmon.gillnet-animation.pauseMovement .container { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .salmon.purse_seine-animation.animate { -webkit-animation: purse_seine-salmon 5s ease-in-out forwards; -moz-animation: purse_seine-salmon 5s ease-in-out forwards; -o-animation: purse_seine-salmon 5s ease-in-out forwards; animation: purse_seine-salmon 5s ease-in-out forwards; }  @-webkit-keyframes purse_seine-salmon { 0%, 75% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-100vh); transform: translateY(-100vh); } }  @-moz-keyframes purse_seine-salmon { 0%, 75% { -moz-transform: translateY(0); transform: translateY(0); } 100% { -moz-transform: translateY(-100vh); transform: translateY(-100vh); } }  @-o-keyframes purse_seine-salmon { 0%, 75% { -o-transform: translateY(0); transform: translateY(0); } 100% { -o-transform: translateY(-100vh); transform: translateY(-100vh); } }  @keyframes purse_seine-salmon { 0%, 75% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-100vh); -moz-transform: translateY(-100vh); -o-transform: translateY(-100vh); transform: translateY(-100vh); } }  .wrapper-aqua-culture-net { width: 100vw; height: 100vh; } .wrapper-aqua-culture-net .salmon.aquaculture_uncert-animation, .wrapper-aqua-culture-net .salmon.aquaculture_cert-animation { -webkit-animation-name: aquaculture-collect-salmon; -moz-animation-name: aquaculture-collect-salmon; -o-animation-name: aquaculture-collect-salmon; animation-name: aquaculture-collect-salmon; -webkit-animation-duration: 8s; -moz-animation-duration: 8s; -o-animation-duration: 8s; animation-duration: 8s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } .wrapper-aqua-culture-net .salmon.aquaculture_uncert-animation.reverse, .wrapper-aqua-culture-net .salmon.aquaculture_cert-animation.reverse { -webkit-animation-name: aquaculture-reverse-collect-salmon; -moz-animation-name: aquaculture-reverse-collect-salmon; -o-animation-name: aquaculture-reverse-collect-salmon; animation-name: aquaculture-reverse-collect-salmon; }  .fog { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1000; -webkit-transition: opacity 2s; -o-transition: opacity 2s; -moz-transition: opacity 2s; transition: opacity 2s; opacity: 0; } .fog.animate { opacity: 1; -webkit-animation: fog-movement 10s ease-in-out infinite; -moz-animation: fog-movement 10s ease-in-out infinite; -o-animation: fog-movement 10s ease-in-out infinite; animation: fog-movement 10s ease-in-out infinite; }  @-webkit-keyframes salmon-body { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(20px); transform: translateY(20px); } }  @-moz-keyframes salmon-body { 0% { -moz-transform: translateY(0); transform: translateY(0); } 100% { -moz-transform: translateY(20px); transform: translateY(20px); } }  @-o-keyframes salmon-body { 0% { -o-transform: translateY(0); transform: translateY(0); } 100% { -o-transform: translateY(20px); transform: translateY(20px); } }  @keyframes salmon-body { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } }  @-webkit-keyframes salmon-fin-back { 0% { -webkit-transform: rotateY(-20deg); transform: rotateY(-20deg); } 100% { -webkit-transform: rotateY(20deg); transform: rotateY(20deg); } }  @-moz-keyframes salmon-fin-back { 0% { -moz-transform: rotateY(-20deg); transform: rotateY(-20deg); } 100% { -moz-transform: rotateY(20deg); transform: rotateY(20deg); } }  @-o-keyframes salmon-fin-back { 0% { transform: rotateY(-20deg); } 100% { transform: rotateY(20deg); } }  @keyframes salmon-fin-back { 0% { -webkit-transform: rotateY(-20deg); -moz-transform: rotateY(-20deg); transform: rotateY(-20deg); } 100% { -webkit-transform: rotateY(20deg); -moz-transform: rotateY(20deg); transform: rotateY(20deg); } }  @keyframes trawl-collect { to { -webkit-transform: translateX(100vw); -moz-transform: translateX(100vw); -o-transform: translateX(100vw); transform: translateX(100vw); bottom: 15vh; } }  @-webkit-keyframes gillnet-collect { from { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(-100vh); transform: translateY(-100vh); } }  @-moz-keyframes gillnet-collect { from { -moz-transform: translateY(0); transform: translateY(0); } to { -moz-transform: translateY(-100vh); transform: translateY(-100vh); } }  @-o-keyframes gillnet-collect { from { -o-transform: translateY(0); transform: translateY(0); } to { -o-transform: translateY(-100vh); transform: translateY(-100vh); } }  @keyframes gillnet-collect { from { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(-100vh); -moz-transform: translateY(-100vh); -o-transform: translateY(-100vh); transform: translateY(-100vh); } }  @-webkit-keyframes gillnet-collect-reverse { from { -webkit-transform: translateY(0) scaleX(-1); transform: translateY(0) scaleX(-1); } to { -webkit-transform: translateY(-100vh) scaleX(-1); transform: translateY(-100vh) scaleX(-1); } }  @-moz-keyframes gillnet-collect-reverse { from { -moz-transform: translateY(0) scaleX(-1); transform: translateY(0) scaleX(-1); } to { -moz-transform: translateY(-100vh) scaleX(-1); transform: translateY(-100vh) scaleX(-1); } }  @-o-keyframes gillnet-collect-reverse { from { -o-transform: translateY(0) scaleX(-1); transform: translateY(0) scaleX(-1); } to { -o-transform: translateY(-100vh) scaleX(-1); transform: translateY(-100vh) scaleX(-1); } }  @keyframes gillnet-collect-reverse { from { -webkit-transform: translateY(0) scaleX(-1); -moz-transform: translateY(0) scaleX(-1); -o-transform: translateY(0) scaleX(-1); transform: translateY(0) scaleX(-1); } to { -webkit-transform: translateY(-100vh) scaleX(-1); -moz-transform: translateY(-100vh) scaleX(-1); -o-transform: translateY(-100vh) scaleX(-1); transform: translateY(-100vh) scaleX(-1); } }  @-webkit-keyframes aquaculture-remove-salmon { to { opacity: 0; } }  @-moz-keyframes aquaculture-remove-salmon { to { opacity: 0; } }  @-o-keyframes aquaculture-remove-salmon { to { opacity: 0; } }  @keyframes aquaculture-remove-salmon { to { opacity: 0; } }  @-webkit-keyframes aquaculture-reverse-collect-salmon { 0%, 25% { -webkit-transform: scale(0); transform: scale(0); } 50%, 100% { -webkit-transform: scaleX(-1); transform: scaleX(-1); } }  @-moz-keyframes aquaculture-reverse-collect-salmon { 0%, 25% { -moz-transform: scale(0); transform: scale(0); } 50%, 100% { -moz-transform: scaleX(-1); transform: scaleX(-1); } }  @-o-keyframes aquaculture-reverse-collect-salmon { 0%, 25% { -o-transform: scale(0); transform: scale(0); } 50%, 100% { -o-transform: scaleX(-1); transform: scaleX(-1); } }  @keyframes aquaculture-reverse-collect-salmon { 0%, 25% { -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); transform: scale(0); } 50%, 100% { -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); } }  @-webkit-keyframes aquaculture-collect-salmon { 0%, 25% { -webkit-transform: scale(0); transform: scale(0); } 50%, 100% { -webkit-transform: scale(1); transform: scale(1); } }  @-moz-keyframes aquaculture-collect-salmon { 0%, 25% { -moz-transform: scale(0); transform: scale(0); } 50%, 100% { -moz-transform: scale(1); transform: scale(1); } }  @-o-keyframes aquaculture-collect-salmon { 0%, 25% { -o-transform: scale(0); transform: scale(0); } 50%, 100% { -o-transform: scale(1); transform: scale(1); } }  @keyframes aquaculture-collect-salmon { 0%, 25% { -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); transform: scale(0); } 50%, 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } }  .sardine { position: absolute; } .sardine.reverse { -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); } .sardine .container { -webkit-animation-name: sardine-body; -moz-animation-name: sardine-body; -o-animation-name: sardine-body; animation-name: sardine-body; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; -webkit-animation-direction: alternate; -moz-animation-direction: alternate; -o-animation-direction: alternate; animation-direction: alternate; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } .sardine .tail { position: absolute; top: 0; left: 0; width: 100%; -webkit-transform-origin: 17% 0%; -moz-transform-origin: 17% 0%; -ms-transform-origin: 17% 0%; -o-transform-origin: 17% 0%; transform-origin: 17% 0%; -webkit-animation-name: sardine-fin-back; -moz-animation-name: sardine-fin-back; -o-animation-name: sardine-fin-back; animation-name: sardine-fin-back; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; -webkit-animation-direction: alternate; -moz-animation-direction: alternate; -o-animation-direction: alternate; animation-direction: alternate; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; z-index: 50; } .sardine .body { position: relative; width: 100%; z-index: 100; } .sardine .fin { position: absolute; top: 0; left: 0; width: 100%; -webkit-transform-origin: 77% 0%; -moz-transform-origin: 77% 0%; -ms-transform-origin: 77% 0%; -o-transform-origin: 77% 0%; transform-origin: 77% 0%; -webkit-animation-name: sardine-fin-front; -moz-animation-name: sardine-fin-front; -o-animation-name: sardine-fin-front; animation-name: sardine-fin-front; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; -webkit-animation-direction: alternate; -moz-animation-direction: alternate; -o-animation-direction: alternate; animation-direction: alternate; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; z-index: 150; } .sardine.trawl-animation { -webkit-animation-name: trawl-collect; -moz-animation-name: trawl-collect; -o-animation-name: trawl-collect; animation-name: trawl-collect; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .sardine.trawl-animation.animate { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } .sardine.gillnet-animation { -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s; animation-delay: 3s; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .sardine.gillnet-animation .body-gillnet { opacity: 1; } .sardine.gillnet-animation.animate { -webkit-animation-name: gillnet-collect; -moz-animation-name: gillnet-collect; -o-animation-name: gillnet-collect; animation-name: gillnet-collect; -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } .sardine.gillnet-animation.animate.reverse { -webkit-animation-name: gillnet-collect-reverse; -moz-animation-name: gillnet-collect-reverse; -o-animation-name: gillnet-collect-reverse; animation-name: gillnet-collect-reverse; } .sardine.purse_seine-animation.animate { -webkit-animation: purse_seine-sardine 5s ease-in-out forwards; -moz-animation: purse_seine-sardine 5s ease-in-out forwards; -o-animation: purse_seine-sardine 5s ease-in-out forwards; animation: purse_seine-sardine 5s ease-in-out forwards; }  @-webkit-keyframes purse_seine-sardine { 0%, 75% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-100vh); transform: translateY(-100vh); } }  @-moz-keyframes purse_seine-sardine { 0%, 75% { -moz-transform: translateY(0); transform: translateY(0); } 100% { -moz-transform: translateY(-100vh); transform: translateY(-100vh); } }  @-o-keyframes purse_seine-sardine { 0%, 75% { -o-transform: translateY(0); transform: translateY(0); } 100% { -o-transform: translateY(-100vh); transform: translateY(-100vh); } }  @keyframes purse_seine-sardine { 0%, 75% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-100vh); -moz-transform: translateY(-100vh); -o-transform: translateY(-100vh); transform: translateY(-100vh); } }  @-webkit-keyframes sardine-body { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(20px); transform: translateY(20px); } }  @-moz-keyframes sardine-body { 0% { -moz-transform: translateY(0); transform: translateY(0); } 100% { -moz-transform: translateY(20px); transform: translateY(20px); } }  @-o-keyframes sardine-body { 0% { -o-transform: translateY(0); transform: translateY(0); } 100% { -o-transform: translateY(20px); transform: translateY(20px); } }  @keyframes sardine-body { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } }  @-webkit-keyframes sardine-fin-back { 0% { -webkit-transform: rotateY(-20deg); transform: rotateY(-20deg); } 100% { -webkit-transform: rotateY(20deg); transform: rotateY(20deg); } }  @-moz-keyframes sardine-fin-back { 0% { -moz-transform: rotateY(-20deg); transform: rotateY(-20deg); } 100% { -moz-transform: rotateY(20deg); transform: rotateY(20deg); } }  @-o-keyframes sardine-fin-back { 0% { transform: rotateY(-20deg); } 100% { transform: rotateY(20deg); } }  @keyframes sardine-fin-back { 0% { -webkit-transform: rotateY(-20deg); -moz-transform: rotateY(-20deg); transform: rotateY(-20deg); } 100% { -webkit-transform: rotateY(20deg); -moz-transform: rotateY(20deg); transform: rotateY(20deg); } }  @-webkit-keyframes sardine-fin-front { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(30deg); transform: rotateY(30deg); } }  @-moz-keyframes sardine-fin-front { 0% { -moz-transform: rotateY(0deg); transform: rotateY(0deg); } 100% { -moz-transform: rotateY(30deg); transform: rotateY(30deg); } }  @-o-keyframes sardine-fin-front { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(30deg); } }  @keyframes sardine-fin-front { 0% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(30deg); -moz-transform: rotateY(30deg); transform: rotateY(30deg); } }  @keyframes trawl-collect { to { -webkit-transform: translateX(100vw); -moz-transform: translateX(100vw); -o-transform: translateX(100vw); transform: translateX(100vw); bottom: 15vh; } }  @keyframes gillnet-collect { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 99% { -webkit-transform: translateY(-75vh); -moz-transform: translateY(-75vh); -o-transform: translateY(-75vh); transform: translateY(-75vh); opacity: 1; } 100% { -webkit-transform: translateY(-75vh); -moz-transform: translateY(-75vh); -o-transform: translateY(-75vh); transform: translateY(-75vh); opacity: 0; } }  @keyframes gillnet-collect-reverse { 0% { -webkit-transform: translateY(0) scaleX(-1); -moz-transform: translateY(0) scaleX(-1); -o-transform: translateY(0) scaleX(-1); transform: translateY(0) scaleX(-1); opacity: 1; } 99% { -webkit-transform: translateY(-75vh) scaleX(-1); -moz-transform: translateY(-75vh) scaleX(-1); -o-transform: translateY(-75vh) scaleX(-1); transform: translateY(-75vh) scaleX(-1); opacity: 1; } 100% { -webkit-transform: translateY(-75vh) scaleX(-1); -moz-transform: translateY(-75vh) scaleX(-1); -o-transform: translateY(-75vh) scaleX(-1); transform: translateY(-75vh) scaleX(-1); opacity: 0; } }  .shrimp { position: absolute; } .shrimp.reverse { -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); } .shrimp .body { position: relative; width: 100%; z-index: 10; } .shrimp .tail { position: absolute; top: 0; left: 0; width: 100%; z-index: 9; -webkit-transform-origin: center; -moz-transform-origin: center; -ms-transform-origin: center; -o-transform-origin: center; transform-origin: center; -webkit-animation-name: shrimp-tail; -moz-animation-name: shrimp-tail; -o-animation-name: shrimp-tail; animation-name: shrimp-tail; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; -webkit-animation-direction: alternate; -moz-animation-direction: alternate; -o-animation-direction: alternate; animation-direction: alternate; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } .shrimp .antenna-front { position: absolute; top: -2%; right: 0%; width: 100%; z-index: 0; -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-animation-name: shrimp-antenna; -moz-animation-name: shrimp-antenna; -o-animation-name: shrimp-antenna; animation-name: shrimp-antenna; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; -webkit-animation-direction: alternate; -moz-animation-direction: alternate; -o-animation-direction: alternate; animation-direction: alternate; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } .shrimp .antenna-back { position: absolute; top: -5%; right: -2%; width: 100%; z-index: 0; -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-animation-name: shrimp-antenna; -moz-animation-name: shrimp-antenna; -o-animation-name: shrimp-antenna; animation-name: shrimp-antenna; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; -webkit-animation-delay: -2s; -moz-animation-delay: -2s; -o-animation-delay: -2s; animation-delay: -2s; -webkit-animation-direction: alternate; -moz-animation-direction: alternate; -o-animation-direction: alternate; animation-direction: alternate; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } .shrimp.trawl-animation { -webkit-animation-name: trawl-collect; -moz-animation-name: trawl-collect; -o-animation-name: trawl-collect; animation-name: trawl-collect; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .shrimp.aquaculture_uncert-animation:not(.aquaculture), .shrimp.aquaculture_cert-animation:not(.aquaculture) { -webkit-animation-name: aquaculture-remove-shrimp; -moz-animation-name: aquaculture-remove-shrimp; -o-animation-name: aquaculture-remove-shrimp; animation-name: aquaculture-remove-shrimp; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .shrimp.aquaculture_uncert-animation:not(.aquaculture).animate, .shrimp.aquaculture_cert-animation:not(.aquaculture).animate { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; }  .wrapper-aqua-culture-net { width: 100vw; height: 100vh; } .wrapper-aqua-culture-net .shrimp.aquaculture_uncert-animation, .wrapper-aqua-culture-net .shrimp.aquaculture_cert-animation { -webkit-animation-name: aquaculture-collect-shrimp; -moz-animation-name: aquaculture-collect-shrimp; -o-animation-name: aquaculture-collect-shrimp; animation-name: aquaculture-collect-shrimp; -webkit-animation-duration: 8s; -moz-animation-duration: 8s; -o-animation-duration: 8s; animation-duration: 8s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } .wrapper-aqua-culture-net .shrimp.aquaculture_uncert-animation.reverse, .wrapper-aqua-culture-net .shrimp.aquaculture_cert-animation.reverse { -webkit-animation-name: aquaculture-reverse-collect-shrimp; -moz-animation-name: aquaculture-reverse-collect-shrimp; -o-animation-name: aquaculture-reverse-collect-shrimp; animation-name: aquaculture-reverse-collect-shrimp; }  .fog { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1000; -webkit-transition: opacity 2s; -o-transition: opacity 2s; -moz-transition: opacity 2s; transition: opacity 2s; opacity: 0; } .fog.animate { opacity: 1; -webkit-animation: fog-movement 10s ease-in-out infinite; -moz-animation: fog-movement 10s ease-in-out infinite; -o-animation: fog-movement 10s ease-in-out infinite; animation: fog-movement 10s ease-in-out infinite; }  @keyframes fog-movement { 0%, 100% { -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 50% { -webkit-transform: translate(-50.5%, -50%); -moz-transform: translate(-50.5%, -50%); -o-transform: translate(-50.5%, -50%); transform: translate(-50.5%, -50%); } }  @-webkit-keyframes shrimp-antenna { 0% { -webkit-transform: rotateZ(-1deg); transform: rotateZ(-1deg); } 100% { -webkit-transform: rotateZ(1deg); transform: rotateZ(1deg); } }  @-moz-keyframes shrimp-antenna { 0% { -moz-transform: rotateZ(-1deg); transform: rotateZ(-1deg); } 100% { -moz-transform: rotateZ(1deg); transform: rotateZ(1deg); } }  @-o-keyframes shrimp-antenna { 0% { -o-transform: rotateZ(-1deg); transform: rotateZ(-1deg); } 100% { -o-transform: rotateZ(1deg); transform: rotateZ(1deg); } }  @keyframes shrimp-antenna { 0% { -webkit-transform: rotateZ(-1deg); -moz-transform: rotateZ(-1deg); -o-transform: rotateZ(-1deg); transform: rotateZ(-1deg); } 100% { -webkit-transform: rotateZ(1deg); -moz-transform: rotateZ(1deg); -o-transform: rotateZ(1deg); transform: rotateZ(1deg); } }  @-webkit-keyframes shrimp-tail { 0% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } }  @-moz-keyframes shrimp-tail { 0% { -moz-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -moz-transform: rotate(5deg); transform: rotate(5deg); } }  @-o-keyframes shrimp-tail { 0% { -o-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -o-transform: rotate(5deg); transform: rotate(5deg); } }  @keyframes shrimp-tail { 0% { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } }  @keyframes trawl-collect { to { -webkit-transform: translateX(100vw); -moz-transform: translateX(100vw); -o-transform: translateX(100vw); transform: translateX(100vw); bottom: 10vh; } }  @-webkit-keyframes aquaculture-remove-shrimp { to { opacity: 0; } }  @-moz-keyframes aquaculture-remove-shrimp { to { opacity: 0; } }  @-o-keyframes aquaculture-remove-shrimp { to { opacity: 0; } }  @keyframes aquaculture-remove-shrimp { to { opacity: 0; } }  @-webkit-keyframes aquaculture-reverse-collect-shrimp { from { -webkit-transform: scale(0); transform: scale(0); } 35% { -webkit-transform: scale(0); transform: scale(0); } 55% { -webkit-transform: scaleX(-1); transform: scaleX(-1); } 75% { -webkit-transform: scaleX(-1); transform: scaleX(-1); } to { -webkit-transform: scaleX(-1) translateY(-100vh); transform: scaleX(-1) translateY(-100vh); } }  @-moz-keyframes aquaculture-reverse-collect-shrimp { from { -moz-transform: scale(0); transform: scale(0); } 35% { -moz-transform: scale(0); transform: scale(0); } 55% { -moz-transform: scaleX(-1); transform: scaleX(-1); } 75% { -moz-transform: scaleX(-1); transform: scaleX(-1); } to { -moz-transform: scaleX(-1) translateY(-100vh); transform: scaleX(-1) translateY(-100vh); } }  @-o-keyframes aquaculture-reverse-collect-shrimp { from { -o-transform: scale(0); transform: scale(0); } 35% { -o-transform: scale(0); transform: scale(0); } 55% { -o-transform: scaleX(-1); transform: scaleX(-1); } 75% { -o-transform: scaleX(-1); transform: scaleX(-1); } to { -o-transform: scaleX(-1) translateY(-100vh); transform: scaleX(-1) translateY(-100vh); } }  @keyframes aquaculture-reverse-collect-shrimp { from { -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); transform: scale(0); } 35% { -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); transform: scale(0); } 55% { -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); } 75% { -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); } to { -webkit-transform: scaleX(-1) translateY(-100vh); -moz-transform: scaleX(-1) translateY(-100vh); -o-transform: scaleX(-1) translateY(-100vh); transform: scaleX(-1) translateY(-100vh); } }  @-webkit-keyframes aquaculture-collect-shrimp { from { -webkit-transform: scale(0); transform: scale(0); } 45% { -webkit-transform: scale(0); transform: scale(0); } 65% { -webkit-transform: scale(1); transform: scale(1); } 75% { -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(1) translateY(-100vh); transform: scale(1) translateY(-100vh); } }  @-moz-keyframes aquaculture-collect-shrimp { from { -moz-transform: scale(0); transform: scale(0); } 45% { -moz-transform: scale(0); transform: scale(0); } 65% { -moz-transform: scale(1); transform: scale(1); } 75% { -moz-transform: scale(1); transform: scale(1); } to { -moz-transform: scale(1) translateY(-100vh); transform: scale(1) translateY(-100vh); } }  @-o-keyframes aquaculture-collect-shrimp { from { -o-transform: scale(0); transform: scale(0); } 45% { -o-transform: scale(0); transform: scale(0); } 65% { -o-transform: scale(1); transform: scale(1); } 75% { -o-transform: scale(1); transform: scale(1); } to { -o-transform: scale(1) translateY(-100vh); transform: scale(1) translateY(-100vh); } }  @keyframes aquaculture-collect-shrimp { from { -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); transform: scale(0); } 45% { -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); transform: scale(0); } 65% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 75% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(1) translateY(-100vh); -moz-transform: scale(1) translateY(-100vh); -o-transform: scale(1) translateY(-100vh); transform: scale(1) translateY(-100vh); } }  .trawl { position: absolute; left: 0; bottom: 10%; height: 95%; width: auto; display: block; z-index: 100; -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translateX(-100%) rotate(0deg) translateZ(0); -moz-transform: translateX(-100%) rotate(0deg) translateZ(0); transform: translateX(-100%) rotate(0deg) translateZ(0); } .trawl.animate { -webkit-animation: trawl-animation 5s ease-in forwards; -moz-animation: trawl-animation 5s ease-in forwards; -o-animation: trawl-animation 5s ease-in forwards; animation: trawl-animation 5s ease-in forwards; } .trawl.z0 { z-index: 0; } .trawl.z1 { z-index: 100; }  @-webkit-keyframes aquaculture-mangrove { from { opacity: 0; } to { opacity: 1; } }  @-moz-keyframes aquaculture-mangrove { from { opacity: 0; } to { opacity: 1; } }  @-o-keyframes aquaculture-mangrove { from { opacity: 0; } to { opacity: 1; } }  @keyframes aquaculture-mangrove { from { opacity: 0; } to { opacity: 1; } }  .mangrove { position: absolute; opacity: 0; -webkit-animation-name: aquaculture-mangrove; -moz-animation-name: aquaculture-mangrove; -o-animation-name: aquaculture-mangrove; animation-name: aquaculture-mangrove; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .mangrove.animate { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } .mangrove.left.behind { position: absolute; left: 2vw; width: 32vw; height: 102vh; z-index: 0; top: -4vw; } .mangrove.right.behind { position: absolute; right: 2vw; width: 37vw; height: 102vh; z-index: 0; top: -4vw; } .mangrove.left.top { position: absolute; left: 2vw; width: 36vw; height: 102vh; z-index: 1; top: -6vw; } .mangrove.right.top { position: absolute; right: 8vw; width: 40vw; height: 102vh; z-index: 1; top: -6vw; }  .wrapper-aqua-culture-net { width: 100vw; height: 100vh; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); -webkit-animation-name: aquaculture-collect-net; -moz-animation-name: aquaculture-collect-net; -o-animation-name: aquaculture-collect-net; animation-name: aquaculture-collect-net; -webkit-animation-duration: 8s; -moz-animation-duration: 8s; -o-animation-duration: 8s; animation-duration: 8s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } .wrapper-aqua-culture-net .aqua_culture_net { position: absolute; left: 50%; top: -3vw; height: 90vh; display: block; z-index: 100; -webkit-transform-origin: center top; -moz-transform-origin: center top; -ms-transform-origin: center top; -o-transform-origin: center top; transform-origin: center top; -webkit-transform: translateY(-100%) translateX(-50%); -moz-transform: translateY(-100%) translateX(-50%); -ms-transform: translateY(-100%) translateX(-50%); -o-transform: translateY(-100%) translateX(-50%); transform: translateY(-100%) translateX(-50%); } .wrapper-aqua-culture-net .aqua_culture_net.animate { -webkit-animation: aqua_culture_net-animation 1.5s ease-in-out forwards; -moz-animation: aqua_culture_net-animation 1.5s ease-in-out forwards; -o-animation: aqua_culture_net-animation 1.5s ease-in-out forwards; animation: aqua_culture_net-animation 1.5s ease-in-out forwards; } .wrapper-aqua-culture-net .aqua_culture_net.z0 { z-index: 0; } .wrapper-aqua-culture-net .aqua_culture_net.z1 { z-index: 100; }  .gillnet { position: absolute; left: 0; top: 50%; width: 100%; -webkit-transform: translateY(-webkit-calc(-100% + -50vh)); -moz-transform: translateY(-moz-calc(-100% + -50vh)); -ms-transform: translateY(calc(-100% + -50vh)); -o-transform: translateY(calc(-100% + -50vh)); transform: translateY(calc(-100% + -50vh)); } .gillnet.animate { -webkit-animation: gillnet-animation 5s ease-in-out forwards; -moz-animation: gillnet-animation 5s ease-in-out forwards; -o-animation: gillnet-animation 5s ease-in-out forwards; animation: gillnet-animation 5s ease-in-out forwards; }  .purse_seine { position: absolute; left: 50%; top: -10vh; width: 75vw; height: 105vh; -webkit-transform: translateX(-50%) scaleX(10); -moz-transform: translateX(-50%) scaleX(10); -ms-transform: translateX(-50%) scaleX(10); -o-transform: translateX(-50%) scaleX(10); transform: translateX(-50%) scaleX(10); opacity: 0; -webkit-animation: purse_seine-animation 5s ease-in-out forwards; -moz-animation: purse_seine-animation 5s ease-in-out forwards; -o-animation: purse_seine-animation 5s ease-in-out forwards; animation: purse_seine-animation 5s ease-in-out forwards; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .purse_seine.frontal { z-index: 900; } .purse_seine.behind { z-index: 0; } .purse_seine.animate { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; }  body .scene-board .scene.under-water .backgrounds .species.purse_seine-animation { -webkit-transition: left 1.5s ease-in-out, right 1.5s ease-in-out, top 1.5s ease-in-out, bottom 1.5s ease-in-out; -o-transition: left 1.5s ease-in-out, right 1.5s ease-in-out, top 1.5s ease-in-out, bottom 1.5s ease-in-out; -moz-transition: left 1.5s ease-in-out, right 1.5s ease-in-out, top 1.5s ease-in-out, bottom 1.5s ease-in-out; transition: left 1.5s ease-in-out, right 1.5s ease-in-out, top 1.5s ease-in-out, bottom 1.5s ease-in-out; }  body .scene-board .scene.under-water .backgrounds .species.gillnet-animation { -webkit-transition: -webkit-transform 2s 3s ease-in-out; transition: -webkit-transform 2s 3s ease-in-out; -o-transition: -o-transform 2s 3s ease-in-out; -moz-transition: transform 2s 3s ease-in-out, -moz-transform 2s 3s ease-in-out; transition: transform 2s 3s ease-in-out; transition: transform 2s 3s ease-in-out, -webkit-transform 2s 3s ease-in-out, -moz-transform 2s 3s ease-in-out, -o-transform 2s 3s ease-in-out; }  @-webkit-keyframes purse_seine-animation { 0% { -webkit-transform: translateX(-50%) scaleX(10); transform: translateX(-50%) scaleX(10); opacity: 0; } 25%, 75% { -webkit-transform: translateX(-50%) scaleX(1); transform: translateX(-50%) scaleX(1); opacity: 1; } 100% { -webkit-transform: translateX(-50%) scaleX(1) translateY(-100%); transform: translateX(-50%) scaleX(1) translateY(-100%); opacity: 1; } }  @-moz-keyframes purse_seine-animation { 0% { -moz-transform: translateX(-50%) scaleX(10); transform: translateX(-50%) scaleX(10); opacity: 0; } 25%, 75% { -moz-transform: translateX(-50%) scaleX(1); transform: translateX(-50%) scaleX(1); opacity: 1; } 100% { -moz-transform: translateX(-50%) scaleX(1) translateY(-100%); transform: translateX(-50%) scaleX(1) translateY(-100%); opacity: 1; } }  @-o-keyframes purse_seine-animation { 0% { -o-transform: translateX(-50%) scaleX(10); transform: translateX(-50%) scaleX(10); opacity: 0; } 25%, 75% { -o-transform: translateX(-50%) scaleX(1); transform: translateX(-50%) scaleX(1); opacity: 1; } 100% { -o-transform: translateX(-50%) scaleX(1) translateY(-100%); transform: translateX(-50%) scaleX(1) translateY(-100%); opacity: 1; } }  @keyframes purse_seine-animation { 0% { -webkit-transform: translateX(-50%) scaleX(10); -moz-transform: translateX(-50%) scaleX(10); -o-transform: translateX(-50%) scaleX(10); transform: translateX(-50%) scaleX(10); opacity: 0; } 25%, 75% { -webkit-transform: translateX(-50%) scaleX(1); -moz-transform: translateX(-50%) scaleX(1); -o-transform: translateX(-50%) scaleX(1); transform: translateX(-50%) scaleX(1); opacity: 1; } 100% { -webkit-transform: translateX(-50%) scaleX(1) translateY(-100%); -moz-transform: translateX(-50%) scaleX(1) translateY(-100%); -o-transform: translateX(-50%) scaleX(1) translateY(-100%); transform: translateX(-50%) scaleX(1) translateY(-100%); opacity: 1; } }  @-webkit-keyframes gillnet-animation { 0%, 99% { -webkit-transform: translateY(-webkit-calc(-100% + -50vh)); transform: translateY(calc(-100% + -50vh)); opacity: 1; } 40%, 60% { -webkit-transform: translateY(-85%); transform: translateY(-85%); opacity: 1; } 100% { -webkit-transform: translateY(-webkit-calc(-100% + -50vh)); transform: translateY(calc(-100% + -50vh)); opacity: 0; } }  @-moz-keyframes gillnet-animation { 0%, 99% { -moz-transform: translateY(-moz-calc(-100% + -50vh)); transform: translateY(calc(-100% + -50vh)); opacity: 1; } 40%, 60% { -moz-transform: translateY(-85%); transform: translateY(-85%); opacity: 1; } 100% { -moz-transform: translateY(-moz-calc(-100% + -50vh)); transform: translateY(calc(-100% + -50vh)); opacity: 0; } }  @-o-keyframes gillnet-animation { 0%, 99% { -o-transform: translateY(calc(-100% + -50vh)); transform: translateY(calc(-100% + -50vh)); opacity: 1; } 40%, 60% { -o-transform: translateY(-85%); transform: translateY(-85%); opacity: 1; } 100% { -o-transform: translateY(calc(-100% + -50vh)); transform: translateY(calc(-100% + -50vh)); opacity: 0; } }  @keyframes gillnet-animation { 0%, 99% { -webkit-transform: translateY(-webkit-calc(-100% + -50vh)); -moz-transform: translateY(-moz-calc(-100% + -50vh)); -o-transform: translateY(calc(-100% + -50vh)); transform: translateY(calc(-100% + -50vh)); opacity: 1; } 40%, 60% { -webkit-transform: translateY(-85%); -moz-transform: translateY(-85%); -o-transform: translateY(-85%); transform: translateY(-85%); opacity: 1; } 100% { -webkit-transform: translateY(-webkit-calc(-100% + -50vh)); -moz-transform: translateY(-moz-calc(-100% + -50vh)); -o-transform: translateY(calc(-100% + -50vh)); transform: translateY(calc(-100% + -50vh)); opacity: 0; } }  @-webkit-keyframes trawl-animation { 0% { -webkit-transform: translateX(-100%) rotate(0deg) translateZ(0); transform: translateX(-100%) rotate(0deg) translateZ(0); } 100% { -webkit-transform: translateX(100vw) rotate(5deg) translateZ(0); transform: translateX(100vw) rotate(5deg) translateZ(0); } }  @-moz-keyframes trawl-animation { 0% { -moz-transform: translateX(-100%) rotate(0deg) translateZ(0); transform: translateX(-100%) rotate(0deg) translateZ(0); } 100% { -moz-transform: translateX(100vw) rotate(5deg) translateZ(0); transform: translateX(100vw) rotate(5deg) translateZ(0); } }  @-o-keyframes trawl-animation { 0% { transform: translateX(-100%) rotate(0deg) translateZ(0); } 100% { transform: translateX(100vw) rotate(5deg) translateZ(0); } }  @keyframes trawl-animation { 0% { -webkit-transform: translateX(-100%) rotate(0deg) translateZ(0); -moz-transform: translateX(-100%) rotate(0deg) translateZ(0); transform: translateX(-100%) rotate(0deg) translateZ(0); } 100% { -webkit-transform: translateX(100vw) rotate(5deg) translateZ(0); -moz-transform: translateX(100vw) rotate(5deg) translateZ(0); transform: translateX(100vw) rotate(5deg) translateZ(0); } }  @-webkit-keyframes aquaculture-collect-net { 0%, 75% { -webkit-transform: translateY(0%); transform: translateY(0%); } 100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } }  @-moz-keyframes aquaculture-collect-net { 0%, 75% { -moz-transform: translateY(0%); transform: translateY(0%); } 100% { -moz-transform: translateY(-100%); transform: translateY(-100%); } }  @-o-keyframes aquaculture-collect-net { 0%, 75% { -o-transform: translateY(0%); transform: translateY(0%); } 100% { -o-transform: translateY(-100%); transform: translateY(-100%); } }  @keyframes aquaculture-collect-net { 0%, 75% { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } 100% { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } }  @-webkit-keyframes aqua_culture_net-animation { 0% { -webkit-transform: translateY(-100%) translateX(-50%); transform: translateY(-100%) translateX(-50%); } 100% { -webkit-transform: translateY(0) translateX(-50%); transform: translateY(0) translateX(-50%); } }  @-moz-keyframes aqua_culture_net-animation { 0% { -moz-transform: translateY(-100%) translateX(-50%); transform: translateY(-100%) translateX(-50%); } 100% { -moz-transform: translateY(0) translateX(-50%); transform: translateY(0) translateX(-50%); } }  @-o-keyframes aqua_culture_net-animation { 0% { -o-transform: translateY(-100%) translateX(-50%); transform: translateY(-100%) translateX(-50%); } 100% { -o-transform: translateY(0) translateX(-50%); transform: translateY(0) translateX(-50%); } }  @keyframes aqua_culture_net-animation { 0% { -webkit-transform: translateY(-100%) translateX(-50%); -moz-transform: translateY(-100%) translateX(-50%); -o-transform: translateY(-100%) translateX(-50%); transform: translateY(-100%) translateX(-50%); } 100% { -webkit-transform: translateY(0) translateX(-50%); -moz-transform: translateY(0) translateX(-50%); -o-transform: translateY(0) translateX(-50%); transform: translateY(0) translateX(-50%); } }  @media all and (max-width: 991px) { div[data-cookiefirst-widget="banner"] { padding-left: 0; padding-right: 0; } }  div[data-cookiefirst-widget="banner"] > div { width: 100%; min-width: 0; max-width: 1120px; padding: 30px 15px 30px 240px; margin: 0 auto; background-image: url(../img/380x475_sardine.png); -webkit-background-size: 217px 270px; -moz-background-size: 217px 270px; background-size: 217px 270px; background-position: left center; background-repeat: no-repeat; } @media all and (max-width: 991px) { div[data-cookiefirst-widget="banner"] > div { background-image: none; padding: 15px 0; } } div[data-cookiefirst-widget="banner"] > div > div > span { font-size: 20px; color: #80c3ff; } div[data-cookiefirst-widget="banner"] > div > div:last-child > div:last-child > div { max-width: none; } div[data-cookiefirst-widget="banner"] > div > div:last-child > div:last-child > div:first-child { margin-left: auto; }  div[data-cookiefirst-widget="banner"] button { padding: 8px 30px !important; } div[data-cookiefirst-widget="banner"] button[data-cf-action="adjust"] { display: none; }  div[data-cookiefirst-widget="modal"] > div > div > div:last-child { display: none; }  div[data-cookiefirst-widget="modal"] > div:first-child > div:first-child > div:nth-child(4) > div:first-child > div:nth-child(2) > div:nth-child(4) > div:last-child { display: none; }  div[data-cookiefirst-widget="modal"] > div > div > div > button:nth-child(n+2) { margin-top: 12px; }  div[data-cookiefirst-widget="modal"] > div > div > div > button:nth-child(2) { margin-right: 6px; }  div[data-cookiefirst-widget="modal"] > div > div > div > button:nth-child(3) { margin-left: 6px; }  div[data-cookiefirst-widget="modal"] p { font-size: 12px; }  div[data-cookiefirst-widget="modal"] p + p { margin-top: 1em; }  div[data-cookiefirst-widget="modal"] strong { font-weight: bold; }  div[data-cookiefirst-widget="modal"] h2, div[data-cookiefirst-widget="modal"] h3 { text-transform: none; letter-spacing: normal; }  div[data-cookiefirst-widget="modal"] h4 { font-weight: bold; }  div[data-cookiefirst-widget="modal"] h2 + h4 { margin-top: 2em; }  div[data-cookiefirst-widget="modal"] p + h4, div[data-cookiefirst-widget="modal"] dl + h4 { margin-top: 1em; }  body.spongebob .spongebob { display: block; }  div.spongebob { display: none; position: absolute; right: 20%; bottom: 10%; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-background-size: contain; -moz-background-size: contain; background-size: contain; height: 7vw; width: 7vw; background-repeat: no-repeat; z-index: 999; -webkit-animation: sponge 7s infinite; -moz-animation: sponge 7s infinite; -o-animation: sponge 7s infinite; animation: sponge 7s infinite; }  @-webkit-keyframes sponge { 0%, 30%, 70%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-200%); transform: translateY(-200%); } }  @-moz-keyframes sponge { 0%, 30%, 70%, 100% { -moz-transform: translateY(0); transform: translateY(0); } 50% { -moz-transform: translateY(-200%); transform: translateY(-200%); } }  @-o-keyframes sponge { 0%, 30%, 70%, 100% { -o-transform: translateY(0); transform: translateY(0); } 50% { -o-transform: translateY(-200%); transform: translateY(-200%); } }  @keyframes sponge { 0%, 30%, 70%, 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-200%); -moz-transform: translateY(-200%); -o-transform: translateY(-200%); transform: translateY(-200%); } }  .home .demo-gallery {padding-bottom: 80px;} .mobileimg11{margin-top:40px; overflow: auto;height:500px;margin:10px 0}  .scrollgall{overflow: auto; height:400px; margin:10px 0 10px 0; scrollbar-width: none;text-align:center;border-bottom:1px solid #999}
.scrollgall1{overflow: auto; height:450px; margin:10px 0 10px 0; scrollbar-width: none;text-align:center;}
.rotate {color:#f2f2f2;float:left;margin:0 0 -25px 0;font-size:12px;letter-spacing:1px;padding:3px 18px 3px 10px;background: #f7643c; border-radius: 50% 80% 80% 50%; transform: rotate(321deg) ; -webkit-transform: rotate(321deg) ; -moz-transform: rotate(321deg) ; -o-transform: rotate(321deg) ; -ms-transform: rotate(321deg) ; } .rotatem {color:#f2f2f2;float:left;margin:19px -50px -50px 0;font-size:10px;letter-spacing:1px;padding:3px 18px 3px 10px;background: #f7643c; border-radius: 50% 80% 80% 50%; transform: rotate(321deg) ; -webkit-transform: rotate(321deg) ; -moz-transform: rotate(321deg) ; -o-transform: rotate(321deg) ; -ms-transform: rotate(321deg) ; }  .timeday1{width:50px;float:left;margin-bottom:-35px;opacity:0.5} .timeday1m{width:45px;float:left;margin-bottom:-45px;margin-right:-30px;opacity:0.5}  .delete {text-decoration: line-through;padding-right:3px;opacity:0.6}  ::-webkit-scrollbar { display: none; }  .text2 {text-align:left;} .text2 p {margin:0 0 15px 0}  .border101 {border-radius:50%; border:solid 4px #ffb400} .text2 {text-align:left;} .text2 p {margin:0 0 15px 0}  .form-control-1 { width:48%; padding:.375rem .75rem; font-size:0.9rem; font-weight:400; line-height:1.5; color:#212529; background-clip:padding-box; border:1px solid #ced4da; border-radius:.25rem; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out } em {font-style:italic} 

.bordfad {-webkit-box-shadow: 0px 1px 8px 0px rgba(34, 60, 80, 0.35); -moz-box-shadow: 0px 1px 8px 0px rgba(34, 60, 80, 0.35); box-shadow: 0px 1px 8px 0px rgba(34, 60, 80, 0.35);}




.ml_wrapper {
    position: fixed;
    bottom: 75px;
    right: 75px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 150;
}	
	
.ml_bgimg {

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: all 0.2s linear;
}
	
.ml_btn_label {
    position: relative;
    cursor: pointer;
    z-index: 150;
    width: 60px;
    height: 60px;
    justify-content: center;
    align-items: center;
    background: #ffb400;
    border-radius: 50%;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 0 20px 0 rgb(0 0 0 / 30%);
    overflow: hidden;
}	
	
.ml_btn_input {display: none;}
	
.ml_icon_link {
    border-radius: 50%;
    box-shadow: 0 0 20px 0 rgb(0 0 0 / 30%);
    opacity: 0;
    visibility: hidden;
    width: 50px;
    height: 50px;
}	
	
.ml_btn_input:checked~.ml_icon_link {
    opacity: 1;
    visibility: visible;
}		
	
.ml_btn_input:checked~a:nth-of-type(1) {
    transition: all 0.2s ease-in-out;
    transform: translate(0,-135%);
}
	
.ml_btn_input:checked~a:nth-of-type(2) {
    transition: all 0.225s ease-in-out;
    transform: translate(0,-255%);
}
	
.ml_btn_input:checked~a:nth-of-type(3) {
    transition: all 0.25s ease-in-out;
    transform: translate(0,-375%);
}
	
.ml_tooltip {
    position: absolute;
    right: 70px;
    white-space: nowrap;
    background: #fff;
    padding: 6px 9px;
    font-size: 13px;
    border-radius: 3px;
    transform: translateX(0%) translateY(-50%);
    top: 50%;
    background: #292929;
    color: #fff;
    opacity: 0;
    transition: all 0.1s linear;
}	
	
.ml_btn_input:checked+label .ml_icon-close {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}
.ml_icon-close {
    opacity: 0;
    visibility: hidden;
    transform: scale(.1);
}
.ml_icon {
    transition: all 0.3s ease-in-out;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}	
.ml_btn_input:checked+label {background: #fff!important; animation: none;}	
	
	
.ml_icon_link:hover .ml_tooltip {opacity: .85;}

.ml_tooltip {
    position: absolute;
    right: 70px;
    white-space: nowrap;
    background: #fff;
    padding: 6px 9px;
    font-size: 13px;
    border-radius: 3px;
    transform: translateX(0%) translateY(-50%);
    top: 50%;
    background: #292929;
    color: #fff;
    opacity: 0;
    transition: all 0.1s linear;
}	

@media (max-width:1024px) { .ml_wrapper {bottom: 200px; right: 24px;} }
@media (max-width:480px) { .ml_wrapper {bottom: 35px; z-index:100} }

.error {color:#dc3545;}