/* main css document for desktops*/

/*font-family: 'Lato', sans-serif;
font-family: 'Lustria', serif;
*/

/*COLORS

#00120B  black    rgb(0, 18, 11)
#593f62  dark purple   rgb(89, 63, 98)
#7b6d8d  light purple   rgb(123, 109, 141)
#8499b1  blue    rgb(132, 153, 177)
#a5c4d4  light blue   rgb(165, 196, 212)
#009fb7  teal    rgb(0, 159, 183)
#493b25  dark gray/black   rgba(73, 59, 42, 1)

*/

/* border box fix & font size for accessibility*/

html {  box-sizing:border-box;
        font-size: 100%;
        height:100%;
      }
*, *:before, *:after {box-sizing:inherit;}

/*universal stuff*/

body{ 
      min-height: 100%;;
      font-family:"Lato",sans-serif;
      font-weight:400;
      font-size: 1rem;
      line-height:1.3rem;
      color:#00120B;  
      background-color: #413d4f;
      background-image: url("_images/dust.png");
      background-repeat:repeat;
      
}
h1{
  font-family:"Lustria", serif;
  font-size:2.2rem;
}
h2{
  font-family:"Lustria", serif;
  

}

.main-container{ 
  background-color:#ffffff;
  max-width:1220px; 
  
  margin: 0 auto; 
  box-shadow: 5px 5px 15px rgba(120,120,120,.4);
}   

/*---header----*/

header{ 
  font-family:"Lustria", serif;
  min-height:200px;
  padding: 30px 0 0 0;
	}


/*new header stuff - positioning*/
header{
  display:flex;
  position:relative;
  justify-content: center;
  align-items:center;
}

header .largecol{
  text-align:center;
}

header .smallcol{
    position:absolute;
    top:0;
    right:0;
    min-width:222px; 
}

header .smallcol h2{
  background-color:#593f62;
  padding:30px 10px 10px 10px;
  color:#ffffff;
  border-radius:0 0 0 25px;
  text-align:center;
  font-weight:400;
  font-size:1.5rem;
}
header .smallcol h2 a{
  color:#ffffff;
  font-size:1.5rem;
}

header .leftcol{
  position:absolute;
  top:0;
  left:0;
  min-width:222px;
  text-align:right;
}

header .leftcol h2{
  background-color:#009fb7;
  padding:30px 10px 10px 10px;
  color:#ffffff;
  border-radius:0 0 25px 0;
  font-weight:400;
  font-size:1.5rem;
}

.nameInfo-mobile{
  display: none;
}


header h1 { font-size:2.2rem; 
            font-family:"Lustria", serif; 
            color:#00120B;
             }

header h1 a {color:#00120B;text-decoration:none;line-height:4rem;}  
header h1 a:hover {color:rgb(123, 109, 141);}            

header h2 { font-weight: 300; 
            line-height: 1.4em;  
            color:#00120B; }

header h3{  font-size: 1.6em; 
            color:#593f62;
            padding: 0 0 15px 0;
           }



/*.clear {clear:both; line-height:0;}*/






/*--general links---*/

a {color:rgb(123, 109, 141);
  text-decoration:none;
}
a:hover{color:rgb(123, 109, 141);
    text-decoration:underline;
    text-decoration-color: rgb(0, 159, 183); 
  }


/*--main--*/


main {
    max-width: 100%;
    margin:0 auto;
    padding: 0 10% 5%;
}

main p {/*text-indent: 25px;*/
        text-align:left;
        }

main h2 {font-size: 1.8rem;
        text-align:center;
        font-family:"Lustria", sans-serif;
        margin: 2rem auto; 
        font-weight:500;}



.alarm {font-weight:400;
        font-family:"Lato", sans-serif;
        padding: 0%;
        text-align:left;
        background: rgb(123, 109, 141);
        padding: 1% 0 1% 5%;
        color:white;
        
}

p.alarm { margin:4% 0; }


#expectTitle {  text-align: center;
                font-family:'Lustria', serif;
                font-size: 1.3em;
                margin-bottom: 2%;
              }

.businessName{
  font-family:'Lustria, serif';
  font-style: italic;
  font-weight:400;
  /*color: rgb(89, 63, 98);*/
}



/*about webpage updated*/

.content-wrap { 
                margin: 3% auto 0; padding: 0% 5% 5% 8%;  }
        	

h2#aboutName{
  text-align:center;
  font-family:"Lustria", sans-serif;
  margin-bottom:3%;
  font-size: 2rem;
}

figure { 
  text-align: center;
  margin: 2% auto;
 }
#portrait {
  width:100%;
  max-width:300px;
  height:auto;
  border-radius: 50%;
  margin-bottom: 2%; 
  /*border: 5px solid rgba(112,48,48,.3);*/
  box-shadow: 0px 0px 15px;
}

    div.about p{
      text-indent:2rem;
      padding:0 5rem 2rem;
    }



/*--contact web page updated--*/


#contact 
		{   
        text-align: center;
        margin: 5% 10%;
    }


#contact h2 
    {
  font-family:"Lustria", sans-serif; 
  margin:5% 0;
  font-size:2rem;
			}

#form1 header, #form1 ul{
  font-family: 'Lato', sans-serif;
  color:red;
}

#contact h3{
  margin: 2rem 0 0.5rem;
}
#locationInfo{
  display: flex;
  justify-content: space-between;
  
}

#contact h4{
  margin: 8% auto 2%;
  font-size:1.5rem;
}
a.telnumber{
  margin: 0 0 2rem 0;
  font-size:1.8rem;
  font-weight:400;
}

#locationInfo iframe{
  box-shadow: 0px 0px 3px;
  margin-top: 2%;
}


/*--more_info web page--*/

#minfo {
        text-align: center;
         
        padding:0 20%;  
        font-family:"Lato", sans-serif; }

#minfo h2{font-size: 1.8em; 
            font-family: "Lustria", sans-serif; 
            font-weight:500;
            margin: 3%;
}
    
#minfo ul{  list-style: none;
            display:flex; 
            flex-direction: column;}

#minfo li{  line-height: 2.8em;font-size:1.2em;}

#minfo a{text-decoration:none;  }

.logolink {margin-bottom:5%;}

/*--what is elec page--*/

/*#electrolysis {
    float:left; 
    clear:right;
    background-color:#ffffff;
}*/

.whatisH2{margin:4% 0 4% 0;}

#circleinfo { 
  float:right; 
  clear:left;        
  margin:5% 0 5% 5%; 
            /*position:relative; z-index: 1; position:relative; top: 25px;right: 5%; width:25%; height:auto;*/}

#electrolysis p { font-family:"Lato", sans-serif; margin: 2rem auto;}

#electrolysis h4 {
    margin: 8% 0;
    font-size: 1.8em;
    font-weight:600;
    text-align:center;
    font-family:"Lato", sans-serif; font-weight:500;
   }

ol{margin-bottom:5%;}
.instructions{margin-bottom:2%; text-align: center;color: rgb(0, 159, 183);font-size:1.5rem;}
.list {padding-bottom:2%; list-style: circle;}


/*--BLOG--*/
.date {padding:0; margin:0 0 5% 5%;}
#blogIndexTitle {color:rgb(0, 159, 183);}
a.blogIndex {margin:0;color:#00120B;}
a.blogIndex {text-transform: none; text-decoration: none; }
a.blogIndex:hover {color: rgba(120,153,168,1);}

.blog h2 {text-align: left; font-size:1.9em; margin: 4% 0; line-height:2rem;}
#blogTitle {font-weight: 200;}
.blog h3 {font-size:1.4em; margin-bottom:1%;}
#jan1Title {font-size:.9em;}
.blog h4 {font-size:1em;margin-top:5%;}
.blog p {margin:0 auto;width:80%; padding-bottom:3%; color: #00120B;}
.postDate {font-size:.8em;font-style: italic; font-family:lato;font-weight:300;margin-bottom:2%;}
.blog blockquote {width:60%; margin:5% auto;}
p.sources {font-size:.75em; margin-bottom:2%;padding:0;}
.blog {float:none;width:95%;margin:0 auto;}


.bookTitle {text-decoration: underline;}

/* navigation-new.php css below */
ul{display:flex;justify-content: space-around;}
#menu {
	background: #009fb7;
	color: #FFF;
	height: 45px;
	padding-left: 18px;
	border-radius: 0px;
}
#menu ul, #menu li {
	margin: 0 auto;
	padding: 0;
	list-style: none
}
#menu ul {
	width: 100%;
}
#menu li {
	float: left;
display: inline;
	position: relative;
}
#menu a {
	display: block;
	line-height: 45px;
	padding: 0 14px;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 16px;
}
#menu a.dropdown-arrow:after {
	content: "\25BE";
	margin-left: 5px;
}
#menu li a:hover {
	color: rgb(0, 159, 183);
	background: #F2F2F2;
}
#menu input {
	display: none;
	margin: 0;
	padding: 0;
	height: 45px;
	width: 100%;
	opacity: 0;
	cursor: pointer
}
#menu label {
	display: none;
	line-height: 45px;
	text-align: center;
	position: absolute;
	left: 35px
}
#menu label:before {
	font-size: 2.5rem;
	content: "\2261"; 
	margin-left: 25px;
}
#menu ul.sub-menus{
	height: auto;
	overflow: hidden;
	width: 170px;
	background: #493b2a;
	position: absolute;
	z-index: 99;
	display: none;
}
#menu ul.sub-menus li {
	display: block;
	width: 100%;
}
#menu ul.sub-menus a {
	color: #FFFFFF;
	font-size: 16px;
}
#menu li:hover ul.sub-menus {
	display: block
}
#menu ul.sub-menus a:hover{
	background: #F2F2F2;
	color: #493b2a;
}
@media screen and (max-width: 800px){
	#menu {position:relative}
	#menu ul {background:#493b2a;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
	#menu ul.sub-menus {width:100%;position:static;}
	#menu ul.sub-menus a {padding-left:30px;}
	#menu li {display:block;float:none;width:auto;}
	#menu input, #menu label {position:absolute;top:0;left:0;display:block}
	#menu input {z-index:4}
	#menu input:checked + label {color:white}
	#menu input:checked + label:before {content:"\00d7"}
	#menu input:checked ~ ul {display:block}
}

.card {
     background-color: white;
     padding: 20px;
    margin-top: 20px;
    border: 5px solid rgb(243,234,216); box-shadow: 2px 5px 25px rgba(1,1,1,.3); }

img.egypt, img.renaissance{display: block;float:left;clear:right; margin:0 3% 1% 0}
img.modern, img.rome{display:block; float:right; margin:0 0 1% 3%;}
.stressedPic, .allen, img.legs{display:block; float:left;  margin: 0 3% 0 10%;}

img.homepagePic{display:block; float:right; clear:left; margin: 0 0 0 2%;}
img.homepagePic2{display:block; float:left; clear:right; margin: 0 2% 0 0;}

.cake{display:block; float:left;margin: 0 3% 0 10%;}




/*--footer--*/



footer {
       
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;

        border-top: 8px solid rgb(123, 109, 141);
        background-color: #593f62;
        color:#ffffff;
        padding-top:2rem;

  }



footer a{
    color:#ffffff;
    text-decoration: none;
}

footer h3{
  grid-row: 1 / span 1;
  grid-column: 1/ span 6;
  text-align: center;
  align-self: center;
  padding: 0 5rem;
  font-weight:300;
  font-size: 1.4rem;
  line-height: 1.8rem;
 
}

footer h4{
  grid-row: 2 / span 1;
  grid-column: 1/ span 6;
  text-align: center;
  align-self: center;
}

#address1{
  grid-column: 2 / span 2;
  grid-row: 3 / span 1;
  
}
#address2{
  grid-column: 4 / span 2;
  grid-row: 3 / span 1;
  
}
#address1-contact p:first-child, #address2-contact p:first-child{
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: rgb(123, 109, 141);
}

#author{
  grid-row: 4 / span 2;
  grid-column: 1/ span 6;
  text-align:center;
  align-self: center;
  font-size:.6rem;
}

footer #address1 p:first-child, footer #address2 p:first-child{
  text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-color: rgb(0, 159, 183);
    text-decoration-thickness: 0.125rem;
    padding-bottom: 0.25rem;
}
/*--End footer--*/