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

:root {
	--med_gray: #CdCdCd;
	--dk_gray: #222;
	--lt_gray: #dfdfdf;
	--lt_blue: #01a8ae;
}

/* UNIVERSAL CLASSES */

.col_3 { column-count:3; }
.col_5 { column-count: 5; }
.justify { text-align:justify; }
.body_gray { color:var(--dk_gray); }
.inset { padding:5%; max-width:90%; }

/* BASE (MOBILE) SIZE */
body {
	background-color: var(--med_gray);
	font-family: 'Catamaran', sans-serif;
	line-height:1.2em;
}
		
	h1 {
		font-size:42px;
	}

h2 {
		font-size:24px;
}

p {
	color: var(--dk_gray);
	text-align: justify;
	column-count:1;
}


	#shape { width:150px; height:150px; background-color:RGBA(0,255,0,1); }

	/* ----- NAV ------- */
nav {
	text-align:center;
	position:fixed;
	width: 98%;
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(250,250,250,.75) 0%, rgba(255,255,255,1) 100%);
	margin: 1%;
	border-radius: 8px;
	z-index:999;
}
	nav a { text-decoration:none; color:var(--dk_gray); padding: 0px 10px; }
	nav a:hover { color:var(--dk_gray); }
	nav ul { padding: 8px; }
	nav li { list-style: none; display: inline-block; }

#spacer {
	position:relative;
	width: 90%;
	padding: 2%;
	background-color: var(--lt_gray);
	margin: auto;
	height:18px;
	margin-bottom:10px;
}

.container {
		position:relative;
		width:90%;
		padding:2%;
		background-color:var(--lt_gray);
		margin:auto;
		margin-bottom:25px;
}

.container_colored {
		position:relative;
		width:90%;
		padding:2%;
		background-color:var(--lt_blue);
		margin:auto;
		margin-bottom:25px;
}

/* TABLET/NETBOOK SIZE */
@media only screen and (min-width: 768px) {

	p {
		column-count: 2;
	}
}


/* DESKTOP SIZE */
@media only screen and (min-width: 992px) {

	p {
		column-count: 3;
	}
}

/* LARGE VIEWING SIZE */
@media only screen and (min-width: 1200px) {

	p {
		column-count: 4;
	}
}


/* RETINA (2x RESOLUTION DEVICES) */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {

}

/* iPHONE 5-13 MEDIA QUERY */
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) { 

}

/* PRINT STYLESHEET */
@media print {

}