@CHARSET "UTF-8";

/*---------------------*/
.wrapper {
		justify-items: center;
		display: grid;
		grid-template-columns: 100%;
/*		grid-auto-rows: minmax(100px, auto); */
		grid-template-areas:
			"header"
			"content"
			"footer";

		grid-gap: 10px;
		grid-template-rows: auto;
}
@media only screen and (min-width: 950px) { 
	.wrapper {
			grid-gap: 10px;
	}
}
@media only screen and (max-width: 950px) { 
	.wrapper {
			grid-gap: 8px;
	}
}
@media only screen and (max-width: 768px) { 
	.wrapper {
			grid-gap: 8px;
	}
}
@media only screen and (max-width: 360px) { 
	.wrapper {
			grid-gap: 8px;
	}
}
/*---------------------*/
.box-main{
	text-decoration: none;
/*	border: solid #1f628d 25px;*/
/*	border: solid 5px;
	border-color: rgba(31,98,141,1);
	border-radius: 60px 60px 60px 60px;*/
	opacity: 1;
	position: absolute;
	text-align: center;
	horizontal-align: center;

	top: 5px;
	left: 5px;
	bottom: 1px;
	width: 99%;
}
/*---------------------*/
.gridheader {
	grid-area: header;
/*	border: solid #000000 5px;*/
/*	position: absolute;*/
	horizontal-align:center;
	vertical-align:middle;   
	text-align:center;
	width: 100%;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 10px;
	padding-bottom: 0px;

}
/*---------------------*/
.header-image{
	opacity: 1; 
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}
/*---------------------*/
.gridcontent {
	grid-area: content;
/*	border: solid #000000 5px;*/
/*	position: relative;*/
	display:table-cell;
	vertical-align: top;
	text-align: center;
	horizontal-align:center;
	background-color: none;
/*	background-color: #eeeeee; */
	width: 100%;
	margin: 0 auto;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

/*---------------------*/
.content-list{
	width: 95%;
	display:inline-block;
	border: none;
/*	border: solid #1f628d 1px;*/
	background-color: inherit;
/*	background: #11ffff; */
	opacity: 1;
	text-align: center;
	horizontal-align:center;
	vertical-align:middle;   
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto; 
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 0px;
	padding-bottom: 20px;
}

.content-list2{
	width: 95%;
	display:inline-block;
	border: none;
/*	border: solid #1f628d 1px;*/
	background-color: inherit;
/*	background: #aaaaaa; */
	opacity: 1;
	text-align: center;
	horizontal-align:center;
	vertical-align:middle;   
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto; 
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 0px;
	padding-bottom: 20px;
}

/*---------------------*/
.content-list-header{
	font-family : sans-serif;
	font-weight: bold;
/*	line-height: 17px;
	font-size: 18px;*/
	text-align: center;
	horizontal-align:center;

	background-color: #ffffff;
	margin: 5px;
	padding: 10px;
	border-color: rgba(31,98,141,1);
	opacity: 1;
/*	border: solid #1f628d 2px;*/
}
@media only screen and (min-width: 768px) { /* Specific to this particular image */
	.content-list-header{
		line-height: 25px;
		font-size: 22px;
	}
}
@media only screen and (max-width: 768px) { /* Specific to this particular image */
	.content-list-header{
		line-height: 20px;
		font-size: 20px;
	}
}
@media only screen and (max-width: 360px) { /* Specific to this particular image */
	.content-list-header{
		line-height: 20px;
		font-size: 22px;
	}
}
/*---------------------*/
.container {
	width: 100%;
	margin: 0 auto;
/*	border: solid #ff0000 1px;*/
/*	background-color: #aa00aa;*/
}

.container2 {
	width: 100%;
	margin: 0 auto;
/*	border: solid #00ff00 1px; */
/*	background-color: #aa00aa;*/
}

/*---------------------*/
.gridfooter {
	grid-area: footer;
	background-color: rgba(31,98,141,0.2);
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
	font-family : sans-serif;
	color: #FFFFFF;
	font-weight: bold;
/*	font-size: 12px;*/
	z-index: 1000;
}
@media only screen and (min-width: 768px) { /* Specific to this particular image */
	.gridfooter {
		font-size: 12px;
	}
}
@media only screen and (max-width: 768px) { /* Specific to this particular image */
	.gridfooter {
		font-size: 10px;
	}
}
@media only screen and (max-width: 360px) { /* Specific to this particular image */
	.gridfooter {
		font-size: 8px;
	}
}
/*---------------------*/
h2{
	padding-top: 30px;
	padding-bottom: 30px;
}
@media only screen and (min-width: 768px) { /* Specific to this particular image */
	h2{
		padding-top: 20px;
		padding-bottom: 20px;
	}
}
@media only screen and (max-width: 768px) { /* Specific to this particular image */
	h2{
		padding-top: 15px;
		padding-bottom: 15px;
	}
}
@media only screen and (max-width: 360px) { /* Specific to this particular image */
	h2{
		padding-top: 10px;
		padding-bottom: 10px;
	}
}
/*---------------------*/
.topleft {
  position: absolute;
  top: 0;
  left: 0;
}

.topright {
  position: absolute;
  top: 0;
  right: 0;
}

.bottomleft {
  position: absolute;
  bottom: 0;
  left: 0;
}

.bottomright {
  position: absolute;
  bottom: 0;
}

/*------------------------------------------------------------------------------------------------------------------------------------*/