/* --------------------------------------------- reset css --------------------------------------------- */

/* reset css */ 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, font, 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 {margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent;}
/* reset css */ body {line-height: 1;}
/* reset css */ textarea {resize: none;}
/* reset css */ blockquote, q {quotes: none;}
/* reset css */ blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
/* reset css */ :focus {outline: 0;}
/* reset css */ ins {text-decoration: none;}
/* reset css */ del {text-decoration: line-through;}
/* reset css */ table {border-collapse: collapse; border-spacing: 0;}
/* reset css */ td {vertical-align: top;}
/* reset css */ *, *:before, *:after {box-sizing: border-box;}

/* typog css */ strong {text-shadow: none;}
/* typog css */ h1, h2, h3, h4, h5, h6 {color: #fff;}
/* typog css */ body, input {color: #fff; font-size: 1.5em; position: relative;}
/* typog css */ p {color: #788;}
/* typog css */ strong {color: #fff;}
/* typog css */ a {color: #800; display: inline;}
/* typog css */ a:focus {border: none;}
/* typog css */ a[href] {color: #fb2;}
/* typog css */ a[href]:hover {}
/* typog css */ hr {border: 0 #ccc solid; border-top-width: 1px; clear: both; height: 0;}
/* typog css */ ol {list-style: decimal; /*list-style-position: inside;*/}
/* typog css */ ul, ol, li {list-style: none;}

/* setup css */ .show {display: block;}
/* setup css */ .hide {display: block; width: 0px; height: 0px; overflow: hidden;}
/* setup css */ .cursor {cursor: pointer; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none;}
/* setup css */ .disableEvents {pointer-events: none;}
/* setup css */ .spacer64 {margin-top: 64px;}
/* setup css */ .spacer48 {margin-top: 48px;}
/* setup css */ .spacer32 {margin-top: 32px;}
/* setup css */ .spacer24 {margin-top: 24px;}
/* setup css */ .spacer16 {margin-top: 16px;}
/* setup css */ .spacer8 {margin-top: 8px;}

/* -------------------------------------------- fonts css -------------------------------------------- */

/* fface css */ @font-face {font-family: 'digi'; src: url('../fonts/digital-7-mono.ttf');}
/* fface css */ @font-face {font-family: 'doris'; src: url('../fonts/dosis-variable-wght.ttf');}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

body, input {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
}

input {border: none;}
/* b, strong, a {font-family: 'doris', serif;} */

/*.voucher, .neon_left_right, .neon_top, .dedek {outline: 1px solid #fff8;}*/

/* -------------------------------------------- layout css -------------------------------------------- */

html, body {background: #000; width: 100%; min-height: 100%; display: flex; justify-content: center; min-width: 640px;}

.pointer {cursor: pointer;}
.disableUserAction {pointer-events: none; user-select: none;}

.spacer1 {margin-bottom: 48px!important; display: inline-block;}
.spacer2 {margin-bottom: 24px!important; display: inline-block;}

.center {text-align: center;}

#fullScreenFx {position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: #fd04; z-index: 10; backdrop-filter: brightness(1.8); mix-blend-mode: screen; opacity: 0;}

#bg {background: url('../img/bg_a_2.jpg') center top no-repeat, url('../img/bg_b.jpg') center -20px; width: 100%; height: 100%; position: absolute;}

#clouds {width: 100%; height: 100vh; position: absolute; overflow: hidden;}
#clouds .wrapper {width: 100%; height: 200vh; position: absolute; display: flex; justify-content: center; align-items: center; top: -80%;}
#clouds .cld {position: absolute; overflow: visible;}
#clouds .cld img {height: 100%; opacity: 1;}
#clouds .cld_a {height: 40%;}
#clouds .cld_b {height: 52.2%;}
#clouds .cld_c {height: 70.756%;}

@-webkit-keyframes infiniteRotate {
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);}
}

@keyframes infinite-rotate {
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);}
}

#clouds .cld_a .rotate-element {animation: infiniteRotate 60s linear infinite;}
#clouds .cld_b .rotate-element {animation: infiniteRotate 120s linear infinite;}
#clouds .cld_c .rotate-element {animation: infiniteRotate 240s linear infinite;}

#container {width: 100%; position: relative; /*height: fit-content;*/ max-width: 1240px; padding: 1.5em 0 1.5em 0;}

#header {width: 100%; max-height: 100vh; display: flex; justify-content: center;}

#header .dedek {display: flex; justify-content: center; position: relative; z-index: 1;}
#header .dedek .main {max-width: 100%; max-height: 105vh;}

#header .neon_top {position: absolute; top: 11.261261%; z-index: -1; opacity: 25%; display: flex; left: 0; right:0; justify-content: center;}
#header .neon_top.on {opacity: 1;}
#header .neon_top img {width: 100%}
#header .neon_left_right {/*background-color: #fff;*/ position: absolute; top: 24.684684%; bottom: 0%; left: 0%; right: 0%; z-index: -1; opacity: 25%; display: flex; justify-content: center;}
#header .neon_left_right.on {opacity: 1;}

#header .dedek .voucher {position: absolute; top: 34.5%; bottom: 11.44%; left: 20%; right: 20%; -webkit-mask-image: url('../img/voucher_mask.png'); -webkit-mask-size: 100%; display: block; z-index: 1;}
#header .dedek .voucher img {max-width: 100%;}
/*#header .dedek .display {position: absolute; top: 25.135135%; bottom: 67.6576%; left: 33.2%; right: 33.2%;}
#header .dedek .display span {font-family: 'digi'; color: #f00; text-align: center; width: 100%; height: 100%; font-size: 350%; position: absolute; display: flex; align-content: center; justify-content: center; align-items: center;}
#header .dedek .display span.bg {opacity: 0.15;}*/
#header .dedek .display {position: absolute; top: 25.135135%; bottom: 67.6576%; left: 33.2%; right: 33.2%; display: flex; align-content: center; justify-content: center; align-items: center;}
#header .dedek .display span {font-family: 'digi'; color: #f00; text-align: center; position: absolute;}
#header .dedek .display span.bg {opacity: 0.15;}


#header .dedek .i {position: absolute; right: 22.5%; top: 35%; left: 66%;}
#header .dedek .i .i_ico {position: absolute; /*top: 24.684684%; bottom: 0%; left: 0%; right: 0%; z-index: -1;*/ display: flex; justify-content: center;}
#header .dedek .i .i_ico img { width: 100%;}

.ico.info {background: url('../img/i_ico.png') no-repeat; background-size: 100%; position: absolute; right: 22.5%; top: 35%; width: 12.5%; z-index: 1;}
.ico.info::before {content: ''; background: url('../img/i_ico_glow.png') no-repeat; background-size: 100%; padding-top: 100%; display: block;}
.ico.close {background: url('../img/close_ico.png') no-repeat; background-size: 100%; position: absolute; right: -1.5em; top: -1.5em; width: 4em;}
.ico.close::before {content: ''; background: url('../img/close_ico_glow.png') no-repeat; background-size: 100%; padding-top: 100%; display: block;}
/*.ico.rules {background: url('../_gfx_ds5fsd/pravidla_akce_ico.png') no-repeat center; background-size: 100%; position: absolute; right: 22.5%; top: 34%; width: 35%; z-index: 1;}
.ico.rules::before {content: ''; background: url('../_gfx_ds5fsd/pravidla_akce_ico_glow.png') no-repeat center; background-size: 100%; padding-top: 25%; display: block;}*/
.ico.rules {background: url('../img/pravidla_akce_ico.png') no-repeat center, url('../img/pravidla_akce_bg.png') no-repeat center; background-size: 100%, 100% 100%; position: absolute; bottom: 6.5%; width: 33%; z-index: 1; border-radius: 0.3em; box-shadow: 0px 1px 1px #fd8a inset, 0px 8px 16px #000;}
.ico.rules::before {content: ''; background: url('../img/pravidla_akce_ico_glow.png') no-repeat center; background-size: 100%; padding-top: 25%; display: block;}
.ico.rules::after {content: ''; background: url('../img/click.png') no-repeat; background-size: contain; display: block; position: absolute; height: 100%; width: 40%; margin-left: 92%; bottom: -75%;}

.ico::before {-webkit-mask-image: url('../img/animask_03.png'); -webkit-mask-size: 50% 200%; animation: animask_x 5s both linear infinite;}
@-webkit-keyframes animask_x {0% {-webkit-mask-position-x: -100%;} 100% {-webkit-mask-position-x: 100%;}}

#content {display: flex; justify-content: center; flex-direction: column; align-items: center; margin: -2em 0 0 0;}
#content .box_a {background: url("../img/box_bg_a.png"); background-size: 100% 100%; width: 80%; border-radius: 0.25em; box-shadow: #000 0 0 2.5em; padding: 2em; display: flex; flex-direction: column; gap: 1.5em;}
/* #content .box_a {background: linear-gradient(0deg, #00195e, #3f5593, #00195e); width: 80%; border-radius: 0.25em; box-shadow: #000 0 0 2.5em; padding: 2em; display: flex; flex-direction: column; gap: 1.5em;} */
#content .box_a p {color: #6b2;}
/* #content .box_a p {color: #8caaff;} */
#content .box_a .a {background: url("../img/double_arr_r.png") left no-repeat, url("../img/double_arr_l.png") right no-repeat ; background-size: auto 100%; text-align: center; font-size: 1.33em; padding: 0 2em; line-height: 1.25em;}
#content .box_a .c {display: flex; justify-content: center; flex-direction: row; flex-wrap: nowrap;}
#content .box_a .c input {font-size: 1.5em; padding: 0.4em 0.8em;}
#content .box_a .c input[type="email"] {width: 100%; border-radius: 0.15em 0 0 0.15em; color: #455; text-align: center;}
#content .box_a .c input[type="submit"] {background: url("../img/btn_bg_a.png"); background-size: 100% 100%; border-radius: 0 0.15em 0.15em 0; box-shadow: 0px 2px 0px 0px #af48 inset; cursor: pointer;}
/* #content .box_a .c input[type="submit"] {background: linear-gradient(0deg, #2b78ff, #00195e, #2b78ff); border-radius: 0 0.15em 0.15em 0; box-shadow: 0px 2px 0px 0px #1f64fd inset; cursor: pointer;} */
#content .box_a .d {display: flex;}
#content .box_a .d p {width: 100%}
#content .box_a .d .checkbox {padding: 0 1em;}
#content .box_a .d input[type=checkbox] {opacity: 0; position: absolute; pointer-events: none;}
#content .box_a .d input[type=checkbox] + label
{
background: url("../img/form_checkbox_unactive.png");
background-size: 100% 100%;
width: 2em;
height: 2em;
display:inline-block;
padding: 0 0 0 0px;
}
#content .box_a .d input[type=checkbox]:checked + label
{
background: url("../img/form_checkbox_active.png");
background-size: 100% 100%;
width: 2em;
height: 2em;
display:inline-block;
padding: 0 0 0 0px;
}

#content .divider {background: url("../img/divider_h.png") center; background-size: 100% 100%; width: 100%; height: 1px;}

#content .neon_text {opacity: 0.25;}
#content .neon_text.on {opacity: 1; position: absolute; top: 0;}
#content .neon_text img {max-width: 100%; padding: 0 1em;}

#content .watch {display: flex; width: 100%; padding: 0 1em; max-width: 80%; min-width: 25em;}
#content .watch a {width: 50%;}
#content .watch img {width: 100%;}

#content .footer {width: 100%; text-align: center; margin-top: 1em; margin-bottom: 1em; padding: 0 2em;}
#content .footer .divider {margin-bottom: 2px;}
#content .footer p {padding: 1em 3em 1em 3em;}

/* ---------- animask ---------- */

.animask_01 {-webkit-mask-image: url('../img/animask_01.png'); -webkit-mask-size: 50% 50%; animation: animask_01 1s both linear infinite;}

@-webkit-keyframes animask_01 {
  0% {-webkit-mask-position-y: 0%;}
  100% {-webkit-mask-position-y: 100%;}
}

.animask_02 {-webkit-mask-image: url('../img/animask_02.png'); -webkit-mask-size: 100% 16%; animation: animask_02 1s both linear infinite;}

@-webkit-keyframes animask_02 {
  0% {-webkit-mask-position-y: 50%;}
  49.9% {-webkit-mask-position-y: 50%;}
  50% {-webkit-mask-position-y: 58%;}
  99.9% {-webkit-mask-position-y: 58%;}
  100% {-webkit-mask-position-y: 66%;}
}

.animask_03 {
  -webkit-mask-image: url('../img/animask_02.png'); -webkit-mask-size: 100% 300%; -webkit-mask-repeat: no-repeat; animation: animask_03 2s both linear infinite;}

@-webkit-keyframes animask_03 {
  0% {-webkit-mask-position-y: 0%;}
  50% {-webkit-mask-position-y: 100%;}
  100% {-webkit-mask-position-y: 0%;}
}

.animask_04 {-webkit-mask-image: url('../img/animask_02.png'); -webkit-mask-position: 50% 50%; -webkit-mask-repeat: no-repeat; animation: animask_04 1s both linear infinite;}

@-webkit-keyframes animask_04 {
  0% {-webkit-mask-size: 100% 0%;}
  50% {opacity: 1;}
  90% {-webkit-mask-size: 100% 300%;}
  100% {opacity: 0;}
}

.animask_05 {-webkit-mask-image: url('../img/animask_03.png'); -webkit-mask-size: 50% 200%; animation: animask_05 5s both linear infinite;}

@-webkit-keyframes animask_05 {
  0% {-webkit-mask-position-x: -100%;}
  100% {-webkit-mask-position-x: 100%;}
}


/************************************* windowScrollAnimate - wsa  *************************************/

[data-wsa] {visibility: hidden;}

.wsa-fadeIn {
  visibility: hidden;
  -webkit-animation-name: wsa-fadeIn;
  animation-name: wsa-fadeIn;
  -webkit-animation-duration: 10s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes wsa-fadeIn {
0% {
    visibility: visible;
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}

.wsa-fadeOut {
  visibility: hidden;
  -webkit-animation-name: wsa-fadeOut;
  animation-name: wsa-fadeOut;
  -webkit-animation-duration: 10s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes wsa-fadeOut {
0% {
    visibility: visible;
    opacity: 1;
  }
  100% {
    visibility: visible;
    opacity: 0;
  }
}

.wsa-fadeInZoom360 {
  visibility: hidden;
  -webkit-animation-name: wsa-fadeInZoom360;
  animation-name: wsa-fadeInZoom360;
  -webkit-animation-duration: 10s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes wsa-fadeInZoom360 {
  0% {
    visibility: visible;
    opacity: 0;
    -webkit-transform: scale(0.5) rotate(-360deg);
  }
  100% {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
  }
}

.wsa-fadeInZoomIn {
  visibility: hidden;
  -webkit-animation-name: wsa-fadeInZoomIn;
  animation-name: wsa-fadeInZoomIn;
  -webkit-animation-duration: 10s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes wsa-fadeInZoomIn {
  0% {
    visibility: visible;
    opacity: 0;
    -webkit-transform: scale(2) rotate(0deg);
  }
  100% {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
  }
}

.wsa-fadeInZoomOut {
  visibility: hidden;
  -webkit-animation-name: wsa-fadeInZoomOut;
  animation-name: wsa-fadeInZoomOut;
  -webkit-animation-duration: 10s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes wsa-fadeInZoomOut {
  0% {
    visibility: visible;
    opacity: 0;
    -webkit-transform: scale(0.5) rotate(0deg);
  }
  100% {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
  }
}

.wsa-slideInLeft {
  visibility: hidden;
  -webkit-animation-name: wsa-slideInLeft;
  animation-name: wsa-slideInLeft;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes wsa-slideInLeft {
  0% {
    opacity: 0;
    visibility: visible;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
    100% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.wsa-slideInRight {
  visibility: hidden;
  -webkit-animation-name: wsa-slideInRight;
  animation-name: wsa-slideInRight;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes wsa-slideInRight {
  0% {
    opacity: 0;
    visibility: visible;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
    100% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.wsa-slideInTop {
  visibility: hidden;
  -webkit-animation-name: wsa-slideInTop;
  animation-name: wsa-slideInTop;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes wsa-slideInTop {
  0% {
    visibility: visible;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    visibility: visible;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

.wsa-slideInBottom {
  visibility: hidden;
  -webkit-animation-name: wsa-slideInBottom;
  animation-name: wsa-slideInBottom;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes wsa-slideInBottom {
  0% {
    visibility: visible;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    visibility: visible;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

/* ---------- formStyler ---------- */

.options {display: flex; flex-direction: row; flex-wrap: wrap;}
.options .option {cursor: pointer; user-select: none; width: 12.5%; min-width: 83px; display: block; float: left;}
.options .option div {background: #3825; border-radius: 0.1em; padding: 0.4em; margin: 2px; text-align: center; color: #dfa8; font-family: serif;}
.options .option.selected div {background: #af07; outline: 2px #af07 solid; outline-offset: -2px; color: #fff;}

/*.options {display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.15em;}
.options .option {background: #fff2; padding: 0.4em; text-align: center; cursor: pointer; user-select: none;}
.options .option.selected {background: #fff6;}*/

/* ---------- alerter ---------- */

.alerterBackground {background-color: rgba(0, 0, 0, 0.85); box-shadow: inset 0 0 64px 32px #000; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 5000; display: flex; justify-content: center; align-items: center;}
.alerterBackground .closeLayer {position: absolute; left: 0; right: 0; top: 0; bottom: 0;}
.alerterWindow {font-size: 1.4rem; line-height: 1.25; color: #e0e0e0; background: url("../img/box_bg_b.png"); background-size: 100% 100%; min-width: 200px; max-width: 700px; max-height: 90vh; padding: 1.5em; margin: 2em; border-radius: 8px; text-align: left; box-shadow: #000a 0 0 20px; position: relative; display: flex;}
.alertercloseButton {background: url("../img/close.png") no-repeat center top; width: 64px; height: 64px; background-size: contain; display: block; position: absolute; right: -4px; top: -4px;}

.alertercloseButton {position: absolute; right: 22.5%; top: 35%; left: 66%;}
.alertercloseButton .x_ico {position: absolute; /*top: 24.684684%; bottom: 0%; left: 0%; right: 0%; z-index: -1;*/ display: flex; justify-content: center;}
.alertercloseButton .x_ico img { width: 100%;}

.alerterWindow h1 {color: #ef5; margin: 0; line-height: 1.1;}
.alerterWindow p {color: #e0e0e0;}
.alerterWindow * {margin: revert; padding: revert;}
.alerterWindow ul, .alerterWindow ol, .alerterWindow li {list-style: unset;}


.maintenanceInfo {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  max-width: 600px;
  width: 90%;
  font-size: 1.4em;
  line-height: 1.2;
  text-align: center;
  border-radius: 20px;
  background-color: rgba(228, 161, 0, 0.8);
  padding: 20px 32px;
}

.alerterFadeIn {
  visibility: hidden;
  animation-name: alerterFadeIn;
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes alerterFadeIn {
  0% {
    visibility: visible;
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}

.alerterFadeOut {
  visibility: hidden;
  animation-name: alerterFadeOut;
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes alerterFadeOut {
  0% {
    visibility: visible;
    opacity: 1;
  }
  100% {
    visibility: visible;
    opacity: 0;
  }
}






.voucherIn {
  visibility: hidden;
  -webkit-animation-name: voucherIn;
  animation-name: voucherIn;
  -webkit-animation-duration: 3.5s;
  animation-duration: 3.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes voucherIn {
  0% {
    visibility: visible;
    opacity: 0;
    filter: brightness(100);
    -webkit-transform: scale(5) rotate(0deg);
    filter: blur(64px);
  }
  100% {
    visibility: visible;
    opacity: 1;
    filter: brightness(1);
    -webkit-transform: scale(1) rotate(0deg);
    filter: blur(0px);
  }
}

.voucherOut {
  visibility: hidden;
  -webkit-animation-name: voucherOut;
  animation-name: voucherOut;
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes voucherOut {
  0% {
    visibility: visible;
    opacity: 1;
    filter: brightness(1);
    -webkit-transform: scale(1) rotate(0deg);
    filter: blur(0px);
  }
  100% {
    visibility: visible;
    opacity: 0;
    filter: brightness(100);
    -webkit-transform: scale(5) rotate(0deg);
    filter: blur(64px);
  }
}

.fullScreenFxAnim {
  visibility: hidden;
  -webkit-animation-name: fullScreenFxAnim;
  animation-name: fullScreenFxAnim;
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fullScreenFxAnim {
  0% {
    visibility: visible;
    opacity: 0;
  }
  50% {
    visibility: visible;
    opacity: 1;
  }
  100% {
    visibility: visible;
    opacity: 0;
  }
}