/* RESET browser styles----------------------------------------*/
html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, em, img, small, strong, sub, sup, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/* end reset browser styles */

/*  TYPOGRAPHY   ============================================================================= */

@font-face {
    font-family: 'robotobold';
    src: url('roboto-bold-webfont.eot');
    src: url('roboto-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('roboto-bold-webfont.woff2') format('woff2'),
         url('roboto-bold-webfont.woff') format('woff'),
         url('roboto-bold-webfont.ttf') format('truetype'),
         url('roboto-bold-webfont.svg#robotobold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_condensedregular';
    src: url('robotocondensed-regular-webfont.eot');
    src: url('robotocondensed-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('robotocondensed-regular-webfont.woff2') format('woff2'),
         url('robotocondensed-regular-webfont.woff') format('woff'),
         url('robotocondensed-regular-webfont.ttf') format('truetype'),
         url('robotocondensed-regular-webfont.svg#roboto_condensedregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_condenseditalic';
    src: url('robotocondensed-italic-webfont.eot');
    src: url('robotocondensed-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('robotocondensed-italic-webfont.woff2') format('woff2'),
         url('robotocondensed-italic-webfont.woff') format('woff'),
         url('robotocondensed-italic-webfont.ttf') format('truetype'),
         url('robotocondensed-italic-webfont.svg#roboto_condenseditalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'robotoregular';
    src: url('roboto-regular-webfont.eot');
    src: url('roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('roboto-regular-webfont.woff2') format('woff2'),
         url('roboto-regular-webfont.woff') format('woff'),
         url('roboto-regular-webfont.ttf') format('truetype'),
         url('roboto-regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'stationmedium';
    src: url('station-webfont.eot');
    src: url('station-webfont.eot?#iefix') format('embedded-opentype'),
         url('station-webfont.woff2') format('woff2'),
         url('station-webfont.woff') format('woff'),
         url('station-webfont.ttf') format('truetype'),
         url('station-webfont.svg#stationmedium') format('svg');
    font-weight: normal;
    font-style: normal;
}
h1{
	font-size: 2.1em;
	margin-bottom: .2em;
	font-family: 'stationmedium', arial, Helvetica, sans-serif;
	line-height: 1em;
	letter-spacing: -.01em;
	color: #00CCFF;
}
h1.calendar {
	width: 100%;
	height: auto;
	padding-left: 1.1em;
	line-height: 1.2em;
	background: url("../images/calendar.svg") no-repeat;
	background-position: left top;
	background-size: auto 80%;
}
h2 {
	font-size: 1.8em;
	font-family: 'stationmedium', arial, Helvetica, sans-serif;
	line-height: 1em;
	margin: 0;
	letter-spacing: -.01em;
	padding: .3em 0em .2em 0em;
	color: #6666FF;
}
h3 {
	font-size: 1.4em;
	font-family: 'stationmedium', arial, Helvetica, sans-serif;
	line-height: 1em;
	margin: 0;
	padding: .3em 0em .2em 0em;
	color: #6666FF;
}
h4 {
	font-size: 1.2em;
	font-family: 'roboto_condensedregular', arial, Helvetica, sans-serif;
	line-height: 1em;
	margin: 0;
	padding: .3em 0em .2em 0em;
	color:  #FF1A1A;
}
p {
	font-family: 'robotoregular', Arial, Helvetica, sans-serif;
	line-height: 1.15em;
	font-size: 1.25em;
	padding-bottom: .7em;
}
p.error, p.success {
		font-weight: bold;
		padding: 10px;
		border: 1px solid;
		}
		p.error {
		background: #ffc0c0;
		color: #900;
		}
		p.success {
		background: #b3ff69;
		color: #4fa000;
}


.nospace{
	padding-bottom: .1em;
}
.blockquote p {
	font-family: 'roboto_condenseditalic', Arial, Helvetica, sans-serif;
	font-size: 1.1em;
}
.small {
	font-size: .9em;
	line-height: 1.1em;
	margin-top: .5em;
	padding-top: .2em;
	border-top: 1px solid #9999FF;
}
.medium {
	font-size: 1.1em;
	padding-bottom: .3em;
}
.spaceabove {
	margin-top: .5em;
}
.clearleft {
	clear: left; /* makes the h2 clear the nav divs*/
}
.clearright {
	clear: right; 
}
.blue {
	color: #00CCFF;
}
.purple {
	color: #6666FF;
	}
.red {
	color: #FF1A1A;
}
.green {
	color: #00FFCC;
}
ul.bullet {
	font-family: 'robotoregular', Arial, Helvetica, sans-serif;
	line-height: 1.15em;
	font-size: 1.25em;
	padding-bottom: .7em;
}
 ul.bullet li {
	padding-bottom: .3em;
	list-style:none;
	margin-left: 1em;
}
 ul.bullet li:before {
	color: #6666FF;
	content: "\2022";
	font-size: 1.3em;
	padding-right: .2em;
	position: relative;
	top: .15em;
	margin-left: -.5em;
}
p + ul {
	margin-top: -.4em;
}
a {
	color: #0099FF;
	text-decoration: underline;
}
a:hover {
	text-decoration: underline; 
	background-color: #E7D9FF;
	color: #000000;
}
a.logo {
	text-decoration: none;
}
a:hover.logo  {  
	text-decoration: none;  /* turns off hover effect in logo home link============ */
	background-color: transparent;
}
a.button {
  	display:inline-block;
	width: 6em;
	padding: .5em .03em;
	border: 2px solid #6666FF;
	margin-top: .5em;
	border-radius: 6px;
	background-color: #EEFFFF;
	font-family: 'roboto_condensedregular', Arial, Helvetica, sans-serif;
	font-size: 1.15em;
	text-align: center;
	text-decoration:none;
}
a.button:hover {
	background-color: #E7D9FF;
	text-decoration:none;
}
a.buttonlarge {
  	display:inline-block;
	width: 12em;
	padding: .5em .03em;
	border: 2px solid #6666FF;
	margin-top: .5em;
	border-radius: 6px;
	background-color: #EEFFFF;
	font-family: 'roboto_condensedregular', Arial, Helvetica, sans-serif;
	color: black;
	font-size: 1.3em;
	text-align: center;
	text-decoration:none;
}
a.buttonlarge:hover {
	background-color: #E7D9FF;
	text-decoration:none;
}

.home-tag {
	display: block;
	width: 5em;
	padding: .03em .01em;
	border: 1px solid #6666FF;
	margin-top: .5em;
	border-radius: 6px;
	background-color: #FFFFFF;
	font-family: 'roboto_condensedregular', Arial, Helvetica, sans-serif;
	font-size: 1em;
	text-align: center;
	text-decoration:none;
}
.home-tag:hover {
	background-color: #E7D9FF;
	text-decoration:none;
}

/* FORM STYLES ==================================================================== */
.form-group-container {
  display: grid;
  gap: 1rem;
  margin-top: .5rem;
    font-family: 'roboto_condensed', Arial, Helvetica, sans-serif;
    font-size: 1.0831rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-label {
  margin-bottom: 0.5rem;
    
    font-weight: bold;
}

.form-input,
.form-textarea {
  padding: 0.5rem;
  border: 1px solid #6b7280;
  display: flex;
  height: 2.5rem;
  width: 100%;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.form-input::placeholder,
.form-textarea:focus-visible {
  color: #6b7280;
}


.form-input:focus-visible,
.form-textarea:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.form-textarea {
  min-height: 120px;
}

.checkbox input,.checkbox label{
	display:inline-block;
	vertical-align:middle;	
   margin-bottom:10px
}

input[type="checkbox"] {
            width: 25px;
            height: 25px;
        }

.form-submit {
  width: 100%;
  margin-top: 1.2rem;
  background-color: #DBF7FF;
 font-size: 1.0831rem;
  padding: 13px 5px;
  border-radius: 0.375rem;
cursor: pointer;
}

.form-submit:hover {
  background-color: #E9DEFF;
}
/*  MAIN SECTIONS  ============================================================================= */
html {
	max-width: 1400px;
}
.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 225px;
	height: 100%;
	margin: 0em .5em;
	padding: 0em 1em;
}
.logo {
	width: 100%;
	height: auto;
	border-bottom: 1px solid #00CCFF;
}
.nav {
	width: 100%;
	margin: 0 0 .6em 0;
}
.nav ul {
	font-family: 'roboto_condensedregular', Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style-type: none;
}
.nav li {
	margin: 0 0 .3em 0;
	text-indent: 15px;
}
.nav a {
	display: block;
	width: 100%;
	color: #000000;
	background-color: #FFFFFF;
	text-decoration: none;
	padding: 0.3em 0.2em;
	border-radius: 6px;
}
.nav a:hover {
	background-color: #DBF7FF;
}
.nav a.purple {
	border: 2px #6666FF solid;
	}
.nav a.pink {
	border: 2px #FF66CC solid;
	}
.nav a.blue {
	border: 2px #00CCFF solid;
	}
.nav a.red {
	border: 2px solid #FF1A1A;
}
.nav a.green {
	border: 2px #00FFCC solid;
	}
.nav-top-logo {
	width: 100%;
	padding-bottom:78.0268%; /* responsive hack to make image visible height/width x 100*/
	margin-top: 0;
	margin-bottom: 0;
	background-position: center center;
	background-size: 80% 80%;
	background-image: url('../images/mi-logo-vertical.svg');
	background-repeat: no-repeat;
}
.nav-bottom-logo {
	width: 100%;
	padding-bottom:59.46745%; /* responsive hack to make image visible height/width x 100*/
	margin-top: .5em;
	background-position: center center;
	background-size: 80% 80%;
	background-image: url('../images/kerrcreative-logo.svg');
	background-repeat: no-repeat;
}
.wrapper {
	margin: .4em;
	padding-left: 225px;
	overflow: hidden; /* this makes the background color show if you want a color*/
}
wrapper-coding {
	margin: .8em;
	padding: 1em;
	overflow: hidden; /* this makes the background color show if you want a color*/
}

.main {
	float: left;
	width: 100%;
	margin-left: .2em;
}
.footer-wrap {
	float: left;
	width: 100%;
	margin-left: .2em;
}
.blockquote {
	background-position: left top;
	background-size: 80% auto;
	width: 100%;
	margin: 0 0 .5em 0;
	padding: .5em;
	border: .063em solid #00CCFF;
	border-radius: 6px;
	background-color: #E3FFFA;
}
.div-icon {
	float: left; /* the use-lots-of-divs to get an icon to work approach*/
	width: 40px;
	height: auto;
}
.div-text {
	float: left;
	width: 60%;
	height: auto;
	padding-top: .5em;
	padding-left: .4em;
}
/*  IMAGES   ============================================================================= */
img {max-width: 100%; 
	width: 100%;
	height: auto;
}
/*  GROUPING  ============================================================================= */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
	overflow: hidden;
}
.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}

/*  GRID COLUMN SETUP   ==================================================================== */
.col {
	display: block;
	float: left;
	margin: 0 0 1% 1.3%;
	padding: 1em;
	text-align: left;
	border-radius: 6px;
	border: .063em #00FFCC solid;
	background-color: #F4F4F4;
	min-height: 1px; /* keeps empty div from collapsing */
}
.nested {
	margin: 0 0 0 1%;
	padding: 0em .5em 0em .5em;
	border: none;
	background-color: #E1F9FF;
}
.footer {
	border: .063em solid #9999FF;
	background-color: #E1F9FF;
}
.white {
	background-color: #FFFFFF;
}
.none {
	background-color: #F4F4F4;
}
.spark-resize {
	width: 100%;
	height: auto;
	margin: 0 auto;
}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */

/* FOOTER has to be below col div or background color gets overridden================ */
.footer-menu {
	float: left;
	width: 100%;
}
.footer-img {
	width: 75%;
	float: right;
	margin-top: .2em;
	margin-bottom: .6em;
}
.borderbottom{
	 border-bottom: 1px solid #9999FF;
	 padding-bottom:.5em;
}


/*  GRIDs   ============================================================================= */
.span_1_of_1 {
	width: 99.5%;
}
.span_2_of_2 {
	width: 99%;
}
.span_1_of_2 {
	width: 49.1%;
}
.span_3_of_3 {
	width: 100%; 
}
.span_2_of_3 {
	width: 66.0%; 
}
.span_1_of_3 {
	width: 32.26%;
}
.span_4_of_4 {
	width: 100%; 
}
.span_3_of_4 {
	width: 74.6%; 
}
.span_2_of_4 {
	width: 49.2%; 
}
.span_1_of_4 {
	width: 23.8%; 
}

/*  LARGE WIDTH 1000 PIXELS  ======================================================================*/
@media only screen and (min-width: 1001px) {
.logo {
	display: none;
}
.footer-menu {
	display: none;
}
.footer-logo {
	display: none;
}

}  /*--end tag for media query*/


/*  MEDIUM WIDTH 641 PIXELS TO 1000 PIXELS  ======================================================*/
@media only screen and (min-width: 641px) and (max-width: 1000px) {
.header {
	position: static;	
	width: auto;
	height: 100%;
	margin: .2em .5em;
}
.logo {
	float: left;
	width: 100%;
}
.nav {
	float: left;
	width: 100%;
	margin-top: 1em;
}
.nav ul {
	text-align: center;
	list-style-type:none;
}
.nav li {
	display: inline-block;
	margin: 0 .2em .3em 0;
	text-indent: 0;
}
.nav a {
	display: block;
	color: #000000;
	text-decoration: none;
	border: none;
	padding: 0.3em 0.2em;
	margin-right: 2px;
}
.nav-top-logo {
	display: none;
	width: 100%;
	padding-bottom:0; 
	border:none;
	margin-top: 0;
	background-position: center center;
	background-size: 0;
	background-repeat: no-repeat;
}
.nav-bottom-logo {
	display: none;
	width: 100%;
	padding-bottom:0; 
	border:none;
	margin-top: 0;
	background-position: center center;
	background-size: 0;
	background-repeat: no-repeat;
}
.home-tag {
	display: none;
}
.wrapper {
	margin: .4em;
	padding-left: 0px;
	width: auto;
}
h1{
	font-size: 1.9em;
	padding: 0 0 .1em 0;
	margin-bottom: .1em;
}
h2 {
	font-size: 1.5em;
}
p {
	line-height: 1.3em;
	font-size: 1.1em;
	padding-bottom: .5em;
}
.medium {
	font-size: 1em;
	padding-bottom: .3em;
}
ul.bullet {
	line-height: 1.3em;
	font-size: 1.1em;
	padding-bottom: .5em;
}
 ul.bullet li {
	padding-bottom: .3em;
}
p + ul {
	margin-top: -.2em;
}

} /*--end tag for media query*/

/*  SMALL WIDTH LESS THAN 640 PIXELS  ============================================================= */
@media only screen and (max-width: 640px) {
.span_2_of_2 {
	width: 100%; 
}
.span_1_of_2 {
	width: 100%; 
}
.span_3_of_3 {
	width: 100%; 
}
.span_2_of_3 {
	width: 100%; 
}
.span_1_of_3 {
	width: 100%;
}
.span_4_of_4 {
	width: 100%; 
}
.span_3_of_4 {
	width: 100%; 
}
.span_2_of_4 {
	width: 100%; 
}
.span_1_of_4 {
	width: 100%; 
}
.wrapper {
	margin: .4em;
	padding-left: 0px;
	width: auto;
}
.main {
	float: left;
	width: 100%;
	margin: 0;
}
.footer-wrap {
	float: left;
	width: 100%;
	margin: 0;
}
.col { 
	margin: 1% 0 1% 0%;
	padding: 1em .5em;
}
.nested {
	margin: 1% 0 1% 0%;
	padding: 0em .5em 0em .5em;
	border: none;
	background-color: #E1F9FF;
}
.header {
	position: static;
	width:auto;
	height: auto;
	margin: .2em .5em;
	padding: 0em 0em;
	}
.logo {
	float: left;
	width: 100%;
	}
.nav {
	float: left;
	width: 100%;
	margin-top: .5em;
}
.nav ul {
	text-align: center;
	font-size: 1em;
}
.nav li {
	display: inline-block;
	margin: 0 .2em .3em 0;
	text-indent: 0;
}
.nav a {
	display: block;
	color: #000000;
	text-decoration: none;
	border: none;
	padding: 0.3em 0.2em;
	margin-right: 2px;
}
.nav-top-logo {
	display: none;
	width: 100%;
	padding-bottom:0; 
	border:none;
	margin-top: 0;
}
.nav-bottom-logo {
	display: none;
	width: 100%;
	padding-bottom:0; 
	border:none;
	margin-top: 0;
}
.home-tag {
	display: none;
}
.spark-resize {
	width: 60%;
	height: auto;
}
h1{
	font-size: 1.7em;
	padding: 0 0 .1em 0;
	margin-bottom: .1em;
}
h2 {
	font-size: 1.5em;
}
h3, h4 {
	font-size: 1.2em;
}
p {
	line-height: 1.4em;
	font-size: 1em;
	padding-bottom: .5em;
}
.medium {
	font-size: 1em;
	padding-bottom: .3em;
}
ul.bullet {
	line-height: 1.4em;
	font-size: 1em;
	padding-bottom: .3em;
}
 ul.bullet li {
	padding-bottom: .3em;
}
.block-text {
	font-size: 1em;
}

} /*--end tag for media query*/