body {
      font-family: 'Ubuntu', sans-serif;
    
}


header {
    width: 90%;
    margin: 2% auto;

}

.ima_logo{
    width: 20%;
}
.login {
    float: right;
}

img {
    
    height: auto;
    }


header nav{
    margin: 1% auto auto;
    width: 100%;
    float: left;
}



header ul, header li {
    margin:0 0 0 0;
    padding:0 0 0 0;
    list-style-type: none;
    color: black;
    text-align: center;
    display: inline;
    
   }

  
.arq, .arqi {
    font-family: 'Audiowide', cursive;
    font-size: 1rem;
    font-weight: bold;
    padding: 1% 2%;
    margin-bottom: 1%;
    color: rgb(255, 0, 0);
    float: left;
    text-align: center;
    text-decoration: none;
    
}
.arq:hover, .arqi:hover{ 
    background-color: rgb(255, 0, 0); 
    color: black;
}

@media screen and (max-width:923px){
    .arq, .ind, .gra, .indu, .ima, .pai {
    display: none;
        }
}
@media screen and (min-width:924px){
    .arqi, .indus, .graf, .indut, .imag, .pais {
            display: none;
        }
}
@media screen and (max-width:400px){
    .arqi, .indus, .graf, .indut, .imag, .pais {
            display: block;
        }
}

.ind, .indus {
    font-family: 'Audiowide', cursive;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    float:left;
    padding: 1% 2%;
    margin-bottom: 1%;
    color: rgb(199, 119, 17);
    text-align: center;
}
.ind:hover, .indus:hover{ 
    background-color: rgb(199, 119, 17); 
    color: black;
}


.gra, .graf {
    font-family: 'Audiowide', cursive;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    float:left;
    padding: 1% 2%;
    margin-bottom: 1%;
    color: rgb(0, 148, 0);
    text-align: center;
}
.gra:hover, .graf:hover{ 
    background-color: rgb(0,148, 0); 
    color: black;
}

.indu, .indut {
    font-family: 'Audiowide', cursive;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    float:left;
    padding: 1% 2%;
    margin-bottom: 1%;
    color: rgb(2, 152, 152);
    text-align: center
}
.indu:hover, .indut:hover{ 
    background-color: rgb(2, 152, 152); 
    color: black;
}

.ima, .imag {
    font-family: 'Audiowide', cursive;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    float:left;
    padding: 1% 2%;
    margin-bottom: 1%;
    color: rgb(0, 0, 255); 
    text-align: center;
}
.ima:hover, .imag:hover{ 
    background-color: rgb(0, 0, 255); 
    color: black;
}

.pai, .pais {
    font-family: 'Audiowide', cursive;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    float:left;
    padding: 1% 2%;
    margin-bottom: 1%;
    color: rgb(191, 0, 191);
    text-align: center
}
.pai:hover, .pais:hover{ 
    background-color: rgb(191, 0, 191); 
    color: black;
}

/* ASIDE */

aside {
    width: 20%;
    margin: 0% 5%;
    float: left;
}

/* SECTION */
section {
width: 80%;
margin: 2% auto;
}
section img {
    margin: 0 auto 1%;
}


/*
.arqui {
    margin-top: 6%;
    width: 100%;
    border-color: rgb (100,0,0);
    border-style:solid;
    border-width:medium;
    border-color: red;
    text-align: left;
    background: #FFCACA;
    overflow: auto;
}

.arqui p {
    font-size: 1.2rem; 
    margin-top: 1.25%;
    margin-left: 2%;
    
    color: black;
        }

.arqui a {
text-decoration:none;
}
*/

.slider {
    overflow: auto;
    align-content: center;
}


@media screen and (max-width:3000px){
    .slider img {width: 100%; }
    .contacto img { width: 50px; height: 50px;}
    .contacto2 img {width: 70px; height: 50px;}
    .slider img { width:auto;  }
    }

@media screen and (max-width:1400px){
    .slider img {width: 75%; }
    
}
@media screen and (max-width:923px) {
    .slider img {width: 500px;}
    .menudesp img {display: none;}
    .selfie img {width: 335px;}
}

@media screen and (min-width:924px){
    .menu img {display: none; }
}




.zachin, .paisaje {
    width: 30%;
    margin-top: 3%;
    margin-right: 5%;
    float: left;
 }

.zachin h3, .streamingverde h3 {
color: rgb(0,148, 0);
    margin-top: initial;
    
}
.zachin p, .streamingverde p {
    margin-top: -7%;
    font-size: 0.9rem;
    font-style: italic;
    color: #067B06;
 }

.paisaje h3 {
    margin-top: initial;
    color: rgb(191,0,191);
}
.paisaje p {
    margin-top: -4%;
    font-size: 0.9rem;
    font-style: italic;
    color: black;
}

.streaming, .streamingverde {
    width: 30%;
    margin-top: 3%;
    float: left;
}
.streaming h3 {
    margin-top: initial;
    color: black;
}
.streaming p {
    margin-top: -4%;
    font-size: 0.9rem;
    font-style: italic;
    color: black;
}



.selfie {
    width: 50%;
    float: left;
}
.selfie h3 {
    margin-top: initial;
    color: black;
}
.notas {
    width: 50%;
    float: left;
}
.notas p {
    color: black;
    font-size: 1rem;
    
}
.notas h3 {
        margin-top: auto;
}
.general {
    color: black;
    width: 30%;
    float: left;
    
}
.general img {
    float: left;
}
.general h4 {
    color: black;
}


.temas {
    width: 50%;
    float: left;
}
.temas h4, .comentarios h4{
    text-decoration: underline;
    margin-top: auto;
}
.video {
    width: 50%;
    float: left;
}
.video img {
    width: 100%;
}
.comentarios {
    width: 50%;
}
.comentarios p {
    font-size: 0.9em;
    font-style: italic;
    margin-bottom: auto;
}
.comentarios p2 {
     font-size: 0.7em;
    
}
.comentarios img {
    width: 100%;
}

@media screen and (max-width:923px){
    .zachin, .paisaje, .streaming, .selfie, .notas, .temas{float: none; width: 100%;}
    .zachin p {margin-top: -2%; }
    .paisaje p, .streaming p {margin-top: -1%;}
}


/* FOOTER */
footer {
    width: 80%;
    margin: 2% auto;
    
}
.redes {
    float: left;
    width: 50%;
}

.sitios {
    float: left;
    width: 50%;
}
.contacto, .contacto2 {
    float: left;
    margin-right: 3%;
}
@media screen and (max-width:923px){
    .redes {float: none; width: 100%;}
    .sitios {width: 100%;}
}

.fecha {
    float: right;
}
#legales {
    float: left;
    text-align: center;
    font-size: 70%;
    margin-left: 3%;
    font-style:italic;
}