/****************************************************/

/* RESPONSIVE */

/****************************************************/

@media screen and (max-width: 1200px) {

	#mainpage {
		padding: 0 2em;
	}

	.s1Title {
		font-size: 1.5em;
		line-height: 2.2;
		padding: .5em .5em .5em 3em;
	}

	.s2Title {
		font-size: 1.1em;
		line-height: 2.2;
	}

	#mathematiques .s2Title {
		border-bottom: 4px solid #b3e149;
	}

	#francais .s2Title {
		border-bottom: 4px solid #78C6F6;
	}

	#jeux .s2Title {
		border-bottom: 4px solid #F9C959;
	}

	#clavier .s2Title {
		border-bottom: 4px solid #DD68E8;
	}

	#utilitaires .s2Title {
		border-bottom: 4px solid #fa7354;
	}

	.navLi {
		font-size: 1em;
		margin: 0 .5em 0 0;
	}

}

@media screen and (max-width: 1024px) {

	header {
		margin: 1em 0 2em;
	}

	.appName {
		font-size: .9em;
	}

	#slog {
		margin: 2.5em 0 0;
	}

	.cnxHd {
		font-size: 1.3em;
	}

	.s1Title {
		font-size: 1.4em;
	}

	.s2Title {
		font-size: 1em;
		line-height: 1.9;
	}

	#mathematiques .s2Title {
		border-bottom: 3px solid #b3e149;
	}

	#francais .s2Title {
		border-bottom: 3px solid #78C6F6;
	}

	#jeux .s2Title {
		border-bottom: 3px solid #F9C959;
	}

	#clavier .s2Title {
		border-bottom: 3px solid #DD68E8;
	}

	#utilitaires .s2Title {
		border-bottom: 3px solid #fa7354;
	}

	nav {
		margin: 2em 0 1em;
	}

	footer {
		padding: 1em 0;
	}

}

@media screen and (max-width: 900px) {

	#userNavBox {
		margin: 2.7em 0 0;
	}

	.btBig {
		font-size: 1.2em;
	}

	#cnxTab {
		display: block;
	}

	.tabCnx {
		margin: 0 0 1em;
	}

	#userLogin {
		font-size: 1.2em;
		height: 37px;
		padding: .5em .2em;
	}

	.btCnx {
		font-size: 1.2em;
	}

	.s2Grid {
		grid-template-columns: repeat(5, 1fr);
	}

}

@media screen and (max-width: 800px) {

	.s2Grid {
		grid-template-columns: repeat(4, 1fr);
	}

}

@media screen and (max-width: 700px) {

	.s2Grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.navLi {
		font-size: .9em;
		margin: 0 .3em 0 0;
		padding: .1em .5em .2em;
	}

}

@media screen and (max-width: 600px) {

	header {
		margin: 1em 0;
	}

	#userNavBox {
		margin: .8em 0 0;
	}

	.btBig {
		font-size: 1.1em;
	}

	#logo {
		margin: 0 .5em 0 0;
	}

	#logo img {
		height: auto;
		max-width: 70px;
	}

	#siteName {
		font-size: 2em;
		padding: .2em 0 0 0;
	}

	#slog {
		margin: 1.5em 0 0;
		padding: .4em 1.5em;
	}

}

@media screen and (max-width: 500px) {

	.s2Grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.navLi {
		font-size: .8em;
		margin: 0 .3em .2em 0;
	}

}