.homeBanner .action {
    position: absolute;
    bottom: -180px;
    left: 40%;
    transform: translatex(-50%);
    transform: rotate(280deg); 
    transition:1s ease-out;
  }
    .homeBanner .action.animate {
        transform:rotate(180deg);
    }
    .homeBanner .action img {
      margin-top: -10px; }
    .homeBanner .action a:before {
      content: '';
      display: block;
      width: 30px;
      margin:auto;
      height: 30px;
      border: 2px solid rgba(255, 255, 255, 0.7);
      border-radius: 50%;
      transition:500ms ease;
    }
    .homeBanner .action a img {
      opacity: 0; 
      position:absolute;
      width:75px;
      height:75px;
      top:7px;
      left:0;
    }
    /*.homeBanner .action a.active:before {
      display: none; }*/
    /*.homeBanner .action a.active img {
      opacity: 1;
      transform: rotate(180deg);
    }*/

/*Banner Animation*/
    .homeBanner .action a.active:before {
        animation:circleSize;
        animation-duration:800ms;
        animation-fill-mode:forwards;
    }
    .homeBanner .action a.active img {
      transform: rotate(180deg);
      animation:opacity;
      animation-duration:800ms;
      animation-fill-mode:forwards;
      animation-delay:500ms;
    }

    .homeBanner .action a {
        position:relative;
        width:75px;
    }
    .homeBanner .action a span {
        position:absolute;
        width:100%;
        display:inline-block;
        transform:rotate(180deg);
        color:#fff;
        text-align:center;
        bottom:30px;
        right:20px;
        font-size:12px;
        opacity:0;
        /*transition:500ms ease;*/
    }
        .homeBanner .action a.active span {
            animation:slideText;
            animation-duration:500ms;
            animation-delay:800ms;
            animation-fill-mode:forwards;
        }
@keyframes slideText {
    from {
        right:20px;
        opacity:0;
    }
    to {
        right:0;
        opacity:1;
    }
}
@keyframes circleSize {
    0% {
        width:30px;
        height:30px;
        opacity:1;
    }
    50% {
        width:70px;
        height:70px;
        opacity:1;
    }
    100% {
        width:70px;
        height:70px;
        opacity:0;
    }
}
@keyframes opacity {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
/*Banner Animation-----END*/


    /*=====Media Queries=====*/

/*Most of the Smartphones Mobiles (Portrait)*/
@media (min-width: 320px) and (max-width: 480px) {
    .homeBanner .action {
        display: none;
    }
}

/*Low Resolution Tablets, Mobiles (Landscape)*/
@media (min-width: 481px) and (max-width: 767px) {
    .homeBanner .action {
        display: none;
    }
}


/*Tablets, Ipads (portrait)*/
@media (min-width: 768px) and (max-width: 1023px) {
    .homeBanner .action {
        display: none;
    }
}

/*Tablets, Ipads (landscape)*/
@media (min-width: 850px) and (max-width: 1024px) and (orientation: landscape) {
    .homeBanner .action {
        display: none;
    }
}

@media (min-width: 1024px) and (max-width: 1050px) and (orientation: portrait) {
    .homeBanner .action {
        display: none;
    }
}

/*1152×648, 1280×720, 1366×768,*/
@media (min-width: 1200px) and (max-width: 1599px) {
    
     .homeBanner .action {
        position: absolute;
        bottom: -70px;
    left: 43%;
        transform: translatex(-50%);
        transform: rotate(280deg); 
        transition:1s ease-out;
     }
     .homeBanner .action.animate {
        transform:rotate(180deg);
    }
   
}

@media (min-width: 1600px) and (max-width: 1919px) {
    .homeBanner .action {
        position: absolute;
        bottom: -80px;
        left: 44%;
        transform: translatex(-50%);
        transform: rotate(280deg); 
        transition:1s ease-out;
     }
    .homeBanner .action.animate {
        transform:rotate(180deg);
    }
    .hb-rotate-menu .hb-link {
    padding-top: 150px;
    
    }
}