body {
  font-family: 'Roboto'!important;
  padding: 0px;
  margin: 0px;
  overflow-x: hidden!important;
}

.fondoNegro {
  background-color: var(--color1);
}

.logoLocal {
  border: 1px solid var(--color1);
}


b {
  font-weight: 600!important;
}

.centered {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.mapaWrap {
    background-color: #ccc;
}


h1 {
  font-family: 'Roboto'!important;
  font-weight: 500!important;
  font-size: 35px!important;
  color: var(--color1);
}

h2 {
  font-family: 'Roboto'!important;
  font-weight: bold!important;
  font-size: 25px;
  color: var(--color1);
}

h3 {
  font-family: 'Roboto'!important;
  font-weight: normal!important;
  font-size: 17px;
  color: var(--color3);
}

.whatsapp {
    padding: 8px;
    border-radius: 10px;
    background-color: var(--colorWhatsApp);
    color: var(--color1);
}

.whatsapp:hover {
    text-decoration: none;
    background-color: #128C7E;
    color: #fff;
}

.telefono {
  padding: 8px;
  border-radius: 10px;
  background-color: #439bcd;
  color: #fff;
}

.telefono:hover {
    text-decoration: none;
    background-color: #2285ca;
    color: #fff;
}

/* ----------- HEADER PRINCIPAL ----------- */
.headerPrincipal {
      text-align: center;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
      color: var(--color2)!important;
      position: relative;
      margin-bottom: -100px;
}

.headerPrincipal h1 {
      color: var(--color2)!important;
      font-weight: bold!important;
      font-size: 45px!important;
}

/* ----------- LISTA PORTADA ----------- */
.listaPortada {
    list-style: none;
    color: var(--color2)!important;
    margin-left: 0px;
    padding-left: 0px;
}

.listaPortada a {
    color: var(--color1)!important;
}

/* ----------- LISTA PORTADA ----------- */
.bloqueVideo2 {
  background-color: var(--color1)!important;
  color:var(--color2)!important;
  padding: 10px;
}

.bloqueServicios {
  background-color: #ccc;
}

/* ----------- RESPONSIVE ----------- */

@media screen and (min-width: 0px) {
   h2 {
      font-size: 20px!important;
   }

   .bloqueVideo2  {
      height: 300px;
   }

   .headerPrincipal {
         margin-bottom: -30px;
   }
}

@media screen and (min-width: 750px) {
  .bloqueVideo2 {
     height: 450px;
  }

  .headerPrincipal {
        margin-bottom: -30px;
  }
}

@media screen and (min-width: 970px) {
  .bloqueVideo2  {
     height: 500px;
  }

  .headerPrincipal {
        margin-bottom: -50px;
  }
}

@media screen and (min-width: 1170px) {
  .bloqueVideo2  {
     height: 700px;
  }

  .headerPrincipal {
        margin-bottom: -100px;
  }
}