:root {
    /* Default to 1vw = 1% of the viewport width */
        --pagemax: 1200px;
        --minfont: 13.5px;
        --minmrg: 10px;
        --minminfont: 12px;
        --mvw: 1vw;
}

@media (min-width: 1201px) {
	:root { --mvw: calc(12px); }
}

*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html { 
	padding:0px;
  	margin:0px;
	font-size: 16px;
/*
    10px = 0.625rem
    12px = 0.75rem
    14px = 0.875rem
    16px = 1rem (base)
    18px = 1.125rem
    20px = 1.25rem
    24px = 1.5rem
    30px = 1.875rem
    32px = 2rem
*/

	}

body {
	margin: 0; /* Prevent white edges */
	min-height: 100vh; /* Full viewport height */
/*	background: linear-gradient(to bottom, #496392, #A8C3DF); */
	background: linear-gradient(to bottom, #7a83b2, #c8e2fF);
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
  	font-size: 100%;	/* 14px;*/
	line-height: 22px;	/* 20px;*/
	color: #414141;
	padding: 0;
  	margin: 0;
	text-align: center;
	}

img {
	border: 0;
	width: 100%;
	display: block;
	}

a {
	color: #2200CC;
	text-decoration: underline;
	}

a:visited {
	color: #551A8B;
	text-decoration: underline;
	}

a:hover {
	color: #00116D;
	background-color: #C1C7E7;
	text-decoration: underline;
	}

h1 {
	color: #525B8C; /*#7D83A4;*/
	font-size: 1.8em;
	line-height: 1.2em;
	text-align: left;
	}

h2 {
	color: #525B8C; /* #888888; */
	margin-bottom: 0;
	padding-bottom: 0;
	line-height: 1.125;
	}

h2 a {
	color: #888888;
	text-decoration: underline;
	}

h2 a:visited {
	color: #888888;
	text-decoration: underline;
	}

h2 a:hover {
	color: #1F2B6D;
	background-color: #C1C7E7;
	text-decoration: underline;
	}

#container {
	padding: 0;
	margin: 0;
	width: 100%;
	/* background-color: #ffffff;*/
	overflow: hidden;
	text-align: center;
	}

#header-container,
#main-container,
#footer-container {
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	max-width: 1160px;
	padding-left: 1rem;
	padding-right: 1rem;
}
#main-container {
	padding-top: 1em;
	padding-bottom: 1em;
	}
.floatright {
	float: right;
	margin: 0 1em .3em 1em;
	}
.floatleft {
	float: left;
	margin: 0 1.4em .3em 0;
	}
.photo {
	padding: 0;
	margin: 0;
	}
.caption {
	font-size: .9em;
	padding: 0;
	margin: 0;
	text-align: right;

	}
/* HEADER ======================== */
header {
	padding: 0;
}

/* JMI ======================== */
#menu_pupmnu {
	float: left;
	margin-top: 1rem;
	width: 2rem;
	height: auto;
}
/* NAV ======================== */
nav {
	text-align: center;
	padding: 0;
	font-size: 1rem;
	color: #000000;
	padding-top: 8px;
	}

nav ul {
	list-style: none;
	margin: 0 0 0 3%;
	padding: 0;
	text-align: center;
	}
nav ul li {
	display: inline-block;
	margin-right: 0;
	line-height: 1;
	vertical-align: middle;
	white-space: nowrap;
	font-size: .9rem
	}
nav ul li img#logo {
	width: 20rem;
	height: auto;
	display: inline-block;
	}
nav ul li:not(:first-child) {
    margin-left: 2.36859rem;
}

nav ul li a {
	text-decoration: none;
	}
nav ul li a:hover {
	color: #990000;
	background: inherit;
	text-decoration: none;
	}

main {
	text-align: center;
	/*background: #ffffff;*/
	overflow: hidden;
	/*border-left:2px solid #C1C7E7;*/
	min-height: 60vh;
	}
main p {
	}

footer {
	max-height: 900px;
	background: url("../images/waterripples.jpg") no-repeat left top / cover #fff;
	opacity: .6;
	clear: both;
	padding-top: 8px;
	padding-bottom: 8px;
	}
footer p.copyright {
	text-align: center;
	margin: 0; 
	padding: 0; 
	color: #1F2B6D;
	font-size: .9em;
	}
footer p.address { 
	text-align: center;
	margin: 0; 
	padding: 0; 
	font-size: .9em;
	}

footer h2 {
	font-size: 1rem;
	text-transform: uppercase;
	}
footer ul {
	padding: 0;
	}
footer ul li {
	font-size: .85rem;
	display: block;
	list-style-image: none;
	list-style-position: outside;
	margin: .5rem 0 0 .25rem;
	}

.twocolbox {
  display: flex;
  flex-wrap: wrap;          /* allow wrapping instead of fixed breakpoint */
  /* gap: 1rem; */                  /* space between columns */
  align-items: stretch;      /* equal heights */
}

.twocolcol {
  flex: 1 1 400px;           /* target ~400px min width per column */
  min-width: 0;              /* prevent overflow from long content */
/*  padding: 1rem; */
}

.twocolbox-fixed {
  display: flex;
  flex-wrap: nowrap;          /* allow wrapping instead of fixed breakpoint */
  /* gap: 1rem; */                  /* space between columns */
  align-items: stretch;      /* equal heights */
}

.twocolcol-fixed {
  flex: 1 1 0;           /* target ~400px min width per column */
  min-width: 0;              /* prevent overflow from long content */
/*  padding: 1rem; */
}

.twocolbox-3-1 {
  display: flex;
  gap: 1rem;               /* space between columns */
  align-items: stretch;    /* equal heights */
}

.twocolcol-left {
  flex: 3 1 0;             /* Grow 2 parts */
  min-width: 0;              /* prevent overflow from long content */
}
.twocolcol-right {
  flex: 1 1 0;             /* Grow 1 part */
  min-width: 0;              /* prevent overflow from long content */
}

@media (max-width: 831px) {
  .twocolbox-3-1 {
    flex-direction: column;
  }
}

/****************** GRIDBY4 GRIDBY3 GRIDBY2 ****************/
.gridby6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)); 
    gap: 10px; /* Space between items */
    padding: 10px; /* Padding around the grid */
}
@media (max-width: 825px) { 
    .gridby6 {
	grid-template-columns: repeat(5, minmax(0, 1fr)); 
	}
}

@media (max-width: 640px) {
    .gridby6 {
	grid-template-columns: repeat(4, minmax(0, 1fr)); 
	}
}	
@media (max-width: 492px) {
    .gridby6 {
	grid-template-columns: repeat(3, minmax(0, 1fr)); 
	}
}	
@media (max-width: 413px) {
    .gridby6 {
	grid-template-columns: repeat(2, minmax(0, 1fr)); 
	}
}	

.gridby4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 10px;
}
@media (max-width: 640px) {
   .gridby4 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.gridby3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 10px;
}
.gridby3 .relateditem,
.gridby3 .secsub50 {
	width:100%;
	margin: 0;
	}
.gridby3only {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 10px;
}
@media (max-width: 640px) {
   .gridby3 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.gridby2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 10px;
}
.gridby2 .relateditem,
.gridby2 .secsub50 {
	width:100%;
	margin: 0;
	}
.gridby2only {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 10px;
}
@media (max-width: 480px) {
   .gridby2 {
	grid-template-columns: repeat(1, minmax(0, 1fr));
	}
}
.gridby1 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
}

form { margin:0; padding:0; display:block;}

.basicform { }

.fieldpair {
		display: block;
		clear: both;
		padding: 3px 20px 3px 20px;
		margin: 0;
		overflow: hidden;
	}

p.fieldname2, 
p.fieldname { 
		clear: left;
		float: left;
		width: 120px;
		text-align: right;
		margin: 0;
		padding: 0;
	}
p.fieldname2 {
		text-align: left;
		padding-left: 30px;
	}


p.fieldinput2,
p.fieldinput { 
		float: left;
		text-align: left;
		padding: 0 0 0 5px;
		margin: 0;
	}
p.fieldinput2 {
		clear: left;
		float: none;
	}

.submitbutton {
	 font-family: Arial, Helvetica, sans-serif;  
	font-size: 10px;
	}

.submitbuttonbig {
	font-family: Arial, Helvetica, sans-serif;  
	font-size: 14px;
	}

.ppadd {
	text-align:center;
	width: 120px;
	}
.ppadd form {
	padding: 0;
	margin: 0;
	}
	
.cartfaq {
	font-size: .8em;
	margin: 0;
	padding: 0;
	}

.cartitem {
	border: 1px dashed;
	margin: 5px;
	padding: 5px;
	width: 240px;	
	float: left;
}

.boxreset {
        margin: 0;
        height: 0;
        padding: 0;
        width: 100%;    /* this is the magic element to fix the h1 clump */
        clear: both;    /* magic element makes box shrink-wrap */
}

.videowrapperouter {
	overflow: hidden;
}
.videowrapper {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        padding-top: 25px;
        height: 0;
	overflow: hidden;
}
.videowrapper object,
.videowrapper embed,
.videowrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}

.pwidth90 {
	width: 90%;
	margin-left: 5%;
	overflow: hidden;
	}

.pwidth30r,
.pwidth40r,
.pwidth50r,
.pwidth30,
.pwidth40,
.pwidth50 {
	margin: 1.5% 1.45% 1% 1.45%;
	float: left;
	overflow: hidden;
	}
.pwidth50r,
.pwidth50 {
	width: 47%;
	}
.pwidth40r,
.pwidth40 {
	width: 37%;
	}
.pwidth30r,
.pwidth30 {
	width: 30%;
	}
.pwidth30r,
.pwidth40r,
.pwidth50r {
	float: right;
	}
/* box are not resized by media query */
.box100 {
	width: 100%;
	position: relative;
	}
.box50 {
	width: 48%;
	position: relative;
	}
.box40 {
	width: 39%;
	position: relative;
	}
.box33 {
	width: 32%;
	position: relative;
	}
	
.centeredline {
	margin-left:10%; 
        padding:0px;
        width: 82%;
        height: 0;
        border-top: 1px solid #006699;
        text-align: center;
	overflow: hidden;
	margin: 10px auto;
	}
button {
	margin-right: 10px;
}

.convline {
	width: 90%;
	margin-left: 5%;
	position: relative;
	overflow: hidden;
	padding: 5px 0 4px;
	border: 1px;
}
.convline .abtn-sm {

}
.convline .convright,
.convline .convleft {
	width: 30%;
	background-size: cover;
	opacity: .2;
	margin-top: 8px;
	}
.convline .convleft {
	float: left;
	background-image: url(../graphics/redline-l.png);
	}
.convline .convright {
	float: right;
	background-image: url(../graphics/redline-r.png);
	}
.convline .convcntr {
	width: 40%;
	text-align: center;
}

.testimonial {
	min-width: 30%;
	padding: 6px 8px;
	margin: 10px 20px;
	background: #f9f9f9;
	border: 1px solid rgba(209, 61, 16, .3);
        border-radius: 8px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
	overflow: hidden;
	}

.testimonial li,
.testimonial p {
	/* margin: 0px 0px .2em 0px; */
	/* font-style: italic; */
	margin-top: 5px;
	margin-bottom: 8px;
	}
.testimonial p.bywho {
	text-align: right;
	font-style: normal;
	margin-bottom: 0;
	margin-top: -7;
	}

.itmform {
	overflow: hidden;
	margin: 10px 0 10px 20px;
}
.itmform p {
	float: left;
	display: block;
	font-size: 1.15em;
	margin:  4px 15px 0 0;
}
.itmform p span {
}
.itmform form {
	float: left;
}

.jmiclsbtn {
		font-size: .75em;
		color: #ff0000;
		position: absolute;
		top: 3px;
		right: 5px;
}

.jmiopnbtn {
		font-size: .75em;
		color: #00ff00;
		position: absolute;
		top: 3px;
		left: 5px;
}


#jmiwrapper h3 {
/*	width: 100%;*/
	}
h3 span.jmitrigger,
p span.jmitrigger,
li span.jmitrigger {
	margin-left: 1em;
	color: #006699;
	font-weight: normal;
	font-size: .85em;
	}

.jmidynowrap {
		overflow: hidden;
}
.jmidiv {
	border: 1px dotted;
	/* padding: 5px 5px 25px 5px;  use something like this is not doing top/right */
	padding: 5px;
	margin: 0px 0px 10px 0px;
}

.price {
	color: #996600;
	font-weight: normal;
	}
.indentme {
	padding-left: 20px;
	}

#contactus {
	position: relative;
	width: 250px;
	height: 194px;
	margin-top: 40px;
	overflow: hidden;
	font-size: .9em;
	}
#contactus img {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: 1;
	}
#contactuslink {
	width: 100%;
	position: absolute;
	color: #000000;
	z-index: 9;
	bottom: 0px;
	}
#contactuslink h2 {
	color: #000000;
	margin-bottom: 0px;
	margin-left: 15px;
	}
#contactuslink p {
	float: right;
	margin-top: 0px;
	margin-bottom: 4px;
	margin-right: 15px;
	text-align: right;
	font-weight: bold;
	}

.rcorner10 {
        border: 1px solid;
        border-radius: 10px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}
/* @media helper classes */
.nodisp480 {
	display: auto;
	overflow: hidden;
	}
.onlydisp480 {
	display: none;
	}
.fullat480 {
	}

.across4 {
        width: 25%;
        float: left;
        padding: 1%;
}
.across4 img {
        margin-top: 5px;
        }
.across3 {
        width: 33%;
        float: left;
        padding: 1%;
}
.across3 img {
        margin-top: 5px;
        }
.across2 {
        width: 50%;
        float: left;
        padding: 1%;
}
.across2 img {
        margin-top: 5px;
        }
@media (max-width: 767px) {
	.across2,
	.across3,
        .across4 {
                width: 60%;
                float: none;
                margin-left: 20%;
                padding: 1% 0;
        }
}
@media (max-width: 640px) {
	.across2,
	.across3,
        .across4 {
                width: 70%;
                float: none;
                margin-left: 15%;
                padding: 1% 0;
        }
}
@media (max-width: 480px) {
	.across2,
	.across3,
        .across4 {
                width: 90%;
                float: none;
                margin-left: 5%;
                padding: 1% 0;
        }
}

.cntrtext {
	text-align: center;
	}

.abtn-sm,
.abtn-med,
.abtn-lg {
        display: table;
        margin-left: auto;
        margin-right: auto;
        }
.abtn-sm a,
.abtn-med a,
.abtn-lg a {
        color: #000000;
        background-color: #ffffff;
        display: inline-block;
        font-weight: bold;
        text-decoration: none !important;
        font-size: 18px;
        line-height: 1.125em;
        text-align: center;
        padding: 4% 8%;
        border: 1px solid rgb(209, 61, 16);
        border-radius: 4px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
        text-decoration: none;
}
.abtn-sm a:hover,
.abtn-med a:hover,
.abtn-lg a:hover {
        border-color: #006699; /* rgb(162, 47, 12);*/
        color: #006699;
}
.abtn-sm a {
        font-size: 12px;
        line-height: 1.125em;
        padding: 2% 4%;
}
.abtn-lg a {
        font-size: 30px;
        line-height: 1.125em;
        padding: 5% 8%;
}
@media (max-width: 480px) {
        .abtn-lg a {
                font-size: 26px;
                line-height: 1.125em;
        }
}
.imgcircle {
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
	}

/* http://madebymike.com.au/writing/precise-control-responsive-typography/
   http://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container */
.vw24 {
        font-size: 2.5vw; /* this is set for 960px container */
	line-height: 1.125em;
}
.vw36 {
        font-size: 3vw; /* this is set for 960px container */
	line-height: 1.125em;
}
@media (min-width: 960px){
        .vw24 {
        font-size: 24px; 
        }
        .vw36 {
        font-size: 36px; 
        }
}
@media (max-width: 767px) { /* Make this match across4 first jump */
        .vw24 {
                font-size: 24px;
        }
        .vw36 {
                font-size: 32px;
        }
}

#mrmsidecontentcontainer {
	position: relative;
	width: 100%;
	/* padding-left: 50px;*/
	min-height: 42px;
}
#mrmsidecontentcontainer {
	position: relative;
	width: 100%;
	min-height: 42px;
}

#mrmsidecontentbtn {
	margin-top: 2px;
	margin-bottom: 2px;
	width: 45px;
	height: 36px;
	display: block;
	float: right;
	background: url("../graphics/mrmbtn-dark.png") no-repeat left top / cover #fff;
	border: 1px solid #000000;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;		
}

#mrmsidecontentbtn.menuon {
	width: 27px;
	height: 22px;
	margin-top: 10px;
	margin-left: 12px;
	background-color: #ff0000;
	/* background: url("../graphics/mrmbtn-light.png") no-repeat left top / cover #000; */
}
#mrmsidecontentguts {
	clear: both;
	}
/* Large desktop min- (greater than or equal to) */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop
greater than or equal to 768px special 800px
less than or equal to 979px */
@media (min-width: 800px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet
less than or equal to 767px special 799 */
@media (max-width:870px) {
	#container {
		width: 100%;
		margin: 0px;
	}
}
@media (max-width: 880px) { }
@media (max-width: 720px) {
	.gwidth25 {
		width: 50%;
	}
	.gwidth100 {
		width: 100%;
	}
 }
@media (max-width: 680px) { }
@media (max-width: 640px) { 
	.nodisp640 {
		display: none;
	}
}

/* Landscape phones and down
less than or equal to 480px */
@media (max-width: 480px) {
	main {
		width: 100%;
		display: block;
	}
	.fullat480 {
		width: 100% !important;
	}
	.nodisp480 {
		display: none;
	}
	.onlydisp480 {
		display: block;
		overflow: hidden;
	}
	#header-container,
	#main-container,
	#footer-container {
		width: 100%;
		padding-left: .5rem;
		padding-right: .5rem;
	}

	.pwidth90,
	.pwidth50,
	.pwidth40,
	.pwidth50r,
	.pwidth40r {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
	.pwidth30,
	.pwidth30r {
		width: 47%;
	}
	#mainpicr,
	#mainpic {
		float: none;
		width: 100%;
		margin: 0px;
	}
	#mainpic2r,
	#mainpic2 {
		width: 48%;
	}
	#rccontent {
		padding: 0 .5% .5% .5%;
	}
	.fieldpair {
		padding: 3px 0px;
	}
	form {
		margin-left: auto;
		margin-right: auto;
	}
	#submitpair .fieldname {
		display: none;
	}
	#submitpair .fieldinput {
	}
	#sidewrap {
		width: 100%;
		float: none;
	}
	#masthead {
		display: inline;
	}
	#masthead img {
        	float: none;
		width: 100%;
        }
	#sidecontent #contactus {
		display: none;
	}
	#mastblock {
		width: 100%;
		float: none;
	}
	#mastblock .underimage {
		text-align: center;
	}
	#mastblock .underimage li {
		float: none;
		display: inline-block;
		margin: 4px 8px;
	}
	#sidecontent li {
		margin: 15px 0;
	}

	#footer-container {
	        width: 100%;
	        padding-top: 8px;
        	padding-left: 5px;
	        margin-left: 0px;
		margin-bottom: 5px;
		overflow: hidden;
	}
	.basicform {
		width: 96%;
		margin-left: 2%;
		margin-right: 0;
		padding: 0;
	}
	.fieldpair {
		width: 100%;
	}
	p.fieldname { 
		width: 100px;
	}
	p.fieldname2 {
		width: 110px;
		padding-left: 10px;
	}
	p.fieldinput2 {
		padding-left: 0px;
		width: 95%;
		margin-left: 2%;
	}
	nav ul li#logoli {
		margin-left: -3rem;
	}

}