@charset "utf-8";
/* CSS Document */
html, body {
	margin: 0px auto;
	background-color:#ffffff;
	text-align: center;
	scrollbar-arrow-color: #C2C2C2;
	scrollbar-base-color: #C2C2C2;
	scrollbar-face-color: #FFFFFF;
	scrollbar-highlight-color: #C2C2C2;
	scrollbar-shadow-color: #C2C2C2;
	scrollbar-3dlight-color: #FFFFFF;
	scrollbar-track-color: #FFFFFF;
	scrollbar-darkshadow-color: #FFFFFF;
	height: 100%;

}

.responsive_image{
	height: auto;
	max-width: 100%;
}
.container{
	display: grid; 
	height: 100hv;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 0.6fr 0.6fr 0.6fr 3fr 0.5fr;
	grid-gap: 0rem;
	grid-template-areas: "nav nav nav nav"
	                     "title title title title"
						 "main main main main"
						 "content1 content2 content3 content4"
						 "footer footer footer footer"
}

nav{
	background-color:#fff;
	grid-area: nav;
	}
	
#title{
	background-color:#fff;
	grid-area: title;
    display: flex;
	align-items: center;
	justify-content: center;
	}
	
.title{
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-style:italic;
    letter-spacing: 4px;
	font-size: 40px;
	color: #4e4e4e;
	padding-top: 20px;
	padding-bottom: 20px;
	}
.titletxt{
	font-size:14px;
	color: #4e4e4e;
	}

#main{
	background-color: #fff;
	grid-area: main;
    display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 10px 10px 10px;
	}
	
#content1{
	background-color:#DDD;
	grid-area: content1;
	display: flex;
	align-items: center;
	justify-content: center;
	}
	
.cont1title{
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-style:italic;
    letter-spacing: 4px;
	font-size: 28px;
	color: #4e4e4e;
	}
	
.maintxt{
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-style:italic;
	letter-spacing: 4px;
	font-size:14px;
	color: #4e4e4e;
	}
	
img{
	border-radius: 10%;
	padding-bottom: 5px;
	}

	
#content2{
	background-color:#DDD;
	grid-area: content2;
	display: flex;
	align-items: center;
	justify-content: center;
	}

#content3{
	background-color: #DDD;
	grid-area: content3;
	display: flex;
	align-items: center;
	justify-content: center;
	}

#content4{
	background-color: #DDD;
	grid-area: content4;
	display: flex;
	align-items: center;
	justify-content: center;
	}


	
footer{
	background: #fff;
	grid-area: footer;
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	letter-spacing: 3px;
	font-size:10px;
	font-weight: 400;
	color: #4f4f4f;	
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px 30px 30px 30px;
	}



@media only screen and (max-width:78rem),
            {
	.container{
	grid-template-columns: 1fr;
	grid-template-rows: 0.20fr 0.20fr 0.5fr 1.5fr 1.5fr 1.5fr 1.5fr 0.25fr;
	grid-template-areas:
		"nav"
		"title"
		"main"
		"content1"
		"content2"
		"content3"
		"content4"
		"footer"
	}
	
	}	
	

/*lightbox*/

.lightbox {
  /* Default to hidden */
  display: none;

  /* Overlay entire screen */
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  /* A bit of padding around image */
  padding: 0;

  /* Translucent background */
  background: rgba(0, 0, 0, 0.6);
}

/* Unhide the lightbox when it's the target */
.lightbox:target {
  display: block;
}

.lightbox span {
  /* Full width and height */
  display: block;
  width: 100%;
  height: 100%;

  /* Size and position background image */
  background-position: center;
  background-repeat: no-repeat;
  background-size: relative;
	

}