﻿/* -------------------------------------------- 
top menu and modal menu
-------------------------------------------- */
#sci-top-menu {
}

  #sci-top-menu nav {
    display: flex;
    align-items: center;
    width: 100%;
    height: 69px;
  }

  #sci-top-menu .row {
    margin-bottom: 0px;
  }


  #sci-top-menu ul {
    margin: 0;
    padding: 0;
  }

    #sci-top-menu ul li.head-item {
      
    }

      #sci-top-menu ul li.head-item > a {
        
      }

      #sci-top-menu ul li.head-item:before {
        font-family: 'FontAwesome';
        content: '\f111';
        float: left;
        padding-top: 1em;
      }

      #sci-top-menu ul li.head-item:before {
        color: var(--sci-light-blue);
      }

      #sci-top-menu ul li.head-item:hover:before {
        color: var(--sci-grey);
      }

    #sci-top-menu ul.market-data-links li.head-item:before {
      color: var(--sci-issue-orange);
    }

    #sci-top-menu .market-data-links-container {
      border-top: 1px solid var(--sci-line-light);
    }


/*
    #sci-top-menu ul.main-menu .head-item:before {
      content: "\25E6";      
    } */

#tm:checked + .main-menu {
  display: block;
}

#sci-top-menu input[type="checkbox"],
#sci-top-menu ul span.drop-icon,
#modalmenu input[type="checkbox"] {
  display: none;
}

#sci-top-menu li,
#toggle-menu {
  border-width: 0 0 1px;
}

#sci-top-menu .sub-menu {
  background-color: var(--sci-very-light-grey);
  margin: 0 1em;
}

  #sci-top-menu .sub-menu li:last-child {
    border-width: 0;
  }

#sci-top-menu li,
#toggle-menu,
#sci-top-menu a {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--sci-grey);
  font-size: var(--sci-font-size-body);
}

#sci-top-menu,
#toggle-menu {
  background-color: #fff;
}

  #toggle-menu,
  #sci-top-menu a {
    padding: 1em 1.5em;
  }

  #sci-top-menu a {
    transition: all .125s ease-in-out;
    -webkit-transition: all .125s ease-in-out;
  }

    #sci-top-menu a:hover {
      /*color: var(--sci-blue);*/
    }

  #sci-top-menu .sub-menu, #modalmenu .sub-menu {
    display: none;
  }

  #sci-top-menu input[type="checkbox"]:checked + .sub-menu,
  #modalmenu input[type="checkbox"]:checked + .sub-menu {
    display: block;
  }

  #sci-top-menu .sub-menu a:hover {
    background-color: var(--sci-light-grey);
  }


  #sci-top-menu label,  
  #modalmenu label {
    display: inline-block;
    font-weight: 400;
  }

  #toggle-menu .drop-icon,
  #sci-top-menu li label.drop-icon {
    position: absolute;
    right: 1.5em;
    top: 1.25em;
  }

#modalmenu li label.drop-icon {
  display: block;
}

#sci-top-menu label.drop-icon,
#toggle-menu span.drop-icon,
#modalmenu label.drop-icon {
  border-radius: 50%;
  width: 1em;
  height: 1em;
  text-align: center;
}

#sci-top-menu .drop-icon,
#modalmenu .drop-icon {
  line-height: 1;
}

#sci-top-menu .sub-menu li {  
  width: auto;
  border-bottom: 1px solid var(--sci-line-light);
  min-height: 41px;
}

#sci-top-menu .main-menu {
  display: block;
}

#toggle-menu,
#sci-top-menu label.drop-icon {
  display: none;
}

#sci-top-menu ul span.drop-icon {
  display: inline-block;
}

#sci-top-menu li {
  float: left;
}

#sci-top-menu .sub-menu li {
  float: none;
}

#sci-top-menu .sub-menu {
  /*border: 1px solid var(--sci-grey);*/
  border-bottom: 1px solid var(--sci-line-light);
  box-shadow: 7px 7px 14px var(--sci-light-grey);
  margin: 0;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 350px;
  z-index: 3000;
}

  #sci-top-menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
  }

#sci-top-menu li:hover > input[type="checkbox"] + .sub-menu {
  display: block;
}

#modalmenu li > input[type="checkbox"]:checked + .sub-menu {
  display: block;
}

/* modal */
.modalmenu-menu {
}

a.modalmenu-menu {
  color: #000;
  text-decoration: none;
  font-size: 48px;
  font-weight: 200;
}


.modalmenuoverlay {
  background: rgba(0, 0, 0, 0.8);
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  z-index: -1;
  display: none;
}

  .modalmenuoverlay:target {
    display: block;
    opacity: 1;
    pointer-events: auto;
    z-index: 1000;
  }

  .modalmenuoverlay .modalmenu {
    color: #fff;
    height: 100%;
    text-align: left;
    font-size: var(--sci-font-size-h2);
    -webkit-overflow-scrolling: touch;
    display: flex;
    align-items: center;
    justify-content: center;
  }

    .modalmenuoverlay .modalmenu > ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
      overflow-y: scroll;
      max-height: 85vh;
    }

      .modalmenuoverlay .modalmenu > ul li a {
        color: #fff;
        text-decoration: none;
      }

      .modalmenuoverlay .modalmenu > ul li:before {
        font-family: 'FontAwesome';
        content: '\f111\00a0\00a0';
        color: var(--sci-light-blue);
      }

      .modalmenuoverlay .modalmenu > ul li.register:before {
        color: var(--sci-orange);
      }


    .modalmenuoverlay .modalmenu > iframe, .modalmenuoverlay .modalmenu > div {
      border: none;
      width: 100%;
      height: 100%;
    }

  .modalmenuoverlay .close {
    color: white;
    font-size: 80px;
    padding: 0 16px 0 16px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: 0;
    z-index: 1001;
  }

/* mobile */
@media only screen and (max-width: 1439px) {

  #sci-top-menu nav {
    
  }

  #sci-top-menu li {
    width: auto;
    font-size: 10pt;
  }

  #sci-top-menu a {
    padding: 1em 1em;
    font-size: 10pt;
  }
}


@media only screen and (max-width: 1024px) {
  
  #sci-top-menu .main-menu {
    display: none;
  }


}

