body.lock {overflow: hidden;}

.mx-none {margin-left:-1.5rem; margin-right:-1.5rem;}
    @media (max-width: 768px) {
        .mx-none {margin-left:-1rem; margin-right:-1rem;}
    }

.text-sm { font-size: 1rem; line-height: 1rem }

/* Buttons */
.btn  { padding:0.25rem 1.5rem 0.35rem 1.5rem; border-radius:2rem; font-size:1.2rem }
.btn-sm  { padding:0.15rem 1rem 0.25rem 1rem; border-radius:2rem; font-size:1rem }

.btn.style1 {background-color: rgb(var(--color1)); color:white; border:2px solid rgb(var(--color2)) }
.btn.style1:hover {background-color: rgb(var(--content-bg)); color:rgb(var(--font-color)); border:2px solid rgb(var(--color1-ui)); }
    
.btn.style2 {background-color: rgb(var(--color1)); color:rgb(var(--font-color-inv)); border:2px solid rgb(var(--color1)) }
.btn.style2:hover {background-color: rgb(var(--content-bg)); color:rgb(var(--font-color)); border:2px solid rgb(var(--color1-ui));  }    

.btn.disabled, button:disabled, .btn.style1.disabled, button.style1:disabled, .btn.style2.disabled, button.style2:disabled {
	background-color: rgba(var(--font-color), .15); color:rgba(var(--font-color), .75); border:2px rgba(var(--font-color), .15); }    


/* Main menu */

:root {
	--nav-height:42px;
	--nav-font-size:1.2rem;
}


#zenMenu * 	{ box-shadow:none }
#zenMenu 	{ background-color: rgb(var(--color1)); height:var(--nav-height); line-height:var(--nav-height);
		display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center }
#zenMenu a 	{ text-decoration:none; white-space:nowrap; color:rgb(var(--font-color-inv));
			font-size:var(--nav-font-size);  line-height:calc(var(--nav-font-size)*2) }
#zenMenu a.active, #zenMenu .menu-item:hover a { color:rgb(var(--font-color-inv)) }

.menu-items { margin:0; padding:0; display:-webkit-flex; display:flex; flex-wrap:wrap; width:100%; overflow:hidden; height:var(--nav-height)}
.nav-item 	{ list-style: none; margin:0; padding:0; display:flex}
.menu-items .nav-item:first-child a {padding-left:1.5rem}
.menu-items .nav-item:hover	{ background-color: rgb(var(--color1-ui)) }

.menu-items .nav-item a { padding:0 1rem; height:var(--nav-height) }
.menu-items .nav-item a.active	{background-color: rgba(var(--font-color), .5) }
	
.more, .side-menu {width:36px; height:var(--nav-height); position:relative; cursor:pointer}
.more {display: none;}

#zenMenu a.mob-nav-icon {margin-right:1rem; line-height:.5rem }


.more-btn {height:var(--nav-height); width:36px; background-color:transparent; border:none}
.more-btn:hover, .more-btn.show {background-color:rgb(var(--color1-ui))}
.more-btn i, .more-btn i::before, .more-btn i::after {
	position:absolute; width:5px; height:5px; background: rgb(var(--font-color-inv)); border-radius: 50%; content: ""
	}
.more-btn i {top:19px; left:16px} .more-btn i::before {top:-8px; left:0} .more-btn i::after {top:8px; left:0}

.more-items {background-color: rgb(var(--color1-ui)); border-radius:0; border:0; top: -2px !important; padding:0 !important; margin:0 !important}
.more-items li {display:block}
.more-items a {color:rgb(var(--font-color)); padding:0 1rem; height:var(--nav-height); font-size:1.1rem; display:block}
.more-items .nav-item:hover {background-color:rgb(var(--color1))}
.more-items .nav-item a.active {background-color:rgba(var(--font-color), .5); color:rgb(var(--font-color-inv));}
		

/* Side menu on mobile */

.side-menu-btn {box-shadow:none; border:none; width:40px; height:24px; position:relative; background:transparent; margin-left:1rem}
.side-menu-btn i, .side-menu-btn i::before, .side-menu-btn i::after {
	position:absolute; width:24px; height:3px; background: rgb(var(--font-color-inv)); border-radius: 2px; content: ""
	}
.side-menu-btn i {left:0; top:10px} .side-menu-btn i::before {top:-8px; left:0} .side-menu-btn i::after {top:8px; left:0}	


.side-menu {position:fixed; left:-100%; right:0; top:0; width:75%; height:100%; padding:1rem; background-color:rgb(var(--content-bg));
			z-index:2000; box-shadow: 0 0 2rem rgba(0,0,0,0.3) !important; transition: left ease .3s}
.side-menu.show {left:0; transition: left ease .3s;}
.side-menu ul {margin:0; padding:0; list-style:none}
.side-menu .nav-item a { display:block; width:100%; color: rgb(var(--font-color)); text-decoration:none; padding:.25rem 1rem;}
.side-menu .nav-item a.active { background:rgb(var(--color1)); color: rgb(var(--font-color-inv)); padding:.5rem 1rem;}

.overlay {position:fixed; left:-100%; right:0px; top:0px; width:100%; height:100%; z-index:1100; background-color:black; 
	opacity:0; transition:opacity ease .5s;}
.overlay.show {left:0; opacity:.5; transition:opacity ease .5s;}

.close-btn {width:24px; height:24px; position:absolute; top:12px; right:12px;  z-index:1101; cursor:pointer; opacity:.5}
.close-btn i, .close-btn i::after {position:absolute; width:19px; height:2px; background: rgba(var(--font-color), .7); content: ""}
.close-btn i {transform: rotate(45deg); top:10px; left:3px}
.close-btn i::after {transform: rotate(-90deg);}

#sideMenuHeader .logo img {aspect-ratio: 1}
#sideMenuFooter {}
#sideMenuFooter a {text-decoration:none;}


/* Sprites | Icons */

.icon {
	--size: 24px; --x-shift:0; --y-shift:0; --active:0; display: inline-block; vertical-align:middle;
	width:var(--size); height:var(--size); background-size:calc(var(--size)*8) calc(var(--size)*3); 
	background-image:url(/assets/img/icons.svg); background-repeat:no-repeat; 
	background-position:calc(0px - var(--size) * var(--x-shift)) calc(0px - var(--size) * (var(--y-shift) + var(--active)) )
}

.set2 {background-image:url(/assets/img/icons2.svg)} .set3 {background-image:url(/assets/img/icons3.svg)}

.s16 {--size: 16px } .s24 {--size: 24px } .s32 {--size: 32px } .s48 {--size: 48px } .s64 {--size: 64px }
.x1 {--x-shift:0} .x2 {--x-shift:1} .x3 {--x-shift:2} .x4 {--x-shift:3} .x5 {--x-shift:4} .x6 {--x-shift:5} .x7 {--x-shift:6} .x8 {--x-shift:7}
.y1 {--y-shift:0} .y2 {--y-shift:1} .y3 {--y-shift:2} .y4 {--y-shift:3} .y5 {--y-shift:4} .y6 {--y-shift:5} .y7 {--y-shift:6} .y8 {--y-shift:7}

.n1, .n2, .n3, .n4, .n5, .n6, .n7, .n8 {background-size:calc(var(--size)*8) calc(var(--size)*2) !important}
.n1 {--x-shift:0; --y-shift:0} .n2 {--x-shift:1; --y-shift:0} .n3 {--x-shift:2; --y-shift:0} .n4 {--x-shift:3; --y-shift:0}
.n5 {--x-shift:4; --y-shift:0} .n6 {--x-shift:5; --y-shift:0} .n7 {--x-shift:6; --y-shift:0} .n8 {--x-shift:7; --y-shift:0}

.icon.hover:hover {--active:1; cursor:pointer;} .icon.active {--active:1} .icon.disabled {opacity:.25; cursor:default !important; --active:0 !important}
.icon2.hover:hover {--active:1; cursor:pointer;} .icon2.active {--active:1} .icon2.disabled {opacity:.25; cursor:default !important; --active:0 !important}

/* Aspect ratios */

.ar-1-1 {width:100%; aspect-ratio:1}
.ar-3-1 {width:100%; aspect-ratio:3}
.ar-3-2 {width:100%; aspect-ratio:1.5}
.ar-4-3 {width:100%; aspect-ratio:1.33}
.ar-16-9 {width:100%; aspect-ratio:1.78}
.ar-3-4 {width:100%; aspect-ratio:0.75}