.sekciastol{
    display: flex;
    justify-content: center;
    margin: 20px 0 15px 0;
}



.obdlznik {
    margin: 0 20px 0 0;
    width: 130px;
    height: 200px;
    background-color: darkblue;
    border: 2px solid white;
    outline: 2px solid darkblue;
    outline-offset: 2px;
    position: relative;
    /* Potrebné na správne umiestnenie vnútorného prvku */
}

.obdlznik-alebo {
    margin: 0 20px 0 0;
    width: 130px;
    height: 200px;
    background-color: #f43163;
    border: 2px solid white;
    outline: 2px solid #f43163;
    outline-offset: 2px;
    position: relative;
    /* Potrebné na správne umiestnenie vnútorného prvku */
}

.siet {
    width: 100%;
    height: 2px; /* Hrúbka čiary */
    background-color: white;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.stred {
    width: 2px;
    height: 100%; /* Hrúbka čiary */
    background-color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%);
}

kruh {
    width: 4px;
    height: 100%; /* Hrúbka čiary */
    background-color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%);
}


.obdlznik2 {
    margin: 0 20px 0 0;
    width: 130px;
    height: 200px;
    background-color: #5e5e5e;
    border: 3px solid black;
    outline: 2px solid #5e5e5e;
    outline-offset: 0;
    position: relative; 
    /* Potrebné na správne umiestnenie vnútorného prvku */
}

.siet2 {
    width: 100%;
    height: 4px; /* Hrúbka čiary */
    background-color: black;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
/****************** nove cvicenia na stole s kruhom *********************/


.kruh {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    color: black;
    font-size: 16px;
    text-align: center;
    line-height: 95px;
    margin: 10px 25px 0 25px;
    cursor: pointer;
    text-decoration: none;
}

.kruhbiely{
    background-color: white;
}
.kruhcerveny{
    background-color: orange;
}
.kruh-zeleny{
    background-color: green;
}


.lopta{width: 16%; height: 16%;  position: absolute; 
    left: 0%; top: 83%; border-radius: 50%;}

.biela { background-color: white;}
.oranzova { background-color: orange;}
.zelena { background-color: green;}

.kruh1a{
    width: 16%; height: 16%;  position: absolute; 
    left: 0%; top: 83%; border-radius: 50%;
}
.kruh1b{
    width: 16%; height: 16%;  position: absolute; 
    left: 16%; top: 83%; border-radius: 50%;
}
.kruh1c{
    width: 16%; height: 16%;  position: absolute; 
    left: 32%; top: 83%; border-radius: 50%;
}
.kruh1d{
    width: 16%; height: 16%;  position: absolute; 
    left: 53%; top: 83%; border-radius: 50%;
}
.kruh1e{
    width: 16%; height: 16%;  position: absolute; 
    left: 69%; top: 83%; border-radius: 50%;
}
.kruh1f{
    width: 16%; height: 16%;  position: absolute; 
    left: 84%; top: 83%; border-radius: 50%;
}
.kruh1x{
    width: 16%; height: 16%;  position: absolute; 
    left: 45%; top: 83%; border-radius: 50%;
}



.kruh2a{
    width: 16%; height: 16%;  position: absolute; 
    left: 0%; top: 67%; border-radius: 50%;
}
.kruh2b{
    width: 16%; height: 16%; position: absolute; 
    left: 16%; top: 67%; border-radius: 50%;
}
.kruh2c{
    width: 16%; height: 16%;  position: absolute; 
    left: 32%; top: 67%; border-radius: 50%;
}
.kruh2d{
    width: 16%; height: 16%;  position: absolute; 
    left: 53%; top: 72%; border-radius: 50%;
}
.kruh2e{
    width: 16%; height: 16%;  position: absolute; 
    left: 69%; top: 67%; border-radius: 50%;
}
.kruh2f{
    width: 16%; height: 16%;  position: absolute; 
    left: 84%; top: 67%; border-radius: 50%;
}
.kruh2x{
    width: 16%; height: 16%;  position: absolute; 
    left: 45%; top: 67%; border-radius: 50%;
}



.kruh3a{
    width: 16%; height: 16%;  position: absolute; 
    left: 0%; top: 51%; border-radius: 50%;
}
.kruh3b{
    width: 16%; height: 16%;  position: absolute; 
    left: 16%; top: 51%; border-radius: 50%;
}
.kruh3c{
    width: 16%; height: 16%;  position: absolute; 
    left: 32%; top: 51%; border-radius: 50%;
}
.kruh3d{
    width: 16%; height: 16%;  position: absolute; 
    left: 53%; top: 51%; border-radius: 50%;
}
.kruh3e{
    width: 16%; height: 16%;  position: absolute; 
    left: 69%; top: 51%; border-radius: 50%;
}
.kruh3f{
    width: 16%; height: 16%;  position: absolute; 
    left: 84%; top: 51%; border-radius: 50%;
}
.kruh3x{
    width: 16%; height: 16%;  position: absolute; 
    left: 45%; top: 51%; border-radius: 50%;
}



.kruh4a{
    width: 16%; height: 16%;  position: absolute; 
    left: 0%; top: 33%; border-radius: 50%;
}
.kruh4b{
    width: 16%; height: 16%;  position: absolute; 
    left: 16%; top: 33%; border-radius: 50%;
}
.kruh4c{
    width: 16%; height: 16%;  position: absolute; 
    left: 32%; top: 33%; border-radius: 50%;
}
.kruh4d{
    width: 16%; height: 16%;  position: absolute; 
    left: 53%; top: 33%; border-radius: 50%;
}
.kruh4e{
    width: 16%; height: 16%;  position: absolute; 
    left: 69%; top: 33%; border-radius: 50%;
}
.kruh4f{
    width: 16%; height: 16%;  position: absolute; 
    left: 84%; top: 33%; border-radius: 50%;
}
.kruh4x{
    width: 16%; height: 16%;  position: absolute; 
    left: 45%; top: 33%; border-radius: 50%;
}



.kruh5a{
    width: 16%; height: 16%;  position: absolute; 
    left: 0%; top: 16%; border-radius: 50%;
}
.kruh5b{
    width: 16%; height: 16%;  position: absolute; 
    left: 16%; top: 16%; border-radius: 50%;
}
.kruh5c{
    width: 16%; height: 16%;  position: absolute; 
    left: 32%; top: 16%; border-radius: 50%;
}
.kruh5d{
    width: 16%; height: 16%; position: absolute; 
    left: 53%; top: 16%; border-radius: 50%;
}
.kruh5e{
    width: 16%; height: 16%; position: absolute; 
    left: 69%; top: 16%; border-radius: 50%;
}
.kruh5f{
    width: 16%; height: 16%;  position: absolute; 
    left: 84%; top: 16%; border-radius: 50%;
}
.kruh5x{
    width: 16%; height: 16%;  position: absolute; 
    left: 45%; top: 16%; border-radius: 50%;
}



.kruh6a{
    width: 16%; height: 16%;  position: absolute; 
    left: 0%; top: 0%; border-radius: 50%;
}
.kruh6b{
    width: 16%; height: 16%;  position: absolute; 
    left: 16%; top: 0%; border-radius: 50%;
}
.kruh6c{
    width: 16%; height: 16%;  position: absolute; 
    left: 32%; top: 0%; border-radius: 50%;
}
.kruh6d{
    width: 16%; height: 16%;  position: absolute; 
    left: 53%; top: 0%; border-radius: 50%;
}
.kruh6e{
    width: 16%; height: 16%;  position: absolute; 
    left: 69%; top: 0%; border-radius: 50%;
}
.kruh6f{
    width: 16%; height: 16%; position: absolute; 
    left: 84%; top: 0%; border-radius: 50%;
}
.kruh6x{
    width: 16%; height: 16%; position: absolute; 
    left: 45%; top: 0%; border-radius: 50%;
}



/****************** cvicenia na stole *********************/
.sipkabiela { border-bottom: 20px solid white;}
.sipkaoranzova { border-bottom: 20px solid orange;}
.sipkazelena { border-bottom: 20px solid green;}

.ff{
    width: 4px; height: 80%; background-color: white; position: absolute;
    left: 50%; top:10%;  transform: translateX(-50%) rotate(-30deg);  }
.sipkaff {
    position: absolute; left: 19%; top: 10%; transform: translateX(-50%) rotate(-30deg);    
    border-left: 8px solid transparent;border-right: 8px solid transparent; }


.fs{
    width: 4px; height: 80%; background-color: white; position: absolute;
    left: 65%; top:10%;  transform: translateX(-50%) rotate(-15deg);  }
.sipkafs {
    position: absolute; left: 49%; top: 8%; transform: translateX(-50%) rotate(-15deg);
    border-left: 8px solid transparent; border-right: 8px solid transparent; }


.fb{
    width: 4px; height: 80%; background-color: white; position: absolute;
    left: 80%; top:10%;  transform: translateX(-50%) rotate(0deg);  }
.sipkafb {
    position: absolute; left: 80%; top: 8%; transform: translateX(-50%) rotate(0deg);    
    border-left: 8px solid transparent;border-right: 8px solid transparent; }


.sf{
    width: 4px; height: 80%; background-color: white; position: absolute;
    left: 35%; top:10%;  transform: translateX(-50%) rotate(-15deg);  }
.sipkasf {
    position: absolute; left: 19%; top: 8%; transform: translateX(-50%) rotate(-15deg);    
    border-left: 8px solid transparent;border-right: 8px solid transparent;}


.ss{
    width: 4px; height: 80%; background-color: white; position: absolute;
    left: 50%; top:10%;  transform: translateX(-50%) rotate(0deg);  }
.sipkass {
    position: absolute; left: 50%; top: 8%; transform: translateX(-50%) rotate(0deg);    
    border-left: 8px solid transparent;border-right: 8px solid transparent; }


.sb{
    width: 4px; height: 80%; background-color: white; position: absolute;
    left: 65%; top:10%;  transform: translateX(-50%) rotate(15deg);  }
.sipkasb {
    position: absolute; left: 80%; top: 8%; transform: translateX(-50%) rotate(15deg);    
    border-left: 8px solid transparent;border-right: 8px solid transparent; }


.bf{
    width: 4px; height: 80%; background-color: white; position: absolute;
    left: 30%; top:10%;  transform: translateX(-50%) rotate(0deg);  }
.sipkabf {
    position: absolute; left: 30%; top: 8%; transform: translateX(-50%) rotate(0deg);    
    border-left: 8px solid transparent;border-right: 8px solid transparent; }


.bs{
    width: 4px; height: 80%; background-color: white; position: absolute;
    left: 38%; top:10%;  transform: translateX(-50%) rotate(15deg);  }
.sipkabs {
    position: absolute; left: 53%; top: 8%; transform: translateX(-50%) rotate(15deg);
    border-left: 8px solid transparent; border-right: 8px solid transparent; }


.bb{
    width: 4px; height: 80%; position: absolute;
    left: 50%; top:10%;  transform: translateX(-50%) rotate(30deg);  }
.sipkabb {
    position: absolute; left: 83%; top: 8%; transform: translateX(-50%) rotate(30deg);    
    border-left: 8px solid transparent;border-right: 8px solid transparent; ;
}


.bbk{
    width: 4px; height: 40%; background-color: white; position: absolute;
    left: 50%; top:30%;  transform: translateX(-50%) rotate(40deg);  }
.sipkabbk {
    position: absolute; left: 75%; top: 25%; transform: translateX(-50%) rotate(40deg);    
    border-left: 8px solid transparent;border-right: 8px solid transparent; }



.ffk{
    width: 4px; height: 40%; background-color: white; position: absolute;
    left: 50%; top:30%;  transform: translateX(-50%) rotate(-40deg);  }
.sipkaffk {
    position: absolute; left: 25%; top: 25%; transform: translateX(-50%) rotate(-40deg);    
    border-left: 8px solid transparent;border-right: 8px solid transparent; }



.fbk{
    width: 4px; height: 40%; background-color: white; position: absolute;
    left: 75%; top:30%;  transform: translateX(-50%) rotate(0deg);  }
.sipkafbk {
    position: absolute; left: 75%; top: 25%; transform: translateX(-50%) rotate(0deg);    
    border-left: 8px solid transparent;border-right: 8px solid transparent; }






@media (max-width: 1000px) {
    .obdlznik {
        margin: 10px;
        width: 80px;
        height: 130px;
    }
}

@media (max-width: 600px) {
    .obdlznik {
        margin: 5px;
        width: 60px;
        height: 104px;
    }
}

@media (max-width: 1000px) {
    .obdlznik-alebo {
        margin: 10px;
        width: 80px;
        height: 130px;
    }
}
@media (max-width: 600px) {
    .obdlznik-alebo {
        margin: 5px;
        width: 60px;
        height: 104px;
        
    }
}

@media (max-width: 1000px) {
    .obdlznik2 {
        margin: 10px;
        width: 80px;
        height: 130px;
    }
}