/*Aquí li hem posat el tipus de lletra per a tota la pàgina*/
* {
    font-family: 'Libre Baskerville', sans-serif;
  }

/*Aquí li hem dit que la llista estigui en linea amb les capses de la capçalera i que no tingui els punts del seu estil*/
ul {
    margin-top: 50px;
    display: inline-block;
    list-style: none;
    padding:0;
    font-weight: bold;
}
/* Aquí li diem la grandaria de lletra del títol */
h1 {
    font-size: 50px;
}

/*Aquí li hem dit a la llista el seu marge i col·locació*/
ul li {
    margin-right: 35px;
    float: left;
}
/*Aquí li diem les dimensions del body*/
body {
    width: 98%;
    height: 100%;
}

/*Aquí li hem dit les dimensions de la capçalera i distancia*/
header {
    
    width: 100%;
    height: 90px;
    display: inline-block;
    padding: 10px;
}

/*Aquí hem posat unes dimensions per a la capsa del títol i que marxi a l'esquerra*/
div#inici {
    
    width:20%;
    height: 100%;
    float: left;
}

/*Aquí li hem a aquesta classe que crei una capsa invisible per a col·locar be els espais següents.*/
div.espacio {
    background:transparent;
    width:60%;
    height: 100%;
    float: left;
}

/*Aquí li hem dit a la llista el seu marge i col·locació*/
div#menu {
    
    width:20%;
    height: 100%;
    float: right;
}

/*Aquí li hem dit les dimensions de la id i la disposició de la capsa*/
section#cuerpo {
    
    width: 99%;
    height: 100%;
    display: inline-block;
    padding: 20px;
}

/*Aquí li hem dit el color de la capsa articles*/
article.articulos {
    background-color: grey;
    width: 100%;
    margin-bottom: 7px;
    float: left;
}

/*Aquí li hem dit les dimensions de la id i la disposició de la capsa de les imatges, a l'esquerra de la capsa i amb tots els seus marges.*/
div.img-articulo {
    
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    height: 100%;
    float: left;
}

/*Aquí li hem la orientació de la capsa article, enganxada a la imatge*/
div.info-articulo {
    
    float: left;
}

/*Aquí li hem al footer les dimensions de la capsa i la disposició i marges.*/
footer {
    
    width: 100%;
    height: 100%;
    display: inline-block;
    padding: 10px;
}

/*Aquí li hem donat unes dimensions i orientació a la capsa esquerra del footer i dimensions de lletra.*/
div#izquierda {
    
    font-size: 12px;
    width:20%;
    height: 100%;
    float: left;
}

/*Aquí li hem donat unes dimensions i orientació a la capsa dreta del footer, i dimensions de lletra i negreta.*/
div#derecha {
    
    font-size: 15px;
    font-weight: bold;
    width:20%;
    height: 100%;
    float: right;
}
/*Aquí hem creat una línea horitzonal de separació de les dues parts del footer i el seu color*/
div#separador {
    
    background-color: black;
    width: 100%;
    height: 2px;
    margin-top: 5px;
    margin-bottom: 5px;

    float: left;
}

/*Aquí li hem donat unes dimensions i orientació a la capsa inferior esquerra del footer i dimensió de lletra*/
div#copy {
    
    font-size: 12px;
    width:20%;
    height: 100%;
    float: left;
}

/*Aquí li hem donat unes dimensions i orientació a la capsa inferior dreta del footer i dimensió de lletra*/
div#rrss {
    
    font-size: 12px;
    width:20%;
    height: 100%;
    float: right;

}

/*Aquí li hem donat un marge al títol superior del vídeo per a quadrar-ho*/
div.contactanos {
    margin-bottom: -20px;
    margin-left: 20px;
    width:100%;
    height: 100%;
    float: left;
}

div.formulario {
    margin: 40px;
    width: 90%;
    margin-left: 60px;
    height: 100%;
    float: left;
    
}

/*Aquí li hem donat un marge en la part de dalt al text per a quadrar-ho amb el vídeo.*/
div#the-video-text {

    margin-top: 25px;
}