body,
html {
	height: 100%;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
}


#mainImageCover {
/*	background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1)), url("/SiteAssets/main_background.png"); */
	height: fit-content;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	padding: 0px;
}

#coverTransition {
	background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
	height: 5px;
}


.mostVisitedBox {
	background-color: #4583d0;
	border: 5px solid #4583d0;
	background-color: var(--MOA-blue-light);
	border: 5px solid var(--MOA-blue-light);
	border-radius: 8px;
	color:white;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}


#mainMostFrequentPages {
	display: flex;
	flex-grow: 1;
	background-color: white;

}

#mainMostFrequentPages > ol {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	justify-content: space-around;
	line-height: 1.5em;
}


.facebookBox {
	
	overflow: hidden;
}

.mostVisitedBox h1, .mostVisitedBox h2{
	color: white;
	padding-left: 15px;	
	width: 100%;
	font-size: 2em;
}


.mostVisitedBox li {
	font-size: 16pt;
	color: #4583d0;
	color: var(--MOA-blue-light);
}

.mostVisitedBox a:visited {
	font-size: 16pt;
	color: #4583d0;
	color: var(--MOA-blue-light);
}

.mostVisitedBox a{
	font-size: 16pt;
	color: #4583d0;
	color: var(--MOA-blue-light);
}


.mostVisitedBox a:hover {
	font-size: 16pt;
	color: #001589;
	color: var(--MOA-blue);
}

.fb-page {
	overflow:hidden;
	height: 100%;
}
.EditModeBox {
	background-color: #fafafa !important;
	border-color: red !important;
	border-width: 6px !important;
}

.EditModeBox h1, .EditModeBox h2 {
	color: black;
}

.EditModeBox .SampleCode {
	border: 2px solid black;
	background: #ffffd9;
	width: fit-content;
	padding: 10px;
	margin: 15px;
}

/* default size */
.coverGrid {
	display: grid;
	grid-gap: 2vw;
	grid-auto-flow: row dense;
	width: 100%;
	min-height: fit-content;
	height: 100%;
	overflow: hidden;
}

/* Fight the Twitter Embed size restriction to fill our space */
.coverGrid iframe{
	height:100% !important;
	width: 100% !important;
}

.board-box {
	grid-row: span 1;
	grid-column: span 1;
	height: 100%;
}

.board-box-wide {
	grid-row: span 1;
	grid-column: span 2;
	height: 100%;
}

.board-box-tall {
	grid-row: span 2;
	grid-column: span 1;
	height: 100%;
}

.board-box-tallest {
	grid-row: span 3;
	grid-column: span 1;
	height: 100%;
}


.board-box-big {
	grid-row: span 2;
	grid-column: span 2;
	height: 100%;
}


/* We don't want this to apply to the other media queries since it is content-destructive */
@media (max-width: 575px) {
	.coverGrid {
		grid-gap: 1vw;
		justify-content: center;
		grid-template-columns: 1fr;
		grid-auto-rows: 170px;
		grid-auto-flow: row dense;
	}

	#mainImageCover {
		padding: 2vw 6vw;
	}
	.board-box-tallest {
		grid-row: span 3;
		grid-column: span 1;
	}
	
	.board-box-tall {
		grid-row: span 2;
		grid-column: span 1;
	}


	.board-box-big {
		grid-row: span 2;
		grid-column: span 1;
	}
	
	.board-box-wide {
		grid-row: span 1;
		grid-column: span 1;

	}

	.board-box {
		grid-row: span 1;
		grid-column: span 1;
		order: 0;
	}
	
	#MOA_Logo {
		width:350px;
	}

	
}

@media (max-width: 400px) {
	
	#MOA_Logo {
		width:320px;
	}

}



/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) and (max-width: 767px) {
	.coverGrid {
		grid-gap: 2vw;
		grid-template-columns: 1fr 1fr ;
		grid-auto-rows: 170px;
		grid-auto-flow: row dense;
	}
	
	#mainImageCover {
		padding: 2vw 4vw;
	}
	
		.board-box-tallest {
		grid-row: span 3;
		grid-column: span 1;
	}
	
	.board-box-tall {
		grid-row: span 2;
		grid-column: span 1;
	}


	.board-box-big {
		grid-row: span 2;
		grid-column: span 2;
	}
	
	.board-box-wide {
		grid-row: span 1;
		grid-column: span 2;
	}

	.board-box {
		grid-row: span 1;
		grid-column: span 1;
	}

}


/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */

@media (min-width: 768px) and (max-width: 991px) {
	.coverGrid {
		max-width: 94vw;
		margin-left: 3vw;
		margin-right: 3vw; 

		grid-gap: 2vw;
		grid-template-columns: 1fr 1fr ;
		grid-auto-rows: 170px;
		grid-auto-flow: row dense;
	}
	
	#mainImageCover {
		padding: 2vw 10vw;
	}
	
		.board-box-tallest {
		grid-row: span 3;
		grid-column: span 1;
		min-height: 40vh;
	}
	
	.board-box-tall {
		grid-row: span 2;
		grid-column: span 1;
		min-height: 10vh;
	}


	.board-box-big {
		grid-row: span 2;
		grid-column: span 2;
	}
	
	.board-box-wide {
		grid-row: span 1;
		grid-column: span 1;
		min-height: 7vh;

	}

	.board-box {
		grid-row: span 1;
		grid-column: span 1;
		order: 0;
		min-height: 7vh;
	}
}


/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) and (max-width: 1199px) {
	.coverGrid {
		max-width: 90vw;
		margin-left: 5vw;
		margin-right: 5vw; 

		grid-gap: 2vw;
		grid-auto-flow: row;
	 	grid-template-columns: 1fr 1fr 1fr;
		grid-auto-rows: 170px;
		grid-auto-flow: row dense;

	}
}

/* Extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) and (max-width: 1599px) {
	.coverGrid {
		max-width: 80vw;
		margin-left: 10vw;
		margin-right: 10vw; 
		grid-gap: 1vw;
		justify-content: center;
		grid-template-columns: 1fr 1fr 1fr;
		grid-auto-rows: 180px;
		grid-auto-flow: row dense;
	}
}

@media (min-width: 1600px) {
	.coverGrid {
		max-width: 68vw;
		margin-left: 16vw;
		margin-right: 16vw; 
		grid-gap: 0.8vw;
		justify-content: center;
		grid-template-columns: 1fr 1fr 1fr ;
		grid-auto-rows: 180px;
		
		grid-auto-flow: row dense;
	}
}


.previewBox {
	background-color: gray;
	display: flex;
	border: 1px solid red;
	font-size: 12pt;
	color: white;
	justify-content: center;
	align-items: center;
}