@charset "UTF-8";
/* CSS Document */

/**********************************************************\
*                                                          *
* SITE URL/NAME  -  jammer grid                            *
* originally based on SIMPLE GRID by (c) zach cole 2016    *
*                                                          *
* hewn of solid text at oastone.co.uk                      *
*                                                          *
* version 1, october 2019                                  *
* hangs all that framework together                        *
*                                                          *
\**********************************************************/


/* ==== UNIVERSAL ==== */

* {
	/* makes boxes include padding/margins in their width/height values */
	/* padding/margins are cleared from all elements in the reset.css file */ 
	box-sizing: border-box;
}


/* ==== GRID SYSTEM ==== */

.full-width { /* a wrapper for containers to allow full-width background */
	width: 100%;
	/* padding: 0 15px; */ /* GUTTERING could be defined here rather than in the container width */
}

.container { /* goes inside the full-width div or alone and defines the width of the page */
	/* GUTTERING defined here */
	width: 90%; /* percentage width for older browsers */
	width: calc(100% - 20px); /* calculated width for not-so-old browsers - half the subtracted fugure is the GUTTER */
	width: calc(100vw - 20px); /* calculated width - half the subtracted fugure is the GUTTER */
	max-width: 700px; /* max width for this breakpoint - remember this is for mobile but because max-width is not defined in the higher breakpoints (yet) this stands */
	/* END GUTTERING */
	margin: 0 auto; /* centres this in the browser */
	padding-top: 40px; /* HORIZONTAL PADDING for top of containers */
	padding-bottom: 40px; /* HORIZONTAL PADDING for bottom of containers*/
	
	/*border-left: 1px solid red;*/ /* DELETE THIS - used for testing edges */
	/*border-right: 1px solid red;*/ /* DELETE THIS - used for testing edges */
}

.container.fluid { /* full-width container - add this class to the container to make it full-width fluid */
	max-width: 1000000px;
}

.row {
	/* negative margins - turned off but some people like these */
	/*margin-left: -15px; 
	margin-right: -15px;*/
	
	/*position: relative;*/ /* used instead of FLEX for older browsers */
	display: flex;
	flex-wrap: wrap;
}

.row::after { /* clears float - used instead of FLEX for older browsers */
	/*content: "";
	display: table;
	clear: both;*/
}

.container.fluid .row {
	/* only used to cancel negative margins, if used */
	/*margin-left: 0; 
	margin-right: 0*/
	max-width: 100%;
}

div[class*="col"] {
	/* HORIZONTAL PADDING for top/bottom of columns */
	/* VERTICAL PADDING for left/right of columns */
	padding: 20px 15px;
	/*float: left;*/ /* used instead of FLEX for older browsers */
}

.col-1, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
	  width: 100%;
}

.content {
	/*min-height: 100px;
	border: lightblue 1px dashed;
	color: lightblue;*/
	/*align-items: center;
	text-align: center;
	justify-content: center;
	text-transform: uppercase;
	font-size: 16px;*/
}
.vcentre {
	align-items: center;
	text-align: center;
	justify-content: center;
}
.centre {
	text-align: center;
}
.left {
	text-align: left;
}
.right {
	text-align: right;
}

.col-1-sm {
	width: 8.33%;
}
.col-2-sm {
	width: 16.66%;
}
.col-3-sm {
	width: 25%;
}
.col-4-sm {
	width: 33.33%;
}
.col-5-sm {
	width: 41.66%;
}
.col-6-sm {
	width: 50%;
}
.col-7-sm {
	width: 58.33%;
}
.col-8-sm {
	width: 66.66%;
}
.col-9-sm {
	width: 75%;
}
.col-10-sm {
	width: 83.33%;
}
.col-11-sm {
	width: 91.66%;
}
.col-12-sm {
	width: 100%;
}
.hidden-mobile {
	display: none;
}

/* ==== GRID MODIFIERS ==== */

div[class*="col"].thin-padding, .thin-padding {
	padding-top: 20px;
	padding-bottom: 20px;
}
div[class*="col"].thin-padding-top, .thin-padding-top {
	padding-top: 20px;
}
div[class*="col"].thin-padding-bottom, .thin-padding-bottom {
	padding-bottom: 20px;
}

div[class*="col"].no-padding, .no-padding {
	padding-top: 0px;
	padding-bottom: 0px;
}

div[class*="col"].no-padding-bottom, .no-padding-bottom {
	padding-bottom: 0px;
}
div[class*="col"].no-padding-top, .no-padding-top {
	padding-top: 0px;
}

.panels div[class*="col"] {
	padding: 10px 7px;
}

.panels div[class*="col"] .content {
	padding: 10px 8px;
	background: #eee;
}

.left {
	text-align: left;
}


@media only screen and (min-width: 540px) {  /* 33.75rem */
	.container {
		/*width: 96%; /* changed from 80% */
	}
}

@media only screen and (min-width: 720px) {  /* 45rem */
	.col-1 {
		width: 8.33%;
	}
	.col-2 {
		width: 16.66%;
	}
	.col-3 {
		width: 25%;
	}
	.col-4 {
		width: 33.33%;
	}
	.col-5 {
		width: 41.66%;
	}
	.col-6 {
		width: 50%;
	}
	.col-7 {
		width: 58.33%;
	}
	.col-8 {
		width: 66.66%;
	}
	.col-9 {
		width: 75%;
	}
	.col-10 {
		width: 83.33%;
	}
	.col-11 {
		width: 91.66%;
	}
	.col-12 {
		width: 100%;
	}
	.hidden-mobile {
    	display: block;
  	}
}

@media only screen and (min-width: 960px) { /* 60rem */
	.container {
		/*width: 96%;  /* changed from 75% */
	}	
}