/* ========================= STRUCTURE ======================== */
body {
width:100%;
height: 100%;
color:black;
background-color: black;
background-image: url(back3.png);									
background-repeat: no-repeat;
    background-position: 0 170px;
    opacity: 0 0.1;
}
/* ========================= EN TETE ======================== */
.bandeau{position:absolute;table-layout: fixed;display: table;margin-left:0%; top:0.01cm;font-family:Raleway;
font-weight: 1000;color:lightgray;line-height:130%;vertical-align: top;}

.contact{display: table-cell; font-family:Raleway;
font-weight: 1000;color:lightgray;line-height:130%;vertical-align: top;min-width: 12.5cm;}

.titre{font-family: Raleway;display: table-cell;font-family: cursive;
	      background-color:transparent;color:white;text-align: left;line-height:100%;
	      vertical-align: middle;font-size: 25px;width:50%;min-width: 7.5cm;}
	      
.figure{display: table-cell; top:0.1cm;vertical-align: top;min-width: 4cm;}
	      
st{
font-family: Raleway;
font-weight: 1000;
font-size: 15px;
background-color:transparent;
color:lightgray;
text-align: left;
letter-spacing: 0;
margin-left:0.5cm;
}

/* ========================= EN TETE ======================== */	      
.mail{font: bold 11px;
			font-family: Raleway;list-style-type : none;width: 8cm;
			color:lightgray;text-decoration: none; }
			
.mail:hover{font : bold 11px;
			font-family: Raleway;list-style-type : none;width: 8cm;
			color:lightblue;text-decoration: underline; }

/* ========================= MENU ======================== */

.hr1{position:absolute;top:2.7cm;min-width:100%;margin-left:0;}
.menu{position:absolute;top:3.1cm;table-layout: fixed;display: table;margin-left:10%;font-family:Raleway;
font-weight: 1000;color:lightgray;line-height:130%;vertical-align: middle;}

.menu a{font-style: normal;font-weight: 1000;color:white;letter-spacing: 0.2em;
					  font-family: Raleway;
					  font-size: 14px;background : transparent;text-decoration: none;
					  border: 1px solid green;
					  padding:0.5em;

border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
transition-property: top, left;
transition: color 0s, border-left-color 1s, border-bottom-color 1s;
}

.menu a:hover{background : black;color:lightblue;  
border: 1px solid green;
border-top-color: transparent;
border-left-color: gray;
border-right-color: transparent;
border-bottom-color: gray;}

.menu a {border-spacing: 1cm 1cm;border-radius: 100%;box-shadow: none;}
.menu a::before, #onglets a::after {border-radius: 100%;border-spacing: 1cm 1cm;}
.accueil{display: table-cell; text-align: center;font-family:Raleway;
font-weight: 1000;color:lightgray;line-height:130%;vertical-align: top;width:10%;min-width: 4.2cm;}
.recherche{display: table-cell; text-align: center;font-family:Raleway;
font-weight: 1000;color:lightgray;line-height:130%;vertical-align: top;width:10%;min-width: 5.5cm;}
.enseignement{display: table-cell; text-align: center;font-family:Raleway;
font-weight: 1000;color:lightgray;line-height:130%;vertical-align: top;width:10%;min-width: 5.5cm;}
.publications{display: table-cell; text-align: center;font-family:Raleway;
font-weight: 1000;color:lightgray;line-height:130%;vertical-align: top;width:10%;min-width: 5.5cm;}
.developpement{display: table-cell; text-align: center;font-family:Raleway;
font-weight: 1000;color:lightgray;line-height:130%;vertical-align: top;width:10%;min-width: 6cm;}		


/* ========================= CORPS ======================== */



.fond{position: absolute;top: 5cm;margin-left: 4cm;background-color:white;
opacity: 0.8;width:80%;height:65%; margin-bottom: 4cm;border-radius: 15px;margin-right: 4cm;}	
.fond p{margin-left: 1cm;margin-right: 1cm;font-size:17px} 
		 
#conteneur{
top:5.2cm;margin-left: 0.5cm;margin-right: 0.5cm;width: 100%;height: 100%;overflow-y: scroll;opacity: 1;
}

.fond_lateral{display: table-cell;top: 4.0cm;margin-left: 0.01cm;
width:5cm; border-radius: 15px;vertical-align:top;}	
.fond_bis{padding-left: 50px;display: table-cell;background-color: white;opacity:0.8;background-size: 200px 100px;
width:100%; border-radius: 15px;height: 80%;margin-right: -0.5cm;left:5.0cm;max-height:10.0cm;}					 


.body{position:absolute;table-layout: inherit;display: table;left:0.0cm; top:5.2cm;
font-family:Raleway;height:100%;line-height:130%;vertical-align: top;}
#conteneur_bis{
width: 100%;max-height: 15.0cm;margin-right: 0.5cm;
table-layout: inherit;overflow-y: scroll;opacity: 1;min-width: 10.0cm;
}
#conteneur_bis p{
margin-left: 0.5cm;margin-right: 1.5cm;
}

.liens1{display: table-cell;min-width:6.5cm;vertical-align: top;}
.liens2{display: table-cell;min-width:6.0cm;vertical-align: top;}


/* ========================= Poubelle ======================== */

.active_button {
 	  position: relative;
height:3.5cm;width:6cm;opacity: 1;border-radius: 10px;
background-color:black;  margin-top: -0.2cm;
}


/* #lateral{position: absolute;top: 0.0cm;left: 0.0cm;	font : bold 11px ; 
         font-family: Raleway;
         list-style-type : none; margin-left: -0.8cm;margin-top:0.0cm;
         width: 5.0cm;
         } */
         
  #lateral ul {
 margin-left: -1.4cm; width: 5.0cm;
}
         
 #lateral li {
 	  position: relative;margin-left: -0.6cm;margin-right: 0.5cm;
height:3.5cm;width:6.0cm; list-style-type: none;opacity: 1;border-radius: 10px; margin-top: -0.4cm;
}

      
#lateral li figure > div {
  border-radius: 5px;
  position: relative;
  margin: 2rem auto;
  margin-top: 0.2cm;
  background-color: white;
  width: 80px;
  height: 80px;
  overflow: hidden;
 -webkit-transform:  translateY(15px) rotate(45deg) translateZ(0px);
          transform:  translateY(15px) rotate(45deg) translateZ(0px);
          transition: all 1s;
}

#lateral li figure div:hover {
  border-radius: 5px;
  position: relative;
  margin: 2rem auto;
  margin-top: 0.2cm;
  background-color: white;
  width: 80px;
  height: 80px;
  overflow: hidden;
         -webkit-transform:   translateY(15px) translateX(20px)  scale(1.0) rotate(45deg) ;
          transform: translateY(15px)  translateX(20px) scale(1.0) rotate(45deg) ;
}

#lateral li figure figcaption h2 {
  font-size: 0.8rem;
  font-weight: 1800;
    margin-top: 0.5cm;
       margin-bottom: 0.5cm;
    margin-left: -3cm;
    width: 10cm;
text-align: center;
}

#lateral li figure figcaption h3 {
	color:lightblue;
  font-size: 0.8rem;
  font-weight: 1800;
    margin-top: 0.5cm;
       margin-bottom: 0.5cm;
    margin-left: -3cm;
    width: 10cm;
text-align: center;
}


#lateral4 ul{margin-left:-1cm;}
        
 #lateral4 li {
height:1.3cm;width:6cm;opacity: 1;border-radius: 10px;
 list-style-type: none;
  border-style:solid; 
 border-color:black;
 margin-left:-0.5cm;
  border-width: 2pt; margin-top:0.4cm;
}

#lateral4 li figure {
	  position: relative;
			top: -0.4cm;
}


      
#lateral4 li figure > div {
		  position: relative;
		  top: 0.05cm;
		height:1.7cm;
  border-radius: 0px;
  width: 6cm;
  margin-left:-0.2cm;
    overflow: hidden
 -webkit-transform:  translateY(15px) rotate(0deg) translateZ(0px);
          transform:  translateY(15px) rotate(0deg) translateZ(0px);
          transition: all 1s;  
}

#lateral4 li figure > div a{
	position: relative;
text-decoration: none;
color: "lightblue";
}

#lateral4 li figure > div a h2 {
	position: relative;
	vertical-align: middle;
	color: lightblue;
	top: -0.35cm;
	height:1.4cm;
  font-size: 1.0rem;
font-weight: bold;
    margin-left: -0.8cm;
    width: 6cm;
text-align: center;
text-decoration: none;

}

#lateral4 li figure > div a h2:hover{
	position: relative;
	vertical-align: middle;
	color: black;
	top: -0.35cm;
	height:1.4cm;
  font-size: 1.0rem;
font-weight: bold;
    margin-left: -0.8cm;
    width: 6cm;
text-align: center;
text-decoration: none;
}


#lateral4 li figure div:hover {
         -webkit-transform:   translateY(15px) translateX(20px)  scale(1.0) rotate(0deg) ;
          transform: translateY(15px)  translateX(20px) scale(1.0) rotate(0deg) ;
          opacity: 1;
}

#lateral4 li:hover {
	transition: background-color 1.5s ease;
background-color:transparent;
}

/* #lateral2{position: fixed;top: 5cm;left: -0.4cm; 
         font-family: Raleway;margin-left:0cm;margin-top:-0.2cm;
         width: 6cm;
         }*/ 
         
 #lateral2 li {
height:1.5cm;width:6cm;
opacity: 1;border-radius: 10px;
margin-left: -0.6cm;margin-right: 0.5cm;
 border-style:solid; 
 border-color:black;
 list-style-type: none;
  border-width: 1pt; margin-top:0.4cm;
}

#lateral2 li figure {
	  position: relative;
			top: -0.4cm;
}


      
#lateral2 li figure > div {
		  position: relative;
		  top: -0.35cm;
		height:1.7cm;
  border-radius: 0px;
  width: 4cm;
    overflow: hidden;
 -webkit-transform:  translateY(15px) rotate(0deg) translateZ(0px);
          transform:  translateY(15px) rotate(0deg) translateZ(0px);
          transition: all 1s;  
}

#lateral2 li figure > div a{
	position: relative;
text-decoration: none;
color: "lightblue";
}

#lateral2 li figure > div a h2 {
	position: relative;
	vertical-align: middle;
	color: black;
	top: -0.15cm;
	height:1.4cm;
  font-size: 0.9rem;
  font-weight: 1800;
    margin-left: -1cm;
    width: 6cm;
text-align: center;
text-decoration: none;
}

#lateral2 li figure > div a h3 {
		position: relative;
	vertical-align: middle;
	top: -0.15cm;
	color: lightblue;
	height:1.4cm;
  font-size: 0.9rem;
  font-weight: 1800;
    margin-left: -1cm;
    width: 6cm;
text-align: center;
text-decoration: none;
}


#lateral2 li figure div:hover {
  border-radius: 5px;
  position: relative;
  margin: 2rem auto;
  margin-top: 0.2cm;
  width: 160px;
  height: 4cm;
         -webkit-transform:   translateY(15px) translateX(20px)  scale(1.0) rotate(0deg) ;
          transform: translateY(15px)  translateX(20px) scale(1.0) rotate(0deg) ;
          opacity: 1;
}

#lateral3{ 
         font-family: Raleway;margin-left:0.cm;margin-top:-0.2cm;
         width: 6cm;
         }
         
 #lateral3 li {
height:1.5cm;width:6cm;
margin-left: -0.6cm;margin-right: 0.5cm;
opacity: 1;border-radius: 10px;
 list-style-type: none;
  border-style:solid; 
 border-color:black;
 margin-left:0.cm;
  border-width: 2pt; margin-top:0.4cm;
}

#lateral3 li figure {
	  position: relative;
			top: -0.4cm;
}


      
#lateral3 li figure > div {
		  position: relative;
		  top: 0.05cm;
		height:1.7cm;
  border-radius: 0px;
  width: 6cm;
  margin-left:-0.2cm;
    overflow: hidden
 -webkit-transform:  translateY(15px) rotate(0deg) translateZ(0px);
          transform:  translateY(15px) rotate(0deg) translateZ(0px);
          transition: all 1s;  
}

#lateral3 li figure > div a{
	position: relative;
text-decoration: none;
color: "lightblue";
}

#lateral3 li figure > div a h2 {
	position: relative;
	vertical-align: middle;
	color: lightblue;
	top: -0.15cm;
	height:1.4cm;
  font-size: 1.0rem;
font-weight: bold;
    margin-left: -0.4cm;
    width: 5cm;
text-align: center;
text-decoration: none;

}

#lateral3 li figure > div a h2:hover{
	position: relative;
	vertical-align: middle;
	color: black;
	top: -0.15cm;
	height:1.4cm;
  font-size: 1.0rem;
font-weight: bold;
    margin-left: -0.4cm;
    width: 5cm;
text-align: center;
text-decoration: none;
}


#lateral3 li figure div:hover {
         -webkit-transform:   translateY(15px) translateX(20px)  scale(1.0) rotate(0deg) ;
          transform: translateY(15px)  translateX(20px) scale(1.0) rotate(0deg) ;
          opacity: 1;
}

#lateral3 li:hover {
	transition: background-color 1.5s ease;
background-color:transparent;
}


.active_button2 {
background-color:black;
}
.passive_button2 { 
background-image:url(back3.png);
}
.passive_button3 { 
background-color:black;
}

#onglets{position: fixed;top: 2.9cm;left: 1cm;	font : bold 11px ; 
         font-family: Raleway;
         margin-left:0.1cm;
         width: 40cm;display: table;
         }

#onglets li{display: table-cell;height : 21px;background-color: transparent;
					  margin-left : 1%;margin-right:1%;border : none;text-decoration: none;width: 1cm; }
					  
#onglets a:hover{background : black;color:lightblue;  
border: 1px solid green;
border-top-color: transparent;
border-left-color: gray;
border-right-color: transparent;
border-bottom-color: gray;}

#onglets a{font-style: normal;font-weight: 1000;color:white;letter-spacing: 0.2em;
					  font-family: Raleway;
					  font-size: 14px;background : transparent;text-decoration: none;
					  border: 1px solid green;
					  padding:0.5em;

border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
transition-property: top, left;
transition: color 0s, border-left-color 1s, border-bottom-color 1s;
}
.entete {position: fixed;top: 0cm;left: 0cm;height: 114px;width: 40cm;opacity: 0;
background-image:linear-gradient(to right,transparent, SkyBlue);
transition: opacity 1s;}
    


#onglets a {border-spacing: 1cm 1cm;border-radius: 100%;box-shadow: none;}
#onglets a::before, #onglets a::after {border-radius: 100%;border-spacing: 1cm 1cm;}
		


.under{padding: 0.1cm;height:1000px;width:100%;font-style: normal;font-weight: 300;color:white;letter-spacing: 0.2em;
background-color:black;color: white;font-size: 20px;text-align: center;}

.section{font-weight:bold;font-family: Raleway;
	      letter-spacing: 0.2em;background-color:transparent; padding-top: 0.1cm;height:5%;
	      font-weight: bold;background-image:linear-gradient(to right,transparent, SkyBlue);width:92%;}
	     

		 

.date{max-width:3.5cm;min-width: 3.5cm;}
.description{width:80%;min-width: 3.5cm;}


.fond1{position: fixed;top: 5.35cm;left: 0%;background-color:white;
opacity: 0.8;width:7cm;height:3.5cm; border-radius: 0px;}
.fond2{position: fixed;top: 8.95cm;left: 0%;background-color:white;
opacity: 0.8;width:7cm;height:3.5cm; border-radius: 0px;}
.fond3{position: fixed;top: 12.45cm;left: 0%;background-color:white;
opacity: 0.8;width:7cm;height:3.5cm; border-radius: 0px;}
.fond4{position: fixed;top: 16.0cm;left: 0%;background-color:white;
opacity: 0.8;width:7cm;height:3.5cm; border-radius: 0px;}


.arrow_box {position: fixed;top: 5.35cm;left: 0%;background-color:white;
opacity: 0.8;width:7cm;height:3.5cm;border: 0px;}
.arrow_box:after, .arrow_box:before {left: 100%;top: 50%;border: solid transparent;
	content: " ";height: 0;width: 0;position: absolute;pointer-events: none;}

.arrow_box:after {
	border-color: rgba(213, 213, 213, 0);
	border-left-color: #d5d5d5;
	border-width: 30px;
	margin-top: -30px;
}
.arrow_box:before {
	border-color: rgba(194, 225, 245, 0);
	border-left-color: #c2e1f5;
	border-width: 36px;
	margin-top: -36px;
}


 .r1{margin-left:-40px;margin-top:20px;margin-bottom: 0px;transform: rotate(-45deg);}
 .r1lateral{margin-bottom: 0px;transform: rotate(-45deg);margin-left:-13px;margin-top:-7px}
 .r2{margin-left:0px;margin-top:-10px;margin-bottom: 0px;transform: rotate(0deg);}
  .r2lateral{margin-left:0px;margin-top:-5px;margin-bottom: 0px;transform: rotate(0deg);}
  .r3{margin-left:-60px;margin-top:-100px;margin-bottom: 0px;transform: rotate(-45deg);}
    .r3lateral{margin-left:-30px;margin-top:-40px;margin-bottom: 0px;transform: rotate(-45deg);}
  .r4lateral{margin-left:0px;margin-left:-22px;margin-top:-22px;margin-bottom: 0px;transform: rotate(-45deg);}
  
h1 {
font-weight: bold;
  color:black;
  padding:1em 0;
  text-align:left;
  overflow:hidden;
  font-size:22px;
  font-family:Raleway;
  font-weight:bold;
  padding-left:15px;
  padding-top:15px;
  line-height:22px
}
h4 {
font-weight: bold;
  color:black;
  padding:1em 0;
  text-align:center;
  overflow:hidden;
  font-size:22px;
  font-family:Raleway;
  font-weight:bold;
  padding-left:1px;
  padding-top:1px;
  line-height:22px
}

hl{
font-weight: bold;
  color:black;
  padding:1em 0;
  text-align:left;
  overflow:hidden;
  font-size:22px;
  font-family:Raleway;
  font-weight:bold;
  padding-left:15px;
  padding-top:15px;
  line-height:22px
}

h1:before, h1:after {
  content:'';
  width:3em;
  border-bottom:black solid;
	border-bottom-width:0.3em;
  display:inline-block;
  vertical-align:middle;
}
h4:before, h4:after {
  content:'';
  width:3em;
  border-bottom:black solid;
	border-bottom-width:0.3em;
  display:inline-block;
  vertical-align:middle;
}
tr.border_bottom td {
  border-bottom:1pt solid black;
}

.wave { 
	width: 80%;
	margin:0;
   padding:0;
	font-size:16px;
	padding-left:50px;
	margin-left:14px;
	line-height:120%;
	margin-top:0;list-style-image:url("fig/vague.png") }
	
.cadre_iconf{ 
	 background-color:orange;
    border-radius: 5px;
    padding-top:3px;
    margin-top:1px;
    margin-bottom:1px;
    height: 30px;
    } 
    
.cadre_sem{ 
	 background-color:lightgreen;
    border-radius: 5px;
    padding-top:3px;
    margin-top:1px;
    margin-bottom:1px;
    height: 30px;
    } 
    
.cadre_nconf{ 
	 background-color:lightblue;
    border-radius: 5px;
    padding-top:3px;
    margin-top:1px;
    margin-bottom:1px;
    height: 30px;
    } 
    
.date{
  font-size:15px;
  font-weight: bold;
  margin-left:10px;}
 .type{
  font-size:10px;
  font-weight: normal;
              margin-left:10px;
}