﻿/* 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:darkslategrey;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 #990000;transition-duration:0.4s;cursor:pointer;width:100%;background-color:ivory}
.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}
.bld{font-weight:bold;}
/*image*/
.thumb{border:1px solid black;text-align:center;padding:10px;display:block;margin:auto}
.headimg{text-align:center;padding:10px;display:block;margin:auto}
.image{max-width:100%;height:auto}
.bder{border:1px black solid;padding:10px}
.imwi{width:100%}
/*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:#F5F5F5;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-size:1em}
ul.topnav li a:hover {background-color:red;}
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:#efeded}
ul.topnav li a {color:black;}
}
@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}

.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%;}
.ord1{order:1}
.ord2{order:2}
.ord3{order:3}
.o1{order:1}
.o2{order:2}
.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}
.o1{order:1}
.o2{order:2}

.f1{line-height:1.5em;font-size:1.25em}
.wrap{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:10px;
grid-template-areas:
"head head"
"pic0 pic0"
"txt0 txt0"
"pic1 txt1"
"txt2 pic2"
"pic3 pic3"
"txt3 txt3"
"pic4 pic4"
"txt4 txt4"
"pic5 pic5"
"txt5 txt5";
}
.box1 {grid-area: head;}
.p0 {grid-area: pic0;}
.p1 {grid-area: pic1;}
.p2 {grid-area: pic2;}
.p3 {grid-area: pic3;}
.p4 {grid-area: pic4;}
.p5 {grid-area: pic5;}

.t0 {grid-area: txt0;}
.t1 {grid-area: txt1;}
.t2 {grid-area: txt2;}
.t3 {grid-area: txt3;}
.t4 {grid-area: txt4;}
.t5 {grid-area: txt5;}
}
/* desktop large screens */
@media (min-width: 800px) {
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;background-color:white}
.ph{text-align:center;color:#252626;font-style:italic;font-size:1.5em}
.foth{font-size:xx-large;line-height:1.5em}
.o1{order:1}
.o2{order:2}
/*[class*="flxcol-"] {padding:10px;}*/
.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);}*/

.wrap{
display:grid;grid-gap:10px;grid-template-rows:auto;
grid-template-columns:repeat(12, 1fr);
grid-template-areas:
"head pic0 pic0 pic0 pic0 pic0 pic0 pic1 pic1 pic1 pic1 pic1"
"head txt0 txt0 txt0 txt0 txt0 txt0 txt1 txt1 txt1 txt1 txt1"
"pic2 pic2 pic2 pic2 pic3 pic3 pic3 pic3 pic3 pic3 pic3 pic3"
"txt2 txt2 txt2 txt2 txt3 txt3 txt3 txt3 txt3 txt3 txt3 txt3"
"pic4 pic4 pic4 pic4 pic4 pic4 txt4 txt4 txt4 txt4 txt4 txt4"
"pic5 pic5 pic5 pic5 pic5 pic5 pic5 pic5 pic5 pic5 pic5 pic5"
"txt5 txt5 txt5 txt5 txt5 txt5 txt5 txt5 txt5 txt5 txt5 txt5";
}
.box1 {grid-area: head;}
.p0 {grid-area: pic0;}
.p1 {grid-area: pic1;}
.p2 {grid-area: pic2;}
.p3 {grid-area: pic3;}
.p4 {grid-area: pic4;}
.p5 {grid-area: pic5;}

.t0 {grid-area: txt0;}
.t1 {grid-area: txt1;}
.t2 {grid-area: txt2;}
.t3 {grid-area: txt3;}
.t4 {grid-area: txt4;}
.t5 {grid-area: txt5;}
}/*media*/

/* IE10+ CSS styles go here */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
{
.flxcon{width:100%;}
}

}