body{
    background:#222731;
}
.aem-Grid{
    background:#ffffff;
    }
@media screen and (min-width: 1423px){
    #pageContent{
        max-width: 1457px;
        margin: 0 auto;
        overflow-x: hidden;
    }
    .o-header__secondary-top-nav .container{
	width:100%;
    max-width:1400px;
    overflow-x:hidden;
	}
        .o-header__logo-section .container{
        width: auto;
        max-width: 1377px;
        margin: 0 auto;
        padding: 0 40px;
    }
    .o-header__mega-menu .container{
        width: auto;
        max-width: 1377px !important;
        margin: 0 auto;
    }
}

h1,h2,h3,h4,h5,h6, .h1-style, .h2-style, .h3-style, .h4-style, .h5-style, .h6-style{
    font-family: "Brandon Grotesque" ,Calibri, Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
}
.link--button .a-link__text {
  display: inline-block;
  background-color: #5bc2e7;
  background-image: linear-gradient(to bottom, #5bc2e7 50%, #000000 50%);
  color: #000000 !important;
  background-size: 100% 200%;
  border: 0;
  line-height: 17.6px;
  font-weight: 700;
  font-family: brandon_grotesquebold, Calibri, Helvetica, Arial, sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 20px !important;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s;
  border-radius: 0;
}

.link--button .a-link__text:hover {
   color: #5bc2e7!important;
  background-color: #000 !important;
  background-position: 0 -100%;
  box-shadow: none;
}

/*------blue button-----*/
.container {
  .btn{
    color: #000000 !important;
  background-size: 100% 200%;
  border: 0;
  line-height: 17.6px;
  font-weight: 700;
  font-family: brandon_grotesquebold, Calibri, Helvetica, Arial, sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 20px !important;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s;
  border-radius: 0;
  }
  
  .a-button--primary-v1 {
    display: flex;
    margin-right: 3px;

    .btn {
      display: inline-block;
      background-color: #5bc2e7;
      background-image: linear-gradient(to bottom, #5bc2e7 50%, #000 50%);

   

      &:hover {
        color: #5bc2e7!important;
        background-color: #000 !important;
        background-position: 0 -100%;
        box-shadow: none;
      }

      @media (max-width:767px) {
        padding: 5px 18px;
      }

      @media (max-width:768px) {
        padding: 5px 23px;

      }
    }
  }

  /*-------------black button--------*/

  .a-button--primary-v2 {
    display: flex;

    .btn {
      background-color: #222731;
      background-image: linear-gradient(to bottom, #222731 50%, #d9d9d6 50%);
     
      color: #d9d9d6 !important;

      &:hover {
        color: #222731 !important;
        background-color: #d9d9d6;
        background-position: 0 -100%;
        box-shadow: none;
      }
    }
  }

  /*---------------yellow color button--------------*/

  .a-button--primary {
    display: flex;
    margin-right: 3px;

    .btn {
      display: inline-block;
      background-color: #eeb33b;
      background-image: linear-gradient(to bottom, #eeb33b 50%, #000 50%);


      &:hover {
        color: #eeb33b !important;
        background-color: #000 !important;
        background-position: 0 -100%;
        box-shadow: none;
      }

      @media (max-width:767px) {
        padding: 5px 18px;
      }
    }
  }

  /*--------------For green color button-------------------*/
  .a-button--secondary {
    display: flex;
    margin-right: 3px;

    .btn {
      display: inline-block;
      background-color: #7ccc6c;
      background-image: linear-gradient(to bottom, #7ccc6c 50%, #000 50%);


      &:hover {
        color: #7ccc6c !important;
        background-color: #000 !important;
        background-position: 0 -100%;
        box-shadow: none;
      }

      @media (max-width:767px) {
        padding: 5px 18px;
      }
    }
  }

  /*--------------For yellow color button-------------------*/
  .a-button--secondary-v1 {
    display: flex;
    margin-right: 3px;

    .btn {
      display: inline-block;
      background-color: #eeb33b;
      background-image: linear-gradient(to bottom, #eeb33b 50%, #000 50%);

      

      &:hover {
        color: #eeb33b !important;
        background-color: #000 !important;
        background-position: 0 -100%;
        box-shadow: none;
      }

      @media (max-width:767px) {
        padding: 5px 18px;
      }
    }
  }

  /*--------------For gray color button-------------------*/
  .a-button--tertiary {
    display: flex;
    margin-right: 3px;

    .btn {
      display: inline-block;
      background-color: #222731;
      background-image: linear-gradient(to bottom, #222731 50%, #d9d9d6 50%);

      span {
        color: #d9d9d6 !important;
      }

      &:hover {
        span {
          color: #222731 !important;
        }

        background-color: #d9d9d6 !important;
        background-position: 0 -100%;
        box-shadow:none;
      }


      @media (max-width:767px) {
        padding: 5px 18px;
      }

      @media (min-width:768px) {
        padding: 5px 20px;

      }
    }
  }

  /*--------------For Violet color button-------------------*/
  .a-button--vl {
    display: flex;
    margin-right: 3px;

    .btn {
      display: inline-block;
      background-color: #462D7F;
      background-image: linear-gradient(to bottom, #462D7F 50%, #fff 50%);

      span {
        color: #fff !important;
      }

      &:hover {
        span {
          color: #462D7F !important;
        }

        background-color: #fff !important;
        background-position: 0 -100%;
        box-shadow:none;
      }



      @media (max-width:767px) {
        padding: 5px 18px;
      }

      @media (min-width:768px) {
        padding: 5px 20px;

      }
    }
  }

  /*--------------For White color button-------------------*/
  .a-button--wh {
    display: flex;
    margin-right: 3px;

    .btn {
      display: inline-block;
      background-color: #fff;
      background-image: linear-gradient(to bottom, #fff 50%, #000 50%);

      span {
        color: #000 !important;
      }

      &:hover {
        span {
          color: #fff !important;
        }

        background-color: #000 !important;
        background-position: 0 -100%;
        box-shadow:none;
      }

      @media (max-width:767px) {
        padding: 5px 18px;
      }

      @media (min-width:768px) {
        padding: 5px 20px;

      }
    }
  }

  /*--------------For Pink color button-------------------*/
  .a-button--danger {
    display: flex;
    margin-right: 3px;

    .btn {
      display: inline-block;
      background-color: #aa0061;
      background-image: linear-gradient(to bottom, #aa0061 50%, #d9d9d6 50%);
      padding: 9px 20px;

      span {
        color: #d9d9d6 !important;
      }

      &:hover {
        span {
          color: #aa0061 !important;
        }

        background-color: #d9d9d6 !important;
        background-position: 0 -100%;
        box-shadow:none;
        border:none !important;
      }


      @media (max-width:767px) {        
        padding: 5px 18px;
      }

      @media (min-width:768px) {
        padding: 5px 20px;

      }
    }
  }
  .button{
    img{
      max-width: 100%;
    }
  }

    /*--------------For small button-------------------*/
  .a-button--sm {

      .btn {
            line-height: 18px !important;
            padding: 7px 16px !important;
            font-size: 16px !important;
          }
  }

      /*--------------For mediium button-------------------*/
.a-button--md {

      .btn {
            line-height: 20px !important;
            padding: 12px 24px !important;
            font-size: 18px !important;
          }

}

    /*--------------For large button-------------------*/
.a-button--lg {
      .btn {
            line-height: 22px!important;
            padding: 13px 32px !important;
            font-size: 20px!important;

}
}
}