body {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
}

.wrap-img-video, .collections, .product-accessories, .rev-home, .onethird-banners, .tecno-intro, .ybc_block_featured,
.product-miniature, .tabs, .page-product-box, .total-rating-bottom, .why-bg,.bg-philosophy,.media-logos, #footer,.category-box{content-visibility:auto;}
.wrap-img-video{contain-intrinsic-size: 450px;}
.product-accessories, .collections{contain-intrinsic-size: 742px;}

@media (min-width: 992px) {.product-miniature{contain-intrinsic-size: 564px;}}




/* General & Typos */

.text-normal{ font-weight: 400; text-transform: none;}
strong {font-weight: 700;}

.text-center { text-align: center;}
.text-right { text-align: right;}

.mt-7{margin-top: 7rem !important;}

.bg-white {background-color: #FFFFFF;}
.bg-gray {background-color: #F7F7F7;}
.bg-beige {background-color: #FDF1E3;}
.bg-black {background-color: #000; color: #fff;}



.h1, h1, .h2, h2, .h3, h3{  line-height: 1.3; font-weight: 600;}
.h1, h1, .h2, h2{ margin-bottom: 15px; }
h1 { font-size: 30px}
h2 { font-size: 26px}
.h3 { font-size: 28px}


.lead { font-size: 20px; line-height: 1.4}

ul.big-font li{
  padding-left: 37px;
  margin-top: 20px;
  background-image: url(../img/list-style.png);
  background-repeat: no-repeat;
  background-size: 23px 22px;
  background-position: left 7px;
}


svg {fill: #1D1D1D;}
svg:hover {fill: #000;}


a {color: #1D1D1D;}
a:focus, a:hover {color: #393939; text-decoration: underline;}
a, .btn{ -moz-transition:all 0.5s; transition:all 0.5s; -webkit-transition:all 0.5s;}

.btn{ position: relative; font-weight: 600;}
.btn-primary, .btn-secondary, .btn-tertiary, .btn-inverse, .btn-outline {
  text-transform: uppercase;
  padding: .9rem 2.5rem;
  letter-spacing: .05em;
}
.btn-inverse{ border-color: #454350; background-color: #fff; color: #454350;}
.btn-inverse:hover{border-color: #1D1D1D; color:#1D1D1D;}
.btn-outline{border: 1px solid #fff; color:#fff; background:transparent;}
.btn-outline:hover{background-color:#1D1D1D; color: #fff}







.animated {
  -webkit-animation-duration: .4s;
  animation-duration: .4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
    transform: translate3d(0, 20%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
    transform: translate3d(0, 20%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.fadeInUpSlow {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
.fadeInSlow {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  animation-duration: .8s;
  -webkit-animation-duration: .8s;
}


.delay3 {animation-delay: 0.3s; -webkit-animation-delay: 0.3s;}
.delay5 {animation-delay: 0.5s; -webkit-animation-delay: 0.5s;}
.delay9 {animation-delay: 0.9s; -webkit-animation-delay: 0.9s;}
.delay12 {animation-delay: 1.2s; -webkit-animation-delay: 1.2s;}














/* Forms & Modal */


.modal-content { border-radius: 0;}
.modal.fade .modal-dialog {
  transform: scale(.95);
  opacity: 0;
  transition: -webkit-transform .1s ease-out;
  transition: transform .1s ease-out;
  transition: transform .1s ease-out,-webkit-transform .1s ease-out;
}
.modal.in .modal-dialog {
  opacity: 1;
  transform: scale(1);
}
.modal-content { margin: 0 auto;}
.modal-body figure {margin: 0;}
.modal-body .image-caption { display: none}

.modal-backdrop { background-color: #E1E1E1;}
.modal-backdrop.in { opacity: .87;}
.modal-content { border: 0;}
.modal-header .close { opacity: 1}
.modal-header .close .material-icons { color: #1d1d1d}








.bg-banner, .bg-banner-promo, .big-image-banners{background-repeat: no-repeat; background-size: cover;}
.bg-banner, .bg-banner-promo{background-position: right; margin-bottom: 10px}

.big-image-banners {background-position: center center; height: 350px;}
.big-image-banners .banner-text-block { position: absolute;bottom: 0;padding: 15px; left: 0; right: 0; text-align: left;}
.big-image-banners .banner-text-block .text-cont{  max-width: 1110px; margin: 0 auto;}
.big-image-banners .banner-text-block .text-cont .h1{
  color: #fff;
  line-height: 1.2;
  text-transform: uppercase;
}
.big-image-banners .banner-text-block .text-cont h1 span{
  font-weight:400; font-size:75%; text-transform: none;
  display: block;
}


.black-cta-bar{background-color:#000; color:#fff; clear: both;  padding: 15px 0}
.black-cta-bar span{display: inline-block; margin: 5px 0;}

.black-circle{background-color:#000; color:#fff; width: 100%; aspect-ratio: 1 / 1; aspect-ratio: 1;border-radius: 50%; display: flex; align-items: center; justify-content: center;}

.block-social ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin: 0}
.block-social ul li{height:40px;width:40px; display:inline-block;margin:0 4px;cursor:pointer; border-radius: 50%; background-color: #000; overflow: hidden; position: relative;}
.block-social ul li:hover{opacity: .7;}
.block-social ul li a{display:block;height:100%; width: 100%; white-space:nowrap;text-indent:100%;overflow:hidden; position: absolute; top: 0; left: 0}
.block-social ul li i{background-repeat: no-repeat; background-size: cover; display:block;height:100%; width: 100%;}

.block-social.contacts-links ul{ justify-content: center;}
.block-social.contacts-links ul li{background-color: #fff}


.facebook i{background-image:url(../img/social/facebook-inverse.svg); }
.instagram i{background-image:url(../img/social/instagram-inverse.svg);}
.whatsapp i{background-image:url(../img/social/whatsapp.png);}
.phone i{background-image:url(../img/social/phone.png);}
.mail i{background-image:url(../img/social/email.png);}

footer{ padding-top: 1px;}
.qrcode img{float:left; margin: 0 20px 10px 0;}










/* Media Queries */

@media (min-width: 360px) {
  .h1, h1{ font-size: 32px;}
}

@media (min-width: 600px) {
  .big-image-banners { height: 480px;}
}

@media (max-width: 767px) {
  .block-social ul{justify-content: center;}

  .bg-banner-factory{background-image: url(../img/banner-factory-mobile.jpg);}
  .bg-banner-promo{background-image: url(../img/promo/banner-promo-mobile.jpg);}
  .bg-banner-studio{background-image: url(../img/banner-studio-mobile.jpg);}
  .bg-banner-bergamo{background-image: url(../img/banner-bergamo-mobile.jpg);}
}


@media (min-width: 768px) {
  .pt-md-3{padding-top: 3rem !important;}
  .pb-md-3{padding-bottom: 3rem !important;}
  .py-md-3 {padding-top: 3rem !important;padding-bottom: 3rem !important;}
  .text-md-right { text-align: right;}

  .h1, h1{ font-size: 46px;}
  .h2, h2, .page-heading{ font-size: 42px;}
  .big-font { font-size: 24px;}
  .big-image-banners .banner-text-block .text-cont .h1{font-size: 38px;}

  .big-image-banners .banner-text-block {bottom:10%;}

  .flex-boxes {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
  }

  .bg-banner-factory{background-image: url(../img/banner-factory.jpg); margin-bottom: 50px;}
  .bg-banner-promo{background-image: url(../img/promo/banner-promo.jpg); margin-bottom: 50px;}
  .bg-banner-studio{background-image: url(../img/banner-studio.jpg);}
  .bg-banner-bergamo{background-image: url(../img/banner-bergamo.jpg);}

}


@media (max-width: 991px) {
  footer{ margin-top: -3.5rem;}
}






@media (min-width: 992px) {
  .p-lg-4 {padding: 5rem !important;}
  .mb-lg-3 {margin-bottom: 3rem !important;}

  .lead { font-size: 33px;}

  .bg-banner, .bg-banner-promo{margin-bottom: 110px;}

  .half-banners { width: 50%; float: left;}

  .flex-lg{
    display: flex;
  }


  .block-social.contacts-links {float: right}
  .block-social.contacts-links ul{margin: 0 0 0 10px}

  footer{ padding-top: 3rem !important;}
  .qrcode{padding: 30px;}

}


@media (min-width: 1200px) {
  .big-image-banners { height: 575px;}
}

@media (min-width: 1280px) {
  .h1, h1{ font-size: 53px;}
  .p-xl-5{padding: 6rem !important;}
  .py-xl-4{padding-top: 4rem !important; padding-bottom: 4rem !important;}
}

@media (min-width: 1400px) {
  .big-image-banners { height: 610px;}
}

@media (min-width: 1680px) {
  .big-image-banners { height: 670px;}
}

@media (min-width: 1900px) {
  .big-image-banners { height: 800px;}
}