.menu-dropdown {
  cursor: pointer;
  width: min-content;
  justify-self: right;
  display: flex;
  justify-content: center;
  background-color: #E07D26;
  height: 100%;
}
.menu-dropdown img {
  margin-right: 18px;
  margin-left: 18px;
  width: 28px;
  justify-self: center;
}
.menu-dropdown-content {
  display: none;
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.menu {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  background-color: #3E8CAE;;
}
.menu-dropdown-content .left-side {
  display: flex;
  justify-content: center;
  width: 20%;
  min-width: 100px;
  background: url(../img/menu-background.svg) no-repeat;
  background-size: cover;
  background-position-x: -150px;
  position: relative;
}
.menu-dropdown-content .left-side .menu_logo:after {
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  z-index: 9999;
  content: "";
  background: url(../img/logo/gallup-white-logo.svg) no-repeat center;
  background-size: contain;
  width: 50%;
  height: 10%;
}
@media only screen and (max-width: 991px){
  .menu-dropdown-content .left-side .menu_logo:after {
    content: "";
    background: url(../img/logo/gallup-small-logo-blue.svg) no-repeat center;
    background-size: contain;
    width: 35px;
    height: 28px;
  }
}
@media only screen and (min-width: 992px) {
  .menu-dropdown-content .left-side {
    width: 100%;
  }
}

.menu-dropdown-content .right-side .menu_container {
  display:flex;
  flex-direction: column;
  width: 100%;
  height: 90%;
  justify-content: space-around;
}

.menu-dropdown-content .right-side span.nav-item {
  color: #FFFFFF;
  font-size: 1.4rem;
  display: flex;
}
.menu-dropdown-content .right-side span.nav-item span{
  color: #FFFFFF;
  font-size: 1.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
  display: inline-block;
  height: 100%;
}
@media only screen and (min-width: 992px){
  .menu-dropdown-content .right-side.two-times span.nav-item span{
    max-width: 250px;
  }
  .menu-dropdown-content .right-side.three-times span.nav-item span{
    max-width: 170px;
  }
  @media only screen and (min-width: 1200px) {
    .menu-dropdown-content .right-side.two-times span.nav-item span{
      max-width: 330px;
    }
    .menu-dropdown-content .right-side.three-times span.nav-item span{
      max-width: 230px;
    }
    @media only screen and (min-width: 1600px) {
      .menu-dropdown-content .right-side.two-times span.nav-item span{
        max-width: 400px;
      }
      .menu-dropdown-content .right-side.three-times span.nav-item span{
        max-width: 300px;
      }
    }
  }
}
.menu-dropdown-content .right-side{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
}
.menu-dropdown-content .right-side .menu-dropdown-close{
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 40px;
  height: 40px;
  width: 40px;
}
.menu-dropdown-content .right-side li {
  margin: 10px 0;
  max-width: 100%;

}
.menu-dropdown-content .right-side ul.active li {
  max-width: 100%;
}
.menu-dropdown-content .right-side .menu_item {
  position: relative;
}
.menu-dropdown-content .right-side .menu_sub_item{
  visibility: hidden;
  position: absolute;
  top: 0px;
  left: 50%;
  opacity: 0;
  will-change: left;
  transition: left .25s ease-in;
}
.menu-dropdown-content .right-side .menu_sub_sub_item{
  visibility: hidden;
  position: absolute;
  opacity: 0;
  top: 0px;
  left: 50%;
}

img.expand-menu{
  height: 0px;
  width: 0px;
}
@media only screen and (min-width: 992px) {
  .menu-dropdown-content .right-side li ul.active {
    visibility: visible;
    opacity: 1;
  }
  .menu-dropdown-content .right-side.transition img{
    transition: opacity .5s ease-in;
  }
  img.expand-menu{
    height: 27px;
    width: 27px;
    align-self: center;
    opacity: 1;
  }

  img.expand-sub-menu{
    height: 25px;
    width: 25px;
    align-self: center;
    opacity: 1;
  }
}
.menu-dropdown-content .transition{
  transition: width .25s ease-in;
}

@keyframes pop-in {
  0% {
    transform: scale(0.1, 0.1);
    left: 70%;
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes pop-in-2 {
  0% {
      transform: scale(0,0);
  }
  49%{
    transform: scale(0,0);
  }
  50% {
    transform: scale(0.2, 0.2);
  }
  100% {
    transform: scale(1, 1);
  }
}
@media only screen and (min-width: 992px) {
  .menu-dropdown-content .left-side.two-times {
    width: 50%;
  }
  .menu-dropdown-content .right-side.two-times .menu_item{
    padding: 0;
  }
  .menu-dropdown-content .right-side.two-times .menu_item li {
    width: 50%;
  }
  .menu-dropdown-content .right-side.two-times .menu_sub_item {
    padding: 0;
    width: 50%;
    animation: pop-in;
    animation-duration: .25s;
    animation-timing-function: linear;

  }
  .menu-dropdown-content .right-side.two-times .menu_sub_item li {
    width: 100%;
  }
}
@media only screen and (min-width: 992px) {
  .menu-dropdown-content .left-side.three-times {
    width: 33%;
  }
  .menu-dropdown-content .right-side.three-times .menu_item li {
    width: 33%;
  }
  .menu-dropdown-content .right-side.three-times .menu_sub_item li {
    width: 33%;
  }
  .menu-dropdown-content .right-side.three-times .menu_sub_item {
    left: 33%;
    width: 66%;
  }
  .menu-dropdown-content .right-side.three-times .menu_sub_sub_item {
    width: 50%;
    animation: pop-in-2;
    animation-duration: .5s;
    animation-timing-function: linear;
  }
  .menu-dropdown-content .right-side.three-times .menu_sub_sub_item li {
    width: 66%
  }
}
.inactive .list_item_container .link{
  opacity: 0.4;
}
.inactive .sub_list_item_container .sublink{
  opacity: 0.4;
}
p.bullet {
  padding-right: 10px;
  color: #314667;
}
.menu-dropdown-content .right-side .link:hover {
  cursor: pointer;
}

.menu-dropdown-content .right-side .sublink:hover {
  cursor: pointer;
}
.right-side ul {
  list-style: none;
  padding: 0;
}
.right-side {
  box-sizing: border-box;
  padding: 25px;
  padding-right: 50px;
  padding-left: 100px;
}
@media only screen and (max-width: 991px){
  .right-side{
    padding: 25px;
    padding-left: 25px;
  }
}
.list_item_container {
  display:flex;
  justify-content: space-between;
  padding: 0;
}
.sub_list_item_container{
  display:flex;
  justify-content: space-between;
  padding: 0;
}

.menu-dropdown-content .right-side.two-times .expand-menu {
  visibility: hidden;
  opacity: 0;
}
.menu-dropdown-content .right-side.three-times .expand-sub-menu {
  visibility: hidden;
  opacity: 0;
}
.link {
  display:flex;
  flex-direction: row;
  align-items: center;
}
.sublink{
  display:flex;
  flex-direction: row;
  align-items: center;
}
.subsublink{
  display:flex;
  flex-direction: row;
  align-items: center;
}
@media only screen and (min-width: 992px) {
  .menu-dropdown-content .right-side .link:hover  .nav-item span{
    color: #ffffff;
  }
  .menu-dropdown-content .right-side .inactive .link:hover  .nav-item span{
    color: #314667;
    font-weight: bold;
  }
  .menu-dropdown-content .right-side .link:hover  .bullet{
    color: #314667;
    font-weight: bold;
  }
  .menu-dropdown-content .right-side .inactive .link:hover  .bullet{
    color: #314667;
  }
  .menu-dropdown-content .right-side .sublink:hover  .nav-item span{
    color: #ffffff;
  }
  .menu-dropdown-content .right-side .inactive .sublink:hover  .nav-item span{
    color: #314667;
    font-weight: bold;
  }
  .menu-dropdown-content .right-side .sublink:hover  .bullet{
    color: #ffffff;
  }
  .menu-dropdown-content .right-side .inactive .sublink:hover  .bullet{
    color: #314667;
    font-weight: bold;
  }
  .menu-dropdown-content .right-side .subsublink:hover  .nav-item span{
    color: #ffffff;
  }
  .menu-dropdown-content .right-side .subsublink:hover  .bullet{
    color: #314667;
    font-weight: bold;
  }
  .link .nav-item{
    position: relative;
  }
  .sublink .nav-item{
    position: relative;
  }
  .subsublink .nav-item{
    position: relative;
  }
  .link .nav-item:hover:before{
    content: "";
    position: absolute;
    width: 50%;
    height: 1px;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #FFFFFF;
  }
  @keyframes slide-out {
    0% {
      left:0;
      opacity:1;
    }
    90%{
      opacity: 1;
    }
    100% {
      width: 10%;
      left: 30vw;
      opacity: 0;
    }
  }
  @keyframes slide-out-2 {
    0% {
      left:0;
      opacity:1;
    }
    90%{
      opacity: 1;
    }
    100% {
      width: 10%;
      left: 25vw;
      opacity: 0;
    }
  }
  @keyframes slide-back-in {
    0% {
      width: 10%;
      left: 30vw;
      opacity: 0;
    }
    90%{
      opacity: 1;
    }
    100% {
      left:0;
      opacity:1;
}
  }
  @keyframes slide-back-in-2 {
    0% {
      width: 10%;
      left: 25vw;
      opacity: 0;
    }
    90%{
      opacity: 1;
    }
    100% {
      left:0;
      opacity:1;
    }
  }
  .slide-back-in .link .nav-item:before{
    content: "";
    position: absolute;
    width: 50%;
    height: 1px;
    bottom: 0;
    animation: slide-back-in;
    overflow: visible;
    animation-duration: .25s;
    opacity: 0;
    border-bottom: 1px solid #FFFFFF;
  }
  .active .link .nav-item:before{
    content: "";
    position: absolute;
    width: 50%;
    height: 1px;
    bottom: 0;
    animation: slide-out;
    overflow: visible;
    animation-duration: .25s;
    opacity: 0;
    border-bottom: 1px solid #FFFFFF;
    left:100%;
  }
  .menu-dropdown-content .right-side .active .link  .nav-item span{
    color: #ffffff;
  }
  .menu-dropdown-content .right-side .active .link .bullet{
    color: #314667;
    font-weight: bold;
  }
  .active .active .sublink .nav-item:before{
    content: "";
    position: absolute;
    width: 50%;
    height: 1px;
    bottom: 0;
    animation: slide-out-2;
    overflow: visible;
    animation-duration: .25s;
    opacity: 0;
    border-bottom: 1px solid #FFFFFF;
  }

  .slide-back-in  .sublink .nav-item:before{
    content: "";
    position: absolute;
    width: 50%;
    height: 1px;
    bottom: 0;
    animation: slide-back-in-2;
    overflow: visible;
    animation-duration: .25s;
    opacity: 0;
    border-bottom: 1px solid #FFFFFF;
  }
  .menu-dropdown-content .right-side .active .active .sublink  .nav-item span{
    color: #ffffff;
  }
  .menu-dropdown-content .right-side .active .active .sublink .bullet{
    color: #314667;
    font-weight: bold;
  }
  .list_item_container:hover{
    cursor: pointer;
  }
  .sub_list_item_container:hover{
    cursor: pointer;
  }
  .menu-dropdown-content .right-side .list_item_container:hover .nav-item span{
    color: #ffffff;
  }
  .menu-dropdown-content .right-side .inactive > .list_item_container:hover .nav-item span{
    color: #ffffff;
  }
  .menu-dropdown-content .right-side .sub_list_item_container:hover .nav-item span{
    color: #ffffff;
  }
  .menu-dropdown-content .right-side .inactive > .sub_list_item_container:hover .nav-item span{
    color: #ffffff;
  }
  .menu-dropdown-content .right-side .list_item_container:hover .bullet{
    color: #314667;
    font-weight: bold;
  }
  .menu-dropdown-content .right-side .inactive > .list_item_container:hover .bullet{
    color: #314667;
    font-weight: bold;
  }
  .menu-dropdown-content .right-side .sub_list_item_container:hover .bullet{
    color: #314667;
    font-weight: bold;
  }
  .menu-dropdown-content .right-side .inactive > .sub_list_item_container:hover .bullet{
    color: #314667;
    font-weight: bold;
  }
  .list_item_container:hover .nav-item:before{
    content: "";
    position: absolute;
    width: 50%;
    height: 1px;
    bottom: 0;
    left: 0;
    opacity: 1;
    border-bottom: 1px solid #FFFFFF;
  }
  .inactive .list_item_container:hover .nav-item:before{
    border-bottom: 0px solid #FFFFFF;
  }
  .list_item_container.active:hover .nav-item:before{
    content: "";
    position: absolute;
    width: 50%;
    height: 1px;
    bottom: 0;
    left: 0;
    opacity: 0;
    border-bottom: 1px solid #FFFFFF;
  }
  .sub_list_item_container:hover .nav-item:before{
    content: "";
    position: absolute;
    width: 50%;
    height: 1px;
    bottom: 0;
    left: 0;
    opacity: 1;
    border-bottom: 1px solid #FFFFFF;
  }
  .inactive .sub_list_item_container:hover .nav-item:before{
    border-bottom: 0px solid #FFFFFF;
  }
  .sublink .nav-item:hover:before{
    content: "";
    position: absolute;
    width: 50%;
    height: 1px;
    bottom: 0;
    left: 0;
    opacity: 1;
    border-bottom: 1px solid #FFFFFF;
  }
  .subsublink .nav-item:hover:before{
    content: "";
    position: absolute;
    width: 50%;
    height: 1px;
    bottom: 0;
    left: 0;
    opacity: 1;
    border-bottom: 1px solid #FFFFFF;
  }
  .link.nested.active{

  }
  .link.nested.active .bullet{
    color: #314667;
  }
  .link.nested.active .nav-item{
    color: #314667;
    position: relative;
  }
  .link.nested.active .nav-item:before{
    content: "";
    position: absolute;
    width: 50%;
    height: 1px;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #FFFFFF;
  }
  .sublink.nested.active{

  }
  .sublink.nested.active .bullet{
    color: #314667;
  }
  .sublink.nested.active .nav-item{
    color: #ffffff;
    position: relative;
  }
  .sublink.nested.active .nav-item:before{
    content: "";
    position: absolute;
    width: 50%;
    height: 1px;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #FFFFFF;
  }
}
ul.menu_item p {
  margin: 0;
}