body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both} @media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%} header,footer,nav,section,aside,main,article,figure,figcaption{display:block}body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,legend,input,textarea{margin:0;padding:0}table{border-spacing:0;border-collapse:collapse}caption,th,td{text-align:left;text-align:start;vertical-align:top}abbr,acronym{font-variant:normal;border-bottom:1px dotted #666;cursor:help}blockquote,q{quotes:none}fieldset,img,iframe{border:0}ul{list-style-type:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}del{text-decoration:line-through}ins{text-decoration:none}body{font:12px/1 "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;color:#000}input,button,textarea,select{font-family:inherit;font-size:99%;font-weight:inherit}pre,code{font-family:Monaco,monospace}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}h1{font-size:1.8333em}h2{font-size:1.6667em}h3{font-size:1.5em}h4{font-size:1.3333em}table{font-size:inherit}caption,th{font-weight:700}a{color:#00f}h1,h2,h3,h4,h5,h6{margin-top:1em}h1,h2,h3,h4,h5,h6,p,pre,blockquote,table,ol,ul,form{margin-bottom:12px} @charset "UTF-8";/*! * mmenu.js * mmenujs.com * * Copyright (c) Fred Heusschen * frebsite.nl * * License: CC-BY-NC-4.0 * http://creativecommons.org/licenses/by-nc/4.0/ */:root{--mm-lineheight:22px}.mm-hidden{display:none!important}.mm-wrapper{overflow-x:hidden;position:relative}.mm-menu,.mm-menu *,.mm-menu :after,.mm-menu :before{-webkit-transition-property:none;-o-transition-property:none;transition-property:none;-webkit-transition-duration:.4s;-o-transition-duration:.4s;transition-duration:.4s;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}:root{--mm-blocker-visibility-delay:0.4s;--mm-blocker-opacity-delay:0s}.mm-blocker{display:block;position:absolute;bottom:100%;top:0;right:0;left:0;z-index:3;opacity:0;background:var(--mm-color-background);-webkit-transition:bottom 0s ease var(--mm-blocker-visibility-delay),width .4s ease,opacity .4s ease var(--mm-blocker-opacity-delay),-webkit-transform .4s ease;transition:bottom 0s ease var(--mm-blocker-visibility-delay),width .4s ease,opacity .4s ease var(--mm-blocker-opacity-delay),-webkit-transform .4s ease;-o-transition:bottom 0s ease var(--mm-blocker-visibility-delay),width .4s ease,opacity .4s ease var(--mm-blocker-opacity-delay),transform .4s ease;transition:bottom 0s ease var(--mm-blocker-visibility-delay),width .4s ease,opacity .4s ease var(--mm-blocker-opacity-delay),transform .4s ease;transition:bottom 0s ease var(--mm-blocker-visibility-delay),width .4s ease,opacity .4s ease var(--mm-blocker-opacity-delay),transform .4s ease,-webkit-transform .4s ease}.mm-blocker:focus-visible{opacity:.75}.mm-btn{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;width:50px;padding:0}.mm-btn--next,[dir=rtl] .mm-btn--prev{--mm-btn-rotate:135deg}.mm-btn--prev,[dir=rtl] .mm-btn--next{--mm-btn-rotate:-45deg}.mm-btn--next:after,.mm-btn--prev:before{content:"";display:block;position:absolute;top:0;bottom:0;width:8px;height:8px;margin:auto;-webkit-box-sizing:border-box;box-sizing:border-box;border:2px solid var(--mm-color-icon);border-bottom:none;border-right:none;-webkit-transform:rotate(var(--mm-btn-rotate));-ms-transform:rotate(var(--mm-btn-rotate));transform:rotate(var(--mm-btn-rotate))}.mm-btn--prev:before{inset-inline-start:23px}.mm-btn--next:after{inset-inline-end:23px}.mm-btn--close:before{content:"×";font-size:150%}.mm-btnreset{padding:0;background:0 0;border:none;cursor:pointer}.mm-divider{-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;position:-webkit-sticky;position:sticky;z-index:2;top:0;min-height:var(--mm-lineheight);padding:calc((var(--mm-listitem-size) * .65 - var(--mm-lineheight)) * .5) 20px;font-size:75%;text-transform:uppercase;background:var(--mm-color-background);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--mm-color-background-highlight)),to(var(--mm-color-background-highlight)));background-image:-o-linear-gradient(var(--mm-color-background-highlight),var(--mm-color-background-highlight));background-image:linear-gradient(var(--mm-color-background-highlight),var(--mm-color-background-highlight));opacity:1;-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.mm-navbar:not(.mm-hidden)~.mm-listview .mm-divider{top:var(--mm-navbar-size)}:root{--mm-listitem-size:50px}.mm-listitem{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;position:relative;padding:0;margin:0;color:var(--mm-color-text);border-color:var(--mm-color-border)}.mm-listitem:after{content:"";border-color:inherit;border-bottom-width:1px;border-bottom-style:solid;display:block;position:absolute;inset-inline-start:20px;inset-inline-end:0;bottom:0}.mm-listitem__btn,.mm-listitem__text{padding:calc((var(--mm-listitem-size) - var(--mm-lineheight))/ 2) 0}.mm-listitem__text{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:10%;flex-basis:10%;display:block;padding-left:20px;padding-right:20px;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mm-listitem__btn{display:block;position:relative;width:auto;-webkit-padding-end:50px;padding-inline-end:50px;border-color:inherit;background:rgba(3,2,1,0)}.mm-listitem__btn:not(.mm-listitem__text){border-left-width:1px;border-left-style:solid}.mm-listitem--selected>.mm-listitem__text{background:var(--mm-color-background-emphasis)}.mm-listitem--opened>.mm-listitem__btn,.mm-listitem--opened>.mm-panel{background:var(--mm-color-background-highlight)}.mm-listview{list-style:none;display:block;padding:0;margin:0}.mm-menu{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:0;margin:0;position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;-ms-scroll-chaining:none;overscroll-behavior:none;background:var(--mm-color-background);border-color:var(--mm-color-border);color:var(--mm-color-text);line-height:var(--mm-lineheight);-webkit-tap-highlight-color:var(--mm-color-background-emphasis);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.mm-menu ::-webkit-input-placeholder{color:var(--mm-color-text-dimmed)}.mm-menu ::-moz-placeholder{color:var(--mm-color-text-dimmed)}.mm-menu :-ms-input-placeholder{color:var(--mm-color-text-dimmed)}.mm-menu ::-ms-input-placeholder{color:var(--mm-color-text-dimmed)}.mm-menu ::placeholder{color:var(--mm-color-text-dimmed)}.mm-menu,.mm-menu *{-webkit-box-sizing:border-box;box-sizing:border-box}.mm-menu :focus,.mm-menu :focus-visible,.mm-menu:focus,.mm-menu:focus-visible{outline:0}.mm-menu a,.mm-menu button,.mm-menu label{color:inherit}.mm-menu a:focus,.mm-menu button:focus,.mm-menu label:focus{outline:0}.mm-menu a:focus-visible,.mm-menu button:focus-visible,.mm-menu label:focus-visible{outline:2px solid var(--mm-color-focusring);outline-offset:-5px}.mm-menu input:focus,.mm-menu input:focus-visible,.mm-menu select:focus,.mm-menu select:focus-visible,.mm-menu textarea:focus,.mm-menu textarea:focus-visible{outline:2px solid var(--mm-color-focusring);outline-offset:2px}.mm-menu a,.mm-menu a:active,.mm-menu a:hover,.mm-menu a:link,.mm-menu a:visited{text-decoration:none;color:inherit}:root{--mm-navbar-size:50px}.mm-navbar{display:-webkit-box;display:-ms-flexbox;display:flex;position:-webkit-sticky;position:sticky;top:0;z-index:2;min-height:var(--mm-navbar-size);padding-top:env(safe-area-inset-top);color:var(--mm-color-text-dimmed);text-align:center;opacity:1;background:var(--mm-color-background);border-bottom:1px solid var(--mm-color-border);-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.mm-navbar>*{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box}.mm-navbar__btn{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0}.mm-navbar__title{-webkit-box-flex:1;-ms-flex:1 1 50%;flex:1 1 50%;display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 20px;overflow:hidden}.mm-navbar__title[href="#"]{pointer-events:none}.mm-navbar__title>span{-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mm-btn.mm-hidden+.mm-navbar__title:not(:last-child){-webkit-padding-start:60px;padding-inline-start:60px;-webkit-padding-end:10px;padding-inline-end:10px}.mm-btn:not(.mm-hidden)+.mm-navbar__title:last-child{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:60px;padding-inline-end:60px}.mm-panel{--mm-panel-child-offset:100%;--mm-panel-parent-offset:-30%;position:absolute;left:0;right:0;top:0;bottom:0;z-index:1;-webkit-overflow-scrolling:touch;overflow:hidden;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;color:var(--mm-color-text);border-color:var(--mm-color-border);background:var(--mm-color-background);-webkit-transform:translate3d(var(--mm-panel-child-offset),0,0);transform:translate3d(var(--mm-panel-child-offset),0,0);-webkit-transition-property:inset-inline-start,-webkit-transform;transition-property:inset-inline-start,-webkit-transform;-o-transition-property:transform,inset-inline-start;transition-property:transform,inset-inline-start;transition-property:transform,inset-inline-start,-webkit-transform}[dir=rtl] .mm-panel{--mm-panel-child-offset:-100%;--mm-panel-parent-offset:30%}.mm-panel:after{content:"";display:block;height:var(--mm-listitem-size)}.mm-panel:focus{outline:0}.mm-panel--opened{z-index:2;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s}.mm-panel--parent{-webkit-transform:translate3d(var(--mm-panel-parent-offset),0,0);transform:translate3d(var(--mm-panel-parent-offset),0,0);z-index:0}.mm-panel--highest{z-index:3}.mm-menu--opened .mm-panel--noanimation{-webkit-transition:none!important;-o-transition:none!important;transition:none!important;-webkit-transition-duration:0s!important;-o-transition-duration:0s!important;transition-duration:0s!important}.mm-panel__content{padding:20px}.mm-panels{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;position:relative;height:100%;overflow:hidden;background:var(--mm-color-background);border-color:var(--mm-color-border);color:var(--mm-color-text)}.mm-panels:focus{outline:0}:root{--mm-toggle-size:34px}.mm-toggle{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-item-align:center;align-self:center;-webkit-box-flex:calc(var(--mm-toggle-size) * 1.75);-ms-flex:calc(var(--mm-toggle-size) * 1.75) 0 0px;flex:calc(var(--mm-toggle-size) * 1.75) 0 0;height:var(--mm-toggle-size);-webkit-margin-end:10px;margin-inline-end:10px;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;border:none!important;border-radius:var(--mm-toggle-size);border:var(--mm-color-border);background:var(--mm-color-border);cursor:pointer;-webkit-transition-property:background-color;-o-transition-property:background-color;transition-property:background-color}.mm-toggle:before{content:"";aspect-ratio:1;margin:2px;border-radius:100%;background:var(--mm-color-background);-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform}.mm-toggle:checked{background:#4bd963}.mm-toggle:checked:before{-webkit-transform:translateX(calc(var(--mm-toggle-size) * .75));-ms-transform:translateX(calc(var(--mm-toggle-size) * .75));transform:translateX(calc(var(--mm-toggle-size) * .75))}[dir=rtl] .mm-toggle:checked:before{-webkit-transform:translateX(calc(var(--mm-toggle-size) * -.75));-ms-transform:translateX(calc(var(--mm-toggle-size) * -.75));transform:translateX(calc(var(--mm-toggle-size) * -.75))}.mm-listitem--vertical>.mm-panel{position:static;width:100%;padding:10px 0 10px 20px;-webkit-transform:none!important;-ms-transform:none!important;transform:none!important;-webkit-transition:none!important;-o-transition:none!important;transition:none!important}.mm-listitem--vertical>.mm-panel:after{content:none;display:none}.mm-listitem--vertical:not(.mm-listitem--opened)>.mm-panel{display:none}.mm-listitem--vertical>.mm-listitem__btn{height:var(--mm-listitem-size);bottom:auto}.mm-listitem--vertical .mm-listitem:last-child:after{border-color:transparent}.mm-listitem--opened>.mm-listitem__btn:after{-webkit-transform:rotate(225deg);-ms-transform:rotate(225deg);transform:rotate(225deg);right:19px}:root{--mm-size:80%;--mm-min-size:240px;--mm-max-size:440px}.mm-menu--offcanvas{position:fixed;z-index:0}.mm-page{-webkit-box-sizing:border-box;box-sizing:border-box;min-height:100vh;background:inherit}:where(.mm-slideout){position:relative;z-index:1;width:100%;-webkit-transition-duration:.4s;-o-transition-duration:.4s;transition-duration:.4s;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-property:width,-webkit-transform;transition-property:width,-webkit-transform;-o-transition-property:width,transform;transition-property:width,transform;transition-property:width,transform,-webkit-transform}.mm-wrapper--opened,.mm-wrapper--opened body{overflow:hidden}.mm-wrapper__blocker{background:rgba(0,0,0,.4)}.mm-wrapper--opened .mm-wrapper__blocker{--mm-blocker-visibility-delay:0s;--mm-blocker-opacity-delay:0.4s;bottom:0;opacity:.5}.mm-menu{--mm-translate-horizontal:0;--mm-translate-vertical:0}.mm-menu--position-left,.mm-menu--position-left-front{right:auto}.mm-menu--position-right,.mm-menu--position-right-front{left:auto}.mm-menu--position-left,.mm-menu--position-left-front,.mm-menu--position-right,.mm-menu--position-right-front{width:clamp(var(--mm-min-size),var(--mm-size),var(--mm-max-size))}.mm-menu--position-left-front{--mm-translate-horizontal:-100%}.mm-menu--position-right-front{--mm-translate-horizontal:100%}.mm-menu--position-top{bottom:auto}.mm-menu--position-bottom{top:auto}.mm-menu--position-bottom,.mm-menu--position-top{width:100%;height:clamp(var(--mm-min-size),var(--mm-size),var(--mm-max-size))}.mm-menu--position-top{--mm-translate-vertical:-100%}.mm-menu--position-bottom{--mm-translate-vertical:100%}.mm-menu--position-bottom,.mm-menu--position-left-front,.mm-menu--position-right-front,.mm-menu--position-top{z-index:2;-webkit-transform:translate3d(var(--mm-translate-horizontal),var(--mm-translate-vertical),0);transform:translate3d(var(--mm-translate-horizontal),var(--mm-translate-vertical),0);-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform}.mm-menu--position-bottom.mm-menu--opened,.mm-menu--position-left-front.mm-menu--opened,.mm-menu--position-right-front.mm-menu--opened,.mm-menu--position-top.mm-menu--opened{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.mm-wrapper--position-left{--mm-translate-horizontal:clamp( var(--mm-min-size), var(--mm-size), var(--mm-max-size) )}.mm-wrapper--position-right{--mm-translate-horizontal:clamp( calc(-1 * var(--mm-max-size)), calc(-1 * var(--mm-size)), calc(-1 * var(--mm-min-size)) )}.mm-wrapper--position-left .mm-slideout,.mm-wrapper--position-right .mm-slideout{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.mm-wrapper--position-left.mm-wrapper--opened .mm-slideout,.mm-wrapper--position-right.mm-wrapper--opened .mm-slideout{-webkit-transform:translate3d(var(--mm-translate-horizontal),0,0);transform:translate3d(var(--mm-translate-horizontal),0,0)}.mm-wrapper--position-bottom .mm-wrapper__blocker,.mm-wrapper--position-left-front .mm-wrapper__blocker,.mm-wrapper--position-right-front .mm-wrapper__blocker,.mm-wrapper--position-top .mm-wrapper__blocker{z-index:1}.mm-menu--theme-light{--mm-color-background:#f3f3f3;--mm-color-border:rgb(0 0 0 / 0.15);--mm-color-icon:rgb(0 0 0 / 0.4);--mm-color-text:rgb(0 0 0 / 0.8);--mm-color-text-dimmed:rgb(0 0 0 / 0.4);--mm-color-background-highlight:rgb(0 0 0 / 0.05);--mm-color-background-emphasis:rgb(255 255 255 / 0.75);--mm-color-focusring:#06c}.mm-menu--theme-light-contrast{--mm-color-background:#f3f3f3;--mm-color-border:rgb(0 0 0 / 0.5);--mm-color-icon:rgb(0 0 0 / 0.5);--mm-color-text:#000;--mm-color-text-dimmed:rgb(0 0 0 / 0.7);--mm-color-background-highlight:rgb(0 0 0 / 0.05);--mm-color-background-emphasis:rgb(255 255 255 / 0.9);--mm-color-focusring:#06c}.mm-menu--theme-dark{--mm-color-background:#333;--mm-color-border:rgb(0, 0, 0, 0.4);--mm-color-icon:rgb(255, 255, 255, 0.4);--mm-color-text:rgb(255, 255, 255, 0.8);--mm-color-text-dimmed:rgb(255, 255, 255, 0.4);--mm-color-background-highlight:rgb(255, 255, 255, 0.08);--mm-color-background-emphasis:rgb(0, 0, 0, 0.1);--mm-color-focusring:#06c}.mm-menu--theme-dark-contrast{--mm-color-background:#333;--mm-color-border:rgb(255 255 255 / 0.5);--mm-color-icon:rgb(255 255 255 / 0.5);--mm-color-text:#fff;--mm-color-text-dimmed:rgb(255 255 255 / 0.7);--mm-color-background-highlight:rgb(255 255 255 / 0.1);--mm-color-background-emphasis:rgb(0 0 0 / 0.3);--mm-color-focusring:#06c}.mm-menu--theme-white{--mm-color-background:#fff;--mm-color-border:rgb(0 0 0 / 0.15);--mm-color-icon:rgb(0 0 0 / 0.3);--mm-color-text:rgb(0 0 0 / 0.8);--mm-color-text-dimmed:rgb(0 0 0 / 0.3);--mm-color-background-highlight:rgb(0 0 0 / 0.06);--mm-color-background-emphasis:rgb(0 0 0 / 0.03);--mm-color-focusring:#06c}.mm-menu--theme-white-contrast{--mm-color-background:#fff;--mm-color-border:rgb(0 0 0 / 0.5);--mm-color-icon:rgb(0 0 0 / 0.5);--mm-color-text:#000;--mm-color-text-dimmed:rgb(0 0 0 / 0.7);--mm-color-background-highlight:rgb(0 0 0 / 0.07);--mm-color-background-emphasis:rgb(0 0 0 / 0.035);--mm-color-focusring:#06c}.mm-menu--theme-black{--mm-color-background:#000;--mm-color-border:rgb(255 255 255 / 0.2);--mm-color-icon:rgb(255 255 255 / 0.4);--mm-color-text:rgb(255 255 255 / 0.7);--mm-color-text-dimmed:rgb(255 255 255 / 0.4);--mm-color-background-highlight:rgb(255 255 255 / 0.1);--mm-color-background-emphasis:rgb(255 255 255 / 0.06);--mm-color-focusring:#06c}.mm-menu--theme-black-contrast{--mm-color-background:#000;--mm-color-border:rgb(255 255 255 / 0.5);--mm-color-icon:rgb(255 255 255 / 0.5);--mm-color-text:#fff;--mm-color-text-dimmed:rgb(255 255 255 / 0.6);--mm-color-background-highlight:rgb(255 255 255 / 0.125);--mm-color-background-emphasis:rgb(255 255 255 / 0.1);--mm-color-focusring:#06c}.mm-counter{display:block;-webkit-padding-start:20px;padding-inline-start:20px;float:right;color:var(--mm-color-text-dimmed)}[dir=rtl] .mm-counter{float:left}:root{--mm-iconbar-size:50px}.mm-menu--iconbar-left .mm-navbars,.mm-menu--iconbar-left .mm-panels{margin-left:var(--mm-iconbar-size)}.mm-menu--iconbar-right .mm-navbars,.mm-menu--iconbar-right .mm-panels{margin-right:var(--mm-iconbar-size)}.mm-iconbar{display:none;position:absolute;top:0;bottom:0;z-index:2;width:var(--mm-iconbar-size);overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;border:0 solid;border-color:var(--mm-color-border);background:var(--mm-color-background);color:var(--mm-color-text-dimmed);text-align:center}.mm-menu--iconbar-left .mm-iconbar,.mm-menu--iconbar-right .mm-iconbar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mm-menu--iconbar-left .mm-iconbar{border-right-width:1px;left:0}.mm-menu--iconbar-right .mm-iconbar{border-left-width:1px;right:0}.mm-iconbar__bottom,.mm-iconbar__top{width:100%;-webkit-overflow-scrolling:touch;overflow:hidden;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:contain}.mm-iconbar__bottom>*,.mm-iconbar__top>*{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;padding:calc((var(--mm-iconbar-size) - var(--mm-lineheight))/ 2) 0}.mm-iconbar__bottom a,.mm-iconbar__bottom a:hover,.mm-iconbar__top a,.mm-iconbar__top a:hover{text-decoration:none}.mm-iconbar__tab--selected{background:var(--mm-color-background-emphasis)}:root{--mm-iconpanel-size:50px}.mm-panel--iconpanel-0{inset-inline-start:calc(0 * var(--mm-iconpanel-size))}.mm-panel--iconpanel-1{inset-inline-start:calc(1 * var(--mm-iconpanel-size))}.mm-panel--iconpanel-2{inset-inline-start:calc(2 * var(--mm-iconpanel-size))}.mm-panel--iconpanel-3{inset-inline-start:calc(3 * var(--mm-iconpanel-size))}.mm-panel--iconpanel-4{inset-inline-start:calc(4 * var(--mm-iconpanel-size))}.mm-panel--iconpanel-first~.mm-panel{inset-inline-start:var(--mm-iconpanel-size)}.mm-menu--iconpanel .mm-panel--parent .mm-divider,.mm-menu--iconpanel .mm-panel--parent .mm-navbar{opacity:0}.mm-menu--iconpanel .mm-panels>.mm-panel--parent{overflow-y:hidden;-webkit-transform:unset;-ms-transform:unset;transform:unset}.mm-menu--iconpanel .mm-panels>.mm-panel:not(.mm-panel--iconpanel-first):not(.mm-panel--iconpanel-0){border-inline-start-width:1px;border-inline-start-style:solid}.mm-navbars{-ms-flex-negative:0;flex-shrink:0}.mm-navbars .mm-navbar{position:relative;padding-top:0;border-bottom:none}.mm-navbars--top{border-bottom:1px solid var(--mm-color-border)}.mm-navbars--top .mm-navbar:first-child{padding-top:env(safe-area-inset-top)}.mm-navbars--bottom{border-top:1px solid var(--mm-color-border)}.mm-navbars--bottom .mm-navbar:last-child{padding-bottom:env(safe-area-inset-bottom)}.mm-navbar__breadcrumbs{-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-box-flex:1;-ms-flex:1 1 50%;flex:1 1 50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;padding:0 20px;overflow-x:auto;-webkit-overflow-scrolling:touch}.mm-navbar__breadcrumbs>*{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-padding-end:6px;padding-inline-end:6px}.mm-navbar__breadcrumbs>a{text-decoration:underline}.mm-navbar__breadcrumbs:not(:last-child){-webkit-padding-end:0;padding-inline-end:0}.mm-btn:not(.mm-hidden)+.mm-navbar__breadcrumbs{-webkit-padding-start:0;padding-inline-start:0}.mm-navbar__tab{padding:0 10px;border:1px solid transparent}.mm-navbar__tab--selected{background:var(--mm-color-background)}.mm-navbar__tab--selected:not(:first-child){border-inline-start-color:var(--mm-color-border)}.mm-navbar__tab--selected:not(:last-child){border-inline-end-color:var(--mm-color-border)}.mm-navbars--top.mm-navbars--has-tabs{border-bottom:none}.mm-navbars--top.mm-navbars--has-tabs .mm-navbar{background:var(--mm-color-background-emphasis)}.mm-navbars--top.mm-navbars--has-tabs .mm-navbar--tabs~.mm-navbar{background:var(--mm-color-background)}.mm-navbars--top.mm-navbars--has-tabs .mm-navbar:not(.mm-navbar--tabs):last-child{border-bottom:1px solid var(--mm-color-border)}.mm-navbars--top .mm-navbar__tab{border-bottom-color:var(--mm-color-border)}.mm-navbars--top .mm-navbar__tab--selected{border-top-color:var(--mm-color-border);border-bottom-color:transparent}.mm-navbars--bottom.mm-navbar--has-tabs{border-top:none}.mm-navbars--bottom.mm-navbar--has-tabs .mm-navbar{background:var(--mm-color-background)}.mm-navbars--bottom.mm-navbar--has-tabs .mm-navbar--tabs,.mm-navbars--bottom.mm-navbar--has-tabs .mm-navbar--tabs~.mm-navbar{background:var(--mm-color-background-emphasis)}.mm-navbars--bottom .mm-navbar__tab{border-top-color:var(--mm-color-border)}.mm-navbars--bottom .mm-navbar__tab--selected{border-bottom-color:var(--mm-color-border);border-top-color:transparent}.mm-searchfield{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:var(--mm-navbar-size);padding:0;overflow:hidden}.mm-searchfield__input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;width:100%;max-width:100%;padding:0 10px;-webkit-box-sizing:border-box;box-sizing:border-box}.mm-searchfield__input input{display:block;width:100%;max-width:100%;height:calc(var(--mm-navbar-size) * .7);min-height:auto;max-height:auto;margin:0;padding:0 10px;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;border-radius:4px;line-height:calc(var(--mm-navbar-size) * .7);font:inherit;font-size:inherit}.mm-searchfield__input input,.mm-searchfield__input input:focus,.mm-searchfield__input input:hover{background:var(--mm-color-background-highlight);color:var(--mm-color-text)}.mm-menu[class*=-contrast] .mm-searchfield__input input{border:1px solid var(--mm-color-border)}.mm-searchfield__input input::-ms-clear{display:none}.mm-searchfield__btn{display:none;position:absolute;inset-inline-end:0;top:0;bottom:0}.mm-searchfield--searching .mm-searchfield__btn{display:block}.mm-searchfield__cancel{display:block;position:relative;-webkit-margin-end:-100px;margin-inline-end:-100px;-webkit-padding-start:5px;padding-inline-start:5px;-webkit-padding-end:20px;padding-inline-end:20px;visibility:hidden;line-height:var(--mm-navbar-size);text-decoration:none;-webkit-transition-property:visibility,margin;-o-transition-property:visibility,margin;transition-property:visibility,margin}.mm-searchfield--cancelable .mm-searchfield__cancel{visibility:visible;-webkit-margin-end:0;margin-inline-end:0}.mm-panel--search{left:0!important;right:0!important;width:100%!important;border:none!important}.mm-panel__splash{padding:20px}.mm-panel--searching .mm-panel__splash{display:none}.mm-panel__noresults{display:none;padding:40px 20px;color:var(--mm-color-text-dimmed);text-align:center;font-size:150%;line-height:1.4}.mm-panel--noresults .mm-panel__noresults{display:block}:root{--mm-sectionindexer-size:20px}.mm-sectionindexer{background:inherit;text-align:center;font-size:12px;-webkit-box-sizing:border-box;box-sizing:border-box;width:var(--mm-sectionindexer-size);position:absolute;top:0;bottom:0;inset-inline-end:calc(-1 * var(--mm-sectionindexer-size));z-index:5;-webkit-transition-property:inset-inline-end;-o-transition-property:inset-inline-end;transition-property:inset-inline-end;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}.mm-sectionindexer a{color:var(--mm-color-text-dimmed);line-height:1;text-decoration:none;display:block}.mm-sectionindexer~.mm-panel{-webkit-padding-end:0;padding-inline-end:0}.mm-sectionindexer--active{right:0}.mm-sectionindexer--active~.mm-panel{-webkit-padding-end:var(--mm-sectionindexer-size);padding-inline-end:var(--mm-sectionindexer-size)}.mm-menu--selected-hover .mm-listitem__btn,.mm-menu--selected-hover .mm-listitem__text,.mm-menu--selected-parent .mm-listitem__btn,.mm-menu--selected-parent .mm-listitem__text{-webkit-transition-property:background-color;-o-transition-property:background-color;transition-property:background-color}@media (hover:hover){.mm-menu--selected-hover .mm-listview:hover>.mm-listitem--selected:not(:hover)>.mm-listitem__text{background:0 0}.mm-menu--selected-hover .mm-listitem__btn:hover,.mm-menu--selected-hover .mm-listitem__text:hover{background:var(--mm-color-background-emphasis)}}.mm-menu--selected-parent .mm-listitem__btn,.mm-menu--selected-parent .mm-listitem__text{-webkit-transition-delay:.2s;-o-transition-delay:.2s;transition-delay:.2s}@media (hover:hover){.mm-menu--selected-parent .mm-listitem__btn:hover,.mm-menu--selected-parent .mm-listitem__text:hover{-webkit-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s}}.mm-menu--selected-parent .mm-panel--parent .mm-listitem:not(.mm-listitem--selected-parent)>.mm-listitem__text{background:0 0}.mm-menu--selected-parent .mm-listitem--selected-parent>.mm-listitem__btn,.mm-menu--selected-parent .mm-listitem--selected-parent>.mm-listitem__text{background:var(--mm-color-background-emphasis)}:root{--mm-sidebar-collapsed-size:50px;--mm-sidebar-expanded-size:var(--mm-max-size)}.mm-wrapper--sidebar-collapsed .mm-slideout{width:calc(100% - var(--mm-sidebar-collapsed-size));-webkit-transform:translate3d(var(--mm-sidebar-collapsed-size),0,0);transform:translate3d(var(--mm-sidebar-collapsed-size),0,0)}[dir=rtl] .mm-wrapper--sidebar-collapsed .mm-slideout{-webkit-transform:none;-ms-transform:none;transform:none}.mm-wrapper--sidebar-collapsed:not(.mm-wrapper--opened) .mm-menu--sidebar-collapsed .mm-divider,.mm-wrapper--sidebar-collapsed:not(.mm-wrapper--opened) .mm-menu--sidebar-collapsed .mm-navbar{opacity:0}.mm-wrapper--sidebar-expanded .mm-menu--sidebar-expanded{width:var(--mm-sidebar-expanded-size);border-right-width:1px;border-right-style:solid}.mm-wrapper--sidebar-expanded.mm-wrapper--opened{overflow:auto}.mm-wrapper--sidebar-expanded.mm-wrapper--opened .mm-wrapper__blocker{display:none}.mm-wrapper--sidebar-expanded.mm-wrapper--opened .mm-slideout{width:calc(100% - var(--mm-sidebar-expanded-size));-webkit-transform:translate3d(var(--mm-sidebar-expanded-size),0,0);transform:translate3d(var(--mm-sidebar-expanded-size),0,0)}[dir=rtl] .mm-wrapper--sidebar-expanded.mm-wrapper--opened .mm-slideout{-webkit-transform:none;-ms-transform:none;transform:none} #colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;-webkit-transform:translate3d(0,0,0)}#cboxWrapper{max-width:none}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic}.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#cboxOverlay{background:#000;opacity:.9;filter:alpha(opacity = 90)}#colorbox{outline:0}#cboxContent{margin-top:20px;background:#000}.cboxIframe{background:#fff}#cboxError{padding:50px;border:1px solid #ccc}#cboxLoadedContent{border:5px solid #000;background:#fff}#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc}#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}#cboxLoadingGraphic{background:url(../../assets/colorbox/images/loading.gif) no-repeat center center}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0 0}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top left;width:28px;height:65px;text-indent:-9999px}#cboxPrevious:hover{background-position:bottom left}#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top right;width:28px;height:65px;text-indent:-9999px}#cboxNext:hover{background-position:bottom right}#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(../../assets/colorbox/images/controls.png) no-repeat top center;width:38px;height:19px;text-indent:-9999px}#cboxClose:hover{background-position:bottom center} /* roboto-300 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Roboto'; font-style: normal; font-weight: 300; src: url('../../files/fonts/roboto-v32-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* roboto-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url('../../files/fonts/roboto-v32-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* roboto-500 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Roboto'; font-style: normal; font-weight: 500; src: url('../../files/fonts/roboto-v32-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* roboto-700 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url('../../files/fonts/roboto-v32-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* roboto-condensed-100 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Roboto Condensed'; font-style: normal; font-weight: 100; src: url('../../files/fonts/roboto-condensed-v27-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* roboto-condensed-200 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Roboto Condensed'; font-style: normal; font-weight: 200; src: url('../../files/fonts/roboto-condensed-v27-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* roboto-condensed-300 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Roboto Condensed'; font-style: normal; font-weight: 300; src: url('../../files/fonts/roboto-condensed-v27-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* roboto-condensed-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400; src: url('../../files/fonts/roboto-condensed-v27-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* roboto-condensed-500 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Roboto Condensed'; font-style: normal; font-weight: 500; src: url('../../files/fonts/roboto-condensed-v27-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* roboto-condensed-600 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Roboto Condensed'; font-style: normal; font-weight: 600; src: url('../../files/fonts/roboto-condensed-v27-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* roboto-condensed-700 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Roboto Condensed'; font-style: normal; font-weight: 700; src: url('../../files/fonts/roboto-condensed-v27-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* roboto-condensed-800 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Roboto Condensed'; font-style: normal; font-weight: 800; src: url('../../files/fonts/roboto-condensed-v27-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* roboto-condensed-900italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Roboto Condensed'; font-style: italic; font-weight: 900; src: url('../../files/fonts/roboto-condensed-v27-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } :root { --container_margin: 0 auto; --container_min-width: 768px; --container_max-width: 1380px; --container_width: 75vw; --triangle_wide-769to1030px: calc(( 100vw - 768px) / 2); --triangle_small-769to1030px: calc(( 100vw - 768px) / 2 / 5.1667); --triangle_width-769to1030px: calc(50% - 526px); --triangle_wide-1840px: calc(( 100vw - 1380px) / 2); --triangle_small-1840px: calc(( 100vw - 1380px) / 2 / 5.1667); --triangle_section: calc(( 100vw - 100%) / 2); } body { font-size: 100.01%; -webkit-text-size-adjust: 100.01%; color: #000; font-family:'Roboto', Verdana, Arial, Helvetica, sans-serif; letter-spacing: .03em; width: 100%; width: calc(100vw - (100vw - 100%)); /* 100vw minus scrollbar width */ /* page transition */ background: #333; /* or lighter: #DDD ? */ visibility: hidden; } .clear { height: .1px; font-size: .1px; line-height: .1px; clear: both; } /* reset ugly borders on iphone */ input[type=text], input[type=search], input[type=button], input[type=submit], input[type=number] { -webkit-appearance: none; border-radius: 0; } input[type=search] { -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; } input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration { -webkit-appearance: none; } textarea, input, button { outline: none; } /* ========================================================================== fonts Roboto: 300, 400 regular, 500, 700 Roboto Condensed: 100, 200, 300, 400 regular, 500, 600, 700, 800 ========================================================================== */ a, a:focus, a:active { outline: none; } a { color: #f0f0f0; text-decoration: none; font-weight: 400; } a:hover { color: #26394d; } #main .inside .mod_article { color: #000; font-weight: 300; font-size: 1.5rem; font-size: clamp(1rem, 1.35vw, 1.4rem); line-height: 1.6em; } #main .inside .mod_article.green { color: #fff; } h1, h2, h3, h4, h5 { color: #95916c; font-family:'Roboto Condensed', Verdana, Arial, Helvetica, sans-serif; line-height: 1.2em; margin-bottom: .5em; } .mod_article.green h1, .mod_article.green h2, .mod_article.green h3, .mod_article.green h4, .mod_article.green h5 { color: #f2faea; } h1 { font-weight: 600; font-size: 3em; } h2 { font-weight: 400; font-size: 3em; } h3 { font-weight: 400; font-size: 2.5em; } h4 { font-weight: 400; font-size: 2em; } h5 { font-weight: 500; font-size: 1.3em !important; } /* ========================================================================== main, container, wrapper, root (and footer triangles) ========================================================================== */ #wrapper { min-height: 100vh; min-height: 100svh; position: relative; overflow: hidden; } #container { /* overflow: hidden; width: 95%; padding-bottom: 90px; position: relative; z-index: 1; clear: both; background: #333; outline: 1px solid rgba(0,0,0,.2); */ background: #fff; } /* styles relevant for parallax */ #top_container, header, #container, .placeholder { position: relative; } #top_container { z-index: 11; } header { z-index: 10; } #container { z-index: 9; } .placeholder { z-index: 1; } /* - - - - - - - - - - - - - - */ /* triangle footer */ footer:before, footer:after, #container:before, #container:after { content:''; display: block; position: absolute; -webkit-transform:rotate(360deg); border-style: solid; width: 0px; height: 0px; box-shadow: 0px -1px 0px 0px #fff; /* avoid blanks */ } #container:before { bottom: -27.48px; left: calc(50% - 526px); border-width: 27.48px 142px 0 0; border-color: #fff transparent transparent transparent; } #container:after { bottom: -27.48px; right: calc(50% - 526px); border-width: 0 142px 27.48px 0; border-color: transparent #fff transparent transparent; } footer:before { top: 0; left: calc(50% - 526px); border-width: 27.48px 142px 0 0; border-color: #fff transparent transparent transparent; } footer:after { top: 0; right: calc(50% - 526px); border-width: 0 142px 27.48px 0; border-color: transparent #fff transparent transparent; } #main { /* background: linear-gradient(to right, #4e4e4e 13px, #1a1a1a 20px, #1a1a1a calc(100% - 20px), #4e4e4e calc(100% - 13px), #4e4e4e 100%); */ float: none; margin: var(--container_margin); min-width: var(--container_min-width); max-width: var(--container_max-width); width: var(--container_width); padding-top: 6.5vw; } #main .inside { margin: 0 3.4%; /* set left/right space here !!! */ padding: 30px 0; /* set top/bottom space here !!! */ /* min-height: calc(100vh - 70px - 20px - 152px - 20px - 118px); min-height: calc(100svh - 70px - 20px - 152px - 20px - 118px); margin-left: 20px; margin-right: 20px; padding: 59px 2.7%; padding-top: 59px; padding-bottom: 59px; padding-left: clamp(12px, 2.7%, 32px); padding-right: clamp(12px, 2.7%, 32px); background: #333; */ /* transition: min-height .3s ease-in-out; */ } .mod_article { padding-top: 30px; padding-bottom: 30px; } .mod_article.green { background: #78d126; position: relative; overflow: visible; width: 100%; padding-left: 3.65474%; padding-right: 3.65474%; margin-left: -3.65474%; } .mod_article.green:before, .mod_article.green:after { content:''; display: block; position: absolute; top: 0px; height: 100%; width: var(--triangle_section); } .mod_article.green:before { left: calc(var(--triangle_section) * -1); background: #78d126 url('../../files/tmpl/triangle_section_l.svg') right top no-repeat; background-size: cover; border-right: 1px solid #78d126; } .mod_article.green:after { right: calc(var(--triangle_section) * -1); background: #78d126; background: #78d126 url('../../files/tmpl/triangle_section_r.svg') left top no-repeat; background-size: cover; border-left: 1px solid #78d126; } /* ========================================================================== header ========================================================================== */ #top_container { display: block; width: 100%; max-height: 58px; height: 3.6vw; background: #484848; position: relative; } #top_container .inside { margin: var(--container_margin); min-width: var(--container_min-width); max-width: var(--container_max-width); width: var(--container_width); display: flex; height: 100%; background: transparent url('../../files/tmpl/bg_top_container.svg') center top no-repeat; background-size: 124px 58px; } .funcbar, .menubar { display: flex; align-items: center; width: 50%; /* height: 100%; */ } .funcbar { } .menubar { justify-content: flex-end; background: #807b50; } header { background: #000; position: relative; /* border-bottom: 21px solid #fff; */ border-bottom: clamp(3px, 1.5vw, 21px) solid #fff; box-shadow: 0px 0px 200px 0px rgba(0,0,0,0.25); } header .inside { position: relative; margin: var(--container_margin); min-width: var(--container_min-width); max-width: var(--container_max-width); width: var(--container_width); max-height: 325px; aspect-ratio: 1380 / 550; background: #5e8f28; } body.startpage header .inside { max-height: 702px; aspect-ratio: 1380 / 702; background: #666; } header .titlesection { position: absolute; width: 100%; } body:not(.startpage) header .titlesection { top: calc(100% - 9.56213vw); height: 15.65217vw; max-height: 288px; background: transparent url('../../files/tmpl/bg_headertitle_v5a.svg') -1px center no-repeat; background-size: contain; } body.startpage header .titlesection { top: 61.9658%; height: 53.9886%; /* 100% => 702px */ background: transparent url('../../files/tmpl/bg_headertitle_v1d.svg') -1px bottom no-repeat; background-size: contain; } header .titlesection .title { display: inline-block; margin-left: 3.2609%; font-family: 'Roboto Condensed', Verdana, Arial, Helvetica, sans-serif; letter-spacing: .01em; top: 33.5%; color: rgba(255,255,255,.6); position: relative; } /* body:not(.startpage) header .titlesection { display: flex; justify-content: flex-end; align-items: center; } body:not(.startpage) header .titlesection .title { text-transform: uppercase; font-weight: 300; display: inline-block; font-size: 42px; font-size: min(42px, 2.5vw); margin-right: 3.7%; margin-top: .6154%; } */ header .titlesection .line1 { font-weight: 300; font-size: 2vw; margin-left: 1px; } header .titlesection .line2 { font-weight: 400; font-size: 3vw; line-height: 155%; margin-left: -1px; } header .headerimg { width: 100%; height: 81.5385%; background: #666; display: flex; justify-content: flex-end; } header .headerimg .mod_pageimage { height: 100%; width: 90.17%; width: clamp(72.3%, 88.6%, 1039px); display: flex; align-items: center; } header .headerimg figure { } header .pagetitlesection { height: 18.4615%; display: flex; justify-content: flex-end; align-items: center; font-family: 'Roboto Condensed', Verdana, Arial, Helvetica, sans-serif; letter-spacing: .01em; width: 100%; position: absolute; bottom: 0; } header .pagetitlesection .title { color: #bfd2a9; text-transform: uppercase; margin-right: 3.7%; margin-top: .35%; font-weight: 300; font-size: min(42px, 2.5vw); font-size: clamp(30px, 2.5vw, 42px); } /* triangles header */ header .titlesection:before, header .titlesection:after { content:''; display: block; position: absolute; -webkit-transform: rotate(360deg); border-style: solid; width: 0px; height: 0px; top: 149px; box-shadow: 0px -1px 0px 0px #000; /* prevent blanks */ } /* triangle header left */ header .titlesection:before { left: -129px; border-width: 27.48px 142px 0 0; border-color: #000 transparent transparent transparent; } /* triangle header right */ header .titlesection:after { right: -142px; border-width: 0 142px 27.48px 0; border-color: transparent #000 transparent transparent; } header .logosection { position: absolute; top: 0; left: 0; width: calc(50% - 3.6vw); height: 100%; background: transparent url('../../files/tmpl/bg_logo-std.svg') right top no-repeat; } body.startpage header .logosection { background: transparent url('../../files/tmpl/bg_logo.svg') left top no-repeat; background-size: contain; } header .logosection:before { content: ''; display: inline-block; height: 100%; width: 100%; margin-left: 19px; background: transparent url('../../files/tmpl/bg_logo-shadow3.svg') right top no-repeat; } body.startpage header .logosection:before { width: 106.0509%; margin-left: 0; background: transparent url('../../files/tmpl/bg_logo-shadow3.svg') left top no-repeat; background-size: contain; } .lefthead_shape { position: absolute; left: 0; width: 12.5vw; background: #333; height: 45.846152%; max-height: 149px; } body.startpage .lefthead_shape { height: 61.9658%; max-height: 435px; } .lefthead_shape:after { content: ''; display: block; bottom: 0; right: 0; position: absolute; -webkit-transform:rotate(360deg); border-style: solid; width: 0px; height: 0px; border-width: 2.4194vw 0 0 12.5vw; border-color: transparent transparent transparent #000; } header .logo { display: inline-block; aspect-ratio: 41 / 22 !important; width: 52.2293%; height: 25.0712%; left: 5.8917%; top: 4.1311%; position: absolute; background: transparent url('../../files/tmpl/logo_faunistica.svg') center top no-repeat; background-size: contain; /* outline: 1px solid rgba(200,150,180,.8); */ } body:not(.startpage) header .logo { max-width: 193px; width: 40%; top: 9%; left: 3.2%; margin-left: 2vw; height: auto; } header .logo a { display: inline-block; width: 100%; height: 100%; } /* ========================================================================== header video / pageimage ========================================================================== */ body.startpage header video { /* display: none; */ max-width: 1380px; max-height: 702px; width: 100%; height: 100%; aspect-ratio: 1380 / 702; object-fit: cover; pointer-events: all; pointer-events: none; position: relative; } /* ========================================================================== footer ========================================================================== */ footer { position: fixed; /* parallax */ bottom: 0; /* parallax */ z-index: 2; /* parallax */ background: #000; color: #fff; width: 100%; } footer .inside { position: relative; margin: var(--container_margin); min-width: var(--container_min-width); max-width: var(--container_max-width); width: var(--container_width); padding-top: 1.7em; padding-bottom: 1.4em; background: #484848; border-bottom: 34px solid #78d126; border-bottom: clamp(11px, 1.8478vw, 34px) solid #78d126; } footer .content { margin: var(--container_margin); width: 93.1884%; display: flex; justify-content: flex-start; align-items: flex-start; align-content: flex-start; transition-property: padding-top, padding-bottom; transition-duration: .25s; transition-timing-function: ease-out; transition: padding .25s ease-in-out; } .adressblock { /* background: rgba(255,255,255,.5); */ } #prefooter .inside { text-align: center; padding: 4% 0; } #prefooter .zauni img { width: 45%; max-width: 602px; min-width: 190px; } footer .inside { font-family:'Roboto Condensed', Verdana, Arial, Helvetica, sans-serif; } footer .footerbox { font-weight: 200; line-height: 1.45em; font-size: clamp(0.9rem, 0.51rem + 0.56vw, 1.15rem); } footer .footerbox a, footer .topicsblock ul li strong { font-weight: 200; } footer .footerbox a:hover { color: #bbb08e; } footer .footerbox h3 { font-weight: 300; font-size: 1.3em; margin-top: 0; } footer .phonemail { margin-top: .5em; } footer .adressblock { margin-right: 3.8vw; } footer .openingblock { margin-right: 4.5vw; } footer .topicsblock ul { list-style-type: none; } footer .topicsblock ul li:before { content: '\25B6' ' '; font-size: .6em; vertical-align: top; color: #9a8b5d; } /* footer .topicsblock ul li.active, */ footer .topicsblock ul li.active:before { color: #78d126; } footer .topics_left { float: left; } footer .topics_left ul { margin-right: max(25px, 2.5vw); } @media all and (max-width: 1500px) { footer .inside { padding-top: 4.4em; padding-bottom: 1.4em; } } @media all and (max-width: 1200px) { footer .content { justify-content: space-between; } footer .adressblock { margin-right: 0; } footer .openingblock { margin-right: 0; } } @media all and (max-width: 767px) { footer .inside { padding-top: 2.6em; padding-bottom: 1.4em; } footer .footerbox { font-size: clamp(0.9rem, 0.76rem + 0.71vw, 1.1rem); } footer .content { justify-content: space-between; flex-wrap: wrap-reverse; align-items: baseline; gap: 20px; } } @media all and (max-width: 429px) { footer .inside { padding-top: 3.6em; padding-bottom: 2em; } } @media all and (max-width: 530px) { footer .inside { padding-top: 3.6em; padding-bottom: 2em; } footer .content { justify-content: center; } footer .footerbox { text-align: center; width: 100%; } footer .topicsblock { width: 100%; padding-bottom: .7em; border-bottom: 1px dotted #ccc; } footer .topicsblock ul { text-align: left; } footer .topics_right { float: right; } } /* ========================================================================== footermenu ========================================================================== */ #footermenu { position: absolute; right: 0; top: 0; background: #807b50; text-align: right; padding: clamp(6px, 1.3vw, 13px) 3.261%; padding-left: 2.6%; height: auto; overflow: visible; } #footermenu:before { content: ''; display: block; height: 100%; width: 62px; position: absolute; left: -62px; top: 0; background: transparent url('../../files/tmpl/bg_top_container.svg') right top no-repeat; background-size: 124px 58px; transform: rotate(180deg); } #footermenu ul { font-family:'Roboto Condensed', Verdana, Arial, Helvetica, sans-serif; } #footermenu ul li a, #footermenu ul li strong, #footermenu ul li:after, footer > .inside { font-weight: 400; } #footermenu ul li.active, #footermenu ul li a { /* padding: 4px 8px; */ display: inline-block; } #footermenu ul li { float: left; margin-left: clamp(8px, 1.25vw, 12px); font-size: clamp(13px, 0.36em + 2vw, 1em); text-transform: uppercase; } #footermenu ul li:first-child { margin-left: 0px; } #footermenu ul li a { color: #e6e5dc; text-decoration: none; } #footermenu ul li a:hover { color: #fff; } #footermenu ul li strong.active { color: #fff; } /* ========================================================================== misc | distances ========================================================================== */ .mod_article > div:first-child h1, .mod_article > div:first-child h2, .mod_article > div:first-child h3, .mod_article > div:first-child h4, .mod_article > div:first-child h5 { margin-top: 0; } .spacer1 { display: inline-block; width: 4em; } /* ========================================================================== content elements and images ========================================================================== */ /* ======================== images, general ======================== */ #main img, #main embed, #main object, #main video { max-width: 100%; height: auto; width: auto; } #main figure { /* background: #ff9900; */ overflow: hidden; border-radius: 8px; } #main figure img { border-radius: 8px; } /* solution for older browsers without CAA :has-support | needs jquery */ #main figure.withcaption, #main figure.withcaption img { border-radius: 8px 8px 0 0; } #main figure img, #main figure a img { vertical-align: bottom; z-index: 10; position: relative; height: auto; } #main div.media--left figure, #main div.media--right figure { height: auto; width: auto; margin-bottom: 0.9em; } #main div.media--left figure { margin-right: 3%; float: left; } #main div.media--right figure { margin-left: 3%; float: right; } #main div.media--above figure { margin-bottom: 0.9em; } #main .media_below figure { margin-top: 1.2em; } #main figure figcaption { background: #95916c; /* background: #6caf1d; */ font-size: 0.78em; line-height: 1.3em; color: #fff; border-radius: 0 0 8px 8px; position: relative; box-shadow: 0px -3px 0px 0px rgba(255,255,255,.6); padding: 4px 10px; /* border-top: 1px solid #fff; */ z-index: 20; -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } /* ======================== images, special ======================== */ #main div.media figure { min-width: 150px !important; } #main div.media figure.image20 { width: 20% !important; } #main div.media figure.image25 { width: 25% !important; } #main div.media figure.image30 { width: 30% !important; } #main div.media figure.image35 { width: 35% !important; } #main div.media figure.image40 { width: 40% !important; } #main div.media figure.image50 { width: 50% !important; } #main div.media figure.image60 { width: 60% !important; } #main div.media figure.image70 { width: 70% !important; } #main div.media figure.image80 { width: 77% !important; } #main div.media figure.image100 { width: 100% !important; margin-left: 0; margin-right: 0; } /* breakpoints at 'Lorem ipsum dolor' + 20px (with scrollbar) */ @media all and (max-width: 357px) { #main div.media figure.image20, #main div.media figure.image25, #main div.media figure.image30, #main div.media figure.image35, #main div.media figure.image40, #main div.media figure.image50 { width: 100% !important; } } @media all and (max-width: 508px) { #main div.media figure.image60 { width: 100% !important; } } @media all and (max-width: 683px) { #main div.media figure.image70 { width: 100% !important; } } @media all and (max-width: 1200px) { #main div.media figure.image80 { width: 100% !important; } } /* header, #prefooter { display: none; } footer .inside { max-height: 10px; } */ /* ======================== hover effect ======================== */ /* ======================== (un)ordered lists ======================== */ .content-list ul, .content-text ul { list-style: none; } .content-list ul, .content-text ul, .content-list ol, .content-text ol { font-size: .95em; margin: 1.3em 0; /* box */ display: inline-block; padding: 1em !important; border-radius: 1em; background: #f5faf0; border: 2px solid #78d126; } .content-list ul li, .content-text ul li { margin: .3em 0; position: relative; /* no box-style: left: 2.5em; padding-right: 2.5em; */ /* box-style */ left: 1.8em; padding-right: 1.8em; } /* span requires modified templates */ .content-list ul li span, .content-text ul li span { display: block; position: relative; } .content-list ul li span::before, .content-text ul li span::before { content: '\2022'; font-weight: 600; vertical-align: middle; color: #a43a20; display: inline-block; float: left; position: absolute; margin-left: -0.85em; font-size: 1.5em; } .content-list ol, .content-text ol { list-style-image: none; font-weight: 500; } .content-list ol li, .content-text ol li { margin: .3em 0; position: relative; color: #a43a20; /* no box-style: left: 2.4em; padding-right: 2.4em; */ /* box-style */ left: 1.7em; padding-right: 1.7em; } .content-list ol li span, .content-text ol li span { font-weight: 300; display: block; margin-left: .1em; color: #000; } .content-list ul, .content-list ol { padding-top: 0; } .content-list ul strong, .content-list ol strong, .content-text ul strong, .content-text ol strong { font-weight: 500!important; } .content-list ol ol, .content-list ol ul, .content-text ol ol, .content-text ol ul, .content-list ul ol, .content-list ul ul, .content-text ul ol, .content-text ul ul { margin-left: 1.125em; margin-top: .8em; list-style-type: circle; } .mod_article.green .content-list ol li span, .mod_article.green .content-text ol li span, .mod_article.green .content-list ul li span, .mod_article.green .content-text ul li span { color: #fff; } .mod_article.green .content-list ul li span::before, .mod_article.green .content-text ul li span::before, .mod_article.green .content-list ol li, .mod_article.green .content-text ol li { color: #deff24; } .mod_article.green .content-list ul, .mod_article.green .content-text ul, .mod_article.green .content-list ol, .mod_article.green .content-text ol { background: rgba(103,183,29,.5); border: 2px solid #c9eda8; } /* ======================== */ /* responsive tables */ /* ======================== */ /* ======================== teaserboxes ======================== */ /* ========================================================================== colorbox [x] / lightbox / lightcase ========================================================================== */ /* ======================== toTop ======================== */ #toTop { cursor: pointer; display: inline-block; width: 60px; height: 60px; z-index: 1001; /* right: calc(2.5% + 4px); */ display: none; transition: top .12s ease-out, transform .6s ease-in-out, opacity .5s ease-in-out, right .3s ease-out; place-items: center; border-radius: 50%; background-color: #b1e52f; opacity: .5; } #toTop .innerCircle { display: block; height: calc(100% - 8px); width: calc(100% - 8px); background: #edf3e7 url('../../files/tmpl/toTop.svg') top 15px center no-repeat; background-size: 28px; border-radius: 50%; display: grid; font-size: 35px; color: #001a2e; /* opacity: .8; */ } #toTop:hover, #toTop:focus, #toTop:active { opacity: 1; transition: opacity 1s ease; } /* ========================================================================== retina stuff ========================================================================== */ @media all and (-webkit-min-device-pixel-ratio: 2), all and ( min--moz-device-pixel-ratio: 2), all and ( -o-min-device-pixel-ratio: 2/1), all and ( min-device-pixel-ratio: 2), all and ( min-resolution: 192dpi), all and ( min-resolution: 2dppx) { } /* ========================================================================== general media queries ========================================================================== */ @media all and (max-width: 767px) { #container, #main, #top_container .inside, header .inside, footer .inside { min-width: 100%; } .lefthead_shape, header .titlesection:before, header .titlesection:after, #container:before, #container:after { display: none; } header .logosection:before { margin-left: 0; width: 106.0509%; } body:not(.startpage) header .titlesection { top: 67.2241%; height: 53.8961%; } header .titlesection .line1 { font-size: 2.59vw; } header .titlesection .line2 { font-size: 4.065vw; } header .pagetitlesection .title { margin-left: 3.7%; font-size: min(30px, 3.8vw); } #toTop { right: 3.25vw; } } @media all and (min-width: 768px) and (max-width: 1030px) { header .logosection { /* border-width: calc((384px - 3.6vw) * 0.933121) calc(384px - 3.6vw) 0 0; */ width: calc(50% - 3.6vw - 1px); } header .titlesection .line1 { font-size: 19.9px; } header .titlesection .line2 { font-size: 31.4px; } body:not(.startpage) header .titlesection:before { top: 101px; } body:not(.startpage) header .titlesection:after { top: 100px; } body:not(.startpage) header .lefthead_shape { height: 208px; max-height: none; } .lefthead_shape { width: calc(( 100vw - 768px) / 2); } body:not(.startpage) header .inside { height: 306px; } body:not(.startpage) header .titlesection { top: 206px; height: 164px; } #main { padding-top: 48px; } #toTop { right: calc((100% - 768px) / 2 + 27px); } } @media all and (min-width: 1031px) and (max-width: 1609px) { header .logosection { width: calc(50% - 3.6vw - 2px); } #toTop { right: calc(6.25% - 38px); } } @media all and (min-width: 1610px) and (max-width: 1839px) { header .logosection { width: calc(50% - 62px); } #toTop { right: calc(6.25% - 38px); } } @media all and (min-width: 1031px) and (max-width: 1839px) { header .titlesection .line1 { font-size: 1.93vw; } header .titlesection .line2 { font-size: 3.05vw; } header .titlesection:before { left: -12.8vw; border-width: 2.6674vw 13.78151vw 0 0; } header .titlesection:before, header .titlesection:after { top: 70.5405%; } body:not(.startpage) header .titlesection:before, body:not(.startpage) header .titlesection:after { top: 61.11111%; } #container:before { bottom: calc(-2.4194vw + 1px); } #container:before, footer:before { border-width: 2.4194vw calc(12.5vw + 1px) 0 0; left: auto; right: calc(75vw - (75vw - 75%) + 12.5vw); } .lefthead_shape { left: auto; right: calc(75vw - (75vw - 75%) + 12.5vw); } body:not(.startpage) .lefthead_shape { height: calc(100% - 9.5704048vw); max-height: none; } header .titlesection:after, #container:after, footer:after { border-width: 0 calc(12.5vw + 1px) 2.4194vw 0; } header .titlesection:after { right: -12.5vw; } #container:after { bottom: calc(-2.4194vw + 1px); } #container:after, footer:after { right: auto; left: calc(75vw - (75vw - 75%) + 12.5vw); } #main { padding-top: 4.7vw; } /* #toTop { right: max(46px, 2.5vw); } */ } @media all and (min-width: 1840px) { header .logosection { width: 628px; } .lefthead_shape { width: var(--triangle_wide-1840px); } .lefthead_shape:after { border-width: var(--triangle_small-1840px) 0 0 calc(var(--triangle_wide-1840px) + 1px); } #container:before, footer:before { border-width: var(--triangle_small-1840px) var(--triangle_wide-1840px) 0 0; left: auto; right: calc(50% + 691px); } body:not(.startpage) header .titlesection { top: 149px; } header .titlesection .line1 { font-size: 35.5px; } header .titlesection .line2 { font-size: 56px; } header .titlesection:before { border-width: calc(((100vw - 1380px) / 2 + 22px) / 5.1667) calc(var(--triangle_wide-1840px) + 22px) 0 0; left: auto; right: calc(50% + 669px); } header .titlesection:after, footer:after, #container:after { border-width: 0 var(--triangle_wide-1840px) var(--triangle_small-1840px) 0; right: auto; left: calc(50% + 691px); } #container:before, #container:after { bottom: calc(var(--triangle_small-1840px) * -1); } header .titlesection:before, header .titlesection:after { top: 70.5405% } body:not(.startpage) header .titlesection:before, body:not(.startpage) header .titlesection:after { top: 61.11111%; } #main { padding-top: 91px; } #toTop { /* right: calc(50vw - 866px); */ right: calc(40% - 654px); } } /* https://jsfiddle.net/Matt_Coughlin/UYRFY/ https://davidgierth.de/tools/css-triangle-generator/ */ .triangle_right9676789697 { width: 0px; height: 0px; -webkit-transform:rotate(360deg); border-style: solid; border-width: 0 3.1vw .6vw 0; border-color: transparent #000000 transparent transparent; } /* ========================================================================== mainmenu standard ========================================================================== */ #mobilemenu, #mobilemenu_button { display: none; } .mm-wrapper__blocker { visibility: hidden; } #mainmenu { height: 100%; margin-right: 6.5217%; overflow: visible; position: relative; z-index: 1500; letter-spacing: .025em; } /* ************************ */ /* level 1 */ /* ************************ */ #mainmenu ul.level_1>li a { font-weight: 400; } #mainmenu ul.level_1 { padding: 0; height: 100%; /* height: calc(100% - 2px); border-top: 1px solid transparent; border-bottom: 1px solid transparent; */ list-style-type: none; display: flex; } /* #mainmenu ul.level_1>li:hover>a, */ #mainmenu ul.level_1>li.active strong, #mainmenu ul.level_1>li.submenu.trail>a.submenu.trail, #mainmenu ul.level_1>li.forward.submenu.trail>strong.forward.submenu.trail { font-weight: 400; } #mainmenu ul li a { text-decoration: none; } #mainmenu ul { font-family:'Roboto Condensed', Verdana, Arial, Helvetica, sans-serif; } #mainmenu ul.level_1>li { display: flex; align-items: center; font-size: 1.07em; font-size: clamp(0.5em, 0.36em + 0.71vw, 1.07em); text-transform: uppercase; } #mainmenu ul.level_1>li.first { margin-left: 0; } /* 1st level padding (!= distance between buttons) */ #mainmenu ul.level_1>li>a, #mainmenu ul.level_1>li.active strong { padding: 0 9.5px; padding: 0 min(9.5px, .5vw); } #mainmenu ul.level_1>li>a/* , #mainmenu ul.level_1>li>span.forward.trail.submenu */ { display: flex; align-items: center; height: 100%; z-index: 1; } #mainmenu ul.level_1>li.active strong { cursor: default; } #mainmenu ul.level_1>li.active strong.active { } #mainmenu ul.level_1>li>a { transition: 0.8s color ease; } #mainmenu ul.level_1>li { position: relative; } #mainmenu ul.level_1>li:not(.active)::before { z-index: 0; content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; /* transform: scale3d(1,0,1) rotate(-5deg); */ transform: scale3d(1,0,1); transform-origin: 0% 100%; background: rgba(255,255,255,.3); /* background: linear-gradient(#000, transparent 80%) no-repeat; */ /* box-shadow: inset 0px 3px 0px 0px #78d126; */ /* transition mouse leave */ transition-property: transform, opacity; transition-duration: 1.1s; transition-timing-function: ease-in-out; transition-delay: 0.25s; opacity: 0.5; } #mainmenu ul.level_1>li:not(.active, .trail):hover::before { transform: scale3d(1,1,1); transform-origin: 50% 0%; /* transition mouse over */ transition-property: transform, opacity; transition-duration: 0.3s; transition-timing-function: ease-out; transition-delay: 0s; opacity: 1; } #mainmenu ul.level_1>li:not(.active.submenu):not(.submenu.trail):hover>a:after { width: 100%; left: 0; } /* 1st level default link color */ #mainmenu ul>li>a, #mainmenu ul>li>span.submenu { color: #e6e5dc; } /* 1st level hover color */ #mainmenu ul.level_1>li:hover>a { color: #fff; transition: 0.3s color ease; } #mainmenu ul.level_1>li:hover>a.trail, #mainmenu ul.level_1>li:hover>span.forward.trail { } #mainmenu ul.level_1>li.active:hover, #mainmenu ul.level_1 span.submenu:hover { /* background: #fff; */ } /* 1st level active link color */ #mainmenu ul.level_1>li.active/* , #mainmenu ul.level_1>li.trail.sibling, #mainmenu ul.level_1>li.submenu span.trail */ { color: #fff; /* box-shadow: 0px -4px 0px 0px #973774; line grow effect */ background: rgba(110,38,38,1); box-shadow: inset -10px 0px 1px -9px rgba(0,0,0,0.33), inset 10px 0px 1px -9px rgba(0,0,0,0.33); } #mainmenu ul.level_1>li.trail.sibling a { color: #fff; padding: 0; } #mainmenu li.active.submenu span.active.submenu { } /* 1st level 'active button with submenu' link color */ #mainmenu ul.level_1>li>.active.submenu { color: rgba(255,255,255,.9); cursor: pointer; /* box-shadow: 0px -4px 0px 0px #973774; line grow effect */ } /* 1st level 'button with active submenu button' link color */ #mainmenu ul.level_1>li.submenu.trail>a.submenu.trail, #mainmenu ul.level_1>li.forward.submenu.trail>span.forward.submenu.trail { color: rgba(255,255,255,.9); background: rgba(255,255,255,.3); /* box-shadow: 0px 2px 0px 0px #735aa3; */ /* background: #ff9900; */ } #mainmenu ul>li>a, #mainmenu ul>li>.active, span.submenu { display: block; text-decoration: none; transition: background-color .10s ease-in, border-color .18s ease-in; } #mainmenu .submenu { cursor: pointer; } /* ************************ */ /* level 2 */ /* ************************ */ #mainmenu ul.level_2 { font-size: .95em; position: absolute; top: 100%; /* left: -9999px; */ cursor: pointer; border-radius: 0; padding: 0; /* padding: 0 0 5px 0; */ /* background: rgba(239,239,239,.93); */ background: rgba(255,255,255,.9); border-bottom: 1px solid rgba(255,255,255,.5); border-right: 1px solid rgba(255,255,255,.5); border-left: 1px solid rgba(255,255,255,.5); box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); } #mainmenu ul.level_2:before { content:''; width: 100%; height: 5px; display: block; background: rgba(0,0,0,.8); border: 1px solid #000; position: relative; left: -1px; } #mainmenu ul.level_2>li a { font-weight: 400; white-space: nowrap; } #mainmenu ul.level_2>li.active strong { font-weight: 400; white-space: nowrap; } #mainmenu ul.level_2>li a, #mainmenu ul.level_2>li.active span, #mainmenu ul.level_2>li>strong.active { padding: 0 17px; } #mainmenu ul.level_2>li { display: block; line-height: normal; text-transform: none; text-align: left; /* border-top: 1px solid #fff; */ /* divider */ /* clear: both; */ /* border-bottom: 1px solid #e5e5e5; */ /* Breitester Navipunkt wird mit jQuery ermittelt und dem jeweiligen parent ul.level_2 uebergeben */ width: inherit; } #mainmenu ul.level_2>li.last { /* border-bottom: none; */ } #mainmenu ul.level_1>li>ul { } #mainmenu ul.level_1>li { position: relative; } #mainmenu ul.level_1>li.submenu>ul.level_2 { opacity: 0; transition: opacity .5s ease-in-out; transition-delay: .3s; } /* 2nd level ul background */ #mainmenu ul.level_1>li.submenu:hover>ul.level_2 { left: 0; opacity: 1; /* opacity: 0.95; border-color: transparent #000 #000 #000; border-style: solid; border-width: 1px; */ /* box-shadow: -20px 0px 0px 0px rgba(255,255,255,.87),20px 0px 0px 0px rgba(255,255,255,.87); */ /* in case of dividers */ } #mainmenu ul.level_1>li.submenu>ul.level_2>li { height: 0; line-height: 0em; transition: all 1s ease; transition-delay: .3s; } #mainmenu ul.level_1>li.submenu:hover>ul.level_2>li { height: 2em; line-height: 2em; } /* 2nd level default link color */ #mainmenu ul.level_2>li a, #mainmenu ul.level_2>span.active { display: block; text-decoration: none; color: rgba(0,0,0,.7); border: none; /* color: #373737; */ /* background: #898989; */ } /* 2nd level hover color and hover bg-color*/ #mainmenu ul.level_2>li:hover>a { color: rgba(0,0,0,.7); /* background: #fff; */ background: rgba(166,162,133,.3); } /* #mainmenu ul.level_2 strong.active:hover { background: #00af50; } */ /* 2nd level active bg-color */ #mainmenu ul.level_2>li>strong.active, #mainmenu ul.level_2>li>strong.active:hover { background: rgba(0,0,0,.7); } /* 2nd level active link color */ #mainmenu ul.level_2>li>strong.active { color: rgba(255,255,255,.8); } #mainmenu ul.level_2>li:last-child:after { display: block; position: absolute; width: 121.7%; width: calc(121.7% + 2px); aspect-ratio: 258 / 41; background: transparent url('../../files/tmpl/submenu_bottom2.svg') left top no-repeat; left: -1px; background-size: 100%; content: ''; filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.3)); /* background: #69ad1a; border-bottom-left-radius: 10px; */ } /* #mainmenu ul.level_2 { padding-bottom: 9px; border-bottom-left-radius: 10px; } */ /* ========================================================================== media querie(s) ========================================================================== */ /* @media all and (max-width: 1285px) { #mainmenu { top: 29px; } } */ @media all and (max-width: 1200px) { #mainmenu { display: none; } .mm-wrapper__blocker { visibility: visible; } #mobilemenu, #mobilemenu_button { display: block; } } /* ========================================================================== mainmenu mobile ========================================================================== */ #mobilemenu_button { position: absolute; top: 23px; /* left: 50%; left: calc(50% - 26px); */ right: 2.6%; z-index: 20; width: 52px; height: 44px; border-radius: 0; transition: top .5s ease-out; /* border-radius: 8px; border: 2px solid #973774; */ } #mobilemenu_button label.hamburg { display: inline-block; position: relative; } #mobilemenu_button label.hamburg:hover, #mobilemenu_button label.hamburg:focus { cursor: pointer; } #mobilemenu_button label.hamburg { /* rotation duration */ transition: .2s; /* margin-left: -2px; margin-top: -2px; border-radius: 8px; */ width: 52px; height: 44px; border-radius: 0; /* background: rgba(255,255,255,0.6); */ } #mobilemenu_button .line { display: block; height: 4px; width: 40px; background: #fff; border-radius: 2px; transform-origin: center; margin-left: 6px; margin-top: 8px; } #mobilemenu_button .line.first { margin-top: 8px; } #mobilemenu_button .line.middle { } /* #mobilemenu_button label.hamburg:hover { background: rgba(246,168,0,.1); } */ /* for hover devices only */ @media(hover: hover) and (pointer: fine) { #mobilemenu_button .line { transition: 0.3s; } #mobilemenu_button:hover > label.hamburg .line { transform: scaleX(-1); background: rgba(255,255,255,0.6); } } @media(hover: hover) and (pointer: fine) and (max-width: 600px) { #mobilemenu_button:hover > label.hamburg .line { background: rgba(255,255,255,0.6); } } /* for touch devices only - !!! also see jquery !!! */ #mobilemenu_button.touchable .line { transition: .5s; /* effect time OUT */ } #mobilemenu_button.touched .hamburg .line { transition: .5s; /* effect time IN */ transform: scaleX(-1); background: rgba(255,255,255,0.6); } /* #hamburg:checked + .hamburg .line.first { transform: translateY(9px) rotate(-45deg); } #hamburg:checked + .hamburg .line.middle { opacity: 0; } #hamburg:checked + .hamburg .line.last { transform: translateY(-9px) rotate(45deg); } */ /* ****************************** */ #mobilemenu { box-shadow: 0px 5px 5px -4px rgba(0,0,0,.5); margin-top: -5px; /* shadow-spacing */ border-right: 1px solid #fff; } #mobilemenu .mm-navbar { padding-top: 5px; /* shadow-spacing */ } #mobilemenu li { font: 500 1.25em/1.3em 'Roboto', Verdana, Arial, Helvetica, sans-serif; /* line-height: 1.25em; */ /* text-transform: uppercase; */ } /* #mobilemenu ul.level_2 li { font-size: 1em; } */ /* https://mmenujs.com/docs/core/styling.html */ #mobilemenu.mm-menu--theme-white { --mm-color-border: rgba( 255,255,255, 0.9 ); /* lines, dividers */ --mm-color-text: rgba( 34,34,34, 1 ); /* text */ --mm-color-text-dimmed: rgba( 34,34,34, .6 ); /* Counternumber */ --mm-color-background: rgba( 101,189,19, 1 ); /* general bg */ --mm-color-background-emphasis: rgba( 106,166,35, 1); /* background active button, tap, touch */ --mm-color-background-highlight: rgba( 255,255,255 1 ); /* ??? */ --mm-color-button: rgba( 234,188,28, 0.7 ); /* arrows ??? */ --mm-shadow: 0 0 20px rgba( 0,0,0, 0.5 ); /* ??? */ --mm-listitem-size: 41px; --mm-lineheight: 1.3em; --mm-padding-lr: 20px; } /* wrapper bg color */ .mm-wrapper__blocker { opacity: .4; background-color: #000; } #mobilemenu .mm-panel:before { content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; opacity: 0.15; /* background-image: url(../../files/tmpl/bg_stripes.svg); background-position: center bottom calc(8vh + 63px); background-repeat: repeat-x; */ } body.mobile #mobilemenu .mm-panel:before { background-position: center bottom calc(1vh + 3px); } /* #mobilemenu.mm-menu { -webkit-tap-highlight-color:var(--mm-color-background-emphasis); -webkit-tap-highlight-color: #001eff; } background active menu button #mobilemenu .mm-listitem_selected>.mm-listitem__text { background:var(--mm-color-background-emphasis); } #mobilemenu .mm-iconbar__tab_selected { background:var(--mm-color-background-emphasis); } #mobilemenu .mm-menu--keyboardfocus a:focus,.mm-menu--keyboardfocus.mm-menu--opened~.mm-wrapper__blocker a:focus { background:var(--mm-color-background-emphasis); } #mobilemenu .mm-navbars--top.mm-navbars_has-tabs .mm-navbar { background:var(--mm-color-background-emphasis); } #mobilemenu .mm-navbars--bottom.mm-navbars_has-tabs .mm-navbar_tabs,.mm-navbars_bottom.mm-navbars_has-tabs .mm-navbar_tabs~.mm-navbar { background:var(--mm-color-background-emphasis); } #mobilemenu .mm-menu--selected-hover .mm-listitem__btn:hover,.mm-menu--selected-hover .mm-listitem__text:hover { background:var(--mm-color-background-emphasis); } #mobilemenu .mm-menu--selected-parent .mm-listitem_selected-parent>.mm-listitem__btn,.mm-menu--selected-parent .mm-listitem_selected-parent>.mm-listitem__text { background:var(--mm-color-background-emphasis); } */ /* back arrow in menutitle */ #mobilemenu .mm-navbar .mm-btn:before { border-color: rgba(255,255,225, .7); } /* default button background color */ #mobilemenu .mm-listitem { background: rgba( 225,225,225, 1 ); } /* don't care about this */ #mobilemenu .mm-listitem { color:var(--mm-color-text); } /* text active */ #mobilemenu .mm-listitem--selected { color: #fff; } /* counter arrow (inactive) */ #mobilemenu .mm-btn:after { border-color: rgba( 106,166,35, .8); } /* counter number (inactive) */ #mobilemenu .mm-btn > .mm-counter { color: var(--mm-color-text-dimmed); } /* counter arrow (active) */ #mobilemenu .mm-listitem--selected .mm-btn:after { border-color: rgba( 255,255,255, .8 ); } /* counter number (active) */ #mobilemenu .mm-listitem--selected .mm-btn .mm-counter { border-color: rgba( 255,255,255, .8 ); } #mobilemenu .mm-listitem--selected .mm-btn--next .mm-counter:before { border-left: 1px solid rgba( 255,255,255, .8 ); content:''; height: 100%; width: 0px; right: 60px; position: absolute; } /* counter background with active submenu button */ #mobilemenu .mm-listitem__text.trail+a.mm-listitem__btn { background: rgba( 106,166,35, .8); /* background: var(--mm-color-background-emphasis); */ } /* counter arrow with active submenu button */ #mobilemenu .mm-listitem__text.trail + .mm-btn:after { border-color: rgba( 255,255,255, .8 ); } /* counter number with active submenu button */ #mobilemenu .mm-listitem__text.trail + .mm-btn > .mm-counter { color: rgba( 255,255,255, .8 ); } /* counter color button (active) */ #mobilemenu .mm-listitem--selected .mm-counter { color: rgba( 255,255,255, .8 ); /* font-weight: bold; */ /* vs. active menu button */ } /* #mobilemenu .mm-listitem__text, #mobilemenu .mm-listitem--selected { padding-left: var(--mm-padding-lr); padding-right: var(--mm-padding-lr); } .mm-listitem__text,.mm-listitem--selected {padding: calc((var(--mm-listitem-size) - var(--mm-lineheight))/ 2) 0} */ /* active menu button: font-weight, background (here!), color */ #mobilemenu .mm-listitem--selected { font-weight: 400; /* background: rgba(0,175,80, 1); */ } /* menu button first level with active submenu button */ #mobilemenu .mm-listitem__text.trail { background: rgba(50,50,50, .1); font-weight: 400; /* background: linear-gradient(90deg, rgba(130,22,24, .8) 0%, rgba(255,255,255, .9) 100%); */ } /* menu button first level (active) with inactive submenu button */ #mobilemenu .mm-listitem--selected .mm-listitem__text { font-weight: 400; } /* active menu button -> counter */ #mobilemenu .mm-listitem--selected .mm-listitem__text .mm-counter { font-weight: 400; } /* top section with menu headline */ #mobilemenu .mm-navbar { background: rgba( 20,20,20, 1); height: 70px; /* text-transform: uppercase; */ } /* top section with menu headline menu text */ #mobilemenu .mm-navbar .mm-navbar__title { color: rgba(255,255,255,.7); font-size: 1.3em; line-height: 1.45em; font-weight: 500; } /* borderstripes top and bottom */ #mobilemenu .mm-navbar { border-bottom: 10px solid #4e4e4e; } #mobilemenu ul { border-top: 1px solid #fff; border-bottom: 10px solid #4e4e4e; box-shadow: 0px 1px 0px 0px #4e4e4e, 0px 0px 15px 4px rgba(0,0,0,.6); } #mobilemenu .mm-panel { overflow: hidden; } #mobilemenu .mm-panel:after { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(177,226,48,1) 300px,transparent 100%); background-image: url('../../files/tmpl/signet_faunistica_transp-white.svg'), linear-gradient(to bottom, rgba(177,226,48,1) 300px,transparent 100%); background-repeat: no-repeat; background-position: center bottom 40px; background-size: contain; background-size: auto; z-index: -1; } /* OR THIS ONE >> */ /* #mobilemenu ul { outline: 10px solid #000; } */ /* arrow for active dropdown button (submenu active) */ #mobilemenu .submenu.trail>span::after, #mobilemenu .submenu.trail>span.forward.trail.submenu::after, #mobilemenu li.forward.submenu.trail::after { display: none; } /* distance of dividers / default left: 20px */ #mobilemenu .mm-listitem:after { left: 0; /* content: none; */ } #mobilemenu ul { /* box-shadow: 0px 1px 0px 0px #fff, 0px -5px 15px 5px rgba(102,96,91, .7); */ /* border-bottom: 9px solid rgba(236,236,228,.7); */ } /* multiline */ .mm-listitem__text { -o-text-overflow: clip; text-overflow: clip; white-space: normal; } /* multiline */ .mm-counter { width: 30px; margin-right: -20px; /* outline: 1px solid #ccc; */ height: 100%; padding: 0; display: flex; align-items: center; justify-content: center; }