/* HEADER */
#header{ min-height: 69px; }

#header .wrapper{
    max-width:1795px;
    width:100%;
    margin:auto;
    padding: 0 17px;
    display: flex;
    flex-direction:row;
    flex-wrap:nowrap;
    position: relative;
}
    #header #navigation {
        padding: 10px 12px;
        justify-content: space-between;
    }
    #header #navigation > *{flex:unset;}
    /* logo */
    #header #branding{
        max-width:643px;
        text-align:left;
    }
        #header #branding img{
            max-height:83px;
            width: auto;
        }

        #header #branding #logo{display: none;}
        #header #branding #mobile-logo{max-height:45px;}
            #header #logo-title {
                text-indent: -99999999px;
                position: absolute;
            }
            
/*==========NORMAL MENU============*/
    nav#menu{display: none;}
    nav#menu ul li a:hover {
        color: var(--text);
        background: var(--link-dark);
        padding-top: 10px;
        padding-bottom: 10px;
    }

/*===========MOBILE MENU=========== */
    #mobile-navigation li {
        color:inherit;
        padding:20px 30px;
        cursor: pointer;
    }
	#mobile-nav li:hover a {
		color: inherit;
	}

    #header #mobile-navigation {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }
    #nav-toggle {
        display: flex;
        flex-direction: column;
        height: 40px;
        justify-content: space-evenly;
        width: 30px;
        float: right;
    }
        #nav-toggle * {border: 2px solid var(--link);border-radius:4px;background:var(--link);}

    nav#mobile-nav {
        display: block;
        position: fixed;
        right:-150%;
        transition:right 1s;
        background: var(--border-pale);
        z-index: 10;
        height: 100vh;
        min-width: 30vw;
        text-align: left;
        padding: 20px;
        top: 0;
        overflow: auto;
        font-size: 16px;
        box-shadow: 0 0 5px black;
    }
        #mobile-nav.visible {
            right: 0;
            transition:right 1s;
        }
    #mobile-nav > a {
        position: absolute;
        top: 0;
        right: 10px;
        font-size: 20px;
        color: red;
        font-weight: bolder;
    }
    #mobile-nav li:hover {
        background:goldenrod;
        color:var(--text);
    }
    #mobile-nav li a {
        padding: 10px;
    }
        #mobile-nav li::after {
            content: "";
            width: 90%;
            position: relative;
            display: block;
            border-top: 1px solid var(--text-lighter);
        }
        #header #mobile-navigation ul li a {
            text-transform: uppercase;
        }
    nav#mobile-nav span {
        font-weight: bold;
        cursor: pointer;
        color: inherit;
        display: inline-block;
        text-align: left;
        width: 50px;
    }
    #header #mobile-navigation .nav-search { text-align:right;}
    #header #mobile-navigation .nav-search a {
        font-size: 24px;
        line-height: 30px;
        color: var(--text);
    }
    #header #mobile-navigation .nav-search .widget form {
        justify-content: end;
    }
    #header #mobile-navigation .search-field {
        width: 150px;
    }
    #header #mobile-navigation .search-form label {
        border-radius: 150px 0 0 150px;
        overflow: hidden;
    }

/*======SEARCH BAR======= */
    #header .nav-search {
        position: relative;
    }
    #header .nav-search a{
            font-size: 24px;
            line-height: 30px;
            color: var(--link);
        }
    #header .nav-search .widget {
        position: absolute;
        right: 34px;
        top: 0;
        transition:width 0.4s;
        width:0;
        overflow: hidden;
    }
        #header .nav-search.active  .widget {width:267px;}
        #header .nav-search .widget form {
            display: flex;
            flex-wrap: nowrap;
            width: 100%;
            border-radius: 15px;
            overflow: hidden;
        }
        #header .nav-search .widget .search-field {
            background: white;
            padding: 5px 10px;
            color: var(--bg-dark);
            border:none;
        }
            #header .nav-search .widget .search-field:focus-visible, #header .nav-search.active .widget .search-field:focus {border:none;}
        #header .nav-search .widget .search-submit {
            background: var(--link);
            border: none;
            box-shadow: 0 0 4px black;
            margin: 0;
            color: var(--bg-dark);
            border-radius: 0 25px 25px 0;
        }
        /* /search bar */

/*=========NORMAL SUB MENU====== */
nav#menu ul li .sub-menu {
	opacity: 0;
	position: absolute;
	background: var(--border-pale);
	z-index: 9;
	min-height: 114px;
	text-align: left;
	width: 100%;
	left: 0;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	display: none;
	box-shadow: 0 -1px 6px var(--text);
	padding: 5px 10px;
}

    nav#menu ul li.menu-item-has-children:hover{background: var(--btn-bg-dark);}
    nav#menu ul li.menu-item-has-children:hover > .sub-menu {
        display: flex;
        animation:appear 0.1s linear 0s 1 forwards;
    }
    nav#menu ul.menu > li.menu-item-has-children:hover > .sub-menu::before {
        content: "ΜΕΝΟΥ";
        display: block;
        font-size: 26px;
        padding: 10px 20px;
        width: 100%;
        text-shadow: 5px 4px 0px var(--link);
    }
    nav#menu ul li .sub-menu li.menu-item-has-children:hover a{color:var(--text-lighter)}
	  	nav#menu ul li .sub-menu li.menu-item-has-children:hover li a {color: var(--btn-bg-dark);}
    nav#menu ul li .sub-menu li a {
        color: var(--text);
        width: max-content;
        padding:20px 10px;
    }
        nav#menu ul li .sub-menu li a:hover {
            background: none;
            color: var(--link-dark);
        }
        nav#menu ul li.menu-item-has-children > a::after {
            content: "";
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid;
            position: relative;
            top: 14px;
            left: 5px;
        }
/*======MOBILE NAVIGATION SUB MENU==========*/
#mobile-navigation .sub-menu li a{position: relative;overflow: hidden;}
#mobile-navigation .sub-menu {
	color: white;
	height: 100vh;
	position: fixed;
	top: 0;
	right: -100%;
	width: 600px;
	background: var(--text);
	transition: right 0.5s;
	z-index: 99;
	max-width: 100%;
}

    #header #mobile-navigation ul li.open > .sub-menu{right:0;}
#mobile-navigation .sub-menu li a{color:inherit;padding:0;}




/*===Default Page===*/
.header.has-thumbnail {
	min-height: 300px;
	display: flex;
	align-items: center;
	padding: 30px;
	background-size: cover;
	background-position: center;
	position:relative;
	background-attachment: fixed;
}
.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.63);
	z-index: 0;
}

/* slider */
#header.has_slider .slider-section {
	margin-bottom: -350px;
    padding:0;
    background: transparent;
}


/* SM */
@media only screen and (min-width:450px){
    #header #navigation {padding: 10px 50px;}
}
/* MD */
@media only screen and (min-width:800px){
    body.home #header #navigation {padding: 22px 50px;}
    #header #branding #logo{display: none;}
    #header #branding #mobile-logo{max-height:50px;}
    #header.has_slider .slider-section {
        padding:0 17px;
    }
}
/* LG */
@media only screen and (min-width:1200px){
    #header #branding #logo{display: inline;}
    #header #branding #mobile-logo{display: none;}
    #header #mobile-navigation{display: none;}
    /* navigation menu*/
    nav#menu {
        display: flex;
        align-items: center;
        justify-content: start;
    }
    nav#menu li{display: inline-block;}
        nav#menu li.current_page_item a, nav#menu ul li a:hover{color:var(--link);}
    nav#menu ul li a {
        display: inline-block;
        color: white;
        text-transform: uppercase;
        padding: 10px 20px;
        font-size: 14px;
        font-weight: normal;
        transition: background 0.1s;
    }
        nav#menu ul li a:hover{color:var(--text);}    

    }
/* XLG */
@media only screen and (min-width:1650px){
    #header #branding{width:643px;text-align:center;}
    #header #navigation #menu{flex:1;}
}