/*--body--*/
.wrapper {
    display: flex;
    flex-direction: column;
    height: 110vh;
    max-width: 375px;
    margin: 0 auto;
    background-color: white;
}

/*--contendor formato--*/
.contenedor {
    height: 100vh;
    max-width: 375px;
    background-color: #A9F5F2;
    background-attachment: fixed;
    overflow: scroll;
}

.contenedor_blanco{
    height: 100vh;
    max-width: 375px;
    background-color:azure;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-attachment: fixed;
    overflow: scroll;
    
}
.content-inicio{
    height: 100vh;
    max-width: 375px;
    background-color: aliceblue;
    box-shadow: grey;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-attachment: fixed;
    overflow: scroll;
    
}
/*--formato--*/
 
/*--seccion inicio--*/

/*--logo--*/
.logo-inicio{
  width: 50%;
    margin-top: 4rem;
    margin-left: 6rem;
    margin-bottom: 2rem;
}
/*--datos--*/
.form input{
    display: block;
    padding: 0;
    margin: 0 auto;
    width: 185px;
    height: 20px;
    background: transparent;
    border-bottom: 1px solid #000;
    border-top: transparent;
    border-left: transparent;
    border-right: transparent;
    padding-bottom: -20px;
    margin-bottom: 10px;
    font-size: 12px;
    vertical-align: baseline;
    
    
}

.nuevo-texto input{
    display: block;
    padding: 0;
    margin: 0 auto;
    width: 275px;
    height: 20px;
    background: transparent;
    border-bottom: 1px solid #fff;
    border-top: transparent;
    border-left: transparent;
    border-right: transparent;
    margin-top: 10px;
    margin-left:25px;
    font-size: 12px;
    vertical-align: baseline;
    color:aliceblue; 
    
}

/*--nuevo mensaje--*/
.nuevo-chat input{
    display: block;
    padding: 0;
    margin: 0 auto;
    width: 185px;
    height: 20px;
    background: transparent;
    border-bottom: 1px solid #000;
    border-top: transparent;
    border-left: transparent;
    border-right: transparent;
    padding-bottom: -20px;
    margin-left: -30px;
    margin-top: 65px;
    font-size: 12px;
    vertical-align: baseline;
    
}

.divisor_m4,
.divisor_m2{
    float: right
}

.divisor_m1,
.divisor_m3{
    padding-bottom: -10px;
}
/*--botonera--*/

.box-button a {
    background-color: #000;
    color: white;
    padding: 12px 0;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 13px;
    margin-left: 125px;
    width: 30%;
    position: relative;
    top: 35px;
    font-family: 'Montserrat', sans-serif;
    padding-bottom: -20px;
    margin-bottom: 10px;
}

/*--header buscador--*/
/*--barra--*/
.nav-inicio {
    background-color: black;
    width: 100%;
    max-width: 375px;
    height: 50px;
    color: white;
    display: block;
    position: fixed;
    top: 0;
    overflow: hidden;
 
}
/*--icono buscador--*/
.busqueda {
    width: 50px;
    height: 50px;
    float: left;
    background-repeat: no-repeat;
    background-position: center;
}

/*--barra buscador texto--*/
.nav-inicio input {
    background: #fff;
    border: 1px solid #000;
    border-radius: 16px;
    width: 70%;
    height: 20px;
    text-align: center;
    font-size:75%;
    margin-top:1rem;
    padding-top: auto;
    position: absolute;
}
/*--opciones social perfil--*/
.opcion-social {
    float: right;
    max-width: 140px;
    width:50%;
    display: block;
    
}

.opcion-social2{
    float:left;
    margin-top: 50px
}

.opcion-perfil{
    max-width: 345px;
    width: 1200%;
    display: block;
    height: 45px;
    z-index: 2;  
    margin-top: 3rem;
}

/*--section perfil1--*/
.contenedor-perfil {
    float: left;
    height: 50px;
    margin-left: 13px;
}
/*--section fondo--*/
.content {
    margin:1rem 1rem 1rem 1rem;
    width: 100%;
    display: block;
    height:150vh;
    max-width: 345px;
    position:relative;
    bottom: -45px;
    
}
.foto-perfil2{
    margin-top: 1rem;
}

/*--section contenido--*/
.fila1-inicio{
    padding-top: 1px;
    margin:1rem 1rem 1rem 1rem;
    box-shadow: black;  
}

/*--tabla contenido--*/
.tabla-trabajos{
    background-color: white;
}

.tabla-trabajos-perfil{
    background-color: white;
    margin-top: 5px;
}

/*--seleccion tp--*/
#slider {
    text-align: center;
    margin-top:-20px;
    margin-bottom: -20px;
}

#slider label, a {
color: #444444; 
}
#slider label:hover, 
#slider a:hover {
color: #000 
}

#slider input {
    display: none;
}

#slide1:checked ~ #slides .inner { margin-left:0; }
#slide2:checked ~ #slides .inner { margin-left:-100%;}
#slide3:checked ~ #slides .inner { margin-left:-200%;}
#slide4:checked ~ #slides .inner { margin-left:-300%;}
#slide5:checked ~ #slides .inner { margin-left:-400%;}
#slide6:checked ~ #slides .inner { margin-left:-500%;}

#overflow {
    width: 100%;
    overflow: hidden;
    margin-bottom: -60px;
}

#slider article img {
    width: 100%;
    max-width:100%;
}

#slides .inner {
   width: 1000%;
   line-height: 0;
}

#slides article {
width: 10%;
float: left;
 
}

/* Slider Styling */
/* Control Setup */
#controls label { 
display: none;
width: 50px;
height: 50px;
}
#active {
margin: 23% 0 0;
text-align: center;
}

#active label {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: inline-block;
width: 10px;
height: 10px;
background-color:aliceblue;
}

#slide1:checked ~ #controls label:nth-child(2), 
#slide2:checked ~ #controls label:nth-child(3), 
#slide3:checked ~ #controls label:nth-child(4), 
#slide4:checked ~ #controls label:nth-child(5), 
#slide5:checked ~ #controls label:nth-child(6), 
#slide6:checked ~ #controls label:nth-child(1) {
 background: url('img/slider-blanco.png') no-repeat;
float: right;
margin: 0 -70px 0 0;
display: block;
}

#slide1:checked ~ #controls label:nth-child(6),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4),
#slide6:checked ~ #controls label:nth-child(5){
    background: url('img/slider-blanco-izq.png') no-repeat;
    float: left;
    margin-left:-50px;
    display: block;
    
}

#slide1:checked ~ #active label:nth-child(1),
#slide2:checked ~ #active label:nth-child(2),
#slide3:checked ~ #active label:nth-child(3),
#slide4:checked ~ #active label:nth-child(4),
#slide5:checked ~ #active label:nth-child(5), 
#slide6:checked ~ #active label:nth-child(6) {
background: #333;
border-color: #333 !important;
}


/* Slider Styling */
#slides {

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 1%;
background: #fff;
}

/* Animation */
#slides .inner {
-webkit-transform: translateZ(0);
-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */

-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}
#slider {
-webkit-transform: translateZ(0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#controls label{
-webkit-transform: translateZ(0);
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
#slider #controls {
margin: -27% 0 0 15%;
width: 70%;
height: 50px;
}
#slider #controls label {
-moz-transform: scale(0.8);
-webkit-transform: scale(0.8);
-o-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}

#slider, #controls, #slides, #active, #active label, .info h3, .desktop, .tablet, .mobile {
-webkit-transform: translateZ(0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

#slider #active {
margin: 22% 0 0;
}

/*--tabla imagenes--*/
.tablero-trabajos td img{
    padding-bottom: 0rem;
    margin-left:10px;
    padding-top: -10px;
    margin-top: -10px;
    display: block;
    background-color: white;
}

.tabla-trabajos-perfil td img{
    padding-bottom: 0rem;
    margin-left:10px;
    padding-top: 10px;
    margin-top: 1px;
    display: block; 
}

.seleccion-tp{
    background-color: white;
    margin-top: -10px;
    
}

/*--notificaciones--*/
.box-notificaciones{
    margin-top: 50px;
}
/*--tabla texto--*/
h2{font-family: 'Montserrat', sans-serif;
    padding-left: 1rem;
    text-decoration-line:underline;
    padding-top: 1rem;
}

h3{font-family: 'Montserrat', sans-serif;
    padding-left: 1rem;
    padding-top: 1rem;   
}
h4{font-family: 'Montserrat', sans-serif;
    margin-top: 1px;
    padding-left: 8px;
    width: 70%;
    max-width: 350px;
    height: 0px;
    text-align: left;
}
.subtitulos2{
    font-family:'Montserrat', sans-serif;
    font-size: 11px;
    margin-top: -5px;
    margin-left:10px;
}

.subtitulos1{
    font-family:'Montserrat', sans-serif;
    font-size: 16px;
    color: white;
    background-color: black;
    background-size: 1rem;
    margin: 10px 10px 10px 10px;
    padding: 10px 10px 10px 10px;
    width: 25%;
    margin-top: 50px;
}

.subtitulos3{
    font-family:'Montserrat', sans-serif;
    font-size: 16px;
    color: white;
    background-color: black;
    background-size: 1rem;
    margin: 10px 10px 10px 10px;
    padding: 10px 10px 10px 10px;
    width: 35%;
    margin-top: 40px;
}

p{
    font-size: 12px;
    margin-left: 20px;
    margin-right:10px;
    margin-top: 20px;
    
}

h6{font-family: 'Playfair Display', 'Regular Italic', serif; 
text-align: left;
margin-top: 0rem;
padding-left: 8px;
color:gray;
}

.chat-M2{
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    margin-left: 250px;
    
    
}
.chat-M3{
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    margin-top: 0px;
    padding-top: 40px;
    margin-bottom: 5px;
    
}

.chat-M{
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    margin-top: 0px;
    padding-top: 20px;
    margin-bottom: 5px;
    
}
.chat-t{
    margin-top: 0px;
}
.chat-t2{
    float:right;
    margin-top:2px;
    margin-bottom: 20px;
}
.seleccion-text1{
    font-family: 'Playfair Display', 'Regular Italic', serif;
    margin-top: -15px;
    margin-left: 10px;
    font-size: 12px;
}

/*--tabla inicio--*/
table.grid {
    text-align: center;
    table-layout: fixed;
}

/*--perfil section--*/
.perfil-nombre{
    margin-left:100px; 
    margin-top: -90px;
    font-family:'Montserrat', sans-serif }

.perfil-carrera {
   margin-left:100px; 
    font-size: 13px;
    color: gray
}

.divisor-blanco{
    max-width: 330px;
    margin-left: 10px;
    margin-bottom: -20px;
    margin-top: -20px;
}
.foto-perfil1{
    margin-left: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
/*--barra perfil--*/
.miniperfil-nombre{
    margin-left:80px; 
    margin-top: -65px;
    font-family:'Montserrat', sans-serif 
}

.miniperfil-carrera {
   margin-left:80px; 
    font-size: 13px;
    color: gray
    
}
.foto-miniperfil{
    margin-top: -1px;
    margin-left: 9px;
    
}
.miniperfil{
    background-color: white;
    padding-top: 10px;
    height: 70px;
    
}

/*--chat lista--*/
.chat1{
    background-image: url(img/chat-fondo.jpg);
    background-repeat: no-repeat;
    padding-top: 10px;
    height: 70px;
    margin-top:10px;
}
.chat-s{
    background-image: url(img/chat-fondo.jpg);
    background-repeat: no-repeat;
    height: 70px;
    margin-top:10px;
    margin-left: 10px;
    
}
.chat-perfil{
    background-image: url(img/chat-fondo.jpg);
    background-repeat: no-repeat;
    height: 90px;
    width: 375px;
    margin-top:-10px;
    margin-left: -15px;
    
    
}
.chat1 a{
    display: block;
    height: 100%;
    width: 100%;
    cursor: pointer;
    margin-top: -40px;
}

.chat2{
    background-image: url(img/chat-fondo2.jpg);
    background-repeat: no-repeat;
    padding-top: 10px;
    height: 70px;

}
.box-chat{
    background: transparent;
    border-bottom: 1px solid #5b5b5e;
    border-top: transparent;
    border-left: transparent;
    border-right: transparent;
}
.chat{
    background-color: white;
    border-left: 1px solid #5b5b5e;
    border-top: transparent;
    border-left: transparent;
    border-right: transparent;
    padding-top: 10px;
    height: 70px;
    
    
    
}

.chat-miniperfil{
    margin-left: 10px;
}
.chat-nombre{
    margin-left:80px; 
    margin-top: -65px;
    font-family:'Montserrat', sans-serif 
}

.chat-mensaje{
    margin-left:80px; 
    font-size: 13px;
    color: black;   
}

.chat-nombre-s{
    margin-left:90px; 
    margin-top: -65px;
    font-family:'Montserrat', sans-serif 
}

.chat-mensaje-s{
    margin-left:90px; 
    font-size: 13px;
    color: gray;   
}

/*--footer menu--*/

.footer-inicio {
    background-color: black;
    max-width: 375px;
    width: 100%;
    display: block;
    height: 55px;
    position: fixed;
    bottom: 0;
    z-index: 2;
}

/*--footer chat--*/
.footer_texto{
    background-color: black;
    max-width: 360px;
    margin-left: 10px;
    width: 100%;
    display: block;
    height: 45px;
    position: fixed;
    bottom: 0;
    z-index: 2;
    border-radius: 20px;
    
}

/*--iconos--*/

.icono-inicio {
    background-image: url(img/icono-incio.svg);
    width: 75px;
    height: 55px;
    float: left;
    background-repeat: no-repeat;
    background-position: center;
    fill: white;
    background-size: 55%;
    cursor: pointer;
}



.icono-notificaciones {
    background-image: url(img/icono-notificaciones.svg);
    width: 75px;
    height: 55px;
    float: left;
    background-repeat: no-repeat;
    background-position: center;
    fill: white;
    background-size: 55%;
    cursor: pointer;
}

.icono-notificaciones a,
.icono-perfil a,
.icono-chat a,
.icono-mapa a,
.icono-inicio a {
    display: block;
    height: 100%;
    width: 100%;
    cursor: pointer;
}

.icono-atras a{
    display: block;
    height: 100%;
    width: 100%;
    cursor: pointer;
    
}

.icono-perfil {
    background-image: url(img/icono-perfil.svg);
    width: 75px;
    height: 55px;
    float: left;
    background-repeat: no-repeat;
    background-position: center;
    fill: white;
    background-size: 55%;
    cursor: pointer;
}

.icono-chat {
    background-image: url(img/icono-chat.svg);
    width: 75px;
    height: 55px;
    float: left;
    background-repeat: no-repeat;
    background-position: center;
    fill: white;
    background-size: 55%;
    cursor: pointer;
}

.icono-mapa {
    background-image: url(img/icono-mapa.svg);
    width: 75px;
    height: 55px;
    float: left;
    background-repeat: no-repeat;
    background-position: center;
    fill: white;
    background-size: 55%;
    cursor: pointer;
}

.icono-trabajos{
    background-image: url(img/icono-trabajos.svg);
    width: 85px;
    height: 45px;
    float: left;
    background-repeat: no-repeat;
    background-position: center;
    fill: white;
    background-size: 55%;
    cursor: pointer;
}

.icono-amigos{
    background-image: url(img/icono-amigos.svg);
    width: 85px;
    height: 45px;
    float: left;
    background-repeat: no-repeat;
    background-position: center;
    fill: white;
    background-size: 55%;
    cursor: pointer;

}

.icono-almacenados{
    background-image: url(img/icono-almacenados.svg);
    width: 85px;
    height: 45px;
    float: left;
    background-repeat: no-repeat;
    background-position: center;
    fill: white;
    background-size: 55%;
    cursor: pointer;
   
}

.icono-informacion{
    background-image: url(img/icono-informacion.svg);
    width: 85px;
    height: 45px;
    float: left;
    background-repeat: no-repeat;
    background-position: center;
    fill: white;
    background-size: 55%;
    cursor: pointer;

}

.icono-agregar{
    background-image: url(img/icono-agregar.svg);
    width: 70px;
    height: 40px;
    float: left;
    background-repeat: no-repeat;
    background-position: center;
    fill: white;
    background-size: 55%;
    cursor: pointer;
    margin-top: -5px;
}

.icono-enviar{
    background-image: url(img/icono-enviar.svg);
    width: 70px;
    height: 40px;
    float: left;
    background-repeat: no-repeat;
    background-position: center;
    fill: white;
    background-size: 55%;
    cursor: pointer;
    margin-top: -5px;
}

.icono-enviar2{
    background-image: url(img/icono-enviar.svg);
    width: 70px;
    height: 40px;
    float: left;
    background-repeat: no-repeat;
    background-position: center;
    fill: white;
    background-size: 55%;
    cursor: pointer;
    margin-top: 5px;
}

.icono-cyan{
   background-image: url(img/CYAN.svg);
    width: 25px;
    height: 25px;
    float: left;
    background-repeat: no-repeat;
    background-position: center;
    fill: white;
    background-size: 55%;
    cursor: pointer;
    margin-top: 30px;
     margin-left: 220px;
    
}

.icono-magenta{
    background-image: url(img/MAGENTA.svg);
    width: 25px;
    height: 25px;
    float: left;
    background-repeat: no-repeat;
    background-position: center;
    fill: white;
    background-size: 55%;
    cursor: pointer;
    margin-top: 30px;
}

.icono-amarillo{
    background-image: url(img/YELLOW.svg);
    width: 25px;
    height: 25px;
    float: left;
    background-repeat: no-repeat;
    background-position: center;
    fill: white;
    background-size: 55%;
    cursor: pointer;
    margin-top: 30px;
   
}

.icono-negro{
    background-image: url(img/K.svg);
    width: 25px;
    height: 25px;
    float: left;
    background-repeat: no-repeat;
    background-position: center;
    fill: white;
    background-size: 55%;
    cursor: pointer;
    margin-top: 30px;
   
}

.icono-atras{
    background-image: url(img/icono-atras.svg);
    width: 70px;
    height: 40px;
    float: left;
    background-repeat: no-repeat;
    background-position: center;
    fill: white;
    background-size: 55%;
    cursor: pointer;
    margin-top: -65px;
    margin-left: 260px;
    
    
}