@import url('https://fonts.googleapis.com/css?family=Arvo|Ubuntu|Nunito|Noto+Sans|Lato|Open+Sans|Oswald|Raleway|Roboto');



html { -webkit-font-smoothing: antialiased; }

a {
  color: #BA0707;
  text-decoration: none;
}

a:hover { color: #BA0707; }

body 
{
  -webkit-font-smoothing: antialiased;
  line-height: 1;
  width: 100%;
  background: silver
}


nav 
{
  display: block;
  background-color: #ffc400;
}


.menu 
{ 
  display:flex;
  justify-content: center;
  /* left: 100%;
  transform: translateX(-100%); */
}
/*
#menuID
{
  position: relative;
  top:-10px;
}*/

.menu li {                /*changed the left style */
  display: inline-block;
  position: relative;
  z-index: 100;
  /* left: 60px; */
}

.menu li .sub-menu li,
.menu li .sub-menu li > a
{
  position: relative;
  left: 0px;
}

.menu li:first-child { margin-left: 0px; }

    .menu li a {
        color: rgb(0, 0, 0);
        font-family: 'Bebas Neue', sans-serif !important;
        font-size: 19px;
        letter-spacing: 4px;
        /* font-weight: 500;*/
        margin: 0px;
        -webkit-font-smoothing: antialiased;
        -webkit-transition-duration: 0.9s; /* Safari */
        transition-duration: 0.9s;
        text-decoration: none;
        display: block;
        padding: 18px 60px;
        transition: all 0.3s ease-in-out 0.1s;
        /* left: 50%;
  transform: translateX(-50%); */
    }

.menu li a:hover,
.menu li:hover>a {
  color: #ffffff;
  /* background: rgb(197, 197, 197); */
  font-size: 17px;
  /*font-weight: bolder;*/
}

.menu ul {
  visibility: hidden;
  opacity: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  position: absolute;
  left: 0px;
  background: rgb(247, 248, 247);
  z-index: 99;
  transform: translate(0, 20px);
  transition: all 0.2s ease-out;
}

.menu ul:after {
  bottom: 100%;
  left: 20%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #FF9800;
  border-width: 10px;
  margin-left: -6px;
}

.menu ul li {
  display: block;
  float: none;
  background: none;
  margin: 0;
  padding: 0;
}

.menu ul li a {
  font-size: 13px;
  font-weight: normal;
  display: block;
  color: #ffffff;
  background: rgb(41 41 41);
  padding: 20px 20px;
}

.menu ul li a:hover,
.menu ul li:hover>a {
  background:#FF9800;
  color: rgb(0, 0, 0);
  font-weight: 300;
  font-size: 14px;
}

.menu li:hover>ul {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0);
}

.menu ul ul {
  left: 169px;
  top: 0px;
  visibility: hidden;
  opacity: 0;
  transform: translate(20px, 20px);
  transition: all 0.2s ease-out;
}

.menu ul ul:after {
  left: -6px;
  top: 10%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #fff;
  border-width: 6px;
  margin-top: -6px;
}

.menu li>ul ul:hover {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0);
}

/*top frame of small screen nav*/
.responsive-menu {
  display: none;
  width: 100%;
  padding: 20px 20px;
  background: #ffc400;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
}

.responsive-menu:hover {

  background: #ffc400;
  color:  #ffffffd7;
  text-decoration: none;
}

a.homer { /*background: rgb(5, 126, 173);*/ }




@media (min-width: 1210px) and ( max-width: 1420px) {

  .menu li a {
      font-size: 16px;
      padding: 18px 30px;
      transition: all 0.2s ease-in-out 0s;
  }
}

@media (min-width: 1129px) and ( max-width: 1209px) {

    .menu li a {
        font-size: 16px;
        padding: 18px 30px;
        transition: all 0.2s ease-in-out 0s;
    }
}



    @media (min-width: 880px) and (max-width: 1130px) {

        .mainWrap {
            width: 768px;
        }

        .menu li a {
            padding: 20px 10px;
            transition: all 0.2s ease-in-out 0s;
        }

        .responsive-menu {
            width: 100%;
            padding: 20px 10px;
        }

        .menu ul {
            top: 37px;
        }

        .menu li a {
            font-size: 12px;
            padding: 18px 28px;
        }

        a.homer { /*background: rgb(55, 134, 180); */
        }
    }

    @media (min-width: 766px) and (max-width: 880px) {
      .menu li a {
        font-size: 12px;
        padding: 18px 15px;
    }
    }

    @media (max-width: 766px) {

        .ourSerImagHold {
           /* padding-top: 19px;*/
            padding-bottom: 15px;
        }

        .ourSerMoreHold {
            display: none !important;
        }


        .mainWrap {
            width: auto;
            padding: 50px 20px;
        }


        .menu {
            display: none;
        }

        .responsive-menu {
            display: block;
            width: 100%;
        }

        nav {
            margin: 0;
            background: none;
        }

        .menu li {
            display: block;
            margin: 0;
            left: 0px;
        }


        .menu li a {
            background: #ffc400;
            color: rgb(0, 0, 0);
            font-size: 15px;
            padding: 12px 25px;
            /*font-weight: bold;*/
        }

      .menu li a:hover,
      .menu li:hover > a {
          background: rgb(19, 18, 18);
          color: rgb(255, 255, 255);
          font-size: 18px;
      }

      .menu ul {
          visibility: hidden;
          opacity: 0;
          top: 0;
          left: 0;
          width: 100%;
          transform: initial;
      }

      .menu ul li a {
          font-size: 15px;
          padding: 12px 40px;
          font-weight: normal;
          display: block;
          background: rgb(255, 255, 255);
          color: rgb(26, 25, 25);
      }

      .menu ul li a:hover,
      .menu ul li:hover > a {
          background: rgb(187, 187, 187);
          color: black;
      }

      .menu li:hover > ul {
          visibility: visible;
          opacity: 1;
          position: relative;
          transform: initial;
      }

      .menu ul ul {
          left: 0;
          transform: initial;
      }

      .menu li > ul ul:hover {
          transform: initial;
      }

      #slow {
          display: none;
      }

      .cmpyName {
          color: rgb(8, 171, 235);
      }
    }