html{font-size: 16px;}

body {background: #5ad0e5; 
     font-family: roboto,helvetica,sans-serif;; 
     text-align: center;}

h1 {color: #fff; 
    background:#1c8ea2; 
    padding: 0.5rem 1rem 0.5rem 1rem;  
    font-size: 2.125rem;}

h2 {background:#1c8ea2; 
    width: 73%;
    float: right;
    margin-top: 0rem; 
    color: #fff; }

h3 { color: #0b597c;}

h4 { color: #0a414b;}

ul li a {color: #fff; 
         text-decoration: none; 
         font-size: 1rem; 
         background: #0b597c; 
         padding: 0.5rem 1rem 0.5rem 1rem;
         margin: 1rem;}

ul li a:hover {background: #5ad0e5; 
               color:#0a414b; 
               font-style: italic;}

ul li {list-style-type: none;}

.menu {display: flex; 
       justify-content: center;}

.materias
{
    width: 73%;
    float: right;
    display: flex;
    justify-content: center;
}

.sharon {width: 18.75rem; 
         border: 0.25rem solid #0b597c; }

.imagen {width: 25%; float: left;}

p {margin:0.5rem 0rem 2rem 25rem;}

footer {background:#1c8ea2; 
        color: #fff; 
        padding: 0.5rem 1rem 0.5rem 1rem; 
        text-align: left;}

.topnav {
    overflow: hidden;
    background-color: #333;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.topnav a {
    /*float: left;
    display: block;*/
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

#opcionesMaterias
{
    display: none;
    width: 75%;
    float: left;
}

.imagenMaterias
{
    float: left;
    width: 100%;
    margin-top: 2rem;
    display: inline;
}

.listaMat
{
    margin-left: -2rem;
}

.matClass
{
    padding-right: 3rem;
}

/*Si el máximo es 816px*/
@media (max-width: 1158px)
{
    h2
    {
        float: right;
        width: 69%;
    }
    .matClass
    {
        padding-right: 3rem;
    }
    .materias
    {
        width: 69%;
        float: right;
    }
}

/*Si el máximo es 816px*/
@media (max-width: 1020px)
{
    h2
    {
        float: right;
        width: 66%;
    }
    .matClass
    {
        padding-right: 3rem;
    }
    .materias
    {
        width: 66%;
        float: right;
    }
}

/*Si el máximo es 816px*/
@media (max-width: 940px)
{
    h2
    {
        float: right;
        width: 64%;
    }
    .matClass
    {
        padding-right: 3rem;
    }
    .materias
    {
        width: 64%;
        float: right;
    }
}

/*Si el máximo es 816px*/
@media (max-width: 890px)
{
    h2
    {
        float: right;
        width: 61%;
    }
    .matClass
    {
        padding-right: 3rem;
    }
    .materias
    {
        width: 61%;
        float: right;
    }
}

/*Si el máximo es 816px*/
@media (max-width: 816px)
{
    .matClass
    {
        padding-right: 3rem;
    }

    body {background: #800606; 
         font-family: roboto,helvetica,sans-serif;
         text-align: center;}
        
    h1 {color: #800606; 
        padding: 0.5rem 1rem 0.5rem 1rem;
        font-size: 2.2rem;
        background: #fff;}

        
    footer {background:#fff; 
            color: #800606; 
            padding: 0.5rem 1rem 0.5rem 1rem; 
            text-align: left;}    

    .materias
    {
        width: 100%
    }

    .porecentajeMat
    {
        margin: 0rem 0rem 1rem 0rem;
    }
        
    .imagen
    {
        width: 100%;
    }
        
    h2
    {
       width: 100%;
       margin-top: 1rem;
    }
    
        
    .h3
    {
        
    }
    ul li a
    {
        padding: 0.5rem 0rem 0.5rem 1rem;
        margin: 0rem;
    }

    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
        float: right;
        display: block;
    }

    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav
    {
        padding-top: 0rem;
        padding-bottom: 0rem;
    }
    .topnav a
    {
        float: left;
        display: block;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }

    #opcionesMaterias
    {
        display: block;
        width: 100%
    }

    #materiasAprobadas
    {
        
    }

    #materiasCurso
    {
        display: none;
    }

    #materiasFaltantes
    {
        display: none;
    }
    .matClass
    {
        padding-right: 0rem;
    }
}