@media (min-width: 320px) and (max-width: 480px) {
  /* Stylování pro zařízení s šířkou obrazovky do 320px */

.content {
width:100%;
margin-left:0px !important;
}  

.submenu-new {
width:100%;
}

.social {
width:40px;
}

.language-switcher {
width:40px;
}

.acc-dropdown {
width:45px;
margin-left:3px;
}


/* ======== nav bar horni technické menu ===== */

  .navbar-vyuka {
        padding: 8px;
    }

    .top-bar-left-new {
        flex-direction: column;
        align-items: center;
        margin-bottom: 5px;
    }

    .logo-img-new {
        height: 20px; /* Zmenšení loga */
        margin-bottom: 5px;
    }
    
    .top-bar-new {
    padding-left:0px;
    padding-right:0px;
    }

    .logo-text-new {
        font-size: 14px; /* Menší text pro název portálu */
        text-align: center;
        margin: 0;
    }

    .select-wrapper {
        width: 100%;
        text-align: center;
        margin: 10px 0;
    }

    .navbar_content {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        margin-top: 5px;
    }
    
/* ==== nav bar konec ========*/    

     .content-container {
        margin-left: 15px;
        margin-right: 15px;
        padding: 20px;
    }  
    
/* ====    Drobečková navigace   320 až 480 ========*/    

    .breadcrumb-nav {
        padding: 0px 8px;
        font-size: 0.9rem;
    }

    .breadcrumb {
        gap: 5px;
    }

    .breadcrumb li i {
        margin-right: 5px;
        font-size: 1.1rem;
    }

    .breadcrumb li a {
        padding-bottom: 1px;
         font-size: 0.6rem;
    }
    
    .breadcrumb li.active {
        font-size: 0.6rem;
    }

    .breadcrumb li::after {
        margin-left: 5px;
    } 
    
 /* ============== Baner ve výuce ======== 320 až 480 ===== */    
    
     .baner {
        flex-direction: column;
        padding: 10px;
    }

     .baner-postava,
     .baner-postava-vpravo {
        flex: 1 1 40%;
        max-width: 40%;
        margin: 10px 0;
    }
    
    .img-baner-vpravo,
    .img-baner-vlevo {
       display: none;
    }

    .kontainer-baner-stred {
        flex: 1 1 100%;
        padding: 0 5px;
        text-align: center;
    }

    .baner-temat-nadpis h2 {
        font-size: 20px;
    }

    .nadpis-temat {
        text-align: center;
        font-size: 18px;
    }

 /* ==== konec stylu ===  */ 
 

  
    
  
}



/* Pro malé tablety a mobily v horizontálním režimu (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    /* Styly pro obrazovky s šířkou mezi 481px a 768px */
    
.content {
margin-left:0px !important;
} 

.submenu-new {
width:100%;
}

    .content-container {
        margin-left: 30px;
        margin-right: 30px;
        padding: 30px;
    }
    
/* ====    Drobečková navigace   320 až 480 ========*/    

    .breadcrumb-nav {
        padding: 0px 8px;
        font-size: 1.1rem;
    }

    .breadcrumb {
        gap: 5px;
    }

    .breadcrumb li i {
        margin-right: 5px;
        font-size: 1.3rem;
    }

    .breadcrumb li a {
        padding-bottom: 1px;
         font-size: 0.8rem;
    }
    
    .breadcrumb li.active {
        font-size: 0.8rem;
    }

    .breadcrumb li::after {
        margin-left: 5px;
    }     
    


/* ============== Baner ve výuce ======== 481 až 768 ===== */     
    
    .baner {
        flex-direction: column;
        padding: 15px;
    }

    .baner-postava,
    .baner-postava-vpravo {
        flex: 1 1 40%;
        max-width: 40%;
        margin: 10px 0;
    }
    
    .img-baner-vpravo,
    .img-baner-vlevo {
       display: none;
    }

    .kontainer-baner-stred {
        flex: 1 1 100%;
        padding: 0 10px;
    }

    .baner-temat-nadpis h2 {
        font-size: 24px;
    }

    .nadpis-temat {
        text-align: center;
    }
/* ==============Konec stylu ===== */   

/* ============== Ve výkových tématech spodní navigace článků ======== 481 až 768 ===== */   
.zpet-kapitola {
width:100%;
border:1px solid;
border-color: #adadad;
padding:5px;
}

.text-kapitola-l h4,
.text-kapitola-r h4 {
font-size:14px;
}

.dalsi-kapitola {
width:100%;
margin-top:30px;
margin-bottom:30px;
border:1px solid;
border-color: #1684c4;
padding:5px;
}

/* ==============Konec stylu ===== */  

.section {
width:100%;
flex:none;
}

.sekce-mentor-obor {
width:100%;
float:left;
margin:0px;
padding:0px;
margin-top:20px;
}

.sekce-teacher-obor {
margin-left:0px;
padding:0px;
}

.container {
display:block;        
}

.sekce-stats-obor {
width:100%;
}

.top-skoly-obor, .prehled-pokroku-obor {
width:100%;
}

.kurz {
width:70%;
margin-left:10%;
margin-top:20px;
}

.image-kurz-mini {
width:250px;
margin-left:10%;
} 

.neprehled-prvky {
width:100%;
}

.doporuceni, .pripravuji {
width:48%;
}

.st-studium {
width:100%;
margin-left:0px;
margin-top:20px;
}
  

}



/* Pro tablety a malé notebooky (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Styly pro obrazovky s šířkou mezi 769px a 1024px */
    
.content {
margin-left:0px;
}    

    .content-container {
        margin-left: 60px;
        margin-right: 60px;
        padding: 40px;
    }

 
    
  #sidebarOpen
   {
    font-size: 25px;
    display: block;
    margin-right: 10px;
    cursor: pointer;
    color: var(--grey-color);
  }
  .sidebar.close {
    left: -100%;
  }
  .search_bar {
    display: none;
  }
  .sidebar.close .bottom_content {
    left: -100%;
  }
  
 /* ============== baner ve výuce ========  769 až 1024 */  
    .baner-postava {
        flex: 1 1 30%;
        max-width: 30%;
    }
    
    .img-baner-vpravo,
    .img-baner-vlevo {
       display: none;
    }

    .kontainer-baner-stred {
        flex: 1 1 40%;
        padding: 0 15px;
    }

    .baner-temat-nadpis h2 {
        font-size: 26px;
    }
  /* konec stylu*/ 

.kurz {
width:45%;
}

.image-kurz-mini {
width:180px;
margin-left:5%;
} 

.sekce-mentor-obor {
width:100%;
margin-top:20px;
margin-left:0px;
padding:0px;
}

.section-teacher-obor {
width:48%;
}

.mentor-online-obor {
width:48%;
margin-left:20px;
margin-top:0px;
}    
      
}

/* Pro středně velké monitory a větší tablety (1025px - 1280px) */
@media (min-width: 1025px) and (max-width: 1280px) {
    /* Styly pro obrazovky s šířkou mezi 1025px a 1280px */
      
    
    .content-container {
        margin-left: 60px;
        margin-right: 60px;
        padding: 40px;
    }

.sidebar {
width:300px;
}

.bottom_content {
width:300px;
}

.content {
margin-left:300px;
}

.navlink_icon {
font-size:18px;
}

.kurz {
width:45%;
}

.image-kurz-mini {
width:180px;
margin-left:5%;
} 
   
    
}

/* Pro široké notebooky a menší desktopové monitory (1281px - 1440px) */
@media (min-width: 1281px) and (max-width: 1440px) {
    /* Styly pro obrazovky s šířkou mezi 1281px a 1440px */
    
    .content-container {
        margin-left: 60px;
        margin-right: 60px;
        padding: 40px;
    }

.content-section h2 {
font-size: 1.5em;
} 

.sidebar {
width:300px;
}

.bottom_content {
width:300px;
}

.content {
    margin-left: 300px;
    width: calc(100% - 300px);
}

.news-content {
width:100%;
}

.news-item {
display:block;
}

.kurz {
width:45%;
}

.image-kurz-mini {
width:200px;
margin-left:10%;
} 


    

}

/* Pro velké desktopové monitory (1441px - 1920px) */
@media (min-width: 1441px) and (max-width: 1800px) {
    /* Asi jen pro sidebar vše ostatní stejné Styly pro obrazovky s šířkou mezi 1441px a 1920px */
    

.bottom_content {
width:300px;
}


  
  
}

/* Pro velké desktopové monitory (1441px - 1920px) */
@media (min-width: 1441px) and (max-width: 1920px) {
    /* Styly pro obrazovky s šířkou mezi 1441px a 1920px */
    
.image-kurz-mini {
width:200px;

}    
    
    
}

/* Pro ultra široké monitory (1921px - 2560px) */
@media (min-width: 1921px) and (max-width: 2560px) {
    /* Styly pro obrazovky s šířkou mezi 1921px a 2560px */
}

/* Pro extrémně široké obrazovky (více než 2560px) */
@media (min-width: 2561px) {
    /* Styly pro obrazovky s šířkou nad 2560px */
}