@font-face {
	font-family: 'achieve';
	src: url('fonts/ttf/Achieve-Medium.ttf') format('truetype');
}
.centermiddle {
	display: table-cell;
	height: 250px;
	text-align: center;
	width: 2000px;
	/* vertical-align: middle; */
	font-family: 'achieve';
	font-size : large;
}

.centertop {
	display: table-cell;
	height: 100px;
	text-align: center;
	width: 2000px;
	/* vertical-align: middle; */
	font-family: 'achieve';
	font-size : large;
}
		
table {
	width: 100%;
}
td {
	border-bottom: 1px solid #ddd;
	text-align: left;
}
th {
  text-align: center;
}
		
/*ligne noire centrée*/
.vl {
	border-left: 6px solid black;
	height: 200px;
	position: absolute;
	left: 50%;
	margin-left: -3px;
	font-family: 'achieve';
	font-size : large;
}




.normalcenter {
	/*height: 200px;*/
	/*position: absolute;*/
	left: 0%;
	width: 100%;
	font-family: 'achieve';
	font-size : small;
	text-align: center;
	margin-left: 3px;
}

.titel {
	font-size : xx-large; /* 200% */
}
.subtitel {
	font-size : x-large; /* 150% */
}
.mediumtext {
	font-size : medium; 
}

.toplink {
	font-size : medium; 
	text-align: left;
}	
		
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  font-size : small; /* 150% */
  vertical-align: middle;

}

 html {
    /* font-family: Arial, Helvetica, sans-serif; */
	font-family: 'achieve';
} 

.header {
    display: flex;
    align-items: center;
    position: absolute;
    /* background: rgba(0, 0, 0, 0.5); */
	background: rgba(255, 255, 255, 1);
    width: 100%;
}

.header>span {
    /* color: white; */
    display: inline-block;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    letter-spacing: 0.5em;
    margin: 0.25em 0 0.25em 1em;
    font-size: 3em;
}

.bg {
    display: block;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: url("https://res.cloudinary.com/juanafanador07/codepen/only-css-hamburguer-menu/background.jpg");
    background-position: center;
}

#menu-button-check {
    display: none;
}

label[for=menu-button-check]:nth-of-type(1) {
    display: none;
}

.menu a {
    font-size: inherit;
    color: inherit;
    text-decoration: none;
}
input {
	font-family: 'achieve';
	
}
textarea {
	resize: both;
	white-space: pre-line;
} 
@media (min-width: 1023px)
{
	input {
		width:50%;
	}
	textarea {
		width:50%;
	} 
}
@media (min-width: 768px) and (max-width:1023px)
{
	input {
		width:75%;
	}
	textarea {
		width:75%;
	} 
}
@media (max-width: 767px)
{  
	input {

		width:95%;
	}
	textarea {
		width:95%;
	} 
}

/* @media (min-width: 768px) {
    html {
        font-size: 1vw;
    }

    .header {
        box-sizing: border-box;
        width: 100%;
        padding: 0 10%;
    }

    .menu {
        display: inline-block;
        width: 80%;
    }

    .menu ul {
        width: 100%;
        height: 100%;
        text-align: right;
        color: white;
    }

    .menu li {
        display: inline-block;
        font-size: 1.5em;
        margin: 0 2em 0 0;
    }
} */

/* @media (min-width: 768px) and (max-width:1023px) {
    html {
        font-size: 1.5vw;
    }

    .header {
        width: 100%;
        padding: 0;
    }

    .menu {
        width: 95%;
    }
}
 */
/* @media (max-width: 767px) { */
@media  {

    html {
        font-size: 2.5vw;
    }

    .header>span {
        width: 50%;
        text-align: center;
    }

    label[for=menu-button-check]:nth-of-type(1) {
        position: absolute;
        top: 2em;
        /* top: 0.25em; */
        /* color: white; */
        right: 0.5em;
        z-index: 1000;
        /* font-size: 3em; */
        font-size: xx-large;
        font-family: 'achieve', 'Times New Roman', Times, serif;
        font-weight: bold;
        display: inline-block;
    }

    label[for=menu-button-check]:nth-of-type(1):hover {
        cursor: pointer;
    }

    #menu-button-check:checked~.menu {
        animation: show-menu linear 0.1s;
        right: 0;
    }

    #menu-button-check:checked~label[for=menu-button-check]:nth-of-type(1) {
         color: white; 
    }

    .menu {
        display: flex;
        animation: hide-menu linear 0.1s;
        width: 35%;
        height: 100%;
        right: -35%;
        top: 0;
        position: fixed;
        /* background: rgba(0, 0, 0, 0.95); */
        background: rgba(255, 255, 255, 1);
        align-items: center;
        justify-content: center;
        z-index: 999;
    }

    .menu li {
        /* font-size: 1.5em; */
        font-size: large;
        /* color: white; */
        margin: 1em 0;
        list-style: none;
    }

    @keyframes show-menu {
        from {
            right: -35%;
            opacity: 0;
        }

        to {
            right: 0;
            opacity: 1;
        }
    }

    @keyframes hide-menu {
        from {
            right: 0;
            opacity: 1;
        }

        to {
            right: -35%;
            opacity: 0;
        }
    }
}


/*REALISATIONV2*/
/*
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_opacity
*/
*
.RealisationV2_Container {
	position: relative;
}
.RealisationV2_Texte {
	background-color: #FFFFFF;/*#04AA6D;*/
	color: black;
	font-size: medium;
	padding: 16px 32px;
}
.RealisationV2_TexteSmall {
	background-color: #FFFFFF;/*#04AA6D;*/
	color: black;
	font-size: small;
	padding: 16px 32px;
}
.RealisationV2_TexteStatuc {
	color: black;
	font-size: medium;
	padding: 16px 32px;
}

.RealisationV2_Middle {
	transition: 1.5s ease;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-25%, -25%);
	-ms-transform: translate(-25%, -25%);
	text-align: center;
}

.RealisationV2_MiddleStatic {
	position: absolute;
	top: 15%;/*75%*/
	left: 60%;/*50*/
	transform: translate(-25%, -25%);
	-ms-transform: translate(-25%, -25%);
	text-align: center;
}

.RealisationV2_Container:hover .RealisationsV2_Images {
	opacity: 0.3;
}

.RealisationV2_Container:hover .RealisationV2_Middle {
  opacity: 1;
}

.RealisationsV2_Images {
	float:center;
	width:80%;
	object-fit:cover;
	padding: 0;

}

.RealisationV2_Encours {
	border: 1px dashed black;
}


/*REALISATIONV2 GRANDS ECRANS*/
@media (min-width: 1023px)
{
	.RealisationsV2_Titres {
		height: 200px;
		position: absolute;
		left: 0%;
		width: 100%;
		font-family: 'achieve';
		font-size : medium;
		text-align: right;
		margin-left: 3px;
		object-fit: cover;
	}
	
	.RealisationV2_Middle {
		opacity: 0;
	}
	

	.RealisationV2_TexteStatuc {
		font-size: medium;
	}

	.RealisationV2_Texte {
		font-size: medium;
	}
	
	.RealisationsV2_Titres ul {
		display: block;  /* Remove bullet points; allow greater control of positioning */
		padding: 0;      /* Override defaults for lists */
		margin: 0;       /* Override defaults for lists */
		list-style: none;
	}

	.RealisationsV2_Titres li {
		display: block;  /* Remove bullet points; allow greater control of positioning */
		padding: 5px;      /* Override defaults for lists */
		margin: 0px;       /* Override defaults for lists */
		display: inline;
		width: 30%;
		float: left;
		list-style: none;
		object-fit: contain;
	}
	
	.RealisationsV2_Images {
		height:400px;
	}
	
	.RealisationsV2_ImagesDetail {
		float:center;
		width:80%;
		height:400px;
		object-fit:cover;
	}
	


}

/*REALISATIONV2 ECRANS MOYEN*/
@media (min-width: 768px) and (max-width:1023px)
{
	/*texte à gauche de la ligne noire décalée à gauche*/
	.RealisationsV2_Titres {
		height: 200px;
		position: absolute;
		left: 0%;
		width: 100%;
		font-family: 'achieve';
		font-size : medium;
		text-align: right;
		margin-left: 3px;
		object-fit: contain;
	}

	.RealisationV2_Middle {
		opacity: 0;
	}

	.RealisationV2_TexteStatuc {
		font-size: medium;
	}

	.RealisationV2_Texte {
		font-size: medium;
	}
	
	.RealisationsV2_Titres ul {
		display: block;  /* Remove bullet points; allow greater control of positioning */
		padding: 0;      /* Override defaults for lists */
		margin: 0;       /* Override defaults for lists */
		list-style: none;
	}

	.RealisationsV2_Titres li {
		display: block;  /* Remove bullet points; allow greater control of positioning */
		padding: 5px;      /* Override defaults for lists */
		margin: 0px;       /* Override defaults for lists */
		display: inline;
		width: 45%;
		float: left;
		list-style: none;
	}
	
	.RealisationsV2_Images {
		height:400px;
	}
	
	.RealisationsV2_ImagesDetail {
		float:center;
		width:80%;
		height:400px;
		object-fit:cover;
	}

}

/*REALISATIONV2 PETITS ECRANS*/
@media (max-width: 767px)
{
	/*texte à gauche de la ligne noire décalée à gauche*/
	.RealisationsV2_Titres {
		height: 100px;
		/*position: absolute;*/
		left: 0%;
		width: 100%;
		font-family: 'achieve';
		font-size : medium;
		text-align: center;
		object-fit: contain;
	}

	.RealisationV2_TexteStatuc {
		font-size: small;
	}

	.RealisationV2_Texte {
		font-size: small;
	}


	.RealisationsV2_Titres ul {
		display: block;  /* Remove bullet points; allow greater control of positioning */
		padding: 0;      /* Override defaults for lists */
		margin: 0;       /* Override defaults for lists */
	}

	.RealisationsV2_Titres li {
		display: block;  /* Remove bullet points; allow greater control of positioning */
		padding: 0px;      /* Override defaults for lists */
		margin: 20px;       /* Override defaults for lists */
		object-fit: contain;
	}
	
	.RealisationsV2_Images {
		height:300px;
	}

	.RealisationsV2_ImagesDetail {
		float:center;
		width:80%;
		height:300px;
		object-fit:cover;
	}
}


/*ANCIENNE PAGE REALISATION*/
@media (min-width: 1023px)
{
	/*ligne noirée décalée à gauche*/
	.Realisation_VL {
		border-left: 6px solid black;
		height: 200px;
		position: absolute;
		left: 30%;
		margin-left: -3px;
		font-family: 'achieve';
		font-size : large;
	}
	/*texte à droite de la ligne noire décalée à gauche*/
	.Realisations_Images {
		height: 200px;
		position: absolute;
		left: 33%;
		font-family: 'achieve';
		font-size : medium;
	}
	
	/*texte à gauche de la ligne noire décalée à gauche*/
	.Realisations_Titres {
		height: 200px;
		position: absolute;
		left: 0%;
		width: 27%;
		font-family: 'achieve';
		font-size : medium;
		text-align: right;
		margin-left: 3px;
	}

	.Realisations_Titres ul {
		display: block;  /* Remove bullet points; allow greater control of positioning */
		padding: 0;      /* Override defaults for lists */
		margin: 0;       /* Override defaults for lists */
	}

	.Realisations_Titres li {
		display: block;  /* Remove bullet points; allow greater control of positioning */
		padding: 0px;      /* Override defaults for lists */
		margin: 20px;       /* Override defaults for lists */
	}	
	
	.slides {
		width: 609px;
		height: 420px;
		object-fit: cover;
	}

	.slide {
		width: 609px;
		height: 420px;
		object-fit: cover;
	}
}





@media (min-width: 768px) and (max-width:1023px)
{
	/*ligne noirée décalée à gauche*/
 	.Realisation_VL {
		border-left: 6px solid black;
		height: 200px;
		position: absolute;
		left: 30%;
		margin-left: -3px;
		font-family: 'achieve';
		font-size : large;
	}
	/*texte à droite de la ligne noire décalée à gauche*/
	.Realisations_Images {
		height: 200px;
		position: absolute;
		left: 33%;
		font-family: 'achieve';
		font-size : medium;
	}
	
	/*texte à gauche de la ligne noire décalée à gauche*/
	.Realisations_Titres {
		height: 200px;
		position: absolute;
		left: 0%;
		width: 27%;
		font-family: 'achieve';
		font-size : medium;
		text-align: right;
		margin-left: 3px;
	}

	.Realisations_Titres ul {
		display: block;  /* Remove bullet points; allow greater control of positioning */
		padding: 0;      /* Override defaults for lists */
		margin: 0;       /* Override defaults for lists */
	}

	.Realisations_Titres li {
		display: block;  /* Remove bullet points; allow greater control of positioning */
		padding: 0px;      /* Override defaults for lists */
		margin: 20px;       /* Override defaults for lists */
	}	
	
	.slides {
		width: 609px;
		height: 420px;
		object-fit: cover;
	}

	.slide {
		width: 609px;
		height: 420px;
		object-fit: cover;
	}
}
@media (max-width: 767px)
{
	/*pas de ligne noire*/
	.Realisation_VL {

	}
	/*texte à droite de la ligne noire décalée à gauche*/
	.Realisations_Images {
		/*height: 200px;*/
		/*position: absolute;*/
		left: 0%;
		width:100%;
		font-family: 'achieve';
		font-size : medium;
	}
	
	/*texte à gauche de la ligne noire décalée à gauche*/
	.Realisations_Titres {
		height: 100px;
		/*position: absolute;*/
		left: 0%;
		width: 100%;
		font-family: 'achieve';
		font-size : medium;
		text-align: center;
	}

	.Realisations_Titres ul {
		display: block;  /* Remove bullet points; allow greater control of positioning */
		padding: 0;      /* Override defaults for lists */
		margin: 0;       /* Override defaults for lists */
		list-style: none;
	}

	.Realisations_Titres li {
		display: block;  /* Remove bullet points; allow greater control of positioning */
		padding: 5px;      /* Override defaults for lists */
		margin: 0px;       /* Override defaults for lists */
		display: inline;
		width: 30%;
		float: left;
		list-style: none;
	}

	.slides {
		width: 400px;
		height: 275px;
		object-fit: cover;
	}

	.slide {
		width: 400px;
		object-fit: cover;
		/* height: 275px; */
	}
}	


/*
Slider : 
https://freshdesignweb.com/jquery-image-slider-slideshow.html
https://codepen.io/AMKohn/pen/DZYKEV
*/

/* @import url(https://fonts.googleapis.com/css?family=Varela+Round); */

/* html, body { background: #333 url("https://codepen.io/images/classy_fabric.png"); } */



.slides {
    padding: 0;
    display: block;
    margin: 0 auto;
    position: relative;
}

.slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.slides input { display: none; }

.slide-container { display: block; }

.slide {
    top: 0;
    opacity: 0;
    display: block;
    position: absolute;
    transform: scale(0);
    transition: all .7s ease-in-out;
}

.slide img {
    width: 100%;
    height: 100%;
}

.nav label {
    width: 200px;
    height: 100%;
    display: none;
    position: absolute;

	opacity: 0;
    z-index: 9;
    cursor: pointer;

    transition: opacity .2s;

    color: #FFF;
    font-size: 156pt;
    text-align: center;
    line-height: 380px;
    font-family: 'achieve';/*"Varela Round", sans-serif;*/
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container  .slide {
    opacity: 1;

    transform: scale(1);

    transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .nav label { display: block; }

.nav-dots {
	width: 100%;
	bottom: 9px;
	height: 11px;
	display: block;
	position: absolute;
	text-align: center;
}

.nav-dots .nav-dot {
	top: -5px;
	width: 11px;
	height: 11px;
	margin: 0 4px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover {
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.8);
}

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6 {
	background: rgba(0, 0, 0, 0.8);
}

/*
AJOUT PERSO
Légendes
*/
.slideLegende {
	width: 100%;
	top: 9px;
	height: 11px;
	display: block;
	position: absolute;
	text-align: center;
}
.slideSubLegend {
	width: 100%;
	top: 30px;
	height: 11px;
	display: block;
	position: absolute;
	text-align: center;
}