*{
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

h1 {
  color: #fff;
    transition: all 2s;
    margin-bottom: 5px;
    font-weight: 100;
}
#alert_orientation{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(125deg, rgba(0,90,124,1)  20%, rgba(92,47,168, 1) 70%);
    display: none;
    z-index: 100;
}
#alert_orientation>div>div{
    background-image: url('../assets/images/icon_change_orientation.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    margin-bottom: 15px;
    width: 100%;
    height: 90px;
}
input[type=text]:focus {
    outline: none;
}
input[type=text] {
    padding: 10px 50px 10px 20px;
    border:0;
    border-radius: 30px;
    width: 100%;
    background-color: #fff;
    background-image: url('../assets/images/search.svg');
    background-size: 22px;
    background-position: right 15px center;
    background-repeat: no-repeat;
}
@media screen and (max-device-width: 767px) and (orientation: landscape) {
       #alert_orientation{
          display:flex;
          justify-content: center;
          text-align: center;
          align-items: center;
          color: #fff;
          line-height: 1.2;
       }
    .main_conteiner{
        display: none !important;
    }
}
.dark{
  color: #fff;
}
.light, .light h1{
  color: #32368a;
}
.main_conteiner{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0,90,124);
    background-image: linear-gradient(125deg, rgba(0,90,124,.9)  20%, rgba(92,47,168, .9) 70%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.main_conteiner.light{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0,90,124);
    background-image: linear-gradient(125deg, rgba(194, 232, 238,.9)  20%, rgba(231, 220, 244, .9) 70%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;    
}
.page-conteiner{
  flex-direction: column;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
  align-items: flex-end;
  align-content: space-around;
  display: none;
  height: 100%;
  overflow: hidden;
}

.dark .page-conteiner.home{
    background: rgb(0,90,124);
    background-image: linear-gradient(125deg, rgba(0,90,124,.9)  20%, rgba(92,47,168, .9) 70%), url('../assets/images/mozg.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transition: all 2s;
}
.light .page-conteiner.home{
    background: rgb(0,90,124);
    background-image: linear-gradient(125deg, rgba(194, 232, 238,.9)  20%, rgba(231, 220, 244, .9) 70%), url('../assets/images/mozg.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;    
    transition: all 2s;
}
.dark .page-conteiner.menu{    
    transition: all 2s;
}
.light .page-conteiner.menu{    
    transition: all 2s;
}
.scroll_list{
    position: absolute;
    overflow-y: auto;
    max-height: calc(100% - 221px);
    left: 0;
    padding: 0;
    width: 100%;
    text-align: center;
}
.columns-3{
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    padding: 16px 0px;
    box-sizing: border-box;
}
.column-1{
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    box-sizing: border-box;
}
.column-1 > div{
    width: 100%;
}
.columns-3.bottom-line{
    border-bottom: 2px solid #996dcf;
}
.dark .columns-3{
    color: #ccecf1;
    transition: all 2s;
}
.light .columns-3{
    color: #009fba;
    transition: all 2s;
}
.columns-3> div:nth-child(1){
    padding: 5px;
    box-sizing: border-box;
    min-width: 80px;
    width: 33%;
}
.columns-3> div:nth-child(2){
    width: 33.33%;
    min-width: 126px;
    text-align: -webkit-right;
}
.columns-3> div:nth-child(3){
    width: 33.33%;
    min-width: 126px;
    text-align: -webkit-right;
}

.columns-3.library-list> div:nth-child(1){
    padding: 5px;
    box-sizing: border-box;
    min-width: 70px;
    width: 70px;
    border-radius: 37px;
    background-size: 105%;
}
.columns-3.library-list> div:nth-child(2){
    width: 100%;
    min-width: 126px;
    text-align: -webkit-left;    
    padding: 5px 5px 5px 15px;
    font-size: 18px;
}
.columns-3.library-list> div:nth-child(3){
    width: 60px;
    min-width: 60px !important;
    text-align: -webkit-right;
}
.btn_play{
    width: 60px;
    height: 70px;
    background-image: url("../assets/images/play_dark.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.play .btn_play{
    width: 60px;
    height: 70px;
    background-image: url("../assets/images/pause_dark.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.main_logo_mini .btn_play{
    width: 60px;
    height: 60px;
    background-size: 60%;
    background-image: url("../assets/images/play_dark.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    float: right;
}
@media (orientation: portrait) {
   .page-conteiner.home{   
    background-size: cover !important;
    } 
}
.page-conteiner > .flex-items:nth-child(1) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
  width: 100%;    
  padding: 0 25px;
  box-sizing: border-box;
}
.page-conteiner > .flex-items-menu {
    position: absolute;
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
  width: 100%;
  height: 90px;
  background: #fff;
    bottom: 0;
}
.page-conteiner > .flex-items-menu.bms_theme {
  background-image: url("../assets/images/BMS_logo.svg");
  background-size: 160px 22px;
  background-position: 22px 50%;
  background-repeat: no-repeat;
}
.page-conteiner > .flex-items-menu .corner-right{
    position: absolute;
    right: 0;
    top:-45px;
    background-image: url("../assets/images/naroznik.svg");
    width: 45px;
    height: 45px;
    background-size: 45px 45px;
}
.page-conteiner > .flex-items:nth-child(1) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
    width: 100%;
}

.page-conteiner > .flex-items-2 {
  display: block;
  flex-grow: 2;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: baseline;
  order: 0;
}

.page-conteiner > .flex-items-3 {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}    

.light .main_logo{
    width: 100%;
    height: 130px;
    background-image: url("../assets/images/vivio_app_logo_light.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    margin: 35px auto;
}
.dark .main_logo {
    width: 100%;
    height: 130px;
    background-image: url(../assets/images/vivio_app_logo.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    margin: 35px auto;
}
.light .main_logo_mini{
    width: calc(100% + 50px);
    height: 60px;
    background: rgba(255,255,255,0.1);
    margin: 0 -25px 0px -25px;
}
.dark .main_logo_mini {
    position: relative;
    width: calc(100% + 50px);
    height: 60px;
    background: rgba(255,255,255,0.1);
    margin: 0 -25px 0px -25px;
}
.dark .main_logo_mini>div {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 100%;
    background: url("../assets/images/rys_vivio.png");
    background-repeat: no-repeat;
    background-position: 25px 50%;
    background-size: 46px;
}
.dark .main_logo_mini>div>div {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 100%;
    background: url("../assets/images/vivio_app.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 142px;
}
.light .main_logo_mini {
    position: relative;
    width: calc(100% + 50px);
    height: 60px;
    background: rgba(255,255,255,0.1);
    margin: 0 -25px 0px -25px;
}
.light .main_logo_mini>div {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 100%;
    background: url("../assets/images/rys_vivio_light.png");
    background-repeat: no-repeat;
    background-position: 25px 50%;
    background-size: 46px;
}
.light .main_logo_mini>div>div {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 100%;
    background: url("../assets/images/vivio_app_light.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 142px;
}
.btn_seetings{
    position: absolute;
    right: 10px;
    width: 40px;
    height: 80%;
    background-image: url("../assets/images/ustawienia.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.dark .btn_back, .dark .btn_backtoAudio{
    width: 50px;
    height: 40px;
    background-image: url("../assets/images/cofnij_new.svg");
    background-repeat: no-repeat;
    background-position: 0% 50%;
}
.light .btn_back,.light .btn_backtoAudio{
    width: 50px;
    height: 40px;
    background-image: url("../assets/images/cofnij_new.svg");
    background-repeat: no-repeat;
    background-position: 0% 50%;
}



.container-menu-bottom{
    position: absolute;
    width: calc(100% - 60px);
    height: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 300px;
    margin: 0 auto;
    left: 0;
    right: 0;
}
@media (max-width: 600px) {
  
.container-menu-bottom{
    transform: translateX(-25px);
}
}
.btn_goto_video_menu{
    width: 70px;
    height: 60px;
    background-image: url("../assets/images/ikon_video.png");
    background-size: 100% 200%;
    background-position: bottom;
}
.btn_goto_audio_menu{
    width: 70px;
    height: 60px;
    background-image: url("../assets/images/ikon_music.png");
    background-size: 100% 200%;
    background-position: bottom;
}
.btn_goto_game_menu{
    width: 70px;
    height: 60px;
    background-image: url("../assets/images/ikon_game.png");
    background-size: 100% 200%;
    background-position: bottom;
}
.btn_goto_game_menu.active, .btn_goto_video_menu.active, .btn_goto_audio_menu.active{    
    background-position: top;
}
.audio_icon{
    
}


.container-tools{
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    padding: 16px 0px;
    box-sizing: border-box;
}
.container-tools>div:nth-child(1){
    flex-grow: 1;
}
.container-tools>div:nth-child(2){
    flex-grow: 8;
}
.container-tools>div:nth-child(3){
    flex-grow: 1
}
.dark .btn_favorites{
    width: 50px;
    height: 40px;
    background-image: url("../assets/images/polub_dark2.svg");
    background-repeat: no-repeat;
    background-position: 100% 50%;
}
.dark .btn_favorites.select{
    width: 50px;
    height: 40px;
    background-image: url("../assets/images/polub_dark1.svg");
    background-repeat: no-repeat;
    background-position: 100% 50%;
}
.light .btn_favorites{
    width: 50px;
    height: 40px;
    background-image: url("../assets/images/polub_light2.svg");
    background-repeat: no-repeat;
    background-position: 100% 50%;
}
.light .btn_favorites.select{
    width: 50px;
    height: 40px;
    background-image: url("../assets/images/polub_light1.svg");
    background-repeat: no-repeat;
    background-position: 100% 50%;
}
#btn_select_theme_light.select, #btn_select_theme_dark.select, #btn_select_language_nl.select, #btn_select_language_fr.select{
    width: 114px;
    height: 45px;
    background-size: 100% 200%;
    background-position: top;
    text-align: left;
    display: flex;
    align-items: center;
    color: #32368a;
    font-weight: bold;
}
#btn_select_theme_light, #btn_select_theme_dark, #btn_select_language_nl, #btn_select_language_fr{
    position: relative;
    width: 114px;
    height: 45px;
    background-size: 100% 200%;
    background-position: bottom;
    text-align: left;
    display: flex;
    align-items: center;
    color: #32368a;
    font-weight: bold;
    padding: 12px 42px 12px 18px;
    box-sizing: border-box;
    border-radius: 30px;
    background: #faf8f8;
}
#btn_select_theme_light>div:nth-child(1), #btn_select_theme_dark>div:nth-child(1), #btn_select_language_nl>div:nth-child(1), #btn_select_language_fr>div:nth-child(1){
    position: absolute;
    right: 10px;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    border: 1.5px solid #ccb6e7;
    transition: all 1s;
}
#btn_select_theme_light.select>div:nth-child(1),#btn_select_theme_dark.select>div:nth-child(1),#btn_select_language_nl.select>div:nth-child(1),#btn_select_language_fr.select>div:nth-child(1){
    position: absolute;
    right: 10px;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    border: 1.5px solid #ccb6e7;
    background: #996dcf;
    transition: all 1s;
}
.btn_gradient{
    border-radius: 30px;
    background: rgb(0,159,186);
    background: -moz-linear-gradient(124deg, rgba(0,159,186,1) 10%, rgba(153,109,207,1) 90%);
    background: -webkit-linear-gradient(124deg, rgba(0,159,186,1) 10%, rgba(153,109,207,1) 90%);
    background: linear-gradient(124deg, rgba(0,159,186,1) 10%, rgba(153,109,207,1) 90%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#009fba",endColorstr="#996dcf",GradientType=1);
    color: #fff;
    padding: 8px 12px !important;
    text-align: center;
    margin: 0 auto;
    display: none;
    min-width: 140px !important;
}
.dark #btn_goto_video,
.light #btn_goto_video{
    width: 100%;
    border-top: 2px solid #996dcf;
    padding: 26px 16px 26px 52%;
    font-size: 22px;
    background: url("../assets/images/rys_video.png");
    background-repeat: no-repeat;
    background-size: 90px;
    background-position: 24% 6px;
    margin: 6px auto 0 auto;
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
    font-weight: bold;
}
.light #btn_goto_video, .light #btn_goto_game, .light #btn_goto_music{
    color: #009fba;
}
.dark #btn_goto_music,
.light #btn_goto_music{
    width: 100%;
    border-top: 2px solid #996dcf;
    padding: 26px 16px 26px 52%;
    font-size: 22px;
    background: url("../assets/images/rys_music.png");
    background-repeat: no-repeat;
    background-size: 90px;
    background-position: 24% 6px;
    margin: 6px auto 0 auto;
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
    font-weight: bold;
}

.dark #btn_goto_game,
.light #btn_goto_game{
    width: 100%;
    border-top: 2px solid #996dcf;
    padding: 26px 16px 26px 52%;
    font-size: 22px;
    background: url("../assets/images/rys_game.png");
    background-repeat: no-repeat;
    background-size: 90px;
    background-position: 24% 6px;
    margin: 6px auto 0 auto;
    font-weight: bold;
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
}
.video_icon, .audio_icon{
    position: relative;
    width: 70px;
    height: 70px;
    background-size: contain;
    border-radius: 25px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
#player_audio_icon{
    position: relative;
    width: 200px;
    height: 200px;
    background-size: contain;
    border-radius: 100px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border: 5px solid #fff;
    margin: 0 auto 15px auto;
}
.video_icon >div,
.audio_icon >div{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../assets/images/polub_wh2.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    filter: drop-shadow(1px 1px 2px rgb(0 0 0 / 1));
}
.like .video_icon >div,
.like .audio_icon >div{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../assets/images/polub_wh1.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    filter: drop-shadow(1px 1px 2px rgb(0 0 0 / 1));
}

#player_audio_icon>div{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../assets/images/polub_wh2.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    filter: drop-shadow(1px 1px 2px rgb(0 0 0 / 1));
}
#player_audio_icon.like>div{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../assets/images/polub_wh1.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    filter: drop-shadow(1px 1px 2px rgb(0 0 0 / 1));
}
.library-list{
    border-top: 1px solid #996dcf;
    padding: 16px 25px !important;
}
.library-list:nth-last-child(){
    border-top: 1px solid #996dcf;
    border-bottom: 1px solid #996dcf;
}
.filter_audio_type.play{
    background: rgb(255,255,255);
    background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 10%, rgba(255,255,255,0.26094187675070024) 90%);
    background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 10%, rgba(255,255,255,0.26094187675070024) 90%);
    background: linear-gradient(180deg, rgba(255,255,255,0) 10%, rgba(255,255,255,0.26094187675070024) 90%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
    background-size: 150% 150%;
}
.filter_audio_type.pause{
    background: rgb(255,255,255);
    background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 10%, rgba(255,255,255,0.26094187675070024) 90%);
    background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 10%, rgba(255,255,255,0.26094187675070024) 90%);
    background: linear-gradient(180deg, rgba(255,255,255,0) 10%, rgba(255,255,255,0.26094187675070024) 90%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
    animation-name: color;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
    background-size: 250% 150%;
}
#audio_title{
    width: 100%;
    text-align: center;
    padding: 15px;
    font-size: 18px;
    color:#fff;
}
#timeline{
    position: relative;
    width: 80%;
    max-width: 350px;
    height: 20px;
    background: rgb(255,255,255);
    background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(153,109,207,1) 40%, rgba(153,109,207,1) 60%, rgba(255,255,255,0) 60%);
    background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(153,109,207,1) 40%, rgba(153,109,207,1) 60%, rgba(255,255,255,0) 60%);
    background: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(153,109,207,1) 40%, rgba(153,109,207,1) 60%, rgba(255,255,255,0) 60%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
    margin: 15px auto;
}

#progress{
    position: absolute;
    left: 0;
    width: 15px;
    max-width: 100%;
    height: 20px;
    background: rgb(255,255,255);
    background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 35%, rgba(140,212,224,1) 35%, rgba(140,212,224,1) 65%, rgba(255,255,255,0) 65%);
    background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 35%, rgba(140,212,224,1) 35%, rgba(140,212,224,1) 65%, rgba(255,255,255,0) 65%);
    background: linear-gradient(180deg, rgba(255,255,255,0) 35%, rgba(140,212,224,1) 35%, rgba(140,212,224,1) 65%, rgba(255,255,255,0) 65%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
}
#progress>div{
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 10px;
    float: right;
}
#audioPlayerContainer{
    position: relative;
    display: flex;
    width: 100%;
    max-width: 400px;
    height: 15px;
    margin: 25px auto;    
    justify-content: space-evenly;
    padding: 0 25px;
    overflow: hidden;
}
#audioPlayerContainer .bc-player-default_default.vjs-audio-only-mode .vjs-progress-control{
    height: 20px !important;
}
#audioPlayerContainer>div{
    position: absolute;
    bottom: 0;
}
#audioPlayerContainer .bc-iframe,#audioPlayerContainer .bc-iframe body,#audioPlayerContainer .bc-player-default_default,#audioPlayerContainer .bc-player-default_default .vjs-poster{
    background: none;
}

#audioPlayerContainer .vjs-progress-holder{
    background: rgb(255,255,255);
    background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(153,109,207,1) 40%, rgba(153,109,207,1) 60%, rgba(255,255,255,0) 60%);
    background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(153,109,207,1) 40%, rgba(153,109,207,1) 60%, rgba(255,255,255,0) 60%);
    background: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(153,109,207,1) 40%, rgba(153,109,207,1) 60%, rgba(255,255,255,0) 60%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
}
#audioPlayerContainer .video-js .vjs-load-progress, #audioPlayerContainer .video-js .vjs-load-progress>div{
    background: rgb(255,255,255);
    background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 35%, rgba(140,212,224,.1) 40%, rgba(140,212,224,.1) 60%, rgba(255,255,255,0) 60%);
    background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 35%, rgba(140,212,224,.1) 40%, rgba(140,212,224,.1) 60%, rgba(255,255,255,0) 60%);
    background: linear-gradient(180deg, rgba(255,255,255,0) 35%, rgba(140,212,224,.1) 40%, rgba(140,212,224,.1) 60%, rgba(255,255,255,0) 60%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
}
#audioPlayerContainer .vjs-play-progress{
    background: rgb(255,255,255);
    background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 35%, rgba(140,212,224,1) 35%, rgba(140,212,224,1) 65%, rgba(255,255,255,0) 65%);
    background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 35%, rgba(140,212,224,1) 35%, rgba(140,212,224,1) 65%, rgba(255,255,255,0) 65%);
    background: linear-gradient(180deg, rgba(255,255,255,0) 35%, rgba(140,212,224,1) 35%, rgba(140,212,224,1) 65%, rgba(255,255,255,0) 65%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
}
#audioPlayerContainer .vjs-mouse-display{
    background: none;
}
#player_buttons{
    display: flex;
    width: 100%;
    max-width: 250px;
    height: 80px;
    margin: 25px auto;    
    justify-content: space-evenly;
}
#player_buttons>div{
    width: 60px;
    height: 60px;
}
#player_buttons>div:nth-child(1){
    background: url("../assets/images/rew_dark.svg");
    background-size: 80%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
#player_buttons>div:nth-child(2){
    background: url("../assets/images/pause_dark.svg");
    background-size: 80%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
#player_buttons>div:nth-child(2).pause{
    background: url("../assets/images/play_dark.svg");
    background-size: 80%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
#player_buttons>div:nth-child(3){
    background: url("../assets/images/fwd_dark.svg");
    background-size: 80%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
#best_score{
    border-radius: 20px;
    border: 1px solid #d6c5ec;
    max-width: 150px;
    text-align: center;
    padding: 5px;
    color: #d6c5ec;
}
.light #best_score{
    border-radius: 20px;
    border: 1px solid #009fb9;
    max-width: 150px;
    text-align: center;
    padding: 5px;
    color: #009fb9;
}

#game_area{
    background: #996dcf;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    padding: 2px;
    display: none;
    transition: all 0.5s ease-out;
}
#csore_box{
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    padding: 16px 0px;
    box-sizing: border-box;
    font-size: 20px;
    display: none;
}

#game_area.level1{
    width: 220px;
    height: 220px;
}

#game_area.level2{
    width: 166px;
    height: 166px;
}

#game_area>div{
    width: 50px;
    height: 50px;
    margin: 2px;
    background: #fff;
    float: left;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#game_area>div:nth-child(2){
    animation-delay: 0.3s; 
}
#game_area>div:nth-child(3){
    animation-delay: 0.4s; 
}
#game_area>div:nth-child(4){
    animation-delay: 0.5s; 
}
#game_area>div:nth-child(5){
    animation-delay: 0.6s; 
}
#game_area>div:nth-child(6){
    animation-delay: .7s; 
}
#game_area>div:nth-child(7){
    animation-delay: .8s; 
}
#game_area>div:nth-child(8){
    animation-delay: .9s; 
}
#game_area>div:nth-child(9){
    animation-delay: 1s; 
}
#game_area>div:nth-child(10){
    animation-delay: 1.1s; 
}
#game_area>div:nth-child(11){
    animation-delay: 1.2s; 
}
#game_area>div:nth-child(12){
    animation-delay: 1.3s; 
}
#game_area>div:nth-child(13){
    animation-delay: 1.4s; 
}
#game_area>div:nth-child(14){
    animation-delay: 1.5s; 
}
#game_area>div:nth-child(15){
    animation-delay: 1.6s; 
}
#game_area>div:nth-child(16){
    animation-delay: 1.7s; 
}
#game_area>div:nth-child(17){
    animation-delay: 1.8s; 
}
#game_area>div:nth-child(18){
    animation-delay: 1.9s; 
}
#game_area>div:nth-child(19){
    animation-delay: 2s; 
}
#game_area>div:nth-child(20){
    animation-delay: 2.1s; 
}
#game_area>div:nth-child(21){
    animation-delay: 2.2s; 
}
#game_area>div:nth-child(22){
    animation-delay: 2.3s; 
}
#game_area>div:nth-child(23){
    animation-delay: 2.4s; 
}
#game_area>div:nth-child(24){
    animation-delay: 2.5s; 
}
#game_area>div:nth-child(25){
    animation-delay: 2.6s; 
}
#game_area>div:nth-child(26){
    animation-delay: 2.7s; 
}
#game_area>div:nth-child(27){
    animation-delay: 2.8s; 
}
#game_area>div:nth-child(28){
    animation-delay: 2.9s; 
}
#game_area>div:nth-child(29){
    animation-delay: 3s; 
}
#game_area>div:nth-child(30){
    animation-delay: 3.1s; 
}
#game_area>div.memory{
    animation-delay: 2s !important;    
    animation: memory 2s ease-in-out;
}
#game_area.sublevel1>div.memory,
#game_area.sublevel2>div.memory,
#game_area.sublevel11>div.memory,
#game_area.sublevel12>div.memory,
#game_area.sublevel21>div.memory,
#game_area.sublevel22>div.memory,
#game_area.sublevel31>div.memory,
#game_area.sublevel32>div.memory,
#game_area.sublevel41>div.memory,
#game_area.sublevel42>div.memory,
#game_area.sublevel51>div.memory,
#game_area.sublevel52>div.memory,
#game_area.sublevel61>div.memory,
#game_area.sublevel62>div.memory,
#game_area.sublevel71>div.memory,
#game_area.sublevel72>div.memory,
#game_area.sublevel81>div.memory,
#game_area.sublevel82>div.memory,
#game_area.sublevel91>div.memory,
#game_area.sublevel92>div.memory,
#game_area.sublevel101>div.memory,
#game_area.sublevel102>div.memory,
#game_area.sublevel111>div.memory,
#game_area.sublevel112>div.memory,
#game_area.sublevel121>div.memory,
#game_area.sublevel122>div.memory,
#game_area.sublevel131>div.memory,
#game_area.sublevel132>div.memory,
#game_area.sublevel141>div.memory,
#game_area.sublevel142>div.memory,
#game_area.sublevel151>div.memory,
#game_area.sublevel152>div.memory{
    animation-delay: 0s !important;    
    animation: memory 4s ease-in-out;
}
#game_area.sublevel3>div.memory,
#game_area.sublevel4>div.memory,
#game_area.sublevel13>div.memory,
#game_area.sublevel14>div.memory,
#game_area.sublevel23>div.memory,
#game_area.sublevel24>div.memory,
#game_area.sublevel33>div.memory,
#game_area.sublevel34>div.memory,
#game_area.sublevel43>div.memory,
#game_area.sublevel44>div.memory,
#game_area.sublevel53>div.memory,
#game_area.sublevel54>div.memory,
#game_area.sublevel63>div.memory,
#game_area.sublevel64>div.memory,
#game_area.sublevel73>div.memory,
#game_area.sublevel74>div.memory,
#game_area.sublevel83>div.memory,
#game_area.sublevel84>div.memory,
#game_area.sublevel93>div.memory,
#game_area.sublevel94>div.memory,
#game_area.sublevel103>div.memory,
#game_area.sublevel104>div.memory,
#game_area.sublevel113>div.memory,
#game_area.sublevel114>div.memory,
#game_area.sublevel123>div.memory,
#game_area.sublevel124>div.memory,
#game_area.sublevel133>div.memory,
#game_area.sublevel134>div.memory,
#game_area.sublevel143>div.memory,
#game_area.sublevel144>div.memory,
#game_area.sublevel153>div.memory,
#game_area.sublevel154>div.memory{
    animation-delay: 1s !important;    
    animation: memory 3s ease-in-out;
}
#game_area.sublevel5>div.memory,
#game_area.sublevel6>div.memory,
#game_area.sublevel15>div.memory,
#game_area.sublevel16>div.memory,
#game_area.sublevel25>div.memory,
#game_area.sublevel26>div.memory,
#game_area.sublevel35>div.memory,
#game_area.sublevel36>div.memory,
#game_area.sublevel45>div.memory,
#game_area.sublevel46>div.memory,
#game_area.sublevel55>div.memory,
#game_area.sublevel56>div.memory,
#game_area.sublevel65>div.memory,
#game_area.sublevel66>div.memory,
#game_area.sublevel75>div.memory,
#game_area.sublevel76>div.memory,
#game_area.sublevel85>div.memory,
#game_area.sublevel86>div.memory,
#game_area.sublevel95>div.memory,
#game_area.sublevel96>div.memory,
#game_area.sublevel105>div.memory,
#game_area.sublevel106>div.memory,
#game_area.sublevel115>div.memory,
#game_area.sublevel116>div.memory,
#game_area.sublevel125>div.memory,
#game_area.sublevel126>div.memory,
#game_area.sublevel135>div.memory,
#game_area.sublevel136>div.memory,
#game_area.sublevel145>div.memory,
#game_area.sublevel146>div.memory,
#game_area.sublevel155>div.memory,
#game_area.sublevel156>div.memory{
    animation-delay: 2s !important;    
    animation: memory 2s ease-in-out;
}
#game_area.sublevel7>div.memory,
#game_area.sublevel8>div.memory,
#game_area.sublevel17>div.memory,
#game_area.sublevel18>div.memory,
#game_area.sublevel27>div.memory,
#game_area.sublevel28>div.memory,
#game_area.sublevel37>div.memory,
#game_area.sublevel38>div.memory,
#game_area.sublevel47>div.memory,
#game_area.sublevel48>div.memory,
#game_area.sublevel57>div.memory,
#game_area.sublevel58>div.memory,
#game_area.sublevel67>div.memory,
#game_area.sublevel68>div.memory,
#game_area.sublevel77>div.memory,
#game_area.sublevel78>div.memory,
#game_area.sublevel87>div.memory,
#game_area.sublevel88>div.memory,
#game_area.sublevel97>div.memory,
#game_area.sublevel98>div.memory,
#game_area.sublevel107>div.memory,
#game_area.sublevel108>div.memory,
#game_area.sublevel117>div.memory,
#game_area.sublevel118>div.memory,
#game_area.sublevel127>div.memory,
#game_area.sublevel128>div.memory,
#game_area.sublevel137>div.memory,
#game_area.sublevel138>div.memory,
#game_area.sublevel147>div.memory,
#game_area.sublevel148>div.memory,
#game_area.sublevel157>div.memory,
#game_area.sublevel158>div.memory{
    animation-delay: 1.5s !important;    
    animation: memory 1.5s ease-in-out;
}
#game_area.sublevel9>div.memory,
#game_area.sublevel10>div.memory,
#game_area.sublevel19>div.memory,
#game_area.sublevel10>div.memory,
#game_area.sublevel29>div.memory,
#game_area.sublevel20>div.memory,
#game_area.sublevel39>div.memory,
#game_area.sublevel30>div.memory,
#game_area.sublevel49>div.memory,
#game_area.sublevel40>div.memory,
#game_area.sublevel59>div.memory,
#game_area.sublevel50>div.memory,
#game_area.sublevel69>div.memory,
#game_area.sublevel60>div.memory,
#game_area.sublevel79>div.memory,
#game_area.sublevel70>div.memory,
#game_area.sublevel89>div.memory,
#game_area.sublevel80>div.memory,
#game_area.sublevel99>div.memory,
#game_area.sublevel90>div.memory,
#game_area.sublevel109>div.memory,
#game_area.sublevel100>div.memory,
#game_area.sublevel119>div.memory,
#game_area.sublevel110>div.memory,
#game_area.sublevel129>div.memory,
#game_area.sublevel120>div.memory,
#game_area.sublevel139>div.memory,
#game_area.sublevel130>div.memory,
#game_area.sublevel149>div.memory,
#game_area.sublevel140>div.memory,
#game_area.sublevel159>div.memory,
#game_area.sublevel150>div.memory,
#game_area.sublevel160>div.memory{
    animation-delay: 2s !important;    
    animation: memory 1s ease-in-out;
}
#game_area>div.correct{
    background: #009fba;
}

#game_area>div.wrong{
    background: #FFA2A3;
}
#instructions{
    margin-top: 54px;
    width:100%;
     background: url("../assets/images/instruction.gif");
    background-size: 220px 220px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    height: 220px;
}
#btnPlay{
    border-radius: 9px;
    padding: 10px 10px;
    background: #009fba;
    color: #fff;
    max-width: 150px;
    font-size: 20px;
    text-align: center;
    margin: 20px auto;
}
#modal_popup{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    display: flex;    
    align-items: center;
    justify-content: center;
    animation-duration: 2s;
    display: none;
}
#modal_popup>div{
    width:200px;
    height:auto;
    padding: 15px;
    border-radius: 15px;
    border: 2px solid #996dcf;
    background: #fff;
    color: #8e8b8b;
    text-align: center;
}
.acc_no{
    position: absolute;
    bottom: 2px;
    right: 5px;
    font-size: 9px;
    color: #666;
}
.video_iframe{
    width: 100%;
    max-width: 800px;
    height: 56.6vw;
    margin: 0 auto;
    max-height: 450px;
    border: none;
}
#audioPlayerPlugin{
    
}
@media screen and (max-height: 590px) {
  h1 {
    color: #fff;
    transition: all 2s;
    margin-bottom: 5px;
}
.main_logo {    
    margin: 20px auto !important;
    height: 110px;
}
    
#csore_box{    
    padding: 12px 0px;
}
.page-conteiner > .flex-items-menu{
    height: 70px;
}
    .scroll_list{
        max-height: calc(100% - 202px);
    }
}

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

}
.audio .video-js .vjs-control-bar{
    height: 0 !important;
}
.audio .video-js .vjs-play-control{
    display:none;
}