/* General */

html {
  box-sizing: border-box;
  font-size: 62.5%;
  /** Reset para REMS - 62.5% = 10px de 16px **/
}

:root {
    --red: #ff0000;
    --dark-red: #c00000;
    --soft-white: #edf0f7;
    --soft-blue: #007d9d;
    --yellow: #fdc746;
    --green-limon: #3dab40;
}

body {
    font-family: Futura-regular,Helvetica,Arial,sans-serif;
    line-height: 1.5;
    color: black;
    font-size: 14px;
}


.owl-pagination .owl-page {
    background: #ccc;
    border-radius: 100%;
    width: 0px;
    height: 0px;
    display: inline-block;
    text-indent: -9999px;
    margin: 0 3px;
}
@media (max-width: 767px)
.owl-pagination {
    padding: 10px 0 0;
    display: none;
}

@font-face
{
    font-family: 'Futura-light';
    font-style: normal;
    font-weight: lighter;
    src:url("https://minisitios.ripley.cl/minisitios/estatico/vichy/assets2/fonts/FuturaPTLight.otf");
}

@font-face
{
    font-family: 'Futura-regular';
    font-style: normal;
    font-weight: normal;
    src:url("https://minisitios.ripley.cl/minisitios/estatico/vichy/assets2/fonts/FuturaPTBook.otf");
}

@font-face
{
    font-family: 'Futura-bold';
    font-style: normal;
    font-weight: bolder;
    src:url("https://minisitios.ripley.cl/minisitios/estatico/vichy/assets2/fonts/FuturaND-DemiBold.otf");
}

@font-face
{
    font-family: 'Futura-medium';
    font-style: normal;
    font-weight: bold;
    src:url("https://minisitios.ripley.cl/minisitios/estatico/vichy/assets2/fonts/FuturaPTMedium.otf");
}

.font-light{
  font-family: 'Futura-light',  sans-serif;
}

.font-medium{
  font-family: 'Futura-medium' ,  sans-serif; 
}

.font-bold{
  font-family: 'Futura-bold',  sans-serif;
}

/* Texto */

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

h1 {
    font-size: 3.8rem !important;
}
h2 {
    font-size: 3.4rem !important;
}
h3 {
    font-size: 3rem !important;
}
h4 {
    font-size: 2.6rem !important;
    font-family: 'Futura-regular'sans-serif !important;
}

h5{
    font-size: 2.2rem !important;
    color: black;
}

h6{
    font-family: 'Futura-light',  sans-serif !important;
    font-size: 1.6rem !important;
}

span{
  font-size: 1.4rem !important;
}

p{
    font-size: 1rem !important;
}

a{
  text-decoration: none;
  color: black;
}
a:hover{
  color: black;
}

.btn-prm {
  text-decoration: none;
  color: white;
}
.btn-prm:hover {
  color: black;
}


.mayus{
  text-transform: uppercase;
}

.space-letters{
  letter-spacing: 5px;
}

.text-justify{
  text-align: justify;
}

.text-justify-center{
  text-align: justify;
  text-align-last: center;
}

.text-price{
  color: var(--red);
  font-weight: bold;
}

.text-black{
  background-color: var(--bs-dark);
  color: white;
  font-size: 2rem;
  padding: 1rem 2rem;
  margin-top: 2rem;
  text-transform: uppercase;
  font-weight: bolder;
}

.text-up{
  margin-top:-4rem;
}

/* Border */

.border-solid{
  border-left: 2px solid black;
}

.border-c-red{
  border-bottom: 3px solid var(--red);
}

.border-c-blue{
  border-bottom: 3px solid var(--soft-blue);
}

.border-c-yellow{
  border-bottom: 3px solid var(--yellow);
}

.border-c-green{
  border-bottom: 3px solid var(--green-limon);
}

.border-c-black{
  border-bottom: 3px solid black;
}

/* Background */

.back-grey{
  background-color: var(--soft-white);
}

.back-doc{
  background-image: url("https://minisitios.ripley.cl/minisitios/estatico/vichy/assets2/img/background-doctora.jpg");
  background-position: right;
  background-repeat: no-repeat;
  background-size: contain;
  height: 70rem;
}

.back-epidermic{

  background-image: url("https://minisitios.ripley.cl/minisitios/estatico/vichy/assets2/img/background-epidermic.jpg");
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: contain;
  height: 85rem;
}

.back-mineral{
  background-image: url("https://minisitios.ripley.cl/minisitios/estatico/vichy/assets2/img/Vichy-M89-Booster.jpg");
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: contain;
  height: 85rem;
}

/* video */

#video{
  width: 100%;
  height: 300px;
}

/* Boton */

.btn-prm{
  background-color: var(--bs-dark);
  color: white;
  font-size: 1.3rem;
  padding: 1rem 2rem;
  margin-top: 2rem;
  text-transform: uppercase;
  font-weight: bolder;
}

.btn-prm:hover{
  color: var(--bs-dark);
  background-color: white;
  border: 1px solid var(--bs-dark);
}

.btn-snd{
  background-color: var(--bs-dark);
  color: white;
  font-size: 2rem;
  padding: 1rem 2rem;
  text-transform: uppercase;
  font-weight: bolder;
}

.btn-snd:hover{
  color: var(--bs-dark);
  background-color: white;
  border: 1px solid var(--bs-dark);
}

/* sectiones */

.section-border{
  border: 0.2px solid rgba(0, 0, 0, 0.5);
}

/* footer */



.coment-bubble-blue{
  border-radius: 0.5rem;
  width: 30rem;
  background-color: var(--soft-blue);
  color: white;
}

.coment-bubble-blue::after{
    content: "";
    display: inline-block;
    border-left: 20px solid transparent;
    border-right: 1px solid transparent;
    border-top: 20px solid var(--soft-blue);
    position: absolute;
    top: 100%;
    left: calc(75% - 15px);
  }


.coment-bubble-grey{
  border-radius: 0.5rem;
  width: 30rem;
  background-color: grey;
  color: white;
}

.coment-bubble-grey::before  {
    content:"";
    display: inline-block;
    border-left: 1px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid grey;
    position: absolute;
    bottom:75%;
    right: calc(90% - 15px);
  }


.coment-bubble-blue p, .coment-bubble-grey p{
  font-size: 1.4rem !important;
}


/* responsive */

@media (max-width: 992px){
  .text-end{
    text-align: center !important;
  }
  .text-start{
    text-align: center !important;
  }

  .border-solid{
    border-left: 0px solid black;
    border-top: 3px solid black;
  }

  .back-doc{
    background-position: center;
}

@media (max-width: 554px){
  .back-epidermic{
    width: 100%;
    height:30rem;
  }

  .back-mineral{
    width: 100%;
    height: 30rem;
  }

  .text-up{
    margin-top:-2rem;
  }

  .coment-bubble{
    width: 20rem;
  }

  .position-absolute h5{
    font-size: 1.5rem !important;
  }

  .coment-bubble p{
    font-size: 1rem !important;
  }


}