html {
     -webkit-touch-callout:none;
     -webkit-user-select:none;
     -khtml-user-select:none;
     -moz-user-select:none;
     -ms-user-select:none;
     user-select:none;
     -webkit-tap-highlight-color:rgba(0,0,0,0);
     overflow: hidden;
     width: 100%;
     height: 100%;
}

body {
     position: fixed;
     width: 100%;
     height: 100%;
     margin: 0;
     background-color: black;
     -webkit-overflow-scrolling: touch;
     overflow-y: hidden;
     overflow-x: hidden;
     touch-action: none;
}

#categories{
     -webkit-touch-callout:none;
     -webkit-user-select:none;
     -khtml-user-select:none;
     -moz-user-select:none;
     -ms-user-select:none;
     user-select:none;
}

#listHiddenContainer{
     position: absolute;
     width: 50%;
     height: 300px;
     z-index: 214748366;
     top: 0;
     left: 0;
     background-color: white;
}

.noPinch{
     touch-action: none;
}

.onlyScroll{
     touch-action: pan-y;
}

.flex-container {
     /* We first create a flex layout context */
     display: flex;

     /* Then we define the flow direction
     and if we allow the items to wrap
     * Remember this is the same as:
     * flex-direction: row;
     * flex-wrap: wrap;
     */
     flex-flow: row wrap;

     /* Then we define how is distributed the remaining space */
     justify-content: space-around;
}

.flex-container {
     display: flex;
     flex-flow: row wrap;
     justify-content: space-around;
     padding: 0;
     margin: 0;
     list-style: none;
}

.closestInfoCard{
     position: relative;
     min-width: 30%;
     margin: 2%;
     border-radius: 0 0 10px 0 red;
     transition: all .2s ease;
}

.posterCard{
     width: 100%;
     height: 100%;
     border-radius: 0 0 10px 0 red;
     overflow: none;
}

.scoreCard{
     position: absolute;
     bottom: 0px;
     right: 0px;
     padding: 3px;
     background-color: rgba(255,255,255, 0.75);
     border-radius: 10px 0 10px 0;
     font-family: 'Roboto Condensed', sans-serif;
     size: 20px;
     color: rgb(0, 0, 0);
}

.listRank{
     position: absolute;
     width: 20px;
     height: 20px;
     top: 3px;
     right: 3px;
     padding: 3px;
     background-color: rgba(0,0,0, 0.5);
     border-radius: 50%;
     font-family: 'Cutive-Mono', monospace;
     size: 20px;
     color: rgb(200, 200, 200);
     text-align: center;
}

.grid{
     margin: auto;
     width: 100%;
     height: 200px;
     display: grid;
     grid-template-columns: repeat(3,30%);
     justify-content: space-between;
     z-index: 1000;
}

#movieGridWrapper{
     margin: auto;
     width: 100%;
     height: 200px;
     display: grid;
     grid-template-columns: repeat(3,34%);
     justify-content: space-between;
     z-index: 1000;
}


#scrollableArea{
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 100%;
     max-width: 800px;
     height: 100%;
     overflow-y: scroll;
     transition: all 2s ease;
     z-index: 1000;
}

#searchBoxPrim{
     display: block;
     margin: 10px a/uto 10px 10px;
     height: 30px;
     /* width: 70%; */
     background-color: rgb(255,255,255);
     font-family: 'Cutive Mono', monospace;
     color: rgb(0,0,0);
     font-size: 12px;
     border-style: solid;
     border: 1px solid rgb(200,200,200);
     box-shadow: none;
     width: 80%;
     margin: 20px auto 10px auto;
     padding: 15px 5px 15px 5px;
}

.positionTab{
     position: absolute;
     width: 80px;
     height: 40px;
     border-radius: 40px 40px 0 0;
     transition: all .5s ease;
     bottom: 0;
     opacity: 1;
     left: 50%;
     box-shadow: 0 0 45px 25px rgba(0, 0, 0, 0.8);
}

#positionTab_sliders{
     transform: translateX(-150%);
     /* background-color: rgba(255, 115, 0); */
     /* background-color: rgba(227, 0, 235); */
     background-color: rgba(0, 224, 159);
     z-index: 10004;
}
#positionTab_movie{
     transform: translateX(-50%);
     /* background-color: rgba(70, 179, 131); */
     /* background-color: rgba(246, 12, 27); */
     background-color: rgba(254, 11, 61);
     z-index: 10003;
}
#positionTab_lists{
     transform: translateX(50%);
     /* background-color: rgba(255, 115, 0); */
     /* background-color: rgba(227, 0, 235); */
     background-color: rgba(224, 121, 11);
     z-index: 10002;
}

#positionTab_menu{
     left: 15px;
     top: 15px;
     border-radius: 20px 20px 20px 20px;
     height: 40px;
     width: 40px;
     /* background-color: rgba(13, 85, 255); */
     /* background-color: rgba(11, 12, 246); */
     background-color: rgba(52, 91, 128, .7);
     z-index: 214748366;
}

#icon_menu{
     transform: translateY(-10%);
}

.positionTab:hover{
     filter: brightness(100%);
}

.iconGroup{
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translateX(-50%) translateY(-40%);
}

#positionArrow_sliders{
     position: absolute;
     border-left: 2px solid white;
     border-top: 2px solid white;
     width: 20px;
     height: 20px;
     left: 50%;
     top: 50%;
     transform: translateX(-50%) rotate(45deg);
     transition: all .2s ease;
}

/* SPLASH */
#pageIndicatorWrapper_splash{
     position: absolute;
     bottom: 2px;
     left: 50%;
     width: 70px;
     height: 14px;
     z-index: 50000;
}

 .pageIndicator_splash{
      position: absolute;;
      transform: translateX(-50%);
      width: 70px;
      height: 14px;
      background-color: rgba(50,50,50,.2);
      border-radius: 10px 10px 10px 10px;
 }

 #pageIndicator2_splash{
      display: none;
 }
 #pageIndicator3_splash{
      display: none;
 }
 #pageIndicator4_splash{
      display: none;
 }
 #pageIndicator5_splash{
      display: none;
 }
 #pageIndicator6_splash{
      display: none;
 }
 #pageIndicator7_splash{
      display: none;
 }

 #splashCover{
      display: none;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255,255,255,.2);
      z-index: 214748366;
}

#logo_load{
     -webkit-filter:  drop-shadow(0 0 3px rgba(255, 255, 255, 1));
     filter: drop-shadow(0 0 3px rgba(0, 0, 0, .5));
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translateX(-50%) translateY(-50%);
     z-index: 214748360;
}

 #splashCover_load{
      display: none;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255,255,255,.2);
      z-index: 214748366;
}

#splashWrapper{
     /* display: none; */
     width: 300px;
     max-width: 80%;
     height: 800px;
     max-height: 80%;
     position: absolute;
     transform: translateX(-50%) translateY(-50%);
     left: 50%;
     top: 50%;
     /* background-color: rgba(145, 201, 185,.97); */
     background-color: rgba(52, 91, 128,1);
     box-shadow: 0 0 45px 25px rgba(0, 0, 0, 0.3);
     transition: all .5s ease;
     overflow: hidden;
}

#swipeCards_splash{
     display: none;
     position: relative;
     width: 100%;
     height: 100%;
     max-height: 500px;
     top: 50%;
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
}

.splashCard{
     z-index: 2147483647;
     width: 100%;
     height: 100%;
     text-align: center;
     position: relative;
     top: 0;
     left: 0;
}

.overlayTextSplash_title{
     width: 90%;
     height: 50px;
     position: absolute;
     top: 30px;
     left: 50%;
     transform: translateX(-50%);
     text-align: center;
     padding: 5px;
     font-size: 35px;
     line-height: 35px;
     font-family: 'Oleo Script', cursive;
     color: rgb(255,255,255);
     z-index: 20;
     text-shadow: 1px 1px rgba(100,100,100,.7);
}

.overlayTextSplash_primary{
     width: 80%;
     position: absolute;
     top: 10%;
     height: 20%;
     left: 50%;
     transform: translateX(-50%);
     text-align: center;
     padding: 5px;
     font-size: 25px;
     line-height: 35px;
     font-family: 'Raleway', sans-serif;
     font-weight: 900;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     color: rgb(255,255,255);
     z-index: 20;
     text-shadow: 1px 1px rgba(0,0,0,.7);
}


.splash_icon{
     position: absolute;
     top: 50%;
     left:50%;
     height:20%;
     transform: translateX(-50%) translateY(-50%);
     -webkit-filter: drop-shadow( 1px 1px 1px rgba(0,0,0,.3));
     filter: drop-shadow( 1px 1px 1px rgba(0,0,0,.3));
}

.overlayTextSplash_secondary{
     position: absolute;
     top: 65%;
     left: 50%;
     transform: translateX(-50%);
     width:80%;
     /* background-color: rgba(255,255,255,.25); */
     padding: 10px;
     font-size: 15px;
     line-height: 18px;
     font-family: 'Source Sans Pro', sans-serif;
     font-weight: 100;
     color: rgb(255,255,255);
     z-index: 20;
     height: 25%;
     overflow-y: scroll;
     text-shadow: 1px 1px rgba(0,0,0,.1);
}

.overlayTextSplash_secondary p{
     margin: 0;
     position: absolute;
     width: 90%;
     max-height: 90%;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}

#splash_title{
     font-family: "Righteous", cursive;
     font-size: 45px;
     line-height: 40px;
}
#splash_title2{
     font-family: "Righteous", cursive;
     font-size: 45px;
     line-height: 40px;
}

#logo_splash{
     -webkit-filter:  drop-shadow(0 0 5px rgba(255, 170, 170, .7));
     filter: drop-shadow(0 0 3px rgba(255, 170, 170, .3));
     /* -webkit-filter:  drop-shadow(0 0 5px rgba(154, 11, 11, .7)); */
     /* filter: drop-shadow(0 0 5px rgba(154, 11, 11, .5)); */
}




#spiderContainer_splash{
     height: 120px;
     transform: translateX(-50%) translateY(-55%);
     -webkit-filter: drop-shadow( 0px 0px 0px rgba(0,0,0,0));
     filter: drop-shadow( 0px 0px 0px rgba(0,0,0,0));
}

#daMovieshWrapper{
     display: none;
     position: absolute;
     height: 500px;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
}

#daMoviesh{
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     max-width: 100%;
     height: auto;
     background-size: auto;
     background-repeat: no-repeat;
     background-position: right;
}

@media only screen and (max-width: 440px) {
     .swipe_button{
          position: absolute;
          top: 50%;
          background-color: rgba(255,255,255,0.8);
          height: 60px;
          width: 60px;
          border-radius: 50%;
          z-index: 100000;
          transition: all 0.3s ease;
          transform: scale(0.75);
     }


}
@media only screen and (max-height: 570px) {
     #auraCircle{
          transform: scale(.75);
     }
}


#auraCircle_splash{
     z-index: 10000;
     transition: all .5s ease;
     border: 10px solid rgba(254, 11, 61,1.0);
     background-color: rgba(254,11,61,1.0);
     border-radius: 50%;
     width: 30px;
     height: 30px;
     box-shadow: 0 0 5px rgba(255, 170, 170, .7);
     text-shadow: 0 0 12px rgba(176, 0, 0, 0.5);
     filter: blur(1.5px);
}

.water{
     width:30px;
     height: 25px;
     border-radius: 50%;
     position: relative;
     box-shadow: inset 0 0 3px 0 rgba(0,0,0,.5), 0 4px 10px 0 rgba(0,0,0,.5);
     overflow: hidden;
}
.water:before, .water:after{
     content:'';
     position: absolute;
     width:30px;
     height: 25px;
     top:-5px;
     background-color: #fff;
}
.water:before{
     border-radius: 45%;
     background:rgba(255,255,255,.7);
     transform: rotate(0deg);
     animation:wave 1.5s linear infinite;
}
.water:after{
     border-radius: 35%;
     background:rgba(255,255,255,.3);
     animation:wave 1.5s linear infinite;
}
@keyframes wave{
     0%{
          transform: rotate(0);
     }
     100%{
          transform: rotate(360deg);
     }
}

#menu_lists{
     list-style-type: none;
     margin: 0;
     padding: 0;
}

/* MENU */
#pane_menu{
     width: 300px;
     max-width: 80%;
     height: 800px;
     max-height: 80%;
     position: absolute;
     transform: translateX(-50%) translateY(-50%);
     left: 50%;
     top: 50%;
     background-color: rgba(255, 255, 255,.99);
     box-shadow: 0 0 45px 25px rgba(0, 0, 0, 0.8);
     z-index: 15000;
     transition: all .2s ease;
     overflow-y: scroll;
}

/* LISTS */
#pane_lists{
     width: 300px;
     max-width: 80%;
     height: 800px;
     max-height: 80%;
     position: absolute;
     transform: translateX(-50%) translateY(-50%);
     left: 50%;
     top: 50%;
     background-color: rgba(255, 255, 255,.99);
     box-shadow: 0 0 45px 25px rgba(0, 0, 0, 0.8);
     z-index: 15000;
     transition: all .2s ease;
     overflow-y: scroll;
}


/* SLIDERS */
#pane_sliders{
     width: 300px;
     max-width: 80%;
     height: 800px;
     max-height: 80%;
     position: absolute;
     transform: translateX(-50%) translateY(-50%);
     left: 50%;
     top: 50%;
     background-color: rgba(255, 255, 255,.99);
     box-shadow: 0 0 45px 25px rgba(0, 0, 0, 0.8);
     z-index: 15000;
     transition: all .2s ease;
     overflow: hidden;
}



.border{
     width:80%;
     border-bottom: 1px solid rgb(200,200,200);
     margin: auto;
}



.slider{
     -webkit-appearance: none;
     appearance: none;
     height: 2px;
     width: 90%;
     transform: translateX(3%);
     background: rgb(0,0,0) !important;
     outline: none;
     opacity: 0.75;
     -webkit-transition: .2s;
     transition: opacity .2s;
     margin: 15px 0 -10px 5px;
     z-index:99;
}

input[type=range]::-webkit-slider-runnable-track {
     -webkit-appearance: none;
     appearance: none;
     height: 2px;
     width: 90%;
     background: rgb(0,0,0) !important;
     outline: none;
     /* opacity: 0.75; */
     -webkit-transition: .2s;
     transition: opacity .2s;
     z-index:99;
}

.slider:hover{
     opacity: 1;
}

input[type=range]::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 18px;
     height: 18px;
     margin-top: -9px;
     background: rgb(0, 0, 0);
     border-radius: 50%;
     transform: translateX(-50%);
     transition: all 0.35s;
     opacity: 1;
}


.slider::-webkit-slider-thumb{
     -webkit-appearance: none;
     appearance: none;
     width: 13px;
     height: 13px;
     margin-top: -5px;
     background: rgb(0, 0, 0);
     border-radius: 50%;
     transform: translateX(-50%);
     transition: all 0.35s;
     opacity: 1;
}

.slider::-webkit-slider-thumb:hover{
     background: rgb(254, 11, 61);
     transform: translateX(-50%) scale(1.35);
}

.slider::-moz-range-thumb{
     width: 13px;
     height: 13px;
     background: rgb(0,0,0);
     transform: translateX(-50%);
}
.filterBox{
     height: 35px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     margin-bottom: 5;
}

#secFilters{
     position: relative;
     max-height: 45%;
}


.filterGroup{
     display: relative;
     style: italic;
     weight: bold;
     font-family: 'Roboto Condensed', sans-serif;
     background-color: rgb(255, 255, 255);
     font-size: 11px;
     variant: small-caps;
     width: 80%;
     overflow-y: scroll;
     margin: 20px auto 10px auto;
     padding: 15px 5px 15px 5px;
     border: 1px solid rgb(200,200,200);
     z-index: 9000;
}

/* width */
::-webkit-scrollbar{
     width: 4px;
     height: 0px;
}

/* Track */
::-webkit-scrollbar-track{
     background: rgba(0,0,0,0);
     mix-blend-mode: darken;
     height: 0px;
}

/* Handle */
::-webkit-scrollbar-thumb{
     background: rgba(0, 0, 0, .5);
     border-radius: 2px 2px 2px 2px;
     outline: none;
     opacity: 0.5;
     margin-right: 10px;

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover{
     background: rgba(0, 0, 0, 1);
     outline: none;

}

.readOut{
     margin-left: 15px;
     margin-top: 20px;
     color: black;
     font-family: 'Roboto Condensed', sans-serif;
     font-style: italic;
}

.resetButton{
     margin: 0px auto 15px auto;
     width: 30px;
     font-size: 10px;
     padding: 4px;
     font-family: 'Roboto', sans-serif;
     font-size: 14px;
     font-style: thin;
     color: rgb(0,0,0);
     text-align: center;

}

.resetButton:hover{
     color: rgb(254, 11, 61);
}


.checkbox-wrapper{
     margin-bottom: -20px;
}

.checkmark{
     /* z-index: 100; */
     font-family: 'Open Sans', sans-serif;
     color: rgb(255,255,255);
     border: 1px solid rgb(0, 0, 0);
     position: absolute;
     font-size: 10px;
     display: block;
     border-radius: 50%;
     width: 15px;
     height: 15px;
     position: relative;
     transition: all 0.35s ease;
     white-space: nowrap;
}

.checkmark::after{
     content: "";
     position: absolute;
     width: 4px;
     height: 10px;
     border-right: 2px solid rgb(254,11,61);
     border-bottom: 2px solid rgb(254,11,61);
     top: 40%;
     left: 50%;
     transform: translateX(-50%) translateY(-50%) rotateZ(359deg) scale(.1);
     opacity: 0;
     transition: all 0.35s ease;
}

.tickbox:checked ~ .checkmark{
     background-color: rgba(255, 255, 255,1);
     border: 1px solid rgba(255, 255, 255,1);
}
.tickbox:checked ~ .checkmark::after{
     opacity: 1;
     transform: translateX(-50%) translateY(-50%) rotateZ(50deg) scale(1);
}

.tickLabel{
     margin-left: 25px;
     color: black;
     font-family: 'Roboto', sans-serif;
     font-size: 14px;
     font-style: thin;
}


.tickGroup{
     /* display: block; */
     margin: 10px auto 10px auto;
     padding-top: 3px;
     width: 80%;
     z-index: 1;
}

.candidate{
     list-style-type: none;
     color: rgb(30,30,30);
     font-family: 'Cutive Mono', monospace;
     margin: 0 0 3px 0;
     -webkit-touch-callout:none;
     -webkit-user-select:none;
     -khtml-user-select:none;
     -moz-user-select:none;
     -ms-user-select:none;
     user-select:none;
}

#clarification{
     display: none;
     width: 90%;
     position: absolute;
     padding: 15px;
     background-color: rgb(255, 255, 255);
     border: 1px solid rgba(31, 110, 175, 1);
     z-index: 214748366;
     box-shadow: 1px 1px 1px 1px rgba(50, 50, 50, 0.5);
}

#tertFilters{
     max-height: 50%;
     overflow-y: scroll;
}



.swipe{
     overflow: hidden;
     visibility: hidden;
     position: relative;
     z-index: 100000;
}
.swipe-wrap{
     overflow: hidden;
     position: relative;
}
.swipe-wrap > div{
     float: left;
     width: 100%;
     position: relative;
}

.posterTitleMissing{
     font-family: "Righteous", cursive;
     font-size: 45px;
     line-height: 40px;
     text-overflow: ellipsis;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translateX(-50%) translateY(-50%);
}

.posterCard{
     width: 100%;
     height: 100%;
     border-radius: 0 0 10px 0;
}
/*
.bottomSection{
     height: 400px;
     max-height: 55%;
     overflow-y: scroll;
} */

.topSection{
     position: relative;
     width: 100%;
     height: 400px;
     max-height: 45%;
     top: 0;
     left: 0;
     z-index: 10;
     overflow-y: scroll;
}

.topSection_sliders{
     position: relative;
     width: 100%;
     height: 50px;
     top: 0;
     left: 0;
     z-index: 10;
}

.midSection_sliders{
     position: relative;
     width: 90%;
     max-height: 20%;
     top: 0px;
     left: 0;
     z-index: 0;
     overflow-y: hidden;
}

#notAvailable{
     display: none;
     margin: 15px;
}
#otherCountries{
     display: none;
     margin: 15px;
}

#netflixIcon{
     display: none;
     width: 75px;
     height: 75px;
     background-image: url("vv_data/netflixIcon.png");
     background-size: contain;
     background-repeat: no-repeat;
     background-position: right;
     z-index: 1000000;
     transition: all .2s ease;
     margin: 15px;
}

#netflixIcon:hover{
     transform: scale(1.1);
}

#offerSection{
     height: 400px;
     max-height: 55%;
     overflow-y: scroll;
     overflow-x: hidden;
}


h3{
     font-size: 20px;
     margin-left: 15px;
}

.offerGrid{
     position: relative;
     margin: 10px 15px 10px 15px;
     width: 100%;
     padding: 0;
     min-height: 60px;
     display: grid;
     grid-template-columns: repeat(10,25%);
     grid-column-gap: 5px;
     grid-template-rows: repeat(1, 100%);
     justify-content: space-between;
     z-index: 1000;
     overflow-x: overlay;
     align-items: center;
}

.offerGrid_wrapper{
     margin-top: 0;
     margin-bottom: 0;
     padding: 0;
}

#flagArea{
     position: relative;
     margin: 10px auto 20px auto;
     max-height: 50%;
     width: 90%;
     overflow-y: scroll;
}



#tmdbLogo{
      background-image: url('vv_data/tmdbLogo.svg');
      width: 100px;
      height: 20px;
      background-repeat: no-repeat;
      margin: 0;
      display: inline-block;
      float: right;
}

.offerNode{
     position: relative;
     max-width:95%;
     max-height: 95%;
     border-radius: 15px;
     box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
     margin: auto;
     justify-items: center;

}

.offering{
     max-width: 90%;
     max-height: 90%;
}

.flagGrid{
     margin: auto;
     width: 100%;
     height: 100%;
     display: grid;
     grid-template-columns: repeat(5,18%);
     grid-template-rows: repeat(6, 15%);
     justify-content: space-between;
     z-index: 1000;
}

#flagGridWrapper{
     margin: auto;
     width: 100%;
     height: 200px;
     display: grid;
     grid-template-columns: repeat(4,30%);
     justify-content: space-between;
     z-index: 1000;
}


#titleArea1{
     color: rgb(40,40,40);
     font-size: 20px;
     font-weight: bold;
}

.titleArea{
     position: relative;
     width: 80%;
     margin: 15px 15px 5px 15px;
     color: rgb(40,40,40);
     font-size: 20px;
     font-weight: bold;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     font-size: 24px;
     line-height: 25px;
     max-height: 50px;
     z-index: 20;
}

.detailsArea{
     position: relative;
     margin: 5px 15px 5px 15px;
     width: 80%;
     font-size: 14px;
     font-family: 'Roboto Condensed', sans-serif;
     font-weight: lighter;
     color: rgb(0,0,0);
     display: flex;
     justify-content: space-between;
     -webkit-line-clamp: 2;
     line-height: 25px;
     max-height: 60px;
     z-index: 20;
}

.scoreCard{
     position: absolute;
     bottom: 0px;
     right: 0px;
     padding: 3px;
     background-color: rgba(255,245,227, 0.75);
     border-radius: 10px 0 10px 0;
     font-family: 'Roboto Condensed', sans-serif;
     size: 20px;
     color: rgb(0, 0, 0);
}

.detailLabel{
     font-family: 'Roboto Condensed', sans-serif;
     font-size: 13px;
     font-weight: bolder;
     color: rgb(0,0,0)
}

#directorsArea{
     position: relative;
     width: 80%;
     margin: 5px 15px 5px 15px;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
     line-height: 20px;
     max-height: 20px;
     z-index: 20;
}

#yourCountry{
     position: relative;
     margin: 15px   ;
     width: 80%;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
     line-height: 20px;
     max-height: 200px;
     z-index: 20;
}

#castArea{
     position: relative;
     width: 80%;
     margin: 5px 15px 5px 15px;
     padding-left: 36px ;
     text-indent: -31px ;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     line-height: 20px;
     max-height: 40px;
     z-index: 20;
}

#pane_movie{
     width: 300px;
     max-width: 80%;
     height: 800px;
     max-height: 80%;
     position: absolute;
     transform: translateX(-50%) translateY(-200%);
     font-family: 'Roboto Condensed', sans-serif;
     left: 50%;
     top: 50%;
     background-color: rgba(255, 255, 255,.99);
     box-shadow: 0 0 45px 25px rgba(0, 0, 0, 0.8);
     z-index: 9000;
     transition: all .2s ease;
     overflow: hidden;
}


.hide_pane{
     position: absolute !important;
     top: -9999px !important;
     left: -9999px !important;
}

#swipeCards_movie{
     position: relative;
     z-index: 10000;
}

#selectedMovieCard1_movie{
     position: relative;
     top: 0px;
     left: 50%;
     transform: translateX(-50%);
     height: 100%;
     width: 100%;
     z-index: 10000;
     border-radius: 0 0 10px 10px;
}

#selectedMovieCard2_movie{
     position: relative;
     top: 0px;
     left: 50%;
     transform: translateX(-50%);
     height: 100%;
     width: 100%;
     z-index: 10000;
     border-radius: 0 0 10px 10px;
}

#selectedMovieCard3_movie{
     position: relative;
     top: 0px;
     left: 50%;
     transform: translateX(-50%);
     height: 100%;
     width: 100%;
     z-index: 10000;
     border-radius: 0 0 10px 10px;
}

#selectedMovieCard4_movie{
     position: relative;
     top: 0px;
     left: 50%;
     transform: translateX(-50%);
     height: 100%;
     width: 100%;
     z-index: 10000;
     border-radius: 0 0 10px 10px;
}



#swipeCards_filters{
     position: relative;
     max-height: 100%;
     z-index: 0;
}

#selectedMovieCard1_filters{
     position: relative;
     top: 0px;
     left: 50%;
     transform: translateX(-50%);
     height: 80%;
     width: 100%;
     z-index: 9000;
     border-radius: 0 0 10px 10px;
}

#selectedMovieCard2_filters{
     position: relative;
     top: 0px;
     left: 50%;
     transform: translateX(-50%);
     height: 100%;
     width: 100%;
     z-index: 10000;
     border-radius: 0 0 10px 10px;
}

#selectedMovieCard3_filters{
     position: relative;
     top: 0px;
     left: 50%;
     transform: translateX(-50%);
     height: 100%;
     width: 100%;
     z-index: 10000;
     border-radius: 0 0 10px 10px;
}

 #pageIndicatorWrapper_filters{
      position: absolute;
      bottom: 2px;
      left: 50%;
      width: 30px;
      height: 14px;
      z-index: 50000;
 }

 .pageIndicator_filters{
      position: absolute;;
      transform: translateX(-50%);
      width: 30px;
      height: 14px;
      background-color: rgba(50,50,50,.2);
      border-radius: 10px 10px 10px 10px;
 }

 .pageIndicator_filters{
      position: absolute;;
      transform: translateX(-50%);
      width: 30px;
      height: 14px;
      background-color: rgba(50,50,50,.2);
      border-radius: 10px 10px 10px 10px;
 }

 #pageIndicator2_filters{
      display: none
}
 #pageIndicator3_filters{
      display: none
}


 #pageIndicatorWrapper_movie{
      position: absolute;
      bottom: 2px;
      left: 50%;
      width: 50px;
      height: 14px;
      z-index: 50000;
 }

 .pageIndicator_movie{
      position: absolute;;
      transform: translateX(-50%);
      width: 50px;
      height: 14px;
      background-color: rgba(50,50,50,.2);
      border-radius: 10px 10px 10px 10px;
 }

 #pageIndicator2_movie{
      display: none;
 }
 #pageIndicator3_movie{
      display: none;
 }
 #pageIndicator4_movie{
      display: none;
 }
 #pageIndicator5_movie{
      display: none;
 }

 .swipe_button{
      position: absolute;
      top: 50%;
      background-color: rgba(255,255,255,0.8);
      height: 60px;
      width: 60px;
      border-radius: 50%;
      z-index: 100000;
      transition: all 0.3s ease;
 }

 .sb_next{
      right: 0;
}

.button_arrow{
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translateX(-50%) translateY(-50%) scale(.75);
     transition: all 0.3s ease;
}

.swipe_button:hover{
     background-color: rgba(254, 11, 61, 1);
     transform: scale(1.1);
}

.swipe_button:hover .button_arrow{
     filter: invert(100%) brightness(5004%);
     transform: translateX(-50%) translateY(-50%) scale(.95);
}

.menu_content{
     /* text-align: center !important; */
     margin-left: 10% !important;
     width: 80% !important;
     font-family: 'Source Sans Pro', sans-serif;
     font-weight: 100;
     color: rgb(50,50,50);
}

.menu_text{
     text-align: center;
     margin: 20px;
}

.slide-menu__backlink{
     text-align: center;
}

#menu_header{
     text-align: center;
}

#toDo{
     text-align: center;
}

.listDescription{
     margin-top: 0px;
     font-size: 12px;
     line-height: 14px;
     font-family: 'Source Sans Pro', sans-serif;
     font-weight: 100;
     color: rgb(150,150,150);
}


 .circleWrapper{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      height: 100%;
      width: 80%;
      display: flex;
      justify-content: space-between;
 }



 .pageCircle{
      width: 4px;
      height: 4px;

      border: 1px solid rgba(255,255,255,0.8);

      border-radius: 50%;

      margin-top: 4px;
      margin-bottom: 4px;
 }

 .curPageCircle{
      background-color: rgba(255,255,255,0.8);
 }

#auraCircle{
     z-index: 10000;
     position: absolute;
     bottom: 30px;
     transition: all .5s ease;
     border: 10px solid rgba(254, 11, 61,1.0);
     background-color: rgba(254,11,61,1.0);
     border-radius: 50%;
     width: 30px;
     height: 30px;
     box-shadow: 0 0 15px rgba(130, 0, 0, 1), 0 0 10px 5px rgba(255, 255, 255, 1);
     text-shadow: 0 0 12px rgba(176, 0, 0, 0.5);
     filter: blur(1.5px);
}


.water{
     width:30px;
     height: 25px;
     border-radius: 50%;
     position: relative;
     box-shadow: inset 0 0 3px 0 rgba(0,0,0,.5), 0 4px 10px 0 rgba(0,0,0,.5);
     overflow: hidden;
}
.water:before, .water:after{
     content:'';
     position: absolute;
     width:30px;
     height: 25px;
     top:-5px;
     background-color: #fff;
}
.water:before{
     border-radius: 45%;
     background:rgba(255,255,255,.7);
     transform: rotate(180deg);
     animation:wave 1.5s linear infinite;
}
.water:after{
     border-radius: 35%;
     background:rgba(255,255,255,.3);
     animation:wave 1.5s linear infinite;
}
@keyframes wave{
     0%{
          transform: rotate(0);
     }
     100%{
          transform: rotate(360deg);
     }
}

.computing{
     animation: oscillate .25s ease infinite;
     animation-direction: alternate;
}

@keyframes oscillate{
     from {
          transform: scale(1);
     }
     to {
          transform: scale(1.15);
     }
}

#flagToolTip{
     display: none;
     position: absolute;
     background-color: black;
     font-family: 'Cutive Mono', monospace;
     color: white;
     font-size: 16px;
     padding: 3px;
     border-radius: 3px;
     transition: all 0.3s ease;
}


.pageCircle{
     width: 4px;
     height: 4px;

     border: 1px solid rgba(255,255,255,0.8);

     border-radius: 50%;

     margin-top: 4px;
     margin-bottom: 4px;
}

.curPageCircle{
     background-color: rgba(255,255,255,0.8);
}

#descriptionArea{
     position: relative;
     width: 80%;
     max-height: 20%;
     height: 500px;
     margin: 10px auto 20px auto;
     overflow-y: scroll;
     overflow-x: hidden;
     font-size: 14px;
     font-family: 'Roboto Condensed', sans-serif;
     color: rgb(40,40,40);
     padding: 15px 5px 15px 5px;
     border: 1px solid rgb(200,200,200);
     z-index: 100000;
}

.overlayText{
     background-color: rgba(255,255,255,.85);
     padding: 5px;
     font-size: 12px;
     font-family: 'Roboto Condensed', sans-serif;
     color: rgb(40,40,40);
     z-index: 20;
}

.posterArea{
     position: absolute;
     right: 0;
     top: 0;
     width: 100%;
     height: 375px;
     max-height: 100%;
     /* border-radius: 0 0 10px 0; */
     filter: blur(2px);
     opacity: .6;
     z-index: 0;

}

#trailerVideo{
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     width: 90%;
     min-width: 200px;
     height: 80%;
     max-height: 140px;
     margin-top: 20px;
}

#escape_card{
     position: absolute;
     top: 0px;
     right: 10px;
     font-size: 30px;
     color: rgba(0,250,250,1);
     mix-blend-mode: difference;
     transition: all 0.3s ease;
     z-index:50000;
}


#spiderContainer{
     width: 100%;
     min-width: 200px;
     height: 80%;
     max-height: 140px;
     margin: 10px auto 20px auto;
}

#infoChart{
     max-height: 100%;
     pointer-events: none;
}

#resetAll{
     transition: all .3s;
     position: fixed;
     z-index: 214748366;
     border-radius: 50%;
     opacity: .5;
     background-color:rgb(254, 11, 61);
     box-shadow: 0 0 45px 25px rgba(0, 0, 0, 1);
}


#resetAllButton{
     transition: all .3s;
     padding: 5px;

}

.guidance{
     position: absolute;
     font-family: 'Cutive Mono', monospace;
     font-size: 12px;
     max-width: 100px;
     padding: 10px;
     background-color: rgba(254, 11, 61, 1);
     z-index: 214748360;
     text-align: center;
     border: 0;
     box-sizing: border-box;
     box-shadow: inset 0 0 0 2px #f45e61;
     color: white;
     text-shadow: 1px 1px rgba(0,0,0,.1);
}

.guidance::before, .guidance::after {
     content: '';
     box-sizing: border-box;
     position: absolute;
     border: 2px solid transparent;
     width: 0;
     height: 0;
}
.guidance::before {
     top: 0;
     left: 0;
     border-top-color: #60daaa;
     border-right-color: #60daaa;
     animation: border 2s infinite;
}
.guidance::after {
     bottom: 0;
     right: 0;
     animation: border 2s 1s infinite, borderColor 2s 1s infinite;
}

@keyframes border {
  0% {
    width: 0;
    height: 0;
  }
  25% {
    width: 100%;
    height: 0;
  }
  50% {
    width: 100%;
    height: 100%;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}
@keyframes borderColor {
  0% {
    border-bottom-color: #60daaa;
    border-left-color: #60daaa;
  }
  50% {
    border-bottom-color: #60daaa;
    border-left-color: #60daaa;
  }
  51% {
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
  100% {
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
}

#resetMe{
     display: none;
}
#clickMe{
     display: none;
}

#loadingScreen{
     width: 100%;
     height: 100%;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
     z-index: 214748367;
     background-color: white;
}

#initializing{
     position: absolute;
     bottom: 15%;
     left: 50%;
     transform: translateX(-50%);
     font-family: 'Cutive Mono', monospace;
     font-size: 15px;
     line-height: 20px;
     color: rgb(50,50,50);
     white-space: wrap;
     text-align: center;
}

#auraLoading{
     z-index: 9999;
     border: 10px solid rgba(254, 11, 61,1.0);
     border-radius: 50%;
     width: 30px;
     height: 30px;
     box-shadow: 0 0 15px rgba(130, 0, 0, 0.5);
     text-shadow: 0 0 12px rgba(176, 0, 0, 0.5);
     filter: blur(1.5px);
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translateX(-50%) translateY(-50%);
}

#kofi{
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
}