html {
font-size: 62.5%;/** Reset para REMS - 62.5% = 10px de 16px**/
}
/**ICONOS**/
.zoom:hover {
transform: scale(1.4);
}
.zoom2:hover {
transform: scale(1.1);
}
/**Fuente de Google**/
body {
font-family:'Roboto Condensed', sans-serif;
font-size: 1.6rem;
line-height: 2rem;
}
/** Globales **/
img {
max-width: 100%;
}
.contenedor {
max-width: 120rem; /** equivalente a 1200px **/
margin: 0 auto;
}
h1{
font-size: 3.8rem;
}
h2 {
font-size: 3.4rem;
}
h3 {
font-size: 3rem;
}
h4{
font-size: 2.6rem;
}
/** Utilidades **/
.seccion {
margin-top: 2rem;
margin-bottom: 2rem;
}
.fw-300 {
font-weight: 300;
}
.centrar-texto {
text-align: center;
}
.d-block {
display: block!important;
}
.contenido-centrado {
max-width: 850px;
}
/** Botones **/
.boton {
color: white;
font-weight: 700;
text-decoration: none;
font-size: 1.8rem;
padding: 1rem 3rem;
margin-top: 3rem;
display: inline-block;
text-align: center;
border: none;
}
.boton:hover {
cursor: pointer;
}
.boton-amarillo {
background-color: #e08709;
}
.boton-verde {
background-color: #71b100;
}
/* Headers*/
.site-header {
background-color: #333333;
padding: 1rem o 3rem 0;
}
.site-header.inicio {
background-image: url(../img/header.jpg);
background-position: center;
background-size: cover;
height: 100vh;
min-height: 60rem;
}
.contenido-header {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.contenido-header h1 {
color: white;
padding-bottom: 2rem;
max-width: 60rem;
line-height: 2;
}
.barra {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 3rem;
}
/**Navegacion**/
.navegacion a {
color: white;
text-decoration: none;
font-size: 1.8rem; /** igual a 18px**/
margin-right: 2rem;
}
.navegacion a:hover { /** Este Comando 'hover' cambia el color en los enlaces al pasar el cursor**/
color: #71b100;
}
.navegacion a:last-of-type {
margin: 0;
}
/** Iconos Nosotros **/
.iconos-nosotros {
display: flex;
justify-content: space-between;
}
.icono {
flex-basis: calc(33.3% - 1rem);
text-align: center;
}
.icono h3 {
text-transform: uppercase;
}
/** Anuncios **/
.contenedor-anuncios {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.anuncio {
flex: 0 0 calc(33.3% - 1rem);
border: 1px solid #B5B5B5;
background-color: rgb(236, 230, 230);
margin-bottom: 2rem;
}
.contenido-anuncio {
padding: 2.5rem;
}
.contenido-anuncio h3,
.contenedor-anuncio p {
margin: 0;
}
.precio {
color: #71b100;
font-weight: 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;
}
/* 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: 1;
color: white;
}
.contenido-contacto {
font-size: 1.8rem;
}
/** Seccion Inferior**/
.seccion-inferior {
display: flex;
justify-content: space-between;
}
.seccion-inferior .blog {
flex-basis: 90%;
}
.seccion-inferior .testimoniales {
flex-basis: calc (80% - 3rem);
}
.entrada-blog {
display: flex;
justify-content: space-between;
margin-bottom: 2rem;
}
.entrada-blog:last-of-type{
margin-bottom: 0rem
}
.entrada-blog .imagen {
flex-basis: 60%;
}
.entrada-blog .texto-entrada {
flex-basis: calc(40% - 5rem);
}
.texto-entrada h4 {
margin: 0;
line-height: 1.4;
}
.texto-entrada a {
color: black;
text-decoration: none;
}
.texto-entrada h4::after {
content: '';
display: block;
width: 15rem;
height: 0.5rem;
background-color: darkgreen;
margin-top: 1rem;
}
.texto-entrada span {
color: darkorange;
}
/*** Testimoniales **/
.testimonial {
background-color: #71B100;
font-size: 1.6rem;
padding: 2rem;
color: #ffffff;
border-radius: 1rem;
}
.testimonial p {
text-align: right;
}
.testimonial blockquote::before {
content: '';
background-image: url(../img/comilla.svg);
width: 4.5rem;
height: 4.5rem;
position: absolute;
left: -1rem;
}
.testimonial blockquote {
position: relative;
padding-left: 5rem;
font-weight: 300;
}
/**Footer**/
.site-footer {
background-color: #333333;
margin: 0;
}
.contenedor-footer{
padding: 3rem 0;
text-align: center;
color: white;
}
.copyright {
margin: 1rem;
color: #ffffff;
}
/**Paginas Internas**/
/**Nosotros**/
.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: 1rem 0 3rem 0;
}
/**Anuncio**/
.resumen-propiedad {
display: flex;
justify-content: space-between;
align-items: center;
}
/**VER PROPIEDADES**/
.slider {
width: 95%;
margin: auto;
overflow: hidden;
}
.slider ul {
display: flex;
padding: 0;
width: 400em;
animation:cambio 12s infinite alternate;
animation-timing-function: ease-in-out;
}
.slider li {
list-style: none;
width: 50%;
}
.slider img {
width: 100%;
}
@keyframes cambio {
0% {margin-left: 0;}
10% {margin-left: 0;}
20% {margin-left: -50%;}
30% {margin-left: -50%;}
40% {margin-left: -100%;}
50% {margin-left: -100%;}
60% {margin-left: -170%;}
70% {margin-left: -170%;}
80% {margin-left: -220%;}
90% {margin-left: -220%;}
100% {margin-left: -270%;}
100% {margin-left: -270%;}
}
/**Contacto**/
.contacto p {
font-size: 1.2rem;
color: #4f4f4f;
margin: 2rem 0 0 0;
}
legend {
font-size: 2rem;
color: #4f4f4f;
}
label {
display: block;
font-weight: 700;
text-transform: uppercase;
}
input:not([type="submit"]),
textarea,
select{
padding: .5rem;
display: block;
width: 95%;
background-color: #e1e1e1;
margin-bottom: 2rem;
border: none;
border-radius: 1rem;
}
input [type="radio"]{
width: auto;
}
select{
-webkit-appearance: none;
appearance: none;
}
textarea {
height: 10rem;
}
.forma-contacto {
max-width: 800px;
display: flex;
justify-content: space-between;
margin: 0;
align-items: center;
}