@font-face { 
font-family: 'lobster_tworegular';
    src: url('lobstertwo-regular-webfont.eot');
    src: url('lobstertwo-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('lobstertwo-regular-webfont.woff2') format('woff2'),
         url('lobstertwo-regular-webfont.woff') format('woff'),
         url('lobstertwo-regular-webfont.ttf') format('truetype'),
         url('lobstertwo-regular-webfont.svg#lobster_tworegular') format('svg');
    font-weight: normal;
    font-style: normal;

}



@font-face {
    font-family: 'quicksandbold';
    src: url('quicksand-bold-webfont.eot');
    src: url('quicksand-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('quicksand-bold-webfont.woff2') format('woff2'),
         url('quicksand-bold-webfont.woff') format('woff'),
         url('quicksand-bold-webfont.ttf') format('truetype'),
         url('quicksand-bold-webfont.svg#quicksandbold') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'quicksandregular';
    src: url('quicksand-regular-webfont.eot');
    src: url('quicksand-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('quicksand-regular-webfont.woff2') format('woff2'),
         url('quicksand-regular-webfont.woff') format('woff'),
         url('quicksand-regular-webfont.ttf') format('truetype'),
         url('quicksand-regular-webfont.svg#quicksandregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'roboto_condensedbold';
    src: url('robotocondensed-bold-webfont.eot');
    src: url('robotocondensed-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('robotocondensed-bold-webfont.woff2') format('woff2'),
         url('robotocondensed-bold-webfont.woff') format('woff'),
         url('robotocondensed-bold-webfont.ttf') format('truetype'),
         url('robotocondensed-bold-webfont.svg#roboto_condensedbold') format('svg');
    font-weight: normal;
    font-style: normal;
    

}
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700|Roboto+Condensed:400,700);
@import url(https://fonts.googleapis.com/css?family=Lobster);
@import url(https://fonts.googleapis.com/css?family=Lobster+Two:400,400italic,700,700italic);

@media screen and (max-width:480px){
    
    * {
    box-sizing:border-box;
    list-style: none;
   }

a{
    text-decoration: none;

}
    h1{
        color: #595a59
    } 
    h2{
        color:#a5a5a5
    }

  body{
      overflow: hidden;
       margin: auto;
        background-color: #e9e8e8
    }  
    main{
        background-color: #e9e8e8;
        margin: 0;
        height: 640px;
        
            
            
    }    
    .mainmuro{
        height: 640px;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .mainperfil{
        height: 640px;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    
    /* Login */ 
    
    .logo{
        width: 200px;
        margin: auto;
        margin-top: 4em;
        
        
    }
    
    .formulario{
        display: flex;
        flex-direction: column;
    }
    .formulario form {
        display: flex;
        flex-direction: column;
        width: 300px;
        margin: auto;
        margin-top: 6em
        }
    
    .formulario a{
        text-align: center;
    
    }
    
    input[type=username] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        color: white;
        background-color: #BFBFBF;
        border-radius: 100px;
        border: none;
      }
    
    input[type=password] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        background-color: #BFBFBF;
        border-radius: 100px;
        border: none;
        color: white;
      }
    
    input[type=category] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        background-color: #BFBFBF;
        border-radius: 100px;
        border: none;
        color: white;
      }
    
    .boton {
    background-color: #DE0759;
    border: none;
    color: white;
    text-decoration: none;
        padding: 0.5em 3em;
    cursor: pointer;
        border-radius: 100px;
        margin: auto;
        margin-top: 3em;
        font-family: "quicksand";
        font-weight: 700;
        font-size: 20px
      }
   /*<!-- Barra de navegacion App-->*/

    
    .appmenu{
        display: flex;
        max-width: 480px;
        justify-content: space-around;
        background-image: url(../img/barramenu-05.png);
        background-size: 480px;
        height: 69px;
        background-color: #e9e8e8;
        
            
            
    }
    .appmenuiconos{
        display: flex;
        flex-direction: row;
        width: 480px;
        justify-content: space-between;
        align-items: center;
            
    }
    header li img{
        width: 30%;
        
            
    }
    
    .appmenuiconos > li > a > img:hover{
        opacity: 0.5
    }
    
    .appmenusinfondo{
        background-color: #e9e8e8;
        height: 57px;
                    
    }
    .appmenusinfondo h1{
        font-family: "Lobster two";
        margin-left: -1em;
    }
    
    
  /*<---  Publicaciones muro App---->*/
    
    .publicaciones{
        width: 400px;
        display: flex;
        flex-direction: column;
        margin: auto;
        
            
    } 
    .publicacion1{
        padding-top: 2em;
        width: 400px;
        display: flex;
        margin: auto;
        align-items: baseline;
        padding-bottom: 2em;
        flex-direction: column;
        position: relative;
    } 
    .persona1 {
        border-top: solid #b4b4af 2px;
    }
    .persona2, .persona3{
        border-top: solid #868684
    }
    .persona1, .persona2, .persona3{
        align-self: flex-start;
        display: flex;
        flex-direction: row;
        width: 400px;
        justify-content: space-between;
        border-bottom: solid #b4b4af 2px;
        margin-bottom: 1em;
        padding-top: em;
        align-items: center;
            
    }
    .persona1nombre, .persona2nombre, .persona3nombre {
        display: flex;
        width: 250px;
        align-items: center;
    } 
    .persona1nombre h1, .persona2nombre h1, .persona3nombre h1{
        font-family: "lobster two";
        font-size: 20px;
        margin-bottom: 0;
        margin-left: 1em;
        margin-top: 0.8em
    }
    .persona1nombre h2, .persona2nombre h2, .persona3nombre h2{
        font-family: "quicksand";
        font-size: 12px;
        margin-left: 2em;
        margin-top: 0.2em
    }
    .persona1nombre img, .persona2nombre img, .persona3nombre img{
        width: 50px;
        height: 50px;
    }
    .persona1nombre img:hover{
        opacity: 0.5
    }
    .persona2nombre img:hover{
        opacity: 0.5
    }
    
    .persona3nombre img:hover{
        opacity: 0.5
    }
    .personapuntitos img{
        height: 25px;
        
}
    .personapuntitos img:hover{
        opacity: 0.5
    }
    .publicacion1 video{
        width: 100%;
        
        
       
    }
    .publicaciones p{
        font-family: "quicksand";
        font-size: 14px; 
        padding-top: 1em;
        margin: 0;
        margin-bottom: -1.5em;
            
    }
    .publicacion2 p{
        margin-bottom: 0;
    }
    
    .publicacion2{
        padding-top: 2em;
        width: 400px;
        display: flex;
        margin: auto;
        align-items: baseline;
        padding-bottom: 2em;
        flex-direction: column;
        position: relative;
    }    
    .imagen2 img{
        width: 400px;
    }
    .imagen2:hover{
        opacity: 0.9;
        color: white
            
    }
    .imagen3 img{
        width: 400px;
    }
    
/*<---- Perfil App ---->*/
    
    .perfil1{
        display: flex;
        flex-direction: column;
        margin: auto;
        width: 400px;
    }
    .perfil{
        display: flex;
        width: 400px;
        margin: auto;
        margin-top: 2em; 
        border-top: solid #b4b4af 1.5px;
        border-bottom: solid #868684 2.5px;
        padding-top: 1em;
        padding-bottom: 1em;
        align-items: center
            
    }
    .perfil img{
        width: 150px;
        height: 100%
            
    }
    .perfil h1{
        font-family: "lobster two";
        margin-left: 0.55em;

    }
    .perfil h2{
        font-family: "quicksand";
        margin-left: 1em;
        font-size: 18px;
        margin-top: -1em;
    }
    .perfil p{
        font-family: "quicksand";
         margin-left: 1.2em;
        margin-top: 1.5em;
             
    }
    .fotosperfil{
        width: 400px;
        display: flex;
        flex-flow: row wrap;
        margin-top: 1em;;
        padding-left: 0.3em;;
            
        
            
    }
    .perfilfotos li img{
        width: 120px;
        margin: 0.3em;
    }
    .videoperfil {
        width: 400px;
        display: flex;
        flex-direction: row;
         padding-left: 0.3em;
        margin-top: -0.8em;
    }
    .fotosperfil2{
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
        margin-top: -0.3em;
            
    }
    .videoperfil video{
        height: 255px;
        
        
        
    }
    .fotosperfil3{
        width: 400px;
        display: flex;
        flex-flow: row wrap;
        margin: auto;
        padding: 0.3em;
        margin-top: -0.4em;
            
    }
    
    
    /* ----- Pantalla subir foto/video/tutorial----*/
   /*-- Menu subir--*/
    
 .subirmenuiconos{
        display: flex;
        flex-direction: row;
        width: 480px;
        justify-content: space-between;
        align-items: center;
            
    }
    
    .subirmenuiconos > li > a > img:hover{
        opacity: 0.5
    }
.subirmenusinfondo{
        background-color: #e9e8e8;
        height: 57px;
                    
    }
    .subirmenusinfondo h1{
        font-family: "Lobster two";
        margin-left: -1em;
    }
    
    
/*<---- Subir tutorial  ---->*/
    
    .subir{
        display: flex;
        flex-direction: column;
        margin: auto;
        width: 400px;
    }
    .subir1{
        display: flex;
        width: 400px;
        margin: auto;
        margin-top: 0.5em; 
        border-top: solid #b4b4af 1.5px;
        border-bottom: solid #868684 2.5px;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        align-items: center
            
    }
    .subir img{
        width: 120px;
        height: 100%
            
    }
     .tutorial{
        display: flex;
        align-items: center;
        margin-top: -1em;
        
    }
    .tutorial img{
        width: 20px
    }
    .tutorial h1{
        font-family: "lobster two";
        font-weight: 100;
        font-size: 20px;
        margin-left: 0.2em
            
    }
    .subir p{
        font-family: "quicksand";
         margin-left: 0em;
        margin-top: 0em;
             
    }
    
   
    
    .elementos{
        max-width: 350px;
        margin: auto;
        margin-left: 4em;
        margin-top: -1em;
            
       
        
    }
    .elementos h1{
        font-family: "lobster two";
        font-size: 25px;
        font-weight: 400
    }
    .elementossecciones{
        display: flex;
        font-family: "quicksand";
        border-top: solid #b4b4af 1.5px;
        border-bottom: solid #868684 2.5px;
        margin-top: -1em;
       

    
    }
    .elementossecciones ul{
        padding: 0;
        margin-top: 0.2em;
        margin-bottom: 0.2em;
        width: 400px
        
    }
    
    .elementossecciones ul li {
        align-items: center;
        display: flex;
        height: 32px;
        
    }
    .elementossecciones img{
        width: 20px;
        
    }
    .elementossecciones h2{
        font-weight: 400;
        font-size: 15px;
        margin-left: 1em;
    }
    
    
    .tallerc{
        max-width: 350px;
        margin: auto;
        margin-left: 4em;
        margin-top: -1em;
            
       
        
    }
    .tallerc h1{
        font-family: "lobster two";
        font-size: 25px;
        font-weight: 400
    }
    .tallersecciones{
        display: flex;
        font-family: "quicksand";
        border-top: solid #b4b4af 1.5px;
        border-bottom: solid #868684 2.5px;
        margin-top: -1em;
       

    
    }
    .tallersecciones ul{
        padding: 0;
        margin-top: 0.2em;
        margin-bottom: 0.2em;
        width: 400px
        
    }
    
    .tallersecciones ul li {
        align-items: center;
        display: flex;
        height: 32px;
        
    }
    .tallersecciones img{
        width: 20px;
        
    }
    .tallersecciones h2{
        font-weight: 400;
        font-size: 15px;
        margin-left: 1em;
    }
    
    .nivelc{
        max-width: 350px;
        margin: auto;
        margin-left: 4em;
        margin-top: -1em;
            
       
        
    }
    .nivelc h1{
        font-family: "lobster two";
        font-size: 25px;
        font-weight: 400
    }
    .nivelsecciones{
        display: flex;
        font-family: "quicksand";
        border-top: solid #b4b4af 1.5px;
        border-bottom: solid #868684 2.5px;
        margin-top: -1em;
       

    
    }
    .nivelsecciones ul{
        padding: 0;
        margin-top: 0.2em;
        margin-bottom: 0.2em;
        width: 400px
        
    }
    
    .nivelsecciones ul li {
        align-items: center;
        display: flex;
        height: 32px;
        
    }
    .nivelsecciones img{
        width: 20px;
        
    }
    .nivelsecciones h2{
        font-weight: 400;
        font-size: 15px;
        margin-left: 1em;
    }
    
    
    





    /* Imagen seleccionada */ 
    
    .mainzoom{
        overflow: hidden
    }
    .zoommenu{
        display: flex;
        max-width: 480px;
        justify-content: space-around;
        background-size: 480px;
        height: 69px;
        background-color: #595a59;
        font-family: "lobster two";
        font-size: 25px;
        color: #e9e8e8;
        
            
            
    }
    .zoommenuiconos{
        display: flex;
        flex-direction: row;
        width: 480px;
        justify-content: space-between;
        align-items: center;
            
    }
    
    
    .zoommenuiconos > li > a > img:hover{
        opacity: 0.5
    }
    
    .contenido{
        background-color: #5EB5A3;
        height: 640px;
        font-family: "quicksand";
        color: white;
        width: 480px;
        
    }
    
    .contenido img{
        width: 480px;
    }
    .contenido h6 {
        text-align: right;
        padding-right: 3em;
        margin: 0;
        font-size: 15px;
    }
    
    .contenido p{
        text-align: center;
        margin-top: 2em;
        height: 200px;
    }
    
    .footerzoom{
        position: absolute;
        background-image: url(../img/footerapp-06-06.png);
        background-size:480px;
        width: 480px;
        height: 108px;
        background-color: #5EB5A3;
    }
/* Footer App */    
footer{
    position: absolute;
    background-image: url(../img/footerapp-06-06.png);
    background-size:480px;
    width: 480px;
    height: 108px;
    background-color: #e9e8e8;
    
}
    .botoncamara{
        position: absolute;
        top: 26px;
        left: 209px;
        
    }
    .botoncamara img{
        width: 63px;
    }
.iconos{
    display: flex;
    align-items: baseline;
    justify-content: space-around;
    position: relative;
    top: 3em;
    

}

.iconos img{
    width: 40px;
    margin-left: 1.5em;
    margin-right: 1.5em;
}
footer img:hover{
    opacity: 0.5
}
.iconosizquierda{
    margin-left: -0.5em;
}
.iconosderecha{
    margin-left: 3em;
}



}