/* Generales */

*{margin: 0rem; padding: 0rem;}
*{box-sizing: border-box; }

/*--------------- DISEÑO PARA DESKTOP ----------------- */

html {font-size: 20px;} 
body {background: #f7f5f4; 
     font-family: 'Source Sans Pro', sans-serif;
     margin: 0 0 0 3rem;}

.contenedor {width: 1280px; }

/* Menu de navegación página */

header { padding: 1rem 0 1rem 0;}

header nav ul li {list-style-type: none; 
        display: inline;
        font-size: 0.7rem;
        font-weight: 700;
        padding: 0 5rem 0 0}

header nav ul li a {text-decoration: none;
            color: #333333;
            }

header nav ul li a:hover{ box-shadow: 0rem 0.3rem 0rem #333333; }

/* Estilos titulos y subtitulos */

h1 {font-size: 2rem;
    font-weight: 700;
    line-height: 2rem;
    border-bottom-width: thick;
	border-bottom-style: solid;
	border-bottom-color: black;
    display: inline}

h2 {font-size: 0.9rem;
    font-weight: 700;
    color: #f7f5f4;
    background: #d12800;
    display: inline;
    }

h3 {font-size: 0.8rem;
    font-weight: 700;
    padding: 1rem 0rem 0.3rem 0rem;}


/* Cuerpo principal */

section {display: flex; 
        justify-content: space-between;}

article {width: 33%;
        }

article img {width: 100%;
            padding: 1rem 0rem 0rem 0rem;
            }


main ul {font-size: 0.5rem;
        padding: 0.5rem 0rem 1rem 0rem;}

.materias {padding: 2.8rem 0rem 0rem 2rem;}

.rotulos ul {margin: 2.7rem 0rem 0rem 0rem;
        list-style-type: none;
        font-size: 0.7rem;
        color: #333333;
        }

.rotulos a {text-decoration: none;
            color: #333333;
            font-weight: 700;
                        }

.rotulos a:hover{ background: #fcd844;
                        color: #333333;}

/* Legales */

footer {margin: 2rem 0rem 0rem 0rem;
       width: 100%;
      }

footer p {font-size: 0.6rem;
        text-align: center;}



.importante {font-weight: 800}


/* --------------RESPONSIVE--------------- */

@media (max-width: 768px) { 
    
    /* Generales */
    
    .contenedor {width: 768px;} 
    html {font-size: 18px;}
    body {margin: 0}
   
    /* Menu de nav */
    
    header { width: 100%;
            position: fixed;
            top: 0;
            background:#333333; }
    
    header nav ul li {padding: 0 2rem 0 3rem}
    
    header nav ul li a {color: #ffffff;
            }
        
    /* Cuerpo principal */
    
    section {width: 100%;
            display: flex;
	       flex-direction: column;
	       justify-content: space-between;
            padding: 5rem 0 5rem 3rem;}
  
    h1 { line-height: 3rem}
    
    article { width: 50%}
  
    main ul {font-size: 0.7rem;
            padding: 0.2rem 0rem 0.5rem 1rem;}
    
    
    .materias {padding: 0.5rem 0 0 0;}
    
        
    .rotulos ul li {margin: 2rem 0 1rem 0; 
        padding: 0 25% 0 0;
        font-size: 0.8rem;
       display: inline;
            }

    
     /* Pie de pagina */
    
    footer { width: 100%;
            position: fixed;
            bottom: 0;
            background: #e5e3e2}
   
   
}