/* General */

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

:root {
    --grey: #f1f2f6;
    --black: #000;
}

#urban body
{
    font-family: "HurmeGeo-regular";
    font-weight: normal;
}

@font-face
{
    font-family: 'HurmeGeo-regular';
    font-weight: normal;
    font-style: normal;
    src:url("https://minisitios.ripley.cl/minisitios/belleza/urban-decay/assets3/fonts/HurmeGeometricSans2.otf");
}

@font-face
{
    font-family: 'HurmeGeo-bold';
    font-weight: 800;
    font-style: normal;
    src:url("https://minisitios.ripley.cl/minisitios/belleza/urban-decay/assets3/fonts/HurmeGeometricSans2 Bold.otf");
}

@font-face
{
    font-family: 'HurmeGeo-black';
    font-weight: 900;
    font-style: normal;
    src:url("https://minisitios.ripley.cl/minisitios/belleza/urban-decay/assets3/fonts/HurmeGeometricSans2 Black.otf");
}

@font-face
{
    font-family: 'HurmeGeo-semibold';
    font-weight: 600;
    font-style: normal;
    src:url("https://minisitios.ripley.cl/minisitios/belleza/urban-decay/assets3/fonts/HurmeGeometricSans2 SemiBold.otf");
}

/* 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;;
}

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

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

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

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

section{
  padding: 0;
  margin: 0;
}

.font-bold{
  font-family: "HurmeGeo-black";
}

.mayus{
  text-transform: uppercase;
}

.white {
  color: white;
}

/* background color */

.background-black{
  background-color: black;
}

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


/* card product */

.carousel-image{
  background-color: white;
  margin: 2rem ;
  padding: 2rem;
  text-align: center;
  height: auto;
}


.carousel-image img{
  width: 25rem;
  height: 25rem;
}


.owl-carousel-snd{
   width: 100%;
   padding: 0rem 1rem;
}

.card-carousel{
  text-align: center;
  padding: 1rem:
}

.card-carousel a{
  text-decoration: none;
}



.card-carousel p{
  color: grey;
  font-size: 1.7rem;
  font-weight: 200;
}


.card-carousel span{
  color: var(--black);
  font-size: 2.5rem;
  font-weight: bold;
}

/* images size */

#logo-ud{
  width: 30rem;
}

.img-types{
  width: 20rem;
}


/* video */


#video{
  width: 75%;
  height: auto;
}

/* Responsive */

@media (min-width: 992px){

  .flex-align{
    display: flex;
    align-items: center;
  }

  .card-carousel{
    text-align: center;
    padding: 3rem:
  }


}


@media (max-width: 992px){

  .carousel-image{
    width: 20rem;
    height: 20rem;
  }

  .carousel-image img{
    width: 17rem;
    height: 17rem;
  }

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

  /*body{
    padding: 0 3rem;
  }*/

  h1 {
      font-size: 1.8rem !important;;
  }
  h2 {
      font-size: 2.4rem !important;;
  }
  h3 {
      font-size: 2rem !important;;
  }
  h4 {
      font-size: 1.6rem !important;;
  }

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

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

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

  .card-carousel span{
    font-size: 1.5rem;
  }

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

}


@media (max-width: 554px){

  .carousel-image{
    width: auto;
    height: 20rem;
  }


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

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


}