html, body{
font-family: 'Didact Gothic', sans-serif;
margin :0;
padding: 0;
min-height: 100%;
}

/*titres*/
h1{
text-align: center;
width: 100%;
}

h2{
padding-top: 40px;       
}

h3{
padding-top: 50px;
}

.h5{
text-align: left;    
    
    
}

h6{
font-size: 20px;
}

.bentext{
font-size: 12px;    
    
}

/*barre de navigation*/
nav{
background-color: #2C2C2C;

}

.navbar{
box-shadow: 1px 1px 4px lightskyblue; 
    
}



/*page d'accueil*/

.desti{
margin-top: 50px;    
}

.depa{
margin-bottom: 20px;   
    
}

.image{
height: auto;

}

.cout{
font-size: 11px;
font-style: italic; 
}

.fade{
position: fixed;
right: 2%;

    
}


a{
text-align: center;
color: lightskyblue;
transition: color 0.6s;
}

a:hover{
color: aliceblue;
background: transparent;
transition: background 1s;
transition: color 0.6s;
text-decoration: none;
}

/*Bouton*/ 
span{
background-color: aliceblue;
border: 1px solid lightskyblue;
border-radius: 4px;
}

span:hover{
background-color: lightskyblue; 
}

.navigation{
width:100%;
margin-left: 0;
margin-right: 0;
position: fixed;
z-index: 1000;
}



media-body{
display: block;
float: left; 
}

#conditions{
padding-top: 30px;
    
}

.column{
height: 300px; 
text-align: center;
font-family:sans-serif;
color:lightskyblue;
background-color: dimgrey;    
}

footer{
height: 200px;
min-width: 100%;
background-color: #2C2C2C;
box-shadow: 0px 0px 4px 2px lightskyblue;
border-radius: 0px;
text-decoration: none;
justify-content: center;
text-align: center;
padding: 20px;
margin-bottom: 0;
float:left;
}

@media only screen and (max-width: 768px){
footer{
height: 200px;
width: 100%;
background-color: #2C2C2C;
box-shadow: 0px 0px 4px 2px lightskyblue;
border-radius: 0px;
text-decoration: none;
justify-content: center;
text-align: center;
padding: 20px;
margin-bottom: 0;

    }    
}

.footer-link{
padding: 20px;
    
}

footer:hover{
text-decoration: none;
}

.container-fluid{
margin:0;
padding: 0;
width: auto;
min-height: 100%;
position: relative;
clear: both;
}

.block{
background-color:whitesmoke;
min-height: 100%;
padding-left: 100px;
padding-right: 100px;
text-align: justify;
margin-left: 100px;
margin-right: 100px;
margin-bottom: 0;
width: auto;
padding-top: 60px;
padding-bottom: 60px;
}

#block1{
float:left;   
}

@media only screen and (max-width: 768px){
.block{
height: 100%;
width:auto;
padding-left: 50px;
padding-right: 50px;
margin-left: 50px;
margin-right: 50px;   
    }    
}

@media only screen and (max-width: 320px){
.block{
padding-left: 50px;
padding-right: 50px;
margin-left: 50px;
margin-right: 50px;   
    }    
}

.compte{
padding-top: 40px;
padding-bottom: 10px;
    
}

.compte2{
padding-top: 40px;
padding-bottom: 150px;
    
}

.connexion{
margin-bottom: 0px; 
margin-top: 0px;
}

.email{
margin-top: 40px;
}



.oublie{
margin-top: 10px;     
}

.mdp{
padding-bottom: 0px;      
}


.logos{
width: 30px;
margin: 20px;
}

#twitter{
width: 50px;
margin:10px
}

#media{
padding-top: 40px;
}

#social{
font-size: 18px;
color: aliceblue;     
}



.assurance{
padding-top: 30px;    
    
}

.propos{
padding-top:30px    
    
}

.btn-primary{
color:lightskyblue;
background-color: #2C2C2C;
transition: 0.5s;
}

.btn-primary:hover{
color:#2C2C2C;
background-color: lightskyblue;
transition: 0.5s; 
}

.alert-success{
position: absolute;
bottom: 100px;
}

#alert{
margin-left: 0px;
padding-left: 40px;
padding-right: 40px;    
}

.mr-3{
width: 90px;  
}

.jupiter{
margin-left: -16px;    
    
}

#saturne{
width: 120px;
margin-left: -20px ;
}

#mercure{
width: 100px;       
}

#jupiter{
width: 140px;
margin-left: -35px;
}

.message{
padding-top: 40px;
font-size: 2.9vw;
position: absolute;
text-align: center;   
color:white;
width: 100%;
text-shadow: 1px 1px 3px black;
z-index: 2;
vertical-align: middle;
}

.carousel-slide{
position: relative;
z-index: 1;
box-shadow: 1px 1px 4px black;
border: 4px solid #2C2C2C;
border-radius: 5px;
}

.centrer{
width:100%;
height: auto;
text-align: center;
}

.content{
width: 100%;
box-shadow: 1px 1px 4px black;
border: 4px solid #2C2C2C;
border-radius: 5px;
}

.autor{
font-size: 10px; 
text-align: left;
}

.point{
width: 40px;
margin-top: -5px;
}

.blanc{
height: 400px;    
}

.planete{
margin-left: -20px;
padding-left: 20px;
}

.planete2{
margin-left: -30px;
padding-left: 20px;    
}

.plan{
position: relative;
width: 50%;
height: auto;
float:left;
}

@media only screen and (max-width: 973px){
.plan{  
width: 100%;
}
}

@media only screen and (max-width: 973px){
    #message{
    font-size: 2,5vw; 
    }    
}