:root {
    --viewportHeight: 100vh;
    --marginTopConferenceMobile: 0px;
    --originalTopConferenceMobile: 0px;
    --topConferenceMobile: 0px;
    --finalTopConferenceMobile: 0px;
    --durationConferenceMobile: 0.5s;
}

.navbar {
    margin: 0;
    top: 0;
    position: sticky;
    width: 100%;
    background-color: #164064;
    z-index: 100;
    
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.navbar li {
    float: left;
}

.navbar a {
    display: block;
    font-size: 20px;
    color: #fff;
    text-align: center;
    padding: 24px 34px;
    text-decoration: none;
    transition: 0.3s;
    transform: translateY(0);
}

.navbar li a:hover {
    transform: translateY(10px);
    background-color: #fff;
    color: #164064;
}

.navbar .dropdown {
    float: left;
    overflow: hidden;
}

.navbar .dropdown-content {
    visibility: hidden;
    background-color: #4d9ba6;
    min-width: 160px;
    position: absolute;
    opacity: 0;
    transition: opacity 0.4s;
}

.navbar .dropdown-content a {
    display: block;
    float: none;
    padding: 12px 16px;
    transform: translateX(0px);
    transition: 0.3s
}

.navbar .dropdown-content a:hover {
    transform: translateX(10px);
    background-color: #fff;
    color: #164064;
}

.navbar .dropdown:hover .dropdown-btn {
    transform: translateY(10px);
    background-color: #fff;
    color: #164064;
    cursor: pointer;
}

.navbar .dropdown:hover .dropdown-content {
    visibility: visible;
    display: block;
    opacity: 1;
}

/* mobile */

.navbar .dropdown-mobile {
    float: left;
    overflow: hidden;
}

.navbar .dropdown-mobile-content {
    visibility: hidden;
    background-color: #4d9ba6;
    min-width: 160px;
    position: absolute;
    opacity: 0;
    transition: opacity 0.4s;
}

.navbar .dropdown-mobile-content a {
    display: block;
    float: none;
    padding: 12px 16px;
    transform: translateX(0px);
    transition: 0.3s
}

.navbar .dropdown-mobile-content a:hover {
    transform: translateX(10px);
    background-color: #fff;
    color: #164064;
}

.navbar .dropdown-mobile.active .dropdown-mobile-btn {
    transform: translateY(10px);
    background-color: #fff;
    color: #164064;
    cursor: pointer;
}

.navbar.mobile .dropdown-mobile.active .dropdown-mobile-content {
    visibility: visible;
    display: block;
    opacity: 1;
}

.navbar.mobile ul {
    max-width: 100vw;
    width: 100%;
    height: 50px;
}

.navbar.mobile .dropdown-mobile {
    float: right;
}

.navbar.mobile .dropdown-mobile-content a {
    display: block;
    float: none;
    padding: 12px 16px;
    transform: translateX(0px);
    transition: 0.3s;
}

.navbar.mobile .dropdown-mobile-content a:hover {
    transform: translateX(-10px);
    background-color: #fff;
    color: #164064;
}

.navbar.mobile .pullout {
    overflow: hidden;
}

.navbar.mobile .pullout-content {
    visibility: hidden;
    background-color: #177693;
    opacity: 0;
    min-width: 160px;
    position: absolute;
    transition: opacity 0.4s !important;
    transform: translate(calc(-100% + 0.4px), calc(-50% - 25px));
}

.navbar.mobile .pullout-content.conferences {
    transform: translate(calc(-100% + 0.4px), calc(-46% - 25px));
}

.navbar.mobile .pullout-content a {
    display: block;
    font-size: 15px;
    color: #fff;
    text-align: center;
    padding: 10px 8px;
    text-decoration: none;
    transition: 0.3s;
    transform: translateY(0);
}

.navbar.mobile .pullout-content a:hover {
    transform: translateY(10px);
    background-color: #fff;
    color: #164064;
}

.navbar .pullout:hover .pullout-btn {
    transform: translateX(-10px);
    background-color: #fff;
    color: #164064;
    cursor: pointer;
}

.mobile .dropdown-mobile-btn {
    padding-top: calc(25px - 19.5px);
    padding-bottom: calc(25px - 19.5px)
}

.navbar .pullout:hover .pullout-content {
    visibility: visible;
    display: block;
    opacity: 1;
}

.mobile .bar1, .mobile .bar2, .mobile .bar3 {
    width: 35px;
    height: 5px;
    background-color: #fff;
    margin: 6px 0;
    transition: 0.4s;
    margin-left: 30px;
    margin-right: 30px;
    position: relative;
    left: 40px;
}

.mobile .dropdown-mobile.active .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
    background-color: #164064;
}

.mobile .dropdown-mobile.active .bar2 {
    opacity: 0;
    background-color: #164064;
}

.mobile .dropdown-mobile.active .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
    background-color: #164064;
}

.navbar.mobile .pullout-content .conference-scroll {
    width: 100%;
    height: 30px;
    box-shadow: none;
    background-color: #84d3e8;
    display: block;
    content: "";
    border: 0;
    position: absolute;
}

#conferenceScrollUp {
    top: 0;
    z-index: 1;
}

#conferenceScrollDown {
    top: calc(var(--viewportHeight) - 30px + 1px);
    z-index: 1;
}

.triangle-bottom {
    position: relative;
    content: "";
    transform: translate(-50%, 50%);
    /* top: 50%; */
    left: 50%;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent;
}

.conference-list {
    overflow: hidden;
    padding: 0;
    margin: 0;
    margin-top: 28px;
    position: absolute;
    top: var(--topConferenceMobile);
    background-color: #177693;
    transition: top var(--durationConferenceMobile) linear !important;
}

.triangle-top {
    position: relative;
    content: "";
    transform: translate(-50%, -50%);
    /* top: 50%; */
    left: 50%;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: transparent transparent #fff transparent;
}

.invisible {
    display: none !important;
}

.navbar.mobile .pullout-content.conferences {
    margin-top: var(--marginTopConferenceMobile);
}