/* CSS Document */
#swot-logo,
#titres_vie div, #vie-jour div, #vie_charge_utile div,
#titres_couverture div,
#titres_mesures div,
#swot2_st div,
#savoir_st2,
#phenomenes_t1, #phenomenes_t2,
#ocean_st1, #ocean_st2 {
	display: none;
}

#satellite img {
	position: fixed;
	right: 2%;
	top: 6%;
	animation-name: satellite;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-direction: normal;
	animation-play-state: running;
}
@keyframes satellite {
	0% {		
		right: -20%;	
	}
}

#titres_vie {
	text-align: left;
}

.titre-section-haut {
	color: #000;		
	padding-right:0px;	
	animation-name: titre-section-haut;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	animation-play-state: running;
	margin-left: 0%;
	overflow: hidden;
	margin-bottom: 5px !important;
}

.titre-section-haut span {
	padding:10px 20px;	
	font-size:40px;
	background-color: #fff;	
}

@keyframes titre-section-haut {
	0% {		
		margin-left: -150%;	  
	   	padding-right: 200px;
		overflow: hidden;
	}	
}

.titre-section-bas {		
	color: #000;
	animation-name: titre-section-bas;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	animation-play-state: running;
	margin-right: 0%;
	overflow: hidden;
}
.titre-section-bas span {
	padding:10px 20px;	
	font-size:40px;
}

@keyframes titre-section-bas {
	0% {		
		margin-right: -400%;
		padding-left: 200px;
		overflow: hidden;
	}	
}

.titre1 {
	display: inline-block; 		
	padding-right:0px;
	color: #000;
	animation-name: titre1;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	animation-play-state: running;
	margin-left: 0%;
	overflow: hidden;	
}
.titre1 span {
	padding:10px 20px;
	background:#fff;
	font-size:60px;
}
@keyframes titre1 {
	0% {		
		margin-left: -150%;	  
	   	padding-right: 200px;
		overflow: hidden;
	}	
}

.titre2 {	
	display: block; 		
	color: #fff;
	animation-name: titre2;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	animation-play-state: running;
	margin-left: 0%;
	overflow: hidden;	
}
.titre2 span {	
	font-size:56px;
	letter-spacing: 5px;
}
@keyframes titre2 {
	0% {		
		margin-left: -150%;		
		overflow: hidden;
	}	
}

.titre3 {
	display: inline-block; 			
	color: #fff;
	
}

.titre3 span{
	animation-name: titre_up;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	animation-play-state: running;
}


.titre3 span, .titre4 span {
	font-size:40px;	
}
span#calque {
	font-size: 40px;
	opacity: 0;
}

@keyframes titre_up {
	0% {		
		opacity: 0;			
	}	
	100% {
		opacity: 1;		
	}	
}

.barre {
	height: 4px;
	width: 100%;
	animation-name: show_barre;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	animation-play-state: running;	
}

@keyframes show_barre {
	0% {		
		width: 0%;
	}
}

.titre4 {
	display: inline-block; 			
	color: #fff;
	margin-top:25px;
}

.titre2 span, .titre3 span, .titre4 span{
	text-shadow: 0 1px 0 #000,
               0 2px 0 #222;
}

#zoom_filaments{
	-webkit-animation: zoomin 10s ease-in;
  animation: zoomin 20s ease-in;
  transition: all .5s ease-in-out;
  overflow: hidden;
	transform: scale(2);
}
@-webkit-keyframes zoomin {
  0% {transform: scale(1);}
}
@keyframes zoomin {
  0% {transform: scale(1);}
}
.titre3 a, .titre3 a:hover { 
	color: #fff;
	text-decoration: none;
}