.header {
  height: 25px;
  background: #222;
  color: #eee;
  text-align: center;
  font: 10px/25px Helvetica, Verdana, sans-serif;
}

.header a {
  color: #999;
}

/*main-slide*/
.main-slide {
  margin: auto;
      width: 100%;
      height: 100%;
      position: relative;

}

.main-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  /* top: 9.5%; */
  left: 0;
  z-index: -60;

}

.main-slide li img {
  width: 100%;
  position: absolute;
  /* top: 0; */
  /* top: 9.5%; */
  left: 0;
  display: none;
  z-index: -50;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 5s ease;


}

/*NAV*/
.main-slide nav {
    width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0);
}

.main-slide nav h1 {
  padding: 20px;
  color: #ccc;
  text-align: right;
  font: 25px Georgia, Times, serif;
}

/*UL*/
.main-slide ul {
  width: 100%;
  height: 100%;
  list-style: none;
      padding-top: 7%;
}

.main-slide li a {
  z-index: 1;
  display: block;

  width: 100%;
    height: 80px;
    /* border: 2px solid #cfcece; */
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;

  color: #444;
  text-decoration: none;
  font: 14px/30px Helvetica, Verdana, sans-serif;
  transition: background .50s ease-in-out;
  -moz-transition: background .50s ease-in-out;
   -webkit-transition: background .50s ease-in-out;

  -webkit-transition-property: width;
  -webkit-transition-duration: 0.15s;
  -webkit-transition-delay: 0.15s;
  transition-property: padding-left;
  transition-duration: 0.15s;
  transition-delay: 0.15s;
}

/*.main-slide li:nth-child(1) {
  padding-top: 100px;
  padding-top:14%;
}*/

.main-slide li a:hover {
padding-left:30px;
background: rgba(42, 40, 40, 0.31);
color:#fff;
  /* border: 3px solid #FFF; */
  border-left: 0px;
  border-right: 0px;
  border-top: 0px;
}

.main-slide li a:hover + img {
   left: 0px;
  display:block;
  width: 100%;
background:#ddd;
}


.mn-icon1{
   width:8%;
    min-height: 75px;
    float: left;
    background: url(../img/mg1.png) no-repeat center;

  }

  a:hover .mn-icon1{
  width: :8%; margin: 0 auto; text-align: center;
    background: url(../img/mw1.png) no-repeat center;

  }

.mn-icon2{
   width:8%;  min-height: 75px;  float: left;
    background: url(../img/mg2.png) no-repeat center;

  }

  a:hover .mn-icon2{
  width: :8%; margin: 0 auto; text-align: center;
    background: url(../img/mw2.png) no-repeat center;

  }


.mn-icon3{
   width:8%;  min-height: 75px;  float: left;
    background: url(../img/mg3.png) no-repeat center;

  }

  a:hover .mn-icon3{
  width: :8%; margin: 0 auto; text-align: center;
    background: url(../img/mw3.png) no-repeat center;

  }

  .mn-icon4{
     width:8%;  min-height: 75px;  float: left;
      background: url(../img/mg4.png) no-repeat center;

    }


  a:hover .mn-icon4{
  width: :8%; margin: 0 auto; text-align: center;
    background: url(../img/mw4.png) no-repeat center;
  }


  .mn-icon5{
     width:8%;  min-height: 75px;  float: left;
      background: url(../img/mg5.png) no-repeat center;

    }


  a:hover .mn-icon5{
  width: :8%; margin: 0 auto; text-align: center;
    background: url(../img/mw5.png) no-repeat center;
  }


  a:hover .txt-mn{
      color:#fff;
  }

  .txt-mn{
text-shadow: 2px 2px 2px #000;
    font-family: 'Gotham','supermarket'; font-weight: 900; font-size: 26px; color:#c2c2c2;
    display: flex;
align-items: center;
min-height: 75px;
  }





  @media (max-width: 1300px) {
    .main-slide li a {
      height: 65px !important;
    }
  .mn-icon1{
    min-height: 65px !important;
  background-size: auto 50px !important;
    }

    a:hover .mn-icon1{
  background-size: auto 50px !important;
    }

  .mn-icon2{
  min-height: 65px !important;
  background-size: auto 42px !important;;
    }

    a:hover .mn-icon2{
      background-size: auto 42px !important;
    }


  .mn-icon3{
  min-height: 65px !important;
  background-size: auto 50px !important;
    }

    a:hover .mn-icon3{
      background-size: auto 50px !important;
    }


  .mn-icon4{
   min-height: 65px !important;
    background-size: auto 50px !important;
    }

    a:hover .mn-icon4{
      background-size: auto 50px !important;
    }


    .txt-mn{
  min-height: 65px !important;
    }

    .main-slide ul {
          padding-top: 11% !important;
    }


    /*.main-slide li:nth-child(1) {
      padding-top: 20% !important;
  }*/

  }


  @media (max-width: 1200px) {
    .main-slide li a {
      height: 65px !important;
    }
  .mn-icon1{
    min-height: 65px !important;
  background-size: auto 50px !important;
    }

    a:hover .mn-icon1{
  background-size: auto 50px !important;
    }

  .mn-icon2{
  min-height: 65px !important;
  background-size: auto 42px !important;;
    }

    a:hover .mn-icon2{
      background-size: auto 42px !important;
    }


  .mn-icon3{
  min-height: 65px !important;
  background-size: auto 50px !important;
    }

    a:hover .mn-icon3{
      background-size: auto 50px !important;
    }


  .mn-icon4{
   min-height: 65px !important;
    background-size: auto 50px !important;
    }

    a:hover .mn-icon4{
      background-size: auto 50px !important;
    }


    .txt-mn{
  min-height: 65px !important;
    }

    .main-slide ul {
          padding-top: 8%!important;
    }

    /*.main-slide li:nth-child(1) {
      padding-top: 20% !important;
  }*/

  }


  @media (max-width: 1300px) {
    .main-slide li a {
      height: 65px !important;
    }
  .mn-icon1{
    min-height: 65px !important;
  background-size: auto 50px !important;
    }

    a:hover .mn-icon1{
  background-size: auto 50px !important;
    }

  .mn-icon2{
  min-height: 65px !important;
  background-size: auto 42px !important;;
    }

    a:hover .mn-icon2{
      background-size: auto 42px !important;
    }


  .mn-icon3{
  min-height: 65px !important;
  background-size: auto 50px !important;
    }

    a:hover .mn-icon3{
      background-size: auto 50px !important;
    }


  .mn-icon4{
   min-height: 65px !important;
    background-size: auto 50px !important;
    }

    a:hover .mn-icon4{
      background-size: auto 50px !important;
    }


    .txt-mn{
  min-height: 65px !important;
    }

    /*.main-slide li:nth-child(1) {
      padding-top: 20% !important;
  }*/

  }


  @media (max-width: 1400px) {
    .main-slide li a {
      height: 65px !important;
    }
  .mn-icon1{
    min-height: 65px !important;
  background-size: auto 50px !important;
    }

    a:hover .mn-icon1{
  background-size: auto 50px !important;
    }

  .mn-icon2{
  min-height: 65px !important;
  background-size: auto 42px !important;;
    }

    a:hover .mn-icon2{
      background-size: auto 42px !important;
    }


  .mn-icon3{
  min-height: 65px !important;
  background-size: auto 50px !important;
    }

    a:hover .mn-icon3{
      background-size: auto 50px !important;
    }


  .mn-icon4{
   min-height: 65px !important;
    background-size: auto 50px !important;
    }

    a:hover .mn-icon4{
      background-size: auto 50px !important;
    }


    .txt-mn{
  min-height: 65px !important;
    }




    /*.main-slide li:nth-child(1) {
      padding-top: 20% !important;
  }*/


  }