@charset "utf-8";
body {background-color: #f0b8a3;
margin: 3em;
}


@font-face {
    font-family: 'latoblack';
    src: url('../fuentes/lato-black-webfont.eot');
    src: url('../fuentes/lato-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fuentes/lato-black-webfont.woff2') format('woff2'),
         url('../fuentes/lato-black-webfont.woff') format('woff'),
         url('../fuentes/lato-black-webfont.ttf') format('truetype'),
         url('../fuentes/lato-black-webfont.svg#latoblack') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'latoblack_italic';
    src: url('../fuentes/lato-blackitalic-webfont.eot');
    src: url('../fuentes/lato-blackitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fuentes/lato-blackitalic-webfont.woff2') format('woff2'),
         url('../fuentes/lato-blackitalic-webfont.woff') format('woff'),
         url('../fuentes/lato-blackitalic-webfont.ttf') format('truetype'),
         url('../fuentes/lato-blackitalic-webfont.svg#latoblack_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}




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

}




@font-face {
    font-family: 'latobold_italic';
    src: url('../fuentes/lato-bolditalic-webfont.eot');
    src: url('../fuentes/lato-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fuentes/lato-bolditalic-webfont.woff2') format('woff2'),
         url('../fuentes/lato-bolditalic-webfont.woff') format('woff'),
         url('../fuentes/lato-bolditalic-webfont.ttf') format('truetype'),
         url('../fuentes/lato-bolditalic-webfont.svg#latobold_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'latohairline';
    src: url('../fuentes/lato-hairline-webfont.eot');
    src: url('../fuentes/lato-hairline-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fuentes/lato-hairline-webfont.woff2') format('woff2'),
         url('../fuentes/lato-hairline-webfont.woff') format('woff'),
         url('../fuentes/lato-hairline-webfont.ttf') format('truetype'),
         url('../fuentes/lato-hairline-webfont.svg#latohairline') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'latohairline_italic';
    src: url('../fuentes/lato-hairlineitalic-webfont.eot');
    src: url('../fuentes/lato-hairlineitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fuentes/lato-hairlineitalic-webfont.woff2') format('woff2'),
         url('../fuentes/lato-hairlineitalic-webfont.woff') format('woff'),
         url('../fuentes/lato-hairlineitalic-webfont.ttf') format('truetype'),
         url('../fuentes/lato-hairlineitalic-webfont.svg#latohairline_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'latoitalic';
    src: url('../fuentes/lato-italic-webfont.eot');
    src: url('../fuentes/lato-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fuentes/lato-italic-webfont.woff2') format('woff2'),
         url('../fuentes/lato-italic-webfont.woff') format('woff'),
         url('../fuentes/lato-italic-webfont.ttf') format('truetype'),
         url('../fuentes/lato-italic-webfont.svg#latoitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'latolight';
    src: url('../fuentes/lato-light-webfont.eot');
    src: url('../fuentes/lato-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fuentes/lato-light-webfont.woff2') format('woff2'),
         url('../fuentes/lato-light-webfont.woff') format('woff'),
         url('../fuentes/lato-light-webfont.ttf') format('truetype'),
         url('../fuentes/lato-light-webfont.svg#latolight') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'latolight_italic';
    src: url('../fuentes/lato-lightitalic-webfont.eot');
    src: url('../fuentes/lato-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fuentes/lato-lightitalic-webfont.woff2') format('woff2'),
         url('../fuentes/lato-lightitalic-webfont.woff') format('woff'),
         url('../fuentes/lato-lightitalic-webfont.ttf') format('truetype'),
         url('../fuentes/lato-lightitalic-webfont.svg#latolight_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}




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

}

header {
background-color: #c1958d;
padding: 1em;
width: 30%;
height: auto;    


    
}


img {
height: auto;
width: 100%;
}



.contenedor{
 width: 100%;
display: flex;
flex-wrap: nowrap;
flex-basis: auto;
flex-direction: row-reverse;
  
    
}


.nati {
    padding: 1em;
    width: 95%;
    height: auto;
    
    }



h1 {
font-family: 'latoregular';
color: #901d6c;
}

h2{
font-family: 'latoitalic';
font-weight: 400;
}

h3{
font-family: 'latobold';
font-weight: 700;
}

h4{
font-family: 'latobold_italic';
font-weight: 700;
}




p{
font-family: 'latolight';
}






@media screen and (min-width: 400px) and (max-width: 700px) {   
body{  
    background-color:#555555;
    } }

    @media screen and (max-width: 400px){
        body {background-color: aqua;
        }
    }


    body nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
            
    }
    
      body nav ul li {
        margin: 0 0 0.2em 0;
    }
    
    
      body nav ul li a {
        text-decoration: none;
          display: block;
          background-color: firebrick;
          color: white;
          text-align: center;
          padding: 0.3em;
    }






    
.fotos{
display: flex;
flex-wrap: wrap;
flex-direction: row;
padding: 1em;
margin: 10px;

}

.nati2 {
width: 23%;
}



.nati4 {
width: 30%;
}


.nati3 {
width: 23%;

    
}