/****************************************/
/*         MEDIA QUERIES           /*
/***************************************/

/* Seulement ce qui change */
@media screen and (max-width : 1520px) {
#canvas {
	width: 1000px;
	height: 563px;

	}
}

@media screen and (max-width : 1230px) {
#canvas {
	width: 853px;
	height: 480px;

	}
}

@media screen and (max-width : 1070px) {
#canvas {
	width: 750px;
	height: 422px;

	}
}





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

	
	footer ul li {
		display: inline-block;
		padding: 0 2.5em;
	}
	
	h2 {

	font-size: 150%;
	font-weight: 100;
	}
	
	#logo img {
	width: 80px;
	height: 80px;
	}
	
	#canvas {
	width: 650px;
	height: 366px;

	}
}
}



@media screen and (max-width : 975px) {
#canvas {
	width: 650px;
	height: 366px;

	}
}

@media screen and (max-width : 880px) {
#canvas {
	width: 600px;
	height: 338px;

	}
}

@media screen and (max-width : 815px) {
#canvas {
	width: 450px;
	height: 253px;

	}
}

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

	#nav-princ {
		background: #000;	
	
	}
	
	#nav-princ ul {
		margin-top: 10px;	
	}
	
	#nav-princ li {
		float: left;
		margin: 0.3em 0;
	}
	
	/* :checked pseudo-classe représente les cases à cocher */
	/* + ul -> ul consécutif (suivant) la case à cocher */
	input#menu-mobile:checked + ul {
		font-size: 100%;
	}
	
	input#menu-mobile:not(:checked) + ul 
	{ 
		font-size: 0;
	}
	
	/*input#menu-mobile:checked + ul li { display: inline-block;}*/
	
	input#menu-mobile:not(:checked) + ul li 
	{
		display: none !important;	
	}
	
	#nav-princ ul + label:hover { cursor: pointer;}
	#nav-princ ul + label { display: block;}
	#nav-princ  label { display: block;}
	
	#nav-princ {
		height: auto;
		width: 100%;
	}
	
	#nav-princ ul li {
		display: block;
		text-align: center;
		width: 50%;
	}
	
	#nav-princ ul li:nth-child(2) a, #nav-princ ul li:nth-child(4) a, #nav-princ ul li:nth-child(6) a, #nav-princ ul li:nth-child(8) a 
	{
	
	}
	
	#nav-princ ul li a, #nav-princ ul li:first-child a, #nav-princ ul li a:visited, #nav-princ ul li:first-child a:visited {
		
	}
	
	footer ul li {
		display: inline-block;
		padding: 0 1.5em;
	}
	
	h2 {

	font-size: 150%;
	font-weight: 100;
	}
	
	#canvas {
	width: 400px;
	height: 225px;

	}


	
}

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

	font-size: 170%;
	
	}
	
	#logo img {
	width: 70px;
	height: 70px;
	margin-top: 4px
	}
	
	#canvas {
	width: 350px;
	height: 197px;

	}
}

	

@media screen and (max-width : 560px) {
	
	#logo img {
	width: 70px;
	height: 70px;
	margin-top: 4px;
	}
	
	h1 {

	font-size: 130%;
	
	}
	
	h2 {


	font-size: 100%;


	}
	
	.imgpopup {
	width: 40%;
	height: 40%;
	}
	
	
	#ex11 {
	
	left: 1px;
	}
	
	#ex22 {
	
	left: 1px;
	}
	
	#ex1 img {
	
	width: 50%;
	height: 50%;
	}
	
	p {
	font-size: 80%;
	
	}
	
	#canvas {
	width: 250px;
	height: 141px;

	}

}


@media screen and (max-width : 450px) {
	
	#logo img {
	width: 65px;
	height: 65px;
	margin-top: 7px;
	}
	
	#nav-princ ul li {
		float: none;
		width: 100%;
	}
	
	#nav-princ ul li:nth-child(2) a, #nav-princ ul li:nth-child(4) a, #nav-princ ul li:nth-child(6) a, #nav-princ ul li:nth-child(8) a {
		border-left: none;
	}
	
	footer li {
		float: none;
		margin-bottom: 8px;
		width: 100%;
	}
	
	h2
	{
		font-size: 100%;
	}
	
	h1 {

	font-size: 130%;
	
	}
	
	p {
	font-size: 90%;
	
	}
	
	.imgpopup {
	width: 25%;
	height: 25%;
	}
	
	#ex11 {

	bottom: 12%;
	left: 1px;
	}

	#ex22 {
	bottom: 21%;
	left: 1px;
	
	}
	
	#canvas	 {
	width: 250px;
	height: 141px;

	}

}

@media screen and (max-width : 400px) {
	
	#ex1 img {
	margin-top: 20px;
	width: 60px;
	height: 60px;
	}
	
	
	h2
	{
		font-size: 120%;
	}
	
	h1 {
	font-size: 105%;
	
	}
	
	p {
	font-size: 90%;
	
	}
	
	.imgpopup {
	width: 30%;
	height: 30%;
	}
	
	#ex11 {

	bottom: 12%;
	}

	#ex22 {
	bottom: 21%;
	
	}
	
	
}


@media screen and (max-width : 350px) {
	.invisible 
	{
		display: none !important;
	}
	
	h2
	{
		font-size: 120%;
	}
	
	h1 {
	font-size: 100%;
	
	}
	
	p {
	font-size: 90%;
	
	}
	
	.imgpopup {
	width: 25%;
	height: 25%;
	}
	
	#ex11 {

	bottom: 12%;
	left: 0;
	}

	#ex22 {
	bottom: 20%;
	left: 0;
	
	}
	
}

@media screen and (max-width : 320px) {
	
	
	
	h1 {
	font-size: 100%;
	
	}
	
	h2 {
	font-size: 100%;
	font-weight: 100;
	}
	
	p {
	font-size: 90%;
	margin: 5px;
	}
	
	.imgpopup {
	width: 25%;
	height: 25%;
	}
	
	#ex11 {

	bottom: 12%;
	left: 12%;
	}

	#ex22 {
	bottom: 12%;
	left: 34%;
	
	}
}