.framed-img .item.usn_cmp_gallery .item .image {
    overflow:visible;
    transition: transform 0.5s ease;
}

.framed-img.fr-img-left .item.usn_cmp_gallery .item .image {
    transform:translateX(20px) translateY(20px);
}

.framed-img.fr-img-left .item.usn_cmp_text {
    padding-left:20px;
}
.framed-img.fr-img-right .item.usn_cmp_gallery .item .image {
    transform:translateX(-20px) translateY(-20px);
}

@media (max-width:570px) {
    .framed-img.fr-img-left .item.usn_cmp_gallery .item .image {
        transform:translateX(10px) translateY(10px);
    }

    .framed-img.fr-img-right .item.usn_cmp_gallery .item .image {
        transform:translateX(-10px) translateY(-10px);
    }
}

.framed-img .item.usn_cmp_gallery .item .image:hover {
    transform:translateX(0) translateY(0);
}

.framed-img .item.usn_cmp_gallery .item .image::before {
    content: "";
    position:absolute;
    left:-4px;
    right:-4px;
    top:-4px;
    bottom:-4px;
    border:5px groove #d8d8d8;
    transition: transform 0.5s ease;
    /*box-shadow:0px 0px 5px 2px #d8d8d8;*/
}

.framed-img.fr-img-left .item.usn_cmp_gallery .item .image::before {
    transform:translateX(-20px) translateY(-20px);
}

.framed-img.fr-img-right .item.usn_cmp_gallery .item .image::before {
    transform:translateX(20px) translateY(20px);
}

@media (max-width:570px) {
    .framed-img.fr-img-left .item.usn_cmp_gallery .item .image::before {
        transform:translateX(-10px) translateY(-10px);
    }

    .framed-img.fr-img-right .item.usn_cmp_gallery .item .image::before {
        transform:translateX(10px) translateY(10px);
    }
}

.framed-img .item.usn_cmp_gallery .item .image:hover::before {
    transform:translateX(0) translateY(0);
} 

/* <-- Pods button hover appear --> */

.btn-slide-down .item .inner .info p.link {
    padding-top:0!important;
    margin-top:0!important;
    max-height: 0;
    opacity:0;
    transition: max-height 0.5s ease-in-out, opacity 1s ease-in-out;
    justify-content:end!important;
}

.btn-slide-down .item .inner:hover .info p.link {
    max-height: 100px;
    opacity:1;
}

/* <-----  BUTTONS  -----> */

/* ****Button c4**** */ 

.btnNetbee {
  padding: 14px 30px!important;
  color: #d8d8d8!important;
  background: #404040!important;
  border-radius: 0!important;
  overflow: hidden;
  transition: all 0.3s ease!important;
}

.btnNetbee:hover {
    transform:translateY(-2.5px);
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.75)!important;
}

.btnNetbee:hover::before,
  .btnNetbee:hover::after {
    -webkit-animation-play-state: paused;
    animation-play-state: paused; 
}

.btnNetbee::before,
.btnNetbee::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  opacity: 0.8;
}

.btnNetbee::before {
  animation: shineMove 6s infinite;
}

.btnNetbee::after {
  animation: shineMove 6s infinite 1.2s;
}

@keyframes shineMove {
  0% {
    left: -75%;
  }
  20% {
    left: 125%;
  }
  100% {
    left: 125%;
  }
}

/* ****Button c3**** */ 

.link .btn.c3-btn-bg::before,
.link .btn.c3-btn-bg::after,
button.btn.c3-btn-bg::before,
button.btn.c3-btn-bg::after {
    transition: width 0.3s ease-in-out 0s;
}

a:hover .link .btn.c3-btn-bg span {
    background:transparent;
}

.btn.c3-btn-bg {
    background:transparent!important;
}

.btn.c3-btn-bg-hover-solid:hover > span {
    background:transparent!important;
}

.btn.c3-btn-bg::before,
.btn.c3-btn-bg::after{
    content: "";
    position:absolute;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    border-radius:30px;
    
}

.btn.c3-btn-bg::before {
    border-right:2px solid #fff;
    border-left:2px solid #fff;
}

.btn.c3-btn-bg::after {
    width:50%;
    left: 0;
    right:0;
    top: 0;
    bottom: 0;
    border-top:2px solid #fff;
    border-bottom:2px solid #fff;
    border-radius:30px;
}

.btn:hover.btn.c3-btn-bg::after {
    width:100%;
}

/* <-- title seperator --> */

.preheading {
    margin:auto;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.preheading.homeText {
    width:200px;
}

.preheading.footerText {
    width:150px;
}

.preheading::before {
    background:#fff;
    content:" ";
    height:2px;
    position:absolute;
}

.preheading.homeText::before {
    width:100px;
    left:-90px;
}

.preheading.homeText.eng::before {
    width:100px;
    left:-120px;
}

.preheading.footerText::before {
    width:100px;
    left:-110px;
}

.preheading.footerText.eng::before {
    left:-140px;
}

.preheading::after {
    background:#fff;
    content:" ";
    height:2px;
    position:absolute;
}

.preheading.homeText::after {
    width:100px;
    right:-90px;
}

.preheading.homeText.eng::after {
    width:100px;
    right:-120px;
}

.preheading.footerText::after {
    width:100px;
    right:-110px;
}

.preheading.footerText.eng::after {
    right:-140px;
}

.preheading .banner-title {
    /*width:90px;*/
    height:auto;
    vertical-align:middle;
    white-space:nowrap;
    text-align: center; 
    color: #fff;
}

@media (max-width:470px) {
    .preheading.homeText::before {
        width:70px;
        left:-50px;
    }
    
    .preheading.footerText::before {
        width:70px;
        left:-75px;
    }
    
    .preheading.footerText.eng::before {
        width:60px;
        left:-100px;
    }
    
    .preheading.homeText::after {
        width:70px;
        right:-50px;
    }
    
    .preheading.footerText::after {
        width:70px;
        right:-75px;
    }
    
    .preheading.footerText.eng::after {
        width:60px;
        right:-100px;
    }
    
    .preheading .banner-title {
        /*width:45px;*/
    }
}

@media (min-width:471px) and (max-width:992px) {
    .preheading.homeText::before {
        width:100px;
        left:-80px;
    }
    
    .preheading.footerText::before {
        width:70px;
        left:-70px;
    }
    
    .preheading.footerText.eng::before {
        width:50px;
        left:-90px;
    }
    
    .preheading.homeText::after {
        width:100px;
        right:-80px;
    }
    
    .preheading.footerText::after {
        width:70px;
        right:-70px;
    }
    
    .preheading.footerText.eng::after {
        width:50px;
        right:-90px;
    }
    
    .preheading img {
        width:70px;
    }
}