@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400&display=swap');;
body{
font-family: 'Roboto Slab', serif;

}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
   
}
/* Imagen de fondo */
.fondo {
    margin: 0 auto;
    width:100%;
    /* height: 800px;  */   
    display:grid;
    grid-template-columns: 5% repeat(3, 1fr) 5%;
    grid-template-rows: 5% repeat(2,1fr) 5%;
    grid-gap: 1%;
  
} 
.fondo img{
    min-width: 100vw;
}



/* Formato de lineas separadoras */
.Container__Separador{
    width: 100%;
    height: 60px;
    background: #122638;    
    align-items: center;
}
.Separador{
    border-top: 3px solid #F5DE39;
    height: 2px;
    display: flex;
    width: 350px;
    align-items: center;
    justify-content: space-around;
    position: relative;
    margin-left: 246px; 
    top: 123px;
  }

.Titulo__Comunidad{
    
    color: white;
    padding: 15px 10px;
    font-size: 18px;
    display: flex;
    text-transform: uppercase;
    font-weight: 500;
   
    
}
/* separador de titulo */
.Separador__Conteiner{
    width: 0;
    height: 24px; 
    align-items: center;
    display: flex;
    padding-left: 15px;
}

.T__Separador {
    border-top: 4px solid #F5DE39;
    height: 2px;
    width: 350px;
    
    display: flex;    
    margin-left: 20px;
  }

  /* Texto */
.Texto{
    width: 650px;
    padding: 15px 10px;
    font-size: 20px;
    display: flex;
    font-weight: 200;
    margin-left: 20px;
    
    
   

}


.Titulo__Provincia{
    font-size: 45px;
    font-weight: 350;
    padding-left: 15px;
}



/* Tercera seccion */
.T__Separador2 {
    border-top: 4px solid #F5DE39;
    height: 2px;
    width: 130px;
    padding: 0px;
    display: flex;    
    margin-left: 20px;
   
  }

/* diseño de cartas */

.Tercer__Seccion{

    margin-top: 150px;

}

.Conteiner__Cards{
    width: 100%;
    max-width: 2100px;
    display: flex;
    height: 550px;
    
}
.imagen{
    height: 300px;
    width: 100%;
}
.cards{
    width: 100%;
    margin: 20px;
    border-radius: 6px;
    overflow: hidden;
    background: white;
    box-shadow: 0px 1px 10px rgb(0, 0, 0, 0.2);
    cursor: default;
    transition: all 400ms ease;
    flex-direction: column;
}

.cards:hover {
    box-shadow: 5px 5px 20px rgb(0, 0, 0, 0.4);
    transform: translateY(-3%)
    
}
.cards .contenido{
    text-align: center;
    display: flex;
    width: 100%;
    color: black;
}
.cards .contenido p{
    line-height: 1.5;
    position: relative;
    font-size: 20px;
    text-justify:auto;
}
.titulo__Card h3{
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
    color: black;
    font-weight:550;
}
.Boton{
    width: 850px;
    align-items: center;
    padding-left: 110px;
    
   
}
.Boton a{
    padding: 10px;
    display: inline-block;
    margin-top: 10px;
    color: #1685DB;
    border: 1px solid #1685DB;
    border-radius: 4px;
    transition: all 400ms ease;
    
}
.Boton a:hover{
    background: #1685DB ;
    color: #fff;
}
.contenido{
    width: 650px;
    padding: 15px 10px;
    font-size: 20px;
    display: flex;
    font-weight: 200;
    
   

}

/* pie de pagina */
.Pie__pagina{
    width: 100%;
    background-color: #122638;
    height: 350px;
    
}
.Elemetos__1{
    width: 100%;
    height: 100%;
}

.Logo__piP{
    width: 150px;
    height: 150px;
    margin-left: 600px;
    margin-top: 50px;
   
    
}


.separador__1{
    border-top: 3px solid #F5DE39;
    height: 2px;
    display: flex;
    width: 350px;
    align-items: center;
    justify-content: space-around;
    position: relative;
    margin-left: 246px; 
    top: 123px;
}

.separador__2{
    border-top: 3px solid #F5DE39;
    height: 2px;
    display: flex;
    width: 350px;
    align-items: center;
    justify-content: space-around;
    position: relative;
    left: 750px;
    top: 120px;
}

.icono1{
   
    width: 45px;
    height: 45px;
    line-height: 45px;
    color: white;
    margin-left: 600px;
    top: 85px;
    padding-bottom: 85px;
    
 
}
.icono2{
   
    width: 45px;
    height: 45px;
    line-height: 45px;
    color: white;
    margin-inline-start: 10px;
    top: 85px;
 
}

.icono3{
   
    width: 45px;
    height: 45px;
    padding: 15px;
    line-height: 45px;
    color: white;
    margin-inline-start: 10px;
    top: 85px;
 
}
.icono4{
   
    width: 45px;
    height: 45px;
    padding: 15px;
    line-height: 45px;
    color: white;
    margin-inline-start: 10px;
    top: 85px;
    
 
}
.Elemetos__2{
    width: 100%;
    height: 100%;
}
.derecho{
    font-size: 20px;
    color: white;
    font-weight: 200;
    margin-left: 450px;
}


.marcos__1{
    background: red;
    width: 350px;
    height: 350px;
    display: flex;
    margin-left: 980px;
    float: left;
}
.marcos__2{
    background: #ccc;
}
.marcos__4{
    background: #ccc
}
.marcos__3{
    background: #ccc
}