/*------------------ Start of section to change nav bar contents based on screen size and page ------------------*/ 
@media screen {
	.dropnav {display:none;} 
	.navv1, .navv2, .navv3, .navv4, .navv5 {display:none;}
}
@media screen and (max-width:426px) {
	.navh4 {display:none;}
	.navv4 {display:inline-block;}
}
@media screen and (max-width:626px) {
	.navh1 {display:none;}
	.navv1 {display:inline-block;}
} 
@media screen and (max-width:826px) {
	.navh2 {display:none;}
	.navv2 {display:inline-block;}
} 
@media screen and (max-width:1026px) {
	.navh3, .navh5 {display:none;}
	.dropnav {display:block;}
	.navv3, .navv5 {display:inline-block;}
} 
/*------------------ End of section to change nav bar contents based on screen size and page -------------------*/ 
/*------------------ Start of section to setup 4 nav quadrant buttons on reflection main page ------------------*/ 


.RflctNav1Cnt {
	display:flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-around;
	align-content: space-around;

	width: 40vw;
	height: 40vw;

	background:#FFF;
}

.RflctNav1Btn {
	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
	
	width: 19vw;
	height: 19vw;
	padding: 2.5%;

}

@media screen and (orientation: portrait) {
	.RflctNav1Cnt { width: 80vw; height: 80vw; }
	.RflctNav1Btn { width: 38vw; height: 38vw; }
}


.R_ef { background:rgb(200,230,160); color: #000; border-radius:5px;}
.R_de { background:rgb(250,170,160); color: #000; border-radius:5px;}
.R_ms { background:rgb(140,220,255); color: #000; border-radius:5px;}
.R_ao { background:rgb(250,230,150); color: #000; border-radius:5px;}

.R_ef:hover { background:rgb(100,200,100); color: #FFF; font-size:bold;}
.R_de:hover { background:rgb(250,140,140); color: #FFF; font-size:bold;}
.R_ms:hover { background:rgb(100,180,255); color: #FFF; font-size:bold;}
.R_ao:hover { background:rgb(250,200,50); color: #FFF; font-size:bold;}


/*-------------------- End of section to setup 4 nav quadrant buttons on reflection main page ------------------*/ 
/*------------------ Start of section to format dummy header under position fixed header -----------------------*/ 
#headerspace {
        display:flex; flex-flow:row nowrap; align-items:center; justify-content:center; width:100%;}
#headerspace a { margin:5px;}
/*-------------------- End of section to format dummy header under position fixed header -----------------------*/ 
/*-------------------- Start of section to set up links to articles  -----------------------*/ 
.RBtn {
	background:#878787;
}

.RBtn:hover{
	background:#6F6F6F;
}
.Rn_ef { background:rgb(100,200,100); color: #FFF; font-size:bold;}
.Rn_de { background:rgb(250,140,140); color: #FFF; font-size:bold;}
.Rn_ms { background:rgb(100,180,255); color: #FFF; font-size:bold;}
.Rn_ao { background:rgb(250,200,050); color: #FFF; font-size:bold;}

.ArtBtn {
	display:inline-block;
	width:46%;
	min-height:100px;
	padding:6px;
	margin:3% 2% 0% 2%;
	background:#FFF;
	color:black; 
	border-radius:4px;
	overflow:hidden;
}

.ArtDesc {
	color:#6F6F6F;
	font-weight:100;
}
@media screen and (max-width: 480px) {
	.ArtBtn { width: 92%; margin: 4% 4% 0% 4%;}
}

.ArtBtn:hover {
	background:#6F6F6F;
	color:#FFF;
}
.ArtDesc:hover {
	color:#BBB;
}

@media screen {
	#ImgCatA { width: 50%; }
	#ImgCatB { width: 40%; }
	#ImgCatC { width: 30%; }
}
@media screen and (max-width: 1500px) {
	#ImgCatC { width: 35%; }
}
@media screen and (max-width: 1000px) {
	#ImgCatA { width: 60%; }
	#ImgCatB { width: 51%; }
	#ImgCatC { width: 40%; }
}
@media screen and (max-width: 800px) {
	#ImgCatA { width: 70%; }
	#ImgCatB { width: 60%; }
	#ImgCatC { width: 51%; }
}
@media screen and (max-width: 600px) {
	#ImgCatA { width: 80%; }
	#ImgCatB { width: 80%; }
	#ImgCatC { width: 67%; }
}