html, body {
    min-height: auto;
}

.als-header-wrap-2019-inner {
//    background: rgba(255,255,255,0)!important;
}
/*.announce.cover-white .als-grid, .announce.cover-white .cover {
    color: #000;
}
.announce.cover-white .als-grid .als-grid-title ul.als-grid-title-ul li.active {
    border-color: #000;
}
.announce.cover-white .als-grid .als-grid-title ul.als-grid-title-ul li a, .announce.cover-white .top-tabs, .announce.cover-white .top-tabs a {
    color: #000;
}
.als-header-wrap-2019 .als-menu-v2 menu li a, .als-header-wrap-2019 .als-menu-v2 menu li span {
    color: #000!important;
}*/
.als-header-wrap-2019 .als-menu-v2 menu li.active a, .als-header-wrap-2019 .als-menu-v2 .active menu li.active span {
    color: #fff!important;
}
.als-grid-title-ul li.active {
    border-color: #cdcdcd!important;
}
.als-grid-title ul.als-grid-title-ul li a {
    color: #fff;
}
.als-grid-title ul.als-grid-title-ul li.active {
    color: #fff;
}
.anons-title .als-text-title {
    color: #fff;
}
.announce__text, .anons-title .als-text-title {
    color: #fff;
}

.sh-main-wrapper {
    color: #fff;
}
footer.main-footer .als-footer-v2 {
    color: #fff;
}
/*@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
    .als-body-wrap, .als-content-wrap, .als-footer-wrap, .announce {
        background: #1c1d20 url(box-bg-pattern@2x.jpg) repeat;
        background-size: contain;
    }
}
.als-body-wrap, .als-content-wrap, .als-footer-wrap, .announce {
    background: #1c1d20 url(box-bg-pattern.jpg) repeat;
}*/
.als-body-wrap, .als-content-wrap, .als-footer-wrap, .announce {
    background: #1c1d20;
}

.als-browser {
    box-shadow: 0px 30px 50px rgba(0, 0, 0, 0.25);
}
/*.als-browser_desktop {
    box-shadow: 0px 30px 50px rgba(0, 0, 0, 0.25);
}*/

.als-body-wrap {
    overflow: hidden;
}

/**/
/*#noshadow .als-browser_desktop {
    box-shadow: none;
}*/
.task{
    background: transparent;
    color: white!important;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    position: relative;
    z-index: 2;
}
.cover {
    position: relative;
    width: 100%;
    min-height: 0;
}
.cover-content {
    z-index: 33;
}
@media(max-width: 800px) {
    .cover {
        height: 600px;
    }
}
.credits {
    background-color: rgba(0,0,0,0.5);
    //color: #fff;
    position: relative;
    z-index: 99;
}

.cover__bg {
    position: relative;
    margin: 0 auto;
    top: 40px;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 1;
}
.cover__greenbg {
    position: absolute;
    top: 0px;
    left: 0%;
    width: 97%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
.cover__greenmain {
    /*margin-top: -60px;
    margin-left: 25%;*/
    position: absolute;
    margin-top: -20%;
    right: 0;
    width: 100%;
    -webkit-animation-duration: 40s;
    animation-duration: 40s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    animation-name: plate-16;
}
@keyframes plate-16{
    0%  { transform: rotate(-12deg); }
    50% { transform: rotate(12deg); }
    100%{ transform: rotate(-12deg); }
}
.cover__bluebg {
    position: absolute;
    top: -0%;
    left: 103%;
    width: 97%;
    transform: translate(-50%, -35%);
    z-index: 2;
}
.cover__bluemain {
    position: absolute;
    width: 100%;
    margin-top: -60%;
    -webkit-animation-duration: 25s;
    animation-duration: 25s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    animation-name: plate-8;
}
@keyframes plate-8{
    0%  { transform: rotate(0deg); }
    50% { transform: rotate(-10deg); }
    100%{ transform: rotate(0deg); }
}
.cover__greenbox {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 58%;
    transform: translate(-20%, 40%);
    z-index: 3;
}
.cover__greenbox img {
/*  -webkit-filter: drop-shadow(8px 8px 10px gray); 
  filter: drop-shadow(8px 8px 10px black); */
}
.cover__greencam {
    position: absolute;
    top: -60px;
    left: 52%;
    width: 19%;
    //transform: translate(0%, 0%);
    z-index: 3;
}
.cover__greenbar {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25%;
    transform: translate(-25%, 300%);
    z-index: 3;
}
.cover__bluebox {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 66%;
    transform: translate(-60%, 10%);
    z-index: 3;
}
.cover__bluejbl {
    position: absolute;
    top: 0%;
    left: 10%;
    width: 26%;
    transform: translate(0%, -50%); /*-100*/
    z-index: 3;
}
.cover__blueear {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22%;
    transform: translate(-220%, 85%);
    z-index: 3;
}
.cover__bluecam {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12%;
    transform: translate(-130%, 350%);
    z-index: 3;
}
@media(max-width: 800px) { 
    .cover__greenmain { width: 110%; } 
    .cover__greenbox { transform: translate(-20%, 45%); }
    .cover__bluemain { width: 110%; } 
    .cover__bluebox { transform: translate(-60%, 20%); }
    .cover__greenbar { margin-top: 15%; }
    .cover__blueear { margin-top: 15%; }
    .cover__bluecam { margin-top: 15%; }
}
@media(max-width: 600px) { 
    .cover__greenmain { width: 120%; } 
    .cover__greenbox { transform: translate(-20%, 55%); }
    .cover__bluemain { width: 120%; } 
    .cover__bluebox { transform: translate(-60%, 40%); }
    .cover__greenbar { margin-top: 35%; }
    .cover__blueear { margin-top: 35%; }
    .cover__bluecam { margin-top: 35%; }
}
@media(max-width: 450px) { 
    .cover__greenmain { width: 130%; } 
    .cover__greenbox { transform: translate(-20%, 65%); }
    .cover__bluemain { width: 130%; }
    .cover__bluebox { transform: translate(-60%, 60%); } 
    .cover__greenbar { margin-top: 55%; }
    .cover__blueear { margin-top: 55%; }
    .cover__bluecam { margin-top: 55%; }
}
@media(max-width: 350px) { 
    .cover__greenmain { width: 140%; } 
    .cover__greenbox { transform: translate(-20%, 75%); }
    .cover__bluemain { width: 140%; } 
    .cover__bluebox { transform: translate(-60%, 80%); }
    .cover__greenbar { margin-top: 75%; }
    .cover__blueear { margin-top: 75%; }
    .cover__bluecam { margin-top: 75%; }
}

.l1_anim {
    background: #000 50% 0/cover no-repeat;
    background-image: url('box-layout-01.jpg');
    width: 100%;
    height: 100vh;
    position: relative;
    z-index: 100;
    margin-bottom: -1px;
}
.l1_anim:before {
    content: "";
    display: block;
    padding-top: 80%
}
@media (min-device-pixel-ratio:2), (-webkit-min-device-pixel-ratio:2), (min--moz-device-pixel-ratio:2), (-o-min-device-pixel-ratio:2) {
    .l1 video {
        background: #000 50% 0/cover no-repeat;
        background-image: url('box-index-start@2x.jpg');
    }    
}
@media (max-device-pixel-ratio:1), (-webkit-max-device-pixel-ratio:1), (max--moz-device-pixel-ratio:1), (-o-max-device-pixel-ratio:1) {
    .l1 video {
        background: #000 50% 0/cover no-repeat;
        background-image: url('box-index-start@1x.jpg');
    }    
}      
@media (min-device-pixel-ratio:2), (-webkit-min-device-pixel-ratio:2), (min--moz-device-pixel-ratio:2), (-o-min-device-pixel-ratio:2) {
    .l3 video {
        background: #000 50% 0/cover no-repeat;
        background-image: url('box-index-product@2x.jpg');
    }    
}
@media (max-device-pixel-ratio:1), (-webkit-max-device-pixel-ratio:1), (max--moz-device-pixel-ratio:1), (-o-max-device-pixel-ratio:1) {
    .l3 video {
        background: #000 50% 0/cover no-repeat;
        background-image: url('box-index-product@1x.jpg');
    }    
}             
.l2_anim {
    background: #000 50% 0/cover no-repeat;
    background-image: url('box-screen-11.jpg');
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 100;
    margin-bottom: -1px;
}
.l2_anim:before {
    content: "";
    display: block;
    padding-top: 100%
}

.m1_anim {
    background: #000 50% 0/cover no-repeat;
    background-image: url('box-mobile-03.jpg');
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 100;
    margin-bottom: -1px;
}
.m1_anim:before {
    content: "";
    display: block;
    padding-top: 80%
}
.m2_anim {
    background: #000 50% 0/cover no-repeat;
    background-image: url('box-mobile-04.jpg');
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 100;
    margin-bottom: -1px;
}
.m2_anim:before {
    content: "";
    display: block;
    padding-top: 100%
}

.announce__sbox {
    position:relative;
    display: block;
    width: 100%;
    height: auto;
    text-align: center;
    z-index: 0;
    padding: 2%;
}
.announce__sbg {
    width: 100%;
}
.announce__sbox1 {
    position: absolute;
    width: 70%;
    top: 0%;
    left: 0%;
    z-index: 5;
}
.announce__sbox2 {
    position: absolute;
    width: 30%;
    top: 13%;
    left: 70%;
    z-index: 5;
}
.announce__sbox3 {
    position: absolute;
    width: 30%;
    top: 40%;
    left: 0%;
    z-index: 5;
}
.announce__sbox4 {
    position: absolute;
    width: 70%;
    top: 50%;
    left: 30%;
    z-index: 5;
}
.announce__purplebg {
    position: absolute;
    top: 0px;
    left: 50%;
    width: 80%;
    transform: translate(13%, -40%);
    z-index: 2;
}
.announce__purplemain {
    width: 100%;
    -webkit-animation-duration: 25s;
    animation-duration: 25s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    animation-name: plate-4;
}
@keyframes plate-4{
    0%  { transform: rotate(-12deg); }
    50% { transform: rotate(10deg); }
    100%{ transform: rotate(-12deg); }
}
.announce__purplebar {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30%;
    transform: translate(-80%, 10%) rotate(0deg);
    z-index: 3;
}
.announce__purplepop {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25%;
    transform: translate(-120%, -100%) rotate(90deg);
    z-index: 3;
}
.announce__orangebg {
    position: absolute;
    top: 0px;
    left: 50%;
    width: 80%;
    transform: translate(-100%, 25%);
    z-index: 2;
}
.announce__orangemain {
    width: 100%;
    -webkit-animation-duration: 30s;
    animation-duration: 30s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    animation-name: plate-2;
}
@keyframes plate-2{
    0%  { transform: rotate(12deg); }
    50% { transform: rotate(2deg); }
    100%{ transform: rotate(12deg); }
}
.announce__orangefnt {
    position: absolute;
    top: 53%;
    left: 50%;
    width: 25%;
    transform: translate(150%, -140%);
    z-index: 3;
}
@media(max-width: 600px) {
    .announce__orangefnt { top: 48%; }
    .announce__sbox3 { top: 38%; }
    .announce__sbox4 { top: 48%; }
/*    .l2_anim { height: 50vh; }
}
@media(max-width: 450px) {
    .l2_anim { height: 40vh; }*/
}

.announce__redbg {
    position: absolute;
    top: 0px;
    left: 50%;
    width: 80%;
    transform: translate(13%, 245%);
    z-index: 2;
}
.announce__redmain {
    width: 100%;
    -webkit-animation-duration: 100s;
    animation-duration: 40s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    animation-name: plate-1;
}
@keyframes plate-1{
    0%  { transform: rotateX(12deg); }
    50% { transform: rotateX(-1deg); }
    100%{ transform: rotateX(12deg); }
}