/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}













/* diseños glovales  */
body {margin: 0;}
.fin:hover{
    color: rgb(173, 21, 21);
    border-bottom: 3px solid rgb(173, 21, 21);
}
 li a:hover{
    color: #fa6406;
  
}
.fin a:hover{
    color: rgb(173, 21, 21); 
}
li:hover{
    
    border-bottom: 3px solid #fa6406;
    
}
.icononav{width:50px;
    height:58px;
   }
nav{
    width:200px; 
    height:auto;
 background:linear-gradient(#24262c, #000000);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}


ul{
    height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
   padding-top: 30px;
    align-items: center;
    position: fixed;
}
li a{
    font-size: 10x;
    font-family:'Rubik', sans-serif;
    font-style: normal;
    color:white;
    font-weight: 600;
    align-items: center;
    text-decoration: none;}
li{
    width:100%;
    padding-bottom:10px ;
    border-bottom: 3px solid #BFBFBF;
 
   }
   .fin{
       justify-content:flex-end;
   }

/* diseños index  */
.gloval{
    display: flex;
    
    height: 100%;
}

.negro{
    background-image: url("../media/img/fondoDeIndex.jpg");
    background-size: cover;
}
.uno {
   display: flex;
    text-align: center;
    align-items: center;
   
    flex-direction: column;
    height:auto;
    background:  rgba(0, 0, 0, 0.6);
    
   

    width: 50%;

}
#unicologo{
        width: 200px;
          height: 200px;
        display: flex;    
        border-radius: 10px;       
}
.fondonegro{
    background: rgba(0, 0, 0, 0.5);
    padding:5%;
    border-radius: 30px;
    margin:auto;
}

.informacion{
    width:60%;
    height: 300px;
    display: flex;
    flex-direction: column;
    background:  rgba(0, 0, 0, 0.6);
    padding: 20px;
    border-radius:32px;
    align-items: center;
    color: white;
  margin-bottom: 30px;
    box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.34);
    position: relative;
}
.informacion p{
    font-family: 'Montserrat', sans-serif;
    font-size: medium;
 font-size: 15px;
 text-align: left;
  margin-left: 30px; 
}
.redeslinqueados{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;
   
}
.whats{
    width: 200px;
    height: 50px;
    background: #00bb2d;
    display: flex;
   
    align-items: center;
    border-radius:15px;
}
.icono{
    width:30%;
border-right:  white solid 3px;
padding-right:15px;
}
.links{
    width:60%;
}
.redeslinqueados a{
    color: white;
    text-decoration: none;
    transition: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.redeslinqueados a:hover{
    transform: scaleX(0.9);
    color: white;
    text-decoration: none;
}
.face{
    width: 200px;
    height: 50px;
    background:#3b5998;
    display: flex;
    
    align-items: center;
    border-radius:15px;
}
.gmail{
    width: 200px;
    height: 50px;
    background:  #db4a39;
    display: flex;
   
    align-items: center;
    border-radius:15px; 
}
.dos{
      background:transparent;
    width: 50%;
    height:auto;
    display: flex;
    align-items: center;
    justify-content: center;
  

}
.formulario{
  display: flex;
    flex-direction: column;
    width: 413px;
    background:  rgba(0, 0, 0, 0.5);;
    align-items: center;
    height: 550px;
    border-radius: 32px;
    justify-content: space-around;
    box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.34);
}
.formulario h1{
  color :white;
    font-size: 40px;
    font-family: 'Montserrat', sans-serif;
    font-weight:600;

}
.form{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height:300px;
    align-items: left;
}
.form label{color: white;
    font-size:20px;}

.form input{
      background:rgba(255, 255, 255, 0.637);
    font-family: 'Rubik', sans-serif;
    font-weight: 300;
   border: none;
    color:black;
   border-radius: 10px;
    outline:none;
    padding:5%;
    font-size: 1.2em;
    width: 250px;
    margin:auto;
}

.input_form{
    background: rgba(255, 255, 255, 0.637);
    border-radius: 10px;
    display: flex;
    align-items: center;
}

.form select{
    background:rgba(255, 255, 255, 0.637);
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
 border: none;
  color:black;
 border-radius: 10px;
  outline:none;
  padding:5%;
  font-size: 1.2em;
  width: 250px;
  margin:auto;
}

.form button{ 
cursor: pointer;
width: 100px;
padding:2%;
border: none;
color: #24262c;
background:white;
border-radius: 5px;
font-family: 'Rubik', sans-serif;
font-weight: 500;
font-size: 15px;
margin:auto;
outline:none;}

.form button:hover{
    transform: scale(1.1);
}



#otross{
    display:none;
}




.icono{
    font-size: 24px;
}

.informacion2{
    display: none;
}

    @media screen and (max-width:1000px){
   .gloval{
       flex-direction: column;
       height:auto;
       
   }
   .informacion {
        display:none;
}

   .informacion2{
       display: flex;
    
       height:150px;
       border-radius: 25px;
     
       flex-direction: column;
       background:  rgba(0, 0, 0, 0.6);
       padding: 10px;
       border-radius:32px;
       align-items: center;
       color: white;
     margin-bottom: 30px;
     margin-top: 20px;
       box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.34);
       text-align: center;
       justify-content: center;
 

     
   }
   .form label{
    font-size:18px;}
 .fondonegro{
     display:none;
 }
   .uno ,.dos{
       width: 100%;
       flex-direction: column;
  }
    
.dos{
    margin-top: 0%;
    
}
#cui{
    position:absolute;

}


.uno #unicologo{
     display:none;
 
    
       
   }
   
   #otross{
             width: 80px;
       height: 80px;
  border-radius: 10px;
       display:flex;
        align-items: center;
   
   }

  
 
 
 
   .formulario{
       width:400px;
       height:500px;
      padding: 40px;
       margin-top: 80px;
       position: static;
    }
 
    .form input{
      
        outline:none;
        padding:8px 20px;
      font-size: 15px;
        width: 80%;
    }

       .formulario h1{
           font-size: 20px;
        
        
       }
       .form button{padding:1%; 
    margin-top:20px;}
  
    .redeslinqueados{
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        flex-wrap: wrap;
       
    }
    .whats{
        width: 150px;
        height: 30px;
        background: #00bb2d;
        display: flex;
        margin-right: 10px;
        align-items: center;
        border-radius:5px;
    }
   
    .icono{
      
    border-right:  white solid 2px;
  
    }
    .links{
        font-size: 12px;
    }
   
    .face{
        width: 150px;
        height: 30px;
       
        margin-right: 10px;
        border-radius:5px;
    }
    .gmail{
        width: 150px;
        height: 30px;
        margin-right: 10px;
        border-radius:5px; 
    }   
}
  
@media screen and (max-width:540px){
 
.icono{
    font-size: 15px;
}
    .links{
        font-size: 12px;
    }
    .form label{
        font-size:15px;}

   .dos h1{  font-size: 15px;
margin-top: 10px;}

  
   .form input{
       font-size: 10px;
      width:200px;
      padding:5px;
      border-radius:5px;
   }
   .formulario{
      flex-direction: column;
      width: auto;
      padding: 40px;
      height: 400px;}
      .informacion {
        display:none;
}

.informacion2{
    display: flex;
 margin-bottom: 10px;
height: 200px;


  
}

      .redeslinqueados{
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        flex-wrap: wrap;
         flex-direction: column;
    }
    .whats{
        width: 150px;
        height: 30px;
        background: #00bb2d;
        display: flex;
     
        align-items: center;
        border-radius:5px;
    }
   
    .icono{
      
    border-right:  white solid 2px;
  
    }
    .links{
        font-size: 12px;
    }
   
    .face{
        width: 150px;
        height: 30px;
       
      
        border-radius:5px;
    }
    .gmail{
        width: 150px;
        height: 30px;
       
        border-radius:5px; 
    }
}   









.todasimaf button{
 outline: none;
    background: rgba(255, 255, 255, 0.452);
    color: black;
    padding:20px;
    font-size:30px;
    border-radius: 5px;
    border: none;}
.todasimaf button:hover{background:#24262c;
color:white;
}







/*diseño  inicio*/



.todo{display: flex;
    height: auto;}

.otro{
    display:none;
}


.general{
    text-align: center;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background:#F7F7F7;

  
}

.cubo{
    background:#24262c;
    width:80px;
    height: 80px;  
    border-radius: 0px 0px 15px 15px;
    text-align: center;
    position:relative;
   }
  


   
#noticia{
        color: white;
        font-size: 30px;
        margin:auto auto;
        margin-top: 30px;
        
        
        
    }
.fondouno{
    display: flex;
    flex-direction: column;
    align-items: center;
  background:#F7F7F7;

}
.cosa{
    position: relative;
    margin-top: 50px;
    width: 100%;
   
}









.contedorgloval{
    width: 100%;
    background: linear-gradient(#1a1a1a, #000000 );
    position:relative;
    margin-top: 30px;
    margin-bottom: 30px;
}
.contedorglovaldos{
    width: 90%;
    position:relative;
    margin:auto;
}
.slide-contenedor{
    max-width:100%;
    height:auto;
    width:70%;
    overflow:hidden;
    margin: auto;
    position:relative;
   
    
       }
       
     
       .miSlider img{  
           width:100%;
           height:auto;
           object-fit: cover;
           vertical-align:top;
           transition: 2s;
       }
       .direcciones{
           width:100%;
           height: 100%;
           position: absolute;
           top: 0;
           display:flex;
           justify-content:space-between;
           align-items: center;
           font-size: 20px;
         
       }
       .direcciones a{
           color: black;
           display: inline-block;
           padding: 10px 15px;
           text-decoration: none;
           background: rgb(56, 56, 56);
           border-radius: 50%;
           color: white;
       }
       .direcciones a:hover{
           background:#ffffff;
           color: black;
           transition: .5s;
       }
    
       .barras{
           position: absolute;
           bottom: 0;
           width: 100%;
           display: flex;
           justify-content: center;
           margin-bottom: 15px;
       }
       .barra{
           cursor: pointer;
           width:25px;
           height:2px;
           margin:0 2px;
           background: white;
           display:inline-block;
           margin-left: 3px;
       }
       .active{
           background-color:#f33f12;
       }
       .fade{
           animation-name: fade;
           animation-duration:1.5s ;
           
       }
       @keyframes fade{
        from{opacity: .4;}to {opacity: 1;}
    }








.parrafo1{
   text-align: left;
    align-items:center;
    width:55%;
    margin:auto;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 15px;
    padding:3%; 
    border-radius: 30px; 
    color: white;
    line-height:20px;
    background:linear-gradient(#242424, #1a1a1a);
    position: relative;
    box-shadow: 0px 0px 20px rgb(51, 51, 51);
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    
}
.parrafo1 b{
  font-size: 23px;
  padding-bottom: 35px;

}

.parrafo1 a{
    color: white;
    text-decoration: none;
}
.titulo{
    font-family: 'Montserrat';
    font-size:35px;
   font-weight: 500;
    margin-bottom: 50px;
    margin-top: 100px;
}
.recomiendaciones{
  
    display: flex;
    width: 60%;
    flex-wrap: wrap; 
    
    justify-content: space-around;
}

.recomiendaciones img{
    padding: 30px;
}

.caja{width:230px;
background:#24262c;
box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.24);
border-radius: 20px;
height: 350px;
margin: 5px;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
margin-bottom: 100px;
}
.caja p{
    padding: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight:500;
    font-size: 15px;
    color: white;
    text-align: left;
     border-top: 5px solid #fa6406;
}
.comentario{
    height:100vh;
    width: 100%;
    background:linear-gradient(#fa6406,#cc5104)
}

/* pue de pagina*/
footer{
    width: 100%;
    height:35%;
    display: flex;
    background: #24262c;
    justify-content: space-around;
    align-items: center;
}

.terminos{
   align-items: center;
    display: flex; 
    flex-direction: column;
    width: 15%;
    height: 200px;
    color: aliceblue;
    justify-content: space-around;
    margin-left: 5%;
   
   }
  .terminos h1{
      font-size: 20px;
      border-bottom: 5px solid white;
      line-height: 35px;
      font-family: 'Rubik', sans-serif;
      font-weight: 600;
      margin-bottom: 50px;
  }  

.legal{
    display: flex;
    flex-direction: column;
    height: 100px;
    justify-content: space-around;
    font-family: 'Rubik', sans-serif;}
.legal a{
    text-decoration: none;
    color: white;
    margin-top: 30px;
    
}
.terminos:last-child{
    font-size: 30px;
}
.legal a:hover{
    border-bottom: 3px solid white;
}
/* find e pie  pagina*/
.mostrar-menu{display: none;}
.cerrar-menu{display: none;}
.mostrar-menu2{opacity: 0;}

   

@media screen and (max-width:900px){
.todo{flex-direction: column;}
.otro{
    width: 40px;
    display:block;
    text-align: center;
    
}
.mostrar-menu2{opacity: 0; padding:8px 16px;}
.mostrar-menu{
        display: block;
        font-size: 15px;
        color:#404040;
        background: #F7F7F7;
        border-radius: .3rem;
        padding:8px 16px;
        cursor: pointer;
        text-align: right;
        border: none;
      
    
      }
.cerrar-menu{display: block;}
nav{
    
    width: 100%;
    display: flex;
    position: static;
    flex-direction:row;
justify-content: space-around;
    align-items: center;
    margin: 0px;
    height:100px;
    border-right: none; 
   
  
}
.icononav{
   display:none;
}
ul{
    position: static;
    padding:0px;
    flex-direction: column;
    
}
footer{
    
    height:50%;
    
}


.menu-nav{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200px;
    background:#24262c;  
     z-index:1;
    transform: translateX(-250px);
    transition: transform .3s;
  }
  
  .menu-nav.visible{
    transform: translateX(0);
  }
  
  .menu-nav ul{
      padding-top: 50px;
    list-style: none;
    padding-left: 0;
  }
  
  .menu-nav li{
      
    margin-bottom: 1rem;
  }
  
  .menu-nav a{
    color:#BFBFBF;
   
    text-decoration: none;
  }
  
 
  .cerrar-menu{
    background-color: transparent;
    border: 0;
    padding: 0;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0;
  }


.todasimaf button{
    padding:10px;}

  .titulo{ font-size: 30px;}
  .caja p{
      font-size: 13px;
  }
  .caja{height: 300px;}
  .parrafo1{
      width: 90%;
      height: 150px;
      font-size: 13px;
      text-align: justify;
      justify-content:space-around;
      overflow: scroll;
  }
  .parrafo1 b{
      font-size: 15px;
   margin-top: 20px;
  }
  .direcciones a{
    padding: 2px;
    display: none;
}

.slide-contenedor{
    width: 100%;
}
.contedorglovaldos{
    width: 100%;
}
}


@media screen and (max-width:500px){
    .parrafo1{
        width: 90%;
        height: 250px;
        font-size: 13px;
        text-align: justify;
        justify-content:space-around;
        overflow: scroll;
    }
    .parrafo1 b{
        font-size: 13px;
     margin-top: 5px;
     padding-bottom: 5px;
    }  
}

/*diseño de cursos*/
.contenedor{
 
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 80%;
    justify-content: center;
    align-items: center;
    
}
.cursos{display: flex;
    justify-content:space-around;
align-items: center;
margin-top: 3%;
margin-bottom: 3%;
padding: 10px;
height: 230px;
background: #24262c;
border-left: 50px solid #fa6406;
border-radius: 30px;
width: 600px;
box-shadow: 0px 0px 10px   rgb(151, 151, 151);}

.a{
    
    border-left: 50px solid #fa6406;  
}

.b{
    
    border-left: 50px solid #6091c2;  
}

.c{
    
    border-left: 50px solid #9d66c9;  
}

.d{
    
    border-left: 50px solid #15a73b;  
}

.e{
    
    border-left: 50px solid #40a3b8;  
}

.cursosFalse{display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 10%;
    padding: 10px;
    height: 230px;
    border-left: 50px;
    border-radius: 30px;}

.cursos h1{
    font-size: 23px;
    font-family: 'Rubik', sans-serif;
   font-weight: 500;
   color: white;
   display:flex;
  

}

.cursos p{ color: white;
    width:100%;
}
.cursos img{border-radius:5px;
width:180px;
      
  height:160px;

}
.parrafo3{   text-align: left;
    align-items:center;
    width:50%;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 17px;
    padding:2%; 
    border-radius: 30px; 
   
    line-height:30px;
    
  
}
.cursos button{
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
    font-size: 15px;
    font-family: 'Rubik', sans-serif;
    font-weight: 500;
    outline:none;
    padding: 20px;
    border: none;
    color: #404040;
    background:white;
    border-radius: 10px ;
}
.cursos button:hover{
   
    transform:scaleX(1.1) ;
}



  @media screen and (max-width:960px){
   .cursos img { 
        width:160px;  
        height:140px;}

   .parrafo3{
    font-size: 15px;
    margin-top:20px;}
    
   .cursos h1{ 
    padding-top:50px;
   margin-left:10px;}

.cursos button{
    box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
    font-size: 15px;
    padding: 20px;
    border-radius: 10px}

}

  @media screen and (max-width:712px){
    .cursos img{ 
      width:160px;
      margin-top: 20px;
      height:140px;}
  .cursos h1{
   margin-left:0px;
   margin-top:-50px;
    }
  .Cursos{
     width:270px;
    height:400px;
   flex-direction: column;
   border-left: none;
   border-top: 50px solid #fa6406;
    }
    .a{
        border-left: none;
        border-top: 50px solid #fa6406;
    }
    .b{
        border-left: none;
        border-top: 50px solid #6091c2;
    }
.c{
    border-left: none;
        border-top: 50px solid #9d66c9;
}

.d{
    border-left: none;
        border-top: 50px solid #15a73b;
}

.e{
    border-left: none;
    border-top: 50px solid #40a3b8;  
}

   .contenedor{
    align-items: center;
     margin: auto auto;
    }

}


  /*diseño de foro de materia */
.preguntas{
    margin-top: 5%;
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
    font-weight: 300;
}
.foro{
    display: flex;
    flex-direction: column;
    margin: 0px;
    height: auto;
   
    width: 30%;
    box-shadow: 3px 3px  10px rgba(0, 0, 0, 0.226);
    margin-bottom: 5%;
    margin-top: 5%;
   
}

.foro div{
    background:#404040;
    padding:5%;
    border-bottom: 3px solid white;
    
    
    
}
.foro  a{
    text-decoration: none;
    color:white;
    font-size: 16px;
    font-family: 'Rubik', sans-serif;
    font-weight: 500;
    
}

.foro div:hover{
    width:110%; 
}

.crearforo{
  text-decoration: none;
  padding: 20px;
  background: #404040;
  color: white;
  border-radius: 10px;
    display: flex;
    font-family: 'Rubik', sans-serif;
    font-weight: 500;
    margin-top: 30px;
}
.crearforo:hover{
    padding: 25px;
}

.btnBorrarBlog{
    margin-left: 30px;
}

/*diseño de materia*/
.materiauno{
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 80%;
    height:450px;
    justify-content: space-between;
   padding: 20px;
    
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 30px;
    
    box-shadow: 4px 4px 5px rgba(0,0,0,0.5);
}

.b1{
    background-image:url('../media/img/FondoVector.png');
}

.b2{
    
    background-image:url('../media/img/Mesadetrabajo3.png');
}

.b3{
    background-image:url('../media/img/Mesadetrabajo2.png');
}

.b4{
    background-image:url('../media/img/Mesadetrabajo4.png');
}

.b5{
    background-image:url('../media/img/Mesadetrabajo5.png');
}


.conte{display: flex;
    flex-direction:column;}
.cara{display: flex;
    width:400px;
    justify-content: space-between;
    padding: 10px;
}
.cara div{width: 100px;
margin-left: 10px;}
.cara img{
    width: 70px;
    height: 70px;
   
}
.cara div p{
    color:white;
    font-family: 'Rubik', sans-serif;
    font-size: 30px;
    font-weight: 500;  
    text-align: left;
    width:500px;
    line-height: 30px;
    
}

.cara p:last-child{
    color: #bfbfbf;
    font-family: 'Rubik', sans-serif;
    font-size: 15px;
    font-weight: 500;
    width:350px;
    margin-left:-10px;
}

.caraP{display: flex;
    width:200px;
    justify-content: space-between;
    padding: 10px;
}
.caraP div{width: 100px;
margin-left: 10px;}
.caraP img{
    width: 70px;
    height: 70px;
   
}
.caraP div p{
    color:white;
    font-family: 'Rubik', sans-serif;
    font-size: 30px;
    font-weight: 500;  
    text-align: left;
    width:300px;
    
}
.caraP p:last-child{
    color: #bfbfbf;
    font-family: 'Rubik', sans-serif;
    font-size: 20px;
    font-weight: 500;
    width:250px;
 
}

.parrafo2{
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: white;
    margin-left:1%;
    text-align: left;
    line-height: 18px;
    margin-top:30px;
 
}
.prueba{display: flex;
width:100%;
align-items: center;
justify-content:space-between;}
.nota{ width:100px;
    height:100px;
    margin-left: 0px;
    border-radius: 20px;
    background: white;
    align-items: center;
    display: flex;
    justify-content: center;
    font-size: 50px;
    font-weight: 500;
    font-family: 'Rubik', sans-serif;
    color:  #1e6817;

}
.nota2{width:100px;
    height:100px;
    margin-left: 0px;
    border-radius: 20px;
    background: white;
    align-items: center;
    display: flex;
    justify-content: center;
    font-size: 50px;
    font-weight: 500;
    font-family: 'Rubik', sans-serif;
    color: rgb(173,21,21); 
}
.conte p{
    width: 90%;
    margin-top: 5%;
    line-height:20px;
}

.entradas{
    display:flex;
    width: 80%;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top:5%;
    }
.unicoli{
    display: flex;
    flex-wrap: wrap;
    width: 200px;
    margin-bottom: 30px;
}
.bordeM{
    width: 200px;
    padding-left:10px ;
    display: flex;
align-items: center;
justify-content: space-around;
border-left: 5px solid #fa6406;
}

.bm1{
    border-left: 5px solid #fa6406;
}

.bm2{
    border-left: 5px solid #6091c2;
}

.bm3{
    border-left: 5px solid #9d66c9;
}

.bm4{
    border-left: 5px solid #15a73b;
}

.bordeM img{
    width: 50px;
    
    border-radius:0% ;
}
.bordeM button{
    padding:10%;
border: none;
color: white;
background:#404040;
border-radius: 10px;
outline:none;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.226);
}

.entradas button:hover{
    padding: 11%;
}
.otras{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.otras .botones {
    font-family: 'Rubik', sans-serif;
    font-weight: 500;
    padding: 1.2%;
    background: white;
    border-radius:10px ;
    color: #404040;
    text-decoration: none;
    width: 200px;
    margin-left: 10px;
    margin-bottom: 30px;
   
}
.otras a:hover{
    transform:scale(1.2)
}


@media screen and (max-width:1030px){
    .afa p{
        /* margin-top:10px; */
        height: 30px;
        
    }
    
    .materiauno{width:80%;
        background-size: cover;
        
        height:550px;
    }
    .b1{
        background-image:url('../media/img/fondoMateriaCelular.png');
    }
    
    .b2{
      
       
        background-image:url('../media/img/fondo2.png');
    }
    
    .b3{
        background-image:url('../media/img/fondo3.png');
    }
    
    .b4{
        background-image:url('../media/img/fondo4.png');
    }
    .entradas{width:80%;}
    .foro{width:50%;}
    .bordeM img{width:35px;}
    
    .bordeM button a{
        font-size: 13px;
    } 
    
    .cara p:last-child{
        margin-left:-20px;
        width:250px;
    }
    .caraP div p:last-child{
       
        font-size: 20px;
    }
    .caraP div p{
        font-size: 30px;
  
            }
    .parrafo2{
        
        font-size: 10px;
        padding-top: 20px;
        line-height:15px;
  
    }
    .conte p{
        width: 100%;
     
     
    }
    .cara div p{
        
font-size: 25px;
width: 250px;

 padding: 0px;}
     
.otras .botones{
   margin-bottom: 10px;
}
    .cara div p:last-child{
        margin-top: 100px;
        font-size: 20px;
    }
    .parrafo2{
        font-size: 15px;
    }
  
.unicoli button{
    width:60%;
}
    }
    
    
    @media screen and (max-width:620px){
        .materiauno{width:80%;
            background-size: cover;
            
            

    } }
xz









/*diseño de perfil*/
.perfil{
    margin-top: 4%;
    width: 100%;
    height: auto;
  
}
form{
    
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    height:auto;
}
.cajauno{width:600px;

border-radius: 25px;
height:150px;
margin-bottom: 5%;
display: flex;
flex-direction: column;
justify-content: space-around;
padding-left: 50px;
}

.cajauno input{
    font-family: 'Rubik', sans-serif;

    font-weight: 500;
    font-size: 18px;
    background:#a0a0a013;
    border-radius: 0px;
    border: none;
    padding:15px;
    border-left: 9px solid #fc4c4c;
    outline:none;
   
}
c.cajauno h1{
     margin-left:-85%;
    font-family: 'Rubik', sans-serif;
    font-size: 1.2em;
    font-weight: 500;
}
.cajauno:last-child{
   display:flex;
    align-items: center;
}

.generos{display: flex;
    justify-content: space-around;
    
   
    
}


.generos label{
    display:flex;
    position: relative;
    color: black;
    font-family: 'Rubik', sans-serif;
    background:#c4c4c4;
    border-radius: 5px;
    padding: 30px;
    align-items: center;
}
.generos label:hover{
    background: #419439;
    color: white;
}
.generos label:before{
    height: 30px;
    width:30px;
    border-radius: 50%;
    margin-right: 20px;
}
input[type="radio"]{
    display: none;
}
 input[type="radio"]:checked + label{
    background-color: #1e6817;
    color: white;
    font-family: 'Rubik', sans-serif;
}
.llenar{width:70%;
border: none;
padding:7px;
border: 2px solid black;
border-radius:5px;}

.afirmar{
    width: 100%;
}

.afirmar button{
    font-family: 'Rubik', sans-serif;
    font-weight: 5000;
    font-size: 18px;
padding:1.2%;
border: none;
color: white;
background:#404040;
border-radius: 10px;
outline:none;
margin-bottom: 50px;
}
.afirmar button:hover{
    transform: scale(1.1);
}
@media screen and (max-width:900px){
.form{width:100%;
}
.cajauno{
    margin-left: 10%;
    padding-left: 10%;
}

}

@media screen and (max-width:712px){
    .cajauno{
    width:100%;
    }
    .generos{
        width:80%;
    }
}

/* alerta Todas */
.alert{
    background:#F8D7DA;
    min-width: 350px;
    position: absolute;
    padding: 30px 15px;
    right: 0px;
    top: 20px;
    border-left: 20px solid rgb(177, 44, 44);
    color: black;
    font-size: 18px;
   border-radius: 10px 0px 0px 10px;
   font-family: 'Rubik', sans-serif;
   font-weight: 500;
overflow:hidden;

}
.alert.show{
    animation: show_slide 3s ease forwards;
}

@keyframes show_slide {
    0%{transform:translateX(100%);}
    10%{transform:translateX(-10%);}
    20%{transform:translateX(0%);}
    70%{transform:translateX(-10px);}
    80%{
        opacity: 1;
    }
    90%{
        opacity: 1;
        transform:translateX(100%);
    }
    100%{
       
        opacity: 0;
        transform:translateX(-100%);
        
    }


}

.alert .fa-exclamation-circle{
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    color: rgb(128, 10, 10);
}
.alert .msg{
padding: 0px 20px;
}





.alertdos{
    background:#a4f9bf80;
    min-width: 350px;
    position: absolute;
    padding: 30px 15px;
    right: 0px;
    top: 20px;
    border-left: 20px solid #32864d;
    color: black;
    font-size: 18px;
   border-radius: 10px 0px 0px 10px;
   font-family: 'Rubik', sans-serif;
   font-weight: 500;
}

.alertdos.show{
    animation: show_slider 3s ease forwards;
}
@keyframes show_slider {
    0%{transform:translateX(100%);}
    10%{transform:translateX(-10%);}
    20%{transform:translateX(0%);}
    70%{transform:translateX(-10px);}
    80%{
        opacity: 1;
    }
    90%{
        opacity: 1;
        transform:translateX(100%);
    }
    100%{
       
        opacity: 0;
        transform:translateX(-100%);
        
    }


}

.alertdos .fa-bell{
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    color:#32864d
    ;
}
.alert .msgdos{
padding: 0px 20px;
}




@media screen and (max-width:712px){

    .alertdos{
        min-width: 150px;
    }

    

}










/* alerta prefil contra */

.alertcinco{
    position: absolute;
   margin-left: 3000px;
    background:#F8D7DA;;
    min-width: 250px;
    position: absolute;
    padding: 20px 15px;
    right: 0px;
    top: 20px;
    border-left: 20px solid rgb(177, 44, 44);
    color: black;
    font-size: 18px;
   border-radius: 10px 0px 0px 10px;
   font-family: 'Rubik', sans-serif;
   font-weight: 500;
}

.alertcinco.show{
    animation: show_sliderfir 3s ease forwards;
}
@keyframes show_sliderfir {
    0%{transform:translateX(100%);}
    10%{transform:translateX(-10%);}
    20%{transform:translateX(0%);}
    70%{transform:translateX(-10px);}
    80%{
        opacity: 1;
    }
    90%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        
    }


}

.alertcinco .fa-exclamation-circle{
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    color:rgb(177, 44, 44);
}
.alertcinco .msgcinco{
padding: 0px 20px;
}








.alertseis{
    position: absolute;
   margin-left: 3000px;
    background:#a4f9bf80;
    min-width: 250px;
    position: absolute;
    padding: 20px 15px;
    right: 0px;
    top: 20px;
    border-left: 20px solid #32864d;
    color: black;
    font-size: 18px;
   border-radius: 10px 0px 0px 10px;
   font-family: 'Rubik', sans-serif;
   font-weight: 500;
   display:none;
}

.alertseis.show{
    animation: show_sliderseis 3s ease forwards;
}
@keyframes show_sliderseis {
    0%{transform:translateX(100%);}
    10%{transform:translateX(-10%);}
    20%{transform:translateX(0%);}
    70%{transform:translateX(-10px);}
    80%{
        opacity: 1;
    }
    90%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        
    }


}

.alertseis .fa-thumbs-up{
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    color:#32864d
    ;
}
.alertseis .msgseis{
padding: 0px 20px;
}






/* Políticas de privacidad*/

.caja1{width:50%;
    background:#24262c;
    box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.24);
    border-radius: 20px;
 
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
   margin-left: auto;
   margin-right: auto;
   margin-top: 50px;
    }
    .caja1 p{
        padding: 20px;
        font-family: 'Montserrat', sans-serif;
        font-weight:500;
        font-size: 15px;
        color: white;
        text-align: left;
        line-height: 30px;
        
    }
    
   @media screen and (max-width:712px){
       .caja1{width:90%;
   }
  
   }

















  



   .gloavar{
    text-align: center;
    position: fixed;
    height: 100vh;
    width: 100vw;
    z-index: 1;
    display:none;
 
    
       
   }
   .denegar{
    margin:auto auto;
       width: 300px;
       height: 200px;
     
       background:rgb(177, 44, 44);
       display: flex;
       flex-direction: column;
    text-align: center;
    align-items: center;
   border-radius:20px ;
    transform: translateY(130%);
   

 
 
   }
   .denegar  p:first-child{  color: white;
    margin: auto;
    font-family: 'Rubik', sans-serif;
    font-size: 60px;
    font-weight: 500;}

   .denegar  p:last-child{ 
       color: white;
       margin: auto auto;
       font-family: 'Montserrat', sans-serif;
       font-weight: 500;
   }