/*-------------------------
	
    # ID
    . Class
--------------------------*/

h1{
	text-align: center;
	display: inline;
}
a{
    text-decoration: none;
    color: white;
}
a:hover{ 
    text-decoration: underline;
}
h1#header
{
     /*background-color: #333333;*/
    font-size: 2.5em;
    color:  white;
	text-align: center;
	border-style: solid;
    border-width: 0px;
    border-color: white;
	border-bottom-width: 3px;
	display: block;
	margin-top: 3px;
}
/* Overlay text to display info on the site  */
#overlay {
    position: fixed; /* Sit on top of the page content */
    display: block; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 33%; /* Full height (cover the half page) */
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    /* cursor: pointer;  Add a pointer on hover */
}

#overlaytext{
    position: absolute;
    margin: auto;
    top: 50%;
    left: 50%;
    width: 100%;
    text-align: center;
    font-size: 3vw;
    color: white;
    transform: translate(-50%,-50%); /* aligning centered text */   
    -ms-transform: translate(-50%,-50%);
    /* border: 3px solid white; /* Border used to debug design */
}
#by{
	font-size: 1vw;
	margin: auto;
	left:  75%;
	text-align: right;
}
hgroup{
	display: inline-block;
}
}
#footeroverlay {
    position: fixed; /* Sit on top of the page content */
    display: block; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    /* cursor: pointer; /* Add a pointer on hover */
}
#bottomofpix{
    
    font-size: 2vW;
    color: white;
    background-color: rgba(242,242,242,0.5);
    /*transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);  */
}
#footeroverlaytext{
    /*position: absolute;
    bottom: 2%;
    left: 50px;*/
    font-size: 2vW;
    color: black;
    background-color: rgba(242,242,242,0.5);
    /*transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);  */
}

.box{
        position: relative;
        display: inline-block; /* Make the width of box same as image */
    }
    .box .contact{
        position: absolute;
        z-index: 999;
        margin: 5 auto;
        left: 10;
        right: 10;        
        text-align: left;
        top: 90%; /* Adjust this value to move the positioned div up and down */
        left: 2%;
        font-size: 2vW;
    	color: white;
    	background-color: rgba(242,242,242,0.5);
         /* width: 60%; Set the width of the positioned div */
    }
/* Use a media query to add a breakpoint at 800px: 
@media screen and (min-height: 525px) {
  #footeroverlaytext{
    color: black; /* The color is black, when the viewport is 800px or smaller  and the text appears below the image
  }

*/