@font-face {
    font-family: side_nav_font;
    src: url(../fonts/neue-haas/NeueHaasGroteskText-Medium.woff2);
}

@font-face {
    font-family: nav_links;
    src: url(../fonts/neue-haas/NeueHaasDisplay-Medium.woff2);
}

body {
    --nav-height: 70px;
}


nav {
    width: 100%;
    height: var(--nav-height);
    top: 0;
    left: 0;
    margin: 0;
    background: rgb(139, 170, 230);
    display: flex;
    align-items: center;
    box-shadow: 0 0 10px (0, 0, 0, 0.3);
    transition: 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.logo_icon {
    position: absolute;
    top: 15px;
    left: 0;
    display: inline-block;
    width: 62px;
    height: 40px;
    cursor: pointer;
    margin-left: 20px;
}

.logo_icon * {
    fill: white;
}

.line1,
.line2,
.line3,
.line4,
.line5,
.line6 {
    width: 38px;
    height: 6px;
    transition: 0.4s;
    background-color: white;
}

.line1 {
    transform: translate(-10px, 14px) rotate(-70deg);
}

.line2 {
    transform: translate(3px, 8px) rotate(70deg);
}

.line3 {
    width: 44px;
    transform: translate(21px, 2px) rotate(-45deg);
}

.line4 {
    width: 44px;
    transform: translate(23px, -4px) rotate(45deg);
}

.line5 {
    width: 35px;
    transform: translate(27px, -10px);
}

.line6 {
    width: 36px;
    transform: translate(26px, -16px) rotate(90deg);
}

.logo_change div {
    background-color: rgb(0, 0, 255);
    transition: 0.5s ease-out;
}


.logo_change .line1 {
    transform: translate(2px, 14px) rotate(70deg);
}

.logo_change .line2 {
    transform: translate(-10px, 8px) rotate(-70deg);
}

.logo_change .line3 {
    width: 35px;
    transform: translate(27px, 2px) rotate(0deg);
}

.logo_change .line4 {
    width: 36px;
    transform: translate(26px, -4px) rotate(90deg);
}

.logo_change .line5 {
    width: 44px;
    transform: translate(23px, -10px) rotate(45deg)
}

.logo_change .line6 {
    width: 44px;
    transform: translate(20px, -16px) rotate(135deg)
}

.logo img {
    width: 100px;
}

#logo-A-serif {
    visibility: hidden;
}


nav ul {
    width: 100%;
    text-align: right;
    margin-right: 100px;
}

nav ul li {
    display: inline-block;
    list-style: none;
    margin: 10px 20px;
}

nav ul li a {
    display: flex;
    color: #fff;
    text-decoration: none;
    font-family: nav_links;
    font-size: 14px;
    transition: 0.2s ease-out;

}

nav ul li:hover a {
    color: rgb(0, 0, 255);
}

.arrow {
    margin-left: 8px;
    box-sizing: border-box;
    margin-top: 3px;
    height: 6px;
    width: 6px;
    border-style: solid;
    border-width: 0px 2px 2px 0px;
    transform: rotate(45deg);
}

.events-hover div {
    margin-top: 2px;
    height: 8px;
    width: 8px;
    border-width: 0px 3px 3px 0px;
}

.events-hover {
    color: rgb(0, 0, 255);
}


#events-submenu-nav,
#association-submenu-nav {
    position: fixed;
    top: 0;
    height: var(--nav-height);
    cursor: pointer;
    background-color: transparent;
}

#events-submenu-wrap,
#association-submenu-wrap {
    position: fixed;
    visibility: hidden;
    top: var(--nav-height);
    border-color: rgb(139, 170, 230);
    border-width: 2px 0px 0px 0px;
    border-style: solid;
    background-color: rgba(139, 170, 230, 1);
    z-index: 1;
    overflow: hidden;
}

.events-submenu-wrap-container,
.association-submenu-wrap-container {
    margin: 5%;
    height: 100%;
}

.events-submenu-wrap-container ul,
.association-submenu-wrap-container ul {
    list-style-type: none;
}

.events-submenu-wrap-container ul li,
.association-submenu-wrap-container ul li {
    padding: 10px;

}

.events-submenu-wrap-container ul li a,
.association-submenu-wrap-container ul li a {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    font-family: nav_links;
    font-size: 14px;
    transition: transform 0.4s;

}

.events-submenu-wrap-container ul li:hover a,
.association-submenu-wrap-container ul li:hover a {
    border-color: rgb(0, 0, 255);
    border-width: 2px 3px 4px 2px;
    border-style: solid;
    border-bottom-right-radius: 15%;
    padding: 5px;
    transform: rotate(2deg);
}

.menu {
    --menu-icon-width: 30px;
    position: fixed;
    top: 20px;
    right: 0;
    display: inline-block;
    width: var(--menu-icon-width);
    cursor: pointer;
    margin-right: 35px;
    z-index: 3;
}

.bar1,
.bar2,
.bar3 {
    width: var(--menu-icon-width);
    height: 3px;
    background-color: white;
    margin: 5px 0;
    transition: 0.4s;
}

.menu:hover div {
    background-color: rgb(0, 0, 255);
}

.change:hover div {
    background-color: rgb(0, 0, 255);
}

.menuScroll div {
    background-color: black;
}

/* Rotate first bar */
.change .bar1 {
    transform: translate(0, 8px) rotate(-45deg);
}

/* Fade out the second bar */
.change .bar2 {
    opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
    transform: translate(0, -8px) rotate(45deg);
}

.sub-menu-overlap {
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    height: 100vh;
    width: 100vw;
    visibility: hidden;
    overflow: hidden;
    background-color: rgba(0, 0, 0, .7);
    transition: all 0.2s ease-in, width 0s, height 0s;
}

.sub-menu-overlap.open-menu {
    visibility: visible;
}

.sub-menu-wrap {
    position: absolute;
    z-index: 2;
    background-color: rgb(139, 170, 230);
    width: 0;
    height: 100vh;
    right: 0;
    transition: width 0.2s linear;
    overflow: hidden;
}

.sub-menu-wrap.sub-menu-transition {
    width: 40vw;
}

.sub-menu {
    background-color: rgb(139, 170, 230);
    padding: 20px;
    margin: var(--nav-height) 10px;

}

.sub-menu p {
    padding: 5px;
}

.sub-menu-link {
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white;
    margin: 12px 0;
    font-family: side_nav_font;
}

.sub-menu-link p {
    font-size: 22px;
}


.sub-menu-events {
    position: absolute;
    right: 30px;
    visibility: hidden;
}

.sub-menu-events ul {
    list-style-type: none;
}

.sub-menu-events ul li {
    padding: 10px;

}

.sub-menu-events ul li a {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    font-size: 22px;
    transition: transform 0.6s;
    font-family: side_nav_font;
}


.toggle-side-submenu p {
    color: rgb(0, 0, 255);
    box-shadow: 2px 2px 5px 1px black;
    transform: rotate(1deg) translate(3px, 3px);

}

.toggle-side-submenu {
    opacity: 0.7;
}

.sub-menu a:hover {
    color: rgb(0, 0, 255);
    opacity: 0.7;
}

.sub-menu-events a:hover {
    transform: skew(10deg, 1deg);
}

.sub-menu a:hover p {
    box-shadow: 2px 2px 5px 1px black;
    transform: rotate(1deg) translate(3px, 3px);
}


@media screen and (max-width: 1400px) {
    .sub-menu-wrap.sub-menu-transition {
        width: 45vw;
    }

}

@media screen and (max-width: 1200px) {
    nav ul {
        margin-right: 96px;
    }


    nav ul li {
        margin: 10px 16px;
    }

    .arrow {
        margin-left: 7px;
    }

    .sub-menu-wrap.sub-menu-transition {
        width: 50vw;
    }

}

@media screen and (max-width: 1024px) {
    nav ul {
        margin-right: 90px;
    }


    nav ul li {
        margin: 10px 12px;
    }

    .sub-menu-wrap.sub-menu-transition {
        width: 55vw;
    }

    .arrow {
        margin-left: 6px;
    }

}

@media screen and (max-width: 980px) {
    nav ul {
        margin-right: 84px;
    }

    nav ul li {
        margin: 10px 4px;
    }

    .sub-menu-wrap.sub-menu-transition {
        width: 65vw;
    }
}

@media screen and (max-width: 912px) {
    nav ul {
        margin-right: 80px;
    }

    nav ul li {
        margin: 10px 2px;
    }

    .sub-menu-wrap.sub-menu-transition {
        width: 70vw;
    }

    .arrow {
        margin-left: 5px;
    }
}

@media screen and (max-width: 820px) {
    nav ul {
        visibility: hidden;
    }

    .sub-menu-wrap.sub-menu-transition {
        width: 75vw;
    }
}

@media screen and (max-width: 600px) {
    .sub-menu-wrap.sub-menu-transition {
        width: 100vw;
    }

    .sub-menu-events {
        right: 20px;
    }
}

@media screen and (max-width: 450px) {
    .sub-menu-wrap.sub-menu-transition {
        width: 100vw;
    }

    .sub-menu-events {
        right: 10px;
    }
}

@media screen and (max-width: 400px) {
    .sub-menu-wrap.sub-menu-transition {
        width: 100vw;
    }

    .sub-menu-events {
        right: 0px;
    }
}



@media screen and (max-height: 800px) {
    .sub-menu p {
        padding: 5px;
    }

    .sub-menu-link {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .sub-menu-link p {
        font-size: 20px;
    }


    .sub-menu-events ul li a {
        font-size: 20px;
    }
}

@media screen and (max-height: 600px) {
    .sub-menu p {
        padding: 2px;
    }

    .sub-menu-link {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .sub-menu-link p {
        font-size: 16px;
    }

    .sub-menu-events ul li a {
        font-size: 16px;
    }
}

@media screen and (max-height: 450px) {
    .sub-menu p {
        padding: 2px;
    }

    .sub-menu-link {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .sub-menu-link p {
        font-size: 16px;
    }

    .sub-menu-events ul li a {
        font-size: 16px;
    }

    .sub-menu {
        padding: 10px;
        margin: 0px 10px;

    }
}