﻿/* 1em = 16px */
* {box-sizing: border-box;}
body {margin:0px; line-height:1.42em;padding-bottom:155px;background-color:white;font-size:100%;font-family:Verdana,Geneva,sans-serif}
html, body{position:relative;height:100%;}
main{max-width:75em;margin:auto;background-color:white;line-height:1.5em;min-height:100%}
footer{background-color:#9b6ec8;color:white;height:auto;padding:10px}
figure{margin:10px}
h1,h2,h3,{font-weight:normal}
/*img:hover {z-index: 10;box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.75);}*/
/*
.wrap {display:grid; grid-template-rows:auto; width:100%; grid-template-columns:repeat(1,1fr); grid-gap:10px;}
*/
/*flexbox*/
.flxcon{display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.flxcol{flex:1 1 0px;padding:10px}
.flx-alce{align-items:center; justify-content: center;}

[class*="flxcol-"] {padding:10px;}	
/*padding & margins*/
.fr{border-radius: 7pt;border: 1px solid #000000;background-color:rgba(0, 150, 136, 0.05)}
.pa{padding:5px}
.pa10{padding:10px}
.ma10{margin:10px}
.mato0{margin-top:0px}
.mafr{margin:auto;min-height:100%;}
.ma{margin:auto;text-align:center}
.bord1{border-right:thin black solid;background-color:#505050;color:white;}
/*buttons*/
.button{border:none;padding:10px;text-align:center;display:inline-block;font-size:1em;}
.button1{border:2px solid blue;border-radius:12px;transition-duration:0.4s;cursor:pointer;width:100%;margin-bottom:5px}
.button1:hover{background-color:blue;color:white;}
.button2{margin-bottom:2px;margin-top:5px;border:1px solid purple;transition-duration:0.4s;cursor:pointer;width:100%;background-color:white}
.button2:hover{background-color:silver;border:1px solid gray;color:white}
/*links*/
a:link {color:white;text-decoration:none;}
a:visited{color:white;text-decoration:none;}
a:hover{color:red;text-decoration:underline;}
a:active{color:white;text-decoration:none;}
/*font style*/
.it{font-style:italic}
.cent{text-align:center;font:italic normal 1.2em}
.mid{text-align:center;}
.myh1 {color:#4E626D;}
.ph{text-align:center;color:#4e626d}
.f1{line-height:1.4em;font-size:1em}
.left{text-align:left}
.bld{font-weight:bold;}
/*image*/

.thumb{border:1px solid black;text-align:center;padding:10px;display:block;margin:auto}
.headimg{text-align:center;display:block;margin:auto}
.image{max-width:100%;height:auto}
.bder{border:1px black solid;padding:10px}
.imwi{width:100%}
.rounded-img {border-radius: 16px;}

/*misc*/
.tred{color:#990000}
.tgrn{color:#2a8f4f}
.gjs{justify-self:center;}	/* grid center*/
.inpbox{width:100%;font-size:1.25em}
.row{width:100%;}
.row:after{content:"";clear:both;display:block;}
.dibl{margin:auto;display:block}
.clearfix {overflow:auto;}/*enables text to flow around image, put float left/right in ad class*/
.slidethumb{margin:auto;display:block}
/*nav*/
ul.topnav {list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:#9b6ec8;border-top:1px black solid;border-bottom:1px black solid}
ul.topnav li {float: left;}
ul.topnav li a {display:inline-block;color:black;text-align:center;padding:12px 14px;text-decoration:none;transition:0.3s;font-family: Verdana, Geneva, sans-serif;font-size:1.2em}
ul.topnav li a:hover {background-color:white;}
ul.topnav li.icon {display: none;}

/* mobile small screens */
@media screen and (max-width:599px) {
ul.topnav li:not(:first-child) {display:none;}
ul.topnav li.icon {float:left;display:inline-block;}
/*new*/
ul.topnav{background-color:#aa97bd}
/*
ul.topnav li a {color:black;/*changed from white*/
/*
font-family: Verdana, Geneva, sans-serif; font-size:1.2em;
*/
}
@media screen and (max-width:599px) {
ul.topnav.responsive {position:relative}
/*ul.topnav.responsive li.icon {position:absolute;right:0;top:0}*/
ul.topnav.responsive li {float:none;display:inline;}
ul.topnav.responsive li a {display:block;text-align:left;}
}
@media screen and (max-width: 599px) {
h1 {font-size:1.2em;line-height:1.4em;margin:5px}
h2 {font-size:1.25em;line-height: 1.4em;color:#4e626d;}
h3 {font-size: 1em;line-height:1.25em;color:#4e626d}
footer{font-size:0.9em}

.message-box {width: 90%;padding: 20px;}
.message-box h1 {font-size: 1.5em;}
.message-box p, .message-box a {font-size: 1em;}

/* Order utilities */
.ord1 { order: 1; }
.ord2 { order: 2; }
.ord3 { order: 3; }
.ord4 { order: 4; }
/*
.gr1{display:grid;grid-template-columns:1fr;grid-gap:10px;}
*/

/*[class*="flxcol-"] {padding:10px;}*/
.flxcol-0s{display:none;}
.flxcol-1s{flex:1 1 8.33%;}
.flxcol-2s{flex:1 1 16.66%;}
.flxcol-3s{flex:1 1 25%;}
.flxcol-4s{flex:1 1 33.33%;}
.flxcol-5s{flex:1 1 41.66%;}
.flxcol-6s{flex:1 1 50%;}
.flxcol-7s{flex:1 1 58.33%;}
.flxcol-8s{flex:1 1 66.66%;}
.flxcol-9s{flex:1 1 75%;}
.flxcol-10s{flex:1 1 83.33%;}
.flxcol-11s{flex:1 1 91.66%;}
.flxcol-12s{flex:1 1 100%;}
.imgtxtr{padding:10px;max-width:100%;margin:auto;display:block}
.imgtxtl{padding:10px;max-width:100%;margin:auto;display:block}
.foth{font-size:large}
}
/* tablets medium screens */
@media (min-width: 600px) and (max-width: 799px) {
h1 {font-size:2.5em;line-height:1.4em;padding:5px;}
h2 {font-size:1.5em;line-height: 1.4em;color:#4e626d;}
h3 {font-size: 1.25em;line-height:1.25em;}
footer{font-size:1em}
/*[class*="flxcol-"] {padding:10px;}*/
.flxcol-0m{display:none;}
.flxcol-1m{flex:1 1 8.33%;}
.flxcol-2m{flex:1 1 16.66%;}
.flxcol-3m{flex:1 1 25%;}
.flxcol-4m{flex:1 1 33.33%;}
.flxcol-5m{flex:1 1 41.66%;}
.flxcol-6m{flex:1 1 50%;}
.flxcol-7m{flex:1 1 58.33%;}
.flxcol-8m{flex:1 1 66.66%;}
.flxcol-9m{flex:1 1 75%;}
.flxcol-10m{flex:1 1 83.33%;}
.flxcol-11m{flex:1 1 91.66%;}
.flxcol-12m{flex:1 1 100%;}
.foth{font-size:x-large}
.imgtxtr{padding:10px;max-width:100%;margin:auto;display:block}
.imgtxtl{padding:10px;max-width:100%;margin:auto;display:block}
.le{text-align:right}
.myh1 {font-size:1.75em;margin:20px;line-height:1.25em}
}
/* desktop large screens */
@media (min-width: 800px) {
/* Order utilities */
.ord1 { order: 1; }
.ord2 { order: 2; }
.ord3 { order: 4; }
.ord4 { order: 3; }

h1 {font-size:2.5em;line-height:1.4em;padding:5px;}
h2 {font-size:1.5em;line-height: 1.4em;color:#4e626d;}
h3 {font-size: 1.25em;line-height:1.25em;color:#4e626d;}
h4{font-size:1.8em;line-height:1.6;color:white}
footer{font-size:1.25em}
.imgtxtr{float:right;margin:10px 15px 10px 15px}
.imgtxtl{float:left;margin:0 15px 10px 15px;}
.le{text-align:right}
.myh1 {font-size:2em;margin:30px;line-height:1em}
.container{max-width:1200px;margin:auto;}
.ph{text-align:center;color:#252626;font-style:italic;font-size:1.5em}
.foth{font-size:xx-large;line-height:1.5em}
 /*[class*="flxcol-"] {padding:10px;}*/
.flxcol-0l{display:none;}
.flxcol-1l{flex:1 1 8.33%;}
.flxcol-2l{flex:1 1 16.66%;}
.flxcol-3l{flex:1 1 25%;}
.flxcol-4l{flex:1 1 33.33%;}
.flxcol-5l{flex:1 1 41.66%;}
.flxcol-6l{flex:1 1 50%;}
.flxcol-7l{flex:1 1 58.33%;}
.flxcol-8l{flex:1 1 66.66%;}
.flxcol-9l{flex:1 1 75%;}
.flxcol-10l{flex:1 1 83.33%;}
.flxcol-11l{flex:1 1 91.66%;}
.flxcol-12l{flex:1 1 100%;}    

.f1{line-height:1.5em;font-size:1.4em}
}

/*.wrap{grid-template-columns:repeat(12, 1fr);}*/

/* IE10+ CSS styles go here 
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
{
.flxcon{width:100%;}
}
*/

