/* Border box declaration 
https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
html {
  box-sizing: border-box;
}
/* inherit border-box on all elements in the universe and before and after
 */
*, 
*:before, 
*:after {
  box-sizing: inherit;
}

body {
	font-family: Arial, Geneva, sans-serif;
}
a {
	color: #2772B0;
}
.wrapper {
	width: 97%;
	max-width: 1200px;
	margin: 0 auto;
	float: none;
	background-color: #fff;
}

div img {
	width: 100%;
	max-width: 225px; 
}

/* grid system -- mobile first! */
/* flex contatiner */

.row {
	display: flex;
	flex-flow: row wrap;
}

/* attribute selector to give some margin between columns and apply styles to flex items */

[class*="col-"] {
	margin-left: 4%;
	flex: 0 0 92%;
}

/* Add background colors to see how much space each column is taking */

.col-1 {
	background-color: #A3CDD9;
}

.col-2 {
	background-color: #FFFCE6;
}

.col-3 {
	background-color: #EDD23B;
}

.col-4 {
	background-color: #D4C9E8;
}

.col-5 {
	background-color: #F0E6B8;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.col-5 img {
	max-width: 100px;
	margin: 10px 0;
}

.col-5 h3 {
	margin: 5px 0;
	font-size: 0.9rem;
}

.col-5 p {
	margin: 5px 0;
	font-size: 0.85rem;
}

/* Tablet Landscape Screen Sizes */
@media only screen and (min-width: 480px)  {
	
  .col-1,
  .col-2 {
		flex: 0 0 44%;
	}
 
  .row-3 .col-1,
  .row-3 .col-3 {
		flex: 0 0 92%;
	}

  /* Reorder row 5 items on tablet - middle item first */
  .row-5 .col-1:first-child {
		order: 2;
	}
  .row-5 .col-2 {
		order: 1;
	}
  .row-5 .col-1:last-child {
		order: 3;
	}

  .row-6 .col-5 {
		flex: 0 0 calc(28.666% - 2%);
	}

}
/* Desktop screen Sizes */
@media only screen and (min-width: 768px) {
  
  
 	.col-1 {
		flex: 0 0 20%;
	}
  
  
  
	.col-2 {
		flex: 0 0 44%;
	}

  .row-3 .col-1 {
		flex: 0 0 20%;
	}

  .row-3 .col-3 {
		flex: 0 0 68%;
	}

  .col-4 {
		flex: 0 0 92%;
	}

  .row-5 .col-1:first-child {
		order: 1;
	}
  .row-5 .col-2 {
		order: 2;
	}
  .row-5 .col-1:last-child {
		order: 3;
	}

  .row-6 {
		gap: 1.5%;
	}

  .row-6 .col-5 {
		flex: 1 1 14%;
		margin-left: 0;
	}

  .row-6 .col-5:nth-child(1) {
		flex-grow: 1;
	}
  .row-6 .col-5:nth-child(2) {
		flex-grow: 1.5;
	}
  .row-6 .col-5:nth-child(3) {
		flex-grow: 1;
	}
  .row-6 .col-5:nth-child(4) {
		flex-grow: 1.5;
	}
  .row-6 .col-5:nth-child(5) {
		flex-grow: 1;
	}
  .row-6 .col-5:nth-child(6) {
		flex-grow: 1.5;
	}

}