/****************************************/
/*         MEDIA QUERIES           /*
/***************************************/
@media screen and (min-width : 1101px) {
	#nav-princ li:last-child a {
		margin-right: 0em;
	}
}

@media screen and (max-width : 1370px) {
	#a-propos #texte {
		display: initial;
	}
}

@media screen and (max-width : 1366px) {
	#accueil .overlay {
		top: 9.5%;
	}
	
	#video_accueil video {
		display: none;
	}
}

@media screen and (max-width : 1366px) and (min-width : 1201px) {
	section#realisations span.h4 {
		font-size: 120%;
	}
}

@media screen and (max-width : 1200px) and (min-width : 1101px) {
	section#realisations span.span, .modalbox-sources  span.span {
		padding: 0.5em;
	}
	
	section#realisations span.h3, .modalbox-sources  span.h3 {
		font-size: 150%;
	}
	
	section#realisations span.h4 {
		font-size: 100%;
	}
	
	section#realisations span.p {
		font-size: 70%;
	}
}

@media screen and (max-width : 1100px) {
	input#menu-mobile:checked +  #nav-princ {
		opacity: 1;
		transform: translateX(0px);
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		transition: all 0.5s;
	}
	
	input#menu-mobile:not(:checked) +  #nav-princ  {
		opacity: 0;
	}
	
	#menu-icon { 
		opacity: 1;
	}
	
	header label {
		display: block; 
		opacity: 1;
	}
	
	header label:hover, header label:visited { cursor: pointer;}
	
	#nav-princ {
		position: fixed;
		width: 325px;
		height: 100vh;
		top: 0;
		right: 0;
		z-index: 50;
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
	
	#nav-princ ul {
		flex-direction: column;
		justify-content: center;
		background-color: #333333;
		height: 100%;
	}
	
	#nav-princ ul li {
		position: relative;
		text-align: center;
		margin: 0;
		padding: 0;
		opacity: 1;
		font-size: 100%;
	}
	
	#nav-princ ul li:not(:last-of-type) {
		padding-bottom: 30px;
		margin-bottom: 30px;
	}
	
	#nav-princ ul li:not(:last-of-type)::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 60px;
		height: 1px;
		background-color: #999999;
		margin-left: -30px;
	}
	
	#nav-princ li a {
		text-transform: uppercase;
		opacity: 1;
	}
	
	#nav-princ li a:hover {
		color: #24729D;
	}
	
	#nav-princ li a.active {
		border: none;
		color: #24729D;
		font-weight: bold;
	}
	
	#accueil .overlay {
		top: 6.5%;
	}
	
	section#realisations div.mix {
		width: 50%;
	}
	
	#a-propos .content h3 {
		margin-bottom: 15px;
	}
}

@media screen and (max-width : 1074px) {
	#accueil #nom {
		font-size: 170%;
	}

	#a-propos #picture {
		padding-top: 0;
	}
}

@media screen and (max-width : 824px)  {
	#accueil #nom {
		font-size: 140%;
	}

	#a-propos #picture p{
		float: none;
		width: 60%;
		margin: 0 auto;
	}
	
	#a-propos #texte p {
		clear: both; 
		margin-top: 20px;
		margin-bottom: 20px;
	}
}

@media screen and (max-width : 800px)  {
	header label {
		-webkit-transition: all 0.8s;
		-moz-transition: all 0.8s;
		transition: all 0.8s;
	}

	section#realisations div.mix {
		width: 50%;
	}

	section#realisations span.span, .modalbox-sources  span.span {
		padding: 0.8em;
	}
	
	section#realisations span.h3, .modalbox-sources  span.h3 {
		font-size: 200%;
	}
	
	section#realisations span.h4 {
		font-size: 100%;
	}
	
	section#realisations span.p {
		font-size: 80%;
	}
}

@media screen and (max-width : 760px) {
	#accueil .overlay {
		top: 4%;
	}
	
	#accueil p{
		font-size: 150%;
	}
	
	#contact {
		height: auto;
	}
	
	#contact .content {
		flex-direction: column-reverse;
	}
	
	#contact h3 {
		margin: 0;
		padding-bottom: 15px;
		line-height: 0.9;
	}
	
	#carte {
		width: 100%;
	}
	
	#carte iframe {
		height: 200px;
	}
	
	#coordonnee {
		width: 100%;
		padding: 1em;
	}
	
	#coordonnee h4 {
		padding: 0;
	}
	
	#adresse {
		padding-bottom: 15px;
	}
	
	#joindre p:first-child {
		padding: 0;
	}
}

@media screen and (max-width : 693px) {
	#accueil #nom {
		font-size: 110%;
	}
	
	#accueil p {
		font-size: 130%;
	}

	section#realisations span.h3, .modalbox-sources  span.h3 {
		font-size: 150%;
	}
}

@media screen and (max-width : 600px) {
	#accueil .overlay {
		top: 3.5%;
	}
	
	#accueil p {
		font-size: 110%;
	}
}

@media screen and (max-width : 504px) {
	#accueil .overlay {
		top: 1.5%;
	}
	
	#accueil p {
		font-size: 150%;
	}
  
	section#realisations div.controls {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	
	section#realisations div.controls button:hover {
		padding: 0 0.6em;
	}
	
	a#cv:hover {
		padding: 0 0.3em;
	}

	section#realisations div.mix {
		width: 100%;
	}
	
	section#realisations span.span, .modalbox-sources  span.span{
		padding: 1em;
	}

	section#realisations span.h3, .modalbox-sources  span.h3 {
		font-size: 250%;
	}
	
	section#realisations span.h4 {
		font-size: 150%;
	}
	
	section#realisations span.p {
		font-size: 110%;
	}
	
	footer {
		font-size: 70%;
	}
}

@media screen and (max-width : 480px) {
	#accueil p {
		font-size: 110%;
	}
}

@media screen and (max-width : 417px) {
	#accueil .overlay {
		top: 3.5%;
	}
	
	#accueil #nom {
		font-size: 130%;
	}
	
	#accueil p {
		font-size: 150%;
	}
	
	#realisations h3{
		font-size: 200%;
	}
	
	section#realisations span.span, .modalbox-sources  span.span {
		padding: 0.4em;
	}
	
	section#realisations span.h3, .modalbox-sources  span.h3 {
		font-size: 200%;
	}
	
	section#realisations span.h4 {
		font-size: 100%;
	}
	
	section#realisations span.p {
		font-size: 80%;
	}
	
	.visible { display: none;}
}

@media screen and (max-width : 360px) {
	#accueil #nom {
		font-size: 120%;
	}
	
	section#realisations span.span, .modalbox-sources  span.span {
		padding: 0.5em;
	}
	
	section#realisations span.h3, .modalbox-sources  span.h3 {
		font-size: 150%;
	}
}

@media screen and (max-width : 348px) {
	#accueil p {
		font-size: 110%;
	}
	
	#coordonnee {
		font-size: 90%;
	}
	
	#scroll-up a {
		height: 70px;
		width: 70px;
	}
}

@media screen and (max-width : 320px) {
	#accueil #nom {
		font-size: 110%;
	}
	
	section#realisations span.span, .modalbox-sources  span.span {
		padding: 0.5em;
	}
	
	section#realisations span.h3, .modalbox-sources  span.h3 {
		font-size: 140%;
	}
	
	section#realisations span.p {
		font-size: 70%;
	}
}

@media screen and (max-width : 480px) and (max-height : 320px) {
	#nav-princ ul li {
		font-size: 80%;
	}
}