.player-container {
 /* z-index: 20;   */
display: flex;
flex-direction: row;
   column-count: 2; 
  width: 100%;
  margin: 0px auto;
       /* border: 1px solid red; */

}

.player-cont-left {
  padding: 0px;
   flex-basis: 63.5%; 
}
.player-cont-right {
  padding: 20px;
    flex-basis: 36%;      
}


/* lewa i prawa cz[ player-a

.player-cont-left:nth-child(1) {background-color: #c0dbe2;}
.player-cont-right:nth-child(2) {background-color: #cdf1c3;}  */




/* ROZWIZANIA SZUKA W modal_a.css tam jest ustawienie domy[lne
   ZMIENIAEM W INDEX.TPL KOLEJNOZ PLIKÓW css I TERAZ MAM STEROWANIE TUTAJ
   czyli przy zmianie szeroko[ci okan przegldarki dziaBa poni|szy kod
.cssmodal figure {
  width: auto;
  width: 80%;
  max-width: 600px;
  max-width: 80%;
  
  */

@media screen and (max-width: 900px) {
 .cssmodal figure {
           width: 90%; 
       max-width: 90%;
       margin: 0;
  padding: 0px;
      /* border: 5px solid green;  */
       max-height: 85vh;
  overflow: auto;
  /* border: 4px solid purple; */
  }

} 


@media screen and (max-width: 800px) {

/*
#play {  caBo[, razem z warstw przyciemnion
           width: 100%; 
       max-width: 100%;
         border: 4px solid purple;
}   */



 .cssmodal figure {
           width: 96%; 
       max-width: 96%;
       margin: 0;
  padding: 0px;
      /* border: 5px solid green;  */
       max-height: 88vh;
  overflow: auto;
  /* border: 4px solid purple; */
  }
       
.player-container {
        flex-direction: column;
     width: 100%; 
       max-width: 100%;
    margin: 0;
  padding: 2px;
   /*   border: 4px solid purple;  */
}

.player-cont-left {
margin: 0;
  padding: 0px;
   max-width: 100%;
   flex-basis: 100%; 
}
.player-cont-right {
margin: 0;
  padding: 6px 8px 12px 8px;
    flex-basis: 100%;      
}

}



/*
@media screen and (min-width: 1024px) {

}

@media screen and (min-width: 769px) and (max-width: 1024px) {

}

@media screen and (min-width: 481px) and (max-width: 768px) {

}

@media screen and (min-width: 321px) and (max-width: 480px) {

}

@media screen  and (max-width: 320px) {

}
*/