#menu {
      position: relative;
      font-family: "Roboto Condensed";
        font-size: 1rem;
        line-height: 2.8em;
      margin-top: -.3em;
      padding-bottom: 0;
  }

  #menu:after {
        content: "";
      display: block;
        position: absolute;
        left: 0;
        right: 0;
      bottom: 0;
        width: 100%;
      height: 1px;
      opacity: .85;
      margin: 6px 0;
      background: #fff;
  }

  #menu-contents {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	color: #fff;
}

#menu a {
    color: inherit;
    display: block;
}

#menu-contents > li > a {
    text-transform: uppercase;
	font-weight: 400;
    padding: 0 1.5em;
    border-radius: 6px 6px 0 0;
    box-shadow: 0 6em 1em rgba(0, 128, 255, 0);
    transition: color 0s linear 0s, border-color .17s linear 0s, transform .17s linear 0s, box-shadow 1s linear 0s;
}

#menu-contents > li > a:before,
#menu-contents > li > a:after {
	position: absolute;
	content: "";
	display: block;
    background: none;
	width: 2.5em;
	height: 2.5em;
	z-index: 5;
	left: auto;
	right: auto;
	top: auto;
	bottom: auto;
	opacity: 1;
}

#menu-contents > li > a:before {
    display: none;
    bottom: 0;
	left: -2.5em;
	background-image:
        radial-gradient(circle at 0 0, rgba(0,0,0,0) 2.95em, #fff 3em),
        radial-gradient(circle at 100% 0, rgba(0,0,0,0) 2.45em, transparent 3em),
        radial-gradient(circle at 100% 100%, rgba(0,0,0,0) 2.45em, transparent 3em),
        radial-gradient(circle at 0 100%, rgba(0,0,0,0) 2.45em, transparent 3em);
}

#menu-contents > li > a:after {
    display: none;
	bottom: 0;
	right: -2.5em;
    background-image:
        radial-gradient(circle at 0 0, rgba(0,0,0,0) 2.45em, transparent 3em),
        radial-gradient(circle at 100% 0, rgba(0,0,0,0) 2.95em, #fff 3em),
        radial-gradient(circle at 100% 100%, rgba(0,0,0,0) 2.45em, transparent 3em),
        radial-gradient(circle at 0 100%, rgba(0,0,0,0) 2.45em, transparent 3em);
}

#menu-contents > li > a.open {
    background: #fff;
    color: #333333;
    box-shadow: 0 .5em 1.5em rgba(255, 255, 255, .5);
    transition: color .17s linear 0s, border-color .17s linear 0s, transform .17s linear 0s, box-shadow .17s linear 0s;
}


#menu-contents > li.nosub > a:hover {
	background: #fff;
    color: #333333;
    box-shadow: 0 .5em 1.5em rgba(255, 255, 255, .5);
    border-radius: 4px;
    transition: color .17s linear 0s, border-color .17s linear 0s, transform .17s linear 0s, box-shadow .17s linear 0s;
}



#menu-contents > li:not(:first-child) > a.open:before,
#menu-contents > li:not(:last-child) > a.open:after {
    display: block;
}

#menu-contents > li:first-child > a.open {
    border-left: 1px solid #c7c7c7;
}

#menu-contents > li:last-child > a.open {
    border-right: 1px solid #c7c7c7;
}

#submenu {
    display: none;
    position: absolute;
	top: 100%;
	padding: 0;
	left: 0;
	right: 0;
    line-height: 1.8em;
    flex-flow: row nowrap;
    width: 100%;
    color: #666666;
    padding-bottom: 0;
}

#submenu.open {
    display: flex;
}

#submenu .description {
    width: 100%;
    font-size: .95em;
    line-height: 1.15em;
    padding: 0 2em;
    color: #346c6c;
	font-weight: bold;
	text-shadow: 1px 1px #fff;
    width: 100%;
}

#submenu .description a {
    text-decoration: none;
    border-bottom: 2px solid #d7d7d7;
}


#submenu > ul > li {
      position: relative;
	display: none;
      padding: .5em 1em;
      background: rgba(255,255,255,.95);
      background-position: center center;
      background-repeat: no-repeat;
      border: 1px solid transparent;
      border-radius: 0 0 6px 6px;
      border-top-width: 0;
      box-shadow: 0 4px 16px transparent;
	z-index: 7;
	overflow: hidden;
}

#submenu > ul > li.open {
    display: block;
    border-color: #c7c7c7;
    box-shadow: 0 14px 16px rgba(0,0,0,.15);
    overflow: visible;
}

#submenu li ul {
    color: #0022ad;
}

#submenu .level0 {
    margin: 0 auto;
    flex: 1 0 100%;
}

#submenu .level0 > li {
	padding: 1em 1.5em 1.5em 1.5em;
}

#submenu .level0 > [data-submenu="ypiresies"] {
	padding: 1em 0 0 0;
}

[data-submenu="ypiresies"] > h3 {
    padding: 0 1em;
}

#submenu .level1 {
	display: flex;
	flex-flow: row wrap;
	gap: 20px;
}

#submenu .level1 > ul {
    position: relative;
    display: flex;
	flex-flow: row wrap;
	gap: 1.5em;
	font-size: 1.3rem;
    margin: 1em 0;
    width: 100%;
}

#submenu .level1 > ul > li {
	color: #0055bd;
	padding: 0.5em 0 0 0;
	font-weight: 400;
    flex: 1 0 8em;
    text-align: center;
    line-height: 2em;
}

#submenu .level2 {
    position: relative;
    padding: 1em 0;
    line-height: 2.4em;
    width: 100%;
}

#submenu [data-menu] {
    position: relative;
    cursor: pointer;
}

#submenu [data-menu].open {
	color: #6badff;
}

#submenu [data-menu].open:after {
    background-color: #6badff;
}

#submenu [data-menu].ypostiriksi,
#submenu .level2 a.ypostiriksi,
#submenu [data-menu].ypostiriksi.open {
    color: #07A99C;
}

#submenu .level2 a.ypostiriksi:hover {
    color: #6cbfb8;
}

#submenu [data-menu].ypostiriksi.open {
    opacity: .5;
}

#submenu a.ypostiriksi:after,
#submenu .ypostiriksi[data-menu]:after,
#submenu [data-menu].ypostiriksi.open:after {
    background-color: #07A99C;
}

#submenu .level1 [data-submenu] {
	display: none;
    flex-flow: row wrap;
    gap: 4px;
    width: 100%;
	justify-content: space-around;
}

#submenu .level2 [data-submenu] > li {
    padding: 0 10px;
}

#submenu .level1 [data-submenu].open {
	display: flex;
}

#submenu .level2 {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
	text-align: center;
}

#submenu .level2 a {
    display: inline-block;
	line-height: 1.3em;
	font-size: 1.1em;
	letter-spacing: .05em;
}

#submenu ul ~ .level2:after {
	content: "";
	position: absolute;
	top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #007bc2 0%, #06a99b 100%);
    opacity: 0.15;
    pointer-events: none;
    z-index: -1;
}

#submenu .level1 li:hover {
    cursor: pointer;
    color: #6badff;
}

#submenu-backdrop {
    z-index: 6;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#submenu-backdrop img {
    opacity: .5;
}

#submenu h3 {
    font-size: 1.6rem;
}

#submenu h4 {
    font-size: 1.35rem;
}

#submenu h3,
#submenu h4 {
    width: 100%;
    font-weight: 400;
    letter-spacing: .05px;
    color: #777777;
    line-height: 1.5em;
    margin: .5em 0 .5em 0;
    transition: letter-spacing .17s linear 0s;
}

#submenu .open h3,
#submenu .open h4 {
    letter-spacing: .4px;
}

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

    #submenu {
        font-size: 1rem;
        line-height: 1.25;
        position: relative;
    }

    #submenu li {
        word-break: break-all;
        max-width: 100%;
    }

    #submenu .level2 {
        display: none;
    }

    #submenu .level1 > ul > li {
        flex: 1 0 auto;

    }

    #submenu .open h3, #submenu .open h4 {
        display: none;
    }

}

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


        #menu:after {
            display: none;
        }

        #menu-contents {
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            gap: 10px;
            padding-bottom: 1em;
        }

        #menu-contents > li > a {
            padding: 0 1em;
            box-shadow: 0 0em 1.5em rgb(255 255 255 / 0%);
        }

        #menu-contents > li > a.open {
            border-radius: 6px;
            box-shadow: 0 0em 1.5em rgb(255 255 255 / 50%);
        }

        #menu-contents > li:not(:first-child) > a.open:before,
        #menu-contents > li:not(:last-child) > a.open:after {
            display: none;
        }

        #menu {
            position: relative;
            display: none;
            font-size: 1.3rem;
            line-height: 1.8em;
        }


        #menu.open {
            display: block;
        }

        #menu a.open {
            border-color: transparent;
            margin-top: 0;
        }

        #menu a:after {
            display: none;
        }

        #submenu .description {
            padding: 1em 1.5em;
            margin: 0 auto;
        }

        #submenu .level1 > ul {
            padding: 0;
            flex-flow: column nowrap;
            border: 0;
            padding: 0 1em 0 1em;
            line-height: 1.5em;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            font-weight: 400;
            font-size: 1em;
            color: #666666;
        }

        #submenu .level1 > ul:after {
            content: "";
            display: block;
            width: 100%;
            background: #6badff;
            height: 4px;
            margin-top: 1em;
        }

        #submenu .level0 {
            margin: 0;
            padding: 0;
        }

        #submenu .level0 > li {
            padding: 0.5em .5em 1.5em .5em;
            background: rgba(255, 255, 255, .95);
        }

        #submenu .level1 {
            flex-direction: column;
            gap: 0;
        }

        #submenu .level2 > ul > li {
            padding: .5em 0;
        }

        #submenu > ul > li.open {
            box-shadow: 0 16px 16px rgb(0 0 0 / 80%)
        }

        #submenu h3, #submenu h4 {
            margin-top: 0;
            margin-bottom: 0;
            text-align: center;
        }

        .fixed #menu {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            background: linear-gradient(180deg, black, #007bc2);
            padding-top: 2.5em;
            z-index: 9;
        }
}