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


body {
   /* background-color: rgba(155,205,155,0.2); */
}

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: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the half page) */
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.7); /* 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: 2vw;
    color: white;
    transform: translate(-50%,-50%); /* aligning centered text */   
    -ms-transform: translate(-50%,-50%);
    /* border: 3px solid white; /* Border used to debug design */
   
}
#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 */
}

#footeroverlaytext{
    position: absolute;
    bottom: 2%;
    left: 50px;
    font-size: 2vW;
    color: white;
    background-color: rgba(242,242,242,0.5);
    /*transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);  */
}
/* 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
  }

*/