/* Commentaire en CSS. Pour ne pas executer une commande css rajouter "!" devant  */
	/************************************************
	*												*
	*				MENU DU HAUT					*
	*												*
	*************************************************/
.topnav {
	z-index:50;
    background-color: #222b35;
    overflow: hidden;
	text-align:center;
	line-height: 40px;
}
.topnav a {
	z-index:50;
    float: middle;
    !display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 0px 20px;
    text-decoration: none;
    font-size: 20px;
	font-family: Arial;  
	!width:80px;
	!height: 40px;
	!line-height: 40px;  
	text-decoration: none;
}
.topnav a:hover {
    !background-color: #1f4d79; transition:0.4s;
    color:#009fc7;   text-decoration:underline;
	!padding: 0px 20px;
	!border-radius: 5px 5px 5px 5px;
		!-moz-transition: all 1s ease;
}
.topnav .icon {
    display: none;
}
/* responsivité du menu */
@media screen and (max-width: 1200px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
@media screen and (max-width: 1200px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
}
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
}
	/************************************************
	*												*
	*				MISE EN PAGE GLOBALE			*
	*												*
	*************************************************/
#activer{color:#009fc7; text-decoration:underline;}
.ref{color:#50faf4}.ref:hover{color:#c4f1ff;}
#h2form{
	text-align:center; position:relative;
}
p{
	color:white;
	font-size:100%;
}
article{
	position:relative; z-index: 4;
	!top:2%;
	!left:15%;
	min-height:750px;
	!width:80%;
	background: rgba(34, 42, 53, 0.8);
	max-width: 90%;
	margin: 0 0 14% 5%;
	margin-bottom:1%;
	!padding-left:8%;
	!border-radius: 10px 10px 10px 10px;
	animation: fadein 2s;
	-moz-animation: fadein 2s; /* Firefox */
}
@keyframes fadein {
	from {opacity:0; bottom:-500px;}
    to {opacity;1; bottom:0px;}
}
@-moz-keyframes fadein { /* sur Firefox */
    from {opacity:0; bottom:-500px;}
    to {opacity:1; bottom:0px;}
}
h1{
	position:relative;	top:10px;
	text-align:center;
}
	/************************************************
	*												*
	*				PAGE PRESENTATION				*
	*												*
	*************************************************/
/* Mise en page 1er article page Presentation */
/* Photo du portfolio */
#idx{color:#009fc7; text-decoration:underline;}
#photomoi{
	z-index:6;
	width:17%;
	position:relative; left:2%;
}
#moi{
	position:relative; z-index:5;
	max-width:320px;
	width:100%;
	height:auto; border-radius: 50% 50% 50% 50%;
	-webkit-box-shadow: 0 0 15px 10px rgba(20,20,20,0.9);
	box-shadow: 0 0 15px 10px rgba(20,20,20,0.9);
}
#cvp{position:relative; z-index:50; top:30px;}
.cv{position:relative; left:5%; width:10%; height:auto; transition:0.5s;}
.cv:hover{left:4%; width:12%; transition:0.5s;
	-webkit-box-shadow: 0px 0px 15px 10px rgba(52,124,153,0.9);
	box-shadow: 0px 0px 15px 10px rgba(52,124,153,0.9);}
#cesi {
	position:relative; height:auto; width:38%; top:70px; !left:0%; 
	z-index:10; background:white;
	-webkit-box-shadow: 0 0 15px 10px rgba(20,20,20,0.9);
	box-shadow: 0 0 15px 10px rgba(20,20,20,0.9);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#cesi:hover{
	width:40%;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	-webkit-box-shadow: 0px 0px 15px 10px rgba(52,124,153,0.9);
	box-shadow: 0px 0px 15px 10px rgba(52,124,153,0.9);
}
#essi {
	position:relative; height:auto; width:40%; top:70px; float:right; 
	z-index:10; background:white;
	-webkit-box-shadow: 0 0 15px 10px rgba(20,20,20,0.9);
	box-shadow: 0 0 15px 10px rgba(20,20,20,0.9);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}	
#essi:hover{
	width:42%;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	-webkit-box-shadow: 0px 0px 15px 10px rgba(52,124,153,0.9);
	box-shadow: 0px 0px 15px 10px rgba(52,124,153,0.9);
}
/* intégration carte google map bar le duc  */
iframe {
	position:relative; z-index:10;
    width:100%;
    !height:100%;
	!left:40%;
	top:100px;
}
#bld{
	position:relative;
	width:auto; height:100%; !text-align:center;
}
/* style paragraphe de présentation */
#phome{
	position:absolute; z-index:10; top:60px; left:25%; !height:10%; width:70%;
	!background:red;
}
	/************************************************
	*												*
	*				PAGE PARCOURS					*
	*												*
	*************************************************/
.dateforme{position:absolute;  z-index:10; height:auto; width:6%; left:3%;
	padding-top:80px; max-width:90px; min-width:30px;}
.dateforme2{position:absolute;  z-index:10; height:auto; width:6%; left:3%;
	padding-top:80px; max-width:90px; min-width:30px;}
.lienpro{position:absolute;  z-index:100; height:auto; width:15%; left:82%;
	padding-top:5px; transform:0.5s; max-width:260px; !min-width:200px;}
.lienpro:hover{width:16%; left:81%; transition:0.5s;}

#rts{position:relative; top:100px;} #poste{position:relative; top:200px;}
#evobus{position:relative; top:300px;}
#silor{position:absolute; height:auto; width:28%; left:70%; top:30%;}
#silor:hover{width:29%; left:69%;}

@media (max-width: 1500px) {.date!forme1{padding-top:120px;}}
@media (max-width: 1300px) {.datef!orme{padding-top:140px;}}
@media (max-width: 1200px) {.datef!orme{padding-top:160px;}}

.rectangle{position: relative; width:90%; left:5%; height:400px; 
!background:rgba(100, 100, 100, 0.8); !border:solid 1px;
	box-shadow: 0 0 15px 10px rgba(20,20,20,0.9); margin-bottom:20px; padding-top:1px; transition:0.5s;}
.rectangle:hover{transition:0.5s; width:95%; left:2.5%; height:410px;
	zoom:105%; background:#347c99;}
.h3form{
	text-align:center;
}
.pform{
	position:relative; top:15px; left:24%; !height:10%; width:60%;
	!background:red; padding-bottom:6%;
}
#pform2{position:absolute; top:5px;}
#form {position:relative; height:auto; width:40%;
z-index:10;}
#forme {position:relative; padding:1%; z-index:10; text-align:center;}
#CESI{
	position: absolute; z-index:10; width:18%; top:40%; left:80%;}
#CESI:hover{width:19%; left:79%;}
#cesiform{
	position:relative; height:auto; width:100%;
	z-index:10;
}
#richier{
	position: absolute; z-index:10; width:18%; top:30%; left:80%;
}
@media (max-width: 1400px) {.pform{left:20%;}.lienpro{padding-top:20px;}}
@media (max-width: 1200px) {.pform{left:15%; font-size:14px;}.h3form{font-size:16px;}#silor{left:35%; top:65%;}}
@media (max-width: 1000px) {.pform{left:10%; width:70%;}.lienpro{padding-top:140px;}#rts{top:50px;}#poste{top:100px;}#evobus{top:150px;}}
@media (max-width: 800px) {.pform{width:75%;}#CESI{top:10%; left:40%;}#richier{top:10%; left:40%;}}
@media (max-width: 700px) {.pform{font-size:12px;}#CESI{top:20%; left:40%;}.dateforme{padding-top:160px;}.dateforme2{padding-top:220px;}}
@media (max-width: 550px) {#richier{top:15%; left:40%;}}
@media (max-width: 400px) {.pform{font-size:10px;}#richier{top:20%; left:40%;}}
@media (max-width: 300px) {.pform{font-size:9px;}#silor{top:80%;}}
	/************************************************
	*												*
	*				PAGE COMPETENCES				*
	*												*
	*************************************************/
#cpt{color:#009fc7; text-decoration:underline;}

.gauche2{position:absolute; top:12%; width:50%; height:70%; !background:red;}
.droite2{position:absolute; top:12%; left:50%; width:50%; height:70%; !background:blue;}
.gauche3{position:absolute; top:-20%; width:50%; height:70%; !background:red;}
.droite3{position:relative; top:0px; left:50%; width:50%; height:70%; !background:blue; min-height:150px;}
.descendre{position:relative; margin:2%;}
#microsoft{position:relative; left:25%;}
#linux{position:relative; left:25%; top:40%; line-height:22px;}
#imicro{position:absolute; width:18%; height:auto; !left:-100px; !top:10px;}
#ilinux{position:absolute; width:18%; height:auto; !top:0px; !left:-10px;}
#mcrsft{position:relative; left:10%; top:20px;}
#linx{position:relative; left:60%;top:-225px; background:red; max-width:800px;}
.micro{position:relative; top:-40px; left:150px;}
.hdroit{position:relative; !left:25%; text-align:center;}
progress{
width:20%; animation-name: prog; animation-duration: 3s;
    animation-delay: 0.1s;}
@keyframes prog {
	from {width:0%;}
    to {width:20%;}
}
.h3line{line-height:22px;}
.box{position:relative; left:25%; height:20px; !background:red;}
#part1{position:relative; left:10%; top:20px;}
#part2{position:relative; left:60%; top:-400px;}
.pa2{position:absolute; left:150px; !top:0px;}
.rectangle2{position: relative; width:90%; left:5%; height:600px; 
!background:rgba(100, 100, 100, 0.8); !border:solid 1px;
	box-shadow: 0 0 15px 10px rgba(20,20,20,0.9); margin-bottom:20px; padding-top:1px; transition:0.5s;}
.rectangle2:hover{transition:0.5s; width:95%; left:2.5%; height:610px;
	zoom:105%; background:#347c99;}
	
@media (max-width: 1500px) {#imicro,#ilinux{width:23%;}#linux,#microsoft{left:30%;}}
@media (max-width: 1450px) {#imicro,#ilinux{width:24%;}}
@media (max-width: 1400px) {#imicro,#ilinux{width:25%;}}
@media (max-width: 1350px) {#imicro,#ilinux{width:26%;}}
@media (max-width: 1300px) {#imicro,#ilinux{width:23%;}.h3line{line-height:10px;}.rectangle2{height:500px;}}
@media (max-width: 1250px) {#imicro,#ilinux{width:24%;}}
@media (max-width: 1200px) {#imicro,#ilinux{width:25%;}}
@media (max-width: 1150px) {#imicro,#ilinux{width:26%;}}
@media (max-width: 1100px) {#imicro,#ilinux{width:27%;}}
@media (max-width: 1050px) {#imicro,#ilinux{width:28%;}}
@media (max-width: 1000px) {#imicro,#ilinux{width:25%;}.h3line{line-height:0px;}progress{height:10px; width:50%;}.micro{top:0px; left:0px;!width:50%;}@keyframes prog {from {width:0%;}to {width:50%;}}.pa2{left:0px; top:20px;}.rectangle2{height:430px;}}.gauche2{top:18%;}.droite2{top:18%;}}
@media (max-width: 950px) {#imicro,#ilinux{width:23%;}}
@media (max-width: 900px) {#imicro,#ilinux{width:23%;}}
@media (max-width: 850px) {#imicro,#ilinux{width:23%;}}
@media (max-width: 500px) {#imicro,#ilinux{width:22%;}.h3line{font-size:16px;}.rectangle2{height:400px;}}
@media (max-width: 400px) {#imicro,#ilinux{width:22%;}.h3line{font-size:14px;}.rectangle2{height:350px;}}


	/************************************************
	*												*
	*				PAGE PROJETS					*
	*												*
	*************************************************/
#prj{color:#009fc7; text-decoration:underline;}
/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg); z-index:50;
	}

.flip-container, .front, .back {
	min-width:20px;
	min-height:500px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative; z-index:50;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	z-index:50;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
	float:center; z-index:50;
}
.proj{
	position:relative; z-index:70; top:-70px;
	text-decoration:none; color:white;
	padding: 2% 8%; background: blue;
}
.proj:hover{
	position:relative; z-index:80; background: green;}
fieldset{
	display: block;
	margin-left: 8%;
	margin-right: 5%;
	!height: 300px;
	margin-bottom: 10%; 
	position:relative;
	!top:30px; float:top;
	text-align:center;
	height:auto; width:80%; border:none; transition: 1s;
}
fieldset:hover{
	transition: 1s;
	background:#347c99;
}
.colonne {
  column-count: 3;
  column-gap: 1px; top:30px;
  !margin: auto;
  position:relative;
}
@media (max-width: 1900px) {.flip-container, .front, .back { min-height:450px;}}
@media (max-width: 1800px) {.flip-container, .front, .back { min-height:430px;}}
@media (max-width: 1700px) {.flip-container, .front, .back { min-height:410px;}}
@media (max-width: 1600px) {.flip-container, .front, .back { min-height:390px;}}
@media (max-width: 1500px) {.flip-container, .front, .back { min-height:370px;}}
@media (max-width: 1400px) {.flip-container, .front, .back { min-height:350px;}}
@media (max-width: 1300px) {.flip-container, .front, .back { min-height:310px;}}
@media (max-width: 1200px) {.flip-container, .front, .back { min-height:285px;}}
@media (max-width: 1100px) {.flip-container, .front, .back { min-height:265px;}}
@media (max-width: 1000px) {.flip-container, .front, .back { min-height:245px;}.flip-container:hover .flipper{width:120%; height:auto; left:-10%;}fieldset {width:70%;}}
@media (max-width: 900px) {.flip-container, .front, .back {	min-height:220px;}}
@media (max-width: 800px) {.flip-container, .front, .back {	min-height:195px;}.proj{top:-60px}}
@media (max-width: 700px) {.flip-container, .front, .back {	min-height:170px;}.proj{top:-50px}}
@media (max-width: 600px) {.flip-container, .front, .back {	min-height:150px;}.proj{top:-45px}}
@media (max-width: 500px) {.flip-container, .front, .back {	min-height:130px;}.txtresp{font-size: 14px;}.proj{font-size: 14px;}} 
@media (max-width: 450px) {.flip-container, .front, .back {	min-height:100px;}.txtresp{font-size: 12px;}.proj{font-size: 12px;}fieldset {width:60%;}}
@media (max-width: 400px) {.flip-container, .front, .back {	min-height:80px;}.txtresp{font-size: 8px;}.proj{font-size: 8px; top:-40px}fieldset {width:58%;}}
@media (max-width: 300px) {.flip-container, .front, .back {	min-height:50px;}.txtresp{font-size: 7px;}.proj{font-size: 7px; top:-35px}fieldset {width:40%;}}
@media (max-width: 250px) {.flip-container, .front, .back {	min-height:50px;}.txtresp{font-size: 6px;}.proj{font-size: 6px;}}
	/************************************************
	*												*
	*				PAGE LOISIRS					*
	*												*
	*************************************************/
#lsr{color:#009fc7; text-decoration:underline;}

.rectangleresp{position: relative; width:90%; left:5%; !height:800px;
!background:rgba(100, 100, 100, 0.8); !border:solid 1px;
	box-shadow: 0 0 15px 10px rgba(20,20,20,0.9); margin-bottom:20px; padding-top:1px;
	padding-bottom:2%; transition:0.5s;}
.rectangleresp:hover{transition:0.5s; width:95%; left:2.5%; !height:810px;
	zoom:105%; background:#347c99;}
.archi1{position:relative; !background:red; text-align:center;}
.archi2{position:relative; !background:blue; text-align:center;}


.fermer{position:fixed; text-decoration:none; color:blue; width:100%;
	top:0px; float:right; z-index:201; font-size:25px;}
#retour{position:absolute; z-index:200; color:red;}
.tab div{
    display: none; 
}
.tab div:target {
    display: block; position:relative;
}
.imglsr{position:relative; margin:1%; width:30%; max-width:500px;
	-webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);}
.imglsr:hover{
	box-shadow: 0px 0px 15px 10px #000000; 
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.1);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.1);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.1);
    transition: all 200ms ease-in;
    transform: scale(1.1);}
@keyframes zoom {
	from {transform:scale(1);}
    to {transform:scale(1.1);}
}
.grande{position:fixed; z-index:200; top:5%; left:10%; width:80%;
	 max-width:1920px;}
.fondnoir{position:fixed; width:500%; left:-300px; top:-500px; height:500%; z-index:199; background:rgba(0,0,0,0.9);}

	/************************************************
	*												*
	*				PAGE CONTACT					*
	*												*
	*************************************************/
#ctt{color:#009fc7; text-decoration:underline;}
.centrer {
	position: relative;
	text-align:center;
}
#pcontact {
	position: relative; margin-top:2%; text-align:center;
}

#contactez{
	width:80%; height:200px;
}
/* Menu latéral gauche */
.men_g{
	transition: 1s;
	top: 60px;
	position: fixed;
    width: 400px;
	height: 50px;
	background-repeat:no-repeat;
	background: url(../img/menug11.jpg);
	color: #ffffff;
	z-index:20;
	left: -370px;
	border-radius: 100px 100px 100px 100px;
	border: solid grey 1px;
}
.men_g:hover{
	transition: 1s;
	top: 60px;
	position: fixed;
    width: 200px;
	height: 80%;
/* 	background: #222035; */
	color: #ffffff	;
	z-index:5;
	left: 10px;
/* 	background-size:200px 600px; */
	background-repeat:no-repeat;
	background: url(../img/menug2.jpg);
	z-index:20;
	border-radius: 10px 10px 10px 10px;
}
.btn_men_g	{
	color: #ffffff;
	text-decoration: none;
}
.btn_men_g:hover{
	color:#347c99;
	text-decoration: underline;
}
footer{
	position:relative;
	!top:50px;
	text-align:center;
}
#pied{
color: white;
font:bold; padding:50px;
}

/* Mise en page et image de fond de site */
body{
	display:table;
	width:98%;
	background-image: url("../img/b5.jpg");
	background-repeat:no-repeat;
	background-position:center;
	-webkit-background-position:center;
	background-attachment:fixed;
	-webkit-background-attachment:fixed;
	background-size:cover;
	-webkit-background-size: cover; color: #ffffff;
}
#top{position:relative; top:-20px;}
.haut { position:fixed; z-index:100; top:90%; !left:45%; padding:1%; color:white;
	background:black; text-decoration:none; !text-align:center; border:red;}
	
.haut:hover{position:fixed;
	background:#009fc7; z-index:20; 
	text-decoration:underline;}