@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Regular.woff2') format('woff2'),
        url('fonts/Roboto-Regular.woff') format('woff'),
        url('fonts/Roboto-Regular.ttf') format('truetype'),
        url('fonts/Roboto-Regular.svg#Roboto-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
html
{
	margin:auto;
	height:100%;
}
body{
    font-size: 1.3vw; /* tamaño de fuente base */
	font-family:Roboto; /* tipo de letra */
	font-weight :bold; 
	display:flex;
	height:100%;	/* alto del contenedor padre para la alineacion de los hijos */
	width:auto;
	flex-flow:column;
	margin:auto;
	
}

header, footer,section,said
{
	color:#FFFFFF;
	display:flex;
	justify-content: center;
	align-items:center;
}

header{
	width:100%;
	order:1;
	flex:1 5%;
	background-color:rgb(0, 143, 212);
}
section{
	order:3;
	flex:1 88%;
	background-color:#fff;
}

footer > p {
	order:0;
}

images{
	order:1;
	flex:1 80%;
}
said{
	width:100%;
	order:2;
	flex:1 2%;
	color:gray;
}
footer{
	width:100%;
	order:4;
	flex:1 3%;
	background-color:rgb(0, 143, 212);
}

article > img{
	width:100%!important; /* para el caso de la imagen le indico que ocupe el espacio disponible */
	height:auto!important; /* para el caso de la imagen le indico que ocupe el espacio disponible */
}
.container
{
	flex-wrap:wrap;
	justify-content:center;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex; /* Caja flexible */
	align-content:center;

}

a {
	font-size: 2vw;
}
a:link {
 color:rgb(23, 56, 97);
margin: 1vw;  
}
a:visited {
 color:gray;
margin: 1vw; 
}
a:hover {
  font-size: 2.3vw;
  color:rgb(0, 143, 212);
}

a:link, a:visited, a:active {
    text-decoration:none;
}
.container-item {
            
			border: 3px solid gray;	
			color: gray;		
			display:flex;
			align-items:center;
			flex-direction:column;
			flex-wrap:wrap;		
			min-width:229px;
			margin:1%;
	        }