@charset "UTF-8";
/* CSS Document */

@import url("lib/grid/Inter-webfont/Inter.css");
@import url("lib/grid/aspect-ratio.css");
@import url("lib/grid/gula-gridspalten.css");

:root {
    /* --fontsize: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300))); */
--fontsize: calc(14px + (26 - 14) * ((100vw - 300px) / (2000 - 300)));
--lineheight: calc( var( --fontsize ) * 1.35 );

--size-0125: calc( var( --fontsize ) * 0.125 );
--size-025:  calc( var( --fontsize ) * 0.25 );
--size-05:   calc( var( --fontsize ) * 0.5 );
--size-075:  calc( var( --fontsize ) * 0.75 );
--size-1:    calc( var( --fontsize ) * 1 );
--size-125:  calc( var( --fontsize ) * 1.25 );
--size-15:   calc( var( --fontsize ) * 1.5 );
--size-175:  calc( var( --fontsize ) * 1.75 );
--size-2:    calc( var( --fontsize ) * 2 );
--size-225:  calc( var( --fontsize ) * 2.25 );
--size-25:   calc( var( --fontsize ) * 2.5 );
--size-275:  calc( var( --fontsize ) * 2.75 );
--size-3:    calc( var( --fontsize ) * 3 );
--size-35:   calc( var( --fontsize ) * 3.5 );
--size-4:    calc( var( --fontsize ) * 4 );
--size-45:   calc( var( --fontsize ) * 4.5 );
--size-5:    calc( var( --fontsize ) * 5 );
--size-55:   calc( var( --fontsize ) * 5.5 );
--size-6:    calc( var( --fontsize ) * 6 );
--size-65:   calc( var( --fontsize ) * 6.5 );
--size-7:    calc( var( --fontsize ) * 7 );
--size-75:   calc( var( --fontsize ) * 7.5 );
--size-8:    calc( var( --fontsize ) * 8 );
--size-85:   calc( var( --fontsize ) * 8.5 );
--size-9:    calc( var( --fontsize ) * 9 );
--size-95:   calc( var( --fontsize ) * 9.5 );
--size-10:   calc( var( --fontsize ) * 10 );

--grid12: calc( ( 100vw - var( --size-5 ) ) / 12 );

/* --font-family: "Inter", "Helvetica Neue", Helvetica, Arial, "sans-serif"; */
--body-font: "Inter", "Helvetica Neue", Helvetica, Arial, "sans-serif";
--title-font: "Inter", "Helvetica Neue", Helvetica, Arial, "sans-serif";
--font-normal: normal;
--font-italic: italic;
--bodyweight: 400;
--titleweight: 700;
--weight-100: 100;
--weight-200: 200;
--weight-300: 300;
--weight-400: 400;
--weight-500: 500;
--weight-600: 600;
--weight-700: 700;
--weight-800: 800;
--weight-900: 900;

--maincolor-1: 242,211,73;
--maincolor-2: 5,244,183;
--maincolor-bg: 82,219,37;
--sitecolor: 40,55,71;
--site-bgcolor: 176,190,197;
--site_link_color: rgba(var(--white), 1.0);
--site_linkhover_color: rgba(var(--maincolor-2), 1.0);
--topnav-bg: 0,48,42;
--topnav-vg: 1,195,172;
--topnav-hover: 90,254,234;
--topnav-active: 90,254,234;
--mainnav-bg: 40,55,71;
--mainnav-vg: 33,160,235;
--mainnav-hover: 150,210,245;
--mainnav-active: 150,210,245;
--footer_bg: 55,71,79;
--copyright_bg: 38,50,56;
--tablebg: 33,160,235;

--tc_brightred: 222,53,76;
--tc_deepred: 147,36,50;
--tc_purple: 60,24,116;
--tc_purplegrey: 40,55,71;
--tc_deepblue : 0,78,124;
--tc_deepgrey: 92,95,88;
--tc_deepgreen: 38,97,80;
    --deepgreen-50:  #30a170;
    --deepgreen-100: #09956d;
    --deepgreen-200: #188968;
    --deepgreen-300: #1f7e62;
    --deepgreen-400: #1c7159;
    --deepgreen-500: #266150;
    --deepgreen-600: #195644;
    --deepgreen-700: #144d3c;
    --deepgreen-800: #04412f;
    --deepgreen-900: #063427;

--black: 0,0,0;
--white: 255,255,255;
--grey: 33,33,33;
    --grey-50: #e8e8e8;
    --grey-100: #d3d3d3;
    --grey-200: #bcbcbc;
    --grey-300: #a6a6a6;
    --grey-400: #909090;
    --grey-500: #7a7a7a;
    --grey-600: #636363;
    --grey-700: #4d4d4d;
    --grey-800: #373737;
    --grey-900: #212121;
--bluegrey: 38,50,56;
    --bluegrey-50: #e9eaeb;
    --bluegrey-100: #d4d6d7;
    --bluegrey-200: #bdc1c3;
    --bluegrey-300: #a8adaf;
    --bluegrey-400: #92989b;
    --bluegrey-500: #7d8488;
    --bluegrey-600: #676f73;
    --bluegrey-700: #515b60;
    --bluegrey-800: #3b464c;
    --bluegrey-900: #263238;
--purplegrey: 40,55,71;
    --purplegrey-50: #e9ebec;
    --purplegrey-100: #d4d7da;
    --purplegrey-200: #bec3c7;
    --purplegrey-300: #a9afb5;
    --purplegrey-400: #939ba3;
    --purplegrey-500: #7e8791;
    --purplegrey-600: #68737e;
    --purplegrey-700: #535f6c;
    --purplegrey-800: #3b464c;
    --purplegrey-900: #283747;
--yellow: 255,237,0;
--yelloworange: 253,195,0;
--orange: 243,145,0;
--redorange: 234,89,1;
--red: 227,0,11;
--redviolett: 148,22,128;
--violett: 101,32,130;
--blueviolett: 76,51,139;
--blue: 0,70,153;
--bluegreen: 0,143,135;
--green: 7,167,75;
    --green-50: #E8F5E9;
    --green-100: #C8E6C9;
    --green-200: #A5D6A7;
    --green-300: #81C784;
    --green-400: #66BB6A;
    --green-500: #4CAF50;
    --green-600: #43A047;
    --green-700: #388E3C;
    --green-800: #2E7D32;
    --green-900: #1B5E20;
--yellowgreen: 148,193,26;

--phcblue: 54,169,225;
    --phcblue-50:  #e1f2fb;
    --phcblue-100: #c2e5f6;
    --phcblue-200: #a4d8f1;
    --phcblue-300: #86cbed;
    --phcblue-400: #68bfe9;
    --phcblue-500: #36a9e1;
    --phcblue-600: #1c8ec7;
    --phcblue-700: #187cad;
    --phcblue-800: #066594;
    --phcblue-900: #00527a;
--phcgreen: 162,198,23;
    --phcgreen-50:  #ecf4d1;
    --phcgreen-100: #e3eeb9;
    --phcgreen-200: #d5e596;
    --phcgreen-300: #c7dd74;
    --phcgreen-400: #b9d451;
    --phcgreen-500: #a2c617;
    --phcgreen-600: #8fad15;
    --phcgreen-700: #7a9412;
    --phcgreen-800: #657a0f;
    --phcgreen-900: #50610c;
--phcgrey: 36,43,53;
    --phcgrey-50:  #e9e9ea;
    --phcgrey-100: #d3d5d7;
    --phcgrey-200: #bdbfc2;
    --phcgrey-300: #a7aaae;
    --phcgrey-400: #91959a;
    --phcgrey-500: #7c8086;
    --phcgrey-600: #656a71;
    --phcgrey-700: #50555d;
    --phcgrey-800: #394049;
    --phcgrey-900: #242b35;

    /* ahpgreen #00a043 */
	--ahpgreen: 0,160,67;
    /* ahpviolett #b26fc0 */
	--ahpviolett: 178,111,192;
    /* ahplila #8224e3 */
	--ahplila: 130,36,227;

--theme_sitecolor: rgba(var(--phcgrey), 1.0);
--theme_sitebgcolor: rgba(var(--phcgreen), 1.0);

}

/*	============================================================
 *	HTML + BODY
 */
html {
    -webkit-font-smoothing: antialiased;
    height: 100%;
}

/*
 * font Shorthand
 * font-style font-variant font-weight font-size/line-height font-family 
 */
 body {
    font: var( --font-normal ) var( --bodyweight ) var( --fontsize )/var( --lineheight ) var( --body-font );
	letter-spacing: 0px;
	color: rgba(var(--sitecolor), 1.0);
    background-color: rgba(var(--site-bgcolor), 1.0);
	margin: 0px;
	padding: 0px;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
}

#header {
    color: rgba(var(--white), 1.0);
    background-color: rgba(var(--copyright_bg), 1);
}
.header-logo {
    padding-top: calc( var( --fontsize ) * 0.3 );
}


.theme_loginform {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
.theme_loginform input[type=text],
.theme_loginform input[type=password] {
    color: #932432  ;
    background-color: transparent;
	border: none;
	border-bottom: 2px solid rgba(var(--white), 1.0 );
	/* border-bottom: 1px solid #fff; */
	width: 100%;
	padding-top: var( --size-025 );
	/* padding-left: var( --size-05 ); */
	/* padding-right: var( --size-1 ); */
	padding-bottom: var( --size-05 );
	font-size: var( --size-2 );
    text-align: center;
    border-radius: 50%;
}
.theme_loginform input:focus {
	outline:0;
	border-top:0px solid rgba(var(--white), 1.0 );
	border-bottom:6px solid rgba(var(--white), 1.0 );
    border-radius: 50%;
    padding-left: var( --size-05 );
}
.theme_loginform [type=submit] {
    margin-top: var( --size-2 );
}
/* .theme_loginform input[type=submit]:hover {
    background-color: rgba(var(--white), 0.7);
} */

.theme_loginform ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: rgba(var(--white), 0.5 );
    opacity: 1; /* Firefox */
  }  
  .theme_loginform ::-ms-input-placeholder { /* Microsoft Edge */
    color: rgba(var(--white), 0.5 );
  }


.img-responsive {
	margin-bottom: var( --size-025 );
	margin-right: var( --size-025 );
}

/* 
 * Korrektur > WP > "Menu einklappen" 
 */
 button {
    text-align: left;
    font-size: 14px;
}


ul.tg-navigation {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
ul.tg-navigation li {
    margin: 0px;
	margin-bottom: var( --size-025 );
	margin-top: var( --size-025 );
	margin-left: 0px;
	padding-left: 0px;
}
ul.tg-navigation li a {
    font-size: calc( var( --fontsize ) * 0.8 );
    line-height: 1;
}
ul.tg-navigation li a.active {
    color: rgba(var(--sitecolor), 1.0);
}


/* 
 * Nav-Tabs 
 */
.nav-tab-content {
	display: none;
 	margin-top: .5em;
}
.nav-tab-content-active {
	display: block;
}


a, 
a:visited {
    color: var( --site_link_color );
    text-decoration: none;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    text-decoration-line: underline;
    text-decoration-style:dotted;
    text-underline-offset: calc(var( --fontsize ) * 0.3);
    text-decoration-thickness: 1px;
    /* text-decoration-thickness: from-font; */
}
a:hover {
    color: var( --site_linkhover_color );
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
a:focus {
	outline:0;
}
a:hover,
a:active {
	outline:0;
}
input:focus {
	outline:0;
	border:1px solid #04A4CC;
}
/*
 |
 |
 */
.lead {
    font-size: calc(var( --fontsize ) * 1.1);
	font-weight: var( --bodyweight );
    font-style: var( --font-normal );
    line-height: calc(var( --fontsize ) * 1.35);
	margin-bottom: calc( var( --fontsize ) * 1 );
}
.small {
    font-size: calc(var( --fontsize ) * 0.85);
	font-weight: var( --weight-400 );
    font-style: var( --font-normal );
    line-height: calc(var( --fontsize ) * 1.1);
	margin-bottom: calc( var( --fontsize ) * 0.65 );
}
strong {
	font-weight: var( --weight-600 );
    font-style: var( --font-normal );
	letter-spacing: 0.01em;
}
em {
	font-style: var( --font-italic );
}
sup {
    margin-left: 2px;
}
span.initial {
    font-size: calc( var( --fontsize ) * 4.6 );
	font-weight: var( --weight-700 );
    margin: 0.25em 0.1em 0 -0.075em;
    float: left;
    line-height: 0.5;
}


::-moz-selection {
    background: rgba( var(--maincolor-2), 1.0);
    color: #fff
}
::selection {
    background: rgba( var(--maincolor-2), 1.0);
    color: #fff
}


h1, h2, h3, .h1, .h2, .h3 {
	font-family: var( --title-font );
    font-style: var( --font-normal );
	font-weight: var( --titleweight );
	margin: 0px;
	padding: 0px;
}
h4, h5, h6, .h4, .h5, .h6 {
	font-family: var( --title-font );
	font-weight: var( --titleweight );
    font-style: var( --font-normal );
	margin: 0px;
	padding: 0px;
}

.titel-big {
    font-size: calc( var( --fontsize ) * 2.9 );
    line-height: calc( var( --fontsize ) * 3.1);
    margin-bottom: calc( var( --fontsize ) * 0.5 );
    letter-spacing: -0.1rem;
}
.titel-extralarge {
    font-size: calc( var( --fontsize ) * 2.6 );
    line-height: calc( var( --fontsize ) * 2.8 );
    margin-bottom: calc( var( --fontsize ) * 0.5 );
    letter-spacing: -0.1rem;
}
.titel-large {
    font-size: calc( var( --fontsize ) * 2.3 );
    line-height: calc( var( --fontsize ) * 2.5 );
    margin-bottom: calc( var( --fontsize ) * 0.5 );
    letter-spacing: -0.075rem;
}

h1, .h1 {
    font-size: calc( var( --fontsize ) * 2 );
    line-height: calc( var( --fontsize ) * 2.2 );
    margin-bottom: calc( var( --fontsize ) * 0.45 );
    letter-spacing: -0.05rem;
}
h2, .h2 {
    font-size: calc( var( --fontsize ) * 1.6 );
    line-height: calc( var( --fontsize ) * 1.8);
    margin-bottom: calc( var( --fontsize ) * 0.4 );
    letter-spacing: -0.05rem;
}
h3, .h3 {
    font-size: calc( var( --fontsize ) * 1.45 );
    line-height: calc( var( --fontsize ) * 1.65);
    margin-bottom: calc( var( --fontsize ) * 0.4 );
    letter-spacing: -0.05rem;
}
h4, .h4 {
    font-size: calc( var( --fontsize ) * 1.25 );
    line-height: calc( var( --fontsize ) * 1.45);
    margin-bottom: calc( var( --fontsize ) * 0.3 );
    letter-spacing: -0.025rem;
}
h5, .h5 {
    font-size: calc( var( --fontsize ) * 1.13 );
    line-height: calc( var( --fontsize ) * 1.33);
    margin-bottom: calc( var( --fontsize ) * 0.25 );
    letter-spacing: -0.025rem;
}
h6, .h6 {
    font-size: calc( var( --fontsize ) * 1);
    line-height: calc( var( --fontsize ) * 1.2);
    margin-bottom: calc( var( --fontsize ) * 0.15 );
    letter-spacing: -0.025rem;
}


p {
    font-size: var(--fontsize);
	margin: 0px;
	padding: 0px;
	margin-top: calc( var( --fontsize ) * 0.65 );
	margin-bottom: calc( var( --fontsize ) * 0.65 );
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto; 
}

ul {
	margin: 0px;
	padding: 0px;
	margin-left: calc( var( --fontsize ) * 0.3 );
	margin-bottom: calc( var( --fontsize ) * 0.65 );
    /* list-style: none; */
    text-align:left;
}
ol {
	/* margin: 0px;
	padding: 0px; */
	margin-left: calc( var( --fontsize ) * 0 );
	margin-bottom: calc( var( --fontsize ) * 0.65 );
    text-align:left;
}
p ~ ul, p ~ ol {
	margin-top: calc( var( --fontsize ) * -0.65 );
}
ul li, ol li {
	/* margin-left: calc( var( --fontsize ) * 1.5 ); */
	padding-left: 0px;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto; 
}
@media (min-width: 768px) { 
   ul li {
        margin-left: calc( var( --fontsize ) * 0.8 );
        padding-left: 0px;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        -o-hyphens: auto;
        hyphens: auto; 
    }
}

.lead li {
	margin-left: calc( var( --fontsize ) * 1.7 );
	padding-left: 0px;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto; 
}
.small ul li {
	margin-left: calc( var( --fontsize ) * 0.8 );
	padding-left: 0px;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto; 
}
.small ol li {
	margin-left: calc( var( --fontsize ) * 1.5 );
	padding-left: 0px;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto; 
}
.lead ol li {
	margin-left: calc( var( --fontsize ) * 2.8 );
	padding-left: 0px;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto; 
}

dl.base {
    display: grid;
    grid-template-columns: max-content auto;
    margin: 0px;
    padding: 0px;
	margin-bottom: calc( var( --fontsize ) * 0.8 );
}
.base dt {
    grid-column-start: 1;
    font-weight: var( --bodyweight );
    padding-right: calc( var( --fontsize ) * 0.8 );
    margin-bottom: calc( var( --fontsize ) * 0.5 );
    border-bottom: 1px solid rgba(var(--sitecolor), 0.3);
}
.base dd {
    grid-column-start: 2;
    margin-bottom: calc( var( --fontsize ) * 0.5 );  
    border-bottom: 1px solid rgba(var(--sitecolor), 0.3);
}

dl.baselink {
    display: grid;
    grid-template-columns: minmax(35%, 1fr) 1fr;
    margin: 0px;
    padding: 0px;
	margin-bottom: calc( var( --fontsize ) * 0.8 );
}
.baselink dt {
    grid-column-start: 1;
    font-weight: var( --bodyweight );
    padding-right: calc( var( --fontsize ) * 0.8 );
    margin-bottom: calc( var( --fontsize ) * 0.5 );
    border-bottom: 1px solid rgba(var(--sitecolor), 0.3);
}
.baselink dd {
    grid-column-start: 2;
    margin-bottom: calc( var( --fontsize ) * 0.5 );  
    border-bottom: 1px solid rgba(var(--sitecolor), 0.3);
}

/* https://www.w3.org/Style/Examples/007/leaders */
p ~ ul.leaders {
	margin-top: calc( var( --size-075 ) * -1 );
}

ul.leaders {
    max-width: 40em;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    list-style: none;
	margin-bottom: calc( var( --fontsize ) * 0.8 );
}
ul.leaders li {
    margin: 0;
    padding: 0;
}
ul.leaders {
    max-width: 40em;
    padding: 0;
    overflow-x: hidden;
    list-style: none
}
ul.leaders li:after {
    float: left;
    width: 0;
    white-space: nowrap;
    content:
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
}
ul.leaders span:first-child {
    padding-right: 0.33em;
    background: rgba(var(--site-bgcolor), 1.0);
}
ul.leaders span + span {
    float: right;
    padding-left: 0.33em;
    background: rgba(var(--site-bgcolor), 1.0);
    position: relative;
    z-index: 1;
}


/*	============================================================
 *	BLOCKQUOTE
 */

    blockquote {
        /* font-family: Georgia, serif; */
        font-style: italic;
        margin-left: 0px;
        margin-bottom: calc(var( --fontsize ) * 0.25);
        margin-right: 0%;
        padding-top: 0em;
        padding-right: 0px;
        padding-left: calc(var( --fontsize ) * 2);
        padding-bottom: calc(var( --fontsize ) * 0.25);
        position: relative;
        border-left: 0px solid rgba(102,113,138,1.00);
    }
    blockquote strong {
        font-style: bold;
    }
    blockquote:before {
        font-family: Georgia, serif;
        display: block;
        content: "\201C";
        font-size: calc(var( --fontsize ) * 5);
        position: absolute;
        left: -8px;
        top: calc(var( --fontsize ) * 1);
    }
    blockquote cite {
        font-size: calc(var( --fontsize ) * 0.85);
        display: block;
        margin-top: calc(var( --fontsize ) * 0.3);
    }
    blockquote cite:before {
        content: "\2014 \2009";
    }


/*	============================================================
 *	SECTIONS
 */

 .mainwrapper {
    padding-left: var(--size-1);
    padding-right: var(--size-1);
    position: relative;
}

 .contentwidth-90, 
 .contentwidth-80 {
    padding-left: 0px;
    padding-right: 0px;
}
 .contentwidth-70 {
    padding-left: 5%;
    padding-right: 5%;
}
 .contentwidth-60 {
    padding-left: 10%;
    padding-right: 10%;
}
    @media (min-width: 576px) {
        .mainwrapper {
            padding-left: var(--size-25);
            padding-right: var(--size-25);
			position: relative;
        }
        .contentwidth-90 {
            padding-left: 0px;
            padding-right: 0px;
        }
        .contentwidth-70 {
            padding-left: 5%;
            padding-right: 5%;
        }
        .contentwidth-60 {
            padding-left: 10%;
            padding-right: 10%;
        }
    }
    @media (min-width: 768px) { 
        .contentwidth-90 {
            padding-left: 5%;
            padding-right: 5%;
        }
        .contentwidth-80 {
            padding-left: 10%;
            padding-right: 10%;
        }
        .contentwidth-70 {
            padding-left: 15%;
            padding-right: 15%;
        }
        .contentwidth-60 {
            padding-left: 20%;
            padding-right: 20%;
        }
    }

main {
    display: block;
    flex: 1;
}
main img {
    display: block;
    height: auto;
    max-width: 100%;
}
    
.fadeInBlock {
    opacity:1;
}

.vhtheme {
    height: calc( 100vh - 90px );
    display: grid;
    /* align-content:center; */
}
.vh100 {
    height: 100vh;
    display: grid;
}
.vh75 {
    height: 75vh;
    display: grid;
}
.vh50 {
    height: 50vh;
    display: grid;
}



/*	============================================================
 *	GRID + FLEX
 */
 .grid_wrapper { display: grid; }
 .flex_wrapper { display: flex; flex-wrap: wrap; }




/*	============================================================
	Modal
	============================================================ */
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
     color: white;
   position: relative;
	background-color: rgba(38,43,50,0.9);
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 60%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
	padding: 5px 16px 0px 46px;
	background-color: #0B1017;
	/*color: white;*/
	border-bottom: 0px solid #e5e5e5;
	/* [disabled]border-bottom-left-radius: 3px; */
	/* [disabled]border-bottom-right-radius: 3px; */
	border-top-right-radius: 6px;
	border-top-left-radius: 6px;
}

.modal-body {
	padding: 30px 46px;
	/*text-align: center;*/
}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

a#myBtn  {
	color: #FFFFFF;
}
a#myBtn:hover  {
	color: #111111;
;
}

/*	============================================================
 *	Footer
 */
 #footer img {
    display: block;
    height: auto;
    max-width: 100%;
  }
  .brand-img {
      width: 170px;
  }
  
.footer {
    color: rgba(var(--white), 1.0);
    background-color: rgba(var(--copyright_bg), 1);
}
.grid_footer {
	display: grid;
	grid-template-columns: auto auto auto;
}

/* 
 * Footer Spalten
 */
.footer .S01, .footer .S02, .footer .S03, .footer .S04 {
	font-size: calc( var( --fontsize ) * 0.8 );
	line-height: calc( var( --fontsize ) * 1.1 );
	margin-bottom: calc( var( --fontsize ) * 0.6 );
}

.footer .S01 h3, .footer .S02 h3, .footer .S03 h3, .footer .S04 h3,
.footer .S01 h4, .footer .S02 h4, .footer .S03 h4, .footer .S04 h4,
.footer .S01 h5, .footer .S02 h5, .footer .S03 h5, .footer .S04 h5,
.footer .S01 h6, .footer .S02 h6, .footer .S03 h6, .footer .S04 h6 {
    font-size: calc( var( --fontsize ) * 0.8 );
	font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
	margin-bottom: calc( var( --fontsize ) * 0.5 );
}


/*	--- Footer - Footernav ---
	Links intern ---*/
    /* .footer-nav li.current-menu-item a,
    .footer-nav li.current_page_item a {
    } */

    .footer_content .S02 ul,
    .footer_content .S03 ul,
    .footer_content .S04 ul {
        width: 100%;
        margin-top: 1px;
        border-bottom: 1px dotted rgba(var(--sitecolor), 0.6);
    }
    .footer_content .S02 ul li,
    .footer_content .S03 ul li,
    .footer_content .S04 ul li {
        border-top: 1px dotted rgba(var(--sitecolor), 0.6);
        margin: 0px;
        padding: 0px;
    }
    .footer_content .S02 ul li a,
    .footer_content .S03 ul li a,
    .footer_content .S04 ul li a {
        display: block;
        padding-top: 4px;
        padding-bottom: 4px;
    }
    .footer_content .S02 ul li a:active,
    .footer_content .S02 ul li a:focus,
    .footer_content .S02 ul li a:hover,
    .footer_content .S03 ul li a:active,
    .footer_content .S03 ul li a:focus,
    .footer_content .S03 ul li a:hover,
    .footer_content .S04 ul li a:active,
    .footer_content .S04 ul li a:focus,
    .footer_content .S04 ul li a:hover
    {
        color: rgba(var(--site_linkhover_color), 1.0);
    }

    .footer_content .S02 li a:before,
    .footer_content .S03 li a:before,
    .footer_content .S04 li a:before {
        position: relative;
        top: 0px;
        display: inline-block;
        font-family: 'FontAwesome';
        font-style: normal;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        padding-top: 0px;
        padding-right: 10px;
        padding-left: 0px;
        padding-bottom: 0;
        content: "\f105";
        margin-left:0px;
    }
    

/*	============================================================
 *	Copyright
 */

.copyright {
	padding-top: calc( var( --fontsize ) * 0.5 );
	padding-bottom: calc( var( --fontsize ) * 0.5 );
	font-size: calc( var( --fontsize ) * 0.8 );
    text-align: center;
    color: rgba(var(--white), 1.0);
    background-color: rgba(var(--copyright_bg), 1);
}
.copyright .copyright_content {
    display: grid;
    grid-template-columns: auto auto;
    align-content: space-around;
    justify-content: space-between;
}
.copyright .copyright_item {
}

.copyright_item a, .copyright_item a:visited {
    color: rgba(var(--site_link_color), 1.0)!important;
    text-decoration: none;
}
.copyright .copyright_item a:hover {
    color: rgba(var(--site_linkhover_color), 1.0)!important;
    text-decoration: none;
}
.copyright p {
	margin: 0px;
}


/*	============================================================
 *	Video
 */

/*.masthead {
}
.masthead {
    position: relative;
	overflow: hidden;
    margin-bottom: -7px;
    padding: 0px;
}
video {
	display: block;
	width: 100%;
	z-index: -1;
}
*/

/*	============================================================
 *	TABELLE
 */
/* table {
    display: table;
    border-collapse: separate;
    border-spacing: 0px;
    font-size: calc( var( --fontsize ) * 0.9 );
	text-align:left;
	vertical-align:top;
	padding-left: 0px;
	padding-right:0px;
	width:100%;
	margin-bottom: calc( var( --fontsize ) * 1 );
}
th {
	border-bottom: 1px dotted rgba(var(--sitecolor), 0.25);
	padding-top: calc( var( --fontsize ) * 0.4 );
	padding-bottom: calc( var( --fontsize ) * 0.1 );
	padding-left: calc( var( --fontsize ) * 0.25 );
	padding-right: calc( var( --fontsize ) * 0.25 );
	vertical-align: top;
}
th {
	background-color: rgba(var(--sitecolor), 0.15);
}

td {
	border-bottom: 1px dotted rgba(var(--sitecolor), 0.25);
	padding-top: calc( var( --fontsize ) * 0.4 );
	padding-bottom: calc( var( --fontsize ) * 0.1 );
	padding-left: calc( var( --fontsize ) * 0.25 );
	padding-right: calc( var( --fontsize ) * 0.25 );
	vertical-align: top;
} */
    
/* tr:nth-child(odd) {
	background-color: rgba(var(--sitecolor), 0.05);
}
tr:nth-child(even) {
	background-color: rgba(var(--sitecolor), 0.1);
} */


/* 
 * Theme Table
 */
table.themetable {
    display: table;
    border-collapse: separate;
    border-spacing: 0px;
    font-size: calc( var( --fontsize ) * 0.9 );
	text-align:left;
	vertical-align:top;
	padding-left: 0px;
	padding-right:0px;
	width:100%;
	margin-bottom: calc( var( --fontsize ) * 1 );
}

.themetable th {
	border-bottom: 1px dotted rgba(var(--tablebg), 0.5);
	padding-top: calc( var( --fontsize ) * 0.4 );
	padding-bottom: calc( var( --fontsize ) * 0.1 );
	padding-left: calc( var( --fontsize ) * 0.25 );
	padding-right: calc( var( --fontsize ) * 0.25 );
	vertical-align: top;
}
.themetable th {
    font-family: var( --title-font );
    font-weight: var( --weight-700 );
	background-color: rgba(var(--tablebg), 0.5);
}

.themetable td {
	border-bottom: 1px dotted rgba(var(--tablebg), 0.5);
	padding-top: calc( var( --fontsize ) * 0.4 );
	padding-bottom: calc( var( --fontsize ) * 0.1 );
	padding-left: calc( var( --fontsize ) * 0.25 );
	padding-right: calc( var( --fontsize ) * 0.25 );
	vertical-align: top;
}
    
.themetable tr:nth-child(odd) {
	background-color: rgba(var(--tablebg), 0.15);
}
.themetable tr:nth-child(even) {
	background-color: rgba(var(--tablebg), 0.25);
}

table.themetable a {
	color: rgba(var(--tablebg), 1);
	text-decoration: none;
}
table.themetable a:visited {
	color: rgba(102,113,138,1.00);
	text-decoration: none;
}
table.themetable a:hover {
	color: rgba(var(--tablebg), 0.25);
}

@media screen and (max-width:767px) {
	
	table.themetable {
		border:none;
	}
    .themetable thead {
		display:none;
	}
	.themetable tr {
		float: left;
		width: 100%;
        padding-top: calc( var( --fontsize ) * 0.4 );
        padding-bottom: calc( var( --fontsize ) * 0.1 );    
	}
	.themetable td {
		float: left;
		width: 100%;
        padding-top: calc( var( --fontsize ) * 0.4 );
        padding-bottom: calc( var( --fontsize ) * 0.1 );    
	}
	.themetable td::before {
		content:attr(data-label);
		word-wrap: break-word;
		min-width: 30%;
		float:left;
		font-weight: 700;
	}
}


/* 
 * Grid Table
 */
ul.base {
    width: 100%!important;
    display: inline-grid;
    grid-template-columns: repeat(7, auto);
    /*grid-template-columns: auto auto auto;*/
    grid-template-rows: auto;
    font-size: calc( var( --fontsize ) * 0.9 );
    margin: 0px;
    padding: 0px;
	margin-bottom: calc( var( --fontsize ) * 0.75 ); 
    list-style: none;
}
ul.base li {
    margin-left: 0px;
    font-weight: var( --bodyweight );
	padding-top: calc( var( --fontsize ) * 0.4 );
	padding-bottom: calc( var( --fontsize ) * 0.1 );
	padding-left: calc( var( --fontsize ) * 0.25 );
	padding-right: calc( var( --fontsize ) * 1 );
    border-bottom: 1px solid #CFCFCF;
    background-color: rgba(var(--tablebg), 0.15);
}
ul.base li.header {
    font-family: var( --title-font );
    font-weight: var( --weight-700 );
	background-color: rgba(var(--tablebg), 0.3);
}
ul.base li:before { /* the custom styled bullets */
    background-color: transparent;
    border-radius: 0;
    content: "";
    display: inline-block;
    margin-right: 0px;
    margin-bottom: 0px;
    height: 0px;
    width: 0px;
    margin-left: 0rem;
}

@media screen and (max-width:767px) {

    ul.base {
        grid-template-columns: repeat(1, auto);
    }
    ul.base li::before {
        content:attr(data-label);
        word-wrap: break-word;
        min-width: 30%;
        font-family: var( --title-font );
        font-weight: var( --weight-700 );
        background-color: rgba(var(--tablebg), 0.3);
    }
    ul.base li.header {
        display: none;
    }

}


/* 
 * Grid Table
 */
.base-wrapper {
    display: grid;
    grid-template-columns: repeat(7, auto);
    font-size: calc( var( --fontsize ) * 0.9 );
    /*overflow-x: scroll;*/
}
.base-wrapper > div {
    font-weight: var( --bodyweight );
	padding-top: calc( var( --fontsize ) * 0.4 );
	padding-bottom: calc( var( --fontsize ) * 0.1 );
	padding-left: calc( var( --fontsize ) * 0.25 );
	padding-right: calc( var( --fontsize ) * 0.25 );
    border-bottom: 1px solid #CFCFCF;
    background-color: rgba(var(--tablebg), 0.15);
}
.base-wrapper > div strong {
    font-family: var( --title-font );
    font-weight: var( --weight-700 );
}
.base-wrapper > div:nth-child(-n+7) {
	background-color: rgba(var(--tablebg), 0.25);
}




/* 
 * Pre - Theme Guide
 */

pre {
    overflow: auto;
  }
code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: var(--size-1);
  }
pre,
blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  code,
  kbd,
  pre,
  samp {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  }
  code {
    padding: 2px 4px;
    font-size: var(--size-1);
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
  }
  pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: var(--size-075);
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    white-space:pre-wrap;
    background-color: rgba(var(--white), 0.2 );
    /* border: 1px solid rgba(var(--sitecolor), 0.3 ); */
    border: 1px solid transparent;
    border-radius: 4px;
    max-width: 100%;
  }
  pre code {
    padding: 0;
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap;
    background-color: transparent;
    border-radius: 0;
  }
  .pre-scrollable {
    max-height: 340px;
    overflow-y: scroll;
  }

  textarea.htmlcode {
      display: inline-block;
      width: 100%;
      min-height: 250px!important;
  }


/*	============================================================
 *	Diverses
 */

.nono { display: none; }

/*  Versatz links - Versatz oben - Unschärfe (Blur) - Farbe  */
.bold { font-weight: 700; }
.shadowtext { text-shadow: 1px 1px 0px #000; }
.boxshadow { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; } 
.nomarg { margin-left: 0px; margin-right: 0px; }
.nomarg-left { margin-left: 0px; }
.nomarg-right { margin-right: 0px; }
.nopad { padding-left: 0px; padding-right: 0px; }
.nopad-left { padding-left: 0px; }
.nopad-right { padding-right: 0px; }
.round { border-radius: 50%; }
.upcase { text-transform: uppercase; }
.text-left { text-align: left!important; }
.text-center { text-align: center!important; }
.text-right { text-align: right!important; }
span.lines { border-bottom: #FFF solid 1px; border-top: 1px solid #FFF; padding-bottom: 1px; }
.dot { border-radius: 50%; display: inline-block; }

.neg span { display: inline-block; }
    .neg > span > span { padding: 0 0.25em; margin: 0 -0.5em 0 0; }
    .neg .blackbg span { background-color: #000; color: #ffffff; }
    .neg .whitebg span { background-color: #ffffff; color: #000; }

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}


/* 
 *  Arrows
 */
 .tarrow {
    border: solid;
    display: inline-block;
}
    .tarrow.down {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
    .tarrow.up {
        transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
    }
    .tarrow.left {
        transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
    }
    .tarrow.right {
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }

.arrborder1  { border-width: 0 1px 1px 0; }
.arrborder2  { border-width: 0 2px 2px 0; }
.arrborder3  { border-width: 0 3px 3px 0; }
.arrborder4  { border-width: 0 4px 4px 0; }
.arrborder5  { border-width: 0 5px 5px 0; }
.arrborder6  { border-width: 0 6px 6px 0; }
.arrborder7  { border-width: 0 7px 7px 0; }
.arrborder8  { border-width: 0 8px 8px 0; }
.arrborder9  { border-width: 0 9px 9px 0; }
.arrborder10 { border-width: 0 10px 10px 0; }
.arrborder11 { border-width: 0 11px 11px 0; }
.arrborder12 { border-width: 0 12px 12px 0; }
.arrborder13 { border-width: 0 13px 13px 0; }
.arrborder14 { border-width: 0 14px 14px 0; }
.arrborder15 { border-width: 0 15px 15px 0; }
.arrborder16 { border-width: 0 16px 16px 0; }
.arrborder17 { border-width: 0 17px 17px 0; }




/* 
 *  Fonts
 */
.sans  { font-family: var( --title-font ); font-style: var( --font-normal ); }
.serif { font-family: var( --title-font-serif ); font-style: var( --font-normal ); }

.fs5vw   { font-size: 5vw; }
.fs6vw   { font-size: 6vw; }
.fs7vw   { font-size: 7vw; }
.fs8vw   { font-size: 8vw; }
.fs9vw   { font-size: 9vw; }
.fs10vw  { font-size: 10vw; }
.fs15vw  { font-size: 15vw; }
.fs20vw  { font-size: 20vw; }
.fs25vw  { font-size: 25vw; }
.fs30vw  { font-size: 30vw; }
.fs35vw  { font-size: 35vw; }
.fs40vw  { font-size: 40vw; }
.fs45vw  { font-size: 45vw; }
.fs50vw  { font-size: 50vw; }
.fs55vw  { font-size: 55vw; }
.fs60vw  { font-size: 60vw; }
.fs65vw  { font-size: 65vw; }
.fs70vw  { font-size: 70vw; }
.fs75vw  { font-size: 75vw; }
.fs80vw  { font-size: 80vw; }
.fs85vw  { font-size: 85vw; }
.fs90vw  { font-size: 90vw; }
.fs95vw  { font-size: 95vw; }
.fs100vw { font-size: 100vw; }

.fs-xxl   { font-size: 13vw; line-height: 1; letter-spacing: -0.05rem; }
.fs-xl    { font-size: 11vw; line-height: 1; letter-spacing: -0.05rem; }
.fs-lg    { font-size: 9.3vw; line-height: 1; letter-spacing: -0.05rem; }
.fs-md    { font-size: 7.9vw; line-height: 1; letter-spacing: -0.05rem; }
.fs-sm    { font-size: 6.7vw; line-height: 1; letter-spacing: -0.05rem; }
.fs-xs    { font-size: 5.7vw; line-height: 1; letter-spacing: -0.05rem; }
.fs-xxs   { font-size: 4.9vw; line-height: 1; letter-spacing: -0.05rem; }
.fs-xxxs  { font-size: 4.15vw; line-height: 1; letter-spacing: -0.05rem; }
.fs-xxxxs { font-size: 3.35vw; line-height: 1; letter-spacing: -0.05rem; }

.fs1  { font-size: calc( var( --fontsize ) * 0.6 ); line-height: 1; letter-spacing: -0.05rem; } 
.fs2  { font-size: calc( var( --fontsize ) * 0.7 ); line-height: 1; letter-spacing: -0.05rem; }
.fs3  { font-size: calc( var( --fontsize ) * 0.8 ); line-height: 1; letter-spacing: -0.05rem; }
.fs4  { font-size: calc( var( --fontsize ) * 0.9 ); line-height: 1; letter-spacing: -0.05rem; }
.fs5  { font-size: calc( var( --fontsize ) * 1.0 ); line-height: 1; letter-spacing: -0.05rem; }
.fs6  { font-size: calc( var( --fontsize ) * 1.2 ); line-height: 1; letter-spacing: -0.05rem; }
.fs7  { font-size: calc( var( --fontsize ) * 1.4 ); line-height: 1; letter-spacing: -0.05rem; }
.fs8  { font-size: calc( var( --fontsize ) * 1.6 ); line-height: 1; letter-spacing: -0.05rem; }
.fs9  { font-size: calc( var( --fontsize ) * 1.8 ); line-height: 1; letter-spacing: -0.05rem; }
.fs10 { font-size: calc( var( --fontsize ) * 2.05 ); line-height: 1; letter-spacing: -0.05rem; }
.fs11 { font-size: calc( var( --fontsize ) * 2.25 ); line-height: 1; letter-spacing: -0.05rem; }
.fs12 { font-size: calc( var( --fontsize ) * 2.5 ); line-height: 1; letter-spacing: -0.05rem; }
.fs13 { font-size: calc( var( --fontsize ) * 2.75 ); line-height: 1; letter-spacing: -0.05rem; }
.fs14 { font-size: calc( var( --fontsize ) * 3 ); line-height: 1; letter-spacing: -0.05rem; }
.fs15 { font-size: calc( var( --fontsize ) * 3.3 ); line-height: 1; letter-spacing: -0.05rem; }
.fs16 { font-size: calc( var( --fontsize ) * 3.6 ); line-height: 1; letter-spacing: -0.05rem; }
.fs17 { font-size: calc( var( --fontsize ) * 3.9 ); line-height: 1; letter-spacing: -0.05rem; }
.fs18 { font-size: calc( var( --fontsize ) * 4.3); line-height: 1; letter-spacing: -0.05rem; }
.fs19 { font-size: calc( var( --fontsize ) * 4.7 ); line-height: 1; letter-spacing: -0.05rem; }
.fs20 { font-size: calc( var( --fontsize ) * 5.1 ); line-height: 1; letter-spacing: -0.05rem; }

/* 
 *  Font Weight
 */
.fw100 { font-weight: var( --weight-100 )!important; }
.fw200 { font-weight: var( --weight-200 )!important; }
.fw300 { font-weight: var( --weight-300 )!important; }
.fw400 { font-weight: var( --weight-400 )!important; }
.fw500 { font-weight: var( --weight-500 )!important; }
.fw600 { font-weight: var( --weight-600 )!important; }
.fw700 { font-weight: var( --weight-700 )!important; }
.fw800 { font-weight: var( --weight-800 )!important; }
.fw900 { font-weight: var( --weight-900 )!important; }

/* 
 *  Font Style
 */
 .italic { font-style: italic;}

/* 
 *  Line Height
 */
.lh05 { line-height: 0.5!important; }
.lh06 { line-height: 0.6!important; }
.lh07 { line-height: 0.7!important; }
.lh08 { line-height: 0.8!important; }
.lh09 { line-height: 0.9!important; }
.lh10 { line-height: 1!important; }
.lh11 { line-height: 1.1!important; }
.lh12 { line-height: 1.2!important; }
.lh13 { line-height: 1.3!important; }
.lh14 { line-height: 1.4!important; }
.lh15 { line-height: 1.5!important; }
.lh16 { line-height: 1.6!important; }
.lh17 { line-height: 1.7!important; }
.lh18 { line-height: 1.8!important; }
.lh19 { line-height: 1.9!important; }
.lh20 { line-height: 2!important; }
.lh21 { line-height: 2.1!important; }
.lh22 { line-height: 2.2!important; }
.lh23 { line-height: 2.3!important; }
.lh24 { line-height: 2.4!important; }
.lh25 { line-height: 2.5!important; }

/* 
 *  Letter Spacing
 */
 .-lesp1    { letter-spacing: -1rem; }
 .-lesp075  { letter-spacing: -0.75rem; }
 .-lesp05   { letter-spacing: -0.5rem; }
 .-lesp04   { letter-spacing: -0.4rem; }
 .-lesp03   { letter-spacing: -0.3rem; }
 .-lesp02   { letter-spacing: -0.2rem; }
 .-lesp01   { letter-spacing: -0.1rem; }
 .-lesp0075 { letter-spacing: -0.075rem; }
 .-lesp005  { letter-spacing: -0.05rem; }
 .-lesp0025 { letter-spacing: -0.025rem; }
 .lesp0     { letter-spacing: 0rem; }
 .lesp0025  { letter-spacing: 0.025rem; }
 .lesp005   { letter-spacing: 0.05rem; }
 .lesp0075  { letter-spacing: 0.075rem; }
 .lesp01    { letter-spacing: 0.1rem; }
 .lesp02    { letter-spacing: 0.2rem; }
 .lesp03    { letter-spacing: 0.3rem; }
 .lesp04    { letter-spacing: 0.4rem; }
 .lesp05    { letter-spacing: 0.5rem; }
 .lesp075   { letter-spacing: 0.75rem; }
 .lesp1     { letter-spacing: 1rem; }


/* 
 *  Text Indent
 */
.textindent0125 { text-indent: var( --size-0125 ); }
.textindent025  { text-indent: var( --size-025 ); }
.textindent05   { text-indent: var( --size-05 ); }
.textindent075  { text-indent: var( --size-075 ); }
.textindent1    { text-indent: var( --size-1 ); }
.textindent125  { text-indent: var( --size-125 ); }
.textindent15   { text-indent: var( --size-15 ); }
.textindent175  { text-indent: var( --size-175 ); }
.textindent2    { text-indent: var( --size-2 ); }
.textindent225  { text-indent: var( --size-225 ); }
.textindent25   { text-indent: var( --size-25 ); }
.textindent275  { text-indent: var( --size-275 ); }
.textindent3    { text-indent: var( --size-3 ); }
.textindent35   { text-indent: var( --size-35 ); }
.textindent4    { text-indent: var( --size-4 ); }
.textindent45   { text-indent: var( --size-45 ); }
.textindent5    { text-indent: var( --size-5 ); }
.textindent55   { text-indent: var( --size-55 ); }
.textindent6    { text-indent: var( --size-6 ); }
.textindent65   { text-indent: var( --size-65 ); }
.textindent7    { text-indent: var( --size-7 ); }
.textindent75   { text-indent: var( --size-75 ); }
.textindent8    { text-indent: var( --size-8 ); }
.textindent85   { text-indent: var( --size-85 ); }
.textindent9    { text-indent: var( --size-9 ); }
.textindent95   { text-indent: var( --size-95 ); }
.textindent10   { text-indent: var( --size-10 ); }

.-textindent0125 { text-indent: calc( var( --size-0125 ) * -1 ); }
.-textindent025  { text-indent: calc( var( --size-025 ) * -1 ); }
.-textindent05   { text-indent: calc( var( --size-05 ) * -1 ); }
.-textindent075  { text-indent: calc( var( --size-075 ) * -1 ); }
.-textindent1    { text-indent: calc( var( --size-1 ) * -1 ); }
.-textindent125  { text-indent: calc( var( --size-125 ) * -1 ); }
.-textindent15   { text-indent: calc( var( --size-15 ) * -1 ); }
.-textindent175  { text-indent: calc( var( --size-175 ) * -1 ); }
.-textindent2    { text-indent: calc( var( --size-2 ) * -1 ); }
.-textindent225  { text-indent: calc( var( --size-225 ) * -1 ); }
.-textindent25   { text-indent: calc( var( --size-25 ) * -1 ); }
.-textindent275  { text-indent: calc( var( --size-275 ) * -1 ); }
.-textindent3    { text-indent: calc( var( --size-3 ) * -1 ); }
.-textindent35   { text-indent: calc( var( --size-35 ) * -1 ); }
.-textindent4    { text-indent: calc( var( --size-4 ) * -1 ); }
.-textindent45   { text-indent: calc( var( --size-45 ) * -1 ); }
.-textindent5    { text-indent: calc( var( --size-5 ) * -1 ); }
.-textindent55   { text-indent: calc( var( --size-55 ) * -1 ); }
.-textindent6    { text-indent: calc( var( --size-6 ) * -1 ); }
.-textindent65   { text-indent: calc( var( --size-65 ) * -1 ); }
.-textindent7    { text-indent: calc( var( --size-7 ) * -1 ); }
.-textindent75   { text-indent: calc( var( --size-75 ) * -1 ); }
.-textindent8    { text-indent: calc( var( --size-8 ) * -1 ); }
.-textindent85   { text-indent: calc( var( --size-85 ) * -1 ); }
.-textindent9    { text-indent: calc( var( --size-9 ) * -1 ); }
.-textindent95   { text-indent: calc( var( --size-95 ) * -1 ); }
.-textindent10   { text-indent: calc( var( --size-10 ) * -1 ); }


/* 
 *  Border
 */
.btop1-solid-black  { border-top: 1px solid rgba( var(--black), 1.0); }
.btop2-solid-black  { border-top: 2px solid rgba( var(--black), 1.0); }
.btop3-solid-black  { border-top: 3px solid rgba( var(--black), 1.0); }
.btop4-solid-black  { border-top: 4px solid rgba( var(--black), 1.0); }
.btop5-solid-black  { border-top: 5px solid rgba( var(--black), 1.0); }
.btop6-solid-black  { border-top: 6px solid rgba( var(--black), 1.0); }
.btop7-solid-black  { border-top: 7px solid rgba( var(--black), 1.0); }
.btop8-solid-black  { border-top: 8px solid rgba( var(--black), 1.0); }
.btop9-solid-black  { border-top: 9px solid rgba( var(--black), 1.0); }
.btop10-solid-black { border-top: 10px solid rgba( var(--black), 1.0); }

.btop1-solid-white  { border-top: 1px solid rgba( var(--white), 1.0); }
.btop2-solid-white  { border-top: 2px solid rgba( var(--white), 1.0); }
.btop3-solid-white  { border-top: 3px solid rgba( var(--white), 1.0); }
.btop4-solid-white  { border-top: 4px solid rgba( var(--white), 1.0); }
.btop5-solid-white  { border-top: 5px solid rgba( var(--white), 1.0); }
.btop6-solid-white  { border-top: 6px solid rgba( var(--white), 1.0); }
.btop7-solid-white  { border-top: 7px solid rgba( var(--white), 1.0); }
.btop8-solid-white  { border-top: 8px solid rgba( var(--white), 1.0); }
.btop9-solid-white  { border-top: 9px solid rgba( var(--white), 1.0); }
.btop10-solid-white { border-top: 10px solid rgba( var(--white), 1.0); }

.bbot1-solid-black  { border-bottom: 1px solid rgba( var(--black), 1.0); }
.bbot2-solid-black  { border-bottom: 2px solid rgba( var(--black), 1.0); }
.bbot3-solid-black  { border-bottom: 3px solid rgba( var(--black), 1.0); }
.bbot4-solid-black  { border-bottom: 4px solid rgba( var(--black), 1.0); }
.bbot5-solid-black  { border-bottom: 5px solid rgba( var(--black), 1.0); }
.bbot6-solid-black  { border-bottom: 6px solid rgba( var(--black), 1.0); }
.bbot7-solid-black  { border-bottom: 7px solid rgba( var(--black), 1.0); }
.bbot8-solid-black  { border-bottom: 8px solid rgba( var(--black), 1.0); }
.bbot9-solid-black  { border-bottom: 9px solid rgba( var(--black), 1.0); }
.bbot10-solid-black { border-bottom: 10px solid rgba( var(--black), 1.0); }

.bbot1-solid-white  { border-bottom: 1px solid rgba( var(--white), 1.0); }
.bbot2-solid-white  { border-bottom: 2px solid rgba( var(--white), 1.0); }
.bbot3-solid-white  { border-bottom: 3px solid rgba( var(--white), 1.0); }
.bbot4-solid-white  { border-bottom: 4px solid rgba( var(--white), 1.0); }
.bbot5-solid-white  { border-bottom: 5px solid rgba( var(--white), 1.0); }
.bbot6-solid-white  { border-bottom: 6px solid rgba( var(--white), 1.0); }
.bbot7-solid-white  { border-bottom: 7px solid rgba( var(--white), 1.0); }
.bbot8-solid-white  { border-bottom: 8px solid rgba( var(--white), 1.0); }
.bbot9-solid-white  { border-bottom: 9px solid rgba( var(--white), 1.0); }
.bbot10-solid-white { border-bottom: 10px solid rgba( var(--white), 1.0); }


.bleft10-solid-white { border-left: 10px solid rgba( var(--white), 1.0); }



.btop-solid { border-top: solid; }
.btop-dotted { border-top: dotted; }
.btop-dashed { border-top: dashed; }
.btop-double { border-top: double; }

.btop-width1 { border-top-width: 1px;}
.btop-width2 { border-top-width: 2px;}
.btop-width3 { border-top-width: 3px;}
.btop-width4 { border-top-width: 4px;}
.btop-width5 { border-top-width: 5px;}
.btop-width6 { border-top-width: 6px;}
.btop-color { border-top-color: #04A4CC;}

.b-left1  { border-left:1px; }

.b-dashed { border-style:dashed; }
.b-top-double { border-top: double; }
.b-top-white { border-top: color: rgba( var(--white), 1.0); }


hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 10px solid transparent;
}
/* .hrborder { margin-top: 0px!important; margin-bottom: 0px!important; } */
.hrborder.hrblack { border-color: rgba( var(--black), 1.0)!important; }
.hrborder.hrwhite { border-color: rgba( var(--white), 1.0)!important; }
.hrborder.hrdeepred { border-color: rgba( var(--deepred), 1.0); }

.hrborder.dotted { border-style:dotted!important; }
.hrborder.dashed { border-style:dashed!important; }
.hrborder.double { border-style:double!important; }
.hrborder.single { border-style:single; }

.hrleft{ display: inline-block; vertical-align: middle; margin-right:auto; }

.hrwidth1  { border-width:calc( var( --fontsize ) * 0.1 ); }
.hrwidth2  { border-width:calc( var( --fontsize ) * 0.15 ); }
.hrwidth3  { border-width:calc( var( --fontsize ) * 0.175 ); }
.hrwidth4  { border-width:calc( var( --fontsize ) * 0.2 ); }
.hrwidth5  { border-width:calc( var( --fontsize ) * 0.25 ); }
.hrwidth6  { border-width:calc( var( --fontsize ) * 0.3 ); }
.hrwidth7  { border-width:calc( var( --fontsize ) * 0.35 ); }
.hrwidth8  { border-width:calc( var( --fontsize ) * 0.4 ); }
.hrwidth9  { border-width:calc( var( --fontsize ) * 0.475 ); }
.hrwidth10 { border-width:calc( var( --fontsize ) * 0.55 ); }
.hrwidth15 { border-width:calc( var( --fontsize ) * 0.8 ); }
.hrwidth20 { border-width:calc( var( --fontsize ) * 0.95 ); }
.hrwidth25 { border-width:calc( var( --fontsize ) * 1.2 ); }
.hrwidth30 { border-width:calc( var( --fontsize ) * 1.45 ); }
.hrwidth35 { border-width:calc( var( --fontsize ) * 1.7 ); }
.hrwidth40 { border-width:calc( var( --fontsize ) * 1.95 ); }



/* 
 *  Padding
 */
.pad125 { padding: calc( var( --fontsize ) * 0.125 ); }
.pad25  { padding: calc( var( --fontsize ) * 0.25 ); }
.pad3   { padding: calc( var( --fontsize ) * 0.3 ); } 
.pad35  { padding: calc( var( --fontsize ) * 0.35 ); } 
.pad4   { padding: calc( var( --fontsize ) * 0.4 ); } 
.pad45  { padding: calc( var( --fontsize ) * 0.45 ); } 
.pad5   { padding: calc( var( --fontsize ) * 0.5 ); } 
.pad55  { padding: calc( var( --fontsize ) * 0.55 ); } 
.pad6   { padding: calc( var( --fontsize ) * 0.6 ); } 
.pad65  { padding: calc( var( --fontsize ) * 0.65 ); } 
.pad7   { padding: calc( var( --fontsize ) * 0.7 ); } 
.pad75  { padding: calc( var( --fontsize ) * 0.75 ); } 
.pad8   { padding: calc( var( --fontsize ) * 0.8 ); } 
.pad85  { padding: calc( var( --fontsize ) * 0.85 ); } 
.pad9   { padding: calc( var( --fontsize ) * 0.9 ); } 
.pad95  { padding: calc( var( --fontsize ) * 0.95 ); } 
.pad10  { padding: calc( var( --fontsize ) * 1 ); } 
.pad11  { padding: calc( var( --fontsize ) * 1.05 ); } 

/* 
 *  Padding  Top, Bottom
 */
.ptop0    { padding-top: 0px!important; }
.ptop0125 { padding-top: var( --size-0125 )!important; }
.ptop025  { padding-top: var( --size-025 )!important; }
.ptop05   { padding-top: var( --size-05 )!important; }
.ptop075  { padding-top: var( --size-075 )!important; }
.ptop1    { padding-top: var( --size-1 )!important; }
.ptop125  { padding-top: var( --size-125 )!important; }
.ptop15   { padding-top: var( --size-15 )!important; }
.ptop175  { padding-top: var( --size-175 )!important; }
.ptop2    { padding-top: var( --size-2 )!important; }
.ptop225  { padding-top: var( --size-225 )!important; }
.ptop25   { padding-top: var( --size-25 )!important; }
.ptop275  { padding-top: var( --size-275 )!important; }
.ptop3    { padding-top: var( --size-3 )!important; }
.ptop35   { padding-top: var( --size-35 )!important; }
.ptop4    { padding-top: var( --size-4 )!important; }
.ptop45   { padding-top: var( --size-45 )!important; }
.ptop5    { padding-top: var( --size-5 )!important; }
.ptop55   { padding-top: var( --size-55 )!important; }
.ptop6    { padding-top: var( --size-6 )!important; }
.ptop65   { padding-top: var( --size-65 )!important; }
.ptop7    { padding-top: var( --size-7 )!important; }
.ptop75   { padding-top: var( --size-75 )!important; }
.ptop8    { padding-top: var( --size-8 )!important; }
.ptop85   { padding-top: var( --size-85 )!important; }
.ptop9    { padding-top: var( --size-9 )!important; }
.ptop95   { padding-top: var( --size-95 )!important; }
.ptop10   { padding-top: var( --size-10 )!important; }

.pbot0    { padding-bottom: 0px!important; }
.pbot0125 { padding-bottom: var( --size-0125 )!important; }
.pbot025  { padding-bottom: var( --size-025 )!important; }
.pbot05   { padding-bottom: var( --size-05 )!important; }
.pbot075  { padding-bottom: var( --size-075 )!important; }
.pbot1    { padding-bottom: var( --size-1 )!important; }
.pbot125  { padding-bottom: var( --size-125 )!important; }
.pbot15   { padding-bottom: var( --size-15 )!important; }
.pbot175  { padding-bottom: var( --size-175 )!important; }
.pbot2    { padding-bottom: var( --size-2 )!important; }
.pbot225  { padding-bottom: var( --size-225 )!important; }
.pbot25   { padding-bottom: var( --size-25 )!important; }
.pbot275  { padding-bottom: var( --size-275 )!important; }
.pbot3    { padding-bottom: var( --size-3 )!important; }
.pbot35   { padding-bottom: var( --size-35 )!important; }
.pbot4    { padding-bottom: var( --size-4 )!important; }
.pbot45   { padding-bottom: var( --size-45 )!important; }
.pbot5    { padding-bottom: var( --size-5 )!important; }
.pbot55   { padding-bottom: var( --size-55 )!important; }
.pbot6    { padding-bottom: var( --size-6 )!important; }
.pbot65   { padding-bottom: var( --size-65 )!important; }
.pbot7    { padding-bottom: var( --size-7 )!important; }
.pbot75   { padding-bottom: var( --size-75 )!important; }
.pbot8    { padding-bottom: var( --size-8 )!important; }
.pbot85   { padding-bottom: var( --size-85 )!important; }
.pbot9    { padding-bottom: var( --size-9 )!important; }
.pbot95   { padding-bottom: var( --size-95 )!important; }
.pbot10   { padding-bottom: var( --size-10 )!important; }

/* 
 *  Padding Left, Right 
 */
 .pleft0    { padding-left: 0px!important; }
 .pleft0125 { padding-left: var( --size-0125 )!important; }
 .pleft025  { padding-left: var( --size-025 )!important; }
 .pleft05   { padding-left: var( --size-05 )!important; }
 .pleft075  { padding-left: var( --size-075 )!important; }
 .pleft1    { padding-left: var( --size-1 )!important; }
 .pleft125  { padding-left: var( --size-125 )!important; }
 .pleft15   { padding-left: var( --size-15 )!important; }
 .pleft175  { padding-left: var( --size-175 )!important; }
 .pleft2    { padding-left: var( --size-2 )!important; }
 .pleft225  { padding-left: var( --size-225 )!important; }
 .pleft25   { padding-left: var( --size-25 )!important; }
 .pleft275  { padding-left: var( --size-275 )!important; }
 .pleft3    { padding-left: var( --size-3 )!important; }
 .pleft35   { padding-left: var( --size-35 )!important; }
 .pleft4    { padding-left: var( --size-4 )!important; }
 .pleft45   { padding-left: var( --size-45 )!important; }
 .pleft5    { padding-left: var( --size-5 )!important; }
 .pleft55   { padding-left: var( --size-55 )!important; }
 .pleft6    { padding-left: var( --size-6 )!important; }
 .pleft65   { padding-left: var( --size-65 )!important; }
 .pleft7    { padding-left: var( --size-7 )!important; }
 .pleft75   { padding-left: var( --size-75 )!important; }
 .pleft8    { padding-left: var( --size-8 )!important; }
 .pleft85   { padding-left: var( --size-85 )!important; }
 .pleft9    { padding-left: var( --size-9 )!important; }
 .pleft95   { padding-left: var( --size-95 )!important; }
 .pleft10   { padding-left: var( --size-10 )!important; }

 .pright0    { padding-right: 0px!important; }
 .pright0125 { padding-right: var( --size-0125 )!important; }
 .pright025  { padding-right: var( --size-025 )!important; }
 .pright05   { padding-right: var( --size-05 )!important; }
 .pright075  { padding-right: var( --size-075 )!important; }
 .pright1    { padding-right: var( --size-1 )!important; }
 .pright125  { padding-right: var( --size-125 )!important; }
 .pright15   { padding-right: var( --size-15 )!important; }
 .pright175  { padding-right: var( --size-175 )!important; }
 .pright2    { padding-right: var( --size-2 )!important; }
 .pright225  { padding-right: var( --size-225 )!important; }
 .pright25   { padding-right: var( --size-25 )!important; }
 .pright275  { padding-right: var( --size-275 )!important; }
 .pright3    { padding-right: var( --size-3 )!important; }
 .pright35   { padding-right: var( --size-35 )!important; }
 .pright4    { padding-right: var( --size-4 )!important; }
 .pright45   { padding-right: var( --size-45 )!important; }
 .pright5    { padding-right: var( --size-5 )!important; }
 .pright55   { padding-right: var( --size-55 )!important; }
 .pright6    { padding-right: var( --size-6 )!important; }
 .pright65   { padding-right: var( --size-65 )!important; }
 .pright7    { padding-right: var( --size-7 )!important; }
 .pright75   { padding-right: var( --size-75 )!important; }
 .pright8    { padding-right: var( --size-8 )!important; }
 .pright85   { padding-right: var( --size-85 )!important; }
 .pright9    { padding-right: var( --size-9 )!important; }
 .pright95   { padding-right: var( --size-95 )!important; }
 .pright10   { padding-right: var( --size-10 )!important; }


/* 
 *  Margin Top, Bottom 
 */
 .mtop0    { margin-top: 0px!important; }
 .mtop0125 { margin-top: var( --size-0125 )!important; }
 .mtop025  { margin-top: var( --size-025 )!important; }
 .mtop05   { margin-top: var( --size-05 )!important; }
 .mtop075  { margin-top: var( --size-075 )!important; }
 .mtop1    { margin-top: var( --size-1 )!important; }
 .mtop125  { margin-top: var( --size-125 )!important; }
 .mtop15   { margin-top: var( --size-15 )!important; }
 .mtop175  { margin-top: var( --size-175 )!important; }
 .mtop2    { margin-top: var( --size-2 )!important; }
 .mtop225  { margin-top: var( --size-225 )!important; }
 .mtop25   { margin-top: var( --size-25 )!important; }
 .mtop275  { margin-top: var( --size-275 )!important; }
 .mtop3    { margin-top: var( --size-3 )!important; }
 .mtop35   { margin-top: var( --size-35 )!important; }
 .mtop4    { margin-top: var( --size-4 )!important; }
 .mtop45   { margin-top: var( --size-45 )!important; }
 .mtop5    { margin-top: var( --size-5 )!important; }
 .mtop55   { margin-top: var( --size-55 )!important; }
 .mtop6    { margin-top: var( --size-6 )!important; }
 .mtop65   { margin-top: var( --size-65 )!important; }
 .mtop7    { margin-top: var( --size-7 )!important; }
 .mtop75   { margin-top: var( --size-75 )!important; }
 .mtop8    { margin-top: var( --size-8 )!important; }
 .mtop85   { margin-top: var( --size-85 )!important; }
 .mtop9    { margin-top: var( --size-9 )!important; }
 .mtop95   { margin-top: var( --size-95 )!important; }
 .mtop10   { margin-top: var( --size-10 )!important; }

 .mbot0    { margin-bottom: 0px!important; }
 .mbot0125 { margin-bottom: var( --size-0125 )!important; }
 .mbot025  { margin-bottom: var( --size-025 )!important; }
 .mbot05   { margin-bottom: var( --size-05 )!important; }
 .mbot075  { margin-bottom: var( --size-075 )!important; }
 .mbot1    { margin-bottom: var( --size-1 )!important; }
 .mbot125  { margin-bottom: var( --size-125 )!important; }
 .mbot15   { margin-bottom: var( --size-15 )!important; }
 .mbot175  { margin-bottom: var( --size-175 )!important; }
 .mbot2    { margin-bottom: var( --size-2 )!important; }
 .mbot225  { margin-bottom: var( --size-225 )!important; }
 .mbot25   { margin-bottom: var( --size-25 )!important; }
 .mbot275  { margin-bottom: var( --size-275 )!important; }
 .mbot3    { margin-bottom: var( --size-3 )!important; }
 .mbot35   { margin-bottom: var( --size-35 )!important; }
 .mbot4    { margin-bottom: var( --size-4 )!important; }
 .mbot45   { margin-bottom: var( --size-45 )!important; }
 .mbot5    { margin-bottom: var( --size-5 )!important; }
 .mbot55   { margin-bottom: var( --size-55 )!important; }
 .mbot6    { margin-bottom: var( --size-6 )!important; }
 .mbot65   { margin-bottom: var( --size-65 )!important; }
 .mbot7    { margin-bottom: var( --size-7 )!important; }
 .mbot75   { margin-bottom: var( --size-75 )!important; }
 .mbot8    { margin-bottom: var( --size-8 )!important; }
 .mbot85   { margin-bottom: var( --size-85 )!important; }
 .mbot9    { margin-bottom: var( --size-9 )!important; }
 .mbot95   { margin-bottom: var( --size-95 )!important; }
 .mbot10   { margin-bottom: var( --size-10 )!important; }

/* 
 *  Margin Left, Right
 */
 .mleft0    { margin-left: 0px!important; }
 .mleft0125 { margin-left: var( --size-0125 )!important; }
 .mleft025  { margin-left: var( --size-025 )!important; }
 .mleft05   { margin-left: var( --size-05 )!important; }
 .mleft075  { margin-left: var( --size-075 )!important; }
 .mleft1    { margin-left: var( --size-1 )!important; }
 .mleft125  { margin-left: var( --size-125 )!important; }
 .mleft15   { margin-left: var( --size-15 )!important; }
 .mleft175  { margin-left: var( --size-175 )!important; }
 .mleft2    { margin-left: var( --size-2 )!important; }
 .mleft225  { margin-left: var( --size-225 )!important; }
 .mleft25   { margin-left: var( --size-25 )!important; }
 .mleft275  { margin-left: var( --size-275 )!important; }
 .mleft3    { margin-left: var( --size-3 )!important; }
 .mleft35   { margin-left: var( --size-35 )!important; }
 .mleft4    { margin-left: var( --size-4 )!important; }
 .mleft45   { margin-left: var( --size-45 )!important; }
 .mleft5    { margin-left: var( --size-5 )!important; }
 .mleft55   { margin-left: var( --size-55 )!important; }
 .mleft6    { margin-left: var( --size-6 )!important; }
 .mleft65   { margin-left: var( --size-65 )!important; }
 .mleft7    { margin-left: var( --size-7 )!important; }
 .mleft75   { margin-left: var( --size-75 )!important; }
 .mleft8    { margin-left: var( --size-8 )!important; }
 .mleft85   { margin-left: var( --size-85 )!important; }
 .mleft9    { margin-left: var( --size-9 )!important; }
 .mleft95   { margin-left: var( --size-95 )!important; }
 .mleft10   { margin-left: var( --size-10 )!important; }

 .mright0    { margin-right: 0px!important; }
 .mright0125 { margin-right: var( --size-0125 )!important; }
 .mright025  { margin-right: var( --size-025 )!important; }
 .mright05   { margin-right: var( --size-05 )!important; }
 .mright075  { margin-right: var( --size-075 )!important; }
 .mright1    { margin-right: var( --size-1 )!important; }
 .mright125  { margin-right: var( --size-125 )!important; }
 .mright15   { margin-right: var( --size-15 )!important; }
 .mright175  { margin-right: var( --size-175 )!important; }
 .mright2    { margin-right: var( --size-2 )!important; }
 .mright225  { margin-right: var( --size-225 )!important; }
 .mright25   { margin-right: var( --size-25 )!important; }
 .mright275  { margin-right: var( --size-275 )!important; }
 .mright3    { margin-right: var( --size-3 )!important; }
 .mright35   { margin-right: var( --size-35 )!important; }
 .mright4    { margin-right: var( --size-4 )!important; }
 .mright45   { margin-right: var( --size-45 )!important; }
 .mright5    { margin-right: var( --size-5 )!important; }
 .mright55   { margin-right: var( --size-55 )!important; }
 .mright6    { margin-right: var( --size-6 )!important; }
 .mright65   { margin-right: var( --size-65 )!important; }
 .mright7    { margin-right: var( --size-7 )!important; }
 .mright75   { margin-right: var( --size-75 )!important; }
 .mright8    { margin-right: var( --size-8 )!important; }
 .mright85   { margin-right: var( --size-85 )!important; }
 .mright9    { margin-right: var( --size-9 )!important; }
 .mright95   { margin-right: var( --size-95 )!important; }
 .mright10   { margin-right: var( --size-10 )!important; }


/* 
 *  Width 
 */
 .width0125 { width: var( --size-0125 ); }
 .width025  { width: var( --size-025 ); }
 .width05   { width: var( --size-05 ); }
 .width075  { width: var( --size-075 ); }
 .width1    { width: var( --size-1 ); }
 .width125  { width: var( --size-125 ); }
 .width15   { width: var( --size-15 ); }
 .width175  { width: var( --size-175 ); }
 .width2    { width: var( --size-2 ); }
 .width225  { width: var( --size-225 ); }
 .width25   { width: var( --size-25 ); }
 .width275  { width: var( --size-275 ); }
 .width3    { width: var( --size-3 ); }
 .width35   { width: var( --size-35 ); }
 .width4    { width: var( --size-4 ); }
 .width45   { width: var( --size-45 ); }
 .width5    { width: var( --size-5 ); }
 .width55   { width: var( --size-55 ); }
 .width6    { width: var( --size-6 ); }
 .width65   { width: var( --size-65 ); }
 .width7    { width: var( --size-7 ); }
 .width75   { width: var( --size-75 ); }
 .width8    { width: var( --size-8 ); }
 .width85   { width: var( --size-85 ); }
 .width9    { width: var( --size-9 ); }
 .width95   { width: var( --size-95 ); }
 .width10   { width: var( --size-10 ); }

/* 
 *  Height 
 */
 .height0125 { height: var( --size-0125 ); }
 .height025  { height: var( --size-025 ); }
 .height05   { height: var( --size-05 ); }
 .height075  { height: var( --size-075 ); }
 .height1    { height: var( --size-1 ); }
 .height125  { height: var( --size-125 ); }
 .height15   { height: var( --size-15 ); }
 .height175  { height: var( --size-175 ); }
 .height2    { height: var( --size-2 ); }
 .height225  { height: var( --size-225 ); }
 .height25   { height: var( --size-25 ); }
 .height275  { height: var( --size-275 ); }
 .height3    { height: var( --size-3 ); }
 .height35   { height: var( --size-35 ); }
 .height4    { height: var( --size-4 ); }
 .height45   { height: var( --size-45 ); }
 .height5    { height: var( --size-5 ); }
 .height55   { height: var( --size-55 ); }
 .height6    { height: var( --size-6 ); }
 .height65   { height: var( --size-65 ); }
 .height7    { height: var( --size-7 ); }
 .height75   { height: var( --size-75 ); }
 .height8    { height: var( --size-8 ); }
 .height85   { height: var( --size-85 ); }
 .height9    { height: var( --size-9 ); }
 .height95   { height: var( --size-95 ); }
 .height10   { height: var( --size-10 ); }
 


/* 
 *  Position
 */
 /* 
 *  Position
 */
 .p_absolute { position: absolute; }
 .p_left0    { left: 0px!important; }
 .p_left0125 { left: var( --size-0125 )!important; }
 .p_left025  { left: var( --size-025 )!important; }
 .p_left05   { left: var( --size-05 )!important; }
 .p_left075  { left: var( --size-075 )!important; }
 .p_left1    { left: var( --size-1 )!important; }
 .p_left125  { left: var( --size-125 )!important; }
 .p_left15   { left: var( --size-15 )!important; }
 .p_left175  { left: var( --size-175 )!important; }
 .p_left2    { left: var( --size-2 )!important; }
 .p_left225  { left: var( --size-225 )!important; }
 .p_left25   { left: var( --size-25 )!important; }
 .p_left275  { left: var( --size-275 )!important; }
 .p_left3    { left: var( --size-3 )!important; }
 .p_left35   { left: var( --size-35 )!important; }
 .p_left4    { left: var( --size-4 )!important; }
 .p_left45   { left: var( --size-45 )!important; }
 .p_left5    { left: var( --size-5 )!important; }
 .p_left55   { left: var( --size-55 )!important; }
 .p_left6    { left: var( --size-6 )!important; }
 .p_left65   { left: var( --size-65 )!important; }
 .p_left7    { left: var( --size-7 )!important; }
 .p_left75   { left: var( --size-75 )!important; }
 .p_left8    { left: var( --size-8 )!important; }
 .p_left85   { left: var( --size-85 )!important; }
 .p_left9    { left: var( --size-9 )!important; }
 .p_left95   { left: var( --size-95 )!important; }
 .p_left10   { left: var( --size-10 )!important; }
 
 .-p_left0    { left: 0px!important; }
 .-p_left0125 { left: calc(-1 * var( --size-0125 ) ); }
 .-p_left025  { left: calc(-1 * var( --size-025 ) ); }
 .-p_left05   { left: calc(-1 * var( --size-05 ) ); }
 .-p_left075  { left: calc(-1 * var( --size-075 ) ); }
 .-p_left1    { left: calc(-1 * var( --size-1 ) ); }
 .-p_left125  { left: calc(-1 * var( --size-125 ) ); }
 .-p_left15   { left: calc(-1 * var( --size-15 ) ); }
 .-p_left175  { left: calc(-1 * var( --size-175 ) ); }
 .-p_left2    { left: calc(-1 * var( --size-2 ) ); }
 .-p_left225  { left: calc(-1 * var( --size-225 ) ); }
 .-p_left25   { left: calc(-1 * var( --size-25 ) ); }
 .-p_left275  { left: calc(-1 * var( --size-275 ) ); }
 .-p_left3    { left: calc(-1 * var( --size-3 ) ); }
 .-p_left35   { left: calc(-1 * var( --size-35 ) ); }
 .-p_left4    { left: calc(-1 * var( --size-4 ) ); }
 .-p_left45   { left: calc(-1 * var( --size-45 ) ); }
 .-p_left5    { left: calc(-1 * var( --size-5 ) ); }
 .-p_left55   { left: calc(-1 * var( --size-55 ) ); }
 .-p_left6    { left: calc(-1 * var( --size-6 ) ); }
 .-p_left65   { left: calc(-1 * var( --size-65 ) ); }
 .-p_left7    { left: calc(-1 * var( --size-7 ) ); }
 .-p_left75   { left: calc(-1 * var( --size-75 ) ); }
 .-p_left8    { left: calc(-1 * var( --size-8 ) ); }
 .-p_left85   { left: calc(-1 * var( --size-85 ) ); }
 .-p_left9    { left: calc(-1 * var( --size-9 ) ); }
 .-p_left95   { left: calc(-1 * var( --size-95 ) ); }
 .-p_left10   { left: calc(-1 * var( --size-10 ) ); }

 
 .p_right0    { right: 0px!important; }
 .p_right0125 { right: var( --size-0125 )!important; }
 .p_right025  { right: var( --size-025 )!important; }
 .p_right05   { right: var( --size-05 )!important; }
 .p_right075  { right: var( --size-075 )!important; }
 .p_right1    { right: var( --size-1 )!important; }
 .p_right125  { right: var( --size-125 )!important; }
 .p_right15   { right: var( --size-15 )!important; }
 .p_right175  { right: var( --size-175 )!important; }
 .p_right2    { right: var( --size-2 )!important; }
 .p_right225  { right: var( --size-225 )!important; }
 .p_right25   { right: var( --size-25 )!important; }
 .p_right275  { right: var( --size-275 )!important; }
 .p_right3    { right: var( --size-3 )!important; }
 .p_right35   { right: var( --size-35 )!important; }
 .p_right4    { right: var( --size-4 )!important; }
 .p_right45   { right: var( --size-45 )!important; }
 .p_right5    { right: var( --size-5 )!important; }
 .p_right55   { right: var( --size-55 )!important; }
 .p_right6    { right: var( --size-6 )!important; }
 .p_right65   { right: var( --size-65 )!important; }
 .p_right7    { right: var( --size-7 )!important; }
 .p_right75   { right: var( --size-75 )!important; }
 .p_right8    { right: var( --size-8 )!important; }
 .p_right85   { right: var( --size-85 )!important; }
 .p_right9    { right: var( --size-9 )!important; }
 .p_right95   { right: var( --size-95 )!important; }
 .p_right10   { right: var( --size-10 )!important; }
 
 .-p_right0    { right: 0px!important; }
 .-p_right0125 { right: calc(-1 * var( --size-0125 ) ); }
 .-p_right025  { right: calc(-1 * var( --size-025 ) ); }
 .-p_right05   { right: calc(-1 * var( --size-05 ) ); }
 .-p_right075  { right: calc(-1 * var( --size-075 ) ); }
 .-p_right1    { right: calc(-1 * var( --size-1 ) ); }
 .-p_right125  { right: calc(-1 * var( --size-125 ) ); }
 .-p_right15   { right: calc(-1 * var( --size-15 ) ); }
 .-p_right175  { right: calc(-1 * var( --size-175 ) ); }
 .-p_right2    { right: calc(-1 * var( --size-2 ) ); }
 .-p_right225  { right: calc(-1 * var( --size-225 ) ); }
 .-p_right25   { right: calc(-1 * var( --size-25 ) ); }
 .-p_right275  { right: calc(-1 * var( --size-275 ) ); }
 .-p_right3    { right: calc(-1 * var( --size-3 ) ); }
 .-p_right35   { right: calc(-1 * var( --size-35 ) ); }
 .-p_right4    { right: calc(-1 * var( --size-4 ) ); }
 .-p_right45   { right: calc(-1 * var( --size-45 ) ); }
 .-p_right5    { right: calc(-1 * var( --size-5 ) ); }
 .-p_right55   { right: calc(-1 * var( --size-55 ) ); }
 .-p_right6    { right: calc(-1 * var( --size-6 ) ); }
 .-p_right65   { right: calc(-1 * var( --size-65 ) ); }
 .-p_right7    { right: calc(-1 * var( --size-7 ) ); }
 .-p_right75   { right: calc(-1 * var( --size-75 ) ); }
 .-p_right8    { right: calc(-1 * var( --size-8 ) ); }
 .-p_right85   { right: calc(-1 * var( --size-85 ) ); }
 .-p_right9    { right: calc(-1 * var( --size-9 ) ); }
 .-p_right95   { right: calc(-1 * var( --size-95 ) ); }
 .-p_right10   { right: calc(-1 * var( --size-10 ) ); }
 
 
 .p_top0    { top: 0px!important; }
 .p_top0125 { top: var( --size-0125 )!important; }
 .p_top025  { top: var( --size-025 )!important; }
 .p_top05   { top: var( --size-05 )!important; }
 .p_top075  { top: var( --size-075 )!important; }
 .p_top1    { top: var( --size-1 )!important; }
 .p_top125  { top: var( --size-125 )!important; }
 .p_top15   { top: var( --size-15 )!important; }
 .p_top175  { top: var( --size-175 )!important; }
 .p_top2    { top: var( --size-2 )!important; }
 .p_top225  { top: var( --size-225 )!important; }
 .p_top25   { top: var( --size-25 )!important; }
 .p_top275  { top: var( --size-275 )!important; }
 .p_top3    { top: var( --size-3 )!important; }
 .p_top35   { top: var( --size-35 )!important; }
 .p_top4    { top: var( --size-4 )!important; }
 .p_top45   { top: var( --size-45 )!important; }
 .p_top5    { top: var( --size-5 )!important; }
 .p_top55   { top: var( --size-55 )!important; }
 .p_top6    { top: var( --size-6 )!important; }
 .p_top65   { top: var( --size-65 )!important; }
 .p_top7    { top: var( --size-7 )!important; }
 .p_top75   { top: var( --size-75 )!important; }
 .p_top8    { top: var( --size-8 )!important; }
 .p_top85   { top: var( --size-85 )!important; }
 .p_top9    { top: var( --size-9 )!important; }
 .p_top95   { top: var( --size-95 )!important; }
 .p_top10   { top: var( --size-10 )!important; }
 
 .-p_top0    { top: 0px!important; }
 .-p_top0125 { top: calc(-1 * var( --size-0125 ) ); }
 .-p_top025  { top: calc(-1 * var( --size-025 ) ); }
 .-p_top05   { top: calc(-1 * var( --size-05 ) ); }
 .-p_top075  { top: calc(-1 * var( --size-075 ) ); }
 .-p_top1    { top: calc(-1 * var( --size-1 ) ); }
 .-p_top125  { top: calc(-1 * var( --size-125 ) ); }
 .-p_top15   { top: calc(-1 * var( --size-15 ) ); }
 .-p_top175  { top: calc(-1 * var( --size-175 ) ); }
 .-p_top2    { top: calc(-1 * var( --size-2 ) ); }
 .-p_top225  { top: calc(-1 * var( --size-225 ) ); }
 .-p_top25   { top: calc(-1 * var( --size-25 ) ); }
 .-p_top275  { top: calc(-1 * var( --size-275 ) ); }
 .-p_top3    { top: calc(-1 * var( --size-3 ) ); }
 .-p_top35   { top: calc(-1 * var( --size-35 ) ); }
 .-p_top4    { top: calc(-1 * var( --size-4 ) ); }
 .-p_top45   { top: calc(-1 * var( --size-45 ) ); }
 .-p_top5    { top: calc(-1 * var( --size-5 ) ); }
 .-p_top55   { top: calc(-1 * var( --size-55 ) ); }
 .-p_top6    { top: calc(-1 * var( --size-6 ) ); }
 .-p_top65   { top: calc(-1 * var( --size-65 ) ); }
 .-p_top7    { top: calc(-1 * var( --size-7 ) ); }
 .-p_top75   { top: calc(-1 * var( --size-75 ) ); }
 .-p_top8    { top: calc(-1 * var( --size-8 ) ); }
 .-p_top85   { top: calc(-1 * var( --size-85 ) ); }
 .-p_top9    { top: calc(-1 * var( --size-9 ) ); }
 .-p_top95   { top: calc(-1 * var( --size-95 ) ); }
 .-p_top10   { top: calc(-1 * var( --size-10 ) ); }
 

 .p_bottom0    { bottom: 0px!important; }
 .p_bottom0125 { bottom: var( --size-0125 )!important; }
 .p_bottom025  { bottom: var( --size-025 )!important; }
 .p_bottom05   { bottom: var( --size-05 )!important; }
 .p_bottom075  { bottom: var( --size-075 )!important; }
 .p_bottom1    { bottom: var( --size-1 )!important; }
 .p_bottom125  { bottom: var( --size-125 )!important; }
 .p_bottom15   { bottom: var( --size-15 )!important; }
 .p_bottom175  { bottom: var( --size-175 )!important; }
 .p_bottom2    { bottom: var( --size-2 )!important; }
 .p_bottom225  { bottom: var( --size-225 )!important; }
 .p_bottom25   { bottom: var( --size-25 )!important; }
 .p_bottom275  { bottom: var( --size-275 )!important; }
 .p_bottom3    { bottom: var( --size-3 )!important; }
 .p_bottom35   { bottom: var( --size-35 )!important; }
 .p_bottom4    { bottom: var( --size-4 )!important; }
 .p_bottom45   { bottom: var( --size-45 )!important; }
 .p_bottom5    { bottom: var( --size-5 )!important; }
 .p_bottom55   { bottom: var( --size-55 )!important; }
 .p_bottom6    { bottom: var( --size-6 )!important; }
 .p_bottom65   { bottom: var( --size-65 )!important; }
 .p_bottom7    { bottom: var( --size-7 )!important; }
 .p_bottom75   { bottom: var( --size-75 )!important; }
 .p_bottom8    { bottom: var( --size-8 )!important; }
 .p_bottom85   { bottom: var( --size-85 )!important; }
 .p_bottom9    { bottom: var( --size-9 )!important; }
 .p_bottom95   { bottom: var( --size-95 )!important; }
 .p_bottom10   { bottom: var( --size-10 )!important; }

 .-p_bottom0    { bottom: 0px!important; }
 .-p_bottom0125 { bottom: calc(-1 * var( --size-0125 ) ); }
 .-p_bottom025  { bottom: calc(-1 * var( --size-025 ) ); }
 .-p_bottom05   { bottom: calc(-1 * var( --size-05 ) ); }
 .-p_bottom075  { bottom: calc(-1 * var( --size-075 ) ); }
 .-p_bottom1    { bottom: calc(-1 * var( --size-1 ) ); }
 .-p_bottom125  { bottom: calc(-1 * var( --size-125 ) ); }
 .-p_bottom15   { bottom: calc(-1 * var( --size-15 ) ); }
 .-p_bottom175  { bottom: calc(-1 * var( --size-175 ) ); }
 .-p_bottom2    { bottom: calc(-1 * var( --size-2 ) ); }
 .-p_bottom225  { bottom: calc(-1 * var( --size-225 ) ); }
 .-p_bottom25   { bottom: calc(-1 * var( --size-25 ) ); }
 .-p_bottom275  { bottom: calc(-1 * var( --size-275 ) ); }
 .-p_bottom3    { bottom: calc(-1 * var( --size-3 ) ); }
 .-p_bottom35   { bottom: calc(-1 * var( --size-35 ) ); }
 .-p_bottom4    { bottom: calc(-1 * var( --size-4 ) ); }
 .-p_bottom45   { bottom: calc(-1 * var( --size-45 ) ); }
 .-p_bottom5    { bottom: calc(-1 * var( --size-5 ) ); }
 .-p_bottom55   { bottom: calc(-1 * var( --size-55 ) ); }
 .-p_bottom6    { bottom: calc(-1 * var( --size-6 ) ); }
 .-p_bottom65   { bottom: calc(-1 * var( --size-65 ) ); }
 .-p_bottom7    { bottom: calc(-1 * var( --size-7 ) ); }
 .-p_bottom75   { bottom: calc(-1 * var( --size-75 ) ); }
 .-p_bottom8    { bottom: calc(-1 * var( --size-8 ) ); }
 .-p_bottom85   { bottom: calc(-1 * var( --size-85 ) ); }
 .-p_bottom9    { bottom: calc(-1 * var( --size-9 ) ); }
 .-p_bottom95   { bottom: calc(-1 * var( --size-95 ) ); }
 .-p_bottom10   { bottom: calc(-1 * var( --size-10 ) ); }

 

/* 
 *  Rotate
 */
 .rot01 { transform: rotate( 1deg ); transform-origin: left top 0; }
 .rot02 { transform: rotate( 2deg ); }
 .rot03 { transform: rotate( 3deg ); }
 .rot04 { transform: rotate( 4deg ); }
 .rot05 { transform: rotate( 5deg ); }
 .rot10 { transform: rotate( 10deg ); }
 .rot15 { transform: rotate( 15deg ); }
 .rot20 { transform: rotate( 20deg ); }
 .rot25 { transform: rotate( 25deg ); }
 .rot30 { transform: rotate( 30deg ); }
 .rot35 { transform: rotate( 35deg ); }
 .rot40 { transform: rotate( 40deg ); }
 .rot45 { transform: rotate( 45deg ); }
 .rot50 { transform: rotate( 50deg ); }
 .rot55 { transform: rotate( 55deg ); }
 .rot60 { transform: rotate( 60deg ); }
 .rot65 { transform: rotate( 65deg ); }
 .rot70 { transform: rotate( 70deg ); }
 .rot75 { transform: rotate( 75deg ); }
 .rot80 { transform: rotate( 80deg ); }
 .rot85 { transform: rotate( 85deg ); }
 .rot90 { transform: rotate( 90deg ); }
 
 .-rot01 { transform: rotate( -1deg ); transform-origin: left top 0; }
 .-rot02 { transform: rotate( -2deg ); }
 .-rot03 { transform: rotate( -3deg ); }
 .-rot04 { transform: rotate( -4deg ); }
 .-rot05 { transform: rotate( -5deg ); }
 .-rot10 { transform: rotate( -10deg ); }
 .-rot15 { transform: rotate( -15deg ); }
 .-rot20 { transform: rotate( -20deg ); }
 .-rot25 { transform: rotate( -25deg ); }
 .-rot30 { transform: rotate( -30deg ); }
 .-rot35 { transform: rotate( -35deg ); }
 .-rot40 { transform: rotate( -40deg ); }
 .-rot45 { transform: rotate( -45deg ); }
 .-rot50 { transform: rotate( -50deg ); }
 .-rot55 { transform: rotate( -55deg ); }
 .-rot60 { transform: rotate( -60deg ); }
 .-rot65 { transform: rotate( -65deg ); }
 .-rot70 { transform: rotate( -70deg ); }
 .-rot75 { transform: rotate( -75deg ); }
 .-rot80 { transform: rotate( -80deg ); }
 .-rot85 { transform: rotate( -85deg ); }
 .-rot90 { transform: rotate( -90deg ); }


/*	============================================================
 *	Colors
 */
.theme_sitecolor { color: var(--theme_sitecolor); }
.bg-theme_sitecolor { background-color: var(--theme_sitebgcolor); }

.site-fgcolor { color: rgba( var(--sitecolor), 1.0); }
.site-bgcolor { background-color: rgba( var(--sitecolor), 1.0); }
/* .sitecolor { color: rgba( var(--site-bgcolor), 1.0); } */
.sitebgcolor { background-color: rgba( var(--site-bgcolor), 1.0); }
.sitelinkcolor { color: var(--site_link_color); }
.sitelinkhovercolor { color: var(--site_linkhover_color); }

      
.tc-brightred  { color: rgba( var(--tc_brightred), 1.0); }
.tc-deepred    { color: rgba( var(--tc_deepred), 1.0); }
.tc-purple     { color: rgba( var(--tc_purple), 1.0); }
.tc-purplegrey { color: rgba( var(--tc_purplegrey), 1.0); }
.tc-deepblue   { color: rgba( var(--tc_deepblue), 1.0); }
.tc-deepgrey   { color: rgba( var(--tc_deepgrey), 1.0); }
.tc-deepgreen  { color: rgba( var(--tc_deepgreen), 1.0); }
    .deepgreen-50   { color: var(--deepgreen-50); }
    .deepgreen-100  { color: var(--deepgreen-100); }
    .deepgreen-200  { color: var(--deepgreen-200); }
    .deepgreen-300  { color: var(--deepgreen-300); }
    .deepgreen-400  { color: var(--deepgreen-400); }
    .deepgreen-500  { color: var(--deepgreen-500); }
    .deepgreen-600  { color: var(--deepgreen-600); }
    .deepgreen-700  { color: var(--deepgreen-700); }
    .deepgreen-800  { color: var(--deepgreen-800); }
    .deepgreen-900  { color: var(--deepgreen-900); }
.tc-bg-brightred  { background-color: rgba( var(--tc_brightred), 1.0); }
.tc-bg-deepred    { background-color: rgba( var(--tc_deepred), 1.0); }
.tc-bg-purple     { background-color: rgba( var(--tc_purple), 1.0); }
.tc-bg-purplegrey { background-color: rgba( var(--tc_purplegrey), 1.0); }
.tc-bg-deepblue   { background-color: rgba( var(--tc_deepblue), 1.0); }
.tc-bg-deepgrey   { background-color: rgba( var(--tc_deepgrey), 1.0); }
.tc-bg-deepgreen  { background-color: rgba( var(--tc_deepgreen), 1.0); }
    .bg-deepgreen-50   { background-color: var(--deepgreen-50); }
    .bg-deepgreen-100  { background-color: var(--deepgreen-100); }
    .bg-deepgreen-200  { background-color: var(--deepgreen-200); }
    .bg-deepgreen-300  { background-color: var(--deepgreen-300); }
    .bg-deepgreen-400  { background-color: var(--deepgreen-400); }
    .bg-deepgreen-500  { background-color: var(--deepgreen-500); }
    .bg-deepgreen-600  { background-color: var(--deepgreen-600); }
    .bg-deepgreen-700  { background-color: var(--deepgreen-700); }
    .bg-deepgreen-800  { background-color: var(--deepgreen-800); }
    .bg-deepgreen-900  { background-color: var(--deepgreen-900); }


.black { color: rgba( var(--black), 1.0); }
.white { color: rgba( var(--white), 1.0); }
.mediumgrey { color: rgba( var(--grey), 1.0); }
    .mediumgrey-50  { color: var(--grey-50) }
    .mediumgrey-100 { color: var(--grey-100) }
    .mediumgrey-200 { color: var(--grey-200) }
    .mediumgrey-300 { color: var(--grey-300) }
    .mediumgrey-400 { color: var(--grey-400) }
    .mediumgrey-500 { color: var(--grey-500) }
    .mediumgrey-600 { color: var(--grey-600) }
    .mediumgrey-700 { color: var(--grey-700) }
    .mediumgrey-800 { color: var(--grey-800) }
    .mediumgrey-900 { color: var(--grey-900) }
.bluegrey { color: rgba( var(--bluegrey), 1.0); }
    .bluegrey-50  { color: var(--bluegrey-50) }
    .bluegrey-100 { color: var(--bluegrey-100) }
    .bluegrey-200 { color: var(--bluegrey-200) }
    .bluegrey-300 { color: var(--bluegrey-300) }
    .bluegrey-400 { color: var(--bluegrey-400) }
    .bluegrey-500 { color: var(--bluegrey-500) }
    .bluegrey-600 { color: var(--bluegrey-600) }
    .bluegrey-700 { color: var(--bluegrey-700) }
    .bluegrey-800 { color: var(--bluegrey-800) }
    .bluegrey-900 { color: var(--bluegrey-900) }
.purplegrey { color: rgba( var(--purplegrey), 1.0); }
    .purplegrey-50  { color: var(--purplegrey-50) }
    .purplegrey-100 { color: var(--purplegrey-100) }
    .purplegrey-200 { color: var(--purplegrey-200) }
    .purplegrey-300 { color: var(--purplegrey-300) }
    .purplegrey-400 { color: var(--purplegrey-400) }
    .purplegrey-500 { color: var(--purplegrey-500) }
    .purplegrey-600 { color: var(--purplegrey-600) }
    .purplegrey-700 { color: var(--purplegrey-700) }
    .purplegrey-800 { color: var(--purplegrey-800) }
    .purplegrey-900 { color: var(--purplegrey-900) }

.yellow       { color: rgba( var(--yellow), 1.0); }
.yelloworange { color: rgba( var(--yelloworange), 1.0); }
.orange       { color: rgba( var(--orange), 1.0); }
.redorange    { color: rgba( var(--redorange), 1.0); }
.red          { color: rgba( var(--red), 1.0); }
.redviolett   { color: rgba( var(--redviolett), 1.0); }
.violett      { color: rgba( var(--violett), 1.0); }
.blueviolett  { color: rgba( var(--blueviolett), 1.0); }
.blue         { color: rgba( var(--blue), 1.0); }
.bluegreen    { color: rgba( var(--bluegreen), 1.0); }
.green        { color: rgba( var(--green), 1.0); }
    .green-50  { color: var(--green-50) }
    .green-100 { color: var(--green-100) }
    .green-200 { color: var(--green-200) }
    .green-300 { color: var(--green-300) }
    .green-400 { color: var(--green-400) }
    .green-500 { color: var(--green-500) }
    .green-600 { color: var(--green-600) }
    .green-700 { color: var(--green-700) }
    .green-800 { color: var(--green-800) }
    .green-900 { color: var(--green-900) }
.yellowgreen  { color: rgba( var(--yellowgreen), 1.0); }



.phcblue-50  { color: var(--phcblue-50) }
.phcblue-100 { color: var(--phcblue-100) }
.phcblue-200 { color: var(--phcblue-200) }
.phcblue-300 { color: var(--phcblue-300) }
.phcblue-400 { color: var(--phcblue-400) }
.phcblue-500 { color: var(--phcblue-500) }
.phcblue-600 { color: var(--phcblue-600) }
.phcblue-700 { color: var(--phcblue-700) }
.phcblue-800 { color: var(--phcblue-800) }
.phcblue-900 { color: var(--phcblue-900) }
.phcgreen-50  { color: var(--phcgreen-50) }
.phcgreen-100 { color: var(--phcgreen-100) }
.phcgreen-200 { color: var(--phcgreen-200) }
.phcgreen-300 { color: var(--phcgreen-300) }
.phcgreen-400 { color: var(--phcgreen-400) }
.phcgreen-500 { color: var(--phcgreen-500) }
.phcgreen-600 { color: var(--phcgreen-600) }
.phcgreen-700 { color: var(--phcgreen-700) }
.phcgreen-800 { color: var(--phcgreen-800) }
.phcgreen-900 { color: var(--phcgreen-900) }
.phcgrey-50  { color: var(--phcgrey-50) }
.phcgrey-100 { color: var(--phcgrey-100) }
.phcgrey-200 { color: var(--phcgrey-200) }
.phcgrey-300 { color: var(--phcgrey-300) }
.phcgrey-400 { color: var(--phcgrey-400) }
.phcgrey-500 { color: var(--phcgrey-500) }
.phcgrey-600 { color: var(--phcgrey-600) }
.phcgrey-700 { color: var(--phcgrey-700) }
.phcgrey-800 { color: var(--phcgrey-800) }
.phcgrey-900 { color: var(--phcgrey-900) }

.bg-black { background-color: rgba( var(--black), 1.0); }
.bg-white { background-color: rgba( var(--white), 1.0); }
.bg-mediumgrey  { background-color: rgba( var(--grey), 1.0); }
    .bg-mediumgrey-50   { background-color: var(--grey-50) }
    .bg-mediumgrey-100  { background-color: var(--grey-100) }
    .bg-mediumgrey-200  { background-color: var(--grey-200) }
    .bg-mediumgrey-300  { background-color: var(--grey-300) }
    .bg-mediumgrey-400  { background-color: var(--grey-400) }
    .bg-mediumgrey-500  { background-color: var(--grey-500) }
    .bg-mediumgrey-600  { background-color: var(--grey-600) }
    .bg-mediumgrey-700  { background-color: var(--grey-700) }
    .bg-mediumgrey-800  { background-color: var(--grey-800) }
    .bg-mediumgrey-900  { background-color: var(--grey-900) }
.bg-bluegrey { background-color: rgba( var(--bluegrey), 1.0); }
    .bg-bluegrey-50  { background-color: var(--bluegrey-50) }
    .bg-bluegrey-100 { background-color: var(--bluegrey-100) }
    .bg-bluegrey-200 { background-color: var(--bluegrey-200) }
    .bg-bluegrey-300 { background-color: var(--bluegrey-300) }
    .bg-bluegrey-400 { background-color: var(--bluegrey-400) }
    .bg-bluegrey-500 { background-color: var(--bluegrey-500) }
    .bg-bluegrey-600 { background-color: var(--bluegrey-600) }
    .bg-bluegrey-700 { background-color: var(--bluegrey-700) }
    .bg-bluegrey-800 { background-color: var(--bluegrey-800) }
    .bg-bluegrey-900 { background-color: var(--bluegrey-900) }
.bg-purplegrey { background-color: rgba( var(--purplegrey), 1.0); }
    .bg-purplegrey-50  { background-color: var(--purplegrey-50) }
    .bg-purplegrey-100 { background-color: var(--purplegrey-100) }
    .bg-purplegrey-200 { background-color: var(--purplegrey-200) }
    .bg-purplegrey-300 { background-color: var(--purplegrey-300) }
    .bg-purplegrey-400 { background-color: var(--purplegrey-400) }
    .bg-purplegrey-500 { background-color: var(--purplegrey-500) }
    .bg-purplegrey-600 { background-color: var(--purplegrey-600) }
    .bg-purplegrey-700 { background-color: var(--purplegrey-700) }
    .bg-purplegrey-800 { background-color: var(--purplegrey-800) }
    .bg-purplegrey-900 { background-color: var(--purplegrey-900) }

.bg-yellow       { background-color: rgba( var(--yellow), 1.0); }
.bg-yelloworange { background-color: rgba( var(--yelloworange), 1.0); }
.bg-orange       { background-color: rgba( var(--orange), 1.0); }
.bg-redorange    { background-color: rgba( var(--redorange), 1.0); }
.bg-red          { background-color: rgba( var(--red), 1.0); }
.bg-redviolett   { background-color: rgba( var(--redviolett), 1.0); }
.bg-violett      { background-color: rgba( var(--violett), 1.0); }
.bg-blueviolett  { background-color: rgba( var(--blueviolett), 1.0); }
.bg-blue         { background-color: rgba( var(--blue), 1.0); }
.bg-bluegreen    { background-color: rgba( var(--bluegreen), 1.0); }
.bg-green        { background-color: rgba( var(--green), 1.0); }
    .bg-green-50  { background-color: var(--green-50) }
    .bg-green-100 { background-color: var(--green-100) }
    .bg-green-200 { background-color: var(--green-200) }
    .bg-green-300 { background-color: var(--green-300) }
    .bg-green-400 { background-color: var(--green-400) }
    .bg-green-500 { background-color: var(--green-500) }
    .bg-green-600 { background-color: var(--green-600) }
    .bg-green-700 { background-color: var(--green-700) }
    .bg-green-800 { background-color: var(--green-800) }
    .bg-green-900 { background-color: var(--green-900) }
.bg-yellowgreen  { background-color: rgba( var(--yellowgreen), 1.0); }
.bg-phcblue-50  { background-color: var(--phcblue-50) }
.bg-phcblue-100 { background-color: var(--phcblue-100) }
.bg-phcblue-200 { background-color: var(--phcblue-200) }
.bg-phcblue-300 { background-color: var(--phcblue-300) }
.bg-phcblue-400 { background-color: var(--phcblue-400) }
.bg-phcblue-500 { background-color: var(--phcblue-500) }
.bg-phcblue-600 { background-color: var(--phcblue-600) }
.bg-phcblue-700 { background-color: var(--phcblue-700) }
.bg-phcblue-800 { background-color: var(--phcblue-800) }
.bg-phcblue-900 { background-color: var(--phcblue-900) }
.bg-phcgreen-50  { background-color: var(--phcgreen-50) }
.bg-phcgreen-100 { background-color: var(--phcgreen-100) }
.bg-phcgreen-200 { background-color: var(--phcgreen-200) }
.bg-phcgreen-300 { background-color: var(--phcgreen-300) }
.bg-phcgreen-400 { background-color: var(--phcgreen-400) }
.bg-phcgreen-500 { background-color: var(--phcgreen-500) }
.bg-phcgreen-600 { background-color: var(--phcgreen-600) }
.bg-phcgreen-700 { background-color: var(--phcgreen-700) }
.bg-phcgreen-800 { background-color: var(--phcgreen-800) }
.bg-phcgreen-900 { background-color: var(--phcgreen-900) }
.bg-phcgrey-50  { background-color: var(--phcgrey-50) }
.bg-phcgrey-100 { background-color: var(--phcgrey-100) }
.bg-phcgrey-200 { background-color: var(--phcgrey-200) }
.bg-phcgrey-300 { background-color: var(--phcgrey-300) }
.bg-phcgrey-400 { background-color: var(--phcgrey-400) }
.bg-phcgrey-500 { background-color: var(--phcgrey-500) }
.bg-phcgrey-600 { background-color: var(--phcgrey-600) }
.bg-phcgrey-700 { background-color: var(--phcgrey-700) }
.bg-phcgrey-800 { background-color: var(--phcgrey-800) }
.bg-phcgrey-900 { background-color: var(--phcgrey-900) }




/* 
 *  Options Page
 */
.color-box-wrapper {
	display: flex;
	align-items: center;
	margin-top: calc( var( --size-125 ) * 1 ); 
	margin-bottom: calc( var( --size-15 ) * 1 ); 
}
.color-box-wrapper div {
	padding-left: calc( var( --size-075 ) * 1 );  
}
.color-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: calc( var( --size-7 ) * 1 );  
	height: calc( var( --size-75 ) * 1 );
}
.color-box p {
	padding-left: 0px;  
}
.box-border-white {
    border: 1px solid #D6D6D6;
}

.option-button {
	display: block;
	width: 100%;
    font-size: calc(var( --fontsize ) * 0.85)!important;
    text-align: left;
    background: transparent!important;
	border: none;
	padding-left: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	cursor: pointer;
	margin-bottom: 2px;
}
.option-button:hover {
   color: rgba( var(--white), 1.0); }




.horizontal-box-wrapper {
	display: flex;
	align-items: center;
	margin-top: calc( var( --size-4 ) * 0.05 ); 
	margin-bottom: calc( var( --size-4 ) * 0.05 ); 
}
.vertical-boxbg {
    padding-bottom: var( --size-1 );
    /* background-color: rgba(var(--sitecolor), 0.15); */
    background-color: rgba(var(--white), 0.75);
}

.horizontal-box {
	height: var( --size-3 );
}
.vertical-box {
    width: 100%;
}

.buttons_grid {
    display: grid;
	grid-template-columns: 1fr 1fr;    
	margin-top: calc( var( --size-025) * 1 ); 
	margin-bottom: calc( var( --size-025 ) * 1 ); 
}

.aspect_grid {
    display: grid;
    /* grid-gap: 10px; */
	/* grid-template-columns: 1fr 1fr;     */
    /* align-items: center; */
	margin-top: calc( var( --size-025) * 1 ); 
	margin-bottom: calc( var( --size-025 ) * 1 ); 
}

.space-option-button {
    font-size: calc(var( --fontsize ) * 0.85)!important;
    background-color: rgba(var(--site-bgcolor), 1.0);
	border: none;
	padding-left: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	cursor: pointer;
	margin-bottom: 5px;
}

.spacing_grid {
    display: inline-grid;
	grid-template-columns: auto 1fr;   
    align-items: center;
    /* background-color: rgba(var(--sitecolor), 0.15) */
    background-color: rgba(var(--white), 0.75);
}

/*
 *  Spacing
 */
.visual-spacing {
    position: relative;
    background-color: rgba(var(--white), 0.5);
}
.visual-spacing-nobg {
    position: relative;
}
.spacing-element-width {
    position: absolute; 
    top: 0; 
    bottom: 0; 
}
.spacing-elementtext-width {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.spacing-element-height {
    position: absolute; 
    right: 0; 
    left: 0; 
}
.spacing-elementtext-height {
    position: absolute;
    width: 100%;
    text-align: center;
}


.grid_table {
	display: grid;
}
.grid_table button {
    border-bottom: 1px solid #D9D9D9;
}
.grid_table button:hover {
    color: var(--site_linkhover_color);
}


.image-box-wrapper {
	display: flex;
	align-items: center;
	margin-top: calc( var( --size-125 ) * 1 ); 
	margin-bottom: calc( var( --size-15 ) * 1 ); 
}

.image-box {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
	background-size: cover !important; 
	position: relative;
}


.typo-box-wrapper {
	display: flex;
	align-items: center;
}


/* 
 *  Material
 */
 list .title-item {
    display: grid;
	grid-template-columns: 2fr;   
    align-items: center;
    padding-left: calc( var( --size-1 ) * 1 );
    padding-right: calc( var( --size-1 ) * 1 );
    padding-top: calc( var( --size-1 ) * 1 );
    padding-bottom: 0px;
    font-size: 70%;
}
list > item {
    display: grid;
	grid-template-columns: 1fr auto;   
    align-items: center;
    padding-left: calc( var( --size-1 ) * 1 );
    padding-right: calc( var( --size-1 ) * 1 );
    padding-top: calc( var( --size-1 ) * 1 );
    padding-bottom: calc( var( --size-1 ) * 1 );
    font-size: 70%;
}
list > item:first-of-type {
    padding-top: 0px;
}
list > item > hexcol { text-align: right; }



#sections .article {
	padding-top: var( --size-1 );
	padding-left: var( --size-05 );
	padding-right: var( --size-05 );
	padding-bottom: var( --size-1 );
	background-color: #FFFFFF;
}
#sections .description {
	padding-bottom: calc( var( --fontsize ) * 0.5 );
}
#sections .article p {
	font-size: var( --size-075 );
}

#sections .grid_wrapper_0 {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: calc( var( --fontsize ) * 1.5 );
	row-gap: calc( var( --fontsize ) * 1.5 );
}
@media (min-width: 992px) { 
	#sections .grid_wrapper_0 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: calc( var( --fontsize ) * 1.5 );
		row-gap: calc( var( --fontsize ) * 1.5 );
	}
}
#sections .grid_wrapper_1 {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: calc( var( --fontsize ) * 1.5 );
	row-gap: calc( var( --fontsize ) * 0.5 );
}
#sections .grid_wrapper_2 {
	display: grid;
	grid-template-columns: max-content auto;
	grid-gap: calc( var( --fontsize ) * 1.5 );
	row-gap: calc( var( --fontsize ) * 0.5 );
}
#sections .grid_wrapper_3 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax( 300px, 1fr ) );
	grid-gap: calc( var( --fontsize ) * 1.5 );
	row-gap: calc( var( --fontsize ) * 0.5 );
}
#sections .grid_wrapper_4 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax( 120px, 1fr ) );
	grid-gap: calc( var( --fontsize ) * 1.5 );
	row-gap: calc( var( --fontsize ) * 0.5 );
}


.green  { color: rgba( var(--ahpgreen), 1.0); }
.violett { color: rgba( var(--ahpviolett), 1.0); }
.lila  { color: rgba( var(--ahplila), 1.0); }


/*	============================================================
 *	CSS Accordion 
 */
 details summary > * {
    display: inline;
  }

details.acc-horizontal {
	transition: background 0.3s;
	min-height: calc( var( --fontsize ) * 2.5 );
	max-height: 200px;
	margin-bottom: calc( var( --fontsize ) * 0.25 );
	-webkit-transform-origin: top center;
			transform-origin: top center;
	-webkit-transform: rotate(0.1deg);
			transform: rotate(0.1deg);
	transition: all 0.3s;
  }
details.acc-vertical {
	transition: background 0.3s;
	min-height: calc( var( --fontsize ) * 2.5 );
    max-height: none;
	margin-bottom: calc( var( --fontsize ) * 0.25 );
	-webkit-transform-origin: top center;
			transform-origin: top center;
	-webkit-transform: rotate(0.1deg);
			transform: rotate(0.1deg);
	transition: all 0.3s;
  }
  details:hover {
	/* border-color: #878d99;
	color: rgba(255, 255, 255, 0.6); */
  }
  details:active {
	/* color: rgba(255, 255, 255, 0.9);
	border-color: #6d7380; */
  }

details > summary {
	cursor: pointer;
	list-style-type: none;
}
details > summary::-webkit-details-marker {
    display: none;
}

details + details {
	margin-top: calc( var( --fontsize ) * 1 );
	margin-bottom: calc( var( --fontsize ) * 0.5 );
}

  .accsum-content {
	padding: 10px 0px 15px 0px;
	-moz-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto; 
    overflow: scroll;
  }

details.square {
	border-radius: 0;
}
details[open] {
	transition: all 0.6s;
	min-height: 70px;
	max-height: auto;
}

summary {
	outline: none;
	font-size: calc( var( --fontsize ) * 1.1 );
	padding-top: calc( var( --fontsize ) * 0.6 );
	padding-bottom: calc( var( --fontsize ) * 0.4 );
}
summary.acc-horizontal h5 {
	display: inline-block;
	width: 80%;
	min-height: calc( var( --fontsize ) * 2.5 );
}
summary.acc-vertical h5 {
	display: inline-block;
	width: auto;
	min-height: calc( var( --fontsize ) * 1 );
}
summary:selection {
	background: transparent;
}
summary:hover{
	color: #ffffff;
	/* background: rgba(48, 161, 112, 0.2); */
}
summary:after {
	/* float: right; */
	content: '\f078';
	font-family: 'FontAwesome';
    font-style: normal;
    font-weight: normal;
	margin-top: 0px;
	margin-top: calc( var( --fontsize ) * 0.1 );
	margin-left: calc( var( --fontsize ) * 0.5 );
	text-align: left;
	font-size: calc( var( --fontsize ) * 0.75 );
}
[open] summary:after {
	content: '\f077';
	font-family: 'FontAwesome';
    font-style: normal;
    font-weight: normal;
	padding: 0 0 12px 0;
}

/*	============================================================
 *	Buttons
 */

.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    text-decoration:none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: calc( var( --fontsize ) * 0.2 ) calc( var( --fontsize ) * 0.5 );
    line-height: 1.5;
    border-radius: .25rem;
    transition:color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}
@media (min-width: 992px) { 
    .btn, .btn-lg {
        /* font-size: 1vw!important; */
        }
}

@media screen and (prefers-reduced-motion: reduce) {
    .btn {
        transition:none
    }
}

.btn:hover {
    color: #212529;
    text-decoration:none
}

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow:0 0 0 .2rem rgba(0, 123, 255, .25)
}

.btn.disabled, .btn:disabled {
    opacity:.65
}

.btn:not(:disabled):not(.disabled) {
    cursor:pointer
}

a.btn.disabled, fieldset:disabled a.btn {
    pointer-events:none
}

.btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color:#007bff;
    text-decoration: none;
    margin-top: calc( var( --fontsize ) * 0.5 );
    margin-bottom: calc( var( --fontsize ) * 0.5 );
    margin-right: calc( var( --fontsize ) * 0.5 );
}

.btn-primary:hover {
    color: #fff;
    background-color: #0069d9;
    border-color:#0062cc
}

.btn-primary.focus, .btn-primary:focus {
    box-shadow:0 0 0 .2rem rgba(38, 143, 255, .5)
}

.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: #007bff;
    border-color:#007bff
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #0062cc;
    border-color:#005cbf
}

.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus {
    box-shadow:0 0 0 .2rem rgba(38, 143, 255, .5)
}

.btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color:#6c757d;
    text-decoration: none;
    margin-top: calc( var( --fontsize ) * 0.5 );
    margin-bottom: calc( var( --fontsize ) * 0.5 );
    margin-right: calc( var( --fontsize ) * 0.5 );
}

.btn-secondary:hover {
    color: #fff;
    background-color: #5a6268;
    border-color:#545b62
}

.btn-secondary.focus, .btn-secondary:focus {
    box-shadow:0 0 0 .2rem rgba(130, 138, 145, .5)
}

.btn-secondary.disabled, .btn-secondary:disabled {
    color: #fff;
    background-color: #6c757d;
    border-color:#6c757d
}

.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle {
    color: #fff;
    background-color: #545b62;
    border-color:#4e555b
}

.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show > .btn-secondary.dropdown-toggle:focus {
    box-shadow:0 0 0 .2rem rgba(130, 138, 145, .5)
}

.btn-success {
    color: #fff;
    background-color: #28a745;
    border-color:#28a745;
    text-decoration: none;
    margin-top: calc( var( --fontsize ) * 0.5 );
    margin-bottom: calc( var( --fontsize ) * 0.5 );
    margin-right: calc( var( --fontsize ) * 0.5 );
}

.btn-success:hover {
    color: #fff;
    background-color: #218838;
    border-color:#1e7e34
}

.btn-success.focus, .btn-success:focus {
    box-shadow:0 0 0 .2rem rgba(72, 180, 97, .5)
}

.btn-success.disabled, .btn-success:disabled {
    color: #fff;
    background-color: #28a745;
    border-color:#28a745
}

.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show > .btn-success.dropdown-toggle {
    color: #fff;
    background-color: #1e7e34;
    border-color:#1c7430
}

.btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, .show > .btn-success.dropdown-toggle:focus {
    box-shadow:0 0 0 .2rem rgba(72, 180, 97, .5)
}

.btn-info {
    color: #fff;
    background-color: #17a2b8;
    border-color:#17a2b8;
    text-decoration: none;
    margin-top: calc( var( --fontsize ) * 0.5 );
    margin-bottom: calc( var( --fontsize ) * 0.5 );
    margin-right: calc( var( --fontsize ) * 0.5 );
}

.btn-info:hover {
    color: #fff;
    background-color: #138496;
    border-color:#117a8b
}

.btn-info.focus, .btn-info:focus {
    box-shadow:0 0 0 .2rem rgba(58, 176, 195, .5)
}

.btn-info.disabled, .btn-info:disabled {
    color: #fff;
    background-color: #17a2b8;
    border-color:#17a2b8
}

.btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, .show > .btn-info.dropdown-toggle {
    color: #fff;
    background-color: #117a8b;
    border-color:#10707f
}

.btn-info:not(:disabled):not(.disabled).active:focus, .btn-info:not(:disabled):not(.disabled):active:focus, .show > .btn-info.dropdown-toggle:focus {
    box-shadow:0 0 0 .2rem rgba(58, 176, 195, .5)
}

.btn-warning {
    color: #212529;
    background-color: #ffc107;
    border-color:#ffc107;
    text-decoration: none;
    margin-top: calc( var( --fontsize ) * 0.5 );
    margin-bottom: calc( var( --fontsize ) * 0.5 );
    margin-right: calc( var( --fontsize ) * 0.5 );
}

.btn-warning:hover {
    color: #212529;
    background-color: #e0a800;
    border-color:#d39e00
}

.btn-warning.focus, .btn-warning:focus {
    box-shadow:0 0 0 .2rem rgba(222, 170, 12, .5)
}

.btn-warning.disabled, .btn-warning:disabled {
    color: #212529;
    background-color: #ffc107;
    border-color:#ffc107
}

.btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active, .show > .btn-warning.dropdown-toggle {
    color: #212529;
    background-color: #d39e00;
    border-color:#c69500
}

.btn-warning:not(:disabled):not(.disabled).active:focus, .btn-warning:not(:disabled):not(.disabled):active:focus, .show > .btn-warning.dropdown-toggle:focus {
    box-shadow:0 0 0 .2rem rgba(222, 170, 12, .5)
}

.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color:#dc3545;
    text-decoration: none;
    margin-top: calc( var( --fontsize ) * 0.5 );
    margin-bottom: calc( var( --fontsize ) * 0.5 );
    margin-right: calc( var( --fontsize ) * 0.5 );
}

.btn-danger:hover {
    color: #fff;
    background-color: #c82333;
    border-color:#bd2130
}

.btn-danger.focus, .btn-danger:focus {
    box-shadow:0 0 0 .2rem rgba(225, 83, 97, .5)
}

.btn-danger.disabled, .btn-danger:disabled {
    color: #fff;
    background-color: #dc3545;
    border-color:#dc3545
}

.btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, .show > .btn-danger.dropdown-toggle {
    color: #fff;
    background-color: #bd2130;
    border-color:#b21f2d
}

.btn-danger:not(:disabled):not(.disabled).active:focus, .btn-danger:not(:disabled):not(.disabled):active:focus, .show > .btn-danger.dropdown-toggle:focus {
    box-shadow:0 0 0 .2rem rgba(225, 83, 97, .5)
}

.btn-light {
    color: #212529;
    background-color: #f8f9fa;
    border-color:#f8f9fa;
    text-decoration: none;
    margin-top: calc( var( --fontsize ) * 0.5 );
    margin-bottom: calc( var( --fontsize ) * 0.5 );
    margin-right: calc( var( --fontsize ) * 0.5 );
}

.btn-light:hover {
    color: #212529;
    background-color: #e2e6ea;
    border-color:#dae0e5
}

.btn-light.focus, .btn-light:focus {
    box-shadow:0 0 0 .2rem rgba(216, 217, 219, .5)
}

.btn-light.disabled, .btn-light:disabled {
    color: #212529;
    background-color: #f8f9fa;
    border-color:#f8f9fa
}

.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show > .btn-light.dropdown-toggle {
    color: #212529;
    background-color: #dae0e5;
    border-color:#d3d9df
}

.btn-light:not(:disabled):not(.disabled).active:focus, .btn-light:not(:disabled):not(.disabled):active:focus, .show > .btn-light.dropdown-toggle:focus {
    box-shadow:0 0 0 .2rem rgba(216, 217, 219, .5)
}

.btn-dark {
    color: #fff;
    background-color: #343a40;
    border-color:#343a40;
    text-decoration: none;
    margin-top: calc( var( --fontsize ) * 0.5 );
    margin-bottom: calc( var( --fontsize ) * 0.5 );
    margin-right: calc( var( --fontsize ) * 0.5 );
}

.btn-dark:hover {
    color: #fff;
    background-color: #23272b;
    border-color:#1d2124
}

.btn-dark.focus, .btn-dark:focus {
    box-shadow:0 0 0 .2rem rgba(82, 88, 93, .5)
}

.btn-dark.disabled, .btn-dark:disabled {
    color: #fff;
    background-color: #343a40;
    border-color:#343a40
}

.btn-dark:not(:disabled):not(.disabled).active, .btn-dark:not(:disabled):not(.disabled):active, .show > .btn-dark.dropdown-toggle {
    color: #fff;
    background-color: #1d2124;
    border-color:#171a1d
}

.btn-dark:not(:disabled):not(.disabled).active:focus, .btn-dark:not(:disabled):not(.disabled):active:focus, .show > .btn-dark.dropdown-toggle:focus {
    box-shadow:0 0 0 .2rem rgba(82, 88, 93, .5)
}

.btn-outline-primary {
    color: #007bff;
    border-color:#007bff
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: #007bff;
    border-color:#007bff
}

.btn-outline-primary.focus, .btn-outline-primary:focus {
    box-shadow:0 0 0 .2rem rgba(0, 123, 255, .5)
}

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
    color: #007bff;
    background-color:transparent
}

.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show > .btn-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: #007bff;
    border-color:#007bff
}

.btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-primary.dropdown-toggle:focus {
    box-shadow:0 0 0 .2rem rgba(0, 123, 255, .5)
}

.btn-outline-secondary {
    color: #6c757d;
    border-color:#6c757d
}

.btn-outline-secondary:hover {
    color: #fff;
    background-color: #6c757d;
    border-color:#6c757d
}

.btn-outline-secondary.focus, .btn-outline-secondary:focus {
    box-shadow:0 0 0 .2rem rgba(108, 117, 125, .5)
}

.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
    color: #6c757d;
    background-color:transparent
}

.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, .show > .btn-outline-secondary.dropdown-toggle {
    color: #fff;
    background-color: #6c757d;
    border-color:#6c757d
}

.btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-secondary.dropdown-toggle:focus {
    box-shadow:0 0 0 .2rem rgba(108, 117, 125, .5)
}

.btn-outline-success {
    color: #28a745;
    border-color:#28a745
}

.btn-outline-success:hover {
    color: #fff;
    background-color: #28a745;
    border-color:#28a745
}

.btn-outline-success.focus, .btn-outline-success:focus {
    box-shadow:0 0 0 .2rem rgba(40, 167, 69, .5)
}

.btn-outline-success.disabled, .btn-outline-success:disabled {
    color: #28a745;
    background-color:transparent
}

.btn-outline-success:not(:disabled):not(.disabled).active, .btn-outline-success:not(:disabled):not(.disabled):active, .show > .btn-outline-success.dropdown-toggle {
    color: #fff;
    background-color: #28a745;
    border-color:#28a745
}

.btn-outline-success:not(:disabled):not(.disabled).active:focus, .btn-outline-success:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-success.dropdown-toggle:focus {
    box-shadow:0 0 0 .2rem rgba(40, 167, 69, .5)
}

.btn-outline-info {
    color: #17a2b8;
    border-color:#17a2b8
}

.btn-outline-info:hover {
    color: #fff;
    background-color: #17a2b8;
    border-color:#17a2b8
}

.btn-outline-info.focus, .btn-outline-info:focus {
    box-shadow:0 0 0 .2rem rgba(23, 162, 184, .5)
}

.btn-outline-info.disabled, .btn-outline-info:disabled {
    color: #17a2b8;
    background-color:transparent
}

.btn-outline-info:not(:disabled):not(.disabled).active, .btn-outline-info:not(:disabled):not(.disabled):active, .show > .btn-outline-info.dropdown-toggle {
    color: #fff;
    background-color: #17a2b8;
    border-color:#17a2b8
}

.btn-outline-info:not(:disabled):not(.disabled).active:focus, .btn-outline-info:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-info.dropdown-toggle:focus {
    box-shadow:0 0 0 .2rem rgba(23, 162, 184, .5)
}

.btn-outline-warning {
    color: #ffc107;
    border-color:#ffc107
}

.btn-outline-warning:hover {
    color: #212529;
    background-color: #ffc107;
    border-color:#ffc107
}

.btn-outline-warning.focus, .btn-outline-warning:focus {
    box-shadow:0 0 0 .2rem rgba(255, 193, 7, .5)
}

.btn-outline-warning.disabled, .btn-outline-warning:disabled {
    color: #ffc107;
    background-color:transparent
}

.btn-outline-warning:not(:disabled):not(.disabled).active, .btn-outline-warning:not(:disabled):not(.disabled):active, .show > .btn-outline-warning.dropdown-toggle {
    color: #212529;
    background-color: #ffc107;
    border-color:#ffc107
}

.btn-outline-warning:not(:disabled):not(.disabled).active:focus, .btn-outline-warning:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-warning.dropdown-toggle:focus {
    box-shadow:0 0 0 .2rem rgba(255, 193, 7, .5)
}

.btn-outline-danger {
    color: #dc3545;
    border-color:#dc3545
}

.btn-outline-danger:hover {
    color: #fff;
    background-color: #dc3545;
    border-color:#dc3545
}

.btn-outline-danger.focus, .btn-outline-danger:focus {
    box-shadow:0 0 0 .2rem rgba(220, 53, 69, .5)
}

.btn-outline-danger.disabled, .btn-outline-danger:disabled {
    color: #dc3545;
    background-color:transparent
}

.btn-outline-danger:not(:disabled):not(.disabled).active, .btn-outline-danger:not(:disabled):not(.disabled):active, .show > .btn-outline-danger.dropdown-toggle {
    color: #fff;
    background-color: #dc3545;
    border-color:#dc3545
}

.btn-outline-danger:not(:disabled):not(.disabled).active:focus, .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-danger.dropdown-toggle:focus {
    box-shadow:0 0 0 .2rem rgba(220, 53, 69, .5)
}

.btn-outline-light {
    color: #f8f9fa;
    border-color:#f8f9fa
}

.btn-outline-light:hover {
    color: #212529;
    background-color: #f8f9fa;
    border-color:#f8f9fa
}

.btn-outline-light.focus, .btn-outline-light:focus {
    box-shadow:0 0 0 .2rem rgba(248, 249, 250, .5)
}

.btn-outline-light.disabled, .btn-outline-light:disabled {
    color: #f8f9fa;
    background-color:transparent
}

.btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active, .show > .btn-outline-light.dropdown-toggle {
    color: #212529;
    background-color: #f8f9fa;
    border-color:#f8f9fa
}

.btn-outline-light:not(:disabled):not(.disabled).active:focus, .btn-outline-light:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-light.dropdown-toggle:focus {
    box-shadow:0 0 0 .2rem rgba(248, 249, 250, .5)
}

.btn-outline-dark {
    color: #343a40;
    border-color:#343a40
}

.btn-outline-dark:hover {
    color: #fff;
    background-color: #343a40;
    border-color:#343a40
}

.btn-outline-dark.focus, .btn-outline-dark:focus {
    box-shadow:0 0 0 .2rem rgba(52, 58, 64, .5)
}

.btn-outline-dark.disabled, .btn-outline-dark:disabled {
    color: #343a40;
    background-color:transparent
}

.btn-outline-dark:not(:disabled):not(.disabled).active, .btn-outline-dark:not(:disabled):not(.disabled):active, .show > .btn-outline-dark.dropdown-toggle {
    color: #fff;
    background-color: #343a40;
    border-color:#343a40
}

.btn-outline-dark:not(:disabled):not(.disabled).active:focus, .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-dark.dropdown-toggle:focus {
    box-shadow:0 0 0 .2rem rgba(52, 58, 64, .5)
}

.btn-link {
    font-weight: 400;
    color:#007bff
}

.btn-link:hover {
    color: #0056b3;
    text-decoration:underline
}

.btn-link.focus, .btn-link:focus {
    text-decoration: underline;
    box-shadow:none
}

.btn-link.disabled, .btn-link:disabled {
    color: #6c757d;
    pointer-events:none
}

.btn-group-lg > .btn, .btn-lg {
    /* padding: .5rem 1rem; */
    padding: calc( var( --fontsize ) * 0.35 ) calc( var( --fontsize ) * 0.7 );
    font-size: calc( var( --fontsize ) * 1.075 );
    line-height: 1.5;
    border-radius:.3rem
}

.btn-group-sm > .btn, .btn-sm {
    /* padding: .25rem .5rem; */
    padding: calc( var( --fontsize ) * 0.175 ) calc( var( --fontsize ) * 0.35 );
    font-size: calc( var( --fontsize ) * 0.9 );
    line-height: 1.5;
    border-radius:.2rem
}

.btn-block {
    display: block;
    width:100%
}

.btn-block + .btn-block {
    margin-top:.5rem
}

input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].btn-block {
    width:100%
}



/* ---| Primary |-------------------------- */
a.btn-success,
a.btn-success:visited {
	color: #fff!important;
}
a.btn-info,
a.btn-info:visited {
	color: #fff!important;
}
a.btn-warning,
a.btn-warning:visited {
	color: #fff!important;
}
a.btn-danger,
a.btn-danger:visited {
	color: #fff!important;
}

a.btn-primary,
a.btn-primary:visited {
	color: #fff!important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
	color: #fff!important;
	background-color: #3071a9;
	border-color: #285e8e;
    text-decoration: none;
    margin-top: calc( var( --fontsize ) * 0.5 );
    margin-bottom: calc( var( --fontsize ) * 0.5 );
    margin-right: calc( var( --fontsize ) * 0.5 );
}

/* ---| Theme |-------------------------- */
a.btn-theme,
a.btn-theme:visited {
	color: #fff!important;
    text-decoration:none;
}
.btn-theme {
	color: #fff!important;
	background-color: transparent;
    border-color: #fff;
    text-decoration: none;
    margin-top: var( --size-05 );
    margin-bottom: var( --size-05 );
    margin-right: var( --size-05 );
}
.btn-theme:hover,
.btn-theme:focus,
.btn-theme.focus,
.btn-theme:active,
.btn-theme.active,
.open > .dropdown-toggle.btn-theme {
	color: #212121!important;
	background-color: transparent;
	border-color: #212121;
}

/* ---| Gold |-------------------------- */
a.btn-gold,
a.btn-gold:visited {
	color: #F3F0E8!important;
}
.btn-gold {
	color: #F3F0E8;
	background-color: #b79d6c;
	border-color: #9C804C;
    text-decoration: none;
    margin-top: calc( var( --fontsize ) * 0.5 );
    margin-bottom: calc( var( --fontsize ) * 0.5 );
    margin-right: calc( var( --fontsize ) * 0.5 );
}
.btn-gold:hover,
.btn-gold:focus,
.btn-gold.focus,
.btn-gold:active,
.btn-gold.active,
.open > .dropdown-toggle.btn-gold {
	color: #000!important;
	background-color: #9C804C;
	border-color: #826B3F;
}

/* ---| Green|-------------------------- */
a.btn-green,
a.btn-green:visited {
	color: #F3F0E8!important;
	background-color: var(--deepgreen-100);
	border-color: var(--deepgreen-200);
}
.btn-green {
	color: #F3F0E8;
	background-color: var(--deepgreen-100);
	border-color: var(--deepgreen-200);
    text-decoration: none;
    margin-top: calc( var( --fontsize ) * 0.5 );
    margin-bottom: calc( var( --fontsize ) * 0.5 );
    margin-right: calc( var( --fontsize ) * 0.5 );
}
.btn-green:hover,
.btn-green:focus,
.btn-green.focus,
.btn-green:active,
.btn-green.active,
.open > .dropdown-toggle.btn-green {
	color: #fff!important;
	background-color: var(--deepgreen-300);
	border-color: var(--deepgreen-400);
}

/* ---| Laepp |-------------------------- */
a.btn-laepp,
a.btn-laepp:visited {
	color: #fff!important;
}
.btn-laepp {
	color: #fff;
	background-color: #3071a9;
	border-color: #243C6C;
    text-decoration: none;
    margin-top: calc( var( --fontsize ) * 0.5 );
    margin-bottom: calc( var( --fontsize ) * 0.5 );
    margin-right: calc( var( --fontsize ) * 0.5 );
}
.btn-laepp:hover,
.btn-laepp:focus,
.btn-laepp.focus,
.btn-laepp:active,
.btn-laepp.active,
.open > .dropdown-toggle.btn-laepp {
	color: #fff!important;
	background-color: #2B669A;
	border-color: #243C6C;
}

/* ---| Grau Hell |-------------------------- */
.btn-grau {
	color: #000!important;
	background-color: #B4BAC7!important;
	border-color: #9EA5B6;
    text-decoration: none;
    margin-top: calc( var( --fontsize ) * 0.5 );
    margin-bottom: calc( var( --fontsize ) * 0.5 );
    margin-right: calc( var( --fontsize ) * 0.5 );
}
.btn-grau:hover,
.btn-grau:focus,
.btn-grau.focus,
.btn-grau:active,
.btn-grau.active,
.open > .dropdown-toggle.btn-grau {
	color: #000!important;
	background-color: #A1A8B9!important;
	border-color: #9199AD;
}

/* ---| Default Hell |-------------------------- */
a.btn-default {
	color: #000!important;
	background-color: #efefef;
	border-color: #9AA2B4;
}
.btn-default {
	color: #000!important;
	background-color: #efefef;
	border-color: #9AA2B4;
    text-decoration: none;
    margin-top: calc( var( --fontsize ) * 0.5 );
    margin-bottom: calc( var( --fontsize ) * 0.5 );
    margin-right: calc( var( --fontsize ) * 0.5 );
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
	color: #000!important;
	background-color: #ccc;
	border-color: #7F7F7F;
}

/* ---| Download |-------------------------- */
a.btn-dwnld,
a.btn-dwnld:visited {
	color: #FFFFFF!important;
    background-color: #aeb5b8;
    border-color: transparent;
}
.btn-dwnld {
    font-size: 0.70rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: #aeb5b8;
    border-color: transparent;
    padding-left: 25px;
    padding-right: 25px;
    margin-left: 2px;
    border-radius: 0;
    text-decoration: none;
    margin-top: calc( var( --fontsize ) * 0.5 );
    margin-bottom: calc( var( --fontsize ) * 0.5 );
    margin-right: calc( var( --fontsize ) * 0.5 );
}
.btn-dwnld:hover,
.btn-dwnld:focus,
.btn-dwnld.focus,
.btn-dwnld:active,
.btn-dwnld.active,
.open > .dropdown-toggle.btn-dwnld {
    background-color: #9EA6AA!important;
    border-color: transparent;
    border-radius: 0;
}


/* ---| Shop |-------------------------- */
a.btn-shop,
a.btn-shop:visited {
	color: transparent;
}
.btn-shop {
    font-size: 0.70rem;
    font-weight: 700;
    background-color: transparent;
    border-color: transparent;
	padding-left: 20px;
	padding-right: 20px;
    text-decoration: none;
    margin-top: calc( var( --fontsize ) * 0.5 );
    margin-bottom: calc( var( --fontsize ) * 0.5 );
    margin-right: calc( var( --fontsize ) * 0.5 );
}
@media (min-width: 992px) { 
    .btn-shop {
        font-size: 1vw;
    }
}
.btn-shop:hover,
.btn-shop:focus,
.btn-shop.focus,
.btn-shop:active,
.btn-shop.active,
.open > .dropdown-toggle.btn-shop {
    opacity: 0.85;
}

/* ---| Custom |-------------------------- */
a.btn-custom,
a.btn-custom:visited {
	color: transparent;
}
.btn-custom {
    font-size: 0.70rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: transparent;
    border-color: transparent;
	padding-left: 25px;
	padding-right: 25px;
    border-radius: 0;
    text-decoration: none;
    margin-top: calc( var( --fontsize ) * 0.5 );
    margin-bottom: calc( var( --fontsize ) * 0.5 );
    margin-right: calc( var( --fontsize ) * 0.5 );
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom.focus,
.btn-custom:active,
.btn-custom.active,
.open > .dropdown-toggle.btn-custom {
    opacity: 0.85;
}

/*	===========================================================
	Button-Anpassung
	=========================================================== */
/*a.btn,
a .btn:visited {
	color: #fff!important;
}
*/