@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300');


* {
 box-sizing: border-box;
}

body {
 margin: 0;
 font-family: 'Open Sans', sans-serif;
}

header {
 text-align: center;
 padding: 60px;
}


.row {
 display: flex;
 flex-wrap: wrap;
 padding: 0 4px;
}

/* Crea cuatro columnas iguales que se encuentren una al lado de la otra */

.column2 {
 flex: 25%;
 max-width: 25%;
 padding: 0 4px;
 margin-left: auto;
 margin-right: auto;
}

.column3 {
 flex: 50%;
 max-width: 50%;
 padding: 0 4px;
 margin-left: auto;
 margin-right: auto;
}

.column img {
 margin-top: 8px;
 vertical-align: middle;
}

.dise-3 {
 font-family: 'Open Sans', sans-serif;
 text-align: center;
 padding-bottom: 30px;
	padding-top: 50px;
}

/* 
Diseño receptivo: hace un diseño de dos columnas en lugar de cuatro columnas */
@media screen and (max-width: 800px) {
 .column2, .column3 {
  flex: 50%;
  max-width: 50%;
 }
}

/* Diseño receptivo: hace que las dos columnas se apilen una encima de otra en vez de una al lado de la otra */
@media screen and (max-width: 600px) {
 .column2, .column3 {
  flex: 100%;
  max-width: 100%;
 }
}