/*******************************************************************************
 * smaller than XXXpx - start
 *******************************************************************************/

@media only screen and (max-width: 1750px), (max-device-width: 1750px) {

/* patička */
#foot .content { padding-bottom: 150px; }

}

/*******************************************************************************
 * smaller than XXXpx - start
 *******************************************************************************/

@media only screen and (max-width: 1280px), (max-device-width: 1280px) {

.wrap2 { width: 100% !important; }
.wrap2 .content { padding-left: 2%; padding-right: 2%; width: 96%; }

/* hlavička, obsah, ... */
#head .content, #content .content, #foot .content { padding-left: 0; padding-right: 0; width: 100%; }
#foot .content { padding-left: 2%; padding-right: 2%; width: 96%; }

}

/*******************************************************************************
 * smaller than XXXpx - start
 *******************************************************************************/

@media only screen and (max-width: 1120px), (max-device-width: 1120px) {

/* menu */
#menu { display: block; width: 100%; }

/* logo */
.wrap-logo { display: block; float: none; margin: 0; width: auto; }
 
}

/*******************************************************************************
 * smaller than XXXpx - start
 *******************************************************************************/

@media only screen and (max-width: 850px), (max-device-width: 850px) {

/* responzivní design - pomocná proměnná */
.responsive-design { font-size: 1px; }

/* nadpis */
h1 { font-size: 1.5em; }

/* obsah */
#content .left { margin: 0; width: auto; }
#content .right { margin: 0; width: calc(100% - 20px); }
.sidebar-elearning img { max-width: none; } 
 
}

/*******************************************************************************
 * smaller than XXXpx - start
 *******************************************************************************/

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

/* logo */
.wrap-logo { display: block; float: none; margin: 0 0 1em 0; width: auto; }

/* menu */
#menu { width: 100%; }
#menu li { width: 50%; }
#menu li a { padding: 7px 0; }
#menu li br { display: none; }
#menu li span::before { content: " "; }
 
}

/*******************************************************************************
 * smaller than XXXpx - start
 *******************************************************************************/

@media only screen and (max-width: 634px), (max-device-width: 634px) {

/* banner na úvodní straně */
.elearning-info-pc { display: none; }
.elearning-info-mobile { display: block; }

/* patička */
#foot .content { padding-bottom: 50px; }
 
}

/*******************************************************************************
 * smaller than XXXpx - start
 *******************************************************************************/

@media only screen and (max-width: 450px), (max-device-width: 450px) {

/* menu */
#menu { min-height: 2em; }
#menu li { display: block; width: 100%; }
#menu li:not(.active) { display: none; }
#menu li a:hover, #menu li a.active { text-decoration: none; }

/* ikona hamburgerového menu */
#menu li.icon { display: inline-block; font-size: 1.25em; padding: 0 5%; position: absolute; right: 0; top: 0; width: auto; }
#menu li.icon a { }

/* menu otevřené */
#menu.open li { display: block; }
#menu.open li a, #menu li ul li a:hover, #menu li ul li a.active { border-bottom: 0px solid #222; }
#menu.open li.icon a { border: 0; }

/* reference */
.reference { width: calc(100%/2); } 
 
}