@charset "UTF-8";
/* CSS Document */

* { box-sizing:border-box; -webkit-overflow-scrolling: auto; touch-action: manipulation;  }
* div, * p { -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
   }

html { font-size: .11vh;}
   body { background-color: #aaa; width: 100%; margin: 0; font-family: arial;   }


#wrapp { margin: 0 auto; width: calc((100vh - 40rem) /1.92); position: relative; height: calc(100vh - 40rem); margin-top: 20rem; padding-top: 31rem; border-radius: 10rem; background-color: #efefef; overflow: hidden; }

#pl_wrapp_wrapp { width: 100%;  height: calc(100% - 118rem); position: relative; margin-top: 32rem; z-index: 1; font-size: 25rem;  }
    #pl_wrapp { position: absolute; width: 100%; height: 100%; top: 0;; left:  0; display: flex; align-items: center; justify-content: center; }

#pl_wrapp > div { width: 40rem; margin: 0 8.6rem;  position: relative; height: 100%;  z-index: 1;  border-radius: 3rem; transform: translateZ(0);  }
#pl_wrapp > div:after { position: absolute; content: ""; left: 1rem; bottom: 4rem; z-index: -1; width: calc(100% - 2rem); height: 1rem; border-bottom: dashed 1rem #999;}
.n_ne { width: 100%;  margin: 0; margin-bottom: 3px; border-radius: 3rem; background-color: #bbb; cursor: pointer;}


.stop .n_ne {background-color: #bbb !important; opacity: 1 !important; transition: opacity 0s !important;}
.n_mute, .stop .n_mute { background-color: #E0E0E0 !important; }
.pl_active.n_mute, .main_mute .pl_active, #pl_wrapp .main_mute p { background-color: #E0E0E0 !important; opacity: 1 !important; }

#play_stop { top: 0; bottom: 0; margin: auto; right: 0; cursor: pointer; background-color: #7A0C46; background-image: url(img/dreieck_rechts.png); background-repeat: no-repeat; background-position: center; background-size: 40%; height: 50rem; width: 50rem; border-radius: 5rem ; position: absolute; }
.play #play_stop { background-image: none; background-color: #B4006F;}
.play #play_stop:after { content: ""; background-color: white;  position: absolute; top: 0; left:  0; right: 0; bottom: 0; margin: auto; height: 25%; width: 25%;}
#bpm_show { top: 0; bottom: 0; margin: auto; left: 0; background-color: #7A0C46; height: 50rem; line-height: 1; padding-top: 8rem;  text-align: center; color: white; width: 50rem; border-radius: 5rem; position: absolute; cursor: pointer; font-size: 10rem;  }
#menu { top: 0; left: 0; bottom: 0; right: 0; margin: auto; background-color: #7A0C46; height: 40rem; width: 40rem; border-radius: 3rem; position: absolute; cursor: pointer; background-image: url(img/hamburger.png); background-position: center; background-repeat: no-repeat; background-size: 36%; }
#bpm_show p { margin: 0; font-weight: bold; font-size: 21rem; border-radius: 3rem; margin-bottom: 3rem; }



#position { position: absolute; width: 100%; height: 2rem; border-radius: 100rem; top: 0; left: 0; background-color: #bbb; z-index: 4; opacity: 0; }
#position:before, #position:after { position: absolute; display: none; width: 10rem; height: 10rem; top: 0; left: -5rem; bottom: 0; margin: auto; background-color: #aaa; transform: rotate(45deg);} 
#position:before { left: auto; right: -5rem;}
.play #position { opacity: 1;}
.pl_active { background-color: #333 !important; opacity: 0.3; transition: opacity 0.7s;}

#nav_oben_wrapp { display: flex; height: 14rem; background-color: #B4006F;  border-radius: 3rem; position: relative; width: calc(100% - 30rem); margin-left: 15rem; z-index: 4;}


#nav_unten_wrapp { display: flex; align-items: center; justify-content: center; margin-top: 18rem; position: relative; z-index: 2; font-size: 13rem;   }
#nav_unten_wrapp > div { width: 40rem; margin: 0 8.6rem; position: relative; }
.ch_set_open { cursor: pointer; background-color: #7A0C46; height: 40rem; width: 100%; border-radius: 3rem; color: white; line-height: 40rem; text-align: center; position: relative; z-index: 2;  display: flex; align-items: center;
  justify-content: center;}
.ch_set_open p { height: 40rem; margin: 0;  text-align: center;}
.ch_set_open p:nth-child(1) { line-height: 30rem; text-align: right; padding-right: 0.2rem;} 
.ch_set_open p:nth-child(3) { line-height: 49rem; text-align: left; padding-left: 0.2rem;}
.ch_set_wrapp { width: 50rem; background-color: #7A0C46; position: absolute; left: 50%; transform: translateX(-50%); bottom: 60rem; border-radius: 3rem; padding-bottom: 7rem; display: none; z-index: 1;}
.ch_set_wrapp:after { position: absolute; height: 30rem; left: 0; right: 0; bottom: -30rem; background-color: #7A0C46; width: 14rem; content: ""; margin: auto;}
.ch_set_wrapp > div, .s_l_s_s_w > p, .bpm_bis_aa_w > div { border-radius: 3rem; width: 36rem; height: 36rem; line-height: 36rem; margin: 7rem 0 0 7rem; background-color: rgba(255,255,255,0.2); text-align: center; color: white; position: relative; background-position: center; background-repeat: no-repeat; cursor: pointer; background-size: 100%;   }
.ch_del:after { content: ""; width: 28rem; height: 28rem; background-color: rgba(0,0,0,0.12); border-radius: 5rem; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 0; position: absolute; }
.ch_del p { height: 40rem; margin: 0; position: relative; line-height: 37rem; width: 100%; z-index: 1;  font-weight: bold; }

.active_chl .ch_set_wrapp { display: block !important;}
.active_chl .ch_set_open { font-size: 0; background-color: #7A0C46; background-image: url(img/dreieck_unten_weiss.png); background-size: 35% 25%; background-position: center; background-repeat: no-repeat;}

#nav_unten_wrapp > div .ch_set_buttons, #bpm_wrapp .ch_set_buttons { height: 50rem; width: 93rem; position: absolute; left: 44rem; top: 44rem; background-color: #7A0C46; margin: 0; display: none;}

#nav_unten_wrapp > div .ch_set_buttons p, #bpm_wrapp .ch_set_buttons p { margin: 7rem 0 0 7rem; border-radius: 3rem; height: 36rem; width: 36rem; background-color: rgba(255,255,255,0.2); cursor: pointer; background-image: url(img/dreieck_links.png); background-position: center; background-repeat: no-repeat; background-size: 40%; }
.ch_plus, .dyn_plus { background-image: url(img/dreieck_rechts.png) !important;}

.set_vl  .ch_set_buttons { display: flex !important; top: 103rem !important;}
.set_pi  .ch_set_buttons { display: flex !important; top: 146rem !important;}
.set_min .ch_set_buttons { display: flex !important; top: 38rem !important;}


.set_in .set_sound_wrapp { display: block !important; bottom: 14rem !important;} 
.set_in .set_sound_wrapp:before { top: 152rem;}

#pl_wrapp .main_mute p, .stop #pl_wrapp .main_mute p { opacity: 1; background-color: rgba(200,200,200,0.3);}
.ch_mute.main_mute { background-color: #E59C00;}

#nav_unten_wrapp > div:nth-child(n+3) .ch_set_buttons, .b_ch_laenge > div:nth-child(2) .ch_set_buttons { left: -88rem !important;  ;}
.more_than_5 #nav_unten_wrapp > div:nth-child(3) .ch_set_buttons   { left: auto !important; right: -88rem !important; }

#plus_ch_right, #plus_ch_left { width: 38rem; height: 32rem; line-height: 32rem; border-radius: 5rem 0 0 5rem; background-color: #aaa; color: white; text-align: center; position: absolute; margin: auto; right: 0; bottom: 0; top: 0; cursor: pointer; z-index: 23; font-weight: bold; }
#plus_ch_left { right: auto; left: 0; border-radius: 0 5rem 5rem 0;} 
.channel_limit #plus_ch_right, .channel_limit #plus_ch_left { display: none;}

#bpm_wrapp { position: absolute; top: 77rem; left: 10rem; z-index: 30;  background-color: #B4006F; border-radius: 3rem 8rem 25rem 8rem; padding-right: 7rem; width: 179rem; box-shadow: 4rem 6rem 5rem 0rem rgba(0,0,0,0.45); font-size: 12rem; display: none; }
.bpm_open #bpm_wrapp { display: block;}

.bpm_bis_aa_w > div { float: left; background-size: 75%; background-color: rgba(115,115,115,0.55);}
.bpm_bis_aa_w:after { display: table; clear: both; content: "";}

#bpm_auf_ab_wieviel, #dyn_end, #oft { background-color: rgba(255,255,255,0.9); color: black; }
#bpm_auf_ab_wieviel { font-size: 12rem;}
.dyn_0 #bpm_auf_ab_wieviel, .dyn_0 #dyn_end, .dyn_0 #oft { opacity: 0.5; background-color: rgba(255,255,255,0.4); color: #efefef; }

#dyn_types { background-color: rgba(255,255,255,0.9);}
.dyn_0 #dyn_types { background-image: url(img/bpm_linear.png); }
.dyn_1 #dyn_types { background-image: url(img/bpm_auf_ab.png);}
.dyn_2 #dyn_types { background-image: url(img/bpm_ab_auf.png);}

.dyn_0.oft_0 #oft {background-image: url(img/every_length_active.png);}
.dyn_1.oft_0 #oft, .dyn_2.oft_0 #oft {background-image: url(img/every_length.png);}
.dyn_0.oft_1 #oft {background-image: url(img/every_beat_active.png);}
.dyn_1.oft_1 #oft, .dyn_2.oft_1 #oft {background-image: url(img/every_beat.png);}

#bpm_bg_show > span { font-weight: bold;}
#bpm_minus, #bpm_plus { background-image: url(img/dreieck_runter_weiss.png); background-size: 55%;  }
#bpm_plus { background-image: url(img/dreieck_hoch_weiss.png); }

#bpm_click { background-image: url(img/click.png); background-position: center; background-size: 50%; background-repeat: no-repeat; }
#dyn_end  {padding: 7rem 0; line-height: 1.2; font-size: 12rem;}
#dyn_end p { margin: 0; font-size: 8rem;  }


#bpm_tap { margin: 7rem 0 7rem 7rem; cursor: pointer; text-transform: uppercase; color: rgba(255,255,255,0.7); height: 79rem; line-height: 79rem; border-radius: 3rem 3rem 17rem 3rem; width: calc(100% - 7rem); background-color: #7A0C46; font-size: 25rem; font-weight: bold; text-align: center; clear: both; letter-spacing: 2rem;}
.bpm_open.tap_press #bpm_tap { color: #FFFFCB; }
.bpm_open #bpm_show { background-color: #B4006F}

#set_grid_wrapp, #set_dyn_speed_wrapp { bottom: auto; top: 2rem; right: -130rem; width: 110rem; left: auto; background-color: #B4006F;}
#set_grid_wrapp:before, #set_dyn_speed_wrapp:before { right: auto; left: -20rem; top: 59rem; background-color: #B4006F;}
#set_dyn_speed_wrapp { top: 0;}
.bpm_grid_active #set_grid_wrapp { display: block;}
.bpm_auf_ab_active #set_dyn_speed_wrapp { display: block;}

.dyn_end_active #bpm_wrapp .ch_set_buttons { display: flex; background-color:  #B4006F; right: -90rem; left: auto; top: 44rem; border-radius: 0 3rem 3rem 0;}


.s_l_s_s_w { position: absolute; width: 145rem; padding: 0 5rem 5rem 0; background-color: #7A0C46; border-radius: 3rem; bottom: 69rem; left: -155rem; display: none;}
.set_le .set_length_wrapp { display: block;}
.s_l_s_s_w:after { clear: both; display: table; content: "";}
 .s_l_s_s_w > p { width: 30rem; height: 30rem; line-height: 30rem; margin: 5rem 0 0 5rem;  background-color: rgba(255,255,255,0.2); float: left;}
.active_l, .set_le .set_length, .set_in .set_inst, .active_s, .set_min .set_minus { background-color: #779AA7!important; border: none !important;  }
.set_le .set_minus { border: none !important;}
.s_l_s_s_w:before { content: ""; position: absolute; height: 19rem; width: 20rem; right: -20rem; top: 142rem; background-color: #7A0C46;}


.s_l_s_s_w { left: auto; right: -155rem;}
.s_l_s_s_w:before { left: -20rem;}
#nav_unten_wrapp > div:nth-child(n+3) .s_l_s_s_w, .b_ch_laenge > div:nth-child(2) .s_l_s_s_w { right: auto; left: -155rem;}
#nav_unten_wrapp > div:nth-child(n+3) .s_l_s_s_w:before, .b_ch_laenge > div:nth-child(2) .s_l_s_s_w:before { right: -20rem; left: auto;}


.more_than_5 #nav_unten_wrapp > div:nth-child(3) .s_l_s_s_w { left: auto; right: -155rem;}  
.more_than_5 #nav_unten_wrapp > div:nth-child(3) .s_l_s_s_w:before { left: -20rem; right: auto;}   

.d_ch_laenge  > div:nth-child(2) .s_l_s_s_w { left: auto; right: -155rem;}
.d_ch_laenge  > div:nth-child(2) .s_l_s_s_w:before { right: auto; left: -20rem;}
.e_ch_laenge  > div:nth-child(2) .s_l_s_s_w { left: auto; right: -155rem;}
.e_ch_laenge  > div:nth-child(2) .s_l_s_s_w:before { right: auto; left: -20rem;}

.f_ch_laenge  > div:nth-child(2) .s_l_s_s_w { left: auto; right: -155rem;}
.f_ch_laenge  > div:nth-child(2) .s_l_s_s_w:before { right: auto; left: -20rem;}
.f_ch_laenge  > div:nth-child(2) .s_l_s_s_w { left: auto; right: -155rem;}
.f_ch_laenge  > div:nth-child(2) .s_l_s_s_w:before { right: auto; left: -20rem;}



.g_ch_laenge  > div:nth-child(2) .s_l_s_s_w { left: auto; right: -155rem;}
.g_ch_laenge  > div:nth-child(2) .s_l_s_s_w:before { right: auto; left: -20rem;}
.g_ch_laenge  > div:nth-child(2) .s_l_s_s_w { left: auto; right: -155rem;}
.g_ch_laenge  > div:nth-child(2) .s_l_s_s_w:before { right: auto; left: -20rem;}

.g_ch_laenge  > div:nth-child(3) .s_l_s_s_w { left: auto; right: -155rem;}
.g_ch_laenge  > div:nth-child(3) .s_l_s_s_w:before { right: auto; left: -20rem;}
.g_ch_laenge  > div:nth-child(3) .s_l_s_s_w { left: auto; right: -155rem;}
.g_ch_laenge  > div:nth-child(3) .s_l_s_s_w:before { right: auto; left: -20rem;}

.active_chl .set_sound_wrapp p { background-color:  rgba(255,255,255,0.15);}


.set_sound_wrapp p:nth-child(1), .set_sound_wrapp p:nth-child(2), .sg_a { background-image: url(img/b_drum.png);}
.set_sound_wrapp p:nth-child(3), .set_sound_wrapp p:nth-child(4), .sg_b { background-image: url(img/triangel.png);}

.set_sound_wrapp p:nth-child(5), .set_sound_wrapp p:nth-child(6), .set_sound_wrapp p:nth-child(7), .set_sound_wrapp p:nth-child(8), .sg_c { background-image: url(img/snare.png);}

.set_sound_wrapp p:nth-child(9), .set_sound_wrapp p:nth-child(10), .sg_d { background-image: url(img/hihat.png);}

.set_sound_wrapp p:nth-child(11), .set_sound_wrapp p:nth-child(12), .set_sound_wrapp p:nth-child(13), .sg_e { background-image: url(img/becken.png);}
.set_sound_wrapp p:nth-child(14), .set_sound_wrapp p:nth-child(15), .sg_f { background-image: url(img/toms.png);}
.set_sound_wrapp p:nth-child(16),  .sg_g { background-image: url(img/tambu.png);}

.set_sound_wrapp p:nth-child(17), .sg_h { background-image: url(img/casta.png);}
.set_sound_wrapp p:nth-child(18), .sg_i { background-image: url(img/bongo.png);}

.set_sound_wrapp p:nth-child(19), .sg_j { background-image: url(img/klangholz.png);}
.set_sound_wrapp p:nth-child(20), .sg_k { background-image: url(img/handcl.png);}

.set_sound_wrapp p:nth-child(21), .sg_l { background-image: url(img/ei.png);}
.set_sound_wrapp p:nth-child(22), .sg_m { background-image: url(img/trimbale.png);}
.set_sound_wrapp p:nth-child(23), .sg_n { background-image: url(img/kongas.png);}
.set_sound_wrapp p:nth-child(24), .sg_o { background-image: url(img/cowbell.png);}


.ch_volume { position: relative; padding: 15rem 5rem 0 5rem;}
.ch_volume p { background-color: white; margin: 0; height: 6rem; position: relative; z-index: 1; }
.ch_volume:after, .ch_volume:before { content: ""; width: calc(100% - 10rem); height: 6rem; background-color: rgba(255,255,255,0.34); display: block; position: absolute;  top: 15rem; left: 5rem; z-index: 0; }
.ch_volume:before { width: 1rem; background-color: white; z-index: -1;}


.ch_pitch { background-image: url(img/pitch.png); background-size: 70% !important;   }
.set_inst {  background-size: 100%;    }
.set_minus { border-radius: 3rem 3rem 0 0 !important; margin-bottom: 1rem !important;  background-color: rgba(255,255,255,0.16) !important; height: 26rem !important; line-height: 26rem !important;  }

.set_length { border-radius: 0 0 3rem 3rem  !important; margin-top: 0 !important; background-color: rgba(255,255,255,0.16) !important; height: 26rem !important; line-height: 26rem !important;    }
.ch_mute  { font-weight: bold; font-size: 18rem;}

#channel_position_wrapp { position: absolute; height: 2rem; width: 100%; top: 0; left: 0; z-index: 3; display: flex; opacity: 0; align-items: center;justify-content: center; z-index: 5; }
#channel_position_wrapp p { width: 50rem; margin: 0 3.3rem; background-color: white; height: 2rem; border-radius: 100rem; position: relative;}
.play #channel_position_wrapp { opacity: 1;}
#channel_position_wrapp p::before, #channel_position_wrapp p:after { content: ""; position: absolute; margin: auto; top: 0; bottom: 0; background-color: #7A0C46;  height: 5rem; left: 0; width: 5rem;  }
#channel_position_wrapp p::before { left: auto; right: 0; }
.pos_hidden { visibility: hidden;}

#better_portrait { position: fixed; height: 500rem; width: 500rem; z-index: 20; margin: auto; top: 0; left: 0; right: 0; bottom: 0; background-size: 100%; background-image: url(img/better_portrait.png); background-position: center; animation-name: portrait; animation-duration: 4s;  animation-iteration-count: infinite; transform: rotate(0deg); display: none; }

.oft_pos #position, .oft_pos #channel_position_wrapp { display: none;}

@keyframes portrait {
  0%   { transform: rotate(0deg);}
  30% {transform: rotate(0deg)}
  40% {transform: rotate(90deg)}
  100% {transform: rotate(90deg); transition: none;}
}

.aenderung  p, .aenderung  .n_mute, .aenderung .pl_active  { animation-duration: 0.07s;  animation-iteration-count: infinite; animation-name: blink; background-color: green !important;  width: 100%; height: 100%; top: 0; left: 0; opacity: 0.4;   }


@keyframes blink {
  0%   { opacity: 0.1;  }
 
  100% { opacity: 0.2; }
}


.bpm_auf_ab_active #bpm_auf_ab_wieviel, .bpm_grid_active #bpm_grid, .bpm_click_1 #bpm_click, .dyn_end_active #dyn_end { background-color: #779AA7; color: white;}




#menu_wrapp { width: 84%; position: absolute; top: 100rem; background-color: #B4006F; padding: 10rem 10rem 0 10rem; border-radius: 3rem; left: 0; right: 0; margin: auto; z-index: 333; display: none; font-size: 14rem;}
#menu_wrapp:before { width: 50rem; height: 50rem; transform: rotate(45deg); top: -17rem; left: 0; right: 0; margin: auto; background-color: #B4006F; z-index: -1; content: ""; position: absolute;}
#menu_wrapp > div > div { cursor: pointer; text-align: center; height: 36rem; line-height: 36rem; color: #efefef; margin-bottom: 10rem; display: flex; border-radius: 2rem; overflow: hidden; background-color: rgba(0,0,0,.2); width: calc(25% - 7.5rem); margin-right: 10rem; float: left;  }
#menu_wrapp > div > div:nth-of-type(4n) { margin-right: 0;}
#menu_wrapp > div:after { content: ""; display: table; clear: both;}
#menu_wrapp > div > div > p { text-align: center; text-transform: uppercase; margin: 0; width: 25%; ;}
#menu_wrapp > div > div > p:first-child { width: 75%; text-align: left; padding-left: 12rem;   }
#slot_wrapp div > p:first-child { font-weight: bold;}
#menu_wrapp > div > div > p:last-child { background-color: rgba(0,0,0,.08); font-size: 9rem; }
#im_ex_wrapp > div  { background-color: transparent !important; width: calc(50% - 5rem) !important; margin-right: 10rem !important;  }
#im_ex_wrapp p { padding: 0 !important; font-size: 14rem !important; width: 100% !important; background-color: rgba(0,0,0,.9)}
#im_ex_wrapp > div:last-child { margin-right: 0 !important; color: #ddd !important; background-color: rgba(255,255,255,.2) !important}
.active_slot { background-color: #779AA7 !important; color: #ddd !important;  }

.menu_open #menu_wrapp { display: block;}
.menu_open #menu { background-color: #B4006F;}

#im_ex_wrapp p { text-align: center !important;}


.multi_on_off { background-color: rgba(255,255,255,0.4) !important;}
.active_multi.multi_on_off { background-color: #E59C00 !important; color: white !important; }

.multi_1 p { position: relative;}
.multi_1 p:before { position: absolute; height: .1rem; width: calc(100% - 20rem); left: 10rem; top: 0; bottom: 0; margin: auto; border-bottom: solid .1rem #eee; content: "";}

#hider_1, #hider_2 { position: absolute; z-index: 1;  height: 380rem; bottom: 0; left: 40rem; width: calc(100% - 80rem); display: none;}
.bpm_open #hider_1 { display: block; bottom: auto; top: 0;}
.ch_open #hider_2 { display: block;  }



#polymero_wrapp { position: relative;  width: 260rem; height: 370rem; z-index: 5555; ; border-radius: 5rem;  margin: 8vh auto 16vh auto;}

#poly_kopf, #poly_koerper { width: 140rem; height: 140rem; background: #B4006F; border-radius: 40rem; border: solid 10rem white; left: 0; right: 0; margin: auto; top: 13%; z-index: 2; position: absolute;  }
#poly_kopf { transform: rotate(-23deg); animation-name: poly_kopf; animation-duration: 2.5s; animation-iteration-count: infinite; animation-timing-function: ease;}

@keyframes poly_kopf {
  0%   { transform: rotate(-23deg); }
 
  50% { transform: rotate(23deg); }

  100% { transform: rotate(-23deg); }
}



#poly_koerper { top: auto; bottom: 19%; background: black; z-index: 1;}

#poly_name { font-size: 20rem; letter-spacing: 0.5rem; position: absolute; width: 100%; height: 40rem; line-height: 40rem; text-align: center; bottom: 8.5%;}
#poly_name p { font-size: 12rem; margin: 0; font-style: italic; line-height: 0.92;}
#poly_x { cursor: pointer; height: 36rem; line-height: 36rem; width: 36rem; border-radius: 3rem; background: #B4006F; color: white; text-align: center; top: -18rem; right: -18rem; position: absolute; display: none;}

#game_wrapp_wrapp { position: absolute; z-index: 3; height: 100%; width: 100%; top: 0; left: 0; background: white; display: none; }
.game_on #game_wrapp_wrapp { display: block;}
.play.game_on #nav_oben_wrapp { opacity: 0.2; filter: grayscale(70%);}
#game_wrapp_wrapp:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 170rem; z-index: 40; background: rgba(252,252,252,0.95)}
#game_wrapp { position: absolute; z-index: 1; height: 100%; width: 100%; top: -170rem; left: 0; background: white; transform: rotate(180deg) scaleX(-1);  }


#game_kloetzchen_wrapp { position: absolute; z-index: 444; height: 100%; width: 100%; top: 0; left: 0;  display: block; transform: translateZ(0); }

#game_kloetzchen_wrapp > div { position: absolute; width: 100%; height: 100%; top: 0;  }
#game_kloetzchen_wrapp > div:last-child { top: 100% }
#game_kloetzchen_wrapp > div > div { height: 100%; position: absolute; width: 40rem; right: 79rem; top: 0;}
#game_kloetzchen_wrapp > div > div:first-child { right: auto; left: 79rem;}

.g_ne { background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 95%); margin: 0 0 10rem 0; border-radius: 3rem; }
#game_kloetzchen_wrapp > div > div:first-child .g_ne { background: linear-gradient(180deg, rgba(180,0,111,1) 0%, rgba(180,0,111,0.2) 95%);}
.g_mute, #game_kloetzchen_wrapp > div > div:first-child .g_mute { background: rgb(248,248,248);}

#push_left, #push_right { width: calc(50% - 40rem); position: absolute; bottom: 52rem; left: 26rem; height: 85rem; line-height: 85rem; color: white; text-align: center; border-radius: 5rem; background: #B4006F; cursor: pointer; z-index: 66; box-shadow: 0rem -1rem 5rem 0rem rgba(0,0,0,0.61);}
#push_right { background: black; left: auto; right: 26rem;  }
#push_left:before, #push_right:before { content: ""; position: absolute; width: 100%; height: 6rem; background-color: black; top: -33rem; left: 0; border-radius: 1rem; transition: background-color 0.4s !important;}
#push_left:before { background-color:  #B4006F;}

.g_c_0 #push_left:before, .g_c_1 #push_right:before { background-color: greenyellow !important; transition: background-color 0s !important;}

#push_left:active, #push_right:active { opacity: 0.7; }

#score_links, #score_rechts { height: 36rem; width: 36rem; left: 0; right: 0; margin: auto;  bottom: 240rem; background: #B4006F; position: absolute; z-index: 455; border-radius: 3rem; opacity: 0.8;}
#score_rechts { background: black; bottom: 290rem;}
#score_links p, #score_rechts p { position: absolute; width: 26rem; height: 26rem; background-image: url(img/daumen.png); background-size: 80%; background-position: center; background-repeat: no-repeat; left: 0; right: 0; bottom: 0; top: 0; margin: auto; background-color: rgba(255,255,255,0.2); border-radius: 300rem;}


#info { position: fixed; z-index: 333333; bottom: 0; right: 0; font-size: 12rem;}

#pl_wrapp > div, #nav_unten_wrapp > div { width: 40rem; margin: 0 11.5rem;}
  #channel_position_wrapp p { width: 40rem; margin: 0 11.5rem;}

  .more_than_5 #pl_wrapp > div, .more_than_5 #nav_unten_wrapp > div { width: 38rem; margin: 0 8rem;}
  .more_than_5 #channel_position_wrapp p { width: 38rem; margin: 0 8rem;}
  
  .channel_limit #pl_wrapp > div,  .channel_limit #nav_unten_wrapp > div { width: 37rem; margin: 0 5.8rem}
  .channel_limit #channel_position_wrapp p { width: 37rem;  margin: 0 6.5rem;}
  #channel_position_wrapp p::after { left: -5rem; right: auto;}
  #channel_position_wrapp p::before { left: auto; right: -5rem;}

@media screen and (min-width: 300px) and (max-width: 600px) { 
  html { font-size: .25vw;}
#nav_unten_wrapp, #bpm_wrapp { font-size: 13.5rem;}
.ch_mute { font-size: 21rem;}
    body { background-color: white }
  #wrapp {  width: 100%; height: calc(100vh - 5rem); margin-top: 0; margin-bottom: 5rem; background-color: transparent; }
  #plus_ch_right, #plus_ch_left, #position:before, #position:after { background-color: black;}
  #nav_oben_wrapp { width: calc(100% - 20rem); margin: 0 auto; left: 0; right: 0;}
  


}


@media (prefers-color-scheme: dark) {
.n_ne { background-color: #375354;}
.stop .n_ne { background-color: #375354 !important;}
body { background-color: #ababab;}
#poly_kopf, #poly_koerper { border:solid 10rem #ababab;}
.pl_active { background-color: #0D7109 !important;  opacity: 0.7 !important;}
.n_mute, .stop .n_mute, .pl_active .n_mute {  background-color: #898989 !important; opacity: 1 !important;}
#position { background-color: #898989;}
#channel_position_wrapp p { background-color: #bcbcbc;}
#channel_position_wrapp p::before, #channel_position_wrapp p:after { background-color: #DC71A7;}
.pl_active.n_mute { background-color: #898989 !important; opacity: 1 !important}
.main_mute .pl_active, #pl_wrapp .main_mute p { background-color: #999 !important; opacity: 0.4 !important}
.dyn_end_active #bpm_wrapp .ch_set_buttons, #bpm_wrapp .s_l_s_s_w:before, #bpm_wrapp .s_l_s_s_w { background-color: #008687 !important;}
#nav_oben_wrapp, #bpm_wrapp, .bpm_open #bpm_show, .menu_open #menu, .play #play_stop, #menu_wrapp:before, #menu_wrapp { background-color: #008687;}
#play_stop, #menu, #bpm_show, #bpm_tap, .ch_set_open, .ch_set_wrapp, .ch_set_wrapp:after, .active_chl .ch_set_open, #nav_unten_wrapp > div .ch_set_buttons, .bpm_bis_aa_w > div, .bpm_bis_aa_w > div, .s_l_s_s_w:before, .s_l_s_s_w { background-color: #004F50;}

.bpm_auf_ab_active #bpm_auf_ab_wieviel, .bpm_grid_active #bpm_grid, .bpm_click_1 #bpm_click, .dyn_end_active #dyn_end, .active_l, .set_le .set_length, .set_in .set_inst, .active_s, .set_min .set_minus { background-color: #DC71A7 !important;}

#plus_ch_right, #plus_ch_left, #position:before, #position:after { background-color: #2C3E3E;}

.aenderung  p, .aenderung  .n_mute, .aenderung .pl_active { animation-name: blink_black; opacity: 1; animation-duration: 0.15s; }

#pl_wrapp > div:after {border-bottom: dashed 1rem #efefef;}


.g_mute, #game_kloetzchen_wrapp > div > div:first-child .g_mute { background: #aaa;}
#game_wrapp_wrapp:before { background: rgba(180,180,180,0.95) }

@keyframes blink_black {
  0%   { opacity: 0.3; }
 
  100% { opacity: 0.8; }
}


 }

 @media screen and (max-height: 450px)   { 
  body {   background-color: white}
  #better_portrait { display: block;}
  #wrapp {  display: none;}
  #polymero_wrapp { display: none;}
  @media (prefers-color-scheme: dark) { body {   background-color: white;} }
  
  
  }



  @media screen and (min-width: 960px) and (min-height: 600px) { 
    #poly_kopf, #poly_koerper { border: solid 10rem #aaa;}
  #wrapp {  margin-bottom: 20rem;  }
  .channel_limit #pl_wrapp > div,  .channel_limit #nav_unten_wrapp > div { width: 37rem; margin: 0 8.9rem;}
  .channel_limit #channel_position_wrapp p { width: 37rem;  margin: 0 8.9rem;}

}







#info {
  position: fixed;
  width: 100%;
  text-align: center;
  background: white;
  color: green;
  text-align: center;
  padding: 0.5rem;
  margin: auto;
  bottom: 50%;
  left: 0;
  z-index: 99999999999999999;
  display: none;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  transform: translateY(-50%);
  font-size: 1.1rem;
  text-transform: uppercase;
  font-size: 16px;
  height: 30px;
  line-height: 30px;

}