/*Paleta de colores*/
/* 
#F3F6E1
#B3DEE5
#225378
#30343C
*/

* {margin: 0;
  padding: 0;}

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

@import url(https://fonts.googleapis.com/css?family=Dosis:300,700,500,800);

body {
    font-family:'Dosis', sans-serif;}

.contenedor {width: 100%;
            min-width: 20rem;
            max-width: 30rem;
            background: #B3DEE5;
            border: #F3F6E1 1.5rem solid;
            box-sizing: border-box;}

.contenedorazul {width: 100%;
            min-width: 20rem;
            max-width: 30rem;
            background: #225378;
            border: #F3F6E1 1.5rem solid;
            box-sizing: border-box;}

.contenedordos {width: 100%;
            min-width: 20rem;
            max-width: 30rem;
            margin: -3% 0%;
            background: #B3DEE5;
            border: #F3F6E1 1.5rem solid;
            box-sizing: border-box;}

.contenedor3 {width: 100%;
            min-width: 20rem;
            max-width: 30rem;
            background: #B3DEE5;
            border: #F3F6E1 1.5rem solid;
            box-sizing: border-box;}

footer {margin: 2rem 2rem 6rem 2rem;}

.footer {font-size: 0.56rem;
    color: #30343C;
    margin: 0.5rem 0 0 0;
    text-align: center;}


/*--HEADER MENU NOTAS--*/

.titularuno {margin: 2rem 1.5rem 1.5rem 1.5rem;}

.listacabecera{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;}

.listacabecerados{
    float: right;}

.volveratras{
    margin: 150% 0% 0% 0%;}

.materia{
    font-size: 2.8rem;
    margin: -12% 8% 0% 8%;
}

.pagsectiondos{
    color: #30343C;
    margin: 0.8% 0% 0% 2.5%;
    line-height: 1.22rem;
}

hr{margin: 1% 0% 0% 0%;
}

.superlink{
    text-decoration: none;
    color: black;
}

/*--LISTA MENU DE NOTAS--*/

.contenedorcentrado {
    width: 90%;
    margin: 5%;
    background: #e1e1f5;
    border-width: 1px;
    border-color: #0B614B
    box-sizing: border-box
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    }

.iconnote {
    margin: 1rem;
    width: 15%;
}


.infonote{
    margin: 0.5rem 0rem;
    width: 65%;
}

.avatar {
    border-radius: 50%;
    margin: 6%; 
}

.afecha{
    font-size: 0.8rem;
    margin: 0% 0% 4% 0%;
}
.afechados{
    font-size: 0.8rem;
    margin: 3% 0% 0% 0%;
}

.notasubmenu{
    width: 85%;
    float:left;}


.notalista{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    }

.autornota{
    text-decoration: none;
    width: 100%;
    font-size: 0.9rem;
    margin: 8.5% 0% 0% 5%;
}

.superpuntos{
    margin: 1.5rem 0rem 0rem 0.9rem;
    width: 80%;
    font-size: 0.8rem;
}

/*LECTURA DE NOTA*/

.notasubmenu{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    }

.lectura{
    margin: 10%;
    font-size: 0.9rem;
    color:#225378;
}

.fav{
    margin: 0% 5% 0% 0%;
}


/*RESPONSIVE DE MENU Y LECTURA DE NOTAS*/

@media all and (max-width: 500px) {
    
.iconnote {
    margin: 1.3rem 0.5rem;
    width: 15%;
}

.superstars{
    display: block;
    }

.notasubmenu{width: 74.5%; float:left;}
    
.infonote{
    margin: 1rem 0.5rem;
    width: 55%;
        
    }    
    
.imagennota{
    width: 80%;
    height: 80%;  
    }
    
}

/*--PERFIL DE USUARIO--*/

section.titular, ul.paro, .seguir ul, ul.archivos {display: -webkit-flex;
            display: flex;
            -webkit-flex-flow: row wrap;
            flex-flow: row wrap;}

.contenedor2 {width: 100%;
            min-width: 20rem;
            max-width: 30rem;
            background: #E45d51;
            border: #F3F6E1 1.5rem solid;
            box-sizing: border-box;}

h2#titular{text-align: center; 
           margin-top: 2rem;
           font-weight: 800; 
           font-size: 2.8rem;
           color: #F3F6E1;
           line-height: 2.6rem}

h5#titular_menor{text-align: center; 
                 font-weight: 800; 
                 font-size: 1.5rem; 
                 color: #F3F6E1;
                 line-height: 2.6rem}

p{color: #30343C}

h3{color: #225378}

h4{color: #30343C}

.botonazo li a:hover {background: #30343C;}

.botonazo li a{background:#225378;
               color: #F3F6E1;
               border-radius: 10px 10px 10px 10px;
               border: 0px solid #000000;
               text-decoration: none; text-align: center;
               font-size: 1.2rem; font-weight: 700;
               padding: 1.5rem; width: 30%;
               display: inline-block; margin-bottom: 2rem}



img#notas{margin-top: auto}

.seguis{font-size: 0.9rem}

.container-inner {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    }

.seg1{ margin-left: 33%}
.seg2{ margin-left: 3%}
.seg3{ margin-left: 27%}


@media (min-width: 20rem) {
  .seg1 { width: 15%; }
  .seg2 { width: 20%; }
  .seg3 { width: 47%; }
 }

@media (min-width: 20rem) {
  .img1 { width: 100%;  }
  .img2 { width: 100%; }
  .img3 { width: 100%; }
 }

.img1{display: -webkit-flex;
      display: flex; margin-bottom: 0.8rem;
      align-items: center;
      justify-content: center}

.img2{display: -webkit-flex;
      display: flex; margin-bottom: 0.8rem;
      align-items: center;
      justify-content: center}

.img3{display: -webkit-flex;
      display: flex; margin-bottom: 0.8rem;
      align-items: center;
      justify-content: center}

.introdni{height: 2.5rem; width: 60%;border: 0px solid}

/* TITULAR */

header.home {margin: 1rem 0 0 0;}

.titular {margin: 1rem 2rem 0 2rem;}


.titular h4 {font-weight: 800;
            color: #30343C;}

.titular h5 {font-weight: 300;
            color: #30343C;
            font-size: 1rem;}

section.titular, ul.paro, .seguir ul, ul.archivos, .dg2, .listacabecera, article.conteo, .infocomision {display: -webkit-flex;
            display: flex;
            -webkit-flex-flow: row wrap;
            flex-flow: row wrap;}

.col1titular {width: 85%;
            margin: 0 0 1rem 0;}

.col2avatar {width: 15%;
            text-align: right;}


/* NAV MATERIAS INCRIPTAS */

nav.inscripto {margin: 0rem 0rem 0 2rem;}

nav.inscripto ul {list-style-type: none;
                margin: 0rem 0 0 0;}

.inscripto ul li a {text-decoration: none;}

nav.inscripto li {width: 44.9%;
                height: 9rem;
                padding: 2rem 0 0 0;
                margin: 0 0.5rem 0.5rem 0;
                text-align: center;}

.materiahoy {background: #E45D51;}

.materianormal {background: #F3F6E1;}

.colorb {color: #F3F6E1;}


ul.paro h1 {color: #30343C;
            font-size: 3.3rem;
            font-weight: 800;}

ul.paro h5 {color: #30343C;
            font-size: 0.9rem;
            font-weight: 700;}


/* MATERIAS QUE PODES SEGUIR */

nav.seguir {margin: 0rem 0rem 0 2rem;}

nav.seguir ul {list-style-type: none;
                margin: 1rem 0 0 0;}

.seguir ul li a {text-decoration: none;}

nav.seguir li {width: 44.9%;
                height: 9rem;
                padding: 1.5rem 0 0 0;
                margin: 0 0.5rem 0.5rem 0;
                text-align: center;
                background: #F3F6E1;}

.seguir ul h5 {color: #30343C;
                font-weight: 500;
                font-size: 0.9rem;}

.bold {font-weight: 800;}


/* LEGALES */

footer {margin: 2rem 2rem 6rem 2rem;}

.footer {font-size: 0.56rem;
    color: #30343C;
    margin: 0.5rem 0 0 0;
    text-align: center;}

.footer2 {font-size: 0.56rem;
    color: #F3F6E1;
    margin: 0.5rem 0 0 0;
    text-align: center;}

/* DG2 */

header.titular2 {margin: 2rem 2rem 1.5rem 2rem;
                border-bottom: #F3F6E1 0.1rem solid;
                padding: 0 0 0.5rem 0;}

.listacabecerados{float: right;}

.volveratras{
    margin: 150% 0% 0% 0%;}

.materiados{
    color: #30343C;
    font-size: 2.8rem;
    margin: -12% 8% 0% 8%;
}

.pagseccion{
    margin: 0.8% 0% 0% 2.5%;
    line-height: 1.22rem;
}


.superlink{
    text-decoration: none;
    color: black;
}

.pagseccion h5 {font-weight: 300;
                color: #F3F6E1;}

.pagseccion h4 {color: #F3F6E1;}

.materia {color: #F3F6E1;}


/* CONTEO */

.resaltadoconteo {background: #E45D51;
                width: 100%;
                margin: 1.2rem 0 0 -1.5rem;
                padding: 0.8rem 0 0.8rem 3rem;}

article.conteo {margin: 1rem 0.5rem;}

.conteo h5 {color: #F3F6E1;
            font-weight: 700;}

div.clase {width: 1.5rem;
            height: 1.5rem;
            background: #F3F6E1;
            margin: 0.5rem 2.09rem 0 0;
            color: #30343C;
            font-weight: 800;
            font-size: 1.1rem;
            text-align: center;}

div.clase1 {width: 1.5rem;
            height: 1.5rem;
            background: #F3F6E1;
            color: #30343C;
            font-weight: 800;
            font-size: 1.3rem;
            text-align: center;
            margin: 0.5rem 0 0 0;}


/* COMISIONES */

.pablo li a {text-decoration: none;}

.pablo li {background: #F3F6E1;
            width: 44.9%;
            height: 9rem;
            margin: 0.5rem 0.5rem 0rem 0;}

.pablo {margin: 0 0 0 2rem;}


/* MAS COMISIONES */

.nvacom {margin: 0.5rem 0 0 2rem;}

.nvacom li {border: #F3F6E1 0.3rem solid;	
            width: 43%;
            height: 8.3rem;}

.txtcom {margin: 1rem 0 0 0.3rem;}

.espacio {color:#F3F6E1;
        padding: 2.7rem 0 0 0;}

.txtcom h5 {color: #F3F6E1;
            font-size: 1rem;
            font-weight: 300;}

.bold {font-weight: 700;}

.margen {margin: 1rem 0 1.1rem 0;}

.contenedorarchivos {margin: 1.4rem 0 8rem 0;}


/* VISOR DE IMAGENES */


/* RESPONSIVE */

@media screen and (max-width:346px){
    
    .archivos img {width:36px;}
    
    ul.opciones {position: fixed;
                bottom: 4.9rem;}
    
    .archivos li a {text-decoration: none;
                display: inline-block;
                background:#225378;
                padding: 1.2rem 1.2rem;}
}



/* MENU */

nav.menu {position: fixed;
        left: 0;
        bottom: 0;}

ul.opciones {position: fixed;
            bottom: 6rem;}

ul {list-style-type: none;}

.archivos li a {text-decoration: none;
                display: inline-block;
                background:#225378;
                padding: 1.5rem 1.625rem;}

.archivos li {width: 20%;
            box-sizing: border-box;
            text-align: center;}

.archivos li a:hover {background: #30343C;}

section.titular, ul.paro, .seguir ul, ul.archivos {display: -webkit-flex;
            display: flex;
            -webkit-flex-flow: row wrap;
            flex-flow: row wrap;}


/* RESPONSIVE */

@media screen and (max-width:346px){
    
    .archivos img {width:36px;}
    
    ul.opciones {position: fixed;
                bottom: 4.9rem;}
    
    .archivos li a {text-decoration: none;
                display: inline-block;
                background:#225378;
                padding: 1.2rem 1.2rem;}
}

.visor2 {list-style-type: none;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
        margin: -4.5rem 0 0 2rem;}

.visor2 li {width: 18.8%;}