body{
height: 100%;
width: 100%;
color:black;
background-color:white;
background-image:url(img/ocean5.jpg);
background-repeat:no-repeat;
background-position: 0 2.2cm;
background-size: 100% 100%;
background-attachment: fixed;
}
.lettertitle{position: fixed;top: 0.075cm;left: 0.5cm;font-style: normal;color:black;
				    letter-spacing: 0.3em;font-family: Copperplate / Copperplate Gothic Light, sans-serif;
				    font-size: 76px;font-weight: 500;
					background : #fff;text-decoration: none;background-color:transparent;width:10%;}
					
.title{position: fixed;top: 0.2cm;left: 1.3cm;font-style: normal;color:black;
		  letter-spacing: 0.3em;font-family: Raleway;
		  font-size: 26px;font-weight: bold;
		  background : #fff;text-decoration: none;background-color:transparent;width:50%;}
		  	  
.top{position: fixed;top:0.05cm;left: 0;width:100%;height: 1%;color:black;background-color:black;}

.lieu{position: fixed;top: 0;left: 18cm;font-style: normal;color:black;width:7cm;
					letter-spacing: 0.1em;font-family: Raleway;
					font-size: 14px;font-weight: bold;
					background-color: white;text-decoration: none;margin-left:0.5cm;margin-right:0.5cm;}

.subtitle{position: fixed;top: 1.0cm;left: 1.5cm;font-style: normal;color:black;
			    letter-spacing: 0.1em;font-family: Raleway;width: 15cm;
			    font-size: 16px;font-weight: 300;
				 background-color: transparent;text-decoration: none;}

.subtitle2{position: fixed;top: 1.5cm;left: 2.7cm;font-style: normal;color:black;
					 letter-spacing: 0.1em;font-family: Raleway;width: 15cm;
					 font-size: 16px;font-weight: 300;
					 background-color: transparent;text-decoration: none;} 			
					 
#onglets{position: fixed;top: 0.5cm;left: 14cm;	font : bold 11px ; 
         font-family: Raleway;
         list-style-type : none;margin-left:0.1cm;
         width: 20cm;}

#onglets li{float : left;height : 21px;background-color: white;
					  margin-left : 0.15cm;margin-right:0.15cm;border : none;text-decoration: none;}
					  
#onglets a:hover{background : white;color:turquoise;  
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: 300;color:black;letter-spacing: 0.2em;
					  font-family: Raleway;
					  width: 1em;font-size: 14px;background : white;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;
}

#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;}
		  
					  
.fond{position: fixed;top: 3cm;left: 10%;background-color:white;opacity: 0.8;width:80%;height:90%; border-radius: 15px;}
	
     
.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%;}
				 
.text{padding-left: 0;left: 0;font-family: Raleway;
	      background-color:transparent;font-size: 16px;letter-spacing: 0;width:90%;}

.bottom{position: fixed;top:87%;left: 0;width:100%;height: 1%;color:black;background-color:black;}

.pied{position: fixed;top: 88%;left: 0;background-color:white;opacity: 0.9;width:100%;height:14%; border-radius: 0;}

p{margin-top: 0}

/* INCRUSTATION DYNAMIQUE DU BAS*/

.bot{color:#ccc;}
.bot:hover,.bot:focus{background:rgba(0,0,0,.1);box-shadow:0 1px 0 rgba(255,255,255,.4);}

.bot span{margin-top:0;margin-left:0;color:black;
     padding:15px;border-radius:3px;
     transform:scale(0) rotate(-12deg);   transition:all .25s;opacity:0;}

.bot:hover span, .bot:focus span{transform:scale(1) rotate(0);opacity:1;}


/* CONTOUR DYNAMIQUE DES ONGLETS */

button {background: none;border: 0;box-sizing: border-box;
  				margin: 0;padding: 0 0;box-shadow: inset 0 0 0 2px #f45e61;
 				color: green;font-size: inherit;font-weight: 700;position: relative;vertical-align: top;font-family: Raleway;}
button::before, button::after {box-sizing: inherit;content: '';position: absolute;width: 100%;height: 100%;color: green;}
.spin a{color:green;}
.spin {width: 5em;height: 5em;padding: 0;color:green;}
.spin:hover {color: green;}
.spin::before, .spin::after {top: 0;left: 0;color: green;}
.spin::before {border: 2px solid transparent;}
.spin:hover::before {
	color: green;
  border-top-color: transparent;
  border-right-color: transparent;
    border-left-color: transparent;
  border-bottom-color: transparent;
  -webkit-transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
  transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
.spin::after {border: 0 solid transparent; color:turquoise;}
.spin:hover::after {
	color:turquoise;
  border-top: 2px solid #0eb7da;
  border-left-width: 2px;
  border-right-width: 2px;
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
  -webkit-transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
  transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
  transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
  transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
}

.circle {border-radius: 100%;box-shadow: none;}
.circle::before, .circle::after {border-radius: 100%;}

ul{font-family: Raleway;
	      letter-spacing: 0em;}

.cell { border-style: double ; border-color:black ;border:2px solid black ; height:100%}

.line1 {height:40 ; background-color:#aed6f1 ; text-align:center ; vertical-align:center}

.line3 {height:30 ; background-color:#aed6f1 ; text-align:center ; vertical-align:center}

.line2 {height:50 ; background-color:  #5dade2   ; text-align:center ; vertical-align:center}

.prgm { border:5 ; border-collapse:separate }

.hour { font-weight:bold;font-family: Raleway;}

.day { font-weight:bold;font-family: Raleway;}

.end { height:50 ; border:none;text-align:center ; vertical-align:center}

.abs { color: #400080;text-decoration: none;}

#conteneur{
position:fixed;
top:3.2cm;
left:13%;
width: 76.7%;
height: 78%;
overflow-y: scroll;
}

.UCBL:before { content:"";background:url("img/UCBL.jpeg") no-repeat;position:fixed;top:88.5%;left:5 %;width:10%;height:10%;background-size:100%;}
.ICJ:before  { content:"";background:url("img/ICJ.jpeg")  no-repeat;position:fixed;top:88.5%;left:15%;width:10%;height:10%;background-size:11%;}
.IM2:before  { content:"";background:url("img/UM2.png")   no-repeat;position:fixed;top:88.5%;left:25%;width:100%;height:100%;background-size:15%;}
.IMAG:before { content:"";background:url("img/IMAG.jpeg") no-repeat;position:fixed;top:88.5%;left:35%;width:100%;height:100%;background-size:15%;}
.INSU:before { content:"";background:url("img/INSU.jpeg") no-repeat;position:fixed;top:88.5%;left:45%;width:100%;height:100%;background-size:15%;}
.INRIA:before{ content:"";background:url("img/INRIA.png") no-repeat;position:fixed;top:88.5%;left:45%;width:100%;height:100%;background-size:15%;}