/* Navigation
---------------------------------------------
# Navigation Header
--------------------------------------------- */

/* Navigation
--------------------------------------------- */

@media (min-width: 1024px) {


    .site-header {
        position: fixed;
        top:10px;
        left: 20px;
        right: 20px;
        z-index: 9999;
    }

    .main-navigation {
        position: relative;
        max-width: 1540px;
        margin: 0 auto;
        padding: 0 20px;
        border-radius: 10px;
        box-shadow: 0 5px 5px -5px rgba(0,0,0,.5);
 

        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .main-navigation::before {
        content:"";
        position: absolute;
        top:0;
        right: 0;
        bottom: 0;
        left:0;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, .8);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }


    .main-navigation::after {
        content: "";
        position: absolute;
        top:0;
        right: 0;
        bottom: 0;
        left:0;
        border-radius: 10px;
        border: .5px solid rgba(215, 215, 215, .5);
    }





    .site-menu-mobile {
        display: none;
    }


    .site-branding {
        position: relative;
        max-width: 240px;
        display: flex;
        align-items: center;
        z-index: 1;
    }

    .site-branding img {
        position: relative;
        width: 100%;
        height: auto;

    }

    .site-branding a {
        position: absolute;
        top:0;
        left:0;
        bottom:0;
        right: 0;
        display: block;
    }



    .site-menu {
        position: relative;
        flex: 1 1 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        z-index: 1;
    }


    .site-menu-desktop {
        position: relative;
        flex: 1 1 auto;
    }

    ul.menu-header-primary-container {
        position: relative;
        list-style: none;
        display: flex;
        justify-content: space-between;
        margin: 0;
        padding: 0;
    }

    ul.menu-header-primary-container li {
        position: relative;
        flex: 1 1 auto;
    }

    ul.menu-header-primary-container li a {
        position: relative;
        display: block;
        min-height: 70px;
        text-decoration: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    ul.menu-header-primary-container li span {
        position: relative;
        font-family: 'Gotham Pro';
        color:rgba(35, 55, 72, 1);
        font-weight: 500;
        font-size: 16px;
        text-decoration: none;
        text-transform: uppercase;
    }

    .menu-header-primary-container li span::before {
        content: "";
        position: absolute;
        bottom:-5px;
        left:50%;
        width: 0;
        height: 2px;
        background-color: rgba(35, 55, 72, .8);
        transition-duration: .3s;
    }

    .menu-header-primary-container li:hover span::before {
        content: "";
        position: absolute;
        bottom:-5px;
        left:0;
        width: 100%;
        height: 2px;
        background-color: rgba(35, 55, 72, .9);
        transition-duration: .3s;
    }


    .site-menu-lang-switcher {
        position: relative;
        max-width: 64px;
        margin: auto;
    }

    .site-menu-lang-trigger {
        display:none;
    }

    .site-menu-lang-current {
        position: relative;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 6px 8px 4px 8px;
        border-radius: 5px 5px 5px 5px;
    }

    .site-menu-lang-current::before {
        content: "";
        position: absolute;
        top:0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 5px 5px 5px 5px;
        background-color: #ebebeb;
        border: 1px solid rgba(215, 215, 215, 1);
    }

    .site-menu-lang-switcher:hover .site-menu-lang-current {
        position: relative;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 6px 8px 4px 8px;
        border-radius: 5px 5px 0 0 !important;
        background-color: #ebebeb;
    }

    .site-menu-lang-current .site-menu-language-name {
        position: relative;
        font-family: 'Gotham Pro';
        color:rgba(35, 55, 72, 1);
        font-weight: 500;
        font-size: 15px;
        text-decoration: none;
        text-transform: uppercase;
        line-height: 1.2;
    }

    .site-menu-language-flag {
        position: relative;
    }


    .site-menu-lang-list {
        position: absolute;
        list-style: none;
        top: calc(100% - 5px);
        right: 0;
        left: 0;
        margin: 0;
        padding: 5px 0 0 0;
        border-radius: 0 0 5px 5px;

        display: none;
    }

    .site-menu-lang-list::before {
        content: "";
        position: absolute;
        top:0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 0 0 5px 5px;
        background-color: #ebebeb;
        border-right: 1px solid rgba(215, 215, 215, 1);
        border-bottom: 1px solid rgba(215, 215, 215, 1);
        border-left: 1px solid rgba(215, 215, 215, 1);
    }

    .site-menu-lang-switcher:hover > .site-menu-lang-list {
        display: block;
    }


    .site-menu-lang-item {
        position: relative;
        display: flex;
        align-items: center;
        gap:5px;
        padding: 5px 8px 5px 8px;     
    }

    .site-menu-lang-item .site-menu-language-name {
        font-family: 'Gotham Pro';
        color:rgba(35, 55, 72, 1);
        font-weight: 500;
        font-size: 15px;
        text-decoration: none;
        text-transform: uppercase;
        line-height: 1.2;
    }

    .site-menu-lang-item span {
        position: absolute;
        display: block;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        cursor: pointer;
    }


}



@media (min-width: 768px) and (max-width: 1023px) {


    .site-header {
        position: fixed;
        top:10px;
        left: 20px;
        right: 20px;
        z-index: 9999;
    }

    .main-navigation {
        position: relative;
        max-width: 1540px;
        margin: 0 auto;
        padding: 0 20px;
        border-radius: 10px;
        box-shadow: 0 5px 5px -5px rgba(0,0,0,.5);
 

        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .main-navigation::before {
        content:"";
        position: absolute;
        top:0;
        right: 0;
        bottom: 0;
        left:0;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, .8);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }


    .main-navigation::after {
        content: "";
        position: absolute;
        top:0;
        right: 0;
        bottom: 0;
        left:0;
        border-radius: 10px;
        border: .5px solid rgba(215, 215, 215, .5);
    }



    .site-menu-mobile {
        display: none;
    }



    .site-branding {
        grid-area:logo;
        position: relative;
        justify-self: start;
        align-self: center;
        width: 240px;
        height: 70px;
        display: flex;
        align-items: center;
        z-index: 1;
    }

    .site-branding img {
        position: relative;
        width: 100%;
        height: auto;
        z-index: 2;
    }

    .site-branding a {
        position: absolute;
        top:0;
        left:0;
        bottom:0;
        right: 0;
        z-index: 3;
        display: block;
        width: 100%;
        height: 100%;
    }




    .site-menu {
        position: relative;
        flex: 1 1 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        z-index: 1;
    }


    .site-menu-desktop {
        position: relative;
        flex: 1 1 auto;
    }

    ul.menu-header-primary-container {
        position: relative;
        list-style: none;
        display: flex;
        justify-content: space-between;
        margin: 0;
        padding: 0;
    }

    ul.menu-header-primary-container li {
        position: relative;
        flex: 1 1 auto;
    }

    ul.menu-header-primary-container li a {
        position: relative;
        display: block;
        min-height: 70px;
        text-decoration: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    ul.menu-header-primary-container li a span {
        position: relative;
        font-family: 'Gotham Pro';
        color:rgba(35, 55, 72, 1);
        font-weight: 500;
        font-size: 16px;
        text-decoration: none;
        text-transform: uppercase;
    }

    .menu-header-primary-container li a span::before {
        content: "";
        position: absolute;
        bottom:-5px;
        left:50%;
        width: 0;
        height: 2px;
        background-color: rgba(35, 55, 72, .8);
        transition-duration: .3s;
    }

    .menu-header-primary-container li:hover a span::before {
        content: "";
        position: absolute;
        bottom:-5px;
        left:0;
        width: 100%;
        height: 2px;
        background-color: rgba(35, 55, 72, .9);
        transition-duration: .3s;
    }

 

    .site-menu-lang-switcher {
        position: relative;
        max-width: 64px;
        margin: auto;
    }

    .site-menu-lang-current {
        position: relative;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 6px 8px 4px 8px;
        border-radius: 5px 5px 5px 5px;
    }

    .site-menu-lang-current::before {
        content: "";
        position: absolute;
        top:0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 5px 5px 5px 5px;
        background-color: #ebebeb;
        border: 1px solid rgba(215, 215, 215, 1);
    }

    .site-menu-lang-current .site-menu-language-name {
        position: relative;
        font-family: 'Gotham Pro';
        color:rgba(35, 55, 72, 1);
        font-weight: 500;
        font-size: 15px;
        text-decoration: none;
        text-transform: uppercase;
        line-height: 1.2;
    }

    .site-menu-language-flag {
        position: relative;
    }


    .site-menu-lang-trigger {
        position: absolute;
        top: -4px;
        left: -4px;
        right:-4px;
        bottom: -4px;
        display: block;
        cursor: pointer;
        opacity: 0;
    }

    .site-menu-lang-trigger:checked ~ .site-menu-lang-current {
        border-radius: 5px 5px 0 0 !important;
        background-color: #ebebeb;
    }


    .site-menu-lang-list {
        position: absolute;
        list-style: none;
        top: calc(100% - 5px);
        right: 0;
        left: 0;
        margin: 0;
        padding: 5px 0 0 0;
        border-radius: 0 0 5px 5px;

        display: none;
    }

    .site-menu-lang-trigger:checked ~ .site-menu-lang-list {
        display: block;
    }

    .site-menu-lang-list::before {
        content: "";
        position: absolute;
        top:0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 0 0 5px 5px;
        background-color: #ebebeb;
        border-right: 1px solid rgba(215, 215, 215, 1);
        border-bottom: 1px solid rgba(215, 215, 215, 1);
        border-left: 1px solid rgba(215, 215, 215, 1);
    }


    .site-menu-lang-item {
        position: relative;
        display: flex;
        align-items: center;
        gap:5px;
        padding: 6px 8px 6px 8px;   
    }

    .site-menu-lang-item .site-menu-language-name {
        font-family: 'Gotham Pro';
        color:rgba(35, 55, 72, 1);
        font-weight: 500;
        font-size: 15px;
        text-decoration: none;
        text-transform: uppercase;
        line-height: 1.2;
    }

    .site-menu-lang-item span {
        position: absolute;
        display: block;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        cursor: pointer;
    }



}



@media (max-width: 767px) {

    .site-header {
        position: fixed;
        top:10px;
        left: 20px;
        right: 20px;
        z-index: 9999;
    }

    @media (max-width: 480px) {
        .site-header {
            position: fixed;
            top:10px;
            left: 10px;
            right: 10px;
            z-index: 9999;
        }
    }

    .main-navigation {
        position: relative;
        display: grid;
		padding: 0 15px 0 10px;
        border-radius: 10px;
		grid-template-areas:
		"logo menu_mobile"
		"site_menu site_menu"
		;
		box-shadow: 0 5px 5px -5px rgba(0,0,0,.5);
    }

    .main-navigation::before {
        content:"";
        position: absolute;
        top:0;
        right: 0;
        bottom: 0;
        left:0;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, .8);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }


    .main-navigation::after {
        content: "";
        position: absolute;
        top:0;
        right: 0;
        bottom: 0;
        left:0;
        border-radius: 10px;
        border: .5px solid rgba(215, 215, 215, .5);
    }




    .site-branding {
        grid-area:logo;
        position: relative;
        justify-self: start;
        align-self: center;
        width: 200px;
        height: 58px;
        display: flex;
        align-items: center;
        z-index: 1;
    }

    .site-branding img {
        position: absolute;
        top:50%;
        left:0;
        transform: translateY(-50%);
        width: 100%;
        height: auto;
        z-index: 2;
    }

    .site-branding a {
        position: absolute;
        top:0;
        left:0;
        bottom:0;
        right: 0;
        z-index: 3;
        display: block;
        width: 100%;
        height: 100%;
    }

    .site-menu-mobile {
        grid-area:menu_mobile;
        align-self: center;
        justify-self: end;
        height: 70px;
        position: relative;
        width: 40px;
        height: 40px;
        transition-duration: .5s;
        z-index: 1;
    }

	.site-menu-mobile .icon {
		position: relative;
		transition-duration: 0.5s;
		position: absolute;
		height: 4px;
		width: 40px;
		top: calc(50% - 2px);
		background-color: #4B4B4B;
	}
	.site-menu-mobile .icon:before {
		transition-duration: 0.5s;
		position: absolute;
		width: 40px;
		height: 4px;
		background-color: #4B4B4B;
		content: "";
		top: -15px;
	}
	.site-menu-mobile .icon:after {
		transition-duration: 0.5s;
		position: absolute;
		width: 40px;
		height: 4px;
		background-color: #4B4B4B;
		content: "";
		top: 15px;
	}
	.site-menu-mobile.open .icon {
		transition-duration: 0.5s;
		background: transparent;
	}
	.site-menu-mobile.open .icon:before {
		transform: rotateZ(45deg) scaleX(1.25) translate(10px, 10px);
	}
	.site-menu-mobile.open .icon:after {
		transform: rotateZ(-45deg) scaleX(1.25) translate(9px, -9px);
	}
	.site-menu-mobile:hover {
		cursor: pointer;
	}

	.hide-menu-item {
		display:none !important;
	}



    .site-menu {
        grid-area:site_menu;
        display: flex;
        flex-flow: column nowrap;
        gap: 20px;
        padding: 0 0 20px 0;
        z-index: 1;
    }


    .site-menu-desktop {
        padding: 20px 0 0 0;
        width: 100%;
    }

    .menu-header-primary-container {
        list-style: none;
        display: flex;
        flex-flow: column nowrap;
        margin: 0;
        padding: 0;
    }

    .menu-header-primary-container li {
        flex: 1 1 auto;
        position: relative;
    }

    .menu-header-primary-container li a {
        min-height: 60px;
        position: relative;
        display: block;
        text-decoration: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .menu-header-primary-container li a::before {
        content:"";
        position: absolute;
        bottom: -1px;
        left:0;
        right: 0;
        height: 1px;
        background-color: #ddd;
    }


    .menu-header-primary-container li a span {
        font-family: 'Gotham Pro';
        color:rgba(35, 55, 72, 1);
        font-weight: 500;
        font-size: 16px;
        text-decoration: none;
        text-transform: uppercase;
    }





    .site-menu-lang-switcher {
        position: relative;
        max-width: 64px;
        margin: auto;
    }

    .site-menu-lang-current {
        position: relative;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 6px 8px 4px 8px;
        border-radius: 5px 5px 5px 5px;
    }

    .site-menu-lang-current::before {
        content: "";
        position: absolute;
        top:0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 5px 5px 5px 5px;
        background-color: #ebebeb;
        border: 1px solid rgba(215, 215, 215, 1);
    }

    .site-menu-lang-current .site-menu-language-name {
        position: relative;
        font-family: 'Gotham Pro';
        color:rgba(35, 55, 72, 1);
        font-weight: 500;
        font-size: 15px;
        text-decoration: none;
        text-transform: uppercase;
        line-height: 1.2;
    }

    .site-menu-language-flag {
        position: relative;
    }


    .site-menu-lang-trigger {
        position: absolute;
        top: -4px;
        left: -4px;
        right:-4px;
        bottom: -4px;
        display: block;
        cursor: pointer;
        opacity: 0;
    }

    .site-menu-lang-trigger:checked ~ .site-menu-lang-current {
        border-radius: 5px 5px 0 0 !important;
        background-color: #ebebeb;
    }


    .site-menu-lang-list {
        position: absolute;
        list-style: none;
        top: calc(100% - 5px);
        right: 0;
        left: 0;
        margin: 0;
        padding: 5px 0 0 0;
        border-radius: 0 0 5px 5px;

        display: none;
    }

    .site-menu-lang-trigger:checked ~ .site-menu-lang-list {
        display: block;
    }

    .site-menu-lang-list::before {
        content: "";
        position: absolute;
        top:0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 0 0 5px 5px;
        background-color: #ebebeb;
        border-right: 1px solid rgba(215, 215, 215, 1);
        border-bottom: 1px solid rgba(215, 215, 215, 1);
        border-left: 1px solid rgba(215, 215, 215, 1);
    }



    .site-menu-lang-item {
        position: relative;
        display: flex;
        align-items: center;
        gap:5px;
        padding: 8px 8px 6px 8px;    
    }

    .site-menu-lang-item .site-menu-language-name {
        font-family: 'Gotham Pro';
        color:rgba(35, 55, 72, 1);
        font-weight: 500;
        font-size: 15px;
        text-decoration: none;
        text-transform: uppercase;
        line-height: 1.2;
    }

    .site-menu-lang-item span {
        position: absolute;
        display: block;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        cursor: pointer;
    }


}