/* style.css author Neal*/
/*Start Original CSS*/
BODY {BACKGROUND-COLOR: #F5F5DC;}/* original colorF5F5DC */
.hide { display:none; }
A:hover { color:#FF0000;}
A:link {text-decoration: none;}
img.HoverBorder {border:1px solid blue;}
img.HoverBorder:hover {border:1px solid red;}
.specialist{font-family: times new roman; font-style: italic; font-size:calc(.5em + 1vw);}
.phone{COLOR: #0000FF; font-family: arial; font-style: italic; font-size:calc(.65em + .85vw);}
.body{FONT-FAMILY: arial;}
.phonesmall{COLOR: #FF0000; font-family: arial; font-style: italic; font-size:calc(.75em + 1vw);}
.headernav{COLOR: #993300; font-family: arial; font-style: italic; font-size:calc(.75em + 1vw);}
.contact{color: #780207; font-family: arial; font-style: italic; font-size:calc(1.25em + 1vw); text-align:center;}
.contactred{color: #ff0000; font-family: arial; font-style: italic; font-size:calc(1.25em + 1vw); text-align:center;}
.vpsc{color: #780207; font-family: arial; font-style: italic; font-size:calc(.65em + .85vw); text-align:left;}
.maroon{color: #660000; font-size:cal(.75emm + 1vw);}
.accessheadernumber {COLOR: #993300; FONT-SIZE:1em; FONT-FAMILY: ARIAL; }
.accessheader {COLOR: #993300; FONT-SIZE:1em; FONT-FAMILY: ARIAL; }
.accesssubheader {COLOR: #000000; FONT-SIZE:.75em; FONT-FAMILY: ARIAL; }
.subhead{COLOR: #993300; font-family: arial; font-style: italic; font-size:calc(1em + 1vw);}
.tip {font-size: 1.5em; color:#993333; font-weight: bold; margin-top: 0px; margin-bottom: 3px; text-align: center; font-family:arial; font-style: italic;}
.oldh4 {font-size: .95em; margin-top: 0px; margin-bottom: 3px; text-align: center; font-family:arial; font-style: italic;}
img.wrap {float: right;
	border: 2; 
	max-width:100%;
	height:auto; 
	padding:10px;}
.topnav {font-size:calc(.45em + .35vw);  font-family:arial;}
.skip-link { position: fixed;top: -200px;}
h1 {font-size: 2em; color:#993333; font-weight: bold;  text-align: center; font-family:arial; font-style: italic;} 
h2 {font-size: .95em; margin-top: 0px; margin-bottom: 3px; text-align: center; font-family:arial; font-style: italic;}
h3 {font-weight: normal; size: 1em; font-family:arial; margin-top: 0px; margin-bottom: 3px;}
h4 {font-size: .95em; margin-top: 0px; margin-bottom: 3px; text-align: center; font-family:arial; font-style: italic;}
h5 {font-size: .95em; color:#993333; margin-top: 0px; margin-bottom: 3px; text-align: center; font-family:arial; font-style: italic;}
#anote ol{ margin:25px; padding:5px; font-family:verdana;}
#anote ul{ margin:25px; padding:5px; font-family:verdana;}
.videobulletsmall{COLOR: #000066; font-family: arial; font-style: italic; font-size:calc(.35em + 1vw);}
.mt-overflow-auto {overflow: auto; list-style: disc inside;}
/*End Original CSS */

.phonegold{
color: gold;
	-webkit-text-stroke: 1px #F8F8F8;
	text-shadow: 0px 2px 4px red;
	font-family: arial; 
	font-style: italic; 
	font-size:calc(1.5em + 1vw); 
	text-align:center;
}


img {
  max-width: 100%;
  height: auto;
}

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

#iwantpadding{
	padding: 5px;
	margin: 5px;
}
#iwantmorepadding{
	padding: 15px;
	margin: 15px;
}
#iwantcentertext{
	padding: 5px;
	margin: 5px;
	text-align:center;
}

#wrapper{
	padding: 7px;
	margin: 5px;
}
#blogwrapper{
	padding: 7px;
	margin: 0;
	background-color: white;
}
/* Start CSS FOR STYLING ALL PAGES OTHER THAN THE HOME PAGE */

#body{
	display: flex;
	padding: 5px;
	margin: 5px;
}

#bodya{
	display:flex;
    padding: 5px;
	margin: 5px;
	}
#column13a{ float:left; width:100%; text-align:center; padding:2px;}

#content{
	display: flex;
}
#1column{
	float:left; width:100%; text-align:center; padding:4px;
}
#containerb{width: 100%; display:flex;}
#column19{float:left; width:75%; text-align:justify; font-family:verdana; padding:5px;}
#column20{float:right; width:25%; text-align:center;}

#containerc{width:100%; display:flex;}
#column21{ float:left; width: 33%; text-align:center; padding:2px;}
#column22{ display: inline-block; width: 33%;  text-align:center; padding:2px;}
#column23{ float: right; width:33%;  text-align:center; padding:2px;}

#containerd{width: 100%; display:flex;}
#column24{float:left; width:50%; text-align:justify; padding:2px;}
#column25{float:right; width:50%; text-align:left;  padding:5px;}

#containere{width: 100%; display:flex;}
#column26{float:left; width:50%; text-align:justify; padding:2px;}
#column27{float:right; width:50%; text-align:left;  padding:2px;}

#containerf{width:100%; display:flex; margin-top:0; margin-right:auto; margin-bottom:0; margin-left:auto;}
#column28{float:left; width:33%; text-align:center; padding:5px; }
#columna27{ display: inline-block; width: 33%;  text-align:center; padding:5px;}
#column29{float:right; width:33%; text-align:center; padding:5px;}

#containerg{width:100%; display:flex;}
#column30{ float:left; width: 25%; text-align:center; padding:2px;}
#column31{ display: inline-block; width: 25%;  text-align:center; padding:2px;}
#column32{ display: inline-block; width: 25%;  text-align:center; padding:2px;}
#column33{ float: right; width:25%;  text-align:center; padding:2px;}

#containeri{width: 100%; display:flex;}
#column36{float:left; width:40%; text-align:justify; padding:1px;}
#column37{float:right; width:60%; text-align:left; font-family:verdana; padding:1px; text-align:center;}

#containerj{width:100%; display:flex;}
#column38{ float:left; width: 60%; text-align:center; padding:2px;}
#column40{ float: right; width:40%;  text-align:justify; padding:2px;}

#containerk{width:100%; display:flex; padding: 5px; margin: 5 px;}
#column41{ float:left; width: 60%; text-align:center; padding:2px; margin: 2px;}
#column42{ float: right; width:40%;  text-align:justify; padding:2px; margin: 2px;}

#containerl{width: 100%; display:flex;}
#column43{float:left; width:50%; text-align:center; padding:2px;}
#column44{float:right; width:50%; text-align:center; padding:2px;}

#containerm{width:100%; display:flex;}
#column45{ float:left; width: 60%; text-align:center; padding:2px;}
#column46{ float: right; width:40%;  text-align:justify; padding:2px;}

#containern{width: 100%; display:flex;}
#column47{float:left; width:50%; text-align:center; padding:2px;}
#column48{float:right; width:50%; text-align:left;  padding:2px;}

#containero{width: 100%; display:flex;}
#column49{float:left; width:50%; padding:2px;}
#column50{float:right; width:50%; padding:2px;}

#containerp{width: 100%; display:flex;}
#column51{float:left; width:50%; padding:2px;}
#column52{float:right; width:50%; padding:2px;}

#containerq{width: 100%; display:flex;}
#column53{float:left; width:45%; padding:2px;}
#column54{float:right; width:55%; padding:2px;}

#containerr{width: 100%; display:flex;}
#column55{float:left; width:50%; padding:2px;}
#column56{float:right; width:50%; padding:2px;}

#containers{width:100%; display:flex;}
#column57{ float:left; width: 20%; text-align:center; padding:2px;}
#column58{ display: inline-block; width: 20%;  text-align:center; padding:2px;}
#column59{ display: inline-block; width: 20%;  text-align:center; padding:2px;}
#column60{ display: inline-block; width: 20%;  text-align:center; padding:2px;}
#column61{ float: right; width:20%;  text-align:center; padding:2px;}

#containerz13{width:100%; display:flex;}
#column121{float:left; width:16%; text-align:center; padding:2px; }
#column122{ display: inline-block; width:16%;  text-align:center; padding:2px;}
#column123{ display: inline-block; width:16%;  text-align:center; padding:2px;}
#column124{ display: inline-block; width:16%;  text-align:center; padding:2px;}
#column125{ display: inline-block; width:16%;  text-align:center; padding:2px;}
#column126{float:right; width:16%; text-align:left; padding:2px;}

#containerz14{width: 100%; display:flex;}
#column127{float:left; width:50%; padding:2px; text-align:center;}
#column128{float:right; width:50%; padding:2px; text-align:center;}

#containerz15{width:100%; display:flex;}
#column129{ float:left; width: 25%; text-align:center; padding:2px;}
#column130{ display: inline-block; width: 25%;  text-align:center; padding:2px;}
#column131{ display: inline-block; width: 25%;  text-align:center; padding:2px;}
#column132{ float: right; width:25%;  text-align:center; padding:2px;}

#containerz16{width:100%; display:flex;}
#column133{ float:left; width: 25%; text-align:center; padding:2px;}
#column134{ display: inline-block; width: 25%;  text-align:center; padding:2px;}
#column135{ display: inline-block; width: 25%;  text-align:center; padding:2px;}
#column136{ float: right; width:25%;  text-align:center; padding:2px;}

#containerz17{width:100%; display:flex;}
#column137{ float:left; width: 25%; text-align:center; padding:2px;}
#column138{ display: inline-block; width: 25%;  text-align:center; padding:2px;}
#column139{ display: inline-block; width: 25%;  text-align:center; padding:2px;}
#column140{ float: right; width:25%;  text-align:center; padding:2px;}

#containerz18{width: 100%; display:flex;}
#column141{float:left; width:35%; text-align:left; padding:2px;}
#column142{float:right; width:65%; text-align:right;  padding:2px;}

#containerz19{width: 100%; display:flex;}
#column143{float:left; width:45%; text-align:left; padding:2px;}
#column144{float:right; width:55%; text-align:right;  padding:2px;}

#containerz20{width: 100%; text-align:center; padding: 5px;}

#containerz21{width:100%; display:flex;}
#column145{ float:left; width: 25%; text-align:center; padding:2px;}
#column146{ display: inline-block; width: 25%;  text-align:center; padding:2px;}
#column147{ display: inline-block; width: 25%;  text-align:center; padding:2px;}
#column148{ float: right; width:25%;  text-align:center; padding:2px;}

#containerz22{width: 100%; text-align:left; padding: 5px; margin: 5px;}

.textjustify{
	text-align: justify;
}
.textcenter{
	text-align: center;
}

/* Styling for blog page */

.blogcontainer{
	margin: 1px;
	padding: 1px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.parent{
	margin: 2px;
	min-width: 300px;
	width: 24%;
	border: 4px solid #780207;
	border-radius: 15px;
	background-color: #F5F5DC;
}
.child1{
    display: block;
	width: 100%;
}
.child2{
    display: block;
	width: 100%;
	padding: 2px;
	margin: 2px;
	text-align:center;
}
.child2 h2{
	color: #780207; 
	font-family: arial; 
	font-style: italic; 
	font-size:calc(1em + .85vw); 
}
.child2 h2:hover, .child2 h2:focus, .child2 h2:active{
	-webkit-transform: scale(1.1);
	transform: scale:(1.1); 
}
.child3{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
	width: 100%;
	padding: 2px;
	margin: 2px;
	text-align: justify-content;
	text-decoration: none;
}
.child4{
    display: block;
	width: 100%;
	padding: 1px;
	margin: 6px;
	text-align: center;
}
.blogbutton{
	margin: 2px;
	text-decoration: none;
	font-size: 18px;
	font-weight: bold;
	background-color: #FFC300;
	padding: 5px;
	text-align: center;
	color: #780207;
	border-radius: 10px;
	cursor: pointer;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.blogbutton:hover, .blogbutton:focus, .blogbutton:active{
	box-shadow: 0 0 20px rgba(0,0,0,0.5);
	-webkit-transform: scale(1.1);
	transform: scale:(1.1);
}

/* Styling for blog artilces */


.articlecontainer {
	margin: 1px;
	padding: 1px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-bottom: 20px;
	background-color:white;
}
.articleparent{
	padding: 2px;
	margin: 2px;
	min-width: 300px;
	width: 80%;
	border-radius: 15px;
	text-align: center;
}
.articleparent p{
	text-align: justify;
	font-size:calc(.9em + .75vw);
    line-height: 1.5;	
}
.articleparent h3{
	text-align: justify;
	font-size:calc(1.2em + 1vw);
	font-family: arial; 
	font-style: italic;
    font-weight: bold;	
}
.articleparent h4{
	text-align: justify;
	font-size:calc(1em + 1vw);
	font-family: arial; 
    color: #780207; 
	font-style: italic; 
}

.articleparent ul{
	text-align: justify;
	padding-left: 0;
}

.articleparent li{
	list-style-position: inside;
	font-size:calc(.9em + .75vw);
    line-height: 1.5;
}
.articleparent bulletparent{
	text-align: justify;
	font-size:calc(1.2em + 1vw);
	font-family: arial; 
	font-style: italic;
    font-weight: bold;	
}
.blogmaroon{
	text-align: justify;
	font-size:calc(1.2em + 1vw);
	font-family: arial; 
	font-style: italic;
    font-weight: bold;	
	color: #660000;
}
.blogmaroonsmaller{
	text-align: justify;
	font-size:calc(.75em + .75vw);
	font-family: arial; 
	font-style: italic;
    font-weight: bold;	
	color: #660000;
}





/* End CSS FOR STYLING ALL PAGES OTHER THAN THE HOME PAGE*/

#nav-bar{
	
}

#cta{
	padding: 5px;
	margin: 5px;
	text-align: center;
	display: flex;
}

.row{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		flex-flow: wrap;
}
.box{
	width: 22%;
	padding: 5px;
	margin-bottom: 15px;
	transition: 0.3s;
}

.box:hover{
	transform: scale(1.05);
}

.navbutton:hover{
	transform: scale(1.05);
}


#footer-container{
     background-color: ##F5F5DC;
	display: flex;
	padding: 10px;
	
}
#contact{
	background-color: ##F5F5DC;
	flex: 1;
	text-align: left;
	padding:10px;
}
#letter{
	background-color: ##F5F5DC;
	flex: 1.5;
	text-align: right;
	padding: 10px;
}


@media screen and (max-width:1100px){
	.box{
		width: 45%;
	}
}

@media screen and (max-width:700px){
	.box{
		width: 80%;
		margin-bottom: 5px;
	}
	#footer-container{
	display:block;
	padding: 10px;
}
}

/**Nav Bar CSS **/



.topnav {font-size:calc(.55em + .45vw);  font-family:arial;}



.toggle,
[id^=drop] {
  display: none;
}

nav {
  margin: 0;
  padding: 0;
  background-color: #F5F5DC;; /* Original color #FFC300;*/
}

#logo {
  display: block;
  padding-left: 15px;
  height: 60px;
  float: left;
}

#main-toggle {
  cursor: pointer;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.nav-icon {
  background: #660000;
  display: block;
  height: 2px;
  position: relative;
  width: 18px;
}

.nav-icon:before,
.nav-icon:after {
  background: #660000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
}

.nav-icon:before {
  top: 5px;
}

.nav-icon:after {
  top: -5px;
}


nav:after {
  content: "";
  display: table;
  clear: both;
}

nav ul {
  float: right;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

nav ul li {
  margin: 0px;
  display: inline-block;
  float: left;
  background-color: #F5F5DC;
}

nav li a {
  display: block;
  padding: 0 20px;
  color: #660000;
  line-height: 60px;
  text-decoration: none;
}

nav ul li ul li:hover {
  background: #FFFF00;
}

nav li a:hover {
  background-color: #FFFF00;
  color: #FF0000;
}

nav ul ul {
  display: none;
  position: absolute;
  top: 60px;
}

nav ul li:hover>ul {
  display: inherit;
}

nav ul ul li {
  width: 300px;
  float: none;
  display: list-item;
  position: relative;
}

nav ul ul ul li {
  position: relative;
  top: -60px;
  left: 170px;
}

.accessa ul{ margin:25px; padding:5px; font-family:verdana;}


/* start data sheet css */

table{
  width: 100%;
  border-collapse: collapse;
}
th {
	text-align: center;
	color: #800000;
	background-color: #ffcc00;
	border-collapse: collapse;
	font-size:calc(1em + 1vw);
    font-family: arial;
}	
td {
  border: 1px solid black;
  text-align: center;
  font-size:calc(.8em + .8vw);
  font-family: arial; 
  font-style: italic; 
  padding-top: .5em;
  padding-bottom: .5em;
}

.containerdatasheeta{
	background-color: #FFFFFF;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: 5px;
}
.containerdatasheeta h3{
	text-align: justify;
	font-size:calc(1.2em + 1vw);
	font-family: arial; 
	font-style: italic;
    font-weight: bold;
}
.containerdatasheeta h4{
	text-align: justify;
	font-size:calc(1em + 1vw);
	font-family: arial; 
    color: #780207; 
	font-style: italic; 
}
.containerdatasheeta p{
	text-align: justify;
	font-size:calc(.9em + .75vw);
    line-height: 1.5;	
}
.containerdatasheeta bulletparent{
	text-align: justify;
	font-size:calc(1.2em + 1vw);
	font-family: arial; 
	font-style: italic;
    font-weight: bold;	
}

.datasheetchilda{
	text-align: justify;
	padding: 5px;
	margin: 5px;
	min-width: 300px;
	flex-grow: 2;
	width: 100%;
}
.datasheetchildb{
	text-align: justify;
	padding: 35px;
	margin: 5px;
	min-width: 300px;
	width: 69%;
	flex-grow: 1;
}
.datasheetchildc{
	text-align: center;
	padding: 35px;
	margin: 5px;
	min-width: 300px;
	width: 29%;
	flex-grow: 1;
}
.datasheetchildd{
	text-align: center;
	padding: 35px;
	margin: 5px;
	min-width: 300px;
	flex-grow: 2;
	width: 100%;
	margin-bottom: 20px;
}
.datasheetchilde{
	text-align: justify;
	padding: 35px;
	margin: 5px;
	min-width: 300px;
	width: 69%;
	flex-grow: 1;
}
.datasheetchildf{
	 display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 35px;
	margin: 5px;
	min-width: 300px;
	width: 29%;
	flex-grow: 1;
}
.datasheetchildg{
	text-align: justify;
	padding: 35px;
	margin: 5px;
	min-width: 300px;
	width: 49%;
	flex-grow: 1;
}
.datasheetchildh{
	 display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 35px;
	margin: 5px;
	min-width: 300px;
	width: 49%;
	flex-grow: 1;
}
.datasheetchildi{
	text-align: center;
	padding: 35px;
	margin: 5px;
	min-width: 300px;
	flex-grow: 2;
	width: 100%;
}
.datasheetchildj{
	text-align: center;
	padding: 5px;
	margin: 5px;
	min-width: 300px;
	flex-grow: 2;
	width: 100%;
}
.datasheettext{
	text-align: justify;
	font-size:calc(.9em + .75vw);
    line-height: 1.5;
}
.datasheetsmallertext{
	text-align: justify;
	font-size:calc(.7em + .7vw);
    line-height: 1.5;
}
.datasheetbulletpoint{
	text-align: justify;
	font-size:calc(1em + 1vw);
	font-family: arial; 
    color: #780207; 
	font-style: italic; 
}
.datasheetcentetjustify{
	text-align: center;
	font-size:calc(1em + 1vw);
	font-family: arial; 
    color: #780207; 
	font-style: italic;
}
.vn49{
   text-align: center;
   font-size: calc(1.2em + 1vw);
   font-family: arial;
   color: #8B4513;
   font-style: italic;
}
.vn1{
   text-align: center;
   font-size: calc(1.2em + 1vw);
   font-family: arial;
   color: #008000;
   font-style: italic;
}
.vn2{
   text-align: center;
   font-size: calc(1.2em + 1vw);
   font-family: arial;
   color: #9400D3;
   font-style: italic;
}

.center-image{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
/* end data sheet css */








/* Media Queries
--------------------------------------------- */

@media all and (max-width :900px) {
	
	.topnav {font-size:calc(.5em + 1vw); font-weight: bold;}

  nav {
    margin: 0;
  }
  nav ul{
    float:none;
  }
  .toggle+a,
  .menu {
    display: none;
  }

  .toggle {
    display: block;
    background-color: #F5F5DC;
    padding: 0 20px;
    color: #660000;
    font-size: 20px;
    line-height: 60px;
    text-decoration: none;
    border: none;
  }

  .toggle:hover {
    background-color: #FFFF00;
  }

  [id^=drop]:checked+ul {
    display: block;
  }

  nav ul li {
    display: block;
    width: 100%;
  }

  nav ul ul .toggle,
  nav ul ul a {
    padding: 0 40px;
  }

  nav ul ul ul a {
    padding: 0 80px;
  }

  nav ul ul ul a {
    background-color: #fff99d;
  }

  nav ul li ul li .toggle,
  nav ul ul a {
    background-color: #fff99d;
  }

  nav ul ul {
    float: none;
    position: static;
    color: #660000;
  }

  nav ul ul li:hover>ul,
  nav ul li:hover>ul {
    display: none;
  }

  nav ul ul li {
    display: block;
    width: 100%;
  }

  nav ul ul ul li {
    position: static;

  }
}


/* Changing Logo Images*/


.image2{
   display: none;
}

@media only screen and (max-width: 992px){
   .image1{
     display: none;
   }

   .image2{
     display: block;
   }
}

@media only screen and (min-width: 992px){
	.image2{
		display: none;
	}
	.image1{
		display: block;
	}
}