.skip-link {
  display: block;
  position: absolute;
  top: -80px;
  width: 100%;
  padding: $xs-space;
  background-color: $orange;
  color: #fff;
  text-align: center;
  font-family: "Lato Bold";
  font-size: 1.5rem;
  transition: top 0.3s ease-in-out;
  z-index: 10;
  &:focus {
    top: 0;
  }
  &:hover {
    color: #fff;
  }
}

header {
  &.main-header {
    width: 100%;
    border-bottom: 1px solid #e5e5e5;
    position: relative;

    .main-header-menu {
      z-index: 99999;
      position: absolute;
      margin: $sm-space;
      left: 0;
      right: 0;
      top: 0;
      min-height: 500px;
      background: white;
      box-shadow: $box-shadow;

      .main-header-close {
        padding: 25px;

        .close-btn {
          opacity: 1;
          transition: all 0.3s ease;
          &:hover{
            opacity: 0.6;
          }
          i{
            font-size: 32px;
            line-height: 32px;
          }
        }
      }

      nav {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        padding: 0 70px 0 70px;
        @include media-breakpoint-down(sm) {
          flex-wrap: wrap;
        }
        ul {
          padding-left: 0;
          list-style: none;
          width: 100%;
          padding-bottom: 100px;
          margin: 0px;
          li {
            min-height: 50px;
            a {
              padding: $xs-space;
              display: flex;
              align-items: center;
              height: 100%;
              color: $dark-grey;
              i {
                font-size: 18px;
                line-height: 18px;
              }
              &.subsite-btn{
                background-color: #0D58A3 !important;
                color: white;
                span{
                  color: white;
                }
              }
              &.active {
                background-color: #ecf6fc;
                font-family: "Lato Bold";
                span {
                  font-family: "Lato Bold";
                }
              }
              &:hover {
                text-decoration: none;
                background-color: #ecf6fc;
                span {
                  text-decoration: underline;
                }
              }
            }
          }
        }
      }
    }
    .wrapper {
      padding: 21px 50px;
      width: 100%;
      transition: padding 0.3s ease;
      @include media-breakpoint-down(md) {
        padding: 15px $xs-space;
      }
      .m-link {
        text-decoration: none !important;
        &:hover {
          i {
            text-decoration: none !important;
          }
          span {
            text-decoration: underline;
          }
        }
        i {
          text-decoration: none !important;
        }
        span {
          font-size: 18px;
          line-height: 22px;
          font-family: "Lato Bold";
          font-weight: inherit;
          margin-left: 5px;
          @include media-breakpoint-down(sm) {
            display: none;
          }
        }
        &.m-hamburger {
          i {
            font-size: 32px;
            line-height: 32px;

            @include media-breakpoint-down(md) {
              font-size: 28px;
              line-height: 28px;
            }

            @include media-breakpoint-down(xs) {
              font-size: 28px;
              line-height: 28px;
            }
          }
        }

        &.m-tool {
          i {
            font-size: 25px;
            line-height: 25px;

            @include media-breakpoint-down(md) {
              font-size: 24px;
              line-height: 24px;
            }

            @include media-breakpoint-down(xs) {
              font-size: 24px;
              line-height: 24px;
            }
          }
        }

        &.m-user {
          i {
            font-size: 32px;
            line-height: 32px;

            @include media-breakpoint-down(md) {
              font-size: 28px;
              line-height: 28px;
            }
          }
        }

        &.m-globe {
          i {
            font-size: 25px;
            line-height: 25px;

            @include media-breakpoint-down(md) {
              font-size: 24px;
              line-height: 24px;
            }
          }
        }

        &.m-search {
          i {
            font-size: 32px;
            line-height: 32px;

            @include media-breakpoint-down(md) {
              font-size: 28px;
              line-height: 28px;
            }
          }
        }
      }
      .m-left {
        width: 250px;
      }
      .m-center {
        img {
          width: 170px;
          height: auto;
        }
      }
      .m-right {
        width: 250px;
      }
    }
  }
}

// header.main-header {
//     height: inherit;
//     box-shadow: 0 1px 0 #e5e5e5;
//     // margin-bottom: 50px;
//     position: relative;
//     #fav-navigation {
//         background: $dark-grey;
//         height: 50px;
//         display: flex;
//         align-items: center;
//         .my-courses {
//             .material-icons {
//                 color: #fff;
//             }
//         }
//         .favorites {
//             .material-icons {
//                 color: $orange;
//             }
//         }
//         &>ul {
//             margin: 0;
//             padding: 0;
//             list-style: none;
//             width: 100%;
//             text-align: right;
//             &>li {
//                 margin: 0;
//                 padding: 0;
//                 display: inline-block;
//                 margin-right: 35px;
//                 &:last-child {
//                     margin-right: 50px;
//                 }
//                 &>a {
//                     font-size: 16px;
//                     color: #fff;
//                     font-weight: bold;
//                     display: flex;
//                     .material-icons {
//                         margin-right: 10px;
//                         margin-top: 1px;
//                         text-decoration: none !important;
//                     }
//                     &:hover {
//                         .material-icons {
//                             text-decoration: none;
//                         }
//                     }
//                 }
//             }
//         }
//         #fav-list {
//             padding-top: 30px;
//             padding-bottom: 30px;
//             box-shadow: $box-shadow;
//             .fav-head {
//                 font-size: 18px;
//                 font-weight: bold;
//                 padding-left: 30px;
//                 margin-bottom: 30px;
//             }
//             .fav-close {
//                 position: absolute;
//                 right: 30px;
//                 top: 33px;
//                 width: 22px;
//                 height: 22px;
//                 opacity: 1;
//                 &:hover {
//                     opacity: 0.8;
//                 }
//                 &:before, &:after {
//                     position: absolute;
//                     left: 10px;
//                     content: ' ';
//                     height: 22px;
//                     width: 2px;
//                     background-color: #404040;
//                 }
//                 &:before {
//                     transform: rotate(45deg);
//                 }
//                 &:after {
//                     transform: rotate(-45deg);
//                 }
//             }
//             position: absolute;
//             right: 0;
//             top: 0;
//             background: #fff;
//             z-index: 999;
//             text-align: left;
//             ul {
//                 margin: 0;
//                 padding: 0;
//                 li {
//                     list-style: none;
//                     border-bottom: 1px solid $light-grey;
//                     padding: 10px 30px;
//                     a {
//                         color: #333;
//                     }
//                 }
//             }
//         }
//     }
//     button.btn-menu {
//         border: 0;
//         background-color: #fff;
//         margin-right: 3px;

//         span {
//             margin-right: 5px;
//             vertical-align: middle;
//             line-height: 1px;
//         }

//         &:hover {
//             cursor: pointer;
//         }

//         &.toggle-menu {
//             margin-left: 50px;
//         }
//     }

//     a.link-menu {
//         span {
//             margin-right: 5px;
//             vertical-align: middle;
//             line-height: 1px;
//             text-decoration: none !important;
//             display: inline-block !important;
//         }
//     }
//     #main-navigation__container {
//         height: 125px;
//         display: flex;
//         align-items: center;
//         justify-content: space-between;
//         position: relative;
//         #logo {
//             position: absolute;
//             top: 50%;
//             left: 50%;
//             transform: translateY(-50%) translateX(-50%);
//         }
//         nav#main-navigation {
//             position: relative;
//             display: flex;
//             align-items: center;
//             height: 100%;

//             ul {
//                 list-style-type: none;
//             }

//             div.menu-container {
//                 position: absolute;
//                 top: 100px;
//                 left: 10px;
//                 right: 10px;
//                 padding: 70px;
//                 background-color: #fff;
//                 box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.15);
//                 z-index: 1;

//                 .menu-options {
//                     .sub-site-info a {
//                         display: inline-block;
//                         margin-bottom: $sm-space;
//                     }

//                     a {
//                         color: $dark-grey;

//                         span {
//                             margin-left: -7px;
//                         }
//                     }
//                 }
//             }

//             div#menu-list-container {
//                 display: flex;

//                 .menu-list {
//                     margin: 0;
//                     padding: 0;
//                     width: 25%;
//                 }

//                 .menu-item {
//                     &.has-children>a:after {
//                         content: 'chevron_right';
//                         font-family: 'Material Icons';
//                         float: right;
//                     }
//                 }

//                 .menu-link {
//                     display: block;
//                     padding: $xs-space;
//                     color: $dark-grey;

//                     &.active {
//                         background-color: $light-blue;
//                     }

//                     &:hover {
//                         background-color: $light-blue;
//                     }
//                 }
//             }
//         }
//     }

//     &>a {
//         position: absolute;
//         top: 50%;
//         left: 50%;
//         transform: translate(-50%, -50%);
//     }

//     nav#secondary-navigation {

//         ul {
//             margin: 0;
//             padding: 0;
//             list-style-type: none;

//             li {
//                 display: inline-block;

//                 a {
//                     margin-right: 50px;
//                     color: $dark-grey;
//                 }
//             }
//         }
//     }

//     .user-menu {
//         display: inline-block;
//         width: 44px;
//         height: 44px;
//         color: #fff !important;
//         border-radius: 50%;
//         text-align: center;
//         line-height: 44px;

//         &.pink {
//             background-color: $user-pink;
//         }

//         &.purple {
//             background-color: $user-purple;
//         }

//         &.dark-green {
//             background-color: $user-dark-green;
//         }

//         &.dark-blue {
//             background-color: $user-dark-blue;
//         }

//         &.orange {
//             background-color: $user-orange;
//         }

//         &.light-blue {
//             background-color: $user-light-blue;
//         }

//         &.green {
//             background-color: $user-green;
//         }

//         &.red {
//             background-color: $user-red;
//         }

//         &:hover {
//             text-decoration: none;
//         }
//     }
// }