html, body { min-width: 320px !important; font-display: swap !important; } 
body { width: 100vw; height: auto;  font-family: 'Futura', sans-serif; font-weight: normal; font-style: normal; background: #2e2e2e; overflow-x: hidden; }

:root {

    --font-convert-ratio: 0.1857142; 
    --screen-convert-ratio: 0.444444444; 
    
    /* --screen-convert-ratio: 0.421875; 36 * 16 */
    --color-dark-cherry: #ac0023;
    --color-tangerine: #f54613;
    --color-florida-orange: #fb7c2b;
}

.supersymetric { position: absolute; top: 50%; left: 50%; -ms-transform: translate( -50%, -50% ); -webkit-transform: translate( -50%, -50% ); transform: translate( -50%, -50% ); }
.vertical-supersymetric { position: absolute; top: 50%; -ms-transform: translate( 0, -50% ); -webkit-transform: translate( 0, -50% ); transform: translate( 0, -50% ); }

.grad01 {
    background: #ba0c2f;
    background: -moz-linear-gradient(-45deg,  #ba0c2f 0%, #ed1c24 100%);
    background: -webkit-linear-gradient(-45deg,  #ba0c2f 0%,#ed1c24 100%);
    background: linear-gradient(135deg,  #ba0c2f 0%,#ed1c24 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ba0c2f', endColorstr='#ed1c24',GradientType=1 );
}

.grad02 {
    background: var( --color-dark-cherry );
    background: -moz-linear-gradient(45deg, var( --color-dark-cherry ) 0%, var( --color-tangerine ) 50%, var( --color-florida-orange ) 100% );
    background: -moz-linear-gradient(45deg, var( --color-dark-cherry ) 0%, var( --color-tangerine ) 50%, var( --color-florida-orange ) 100% );
    background: -webkit-linear-gradient(45deg, var( --color-dark-cherry ) 0%, var( --color-tangerine ) 50%, var( --color-florida-orange ) 100% );
    background: linear-gradient(45deg, var( --color-dark-cherry ) 0%, var( --color-tangerine ) 50%, var( --color-florida-orange ) 100% );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ac0023', endColorstr='#fb7c2b',GradientType=1 );
}


.grad02.revert {
    background: var( --color-florida-orange );
    background: -moz-linear-gradient(45deg, var( --color-florida-orange ) 0%, var( --color-tangerine ) 50%, var( --color-dark-cherry ) 100% );
    background: -moz-linear-gradient(45deg, var( --color-florida-orange ) 0%, var( --color-tangerine ) 50%, var( --color-dark-cherry ) 100% );
    background: -webkit-linear-gradient(45deg, var( --color-florida-orange ) 0%, var( --color-tangerine ) 50%, var( --color-dark-cherry ) 100% );
    background: linear-gradient(45deg, var( --color-florida-orange ) 0%, var( --color-tangerine ) 50%, var( --color-dark-cherry ) 100% );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ac0023', endColorstr='#fb7c2b',GradientType=1 );
}

@-webkit-keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    } to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


@-webkit-keyframes move {
    0% {
        -webkit-transform-origin: bottom left;
        -moz-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
        -o-transform-origin: bottom left;
        transform-origin: bottom left;
        transform: scale(1.0);
        -ms-transform: scale(1.0);
        -webkit-transform: scale(1.0);
        -o-transform: scale(1.0);
        -moz-transform: scale(1.0);
    }
    50% {
        transform: scale(1.2);
        -ms-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -o-transform: scale(1.2);
        -moz-transform: scale(1.2);
    }
    100% {
        transform: scale(1.0);
        -ms-transform: scale(1.0);
        -webkit-transform: scale(1.0);
        -o-transform: scale(1.0);
        -moz-transform: scale(1.0);
    }
}

@keyframes move {
    0% {
        -webkit-transform-origin: bottom left;
        -moz-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
        -o-transform-origin: bottom left;
        transform-origin: bottom left;
        transform: scale(1.0);
        -ms-transform: scale(1.0);
        -webkit-transform: scale(1.0);
        -o-transform: scale(1.0);
        -moz-transform: scale(1.0);
    }
    50% {
        transform: scale(1.2);
        -ms-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -o-transform: scale(1.2);
        -moz-transform: scale(1.2);
    }
    100% {
        transform: scale(1.0);
        -ms-transform: scale(1.0);
        -webkit-transform: scale(1.0);
        -o-transform: scale(1.0);
        -moz-transform: scale(1.0);
    }
}

.atom { height: 100%; }

.transitable.fadein { opacity: 0; }
.active .transitable.fadein { opacity: 1; }

.transitable.slidedown { margin-top: -20vh; }
.active .transitable.slidedown { margin-top: 0; }
.transitable.slidedown.relative { top: -20vh; position: relative; margin-top: 0; }
.active .transitable.slidedown.relative { top: 0; }
.transitable.xs-slidedown { margin-top: -7vh; }
.active .transitable.xs-slidedown { margin-top: 0; }
.transitable.xs-slidedown.relative {  top: -7vh; position: relative; margin-top: 0; }
.active .transitable.xs-slidedown.relative { top: 0; }

.transitable.zoomin { transform: scale(.3); }
.active .transitable.zoomin { transform: scale(1); }

.transitable.slideup { margin-top: 20vh; }
.active .transitable.slideup { margin-top: 0; }
.transitable.slideup.relative { top: 20vh; position: relative; margin-top: 0; }
.active .transitable.slideup.relative { top: 0; }
.transitable.xs-slideup { margin-top: 7vh; }
.active .transitable.xs-slideup { margin-top: 0; }
.transitable.xs-slideup.relative {  top: 7vh; position: relative; margin-top: 0; }
.active .transitable.xs-slideup.relative { top: 0; }


.screens-holder { height: 100vh; width: 100vw; position: relative; border-bottom: 1px solid #000; border-top: 1px solid #000; }

.screens-holder .screens { opacity: 0; pointer-events: none; overflow: hidden; background: #2e2e2e; height: 100vh;
    width: calc(100vh / var( --screen-convert-ratio ) ); background: #202020; zoom: 0.6;  }
.screens-holder .screens.active { opacity: 1; pointer-events: all; }

.screens-holder .screens .layout-holder { margin: 0; z-index: 1; display: flex; flex-wrap: wrap; width: 100vw; height: 100vh; 
    align-content: start; height: 100%; width: 100%; position: relative; }
    
    
.screens-holder .screens.frames { z-index: 9999; background: transparent; 
    -webkit-box-shadow: 0 0 0 6px #000; box-shadow: 0 0 0 6px #000; overflow: visible !important; }
.screens-holder .screens.frames .module { background: transparent; overflow: visible;
    -webkit-box-shadow: inset 0 0 100px 0 #000, 0 0 0 2px #000, inset 0 0 0 2px #0000; 
    box-shadow:inset 0 0 100px 0 #000, 0 0 0 2px #000, inset 0 0 0 2px #000; }

.screens-holder .screens.frames.hidden { opacity: 0; }

.screens-holder .trigger-info { width: calc( 60vh / var( --screen-convert-ratio ) ); margin: 80px auto 0 auto; }
.screens-holder .trigger-info p { color: #f0f0f0; line-height: 30px; }
.screens-holder .trigger-info p em { }
.screens-holder .trigger-info p a { color: #f0f0f0; background: #202020; display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; margin-left: 6px; border-radius: 50%; }
.screens-holder .trigger-info p a.is-active,
.screens-holder .trigger-info p a.is-hidden { opacity: 0.5; }
.screens-holder .trigger-info p a:hover { color: lime; }
.screens-holder .trigger-info p a span { position: relative; top: 1px; }

.atom-unsafe-html iframe { background:#fff; width:100%; height: 100%; }