/* General */

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

:root {
    --black: #111;
}

body
{
    font-family: "Singulier-regular";
    font-weight: normal;
}

@font-face
{
    font-family: 'Singulier-regular';
    font-weight: normal;
    font-style: normal;
    src:url("https://minisitios.ripley.cl/minisitios/estatico/yves-saint-laurent/assets2/fonts/Singulier-Regular.ttf");
}

@font-face
{
    font-family: 'Singulier-light';
    font-weight: 300;
    font-style: normal;
    src:url("https://minisitios.ripley.cl/minisitios/estatico/yves-saint-laurent/assets2/fonts/Singulier-Light.ttf");
}

@font-face
{
    font-family: 'Singulier-Demi';
    font-weight: 600;
    font-style: normal;
    src:url("https://minisitios.ripley.cl/minisitios/estatico/yves-saint-laurent/assets2/fonts/Singulier-Demi.ttf");
}

@font-face
{
    font-family: 'Singulier-bold';
    font-weight: 900;
    font-style: normal;
    src:url("https://minisitios.ripley.cl/minisitios/estatico/yves-saint-laurent/assets2/fonts/Singulier-Bold.ttf");
}

/* background */

.background-black{
  background-color: var(--black);
}

/* Text */

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

h1 {
    font-size: 2.8rem !important;;
}
h2 {
    font-size: 2.6rem !important;;
}
h3 {
    font-size: 2.4rem !important;;
}
h4 {
    font-size: 2.2rem !important;;
}

h5{
    font-size: 2rem !important;;
}

h6{
    font-size: 1.8rem !important;
}

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

a{
  text-decoration: none;
  color: var(--black);
}

a:hover{
  color: var(--black);
}

section{
  padding: 0;
  margin: 0;
}

.font-bold{
  font-family: "Singulier-bold";
}

.font-demi{
  font-family: "Singulier-demi";
}

.mayus{
  text-transform: uppercase;
}

.white {
  color: white;
}

/* sizes */

#logo-ysl{
  width: 18rem;
}

.img-product{
  height: 28rem;
  width: 28rem;
}

.img-video{
  width: 38rem;
  height: 38rem;
}

/* Images section videos */

.couture{
  background-image: url('https://minisitios.ripley.cl/minisitios/estatico/yves-saint-laurent/assets2/img/Couture Colour Clutch (1).jpg');
  background-repeat: no-repeat;
  background-size: contain;
}

.rouge{
  background-image: url('https://minisitios.ripley.cl/minisitios/estatico/yves-saint-laurent/assets2/img/Rouge Pur Couture (2).jpg');
  background-repeat: no-repeat;
  background-size: contain;
}

.touche{
  background-image: url('https://minisitios.ripley.cl/minisitios/estatico/yves-saint-laurent/assets2/img/Touche Eclat (3).jpg');
  background-repeat: no-repeat;
  background-size: contain;
}

/* buttons*/

.btn-prm{
  text-transform: uppercase;
  letter-spacing: .01rem;

  width: 70%;

  text-align: center;
  font-size: 1.5rem;
  font-weight:300;

  padding: 0.5rem 2.5rem;
  border-radius: 5rem;
  border: 1px solid var(--black);
  margin: 2rem 0rem;

  text-decoration: none;
  color: white;
  background-color: var(--black);

  transition: .3s ease;
}

.btn-prm:hover{
  color:var(--black);
  background-color: white;
}

.btn-snd{
  width: 8rem;
  height: 8rem;

  padding: 2rem 2rem;
  border-radius: 10rem;
  border: 1px solid var(--black);



  background-color: var(--black);
  background-image: url('https://minisitios.ripley.cl/minisitios/estatico/yves-saint-laurent/assets2/img/arrow.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 3rem 3rem;
  color: white;

  transition: .3s ease;
}

.btn-snd:hover{
  color:var(--black);
  transform: scale(1.2);
  background-color: rgba(1, 1, 1, 0.2  );
}



/* Responsive */


@media (max-width: 992px){



  .text-end{
    text-align: justify !important;
    text-align-last: center !important;
  }

  body{
    padding: 0 0rem;
  }

  h1 {
      font-size: 2.8rem !important;;
  }
  h2 {
      font-size: 2.6rem !important;;
  }
  h3 {
      font-size: 2.4rem !important;;
  }
  h4 {
      font-size: 2.2rem !important;;
  }

  h5{
      font-size: 2rem !important;;
  }

  h6{
      font-size: 1.8rem !important;
  }

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

  .btn-prm{
    font-size: 2rem;
    padding: 1rem 3rem;
    width: 70%;
  }

}


@media (max-width: 554px){


  .btn-prm{
    font-size: 1rem;
    padding: 1rem 3rem;
    width: 90%;
  }

  .text-end,.text-start{
    text-align: center !important;
    text-align-last: center !important;
  }


}