/*
Theme Name: ASNS
Theme URI: https://www.webandnet.nl
Author: web&net | C.P.M. Bastiaansen
Author URI: https://www.webandnet.nl
Description: Theme custom build for ASNS
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 8.0.x
Version: 2026.7.1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: webandnet
*/



/* ---- FONTS ---- */
@font-face {
    font-family: 'Metropolis';
    src: url('fonts/Metropolis/Metropolis-Light.eot');
    src: local('Metropolis Light'), local('Metropolis-Light'),
        url('fonts/Metropolis/Metropolis-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/Metropolis/Metropolis-Light.woff2') format('woff2'),
        url('fonts/Metropolis/Metropolis-Light.woff') format('woff'),
        url('fonts/Metropolis/Metropolis-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Metropolis';
    src: url('fonts/Metropolis/Metropolis-Regular.eot');
    src: local('Metropolis Regular'), local('Metropolis-Regular'),
        url('fonts/Metropolis/Metropolis-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Metropolis/Metropolis-Regular.woff2') format('woff2'),
        url('fonts/Metropolis/Metropolis-Regular.woff') format('woff'),
        url('fonts/Metropolis/Metropolis-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Metropolis';
    src: url('assets/fonts/Metropolis/Metropolis-Medium.eot');
    src: local('Metropolis Medium'), local('Metropolis-Medium'),
        url('assets/fonts/Metropolis/Metropolis-Medium.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/Metropolis/Metropolis-Medium.woff2') format('woff2'),
        url('assets/fonts/Metropolis/Metropolis-Medium.woff') format('woff'),
        url('assets/fonts/Metropolis/Metropolis-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Metropolis Semi';
    src: url('assets/fonts/Metropolis/Metropolis-SemiBold.eot');
    src: local('Metropolis Semi Bold'), local('Metropolis-SemiBold'),
        url('assets/fonts/Metropolis/Metropolis-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/Metropolis/Metropolis-SemiBold.woff2') format('woff2'),
        url('assets/fonts/Metropolis/Metropolis-SemiBold.woff') format('woff'),
        url('assets/fonts/Metropolis/Metropolis-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Metropolis';
    src: url('assets/fonts/Metropolis/Metropolis-Bold.eot');
    src: local('Metropolis Bold'), local('Metropolis-Bold'),
        url('assets/fonts/Metropolis/Metropolis-Bold.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/Metropolis/Metropolis-Bold.woff2') format('woff2'),
        url('assets/fonts/Metropolis/Metropolis-Bold.woff') format('woff'),
        url('assets/fonts/Metropolis/Metropolis-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}



/* ---- VARIABLES ---- */
:root {
	--default-font-color: #002664;
    --font-color-black: #222222;
    --font-color-white: #FFFFFF;
	--default-background-color: #F5F4EC;
    --background-color-white: #FFFFFF;

    --background-color-blue: #002664;

    --default-header-background-color: #FFFFFF;

    --default-border-color: #CBBFB3;

    --main-menu-color-blue: #002664;
    --main-menu-background-white: #FFFFFF;

    --main-button-border-color: #002664;
    --button-border-color-white: #002664;

    --form-button-bg-color: #FFFFFF;
    --form-button-bg-color-blue: #002664;
    --form-button-border-color: #002664;
    --form-button-font-color: #002664;
    --form-button-font-color-white: #FFFFFF;
    
    --font-family-inter-tight: 'Inter Tight', sans-serif;
	--font-family-metropolis-regular: 'Metropolis Regular', sans-serif;
	--font-family-metropolis-semi-bold: 'Metropolis Semi', sans-serif;
	--font-size-16: clamp( 14px, 0.83vw, 16px);
    --font-size-18: clamp( 16px, 0.94vw, 18px);
    --font-size-20: clamp( 18px, 1.04vw, 20px);
    --font-size-22: clamp( 18px, 1.15vw, 22px);
    --font-size-24: clamp( 20px, 1.25vw, 24px);
    --font-size-28: clamp( 22px, 1.25vw, 28px);
    --font-size-30: clamp( 18px, 1.56vw, 30px);
    --font-size-36: clamp( 28px, 1.88vw, 36px);
	--font-size-40: clamp( 32px, 2.08vw, 40px);
	--font-size-50: clamp( 36px, 2.60vw, 50px);
    --font-size-70: clamp( 50px, 3.55vw, 70px);
}


/* ---- GENERAL ---- */
body {
	font-family: var(--font-family-inter-tight);
	font-size: var(--font-size-18);
    font-weight: 300;
	color: var(--default-font-color);
	line-height: 1.4;
}

h1, h2, h3, h4, h5 {
	font-family: var(--font-family-metropolis-semi-bold);
	color: var(--default-font-color);
	font-weight: 500;
	line-height: 1.1;
	margin-bottom: 1em;
}

h1 p, h2 p, h3 p, h4 p, h5 p {
	margin-bottom: 0;
}

h1 {
    font-size: var(--font-size-70);
}

h2 {
	font-size: var(--font-size-40);
}




/* ---- FORM GENERAL ---- */
.gform_required_legend {
	display: none;
}




/* ---- HEADER ---- */
#header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    height: auto;
    width: 100%;
    padding: 35px 0;
    z-index: 1000;
}

.header-container {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 70px;
    width: 100%;
    border-radius: 40px;
    background-color: var(--default-header-background-color);
    box-shadow: 0 0 20px rgba( 0, 0, 0, .1);
}

.header-logo-container {
    display: flex;
    flex-direction: row;
    flex: 0 1 30%;
    height: 100%;
}

.header-logo-container img {
    width: auto;
    height: 70px;
}

.header-main-menu-container {
    display: flex;
    flex-direction: row;
    flex: 0 1 100%;
}

#asns-main-menu-wrapper {
    flex: 0 1 100%;
}

.header-main-menu-container ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    list-style: none;
    height: 100%;
    align-items: center;
    padding: 0;
    margin: 0;
}

.header-main-menu-container ul > li {
    position: relative;
    flex: 1 1 0;
    text-align: center;
}

.header-main-menu-container ul > li > a {
    position: relative;
    font-family: var(--font-family-metropolis-semi-bold);
    font-size: var(--font-size-20);
    font-weight: 500;
    color: var(--default-font-color);
    text-decoration: none;
}

.header-main-menu-container ul > li > a:before {
    position: absolute;
    content: '';
    background-color: var(--main-menu-color-blue);
    bottom: -4px;
    left: 0;
    height: 2px;
    width: 0;
    transition: all .2s ease-in-out;
}

.header-main-menu-container ul > li > a:hover:before {
    width: 100%;
    transition: all .2s ease-in-out;
}

.header-main-menu-container ul > li > ul {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    height: auto;
    width: max-content;
    padding: 20px 30px;
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--main-menu-background-white);
    border-radius: 20px;
    box-shadow: 0 0 20px rgba( 0, 0, 0, .2);
    isolation: isolate;
    opacity: 0;
    visibility: hidden;
    z-index: -20;
    transition: all .3s ease-in-out;
}

.header-main-menu-container ul > li:hover > ul {
    visibility: visible;
    opacity: 1;
    z-index: 10;
    transition: all .3s ease-in-out;
}

.header-main-menu-container ul > li > ul::before {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    content: '';
    height: 20px;
    width: 20px;
    border-radius: 5px;
    background-color: var(--main-menu-background-white);
    z-index: -1;
}

.header-main-menu-container ul > li > ul > li {
    display: flex;
    flex-direction: row;
    flex: 0 0 100%;
    min-width: 100%;
    padding: 0 10px;
    align-items: center;
    min-height: 50px;
    border-bottom: 1px solid var(--default-border-color);
}


/* ---- HEADER - LANGUAGE SELECT ---- */
.header-language-select-container .gglobe {
    position: relative;
    top: 1px;
    left: 1px;
}

.header-language-select-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 70px;
    width: 70px;
    border-radius: 35px;
    background-color: var(--default-header-background-color);
    box-shadow: 0 0 20px rgba( 0, 0, 0, .1);
}



/* ---- FOOTER ---- */
#footer-wrapper {
	background-color: var(--default-background-color);
	padding: 70px 35px;
}

#footer-wrapper #footer-content-wrapper {
    max-width: 1920px;
    min-height: 200px;
	background-color: #7CCEE7;
	border-radius: 40px;
    margin: 0 auto;
}

#footer-wrapper .footer-content-container {
	padding: 70px 4%;
	
}

#footer-wrapper .footer-logo-container {
    max-width: 100%;
    padding: 0 4%;
    margin-bottom: 5rem;
}

#footer-wrapper .footer-logo-container img {
    width: 100%;
    height: 100%;
}

#footer-wrapper .footer-quick-links-container {
    padding: 0 2%;
    margin-bottom: 10rem;
}

#footer-wrapper h4.footer-quick-links-title {
    font-size: var(--font-size-20);
}

#footer-wrapper .footer-quick-links-container ul {
    columns: 3;
    column-gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

#footer-wrapper .footer-quick-links-container ul li {
    break-inside: avoid;
    margin-bottom: 1.5rem;
}

#footer-wrapper .footer-quick-links-container ul li a {
    position: relative;
    font-size: var(--font-size-50);
    color: var(--main-menu-color-blue);
    font-weight: 500;
    text-decoration: none;
}

#footer-wrapper .footer-quick-links-container ul li a::before {
    position: absolute;
    content: '';
    bottom: -4px;
    height: 2px;
    width: 0;
    background-color: var(--main-menu-color-blue);
    transition: all .3s ease-in-out;
}

#footer-wrapper .footer-quick-links-container ul li a:hover::before {
    width: 100%;
    transition: all .3s ease-in-out;
}

#footer-wrapper .footer-socialme-contactinfo-socialme-links-container {
    display: flex;
    flex-direction: row;
    column-gap: 15px;
}

#footer-wrapper a.footer-socialme-contactinfo-socialme-facebook {
    display: block;
    font-size: 0;
    height: 25px;
    width: 25px;
    background-image: url('assets/icons/ASNS_-_Icon_-_Facebook.svg');
    background-position: center;
    background-size: auto 25px;
    background-repeat: no-repeat;
}

#footer-wrapper a.footer-socialme-contactinfo-socialme-instagram {
    display: block;
    font-size: 0;
    height: 25px;
    width: 25px;
    background-image: url('assets/icons/ASNS_-_Icon_-_Instagram.svg');
    background-position: center;
    background-size: auto 25px;
    background-repeat: no-repeat;
}

#footer-wrapper a.footer-socialme-contactinfo-socialme-linkedin {
    display: block;
    font-size: 0;
    height: 25px;
    width: 25px;
    background-image: url('assets/icons/ASNS_-_Icon_-_LinkedIn.svg');
    background-position: center;
    background-size: auto 25px;
    background-repeat: no-repeat;
}

#footer-wrapper .footer-socialme-contactinfo-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: var(--font-size-20);
    padding: 0 2%;
}

#footer-wrapper .footer-socialme-contactinfo-container h4 {
    font-size: var(--font-size-20);
}

#footer-wrapper .footer-socialme-contactinfo-socialme-container {
    display: flex;
    flex-direction: column;
    flex: 0 0 33.3334%;
}

#footer-wrapper .footer-socialme-contactinfo-address-container {
    display: flex;
    flex-direction: column;
    flex: 0 0 33.3334%;
}

#footer-wrapper .footer-socialme-contactinfo-contact-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 0 0 33.3334%;
}


#sub-footer-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1920px;
    padding: 1.5rem 100px 0 100px;
    margin: 0 auto;
}

#sub-footer-wrapper a {
    position: relative;
    display: block;
    font-size: var(--font-size-16) ;
    color: var(--default-font-color);
    text-decoration: none;
    align-self: flex-start;
}

#sub-footer-wrapper a::before {
    position: absolute;
    content: '';
    bottom: -2px;
    height: 1px;
    width: 0;
    background-color: var(--background-color-blue);
    transition: all .2s ease-in-out;
}

#sub-footer-wrapper a:hover::before {
    width: 100%;
    transition: all .2s ease-in-out;
}

#sub-footer-wrapper .sub-footer-content-container {
    display: flex;
    flex-direction: row;
    flex: 0 0 50%;
    font-size: var(--font-size-16) ;
}

#sub-footer-wrapper .sub-footer-footermenu-container {
    display: flex;
    flex-direction: row;
    flex: 0 0 50%;
    text-align: right;
    justify-content: flex-end;
}

#sub-footer-wrapper .sub-footer-footermenu-container .menu-footer-menu-container {
    width: 100%;
} 

#sub-footer-wrapper .sub-footer-footermenu-container ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    justify-content: space-between;
}

#sub-footer-wrapper .sub-footer-footermenu-container ul li {
    
}





/* ---- MOBIEL ---- */
@media( max-width: 767px) {
    /* ---- HEADER ---- */
    #header-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        height: auto;
        width: 100%;
        padding: 20px 0;
        z-index: 1000;
    }

    .header-container {
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        height: 55px;
        width: auto;
        border-radius: 40px;
        background-color: transparent;
        box-shadow: none;
    }

    .header-logo-container {
        position: relative;
        display: flex;
        flex-direction: row;
        flex: 0 1 30%;
        height: 100%;
        z-index: 1200;
    }

    .header-logo-container img {
        height: 55px;
    }

    .header-main-menu-container {
        position: fixed;
        pointer-events: none;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        flex: 0 1 100%;
        min-width: 100%;
        max-height: 100vh;
        padding: 105px 70px 70px 70px;
        border-radius: 0 0 35px 35px;
        opacity: 0;
        overflow-y: auto;
        z-index: -100;
        background-color: var(--default-header-background-color);
    }

     .header-main-menu-container.opened-menu {
        pointer-events: all;
        opacity: 1;
        z-index: 10;
    }

    .header-main-menu-container ul {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        list-style: none;
        height: 100%;
        flex: 0 1 100%;
        align-items: flex-start;
        padding: 0;
        margin: 0;
    }

    .header-main-menu-container ul > li {
        text-align: left;
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 1px solid var(--default-border-color);
        width: 100%;
    }

    .header-main-menu-container ul > li > a {
        position: relative;
        font-family: var(--font-family-metropolis-semi-bold);
        font-size: var(--font-size-36);
        font-weight: 500;
        color: var(--default-font-color);
        text-decoration: none;
    }

    .header-main-menu-container ul > li > a:before {
        display: none;
    }

    .header-main-menu-container ul > li > ul {
        position: relative;
        top: inherit;
        left: inherit;
        transform: inherit;
        height: auto;
        width: max-content;
        padding: 10px;
        border-radius: 0;
        box-shadow: none;
        isolation: inherit;
        opacity: 1;
        visibility: visible;
        z-index: 1;
    }

    .header-main-menu-container ul > li:hover > ul {
        all: unset;
    }

    .header-main-menu-container ul > li > ul > li {
        padding: 0 10px;
        align-items: flex-start;
        min-height: 35px;
        line-height: 35px;
        margin-bottom: 0;
        border-bottom: 0 none;
    }

    .header-main-menu-container ul > li > ul > li > a {
        font-size: var(--font-size-22);
    }

    .header-language-select-container {
        display: none;
    }

    .mobile-header-main-menu-language-select {
        display: flex;
        flex-direction: row;
        width: 100%;
    }

    .mobile-header-main-menu-language-select a {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 40px;
        width: 40px;
        border-radius: 20px;
        box-shadow: 0 0 20px rgba(0, 0, 0, .1);
    }

    .mobile-header-main-menu-language-select a img {
        height: 30px;
        width: 30px;
        border-radius: 15px;
        opacity: 0.5;
        object-fit: cover;
    }

    .mobile-header-main-menu-language-select a.gt-current-lang img {
        opacity: 1;
    }


    .mobile-menu-pancake-container {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 55px;
        width: 55px;
        background-color: var(--background-color-white);
        border-radius: 30px;
        margin-left: 10px;
        box-shadow: 0 0 20px rgba( 0, 0, 0, .1);
        z-index: 500;
    }

    .mobile-menu-pancake-container .icon-menu {
        --gap: 5px;
        --height-bar: 2.5px;
        --pos-y-bar-one: 0;
        --pos-y-bar-three: 0;
        --scale-bar: 1;
        --rotate-bar-one: 0;
        --rotate-bar-three: 0;
        width: 25px;
        display: flex;
        flex-direction: column;
        gap: var(--gap);
        cursor: pointer;
        position: relative;
    }

    .mobile-menu-pancake-container .bar {
        position: relative;
        height: var(--height-bar);
        width: 100%;
        border-radius: .5rem;
        background-color: var(--default-font-color);
    }

    .mobile-menu-pancake-container .bar--1 {
        top: var(--pos-y-bar-one);
        transform: rotate(var(--rotate-bar-one));
        transition: top 200ms 100ms, transform 100ms;
    }

    .mobile-menu-pancake-container .bar--2 {
        transform: scaleX(var(--scale-bar));
        transition: transform 150ms 100ms;
    }

    .mobile-menu-pancake-container .bar--3 {
        bottom: var(--pos-y-bar-three);
        transform: rotate(var(--rotate-bar-three));
        transition: bottom 200ms 100ms, transform 100ms;
    }

    .mobile-menu-pancake-container .check-icon:checked + .icon-menu > .bar--1 {
        transition: top 200ms, transform 200ms 100ms;
    }

    .mobile-menu-pancake-container .check-icon:checked + .icon-menu > .bar--3 {
        transition: bottom 200ms, transform 200ms 100ms;
    }

    .mobile-menu-pancake-container .check-icon:checked + .icon-menu {
        --pos-y-bar-one: calc(var(--gap) + var(--height-bar));
        --pos-y-bar-three: calc(var(--gap) + var(--height-bar));
        --scale-bar: 0;
        --rotate-bar-one: 45deg;
        --rotate-bar-three: -45deg;
    }

    

    /* ---- FOOTER ---- */
    #footer-wrapper {
        padding: 35px;
    }

                    #footer-wrapper #footer-content-wrapper {
                        max-width: 1920px;
                        min-height: 200px;
                        background-color: #7CCEE7;
                        border-radius: 40px;
                        margin: 0 auto;
                    }

                    #footer-wrapper .footer-content-container {
                        padding: 70px 4%;
                        
                    }

                    #footer-wrapper .footer-logo-container {
                        max-width: 100%;
                        padding: 0 4%;
                        margin-bottom: 5rem;
                    }

                    #footer-wrapper .footer-logo-container img {
                        width: 100%;
                        height: 100%;
                    }

    #footer-wrapper .footer-quick-links-container {
        margin-bottom: 5rem;
    }

                    #footer-wrapper h4.footer-quick-links-title {
                        font-size: var(--font-size-20);
                    }

    #footer-wrapper .footer-quick-links-container ul {
        columns: 1;
        column-gap: 2rem;
        list-style: none;
        padding: 0;
        margin: 0;
    }

                    #footer-wrapper .footer-quick-links-container ul li {
                        break-inside: avoid;
                        margin-bottom: 1.5rem;
                    }

                    #footer-wrapper .footer-quick-links-container ul li a {
                        position: relative;
                        font-size: var(--font-size-50);
                        color: var(--main-menu-color-blue);
                        font-weight: 500;
                        text-decoration: none;
                    }

                    #footer-wrapper .footer-quick-links-container ul li a::before {
                        position: absolute;
                        content: '';
                        bottom: -4px;
                        height: 2px;
                        width: 0;
                        background-color: var(--main-menu-color-blue);
                        transition: all .3s ease-in-out;
                    }

                    #footer-wrapper .footer-quick-links-container ul li a:hover::before {
                        width: 100%;
                        transition: all .3s ease-in-out;
                    }

                    #footer-wrapper .footer-socialme-contactinfo-socialme-links-container {
                        display: flex;
                        flex-direction: row;
                        column-gap: 15px;
                    }

                    #footer-wrapper a.footer-socialme-contactinfo-socialme-facebook {
                        display: block;
                        font-size: 0;
                        height: 25px;
                        width: 25px;
                        background-image: url('assets/icons/ASNS_-_Icon_-_Facebook.svg');
                        background-position: center;
                        background-size: auto 25px;
                        background-repeat: no-repeat;
                    }

                    #footer-wrapper a.footer-socialme-contactinfo-socialme-instagram {
                        display: block;
                        font-size: 0;
                        height: 25px;
                        width: 25px;
                        background-image: url('assets/icons/ASNS_-_Icon_-_Instagram.svg');
                        background-position: center;
                        background-size: auto 25px;
                        background-repeat: no-repeat;
                    }

                    #footer-wrapper a.footer-socialme-contactinfo-socialme-linkedin {
                        display: block;
                        font-size: 0;
                        height: 25px;
                        width: 25px;
                        background-image: url('assets/icons/ASNS_-_Icon_-_LinkedIn.svg');
                        background-position: center;
                        background-size: auto 25px;
                        background-repeat: no-repeat;
                    }

                    #footer-wrapper .footer-socialme-contactinfo-container {
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                        font-size: var(--font-size-20);
                        padding: 0 2%;
                    }

                    #footer-wrapper .footer-socialme-contactinfo-container h4 {
                        font-size: var(--font-size-20);
                    }

    #footer-wrapper .footer-socialme-contactinfo-socialme-container {
        flex: 0 0 100%;
        margin-bottom: 5rem;
    }

    #footer-wrapper .footer-socialme-contactinfo-address-container {
        flex: 0 0 100%;
    }

    #footer-wrapper .footer-socialme-contactinfo-contact-container {
        justify-content: flex-start;
        flex: 0 0 100%;
    }


                    #sub-footer-wrapper {
                        padding: 2rem 0;
                    }

                    #sub-footer-wrapper a {
                        position: relative;
                        font-size: var(--font-size-16) ;
                        color: var(--default-font-color);
                        text-decoration: none;
                    }

                    #sub-footer-wrapper a::before {
                        position: absolute;
                        content: '';
                        bottom: -2px;
                        height: 1px;
                        width: 0;
                        background-color: var(--background-color-blue);
                        transition: all .2s ease-in-out;
                    }

                    #sub-footer-wrapper a:hover::before {
                        width: 100%;
                        transition: all .2s ease-in-out;
                    }

    #sub-footer-wrapper .sub-footer-content-container {
        font-size: var(--font-size-16) ;
        padding-left: 0;
        flex: 0 0 100%;
        flex-direction: column;
        align-items: center;
    }

    #sub-footer-wrapper .sub-footer-content-container br {
        margin-bottom: 1rem;
    }

    #sub-footer-wrapper .sub-footer-content-container a,
    #sub-footer-wrapper .sub-footer-content-container span {
        display: flex;
    }

    #sub-footer-wrapper .sub-footer-footermenu-container {
        text-align: right;
        padding-right: 0;
        flex: 0 0 100%;
    }

    #sub-footer-wrapper .sub-footer-footermenu-container ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        list-style: none;
        justify-content: space-between;
        padding: 0;
        margin: 15px 0;
    }

    #sub-footer-wrapper .sub-footer-footermenu-container ul li {
        margin-bottom: 15px;
    }
}


/* ---- TABLET - PORTRAIT ---- */
@media only screen and (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
    /* ---- HEADER ---- */
    #header-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        height: auto;
        width: 100%;
        padding: 20px 0;
        z-index: 1000;
    }

    .header-container {
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        height: 55px;
        width: auto;
        border-radius: 40px;
        background-color: transparent;
        box-shadow: none;
    }

    .header-logo-container {
        position: relative;
        display: flex;
        flex-direction: row;
        flex: 0 1 30%;
        height: 100%;
        z-index: 1200;
    }

    .header-logo-container img {
        height: 55px;
    }

    .header-main-menu-container {
        position: fixed;
        pointer-events: none;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        flex: 0 1 100%;
        min-width: 100%;
        max-height: 100vh;
        padding: 105px 70px 70px 70px;
        border-radius: 0 0 35px 35px;
        opacity: 0;
        overflow-y: auto;
        z-index: -100;
        background-color: var(--default-header-background-color);
    }

     .header-main-menu-container.opened-menu {
        pointer-events: all;
        opacity: 1;
        z-index: 10;
    }

    .header-main-menu-container ul {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        list-style: none;
        height: 100%;
        flex: 0 1 100%;
        align-items: flex-start;
        padding: 0;
        margin: 0;
    }

    .header-main-menu-container ul > li {
        text-align: left;
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 1px solid var(--default-border-color);
        width: 100%;
    }

    .header-main-menu-container ul > li > a {
        position: relative;
        font-family: var(--font-family-metropolis-semi-bold);
        font-size: var(--font-size-36);
        font-weight: 500;
        color: var(--default-font-color);
        text-decoration: none;
    }

    .header-main-menu-container ul > li > a:before {
        display: none;
    }

    .header-main-menu-container ul > li > ul {
        position: relative;
        top: inherit;
        left: inherit;
        transform: inherit;
        height: auto;
        width: max-content;
        padding: 10px;
        border-radius: 0;
        box-shadow: none;
        isolation: inherit;
        opacity: 1;
        visibility: visible;
        z-index: 1;
    }

    .header-main-menu-container ul > li:hover > ul {
        all: unset;
    }

    .header-main-menu-container ul > li > ul > li {
        padding: 0 10px;
        align-items: flex-start;
        min-height: 35px;
        line-height: 35px;
        margin-bottom: 0;
        border-bottom: 0 none;
    }

    .header-main-menu-container ul > li > ul > li > a {
        font-size: var(--font-size-22);
    }

    .header-language-select-container {
        display: none;
    }

    .mobile-header-main-menu-language-select {
        display: flex;
        flex-direction: row;
        width: 100%;
    }

    .mobile-header-main-menu-language-select a {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 40px;
        width: 40px;
        border-radius: 20px;
        box-shadow: 0 0 20px rgba(0, 0, 0, .1);
    }

    .mobile-header-main-menu-language-select a img {
        height: 30px;
        width: 30px;
        border-radius: 15px;
        opacity: 0.5;
        object-fit: cover;
    }

    .mobile-header-main-menu-language-select a.gt-current-lang img {
        opacity: 1;
    }


    .mobile-menu-pancake-container {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 55px;
        width: 55px;
        background-color: var(--background-color-white);
        border-radius: 30px;
        margin-left: 10px;
        box-shadow: 0 0 20px rgba( 0, 0, 0, .1);
        z-index: 500;
    }

    .mobile-menu-pancake-container .icon-menu {
        --gap: 5px;
        --height-bar: 2.5px;
        --pos-y-bar-one: 0;
        --pos-y-bar-three: 0;
        --scale-bar: 1;
        --rotate-bar-one: 0;
        --rotate-bar-three: 0;
        width: 25px;
        display: flex;
        flex-direction: column;
        gap: var(--gap);
        cursor: pointer;
        position: relative;
    }

    .mobile-menu-pancake-container .bar {
        position: relative;
        height: var(--height-bar);
        width: 100%;
        border-radius: .5rem;
        background-color: var(--default-font-color);
    }

    .mobile-menu-pancake-container .bar--1 {
        top: var(--pos-y-bar-one);
        transform: rotate(var(--rotate-bar-one));
        transition: top 200ms 100ms, transform 100ms;
    }

    .mobile-menu-pancake-container .bar--2 {
        transform: scaleX(var(--scale-bar));
        transition: transform 150ms 100ms;
    }

    .mobile-menu-pancake-container .bar--3 {
        bottom: var(--pos-y-bar-three);
        transform: rotate(var(--rotate-bar-three));
        transition: bottom 200ms 100ms, transform 100ms;
    }

    .mobile-menu-pancake-container .check-icon:checked + .icon-menu > .bar--1 {
        transition: top 200ms, transform 200ms 100ms;
    }

    .mobile-menu-pancake-container .check-icon:checked + .icon-menu > .bar--3 {
        transition: bottom 200ms, transform 200ms 100ms;
    }

    .mobile-menu-pancake-container .check-icon:checked + .icon-menu {
        --pos-y-bar-one: calc(var(--gap) + var(--height-bar));
        --pos-y-bar-three: calc(var(--gap) + var(--height-bar));
        --scale-bar: 0;
        --rotate-bar-one: 45deg;
        --rotate-bar-three: -45deg;
    }

    

    /* ---- FOOTER ---- */
    #footer-wrapper {
        padding: 35px;
    }

    #footer-wrapper .footer-quick-links-container {
        margin-bottom: 5rem;
    }

    #footer-wrapper .footer-quick-links-container ul {
        columns: 1;
        column-gap: 2rem;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #footer-wrapper .footer-socialme-contactinfo-socialme-container {
        flex: 0 0 100%;
        margin-bottom: 5rem;
    }

    #footer-wrapper .footer-socialme-contactinfo-address-container {
        flex: 0 0 50%;
    }

    #footer-wrapper .footer-socialme-contactinfo-contact-container {
        justify-content: flex-end;
        flex: 0 0 50%;
        padding-left: 8%;
    }

    #sub-footer-wrapper .sub-footer-content-container {
        font-size: var(--font-size-16) ;
        padding-left: 0;
        flex: 0 0 100%;
        flex-direction: row;
        justify-content: center;
        padding: 0 70px;
    }

    #sub-footer-wrapper .sub-footer-content-container br {
        margin-bottom: 1rem;
    }

    #sub-footer-wrapper .sub-footer-content-container a,
    #sub-footer-wrapper .sub-footer-content-container span {
        display: flex;
    }

    #sub-footer-wrapper .sub-footer-footermenu-container {
        text-align: right;
        padding-right: 0;
        flex: 0 0 100%;
        padding: 0 70px;
    }

    #sub-footer-wrapper .sub-footer-footermenu-container ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        list-style: none;
        justify-content: space-between;
        padding: 0;
        margin: 15px 0;
    }

    #sub-footer-wrapper .sub-footer-footermenu-container ul li {
        margin-bottom: 15px;
    }
}


/* ---- TABLET - LAMDSCAPE ---- */
@media only screen and (min-width: 768px) and (max-width: 1200px) and (orientation: landscape) {
    /* ---- HEADER ---- */
    #header-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        height: auto;
        width: 100%;
        padding: 20px 0;
        z-index: 1000;
    }

    .header-container {
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        height: 55px;
        width: auto;
        border-radius: 40px;
        background-color: transparent;
        box-shadow: none;
    }

    .header-logo-container {
        position: relative;
        display: flex;
        flex-direction: row;
        flex: 0 1 30%;
        height: 100%;
        z-index: 1200;
    }

    .header-logo-container img {
        height: 55px;
    }

    .header-main-menu-container {
        position: fixed;
        pointer-events: none;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        flex: 0 1 100%;
        min-width: 100%;
        max-height: 100vh;
        padding: 105px 70px 70px 70px;
        border-radius: 0 0 35px 35px;
        opacity: 0;
        overflow-y: auto;
        z-index: -100;
        background-color: var(--default-header-background-color);
    }

     .header-main-menu-container.opened-menu {
        pointer-events: all;
        opacity: 1;
        z-index: 10;
    }

    .header-main-menu-container ul {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        list-style: none;
        height: 100%;
        flex: 0 1 100%;
        align-items: flex-start;
        padding: 0;
        margin: 0;
    }

    .header-main-menu-container ul > li {
        text-align: left;
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 1px solid var(--default-border-color);
        width: 100%;
    }

    .header-main-menu-container ul > li > a {
        position: relative;
        font-family: var(--font-family-metropolis-semi-bold);
        font-size: var(--font-size-36);
        font-weight: 500;
        color: var(--default-font-color);
        text-decoration: none;
    }

    .header-main-menu-container ul > li > a:before {
        display: none;
    }

    .header-main-menu-container ul > li > ul {
        position: relative;
        top: inherit;
        left: inherit;
        transform: inherit;
        height: auto;
        width: max-content;
        padding: 10px;
        border-radius: 0;
        box-shadow: none;
        isolation: inherit;
        opacity: 1;
        visibility: visible;
        z-index: 1;
    }

    .header-main-menu-container ul > li:hover > ul {
        all: unset;
    }

    .header-main-menu-container ul > li > ul > li {
        padding: 0 10px;
        align-items: flex-start;
        min-height: 35px;
        line-height: 35px;
        margin-bottom: 0;
        border-bottom: 0 none;
    }

    .header-main-menu-container ul > li > ul > li > a {
        font-size: var(--font-size-22);
    }

    .header-language-select-container {
        display: none;
    }

    .mobile-header-main-menu-language-select {
        display: flex;
        flex-direction: row;
        width: 100%;
    }

    .mobile-header-main-menu-language-select a {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 40px;
        width: 40px;
        border-radius: 20px;
        box-shadow: 0 0 20px rgba(0, 0, 0, .1);
    }

    .mobile-header-main-menu-language-select a img {
        height: 30px;
        width: 30px;
        border-radius: 15px;
        opacity: 0.5;
        object-fit: cover;
    }

    .mobile-header-main-menu-language-select a.gt-current-lang img {
        opacity: 1;
    }


    .mobile-menu-pancake-container {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 55px;
        width: 55px;
        background-color: var(--background-color-white);
        border-radius: 30px;
        margin-left: 10px;
        box-shadow: 0 0 20px rgba( 0, 0, 0, .1);
        z-index: 500;
    }

    .mobile-menu-pancake-container .icon-menu {
        --gap: 5px;
        --height-bar: 2.5px;
        --pos-y-bar-one: 0;
        --pos-y-bar-three: 0;
        --scale-bar: 1;
        --rotate-bar-one: 0;
        --rotate-bar-three: 0;
        width: 25px;
        display: flex;
        flex-direction: column;
        gap: var(--gap);
        cursor: pointer;
        position: relative;
    }

    .mobile-menu-pancake-container .bar {
        position: relative;
        height: var(--height-bar);
        width: 100%;
        border-radius: .5rem;
        background-color: var(--default-font-color);
    }

    .mobile-menu-pancake-container .bar--1 {
        top: var(--pos-y-bar-one);
        transform: rotate(var(--rotate-bar-one));
        transition: top 200ms 100ms, transform 100ms;
    }

    .mobile-menu-pancake-container .bar--2 {
        transform: scaleX(var(--scale-bar));
        transition: transform 150ms 100ms;
    }

    .mobile-menu-pancake-container .bar--3 {
        bottom: var(--pos-y-bar-three);
        transform: rotate(var(--rotate-bar-three));
        transition: bottom 200ms 100ms, transform 100ms;
    }

    .mobile-menu-pancake-container .check-icon:checked + .icon-menu > .bar--1 {
        transition: top 200ms, transform 200ms 100ms;
    }

    .mobile-menu-pancake-container .check-icon:checked + .icon-menu > .bar--3 {
        transition: bottom 200ms, transform 200ms 100ms;
    }

    .mobile-menu-pancake-container .check-icon:checked + .icon-menu {
        --pos-y-bar-one: calc(var(--gap) + var(--height-bar));
        --pos-y-bar-three: calc(var(--gap) + var(--height-bar));
        --scale-bar: 0;
        --rotate-bar-one: 45deg;
        --rotate-bar-three: -45deg;
    }

    #sub-footer-wrapper .sub-footer-content-container {
        font-size: var(--font-size-16) ;
        padding-left: 0;
        flex: 0 0 100%;
        flex-direction: row;
        justify-content: center;
        padding: 0 70px;
    }

    #sub-footer-wrapper .sub-footer-content-container br {
        margin-bottom: 1rem;
    }

    #sub-footer-wrapper .sub-footer-content-container a,
    #sub-footer-wrapper .sub-footer-content-container span {
        display: flex;
    }

    #sub-footer-wrapper .sub-footer-footermenu-container {
        text-align: right;
        padding-right: 0;
        flex: 0 0 100%;
        padding: 0 70px;
    }

    #sub-footer-wrapper .sub-footer-footermenu-container ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        list-style: none;
        justify-content: space-between;
        padding: 0;
        margin: 15px 0;
    }

    #sub-footer-wrapper .sub-footer-footermenu-container ul li {
        margin-bottom: 15px;
    }
}