/**
 * =============================================================================
 * This is the file where all your styling should go in.
 * Instead of modifying the styles found in the monogatari.css file or others,
 * you should overwrite those styles in this file.
 *
 * The CSS selectors shown are not an extensive list but they are the most
 * common you might want to change. To find what other elements are available,
 * you can take a look at the monogatari.css file or use your browser's dev
 * tools to inspect the elements.
 * =============================================================================
**/

@import url(https://fonts.googleapis.com/css?family=Raleway:200,600,700,400);
@import url('https://fonts.googleapis.com/css?family=Gochi+Hand');
@import url('https://fonts.googleapis.com/css?family=Gochi+Hand');
@import url('https://fonts.googleapis.com/css?family=Rubik+Mono+One&display=swap');
@import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap');
@import url(https://fonts.googleapis.com/css?family=Finger+Paint);
@import url('https://fonts.googleapis.com/css?family=Orbitron:800,900&display=swap');

@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap");


@font-face {
    font-family: 'WowiTypeface';
    src: url('../assets/fonts/WowiTypeface.eot'); /* IE9 Compat Modes */
    src: url('../assets/fonts//WowiTypeface.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../assets/fonts/WowiTypeface.woff') format('woff'), /* Modern Browsers */
         url('../assets/fonts/WowiTypeface.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../assets/fonts/WowiTypeface.svg#WowiTypefaceRegular') format('svg'), /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@font-face{
    font-family:'Montserrat';
        src:url('../assets/fonts/Montserrat-Bold.eot');
        src:url('../assets/fonts/Montserrat-Bold.eot?#iefix') format('eot'),
            url('../assets/fonts/Montserrat-Bold.svg') format('svg'),
            url('../assets/fonts/Montserrat-Bold.woff') format('woff'),
            url('../assets/fonts/Montserrat-Bold.ttf') format('truetype'),
            font-weight: normal;
}



@font-face {
    font-family: 'Old Originals';
    src: url('../assets/fonts/OldOriginals.eot');
    src: url('../assets/fonts/OldOriginals.eot?#iefix') format('embedded-opentype'),
        url('../assets/fonts/OldOriginals.woff') format('woff'),
        url('../assets/fonts/OldOriginals.svg#OldOriginals') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'frente';
    src: url('../assets/fonts/FrenteH1-Regular-webfont.eot');
    src: url('../assets/fonts/FrenteH1-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../assets/fonts/FrenteH1-Regular-webfont.woff') format('woff'),
         url('../assets/fonts/FrenteH1-Regular-webfont.ttf') format('truetype'),
         url('../assets/fonts/FrenteH1-Regular-webfont.svg#frente_h1regular') format('svg');
    font-weight: normal;
    font-style: normal;
}


:root {

}

h2 {
    color: black;
}

a.bouton:active, nav.bouton:active, label.bouton:active, input.bouton:active, nav.menuz  {outline-style:none;}

text-box[mode="nvl"] {
    max-height: 100%;
    height: 100%;
    background: transparent;
    left: 0%;
    padding-top: 80px;
  
}


text-box [data-content="text"] {
    overflow-y: visible;
}

choice-container.vendingMachine {
    top: 34% !important;
}


.showScroll {
    left: 24%;
}



.NVLchatItem {
    padding-bottom: 50px;
}

dialog-log .modal__content {
    width: 95%;
    height: 79%;
    max-height: 95%;
    max-width: 1000px;
    overflow: hidden;
    padding: 0;
    color: var(--text-color);
}

choice-container.questions {

background: #faebd7a6;
    width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 0;
    margin: 0;
    top: 50% !important;
}

.price {
  font-size: 2.3rem;
  font-weight: 900;
}


.planta {
  position: absolute;
  z-index: 9999999;
  font-size: 3rem;
  color: #3d3d44;
  font-family: 'Raleway', sans-serif;
  left: -5px;
  font-weight: 900;
}

[data-component="choice-container"] button.snackButton.chips, button.snackButton.sandwich, button.snackButton.choco, button.snackButton.cookie  {
  padding: 3rem 3rem;
  background: transparent;
}


choice-container.animated.sofiaCall {
    background: white;
    padding: 45px;
    border-radius: 71px;
}


#language-screen {
z-index: 999999999;
position: relative;
}

.profile {
  width: 100%;
  height: 100px;
  max-width: 500px;
  min-width: 450px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  background-color: #fafafa;
  box-shadow: 0 0 2rem #babbbc;
  animation: show-profile 0.5s forwards ease-in-out;
}
@keyframes show-profile {
  0% {
    width: 0;
  }
}
.profile .photo, .profile .contentz {
  box-sizing: border-box;
}
.profile .photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #fafafa;
  background-color: #fafafa;
  margin-left: -50px;
  box-shadow: 0 0 0.5rem #babbbc;
  animation: rotate-photo 0.5s forwards ease-in-out;
}
@keyframes rotate-photo {
  100% {
    transform: rotate(-360deg);
  }
}
.profile .photo img {
  width: 100%;
  max-height: 100%;
  position: relative;
  border-radius: 100px;
}
.profile .contentz {
  padding: 10px;
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.profile .contentz::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 150px;
  background-color: #e9f3e6;
  left: 0;
  top: -20px;
  z-index: -1;
  transform: rotate(-8deg);
}
.profile .contentz .text {
  margin-top: 12px;
  margin-left: 51px;
  text-align: left;
}


.profile .contentz .text h3, .profile .contentz .text h6 {
  font-weight: normal;
  margin: 3px 0;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.profile .contentz .text h3 {
  font-size: 1.6rem;
}

.profile .contentz .text h6 {
   font-size: 1.1rem;
   line-height: 1.3rem;
}

.profile .contentz .btn {
  background-color: #abc;
  color: #E91E63;
  width: 50px;
  height: 50px;
  position: absolute;
  right: 25px;
  top: 25px;
  border-radius: 50%;
  z-index: 1;
  cursor: pointer;
  transition-duration: 0.3s;
  animation: pop-btn 0.3s both ease-in-out 0.5s;
}
@keyframes pop-btn {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.profile .contentz .btn:hover {
  box-shadow: 0 0 0 5px rgba(170, 187, 204, 0.5);
}
.profile .contentz .btn span {
  width: 60%;
  position: absolute;
  background-color: transparent;
  top: 50%;
  left: 20%;
  transform: translateY(-50%);
  animation: to-hamburger 0.3s forwards ease-in-out;
}

.profile .contentz .btn span::before {
  margin-top: -7px;
}
.profile .contentz .btn span::after {
  margin-top: 7px;
}
.profile .contentz .btn.active span {
  animation: to-arrow 0.3s forwards ease-in-out;
}
.profile .contentz .btn.active span::before, .profile .contentz .btn.active span::after {
  width: 60%;
  right: -1px;
}
.profile .contentz .btn.active span::before {
  transform: rotate(45deg);
}
.profile .contentz .btn.active span::after {
  transform: rotate(-45deg);
}
@keyframes to-hamburger {
  from {
    transform: translateY(-50%) rotate(-180deg);
  }
}
@keyframes to-arrow {
  from {
    transform: translateY(-50%) rotate(0deg);
  }
  to {
    transform: translateY(-50%) rotate(180deg);
  }
}
.profile .box {
  width: 150px;
  height: 150px;
  opacity: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  position: absolute;
  top: 50%;
  right: -40%;
  transform: translate(-50%, -50%);
  transition-duration: 0.3s;
}
.profile .box i {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ececec;
  font-size: 26px;
  text-align: center;
  line-height: 50px;
  position: absolute;
  left: 18px;
  top: calc(75px - 50px/2);
  box-shadow: 0 0 0.5rem #babbbc;
  transition-duration: 0.3s;
}
.profile .box i:hover {
  transition-delay: initial !important;
  box-shadow: 0 0 0 5px #babbbc;
}
.profile .box.open {
  opacity: 1;
}
.profile .box.open i {
  left: 60px;
}
.profile .box.open i:nth-of-type(1) {
  transform: rotate(-90deg) translateX(120px) rotate(90deg);
  transition-delay: 0s;
}
.profile .box.open i:nth-of-type(2) {
  transform: rotate(-45deg) translateX(120px) rotate(45deg);
  transition-delay: 0.1s;
}
.profile .box.open i:nth-of-type(3) {
  transform: rotate(0deg) translateX(120px) rotate(0deg);
  transition-delay: 0.2s;
}
.profile .box.open i:nth-of-type(4) {
  transform: rotate(45deg) translateX(120px) rotate(-45deg);
  transition-delay: 0.3s;
}
.profile .box.open i:nth-of-type(5) {
  transform: rotate(90deg) translateX(120px) rotate(-90deg);
  transition-delay: 0.4s;
}
}

[data-component="tool-tip"] {
    display:inline; 
}


[data-spoke=narrator] p {
    padding-left: 0;
    padding: 0rem 0;
}



[data-component="text-box"] {
  padding-left: 45px;
  padding-right: 45px;

}

.animz {
  background: -webkit-gradient(linear, left top, right top, from(#feac5e), color-stop(#c779d0), to(#4bc0c8));
  background: linear-gradient(to right, #feac5e, #c779d0, #4bc0c8);
  background-size: 400% 400%;
  -webkit-animation: Gradient 15s ease infinite;
          animation: Gradient 15s ease infinite;
}


@-webkit-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}



.animRainbow {

  background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
  background-size: 1800% 1800%;
  -webkit-animation: rainbowz 18s ease infinite;
  -z-animation: rainbowz 18s ease infinite;
  -o-animation: rainbowz 18s ease infinite;
  animation: rainbowz 18s ease infinite;}

}


@-webkit-keyframes rainbowz {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes rainbowz {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes rainbowz {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes rainbowz { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}


/* Style the rainbow text element. */

span.rainbow-text  {

    display: block;
    font-weight: 800;
    font-size: 8rem !important;
    /* width: 5rem; */
    line-height: 0.9em;
    margin-left: auto;
    margin-right: auto;
    /* margin-top: 1.5em !important; */
    /* margin-top: calc(50vh - 1em) !important; */
    cursor: pointer;
    min-width: 470px;
    text-shadow: none !important;
    margin: unset;
    padding: unset;
    z-index: 9999999;

  /* Fallback: Set a background color. */
  background-color: #f1eaeb;
  
  /* Create the gradient. */
   background-image: linear-gradient(
        45deg,
        #ffffff 16.666%, 
        #E16541 16.666%, 
        #E16541 33.333%, 
        #F18F43 33.333%, 
        #F18F43 50%, 
        #8B9862 50%, 
        #8B9862 66.666%, 
        #476098 66.666%, 
        #476098 83.333%, 
        #A7489B 83.333%);
  
  /* Set the background size and repeat properties. */
  background-size: 100%;
  background-repeat: repeat;

  /* Use the text as a mask for the background. */
  /* This will show the gradient as a text color rather than element bg. */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  
  /* Animate the text when loading the element. */
    /* This animates it on page load and when hovering out. */
    animation: rainbowtextsimpleanimationrev 0.75s ease forwards;

}

span.rainbow-text:hover {
    animation-name: rainbowtextsimpleanimation;
    animation-duration: 0.5s;
    animation-fill-mode: ease-in; 
    animation-timing-function: forwards;
}


/* Move the background and make it smaller. */
/* Animation shown when entering the page and after the hover animation. */
@keyframes rainbowtextsimpleanimationrev {
    0% {
        background-size: 650%;
    }
    40% {
        background-size: 650%;
    }
    100% {
        background-size: 100%;
    }
}

/* Move the background and make it larger. */
/* Animation shown when hovering over the text. */
@keyframes rainbowtextsimpleanimation {
    0% {
        background-size: 100%;
    }
    80% {
        background-size: 650%;
    }
    100% {
        background-size: 650%;
    }
}
  





.msgcontainer .msg .texto {
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    color: white;
    position: relative;
    font-size: 1.5rem;
    padding: 0.7rem 1.1rem 0.7rem 0.9rem;
    vertical-align: baseline;
}


.texto {
    display: inline-block;
    font-size: 3rem;
    z-index: 10;
}

.msgcontainer .msg .texto:before {
    z-index: -1;
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 1.1rem;
  
}


.msgcontainer .msg .valentina:before {
   background: #ca7878;
   box-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
  }

.msgcontainer .msg .pidru:before {
   background: #dca19c;
   box-shadow:0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
  }

.msgcontainer .msg .diego:before {
   background: #59c3ae;
   box-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
  }

.msgcontainer .msg .selestino:before {
   background: #518fe8;
   box-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
  }


.msgcontainer .msg .dodo:before {
   background: #ffb72f;
   box-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
  }




.msgcontainer .msg .sub {
    text-align: right;
    color: white;
    position: absolute;
    width: 15rem;
    right: 0;
    bottom: -2.2rem;
    font-size: 1rem;
}

.msgcontainer .msg span {
   /* font-family: 'SanFranciscoText'; */
}

.msgcontainer .msg .texto:after {
    position: absolute;
    content: '';
    border-radius: 50%;
    width: 20px;
    height: 20px;
    right: -16px;
    bottom: -3px;
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}

.msgcontainer .msg .pidru:after {
  border-bottom: 8px solid #dca19c;

}

.msgcontainer .msg .valentina:after {
  border-bottom: 8px solid #ca7878;

}

.msgcontainer .msg .diego:after {
  border-bottom: 8px solid #59c3ae;

}


.msgcontainer .msg .selestino:after {
  border-bottom: 8px solid #518fe8;

}

.msgcontainer .msg .dodo:after {
  border-bottom: 8px solid #ffb72f;

}


.tooltiptop {
    padding-left: 0% !important;
}


.unnamed {
    background: transparent;
    border-radius: 0px;
    position: relative;
}



tool-tip.animated {
    display: inline;
}

/**
 * ===========================
 * General Styling
 * ===========================
**/

label {
margin: .3rem;
}

/* General Style */
body {
margin: 0; height: 100%; overflow: hidden
}


/* Simple Button styles*/
button {

}

/* Simple Button Style on Hover */
button:hover {

}

/* General Styling for Menu Screens */
[data-screen] {
    border: 2px solid #ffffff; 
    background: #ffffff;
    padding: 1em 1em;
    outline: 2px solid #a05151;
    outline-offset: -10px;
    /*text-align: justify;*/
    position: fixed;
    overflow: hidden;
}

h3 {
    font-size: 2rem;
    font-family: 'Raleway', sans-serif;
    font-size: 90px;
    font-weight: bold;
    background: linear-gradient(to right, #7927b2, #fb3182);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* max-width: 507px; */
    text-transform: uppercase;
    line-height: .77;
    
}


dialog-log .modal__content [data-content=log] {
    text-align: left;
    padding: 7rem;
    height: 88%;
    max-height: 90%;
    overflow: auto;
}


dialog-log .modal__content [data-content=log] [data-spoke] p {
   text-align: left !important;
}



dialog-log .modal__content [data-content=log] [data-spoke] span {
    font-size: 1.4rem;
}


dialog-log .modal__content [data-content=log] [data-spoke] span.tooltip-text {
    font-size: 1rem !important;
}



dialog-log .modal__content [data-content=log] [data-spoke] a.link.link--takiri span  {
   color: black;
}


dialog-log .modal__content [data-content=log] [data-spoke] a.link.link--takiri {
  color: #e4bb37

 }

[data-content=log] span#next-arrow {
    display: none !important;
}

[data-content=log] p.paraSpanInline.lineNoWrap {
    text-align: center !important;
}

text-input  {
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
    background: linear-gradient(to right, #7927b2, #fb3182);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* max-width: 507px; */
    text-transform: uppercase;
    line-height: .77;
    padding-bottom: 15px;
}



/**
 * ===========================
 * Save Page Styling
 * ===========================
**/

[data-screen=load] h3, [data-screen=save] h3 {
    margin: 0rem auto;
    font-weight: bold;
    background: linear-gradient(to right, #7927b2, #fb3182);
    font-family: 'Raleway', sans-serif;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    text-transform: uppercase;
    line-height: .7;
}

[data-content=slots]  {
    overflow: scroll;
}

[data-content=actions] button {
    margin: 1rem;
}
/**
 * ===========================
 * Main Menu Styling
 * ===========================
**/

/* Main Menu Styling */
[data-screen="main"] {

  /**  background-image: url("");  **/
   
}


text-box [data-content=wrapper] {
    -webkit-box-flex: 1;
    flex-grow: 1;
  
}

main-menu {
    align-self: center;
    flex-direction: column;
    align-items: flex-end;
    position: absolute;
      bottom: 29%;
   
}


/* Main Menu Buttons Styling */
[data-screen="main"] button {
	font-size: 20px;
	font-family: ;



}


/**
 * ===========================
 * Settings pages
 * ===========================
**/

 [data-settings] h3 {
    font-size: 2rem;
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
    background: linear-gradient(to right, #7927b2, #fb3182);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* max-width: 507px; */
    text-transform: uppercase;
    line-height: .77;
}



[data-component=settings-screen]  {
    color: #d40030;
    background: #ecdcc7;
}


settings-screen input, settings-screen select {
    margin: 2rem;
    background-color: #b923231f !important;
}

/**
 * ===========================
 * BG Styling
 * ===========================
**/

.pinkbg {
    background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
}

/**
 * ===========================
 * Particles effects Styling
 * ===========================
**/

[data-ui=particles] {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}




/**
 * ===========================
 * Background image Styling
 * ===========================
**/

/* glitch effect needs to declare 6 identical images in index
------------------------------------- */
.c-glitch,
.c-glitch__img {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
   animation-delay: 3s;
         animation-play-state: running;

}



.c-glitch {
   height: 100%;
    margin: 0 auto;
    overflow: hidden;
    
    width: 100%;
    display: none;
    z-index: 119;
 
}

.c-glitch__img {


  background-blend-mode: none;
  background-color: transparent;
  height: calc(100% + 5px * 2);
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  width: calc(100% + 10px * 2);
}
.c-glitch .c-glitch__img:nth-child(n+2) {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-delay: 0;
          animation-delay: 0;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
        
}
.c-glitch .c-glitch__img:nth-child(2) {
  -webkit-animation-name: glitch-anim-1;
          animation-name: glitch-anim-1;

}
.c-glitch .c-glitch__img:nth-child(3) {
  -webkit-animation-name: glitch-anim-2;
          animation-name: glitch-anim-2;
}
.c-glitch .c-glitch__img:nth-child(4) {
  -webkit-animation-name: glitch-anim-3;
          animation-name: glitch-anim-3;
}
.c-glitch .c-glitch__img:nth-child(5) {
  -webkit-animation-name: glitch-anim-4;
          animation-name: glitch-anim-4;
  background-blend-mode: overlay;
  background-color: #af4949;
}

.c-glitch__img:nth-child(n+2) {
  opacity: 0;
}

@-webkit-keyframes glitch-anim-1 {
  0%, 100% {
    opacity: 1;
    -webkit-transform: translate3d(40px, 0, 0) scale3d(-1, -1, 1);
            transform: translate3d(40px, 0, 0) scale3d(-1, -1, 1);
    -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
            clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
  }
  20% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
            clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
  }
  30% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
            clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
  }
  40% {
    -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
            clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
  }
  50% {
    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
            clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  }
  55% {
    -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
            clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
  }
  60% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
            clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  }
  65% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
            clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  }
  70% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
            clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }
  80% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
            clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  }
  85% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 65%, 0 65%);
            clip-path: polygon(0 60%, 100% 60%, 100% 65%, 0 65%);
  }
  95% {
    -webkit-clip-path: polygon(0 72%, 100% 72%, 100% 78%, 0 78%);
            clip-path: polygon(0 72%, 100% 72%, 100% 78%, 0 78%);
  }
}

@keyframes glitch-anim-1 {
  0%, 100% {
    opacity: 1;
    -webkit-transform: translate3d(40px, 0, 0) scale3d(-1, -1, 1);
            transform: translate3d(40px, 0, 0) scale3d(-1, -1, 1);
    -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
            clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
  }
  20% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
            clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
  }
  30% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
            clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
  }
  40% {
    -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
            clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
  }
  50% {
    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
            clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  }
  55% {
    -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
            clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
  }
  60% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
            clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  }
  65% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
            clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  }
  70% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
            clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }
  80% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
            clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  }
  85% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 65%, 0 65%);
            clip-path: polygon(0 60%, 100% 60%, 100% 65%, 0 65%);
  }
  95% {
    -webkit-clip-path: polygon(0 72%, 100% 72%, 100% 78%, 0 78%);
            clip-path: polygon(0 72%, 100% 72%, 100% 78%, 0 78%);
  }
}
@-webkit-keyframes glitch-anim-2 {
  0%, 100% {
    opacity: 1;
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
    -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
            clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
  }
  10% {
    -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
            clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
  }
  15% {
    -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
            clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
  }
  17% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
            clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }
  19% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
            clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
  }
  33% {
    -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
            clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
  }
  35% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
            clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }
  40% {
    -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
            clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
  }
  45% {
    -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
            clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
  }
  49% {
    -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
            clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
  }
  50% {
    -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
            clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
  }
  55% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 35%, 0 35%);
            clip-path: polygon(0 15%, 100% 15%, 100% 35%, 0 35%);
  }
  60% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
            clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
  }
  70% {
    -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 60%, 0 60%);
            clip-path: polygon(0 65%, 100% 65%, 100% 60%, 0 60%);
  }
  80% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 85%, 0 85%);
            clip-path: polygon(0 80%, 100% 80%, 100% 85%, 0 85%);
  }
  90% {
    -webkit-clip-path: polygon(0 55%, 100% 55%, 100% 65%, 0 65%);
            clip-path: polygon(0 55%, 100% 55%, 100% 65%, 0 65%);
  }
}
@keyframes glitch-anim-2 {
  0%, 100% {
    opacity: 1;
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
    -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
            clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
  }
  10% {
    -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
            clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
  }
  15% {
    -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
            clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
  }
  17% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
            clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }
  19% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
            clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
  }
  33% {
    -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
            clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
  }
  35% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
            clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }
  40% {
    -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
            clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
  }
  45% {
    -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
            clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
  }
  49% {
    -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
            clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
  }
  50% {
    -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
            clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
  }
  55% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 35%, 0 35%);
            clip-path: polygon(0 15%, 100% 15%, 100% 35%, 0 35%);
  }
  60% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
            clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
  }
  70% {
    -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 60%, 0 60%);
            clip-path: polygon(0 65%, 100% 65%, 100% 60%, 0 60%);
  }
  80% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 85%, 0 85%);
            clip-path: polygon(0 80%, 100% 80%, 100% 85%, 0 85%);
  }
  90% {
    -webkit-clip-path: polygon(0 55%, 100% 55%, 100% 65%, 0 65%);
            clip-path: polygon(0 55%, 100% 55%, 100% 65%, 0 65%);
  }
}
@-webkit-keyframes glitch-anim-3 {
  0%, 100% {
    opacity: 1;
    -webkit-transform: translate3d(0, -5px, 0) scale3d(-1, -1, 1);
            transform: translate3d(0, -5px, 0) scale3d(-1, -1, 1);
    -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
            clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
  }
  5% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
            clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
  }
  11% {
    -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
            clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
  }
  20% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
            clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }
  25% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
            clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
  }
  35% {
    -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
            clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
  }
  42% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
            clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
  }
  48% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
            clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
  }
  50% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
            clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
  }
  56% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
            clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
  }
  61% {
    -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
            clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
  }
  68% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
            clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
  }
  72% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
            clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
  }
  77% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
            clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
  }
  81% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
            clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
  }
  86% {
    -webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
            clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
  }
  90% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
            clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }
  92% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
            clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
  }
  94% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
            clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
  }
}
@keyframes glitch-anim-3 {
  0%, 100% {
    opacity: 1;
    -webkit-transform: translate3d(0, -5px, 0) scale3d(-1, -1, 1);
            transform: translate3d(0, -5px, 0) scale3d(-1, -1, 1);
    -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
            clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
  }
  5% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
            clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
  }
  11% {
    -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
            clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
  }
  20% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
            clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }
  25% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
            clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
  }
  35% {
    -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
            clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
  }
  42% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
            clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
  }
  48% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
            clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
  }
  50% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
            clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
  }
  56% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
            clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
  }
  61% {
    -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
            clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
  }
  68% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
            clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
  }
  72% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
            clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
  }
  77% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
            clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
  }
  81% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
            clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
  }
  86% {
    -webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
            clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
  }
  90% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
            clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }
  92% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
            clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
  }
  94% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
            clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
  }
}
@-webkit-keyframes glitch-anim-4 {
  0%, 5% {
    opacity: 0.2;
    -webkit-transform: translate3d(10px, 5px, 0);
            transform: translate3d(10px, 5px, 0);
  }
  5.5%, 100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes glitch-anim-4 {
  0%, 5% {
    opacity: 0.2;
    -webkit-transform: translate3d(10px, 5px, 0);
            transform: translate3d(10px, 5px, 0);
  }
  5.5%, 100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}



.watercolor-effect {

  background-image: url(assets/scenes//bg-madrid_2.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: blur(2px)) and (mix-blend-mode: multiply) {
  .watercolor-effect {
    position: relative;
    overflow: hidden;
  }
  .watercolor-effect:before, .watercolor-effect:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
  }
  .watercolor-effect:before {
    background-image: url(assets/scenes/bg-madrid_2.jpg), url(assets/scenes/bg-madrid_2.jpg);
    background-blend-mode: difference;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
    filter: brightness(2) invert(1) grayscale(1);
    box-shadow: inset 0 0 0 1px black;
  }
  .watercolor-effect:after {
    background-image: url(assets/scenes/bg-madrid_2.jpg);
    background-position: center;
    mix-blend-mode: multiply;
    filter: brightness(1.3) blur(2px) contrast(2);
  }
}



.airbrush-effect {
  background-image: url(assets/scenes/bg-madrid_2.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: blur(5px) contrast(5)) and (mix-blend-mode: multiply) {
  .airbrush-effect {
    position: relative;
    overflow: hidden;
  }
  .airbrush-effect:after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    filter: brightness(1.5) saturate(90) blur(8px) contrast(2);
    mix-blend-mode: soft-light;
  }
}

.colored-pencil-effect {
  background-image: url(assets/scenes/bg-madrid_2.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: invert(1)) and (mix-blend-mode: color) {
  .colored-pencil-effect {
    position: relative;
  }
  .colored-pencil-effect:before, .colored-pencil-effect:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    box-shadow: inset 0 0 0 1px black;
  }
  .colored-pencil-effect:before {
    background-image: url(assets/scenes/bg-madrid_2.jpg), url(assets/scenes/bg-madrid_2.jpg);
    background-blend-mode: difference;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
    filter: brightness(2) invert(1) grayscale(1);
  }
  .colored-pencil-effect:after {
    background: inherit;
    mix-blend-mode: color;
  }
}

/**
 * ===========================
 * Side image Styling
 * ===========================
**/

text-box [data-ui=face] {
    float: left;
    max-height: 32vh!important;
    position: static!important;
    border-radius: 50%;
    position: absolute;
    top: 5px;
  
}

text-box [data-content=side-image] {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: baseline;
    padding-left: 0px;
     width: 65%;
    height: auto;
    top: -5rem;
    position: relative;

}




text-box[mode="nvl"] .nvl {
    max-height: 90%;
    height: 80%;
    padding: 1rem 2rem 1rem 2rem;
    background: blue;
    border-radius: 271px;
}


text-box [data-content=text] {
    width: 94%; /* ne pas changer */

}

game-screen img {
    position: absolute;
    max-height: 80%;
}











/**
 * ===========================
 * Save and Load Menus Styling
 * ===========================
**/

/* Slots Style */
[data-component="save-slot"] figure {

}

/* Slot's Image Style */
[data-component="save-slot"] img {

}

/* Slots Title Style */
[data-component="save-slot"] figcaption {

}

/* Slots Delete Button Style */
[data-component="save-slot"] button {

}

/**
 * ===========================
 * Game Elements Styling
 * ===========================
**/

/* Choice Buttons style */
[data-component="choice-container"] button {
   
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    border-radius: 53px;
    background: #f5f0f1e8;
    color: #c92c2c;
    border: 0;
    border: none;
    margin: 10px;
    padding: 1.5rem 3rem;
    will-change: transform;
    top: 18%;

}

text-input.animated.modal.modal--active.catname [data-content=message] {
    font-size: 4rem;
    padding: 15px;
    color: #E91E63;
    -webkit-text-fill-color: #E91E63;
  }


text-input.catname input {
    background-color: #eee;
    min-width: 84%;
    height: 71px;
    font-size: 2.5rem;
    font-weight: 700;
    color: #FF9800;
    -webkit-text-fill-color: #FF9800;
    line-height: 0.97;
    padding: 2px;
}


text-input.catname button {
    width: 7rem;
    height: 4rem;
    font-size: 2rem;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    border-radius: 15px;
    background: transparent;
    color: #e855;
    border: 0;
    border: 4px solid #e85577;;
    margin: 0;
    color: #e85577;
    -webkit-text-fill-color: #e85577;
    will-change: transform;
    order-width: 1px;
    border-style: solid;
    border-image: initial;

    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    letter-spacing: normal;
    word-spacing: normal;
    -webkit-appearance: button;
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
}


message-modal [data-ui=message-content] h3  {
    font-size: 3em !important;
    margin-bottom: 15px;
  }


text-input.animated.modal.modal--active.catname {
    background: #f3f0e861;
}

game-screen [data-character="angel"] {
    bottom: -288px;
    position: absolute;
    max-width: 164%;
    max-height: 146vh;
    filter: drop-shadow(2px 4px 6px black);
}



.modal__content {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    position: absolute;
    padding: 1rem;
    background-color: #e8dbdbf5;
    max-height: 100%;
    text-align: center;
    width: 50%;
    overflow: auto;
    color: #c92c2c !important;
    outline: 10px double #ffffff96;
    outline-offset: -17px;
}


[data-speaking="angel"] {  
    text-shadow: 5px 3px 6px #037d52, 8px 1px 1px rgba(0,0,0,0.15);
    font-size: 5em;
}


[data-speaking="cat"], [data-speaking="cat2"]  {  
    text-shadow: 5px 0px 2px #c77407, 4px -1px 2px #f4eeb66b;
    font-size: 5em;
}


[data-speaking="pidru"],[data-speaking="pidru2"], [data-speaking="pidruMessage"]  {  
    text-shadow: 5px 0px 2px #d64848, 4px -1px 2px #cd5b5b91;
    font-size: 5em;
}


[data-speaking="diego"] {  
    text-shadow: 8px 1px 1px #035644, 8px 0px 6px rgba(22, 98, 93, 0.67);
    font-size: 5em;
}



[data-speaking="javier"] {  
    text-shadow: 8px 0px 1px #007896, 8px 0px 6px rgb(87 116 152);
    font-size: 5em;
}


[data-speaking="sofia"] {  
    text-shadow: 4px 0px 4px #381a42, 7px 2px 5px #342448b0;
    font-size: 5em;
}


[data-speaking="valentina"] {  
    text-shadow: 4px 0px 4px #810707, 7px 2px 5px #672a2a;
    font-size: 5em;
}




[data-speaking="brother"] {  

    text-shadow: 4px -1px 1px #580b0bfa, 6px 1px 8px #440505d4;
    font-size: 5em;
}



[data-speaking="mother"] {  
    
    text-shadow: 4px -1px 8px #9a6809, 5px 0px 0px #524b18de;
    font-size: 5em;
}


[data-speaking="father"] {  

    text-shadow: 4px 0px 4px #dc7a81, 7px 2px 5px #7d424285;
    font-size: 5em;
}


.nvl {
    background: none;
}

/* Choice Button Style on Hover */
[data-component="choice-container"] button:hover {

}


/* Character Name Style */

 [data-ui="who"] {
    line-height: 5rem;
    font-size: 3em;
    /* font-family: 'Display', serif;*/
    font-weight: 900;
    font-style: italic;
    -webkit-transition: color 0s;
    transition: color 0s;
    }

/* Pour changer la taile de side image */

[data-speaking="angel"] img {
    border: 10px solid #81d0c8d4;
    background: #f5f5f58a;
}

[data-speaking="cat"] img,[data-speaking="cat2"] img  {
    border: 10px solid #ec8603e6;
    background: #7d262694;
}


[data-speaking="pidru"] img { 
    border: 10px solid #dca19c9e;
    background: #f5f5f58a;
}

[data-speaking="pidru2"] img {
        
}

[data-speaking="diego"] img {    
    border: 10px solid #59c3aea1;
    background: #d3e6bfcf;
}


[data-speaking="javier"] img { 
    border: 10px solid #007896;
    background: #f5f5f58a;
}


[data-speaking="brother"] img {    
    border: 10px solid #a82739;
    background: #c92c2c57;
}

[data-speaking="father"] img {    
    border: 10px solid #cca3b3c9;
    background: #c92c2c57;
}

[data-speaking="mother"] img {    
    border: 10px solid #f1c269c7;
    background: #c92c2c57;
}

[data-speaking="ricardo"] img {    
    border: 10px solid #42d4e6c7;
    background: #84e1ecc7;
}

[data-speaking="operator"] img {    
    border: 10px solid #59c3aebd;
    background: #59c3ae59;
}

[data-speaking="valentina"] img {    
    border: 10px solid #dc5d5d99;
    background: #f1818199;
}

[data-speaking="sofia"] img {    
    border: 10px solid #726992c4;
    background: #72699282;
}

/* Style for Centered Text */
[data-component="centered-dialog"] {

  font-size: 2rem;
  font-weight: 900;
  font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  z-index: 999999;
  width: 100%;
  height: 100vh;
  background-color: transparent;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
}


 [data-component="centered-dialog"] h1.callpidru {
    text-transform: uppercase;
    color: white;
    font-size: 4rem;
    text-shadow: 0px 0px transparent, 2px 2px #fb968b, 3px 3px #fb968b, 4px 4px #fb968b, 5px 5px #fb968b, 6px 6px #fb968b, 7px 7px #fb968b, 8px 8px #fb968b, 9px 9px #fb968b, 10px 10px #fb968b, 11px 11px #fb968b, 12px 12px #fb968b, 13px 13px #fb968b, 14px 14px #fb968b, 15px 15px #fb968b, 16px 16px #fb968b, 17px 17px #fb968b, 18px 18px #fb968b, 19px 19px #fb968b, 20px 20px #fb968b, 21px 21px #fb968b, 22px 22px #fb968b, 23px 23px #fb968b, 24px 24px #fb968b, 25px 25px #fb968b, 26px 26px #fb968b, 27px 27px #fb968b, 28px 28px #fb968b, 29px 29px #fb968b, 30px 30px #fb968b, 31px 31px #fb968b, 32px 32px #fb968b, 33px 33px #fb968b, 34px 34px #fb968b, 35px 35px #fb968b, 36px 36px #fb968b, 37px 37px #fb968b, 38px 38px #fb968b, 39px 39px #fb968b, 40px 40px #fb968b, 41px 41px #fb968b, 42px 42px #fb968b, 43px 43px #fb968b, 44px 44px #fb968b, 45px 45px #fb968b, 46px 46px #fb968b, 47px 47px #fb968b, 48px 48px #fb968b, 49px 49px #fb968b, 50px 50px #fb968b, 51px 51px #fb968b, 52px 52px #fb968b, 53px 53px #fb968b, 54px 54px #fb968b, 55px 55px #fb968b, 56px 56px #fb968b, 57px 57px #fb968b, 58px 58px #fb968b, 59px 59px #fb968b, 60px 60px #fb968b, 61px 61px #fb968b, 62px 62px #fb968b, 63px 63px #fb968b, 64px 64px #fb968b, 65px 65px #fb968b, 66px 66px #fb968b, 67px 67px #fb968b, 68px 68px #fb968b, 69px 69px #fb968b, 70px 70px #fb968b, 71px 71px #fb968b, 72px 72px #fb968b, 73px 73px #fb968b, 74px 74px #fb968b, 75px 75px #fb968b, 76px 76px #fb968b, 77px 77px #fb968b, 78px 78px #fb968b, 79px 79px #fb968b, 80px 80px #fb968b, 81px 81px #fb968b, 82px 82px #fb968b, 83px 83px #fb968b, 84px 84px #fb968b, 85px 85px #fb968b, 86px 86px #fb968b, 87px 87px #fb968b, 88px 88px #fb968b, 89px 89px #fb968b, 90px 90px #fb968b, 91px 91px #fb968b, 92px 92px #fb968b, 93px 93px #fb968b, 94px 94px #fb968b, 95px 95px #fb968b, 96px 96px #fb968b, 97px 97px #fb968b, 98px 98px #fb968b, 99px 99px #fb968b, 100px 100px #fb968b, 101px 101px #fb968b, 102px 102px #fb968b, 103px 103px #fb968b, 104px 104px #fb968b, 105px 105px #fb968b, 106px 106px #fb968b, 107px 107px #fb968b, 108px 108px #fb968b, 109px 109px #fb968b, 110px 110px #fb968b, 111px 111px #fb968b, 112px 112px #fb968b, 113px 113px #fb968b, 114px 114px #fb968b, 115px 115px #fb968b, 116px 116px #fb968b, 117px 117px #fb968b, 118px 118px #fb968b, 119px 119px #fb968b, 120px 120px #fb968b, 121px 121px #fb968b, 122px 122px #fb968b, 123px 123px #fb968b, 124px 124px #fb968b, 125px 125px #fb968b, 126px 126px #fb968b, 127px 127px #fb968b, 128px 128px #fb968b, 129px 129px #fb968b, 130px 130px #fb968b, 131px 131px #fb968b, 132px 132px #fb968b, 133px 133px #fb968b, 134px 134px #fb968b, 135px 135px #fb968b, 136px 136px #fb968b, 137px 137px #fb968b, 138px 138px #fb968b, 139px 139px #fb968b, 140px 140px #fb968b, 141px 141px #fb968b, 142px 142px #fb968b, 143px 143px #fb968b, 144px 144px #fb968b, 145px 145px #fb968b, 146px 146px #fb968b, 147px 147px #fb968b, 148px 148px #fb968b, 149px 149px #fb968b, 150px 150px #fb968b, 151px 151px #fb968b, 152px 152px #fb968b, 153px 153px #fb968b, 154px 154px #fb968b, 155px 155px #fb968b, 156px 156px #fb968b, 157px 157px #fb968b, 158px 158px #fb968b, 159px 159px #fb968b, 160px 160px #fb968b, 161px 161px #fb968b, 162px 162px #fb968b, 163px 163px #fb968b, 164px 164px #fb968b, 165px 165px #fb968b, 166px 166px #fb968b, 167px 167px #fb968b, 168px 168px #fb968b, 169px 169px #fb968b, 170px 170px #fb968b, 171px 171px #fb968b, 172px 172px #fb968b, 173px 173px #fb968b, 174px 174px #fb968b, 175px 175px #fb968b, 176px 176px #fb968b, 177px 177px #fb968b, 178px 178px #fb968b, 179px 179px #fb968b, 180px 180px #fb968b, 181px 181px #fb968b, 182px 182px #fb968b, 183px 183px #fb968b, 184px 184px #fb968b, 185px 185px #fb968b, 186px 186px #fb968b, 187px 187px #fb968b, 188px 188px #fb968b, 189px 189px #fb968b, 190px 190px #fb968b, 191px 191px #fb968b, 192px 192px #fb968b, 193px 193px #fb968b, 194px 194px #fb968b, 195px 195px #fb968b, 196px 196px #fb968b, 197px 197px #fb968b, 198px 198px #fb968b, 199px 199px #fb968b, 200px 200px #fb968b, 201px 201px #fb968b, 202px 202px #fb968b, 203px 203px #fb968b, 204px 204px #fb968b, 205px 205px #fb968b, 206px 206px #fb968b, 207px 207px #fb968b, 208px 208px #fb968b, 209px 209px #fb968b, 210px 210px #fb968b, 211px 211px #fb968b, 212px 212px #fb968b, 213px 213px #fb968b, 214px 214px #fb968b, 215px 215px #fb968b, 216px 216px #fb968b, 217px 217px #fb968b, 218px 218px #fb968b, 219px 219px #fb968b, 220px 220px #fb968b, 221px 221px #fb968b, 222px 222px #fb968b, 223px 223px #fb968b, 224px 224px #fb968b, 225px 225px #fb968b, 226px 226px #fb968b, 227px 227px #fb968b, 228px 228px #fb968b, 229px 229px #fb968b, 230px 230px #fb968b, 231px 231px #fb968b, 232px 232px #fb968b, 233px 233px #fb968b, 234px 234px #fb968b, 235px 235px #fb968b, 236px 236px #fb968b, 237px 237px #fb968b, 238px 238px #fb968b, 239px 239px #fb968b, 240px 240px #fb968b, 241px 241px #fb968b, 242px 242px #fb968b, 243px 243px #fb968b, 244px 244px #fb968b, 245px 245px #fb968b, 246px 246px #fb968b, 247px 247px #fb968b, 248px 248px #fb968b, 249px 249px #fb968b, 250px 250px #fb968b, 251px 251px #fb968b, 252px 252px #fb968b, 253px 253px #fb968b, 254px 254px #fb968b, 255px 255px #fb968b, 256px 256px #fb968b, 257px 257px #fb968b, 258px 258px #fb968b, 259px 259px #fb968b, 260px 260px #fb968b, 261px 261px #fb968b, 262px 262px #fb968b, 263px 263px #fb968b, 264px 264px #fb968b, 265px 265px #fb968b, 266px 266px #fb968b, 267px 267px #fb968b, 268px 268px #fb968b, 269px 269px #fb968b, 270px 270px #fb968b, 271px 271px #fb968b, 272px 272px #fb968b, 273px 273px #fb968b, 274px 274px #fb968b, 275px 275px #fb968b, 276px 276px #fb968b, 277px 277px #fb968b, 278px 278px #fb968b, 279px 279px #fb968b, 280px 280px #fb968b, 281px 281px #fb968b, 282px 282px #fb968b, 283px 283px #fb968b, 284px 284px #fb968b, 285px 285px #fb968b, 286px 286px #fb968b, 287px 287px #fb968b, 288px 288px #fb968b, 289px 289px #fb968b, 290px 290px #fb968b, 291px 291px #fb968b, 292px 292px #fb968b, 293px 293px #fb968b, 294px 294px #fb968b, 295px 295px #fb968b, 296px 296px #fb968b, 297px 297px #fb968b, 298px 298px #fb968b, 299px 299px #fb968b, 300px 300px #fb968b, 301px 301px #fb968b, 302px 302px #fb968b, 303px 303px #fb968b, 304px 304px #fb968b, 305px 305px #fb968b, 306px 306px #fb968b, 307px 307px #fb968b, 308px 308px #fb968b, 309px 309px #fb968b, 310px 310px #fb968b, 311px 311px #fb968b, 312px 312px #fb968b, 313px 313px #fb968b, 314px 314px #fb968b, 315px 315px #fb968b, 316px 316px #fb968b, 317px 317px #fb968b, 318px 318px #fb968b, 319px 319px #fb968b, 320px 320px #fb968b, 321px 321px #fb968b, 322px 322px #fb968b, 323px 323px #fb968b, 324px 324px #fb968b, 325px 325px #fb968b, 326px 326px #fb968b, 327px 327px #fb968b, 328px 328px #fb968b, 329px 329px #fb968b, 330px 330px #fb968b, 331px 331px #fb968b, 332px 332px #fb968b, 333px 333px #fb968b, 334px 334px #fb968b, 335px 335px #fb968b, 336px 336px #fb968b, 337px 337px #fb968b, 338px 338px #fb968b, 339px 339px #fb968b, 340px 340px #fb968b, 341px 341px #fb968b, 342px 342px #fb968b, 343px 343px #fb968b, 344px 344px #fb968b, 345px 345px #fb968b, 346px 346px #fb968b, 347px 347px #fb968b, 348px 348px #fb968b, 349px 349px #fb968b, 350px 350px #fb968b, 351px 351px #fb968b, 352px 352px #fb968b, 353px 353px #fb968b, 354px 354px #fb968b, 355px 355px #fb968b, 356px 356px #fb968b, 357px 357px #fb968b, 358px 358px #fb968b, 359px 359px #fb968b, 360px 360px #fb968b, 361px 361px #fb968b, 362px 362px #fb968b, 363px 363px #fb968b, 364px 364px #fb968b, 365px 365px #fb968b, 366px 366px #fb968b, 367px 367px #fb968b, 368px 368px #fb968b, 369px 369px #fb968b, 370px 370px #fb968b, 371px 371px #fb968b, 372px 372px #fb968b, 373px 373px #fb968b, 374px 374px #fb968b, 375px 375px #fb968b, 376px 376px #fb968b, 377px 377px #fb968b, 378px 378px #fb968b, 379px 379px #fb968b, 380px 380px #fb968b, 381px 381px #fb968b, 382px 382px #fb968b, 383px 383px #fb968b, 384px 384px #fb968b, 385px 385px #fb968b, 386px 386px #fb968b, 387px 387px #fb968b, 388px 388px #fb968b, 389px 389px #fb968b, 390px 390px #fb968b, 391px 391px #fb968b, 392px 392px #fb968b, 393px 393px #fb968b, 394px 394px #fb968b, 395px 395px #fb968b, 396px 396px #fb968b, 397px 397px #fb968b, 398px 398px #fb968b, 399px 399px #fb968b, 400px 400px #fb968b, 401px 401px #fb968b, 402px 402px #fb968b, 403px 403px #fb968b, 404px 404px #fb968b, 405px 405px #fb968b, 406px 406px #fb968b, 407px 407px #fb968b, 408px 408px #fb968b, 409px 409px #fb968b, 410px 410px #fb968b, 411px 411px #fb968b, 412px 412px #fb968b, 413px 413px #fb968b, 414px 414px #fb968b, 415px 415px #fb968b, 416px 416px #fb968b, 417px 417px #fb968b, 418px 418px #fb968b, 419px 419px #fb968b, 420px 420px #fb968b, 421px 421px #fb968b, 422px 422px #fb968b, 423px 423px #fb968b, 424px 424px #fb968b, 425px 425px #fb968b, 426px 426px #fb968b, 427px 427px #fb968b, 428px 428px #fb968b, 429px 429px #fb968b, 430px 430px #fb968b, 431px 431px #fb968b, 432px 432px #fb968b, 433px 433px #fb968b, 434px 434px #fb968b, 435px 435px #fb968b, 436px 436px #fb968b, 437px 437px #fb968b, 438px 438px #fb968b, 439px 439px #fb968b, 440px 440px #fb968b, 441px 441px #fb968b, 442px 442px #fb968b, 443px 443px #fb968b, 444px 444px #fb968b, 445px 445px #fb968b, 446px 446px #fb968b, 447px 447px #fb968b, 448px 448px #fb968b, 449px 449px #fb968b, 450px 450px #fb968b, 451px 451px #fb968b, 452px 452px #fb968b, 453px 453px #fb968b, 454px 454px #fb968b, 455px 455px #fb968b, 456px 456px #fb968b, 457px 457px #fb968b, 458px 458px #fb968b, 459px 459px #fb968b, 460px 460px #fb968b, 461px 461px #fb968b, 462px 462px #fb968b, 463px 463px #fb968b, 464px 464px #fb968b, 465px 465px #fb968b, 466px 466px #fb968b, 467px 467px #fb968b, 468px 468px #fb968b, 469px 469px #fb968b, 470px 470px #fb968b, 471px 471px #fb968b, 472px 472px #fb968b, 473px 473px #fb968b, 474px 474px #fb968b, 475px 475px #fb968b, 476px 476px #fb968b, 477px 477px #fb968b, 478px 478px #fb968b, 479px 479px #fb968b, 480px 480px #fb968b, 481px 481px #fb968b, 482px 482px #fb968b, 483px 483px #fb968b, 484px 484px #fb968b, 485px 485px #fb968b, 486px 486px #fb968b, 487px 487px #fb968b, 488px 488px #fb968b, 489px 489px #fb968b, 490px 490px #fb968b, 491px 491px #fb968b, 492px 492px #fb968b, 493px 493px #fb968b, 494px 494px #fb968b, 495px 495px #fb968b, 496px 496px #fb968b, 497px 497px #fb968b, 498px 498px #fb968b, 499px 499px #fb968b, 500px 500px #fb968b;
    -webkit-animation-name: shadow;
          animation-name: shadow;
    -webkit-animation-duration: 2s;
          animation-duration: 2s;
    -webkit-transition-timing-function: cubic-bezier(0.68, 0, 0.31, 1);
          transition-timing-function: cubic-bezier(0.68, 0, 0.31, 1);
}



[data-component="centered-dialog"] h1.calldiego { 
    text-shadow: 0px 0px transparent, 2px 2px #058478, 3px 3px #058478, 4px 4px #058478, 5px 5px #058478, 6px 6px #058478, 7px 7px #058478, 8px 8px #058478, 9px 9px #058478, 10px 10px #058478, 11px 11px #058478, 12px 12px #058478, 13px 13px #058478, 14px 14px #058478, 15px 15px #058478, 16px 16px #058478, 17px 17px #058478, 18px 18px #058478, 19px 19px #058478, 20px 20px #058478, 21px 21px #058478, 22px 22px #058478, 23px 23px #058478, 24px 24px #058478, 25px 25px #058478, 26px 26px #058478, 27px 27px #058478, 28px 28px #058478, 29px 29px #058478, 30px 30px #058478, 31px 31px #058478, 32px 32px #058478, 33px 33px #058478, 34px 34px #058478, 35px 35px #058478, 36px 36px #058478, 37px 37px #058478, 38px 38px #058478, 39px 39px #058478, 40px 40px #058478, 41px 41px #058478, 42px 42px #058478, 43px 43px #058478, 44px 44px #058478, 45px 45px #058478, 46px 46px #058478, 47px 47px #058478, 48px 48px #058478, 49px 49px #058478, 50px 50px #058478, 51px 51px #058478, 52px 52px #058478, 53px 53px #058478, 54px 54px #058478, 55px 55px #058478, 56px 56px #058478, 57px 57px #058478, 58px 58px #058478, 59px 59px #058478, 60px 60px #058478, 61px 61px #058478, 62px 62px #058478, 63px 63px #058478, 64px 64px #058478, 65px 65px #058478, 66px 66px #058478, 67px 67px #058478, 68px 68px #058478, 69px 69px #058478, 70px 70px #058478, 71px 71px #058478, 72px 72px #058478, 73px 73px #058478, 74px 74px #058478, 75px 75px #058478, 76px 76px #058478, 77px 77px #058478, 78px 78px #058478, 79px 79px #058478, 80px 80px #058478, 81px 81px #058478, 82px 82px #058478, 83px 83px #058478, 84px 84px #058478, 85px 85px #058478, 86px 86px #058478, 87px 87px #058478, 88px 88px #058478, 89px 89px #058478, 90px 90px #058478, 91px 91px #058478, 92px 92px #058478, 93px 93px #058478, 94px 94px #058478, 95px 95px #058478, 96px 96px #058478, 97px 97px #058478, 98px 98px #058478, 99px 99px #058478, 100px 100px #058478, 101px 101px #058478, 102px 102px #058478, 103px 103px #058478, 104px 104px #058478, 105px 105px #058478, 106px 106px #058478, 107px 107px #058478, 108px 108px #058478, 109px 109px #058478, 110px 110px #058478, 111px 111px #058478, 112px 112px #058478, 113px 113px #058478, 114px 114px #058478, 115px 115px #058478, 116px 116px #058478, 117px 117px #058478, 118px 118px #058478, 119px 119px #058478, 120px 120px #058478, 121px 121px #058478, 122px 122px #058478, 123px 123px #058478, 124px 124px #058478, 125px 125px #058478, 126px 126px #058478, 127px 127px #058478, 128px 128px #058478, 129px 129px #058478, 130px 130px #058478, 131px 131px #058478, 132px 132px #058478, 133px 133px #058478, 134px 134px #058478, 135px 135px #058478, 136px 136px #058478, 137px 137px #058478, 138px 138px #058478, 139px 139px #058478, 140px 140px #058478, 141px 141px #058478, 142px 142px #058478, 143px 143px #058478, 144px 144px #058478, 145px 145px #058478, 146px 146px #058478, 147px 147px #058478, 148px 148px #058478, 149px 149px #058478, 150px 150px #058478, 151px 151px #058478, 152px 152px #058478, 153px 153px #058478, 154px 154px #058478, 155px 155px #058478, 156px 156px #058478, 157px 157px #058478, 158px 158px #058478, 159px 159px #058478, 160px 160px #058478, 161px 161px #058478, 162px 162px #058478, 163px 163px #058478, 164px 164px #058478, 165px 165px #058478, 166px 166px #058478, 167px 167px #058478, 168px 168px #058478, 169px 169px #058478, 170px 170px #058478, 171px 171px #058478, 172px 172px #058478, 173px 173px #058478, 174px 174px #058478, 175px 175px #058478, 176px 176px #058478, 177px 177px #058478, 178px 178px #058478, 179px 179px #058478, 180px 180px #058478, 181px 181px #058478, 182px 182px #058478, 183px 183px #058478, 184px 184px #058478, 185px 185px #058478, 186px 186px #058478, 187px 187px #058478, 188px 188px #058478, 189px 189px #058478, 190px 190px #058478, 191px 191px #058478, 192px 192px #058478, 193px 193px #058478, 194px 194px #058478, 195px 195px #058478, 196px 196px #058478, 197px 197px #058478, 198px 198px #058478, 199px 199px #058478, 200px 200px #058478, 201px 201px #058478, 202px 202px #058478, 203px 203px #058478, 204px 204px #058478, 205px 205px #058478, 206px 206px #058478, 207px 207px #058478, 208px 208px #058478, 209px 209px #058478, 210px 210px #058478, 211px 211px #058478, 212px 212px #058478, 213px 213px #058478, 214px 214px #058478, 215px 215px #058478, 216px 216px #058478, 217px 217px #058478, 218px 218px #058478, 219px 219px #058478, 220px 220px #058478, 221px 221px #058478, 222px 222px #058478, 223px 223px #058478, 224px 224px #058478, 225px 225px #058478, 226px 226px #058478, 227px 227px #058478, 228px 228px #058478, 229px 229px #058478, 230px 230px #058478, 231px 231px #058478, 232px 232px #058478, 233px 233px #058478, 234px 234px #058478, 235px 235px #058478, 236px 236px #058478, 237px 237px #058478, 238px 238px #058478, 239px 239px #058478, 240px 240px #058478, 241px 241px #058478, 242px 242px #058478, 243px 243px #058478, 244px 244px #058478, 245px 245px #058478, 246px 246px #058478, 247px 247px #058478, 248px 248px #058478, 249px 249px #058478, 250px 250px #058478, 251px 251px #058478, 252px 252px #058478, 253px 253px #058478, 254px 254px #058478, 255px 255px #058478, 256px 256px #058478, 257px 257px #058478, 258px 258px #058478, 259px 259px #058478, 260px 260px #058478, 261px 261px #058478, 262px 262px #058478, 263px 263px #058478, 264px 264px #058478, 265px 265px #058478, 266px 266px #058478, 267px 267px #058478, 268px 268px #058478, 269px 269px #058478, 270px 270px #058478, 271px 271px #058478, 272px 272px #058478, 273px 273px #058478, 274px 274px #058478, 275px 275px #058478, 276px 276px #058478, 277px 277px #058478, 278px 278px #058478, 279px 279px #058478, 280px 280px #058478, 281px 281px #058478, 282px 282px #058478, 283px 283px #058478, 284px 284px #058478, 285px 285px #058478, 286px 286px #058478, 287px 287px #058478, 288px 288px #058478, 289px 289px #058478, 290px 290px #058478, 291px 291px #058478, 292px 292px #058478, 293px 293px #058478, 294px 294px #058478, 295px 295px #058478, 296px 296px #058478, 297px 297px #058478, 298px 298px #058478, 299px 299px #058478, 300px 300px #058478, 301px 301px #058478, 302px 302px #058478, 303px 303px #058478, 304px 304px #058478, 305px 305px #058478, 306px 306px #058478, 307px 307px #058478, 308px 308px #058478, 309px 309px #058478, 310px 310px #058478, 311px 311px #058478, 312px 312px #058478, 313px 313px #058478, 314px 314px #058478, 315px 315px #058478, 316px 316px #058478, 317px 317px #058478, 318px 318px #058478, 319px 319px #058478, 320px 320px #058478, 321px 321px #058478, 322px 322px #058478, 323px 323px #058478, 324px 324px #058478, 325px 325px #058478, 326px 326px #058478, 327px 327px #058478, 328px 328px #058478, 329px 329px #058478, 330px 330px #058478, 331px 331px #058478, 332px 332px #058478, 333px 333px #058478, 334px 334px #058478, 335px 335px #058478, 336px 336px #058478, 337px 337px #058478, 338px 338px #058478, 339px 339px #058478, 340px 340px #058478, 341px 341px #058478, 342px 342px #058478, 343px 343px #058478, 344px 344px #058478, 345px 345px #058478, 346px 346px #058478, 347px 347px #058478, 348px 348px #058478, 349px 349px #058478, 350px 350px #058478, 351px 351px #058478, 352px 352px #058478, 353px 353px #058478, 354px 354px #058478, 355px 355px #058478, 356px 356px #058478, 357px 357px #058478, 358px 358px #058478, 359px 359px #058478, 360px 360px #058478, 361px 361px #058478, 362px 362px #058478, 363px 363px #058478, 364px 364px #058478, 365px 365px #058478, 366px 366px #058478, 367px 367px #058478, 368px 368px #058478, 369px 369px #058478, 370px 370px #058478, 371px 371px #058478, 372px 372px #058478, 373px 373px #058478, 374px 374px #058478, 375px 375px #058478, 376px 376px #058478, 377px 377px #058478, 378px 378px #058478, 379px 379px #058478, 380px 380px #058478, 381px 381px #058478, 382px 382px #058478, 383px 383px #058478, 384px 384px #058478, 385px 385px #058478, 386px 386px #058478, 387px 387px #058478, 388px 388px #058478, 389px 389px #058478, 390px 390px #058478, 391px 391px #058478, 392px 392px #058478, 393px 393px #058478, 394px 394px #058478, 395px 395px #058478, 396px 396px #058478, 397px 397px #058478, 398px 398px #058478, 399px 399px #058478, 400px 400px #058478, 401px 401px #058478, 402px 402px #058478, 403px 403px #058478, 404px 404px #058478, 405px 405px #058478, 406px 406px #058478, 407px 407px #058478, 408px 408px #058478, 409px 409px #058478, 410px 410px #058478, 411px 411px #058478, 412px 412px #058478, 413px 413px #058478, 414px 414px #058478, 415px 415px #058478, 416px 416px #058478, 417px 417px #058478, 418px 418px #058478, 419px 419px #058478, 420px 420px #058478, 421px 421px #058478, 422px 422px #058478, 423px 423px #058478, 424px 424px #058478, 425px 425px #058478, 426px 426px #058478, 427px 427px #058478, 428px 428px #058478, 429px 429px #058478, 430px 430px #058478, 431px 431px #058478, 432px 432px #058478, 433px 433px #058478, 434px 434px #058478, 435px 435px #058478, 436px 436px #058478, 437px 437px #058478, 438px 438px #058478, 439px 439px #058478, 440px 440px #058478, 441px 441px #058478, 442px 442px #058478, 443px 443px #058478, 444px 444px #058478, 445px 445px #058478, 446px 446px #058478, 447px 447px #058478, 448px 448px #058478, 449px 449px #058478, 450px 450px #058478, 451px 451px #058478, 452px 452px #058478, 453px 453px #058478, 454px 454px #058478, 455px 455px #058478, 456px 456px #058478, 457px 457px #058478, 458px 458px #058478, 459px 459px #058478, 460px 460px #058478, 461px 461px #058478, 462px 462px #058478, 463px 463px #058478, 464px 464px #058478, 465px 465px #058478, 466px 466px #058478, 467px 467px #058478, 468px 468px #058478, 469px 469px #058478, 470px 470px #058478, 471px 471px #058478, 472px 472px #058478, 473px 473px #058478, 474px 474px #058478, 475px 475px #058478, 476px 476px #058478, 477px 477px #058478, 478px 478px #058478, 479px 479px #058478, 480px 480px #058478, 481px 481px #058478, 482px 482px #058478, 483px 483px #058478, 484px 484px #058478, 485px 485px #058478, 486px 486px #058478, 487px 487px #058478, 488px 488px #058478, 489px 489px #058478, 490px 490px #058478, 491px 491px #058478, 492px 492px #058478, 493px 493px #058478, 494px 494px #058478, 495px 495px #058478, 496px 496px #058478, 497px 497px #058478, 498px 498px #058478, 499px 499px #058478, 500px 500px #058478;
}



.blacks {
color: #0c0e0d;
}

/* Character Images Styles */
[data-screen="help"]  {
  color: #382e2e;
}


help-screen [data-content=help] h3 {
    margin-bottom: 1rem;
    font-size: 2rem;
}

/* Character Images Styles */
[data-screen="game"] [data-character] {

}

/* Other Images Styles */
[data-screen="game"] [data-image] {

}

/**
 * ===========================
 * Quick Menu Styling
 * ===========================
**/

/* These styles are applied to the Mobile version of the Quick Menu */

/* Quick Menu Style */
[data-component="quick-menu"] {
   z-index: 1000;
  /* background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);*/
  background: transparent;
}

/* Quick Menu Buttons Style */
[data-component="quick-menu"] span {

}

/* Quick Menu Buttons Style on Hover */
[data-component="quick-menu"] span:hover {

}

/* Quick Menu Buttons Icon Style */
[data-component="quick-menu"] > span > .fa  {

}

/**
 * ===========================
 * Range Styling
 * ===========================
**/

/* Use the background property to set a color for these */
input[type=range]:focus::-webkit-slider-runnable-track {

}

input[type=range]::-webkit-slider-runnable-track {

}

input[type=range]:focus::-ms-fill-upper {

}

input[type=range]:focus::-ms-fill-lower {

}

input[type=range]::-moz-range-track {

}

input[type=range]::-ms-fill-lower {

}

input[type=range]::-ms-fill-upper {

}



/**
 * ===========================
 * Choice Styling
 * ===========================
**/

[data-content="wrapper"] choice-container {

    display: inline-flex !important
    flex-direction: none;
    top: 67% !important;
    display: inline-block !important;
    overflow-y: unset;
}



choice-container {
    z-index: 18;
    max-height: 90%;
    overflow-y: unset !important;
    height: auto;
    width: 55%;
    -webkit-box-pack: center;
    justify-content: center;
    margin: 0 auto;
    flex-wrap: wrap;
    top: 35%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    position: absolute !important;
}

.buttonGreen {
    font-weight: bold;
    background: #82b782;
}


.buttonRed {
    font-weight: bold;
    background: #dd5858;
}


.cssFace  {
    bottom: 514px !important;
    position: absolute;
    display: block;
}


.cssLogo  {
    bottom: 414px !important;
    position: absolute;
    display: block;
    width: 240px;
}


.cssLogo2  {
	top: 700px !important;
	position: absolute;
	display: block;
	width: 240px;
}

.play {

	font-size: 3rem;
    font-family: 'Raleway', sans-serif;
    background: none;
    margin: 0em;
    padding: 0em;
    border-radius: 0em;
    background: #733434 !important;
    display: inline-block;
}


.play:hover  {
    font-size: 3rem;
    background: none;
    opacity: 0.5;
    text-align: left;

}

.playWrapper {
    text-align: center;
    display: block;

}

choice-container [data-content=wrapper] {
    display: -webkit-box;
    display: flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    text-align: center;
    display: inline-block;
}


.cssChara1  {
	top: 221px !important;
	position: absolute;
	display: block;
	left: 32% !important;
	max-height: 150% !important;
	max-width: 150% !important;
	z-index: 1;
}


.cssChara2  {
	top: -22px !important;
	position: absolute;
	display: block;
	left: -69% !important;
	max-height: 150% !important;
	max-width: 150% !important;
	z-index: 1;
}


.cssChara3  {
	top: -90px !important;
	position: absolute;
	display: block;
	left: 11% !important;
	max-height: 150% !important;
	max-width: 150% !important;
	z-index: 1;
}


.faceChoice [data-content="wrapper"] {
    border:solid 0 black;
    flex-direction:row;
    justify-content: space-around;
    align-content: center;
    align-items: baseline;
}


.color1 {

   background: #FFFFFF !important;
	}

choice-container.faceChoice {
	width: 59%;
    z-index:17;	
    top: 718px;
}

choice-container.avatarChoice {
	width: 100%;
    z-index:17;	
    display: block;
    top: 79%;
}


button.cat:before {
    content: "";
    display: block;
    background: url("../assets/ui/choice/cat-head-35.png") no-repeat;
    width: 35px;
    height: 35px;
    float: left;
    margin: 0 6px 0 0;
}


.avatar_pose_1 {
	top: 221px !important;
	position: absolute;
	display: block;
	left: 32% !important;
	max-height: 150% !important;
	max-width: 150% !important;
	z-index: 16;
}


.avatar_pose_1_a {
	top: 221px !important;
	position: absolute;
	display: block;
	left: 32% !important;
	max-height: 150% !important;
	max-width: 150% !important;
	z-index: 17;
}


.avatar_pose_2 {
	top: -90px !important;
	position: absolute;
	display: block;
	left: 11% !important;
	max-height: 150% !important;
	max-width: 150% !important;
	z-index: 8;

}

.avatar_pose_3 {
	top: -22px !important;
	position: absolute;
	display: block;
	left: -69% !important;
	max-height: 150% !important;
	max-width: 150% !important;
	z-index: 9;
}


.avatar_pose_3_a {
	top: 230px !important;
	position: absolute;
	display: block;
	left: -69% !important;
	max-height: 150% !important;
	max-width: 150% !important;
	z-index: 9;
}

.faceShape_1 {
	display:block;
	background: url("../assets/dressup/DollMaker/doll/Face/Face-Pointy-W.png") no-repeat center;
	height: 240px;
	width: 200px;
}
.faceShape_2  {
	display:block;
	background: url("../assets/dressup/DollMaker/doll/Face/Face-Square-W.png") no-repeat center;
	height: 240px;
	width: 200px;
}

.faceShape_3  {
	display:block;
	background: url("../assets/dressup/DollMaker/doll/Face/Face-Thin-W.png") no-repeat center;
	height: 240px;
	width: 200px;
}

.faceShape_4  {
	display:block;
	background: url("../assets/dressup/DollMaker/doll/Face/Face-Round-W.png") no-repeat center;
	height: 240px;
	width: 200px;
}



.skinColor_1 {
	display:block;
	background: url("../assets/dressup/DollMaker/doll/Face/Face-Pointy-W.png") no-repeat center;
	height: 240px;
	width: 200px;
}
.skinColor_2  {
	display:block;
	background: url("../assets/dressup/DollMaker/doll/Face/Face-Pointy-X.png") no-repeat center;
	height: 240px;
	width: 200px;
}

.skinColor_3  {
	display:block;
	background: url("../assets/dressup/DollMaker/doll/Face/Face-Pointy-Y.png") no-repeat center;
	height: 240px;
	width: 200px;
}

.skinColor_4  {
	display:block;
	background: url("../assets/dressup/DollMaker/doll/Face/Face-Pointy-Z.png") no-repeat center;
	height: 240px;
	width: 200px;
}



.svg-inline--fa {
    display: inline-block;
    font-size: inherit;
    height: 1em;
    vertical-align: -.125em;
    margin-top: 13px;
}



.quickmenu button {
    margin: 10px !important;
    min-width: "100px";
    padding: 10px 10px 10px 10px;
}



main-menu>button  {
    margin: 10px !important;
    border-radius: 14px;
    background: #c92c2c;
    width: auto;
    min-width: 200px;
    padding: 10px 10px 10px 10px
}

.particles-button {
    margin: 10px !important;
    border-radius: 14px;
    background: #c92c2c;
    width: auto;
    min-width: 200px;
    padding: 10px 10px 10px 10px
}


.affirmativeSofia {
    color: #726992;
    font-weight: 900;

}

.affirmativePidru {
    color: #dca19c;
    font-weight: 900;
}



/**
 * ===========================
 * plugins styling
 * ===========================
**/


 stats-modal meter {
    width: 61%;
}


lovers-modal h3 {
    font-size: 2em;
}

stats-modal .modal__content,  lovers-modal .modal__content {
	flex-direction: column;
  width: 49%;
  padding: 50px;
}



stats-modal .modal__content div {
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin: 0.5rem auto;
}

 
@media (max-width: 601px)  {
stats-modal .modal__content {
    width: 80%;
} 
}


.bx-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;

    background: transparent url(../assets/ui/pattern.png) repeat top left;
    z-index: 10;
}



  .bx-overlay-2 {
    background: linear-gradient(0deg, rgba(45, 36, 36, 0.46) 0%, rgba(10, 10, 10, 0.22) 5%, rgba(255, 255, 255, 0.18) 100%);*/
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    z-index: 9;
    left: 0%;
   }


/* gem animate bg */

.world {
    height: calc(119vh - 200px);
    margin: 0 auto;
    overflow: hidden;
    position: absolute;
    width: 100%;
    display: block;
    z-index: 9;
}



.modal__content3 {

    }

/* in game notifcations */
.notifz  {
  font-size: 2rem;
  width: 247px;
}


.notifgreen  {  
    color: #202522;
    font-size: 2rem;
    font-weight: 900;
}

/* font style animated */
span.tips {
  line-height: 1.5; 
  color: hsl(198, 1%, 29%);
  display: inline;
  background-image: linear-gradient(
        transparent 50%,
        #e1fffe 50%,
        #b0f8ff 85%,
        transparent 85%,
        transparent 100%
    );
  background-repeat: no-repeat;
  background-size: 0% 100%;
  animation: animatedBackground 4s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s forwards;
  font-family: 'Gochi Hand',
       cursive;
       text-align: left;
       font-size: 130%; 
}

@keyframes animatedBackground {
    to {
        background-size: 100% 100%;
    }
}



  [data-component="text-box"] {
    min-height: 100%;
    max-height: 100%;
    position: absolute;
    z-index: 15;
    background: linear-gradient(rgba(208, 159, 159, 0), rgb(31 20 20 / 57%) 85%);
    /*linear-gradient(0deg, rgba(45, 36, 36, 0.46) 0%, rgba(10, 10, 10, 0.22) 5%, rgba(255, 255, 255, 0.18) 100%);*/
    color: blanchedalmond;
    font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif; 
   

  }

text-box [data-content=name] {
    padding-left: 1rem;
}



text-box[mode="nvl"]:after, text-box:after  {
  background: transparent;
}

.placesTitle_sub {
  font-size: 2rem;
  display: block;
}

.placesTitle_1_sub {
  text-shadow: -6px 5px 0px #f35f5f, -13px 10px 0px #d2474e, -19px 15px 0px #9c1313; }

.placesTitle_1    {
    font-size: 2em;
    text-shadow: -10px 10px 0px #44c18e, -20px 20px 0px #2e9e8f, -30px 30px 0px #248c5e;
    text-transform: uppercase;
    font-family: 'Rubik Mono One', sans-serif;
    color: #caf9dfe8;
    left: 25px;
    position: relative;

}


.placesTitle_2    {
  font-size: 2.4em;
  text-transform: uppercase;
  font-family: 'Rubik Mono One', sans-serif;
  position: relative;
  text-align: center;
  padding: 20px 20px 20px 20px;
  left: 0%;
  bottom: 0%;
  
}


.placesSubTitle_2 {
  background: transparent;
  padding: 1rem;
  text-align: right;
  color: #357962;
  font-weight: bold;
  text-shadow: none;
}


.placesTitle_3 {
  font-size: 3em;
  text-shadow: -10px 10px 0px #b6b93b, -20px 20px 0px #a0950d, -30px 30px 0px #8e7306;
  text-transform: uppercase;
  font-family: 'Rubik Mono One', sans-serif;
  color: #f1e37e;
  left: 25px;
  bottom: 282px;
  position: relative;

}


.violet {
  text-shadow: -10px 10px 0px #8b47a0, -20px 20px 0px #762b88, -30px 30px 0px #5d1e69;
  color: #d095ea;
  border: #e9bfffa6 solid 16px;
  background: #5d0c5db5;

}

.orange2 {
    text-shadow: -10px 10px 0px #FD9346, -20px 20px 0px #FD7F2C, -30px 30px 0px #FF6200;
    color: #FDB777;
    border: #FDA766 solid 16px;
    background: #fb7800;
}

.orangez {
  color: #fb7800;
}

.green2blue {
  text-shadow: -10px 10px 0px #44c18e, -20px 20px 0px #349e77, -30px 30px 0px #248c5e;
  border: #7fffd4a6 solid 8px;
  color: #caf9dfe8;
  background: #188c65b5;
}


.placesTitle_2.green2blue small, .placesTitle_2.madridMetro small {
    font-size: 31%;
    font-family: sans-serif;
    text-shadow: none;
    padding: 0rem;
    line-height: 24px;
    text-align: center;
    left: 1%;
}


.placesTitle_2.green2blue small {
    /*border-top: white solid 1px;*/
    padding: 8px;

}

.madridMetro {
    text-shadow: -10px 10px 0px #3a459c, -20px 20px 0px #2c3890, -30px 30px 0px #163690;
    border: #ED1C23 solid 32px;
    color: #fdfdfd;
    background: #0C4DA2;
}




.titlez {
  font-family: monospace;
  text-align: justify;
}

.violetz {
  color: #571057;

}

.blue2 {
  text-shadow: -10px 10px 0px #6076e8, -20px 20px 0px #3c5bce, -30px 30px 0px #2845abf2;
  color: #92a4ff;
  border: #83b2f5a6 solid 16px;
  background: #6164dab5;
}

.bluez {
  color: #5762ce;;
}



.nameplateBIS {
    background: #ffffffa3;
    padding: 30px;
    text-shadow: none;
    bottom: 78px;
    position: relative;
    outline: 3px solid #e8e6e270;
    outline-offset: -17px;
    
}


.red1 {
    text-shadow: -10px 10px 0px #DC362D, -20px 20px 0px #C21912, -30px 30px 0px #8F0700;
    color: #fb8484;
    border: #f78383 solid 16px;
    background: #B40800;
}

.red1z {
  color: #DC362D;
}



.yellow {
    text-shadow: -10px 10px 0px #FFEA61, -20px 20px 0px #FFDD3C, -30px 30px 0px #FFD400;
    color: #FFFFB7;
    border: #FFFFB7 solid 16px;
    background: #ffd400a8;
}

.yellowz {
  color: #e8bd1a;;
}


.grey {
  text-shadow: -10px 10px 0px #9c999c, -20px 20px 0px #817d82, -30px 30px 0px #6a656b;
  color: #dfdde0;
  border: #ebe8eca6 solid 16px;
  background: #bdbdbd;
}

.greyz {
  color: #bdbdbd;
}


.knowMore {
    font-size: 5rem;
    text-align: center;
    font-style: italic;
    font-weight: 900;
    -webkit-transition: color 0.5s;
    transition: color 0.5s;
}


.modal {
    top: 0;
    left: 0px;
    background: rgb(239 236 232 / 95%);
    z-index: 99999999999999;
}





.splashtitle {

 width: 300px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

}




  button.splashplay {
      display: inline-block;
    background-color: #ffffff08;
    border: 4px solid #fffdfd;
    border-radius: 100px;
    color: #fff1f1;
    height: 56px;
    font-size: 42px;
    text-align: center;
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1px;
    text-decoration: none;
    padding: 2.5rem 3rem;

  }


  button.splashplay:hover {
       background-color: #ffb72f;
    border: 4px solid #ffb72fad;
   }






/** Small Screens (301px) **/
@media screen and (max-width: 17.56255em) {    
   
   /* Text Box styling for mobile */

  [data-component="text-box"] {
    font-size: 2.1rem;
    position: absolute;
    left: 35px;
    z-index: 15;
    color: blanchedalmond;
    font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif; 

  }


.link--takiri {
  font-size: 3rem;
}

  button.splashplay {
    position: relative;
    top: 144% !important;
  }

}




/** Extra Small Devices, Phones (480px) **/
@media screen and (min-width : 30em) {

[data-component="text-box"] {
   
    z-index: 15;
    position: absolute;
    font-size: 1.4rem;
    max-height: 51%;
    padding-top: 0%;
    top: 148px;

}

[data-ui="who"] {
    font-size: 2em;
    width: 89%;
    /*line-height: 2rem;*/
    padding: 0;

}

[data-content=dialog], [data-ui=say] {
    padding: 0.5rem 0.5rem 0.5rem  0.5rem;
}

.link--takiri {
  font-size: 3rem;
}


text-box p {
    display: block;
    width: 100%;
   
    margin: 0;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
}


text-box [data-content=wrapper] .nvl {
    -webkit-box-flex: 1;
    flex-grow: 1;
   
}

text-box [data-content=wrapper] {
  background: none;
   
}

[data-content=dialog], [data-ui=say] {
    padding: 0rem 1rem 1rem 2rem;

  
}



.titlelink {
    font-size: 2rem;
}

button.splashplay {
    position: relative;
    top: 144% !important;
  }


  }




/** Medium Screens, Tablets (601px) **/ 
/*CSS style for tablet and larger*/
@media screen and (min-width: 37.56255em) {

  /* Quick Menu Style */
  [data-component="quick-menu"] {
    right: 34px;
    top: 91%;
  }


  /* Text Box styling */

[data-component="text-box"] {
    position: absolute;
    z-index: 15;
    font-size: 1.8rem;
    color: blanchedalmond;
    font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    bottom: 0rem;
    top: 146px;
    padding-top: 4%;
    bottom: 0px;
  }

}

  /* Quick Menu Buttons Style */
  [data-component="quick-menu"] span {

  }

  /* Quick Menu Buttons Style on Hover */
  [data-component="quick-menu"] span:hover {

  }

  .link--takiri {
    font-size: 6rem;
  }


  .titlelink {
    font-size: 8rem;
    line-height: 6rem;
  }

  button.splashplay {
    top: 170% !important;
    position: relative;

  }  
}


/** Medium Devices, Desktops (768px)**/
@media screen and (min-width: 48em) {
	.modal > * {
		width: 60%;
	}
}

/** Medium Devices, Desktops (768px by 432px)**/
@media screen and (min-width: 48em) and (min-height: 27em) {
	body {
		font-size: 1.2rem;
	}

	button {
		width: 10rem;
		height: 3.5rem;
	}
}


/** Medium Devices, Tablets (992px)**/
@media screen and (min-width: 62em) {

  [data-component="text-box"] {
    position: absolute;
    z-index: 15;
    font-size: 1.8rem; 
    color: blanchedalmond;
    font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    bottom: 0rem;
    padding-top: 12%;
    top: 477px;
    left: 0px;
  }



.link--takiri {
  font-size: 7rem;
}

}





/** Medium Devices, iPhone 5/SE (568px)**/
@media screen and (min-width: 568px) {
  
  [data-component="text-box"] {
    z-index: 15;
    position: absolute;
    font-size: 1.4rem;
    max-height: 51%;
    padding-top: 0%;
    top: 121px;
    left: 0px;
    }


  .link--takiri {
    font-size: 4rem;
   }
}



/** Medium Devices, Galawy S5 (640px)**/
@media screen and (min-width: 640px) {

 [data-component="text-box"] {
    z-index: 15;
    position: absolute;
    font-size: 1.4rem;
    max-height: 51%;
    padding-top: 10%;
    top: 142px;
    left: 0px;
}
}


/** Medium Devices, iPhone 6/7 (736px)**/
@media screen and (min-width: 736px) {

 [data-component="text-box"] {
    position: absolute;
    z-index: 15;
    font-size: 1.8rem;
    color: blanchedalmond;
    font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    bottom: 0rem;
    top: 147px;
    padding-top: 11%;
    bottom: 0px;
    left: 0px;
}

.link--takiri {
  font-size: 4rem;
}
}


/** Medium Devices, iPad (1024px)**/
@media screen and (min-width: 1024px) {

[data-component="text-box"] {
    position: absolute;
    z-index: 15;
    font-size: 1.8rem;
    color: blanchedalmond;
    font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    bottom: 0rem;
    top: 50%;
    padding-top: 10%;
    bottom: 0px;
    /*left: 49px;*/
}


.link--takiri {
  font-size: 6rem;
}
}






/** HD Screen, Large Devices, Wide Screens, Desktop (1200px) **/
@media screen and (min-width: 75em) {

  /* Text Box styling */
  [data-component="text-box"] {
    position: absolute;
    z-index: 15;
    font-size: 2.1rem;
    background: none;
   /* background: linear-gradient(0deg, rgba(45, 36, 36, 0.59) 0%, rgba(10, 10, 10, 0.5) 5%, rgba(255, 255, 255, 0) 100%); */
    color: blanchedalmond;
    font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    bottom: 0rem;
    padding-top: 31%;
    top: 0px;
    left: 0px;
   }


   .modal > * {
		width: 40%;
	}


  .link--takiri {
   font-size: 7rem;
  }


  .titlelink {
    font-size: 6rem;
    line-height: 1.2;
  }

  button.splashplay {
    top: 320% !important;
  }


.placesTitle_2    {
    font-size: 1.8em;
    text-align: center;
    padding: 0rem 2rem 2rem 3.5rem;
   /* position: absolute;*/
}

}


/** HD Screen, Large Devices, Wide Screens (1200px by 675px) **/
@media screen and (min-width: 75em) and (min-height: 42.187em) {
	body {
		font-size: 1.5rem;
	}
	.modal > * {
		width: 40%;
	}
}


/** Full HD Screen, Large Devices, Wide Screens, Large Desktops (1920px) **/
@media screen and (min-width: 120em) {

  [data-component="text-box"] {

    position: absolute;
    z-index: 15;
    font-size: 2.1rem;
    background: linear-gradient(0deg, rgba(45, 36, 36, 0.59) 0%, rgba(10, 10, 10, 0.5) 5%, rgba(255, 255, 255, 0) 100%);
    color: blanchedalmond;
    font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    bottom: 0rem;
}

.link--takiri {
  font-size: 7rem;
}

}

/** Retina Screen , Large Devices, Wide Screens(2560px) **/
@media screen and (min-width: 160em) {}

/** 4k Screens, Large Devices, Wide Screens (3840px) **/
@media screen and (min-width: 240em) {}

/** 5k Screens, Large Devices, Wide Screens (5000px) **/
@media screen and (min-width: 312.5em) {}

/** 8k Screens, Large Devices, Wide Screens (8000px) **/
@media screen and (min-width: 500em) {}





.splash {
    background: transparent; /* #cddcce82 */
    display: flex;
    align-items: center;
    border: 0px solid #879c87;
    z-index: 12;
    text-align: center;
    justify-content: center;
    position: absolute;
    top: 36%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 10px;

}

.link--splash {
    color: #2E0000;
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-style: italic;
    padding: 0em 0 0em;
    -webkit-transition: color 0.5s;
    transition: color 0.5s;
    left: 0px;
   
}


.link--splash:hover {
  color: #576b67;

}

.link--splash::before,
.link--splash::after {
  content: '';
  position: absolute;
  border-width: 4px 0;
  border-style: solid;
  border-color: #fff;
  pointer-events: none;
  -webkit-transform: scale3d(0,1,1);
  transform: scale3d(0,1,1);
  -webkit-transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
  transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}

.link--splash::before {
    width: 72%;
    left: 14%;
    height: 119%;
    top: -6%;
}

.link--splash::after {
    width: 38%;
    left: 31%;
    height: 137%;
    top: -32px;
}

.link--splash::before,
.link--splash::after {
  -webkit-transform: scale3d(1,1,1);
  transform: scale3d(1,1,1);
}

.link--splash.titley span {
    color: #FFAB2E;
    font-family: 'Verdana';
    font-weight: 900;
    position: absolute;
    font-size: 0.3em;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
    transition: opacity 0.5s, transform 0.5s;
}

.link--splash.titley span:first-of-type {
  bottom: 100%;
  margin-bottom: 66px;
  -webkit-transform: scale3d(0.8,0.8,1) translate3d(0,10px,0);
  transform: scale3d(0.8,0.8,1) translate3d(0,10px,0);
}

.link--splash.titley span:last-of-type {
  top: 100%;
  margin-top: 67px;
  -webkit-transform: scale3d(0.8,0.8,1) translate3d(0,-10px,0);
  transform: scale3d(0.8,0.8,1) translate3d(0,-10px,0);
}

.link--splash.titley span {
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  font-style: normal;
}

.link--splash.titley span:first-of-type {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

.link--splash.titley span:last-of-type {
  -webkit-transition-delay: 0.20s;
  transition-delay: 0.20s;
}


.titlelink {
    outline: none;
    text-decoration: none;
    position: relative;
    display: inline-block;
}

.title01 {
    color: #b1c0b2;
    position: absolute;
    top: 79%;
    left: 50%;
    display: flex;
    text-align: center;
    transform: translate(-50%, -50%);
}


.titley {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  background: -webkit-gradient(linear, left top, right top, from(#feac5e), color-stop(#c779d0), to(#4bc0c8));
  background: linear-gradient(to right, #ffeb3b, #ffb72f, #f39f00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;

}





.letsPlay {
    position: relative;
    font-family: 'Verdana'!important;
    display: block;
    color: #FFAB2E !important;
    top: 130px;
    right: 130px;
    font-size: 40px !important;
    font-style: normal;
    margin-top: 81px !important;
    font-weight: 900 !important;
    text-transform: uppercase;
}



button.splashplay {
    position: relative;
}


.bgImage {
    width: 100%;
    height: auto;
}

::-webkit-scrollbar {
    background: transparent;
    width: 0px;
    height: 5px;
}


shaky {
  position: relative;
  color: #ffb72f;
  display: inline-block;
  animation: .3s shake infinite;
}

@keyframes shake {
  0% { transform: skewX(-8deg); }
  100% { transform: skewX(8deg); }
}




/* CSS Text effect glitch */
.glitch {
  color: white;
  position: relative;
  width: 400px;
 
}

@keyframes noise-animOne {
  0% {
    clip: rect(19px, 9999px, 5px, 0);
  }
  5% {
    clip: rect(76px, 9999px, 66px, 0);
  }
  10% {
    clip: rect(28px, 9999px, 93px, 0);
  }
  15% {
    clip: rect(5px, 9999px, 72px, 0);
  }
  20% {
    clip: rect(14px, 9999px, 54px, 0);
  }
  25% {
    clip: rect(90px, 9999px, 47px, 0);
  }
  30% {
    clip: rect(74px, 9999px, 26px, 0);
  }
  35% {
    clip: rect(19px, 9999px, 32px, 0);
  }
  40% {
    clip: rect(13px, 9999px, 98px, 0);
  }
  45% {
    clip: rect(58px, 9999px, 50px, 0);
  }
  50% {
    clip: rect(28px, 9999px, 56px, 0);
  }
  55% {
    clip: rect(21px, 9999px, 67px, 0);
  }
  60% {
    clip: rect(25px, 9999px, 88px, 0);
  }
  65% {
    clip: rect(82px, 9999px, 95px, 0);
  }
  70% {
    clip: rect(92px, 9999px, 32px, 0);
  }
  75% {
    clip: rect(84px, 9999px, 8px, 0);
  }
  80% {
    clip: rect(58px, 9999px, 34px, 0);
  }
  85% {
    clip: rect(98px, 9999px, 23px, 0);
  }
  90% {
    clip: rect(59px, 9999px, 35px, 0);
  }
  95% {
    clip: rect(2px, 9999px, 19px, 0);
  }
  100% {
    clip: rect(94px, 9999px, 87px, 0);
  }
}
.glitch:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 red;
  top: 0;
  color: white;
  background: black;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-animOne 2s infinite linear alternate-reverse;
}

@keyframes noise-animTwo {
  0% {
    clip: rect(96px, 9999px, 59px, 0);
  }
  5% {
    clip: rect(95px, 9999px, 19px, 0);
  }
  10% {
    clip: rect(11px, 9999px, 25px, 0);
  }
  15% {
    clip: rect(58px, 9999px, 15px, 0);
  }
  20% {
    clip: rect(35px, 9999px, 97px, 0);
  }
  25% {
    clip: rect(18px, 9999px, 65px, 0);
  }
  30% {
    clip: rect(15px, 9999px, 18px, 0);
  }
  35% {
    clip: rect(29px, 9999px, 8px, 0);
  }
  40% {
    clip: rect(10px, 9999px, 3px, 0);
  }
  45% {
    clip: rect(70px, 9999px, 28px, 0);
  }
  50% {
    clip: rect(63px, 9999px, 76px, 0);
  }
  55% {
    clip: rect(59px, 9999px, 41px, 0);
  }
  60% {
    clip: rect(41px, 9999px, 34px, 0);
  }
  65% {
    clip: rect(64px, 9999px, 93px, 0);
  }
  70% {
    clip: rect(63px, 9999px, 16px, 0);
  }
  75% {
    clip: rect(45px, 9999px, 100px, 0);
  }
  80% {
    clip: rect(5px, 9999px, 13px, 0);
  }
  85% {
    clip: rect(36px, 9999px, 77px, 0);
  }
  90% {
    clip: rect(91px, 9999px, 51px, 0);
  }
  95% {
    clip: rect(46px, 9999px, 24px, 0);
  }
  100% {
    clip: rect(66px, 9999px, 86px, 0);
  }
}
.glitch:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 blue;
  top: 0;
  color: white;
  background: black;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-animTwo 3s infinite linear alternate-reverse;
}




span.smoky {
  display: inline-block;

  font-size: 5rem;
  font-family: "Finger Paint";
  text-shadow: 0 0 0 whitesmoke;
  -webkit-animation: smoky 2s 1s both;
          animation: smoky 2s 1s both;
}

span.smoky:nth-child(even) {
  -webkit-animation-name: smoky-mirror;
          animation-name: smoky-mirror;
}

@-webkit-keyframes smoky {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    -webkit-transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
            transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

@keyframes smoky {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    -webkit-transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
            transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}
@-webkit-keyframes smoky-mirror {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    -webkit-transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
            transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}
@keyframes smoky-mirror {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    -webkit-transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
            transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}
span.smoky:nth-of-type(1) {
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}

span.smoky:nth-of-type(2) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

span.smoky:nth-of-type(3) {
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}

span.smoky:nth-of-type(4) {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}

span.smoky:nth-of-type(5) {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

span.smoky:nth-of-type(6) {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}

span.smoky:nth-of-type(7) {
  -webkit-animation-delay: 1.7s;
          animation-delay: 1.7s;
}

span.smoky:nth-of-type(8) {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}

span.smoky:nth-of-type(9) {
  -webkit-animation-delay: 1.9s;
          animation-delay: 1.9s;
}

span.smoky:nth-of-type(10) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

span.smoky:nth-of-type(11) {
  -webkit-animation-delay: 2.1s;
          animation-delay: 2.1s;
}

span.smoky:nth-of-type(12) {
  -webkit-animation-delay: 2.2s;
          animation-delay: 2.2s;
}

span.smoky:nth-of-type(13) {
  -webkit-animation-delay: 2.3s;
          animation-delay: 2.3s;
}

span.smoky:nth-of-type(14) {
  -webkit-animation-delay: 2.4s;
          animation-delay: 2.4s;
}

span.smoky:nth-of-type(15) {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}

span.smoky:nth-of-type(16) {
  -webkit-animation-delay: 4.6s;
          animation-delay: 4.6s;
}

span.smoky:nth-of-type(17) {
  -webkit-animation-delay: 4.7s;
          animation-delay: 4.7s;
}

span.smoky:nth-of-type(18) {
  -webkit-animation-delay: 4.8s;
          animation-delay: 4.8s;
}

span.smoky:nth-of-type(19) {
  -webkit-animation-delay: 4.9s;
          animation-delay: 4.9s;
}

span.smoky:nth-of-type(20) {
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}

span.smoky:nth-of-type(21) {
  -webkit-animation-delay: 5.1s;
          animation-delay: 5.1s;
}



.citytitle {
    padding-top: 5px;
}



.link {
  outline: none;
  text-decoration: none;
  position: relative;
  line-height: 1;
  color: #FCECB9;
  display: inline-block;
}

/* Takiri */
.link--takiri {
  font-style: italic;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  padding: 0 0px 20px;
  -webkit-transition: color 0.5s;
  transition: color 0.5s;
}

.link--takiri:hover {
  color: #FFAB2E;
}

.link--takiri::before {
  content: '';
  position: absolute;
  height: 36px;
  width: 120%;
  top: 50%;
  margin-top: -18px;
  left: -10%;
  z-index: -1;
  background: #bd1e1e;
  -webkit-transform: rotate3d(0,0,1,45deg) scale3d(0,1,1);
  transform: rotate3d(0,0,1,45deg) scale3d(0,1,1);
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

.link--takiri:hover::before {
  -webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
  transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
}

.link--takiri span {
  font-size: 17.1%;
    font-weight: 400;
    position: absolute;
    right: -40px;
    color: #FCECB9;
    bottom: 3px;
    width: 406px;
  opacity: 0;
  -webkit-transform: translate3d(-10px,-10px,0);
  transform: translate3d(-10px,-10px,0);
  -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
  transition: transform 0.5s, opacity 0.5s;
}

.link--takiri:hover span {
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.point2 {
transform-origin: 154.9px 1040.116px !important;
}




button.keybordElevator {  
    float: left;  
    top: 0% !important;
    margin: 0 5px 5px 0;  
    width: 90px;  
    height: 90px;  
    font-size: 4rem;
    line-height: 60px;  
    text-align: center;  
    background: #fff;  
    border: 2px solid #c7efcc;  
    border-radius: 5px;  
    padding: 0rem 0rem;
    color: #128e6c;
  }  


button.keybordElevator:hover {  
    position: relative;
    top: 1px !important;
    left: 2px;
    border: 3px solid #4bc5924f;
    cursor: pointer;
    color: #6cb763;
    width: 85px;
    height: 85px;
    background: #fdfdfd94;
  }  


  .numericPad {
    padding: 3rem;
    background: #95e8d214;
    width: 30%;
    max-height: 555px;
  }  




/* Text particles effects */

span.particletext {
  text-align: center;
  font-size: 48px;
  position: relative; 
}
span.particletext.bubbles > .particle {
  opacity: 0;
  position: absolute;
  background-color: rgba(33, 150, 243, 0.5);
  -webkit-animation: bubbles 3s ease-in infinite;
          animation: bubbles 3s ease-in infinite;
  border-radius: 100%;
}
span.particletext.hearts > .particle {
  opacity: 0;
  position: absolute;
  background-color: #cc2a5d;
  -webkit-animation: Myhearts 3s ease-in infinite;
          animation: Myhearts 3s ease-in infinite;
}
span.particletext.hearts > .particle:before, span.particletext.hearts > .particle:after {
  position: absolute;
  content: '';
  border-radius: 100px;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #cc2a5d;
}
span.particletext.hearts > .particle:before {
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
span.particletext.hearts > .particle:after {
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
span.particletext.lines > .particle {
  position: absolute;
  background-color: rgba(244, 67, 54, 0.5);
  -webkit-animation: lines 3s linear infinite;
          animation: lines 3s linear infinite;
}



span.particletext.confetti > .particle {
  opacity: 0;
  position: absolute;
  -webkit-animation: confetti 3s ease-in infinite;
          animation: confetti 3s ease-in infinite;
}
span.particletext.confetti > .particle.c1 {
  background-color: rgba(76, 175, 80, 0.5);
}
span.particletext.confetti > .particle.c2 {
  background-color: rgba(156, 39, 176, 0.5);
}

.confetti{
    position: inherit;
}

.center {
  font-size: 2rem;
  font-weight: 900;
  font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  width: 100%;
  height: 100vh;
  background-color: transparent;
 
  }


span.particletext.fire > .particle {
  position: absolute;
  background-color: rgba(255, 193, 7, 0.5);
  border-radius: 40px;
  border-top-right-radius: 0px;
  -webkit-animation: fires 0.8s linear infinite;
          animation: fires 0.8s linear infinite;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  opacity: 0;
}
span.particletext.fire > .particle:before {
  position: absolute;
  content: '';
  top: 60%;
  left: 40%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  border-radius: 40px;
  border-top-right-radius: 0px;
  background-color: rgba(251, 140, 0, 0.5);
}
span.particletext.sunbeams > .particle {
  position: absolute;
  background-color: rgba(253, 216, 53, 0.5);
  -webkit-animation: sunbeams 3s linear infinite;
          animation: sunbeams 3s linear infinite;
}

@-webkit-keyframes bubbles {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
    -webkit-transform: translate(0, -20%);
            transform: translate(0, -20%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, -1000%);
            transform: translate(0, -1000%);
  }
}

@keyframes bubbles {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
    -webkit-transform: translate(0, -20%);
            transform: translate(0, -20%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, -1000%);
            transform: translate(0, -1000%);
  }
}
@-webkit-keyframes hearts {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0%) rotate(45deg);
            transform: translate(0, 0%) rotate(45deg);
  }
  20% {
    opacity: 0.8;
    -webkit-transform: translate(0, -20%) rotate(45deg);
            transform: translate(0, -20%) rotate(45deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, -1000%) rotate(45deg);
            transform: translate(0, -1000%) rotate(45deg);
  }
}
@keyframes Myhearts {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0%) rotate(45deg);
            transform: translate(0, 0%) rotate(45deg);
  }
  20% {
    opacity: 0.8;
    -webkit-transform: translate(0, -20%) rotate(45deg);
            transform: translate(0, -20%) rotate(45deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, -1000%) rotate(45deg);
            transform: translate(0, -1000%) rotate(45deg);
  }
}
@-webkit-keyframes lines {
  0%, 50%, 100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  25% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  75% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
@keyframes lines {
  0%, 50%, 100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  25% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  75% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
@-webkit-keyframes confetti {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0%) rotate(0deg);
            transform: translateY(0%) rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  35% {
    -webkit-transform: translateY(-800%) rotate(270deg);
            transform: translateY(-800%) rotate(270deg);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000%) rotate(1440deg);
            transform: translateY(2000%) rotate(1440deg);
  }
}
@keyframes confetti {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0%) rotate(0deg);
            transform: translateY(0%) rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  35% {
    -webkit-transform: translateY(-800%) rotate(270deg);
            transform: translateY(-800%) rotate(270deg);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000%) rotate(1440deg);
            transform: translateY(2000%) rotate(1440deg);
  }
}
@-webkit-keyframes fires {
  0% {
    -webkit-transform: rotate(-70deg) translateY(0%);
            transform: rotate(-70deg) translateY(0%);
  }
  25% {
    -webkit-transform: rotate(-20deg) translateY(-5%);
            transform: rotate(-20deg) translateY(-5%);
    opacity: 1;
  }
  50% {
    -webkit-transform: rotate(-70deg) translateY(-10%);
            transform: rotate(-70deg) translateY(-10%);
  }
  75% {
    -webkit-transform: rotate(-20deg) translateY(-20%);
            transform: rotate(-20deg) translateY(-20%);
  }
  100% {
    -webkit-transform: rotate(-70deg) translateY(-40%);
            transform: rotate(-70deg) translateY(-40%);
    opacity: 1;
  }
}
@keyframes fires {
  0% {
    -webkit-transform: rotate(-70deg) translateY(0%);
            transform: rotate(-70deg) translateY(0%);
  }
  25% {
    -webkit-transform: rotate(-20deg) translateY(-5%);
            transform: rotate(-20deg) translateY(-5%);
    opacity: 1;
  }
  50% {
    -webkit-transform: rotate(-70deg) translateY(-10%);
            transform: rotate(-70deg) translateY(-10%);
  }
  75% {
    -webkit-transform: rotate(-20deg) translateY(-20%);
            transform: rotate(-20deg) translateY(-20%);
  }
  100% {
    -webkit-transform: rotate(-70deg) translateY(-40%);
            transform: rotate(-70deg) translateY(-40%);
    opacity: 1;
  }
}
@-webkit-keyframes sunbeams {
  0% {
    -webkit-transform: translateY(40%) rotate(0deg);
            transform: translateY(40%) rotate(0deg);
  }
  50% {
    -webkit-transform: translateY(-40%) rotate(180deg);
            transform: translateY(-40%) rotate(180deg);
  }
  100% {
    -webkit-transform: translateY(40%) rotate(360deg);
            transform: translateY(40%) rotate(360deg);
  }
  0%,14%,17%,43%,53%,71%,80%,94%,100% {
    opacity: 0;
  }
  6%,15%,24%,28%,48%,55%,78%,82%,99% {
    opacity: 1;
  }
}
@keyframes sunbeams {
  0% {
    -webkit-transform: translateY(40%) rotate(0deg);
            transform: translateY(40%) rotate(0deg);
  }
  50% {
    -webkit-transform: translateY(-40%) rotate(180deg);
            transform: translateY(-40%) rotate(180deg);
  }
  100% {
    -webkit-transform: translateY(40%) rotate(360deg);
            transform: translateY(40%) rotate(360deg);
  }
  0%,14%,17%,43%,53%,71%,80%,94%,100% {
    opacity: 0;
  }
  6%,15%,24%,28%,48%,55%,78%,82%,99% {
    opacity: 1;
  }
}





.flashlight {  
    height: 100%;
    position: fixed;
    top: 0px !important;
    left: 0 !important;
    cursor: inherit;
    background: rgba(0,0,0,.09);
    width: 100%;
}

#bookquest-timer, #timer {  
    position: absolute;
    font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /*bottom: 64%;*/
    justify-content: center;
    z-index: 9999;
    width: 100%;
    color: black;
    font-size: 2rem;
    background: #faebd7e8;
}

 #bookquest-timer {  
  padding: 25px;
  width: 100% !important;


  }
 #timer {  
  padding: 0px;


  }





/* glowing light */
.container {

}

.top {

}

.stars {
  top: 0;
  left: 0;
  right: 0;
  height: 80%;
  z-index: -1;
}
.stars > * {
  position: absolute;
  background: #f1f1f1;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  animation: twinkle 2s infinite;
  transition-timing-function: ease-in-out;
}
.stars .star:nth-of-type(1) {
  position: relative;
  top: 60%;
  left: 81%;
  width: 2px;
  height: 2px;
  animation-delay: 1s;
}
.stars .star:nth-of-type(2) {
  position: relative;
  top: 11%;
  left: 29%;
  width: 4px;
  height: 4px;
  animation-delay: 2s;
}
.stars .star:nth-of-type(3) {
  position: relative;
  top: 15%;
  left: 43%;
  width: 5px;
  height: 5px;
  animation-delay: 4s;
}
.stars .star:nth-of-type(4) {
  position: relative;
  top: 40%;
  left: 37%;
  width: 3px;
  height: 3px;
  animation-delay: 5s;
}
.stars .star:nth-of-type(5) {
  position: relative;
  top: 31%;
  left: 49%;
  width: 5px;
  height: 5px;
  animation-delay: 5s;
}
.stars .star:nth-of-type(6) {
  position: relative;
  top: 47%;
  left: 100%;
  width: 5px;
  height: 5px;
  animation-delay: 4s;
}
.stars .star:nth-of-type(7) {
  position: relative;
  top: 79%;
  left: 25%;
  width: 5px;
  height: 5px;
  animation-delay: 3s;
}
.stars .star:nth-of-type(8) {
  position: relative;
  top: 74%;
  left: 12%;
  width: 3px;
  height: 3px;
  animation-delay: 5s;
}
.stars .star:nth-of-type(9) {
  position: relative;
  top: 95%;
  left: 96%;
  width: 5px;
  height: 5px;
  animation-delay: 2s;
}
.stars .star:nth-of-type(10) {
  position: relative;
  top: 90%;
  left: 41%;
  width: 3px;
  height: 3px;
  animation-delay: 2s;
}
.stars .star:nth-of-type(11) {
  position: relative;
  top: 75%;
  left: 99%;
  width: 6px;
  height: 6px;
  animation-delay: 5s;
}
.stars .star:nth-of-type(12) {
  position: relative;
  top: 71%;
  left: 48%;
  width: 1px;
  height: 1px;
  animation-delay: 2s;
}
.stars .star:nth-of-type(13) {
  position: relative;
  top: 50%;
  left: 2%;
  width: 4px;
  height: 4px;
  animation-delay: 4s;
}
.stars .star:nth-of-type(14) {
  position: relative;
  top: 15%;
  left: 81%;
  width: 1px;
  height: 1px;
  animation-delay: 1s;
}
.stars .star:nth-of-type(15) {
  position: relative;
  top: 79%;
  left: 88%;
  width: 2px;
  height: 2px;
  animation-delay: 3s;
}
.stars .star:nth-of-type(16) {
  position: relative;
  top: 54%;
  left: 28%;
  width: 5px;
  height: 5px;
  animation-delay: 5s;
}
.stars .star:nth-of-type(17) {
  position: relative;
  top: 35%;
  left: 92%;
  width: 1px;
  height: 1px;
  animation-delay: 2s;
}
.stars .star:nth-of-type(18) {
  position: relative;
  top: 98%;
  left: 50%;
  width: 5px;
  height: 5px;
  animation-delay: 4s;
}
.stars .star:nth-of-type(19) {
  position: relative;
  top: 15%;
  left: 76%;
  width: 4px;
  height: 4px;
  animation-delay: 2s;
}
.stars .star:nth-of-type(20) {
  position: relative;
  top: 23%;
  left: 73%;
  width: 1px;
  height: 1px;
  animation-delay: 4s;
}
.stars .star:nth-of-type(21) {
  position: relative;
  top: 33%;
  left: 62%;
  width: 5px;
  height: 5px;
  animation-delay: 5s;
}
.stars .star:nth-of-type(22) {
  position: relative;
  top: 66%;
  left: 96%;
  width: 2px;
  height: 2px;
  animation-delay: 1s;
}
.stars .star:nth-of-type(23) {
  position: relative;
  top: 32%;
  left: 78%;
  width: 5px;
  height: 5px;
  animation-delay: 4s;
}
.stars .star:nth-of-type(24) {
  position: relative;
  top: 55%;
  left: 65%;
  width: 3px;
  height: 3px;
  animation-delay: 4s;
}
.stars .star:nth-of-type(25) {
  position: relative;
  top: 61%;
  left: 28%;
  width: 1px;
  height: 1px;
  animation-delay: 2s;
}
.stars .star:nth-of-type(26) {
  position: relative;
  top: 3%;
  left: 60%;
  width: 1px;
  height: 1px;
  animation-delay: 2s;
}
.stars .star:nth-of-type(27) {
  position: relative;
  top: 7%;
  left: 20%;
  width: 4px;
  height: 4px;
  animation-delay: 4s;
}
.stars .star:nth-of-type(28) {
  position: relative;
  top: 4%;
  left: 29%;
  width: 4px;
  height: 4px;
  animation-delay: 2s;
}
.stars .star:nth-of-type(29) {
  position: relative;
  top: 13%;
  left: 48%;
  width: 3px;
  height: 3px;
  animation-delay: 4s;
}
.stars .star:nth-of-type(30) {
  position: relative;
  top: 86%;
  left: 96%;
  width: 1px;
  height: 1px;
  animation-delay: 5s;
}
.stars .star:nth-of-type(31) {
  position: relative;
  top: 49%;
  left: 80%;
  width: 6px;
  height: 6px;
  animation-delay: 1s;
}
.stars .star:nth-of-type(32) {
  position: relative;
  top: 47%;
  left: 94%;
  width: 5px;
  height: 5px;
  animation-delay: 5s;
}
.stars .star:nth-of-type(33) {
  position: relative;
  top: 1%;
  left: 64%;
  width: 5px;
  height: 5px;
  animation-delay: 3s;
}
.stars .star:nth-of-type(34) {
  position: relative;
  top: 69%;
  left: 12%;
  width: 1px;
  height: 1px;
  animation-delay: 3s;
}
.stars .star:nth-of-type(35) {
  position: relative;
  top: 51%;
  left: 14%;
  width: 3px;
  height: 3px;
  animation-delay: 3s;
}
.stars .star:nth-of-type(36) {
  position: relative;
  top: 72%;
  left: 31%;
  width: 1px;
  height: 1px;
  animation-delay: 1s;
}
.stars .star:nth-of-type(37) {
  position: relative;
  top: 88%;
  left: 43%;
  width: 2px;
  height: 2px;
  animation-delay: 2s;
}
.stars .star:nth-of-type(38) {
  position: relative;
  top: 14%;
  left: 14%;
  width: 3px;
  height: 3px;
  animation-delay: 4s;
}
.stars .star:nth-of-type(39) {
  position: relative;
  top: 67%;
  left: 31%;
  width: 3px;
  height: 3px;
  animation-delay: 5s;
}
.stars .star:nth-of-type(40) {
  position: relative;
  top: 3%;
  left: 68%;
  width: 3px;
  height: 3px;
  animation-delay: 3s;
}

@keyframes twinkle {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.twinkle-stars {
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: -1;
}
.twinkle-stars > * {
  position: absolute;
  animation: twinkle-stars 5s infinite;
  transition-timing-function: ease;
}
.twinkle-stars .twinkle-star:nth-of-type(1) {
  top: 370px;
  left: 915px;
  width: 2px;
  height: 2px;
  animation-delay: 4s;
}
.twinkle-stars .twinkle-up {
  position: relative;
  width: 1px;
  height: 15px;
  background: #fff;
}
.twinkle-stars .twinkle-side {
  position: absolute;
  width: 17px;
  height: 1px;
  top: 6px;
  left: -8px;
  background: #fff;
  border-radius: 10px;
}
.twinkle-stars .twinkle-star:nth-of-type(2) {
  top: 319px;
  left: 724px;
  width: 5px;
  height: 5px;
  animation-delay: 2s;
}
.twinkle-stars .twinkle-up {
  position: relative;
  width: 1px;
  height: 15px;
  background: #fff;
}
.twinkle-stars .twinkle-side {
  position: absolute;
  width: 17px;
  height: 1px;
  top: 6px;
  left: -8px;
  background: #fff;
  border-radius: 10px;
}
.twinkle-stars .twinkle-star:nth-of-type(3) {
  top: 110px;
  left: 1051px;
  width: 1px;
  height: 1px;
  animation-delay: 1s;
}
.twinkle-stars .twinkle-up {
  position: relative;
  width: 1px;
  height: 15px;
  background: #fff;
}
.twinkle-stars .twinkle-side {
  position: absolute;
  width: 17px;
  height: 1px;
  top: 6px;
  left: -8px;
  background: #fff;
  border-radius: 10px;
}
.twinkle-stars .twinkle-star:nth-of-type(4) {
  top: 364px;
  left: 76px;
  width: 3px;
  height: 3px;
  animation-delay: 4s;
}
.twinkle-stars .twinkle-up {
  position: relative;
  width: 1px;
  height: 15px;
  background: #fff;
}
.twinkle-stars .twinkle-side {
  position: absolute;
  width: 17px;
  height: 1px;
  top: 6px;
  left: -8px;
  background: #fff;
  border-radius: 10px;
}
.twinkle-stars .twinkle-star:nth-of-type(5) {
  top: 39px;
  left: 1136px;
  width: 6px;
  height: 6px;
  animation-delay: 4s;
}
.twinkle-stars .twinkle-up {
  position: relative;
  width: 1px;
  height: 15px;
  background: #fff;
}
.twinkle-stars .twinkle-side {
  position: absolute;
  width: 17px;
  height: 1px;
  top: 6px;
  left: -8px;
  background: #fff;
  border-radius: 10px;
}
.twinkle-stars .twinkle-star:nth-of-type(6) {
  top: 301px;
  left: 285px;
  width: 1px;
  height: 1px;
  animation-delay: 1s;
}
.twinkle-stars .twinkle-up {
  position: relative;
  width: 1px;
  height: 15px;
  background: #fff;
}
.twinkle-stars .twinkle-side {
  position: absolute;
  width: 17px;
  height: 1px;
  top: 6px;
  left: -8px;
  background: #fff;
  border-radius: 10px;
}
.twinkle-stars .twinkle-star:nth-of-type(7) {
  top: 250px;
  left: 98px;
  width: 3px;
  height: 3px;
  animation-delay: 2s;
}
.twinkle-stars .twinkle-up {
  position: relative;
  width: 1px;
  height: 15px;
  background: #fff;
}
.twinkle-stars .twinkle-side {
  position: absolute;
  width: 17px;
  height: 1px;
  top: 6px;
  left: -8px;
  background: #fff;
  border-radius: 10px;
}
.twinkle-stars .twinkle-star:nth-of-type(8) {
  top: 302px;
  left: 240px;
  width: 6px;
  height: 6px;
  animation-delay: 4s;
}
.twinkle-stars .twinkle-up {
  position: relative;
  width: 1px;
  height: 15px;
  background: #fff;
}
.twinkle-stars .twinkle-side {
  position: absolute;
  width: 17px;
  height: 1px;
  top: 6px;
  left: -8px;
  background: #fff;
  border-radius: 10px;
}
.twinkle-stars .twinkle-star:nth-of-type(9) {
  top: 303px;
  left: 54px;
  width: 1px;
  height: 1px;
  animation-delay: 5s;
}
.twinkle-stars .twinkle-up {
  position: relative;
  width: 1px;
  height: 15px;
  background: #fff;
}
.twinkle-stars .twinkle-side {
  position: absolute;
  width: 17px;
  height: 1px;
  top: 6px;
  left: -8px;
  background: #fff;
  border-radius: 10px;
}
.twinkle-stars .twinkle-star:nth-of-type(10) {
  top: 94px;
  left: 710px;
  width: 2px;
  height: 2px;
  animation-delay: 3s;
}
.twinkle-stars .twinkle-up {
  position: relative;
  width: 1px;
  height: 15px;
  background: #fff;
}
.twinkle-stars .twinkle-side {
  position: absolute;
  width: 17px;
  height: 1px;
  top: 6px;
  left: -8px;
  background: #fff;
  border-radius: 10px;
}
.twinkle-stars .twinkle-star:nth-of-type(11) {
  top: 64px;
  left: 473px;
  width: 3px;
  height: 3px;
  animation-delay: 1s;
}
.twinkle-stars .twinkle-up {
  position: relative;
  width: 1px;
  height: 15px;
  background: #fff;
}
.twinkle-stars .twinkle-side {
  position: absolute;
  width: 17px;
  height: 1px;
  top: 6px;
  left: -8px;
  background: #fff;
  border-radius: 10px;
}
.twinkle-stars .twinkle-star:nth-of-type(12) {
  top: 10px;
  left: 951px;
  width: 3px;
  height: 3px;
  animation-delay: 4s;
}
.twinkle-stars .twinkle-up {
  position: relative;
  width: 1px;
  height: 15px;
  background: #fff;
}
.twinkle-stars .twinkle-side {
  position: absolute;
  width: 17px;
  height: 1px;
  top: 6px;
  left: -8px;
  background: #fff;
  border-radius: 10px;
}
.twinkle-stars .twinkle-star:nth-of-type(13) {
  top: 198px;
  left: 982px;
  width: 4px;
  height: 4px;
  animation-delay: 3s;
}
.twinkle-stars .twinkle-up {
  position: relative;
  width: 1px;
  height: 15px;
  background: #fff;
}
.twinkle-stars .twinkle-side {
  position: absolute;
  width: 17px;
  height: 1px;
  top: 6px;
  left: -8px;
  background: #fff;
  border-radius: 10px;
}
.twinkle-stars .twinkle-star:nth-of-type(14) {
  top: 232px;
  left: 1185px;
  width: 2px;
  height: 2px;
  animation-delay: 1s;
}
.twinkle-stars .twinkle-up {
  position: relative;
  width: 1px;
  height: 15px;
  background: #fff;
}
.twinkle-stars .twinkle-side {
  position: absolute;
  width: 17px;
  height: 1px;
  top: 6px;
  left: -8px;
  background: #fff;
  border-radius: 10px;
}
.twinkle-stars .twinkle-star:nth-of-type(15) {
  top: 297px;
  left: 260px;
  width: 2px;
  height: 2px;
  animation-delay: 5s;
}
.twinkle-stars .twinkle-up {
  position: relative;
  width: 1px;
  height: 15px;
  background: #fff;
}
.twinkle-stars .twinkle-side {
  position: absolute;
  width: 17px;
  height: 1px;
  top: 6px;
  left: -8px;
  background: #fff;
  border-radius: 10px;
}
.twinkle-stars .twinkle-star:nth-of-type(16) {
  top: 165px;
  left: 419px;
  width: 5px;
  height: 5px;
  animation-delay: 1s;
}
.twinkle-stars .twinkle-up {
  position: relative;
  width: 1px;
  height: 15px;
  background: #fff;
}
.twinkle-stars .twinkle-side {
  position: absolute;
  width: 17px;
  height: 1px;
  top: 6px;
  left: -8px;
  background: #fff;
  border-radius: 10px;
}
.twinkle-stars .twinkle-star:nth-of-type(17) {
  top: 115px;
  left: 1004px;
  width: 2px;
  height: 2px;
  animation-delay: 1s;
}
.twinkle-stars .twinkle-up {
  position: relative;
  width: 1px;
  height: 15px;
  background: #fff;
}
.twinkle-stars .twinkle-side {
  position: absolute;
  width: 17px;
  height: 1px;
  top: 6px;
  left: -8px;
  background: #fff;
  border-radius: 10px;
}
.twinkle-stars .twinkle-star:nth-of-type(18) {
  top: 190px;
  left: 818px;
  width: 4px;
  height: 4px;
  animation-delay: 3s;
}
.twinkle-stars .twinkle-up {
  position: relative;
  width: 1px;
  height: 15px;
  background: #fff;
}
.twinkle-stars .twinkle-side {
  position: absolute;
  width: 17px;
  height: 1px;
  top: 6px;
  left: -8px;
  background: #fff;
  border-radius: 10px;
}
.twinkle-stars .twinkle-star:nth-of-type(19) {
  top: 258px;
  left: 615px;
  width: 4px;
  height: 4px;
  animation-delay: 2s;
}
.twinkle-stars .twinkle-up {
  position: relative;
  width: 1px;
  height: 15px;
  background: #fff;
}
.twinkle-stars .twinkle-side {
  position: absolute;
  width: 17px;
  height: 1px;
  top: 6px;
  left: -8px;
  background: #fff;
  border-radius: 10px;
}
.twinkle-stars .twinkle-star:nth-of-type(20) {
  top: 234px;
  left: 446px;
  width: 3px;
  height: 3px;
  animation-delay: 1s;
}
.twinkle-stars .twinkle-up {
  position: relative;
  width: 1px;
  height: 15px;
  background: #fff;
}
.twinkle-stars .twinkle-side {
  position: absolute;
  width: 17px;
  height: 1px;
  top: 6px;
  left: -8px;
  background: #fff;
  border-radius: 10px;
}
.twinkle-stars .star:nth-of-type(21) {
  top: 269px;
  right: 1068px;
  width: 5px;
  height: 5px;
  animation-delay: 1s;
}
.twinkle-stars .star:nth-of-type(22) {
  top: 112px;
  right: 267px;
  width: 3px;
  height: 3px;
  animation-delay: 2s;
}
.twinkle-stars .star:nth-of-type(23) {
  top: 134px;
  right: 522px;
  width: 1px;
  height: 1px;
  animation-delay: 1s;
}
.twinkle-stars .star:nth-of-type(24) {
  top: 323px;
  right: 628px;
  width: 3px;
  height: 3px;
  animation-delay: 2s;
}
.twinkle-stars .star:nth-of-type(25) {
  top: 20px;
  right: 291px;
  width: 6px;
  height: 6px;
  animation-delay: 2s;
}
.twinkle-stars .star:nth-of-type(26) {
  top: 386px;
  right: 1016px;
  width: 2px;
  height: 2px;
  animation-delay: 4s;
}
.twinkle-stars .star:nth-of-type(27) {
  top: 237px;
  right: 306px;
  width: 3px;
  height: 3px;
  animation-delay: 2s;
}
.twinkle-stars .star:nth-of-type(28) {
  top: 297px;
  right: 465px;
  width: 1px;
  height: 1px;
  animation-delay: 4s;
}
.twinkle-stars .star:nth-of-type(29) {
  top: 246px;
  right: 656px;
  width: 1px;
  height: 1px;
  animation-delay: 3s;
}
.twinkle-stars .star:nth-of-type(30) {
  top: 350px;
  right: 63px;
  width: 1px;
  height: 1px;
  animation-delay: 3s;
}
.twinkle-stars .star:nth-of-type(31) {
  top: 231px;
  right: 756px;
  width: 5px;
  height: 5px;
  animation-delay: 2s;
}
.twinkle-stars .star:nth-of-type(32) {
  top: 184px;
  right: 276px;
  width: 1px;
  height: 1px;
  animation-delay: 1s;
}
.twinkle-stars .star:nth-of-type(33) {
  top: 389px;
  right: 555px;
  width: 6px;
  height: 6px;
  animation-delay: 2s;
}
.twinkle-stars .star:nth-of-type(34) {
  top: 336px;
  right: 920px;
  width: 4px;
  height: 4px;
  animation-delay: 4s;
}
.twinkle-stars .star:nth-of-type(35) {
  top: 182px;
  right: 1184px;
  width: 3px;
  height: 3px;
  animation-delay: 2s;
}
.twinkle-stars .star:nth-of-type(36) {
  top: 362px;
  right: 984px;
  width: 5px;
  height: 5px;
  animation-delay: 1s;
}
.twinkle-stars .star:nth-of-type(37) {
  top: 288px;
  right: 83px;
  width: 4px;
  height: 4px;
  animation-delay: 3s;
}
.twinkle-stars .star:nth-of-type(38) {
  top: 274px;
  right: 902px;
  width: 3px;
  height: 3px;
  animation-delay: 1s;
}
.twinkle-stars .star:nth-of-type(39) {
  top: 232px;
  right: 737px;
  width: 1px;
  height: 1px;
  animation-delay: 5s;
}
.twinkle-stars .star:nth-of-type(40) {
  top: 96px;
  right: 1071px;
  width: 4px;
  height: 4px;
  animation-delay: 4s;
}

@keyframes twinkle-stars {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(1.3);
  }
  100% {
    opacity: 0.6;
    transform: scale(1);
  }
}
.sky {

  height: 93vh;
  width: 100%;
  top: 0px;
  background-color: #c5cfb7;
  *zoom: 1;
  zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFC5CFB7', endColorstr='#FF082D47');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M1Y2ZiNyIvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjODRhZDk4Ii8+PHN0b3Agb2Zmc2V0PSIzOSUiIHN0b3AtY29sb3I9IiM1Zjk5ODYiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzVmOTk4NiIvPjxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjNWY5OTg2Ii8+PHN0b3Agb2Zmc2V0PSI3MiUiIHN0b3AtY29sb3I9IiM0YTg5NzQiLz48c3RvcCBvZmZzZXQ9Ijg0JSIgc3RvcC1jb2xvcj0iIzMyNjU2NSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzA4MmQ0NyIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -moz-radial-gradient(center, ellipse cover, #c5cfb7 0%, #84ad98 20%, #5f9986 39%, #5f9986 50%, #5f9986 60%, #4a8974 72%, #326565 84%, #082d47 100%);
  background-image: -webkit-radial-gradient(center, ellipse cover, #c5cfb7 0%, #84ad98 20%, #5f9986 39%, #5f9986 50%, #5f9986 60%, #4a8974 72%, #326565 84%, #082d47 100%);
  background-image: radial-gradient(ellipse cover at center, #c5cfb7 0%, #84ad98 20%, #5f9986 39%, #5f9986 50%, #5f9986 60%, #4a8974 72%, #326565 84%, #082d47 100%);
  z-index: 1;
}








.overlay {
  position: absolute;
  height: 40px;
  width: 42px;
  background: transparent;
  top: 54px;
  left: -19px;
}

.panel-container {
  width: 100%;
  height: 307px;
  border: 0px solid #CCC;
  margin: 0 0px;
  position: absolute;
  -moz-transform: perspective(300px);
  -ms-transform: perspective(300px);
  -webkit-transform: perspective(300px);
  transform: perspective(300px);
  left: 0px;
  bottom: -12px;
  /* left: 30vw; */
}



#rotate-x .panel {
  background-size: 100%;
  background: #141912;
  width: 50px;
  height: 100%;
  min-height: 220px;
  margin: auto;
  -moz-transform: perspective(329px) rotateX(44deg) translate3d(0px, 0px, 0px);
  -ms-transform: perspective(329px) rotateX(44deg) translate3d(0px, 0px, 0px);
  -webkit-transform: perspective(329px) rotateX(44deg) translate3d(0px, 0px, 0px);
  transform: perspective(329px) rotateX(44deg) translate3d(0px, 0px, 0px);
}

.top-triangle {
  padding-top: 7px;
  position: relative;
  height: 0px;
  width: 3px;
  bottom: 262px;
  left: 3px;
  background: none;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 0px;
  border-top: 0px;
  border-bottom-right-radius: 28%;
  border-bottom-left-radius: 28%;
  opacity: 0.98;
}


div#glowScene {

    position: relative;
    display: none ;

}


.light-house {
    position: relative;
    bottom: 233px;
    left: 49vw;
    top: -365px;
    z-index: 9;
}


hts-container {
  position: absolute;
  height: 100px;
  width: 800px;
  left: -399px;
  top: -39px;
  -moz-animation: left-to-right;
  -moz-animation-duration: 6s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-delay: 0s;
  -moz-animation-direction: forwards;
  -moz-default-animation-timing-function: linear;
  -webkit-animation: left-to-right;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: 0s;
  -webkit-animation-direction: forwards;
  -webkit-default-animation-timing-function: linear;
  animation: left-to-right;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: forwards;
  default-animation-timing-function: linear;
}

@keyframes left-to-right {
  0% {
    transform: rotateY(0deg);
    opacity: 1;
  }
  50% {
    transform: rotateY(-180deg);
    left: -393px;
    opacity: 0.7;
  }
  100% {
    transform: rotateY(0deg);
    opacity: 1;
  }
}
.shining-light-left {
  position: absolute;
  height: 46px;
  width: 70%;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjU5ZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y5ZjU5ZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #f9f59f), color-stop(100%, rgba(249, 245, 159, 0)));
  background-image: -moz-linear-gradient(left, #f9f59f 0%, rgba(249, 245, 159, 0) 100%);
  background-image: -webkit-linear-gradient(left, #f9f59f 0%, rgba(249, 245, 159, 0) 100%);
  background-image: linear-gradient(to right, #f9f59f 0%, rgba(249, 245, 159, 0) 100%);
  opacity: 0.7;
  float: left;
  top: 57px;
  left: 10px;
  -moz-transform: perspective(529px) rotateX(0deg) rotateY(-120deg) rotate(0deg);
  -ms-transform: perspective(529px) rotateX(0deg) rotateY(-120deg) rotate(0deg);
  -webkit-transform: perspective(529px) rotateX(0deg) rotateY(-120deg) rotate(0deg);
  transform: perspective(529px) rotateX(0deg) rotateY(-120deg) rotate(0deg);
}

.shining-light-right {
  position: absolute;
  z-index: 6;
  height: 46px;
  width: 70%;
  left: 506px !important;
  top: -471px !important;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuNSIgeDI9IjAuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjU5ZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y5ZjU5ZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(0%, #f9f59f), color-stop(100%, rgba(249, 245, 159, 0)));
  background-image: -moz-linear-gradient(right, #f9f59f 0%, rgba(249, 245, 159, 0) 100%);
  background-image: -webkit-linear-gradient(right, #f9f59f 0%, rgba(249, 245, 159, 0) 100%);
  background-image: linear-gradient(to left, #f9f59f 0%, rgba(249, 245, 159, 0) 100%);
  -moz-transform: perspective(529px) rotateX(180deg) rotateY(-120deg) rotate(0deg) skew(1deg);
  -ms-transform: perspective(529px) rotateX(180deg) rotateY(-120deg) rotate(0deg) skew(1deg);
  -webkit-transform: perspective(529px) rotateX(180deg) rotateY(-120deg) rotate(0deg) skew(1deg);
  transform: perspective(529px) rotateX(180deg) rotateY(-120deg) rotate(0deg) skew(1deg);
}

.glow-shine-container {
  position: relative;
  z-index:8;
  height: 350px;
  width: 350px;
  left: 453px !important;
  top: -508px !important;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  background: -moz-radial-gradient(center, ellipse cover, rgba(214, 205, 112, 0.6) 0%, rgba(211, 206, 160, 0) 100%);
  /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(214, 205, 112, 0.6) 0%, rgba(211, 206, 160, 0) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center, rgba(214, 205, 112, 0.6) 0%, rgba(211, 206, 160, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6cd70', endColorstr='#66d3cea0',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
  -moz-animation: glowing;
  -moz-animation-duration: 6s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-delay: 1s;
  -moz-animation-direction: forwards;
  -moz-default-animation-timing-function: linear;
  -webkit-animation: glowing;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: 1s;
  -webkit-animation-direction: forwards;
  -webkit-default-animation-timing-function: linear;
  animation: glowing;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-delay: 1s;
  animation-direction: forwards;
  default-animation-timing-function: linear;
}

@keyframes glowing {
  0% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.shine-circle {
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}

.glow-shine-1 {
  position: absolute;
  height: 30%;
  width: 30%;
  background: #edea89;
  top: 35%;
  left: 35%;
  opacity: 0.2;
}

.glow-shine-2 {
  position: relative;
  height: 10%;
  width: 10%;
  background: #edea89;
  margin: auto;
  top: 45%;
  opacity: 0.1;
  -moz-animation: glowing-shine-1;
  -moz-animation-duration: 6s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-delay: 0s;
  -moz-animation-direction: forwards;
  -moz-default-animation-timing-function: ease-in;
  -webkit-animation: glowing-shine-1;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: 0s;
  -webkit-animation-direction: forwards;
  -webkit-default-animation-timing-function: ease-in;
  animation: glowing-shine-1;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: forwards;
  default-animation-timing-function: ease-in;
}

@keyframes glowing-shine-1 {
  0% {
    -moz-box-shadow: 0px 0px 0px #edea89;
    -webkit-box-shadow: 0px 0px 0px #edea89;
    box-shadow: 0px 0px 0px #edea89;
    opacity: 0.6;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -moz-box-shadow: 0px 0px 32px #edea89;
    -webkit-box-shadow: 0px 0px 32px #edea89;
    box-shadow: 0px 0px 32px #edea89;
    opacity: 1;
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -moz-box-shadow: 0px 0px 0px #edea89;
    -webkit-box-shadow: 0px 0px 0px #edea89;
    box-shadow: 0px 0px 0px #edea89;
    opacity: 0.6;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.glow-shine-3 {
  position: absolute;
  height: 50%;
  width: 50%;
  background: #edea89;
  top: 25%;
  left: 25%;
  opacity: 0.05;
}

.glow-shine-4 {
  position: absolute;
  height: 70%;
  width: 70%;
  background: #edea89;
  top: 15%;
  left: 15%;
  opacity: 0.05;
}

.glow-shine-5 {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #edea89;
  top: 0%;
  left: 0%;
  opacity: 0.05;
}

.glow-shine-narrow-left {
  position: absolute;
  height: 360px;
  width: 20px;
  background: #f9f04c;
  left: 0px;
  top: 0px;
  -moz-animation: pulsate;
  -moz-animation-duration: 6s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-delay: 0s;
  -moz-animation-direction: forwards;
  -moz-default-animation-timing-function: linear;
  -webkit-animation: pulsate;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: 0s;
  -webkit-animation-direction: forwards;
  -webkit-default-animation-timing-function: linear;
  animation: pulsate;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: forwards;
  default-animation-timing-function: linear;
  -moz-transform: perspective(529px) rotateX(0deg) rotateY(-120deg) rotate(90deg);
  -ms-transform: perspective(529px) rotateX(0deg) rotateY(-120deg) rotate(90deg);
  -webkit-transform: perspective(529px) rotateX(0deg) rotateY(-120deg) rotate(90deg);
  transform: perspective(529px) rotateX(0deg) rotateY(-120deg) rotate(90deg);
}


.lighthouse-lights {
  position: absolute;
  height: 110px;
  top: -130px;
  width: 43px;
  right: 0px;
}

.light {
  background: #f9f04c;
  -moz-border-radius-topright: 20px;
  -webkit-border-top-right-radius: 20px;
  border-top-right-radius: 20px;
  -moz-border-radius-topleft: 20px;
  -webkit-border-top-left-radius: 20px;
  border-top-left-radius: 20px;
  -moz-box-shadow: #ffeb3b 0px 0 22px, rgba(252, 250, 185, 0.44) 0 0 3px 1px inset;
  -webkit-box-shadow: #ffeb3b 0px 0 22px, rgba(252, 250, 185, 0.44) 0 0 3px 1px inset;
  box-shadow: #ffeb3b 0px 0 22px, rgba(252, 250, 185, 0.44) 0 0 3px 1px inset;
}



.glow {
  position: absolute;
  height: 22px;
  width: 22px;
  background-color: #fbfae1;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFFBFAE1', endColorstr='#FFFFFB6C');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZiZmFlMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmI2YyIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -moz-radial-gradient(center, ellipse cover, #fbfae1 0%, #fffb6c 100%);
  background-image: -webkit-radial-gradient(center, ellipse cover, #fbfae1 0%, #fffb6c 100%);
  background-image: radial-gradient(ellipse cover at center, #fbfae1 0%, #fffb6c 100%);
  top: 28px !important;
  left: -8px !important;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  -moz-box-shadow: #ffeb3b 0px 0 22px, rgba(252, 250, 185, 0.44) 0 0 3px 1px inset;
  -webkit-box-shadow: #ffeb3b 0px 0 22px, rgba(252, 250, 185, 0.44) 0 0 3px 1px inset;
  box-shadow: #ffeb3b 0px 0 22px, rgba(252, 250, 185, 0.44) 0 0 3px 1px inset;
  -moz-animation: glowing-ball;
  -moz-animation-duration: 6s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-delay: 0s;
  -moz-animation-direction: forwards;
  -moz-default-animation-timing-function: linear;
  -webkit-animation: glowing-ball;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: 0s;
  -webkit-animation-direction: forwards;
  -webkit-default-animation-timing-function: linear;
  animation: glowing-ball;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: forwards;
  default-animation-timing-function: linear;
}

@keyframes glowing-ball {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}


.top-railings {
  position: absolute;
  height: 8px;
  width: 38px;
  top: 45px;
  left: -19px;
  border: 2px solid #141b11;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  opacity: 0.8;
}

.railing {
  position: absolute;
  height: 10px;
  width: 2px;
  background: #141912;
  top: -1px;
}

.top-railing-1 {
  left: 6px;
}

.top-railing-2 {
  left: 12px;
}

.top-railing-3 {
  left: 19px;
}

.top-railing-4 {
  left: 25px;
}

.top-railing-5 {
  left: 32px;
}

.top-railing-6 {
  left: 35px;
}


/* glowing light ends */






.ken-burn {
    animation-name: ken-burns; /* Name of the animation to use */
    animation-duration: 30s;
    animation-iteration-count: infinite; /* 1 if it should only move once */
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-delay: 0s;
    -moz-transition: ease 1s all;
    -o-transition: ease 1s all;
    -webkit-transition: ease 1s all;
    transition: ease 1s all;
}
@keyframes ken-burns {
    0% {
      opacity: 0;
    }
    5% {
      opacity: 1;
    }
    95% {
        transform: scale3d(1.5, 1.5, 1.5) translate3d(-190px, -120px, 0px);
        animation-timing-function: ease-in;
        opacity: 1;
    }
    100% {
        transform: scale3d(2, 2, 2) translate3d(-170px, -100px, 0px);
        opacity: 0;
    }
}





/* phone call button */
#call-sofia {
    display: block;
    position: relative;
    top: 80px;
    margin: auto;
    position: -webkit-sticky;
    left: 165px;
}

.form-call-wrapper {
  display: block;
  background: none;
  border: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  position: static;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  float: none;
  font-style: normal;
  text-transform: none;
  height: auto;
  width: auto;
  max-width: none;
  max-height: none;
  -moz-opacity: 1;
  -webkit-opacity: 1;
  opacity: 1;
  outline: 0;
  overflow: visible;
  text-decoration: none;
  vertical-align: top;
  word-spacing: normal;
  letter-spacing: normal;
}
.form-call-wrapper * {
  transition: 0.5s;
}
.form-call-wrapper {
  /*color: rgb(220,220,226);*/
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -40px;
  margin-top: -40px;
  width: 80px;
  height: 80px;
  text-align: center;
  font-size: 10px;
  line-height: 80px;
  -webkit-font-smoothing: antialiased;
  z-index: 1000;
  cursor: pointer;
}
.form-call-wrapper:after,
.form-call-wrapper:before {
  content: "";
  border-radius: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  transform-origin: center center;
  box-sizing: border-box;
  z-index: 9;
  transition: 0.5s;
}
.form-call-wrapper:after {
  background: #ddd;
  animation: lexprofitBackAnim 3s linear infinite;
}
.form-call-wrapper:before {
  border: 1px solid #ddd;
  animation: lexprofitBorderAnim 3s -0.5s linear infinite;
}
.form-call-wrapper .form-call-btn {
  z-index: 10;
  position: absolute;
  background-color: #ccc;
  border-radius: 100%;
  width: 100%;
  height: 100%;
}
.form-call-wrapper .form-call-btn .form-call-phone-icon {

  font-size: 40px;
  font-style: normal;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.form-call-wrapper .form-call-btn .form-call-phone-icon:before {
  content: "";
  color: #888;
}
.form-call-wrapper:hover .form-call-btn {
  background-color: #bbb;
}
.form-call-wrapper:hover:after {
  background-color: #aaa;
}
.form-call-wrapper:hover:before {
  border-color: #aaa;
}
.form-call-wrapper:hover .form-call-btn {
  animation: lexprofitBoundingAnim 1s linear infinite;
}
/*
 * Animations
 */
@keyframes lexprofitBackAnim {
  0% {
    transform: scaleX(0.7) scaleY(0.7);
  }
  25% {
    transform: scaleX(1.2) scaleY(1.2);
  }
  50% {
    transform: scaleX(1.5) scaleY(1.5);
  }
  65% {
    transform: scaleX(1.2) scaleY(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scaleX(0.7) scaleY(0.7);
    opacity: 0;
  }
}
@keyframes lexprofitBorderAnim {
  0% {
    transform: scaleX(1) scaleY(1);
  }
  50% {
    transform: scaleX(1.5) scaleY(1.5);
  }
  100% {
    transform: scaleX(2) scaleY(2);
    opacity: 0;
  }
}
@keyframes lexprofitBoundingAnim {
  0% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(15deg);
  }
  30% {
    transform: rotate(0deg);
  }
  45% {
    transform: rotate(-15deg);
  }
  60% {
    transform: rotate(0deg);
  }
}




/* rainbow code */
@keyframes fly-in {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes fly-out {
  0% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}


.raincode, .block--red, .block--orange, .block--yellow, .block--green, .block--blue, .block--indigo, .block--purple {
  text-align: right;
  width: 0;

  height: calc(94vh / 7);
  color: white;
  font-size: calc(83vh / 7);
  animation: fly-in 1.5s ease-out forwards;

}



.block--red {
    background-color: #ff5050;
    animation-delay: 0s;
}
.block--orange {
  background-color: #ff9933;
  animation-delay: 0.5s;
}

.block--yellow {
  background-color: #ffcc00;
  animation-delay: 1s;
}

.block--green {
  background-color: #33cc33;
  animation-delay: 1.5s;
}

.block--blue {
  background-color: #3399ff;
  animation-delay: 2s;
}

.block--indigo {
  background-color: #002966;
  animation-delay: 2.5s;
}

.block--purple {
  background-color: #5c3d99;
  animation-delay: 3s;
}





.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
   /*max-width: 600px;*/
  padding: 5px;
  border: 2px solid #ebe8ec;
}
.box:before, .box:after {
  content: "•";
  position: absolute;
  width: 14px;
  height: 14px;
  font-size: 14px;
  color: #ebe8ec;
  border: 2px solid #ebe8ec;
  line-height: 12px;
  top: 5px;
  text-align: center;
}
.box:before {
  left: 5px;
}
.box:after {
  right: 5px;
}
.box .nameplate {
  position: relative;
  border: 2px solid #ebe8ec;
  padding: 40px;
}
.box .nameplate:before, .box .nameplate:after {
  content: "•";
  position: absolute;
  width: 14px;
  height: 14px;
  font-size: 14px;
  color: #ebe8ec;
  border: 2px solid #ebe8ec;
  line-height: 12px;
  bottom: -2px;
  text-align: center;
}
.box .nameplate:before {
  left: -2px;
}
.box .nameplate:after {
  right: -2px;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
*:before, *:after {
  box-sizing: border-box;
}

.paraSpanInline {
    display: flex !important;
    flex-direction: row;
    padding-top: 0;
}


.lineNoWrap  {
    white-space: nowrap;

}


.lineWrap  {
    white-space: unset;
}


[data-ui=say] span {
    padding: 0;
    margin: 0;
  
}

.paraSpanW {

   max-width: 86%;
}

span#next-arrow {
    position: relative;
    z-index: 9999999;
    cursor: pointer;
    display: none;
    margin: -3px 0 0 17px;
    width: 64px;
    height: 64px;
    border: solid 6px #feeaccc4;
    border-radius: 100%;
    z-index: 1;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.26), 0px 7px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
    animation: pulse 2s infinite;
}

#next-arrow:before, #next-arrow:after {
  content: "";
  box-sizing: content-box;
  position: absolute;
  width: 35%;
  height: 10%;
  top: 41%;
  left: 55%;
  background: #feeaccc4;;
  z-index: 2;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
  -webkit-transition: all .2s linear;
  transition: all .2s linear;

}

-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
      -webkit-box-shadow: 0 0 0 30px rgba(204,169,44, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
    box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 30px rgba(204,169,44, 0);
      box-shadow: 0 0 0 30px rgba(204,169,44, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}

#next-arrow:after {
  z-index: 3;
  top: 59%;
  left: 55%;
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}
#next-arrow:hover {
  border: solid 8px #feeaccc4;
}
#next-arrow:hover:after, #next-arrow:hover:before {
  background: #feeaccc4;
}
#next-arrow:active {
  border: solid 8px #111;
}
#next-arrow:active:after, #next-arrow:active:before {
  background: #111;
}



.nvl span[data-content="character-name"] {

}

.nvl span[data-content="javier"], .nvl span[data-content="diego"], .nvl span[data-content="absolon"], .nvl span[data-content="valentina"], .nvl span[data-content="selestino"] { 
    display:block; 
}



.receipt {
  
    width: 300px;
    min-height: 88vh;
    height: 100%;
    background: #fff;
    margin: 0 auto;
 
    padding: 10px;
    font-family: monospace;
    color: black;
    text-shadow: none;
    font-size: 1.2rem;
    top: 118px;
    position: relative;
    transform: rotate(28deg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.receipt h1 {font-size: 1.9em; margin: 0;}

.receipt p { padding: 0.3rem;}

.receiptLogo {
  text-align: center;
  padding: 20px 0 20px 0;

}


.receipt:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.barcode {
  font-family: "Libre Barcode 128", cursive;
  font-size: 42px;
  text-align: center;
}

.address {
  text-align: center;
  margin-bottom: 10px;
}

.transactionDetails {
  display: flex;
  justify-content: space-between;
  margin: 0 10px 10px;
}
.transactionDetails .detail {
  text-transform: uppercase;
}

.centerItem {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
  text-shadow: none;
  text-align: center;
}

.survey {
  text-align: center;
  margin-bottom: 12px;
}
.survey .surveyID {
  font-size: 20px;
}

.paymentDetails {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  width: 150px;
}

.creditDetails {
  margin: 10px auto;
  width: 230px;
  font-size: 14px;
  text-transform: uppercase;
  text-shadow: none;
}

.creditDetails p {text-shadow: none;}

.receiptBarcode {
  margin: 10px 0;
  text-align: center;
}

.returnPolicy {
  margin: 10px 20px;
  width: 220px;
  display: flex;
  justify-content: space-between;
}

.coupons {
  margin-top: 20px;
}

.tripSummary {
  margin: auto;
  width: 255px;
}
.tripSummary .item {
  display: flex;
  justify-content: space-between;
  margin: auto;
  width: 220px;
}

.feedback {
  margin: 20px auto;
}
.feedback h3.clickBait {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  margin: 10px 0;
}
.feedback h4.web {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin: 10px 0;
}
.feedback .break {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0;
}

.couponContainer {
  border-top: 1px dashed #1f1f1f;
  margin-bottom: 20px;
}
.couponContainer .discount {
  font-size: 35px;
  text-align: center;
  margin-bottom: 10px;
}
.couponContainer .discountDetails {
  font-size: 20px;
  text-align: center;
  margin-bottom: 15px;
}
.couponContainer .barcode {
  margin: 10px 0 0;
}
.couponContainer .legal {
  font-size: 12px;
  margin-bottom: 12px;
}
.couponContainer .barcodeID {
  margin-bottom: 8px;
}
.couponContainer .expiration {
  display: flex;
  justify-content: space-between;
  margin: 10px;
}
.couponContainer .couponBottom {
  font-size: 13px;
  text-align: center;
}




.earthmoon {
    position: absolute;
    top: 72px;
    left: 50%;
    width: 30rem;
    height: 30rem;
    overflow: hidden;
    border-radius: 14%;
    transform: translateX(-50%);
    box-shadow: 0 0 420px 153px #123839;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
.earthmoon:after {
  content:'';

  position:absolute;
  top:1px;
  right:1px;
  bottom:1px;
  left:1px;
  z-index:-1;
  border-radius:50%;
  background-color:#fff5bb;
  background-image:
    radial-gradient(#f2e594 0%, #f2e594 70%, transparent 70%, transparent 100%),
    radial-gradient(#f2e594 0%, #f2e594 70%, transparent 70%, transparent 100%),
    radial-gradient(#f2e594 0%, #f2e594 70%, transparent 70%, transparent 100%),
    radial-gradient(#f2e594 0%, #f2e594 70%, transparent 70%, transparent 100%),
    radial-gradient(#f2e594 0%, #f2e594 70%, transparent 70%, transparent 100%);
  background-size:10px 10px, 5px 5px, 15px 15px, 10px 10px, 7px 7px;
  background-repeat:no-repeat;
  background-position:10% 20%, 70% 15%, 35% 70%, 80% 50%, 70% 75%;
    box-shadow:inset -15px -15px 0 #f2e594;
}
.earthmoon:before {
  content:'';
  position:relative;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:222;
  background:#0b2526;
  border-radius:50%;
  transform:translateX(-100%);
  animation:phase 20s infinite linear;
}




.moonframe {
  overflow: hidden;
  width: 47rem;
  height: 47rem;
  left: 20%;
  top: 4%;
  position: absolute;
  z-index: 2;

}

.moonframe .constellation {
  width: 100%;
  height: 100%;
  position: absolute;
}
.moonframe .constellation .star {
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
}
.moonframe .constellation.stars-a {
  animation: rotate360 200s linear infinite;
}
.moonframe .constellation.stars-b {
  animation: rotate360 100s linear infinite;
}




.stars-a .star:nth-child(1) {
  top: 244px;
  left: 233px;
  width: 3px;
  height: 3px;
  animation: blink 0.1s infinite;
}
.stars-a .star:nth-child(2) {
  top: 344px;
  left: 159px;
  width: 3px;
  height: 3px;
  animation: blink 0.2s infinite;
}
.stars-a .star:nth-child(3) {
  top: 169px;
  left: 161px;
  width: 1px;
  height: 1px;
  animation: blink 0.3s infinite;
}
.stars-a .star:nth-child(4) {
  top: 323px;
  left: 372px;
  width: 2px;
  height: 2px;
  animation: blink 0.4s infinite;
}
.stars-a .star:nth-child(5) {
  top: 126px;
  left: -21px;
  width: 3px;
  height: 3px;
  animation: blink 0.5s infinite;
}
.stars-a .star:nth-child(6) {
  top: 475px;
  left: 441px;
  width: 1px;
  height: 1px;
  animation: blink 0.6s infinite;
}
.stars-a .star:nth-child(7) {
  top: 8px;
  left: 346px;
  width: 1px;
  height: 1px;
  animation: blink 0.7s infinite;
}
.stars-a .star:nth-child(8) {
  top: 332px;
  left: -2px;
  width: 3px;
  height: 3px;
  animation: blink 0.8s infinite;
}
.stars-a .star:nth-child(9) {
  top: 352px;
  left: -35px;
  width: 4px;
  height: 4px;
  animation: blink 0.9s infinite;
}
.stars-a .star:nth-child(10) {
  top: 226px;
  left: 489px;
  width: 3px;
  height: 3px;
  animation: blink 1s infinite;
}
.stars-a .star:nth-child(11) {
  top: 140px;
  left: 482px;
  width: 2px;
  height: 2px;
  animation: blink 1.1s infinite;
}
.stars-a .star:nth-child(12) {
  top: 51px;
  left: 2px;
  width: 3px;
  height: 3px;
  height: 1px;
  animation: blink 1.2s infinite;
}
.stars-a .star:nth-child(13) {
  top: 461px;
  left: 235px;
  width: 2px;
  height: 2px;
  animation: blink 1.3s infinite;
}
.stars-a .star:nth-child(14) {
  top: 200px;
  left: 147px;
  width: 3px;
  height: 3px;
  animation: blink 1.4s infinite;
}
.stars-a .star:nth-child(15) {
  top: 443px;
  left: 433px;
  width: 2px;
  height: 2px;
  animation: blink 1.5s infinite;
}
.stars-a .star:nth-child(16) {
  top: 27px;
  left: 149px;
  width: 2px;
  height: 2px;
  animation: blink 1.6s infinite;
}
.stars-a .star:nth-child(17) {
  top: 184px;
  left: 69px;
  width: 1px;
  height: 1px;
  animation: blink 1.7s infinite;
}
.stars-a .star:nth-child(18) {
  top: 7px;
  left: 373px;
  width: 2px;
  height: 2px;
  animation: blink 1.8s infinite;
}
.stars-a .star:nth-child(19) {
  top: 481px;
  left: 119px;
  width: 2px;
  height: 2px;
  animation: blink 1.9s infinite;
}
.stars-a .star:nth-child(20) {
  top: 488px;
  left: 463px;
  width: 3px;
  height: 3px;
  animation: blink 2s infinite;
}
.stars-a .star:nth-child(21) {
  top: 240px;
  left: 344px;
  width: 2px;
  height: 2px;
  animation: blink 2.1s infinite;
}
.stars-a .star:nth-child(22) {
  top: 429px;
  left: 320px;
  width: 2px;
  height: 2px;
  animation: blink 2.2s infinite;
}
.stars-a .star:nth-child(23) {
  top: 241px;
  left: 58px;
  width: 1px;
  height: 1px;
  animation: blink 2.3s infinite;
}
.stars-a .star:nth-child(24) {
  top: 413px;
  left: 208px;
  width: 2px;
  height: 2px;
  animation: blink 2.4s infinite;
}
.stars-a .star:nth-child(25) {
  top: 183px;
  left: 355px;
  width: 1px;
  height: 1px;
  animation: blink 2.5s infinite;
}
.stars-a .star:nth-child(26) {
  top: 55px;
  left: 32px;
  width: 3px;
  height: 3px;
  animation: blink 2.6s infinite;
}

.stars-b .star:nth-child(1) {
  top: 362px;
  left: 482px;
  width: 1px;
  height: 1px;
  animation: blink 0.1s infinite;
}
.stars-b .star:nth-child(2) {
  top: 350px;
  left: 322px;
  width: 3px;
  height: 3px;
  animation: blink 0.2s infinite;
}
.stars-b .star:nth-child(3) {
  top: 454px;
  left: 100px;
  width: 2px;
  height: 2px;
  animation: blink 0.3s infinite;
}
.stars-b .star:nth-child(4) {
  top: 168px;
  left: 176px;
  width: 3px;
  height: 3px;
  animation: blink 0.4s infinite;
}
.stars-b .star:nth-child(5) {
  top: 320px;
  left: 165px;
  width: 1px;
  height: 1px;
  animation: blink 0.5s infinite;
}
.stars-b .star:nth-child(6) {
  top: 492px;
  left: 215px;
  width: 3px;
  height: 3px;
  animation: blink 0.6s infinite;
}
.stars-b .star:nth-child(7) {
  top: 87px;
  left: 332px;
  width: 3px;
  height: 3px;
  animation: blink 0.7s infinite;
}
.stars-b .star:nth-child(8) {
  top: 447px;
  left: 89px;
  width: 4px;
  height: 5px;
  animation: blink 0.8s infinite;
}
.stars-b .star:nth-child(9) {
  top: 228px;
  left: 441px;
  width: 1px;
  height: 1px;
  animation: blink 0.9s infinite;
}
.stars-b .star:nth-child(10) {
  top: 97px;
  left: 482px;
  width: 3px;
  height: 3px;
  animation: blink 1s infinite;
}
.stars-b .star:nth-child(11) {
  top: 178px;
  left: -40px;
  width: 2px;
  height: 2px;
  animation: blink 1.1s infinite;
}
.stars-b .star:nth-child(12) {
  top: 440px;
  left: 391px;
  width: 2px;
  height: 2px;
  animation: blink 1.2s infinite;
}
.stars-b .star:nth-child(13) {
  top: 170px;
  left: 399px;
  width: 2px;
  height: 2px;
  animation: blink 1.3s infinite;
}
.stars-b .star:nth-child(14) {
  top: 118px;
  left: 379px;
  width: 2px;
  height: 2px;
  animation: blink 1.4s infinite;
}
.stars-b .star:nth-child(15) {
  top: 302px;
  left: 308px;
  width: 1px;
  height: 1px;
  animation: blink 1.5s infinite;
}
.stars-b .star:nth-child(16) {
  top: 373px;
  left: 285px;
  width: 2px;
  height: 2px;
  animation: blink 1.6s infinite;
}
.stars-b .star:nth-child(17) {
  top: 25px;
  left: 434px;
  width: 1px;
  height: 1px;
  animation: blink 1.7s infinite;
}
.stars-b .star:nth-child(18) {
  top: 8px;
  left: 146px;
  width: 1px;
  height: 1px;
  animation: blink 1.8s infinite;
}
.stars-b .star:nth-child(19) {
  top: 286px;
  left: 68px;
  width: 2px;
  height: 2px;
  animation: blink 1.9s infinite;
}
.stars-b .star:nth-child(20) {
  top: 291px;
  left: 103px;
  width: 3px;
  height: 3px;
  animation: blink 2s infinite;
}
.stars-b .star:nth-child(21) {
  top: 160px;
  left: 556px;
  width: 6px;
  height: 6px;
  animation: blink 2.1s infinite;
}
.stars-b .star:nth-child(22) {
  top: 391px;
  left: 43px;
  width: 2px;
  height: 2px;
  animation: blink 2.2s infinite;
}
.stars-b .star:nth-child(23) {
  top: 482px;
  left: 290px;
  width: 2px;
  height: 2px;
  animation: blink 2.3s infinite;
}
.stars-b .star:nth-child(24) {
  top: 305px;
  left: 378px;
  width: 1px;
  height: 1px;
  animation: blink 2.4s infinite;
}
.stars-b .star:nth-child(25) {
  top: 283px;
  left: 134px;
  width: 1px;
  height: 1px;
  animation: blink 2.5s infinite;
}
.stars-b .star:nth-child(26) {
  top: 209px;
  left: 394px;
  width: 1px;
  height: 1px;
  animation: blink 2.6s infinite;
}

@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes blink {
  0% {
    box-shadow: 0;
  }
  50% {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
  }
  100% {
    box-shadow: 0;
  }
} 


.fullscreen {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.percentage {
  font-family: 'Rubik One', sans-serif;
  font-size: 5em;
  color: #2ecc71;
  mix-blend-mode: multiply;
}

.loadingbar {
  height: 100vh;
  width: 100vw;
  z-index: -1;
  background-color: #27ae60;
  top: 0;
  left: 0;
  position: absolute;
}

/* Start to hide elements displayed with a funntion at start */
#cn-menu, #moon, #glitch-1,  #glowScene, #raincode, #splashtitle, #timer, #bookquest-timer, #call-sofia, #flash-container, #input-range, fire-counter-modal {
  display: none;
}
/* End to hide elements displayed with a funntion at start */



/**
 * ===========================
 * Style for point and click door
 * ===========================
**/

choice-container.navigationBox {
    color: white;
  width: calc(100vh * 1.6);
  height: calc(100vw * 0.625);
    overflow: hidden;
  background-color: #00000000;
  max-height: 100%;
  max-width: 100%;
    top: 49%;
      display: block;
    flex-direction: column;
    z-index: 999999999;
}

[data-component="choice-container"] button.theDoorButton {
   color: white;
    position: absolute;
    top: 17%;
    left: 32%;
    height: 62%;
    width: 22%;
    margin: 0px;
    overflow: hidden;
    background: transparent;
}

[data-component="choice-container"] button.theKeyButton {
    color: white;
    position: absolute;
    top: 67%;
    left: 45%;
    height: 11%;
    width: 24%;
    margin: 0px;
    overflow: hidden;
    background: transparent;
}
[data-component="choice-container"] button.turnLeftButton {
    color: white;
    position: absolute;
    top: 19%;
    left: 0%;
    height: 62%;
    width: 20%;
    margin: 0px;
    overflow: hidden;
    background: transparent;
}
[data-component="choice-container"] button.turnLeftButton:hover {
    background: url(leftArrow.png);
    background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
[data-component="choice-container"] button.turnRightButton {
    color: white;
    position: absolute;
    top: 19%;
    left: 80%;
    height: 62%;
    width: 20%;
    margin: 0px;
    overflow: hidden;
    background: transparent;
}


[data-component="choice-container"] button.turnRightButton:hover {
    background: url(rightArrow.png);
    background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

[data-component="choice-container"] button.turnAroundButton {
     color: white;
    position: absolute;
    top: 88%;
    left: 20%;
    height: 12%;
    width: 60%;
    margin: 0px;
    overflow: hidden;
    overflow: hidden;
    background: transparent;
}

[data-component="choice-container"] button.turnAroundButton:hover {
    background: url(turnAround.png);
    background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}


/* date of the day */

#the-date {
    display: none;

    }
.news__item {
    padding: 40px;
    color: #fff;
    border-radius: 10px;
    display: block;
    transition: all .3s;
}


.news-date {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 2px solid;
    display: inline-block;
    opacity: .7;
    transition: opacity .3s;
    position: absolute;
    z-index: 999999999;
    right: 4%;
    top: 7%;

}


.news-date__title {
    display: block;
    font-size: 32px;
    margin-bottom: 5px;
    font-weight: 500;
}
.news-date__txt {
    font-size: 16px;
}

.news-hour__txt {
    font-size: 13px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    display: inline-block;
    opacity: .7;
    transition: opacity .3s;
    position: absolute;
    z-index: 999999999;
    right: 4%;
    top: 19%;
}





.ticket {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  width: 700px;
  margin: 20px auto;
  text-shadow: none;
  color: black;

}


.ticket .stub,
.ticket .check {
  box-sizing: border-box;
}
.stub {
  background: #ef5658;
  height: 250px;
  width: 250px;
  color: white;
  padding: 20px;
  position: relative;
}
.stub:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-top: 20px solid #dd3f3e;
  border-left: 20px solid #ef5658;
  width: 0;
}
.stub:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  border-bottom: 20px solid #dd3f3e;
  border-left: 20px solid #ef5658;
  width: 0;
}
.stub .top {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  height: 40px;
  text-transform: uppercase;
}
.stub .top .line {
  display: block;
  background: #fff;
  height: 40px;
  width: 3px;
  margin: 0 10px;
}
.stub .top .num {
  font-size: 10px;
}
.stub .top .num span {
  color: #000;
  padding-left: 7px;
}
.stub .number {
  position: absolute;
  left: 40px;
  font-size: 150px;
  font-family:'Montserrat', sans-serif;
  font-weight: 900;
}
.stub .invite {
  position: absolute;
  left: 150px;
  bottom: 45px;
  color: #000;
  width: 20%;
  font-family:'Montserrat', sans-serif;
}
.stub .invite:before {
  content: '';
  background: #fff;
  display: block;
  width: 40px;
  height: 3px;
  margin-bottom: 5px;
}
.check {
  background: #fff;
  height: 250px;
  width: 450px;
  padding: 40px;
  position: relative;
}
.check:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 20px solid #dd3f3e;
  border-right: 20px solid #fff;
  width: 0;
}
.check:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 20px solid #dd3f3e;
  border-right: 20px solid #fff;
  width: 0;
}
.check .big {
  font-size: 80px;
  font-weight: 900;
  line-height: 0.8em;
}
.check .number {
  position: absolute;
  top: 50px;
  right: 28px;
  color: #ef5658;
  font-size: 40px;
}
.check .info {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: start;
          justify-content: flex-start;
  font-size: 12px;
  margin-top: 20px;
  width: 100%;
}
.check .info section {
  margin-right: 50px;
}
.check .info section:before {
  content: '';
  background: #ef5658;
  display: block;
  width: 40px;
  height: 3px;
  margin-bottom: 5px;
}
.check .info section .title {
  font-size: 10px;
  text-transform: uppercase;
}


.admit {
    font-size: 1.2rem;
}


/*  Sponsors */


.tbc {
  font-size: 2em;
  border-bottom: solid 2px white;
   font-size: 4rem;
  font-weight: 900;
  font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}


.sponsorbox {
    background-color: #ffffff63;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 6px 6px rgba(0,0,0,0.1);
    border-radius: 20px;
    padding: 40px 60px;
    position: relative;
    width: 80%;
    margin-top: 31px;
}

.sponsorbox::before {
    background-color: #FF3D44;
    border-radius: 30px;
    content: '';
    opacity: 0.9;
    position: absolute;
    bottom: -30px;
    right: -30px;
    height: 220px;
    width: 220px;
    z-index: -1;
}

.sponsorbox img {
    display: block;
    margin-top: -60px;
    margin-bottom: 10px;
    width: 50px;
}

.sponsorbox h2 {
    margin: 0;
}

.sponsorbox p {
    line-height: 49px;
    padding: 1rem 0;
    text-shadow: none;
    color: #4e4242;
}

.btn {
    border-radius: 5px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 6px 6px rgba(0,0,0,0.1);
    color: #fff;
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none;
}

.btn.paypal {
    background-color: #0070ba;
    margin-right: 10px;
}

.btn.patreon {
    background-color: rgb(232, 91, 70);
}

.btn.kofi {
    background-color: #058CBF;
      margin-left: 10px;
}


/* Stats */

#lovers {
  --gradient: linear-gradient(152deg, #8ecfbf 0%, #c8d6d3 100%);
}
#lovers br {
  display: none;
}
#lovers {
  width: 355px;
  min-height: 300px;
  border: 1px solid #eaeaea;
  border-radius: 25px;
  margin: 0 auto;
  margin-top: 30px;
  overflow: hidden;
  background: #f9f9f9;
  order: 1;
  position: relative;
  display: block;
  margin-bottom: 20px;

}
#lovers .tp-us {
  position: relative;
  height: 100px;
  background: var(--gradient);
  border-radius: 0px 00px 20% 20%;
  margin-left: -1px;
  margin-right: -1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#lovers .tp-us h1 {
  text-align: center;
  color: #fff;
  font: 50px "Raleway", sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 900;
  font-style: italic;
  opacity: 0.6;
}
#lovers .im-us {
  height: 100px;
  width: 100px;
  border: 5px solid #fff;
  border-radius: 100%;
  animation: ckd 1.7s linear infinite;
}
#lovers .ims-us {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
}
#lovers .ims-us span {
  margin-left: 15px;
  margin-right: 15px;
  font-size: 30px;
  color: #95d0c2;
}
#lovers .mi-us {
  height: 115px;
  width: 115px;
  border: 5px solid #fff;
  border-radius: 100%;
  box-shadow: 0 0 1px #ccc;
  background-size: 120% !important; 
  background-position: center !important;
}

#lovers .ik-us {
  margin: 20px;
  margin-top: 0px;
  text-align: center;
  font: 1.4rem "Raleway", sans-serif;
  color: #555;
}

#lovers .ik-us span {
 font-size: 30px;
}

#lovers .ik-us b {
  color: #95d0c2;
  text-transform: uppercase;
   font-size: 30px;
  font-weight: 800;
}


.heart {
  fill: #f75d5d;
  position: relative;
  top: 5px;
  width: 50px;
  animation: pulse 1s ease infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}



/* Boxes */


.retrobox {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    background-color: rgba(0, 0, 0, 0.5);
    width: 86%;
    /* max-width: 733px; */
    padding: 5px;
    border: 2px solid #b78846;
  text-shadow: none;
}
.retrobox:before, .retrobox:after {
  content: "•";
  position: absolute;
  width: 14px;
  height: 14px;
  font-size: 14px;
  color: #b78846;
  border: 2px solid #b78846;
  line-height: 12px;
  top: 5px;
  text-align: center;
}
.retrobox:before {
  left: 5px;
}
.retrobox:after {
  right: 5px;
}
.retrobox .box-inner {
  position: relative;
  border: 2px solid #b78846;
  padding: 40px;
}
.retrobox .box-inner:before, .retrobox .box-inner:after {
  content: "•";
  position: absolute;
  width: 14px;
  height: 14px;
  font-size: 14px;
  color: #b78846;
  border: 2px solid #b78846;
  line-height: 12px;
  bottom: -2px;
  text-align: center;
}
.retrobox .box-inner:before {
  left: -2px;
}
.retrobox .box-inner:after {
  right: -2px;
}