/*********************************/
/* CSS VARIABLEN                 */
/*********************************/

:root {

--f-family-headline-primary:    "Headline-Primary", "Open-Sans", Arial, Sans-Serif;
--f-family-headline-secondary:  "Headline-Secondary", "Times New Roman", Times, serif;
--f-family-text-primary:        "Text-Primary", "Open-Sans", Arial, Sans-Serif;
--f-family-text-secondary:      "Text-Secondary", "Courier New", Courier, monospace;

--f-letter-spacing-l:  .2rem;
--f-letter-spacing-m:  .1rem;
--f-letter-spacing-s:  .04rem;

--f-size-h1:  3.3rem;
--f-size-h2:  3rem;
--f-size-h3:  1.78rem;
--f-size-h4:  1.6rem;
--f-size-h5:  1.6rem;
--f-size-h6:  1.15rem;
--f-size-p-l: 1.6rem;
--f-size-p-m: 1.45rem;
--f-size-p-s: 1.15rem;

--f-size-btn-small: 1.2rem;
--f-size-btn-big: 1.5rem;

--f-line-height-h1:  4.35rem;
--f-line-height-h2:  3.8rem;
--f-line-height-h3:  2.7rem;
--f-line-height-h4:  2.2rem;
--f-line-height-h5:  2.2rem;
--f-line-height-h6:  1.8rem;
--f-line-height-p-l: 2.7rem;
--f-line-height-p-m: 2.5rem;
--f-line-height-p-s: 1.8rem;
--f-line-height-btn: 2.3rem;
--f-line-height-1:   1em;

--f-weight-regular:  400;
--f-weight-medium:   500; 
--f-weight-semibold: 600; 
--f-weight-bold:     700; 
  
--f-p-h1:  0 0 1.6rem 0;
--f-p-h2:  0 0 2.2rem 0;
--f-p-h3:  0 0 1.2rem 0;
--f-p-h4:  0 0 1.2rem 0;
--f-p-h5:  0 0 2.2rem 0;
--f-p-h6:  0 0 1.4rem 0;
--f-p-p-l: 0 0 2.8rem 0;
--f-p-p-m: 0 0 2.2rem 0;
--f-p-p-s: 0 0 1.4rem 0;

}


/*********************************/
/* FONTS                         */
/*********************************/

/* FONT EMBED ********************/

@font-face {
    font-family: 'Headline-Primary';
	src: url('/wp-content/uploads/IBMPlexSerif-Medium.eot'); 
    src: url('/wp-content/uploads/IBMPlexSerif-Medium.woff2') format('woff2'),
         url('/wp-content/uploads/IBMPlexSerif-Medium.woff') format('woff'),
		 url('/wp-content/uploads/IBMPlexSerif-Medium.eot?#iefix') format('embedded-opentype'), 
         url('/wp-content/uploads/IBMPlexSerif-Medium.ttf')  format('truetype'),
		 url('/wp-content/uploads/IBMPlexSerif-Medium.svg#Headline-Primary') format('svg');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Text-Primary';
	src: url('/wp-content/uploads/IBMPlexSans-Regular.eot'); 
    src: url('/wp-content/uploads/IBMPlexSans-Regular.woff2') format('woff2'),
         url('/wp-content/uploads/IBMPlexSans-Regular.woff') format('woff'),
		 url('/wp-content/uploads/IBMPlexSans-Regular.eot?#iefix') format('embedded-opentype'), 
         url('/wp-content/uploads/IBMPlexSans-Regular.ttf')  format('truetype'),
		 url('/wp-content/uploads/IBMPlexSans-Regular.svg#Text-Primary') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Text-Primary';
	src: url('/wp-content/uploads/IBMPlexSans-Bold.eot'); 
    src: url('/wp-content/uploads/IBMPlexSans-Bold.woff2') format('woff2'),
         url('/wp-content/uploads/IBMPlexSans-Bold.woff') format('woff'),
		 url('/wp-content/uploads/IBMPlexSans-Bold.eot?#iefix') format('embedded-opentype'), 
         url('/wp-content/uploads/IBMPlexSans-Bold.ttf')  format('truetype'),
		 url('/wp-content/uploads/IBMPlexSans-Bold.svg#Text-Primary') format('svg');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* BASIC FONT SETTINGS ***********/

* { box-sizing:border-box; } 

html {
	font-size:   10px;
	font-family: var(--f-family-text-primary);
	line-height: var(--f-line-height-p-m);
	font-weight: var(--f-weight-regular);
	color:       var(--c01);	
    background:  var(--c02);
}
body {
    font-size:   inherit; 
    color:       inherit; 
    text-align:  left; 
    font-size:   inherit;
    min-height:  100vh; 
}
body > hr { display: none; }

@media screen and (min-width:768px) and (max-width:1549px)  { html { font-size: 9px;  }}
@media screen and (max-width:767px)  						{ html { font-size: 10px; }}

/* FONT PADDINGS *****************/

.f-p-p-m, p, ul, ol { padding: var(--f-p-p-m);   }
.f-p-p-l            { padding: var(--f-p-p-l);   }
.f-p-p-s            { padding: var(--f-p-p-s);   }
.f-h1-p, h1         { padding: var(--f-p-h1);    }
.f-h2-p, h2         { padding: var(--f-p-h2);    }
.f-h3-p, h3         { padding: var(--f-p-h3);    }
.f-h4-p, h4         { padding: var(--f-p-h4);    }
.f-h5-p, h5         { padding: var(--f-p-h5);    }
.f-h6-p, h6         { padding: var(--f-p-h6);    }
.f-p-0              { padding: 0 !important;     }

ul ul, ol ol        { padding-bottom: 0!important; }

/* RICH TEXT *********************/

p, li {
    font-family:    var(--f-family-text-primary);
  	font-size:      var(--f-size-p-m);
	line-height:    var(--f-line-height-p-m);
	font-weight:    var(--f-weight-regular);
	letter-spacing: var(--none);
}
h1 {
    font-family:    var(--f-family-headline-primary);
  	font-size:      var(--f-size-h1);
	line-height:    var(--f-line-height-h1);
	font-weight:    var(--f-weight-bold);
	letter-spacing: var(--f-letter-spacing-s);
}
h2 {
    font-family:    var(--f-family-headline-primary);
  	font-size:      var(--f-size-h2);
	line-height:    var(--f-line-height-h2);
	font-weight:    var(--f-weight-bold);
	letter-spacing: var(--f-letter-spacing-s);  
}
h3 {
    font-family:    var(--f-family-headline-primary);
  	font-size:      var(--f-size-h3);
	line-height:    var(--f-line-height-h3);
	font-weight:    var(--f-weight-bold);
	letter-spacing: var(--f-letter-spacing-s);  
}
h4 {
    font-family:    var(--f-family-headline-primary);
  	font-size:      var(--f-size-h4);
	line-height:    var(--f-line-height-h4);
	font-weight:    var(--f-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--f-letter-spacing-l);
}
h5 {
    font-family:    var(--f-family-headline-primary);
  	font-size:      var(--f-size-h5);
	line-height:    var(--f-line-height-h5);
	font-weight:    var(--f-weight-bold);
	letter-spacing: var(--f-letter-spacing-s);
}
h6 {
    font-family:    var(--f-family-text-primary);
  	font-size:      var(--f-size-h6);
	line-height:    var(--f-line-height-h6);
	font-weight:    var(--f-weight-bold);
	letter-spacing: var(--f-letter-spacing-m);
	text-transform: uppercase;
}

/* FONT CLASSES ******************/

.f-p-m, .f-p-m p, .f-p-m li {
    font-family:    var(--f-family-text-primary)!important;
  	font-size:      var(--f-size-p-m)!important;
	line-height:    var(--f-line-height-p-m)!important;
	font-weight:    var(--f-weight-regular)!important;
}
.f-p-l, .f-p-l p, .f-p-l li {
  	font-family:    var(--f-family-text-primary)!important;
  	font-size:      var(--f-size-p-l)!important;
	line-height:    var(--f-line-height-p-l)!important;
	font-weight:    var(--f-weight-regular)!important;
}
.f-p-s, .f-p-s p, .f-p-s li {
  	font-family:    var(--f-family-text-primary)!important;
  	font-size:      var(--f-size-p-s)!important;
	line-height:    var(--f-line-height-p-s)!important;
	font-weight:    var(--f-weight-regular)!important;
}
.f-h1 {
  	font-family:    var(--f-family-headline-primary)!important;
  	font-size:      var(--f-size-h1)!important;
	line-height:    var(--f-line-height-h1)!important;
	font-weight:    var(--f-weight-bold)!important;
	letter-spacing: var(--f-letter-spacing-s)!important;
}
.f-h2 {
  	font-family:    var(--f-family-headline-primary)!important;
  	font-size:      var(--f-size-h2)!important;
	line-height:    var(--f-line-height-h2)!important;
	font-weight:    var(--f-weight-bold)!important;
	letter-spacing: var(--f-letter-spacing-s)!important;
}
.f-h3 {
  	font-family:    var(--f-family-headline-primary)!important;
  	font-size:      var(--f-size-h3)!important;
	line-height:    var(--f-line-height-h3)!important;
	font-weight:    var(--f-weight-bold)!important;
	letter-spacing: var(--f-letter-spacing-s)!important;
}
.f-h4 {
  	font-family:    var(--f-family-headline-primary)!important;
  	font-size:      var(--f-size-h4)!important;
	line-height:    var(--f-line-height-h4)!important;
	font-weight:    var(--f-weight-bold)!important;
	text-transform: uppercase!important;
	letter-spacing: var(--f-letter-spacing-l)!important;
}
.f-h5 {
  	font-family:    var(--f-family-headline-primary)!important;
  	font-size:      var(--f-size-h5)!important;
	line-height:    var(--f-line-height-h5)!important;
	font-weight:    var(--f-weight-bold)!important;
	letter-spacing: var(--f-letter-spacing-s)!important;
}
.f-h6 {
  	font-family:    var(--f-family-text-primary)!important;
  	font-size:      var(--f-size-h6)!important;
	line-height:    var(--f-line-height-h6)!important;
	font-weight:    var(--f-weight-bold)!important;
	letter-spacing: var(--f-letter-spacing-m)!important;
	text-transform: uppercase!important;
}
.f-btn-big {
  	font-family:    var(--f-family-headline-primary)!important;
  	font-size:      var(--f-size-button-big)!important;
	line-height:    var(--f-line-height-1)!important;
	font-weight:    var(--f-weight-bold)!important;
	letter-spacing: var(--f-letter-spacing-l)!important;
	text-transform: uppercase!important;
}
.f-btn-normal {
  	font-family:    var(--f-family-text-primary)!important;
  	font-size:      var(--f-size-button-normal)!important;
	line-height:    var(--f-line-height-1)!important;
	font-weight:    var(--f-weight-regular)!important;
	letter-spacing: var(--f-letter-spacing-m)!important;
	text-transform: uppercase!important;
}

/* FONT MOBILE CORRECTION ********/

@media screen and (max-width:767px) {
.f-h1, h1 { 
    font-size:       calc(var(--f-size-h1)*.75)!important; 
    line-height:     calc(var(--f-line-height-h1)*.75)!important; 
}
.f-h2, h2 { 
    font-size:       calc(var(--f-size-h2)*.8)!important; 
    line-height:     calc(var(--f-line-height-h2)*.8)!important; 
}
.f-h3, h3 { 
    font-size:       calc(var(--f-size-h3)*.92)!important; 
    line-height:     calc(var(--f-line-height-h3)*.92)!important; 
}
}



/*********************************/
/* CSS FRAMEWORK                 */
/*********************************/

/* COLORS ************************/

:root {
--c01: #000000;
--c02: #ffffff;
--c03: #ef2c0e;
--c04: #704419;
--c05: #b6aa89;
--c06: #827e7a;
--c07: #33322f;
--c08: #111110;
}

.c01 { color:var(--c01)!important; }
.c02 { color:var(--c02)!important; }
.c03 { color:var(--c03)!important; }
.c04 { color:var(--c04)!important; }
.c05 { color:var(--c05)!important; }
.c06 { color:var(--c06)!important; }
.c07 { color:var(--c07)!important; }
.c08 { color:var(--c08)!important; }

.bgc01 { background-color:var(--c01)!important; }
.bgc02 { background-color:var(--c02)!important; }
.bgc03 { background-color:var(--c03)!important; }
.bgc04 { background-color:var(--c04)!important; }
.bgc05 { background-color:var(--c05)!important; }
.bgc06 { background-color:var(--c06)!important; }
.bgc07 { background-color:var(--c07)!important; }
.bgc08 { background-color:var(--c08)!important; }

/* TAGS **************************/

a               { transition:.2s!important;outline:none;cursor:pointer;text-decoration:none;color:var(--c03); }
button          { transition:.2s!important;outline:none;cursor:pointer;text-decoration:none;color:var(--c03);
				  background:transparent;border:none;border-radius:0; }
a:hover 		{ color:var(--c04); }
blockquote      { }

ul  			{ list-style: inside; }

/* FONT STYLES *******************/

.f-center, .has-text-align-center   { text-align:center!important; }
.f-left, .has-text-align-left       { text-align:left!important; }
.f-right, .has-text-align-right     { text-align:right!important; }
.f-justify, .has-text-align-justify { text-align:justify!important; }

.f-bold, b, strong                  { font-weight:var(--f-weight-bold)!important; }
.f-reg                              { font-weight:var(--f-weight-regular)!important; }
.f-italic, i, em                    { font-style:italic!important; }

.f-uppercase, u                     { text-transform:uppercase!important; }
.f-underline                        { text-decoration:underline!important; }

/* IMAGES ************************/

.img-fill { width:100%!important;height:100%!important;object-fit:cover;object-position:center center; }
.img-full { width:100%!important;height:auto!important; }

/* GAPS **************************/

.w100 { width:100%;  }

:root {
--val-1:  1rem;
--val-2:  2.5rem;
--val-3:  4rem;
}

.gap-1  { gap:var(--val-1); }
.gap-2  { gap:var(--val-2); }
.gap-3  { gap:var(--val-3); }

.hgap-1  { column-gap:var(--val-1); }
.hgap-2  { column-gap:var(--val-2); }
.hgap-3  { column-gap:var(--val-3); }

.vgap-1 { row-gap:var(--val-1); }
.vgap-2 { row-gap:var(--val-2); }
.vgap-3 { row-gap:var(--val-3); }


@media screen and (max-width:767px) { 
.gap-1  { gap:calc(var(--val-1) * .7); }
.gap-2  { gap:calc(var(--val-2) * .7); }
.gap-3  { gap:calc(var(--val-3) * .7); }

.hgap-1  { column-gap:calc(var(--val-1) * .7); }
.hgap-2  { column-gap:calc(var(--val-2) * .7); }
.hgap-3  { column-gap:calc(var(--val-3) * .7); }

.vgap-1 { row-gap:calc(var(--val-1) * .7); }
.vgap-2 { row-gap:calc(var(--val-2) * .7); }
.vgap-3 { row-gap:calc(var(--val-3) * .7); }
}

/* PADDINGS **********************/

.boxpad-1  { padding:4rem 5rem; }
.sidepad-1 { padding-left:7rem;padding-right:7rem; }
.sidepad-2 { padding-left:4rem;padding-right:4rem; }

@media screen and (max-width:1023px) {
.boxpad-1  { padding:3rem 4rem; }
.sidepad-1 { padding-left:4rem;padding-right:4rem; }
.sidepad-2 { padding-left:3rem;padding-right:3rem; }
}

@media screen and (max-width:767px) {
.boxpad-1  { padding:2rem 2.5rem; }
.sidepad-1 { padding-left:2.5rem;padding-right:2.5rem;}
.sidepad-2 { padding-left:2rem;padding-right:2rem; }
}

/* FLEX **************************/

.flx                  { display:flex; }
.flx-d-column         { flex-direction:column; }
.flx-d-row            { flex-direction:row; }
.flx-wrap             { flex-wrap:wrap; }
.flx-nowrap           { flex-wrap:no-wrap; }
.flx-jc-start         { justify-content:flex-start; }
.flx-jc-end           { justify-content:flex-end; }
.flx-jc-center        { justify-content:center; }
.flx-jc-space-between { justify-content:space-between; } 
.flx-ai-start         { align-items:flex-start; }
.flx-ai-end           { align-items:flex-end; }
.flx-ai-center        { align-items:center; }
.flx-ai-stretch       { align-items:stretch; }
.flx-ac-start         { align-content:flex-start; }
.flx-ac-end           { align-content:flex-end; }
.flx-ac-center        { align-content:center; }
.flx-ac-stretch       { align-content:stretch; }
.flx-ac-space-between { align-content:space-between; }
.flx-ac-space-around  { align-content:space-around; }

/* GRID **************************/

*[class*="grd-"]      { display:grid; }
.grd-2                { grid-template-columns: repeat(2, minmax(1px, 1fr)); }
.grd-3                { grid-template-columns: repeat(3, minmax(1px, 1fr)); }
.grd-4                { grid-template-columns: repeat(4, minmax(1px, 1fr)); }
.grd-5                { grid-template-columns: repeat(5, minmax(1px, 1fr)); }
.grd-6                { grid-template-columns: repeat(6, minmax(1px, 1fr)); }


/*********************************/
/* NAVIGATION                    */
/*********************************/

/* HEADER ************************/

.header {
    width: 100%;
    z-index: 50000;
  	position: fixed;
  	transition:.2s ease-in-out;
  	transform:translateY(0%);
	background:var(--c01);
	color:var(--c02);
}
.header .menu {
	display: flex;
	gap:3.5rem;
}

/* HEADROOM **********************/

.headroom--not-top  {
	transform:translateY(-100%);
}
.headroom--pinned  {
	transform:translateY(0%);
}


/********* DROPDOWN *********/

.header .menu-item-has-children {
  	position: relative;
}
.header .menu-item-has-children svg {
	width:.8rem;
	height:.8rem;
	fill:var(--c02);
	margin-left:.5rem;
	transition:.35s ease;
}
.header .menu-item-has-children a:hover svg {
	transform:rotate(90deg);
}
.header .sub-menu {
  	position: absolute;
  	background: var(--c02);
	box-shadow:0 1rem 3rem 0 rgba(0,0,0,.2);
  	width: auto;
  	top: 5rem;
  	left: 50%;
	transform:translateX(-50%);
  	opacity: 0;
  	visibility: hidden;
  	transition: all 0.3s ease;
	border-radius:1px;
}
.header .sub-menu > li {
  	display: flex;
  	justify-content: space-between;
  	width: auto;
}
.header .sub-menu li:not(:first-child) {
	border-top:1px solid var(--c05);
}
.header .sub-menu a {
	padding: .8rem 1.6rem;
	color:var(--c01)!important;
}
.header .sub-menu a:hover {
	color:var(--c03)!important;
}
.header .menu-item-has-children:hover .sub-menu {
  	top: 5rem;
  	opacity: 1;
  	visibility: visible;
}


/* HAMBURGER *********************/

.hamburger {
	display:flex!important;
	align-items:center;
	justify-content:center;
	border:1px solid var(--c04);
	border-radius:50%;
	background:transparent;
	width:5rem;
	height:5rem;
}
.hamburger:hover {
	border:1px solid var(--c03);
}
.hamburger svg {
	fill:var(--c02);
	width:2.4rem;
	height:2.4rem;
	transform:translateY(.5px);
}
@media screen and (min-width:1150px) { 
	.hamburger { display:none; }
}
@media screen and (max-width:1149px) { 
	.hamburger { display:flex; }
}
@media screen and (min-width:768px) and (max-width:1149px) { 
	#menu-toggle {right:4.9rem;}
}
@media screen and (max-width:767px) { 
	#menu-toggle {right:1.9rem;}
}

/* OFFCANVAS *********************/

.offcanvas-active {
	overflow:hidden;
}
.offcanvas {
  	position: fixed;
  	top: 0;
  	right: 0;
  	width: 35rem;
  	height: 100%;
  	background: var(--c02);
  	color: var(--c01);
  	padding:10rem 5rem 5rem;
  	box-shadow: none;
  	transform: translateX(100%);
  	transition: transform .4s ease;
  	z-index: 60001;
	overflow:scroll;
}
.offcanvas.open {
  	transform: translateX(0);
  	box-shadow: 0 0 2rem rgba(0,0,0,.4);
}
.offcanvas ul {
  	list-style:none;
  	padding:0;
	margin:0;
}
.offcanvas > ul {
	margin-top:10rem;
	padding:0 5rem;
}
.offcanvas > ul a {
  	color: var(--c01);
	border-top:1px solid var(--c05);
	display: flex;
	align-items: center;
    justify-content: space-between;
	width:100%;
	padding: 1rem 0;
}
.offcanvas > ul > li:last-child > a {
	border-bottom:1px solid var(--c05);
}
.offcanvas > ul a:hover {
	color:var(--c03);
}
#menu-close {
	display:flex;
	align-items:center;
	justify-content:center;
	position:absolute;
	right:5rem;
	top:2.5rem;
	border:1px solid var(--c05);
	border-radius:50%;
	background:transparent;	
	width:5rem;
	height:5rem;
}
#menu-close:hover {
	border:1px solid var(--c03);
}
#menu-close svg {
	fill:var(--c03);
	width:2.4rem;
	height:2.4rem;
}
.backdrop {
  	position: fixed;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	background: rgba(0,0,0,0.6);
  	opacity: 0;
  	visibility: hidden;
  	transition: opacity .4s ease;
  	z-index: 60000;
}
.backdrop.show {
  	opacity: 1;
  	visibility: visible;
}
@media screen and (max-width:767px) { 
.offcanvas {
  	width: 29rem;
}
.offcanvas > ul {
	margin-top:9rem;
	padding:0 2rem;
}
#menu-close {
	right:1.9rem;
	top:2rem;
}
}

/* OFFCANVAS AUSKLAPPFUNKTION ****/

#offcanvas ul.menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

#offcanvas .menu-item {
    border-bottom: 1px solid var(--c01); 
}

#offcanvas .menu-item a {
    display: block;
    padding: .9rem 0;
    text-decoration: none;
    color:var(--c01);
}

#offcanvas .menu-item-has-children {
    position: relative; 
}

#offcanvas .menu-item-has-children > a {
    padding-right: 4.4rem; 
}

/* Styling und Animation des Ausklapp-Buttons */

#offcanvas .offcanvas-submenu-expand {
    position: absolute;
    right: 0; 
    top: 0;
    width: 4.4rem; 
    height: 4.4rem; 
    display: flex; 
    justify-content: center;
    align-items: center;
    border: none;
    background: var(--c01);
    cursor: pointer;
    padding: 0;
    z-index: 10; 
}

#offcanvas .offcanvas-submenu-expand .expand-icon {
    transition: transform 0.3s ease-in-out;
    display: block;
    fill: var(--c03); 
    width: 1.2rem; 
    height: 1.2rem;
}

#offcanvas .menu-item-has-children.open .offcanvas-submenu-expand .expand-icon {
    transform: rotate(45deg);
}

/* Animation des Untermenüs (max-height) */

#offcanvas .sub-menu {
    max-height: 0;
    overflow: hidden; 
    transition: max-height 0.4s ease-in-out; 
    /*padding-left: 2rem;*/
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    list-style: none;
}
#offcanvas .sub-menu .menu-item {
	border-bottom: none;
	border-top: 1px solid var(--c01);  
}

#offcanvas .menu-item-has-children.open > .sub-menu {
    max-height: 50rem; 
    padding-bottom: 1rem; 
}

#offcanvas .sub-menu .menu-item a {
    padding: .8rem 0; 
}



/*********************************/
/* ELEMENTS                      */
/*********************************/

/* TABS **************************/

.tab-header { background: var(--c05); }
.tab-content { display: none; }
.tab-content.active { display: block; background: var(--c05);}

/* ACCORDION *********************/

.acco-panel { display: none; }
.acco-panel.active { display: block; background: var(--c05); }
.acco-header { cursor: pointer; background: var(--c05); }



/* BUTTON ************************/

button, .b-fsize-small { font-size: var(--f-size-btn-small);}
.b-fsize-big { font-size: var(--f-size-btn-big); }

.b-width-100 {width:100%;}

.b-size-big { padding:1.5rem 2rem; }
.b-size-medium { padding:1rem 1.5rem; }
.b-size-small { padding:.5rem 1rem; }

.b-style-primary { background:var(--c03);color:var(--c02); }
.b-style-primary:hover { background:var(--c04);color:var(--c02); }
.b-style-primary.b-wicon svg { fill:var(--c02); }

.b-style-secondary { background:var(--c04);color:var(--c02); }
.b-style-secondary:hover { background:var(--c03);color:var(--c02); }
.b-style-secondary.b-wicon svg { fill:var(--c02); }

.b-style-border { border:1px solid var(--c03);color:var(--c03); }
.b-style-border:hover { border:1px solid var(--c04);color:var(--c04); }
.b-style-border.b-wicon svg { fill:var(--c03); }
.b-style-border.b-wicon:hover svg { fill:var(--c04); }

.b-radius-small { border-radius: 3px; }
.b-radius-big { border-radius: 10px; }
.b-radius-50 { border-radius: 50vh; }

.b-wicon svg { width:.75rem;height:.75rem;transition:.2s;}
.b-wicon.b-fsize-big svg { width:1rem;height:1rem;}
.b-wicon { display:flex;gap:.5rem;align-items:center;justify-content:center;}
.b-wicon-spaced { justify-content: space-between!important; }

.b-icon { display:flex;align-items:center;justify-content:center;padding:0; }
.b-icon.b-size-big { width: 5rem; height:5rem; }
.b-icon.b-size-big svg { width: 2rem; height:2rem; }
.b-icon.b-size-medium { width: 4rem; height:4rem; }
.b-icon.b-size-medium svg { width: 1.5rem; height:1.5rem; }
.b-icon.b-size-small { width: 3rem; height:3rem; }
.b-icon.b-size-small svg { width: 1rem; height:1rem; }

.b-inverted {}


/* POPUPS ************************/

.ppp-container {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; 
  height: 100dvh;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 65000;
}
.ppp-container.active {
  opacity: 1;
  pointer-events: all;
}
.ppp-content {
  
  position: relative;
  box-shadow: 0 1rem 2rem rgba(0,0,0,.4);
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.ppp-container.active .ppp-content {
  opacity: 1;
  transform: translateY(0);
}
.ppp-content > div {
	background: var(--c02);
	min-width:30rem;
  	width:75rem;
  	max-width:calc(100dvw - 5rem);
  	max-height:calc(100dvh - 5rem);
	overflow:auto;
}
.ppp-content > div *:last-child {
	padding-bottom:0!important;
}
.ppp-close {
	background:var(--c03);
	border:none;
	border-radius:50%;
	width:3.2rem;
	height:3.2rem;
	position: absolute;
	z-index:5;
	left:100%;
	top:0;
	transform:translate(-50%,-50%);
	padding:0;
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow: 0 .3rem .4rem rgba(0,0,0,.3);
}
.ppp-close:hover {
	background:var(--c04);
}
.ppp-close svg {
	fill:var(--c02);
	width:1.2rem;
	height:1.2rem;
	transform:rotate(45deg);
	transition:.3s ease;
}
.ppp-close:hover svg {
	transform:rotate(135deg);
}
.ppp-content hr {
    border:none;
    border-top:1px solid var(--c05);
    margin:-.2rem 0 1.7rem;
    opacity:.5;
}
.popup-active .wrapper {
	z-index:65000;
}
.popup-active {
	overflow:hidden;
}