*{box-sizing: border-box;
}

html{
	margin:auto;
	padding:0;
	text-align:center;
	font-size:medium;
}

body{
	margin:0;
	padding:0;
	text-align:center;
	background-color:white;
}
section{
	margin:0;
	padding:0;
	text-align:center;
	background-color:white;
}


img{
	max-width:100%;
	height:auto;
	border:thin solid #f0f0f0;
	margin:0;
	padding:0;
	vertical-align:top;
}

h1{font-size:1.8rem; margin:.18rem;}
h2{font-size:1.5rem; margin:.15rem;}
h3{font-size:1.3rem; margin:.13rem;}
h1,h2,h3{
	display:block;
}

hr{display:inline-block; width:20%;}

p{text-align:left;}

.tile{
	cursor: pointer;
}

.flex-container {
	padding: 0;
	margin: 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items:flex-start;
	position:relative;
	width:100%;
}

.flex-item {
	text-align: center;
	max-width:33.3333%;
	display:inline-block;
}


.show{
	background-color:#ffffff;
	display:inline-block;
	margin:0;
	padding:0;

}

.hide{
	background-color:#ffffff;
	display:none;
	margin:0;
	padding:0;

}

#overlay{
	background-color:rgba(255,255,255,.90);
	z-index:1;
	position:absolute;
	top:0;
	left:0;
	right:0;
	padding:1.5%;
	display:none;
	text-align:center;
	overflow:auto;
}

#overlay-container{
	display:inline-block;
	max-width:1366px;
	position:relative;

}

.popup{
	background-color:white;
	z-index:2;
	border-left:thin solid black;
	border-right:thin solid black;
	max-width:1366px;
}


.controltop{
	text-align:right;
	margin:0;
	padding:1px 0px 0px 1px;
	background-color:transparent;
	display:block;
	border-bottom: thin solid black;
	max-width:1366px;
}



.controlicon{

	padding:1% 5%;
	font-weight:bolder;
	border-left:thin solid black;
	border-top:thin solid black;
	border-right:thin solid black;
	border-radius: 10px 10px 0px 0px;
	cursor: pointer;
	background-color:gray;
	color:white;
	font-weight:bolder;
	position:relative;
	bottom: -1;
	display:inline-block;
}

.controlbottom{
	text-align:center;
	font-weight:bolder;
	border-left:thin solid black;
	border-bottom:thin solid black;
	border-right:thin solid black;
	margin:0;
	padding:1% 5%;
	background-color:gray;
	display:block;
	border-radius:0px 0px 10px 10px;
	max-width:1366px;
	color:white;
	cursor: pointer;
}

/* # For Mobile # */
@media(max-width:1536px){
	.flex-item{max-width:50%}
}
@media(max-width:1024px){
	.flex-item{max-width:100%} 
}

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
.flex-item{width:33.3333%;} 
#overlay-container{width:100%;}
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none), screen and (max-width:1536px) {  
.flex-item{width:50%;} 
#overlay-container{width:100%;}
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none), screen and (max-width:1024px) {  
.flex-item{width:100%;} 
#overlay-container{width:100%;}
}