@import url("fonts/fonts.css");
@media screen and (min-width: 1600px) and (max-width: 2000px) and (orientation: landscape) {
  .hotspots {
    position: relative;
    left: 0;
    bottom: 0;
    background: url(../img/componentes-xl.jpg) top center no-repeat;
    background-size: contain;
    display: inline-block;
    padding-bottom: 40% !important;
    width: 100%;
  }
}
@media screen and (min-width: 991px) and (max-width: 1200px) {
  body {
    font-size: .90rem;
  }
  .nav-link {
    padding: 0 1rem;
    margin: 0 2rem !important;
  }
  .header {
    background: url(../img/lveb-header-md.jpg) bottom center no-repeat cover;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.1rem;
    padding-left: 0.1rem;
  }
  .header .lveb-frasco {
    position: absolute;
    left: -30px;
    bottom: -50px;
  }
  .p-6 {
    padding-left: 6rem;
  }
  .hotspots {
    background: url(../img/componentes-md.jpg) top center no-repeat;
    background-size: cover;
    height: 600px;
  }
  .paris {
    background: url(../img/paris_t.jpg) bottom no-repeat;
    background-size: cover;
    height: 550px;
  }
}
@media screen and (max-width: 991px) {
  body {
    font-size: .90rem;
  }
  .navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
    background: rgba(60, 37, 68, 0.9);
  }
  .navbar-toggler:focus {
    box-shadow: 0 0 0 0rem !important;
  }
  .navbar-nav {
    margin: 5% 0;
  }
  .navbar-nav .nav-link {
    margin: 0;
    padding: 3% 5%;
    line-height: 100%;
  }
  nav a.active {
    background: none;
  }
  .nav-item {
    display: block;
    flex-direction: inherit;
    flex-wrap: inherit;
    height: 40px;
  }
  .nav-link {
    font-size: 1.2rem;
  }
  table {
    margin: 1rem 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: .80rem;
  }
  .p-6 {
    padding-left: 2.5rem;
    padding-right: 3rem;
  }
  .header {
    position: relative;
    background: url(../img/lveb-header-md.jpg) center bottom no-repeat !important;
    background-size: cover;
    height: 400px;
    width: 100%;
  }
  .header .lveb-frasco {
    position: absolute;
    left: 0;
    bottom: -75px;
    width: 180px;
    z-index: 5;
    height: 180px;
  }
  img.lancome-logo {
    margin-top: 1rem;
    margin-left: 1rem;
  }
  .accordion-button {
    font-size: .90rem;
  }
  #home h1 {
    font-family: 'MillerDisplay';
    font-size: 2.250em;
    text-align: left;
    padding-left: 1rem;
  }
  .menu-mobile {
    top: 5rem;
  }
  .lveb-recarga {
    max-width: 180px;
  }
  .hotspots {
    background: url(../img/componentes-sm.jpg) top center no-repeat !important;
    background-size: cover !important;
    padding-bottom: 50% !important;
    height: 700px !important;
  }
  .bg-violet h2,
  .bg-violet p {
    padding: 0 0;
  }
  .paris {
    background: url(../img/paris_lg.jpg) bottom left no-repeat !important;
    background-size: cover !important;
    height: 550px !important;
  }
  /* === +++ === +++ === +++ === +++ === +++  */
  /* === +++ === +++ MOOD ONE === +++ === +++ === +++  */
  .mood-one .bg {
    background: url(../img/mood_1.jpg) top center no-repeat;
    background-size: contain;
  }
  .mood-one h1 {
    font-size: 1.375rem;
  }
  .mood-one h2 {
    font-size: 1.375rem;
  }
  .mood-one h3 {
    font-size: 1.375rem;
    margin-top: 0.5rem;
  }
  .mood-one .marcador-left {
    position: relative;
  }
  .mood-one .marcador-left:after {
    height: 200px;
    bottom: 8px;
    left: 7%;
  }
  .mood-one .under {
    position: relative;
    display: inline-block
  }
  .mood-one .under:after {
    bottom: 0;
  }
  /* === +++ === +++ === +++ === +++ === +++  */
  /* === +++ === +++ MOOD TWO === +++ === +++ === +++  */
  .mood-two .bg {
    background: url(../img/mood_2_md.jpg) top center no-repeat !important;
    background-size: contain;
  }
  .mood-two h1 {
    font-size: 1.375rem;
  }
  .mood-two h2 {
    font-size: 1.375rem;
  }
  .mood-two h3 {
    font-size: 1.375rem;
  }
  .mood-two .marcador-left {
    position: relative;
  }
  .mood-two .marcador-left:after {
    height: 200px;
    bottom: 8px;
    left: 7%;
  }
  .mood-two .under {
    position: relative;
    display: inline-block
  }
  .mood-two .under:after {
    bottom: 0;
  }
  /* === +++ === +++ === +++ === +++ === +++  */
  /* === +++ === +++ MOOD THREE === +++ === +++ === +++  */
  .mood-three .bg {
    background: url(../img/mood_3.jpg) top center no-repeat;
    background-size: contain;
  }
  .mood-three h1 {
    font-size: 1.375rem;
  }
  .mood-three h2 {
    font-size: 1.375rem;
  }
  .mood-three h3 {
    font-size: 1.375rem;
    margin-top: 0.5rem;
  }
  .mood-three .marcador-left {
    position: relative;
  }
  .mood-three .marcador-left:after {
    height: 200px;
    bottom: 8px;
    left: 7%;
  }
  .mood-three .under {
    position: relative;
    display: inline-block
  }
  .mood-three .under:after {
    bottom: 0;
  }
}
@media only screen and (min-width: 601px) and (max-width: 768px) {
  .header {
    background: url(../img/lveb-header-sm.jpg) center center no-repeat !important;
    background-size: cover;
    height: 350px;
    margin-bottom: 3.75rem;
  }
  .header .lveb-frasco {
    position: absolute;
    left: 0;
    bottom: -35px;
    background: url(../img/lveb-frasco.png) center center no-repeat;
    background-size: contain;
    display: inline-block;
    padding-bottom: 20%;
    width: 140px;
    z-index: 5;
    height: 140px;
  }
  img.lancome-logo {
    margin-top: 1rem;
    margin-left: 1rem;
  }
  #home h1 {
    font-size: 2.250em;
    text-align: left;
    padding-left: 1rem;
  }
  .menu-mobile {
    top: 7.5rem;
  }
  .hotspots {
    background: url(../img/componentes-sm.jpg) top -60px center no-repeat !important;
    background-size: 100%;
    height: 600px;
  }
}
@media only screen and (max-width: 600px) {
  .header {
    background: url(../img/lveb-header-xs.jpg) center center;
    background-size: cover;
    height: 350px;
    margin-bottom: 3.75rem;
  }
  .header .lveb-frasco {
    position: absolute;
    left: 0;
    bottom: -35px;
    background: url(../img/lveb-frasco.png) center center no-repeat;
    background-size: contain;
    display: inline-block;
    padding-bottom: 20%;
    width: 140px;
    z-index: 5;
    height: 140px;
  }
  img.lancome-logo {
    margin-top: 1rem;
    margin-left: 1rem;
  }
  #home h1 {
    font-family: 'MillerDisplay';
    font-size: 2.250em;
    text-align: left;
    padding-left: 1rem;
  }
  .menu-mobile {
    top: 7.5rem;
  }
  .img-over-right {
    position: relative;
    scale: 1;
  }
  .img-over-left {
    position: relative;
    scale: 1;
  }
  .hotspots {
    background: url(../img/componentes-xs.jpg) center center no-repeat;
    background-size: cover;
    height: 560px;
  }
  .paris {
    background: url(../img/paris_m.jpg) bottom no-repeat;
    background-size: cover;
    height: 400px;
  }
  .ingredientes .separador {
    background: url(../img/ingredientes.jpg) top right no-repeat;
    background-size: cover;
    padding-bottom: 80%;
  }
  .lancome-idole {
    background: url(../img/lancome-idole-xs.jpg) center center no-repeat;
    background-size: 100%;
    padding-bottom: 60%;
    height: 450px;
  }
  .lveb-coleccion {
    background: url(../img/lveb-coleccion.jpg) center center no-repeat;
    background-size: cover;
    height: 460px;
    margin-bottom: 3rem;
  }
  .p-6 {
    padding-left: 3.75rem;
    padding-right: 1rem;
  }
  #novedades .p-6 {
    padding-left: 0rem !important;
  }
  /* moods ----------------------------- */
  /* === +++ === +++ === +++ === +++ === +++  */
  /* === +++ === +++ MOOD ONE === +++ === +++ === +++  */
  .mood-one .bg {
    background: url(../img/mood_1_xs.jpg) top center no-repeat;
    background-size: cover;
  }
  .mood-one h1 {
    font-size: 1.375rem;
  }
  .mood-one h2 {
    font-size: 1.375rem;
  }
  .mood-one h3 {
    font-size: 1.375rem;
    margin-top: 0.5rem;
  }
  .mood-one .marcador-left {
    position: relative;
  }
  .mood-one .marcador-left:after {
    height: 200px;
    bottom: 8px;
    left: 7%;
  }
  .mood-one .under {
    position: relative;
    display: inline-block
  }
  .mood-one .under:after {
    bottom: 0;
  }
  /* === +++ === +++ === +++ === +++ === +++  */
  /* === +++ === +++ MOOD TWO === +++ === +++ === +++  */
  .mood-two .bg {
    background: url(../img/mood_2_xs.jpg) top center no-repeat;
    background-size: 100%;
  }
  .mood-two h1 {
    font-size: 1.375rem;
  }
  .mood-two h2 {
    font-size: 1.375rem;
  }
  .mood-two h3 {
    font-size: 1.375rem;
  }
  .mood-two .marcador-left {
    position: relative;
  }
  .mood-two .marcador-left:after {
    height: 200px;
    bottom: 8px;
    left: 7%;
  }
  .mood-two .under {
    position: relative;
    display: inline-block
  }
  .mood-two .under:after {
    bottom: 0;
  }
  /* === +++ === +++ === +++ === +++ === +++  */
  /* === +++ === +++ MOOD THREE === +++ === +++ === +++  */
  .mood-three .bg {
    background: url(../img/mood_3_xs.jpg) top center no-repeat;
    background-size: contain;
  }
  .mood-three h1 {
    font-size: 1.375rem;
  }
  .mood-three h2 {
    font-size: 1.375rem;
  }
  .mood-three h3 {
    font-size: 1.375rem;
    margin-top: 0.5rem;
  }
  .mood-three .marcador-left {
    position: relative;
  }
  .mood-three .marcador-left:after {
    height: 200px;
    bottom: 8px;
    left: 7%;
  }
  .mood-three .under {
    position: relative;
    display: inline-block
  }
  .mood-three .under:after {
    bottom: 0;
  }
}