#MENU-BACKGROUND
{
     width: 100%;
     height: 64px;
}

#MENUPC,
#MENUMOBILE
{
     z-index: 15000;
}

@media (min-width: 1200px) {

     #MENUPC
     {
          display: block;
     }

     #MENUMOBILE
     {
          display: none;
     }

}

@media (max-width: 1199px) {

     #MENUPC
     {
          display: none;
     }

     #MENUMOBILE
     {
          display: block;
     }
}

@keyframes a-menu-show {
     0% {
          top: -64px;
     }
     70% {
          top: 10px;
     }
     100% {
          top: 0;
     }
}

.MENU
{
     width: 100%;
     height: 64px;
     position: fixed;
     top: -64px;
     font-size: var(--fs-s);

     border-color: var(--basic-fg);
     border-width: 0 0 1px 0;
     border-style: solid;

     background-color: var(--basic-bg-hover);
     color: var(--basic-fg);

     animation: a-menu-show;
     animation-duration: 0.5s;
     animation-delay: .1s;
     animation-fill-mode: forwards;
     animation-direction: normal;

     -webkit-animation: a-menu-show;
     -webkit-animation-duration: 0.5s;
     -webkit-animation-delay: .1s;
     -webkit-animation-fill-mode: forwards;
     -webkit-animation-direction: normal;

     -moz-animation: a-menu-show;
     -moz-animation-duration: 0.5s;
     -moz-animation-delay: .1s;
     -moz-animation-fill-mode: forwards;
     -moz-animation-direction: normal;

     -o-animation: a-menu-show;
     -o-animation-duration: 0.5s;
     -o-animation-delay: .1s;
     -o-animation-fill-mode: forwards;
     -o-animation-direction: normal;
}

.MENU UL
{
     list-style-type: none;
     width: auto;
     margin: 0;
     padding: 0;
}

.MENU UL LI
{
     display: inline-block;
     padding: 17px 15px;
     position: relative;
     width: auto;
     font-size: 24px;
     color: var(--basic-fg);
     cursor: pointer;
}

.MENU UL LI I
{
     font-size: 22px;
}

.MENU .MENU-ITEMS
{
     float: left;
}

.MENU .MENU-ADMIN-ITEMS
{
     float: right;
}

.MENU-LOGO
{
     padding: 16px 0;
     position: absolute;
     font-size: 24px;
     text-align: center;
}

.MLOGO-WHOLE
{
     width: 180px;
     left: calc(50% - 90px);
}

.MLOGO-SHORT
{
     width: 40px;
     left: calc(30% - 20px);
}

@media (min-width: 600px) {

     .MLOGO-WHOLE
     {
          display: block;
     }

     .MLOGO-SHORT
     {
          display: none;
     }

}

@media (max-width: 600px) {

     .MLOGO-WHOLE
     {
          display: none;
     }

     .MLOGO-SHORT
     {
          display: block;
     }

}



.SUBMENU-BACKGROUND
{
     position: fixed;
     background-color: var(--basic-bg);
     color: var(--basic-fg);
     transition-duration: .3s;
     transition-delay: 0.1s;
     width: 100vw;
     top: 64px;

     max-height: 0;
     z-index: 10000;
     overflow: hidden;
     height: 0;
}

.SMBG-SHOW
{
     max-height: 5000px;
     z-index: 5000;
     overflow: visible;
     height: calc(100vh - 64px);
}

.SUBMENU
{
     position: relative;
     z-index: 5000;
     height: calc(100vh - 64px);
     display: none;
}

.SUBMENU DL,
.SUBMENU DT,
.SUBMENU DD
{
     display: none;
}

.SM-SHOW
{
     display: block;
}

.SM-SHOW DL,
.SM-SHOW DT,
.SM-SHOW DD
{
     display: block;
}

.SUBMENU DT,
.SUBMENU DD
{
     filter: alpha(opacity=0);
     opacity: 0;
     position: relative;
     top: -100px;
}

.SUBMENU DT
{
     padding: 1vw 2vw 0 2vw;
}

.SUBMENU DD
{
     padding: 0 2vw 1vw 2vw;
     margin: 15px 0 15px 0;
     font-size: var(--fs-s);
}

.SUBMENU DT.DT-SHOW,
.SUBMENU DD.DD-SHOW
{
     filter: alpha(opacity=100);
     opacity: 1;
     top: 0;
     transition-delay: 0.3s;
}

.SUBMENU DIV
{
     position: absolute;
     background-color: var(--basic-bg);
}

.SMC-1,
.SMC-2,
.SMC-3
{
     overflow: hidden;
     height: 0;
     margin: 4vw 0;
     padding: 0 2vw;
     opacity: 0;
     filter: alpha(opacity=0);
}

.SUBMENU ABBR
{
     display: none;
}

@media (min-width: 1200px) {

     .SMC-1,
     .SMC-2,
     .SMC-3
     {
          width: 33.33vw;
     }

     .SMC-1
     {
          left: 0;
          transition: opacity .15s linear .3s, filter .15s linear .3s;
     }

     .SMC-2
     {
          left: 33.33vw;
          transition: opacity .15s linear .3s, filter .15s linear .3s;
     }

     .SMC-3
     {
          left: 66.66vw;
          transition: opacity .15s linear .6s, filter .15s linear .6s;
     }
}

@media (min-width: 801px) and (max-width: 1199px) {

     .SMC-1,
     .SMC-2,
     .SMC-3
     {
          width: 50vw;
          transition: opacity .15s linear .3s, filter .15s linear .3s;
     }

     .SMC-1
     {
          left: 0;
     }

     .SMC-2
     {
          left: 50vw;
     }

     .SMC-3
     {
          display: none;
     }

}

@media (max-width: 800px) {

     .SMC-SHOW ABBR
     {
          display: block;
          position: fixed;
          margin: 2vw;
          right: 8vw;
          top: calc(63px + 2vw);
          z-index: 6000;
          cursor: pointer;
     }

     .SMC-1,
     .SMC-2,
     .SMC-3
     {
          width: 100vw;
     }

     .SMC-1
     {
          z-index: 5100;
          transition: opacity .15s linear .6s, filter .15s linear .6s;
     }

     .SMC-2
     {
          z-index: 5200;
          transition: opacity .15s linear .3s, filter .15s linear .3s;
     }

     .SMC-3
     {
          z-index: 5000;
          transition: opacity .15s linear .3s, filter .15s linear .3s;
     }

}

.SMC-SHOW
{
     overflow: auto;
     filter: alpha(opacity=100);
     opacity: 1;

     margin: 4vw 0;
     padding: 0 4vw;
     height: calc(100vh - 64px - 8vw); /* zustane tu definována kvůli mobilnímu zobrazení a z-indexu */
}

.SMC-3 IMG
{
     width: 100%;
     max-width: 33.33vw;
     height: auto;
     margin: 0 0 4vh 0;
}

.SMC-3 H3
{
     font-size: var(--fs-xl);
}

.SUBMENU DL
{
     padding: 0 0 3vw 0;
}

.SUBMENU DIV A,
.SUBMENU DIV EM
{
     display: inline-block;
     font-style: normal;
     font-weight: bold;
     font-size: var(--fs-l);
     cursor: pointer;
     transition: box-shadow 0.15s linear 0.075s;
}

.SUBMENU DIV A:hover,
.SUBMENU DIV EM:hover
{
     box-shadow: 0 5px 0 var(--basic-fg);
}

.SUBMENU DIV EM:after
{
     content: ' >'; /* fsymbols.com/signs/arrow */
     white-space: nowrap;
}




.SUBMENU-SMALL
{
     position: fixed;
     right: 2vh;
     top: calc(63px + 2vh);

     display: block;
     overflow: hidden;

     max-height: 0;
     padding: 0 2vh;

     transition: .3s;

     border-width: 0px;
     border-style: solid;
     border-color: var(--cr);
     background-color: var(--basic-bg);

     text-align: center;
     z-index: 0;

     box-shadow: 5px 5px 5px var(--basic-fg);
}

.SUBMENU-SMALL BUTTON
{
     padding: 20px;
     transition-delay: .3s;
}

.SUBMENU-SMALL IMG
{
     width: 80px;
     height: 80px;
     border-radius: 80px;
     transition: .3s;
}

.SMS-SHOW
{
     max-height: calc(100vh - 64px);
     padding: 2vh;
     overflow: visible;
     border-width: 1px;
     z-index: 4000;
}







#BANNER
{
     background-color: var(--basic-bg);
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: scroll;
     background-position: center center;
     text-align: center;
     height: calc(100vh - 64px);
}



#BOTTOM-MENU
{
     position: fixed;
     right: 0px;
     bottom: 0px;
     width: 100%;
     white-space: nowrap;
     transition: .3s;
     z-index: 5000;
     padding: 5px;
     text-align: right;
     border-width: 2px 0 0 0;
     border-color: var(--basic-fg);
     border-style: solid;
     overflow: hidden;
     background-color: var(--basic-bg-hover);
     color: var(--basic-fg);
}

@media (max-width: 500px) {

     #BOTTOM-MENU > DIV
     {
          width: 100%;
          text-align: left;
     }

     #BOTTOM-MENU > DIV:first-of-type
     {
          padding: 5px 5px 15px 5px;
     }

}

#BOTTOM-MENU .BM-TITLE
{
     float: left;
}

#BOTTOM-MENU .BM-TITLE > I
{
     padding: 5px 15px 5px 5px;
}

#BOTTOM-MENU .BM-BUTTONS
{
     float: right;
     text-align: right;
}

#BOTTOM-MENU A,
#BOTTOM-MENU EM
{
     display: inline-block;
     width: 40px;
     height: 40px;
     border-width: 2px;
     border-style: dotted;
     border-color: var(--basic-fg);
     border-radius: 100%;
     transition: .3s;
     margin: 0 5px 0 0;
     vertical-align: middle;
     text-align: center;
     cursor: pointer;
}

#BOTTOM-MENU CITE
{
     display: inline-block;
     width: 10px;
     height: 40px;
     margin: 0 5px 0 0;
     vertical-align: middle;
}

@media (max-width: 450px) {

     #BOTTOM-MENU A,
     #BOTTOM-MENU EM,
     #BOTTOM-MENU CITE /* použití jako oddělovač */
     {
          padding: 4px;

     }

}
#BOTTOM-MENU EM:hover,
#BOTTOM-MENU A:hover
{
     border-radius: 15px;
     border-style: solid;
}

#BOTTOM-MENU SPAN
{
     display: inline-block;
     width: auto;
     margin: 0 5px 0 0;
     vertical-align: middle;
     overflow: hidden;
     text-align: center;
}