/* Mobile-First Header
  -------------------------------------------------------------- */
  @font-face {
      font-family: 'Gotham-Book-Regular';
      font-style: normal;
      font-display: swap;
      src: url(../fonts/ESPAlphaHeadlineTab-Bold.otf) format('opentype');
  }

  @font-face {
      font-family: 'Gotham-Book-Regular';
      font-style: normal;
      font-display: swap;
      src: url(../fonts/ESPAlphaHeadlineTab-Regular.otf) format('opentype');
  }

  header {
      width: 100%;
      height: 65px;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
      color: #ffffff;
      background-color: #0d0137;

  }

  header #logo {
      color: white;
      height: 45px;
      font-size: 1.6em;
      font-weight: 200;
      line-height: 45px;
      display: inline-block;
      float: none;
      margin: 0 auto;
      text-align: left;
      font-weight: 200;
      margin-left: 5%;

      position: relative;
      z-index: 999;
  }

  header nav {
      display: none;
      color: #ffffff;
      margin-right: 5%;
      font-family: 'Gotham-Book-Regular';
  }

  .nobtnstyledesktop {
      background: none;
      color: inherit;
      border: none;
      padding: 0;
      font: inherit;
      cursor: pointer;
      outline: inherit;
      font-weight: 900;
      font-family: 'Gotham-Book-Regular';
  }

  .nobtnstyledesktop:hover,
  .nobtnstyledesktop:focus {
      font-weight: 900;
      color: #ffbf12;
      border-bottom: 1px solid #ffbf12;
      font-family: 'Gotham-Book-Regular';
  }

  .headercontainer {
      max-width: 100%;
      padding-top: 1%;
  }


  /* Mobile nav menu --hamburger menu
------------------------------------------------------- */
  .button_container:before {
      position: absolute;
      content: '';
      top: -10px;
      right: -15px;
      left: -15px;
      bottom: -10px;
      cursor: pointer;
  }

  .button_container {
      position: fixed;
      top: 20px;
      right: 5%;
      height: 21px;
      width: 27px;
      /* padding-left:  */
      cursor: pointer;
      /* -webkit-transition: opacity 0s ease;
      transition: opacity .25s ease; */
      z-index: 999;
      /* transition: transform 0.25s ease; */
  }

  .button_container:hover {
      opacity: .7;
  }

  .button_container.active .top {
      -moz-transition: translateY(11px) translateX(0) rotate(45deg);
      -webkit-transform: translateY(11px) translateX(0) rotate(45deg);
      transform: translateY(8px) translateX(0) rotate(45deg);
      background: #FFF;
  }

  .button_container.active .middle {
      opacity: 0;
      background: #FFF;
  }

  .button_container.active .bottom {
      -moz-transition: translateY(-11px) translateX(0) rotate(-45deg);
      -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
      transform: translateY(-8px) translateX(0) rotate(-45deg);
      background: #FFF;
  }

  .button_container span {
      background: #ffbf12 !important;
      border: none;
      height: 3px;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      /* -webkit-transition: all .35s ease; */
      /* transition: all .35s ease; */
      cursor: pointer;

  }

  .button_container span:nth-of-type(2) {
      top: 8px;
  }

  .button_container span:nth-of-type(3) {
      top: 16px;
  }

  /* Mobile nav menu --fullscreen overlay menu
------------------------------------------------------- */

  #overlay {
      -webkit-backface-visibility: hidden;
      z-index: 13;
  }

  /* width */
  #overlay ::-webkit-scrollbar {
      width: 10px;
  }

  /* Track */
  #overlay ::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px rgba(13, 6, 77, 0.493);
      border-radius: 10px;
  }

  /* Handle */
  #overlay ::-webkit-scrollbar-thumb {
      background: #0d0137bd;
      border-radius: 10px;
  }

  /* Handle on hover */
  #overlay ::-webkit-scrollbar-thumb:hover {
      background: rgba(13, 6, 77, 0.493);
  }


  .nobtnstyle {
      background: none;
      color: inherit;
      border: none;
      padding: 0;
      font: inherit;
      cursor: pointer;
      outline: inherit;
      font-family: 'Gotham-Book-Regular';
      font-size: 20px;
  }

  .nobtnstyle:focus {
      outline: none;
  }


  #overlay #securityservices:hover {
      color: #ffbf12
  }


  #overlay #securityarchitecture:hover {
      color: #ffbf12
  }

  #overlay #securityacademy:hover {
      color: #ffbf12
  }

  #overlay #ispteleco:hover {
      color: #ffbf12;
  }


  #overlay ul li table {
      min-height: 0px !important;
  }



  .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 0%;
      opacity: 0;
      visibility: hidden;
      /* -webkit-transition: opacity .35s, visibility .35s, height .35s; */
      /* transition: opacity 5s, visibility .35s, height .35s; */
      overflow-y: scroll;
      overflow-x: hidden;
  }



  .overlay.open {
      -webkit-backface-visibility: hidden;
      opacity: 1;
      transition: opacity .5s;
      visibility: visible;
      height: 100%;
      z-index: 10;
      background-color: #0d0137;
      transition: background .35s ease;
      color: white;
  }

  .overlay.open li {
      -webkit-animation: fadeInRight 0s ease forwards;
      animation: fadeInRight 0s ease forwards;


  }

  .overlay nav {
      position: relative;
      height: 70%;
      top: 50%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      font-size: 15px;
      font-weight: 300;
      text-align: center;
      font-family: 'Gotham-Book-Regular';
  }

  .overlay ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      display: inline-block;
      position: relative;
      font-family: 'Gotham-Book-Regular';
      width: 100%;

  }

  .overlay ul li {
      display: block;
      height: 25%;
      height: calc(100% / 4);
      height: auto;
      position: relative;
      opacity: 0;
      width: 100%;
      font-family: 'Gotham-Book-Regular';
  }

  .overlay ul li a {
      display: block;
      position: relative;
      color: white;
      text-decoration: none;
      overflow: hidden;
      padding-bottom: .18em;
      font-family: 'Gotham-Book-Regular';
      font-size: 15px;

  }

  .overlay ul li a:hover {
      color: #ffbf12 !important;
  }



  @-webkit-keyframes fadeInRight {
      0% {
          opacity: 0;
          left: 20%;
      }

      100% {
          opacity: 1;
          left: 0;
      }
  }

  @keyframes fadeInRight {
      0% {
          opacity: 0;
          left: 20%;
      }

      100% {
          opacity: 1;
          left: 0;
      }
  }



  @media (min-width: 1200px) {
      .button_container {
          display: none;
      }

      header {
          position: absolute;
          height: 75px;
          background-color: #0d0137;
          -webkit-transition: height 0s;
          -moz-transition: height 0s;
          -ms-transition: height 0s;
          -o-transition: height 0s;
          transition: height 0s;
      }

      header #logo {
          display: inline-block;
          height: 45px;
          font-weight: 300;
          line-height: 45px;
          text-align: left;
          width: auto;
          margin-left: 2%;
      }

      header nav {
          display: inline-block;
          float: right;
          margin-right: 0%;
      }

      header nav .nobtnstyledesktop {
          text-decoration: none;
          line-height: 45px;
          margin-left: 10px;
          color: #ffffff;
          font-weight: 900;
          font-size: 12px;
          -webkit-transition: all 0s;
          -moz-transition: all 0s;
          -ms-transition: all 0s;
          -o-transition: all 0s;
          transition: all 0s;
          font-family: 'Gotham-Book-Regular';

      }

      header nav .nobtnstyledesktop:focus {
          outline: none;
          border-bottom: 1px solid #ffbf12;
      }


      header nav .nobtnstyledesktop:hover {
          color: #ffbf12;
          border-bottom: 1px solid #ffbf12;
          text-decoration: none;

      }

      header nav a {
          text-decoration: none;
          line-height: 45px;
          margin-left: 10px;
          color: #ffffff;
          font-weight: 900;
          font-size: 12px;
          -webkit-transition: all 0s;
          -moz-transition: all 0s;
          -ms-transition: all 0s;
          -o-transition: all 0s;
          transition: all 0s;
          padding-bottom: 1.2%;
          font-family: 'Gotham-Book-Regular';
      }

      header nav a:focus {
          border: none;
          outline: none;
      }


      header nav a:hover {
          color: #ffbf12;
          border-bottom: 1px solid #ffbf12;
          text-decoration: none;

      }

      #headerid.smaller {
          height: 45px;
          font-size: 1em;
          text-shadow: none;
          position: fixed;
      }

      #headerid.smaller {}

      #headerid.smaller nav a {
          line-height: 45px;

      }
  }

  @media (min-width:1400px) {
      header nav .nobtnstyledesktop {
          text-decoration: none;
          line-height: 45px;
          margin-left: 10px;
          color: #ffffff;
          font-weight: 900;
          font-size: 15px;
          -webkit-transition: all 0s;
          -moz-transition: all 0s;
          -ms-transition: all 0s;
          -o-transition: all 0s;
          transition: all 0s;
          font-family: 'Gotham-Book-Regular';

      }


      header nav a {
          text-decoration: none;
          line-height: 45px;
          margin-left: 10px;
          color: #ffffff;
          font-weight: 900;
          font-size: 15px;
          -webkit-transition: all 0s;
          -moz-transition: all 0s;
          -ms-transition: all 0s;
          -o-transition: all 0s;
          transition: all 0s;
          padding-bottom: 1.2%;
          font-family: 'Gotham-Book-Regular';
      }
  }

  @media (min-width:1200px) and (max-width:1370px) {
      header nav .nobtnstyledesktop {
          text-decoration: none;
          line-height: 45px;
          margin-left: 10px;
          color: #ffffff;
          font-weight: 900;
          font-size: 12px;
          -webkit-transition: all 0s;
          -moz-transition: all 0s;
          -ms-transition: all 0s;
          -o-transition: all 0s;
          transition: all 0s;
          font-family: 'Gotham-Book-Regular';
      }

      header nav a {
          text-decoration: none;
          line-height: 45px;
          margin-left: 10px;
          color: #ffffff;
          font-weight: 900;
          font-size: 12px;
          -webkit-transition: all 0s;
          -moz-transition: all 0s;
          -ms-transition: all 0s;
          -o-transition: all 0s;
          transition: all 0s;
          padding-bottom: 1.2%;
          font-family: 'Gotham-Book-Regular';
      }
  }

  @-webkit-keyframes fadeInTop {
      0% {
          opacity: 0;
          left: 20px;
      }

      100% {
          opacity: 1;
          left: 20px;
      }
  }

  @keyframes fadeInTop {
      0% {
          opacity: 0;
          top: -5%;
      }

      100% {
          opacity: 1;
          left: 0;
      }
  }





  /*NAVBAR MOBILE MENU STYLE START*/
  @media (min-width:900px) and (max-width:1200px) {
      .nobtnstyle {
          background: none;
          color: inherit;
          border: none;
          padding: 0;
          font: inherit;
          cursor: pointer;
          outline: inherit;
          font-family: 'Gotham-Book-Regular';
          font-size: 20px;
      }

      #overlay .submenu-table-td-text {
          padding-left: 31%;

      }

      #overlay .submenu-table-td-text {
          padding-left: 2%;
          width: 100%;
      }

      #overlay .yellowline {
          width: 40%;
          height: 1px;
          background-color: #ffbf12;

      }

      #overlay #securityservices-submenu {
          font-size: 11px;
          padding: 2% 0% 0% 31%;

      }

      #overlay #securityarchitecture-submenu {
          font-size: 11px;
          padding: 2% 0% 0% 31%;
      }

      #overlay #securityacademy-submenu {
          font-size: 11px;
          padding: 2% 0% 0% 31%;
      }

      #overlay #ispteleco-submenu {
          font-size: 11px;
          padding: 2% 0% 0% 31%;
      }

  }

  @media (min-width:700px) and (max-width:899px) {
      .nobtnstyle {
          background: none;
          color: inherit;
          border: none;
          padding: 0;
          font: inherit;
          cursor: pointer;
          outline: inherit;
          font-family: 'Gotham-Book-Regular';
          font-size: 20px;
      }

      #overlay .submenu-table-td-text {
          padding-left: 2%;
          width: 100%;
      }

      #overlay .yellowline {
          width: 50%;
          height: 1px;
          background-color: #ffbf12;

      }

      #overlay #securityservices-submenu {
          font-size: 11px;
          margin: 2% 0% 0% 25%;

      }

      #overlay #securityarchitecture-submenu {
          font-size: 11px;
          margin: 2% 0% 0% 25%;
      }

      #overlay #securityacademy-submenu {
          font-size: 11px;
          margin: 2% 0% 0% 25%;
      }

      #overlay #ispteleco-submenu {
          font-size: 11px;
          margin: 2% 0% 0% 25%;
      }

  }



  @media (min-width:500px) and (max-width:699px) {
      .nobtnstyle {
          background: none;
          color: inherit;
          border: none;
          padding: 0;
          font: inherit;
          cursor: pointer;
          outline: inherit;
          font-family: 'Gotham-Book-Regular';
          font-size: 15px;
      }

      .overlay ul li a {
          display: block;
          position: relative;
          color: #ffffff;
          text-decoration: none;
          overflow: hidden;
          padding-bottom: 0.18em;
          font-family: 'Gotham-Book-Regular';
          font-size: 15px;
      }

      #overlay .submenu-table-td-text {
          padding-left: 2%;
          width: 100%;
      }

      #overlay .yellowline {
          width: 53%;
          height: 1px;
          background-color: #ffbf12;

      }

      #overlay #securityservices-submenu {
          font-size: 10px;
          margin: 2% 0% 0% 25%;

      }

      #overlay #securityarchitecture-submenu {
          font-size: 10px;
          margin: 2% 0% 0% 25%;
      }

      #overlay #securityacademy-submenu {
          font-size: 10px;
          margin: 2% 0% 0% 25%;
      }

      #overlay #ispteleco-submenu {
          font-size: 11px;
          margin: 2% 0% 0% 25%;
      }

  }

  @media (min-width:400px) and (max-width:499px) {
      .nobtnstyle {
          background: none;
          color: inherit;
          border: none;
          padding: 0;
          font: inherit;
          cursor: pointer;
          outline: inherit;
          font-family: 'Gotham-Book-Regular';
          font-size: 13px;
      }

      .overlay ul li a {
          display: block;
          position: relative;
          color: white;
          text-decoration: none;
          overflow: hidden;
          padding-bottom: 0.18em;
          font-family: 'Gotham-Book-Regular';
          font-size: 13px;
      }

      #overlay .submenu-table-td-text {
          padding-left: 2%;
          width: 100%;
      }

      #overlay .yellowline {
          width: 80%;
          height: 1px;
          background-color: #ffbf12;

      }

      #overlay #securityservices-submenu {
          font-size: 10px;
          margin: 2% 0% 0% 15% !important;

      }

      #overlay #securityarchitecture-submenu {
          font-size: 10px;
          margin: 2% 0% 0% 15% !important;
      }

      #overlay #securityacademy-submenu {
          font-size: 10px;
          margin: 2% 0% 0% 15% !important;
      }

      #overlay #ispteleco-submenu {
          font-size: 11px;
          margin: 2% 0% 0% 15% !important;
      }

  }



  @media (min-width:0px) and (max-width:399px) {
      .nobtnstyle {
          background: none;
          color: inherit;
          border: none;
          padding: 0;
          font: inherit;
          cursor: pointer;
          outline: inherit;
          font-family: 'Gotham-Book-Regular';
          font-size: 13px;
      }

      .overlay ul li a {
          display: block;
          position: relative;
          color: white;
          text-decoration: none;
          overflow: hidden;
          padding-bottom: 0.18em;
          font-family: 'Gotham-Book-Regular';
          font-size: 13px;
      }

      #overlay .submenu-table-td-text {
          padding-left: 2%;
          width: 100%;
      }

      #overlay .yellowline {
          width: 80%;
          height: 1px;
          background-color: #ffbf12;

      }

      #overlay #securityservices-submenu {
          font-size: 10px;
          margin: 2% 0% 0% 9%;

      }

      #overlay #securityarchitecture-submenu {
          font-size: 10px;
          margin: 2% 0% 0% 9%;
      }

      #overlay #securityacademy-submenu {
          font-size: 10px;
          margin: 2% 0% 0% 9%;
      }

      #overlay #ispteleco-submenu {
          font-size: 11px;
          margin: 2% 0% 0% 9%;
      }

  }

  /*NAVBAR MOBILE MENU STYLE END*/