.pageContent{
    margin: 0 auto 15rem auto; /* TOP RIGHT BOTTOM LEFT*/
    padding:2rem; 
}

/*=================================
    ESTILS LOGIN FORM
  =================================*/
.inputLogin{
    border:0.5px solid black;
    width:15rem;
    font-size:0.9rem;
    padding:0.5rem 1rem;
    border-radius:2px;
}

.buttonLogin{
    background:#db6f71;
    width:15rem;
    font-size:0.9rem;
    padding:0.5rem 1rem;
    border-radius:2px; 
    color:white;
    font-weight:700;
    border:none;
    cursor:pointer;
    
    transition: 1s;
}

.buttonLogin:hover{
    background:#CE1417;
}

/*========================================================================
    DEFINIMOS UN GRID - CON 2 ELEMENTOS
    +--------------------------------+------+
    +                                +   B  +
    +            A (area1)           + area +
    +                                +   2  +
    +----------+----------+----------+      +
    +                                +      +
    +           C (area3)            +      +
    +                                +      +
    +----------+----------+----------+------+
  ========================================================================*/

/*  CONSTRUIMOS UN GRID DE 2 COL x 2 FILAS */
.grid-article-container {
    display: grid; 
    grid-column-gap: 2%;  /*  separacion  columnas */
    grid-row-gap: 1rem;  /*  separacion  filas */
    
    grid-template-columns: 80% 18%;  /*  2 columnas  */
    grid-template-rows: auto auto;       /*  2 fila - altura: auto  */
    
    /*  DEFINIMOS LAS AREAS, QUE OCUPARA CADA ELEMENTO DEL GRID */
    grid-template-areas:
          "area1 area2"
          "area3 area2";
}


.area1Item {grid-area: area1;padding:2rem 2rem 4rem 2rem; display:flex;flex-wrap:wrap;background:#FFF;}
.area2Item {grid-area: area2;}
.area3Item {grid-area: area3;}

.ampladaXarxesDiv{width:80%;}


/*=================================
    ESTILS DELS ARTICLES
  =================================*/
.categories{ 
     font-size:1rem;
     color:#616161;
     font-weight:500; 
     letter-spacing: 0.1rem;
 }
 
.titol{ 
     font-size:2rem;
     font-weight:700;
     margin:0.5rem 0;
     text-align: left;
     color:#000;
     outline:none;
 }
 
 .data{
     font-size:0.8rem;
     font-weight:500;
     padding-top:1rem;
     color:#d8a929;
 }
 
 .resum{ 
     font-size:1rem;
     font-weight:400;
     text-align: justify;
     line-height: 1.6rem;
 }
 
 .contingutArticle{
     font-size:1rem;
     margin-top:0.5rem;
     text-align:justify;
     line-height: 1.6rem;
 }
 
 .contingutArticleImportatWordpress{
     margin-top:0.5rem;
     white-space: pre-wrap;  /* Per mostrar els "enter - nova linia */
     text-align:justify;
 }
 
 
.contenidorVideo{
	max-width:45rem;
	margin:auto;
}

.ImatgeArt{
	width:100%;
	overflow:hidden;
}

.ImatgeArt img{
	width:100%;
}


.linkFitxerAdjunt{
    font-weight:300;
    text-decoration:none;
    font-size:0.9rem;
    color:#000;
    outline:none;
}
.linkFitxerAdjunt:hover{color:#CE1417;}


/*
 ==========================================
 		P A N T A L L A   F I N S   1140px
 ==========================================
 */
@media screen and (max-width: 1140px) {

    .grid-article-container {
        grid-column-gap: 2%;  /*  separacion  columnas */
        grid-row-gap: 1rem;  /*  separacion  filas */
    
        grid-template-columns: 76% 23%;  /*  2 columnas  */
    }
}

/*
 ==========================================
 		P A N T A L L A   F I N S   1000px
 ==========================================
 */
@media screen and (max-width: 1000px) {


    .pageContent{
        margin: 4rem auto 15rem auto; /* TOP RIGHT BOTTOM LEFT*/
        padding:4rem 1rem; 
    }
    
    .titol{ font-size:1.5rem;}

/*========================================================================
    DEFINIMOS UN GRID - CON 2 ELEMENTOS
    +--------------------------------+
    +                                + 
    +            A (area1)           +
    +                                + 
    +----------+----------+----------+
    +                                + 
    +            B (area)           +
    +                                + 
    +----------+----------+----------+
    +                                +
    +            C (area3)           + 
    +                                +
    +----------+----------+----------+
  ========================================================================*/

    /*  CONSTRUIMOS UN GRID DE 1 COL x 2 FILAS */
    .grid-article-container {
        display: grid; 
        grid-column-gap: 0;  /*  separacion  columnas */
        grid-row-gap: 1rem;  /*  separacion  filas */
    
        grid-template-columns: 100%;  /*  1 columnas  */
        grid-template-rows: auto auto auto;       /*  2 fila - altura: auto  */
    
        /*  DEFINIMOS LAS AREAS, QUE OCUPARA CADA ELEMENTO DEL GRID */
            grid-template-areas:
          "area1"
          "area2"
          "area3";
    }

}