/*
Theme Name: Madonna
Theme URI: https://linkedin.com/in/xtremeleo
Description: Built for Madonna Catholic College
Author: Ikechukwu Mbilitem
Author URI: https://linkedin.com/in/xtremeleo
Template: bootscore-5
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twentytwentyone-child
*/

/*
// Small devices (landscape phones, 250px and up)
*/
@media (min-width: 250px) {

	.mcc_body{ 
		background-size: 380%; 
		background-position: center top;
	}
	
	#menu-front-box .menu-item a{
		width: 220px;
		height: 50px;
		background-color: #ED0B15;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		color: #FFFFFF;
		font-size: 14px;
		font-weight: bold;
		text-decoration: none;
		margin: 12px;
	}

}

/*
// Small devices (landscape phones, 576px and up)
*/
@media (min-width: 576px) {

	.mcc_body{ 
		background-size: 180%; 
		background-position: center top;
	}
	

	#menu-front-box .menu-item a{
		width: 90px;
		height: 90px;
		background-color: #ED0B15;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		color: #FFFFFF;
		font-size: 12px;
		font-weight: bold;
		text-decoration: none;
	}

}

/*
// Medium devices (tablets, 767px and up)
*/
@media (min-width: 767px) {
	.mcc_body{ 
		background-size: 270%; 
		background-position: center top;
	}
	
	#menu-front-box .menu-item a{
		width: 120px;
		height: 120px;
		background-color: #ED0B15;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		color: #FFFFFF;
		font-size: 16px;
		font-weight: bold;
		text-decoration: none;
	}

}

/*
// Large devices (desktops, 992px and up)
*/
@media (min-width: 992px) {

	.mcc_body{ 
		background-size: 150%; 
		background-position: center top;
	}
	

	#menu-front-box .menu-item a{
		width: 140px;
		height: 140px;
		background-color: #ED0B15;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		color: #FFFFFF;
		font-size: 18px;
		font-weight: bold;
		text-decoration: none;
	}

}

/*
// Extra large devices (large desktops, 1200px and up)
*/
@media (min-width: 1200px) {

	.mcc_body{ 
		background-size: 120%; 
		background-position: center top;
	}
	
	#menu-front-box .menu-item a{
		width: 180px;
		height: 180px;
		background-color: #ED0B15;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		color: #FFFFFF;
		font-size: 25px;
		font-weight: bold;
		text-decoration: none;
	}

	
}

#menu-front-top .menu-item a{
	color: #FFFFFF;
	display: block;
	padding: .5rem 1rem;
    padding-right: 1rem;
    padding-left: 1rem;	
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

#menu-front-box{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-content: space-around;
	padding: 0px;
}

#menu-front-box .menu-item {
	list-style: none;
}

#menu-front-box .menu-item:nth-child(2) a{
	background-color: #B936B6;
}

#menu-front-box .menu-item:nth-child(3) a{
	background-color: #0C8A36;
}

#menu-front-box .menu-item:nth-child(4) a{
	background-color: #4071FA;
}

#menu-front-box .menu-item:nth-child(5) a{
	background-color: #B97D0F;
}

.black-transparent-bg {
	background-image: url('../images/black_screen.png');
}

#menu-side-menu{
	display: block;
	margin: 0px;
	padding: 0px;
}

#menu-side-menu .menu-item {
	list-style: none;
	margin-bottom: 10px;
}

#menu-side-menu .menu-item a{
	color: #FFFFFF;
	background-color: #0C8A36;
	display: block;
	padding: .5rem 1rem;
    padding-right: 1rem;
    padding-left: 1rem;	
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}