/*
File Name: grid.css
Date: 05/28/19
Programmer: Sarah Bayley
*/

/* Adapted from: http://www.responsivegridsystem.com (media queries changed to mobile first) */

/*  grouping  */
.group {
	clear: both;
	padding: 0px;
	margin: 0px;
}

.group:before, .group:after {
	content: "";
	display: table;
}

.group:after {
	clear: both;
}

/*  column basic setup  */
.col {
	display: block;
    /* make all columns gravitate to the left */
	float: left;
    /* add space under each column div */
	margin: 0 0 15px 0;
	width: 100%;
}

/* fill wrapper width; fit only single columns on mobile */


/* TABLET CSS CODE AND UP */

@media only screen and (min-width: 481px) {

    /*  fill half of wrapper width; fit 2 columns side by side  */
	.span_1_of_2 {
		width: 49%;
	}

    /* add side margin only on left of columns (give columns elbow room without compounding section's right-side padding) */
	.col {
		margin: 1% 0 1% 2%;
	}

    /* remove left margin from tablet's left-most columns (section padding takes care of this) */
	.col:nth-child(even) {
		margin-left: 0;
	}
}

@media only screen and (min-width: 1025px) {

    /* fill third of wrapper width; fit 3 columns side by side */
	.span_1_of_3 {
		width: 32%;
	}
    
    /* reset all left margins to be equal */
    .col:nth-child(even) {
		margin-left: 2%;
	}

    /* remove left margin from desktop's left-most columns (section padding takes care of this) */
    .col:nth-child(3n-1) {
		margin-left: 0;
	}
}