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

#thematics
{
	width: 100%;
	height: 100%;
	
	display: flex;
	flex-wrap: wrap;
	align-content: space-around;
	
	margin: 10px auto;
	padding: 0;
	
	text-align: center;
}

.thematic
{
	height: 100%;
	
	display: flex;
	flex-wrap: wrap;
	align-content: space-around;
	
	text-align: center;

	background-color: white;
	color: #373737 !important;
	text-decoration: none;
	
	filter: drop-shadow(5px 10px 5px rgba(0,0,0,0.3));
}

.thematic:hover
{
	text-decoration: underline;
	cursor: pointer;
	color: inherit !important;
	font-weight: inherit !important;
}

.thematic h2
{
	width: 100%;
	
	margin: 0;
	padding: 0;
	float: left;
	
	text-align: left;
	color: #C88F1A;
}

.thematic h3
{
	width: 100%;
	
	margin: 0;
	padding: 0;
	float: left;
	
	font-size: 22px;
	text-align: left;
}

.thematic p
{
	float: left;
	
	width: 100%;
	height: 50px;
	
	margin: 0;
	padding: 0;

	text-align: left;
	font-size: 20px;
	font-weight: normal;
}

.thematic div
{
	float: left;
	
	width: 100%;
	
	margin: auto;
}

.thematic img
{
	max-width: 100%;
	margin: auto;
}

/* RESPONSIVE */

@media only screen and (min-width: 841px) /* portrait tablet */
{
	.thematic
	{
		width: calc(100% / 2.08);
		height: 600px;
		
		padding: 10px;
		margin: 5px auto;
	}
	
	.thematic img
	{
		height: 80px;
		margin-bottom: 10px;
 	}
	
	.thematic h2
	{
		height: 150px;
		font-size: 20px;
		padding: 0;
		margin: 0;
	}

	.thematic h3
	{
		height: 60px;
		font-size: 18px;
		padding: 0;
		margin: 0;
	}

	.thematic p
	{
		font-size: 18px;
		height: 110px;
	}
}

@media only screen and (max-width: 840px) /* portrait mobile */
{
	.thematic
	{
		width: 90%;
		height: 600px;
		
		padding: 20px;
		margin: 5px auto;
	}
	
	.thematic img
	{
		height: 120px;
 	}
	
	.thematic h2
	{
		height: 110px;
		font-size: 20px;
		padding: 0;
		margin: 0;
	}

	.thematic h3
	{
		height: 80px;
		font-size: 18px;
		padding: 0;
		margin: 0;
	}

	.thematic p
	{
		font-size: 18px;
		height: 110px;
	}
}

@media only screen and (min-width : 1825px) /* desktop */
{
	.thematic
	{
		width: calc(100% / 3.5);
		height: 550px;
		
		padding: 20px;
		margin: 5px auto;
	}
	
	.thematic img
	{
		height: 80px;		
 	}
	
	.thematic h2
	{
		height: 120px;
		font-size: 20px;
		padding: 0;
		margin: 0;
	}

	.thematic h3
	{
		height: 80px;
		font-size: 18px;
		padding: 0;
		margin: 0;
	}

	.thematic p
	{
		font-size: 18px;
		height: 150px;
	}
}

@media 	only screen and 
		(orientation: landscape) and 
		(min-width: 1601px) and 
		(max-width: 1824px) 
		/* desktop */
{
	.thematic
	{
		width: calc(100% / 3.5);
		height: 550px;
		
		padding: 20px;
		margin: 5px auto;
	}
	
	.thematic img
	{
		height: 80px; 	
	}
	
	.thematic h2
	{
		height: 150px;
		font-size: 20px;
		padding: 0;
		margin: 0;
	}

	.thematic h3
	{
		height: 80px;
		font-size: 18px;
		padding: 0;
		margin: 0;
	}

	.thematic p
	{
		font-size: 18px;
		height: 150px;
	}
}

@media 	only screen and 
		(orientation: landscape) and 
		(min-width: 1225px) and 
		(max-width: 1600px) 
		/* laptop */
{
	.thematic
	{
		width: calc(100% / 3.08);
		height: 550px;
		
		padding: 10px;
		margin: 5px auto;
	}
	
	.thematic img
	{
		height: 80px;				
 	}
	
	.thematic h2
	{
		height: 150px;
		font-size: 20px;
		padding: 0;
		margin: 0;
	}

	.thematic h3
	{
		height: 80px;
		font-size: 18px;
		padding: 0;
		margin: 0;
	}

	.thematic p
	{
		font-size: 18px;
		height: 150px;
	}
}

@media 	only screen and 
		(orientation: landscape) and 
		(min-width: 961px) and 
		(max-width: 1224px) 
		/* landscape tablet */
{
	.thematic
	{
		width: calc(100% / 3.08);
		height: 550px;
		
		padding: 10px;
		margin: 5px auto;
	}
	
	.thematic img
	{
		height: 80px;				
 	}
	
	.thematic h2
	{
		height: 200px;
		font-size: 20px;
		padding: 0;
		margin: 0;
	}

	.thematic h3
	{
		height: 80px;
		font-size: 18px;
		padding: 0;
		margin: 0;
	}

	.thematic p
	{
		font-size: 18px;
		height: 150px;
	}
}

@media only screen and (orientation: landscape) and (max-device-width: 960px) /* landscape mobile */
{
	.thematic
	{
		width: calc(100% / 2.08);
		height: 450px;
		
		padding: 10px;
		margin: 5px auto;
	}
	
	.thematic img
	{
		height: 220px;
 	}
	
	.thematic h2
	{
		height: 55px;
		font-size: 22px;
		padding: 0;
		margin: 0;
	}

	.thematic h3
	{
		height: 35px;
		font-size: 18px;
		padding: 0;
		margin: 0;
	}

	.thematic p
	{
		font-size: 18px;
		height: 50px;
	}
}