/*mobile styles*/	


@media screen and (max-width:930px){

    header .largecol{
        margin-top: 7%;
   }
   
   header .leftcol{
        display: none;
   }
    .nameInfo-mobile{
        display: block;
    }
    h2.nameInfo-mobile {
        font-size: 1.6rem;    
        padding: 0 0 15px 0;
    }
  
    #locationInfo{
        flex-direction:column;
    }
    #address1-contact, #address2-contact{
        padding:5% 0;
    }

}   


@media screen and (max-width:798px){
    
header .largecol{
    margin-top: 10%;
}

footer{
    grid-template-rows: 1fr .5fr .6fr .6fr .25fr;
    align-items: center;
}

footer h3{
    padding: 1rem 2rem;
}
  
  #address1{
    grid-column: 1 / span 6;
    grid-row: 3 / span 1;
    text-align: center;

  }
  #address2{
    grid-column: 1 / span 6;
    grid-row: 4 / span 1;
    text-align: center;
  }
  #author{
    grid-row: 5 / span 2;
    align-self: flex-start;
  }

  #circleinfo { 
    float:none; 
    margin:2% auto;
  }


    #welcome {text-align: center; width: auto;

        padding: 0 5% 3% 5%;
}	
	
 

/*--about mobile page--*/
   
.content-wrap {display:inline;
                padding: 0;
                }
    nav {margin-bottom:5%;}
    
    .about {margin: 0 5%;}
    .about h4{font-size: 2em; margin: 3% 0;}
   


	/*--more info mobile--*/
	#minfo {display:inline;
		/*width: auto;*/
		margin: 0 8%;
        padding:0;
	}
    
    #minfo h4{font-size: 2em;}
    #minfo li {font-size: 1.2em; line-height: 1.4; margin:2% auto;}
	
	/*--what is mobile--*/

	#electrolysis{
			width: auto;
            margin: 0 5%;}
            
        
   #circleinfo { width:40%; height:auto;}
    #electrolysis h4 {font-size:2em; margin: 5% 0; }
	
	
	/*--contact mobile--*/
    
    #contact {margin: 0 auto; font-size: 1em; display:inline;}
    
   
}

@media screen and (max-width:500px) {
    header .largecol{
        margin-top: 20%;
   }    
   header h3{
       line-height:1.8rem;
   }
    
    img.homepagePic, img.homepagePic2 {
        float:none; 
        display:inline-block;  
        margin:0 auto;
    } 

    div.about p{
        padding:0 1rem 1rem;
      }

    footer{
    grid-template-rows: 1fr .3fr .4fr .4fr .25fr;
}
#expectTitle{
    margin: 2% auto 5%;
}


   } 
    
    @media screen and (max-width:400px)   {

        #portrait{
            max-width: 250px;
          }
        
        header h3 {font-size: 1.5em;}
        .blog p{width: 100%;text-align:left;font-size:1.1em;}
        .sources p{font-size:.5em;}
        .blog blockquote {width:100%; margin:0 auto;}
        
    }