@font-face {
  font-family: 'CenturyGothic';
  src: url('/assets/fonts/CenturyGothic.ttf');
}

@font-face {
  font-family: 'CenturyGothicBold';
  src: url('/assets/fonts/CenturyGothicBold.ttf');
}

@font-face {
  font-family: 'CenturyGothicPro';
  src: url('/assets/fonts/CenturyGothicW05Regular/font.woff2');
}

@font-face {
  font-family: 'CenturyGothicProBold';
  src: url('/assets/fonts/CenturyGothicW05Bold/font.woff2');
}

@font-face {
  font-family: Century Gothic Pro;
  src: url('/assets/fonts/CenturyGothicW05Regular/font.woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: Century Gothic Pro;
  src: url('/assets/fonts/CenturyGothicW05Bold/font.woff2');
  font-weight: bold;
  font-style: normal;
}

:root {
  --primary-font: 'Century Gothic Pro', Arial, sans-serif;
}

html {
  overscroll-behavior: none;
}

body {
  font-family: var(--primary-font);
  overscroll-behavior: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

#brand {
  margin: 0;
}

#hero {
  color: white;
  background-color: black;
  position: relative;
  height: calc(80vh - 25px);

  #lang-mobile {
      display: none;
  }
}

#hero-video {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  z-index: 1;
}

button {
  border-style: none;
  padding: 0.9rem 1.5rem;
  border-radius: 20px;
  background-color: #f60100;
  color: white;
  font-weight: bold;
}

button:HOVER {
opacity: 0.65;
cursor: pointer;
}

a {
  font-weight: bold;
  display: inline-block;
  text-decoration: none;
}

a.button {
  border-style: none;
  padding: 0.8rem 1.5rem;
  border-radius: 20px;
  background-color: #f60100;
  color: white;
  font-size: 0.9rem;
}

a.button:HOVER {
background-color: var(--rojo-hover);
box-shadow: 0 1px 1px var(--gris-oscuro);
}

a.button:ACTIVE {
background-color: var(--rojo);
box-shadow: 0 3px 4px var(--gris-oscuro);
}

#hero-plus-header {
background-color: var(--blanco);
}

#hero-text-space {
display: flex;
flex-direction: column;
align-items: center;
justify-content: end;
position: absolute;
z-index: 10;
bottom: 2rem;
left: 0;
right: 0;
}

#hero-text-space h2 {
font-size: 2rem;
margin-bottom: 1.5rem;
}

#wine-2-stay {
height: 20vh;
background-color: #444444;
color: white;
position: relative;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
}

#wine-2-stay h3 {
text-align: center;
padding: 12px 0;
font-size: 1.9rem;
box-sizing: border-box;
}

#wine-2-stay #brands {
width: 95%;
margin: 0 auto;
overflow: hidden;
padding: 2rem;
padding-bottom: 0.5rem;
box-sizing: border-box;
}

#wine-2-stay #brands > div {
display: flex;
width: 100%;
justify-content: center;
animation: pasarela 80s infinite linear;
}

.play {
  animation-play-state: running;
}

.pause{
  animation-play-state: paused !important;
}

#wine-2-stay #brands > div:hover {
animation-play-state: paused;
}

#wine-2-stay .brand {
font-size: 2.5rem;
width: 300px;
}

#wine-2-stay .brand:hover {
cursor: pointer;
}

#revolution {
height: 100vh;
position: relative;
}

#revolution .parallax-video {
object-fit: cover;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: -999;
}

#revolution #revolution-text-space {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
text-align: center;
position: relative;
z-index: 10;
background-color: rgb(0, 0, 0, 0.3);
font-family: var(--primary-font);
transition: opacity 1s;
}

#revolution #revolution-text-space h2 {
font-size: clamp(2rem, 3.5rem, 3rem);
margin-bottom: 4rem;
font-family: var(--primary-font);
}

#revolution #revolution-text-space .increment-sales {
margin-top: 3rem;
margin-bottom: 1rem;
}

#revolution #revolution-text-space p {
width: clamp(60ch, 80ch, 80ch);
font-size: 1.5rem;
line-height: 30px;
}

#revolution #revolution-text-space .button {
margin-top: 3rem;
}

#testimonials-plus-qa {
position: relative;
z-index: 10;
}

#testimonials-plus-qa #testimonials {
background-color: black;
color: white;
padding: 4rem 0;
}

#testimonials-plus-qa #testimonials #testimonials-content {
width: 95vw;
height: 100%;
margin: 0 auto;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}

#testimonials-plus-qa #testimonials #testimonials-content .arrow {
width: 30px;
height: 30px;
background-color: transparent;
padding: 0;
color: rgb(100, 100, 100, 1);
}
#testimonials-plus-qa #testimonials #testimonials-content .arrow.left-btn {
  transform: rotateY(180deg) translateX(-20px);
}

#testimonials-plus-qa #testimonials #testimonials-content button {
position: relative;
z-index: 10;
}

#testimonials-plus-qa #testimonials #testimonials-content .content {
width: 90%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

#testimonials-plus-qa #testimonials h4 {
font-size: 1.8rem;
font-weight: lighter;
text-align: center;
margin: 0 auto;
  width: 80%;
}

#testimonials-plus-qa #testimonials #testimonials-content .content .testimonial {
display: flex;
margin-top: 50px;
margin-bottom: 25px;
}

#testimonials-plus-qa #testimonials #testimonials-content .content .testimonial p {
width: 40ch;
font-size: 1.5rem;
line-height: 32px;
}

#testimonials-plus-qa #testimonials #testimonials-content .content .testimonial img:nth-child(1) {
margin-right: 2rem;
}

#testimonials-plus-qa #testimonials #testimonials-content .content .testimonial img:nth-child(3) {
margin-left: 2rem;
}

#testimonials-plus-qa #testimonials #testimonials-content .content .testimonial-person p:first-child {
color: #ff0100;
font-size: 1.75rem;
font-weight: bold;
}

#testimonials-plus-qa #testimonials #testimonials-content .content .testimonial-person p:last-child {
font-size: 1rem;
margin-top: 5px;
}

.testimonials-mobile-controls {
  display: none;
}

#qa {
background-color: white;
padding: 120px 90px;
height: 50vh;
box-sizing: border-box;
transition: all 1s;
}

#qa #qa-content h3 {
font-size: 2.6rem;
margin-bottom: 2rem;
}

#qa #qa-content .faq {
font-size: 1.3rem;
background-color: #e8e8e8;
padding: 0.5rem 1rem;
}

#qa #qa-content .faq .opener {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}

#qa #qa-content .faq button.expand {
background-color: transparent;
color: black;
font-size: 2rem;
padding: 0;
margin-right: 5px;
position: relative;
bottom: 2px;
transition-duration: 200ms;
}

#qa #qa-content .faq button.expand.rotate {
transform: rotate(45deg);
}

#qa #qa-content .faq #faq-content {
width: 92%;
font-size: 1rem;
transition: all 1s;
height: 0;
margin: 0;
}

#qa #qa-content .faq #faq-content li {
margin-bottom: 40px;
}

#qa #qa-content .faq #faq-content li h6 {
font-size: 1rem;
margin-bottom: 20px;
}

#contact-section {
position: relative;
height: calc(100vh - 50px);
background-image: url("assets/images/bg_contacto.png");
background-repeat: no-repeat;
background-size: cover;
color: white;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: end;
padding: 0 5%;
background-color: black;
}

.calendly-inline-widget {
display: none;
position: absolute !important;
width:100%;
height:100%;
background-color: #000000de;
z-index: 999;
top: 0;
}
#calendly-button {
margin-top: clamp(3rem, 5vw, 5rem);
min-width: 200px;
}

#contact-section .contact-space {
width: 35%;
height: 80%;
}

#contact-section .contact-space h2 {
font-size: 3rem;
width: 18ch;
}

#contact-section .contact-space .description {
margin-top: 2rem;
width: 52ch;
}

#contact-section .contact-space #contact-ok-msg,
#contact-section .contact-space #contact-err-msg {
font-size: 1.5rem;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}

#contact-section .hero-text {
height: 60%;
display: flex;
flex-direction: column;
}

#contact-section .two-column {
display: flex;
justify-content: space-between;
align-items: center;
}

#contact-section .two-column > div {
width: 49%;
}

#contact-section .form {
background-color: rgb(0, 0, 0, 0.7);
padding: 3rem 2rem 8rem 2rem;
box-sizing: border-box;
min-width: 550px;
}

#contact-section .form a:link,
#contact-section .form a:any-link,
#contact-section .form a:visited {
color: white !important;
text-decoration: underline;
}

#contact-section .form .row-input {
margin-top: 1rem;
}

#contact-section .form label {
display: block;
font-size: 0.8rem;
}

#contact-section .form input[type="tel"] {
background-color: rgb(0, 0, 0, 0);
border: none;
color: white;
}

#contact-section .form input[type="text"],
#contact-section .form input[type="email"],
#contact-section .form textarea,
#contact-section .form input[type="checkbox"],
#contact-section .form select,
#contact-section .form .iti.iti--allow-dropdown.iti--show-flags.iti--inline-dropdown {
background-color: rgb(0, 0, 0, 0);
border-style: solid;
border: none;
border-bottom: 1px solid white;
width: 100%;
color: white;
}

#contact-section .form input[type="text"],
#contact-section .form input[type="tel"],
#contact-section .form input[type="email"],
#contact-section .form select,
#contact-section .form .iti.iti--allow-dropdown.iti--show-flags.iti--inline-dropdown {
height: 30px;
box-sizing: border-box;
}

#contact-section .form .btn-form {
background-color: #6c6c6c;
font-size: 0.7rem;
}

#contact-section .form a {
font-size: 0.7rem;
}

#contact-section .form input:-internal-autofill-selected {
background-color: rgb(0, 0, 0, 0) !important;
}

#contact-qa {
height: 50vh;
}

.iti__dropdown-content {
background-color: black !important;
color: white !important;
}

.cube {
position: relative;
}

.testimonial-card {
background-color: rgb(0,0,0,0);
transition: transform 2s;
height: 0;
display: none;
}

.testimonial-card.next {
opacity: 0 !important;
}


.testimonial-card.previous {
}

.testimonial-card.current {
opacity: 1 !important;
animation-play-state: running;
height: auto;
display: block;
}

.testimonial-card.to-previous {
/*animation: previoustestimonial 2s both ease-in-out;*/
animation: previoustestimonial 1.1s both ease-in-out;
}

.testimonial-card.to-next {
animation: nexttestimonial 1.1s both ease-in-out;
}

.testimonial-card.to-current-from-n {
animation: toCurrentFromNext 1.1s both ease-in-out;
display: flex;
flex-direction: column;
items-align: center;
height: auto;
}

.testimonial-card.to-current-from-p {
animation: toCurrentFromPrevious 1.1s both ease-in-out;
display: flex;
flex-direction: column;
items-align: center;
  height: auto;
}

@keyframes nexttestimonial {
0%{
  transform: translateX(0%) translateZ(0px) rotatey(0deg);
  opacity: 1;
}
5%{
  opacity: 0;
}
100% {
  transform: translateX(80%) translateZ(80px) rotatey(90deg);
  opacity: 0;
}
}

@keyframes toCurrentFromNext {
0%{
  transform: translateX(80%) translateZ(80px) rotatey(90deg);
  opacity: 0;
}
80%{
  opacity: 0;
}
100% {
  transform: translateX(0%) translateZ(0px) rotatey(0deg);
  opacity: 1;
}
}

@keyframes previoustestimonial {
0%{
  transform: translateX(0%) translateZ(0px) rotatey(0deg);
  opacity: 1;
}
5%{
  opacity: 0;
}
100% {
  transform: translateX(-80%) translateZ(80px) rotatey(-90deg);
  opacity: 0;
}
}

@keyframes toCurrentFromPrevious {
0%{
  transform: translateX(-80%) translateZ(80px) rotatey(-90deg);
  opacity: 0;
}
80%{
  opacity: 0;
}
100% {
  transform: translateX(0%) translateZ(0px) rotatey(0deg);
  opacity: 1;
}
}

footer {
background-color: black;
color: white;
padding: 1rem 2rem;
font-size: 0.8rem;
}

footer a:link,
footer a:any-link,
footer a:visited {
color: white !important;
}

footer > div:first-child {
display: flex;
align-items: center;
border-bottom: 1px solid white;
padding-bottom: 1rem;
}

footer > div:first-child > div {
}

footer > div:first-child > div {
display: flex;
justify-content: end;
align-items: center;
text-align: right;
flex-wrap: wrap;
}

footer > div:last-child {
padding-top: 1.5rem;
display: flex;
flex-wrap: wrap;
}

footer > div:last-child > div {
width: 50%;
min-width: 300px;
}

footer > div:last-child > div:first-child {
display: flex;
justify-content: start;
align-items: center;
}

footer > div:last-child > div:first-child span {
display: inline-block;
margin: 0 10px;
}

footer > div:last-child > div:last-child {
display: flex;
justify-content: end;
align-items: center;
text-align: right;
flex-wrap: wrap;
}

.phone-view-tel {
  display: none !important;
}

@media screen and (max-width: 668px) {
header {
  background-color: rgb(0, 0, 0) !important;
  width: 100% !important;
}

header img {
  display: none;
}
header a {
  margin-right: 0;
  padding-left: 10px;
}

.dvSelect {
  color: var(--rojo) !important;
}
#brand {
  margin-left: 50px;
}
#hero {
  min-height: 400px;
}
#hero #lang-mobile {
  display: inherit;
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: black;
  color: #cc0100;
  border: none;
}
#hero-plus-header {
  height: auto;
}
#hero-text-space h2 {
  font-size: 1.2rem;
}
#wine-2-stay h3 {
  padding: 8px 0;
  box-sizing: border-box;
  font-size: 1.6rem;
}
#wine-2-stay #brands {
  padding: 0rem;
}
#wine-2-stay #brands > div {
  /*animation: pasarela 78s infinite linear;*/
}
#revolution {
  height: auto;
}
#revolution #revolution-text-space {
  height: auto !important;
  padding: 2rem 0.5rem !important;
  box-sizing: border-box !important;
}
#revolution #revolution-text-space p {
  font-size: 1rem;
  width: auto;
}
#revolution #revolution-text-space h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}
#revolution #revolution-text-space p:nth-child(2) {
  margin-bottom: 10px;
}
#revolution #revolution-text-space .button {
  margin-top: 10px;
}
#testimonials-plus-qa {
  height: auto;
}
#testimonials-plus-qa #testimonials {
  height: auto;
  position: relative;
}
#testimonials-plus-qa #testimonials #testimonials-content {
  padding: 2.5rem 0;
  height: auto;
  width: auto;
}
#testimonials-plus-qa #testimonials #testimonials-content .arrow {
  position: absolute;
  top: 40%;
  background-color: black;
  color: transparent;
  border-color: transparent;
  border: 1px solid;
  width: 25px;
  height: 25px;
}
#testimonials-plus-qa #testimonials #testimonials-content .arrow.left-btn {
  left: 20px;
}
#testimonials-plus-qa #testimonials #testimonials-content .arrow.right-btn {
  right: 20px;
}
#testimonials-plus-qa #testimonials h4 {
  font-size: 1.6rem;
  font-weight: lighter;
}
#testimonials-plus-qa #testimonials #testimonials-content .content .testimonial-person p:first-child {
  font-size: 1.4rem !important;
}
#testimonials-plus-qa #testimonials #testimonials-content .content .testimonial {
  display: flex;
  margin-top: 50px;
  margin-bottom: 25px;
    justify-content: center;
}
#testimonials-plus-qa #testimonials #testimonials-content .content .testimonial p {
  /*width: 20ch;*/
  font-size: 1.3rem;
  line-height: 32px;
}
#testimonials-plus-qa #testimonials #testimonials-content .content .testimonial img:nth-child(1) {
  margin-right: 1rem;
  width: 50px !important;
  height: 26px !important;
}
#testimonials-plus-qa #testimonials #testimonials-content .content .testimonial img:nth-child(3) {
  margin-left: 1rem;
  width: 50px !important;
  height: 26px !important;
}
#contact-qa {
  height: auto !important;
}
#qa {
  padding: 1rem;
  padding-bottom: 3rem;
  height: auto;
}
#qa .faq-title {
  font-size: 0.9rem;
}
#qa #qa-content h3 {
  font-size: 1.6rem;
  text-align: center;
  margin: 1rem 0;
}
#qa ol {
  padding-left: 20px;
  text-align: justify;
}
#contact-section {
  height: auto !important;
  flex-direction: column;
  flex-wrap: wrap;
  padding: 2rem 0 !important;
  .hero-text {
    width: 80% !important;
  }
  .contact-space {
    width: 80% !important;
    height: auto !important;
  }
  .contact-space h2 {
    font-size: 2rem !important;
  }
  .contact-space .description {
    width: auto !important;
  }
  .form {
    width: 80% !important;
    min-width: auto !important;
  }
  .form .row-input {
    margin-top: 0.5rem !important;
  }
  .two-column {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }
  .two-column > div {
    margin: 0.5rem 0 !important;
    width: 100% !important;
  }
  .contact-space h2 {
  }
  .contact-space .description {
    width: auto !important;
    text-align: justify;
    line-height: 20px;
    padding: 1rem 0;
  }
}
.testimonials-mobile-controls {
  display: flex;
  width: 90%;
  margin: 0 auto;
  justify-content: space-around;
    margin-top: 25px;
}
.testimonials-mobile-controls .left-btn {
  transform: rotate(180deg);
  background-color: rgb(0, 0, 0, 0.1);
  padding: 0;
}
#testim-left, #testim-right{
  display: none;
}

.testimonials-mobile-controls .right-btn {
  background-color: rgb(0, 0, 0, 0.1);
  padding: 0;
}
footer {
  padding: 1rem;
}
footer > div {
  flex-direction: column;
}
footer > div:first-child {
  width: 100%;
  justify-content: space-between;
  align-items: start;
}
footer > div:first-child > div:last-child {
  padding: 1rem 0;
  width: 100%;
  justify-content: end;
}
footer > div:last-child {
  width: 100%;
  justify-content: center;
  align-items: start;
}
footer > div:last-child > div:first-child {
  padding: 1rem 0;
  width: 100%;
  justify-content: space-between;
}
footer > div:last-child > div:last-child {
  padding: 1rem 0;
  width: 100%;
  justify-content: center;
}

footer > div:first-child {
  flex-direction: row;
}

footer > div:first-child > div:last-child {
  width: auto;
}

.tel-icon{
  display: none !important;
}

.phone-view-tel {
  display: flex !important;
  width: 100% !important;
}
}

@media screen and (max-width: 1230px) {
#hero-plus-header {
  height: auto !important;
}
#hero-text-space {
  bottom: 20px !important;
}

#hero-text-space h2 {
  font-size: 1.3rem !important;
}

#revolution-text-space h2 {
  margin-bottom: 2rem !important;
  font-size: 1.8rem !important;
}
#revolution-text-space p {
  width: auto !important;
  padding: 0 1rem !important;
  box-sizing: border-box;
  font-size: 1.3rem !important;
}
#wine-2-stay #brands {
  padding: 0.5rem;
}
#wine-2-stay .brand > img {
  width: 250px;
}

#contact-section {
  height: auto !important;
  flex-direction: column;
  flex-wrap: wrap;
  padding: 2rem 0 !important;
  align-items: center !important;
}
#contact-section .hero-text {
  width: 80% !important;
}
#contact-section .contact-space {
  width: 80% !important;
  height: auto !important;
}
#contact-section .contact-space h2 {
  font-size: 2rem !important;
  width: auto;
}
#contact-section .contact-space .description {
  width: auto !important;
}
#contact-section .form {
  width: 80% !important;
}
#contact-section .contact-space .description {
  width: auto !important;
  text-align: justify;
  line-height: 20px;
  padding: 1rem 0;
}
#hero {
  height: calc(80vh - 25px);
}

#testimonials-plus-qa {
  height: auto !important;
}

#testimonials-plus-qa #testimonials {
  height: auto !important;
  padding: 2rem 0;
}

#qa {
  height: auto !important;
}
}

@media screen and (min-device-width: 480px) and (max-device-width: 640px) and (orientation: landscape) {
#hero-plus-header {
  height: auto !important;
}
#wine-2-stay {
  height: auto !important;
}
#hero {
  height: calc(100vh - 50px) !important;
}
}


.faqExpand:HOVER {
opacity: 0.75;
cursor: pointer;
}

.dvHeader {
position: relative;
display: flex;
background-color: white;
height: 50px;
align-items: end;
padding-bottom: 10px;
box-sizing: border-box;
width: 90%;
margin: 0 auto;
justify-content: space-between;
z-index: 999;
top: 0;
}

@media screen and (min-device-height: 300px) and (max-device-height: 440px) and (orientation: landscape) {

#revolution, #revolution-text-space {
  height: auto !important;
}
#revolution-text-space {
  padding: 2rem 0;
}
}

@media screen and (max-width: 560px) {
  #testimonials-plus-qa #testimonials h4 {
    font-size: 1.4rem;
  }
  #testimonials-plus-qa #testimonials #testimonials-content .content .testimonial p {
    width: 30ch;
  }
}

@media screen and (max-width: 450px) {
  #testimonials-plus-qa #testimonials #testimonials-content .content .testimonial p {
    width: 18ch;
  }
}