/* --- LAYOUT PANEL MENU --- */

#layoutPanel{display:block;position:absolute;z-index:901;top:10vw!important;left:3%!important;width:auto;height:3vw;text-align:left}
#page header.small ~ #layoutPanel{position:fixed;top:auto!important;bottom:0;transition:all .6s}
#page.design-4 #layoutPanel,#page.design-4 header.small ~ #layoutPanel{position:fixed!important;top:0!important;bottom:auto!important;left:0!important}
#layoutPanel > *{height:100%}
#layoutPanel *{line-height:150%}
#layoutPanel .layoutBar form{display:webkit-flex;display:ms-flex;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-justify-content:flex-start;-ms-justify-content:flex-start;justify-content:flex-start;-webkit-align-content:flex-start;align-content:flex-start;-webkit-align-items:flex-start;align-items:flex-start}

#page .handler,#page .handler *{cursor:pointer}
#page .acc .content{height:0;overflow:hidden;-moz-opacity:0;-webkit-opacity:0;-o-opacity:0;-ms-opacity:0;opacity:0;transition:all .6s}
#page .acc input:checked + label:nth-of-type(n) + .content{display:block!important}
#page .acc.layoutBar input:checked + label:nth-of-type(n) + .content{display:flex!important;padding:2%;height:auto;-moz-opacity:1;-webkit-opacity:1;-o-opacity:1;-ms-opacity:1;opacity:1;transition:all .8s}
#page .acc .secondLevel.content{display:none!important}
#page .acc input[type="checkbox"]{position:fixed!important;z-index:0!important;top:-20px!important;left:0!important}

#page .layoutBar{position:relative;width:auto;height:100%}
#page .layoutBar > .handler{position:relative;z-index:900;display:inline-block;margin:0;width:18.2vw;height:3vw;font-size:1.1vw!important;font-weight:normal;text-transform:none;font-variant:none;text-align:center;line-height:100%;white-space:nowrap}
#page .layoutBar > .handler{display:webkit-flex;display:ms-flex;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-justify-content:flex-start;-ms-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-ms-align-items:center;align-items:center}
#page .layoutBar > .handler,#page > nav.small ~ #layoutPanel .layoutBar > .handler{padding:.5vw 1vw;color:rgba(255,255,255,.6)!important;background-color:rgba(0,0,0,.1);transition:all .6s}
#page header.small~#layoutPanel .layoutBar > .handler{padding:0;background-color:rgba(255,255,255,.1)}
#page .layoutBar > .handler:hover,#page .layoutBar>input:checked+.handler,
#page header.small~#layoutPanel .layoutBar>.handler:hover,#page header.small~#layoutPanel .layoutBar>input:checked+.handler{color:#fff!important;background-color:rgba(0,0,0,.8);transition:all .6s}
#page .layoutBar input.menuCheck+label::before{content:'\f0c9';display:inline-block;margin:0 1.5vw 0 0;width:1.5vw;font-size:1.2vw;font-family:awesome;text-align:left;color:rgba(255,255,255,.6)}
#page .layoutBar input.menuCheck+label:hover::before,#page .layoutBar input.menuCheck:checked+label::before{color:#fff;transition:all .6s}
#page header.small ~ #layoutPanel .layoutBar input.menuCheck+label:hover::before,#page header.small ~ #layoutPanel .layoutBar input.menuCheck:checked+label::before{color:#fff}
#page header.small ~ #layoutPanel .layoutBar input.menuCheck+label::before{margin-left:5%}
#page .layoutBar input.menuCheck+label span{display:inline-block;width:auto}
#page .layoutBar input.menuCheck+label span::after{content:' öffnen';margin-left:5px}
#page .layoutBar input.menuCheck:checked+label span::after{content:' schließen'}
#page .layoutBar input.menuCheck:checked+label:hover span,#page .layoutBar input.menuCheck:checked+label:hover::before,#page .layoutBar input.menuCheck:checked+label:hover span::after{color:rgba(255,255,255,.6)!important;transition:all .6s}

#page .layoutBar > .content{position:absolute;top:100%;width:100%;background-color:rgba(0,0,0,.8)}
#page header.small ~ #layoutPanel .layoutBar > .content{top:auto;bottom:100%}
#page.design-4 header.small ~ #layoutPanel .layoutBar > .content{top:100%;bottom:auto}

#page .layoutBar form{margin:0;width:100%}
#page .layoutBar fieldset{margin:0 1.5% 10px 1.5%;width:47%}
#page .layoutBar fieldset.toggleBar{margin-top:10px;width:97%}
#page .layoutBar select{padding:5px 0;width:100%;font-size:12px;cursor:pointer}
#page .layoutBar label{font-size:12px;font-weight:normal;color:#7f7f7f}
#page .layoutBar fieldset label.addSel{display:inline-block;margin:4px 0 0 0;padding:0;width:49%;text-align:left;vertical-align:top;cursor:pointer}
#page .layoutBar fieldset label.addSel:hover,#page .layoutBar fieldset label.addSel.act{color:#fff}
#page .layoutBar button,#page .layoutBar .tglReset{float:left;margin-left:3%;padding:5px 0;width:48.5%;font-size:14px!important;text-transform:none;cursor:pointer}
#page .layoutBar .tglReset{margin:0;width:100%;text-align:center;color:rgba(255,255,255,1);background-color:#5f5f5f}
#page .layoutBar .tglReset:hover{color:rgba(255,255,255,.6);background-color:#3f3f3f}

.layoutBar .tglStand{background-color:#4f4f4f}
.layoutBar .tglRed{background-color:#990000}
.layoutBar .tglBlue{background-color:#25abd4}
.layoutBar .tglOrange{background-color:#f08f08}
.layoutBar .tglGreen{background-color:#79912b}