:root {
  --orange: #F37021;
  --red: #DC3545;
}
:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}
@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}
body{
  padding: 0;
  margin: 0;

}
.container{
  /*max-width: 70%;*/
  margin: auto;
  max-width: 95%;



}
.promoInHead{
  width: 100%;
  background-color: var(--orange);
  text-align: center;
  color: white;
  padding-top: 0;
  margin-top: 0;
}
.promoInHead__title{
  font-weight: 600;
  padding: 5px;
  margin: 0;
  font-size: 24px;
}
.header{
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}

.header__logo > img{
  max-width: 80%;
  margin: auto;
}

.titleSection{

 background-image: url('../img/bg_ceramica.png');
  background-size: cover;
  background-position: center;
  color: white;
  height: auto;
  /*min-height: 70vh;*/
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  transition: 1s ease;
}
.titleSection__flex{
 /*display: flex;*/
 /* justify-content: space-between;*/
}
/*.titleSection__description{*/
/*  width: 40%;*/
/*}*/
.titleSection__h1{
  margin: 0;
  font-size: 45px;
  font-weight: 700;
}
.titleSection__description > p{
  font-weight: 400;
  padding:0;
  line-height: 165%;
}
.titleSection__price{
  text-align: center;
}
.titleSection__oldPrice{

  color: #FFF;
  font-size: 45px;
  font-style: italic;
  font-weight: 200;
  letter-spacing: .45px;
  text-decoration: line-through;
  text-decoration-thickness: 1px;

}

.titleSection__discount{

  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.45px;
  padding: 5px 10px;
  margin: auto;
  background-color: var(--red);
  color: white;
 margin-left: 1em;



}
.titleSection__btn {
     appearance: none;
     background-color: #F37021FF;
     box-shadow: 10px 10px 4px 0 #000;
     box-sizing: border-box;
     color: white;
     cursor: pointer;
     display: inline-block;
     font-size: 16px;
     font-weight: 700;
     line-height: normal;
     text-align: center;
     text-decoration: none;
     transition: all 200ms cubic-bezier(.23, 1, 0.32, 1);
     user-select: none;
     -webkit-user-select: none;
     touch-action: manipulation;
     will-change: transform;
   }

.titleSection__btn:disabled {
  pointer-events: none;
}

.titleSection__btn:hover {
  color: #fff;
  background-color: #e56416;
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  transform: translateY(2px);
}

.titleSection__btn:active {
  box-shadow: none;

}



.titleSection__newPrice{
  color: var(--orange);
  font-size: 45px;
  font-style: normal;
  font-weight: 700;
  line-height: 3;
  letter-spacing: .45px;
}
.titleSection__gallery{
  /*width: 50%;*/
  /*position: relative;*/
}
.titleSection__gallery > img, .titleSection__gallery_mobile > img{
  cursor: pointer;
  position: absolute;
  z-index: var(--z);
  left: var(--left);
  top: var(--top);
  transition: 1s ease;
  max-width: 20vw;
}
.titleSection__gallery:hover img{
  /*transform: translateX(calc(var(--left) + 50%));*/
  /*transform: translateY(calc(var(--top) - 50%));*/
  top: var(--top-after);
  left: var(--left-after);
  transition: 1s ease-in-out;
}
.charSection{
  display: flex;
  justify-content: center;
  margin: 25px auto;
  flex-wrap: wrap;
}
.charSection_item{
  /*max-width: 15%;*/
  text-align: center;
  padding: 15px;
  height: 100%;
}
.charSection_item__description{
  padding-top: 5px;
  display: grid;
  align-content: space-between;
  height: 50%;
}
.charSection_item >img{
  max-width: 100px;
  height: 100px;
  margin: auto;

}
.charSection__title{
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.24px;
}

.payAndServices{
  background-image: url('../img/bg_gradient.png');
  background-size: cover;
  padding: 31px 15px;
  min-height: 60vh;
}

.payAndServices__payMethods > img {

  padding: 15px;
}
.payAndServices__payParts > img{

  padding: 15px;
}
.payAndServices__description{
  justify-content: start;

}
.payAndServices__description > img{


  max-width: 35vw;
  /*left: -10%;*/
}
.payAndServices__description > p {
  width: 50%;
  position: relative;
  left: 0;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.45px;
  text-align: center;
}

.services{
  margin: 15px auto;

}
.services__title{
  text-align: center;

}
.services__title > p{
  background-color: var(--orange);
  color: white;
  margin: auto;
  display: flex;
  align-items: center;
  /*padding: 43px;*/
  /*font-size: 36px;*/
}
.services__items{
  display: flex;
  justify-content: end;
  flex-wrap: wrap;


}
.services__items > img {
  transition: .5s ease;
}
.services__items > img:hover {
  transform: scale(1.2);
  transition: .5s ease;
}

.contactForm{
  margin: 25px auto;
  color: white;
  padding: 35px;

  background-image: url("../img/bg_form.png");
  background-size: cover;
  background-position: left;
  width: 1240px;
  min-height: 448px;
}

.checkBox input[type=checkbox]{
   position: absolute;
   opacity: 0;
   box-sizing: border-box;
   padding: 0;
 }
.checkBox input[type=checkbox] + label{
  color: white;
  position: relative;
  cursor: pointer;
  margin: .5rem;
  padding: .5rem;
  transition: all .5s ease;
  font-weight: bold;

}

.checkBox label::before{
  content: '';
  margin-right: 10px;
  display: inline-block;
  vertical-align: text-top;
  width: 20px;
  height: 20px;
  background: none;
  border: 1px solid white;

  transition: all .5s ease;
}
.checkBox input[type=checkbox]:checked + label::before{
  background: transparent;
  content: '✓';
  text-align:center;
  color: white;
  border: 1px solid grey;
  animation: checkBox-check .3s;
}
.checkBox input[type=checkbox]:checked + label{
  color: #ffffff;

}
.checkBox input[type=checkbox]:disabled + label {
  cursor: default;
  opacity: 0.3;
}
.checkBox input[type=checkbox]:disabled + label img {
  opacity: 0.3;
}
.checkBox input[type=checkbox]:disabled + label:hover{
  border-left: 2px solid transparent;
}

@keyframes checkBox-check{
  0%{
    transform: scale(0);
  }
  90%{
    transform: scale(1.9);
  }
  100%{
    transform: scale(1);
  }
}

/*select product*/







/*Simple radio btn input CSS*/
.custom-control-label {
  cursor: pointer;
}

.cap-opt-1 {
  display: inline-block;
  min-width: 50px;
}


/*Card Button CSS*/



.card-radio-btn .content_sub {
  color: #9e9e9e;
  font-size: 14px;
}

.card-input-element + .card {
  width: 100px;
  height: 100px;
  margin: 0;
  justify-content: center;
  color: white;
  box-shadow: none;
  border: 2px solid transparent;

  text-align: center;
  -webkit-transition:  0.3s;
  -o-transition:  0.3s;
  transition:  0.3s;
}

.card-input-element + .card:hover {
  cursor: pointer;
}

.card-input-element:checked + .card {
  border: 2px solid var(--orange);
  -webkit-transition:  0.3s;
  -o-transition:  0.3s;
  transition:  0.3s;
  transform: translateY(-15px);
  z-index: 10;
}



@-webkit-keyframes fadeInCheckbox {
  from {
    opacity: 0;
    -webkit-transform: rotateZ(-20deg);
  }

  to {
    opacity: 1;
    -webkit-transform: rotateZ(0deg);
  }
}

@keyframes fadeInCheckbox {
  from {
    opacity: 0;
    transform: rotateZ(-20deg);
  }

  to {
    opacity: 1;
    transform: rotateZ(0deg);
  }
}


/*product section*/