* {
	box-sizing: border-box;
}
:root{
	--taille-police:14px;
	--taille-grande-police:16px;
	--police:"Bahnschrift Light","Segoe UI Light","Calibri","Lato Light","Roboto Light","Helvetica Neue Light","Tahoma Light",sans-serif;
	--couleur-police:DarkSlateBlue;
}
body {
	width:100%;
	background-color:white;
	font-family:var(--police);
	font-size:var(--taille-police);
}


strong {
        color:var(--couleur-police);
	text-shadow: 2px 2px 5px violet;
        font-weight:bold;
}
button{
        background-color:DarkMagenta;
	box-shadow: 2px 2px 5px gray;
        color:white;
        display:inline-block;
        height:30px;
        width:100%;
	border-radius: 5px;
}

a:hover {
	font-weight:bold;
}
h1,h2 {
	color:var(--couleur-police);
	animation: title_anim 5s infinite;
}
h3 {
	color:var(--couleur-police);
	text-shadow: 2px 2px 5px violet;
}

div.entete{
	clear:both;
	width:100%;
}

div.footer {

	clear:both;
	width:100%;
}

div.central_picture {
	height:240px;
	width:100%;
	clear:both;
}

div.cpicture {
	position:relative;
	vertical-align:top;
	text-align:left;
	display:inline-block;
	width:520px;
	padding:10px;
	animation: photo_anim 5s infinite;
	clear:both;
	display:none;
}

div.cpicture > h3 {
	position:absolute;
	text-align:center;
	bottom:10px;
}
div.cpicture > img {
	position:absolute;
	bottom:10px;
	height:211px;
	width:502px;
	clear:both;

}

h3.cpicture{
	text-align:center;
	bottom:10px;
}
img.cpicture {
	position:absolute;
	height:211px;
	width:502px;
	clear:both;

}

div.resumes {
	clear:both;
	width:100%;
}
div.resume {
	float:left;
	width:30%;
	vertical-align:top;
	height:400px;
	padding-left:10px;
	display:inline-block;
}

div.resume_gauche {
	float:left;
	width:100%;
	vertical-align:top;
}
div.resume_centre {
	float:left;
	width:100%;
	vertical-align:top;
}
div.resume_droit {
	float:left;
	width:100%;
	vertical-align:top;
}
.synthese {
	clear:both;
	position:relative;
	left:5%;
	width:90%;
	padding:10px;
	font-family:var(--police);
	font-size:var(--taille-police);
	border-style:solid;
	border-width:2px;
	background-color:#eeeeee;
	text-align:center;
}

.synthese > p{
	left:5%;
  	width:90%;
	padding:2%;
	position:relative;
	background-color:lavender;
	border-color:purple;
	outline-color:silver;
	outline-style:inset;
	text-align:justify;
	font-size:var(--taille-police);
}
p.synthese {
	position:relative;
	left:5%;
	background-color:lavender;
	border-color:purple;
	outline-color:silver;
	outline-style:inset;
	text-align:justify;
	font-size:var(--taille-grande-police);
}
.synthese > ul {
	position:relative;
	left:5%;
	background-color:white;
	border-color:purple;
	outline-color:silver;
	outline-style:inset;
	text-align:justify;
	font-size:var(--taille-grande-police);
	font-family:var(--police);
        font-size:var(--taille-grande-police);
}
.synthese > ul {
	font-size:var(--taille-grande-police);
	text-align: left;
	column-count:2;

}
p.rs {
	text-align:center;
	font-size:var(--taille-grande-police);
	text-align: left;
	column-count:2;

}
p.rs {
	text-align:center;
	width:100%;
	clear:both;
}
img.rs {
	width:2em;
	
}
div.orientation {
	text-align:center;
	position:fixed;
        bottom:0;
	width:100%;
}
img.orientation {
	width:3em;
}
p.notice {
	bckground-color:inherit;
	width:50%;
	font-style:italic;
	text-align:center;
}
p.copyright {
	color:silver;
	font-size:9px;
	font-style:italic;
	text-align:center;
}
table.resumes {
	clear:both;
	width:100%;
	vertical-align:top;
}

tr.resumes {
	height:200px;
	vertical-align:top;
}

td.resume {
	vertical-align:top;
	width:100%;
	padding:5px 5px 5px 5px;
}

div.encapsuleur {
	clear:both;
	width:100%;
}

div.candidat {
	clear:both;
	width:80%;
	
	float:left;
}
table.candidat {
	width:100%;
	animation: photo_anim 5s infinite;
}
td.candidat {
	width:48%;
}
p.candidat {
	font-size:var(--taille-police);
}

.slogan {
	left:0;
	float:left;
	display:inline-block;
	height:40vh;
	font-size:var(--taille-grande-police);
	text-align:right;
	width:40%;
}

.slogan > ul {
	list-style-type:none;
}

.slogan > p {
	font-size:var(--taille-grande-police);
}
div.photo {
	float:right;
	padding-right:40px;
	width:300px;
	background-color:white;
}

img.photo {
	width:250px;
}

.button {
  background-color: DarkMagenta;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}


div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  height:255px;
  width: 150px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}


@keyframes title_anim{
	from { text-shadow: 5px 5px 10px purple;
	     }
	50% { text-shadow: 5px 5px 10px violet;
	    }
	to { text-shadow: 5px 5px 10px navy;
	}
}
@keyframes photo_anim{
	from { box-shadow: 5px 5px 10px purple;
	     }
	30% { box-shadow: 5px 5px 10px violet;
	    }
	60% { box-shadow: 5px 5px 10px navy;
	}
	to { box-shadow: 5px 5px 10px violet;
	    }
}