html {
  /* font-size: 15px; */
  scroll-behavior: smooth;
}
body {
  font-family: 'Poppins', sans-serif;
  background-color: #FFF;
  color: #282828;
  margin: 0;
}
img {
  width: 100%;
}
.basker{
  font-family: 'Libre Baskerville', serif;
}

.misc {
  width: 160px;
}
.lBoxTop {
  background-image: url(../../images/landing/landing-top-XS.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  position: relative;
}
.lBoxTop:after {
  content: '';
  width: 100%;
  height: 100%;
  background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1.0) 100%);
  position: absolute;
  top: 0;
  left: 0;
}
.lBoxTop::before {
  content: '';
  width: 100%;
  /* height: 11em; */
  background: #11181F;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.contenedor {
  width: 90%;
  max-width: 1600px;
  margin: 0 auto;
}
.BoxTopHeader {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.BoxTopHeaderCol1 {
  width: 100%;
  text-align: center;
  order: 2;
}
.BoxTopHeaderCol1 img {
  width: 90%;
  max-width: 400px;
  margin: 3em 0;
}
.BoxTopHeaderCol2 {
  width: 100%;
  order: 1;
  text-align: right;
  margin-top: 2em;
}
.btn {
  background-color: rgba(198, 169, 133, .7);
  color: #000;
  text-decoration: none;
  padding: .8em 1.5em;
  text-transform: uppercase;
  font-size: .875rem;
  letter-spacing: .05em;
  border: none;
  box-sizing: border-box;
  height: 42px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  transition: all .3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.btn:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(198, 169, 133, .7);
    z-index: -2;
}
.btn:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #8a765d;
    transition: all .3s;
    z-index: -1;
}
.btn:hover {
  color: white;
}
.btn:hover:before {
  width: 100%;
  top: 0;
}
h4  {
  display: block;
  color: #C9A880;
  font-size: .9em;
  letter-spacing: .4em;
  margin: 0;
  padding-top: 2em;
  text-align: left;
  font-weight: normal;
  text-transform: uppercase;
}
.lBoxTopF {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 5%;
}
h1 {
  display: block;
  font-size: 2.5em;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-family: 'Libre Baskerville', serif;
  color: #FFF;
  margin-top: .2em;
  margin-right: .5em;
}
.lBoxTopFCol1 {
  width: 100%;
}
.lBoxTopFCol2 {
  width: 100%;
}
.lBoxTopFCol1 img {
  margin-bottom: 5em;
}
.BoxTopFCol2Form {
  background-color: #FFF;
  width: 100%;
  max-width: 550px;
  padding: 1.5em 1em;
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-wrap: wrap;
}
.col {
/*  float: left;*/
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0.75rem;
  min-height: 1px;
}
.col.s6 {
  width: 100%;
}
.input-field {
  position: relative;
}
input + label, textarea + label {
  display: block;
  content: "";
  position: absolute;
  /* top: 30%; */
  top: 2em;
  left: .4rem;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: .05em;
  transform-origin: 0% 100%;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
  background-color: #FFF;
  padding: .3em .5em;
  box-sizing: border-box;
  width: 100%;
}
input, textarea {
  font-family: 'Poppins', sans-serif;
  border: none;
  border-bottom: 1px solid #CCC;
  padding: .5em 0;
  box-sizing: border-box;
  width: 100%;
  font-size: 1rem;
  color: #666;
  text-transform: uppercase;
  height: 3rem;
  resize: none;
}
textarea {
  height: 8em;
}
input:focus-visible, textarea:focus-visible {
	outline: none !important;
}
input.active + label{
  top: -5%;
  color: #999;
}
textarea.active + label{
  top: -13%;
  color: #999;
}
input[type="text"]:not(.browser-default):focus:not([readonly]),textarea:not(.browser-default):focus:not([readonly]), input[type="email"]:not(.browser-default):focus:not([readonly]){border-bottom:1px solid #C9A880;-webkit-box-shadow:0 1px 0 0 #C9A880;box-shadow:0 1px 0 0 #C9A880;}
input[type="email"]:not(.browser-default).validate + label, input[type="email"]:not(.browser-default):focus:not([readonly]) + label, input[type="text"]:not(.browser-default):focus:not([readonly]) + label, textarea:not(.browser-default):focus:not([readonly]) + label{color:#666}
input[type="checkbox"]:checked + span:not(.lever)::before{border:2px solid transparent;border-bottom:2px solid #C9A880;border-right:2px solid #C9A880;background:transparent;}
input.invalid:not([type]), input.invalid:not([type]):focus, input.invalid[type="text"]:not(.browser-default), input.invalid[type="text"]:not(.browser-default):focus, input.invalid[type="password"]:not(.browser-default), input.invalid[type="password"]:not(.browser-default):focus, input.invalid[type="email"]:not(.browser-default), input.invalid[type="email"]:not(.browser-default):focus, input.invalid[type="url"]:not(.browser-default), input.invalid[type="url"]:not(.browser-default):focus, input.invalid[type="time"]:not(.browser-default), input.invalid[type="time"]:not(.browser-default):focus, input.invalid[type="date"]:not(.browser-default), input.invalid[type="date"]:not(.browser-default):focus, input.invalid[type="datetime"]:not(.browser-default), input.invalid[type="datetime"]:not(.browser-default):focus, input.invalid[type="datetime-local"]:not(.browser-default), input.invalid[type="datetime-local"]:not(.browser-default):focus, input.invalid[type="tel"]:not(.browser-default), input.invalid[type="tel"]:not(.browser-default):focus, input.invalid[type="number"]:not(.browser-default), input.invalid[type="number"]:not(.browser-default):focus, input.invalid[type="search"]:not(.browser-default), input.invalid[type="search"]:not(.browser-default):focus, textarea.materialize-textarea.invalid, textarea.materialize-textarea.invalid:focus, .select-wrapper.invalid > input.select-dropdown, .select-wrapper.invalid > input.select-dropdown:focus {
	border-bottom: 1px solid #F44336;
	-webkit-box-shadow: 0 1px 0 0 #F44336;
	box-shadow: 0 1px 0 0 #F44336;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}
input[type='radio'] {
  cursor: pointer;
  accent-color: #C6A985;
  height: 16px;
  width: 14px;
}
input[type="radio"] + span {
  cursor: pointer;
}
input[type='checkbox'] {
  cursor: pointer;
  accent-color: #C6A985;
  height: 16px;
  width: 16px;
}
p.radios {
  margin: 0;
}
.radios label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: 1em;
}
.mt-3 {
  margin-top: 1.5rem;
}
.mb-2 {
  margin-bottom: .5rem;
}
.ml-2 {
  margin-left: .7rem !important;
}


.saddle {
  background-color: #11181F;
  color: #FFF;
  padding: 10em 0 4em;
  font-size: 1.15em;
}
.saddleG {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1em;
}
.saddleG1 {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.saddleG2 {
  grid-column: 2;
  grid-row: 1;
}
.saddleG3 {
  grid-column: 2;
  grid-row: 2;
}
.saddleG2 img, .saddleG3 img {
  object-fit: cover;
  height: 100%;
}
.saddleF {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.saddleFCol2 {
  padding: 2em 0;
  box-sizing: border-box;
}
.saddleFCol2 div {
  margin-top: 6em;
  display: block;
}


.w-100 {
  width: 100%;
}
.w-50 {
  width: 50%;
}
.benefits {
  background-color: #27333F;
  color: #FFF;
}
h2, h3 {
  font-size: 1.7em;
  font-weight: 400;
  font-family: 'Libre Baskerville', serif;
  text-transform: uppercase;
  letter-spacing: 5px;
}
.benefitsF {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 4em 5%;
}
.benefitsFCol1, .benefitsFCol2 {
  width: 100%;
}
.benefitsFCol1 .misc {
  margin-bottom: 50px;
}
.benefitsFCol1 a {
  margin-top: 50px;
  display: inline-block;
}
.benefitsFCol1F {
  display: flex;
  flex-wrap: wrap;
}
.benefitsFCol1FI {
  width: 50px;
}
.benefitsFCol1FI svg {
  width: 35px;
}
.benefitsFCol1FT {
  width: calc(100% - 50px);
  font-size: .9375em;
}
.benefitsFCol1FT p {
  font-weight: 600;
  letter-spacing: .2px;
  margin: 0 0 .5em;
}
.benefitsFCol1FT ul {
  padding-left: 0;
  margin: 0 0 2.5em;
}
.benefitsFCol1FT li {
    list-style-type: none;
    position: relative;
    margin-left: 1.5rem;
}
.benefitsFCol1FT li:before {
    content: " ";
    border: .15rem solid #FFF;
    border-radius: 99rem;
    height: 0;
    width: 0;
    top: .7em;
    left: -1.5em;
    position: absolute;
}
.benefitsFCol2 {
  background-image: url(../../images/landing/saddle-fitter-benefits-XS.webp);
  background-image: url(../../images/landing/saddle-fitter-benefits-XS.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  align-self: stretch;
  min-height: 500px;
}
.choose {
  padding: 6em 2em 0;
  text-align: center;
  box-sizing: border-box;
}
.choose h3 {
  color: #11181F;
}
.choose h4 {
  text-align: center;
}
.choose .misc {
  filter: invert(1);
  margin-bottom: 50px;
}
.chooseBullets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 1000px;
  margin: 4em auto 0;
  position: relative;
  z-index: 1;
}
.chooseBulletsC {
  border-radius: 100%;
  width: 250px;
  height: 250px;
  text-align: center;
  color: #FFF;
  font-family: 'Libre Baskerville', serif;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 2em 0 0;
}
.chooseBulletsC:after {
  content: '';
  background: linear-gradient(0deg, #000 32.42%, rgba(0, 0, 0, 0.00) 132.42%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.chooseBulletsC1 {
  background-image: url(../../images/landing/montura-1.webp);
  background-image: url(../../images/landing/montura-1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.chooseBulletsC2 {
  background-image: url(../../images/landing/montura-2.webp);
  background-image: url(../../images/landing/montura-2.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.chooseBulletsC3 {
  background-image: url(../../images/landing/montura-3.webp);
  background-image: url(../../images/landing/montura-3.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.chooseBulletsCT {
  font-weight: 700;
  letter-spacing: 5px;
  font-size: .9em;
  line-height: 120%;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  width: 90%;
  margin: 0 auto;
}
.choose.contenedor, .footerData.contenedor {
  max-width: 1000px;
}
.footer {
  background-color: #1E1E1E;
  color: #FFF;
  text-align: center;
  background-image: url(../../images/landing/footer-XS.webp);
  background-image: url(../../images/landing/footer-XS.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  padding-bottom: 10em;
  box-sizing: border-box;
  margin-top: -125px;
}
.footer:after {
  content: '';
  background: linear-gradient(0deg, rgba(17, 24, 31, 0.00) 0%, #11181F 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.footerLogo {
  width: 70%;
  max-width: 360px;
  margin: 8em 1em 1em;
}
.footer .misc {
  margin: 50px 0;
}
.footerData {
  width: 90%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding-top: 125px;
}
.footer p {
  font-size: 1.125em
}

@media all and (min-width:768px){
  .lBoxTop {
    background-image: url(../../images/landing/landing-top.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
  }
  .BoxTopHeaderCol1 {
    width: 50%;
    text-align: left;
    order: 1;
  }
  .BoxTopHeaderCol2 {
    width: 50%;
    text-align: right;
    order: 2;
    margin-top: 0;
  }
  h1 {
    font-size: 3.4375rem;
  }
  .lBoxTopFCol1 {
    width: 50%;
  }
  .lBoxTopFCol2 {
    width: auto;
  }
  .BoxTopFCol2Form {
    padding: 3em 2em;
  }
  .col.s6 {
    width: 50%;
  }
  .saddle {
    padding: 10em 1em 4em;
    font-size: 1.25em;
  }
  .saddleG {
    max-width: 600px;
  }
  .saddleFCol1 {
    text-align: -webkit-right;
    text-align: -moz-right;
    text-align: -o-right; 
    text-align: -ms-right;
    text-align: right;
  }
  .benefitsF {
    padding: 0;
  }
  .benefitsFCol1 {
    width: 55%;
  }
  .benefitsFCol1 {
    padding: 4em 1em 4em 5vw;
    box-sizing: border-box;
  }
  .benefitsFCol1 .misc {
    margin-bottom: 70px;
  }
  .benefitsFCol1 a {
    margin-top: 35px;
  }
  .benefitsFCol2, .saddleFCol1 {
    width: 45%;
  }
  .saddleFCol2 {
    width: 50%;
    margin-left: 5%;
  }
  .benefitsFCol2 {
    background-image: url(../../images/landing/saddle-fitter-benefits-XS.webp);
    background-image: url(../../images/landing/saddle-fitter-benefits.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
.chooseBullets {
  justify-content: space-between;
}
  .footer {
    background-image: url(../../images/landing/footer.webp);
    background-image: url(../../images/landing/footer.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }

}