html {
box-sizing: border-box;
font-size: 62.5%; /** Reset para REMS - 62.5% = 10px de 16px **/
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: 'Public Sans', sans-serif;
font-size: 1.6rem;
line-height: 2;
}
.modal-header {
padding:9px 15px;
border-bottom:1px solid #eee;
background: #333333;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.color-index {
background-color: white;
}
/** Globales **/
img {
max-width: 100%;
}
.contenedor{
width: 95%;
max-width: 120rem;
margin: 0 auto;
}
h1 {
font-size: 3.8rem;
}
@media (max-width: 768px) {
h1 {
font-size: 1.5rem;
}
}
h2 {
font-size: 2.8rem;
}
@media (max-width: 768px) {
h2 {
font-size: 1.5rem;
}
}
h3 {
font-size: 1.8rem;
}
@media (max-width: 768px) {
h3 {
font-size: 1.5rem;
}
}
h4 {
font-size: 1.6rem;
}
@media (max-width: 768px) {
h4 {
font-size: 1.5rem;
}
}
/** Utilidades **/
.seccion {
margin-top: 0rem;
margin-bottom: 0rem;
}
.fw-300 {
font-weight: 300; /* DEFINE GROSOR DE LETRA */
}
.centrar-texto {
text-align: center; /* CENTRA TEXTO */
}
.d-block{
display: block!important;
}
.contenido-centrado {
max-width: 800px;
}
/** Botones **/
.boton {
color: #ffffff;
font-weight: 700;
text-decoration: none;
font-size: 0.8rem; /*ESTABA EN 1.8 REM*/
padding: 1rem 3rem;
margin-top: 3rem;
display: inline-block;
text-align: center;
border: none;
display: block;
flex: 0 0 100%;
}
@media (min-width: 768px) {
.boton {
color: #ffffff;
font-weight: 700;
text-decoration: none;
font-size: 1.8rem;
padding: 1rem 3rem; /*NO TOCAR*/
margin-top: 3rem;
display: inline-block;
text-align: center;
border: none;
display: block;
flex: 0 0 100%;
}
}
@media (min-width: 768px) {
.boton {
display: inline-block;
flex: 0 0 auto;
}
}
.boton:hover {
cursor: pointer;
}
.boton-azul {
background-color:#333;
}
.boton-amarillo {
background-color: #f1cb3f;
}
/** Botones de Llamada **/
.boton2 {
color: #ffffff;
font-weight: 700;
text-decoration: none;
font-size: 0.8rem; /*ESTABA EN 1.8 REM*/
padding: 1rem 3rem;
margin-top: 3rem;
display: inline-block;
text-align: center;
border: none;
display: block;
flex: 0 0 100%;
}
@media (min-width: 768px) {
.boton2 {
color: #ffffff;
font-weight: 700;
text-decoration: none;
font-size: 1.8rem;
padding: 0.3rem 1rem;
margin-top: 3rem;
display: inline-block;
text-align: center;
border: none;
display: block;
flex: 0 0 100%;
}
}
@media (min-width: 768px) {
.boton2 {
display: inline-block;
flex: 0 0 auto;
}
}
.boton2:hover {
cursor: pointer;
}
.boton2-azul {
background-color:#333;
}
.boton2-amarillo {
background-color: #f1cb3f;
}
/* Header */
.site-header {
background-color: #333;
padding: 0rem 0 0rem 0;
}
.site-header.inicio{
background-image: url(../HD/pruebaDeCarga2.png);
/*background-position: center;*/
background-size: cover;
height: 25rem;
min-height: 25rem;
}
.contenido-header {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
}
@media (min-width: 768px) {
.contenido-header{
text-align: left;
}
}
.contenido-header h1 {
color: #ffffff;
padding-bottom: 2rem;
max-width: 60rem;
line-height: 2;
}
.barra {
padding-top: 1rem;
}
@media (min-width: 768px) {
.barra {
display: flex;
justify-content: space-between;
align-items: center;
}
}
/** Navegacion **/
.navegacion a {
color: #ffffff;
text-decoration: none;
font-size: 2.2rem;
display: block;
}
@media (min-width: 768px) {
.navegacion a {
display: inline-block;
font-size: 1.8rem; /** = 18px **/
margin-right: 2rem;
}
.navegacion a:last-of-type {
margin: 0;
}
}
.navegacion a:hover {
color: #f1cb3f;
}
/** Navegacion2 **/
.navegacion2 a {
color: #ffffff;
text-decoration: none;
font-size: 2.2rem;
display: block;
}
@media (min-width: 768px) {
.navegacion2 a {
display: inline-block;
font-size: 1.8rem; /** = 18px **/
margin-right: 2rem;
}
.navegacion2 a:last-of-type {
margin: 0;
}
}
.navegacion2 a:hover {
color: #f1cb3f;
}
/** Iconos Nosotros **/
@media (min-width: 768px) {
.iconos-nosotros {
display: flex;
justify-content: space-between;
}
}
.icono {
text-align: center;
}
@media (min-width: 768px) {
.icono {
flex-basis: calc(33.3% - 1rem);
}
}
.icono h3 {
text-transform: uppercase;
}
/** Anuncios **/
@media (min-width: 768px) {
.contenedor-anuncios {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.anuncio {
border: 1px solid #b5b5b5;
background-color: #ffffff;
margin-bottom: 1rem;
flex: 0 0 calc(23.3% - 1rem);
}
}
.contenido-anuncio {
padding: 2rem;
}
.contenido-anuncio h3,
.contenedor-anuncios p {
margin: 0;
}
.descripcion {
color: #f1cb3f;
font-weight: 700; /** EL DEFAULT DE FONT-WEIGHT DE LOS PARRAFOS ES 400 Y DE LOS HEADING(H1,2,3...) ES DE 700 **/
}
.iconos-caracteristicas {
list-style: none;
padding: 0;
display: flex;
justify-content: space-evenly;
flex: 1;
max-width: 500px;
}
.iconos-caracteristicas li {
/* flex: 1; */
display: flex;
}
.iconos-caracteristicas li img {
margin-right: 2rem;
}
.ver-todas {
display: flex;
justify-content: flex-end;
}
@media (max-width: 768px) {
.contenedor-anuncios {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.anuncio {
border: 1px solid #b5b5b5;
background-color: #f5f5f5;
margin-bottom: 1rem;
flex: 0 0 calc(13.3% - 1rem);
}
.contenido-anuncio {
/*padding: 0rem;*/
padding: 2rem;
}
.contenido-anuncio h3,
.contenedor-anuncios p {
margin: 0;
}
}
@media (max-width: 1920px) {
.map{
display: flex;
}
}
@media (max-width: 1920px) {
.quejas-sugerencias{
display: flex;
}
}
/** Contacto Home **/
.imagen-contacto {
background-image: url(../img/encuentra.jpg);
background-position: center center;
background-size: cover;
height: 40rem;
display: flex;
align-items: center;
}
.contenido-contacto {
flex: 0 0 95%;
color: #ffffff;
}
.contenido-contacto p {
font-size: 1.8rem;
}
/** Sección Inferior **/
@media (min-width: 768px) {
.seccion-inferior {
display: flex;
justify-content: space-between;
}
.seccion-inferior .blog {
flex-basis: 60%;
}
.seccion-inferior .testimoniales {
flex-basis: calc(40% - 2rem);
}
}
.entrada-blog {
margin-bottom: 2rem;
}
@media (min-width: 768px) {
.entrada-blog {
display: flex;
justify-content: space-between;
}
}
.entrada-blog:last-of-type {
margin-bottom: 0;
}
@media (min-width: 768px) {
.entrada-blog .imagen {
flex-basis: 40%;
}
.entrada-blog .texto-entrada {
flex-basis: calc(60% - 3rem);
}
}
.texto-entrada a {
color: #000000;
text-decoration: none;
}
.texto-entrada h4 {
margin: 0;
line-height: 1.4;
}
.texto-entrada h4::after {
content: '';
display: block;
width: 15rem;
height: .5rem;
background-color: #71B100;
margin-block: 1rem;
}
.texto-entrada span {
color: #e08709;
}
/** Testimoniales **/
.testimonial {
background-color: #71B100;
font-size: 2.4rem;
padding: 2rem;
color: #ffffff;
border-radius: 2rem;
}
.testimonial p {
text-align: right;
}
.testimonial blockquote::before {
content: '';
background-image: url(../img/comilla.svg);
width: 4rem;
height: 4rem;
position: absolute;
left: -2rem;
}
.testimonial blockquote {
position: relative;
padding-left: 5rem;
font-weight: 300;
}
/** Footer **/
.site-footer {
background-color: #333;
margin-top: 1rem;
/* position: relative;
bottom: -200rem; */
}
/** SITE FOOTER 2 **/
@media (max-width: 2560px) {
.site-footer2 {
background-color: #333;
margin-top: 1rem;
position: relative;
bottom: -200rem;
}
}
@media (max-width: 1109px) {
.site-footer2 {
background-color: #333;
margin-top: 1rem;
position: relative;
bottom: -340rem;
}
}
@media (max-width: 739px) {
.site-footer2 {
background-color: #333;
margin-top: 1rem;
position: relative;
bottom: -665rem;
}
}
.site-footer2 nav {
display: none;
}
@media (min-width: 768px) {
.site-footer2 nav {
display: block;
}
}
.contenedor-footer {
padding: 3rem 0;
text-align: center;
}
@media (min-width: 768px) {
.contenedor-footer {
display: flex;
justify-content: space-between;
}
}
.site-footer nav {
display: none;
}
@media (min-width: 768px) {
.site-footer nav {
display: block;
}
}
.copyright {
margin: 0;
color: #ffffff;
}
/** INTERNAS **/
/** Nosotros **/
.frase-nosotros {
text-align: center;
}
@media (min-width: 768px) {
.contenido-nosotros {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 2rem;
}
}
.texto-nosotros blockquote {
font-weight: 900;
font-size: 2rem;
margin: 0;
padding: 0 0 3rem 0;
}
/** QUEJAS Y SUGERENCIAS **/
.contenedor {
width: 95%;
max-width: 120rem; /** = 1200px; **/
margin: 0 auto;
}
.imagen-contacto {
background-image: url(../img/anvimaPP.png);
background-position: center center;
background-size: cover;
height: 40rem;
display: flex;
align-items: center;
}
.contenido-contacto {
flex: 0 0 63%; /* ESTABA EN 95% */
color: #333333;
}
.contenido-contacto p {
font-size: 1.8rem; /* ESTABA EN 1.8rem */
}
.boton {
color: #ffffff;
font-weight: 700;
text-decoration: none;
font-size: 1.8rem;
padding: 1rem 3rem;
margin-top: 22rem; /* ESTABA EN 3rem */
display: inline-block;
text-align: center;
border: none;
display: block;
flex: 0 0 100%;
}
.botonF {
color: #ffffff;
font-weight: 700;
text-decoration: none;
font-size: 1.8rem;
padding: 1rem 3rem;
margin-top: 3rem; /* ESTABA EN 3rem */
display: inline-block;
text-align: center;
border: none;
display: block;
flex: 0 0 100%;
}
@media (min-width: 768px) {
.boton {
display: inline-block;
flex: 0 0 auto;
}
}
.boton:hover {
cursor: pointer;
}
.boton-quejas {
background-color: #E08709;
}
@media (max-width: 425px) {
/** QUEJAS Y SUGERENCIAS CELL **/
.contenedor {
width: 95%;
max-width: 40.25rem; /** = 1200px; **/
margin: 0 auto;
}
.imagen-contacto {
background-image: url(../img/anvimaPPC.png);
background-position: center center;
background-size: cover;
height: 40rem;
display: flex;
align-items: center;
}
.contenido-contacto {
flex: 0 0 63%; /* ESTABA EN 95% */
color: #333333;
}
.contenido-contacto p {
font-size: 1.8rem; /* ESTABA EN 1.8rem */
}
.boton {
color: #ffffff;
font-weight: 700;
text-decoration: none;
font-size: 1.8rem;
padding: 1rem 3rem;
margin-top: 13rem; /* ESTABA EN 3rem */
display: inline-block;
text-align: center;
border: none;
display: block;
flex: 0 0 100%;
}
@media (min-width: 768px) {
.boton {
display: inline-block;
flex: 0 0 auto;
}
}
.boton:hover {
cursor: pointer;
}
.boton-quejas {
background-color: #E08709;
}
}
/** Anuncio **/
.resumen-servicio {
display: flex;
justify-content: space-between;
align-items: center;
}
/** Contacto **/
contacto p {
font-size: 1.4rem;
color: #f4f4f4;
margin: 2rem 0 0 0;
}
legend {
font-size: 2rem;
color: #4f4f4f;
}
label {
font-weight: 700;
text-transform: uppercase;
display: block;
}
input:not([type="submit"]),
textarea,
select {
padding: 1rem;
display: block;
width: 100%;
background-color: #e1e1e1;
margin-bottom: 2rem;
border: none;
border-radius: 1rem;
}
input[type="radio"] {
width: auto;
margin: 0;
}
select {
-webkit-appearance: none;
appearance: none;
}
textarea {
height: 20rem;
}
.forma-contacto {
max-width: 30rem;
display: flex;
justify-content: space-between;
align-items: center;
}
/** Carrusel **/
.content-all{
width: 160px;
margin: auto;
perspective: 1000px;
position: relative;
margin-top: 80px;
margin-bottom: 400px;
}
.content-carrousel{
width: 100%;
position: absolute;
animation: rotar 40s infinite linear;
transform-style: preserve-3d;
}
.content-carrousel:hover{
animation-play-state: paused;
cursor: pointer;
}
.content-carrousel figure{
width: 100%;
height: 120px;
overflow: hidden;
position: absolute;
box-shadow: 0px 0px 0px 0px white;
transition: all 300ms;
}
.content-carrousel figure:hover{
box-shadow: 0px 0px 20px 0px white;
transition: all 300ms;
}
.content-carrousel figure:nth-child(1){transform: rotateY(0deg)
translateZ(400px);}
.content-carrousel figure:nth-child(2){transform: rotateY(27.69deg)
translateZ(400px);}
.content-carrousel figure:nth-child(3){transform: rotateY(55.38deg)
translateZ(400px);}
.content-carrousel figure:nth-child(4){transform: rotateY(83.07deg)
translateZ(400px);}
.content-carrousel figure:nth-child(5){transform: rotateY(110.76deg)
translateZ(400px);}
.content-carrousel figure:nth-child(6){transform: rotateY(138.45deg)
translateZ(400px);}
.content-carrousel figure:nth-child(7){transform: rotateY(166.14deg)
translateZ(400px);}
.content-carrousel figure:nth-child(8){transform: rotateY(193.83deg)
translateZ(400px);}
.content-carrousel figure:nth-child(9){transform: rotateY(221.52deg)
translateZ(400px);}
.content-carrousel figure:nth-child(10){transform: rotateY(249.21deg)
translateZ(400px);}
.content-carrousel figure:nth-child(11){transform: rotateY(276.09deg)
translateZ(400px);}
.content-carrousel figure:nth-child(12){transform: rotateY(304.59deg)
translateZ(400px);}
.content-carrousel figure:nth-child(13){transform: rotateY(332.28deg)
translateZ(400px);}
.content-carrousel figure:nth-child(14){transform: rotateY(360deg)
translateZ(400px);}
.content-carrousel img{
width: 100%;
transition: all 300ms;
}
.content-carrousel img:hover {
transform: scale(1.2);
transition: all 300ms;
}
@keyframes rotar{
from{
transform: rotateY(0deg);
}to{
transform: rotateY(360deg);
}
}
/** Carrusel Pequeño**/
@media (max-width: 768px) {
.content-all{
width: 63px;
margin: auto;
perspective: 1000px;
position: relative;
margin-top: 26px;
margin-bottom: 133px;
}
.content-carrousel{
width: 100%;
position: absolute;
animation: rotar 40s infinite linear;
transform-style: preserve-3d;
}
.content-carrousel:hover{
animation-play-state: paused;
cursor: pointer;
}
.content-carrousel figure{
width: 100%;
height: 47px;
overflow: hidden;
position: absolute;
box-shadow: 0px 0px 20px 0px white;
transition: all 300ms;
}
.content-carrousel figure:hover{
box-shadow: 0px 0px 0px 0px white;
transition: all 300ms;
}
.content-carrousel figure:nth-child(1){transform: rotateY(0deg)
translateZ(133px);}
.content-carrousel figure:nth-child(2){transform: rotateY(27.69deg)
translateZ(133px);}
.content-carrousel figure:nth-child(3){transform: rotateY(55.38deg)
translateZ(133px);}
.content-carrousel figure:nth-child(4){transform: rotateY(83.07deg)
translateZ(133px);}
.content-carrousel figure:nth-child(5){transform: rotateY(110.76deg)
translateZ(133px);}
.content-carrousel figure:nth-child(6){transform: rotateY(138.45deg)
translateZ(133px);}
.content-carrousel figure:nth-child(7){transform: rotateY(166.14deg)
translateZ(133px);}
.content-carrousel figure:nth-child(8){transform: rotateY(193.83deg)
translateZ(133px);}
.content-carrousel figure:nth-child(9){transform: rotateY(221.52deg)
translateZ(133px);}
.content-carrousel figure:nth-child(10){transform: rotateY(249.21deg)
translateZ(133px);}
.content-carrousel figure:nth-child(11){transform: rotateY(276.09deg)
translateZ(133px);}
.content-carrousel figure:nth-child(12){transform: rotateY(304.59deg)
translateZ(133px);}
.content-carrousel figure:nth-child(13){transform: rotateY(332.28deg)
translateZ(133px);}
.content-carrousel figure:nth-child(14){transform: rotateY(360deg)
translateZ(133px);}
.content-carrousel img{
width: 100%;
transition: all 300ms;
}
.content-carrousel img:hover {
transform: scale(1.2);
transition: all 300ms;
}
@keyframes rotar{
from{
transform: rotateY(0deg);
}to{
transform: rotateY(360deg);
}
}
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + span {
background-color: #E9EEEE;
color: #687B96;
width: 40px;
height:40px;
line-height: 40px;
text-align: center;
cursor: pointer;
display: inline-block;
user-select: none;
}
input[type="checkbox"]:checked + span {
background-color:#f1cb3f;
color: #fff;
}
/* EMPIEZA SLIDER SERVICIOS */
.bodySliderServicios {
background: #1D1D1F;
color: #fff;
font-family: 'Montserrat', sans-serif;
min-height: 100vh;
display: flex;
align-items: center;
}
.contenedor {
max-width: 1200px;
width: 90%;
margin: auto;
}
/* --- --- CONTENEDOR PRINCIPAL --- --- */
.contenido-principal {
margin-bottom: 50px;
display: flex;
align-items: center;
}
.contenido-principal__imagen {
vertical-align: top;
margin-right: 20px;
width: 50%;
max-width: 550px;
}
.contenido-principal__contenedor {
width: 50%;
}
.contenido-principal__titulo {
font-weight: normal;
font-size: 28px;
}
.contenido-principal__resumen {
font-family: 'Open Sans', sans-serif;
line-height: 30px;
color: #CFCFCF;
}
/* --- --- CAROUSEL --- --- */
.carousel__contenedor {
position: relative;
}
.carousel__anterior,
.carousel__siguiente {
position: absolute;
display: block;
width: 30px;
height: 30px;
border: none;
top: calc(50%);
transform: translateY(-50%);
cursor: pointer;
line-height: 30px;
text-align: center;
background: none;
color: #4d5a62;
opacity: 20%;
}
.carousel__anterior:hover,
.carousel__siguiente:hover {
opacity: 100%;
}
.carousel__anterior {
left: -30px;
}
.carousel__siguiente {
right: -30px;
}
/* --------------------------- ¡PELIGRO, NO TOCAR! ------------------ */
@media (min-width: 769px) { /* ESTO LE QUITA EL MODO TACTIL AL SLIDER */
.carousel__lista {
overflow: hidden;
}
}
@media (max-width: 576px) { /* ESTO QUITA LOS PUNTOS DE ABAJO AL SLIDER */
.carousel__indicadores {
display: none;
}
}
@media (max-width: 449px) { /* ESTO QUITA LOS BOTONES DE NAVEGACION AL SLIDER */
.boton-serv {
display: none;
}
}
/* ------------------------------------------------------------------------------------------ */
.carousel__elemento {
text-align: center;
}
.carousel__indicadores .glider-dot {
display: block;
width: 30px;
height: 4px;
background: #4d5a62;
opacity: .2;
border-radius: 0;
}
.carousel__indicadores .glider-dot:hover {
opacity: .5;
}
.carousel__indicadores .glider-dot.active {
opacity: 1;
}
@media screen and (max-width: 800px) {
body {
padding: 40px 0;
}
.contenido-principal {
flex-direction: column;
}
.contenido-principal > * {
width: 100%;
}
}
/* TERMINA SLIDER SERVICIOS */
.zoomImagen{
/* Aumentamos la anchura y altura durante 2 segundos */
transition: width 2s, height 2s, transform 2s;
}
.zoomImagen:hover{
/* tranformamos el elemento al pasar el mouse por encima al doble de
su tamaño con scale(2). */
transform : scale(1.5);
}