/*
Theme Name: Web-Elements Theme
Theme URI: https://web-elements.ch/
Author: Web-Elements GmbH
Author URI: https://web-elements.ch/
Description: Web-Elements Theme. Bei Fragen oder Problemen stehen wir Ihnen gerne mit Rat & Tat zur Seite.
Version: 16.7.40
License: Non-Public, Non-GPL
License URI: none
Text Domain: webelements
Requires PHP: 7.4
Requires at least: 5.5
Tested up to: 5.7

This theme is not intended for further use.
© 2014-2021 by Web-Elements GmbH
*/


/* Reset */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url("https://use.typekit.net/gcd8cbw.css");


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    font-size: 100%;
    font: inherit;
    padding: 0;
    border: 0;
    margin: 0;
    vertical-align: center;
}

body {
    line-height: 1;
}

ol, ul, li {
    list-style: none;
}

q {
    quotes: none;
}

a,
a:link,
a:visited,
a:focus,
a:active,
a:not([href]):not([class]), a:not([href]):not([class]):hover {
    color: var(--blue);
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

.clear {
    clear: both;
}


/*
|=============================================================
|
|   INDEX
|   |-- 1. General
|   |-- 2. Typography
|   |--- 2.1. Titles
|   |-- 3. Elements
|   |--- 3.1. Pagination
|   |--- 3.2. Social Media
|   |--- 3.3. Search
|   |-- 4. Tables
|   |-- 5. Navigation
|   |-- 6. Page content
|   |--- 6.1. Containers
|   |--- 6.2. Header
|   |--- 6.3. Footer
|   |--- 6.4. Frontpage
|   |--- 6.5. Single post
|   |-- 7. Miscellaneous
|
|=============================================================
*/


/*______________________
|                       |
|   1. GENERAL          |
|______________________*/



:root{
    --blue: rgba(18, 57, 142, 1);
    --light-blue: rgba(18, 57, 142, 1);
    --light-gray: #f0f0f0; 
    --gray-background: #f7f7f7;
    --gray-font-color: #CCCCCC;
    --dark-gray-font-color: #555555;
    --font-color: #333333;
    --title-color: #1A1A18;
    --font-red: #cc0000;
    --red: var(--font-red);
    --default-font: "IBM Plex Sans", sans-serif;
    --title-font: "source-serif-pro", serif, "Open Sans", sans-serif;
    --h1-font-size: 80px;
    --h2-font-size: 60px;
    --h3-font-size: 40px;
    --special-h3-size: 34px;
    --h3-size-default-font: 24px;
    --special-title-weight: 500;
    --button-font-size: 20px;
    --small-button-font-size: 16px;

    --container-width: 1150px;
    --default-header-height: 77px;
    --header-height: var(--default-header-height);
    --larger-header-height: calc(var(--default-header-height) + 30px);
    --gap: 15px;

}

.font-title-extra-light,
.font-title-extra-light-i,
.font-title-light,
.font-title-light-i,
.font-title-regular,
.font-title-regular-i,
.font-title-semibold,
.font-title-semibold-i,
.font-title-bold,
.font-title-bold-i,
.font-title-black,
.font-title-black-i {
    font-family: "source-serif-pro", serif;
    font-weight: 200;
    font-style: normal;
}

.font-title-extra-light-i,
.font-title-light-i,
.font-title-regular-i,
.font-title-semibold-i,
.font-title-bold-i,
.font-title-black-i {
    font-style: italic;
}

.font-title-light{
    font-weight: 300;
}

.font-title-regular{
    font-weight: 400;
}

.font-title-semibold{
    font-weight: 600;
}

.font-title-bold{
    font-weight: 700;
}

.font-title-black{
    font-weight: 900;
}

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}

body {
    min-height: 100%;
    font-family: var(--default-font);
    font-size: 20px;
    font-style: normal;
    line-height: calc(32 / 20);
    font-weight: 400;
    position: relative;
    letter-spacing: 0px;
    color: var(--font-color);
}

.mobile {
    display: none;
}

ol {
    list-style-type: upper-roman;
}

ul {
    list-style-type: disc;
}

figure {
    margin: 0;
}

iframe {
    border: none;
}

img {
    max-width: 100%;
    height:auto;
}

b{
    font-weight: 700;
}

.we-container{
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--gap);
}


/*______________________
|                       |
|   2. TYPOGRAPHY       |
|______________________*/

h1 {
    font-family: var(--title-font);
    color: var(--title-color);
    font-size: var(--h1-font-size);
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 1.15;
    font-optical-sizing: auto;
    margin-bottom: 30px;
}

h2 {
    font-family: var(--title-font);
    color: var(--title-color);
    font-size: var(--h2-font-size);
    font-weight: 400;
    letter-spacing: 0;
    line-height: calc(60 / 55);
    margin-bottom: 25px;
}

h3 {
    font-family: "source-serif-pro", serif;
    line-height: calc(52 / 40);
    color: var(--title-color);
    font-size: var(--h3-font-size);
    font-weight: 400;
    letter-spacing: 0px;
}

h4 {
    font-family: "IBM Plex Sans", sans-serif;
    color: var(--title-color);
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 1;
}

h5 {
    font-family: var(--title-font);
    color: var(--title-color);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0;
}

h6 {
    font-family: var(--title-font);
    font-size: 20px;
    font-weight: 400;
    color: #333333;
    letter-spacing: 0;
}

h1 + h2,
h2 + h3,
h3 + h4,
h4 + h5,
h5 + h6 {
    margin-top: 0;
}

*:not(.content-wrapper) > h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
    margin-top: 0;
}

.lead {
    font-weight: 300;
    font-size: 18px;
    line-height: 1.7;
}

p {
    margin-bottom: 10px;
}

p:last-child {
    margin-bottom: 0;
}

strong {
    font-weight: 700;
}


/*______________________
|                       |
|   3. ELEMENTS         |
|______________________*/

/*
|    3.1. Pagination
*/

.pagination {
    display: block;
    margin: 30px 0;
    width: 100%;
    max-width: 100%;
    min-height: 36px;
    /*text-align: center;*/
}

.pagination .nav-links {
    height: 100%;
}

.pagination .page-numbers {
    display: inline-block;
    padding: 8px;
    background-color: var(--color-grey2);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}


/*
|    3.2. Social Media
*/

.social-media {
}


/*
|    3.3. Search
*/

.searchform {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
}

.searchform label {
    width: 100%;
    margin-right: 15px;
    display: inline-block;
}

.search #content {
    margin-top: 60px;
    margin-bottom: 60px;
}

.search h2 {
    margin-bottom: 0;
}

.search .search-field .searchform button {
    margin: 0;
}

.search #content article a {
    text-decoration: none;
}

.search #content article p {
    color: #333333;
}

.search #content article:not(:last-of-type) {
    margin-bottom: 30px;
}

header .search-wrapper:not(.out) .searchform label {
    margin-right: 0;
}

header .search-wrapper {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
    z-index: 999;
}

header .search-wrapper a,
header .search-wrapper a:link,
header .search-wrapper a:visited,
header .search-wrapper a:focus,
header .search-wrapper a:active {
    text-decoration: none;
    outline: 0;
}

header .search-field {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 150ms ease-in-out;
    -moz-transition: all 150ms ease-in-out;
    -o-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
}

header .search-field.open {
    opacity: 1;
    visibility: visible;
}

.search-field input {
    width: 100%;
    max-width: 100%;
    padding: 11px 12px;
    line-height: 1;
    color: #FFFFFF;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid var(--blue);
    -webkit-transition: all 150ms ease-in-out;
    -moz-transition: all 150ms ease-in-out;
    -o-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
}

.content-wrapper .search-field input {
    color: #333333;
}

header .search-field input:hover,
header .search-field input:active {
    background-color: rgba(255, 255, 255, 0.1);
}

header .search-field input:focus {
    background-color: rgba(255, 255, 255, 0.2);
}

header .search-field input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: rgba(255, 255, 255, 0.65);
    opacity: 1; /* Firefox */
}

header .search-field input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgba(255, 255, 255, 0.65);
}

header .search-field input::-ms-input-placeholder { /* Microsoft Edge */
    color: rgba(255, 255, 255, 0.65);
}

header .search-wrapper.out .search-field {
    position: absolute;
    top: -webkit-calc(100% + 5px);
    top: -moz-calc(100% + 5px);
    top: calc(100% + 5px);
    right: 0;
    left: -300px;
    background-color: #333333;
    padding: 15px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

header .search-wrapper.out .searchform {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
}

header .search-wrapper.out .searchform label {
    margin-right: 15px;
    display: inline-block;
}

header .search-wrapper:not(.out) .searchform button {
    display: none !important;
}

header .search-wrapper.out .searchform button {
    display: inline-block !important;
    margin: 0 !important;
}


/*______________________
|                       |
|   4. TABLES           |
|______________________*/

caption {
    font-size: 0.9rem;
    font-weight: 700;
    font-family: "Verdana", "Cambria", "Times New Roman", "Times", serif;
    margin-bottom: 1.2rem;
    text-align: left;
}

table.borderless th,
table.borderless td {
    border: none;
    border-bottom: 1px solid #5B616B;
}

thead th,
thead td {
    background-color: #F1F1F1;
    font-weight: 600;
}

table.borderless thead th,
table.borderless thead td {
    background-color: #FFFFFF;
    font-weight: 600;
}

th,
td {
    background-color: #FFFFFF;
    border: 1px solid #5B616B;
    font-weight: 400;
    padding: 1rem 1.5rem;
}


/*______________________
|                       |
|   5. NAVIGATION       |
|______________________*/

header#top .we-container > .row,
header#top .we-container > .row > *,
header .logo,
header .title{
    height: var(--header-height);
}

.scroll-down header .logo,
.scroll-down header #menu,
.scroll-up header .hamburger,
.scroll-up header .title {
    /* display: none; */
}

header .logo,
header #menu,
header .hamburger,
header .title{
    transform-style: preserve-3d;
    transform-origin: center;
    transition: 200ms ease-out;
}

.scroll-up:not(.active):not(.single-konferenz) .hamburger-inner, 
.scroll-up:not(.active):not(.single-konferenz) .hamburger-inner::before, 
.scroll-up:not(.active):not(.single-konferenz) .hamburger-inner::after{
    background-color: #fff;
}

.scroll-down header .hamburger{
    transform:  translateY(-5px) rotate3d(0, 1, 0, 0deg);
}

.scroll-up.single-konferenz:not(.active) .hamburger{
    transform:  translateY(calc(var(--header-height))) rotate3d(0, 1, 0, 35deg);
}

.scroll-up:not(.active) .hamburger{
    transform:  translateY(calc(5px)) rotate3d(0, 1, 0, 35deg);
}

.scroll-down:not(.active) .hamburger,
.scroll-down header .title{
    transition: 200ms ease-out, opacity 75ms 75ms ease-in-out;
    
}

.scroll-up.single-konferenz header .hamburger,
.scroll-up header .title{
    transition: 200ms 75ms ease-out, opacity 150ms ease-in-out;
    opacity: 0;
    visibility: 0;
    pointer-events: none;
}

header .title,
header .logo{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}



/**/


header .page-title{
    text-wrap: nowrap;
}

header .title a{
    font-family: var(--title-font);
    font-size: 32px;
    color: var(--font-color);
    font-weight: 600;
    text-decoration: none;
}

#menuwrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--gap);
}

header nav {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

header nav ul,
nav ul {
    overflow: hidden;
    margin-left: 0;
    list-style-type: none;
}

header nav ul li {
    display: inline-block;
    float: left;
}

header nav ul li a {
    display: block;
    border: none;
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    letter-spacing: 1px;
    text-decoration: none;
}

header nav ul li.current-menu-ancestor a,
header nav ul li.current-menu-item a,
header nav ul li a:hover,
header nav ul li a:focus,
header nav ul li a:active {
    color: var(--color-grey4);
    text-decoration: none;
}

header  .page-title img{
    height: min(calc(var(--header-height) - 40px), 60px);
    transition: 250ms ease-in-out;
}

/* Dropdown Menu */

header ul[role="menu"] ul {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    -webkit-filter: opacity(0);
    filter: opacity(0);
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}

header ul[role="menu"] ul li {
    display: block;
    float: none;
    min-width: 175px;
}

header ul[role="menu"] li:hover ul,
header ul[role="menu"] li:focus ul {
    pointer-events: auto!important;
    visibility: visible!important;
    opacity: 1!important;
    -webkit-filter: opacity(1)!important;
    filter: opacity(1)!important;
    -webkit-transition: all 200ms 200ms ease;
    -moz-transition: all 200ms 200ms ease;
    -o-transition: all 200ms 200ms ease;
    transition: all 200ms 200ms ease;
}

header a .fas,
header ul[role="menu"] li a,
header ul[role="menu"] li.current-menu-item a,
header ul[role="menu"] li a:hover,
header ul[role="menu"] li a:focus,
header ul[role="menu"] li a:active,
header ul ul[role="menu"] li a,
header ul ul[role="menu"] li.current-menu-item a,
header ul ul[role="menu"] li a:focus,
header ul ul[role="menu"] li a:active,
header nav ul ul li:last-of-type a {
    letter-spacing: 0px;
    color: #1a1a18 !important;
    text-decoration: none;
    font-size: 20px;
    font-family: var(--default-font);
    font-weight: 600;
    padding: 10px calc(45px / 2);
}

body:not(.top-reached) header ul[role="menu"] ul li a,
body:not(.top-reached) header ul[role="menu"] ul li.current-menu-item a,
body:not(.top-reached) header ul[role="menu"] ul li a:focus,
body:not(.top-reached) header ul[role="menu"] ul li a:active{
    /* background-color: #fff; */
    font-size: 18px;
}

body:not(.top-reached) header ul ul{
    background-color: #fff;
    
}

header a .fas{
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
}

header nav ul[role="menu"] ul{
    padding-top: 12px;
}

body:not(.top-reached).scroll-down header nav ul[role="menu"] ul{
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

body:not(.top-reached) header nav ul[role="menu"] ul li{
    border-left: 1px solid #c3c3c3;
    border-right: 1px solid #c3c3c3;
}

body:not(.top-reached) header nav ul[role="menu"] ul li:last-of-type{
    border-bottom: 1px solid #c3c3c3;
}

header nav ul[role="menu"] ul li:last-of-type a {
    padding: 10px calc(45px / 2) 20px calc(45px / 2);
}

.hamburger {
    padding: 15px;
    display: none;
    cursor: pointer;
    -webkit-transition-property: opacity, filter;
    -moz-transition-property: opacity, filter;
    -o-transition-property: opacity, filter;
    transition-property: opacity, filter;
    -webkit-transition-duration: 0.15s;
    -moz-transition-duration: 0.15s;
    -o-transition-duration: 0.15s;
    transition-duration: 0.15s;
    -webkit-transition-timing-function: linear;
    -moz-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
    float: right;
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 99;
}

.hamburger-box {
    width: 40px;
    height: 24px;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 3px;
    background-color: #000000;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    position: absolute;
    -webkit-transition-property: transform;
    -moz-transition-property: transform;
    -o-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.15s;
    -moz-transition-duration: 0.15s;
    -o-transition-duration: 0.15s;
    transition-duration: 0.15s;
    -webkit-transition-timing-function: ease;
    -moz-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
}

.hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before {
    top: -10px;
}

.hamburger-inner::after {
    bottom: -10px;
}

/* Collapse */
.hamburger--collapse .hamburger-inner {
    top: auto;
    bottom: 0;
    -webkit-transition-duration: 0.15s;
    -moz-transition-duration: 0.15s;
    -o-transition-duration: 0.15s;
    transition-duration: 0.15s;
    -webkit-transition-delay: 0.15s;
    -moz-transition-delay: 0.15s;
    -o-transition-delay: 0.15s;
    transition-delay: 0.15s;
    -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -moz-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -o-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse .hamburger-inner::after {
    top: -20px;
    -webkit-transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
    -moz-transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
    -o-transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
    transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}

.hamburger--collapse .hamburger-inner::before {
    -webkit-transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -moz-transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -o-transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

body.active .hamburger--collapse .hamburger-inner {
    -webkit-transform: translate3d(0, -10px, 0) rotate(-45deg);
    -moz-transform: translate3d(0, -10px, 0) rotate(-45deg);
    -ms-transform: translate3d(0, -10px, 0) rotate(-45deg);
    -o-transform: translate3d(0, -10px, 0) rotate(-45deg);
    transform: translate3d(0, -10px, 0) rotate(-45deg);
    -webkit-transition-delay: 0.32s;
    -moz-transition-delay: 0.32s;
    -o-transition-delay: 0.32s;
    transition-delay: 0.32s;
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -moz-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

body.active .hamburger--collapse .hamburger-inner::after {
    top: 0;
    opacity: 0;
    -webkit-transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.27s linear;
    -moz-transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.27s linear;
    -o-transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.27s linear;
    transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.27s linear;
}

body.active .hamburger--collapse .hamburger-inner::before {
    top: 0;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
    -moz-transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
    -o-transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
}

body.active{
    overflow: hidden;
}

.ham-menu-wrapper .logo img{
    position: absolute;
    width: 100%;
    transform: translateY(-50%);
    left: 0;
    height: min(calc(var(--header-height) - 40px), 60px);
}

.ham-menu-wrapper .logo{
    width: 190px;
    height: var(--header-height);
    position: absolute;
    bottom: 100%;
    left: max(calc(100lvw - var(--container-width)) / 2 + var(--gap), var(--gap));
    max-width: calc(100% - (var(--gap) * 2));
}

body .ham-menu-wrapper .logo{
    transform: translateY(calc(100% + var(--gap) + 3px));
} 

.ham-menu-wrapper{
    position: fixed;
    height: 100dvh;
    width: 100dvw;
    bottom: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 98;
    visibility: hidden;
    opacity: 0;
    transition: 250ms ease-in-out;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    bottom: 0;
}

body.active .hamburger{
    filter: invert(100%);
}

body.active .ham-menu-wrapper{
    visibility: visible;
    opacity: 1;
    pointer-events: all;
    bottom: 0;
    filter: invert(100%);
}

header .ham-menu-wrapper ul[role="menu"] li a, 
header .ham-menu-wrapper ul[role="menu"] li.current-menu-item a{
    display: block;
    /* padding: 20px calc(70px / 2); */
}

header .ham-menu-wrapper ul[role="menu"] li a{
    font-size: 30px;
}

body:not(.top-reached) header .ham-menu-wrapper ul[role="menu"] ul li a, 
body:not(.top-reached) header .ham-menu-wrapper ul[role="menu"] ul li.current-menu-item a{

}


/*______________________
|                       |
|   6. PAGE CONTENTS    |
|______________________*/

/*
|    6.1. Containers
*/

.content-wrapper {
    margin-top: var(--header-height);
    overflow: hidden;
    min-height: calc(100vh - var(--header-height) * 2);
    transition: 250ms ease-in-out;
}

/* body:not(.archive) .content-wrapper {
    margin-top: var(--larger-header-height);
} */


/*
|    6.2. Header
*/

header {
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    height: var(--header-height);
    color: var(--gray-font-color);
    display: flex;
    align-items: center;
    border-bottom: 1px solid #c3c3c3;
    transition: 250ms ease-in-out
}

.top-reached header{
    background-color: transparent;
    border-bottom: 1px solid transparent;
}

.top-reached header .page-title img{
    filter: invert(1);
}

.top-reached header a .fas,
.top-reached header nav ul li a, 
.top-reached header nav ul li.current-menu-item a, 
.top-reached header nav ul li a:hover, 
.top-reached header nav ul li a:focus, 
.top-reached header nav ul li a:active, 
.top-reached header nav ul ul li a, 
.top-reached header nav ul ul li.current-menu-item a, 
.top-reached header nav ul ul li a:hover, 
.top-reached header nav ul ul li a:focus, 
.top-reached header nav ul ul li a:active{
    color: #fff !important;
}

header .page-title {
    font-size: 24px;
    font-weight: 500;
}

header #site-description {
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
}

.topbar {
    background-color: var(--color-grey2);
    padding: 8px 0;
    font-size: 12px;
}


/*
|    6.3. Footer
*/

footer {
    background-color: var(--blue);
    color: var(--gray-font-color);
    margin: 0;
    padding: 75px 0 0 0;
    position: relative;
}

footer img {
    height:auto;
}

footer .thelastone {
    width: 100%;
    margin-top: calc(var(--gap) * 4);
    padding: 12px 0;
    background-color: #000;
}

footer .thelastone a {
    -webkit-transition: all 150ms ease-in-out;
    -moz-transition: all 150ms ease-in-out;
    -o-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
}

footer .thelastone a:hover {
    -webkit-transition: all 150ms ease-in-out;
    -moz-transition: all 150ms ease-in-out;
    -o-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
    text-decoration: none;
    color: inherit;
}

footer .social-media a {
    display: inline-block;
    padding: 0 5px;
}

footer .social-media a:first-of-type {
    padding-left: 0;
}

footer .social-media a:last-of-type {
    padding-right: 0;
}

footer .scroller {
    position: absolute;
    right: 15px;
    bottom: 35px;
    font-size: 48px;
}

footer ul li {
    list-style: none !important;
    margin-left:0 !important;
    margin-bottom:0 !important;
}


footer ul li a {
    display: inline-block;
    padding: 3px 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
}

footer ul li:first-of-type a {
    padding-top: 0;
}

footer ul li:last-of-type a {
    padding-bottom: 0;
}

footer .logo{
    margin-bottom: calc(var(--gap) * 2);
}

footer .logo img{
    height: 70px;
}

footer .socials{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--gap);
    margin-top: var(--gap);
}

footer .socials a{
    width: 30px;
}

footer .info > *:first-child > *{
    padding-right: 15px;
}

footer h3{
    color: #CCCCCC;
    margin-bottom: var(--gap);
    font-size: 24px;
    font-weight: 400;
    font-family: var(--title-font);
}

footer h3 {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 20px;
    font-weight: 500;
    color:#fff;
}

footer .contact ul li{
    font-size:17px;
    color: #fff;
}

footer .contact ul li a{
    font-size:17px;
    color: #fff;
}

footer #footermenu ul li {
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
}

footer #footermenu ul li {
    display:inline-block;
    margin-left:0;
}

footer #footermenu ul li a{
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 400;
    padding-left:5px;
    padding-right:5px;
}

footer ul li a{
    font-weight: 700;
    font-size: 20px;
    font-family: "IBM Plex Sans", sans-serif;
    color: #fff;
}

footer #footermenu ul li a,
footer .thelastone{
    font-size: 13px;
}

footer .thelastone .centered{
    display: flex;
    align-items: center;
    justify-content: center;
}

footer .thelastone .right{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

footer a, footer a:link, footer a:visited, footer a:focus, footer a:active{
    color: #fff;
}

footer .frm_form_field input:not(.ed_button){
    padding: 10px 15px;
    font-size: 14px;
    outline: 0px solid transparent;
    border: 2px solid var(--blue);
}

footer input:not([type="range"]):not([id^="s-"]):focus{
    border: 2px solid #000;
    border-radius: 20px;
}

footer .frm_form_field label{
    left: 20px;
}

footer .frm_primary_label{
    font-size: 16px;
    padding: 0;
}

footer .frm_form_field{
    margin-bottom: 20px;
    margin-top: 0px!important;
}

footer input:not([type="range"]):not([id^="s-"]), footer textarea, footer select{
    border-radius: 20px;
}

body.frontend footer .frm_button_submit.large{
    border-width: 2px;
    border-style: solid;
    border-color: #fff;
    padding: 15px;
    font-size: var(--small-button-font-size);
    margin-left:unset;
    margin-right:unset;
}




/*
|    6.4. Frontpage
*/


/*
|    6.5. Single-Post
*/

.postmeta {
    margin-top: 15px;
    margin-bottom: 15px;
    background-color: #EFEFEF;
    padding-top: 15px;
    padding-bottom: 15px;
}

.postmeta .share_counter {
    display: inline-block;
    text-align: center;
    float: right;
    margin-left: 10px;
}

.postmeta p {
    margin-bottom: 0;
}

#commentform {
    margin-bottom: 75px;
}

#wp-comment-cookies-consent {
    float: left;
    margin-top: 4px;
    margin-right: 6px;
    position: relative;
}

.comment-form-cookies-consent label {
    font-weight: 300 !important;
    font-size: 14px;
}

.commentlist ul {
    list-style-type: none;
    margin-left: 0;
}

#commentform label {
    display: block;
    font-weight: 500;
    padding-bottom: 5px;
}

#commentform #email,
#commentform #author,
#commentform #url {
    width: 100%;
    max-width: 100%;
}

.comment-form-email {
    width: 50%;
    float: left;
}

.comment-form-url {
    width: 100%;
    margin-bottom: 25px;
}

.comment-form-author {
    width: 50%;
    float: left;
    padding-right: 10px;
}

#commentform #submit {
    cursor: pointer;
}

#commentform #comment {
    width: 100%;
}

.single_post_thumbnail {
    height: 50vh;
    min-height: 50vh;
    background-position: center;
    background-repeat: no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: relative;
    z-index: 1;
}

.single_post_thumbnail::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-color: rgba(255, 255, 255, 0.55);
}

#single_post_wrapper {
    background-color: #FFFFFF;
    margin: 25px 50px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    z-index: 2;
    position: relative;
}

.single_post_thumbnail_zoom {
    position: absolute;
    right: 0;
    background-color: rgba(255, 255, 255, 0.7);
    bottom: 0;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
    -webkit-transition: all 150ms ease-in-out;
    -moz-transition: all 150ms ease-in-out;
    -o-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
}

.single_post_thumbnail_zoom a {
    padding: 10px;
    display: block;
}

.single_post_thumbnail_zoom:hover {
    margin-bottom: -2px;
    -webkit-transition: all 150ms ease-in-out;
    -moz-transition: all 150ms ease-in-out;
    -o-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
}

.single_post_thumb_caption {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 10px 15px 10px 10px;
    font-style: italic;
    font-size: 14px;
}

.vote_overlay {
    position: relative;
}

#feedback.voted {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: transparent;
    z-index: 100;
}

.commentlist .comment-author img {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.commentlist .comment-author .fn,
.commentlist .comment-author .says {
    padding: 0 5px;
}

.commentlist .comment-author {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    flex-direction: row;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    padding-top: 10px;
    padding-left: 25px;
}

.commentlist .date {
    font-size: 12px;
    margin-top: -4px;
    color: var(--color-grey4);
    display: block;
}

.commentlist .comment-body {
    margin: 25px 0 45px 0;
}

.commentlist .comment-body .comment_text_body {
    background-color: var(--color-grey2);
    padding: 25px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: relative;
    margin-bottom: 15px;
}

.commentlist .comment-body .comment_text_body::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 35px;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-top-color: var(--color-grey2);
    border-bottom: 0;
    border-right: 0;
    margin-left: -10px;
    margin-bottom: -20px;
}

.commentlist .reply {
    float: right;
}

.commentlist ul ul {
    margin-left: 8%;
}

.post-wrapper {
    margin-top: 60px;
    margin-bottom: 60px;
}

.post-wrapper article[id^=post-]:not(:last-of-type) {
    margin-bottom: 30px;
}

.post-wrapper article[id^=post-] h2 {
    margin-bottom: 0;
}

.post-wrapper article[id^=post-] a {
    text-decoration: none;
}

.post-wrapper article[id^=post-] p {
    color: #333333;
}


/*______________________
|                       |
|   7. MISCELLANEOUS    |
|______________________*/

.slick-slide {
    height: unset;
}

.cookie-notice {
    position: fixed;
    right: 0;
    bottom: -150px;
    left: 0;
    background-color: #CCCCCC;
    height: 90px;
    z-index: 9999;
}

.cookie-notice p {
    margin-bottom: 0;
    margin-right: 30px;
    font-size: 16px;
}

.fadeOutDown:not(.wow) {
    -webkit-transform: translateY(150px);
    -moz-transform: translateY(150px);
    -ms-transform: translateY(150px);
    -o-transform: translateY(150px);
    transform: translateY(150px);
    opacity: 0;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}

.fadeInUp:not(.wow) {
    -webkit-transform: translateY(-150px);
    -moz-transform: translateY(-150px);
    -ms-transform: translateY(-150px);
    -o-transform: translateY(-150px);
    transform: translateY(-150px);
    opacity: 1;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}


/*
Page Default
*/

body.page-template-default .text-container{
    display: block;
    margin: auto;
    padding-top: calc(var(--section-padding) * 0.5);
    padding-bottom: var(--section-padding);
    padding-left:15px;
    padding-right:15px;
}

body.page-template-default h3, 
body.page-template-default h4{
    font-family: "source-serif-pro", serif;
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: 400;
}

body.page-template-default h4{
    font-size: calc(var(--h3-font-size) - 4px);
}

body.page-template-default ul li{
    list-style: disc;
    margin-left: 25px;
    margin-bottom: 5px;
}

body.error404 article{
    margin-top: var(--section-padding);
    margin-bottom: calc(var(--section-padding) * 1.75);
}