/* 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;
	margin: 0;
	background-color: #f4f4f4;
}
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%;
	margin-bottom: 0;
	padding: 0 0 0.75rem 0;
	flex: 0 0 92%;
}

h3 {
	margin: 0;
	padding: 0.75rem 0 0.5rem 0;
}
p {
	margin: 0.75rem 0;
}
/* Add background colors to see how much space each column is taking */

.col-1, .col-3a, .col-5a, .col-5c, .col-6a, .col-6c, .col-6e {
	background-color: #d9edf7;
}

.col-2, .col-5b, .col-6b, .col-6d, .col-6f {
	background-color: #f6f2df;
}

.col-3b{
	background-color: #f4d03f;
}

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

.row-six {
	justify-content: space-between;
}

/* Mobile screen Sizes (should behave as desired by default, but this makes sure) */
@media only screen and (max-width: 479px) {
	.col-1,
	.col-2,
	.col-3a,
	.col-3b,
	.col-4,
	.col-5a,
	.col-5b,
	.col-5c,
	.col-6a,
	.col-6b,
	.col-6c,
	.col-6d,
	.col-6e,
	.col-6f {
		flex: 0 0 92%;
	}
}

/* Tablet Landscape Screen Sizes */
@media only screen and (min-width: 480px)  {
	
  .col-1,
  .col-2,
  .col-6a,
  .col-6b,
  .col-6c,
  .col-6d,
  .col-6e,
  .col-6f {
		flex: 0 0 44%;
	}
  
  .col-3a,
  .col-3b,
  .col-4,
  .col-5b {
		flex: 0 0 92%;
  }

	.col-5a,
	.col-5c {
		flex: 0 0 44%;
	}

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

	.col-3a,
	.col-5a,
	.col-5c {
		flex: 0 0 20%;
	}

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

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

	.col-6a, .col-6b, .col-6c, .col-6d, .col-6e, .col-6f {
		flex: 0 0 12%;
	}

	.col-5a,
	.col-5b,
	.col-5c {
		order: 0;
	}

}