#contenedor {position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    background-color: beige;

            
    }

.foto100{ width: 100%;
    
}
.foto100 img{ width: 100%;
    
}
#portada_computador {
    display: block;
        width: 100%;
    
}

 #portada_celular{
        
        display: none;

    }
    
   

#titulogr{ position: absolute;
    top: 1%;
    left: 10%;
    font-size: 3em;
    color:#FFFFFF;
   font-family: 'Patua One', cursive;

    
    
}
.centrado{width: 100%;
    max-width: 900px;
    margin: 0 auto;
    
    
    
    
}
.fotopie{
    width: 400px;
    float: left;
    background-color: cornsilk;        
    margin-right: 10px;
    font-family: 'Poppins', sans-serif;
    
    
}
.fotopie img{
    width: 400px;
    
}
.pie{ width: 400px;
    
    
}
.pie span{ font-size: 0.8em;

    
}

.infografia img{width: 60%;
margin-left: 150px
    
}



nav{width: 100%;
    height: 30px;
    position: fixed;
    top: 0;
    left: 0;
    background-color: chocolate;
    z-index: 10;
    padding-top: 5px;

       
}

nav a{
    margin-left: 100px;
    text-decoration: none;
    color: #FFFFFF;
    font-family: 'Playfair Display', serif;

}

#menu{ max-width: 900px;
    margin: 0 auto;    
        
    }



#pie_pagina{
    width: 100%;
    background-color: chocolate;
    height: 80px;
    
}

#pie_pagina h3{ color: currentColor;
    text-align: center;
    padding-top: 30px;
    
}

h2 { font-family: 'Playfair Display SC', serif;

    
    
}

p {font-family: 'Archivo', sans-serif;
    
    
}

.juxtapose{width: 70%;
height: 600px;
margin-bottom: 0;
margin-left: 100px}

#juxtaposecomputador{
    display: block;
    
}

#juxtaposecelular{
    display: none;
}

#infografiacelular {display: none}
#infografiacomputador {display: block}
#celular {display: none}
#computador {display: block}


/*Desde aqui comienzan los estilos para calular*/

@media only screen and (max-width: 600px) {
    
    nav{ display: none;
        
    }
    
    
    
    #portada_celular {
    display: block;
        width: 100%;
    
}

 #portada_computador{
        
        display: none;

    }
    
       #celular {display: block}
#computador {display: none}
    

    #infografiacomputador{
        
        display: none;

    }
    
    #infografiacelular{
        display: block;
        width: 100%;
        
    }
    
    .infografia img{width:100%;
        
        margin-left: 0px;
    }
   
    #titulogr{ position: absolute;
    top: 1%;
    left: 6%;
    font-size: 1em;
    color:#FFFFFF;
       font-family: 'Patua One', cursive;
 
    
}
    
       .juxtapose{width: 100%;
height: 500px;
margin-bottom: 0;
margin-left: 0px;
    }
    
    #juxtaposecomputador{
    display: none;
    
}

#juxtaposecelular{
    display: block;
   
}
    
 
    
.fotopie{
    width: 100%;
    float: left;
    background-color: cornsilk;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 10px;
    
    
}
.fotopie img{
    width: 100%;
    
}
.pie{ width: 100%;
    
    
}
    p{ margin-right: 10px;
        margin-left: 10px;
        
    }
    h2{ margin-left: 10px;
        margin-right: 10px;
        
        
    }
		#pie_pagina{
    width: 100%;
    background-color: chocolate;
    height: 95px;
    
}

 h3{ color: currentColor;
    text-align: center;
	 padding-top: 30px;
    
}
    
    
    }