body {
	width: 100%;
	height: 100%;
	background-color: #2a2c2e;
	font-family: 'Comfortaa', cursive;
	color: #7e7f7f;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
}

/* Header */

header {
	background-color: #1a1a1a;
	width: 100%;
	margin-top: 0px;
	margin: auto;
	color: #7e7f7f;
	font-size: 1.3em;
	font-family: 'Comfortaa', cursive;
	padding-top: 0.75em;
	padding-bottom: 0.6em;
	margin-left: 0px;
	margin-right: 0px;
	/*overflow: auto;*/
}

.contenuMenu {
	width: 90%;
	margin: auto;
	vertical-align: middle;
	/*overflow: auto;*/
}

.cartouche {
	font-size: 1.3em;
	display: inline-block;
	/*vertical-align: middle;*/
}

.contenuLiens {
	margin-right: 0px;
	text-align: right;
	display: inline-block;
	float: right;
	/*overflow: auto;*/
	/*vertical-align: middle;*/
}

.lienMenu {
	text-decoration: none;
	color: #7e7f7f;
	font-size: 0.8em;
	padding-left: 1em;
	padding-right: 1em;
}

.burger {
	/*display: inline-block;*/
	display: none;
}

.burger div {
	background-color: #7e7f7f;
	width: 25px;
	height: 25px;
	height: 3px;
	margin: 5px;
}


.menuResp {
	/*
	background-color: #1a1a1a;
	position: absolute;
	right: 0px;
	display: flex;*/
	display: none;
}










#accueil {
	color: #7e7f7f;
	transition: 0.5s;
}

#about {
	color: #7e7f7f;
	transition: 0.5s;
}

#skill {
	color: #7e7f7f;
	transition: 0.5s;
}

#contact {
	color: #7e7f7f;
	transition: 0.5s;
}

#accueil:hover {
	color: #ffd866;
}

#about:hover {
	color: #03ffff;

}

#skill:hover {
	color: #00ff00;

}

#contact:hover {
	color: #ff9a00;
}

/* FIN Header */

main {
	background-color: #2a2c2e;
	width: 85%;
	height: 100%;
	margin: auto;
	border-radius: 10px;
	margin-bottom: 1em;
}

.contenu {
	padding-top: 2.5em;
	padding-bottom: 2.5em;
	padding-left: 3em;
	padding-right: 3em;
}

/* Texte Accueil */

.textMain {
	font-size: 1.7em;
	line-height: 1.7em;
	color: #FFFFFF;
	font-weight: bold;
}

/*
.textAbout {
	width: 100%;
	font-size: 1.7em;
	line-height: 1.7em;
	color: #FFFFFF;
}
*/

.boutonContact {
	width: 25%;
	font-size: 1.2em;
	color: #03ffff;
	border: #03ffff 2px solid;
	border-radius: 4px;
	padding-left: 1.2em;
	padding-right: 1.2em;
	padding-top: 1em;
	padding-bottom: 1em;
	transition: 0.5s;
	text-align: center;
}

.boutonContact:hover {
	box-shadow: 0 1px 10px 0 #03ffff inset,
				0 1px 10px 0 #03ffff,
				0 1px 10px 0 #03ffff inset,
				0 1px 10px 0 #03ffff;
}

.boutonCV {
	width: 25%;
	font-size: 1.2em;
	color: #00ff00;
	border: #00ff00 2px solid;
	border-radius: 4px;
	padding-left: 1.2em;
	padding-right: 1.2em;
	padding-top: 1em;
	padding-bottom: 1em;
	transition: 0.5s;
	text-align: center;
}

.boutonCV:hover {
	box-shadow: 0 1px 10px 0 #00ff00 inset,
				0 1px 10px 0 #00ff00,
				0 1px 10px 0 #00ff00 inset,
				0 1px 10px 0 #00ff00;
}

/* Compétences */

.lien {
	text-decoration: none;
	color: #7e7f7f;
}

.titre {
	font-size: 1.7em;
	color: #FFFFFF;
}

.blocCompetences {
	width: 30%;
	padding-right: 3em;
	display: table-cell;
}

.general {
	display: table-cell;
	width: 30%;
	padding-left: 3em;
	padding-right: 3em;
}

/* Formation */

.formation {
	width: 12em;
	padding-left: 2em;
	padding-right: 2em;
	padding-top: 1.5em;
	padding-bottom: 1.5em;
	border: #03ffff 1px solid;
	border-radius: 4px;
	transition: 0.5s;
}

.formation:hover {
		box-shadow: 0 1px 10px 0 #03ffff inset,
				0 1px 10px 0 #03ffff,
				0 1px 10px 0 #03ffff inset,
				0 1px 10px 0 #03ffff;
}

.nomFormation {
	color: #03ffff;
	font-size: 1.2em;
}

.dureeFormation {
	font-size: 1em;
}

/* Progress Linéaire */

.niveauTotal {
	width: 100%;
	background-color: #1a1a1a;
	padding: 4px;
	border: #03ffff 1px solid;
	border-radius: 6px;
}

.niveauTotalCI {
	width: 40%;
	background-color: #1a1a1a;
	padding: 4px;
	border: #03ffff 1px solid;
	border-radius: 6px;
}

.niveau {
	height: 5px;
	background-color: #03ffff;
	border-radius: 10px;
}

#java {
	width: 0%;
}

#htmlcss {
	width: 0%;
}

#phpjs {
	width: 0%;
}

#sql {
	width: 0%;
}

#linux {
	width: 0%;
}

#chess {
	width: 0%;
}

#karate {
	width: 0%;
}

#bricolage {
	width: 0%;
}

/* Progress Circulaire */

.boite {
	width: 170px;
	height: 170px;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.pourcentage {
	opacity: 0;
}

.boite .pourcentage {
	position: relative;
	width: 150px;
	height: 150px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.boite .pourcentage svg {
	position: relative;
	width: 150px;
	height: 150px;
}

.boite .pourcentage svg circle {
	position: relative;
	width: 150px;
	height: 150px;
	fill: none;
	stroke-width: 10;
	stroke: #00ff00;
	transform: translate(5px, 5px);
	stroke-dasharray: 440;
	stroke-dashoffset: 440;
	stroke-linecap: round;
}

.boite .pourcentage svg circle:nth-child(1) {
	stroke-dashoffset: 0;
	stroke: #7e7f7f;
}

.boite .pourcentage svg circle:nth-child(2) {
	stroke-dashoffset: calc(440 - (440 * 90) / 100);
	stroke: #00ff00;
}

/* No 2 */

.boite2 {
	width: 170px;
	height: 170px;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.pourcentage2 {
	opacity: 0;
}

.boite2 .pourcentage2 {
	position: relative;
	width: 150px;
	height: 150px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.boite2 .pourcentage2 svg {
	position: relative;
	width: 150px;
	height: 150px;
}

.boite2 .pourcentage2 svg circle {
	position: relative;
	width: 150px;
	height: 150px;
	fill: none;
	stroke-width: 10;
	stroke: #00ff00;
	transform: translate(5px, 5px);
	stroke-dasharray: 440;
	stroke-dashoffset: 440;
	stroke-linecap: round;
}

.boite2 .pourcentage2 svg circle:nth-child(1) {
	stroke-dashoffset: 0;
	stroke: #7e7f7f;
}

.boite2 .pourcentage2 svg circle:nth-child(2) {
	stroke-dashoffset: calc(440 - (440 * 85) / 100);
	stroke: #00ff00;
}

/* Formulaire Contact */

.erreur {
	color: #ff0000;
	font-size: 0.7em;
}

#nomForm {
	width: 35%;
	background-color: #1a1a1a;
	border: #03ffff 1px solid;
	padding-top: 0.7em;
	padding-bottom: 0.7em;
	padding-left: 2em;
	padding-right: 1em;
	color: #FFFFFF;
	font-size: 1em;
	border-radius: 10px;
	font-family: 'Roboto', sans-serif;
	transition: 0.5s;
}

#mailForm {
	width: 35%;
	background-color: #1a1a1a;
	border: #03ffff 1px solid;
	padding-top: 0.7em;
	padding-bottom: 0.7em;
	padding-left: 2em;
	padding-right: 1em;
	color: #FFFFFF;
	font-size: 1em;
	border-radius: 10px;
	font-family: 'Roboto', sans-serif;
	transition: 0.5s;
}

#telForm {
	width: 35%;
	background-color: #1a1a1a;
	border: #03ffff 1px solid;
	padding-top: 0.7em;
	padding-bottom: 0.7em;
	padding-left: 2em;
	padding-right: 1em;
	color: #FFFFFF;
	font-size: 1em;
	border-radius: 10px;
	font-family: 'Roboto', sans-serif;
	transition: 0.5s;
}

#objetForm {
	width: 35%;
	background-color: #1a1a1a;
	border: #03ffff 1px solid;
	padding-top: 0.7em;
	padding-bottom: 0.7em;
	padding-left: 2em;
	padding-right: 1em;
	color: #FFFFFF;
	font-size: 1em;
	border-radius: 10px;
	font-family: 'Roboto', sans-serif;
	transition: 0.5s;
}

#texteForm {
	width: 35%;
	height: 5em;
	background-color: #1a1a1a;
	border: #03ffff 1px solid;
	padding-top: 0.7em;
	padding-bottom: 0.7em;
	padding-left: 2em;
	padding-right: 1em;
	color: #FFFFFF;
	font-size: 1em;
	border-radius: 10px;
	font-family: 'Roboto', sans-serif;
	transition: 0.5s;
}

#boutonForm {
	background-color: #1a1a1a;
	border: #00ff00 1px solid;
	padding-top: 0.7em;
	padding-bottom: 0.7em;
	padding-left: 2em;
	padding-right: 2em;
	color: #FFFFFF;
	font-size: 1em;
	border-radius: 10px;
	font-family: 'Comfortaa', cursive;
	transition: 0.5s;
}

.boiteCheckbox {
	width: 1.5em;
	height: 1.5em;
	background-color: #D4D4D4;
}

.labelCheckbox {
	width: 40%;
	text-align: justify;
}

#nomForm:hover {
	box-shadow: 0 1px 10px 0 #03ffff inset,
				0 1px 10px 0 #03ffff,
				0 1px 10px 0 #03ffff inset,
				0 1px 10px 0 #03ffff;
}

#mailForm:hover {
	box-shadow: 0 1px 10px 0 #03ffff inset,
				0 1px 10px 0 #03ffff,
				0 1px 10px 0 #03ffff inset,
				0 1px 10px 0 #03ffff;
}

#telForm:hover {
	box-shadow: 0 1px 10px 0 #03ffff inset,
				0 1px 10px 0 #03ffff,
				0 1px 10px 0 #03ffff inset,
				0 1px 10px 0 #03ffff;
}

#objetForm:hover {
	box-shadow: 0 1px 10px 0 #03ffff inset,
				0 1px 10px 0 #03ffff,
				0 1px 10px 0 #03ffff inset,
				0 1px 10px 0 #03ffff;
}

#texteForm:hover {
		box-shadow: 0 1px 10px 0 #03ffff inset,
				0 1px 10px 0 #03ffff,
				0 1px 10px 0 #03ffff inset,
				0 1px 10px 0 #03ffff;
}

#boutonForm:hover {
	box-shadow: 0 1px 10px 0 #00ff00 inset,
				0 1px 10px 0 #00ff00,
				0 1px 10px 0 #00ff00 inset,
				0 1px 10px 0 #00ff00;
}

#nomForm:active {
	box-shadow: 0 1px 10px 0 #03ffff inset,
				0 1px 10px 0 #03ffff,
				0 1px 10px 0 #03ffff inset,
				0 1px 10px 0 #03ffff;
}

#mailForm:active {
	box-shadow: 0 1px 10px 0 #03ffff inset,
				0 1px 10px 0 #03ffff,
				0 1px 10px 0 #03ffff inset,
				0 1px 10px 0 #03ffff;
}

#telForm:active {
	box-shadow: 0 1px 10px 0 #03ffff inset,
				0 1px 10px 0 #03ffff,
				0 1px 10px 0 #03ffff inset,
				0 1px 10px 0 #03ffff;
}

#objetForm:active {
	box-shadow: 0 1px 10px 0 #03ffff inset,
				0 1px 10px 0 #03ffff,
				0 1px 10px 0 #03ffff inset,
				0 1px 10px 0 #03ffff;
}

#texteForm:active {
		box-shadow: 0 1px 10px 0 #03ffff inset,
				0 1px 10px 0 #03ffff,
				0 1px 10px 0 #03ffff inset,
				0 1px 10px 0 #03ffff;
}

#boutonForm:active {
	box-shadow: 0 1px 10px 0 #00ff00 inset,
				0 1px 10px 0 #00ff00,
				0 1px 10px 0 #00ff00 inset,
				0 1px 10px 0 #00ff00;
}

/* Chrome, Firefox, Opera, Safari 10.1+ */
::placeholder {
	color: #FFFFFF;
	opacity: 1; /* Firefox */
}

/* Internet Explorer 10-11 */
:-ms-input-placeholder {
	color: #FFFFFF;
}

/* Microsoft Edge */
::-ms-input-placeholder {
	color: #FFFFFF;
}

/* Footer */

footer {
	background-color: #1a1a1a;
	position: fixed;
	margin-left: 0px;
	margin-right: 0px;
	bottom: 0px;
	width: 100%;
	text-align: center;
}

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

	.burger {
		display: inline-block;
	}

	.contLiens {
		/*
		background-color: #1a1a1a;
		position: absolute;
		right: 0px;
		height: 500px;
		display: flex;
		*/
		display: none;
	}
	
	.menuResp.active {
		background-color: #1a1a1a;
		position: absolute;
		right: 0px;
		display: flex;
	}

	.blocResp {
		padding-left: 1em;
		padding-right: 2em;
		padding-top: 0.5em;
		padding-bottom: 0.5em;

		text-align: left;
	}

	.boutonContact {
		font-size: 1em;
		color: #03ffff;
		border: #03ffff 2px solid;
		border-radius: 4px;
		padding-left: 1em;
		padding-right: 1em;
		padding-top: 0.7em;
		padding-bottom: 0.7em;
		transition: 0.5s;
	}

	.boutonContact {
		width: 40%;
		font-size: 1em;
		color: #03ffff;
		border: #03ffff 2px solid;
		border-radius: 4px;
		padding-left: 1em;
		padding-right: 1em;
		padding-top: 0.7em;
		padding-bottom: 0.7em;
		transition: 0.5s;
		text-align: center;
	}

	.boutonCV {
		width: 40%;
		font-size: 1em;
		color: #00ff00;
		border: #00ff00 2px solid;
		border-radius: 4px;
		padding-left: 1em;
		padding-right: 1em;
		padding-top: 0.7em;
		padding-bottom: 0.7em;
		transition: 0.5s;
		text-align: center;
	}


}

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

	.burger {
		display: inline-block;
	}

	.contLiens {
		/*
		background-color: #1a1a1a;
		position: absolute;
		right: 0px;
		height: 500px;
		display: flex;
		*/
		display: none;
	}
	
	.menuResp.active {
		background-color: #1a1a1a;
		position: absolute;
		right: 0px;
		display: flex;
	}

	.blocResp {
		padding-left: 1em;
		padding-right: 2em;
		padding-top: 0.7em;
		padding-bottom: 0.7em;

		text-align: left;
	}

	.lienMenu {
		font-size: 1.2em;
	}

	.labelCheckbox {
		width: 75%;
		text-align: justify;
	}

	#nomForm {
		width: 70%;
		background-color: #1a1a1a;
		border: #03ffff 1px solid;
		padding-top: 0.7em;
		padding-bottom: 0.7em;
		padding-left: 1.5em;
		color: #FFFFFF;
		font-size: 1em;
		border-radius: 10px;
		font-family: 'Roboto', sans-serif;
		transition: 0.5s;
	}

	#mailForm {
		width: 70%;
		background-color: #1a1a1a;
		border: #03ffff 1px solid;
		padding-top: 0.7em;
		padding-bottom: 0.7em;
		padding-left: 1.5em;
		color: #FFFFFF;
		font-size: 1em;
		border-radius: 10px;
		font-family: 'Roboto', sans-serif;
		transition: 0.5s;
	}

	#telForm {
		width: 70%;
		background-color: #1a1a1a;
		border: #03ffff 1px solid;
		padding-top: 0.7em;
		padding-bottom: 0.7em;
		padding-left: 1.5em;
		color: #FFFFFF;
		font-size: 1em;
		border-radius: 10px;
		font-family: 'Roboto', sans-serif;
		transition: 0.5s;
	}

	#objetForm {
		width: 70%;
		background-color: #1a1a1a;
		border: #03ffff 1px solid;
		padding-top: 0.7em;
		padding-bottom: 0.7em;
		padding-left: 1.5em;
		color: #FFFFFF;
		font-size: 1em;
		border-radius: 10px;
		font-family: 'Roboto', sans-serif;
		transition: 0.5s;
	}

	#texteForm {
		width: 70%;
		height: 5em;
		background-color: #1a1a1a;
		border: #03ffff 1px solid;
		padding-top: 0.7em;
		padding-bottom: 0.7em;
		padding-left: 1.5em;
		color: #FFFFFF;
		font-size: 1em;
		border-radius: 10px;
		font-family: 'Roboto', sans-serif;
		transition: 0.5s;
	}

	#boutonForm {
		background-color: #1a1a1a;
		border: #00ff00 1px solid;
		padding-top: 0.7em;
		padding-bottom: 0.7em;
		padding-left: 2em;
		padding-right: 2em;
		color: #FFFFFF;
		font-size: 1em;
		border-radius: 4px;
		font-family: 'Comfortaa', cursive;
		transition: 0.5s;
	}

	.boutonContact {
		width: 60%;
		font-size: 1em;
		color: #03ffff;
		border: #03ffff 2px solid;
		border-radius: 4px;
		padding-left: 1.2em;
		padding-right: 1.2em;
		padding-top: 0.7em;
		padding-bottom: 0.7em;
		transition: 0.5s;
		text-align: center;
	}

	.boutonCV {
		width: 60%;
		font-size: 1em;
		color: #00ff00;
		border: #00ff00 2px solid;
		border-radius: 4px;
		padding-left: 1.2em;
		padding-right: 1.2em;
		padding-top: 0.7em;
		padding-bottom: 0.7em;
		transition: 0.5s;
		text-align: center;
	}

	.niveauTotalCI {
		width: 100%;
		background-color: #1a1a1a;
		padding: 4px;
		border: #03ffff 1px solid;
		border-radius: 6px;
	}

	.blocCompetences {
		width: 70%;
		padding-right: 3em;
		display: table-cell;
	}

	.general {
		display: table-cell;
		width: 20%;
		padding-left: 2em;
	}

	footer {
		background-color: #1a1a1a;
		position: fixed;
		margin-left: 0px;
		margin-right: 0px;
		bottom: 0px;
		width: 100%;
		text-align: center;
		font-size: 0.5em;
	}

	.boite .pourcentage svg circle {
		position: relative;
		width: 150px;
		height: 150px;
		fill: none;
		stroke-width: 5;
		stroke: #00ff00;
		transform: translate(5px, 5px);
		stroke-dasharray: 440;
		stroke-dashoffset: 440;
		stroke-linecap: round;
	}

	.boite2 .pourcentage2 svg circle {
		position: relative;
		width: 150px;
		height: 150px;
		fill: none;
		stroke-width: 5;
		stroke: #00ff00;
		transform: translate(5px, 5px);
		stroke-dasharray: 440;
		stroke-dashoffset: 440;
		stroke-linecap: round;
	}


}