/**
 * Description: Mac Usato - Detail
 * Version: 1.0.2
 * Last update: 2021-05-04
 * Copyright (C) 2021 Mac Usato
 */

.detail-header .detail-price{font-weight: 600;}

.detail-description{font-size: 16px;}
.penality-description{height: 200px;overflow-y: hidden;-webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);}
.detail-img{width:470px; height:400px; overflow: hidden;border-color: transparent!important; background-position: center;background-repeat: no-repeat;background-color: #ffffff;}
.detail-img-custom{height:402px;}
.detail-sidebar{position: relative!important; padding-left: 1.25rem; padding-right: 1.25rem;}
.detail-specs li{border: 0;padding-left: 0;padding-top: 0; padding-bottom: 8px;}
.detail-specs li img{float: left;width: 18px;height: 18px; margin: 2px 3px 0 0; opacity: 0.5;}
.detail-contact{position: absolute;bottom:1.25rem;left: 1.25rem; right:1.25rem;}
.detail-contact .btn.btn-primary.btn-lg img{margin: -5px 5px 0 0;filter: invert(96%) sepia(8%) saturate(425%) hue-rotate(183deg) brightness(108%) contrast(100%);}

.social-counter{margin: 0 0 0 0.2rem;}

.social-button {margin: 0!important;line-height: 1.0!important;}
.social-button img{width: 20px; height: 20px;margin-top: -6px;filter: invert(46%) sepia(0%) saturate(1589%) hue-rotate(159deg) brightness(86%) contrast(96%);}
.social-button-active img{filter: invert(45%) sepia(100%) saturate(5257%) hue-rotate(201deg) brightness(104%) contrast(400%);}
.navigation-group{opacity:0.6;}

.carousel {border: 1px solid rgba(0, 0, 0, 0.121569); border-top-left-radius: 4px; border-bottom-left-radius: 4px;}
.grade-card{position: unset;}
.detail-badge{font-weight: normal; font-size: 0.6em;margin: 4px 0 0 0.5em;border: 0;}

.extra-list img{width: 18px; height: 18px;float: left;margin: 3px 5px 0 0;}

.validation-box{margin-bottom: 0.7rem;}
.validation-badge-small{background-color: #f8f9fa; color: #33cc00;position: absolute;}
.validation-badge-small img {filter: invert(65%) sepia(50%) saturate(4332%) hue-rotate(66deg) brightness(100%) contrast(107%);width:15px;height:15px;}
/*.validation-badge{background-color: #FFFFFF; color: #33cc00; border: 2px solid #EFEFEF; font-weight: normal;line-height: 1.8!important; font-size: 1em;}
.validation-badge-small{background-color: #FFFFFF; color: #33cc00; border: 2px solid #EFEFEF; font-weight: normal;line-height: 14px; font-size: 0.6em;}
.validation-badge img, .validation-badge-small img, .icon-success{filter: invert(65%) sepia(50%) saturate(4332%) hue-rotate(66deg) brightness(100%) contrast(107%);}*/

.banner-side{padding:15px 0;overflow: hidden;}

.related-items{text-align: center;}
/*.related-items .item-card{width: auto; max-width: 205px;}*/
.related-items .item-card .card-img-top{height: 203px!important;display: block;background-position: center; background-size: contain;background-repeat: no-repeat;}
.related-items .item-card .card-body{text-align: left; height: auto;}
.related-items .item-card .card-body h2{font-size: 1rem;min-height: 37px;height: auto;}
.related-items .item-card .card-body h2.text-primary{font-size: 1.5rem;}
.related-items .item-card span.badge{font-size: 12px;position: absolute;margin: 5px 0 0 5px;}
.related-items .item-card .ps-logo{width:100%;height:50px; text-align:center; padding-top:10px;}
.related-items .item-card .ps-logo img{border-radius: 5px;}
.related-items .item-card .btn-outline-success {margin-left: 8px;font-size: 0.8rem;display: inline-block;vertical-align: top;margin: 0 5px 0 0;font-weight: normal;padding: 0 0.2rem;line-height: 17px;}
.carousel-mask {position: absolute;width: 100%;height: 45px;background-color: #FFFFFF;bottom: 5px;}
.carousel-banner-container{width: 100%; height:60px;position:absolute;bottom:0;left:0; right:0;background-color: #FFFFFF; text-align: center;}
.carousel-banner-container .carousel-banner{width:468px; height:60px; position:relative;margin-left: auto; margin-right: auto;}

.detail-group .card {flex:none;}

.benckmarks .progress{height: 0.5rem;}



@media (min-width: 640px) {

}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199px) {
  .detail-img{width:100%;}
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991px) {
  .card-group .container-card {
    border: 1px solid rgba(0,0,0,.125)!important;
    border-radius: .25rem!important;
    display: block;
    flex: 1 0 100%;
  }
  .related-items .related-card{display: inline-block; width: 46%;max-width: 46%; margin: 0 auto 15px auto!important;}
  .detail-contact{position: relative;left: 0;right: 0;margin-top: 20px;}
  .carousel,.detail-img{border-top-right-radius:4px;border-bottom-right-radius:4px;}
  .card-group .card{border-radius: 4px!important;}
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767px) {
  .related-items .related-card {margin-left: 0.5rem!important; margin-right: 0.5rem!important;}
  .related-items .item-card{max-width: 100%;}
  .carousel-mask {height: 40px;}
  .related-items .item-card .card-body h2 a{font-size: 18px!important;}
}

/* Extra small devices (portrait phones, less than 576px) */
@media screen and (max-width: 575px) {
  .card-img-top{width: 100%;height: auto!important;}
  .detail-contact{position: relative;}
  .related-items .related-card{width: 100%;max-width: 100%;}
  .related-items .card-body{font-size: 18px;padding-top: 1rem; padding-bottom: 1rem;}
  .detail-header .text-right{padding-top: 0rem;}
  .related-items .item-card .card-img-top{margin-top: 1rem;}
  .validation-badge{font-size: 14px;}
  #chatButton {display: none;}
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 991px) {
  .related-items .related-card{border-radius: 4px!important; border-left: 1px solid rgba(0, 0, 0, 0.125)!important;}
}
