/*Hoja de estilo*/



/* fondos */




/* Body */



header{ padding: .5rem 0rem 0rem 0;
        width: 100%;
        margin:0;
        position: fixed;
        top:0;
        height: 3rem;
        display: flex;
    justify-content: space-between;
        align-items:center;
        flex-wrap: nowrap;
        box-shadow: 0rem  0.3rem 1rem rgba(34, 0, 34, 0.81);
        z-index: 999;
        overflow: hidden;
        }

header img {height: 2.2rem; 
            margin:0 2rem;
            padding:.3rem}


header h2{text-align: center;
        font-weight: 100;
        margin:0;
        font-size: 1rem ; 
        }





  header nav {
    background-color:#271D60;
    color: white;
      box-shadow: .3rem .3rem 1rem rgba(10, 10, 10, 0.53);
    
    /* para salir del "flujo de información" del fondo 
        y colocase en una capa superior fija */
    position: fixed;
    left:2.3rem ;
    top: 3.5rem;
    height: auto;
    min-width: 13rem;
    transition: all .1s linear;
    z-index: 99;
      visibility: hidden;
      
      
}

header.violeta nav{background-color:#271D60 ;}
header.rosa nav{background-color:#330033 ;}
header.amarillo  nav{background-color:#96570d;}
header.verde nav{background-color:#02402D;}
header.celeste nav{background-color:#00507b;}
/* cuando cliqueamos el boton "menu3lineas"
el "target" es "nav#menu"
*/

.menu {position:relative}
.menu div {position:absolute; 
    top:1.5rem; 
    right:1.5rem; padding:; margin: 0;
        background-color: #e03b55;
       ; display:block; width: 1.3rem; height: 1.3rem;
        border-radius: 444rem;
        text-align: center }
.menu p{margin:0; padding-top: .2rem; font-weight: 800}

header nav#menu:target {
    visibility:visible;
    
    /* transición suave */
    transition: all .1s ease;
}

header nav li a:hover{background-color: rgba(0, 0, 0, 0.51); }

.x {display:block; position:absolute;
    right:0;
    height:2rem;
    width: 2rem;
    top:0}

.x img {height: 1.5rem}

.cerrar {height: 100%; position:absolute
            ;background-color: aliceblue;
            width: 100%}



.notif {margin:1rem .5rem 0 .5rem; 
        border-bottom-style: solid;
        border-bottom-color: rgba(255, 255, 255, 0.41);
        border-bottom-width: .1rem;
        }

header div h5{ display: inline-block;
                width: 100%;
            text-align: center;
            margin: 0;
            font-size: .7rem;
            font-weight: 100}

header div figure {margin:auto;
                padding: 0;}
header div img {height: 4rem;
                    width: auto;
                margin:auto; padding: 0 0;
        ; display:block;

    
                }

header div b {color: #e03b55;
            font-weight: 800;
            display: block; width:1rem;float:left;
            text-align: center}

header div ul {padding:.5rem 0rem 0 0 ; margin:0}
header div a {display: block; padding: .6rem}
header div li {font-size: 0.9rem;
                padding:  0}

.notif li {padding-bottom: 1rem}

.salir {font-size: ;
        margin: 1rem 0 0 0}


header.violeta {background-color:#271D60 ;}
header.rosa {background-color:#330033 ;}
header.amarillo {background-color:#96570d;}
header.verde {background-color:#02402D;}
header.celeste {background-color:#00507b;}

header.violeta img:active {background-color: rgba(20, 11, 60, 0.83);
                   border-radius: .2rem;
                                        }
header.rosa img:active {background-color: rgba(20, 11, 60, 0.83);
                   border-radius: .2rem;
                                        }

header.amarillo img:active {background-color: rgba(20, 11, 60, 0.83);
                   border-radius: .2rem;
                                        }
header.verde img:active {background-color: rgba(20, 11, 60, 0.83);
                   border-radius: .2rem;
                                        }

header.celeste img:active {background-color: rgba(20, 11, 60, 0.83);
                   border-radius: .2rem;
                                        }

body {    margin: 0;
        padding: 0 0 1.2rem 0 ;}

        body.violeta {background-color:#49398C;}
        body.rosa{background-color:#e03b55;
        }
body.amarillo {background-color:#F7931E; }
body.verde {background-color:#14806A; }
body.celeste {background-color:#50BED3}


main {padding: 5.5rem 0rem 4rem 0;
       }

a {text-decoration: none}
li {list-style: none;
    }


/* Textos */

a{text-decoration: none; color: white; font-family: font-family: 'Comfortaa', cursive ;}
body{font-family: 'Comfortaa', cursive; color: white;}
h1{font-size: 30px; color: white;}
h2{font-size: 20px; color: white;}
h3{font-size: 18px; color: white; text-align: left; }
p{ font-size: 12px; }
footer{font-family: 'Lato', sans-serif; font-size: 0.8rem; text-align: center;color: white;}


.barra {display:flex; 
        visibility: collapse; position: absolute;
        width: 100%; height: 3rem;
        justify-content: space-around;
        align-items: center; margin: 0}

.barra li a{display: block; padding: 1rem 2rem;
            margin: 0 0 0 0rem;
            font-weight: 900;
            position: relative}


.barra li a:hover {background-color: rgba(0, 0, 0, 0.33)}

.barra li a:active {background-color: #e03b55; color:white}



.pag {display: flex;
        position: fixed;
        bottom:0;
            width: 100%;
justify-content: center;
        margin: 1rem 0 0rem 0;
            padding:0 0 0rem 0;
        visibility: visible;
       }


.notificacion {position:absolute; 
    top:.8rem; 
    right:.5rem; padding:; margin: 0;
        background-color: #e03b55;
       ; display:block; width: 1.3rem; height: 1.3rem;
        border-radius: 444rem;
        text-align: center }
.notificacion p{margin:auto; padding-top: .28rem; font-weight: 800; }


.pag a {display:block;
            width: .8rem;
            height: .8rem;
            background-color: rgba(255, 255, 255, 0.67);
            border-radius: 90rem;
margin:0rem 1rem .6rem 1rem;
        }




@media (min-width:30rem){ 
    
    
   
    



}


@media (min-width:50rem) {
    header {padding: 0}
    
    header nav {visibility: collapse;position:absolute; left:-100%;
        transition:none }
    
    .menu {visibility: collapse;position:absolute}
    
     header h2{ visibility: collapse ; position: absolute}
    
    .barra {display:flex; 
        visibility: visible;
       position: relative
    }
    


}


            /*     splash     */


.splash img {display: block; margin: auto;
             width: 16rem}
        


        /*     INGRESO     */

input {outline:none}

.ingresorosa {
                    background: #e03b55 url(../img/fondo3.svg) no-repeat bottom .2rem left .5rem;
    background-size: 28rem;
        padding-bottom:30%; position:
}

.ingreso {padding:10% 0; display: flex ;
            flex-direction: column;
            justify-content: center;
            background: url(../img/fondo1rosa.svg) no-repeat right 1rem top 1rem, url(../img/fondo2rosa.svg) no-repeat bottom left;

background-size: 6rem, 6rem;
          
        }

.ingreso form{ margin: 0rem auto 0 0; 
                width: 100%;                    
                text-align: center;
                
            }

.ingreso form input{ margin-top: .5rem; 
                    margin-bottom: .5rem;
                    border-radius: 1rem;
                    height: 2.5rem; text-align: center;
    width: 70%;
                max-width: 20rem;
                padding: 0 0
                    ;border:none;
            font-family:'Comfortaa';
        
    background-color: rgba(255, 255, 255, 0.71)
                
            }

.ingreso .ingresar {   background-color: #50BED3 
        ;margin:2rem auto; color:white;
            font-family:'Comfortaa'; font-weight: 800;

}

.ingreso .ingresar:active {background-color: rgba(80, 190, 211, 0.79)}

.ingreso form a {width: 4rem; font-size: .8rem;text-align: center;      
            }

.ingreso img {display:block; margin:4% auto 0 auto;
                width: 12rem; height: auto;
            
        }
.asd:focus {background-color: #ffe8ec;
            transition: all .2s ease}





/* Pantalla principal */

.principal h1 {text-align: center;margin: 0 0 2rem 0;
    visibility: collapse;
    position: absolute;}

main.principal {background: url(../img/fondo1.svg) no-repeat right 1rem top 4rem, url(../img/fondo2.svg) no-repeat bottom left;

background-size: 6rem, 6rem;
}


.principal img{width: 70%;display: block;margin: auto; 
        padding: 2rem 0 .5rem 0;
            border-radius: 1rem}

.principal section {margin: 0}

.principal .amarillo {background-color: #F7AB16;   }

.principal .celeste{background-color: #50BED3}

.principal .rosa{background-color: #e03b55}

.principal .verde{background-color: #14806A}

main.principal ul {display:flex;
                        flex-wrap: wrap;
                    justify-content: center;
                    padding:0;
                    margin:0;
                    width: 100%;
                align-items: flex-end}

main.principal li{ margin:.5rem; position:relative; width: 40%; }

.iconos li{border-radius: 1rem; width: 40%; height: auto;display: block; }

.principal li h3 {position: absolute; top:0rem;
            display: block; margin: 1rem auto; width: 100%; text-align: center;
    font-size: 90%  }

main.principal li h1{width:100%; 
                    margin:0;
                text-align: left;
                visibility: visible;
                position: inherit;
                font-size: 1.5rem;
                line-height: 2rem
            
                }

main.principal input{height:2.5rem;
                    margin:0.5rem 0 0 0;
                    border-radius: 0.7rem;
                    padding:0 0 0 1rem;
                    width:90%; 
                    
                    border-style: none;
                    color:white;
        background: #8074b5 url(../Pantallainicio/img/lupa.svg) no-repeat left .5rem top .5rem;
        background-size: 1.5rem}

main.principal input:focus { background:#b9b1dd;
        transition:all .2s ease}

.propone {  }

.propone a {display:flex;
    background-color:#e03b55;
    width:8rem;
    height:8rem;
    border-radius: 90rem;
    text-align: center; align-items: center; justify-content: center; margin: auto
    }
.propone a h2 {font-size: 1rem;
                width:6rem;
                line-height:1.3rem;
                             
}




.principal figcaption{ position: absolute;
                        visibility: collapse;}


@media (min-width: 30em) {  
   main.principal .iconos li {width: 10rem; height: 10rem}
     main.principal  li {width: 10rem; height: auto}
    
    
    .propone a:hover {background-color: rgb(167, 29, 52);  
            transition: all .2s ease;
               }
    
}


@media (min-width: 50rem) {
    main.principal .iconos li {width: 12rem; height: 12rem;
                    font-size: 1.4rem; overflow: hidden; }

    .principal h1 {visibility: visible;
                    position: relative;
                margin: 0 0 1rem 0}
    
    main.principal ul {justify-content:  }

    
    .principal figcaption{ position: absolute;
                        visibility: visible;
                width: 100%;
            display:flex; flex-direction: column; align-items: center; 
            ; transition: all .3s ease; height: 100%; background-color: rgba(0, 0, 0, 0.46);
            bottom:-100%
        }
    
    .iconos li:hover  figcaption {bottom:0;
                            transition: all .3s ease;}

.principal .iconos figcaption ul {display:flex; flex-direction: row; margin:4rem 0 0 0}
    
.principal .iconos figcaption ul li {height: 1.5rem; width: 1.5rem; margin:.1rem; font-size: 1rem}
    
    .principal .iconos p {font-size: 1rem;
                        font-weight: 800;
                        text-align: center;
                    line-height: 1.5rem}



}
/* VOTACIÓN */


main.votacion {background: url(../img/fondo1rosa.svg) no-repeat right 1rem top 4rem, url(../img/fondo2rosa.svg) no-repeat bottom left; 

background-size: 6rem, 6rem;
}


main.votacion section.vota ul{display: flex;
                    ;
                    margin: 0 0 1.5rem 0;
                    
                    
                            }

main.votacion div.agregar {
        

}
.titulovota {display: flex}

.agregar2 {background-color: #50BED3;
            height: 8rem;
        width: 8rem;
        border-radius: 90rem;
        display: block;
        position:absolute;
        overflow:hidden;
        visibility: collapse;margin:0 auto
            
        
}

.agregar2 a {position:absolute;
           text-align: center;
       height: 5rem;
        width: 8rem;
            padding-top:3rem;
            font-weight: 900;
            line-height: 1.2rem;
            font-size: 1.2rem;
            border-radius: 90rem;
            }


div.agregar a {background-color: #50bed3; 
        height: 4rem;
        width: 4rem;
        border-radius: 90rem;
        
        margin:0;
       position:fixed;
        bottom:2rem;
        right: 15%;
    box-shadow: .2rem .2rem 1rem rgba(0, 0, 0, 0.36);
                
        
}

div.agregar a img {height: 1.6rem;
                   position: absolute;
   top: 50%;
   left: 50%;
    
    margin-top: -0.8rem;
    margin-left: -0.8rem
     
}

main.votacion{display: flex;
                flex-direction: column;
            align-content: flex-start
}

.titulovota h1{width:15rem; 
                  
                font-weight: 100;
                    padding:0 %;
                font-size: 1.6rem
                
    }


main.votacion ul {padding:0 6%; margin:0rem;
    }


main.votacion ul.lista a{color:white; 
                background-color:rgba(51, 0, 51, 0.27) ;
                        margin: 0.3rem 0;;
                            padding:0;
                        border-radius: 1rem;
                display: flex;
                flex-wrap: nowrap;
                justify-content:space-between;
                align-items: center;
                min-width: 15rem
                 }

main.votacion ul.lista h4 {margin:0;
                            float:left;
                            font-size:1rem;
                            font-weight: 990;
                            padding:0 0 0 1.5rem;}

main.votacion ul.lista  div {   margin: 0                             text-align: center;
                            padding:0.6rem }
main.votacion ul.lista  div h3 {margin:0;
                                    font-size: 2rem }
main.votacion ul.lista  div h6 {margin:0;
                                font-weight: 100}



main.votacion ul.lista{display: flex;
                flex-direction: column;
                flex-wrap: nowrap;
                    justify-content:center;
                
            
                ;}

main.votacion ul.lista li{
    background-color:rgba(51, 0, 51, 0.27) ;
                        margin: 0.3rem 0;
                        padding: 0;
                        border-radius: 1rem;
                display: flex;
                flex-wrap: nowrap;
                justify-content: space-between;
                    align-items: center;
                min-width: 15rem}

.nuevocurso {visibility: collapse; position:absolute ;
   padding:0; margin:auto;
        width: 20rem;text-align: left
        
    } 

.nuevocurso input {margin: .5rem 0 1rem 0;
       border:0;
                outline:none}



@media (min-width:30rem) {
    
    .agregar2{visibility: visible; position: relative;
        margin: 0 0 1rem 0 }
    
    
    .agregar2:hover {background-color: #128fa7;
                    transition:all .2s ease}
    
  main.votacion ul.lista{display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                    justify-content:center;
                padding: 0
            
                ;}
     main.votacion ul.lista a {width: 45%;;
                margin:.5rem}
 
    
    
    
      main.votacion ul.lista a:hover { background-color:rgba(51, 0, 51, 0.63); transition:all .2s ease }
    
    
    main.votacion ul.lista li {
        min-width: none;
        width: 45%; margin:.5rem}
    
    main.votacion ul.lista li:hover { background-color:rgba(51, 0, 51, 0.63); transition:all .2s ease }
    
    div.agregar a {visibility: collapse
          
    }
    
    .titulovota {display: flex; justify-content: center; 
        align-items: flex-end;   }
    
    .titulovota h1 {width: 13rem; padding-right: 1rem }
    
      }


    
    @media (min-width:50rem) {
        
        .agregar2 {position:absolute; visibility: collapse}
        
        main.votacion h1{width:100%; 
                  
                font-weight: 900;
                    padding:0;
                font-size: 1.3rem;
                text-align: center}
        
           main.votacion ul.lista a {width: 20rem;
                margin:.5rem}
 
    main.votacion ul.lista li {
        min-width: none;
        width: 20rem; margin:.5rem}
        
        div.agregar a {visibility: collapse}
        
        .nuevocurso {visibility: visible; 
                    position: relative}
    }

        
    


              
    



                /*PERFIL*/

.perfil {background: url(../img/fondo3.svg) no-repeat bottom .2rem left .5rem;
    background-size: 25rem 25rem;
 }

.perfil a {margin:.5rem 1rem 0 0}

.perfil  a.amarillo{ background-color: #F7931E;
    height: 9rem;
    width: 9rem;
    border-radius: 1rem;
    
    display:block;
    text-align: center;
    position:relative;
    overflow: hidden
    
    }

.perfil  a.amarillo h3{text-align: center;
            padding:.4rem 0 0 0;}

.perfil  a.amarillo P {font-size: .7rem; width: 9rem; margin:0; padding: 0;height: auto;
        bottom:0;
    position:absolute; bottom:;
    background-color: rgba(150, 87, 13, 0.61);
    font-weight: 100;
      ;
}

.perfil  a.amarillo img {height: 5rem;
            margin:0; padding: 0}


.perfil  a.celeste{ background-color: #50BED3;
    height: 9rem;
    width: 9rem;
    border-radius: 1rem;
    
    display:block;
    text-align: center;
    position:relative;
    overflow: hidden;
    
    }

.perfil  a.celeste h3{text-align: center;
            padding:.4rem 0 0 0;
            margin: .4rem 0 0 0}

.perfil  a.celeste P {font-size: .7rem; width: 9rem; margin:0; padding: 0;height: auto;
        bottom:0;
    position:absolute; bottom:;
    background-color: rgba(20, 11, 60, 0.47);
    font-weight: 100;
        border-bottom-left-radius:1rem   ;
border-bottom-right-radius:1rem}

.perfil  a.celeste img {height: 5.5rem;
            margin:0; padding: 0}



.perfil img{margin: 0 ;
            height: 10rem
        }

.perfil .usuario img {width: 40}

.agenda {display: flex; flex-direction: row
                ;
    
        flex-wrap: wrap;
            align-items:flex-start;
    width:100%;   
        margin:0;
    align-content: flex-start
            }

.agenda li{display: flex; align-items: center}


.usuario{display: flex;
               flex-direction: row ;
            ;
    justify-content:flex-start
    ;
   margin-left: 2rem;
        margin-bottom: .5rem;
           position:relative;
    }

 .perfil .masdatos { display:flex;
            flex-wrap: wrap; visibility: collapse; position: absolute; padding: 0; margin: 0; 
            }
    
 .perfil .masdatos ul{display:flex;
                    width: 100%;
    flex-wrap: wrap;
    
        justify-content: flex-start;
        align-items:baseline;
        padding: 0; margin: 0}

.perfil .masdatos li {display: block; margin: .2rem; width: 12rem; padding: 0;}

.perfil .masdatos h3 {font-size: 1rem; margin: 0}
.perfil .masdatos p {font-size: .7rem;
        margin: 0; display: block; line-height: 1rem}


 .perfil .masdatos ul a {padding: 0; margin: 0;}

.usuario div {display: block; margin:0; padding: 0;} 



    div.editar a {background-color: #50bed3; 
        height: 3rem;
        width: 3rem;
        border-radius: 90rem;
        
        margin:0;
            
    box-shadow: .2rem .2rem 1rem rgba(0, 0, 0, 0.36);
        display: flex;
            justify-content: center;
            align-items: center;
            position:absolute;
            bottom:-1rem; 
            left:17rem;
       
                
        
}

div.editar a img {height: 2.3rem;  margin:auto;
            padding:.5rem 0 0 0}
                   



.perfil h3 {margin:0.4rem 0 .2rem 0;
            font-size: }

.perfil p {margin:0;
            font-weight: 100;}

.perfil h4{ text-align: left;
            font-weight: 100;
            border-top-style: solid;
       border-top-width: 0.05rem;
        padding:0.5rem 0 0 0;
width: 20rem;
margin-bottom: 0;}

sup {font-size:.6rem}

    

.perfil .dias {display: flex;
        justify-content: flex-start;
    ;
        padding: 0 ;
    margin:0 0 .5rem 0;
        align-items: center;
       ;
    }

.agenda div {display: block}

.perfil h5{margin:1rem 0 0 0; padding:0 1rem 0 0; font-weight: 200;
width: 9rem}




.dias li { font-size: .8rem;
    padding: 0rem;
    margin: 0.1rem 0.1rem;
         height: 1.2rem;
            width: 1.2rem;
            border-style: solid;
            border-width: 0.01rem;
            border-radius: .5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 900}



.dia {color:#49398C;
        background-color: white;
        border-color:white;
        font-weight:bolder;
    
        
        }

.perfil p {font-size: 1rem;
            font-weight: 100;
    width: 10rem;
        line-height: 1.4rem
    }




.perfil {left:-150%; width:100%; position: fixed; top:0; transition: all .3s ease;
    padding:5rem 0 7rem 0}



 #perfil:target {left:0; position:absolute;top:0;
            transition: all .3s ease;}

 

            /* MIS DATOS */ 

.misdatos {position:fixed;
            width: 100%;
        right:-100%;
        top:5rem;
        padding:0 0 100% 0        ;
    transition: all .3s ease;
    background: url(../img/fondo3.svg) no-repeat top 8rem left .5rem;
    background-size: 25rem 25rem;
    
        }



#misdatos:target { right:0; 
                transition: all .3s ease;}



.misdatos h1{ margin:0 0 0 2rem ;
                font-size: 1.6rem  ;text-align: left;
    }

.misdatos ul {padding:0; margin:1rem 0 0 2rem;}

.misdatos li{ margin-bottom: 1rem}

.misdatos ul h3 {margin: 0; font-size: 1rem; }

.misdatos ul p {margin: 0; font-weight: 9;
                margin-top: .2rem
}

.perfil h1{margin: 0 auto 2rem; text-align: center; font-weight: 100;  visibility:collapse; position: absolute}


@media (min-width:30rem) { .perfil {background:none
 }
    
  
    
    .perfil .agenda {justify-content: center;
        padding: 0
       
                }
    
    .perfil .agenda h4{ width: 100%;
        margin:1rem 1rem; 
        padding: 1rem 0 0 0;
        text-align: left}
    
    .perfil {background: url(../img/fondo3.svg) no-repeat bottom .2rem left .5rem;
    background-size: 25rem 25rem;
 }
    
 
div.editar a {visibility: collapse }



.pag{ visibility: collapse}


    
    .usuario {justify-content: center;
                margin:auto}

.perfil .masdatos {visibility: visible;
                    position: relative;
                
            margin: auto; justify-content: center;
    
    align-content: center; align-items: center;
    margin: 0 5%}
   
    .perfil .masdatos ul {}


   

}


@media (min-width:50rem) {  
    
    .perfil h1{position: relative; visibility: visible  }
    
   .usuario {justify-content:flex-start;
                margin-left: 3rem;
        float: left; padding: 0;}

  .perfil  .masdatos  {padding:1rem 0 0 0; margin: 0; height:9rem; justify-content: flex-end;
        border-top-style: solid; border-width: .01rem; margin:0 1rem 0 0}

    .perfil  .masdatos li {margin:.2rem }
    
}



                 /* PERFIL - MISDATOS */ 











                    /* PERFIL - CLASE   */ 




.amarillo .perfilcurso {   ;

background: url(../img/fondo1amar.svg) no-repeat right 1rem top 4rem ; 

background-size: 6rem  }



.celeste .perfilcurso {   ;

background: url(../img/fondo1celes.svg) no-repeat right 1rem top 4rem ; 

background-size: 6rem  }


.amarillo .foro {background: url(../img/fondo2amar.svg) no-repeat bottom left; background-size: 6rem}

.amarillo .aulavirtual {background: url(../img/fondo2amar.svg) no-repeat bottom left; background-size: 6rem} 
.amarillo .companeros {background: url(../img/fondo2amar.svg) no-repeat bottom left; background-size: 6rem} 


.celeste .foro {background: url(../img/fondo2celes.svg) no-repeat bottom left; background-size: 6rem}

.celeste .aulavirtual {background: url(../img/fondo2celes.svg) no-repeat bottom left; background-size: 6rem} 
.celeste .companeros {background: url(../img/fondo2celes.svg) no-repeat bottom left; background-size: 6rem} 


.perfilcurso img {height: 3rem;
           ; margin: 0}

.perfilcurso h1 {margin:0 0 0 .5rem
                ;text-align: center}

.perfiltitulo {display: flex;
                    flex-direction: row-reverse;
                justify-content: center;
                margin: 0;padding: 0;
               align-items: center
                
}


                /* PERFIL - foro   */


.perfilcurso h2{ text-align: left; margin: auto;
            width: 80%;
            padding: 0 }


.foro {margin-bottom: 4rem}

.foro input {height:2.5rem;
                    margin:.5rem 0 0 0;
                    border-radius: 0.7rem;
                    border:none;
                background-color: rgba(255, 255, 255, 0.79);
               font-family:'Comfortaa';
            font-size: .7rem; padding: 0 0 0 .7rem;
                font-weight: 800;
            
                }

.foro div {display: flex;
            flex-direction: column;
            align-items: flex-end;
margin:0 2rem 0 2rem;
padding: 0;}

.foro .consulta{background-color: #49398C;
            ;
            padding: 1rem 1rem 1.4rem 1rem;
                 ;
            border-radius: .5rem;
            border-bottom-right-radius: 0        ;
    margin:1rem 0 0 0;
     width: 90%;
        box-shadow: .4rem .4rem .4rem rgba(0, 0, 0, 0.21); 
            position: relative
            }

 .consulta img{ float:left;
                 height: 3rem;
                width: auto;
    margin: 0  0  ;  border-radius: .3rem}

 .consulta h5 {margin:0; padding:0 0 0 4.5rem; }

 .consulta h6 {margin:.2rem 0;padding: 0 0 0 4.5rem; font-weight: 100;}

.foro .consulta a {font-size: .6rem; display: inline-block; text-align: right; position: absolute; right:1rem; padding:.5rem}

 .foro .consulta p {text-align: left;
     
                margin:0;
                padding: 0 0 0 4.5rem;
                
                font-size: 0.9rem;
               width: auto; }


.consulta a {font-size: .7rem;
                    display:block;
                   text-align: right ;}



.foro .respuesta{background-color: rgb(224, 59, 85);
            ;
            padding: 1rem;
                 ;
           
       margin:0;
        width: 70%;
            border-bottom-style: solid;
            border-color: rgba(255, 230, 234, 0.38);
            border-width: .05rem;
            box-shadow: .4rem .4rem .4rem rgba(0, 0, 0, 0.21)
          
            }


.foro .ultimaresp {background-color: rgb(224, 59, 85);
            ;
            padding: 1rem;
                 ;
   
            border-bottom-right-radius: 1rem;
            border-bottom-left-radius: 1rem    ;
       margin:0;
        width: 70%;
        box-shadow: .4rem .4rem .4rem rgba(0, 0, 0, 0.21);}

.respuesta img{ float:left;
                 height: 2rem;
                width: auto;
    margin: 0   }

.ultimaresp img{ float:left;
                 height: 2rem;
                width: auto;
    margin: 0   }

 .respuesta h5 {margin:0; padding: 0 0 0 3.2rem; }

 .ultimaresp h5 {margin:0; padding: 0 0 0 3.2rem; }

.respuesta h6 {margin:.2rem 0;padding: 0 0 0 3.2rem; font-weight: 100;}

 .ultimaresp h6 {margin:.2rem 0;padding: 0 0 0 3.2rem; font-weight: 100;}


 .respuesta p {text-align: left;

                margin:0;
                padding: 0 0 0 3.2rem;
                
                font-size: 0.7rem;
               width: auto; }

.ultimaresp p {text-align: left;
     
                margin:0;
                padding: 0 0 0 3.2rem;
                
                font-size: 0.7rem;
               width: auto; }


.foro {position:fixed; top:0rem;
         padding:9rem 0 0 0        ;
            width:100%;
            visibility: collapse;
        left: 0; 
    


                 }

.companeros { position:fixed; top:0rem;
         padding:9rem 0 4rem 0  ;
            width:100%;
            visibility: collapse;
        left: 0;transition: all;
}


.aulavirtual { position:fixed; top:0rem;
         padding:9rem 0 5rem 0; 
            width:100%;
           visibility: collapse ;
   ;left:0;
          }



#aulavirtual:target {visibility:visible;
           position:absolute}
 

#companeros:target {visibility:visible  ;position:absolute;
          transition: all; }

#foro:target { visibility:visible  ;position:absolute ;
           }
    
    
}

  



.perfilcurso h2 {margin: auto ;text-align: center; padding: 0;}


            /*        AULAVIRTUAL      */



.aulavirtual img{height: 4rem;}

.titulovirtual h2 {width: auto}
.titulovirtual {display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: flex-end;
                margin: auto;
            width: 80%;
            padding: 0}

.titulovirtual h2 {margin: 0;   }
.titulovirtual h4 {margin: 0; font-weight: 100  }

.aulavirtual .lampara { float:left;
                        height: 5rem;
                        width:auto;
                        margin: 0;
                    padding:0;
                    
                    
}

.aulavirtual figure p {font-size: 1rem;
                    text-align: left}


.aulavirtual p {text-align: center; margin:auto;
              padding:0  }


.aulavirtual video {margin: auto; height: auto; width: 80%; 
            display: block;
        }




            /*     compañeros     */

.companeros img{height: 5rem; display: block; margin: .5rem; padding:0; border-radius: .5rem;
                }

.companeros h3{margin:auto; padding:0; margin-top: 1rem; text-align: center;
            font-size: .8rem}

.companeros ul {margin:0; padding: 0 }

.companeros ul figure {margin:.2rem}

.companeros figure {position:relative;
            width: 7.2rem;
            height: 6.9rem;
            display: flex; justify-content: center;align-items: center;
            background-color: #49398C;
            border-radius: .6rem;
            margin: auto;


}
.companeros p {position: absolute; bottom:.15rem; left:0 ;
                width: 100%;
            text-align: center;
   
                margin: 0;
        font-weight: 600;
        font-size: .6rem}


 

.estudiantes {display:flex;
               flex-wrap: wrap; justify-content: center;
                padding: 0;}

.estudiantes img {}


       




                    /*INSCRIPCIÓN ILUSTRATOR*/ 


.rosa main.inscripcion{ background: url(../img/fondo1rosa.svg) no-repeat right 1rem top 4rem, url(../img/fondo2rosa.svg) no-repeat bottom left;

background-size: 6rem, 6rem;
}

.amarillo main.inscripcion{ background: url(../img/fondo1amar.svg) no-repeat right 1rem top 4rem, url(../img/fondo2amar.svg) no-repeat bottom left;  

background-size: 6rem, 6rem;}

.celeste main.inscripcion{ background: url(../img/fondo1celes.svg) no-repeat right 1rem top 4rem, url(../img/fondo2celes.svg) no-repeat bottom left;  

background-size: 6rem, 6rem;}

.verde main.inscripcion{ background: url(../img/fondo1verde.svg) no-repeat right 1rem top 4rem, url(../img/fondo2verde.svg) no-repeat bottom left;  

background-size: 6rem, 6rem;}

.compartir {display: flex; 
    background-color: #14806A ;
            border-radius: 44rem;
            height: 3.5rem;
            width: 3.5rem; 
padding: 0; margin: 0;
        position:absolute;
        justify-content: center;
        align-items: center;
        left: 13%;
        top:12rem
        }


.profesor {margin:1rem; font-weight: bold}

.inscripcion .compartir img{height: 2.3rem;
                width:auto;
                display: block;
            padding: 0; margin: 0;}

.inscripcion h1 { margin: 0; 
                            text-align: center}


.inscripcion h3 {margin: auto; text-align: center; font-weight: 100}
.inscripcion section {display: block}
.inscripcion img {width: 9rem;

                    margin:auto;
    display:block;
            }


.inscripcion .dias {display: flex;
        justify-content: center;
            padding: 0 ;
    margin:rem 0;
        align-items: center;
        }

.inscripcion .dias li { font-size: .8rem;
    padding: 0rem;
    margin: 0.1rem 0.1rem;
         height: 1.5rem;
            width: 1.5rem;
            border-style: solid;
            border-width: 0.1rem;
            border-radius: .5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 900}



.inscripcion .dia {color:#49398C;
        background-color: white;
        border-color:white;
        font-weight:bolder;
    
        
        }


.inscripcion p{margin: auto;
                width: 80%;
            text-align: left;
                font-size: 1rem;
                line-height: 1.4rem;}

.inscripcion div p {text-align: center}

.inscripcion h2 {margin:.5rem auto;
                            text-align: center;

    color:#49398C;  }

.inscripcion .materiales {display: flex;
                            justify-content:center;
                            width: 100%;}

.inscripcion .materiales img{width: auto;
                                    height: 3rem;
                                    margin:0;
                        

}

.inscripcion .materiales figure{margin:1rem}

.inscribe a{ background-color:#49398C;
            display: flex;
            width:80% ;
            max-width: 20rem;
            height:3rem;
            border-radius: 1rem;
            justify-content: center;
                margin:1rem auto;
            align-items: center;
   
           
            
            }

.inscribe a:active {background-color: rgba(39, 28, 87, 0.86)}

.inscribe div {width: 8rem;
            height:8rem;
            ;
                position:relative}

.inscribe p {padding:rem 0 0 0;
            margin: 0 ; 
                    font-size: 1.2rem;
            text-align: center
            
            
            
            
            }

                /*  EXITO - FRACASO*/

.exitosa { background: url(../img/fondo1verde.svg) no-repeat right 1rem top 4rem, url(../img/fondo2verde.svg) no-repeat bottom left;  

background-size: 6rem, 6rem;}

.exitosa {text-align: center;
        margin: 0;
;  height: 100%; 
        
}
.exitosa h1 {}
.aceptado {width: 8rem; border-style: solid;
                border-color: #02402D;
                border-radius: 90rem;
    border-width:.47rem;    }


.fallida {width: 8rem; border-style: solid;
                border-color: #942C4A;
                border-radius: 90rem;
    border-width:.47rem;}


.exito h1 { margin: auto; font-size: 1rem}
.exitosa p {font-size: 1.4rem;
            width: 15rem;
            margin: 3rem auto 1rem;
            line-height: 1.8rem
                ;font-weight: 100
    }   
header h2 { margin: auto;}


.exitosa a { display: inline-block; margin: 4rem auto 0 ; padding: 1rem;
            

} 

                /* VOTARCURSO */
.votarcurso {background: url(../img/fondo1verde.svg) no-repeat right 1rem top 4rem, url(../img/fondo2verde.svg) no-repeat bottom left; 

    
    
background-size: 6rem, 6rem; }

.votarcurso {padding-bottom: 3rem}

.debate  {padding-bottom: 3rem}




.votarcurso h1{margin:0; text-align: center}

.votarcurso div figure {margin:0; padding: 0;
                        


}

.votarcurso div  p {padding:2rem 0 2rem 0;
                    font-size: 1rem;
                    line-height: 1.3rem;
                border-bottom-style: solid;
                    margin: 2rem;
                border-color: #06402e;
                    border-width: .25rem
}

.lampara { float:left;
                        height: 5rem;
                        width:auto;
                        margin: 0;
                    padding:0;
                    
                    
}

.grafico {margin:auto;}

.grafico img {width: 18rem;
        
    display: block;
            margin:auto;
        padding: 0;}




ul.votar {display:flex;
            justify-content: space-between;
        padding:0 ;
    width: 70%;
margin:2rem auto 0rem auto}
    
ul.votar img {;
                height: 3.5rem;
                padding: 0;
                margin:0;}

ul.votar figure {margin: 0}


.no , .meh , .si{background-color:#E7485F;
    display: flex;
    border-style: none;
            border-radius: .8rem;
           width: 3.5rem;
            height: 3.5rem;
    justify-content: center

}

.no {background-color:#E7485F; }
.meh {background-color:#F7931E; }

.meh { 
background-color:#F7931E

}
.si{

background-color:#50BED3}

.si:target {background-color: black}

.no:active {background-color: #aa2c40;
                border-radius: .8rem;
               }


.no:focus {background-color: #e03b55;
               width: 70%;
        position:absolute;
        transition: all .3s ease
               }

.meh:focus {background-color: #F7931E;
               width: 70%;
        position:absolute;
        transition: all .3s ease;
             left:15%}


.si:focus {background-color: #50BED3;
               width: 70%;
        position:absolute;
        transition: all .2s ease;
        ;
    
        right:15%
               }

.meh :active {background-color: #96570d;
            border-radius: .8rem; }

.si :active {background-color: #00507b;
                border-radius: .8rem}


.votarcurso section div {display: flex;
            flex-direction: column;
        align-items: center}

.votarcurso section div figure{display: flex;
            justify-content: center;
    align-items: center;
            font-weight: bold;
    border-radius: .8rem;
                       height: 3.5rem;
        width: 70%;
margin:2rem auto 5rem auto; 
    
    position:absolute;
    bottom:5rem;
        visibility: hidden}

section div figure img {
                height: 3.5rem;
                padding: 0;
                margin:0;
            }

.gracias1 {background-color: #e03b55
        }

.gracias2 {background-color: #FF9933}

.gracias3 {background-color: #50BED3}


    
            /* DEBATEVOTACION  */


.debate div {display: flex;
            flex-direction: column;
            align-items: flex-end;
margin:3rem 3rem 0 3rem;
padding: 0;}

.debate .consulta{background-color: #124339;
            ;
            padding: 1rem 1rem 1.4rem 1rem;
                 ;
            border-radius: .5rem;
            border-bottom-right-radius: 0        ;
    margin:1rem 0 0 0;
     width: 90%;
        ; 
            position: relative
            }

 .debate img{ float:left;
                 height: 3rem;
                width: auto;
    margin: 0  0  ;  border-radius: .3rem}

 .debate .consulta h5 {margin:0; padding:0 0 0 4.5rem; }

 .debate .consulta h6 {margin:.2rem 0;padding: 0 0 0 4.5rem; font-weight: 100;}

.debate .foro .consulta a {font-size: .6rem; display: inline-block; text-align: right; position: absolute; right:1rem; padding:.5rem}

 .debate .foro .consulta p {text-align: left;
     
                margin:0;
                padding: 0 0 0 4.5rem;
                
                font-size: 0.9rem;
               width: auto; }


.debate .consulta a {font-size: .7rem;
                    display:block;
                   text-align: right ;}



.debate .respuesta{
            padding: 1rem;
            background-color: rgba(11, 87, 71, 0.6);
       margin:0;
        width: 70%;
            border-bottom-style: solid;
            border-color: #14806A;
            border-width: .15rem;
            )
          
            }


.debate .ultimaresp {background-color: rgba(11, 87, 71, 0.6);
            padding: 1rem;
                 ;
   
            border-bottom-right-radius: 1rem;
            border-bottom-left-radius: 1rem    ;
       margin:0;
        width: 70%;
       ;}

.debate .respuesta img{ float:left;
                 height: 2rem;
                width: auto;
    margin: 0   }

.debate .ultimaresp img{ float:left;
                 height: 2rem;
                width: auto;
    margin: 0   }

 .debate .respuesta h5 {margin:0; padding: 0 0 0 3.2rem; }

 .debate .ultimaresp h5 {margin:0; padding: 0 0 0 3.2rem; }

.debate .respuesta h6 {margin:.2rem 0;padding: 0 0 0 3.2rem; font-weight: 100;}

.debate .ultimaresp h6 {margin:.2rem 0;padding: 0 0 0 3.2rem; font-weight: 100;}


.debate .respuesta p {text-align: left;
     
                margin:0;
                padding: 0 0 0 3.2rem;
                
                font-size: 0.7rem;
               width: auto; }

.debate .ultimaresp p {text-align: left;
     
                margin:0;
                padding: 0 0 0 3.2rem;
                
                font-size: 0.7rem;
               width: auto; }




.debate {background: url(../img/fondo1verde.svg) no-repeat right 1rem top 4rem, url(../img/fondo2verde.svg) no-repeat bottom left; 
    
background-size: 6rem, 6rem; }

.votarcurso {left:-120%; width:100%; position: fixed; top:0; transition: all .3s ease; }

.debate {position:fixed;
            width: 100%;
        right:-100%;
        top:0;
    transition: all .3s ease;
        }

#debate:target { right:0; 
                position:absolute;
    
                transition: all .3s ease;}

#votacion:target {left:0; position:absolute;top:0;
            transition: all .3s ease;}
    




@media (min-width:30rem) { 
    
    #debate:target { right:0; 
                position:relative;
    
                transition: none}

#votacion:target {left:0; position:absolute;top:0;
            transition: none}

    .cursovot {position: relative; 
                padding: 0}
    
    .votarcurso{}
    
    #votacion.votarcurso {position:relative;
                left:0; top:5rem; margin:auto;width: 100%;
        
        padding: 0; margin: 0; z-index:444
    }
    
    .debate {position:relative;
            right:0;
        top:auto;
        padding:7rem 0 0 0;
    }

    .debate h2 { margin: auto;text-align: center}
    
  
    
    
    
    .votarcurso {background: none; 
 }
    .debate {background: none; 
 }
    
    .cursovot {background: url(../img/fondo1verde.svg) no-repeat right 1rem top 4rem, url(../img/fondo2verde.svg) no-repeat bottom left; 
    
background-size: 6rem, 6rem; }
    
      ul.votar {display:flex;
            justify-content: center;
        padding:0 ;
    width: 14.5rem;
margin:2rem auto 0rem auto;
        position:relative}
    
    ul.votar button{ margin:0 1rem 0 1rem}
    
   
    
    .no:focus {background-color: #e03b55;
               width: 100%;
        position:absolute;
        transition: all .3s ease
              ; margin:auto; padding:0;
; left:0 }

.meh:focus {background-color: #F7931E;
               width: 100%;
        position:absolute;
        transition: all .3s ease;
             left:0; margin: 0}


.si:focus {background-color: #50BED3;
             width: 100%;
        position:absolute;
        transition: all .3s ease;
             right:0; margin: 0
               }

    
    
}



@media (min-width:50rem) {  
    
    
    
    
    
    .votarcurso div {width:51%;
            float:left;
            margin: 0 0 0 4rem; padding: 0
    
    }  
    
    .votarcurso div p {padding:1rem 0 1rem 0}

    .votarcurso section {display: inline-block; 
            padding: 0; margin: 3rem 0 0 0;
            width: 20rem}
    
    .votarcurso section img {}

 ul.votar {display:flex;
            justify-content: center;
        padding:0 ;
    width: 15rem;
margin:2rem auto 0rem auto}
    


    

 .debate { width:51%;; top:-8rem
            ;padding: 0 0 0 4rem;
            left:0;
            transition: none;
            position:relative;}
 
    
    .debate {}
    
}






                /*  CREAR CURSO*/


.crearcurso {margin:1rem; margin:a }

.crearcurso input{margin:.2rem 0 1rem 0; border:none ; outline: none;
            resize: none;
            }

.descripcion {height: 6rem;
                width: 100%;
               border-radius: .8rem;
                box-sizing: border-box;
    padding: 0 0 3rem 1rem;
        background-color: rgba(255, 255, 255, 0.83)
 }


.nombre {height: 2rem;
                width: 100%;
               border-radius: .6rem;
                box-sizing: border-box;
    padding: 0 0 0 1rem;
        background-color: rgba(255, 255, 255, 0.83)
        }



.votacion .submit ,  .crearcurso .submit{ padding: 1rem;
                font-family:'Comfortaa';
            background-color: #50BED3;
            color:white;
            font-weight: 900;
            border-radius: .8rem;
            box-shadow: .1rem .1rem .5rem rgba(0, 0, 0, 0.36);
            border: none; 
           width: 100% }

.submit:active {background-color: rgba(80, 190, 211, 0.8); 
    box-shadow: none}



             







 {} 

                    
                   /* NOTICIAS  */ 
        
.noticias {background: url(../img/fondo1celes.svg) no-repeat right 1rem top 4rem, url(../img/fondo2celes.svg) no-repeat bottom left; 

background-size: 6rem, 6rem; }

.noticias section {margin:0 5%  }

.noticias input {height:2.5rem;
                    margin:0.5rem 0 1rem 0;
                    border-radius: 0.7rem;
                    padding:0 0 0 1rem;
                    width:12rem; 
                    background-color: rgba(255, 255, 255, 0.56);
                    border-style: none;
                    color:white;
            }


.noticias div { 
        margin:.5rem 0;
    padding: 1rem;
        width: auto;
        border-radius: 0.8rem}

.noticias .rosa{background-color: #e03b55; }
.noticias .violeta{background-color: #49398C; }
.noticias .amarillo {background-color:#F7931E; }
.noticias .verde {background-color:#14806A; }
.noticias .celeste {background-color:#50BED3}

.noticias h2 {margin:0 0 .5rem 0; 
                padding: 0 0 0.2rem 0
            ;font-size: .7rem;
                border-bottom-style:solid;
            border-bottom-width: .03rem;
            display: inline-block;
width: 100%;
    text-align:r}

.noticias h6 {margin:0 ; 
                
            ;
               display: inline-block;
           
            text-align: right;
            width: 100%;
            font-weight: }



.noticias p {margin:0; padding: 0;
                line-height: 1.2rem}






                /* GALERIA  */


 

.galeria     {    
    padding: 4rem 0 0 0}

.galeria figure{ width: 30vw;
            height: 30vw;
            position: relative;
            overflow: hidden;
            margin:.5vw;
            box-shadow: .2rem .2rem .4rem rgba(6, 3, 18, 0.51);
            border-radius: .3rem;
    }


.galeria figcaption {position: absolute;
                    bottom:-100%;
                    width: 100%;
                    padding:50% 0;
                    display: block;
                    text-align: center;
                    font-size: .8rem}


.galeria figure:hover figcaption {
    background-color: rgba(20, 11, 60, 0.63);
    top: 0;
    transition: all .3s ease;
    
}

.galeria figure img{  display: block;
            position:absolute;
            height: 100%  ; right:-25% }

.galeria section {display: flex;
            flex-wrap: wrap;
            justify-content: center;
            padding: 0; margin: 0;
            }

.galeria h1 {visibility: collapse; margin: auto; text-align: center; position: absolute}

@media (min-width:30rem) {  
    .galeria section{
    align-items: stretch; margin:0 1rem}
    .galeria figure {width: 40vw;
                    height: 40vw;
                margin:.5rem;
               border-radius: 0rem}
    
    .galeria figcaption {font-size: 1.2rem}
    

}

@media (min-width:60rem) {  
    
    .galeria h1 {visibility: visible; position: relative; margin:2rem}
    
     .galeria section{ justify-content:center;
    align-items: stretch; margin:0 1rem}
    
    .galeria figure {width: 30rem;
                    height: 20rem;
                    ;
                 display: flex;
            }
    
    
    
    .galeria figure img {left: 0; width: 100%; height: auto}

}


            /*  acerca */

.acerca {background: url(../img/fondo3.svg) no-repeat top 5rem left .5rem;
    background-size: 25rem;
    padding:0 0 100%;
    margin: 0
 }
.acerca section {margin:6rem 0 0 0}
.acerca p {margin:1rem 2rem 1rem; 
    padding: 0;
    text-indent: 2rem;
        line-height: 1.1rem;
    font-size: 1rem;
}








                /* FOOTER */

.footer { position:absolute; visibility: collapse; left: -100%; width: 100%}

@media (min-width: 30rem) {.footer { visibility: visible; position: relative;
            left:0;
            font-family: 'Comfortaa', cursive;
            color:rgba(255, 255, 255, 0.85);
            width: 90%; 
    margin:.5rem auto;
    padding: 0; 
    border-top-style: solid;
    border-color: rgba(255, 255, 255, 0.76);
    border-width: .1rem;
    ;
    } 



}