/*
    Lisa Monpierre
    EFRITS SAS
 
    Training center website
    Dec. 2021
*/

#squaresView
{
	height: 100%;
	width: 100%;

	display: flex;
	flex-wrap: wrap;
	align-content: space-around;
	margin: 0;
	padding: 0;
}

#squaresView a
{
	height: 200px;
	margin: 4px;
}

.squareView
{
	display: flex;
	flex-wrap: wrap;
	align-content: space-around;
	margin: 0;
	padding: 0;
	color: black;

	text-align: center;
	text-decoration: none;
}
.squareView:hover
{
	color: #00FF00;
}

.squareView p
{
	width: 100%;

	margin: auto;
	padding: 0 15px;
	text-align: center;
	font-weight: bold;
}

.squareView div
{
	height: 100%;
	width:100%;

	background-position: center center;
	background-size:100% 100%;

	display: flex;
	flex-wrap: wrap;
	align-content: space-around;
	margin: 0;
	padding: 0;
	text-align: center;
	vertical-align: middle;
}

.squareView img
{
	max-height: 100%;
	max-width: 	150px;

	margin: 10px auto;
	padding: 0;
	text-align: center;
	vertical-align: middle;
}

#squareViewMiddleId
{
	display:block;
}

#squareEffectViewId
{
	border: 0 transparent;
}

.squareEffectView
{
	border: #00FF00 solid 0.15em;
}

/* RESPONSIVE */

@media 	only screen and 
		(min-width: 741px) 
		/* portrait tablet */
{
	#squareViewMiddleId
	{
		display:none;
	}
	#squaresView a
	{
		height: 200px;
		width: calc(100% / 2.2);
		margin: 4px;
	}

}

@media 	only screen and 
		(max-width: 740px) 
		/* portrait mobile */
{
	#squareViewMiddleId
	{
		display:none;
	}
	#squareViews a
	{
		width: calc(100% / 2);
	}
	#squaresView a
	{
		height: 200px;
		width: calc(100% / 2.2);
		margin: 4px auto;
	}

}

@media 	only screen and 
		(min-width : 1825px) 
		/* desktop */
{
	#squareViewMiddleId
	{
		display:block;
	}
	#squaresView a
	{
		height: 200px;
		width: calc(100% / 3.2);
		margin: 4px;
	}

}

@media 	only screen and 
		(orientation: landscape) and 
		(min-width: 1601px) and 
		(max-width: 1824px) 
		/* desktop */
{
	#squareViewMiddleId
	{
		display:block;
	}
	#squaresView a
	{
		height: 200px;
		width: calc(100% / 3.2);
		margin: 4px;
	}

}

@media 	only screen and 
		(orientation: landscape) and 
		(min-width: 1225px) and 
		(max-width: 1600px) 
		/* laptop */
{
	#squareViewMiddleId
	{
		display:block;
	}
	#squaresView a
	{
		height: 200px;
		width: calc(100% / 3.2);
		margin: 4px;
	}

}

@media 	only screen and 
		(orientation: landscape) and 
		(min-width: 961px) and 
		(max-width: 1224px) 
		/* landscape tablet */
{
	#squareViewMiddleId
	{
		display:none;
	}
	#squaresView a
	{
		height: 200px;
		width: calc(100% / 2.2);
		margin: 4px;
	}

}

@media 	only screen and 
		(orientation: landscape) and 
		(max-device-width: 960px) 
		/* landscape mobile */
{
	#squareViewMiddleId
	{
		display:none;
	}
	#squaresView a
	{
		height: 200px;
		width: calc(100% / 2.2);
		margin: 4px;
	}

}