@import url('https://fonts.googleapis.com/css?family=Cookie&display=swap');
@font-face {
font-family: 'planet';
src: url('../fonts/font-awesome/Planetnv2.ttf');
}

html{
    font-size:62.5%;  /* règle pour le rem, supprime l'effet de cascade,ici la référence est le html et 
                        le calculs permet de faire égaler 1rem à 10px*/
    overflow-x: hidden
}

h1{
    font-family: 'planet';
}

body{
    background-image:url("../image/background_export2.jpeg");
    background-size:cover;
    
    /*background-attachment: fixed;*/
}

.hide{
    display:none;
}
/*---------My Nav-----------*/
nav {
    background-color: rgba(10, 10, 10, 0.5);
    padding:10px;
    width:100%;
   
}
nav a{
    color:white;
}
.Accueil{
    font-family: 'planet';
}

/*---------Mon background Video-----------*/
video {filter: contrast(110%); }
#videoBG {
    position:fixed;
    z-index: -100;
/*not work if the screen ratio is below 16/9*/
    width:100%;     
    height: auto;
    
}

@media (min-aspect-ratio: 16/9) {
    #videoBG {
        width:100%;
        height: auto;
    }
    
}
@media (max-aspect-ratio: 16/9) {
    #videoBG { 
        width:auto;
        height: 100%;
    }
    
}
@media (max-width: 960px) {
    #videoBG {
        transform: translate( -20%, 0%); 
      
    }
}
@media (max-width: 960px) and (max-height:675px){
    #videoBG {
        transform: translate( 0%, 0%); 
      
    }
}
@media (max-width: 540px) {
    #videoBG {
        transform: translate( -30%, 0%); 
      
    }
}
@media (max-width: 540px) and (max-height:434px){
    #videoBG {
        transform: translate( 0%, 0%); 
      
    }
}



/*---------END Mon background Video-----------*/





/*---------Article 1-----------*/
.caption {
    position: absolute;
    top:38%;
    width:100%;
    color:orange;
}

.caption h1 {
    font-size:3rem;
    font-weight:700;
    letter-spacing: 0.2rem;
    text-shadow: 0.1rem 0.1rem 0.8rem black;
    padding-bottom:1rem;
}

.caption h3{
    font-size: 2rem;
    text-shadow: 0.1rem 0.1rem 0.5rem black;
    padding-bottom:1.6rem;
}

.btn-lg {
    background-color: rgba(220, 53, 69, 0.5);
    
    border-width:medium;
    border-radius:0;
    font-size:1.1rem;
    padding:0.6rem 1.3rem;
}

/*---------Article 2-----------*/
#article_B{
    position: absolute;
    bottom:20rem;
    background-color:rgba(255,255,255, 0.5);
    border-radius:15px;
    padding:2.5rem;
    width:100%;
}

/* -------------------- Tablet -----------------*/
@media screen and (min-width:768px){
 .caption h1 {
    
    font-size:4rem;
    letter-spacing: 0.15rem;
    padding-bottom:0.5rem;
}
.caption h3{
    font-size:3rem;
    padding-bottom:1.2rem;
}

.btn-lg {
    margin: 4rem;
    font-size:2rem;
    padding:0.5rem 1.3rem;
}
}

/* -------------------- PC ordinateur-----------------*/
@media screen and (min-width:1025px){
 

}


/*---------My Parallax-----------*/

    

#slide1 {
    min-width:100%;
    min-height:100%;
    padding:13rem 0;
    
    background: url(../image/space.png) center no-repeat  fixed;
    background-size:cover;
}



#slide2 {
    min-width:100%;
    min-height:100%;
    padding:13rem 0;
    background: url(../image/space2.jpeg) center no-repeat fixed;
    background-size:cover;
}

.MyContainer {
    
    background-color:rgba(0, 0, 0, 0.7);
    border-radius:8px;
    padding:2rem;
    margin:2rem 0;
 
    text-align:left;
    color:white;
}


#article_1_space{
    margin:28rem 0;
}
#article_2_space{
    margin:30rem 0 0 0;
}
#article_3_space{
    margin:30rem 0 30rem 0;
}
#cargo{
    width:100%;
    height:100%;
}
#space_graph{
    width:100%;
    height:100%;
}


/*---------------------Bootstrap change/modification-----------------------------------*/

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color:#138496 !important;
}
.dropdown-item:hover{
    background-color:rgba(0, 0, 0, 0.3) !important;
}
a:hover{
    color:orange !important;
}









/*---------------------Annimmation left-----------------------------------*/
/* ----------------------------------------------
 * Generated by Animista on 2020-2-27 11:20:58
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

/*---------------------Annimmation Right-----------------------------------*/
/* ----------------------------------------------
 * Generated by Animista on 2020-2-27 14:25:56
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}








/*---------------------Annimmation -----------------------------------*/


.slide-in-left {
	-webkit-animation: slide-in-left 2s  ;
	        animation: slide-in-left 2s  ;
}
.slide-in-left1 {
	-webkit-animation: slide-in-left 3s  ;
	        animation: slide-in-left 3s  ;
}
.slide-in-left2 {
	-webkit-animation: slide-in-left 4s  ;
	        animation: slide-in-left 4s  ;
}
.slide-in-left3 {
	-webkit-animation: slide-in-left 5s  ;
	        animation: slide-in-left 5s  ;
}


.slide-in-right {
	-webkit-animation: slide-in-right 3s ;
	        animation: slide-in-right 3s ;
}
.slide-in-right1 {
	-webkit-animation: slide-in-right 4s ;
	        animation: slide-in-right 4s ;
}
.slide-in-right2 {
	-webkit-animation: slide-in-right 5s ;
	        animation: slide-in-right 5s ;
}
.slide-in-right3 {
	-webkit-animation: slide-in-right 6s ;
	        animation: slide-in-right 6s ;
}