html, body{
    width: 100%;
    height: 100%;
}

.container{
    margin: 0 auto;
}

.icon-jumb{
    position: absolute;
    top:-70px;
    left:50%;
    transform: translateX(-50%);
    width: 200px;
    margin: 0 auto;
}


.icon-jumb-avion{
    width:170px;
    top:-60px;

}

.jumbotron-custom{
    position: relative;
}

.jumbo-box{
    margin-bottom: 50px;
}

.h2-custom{
    margin-top: 70px;
}

#bloc-info{
    margin-top: 100px;
}

.carourou{
background: linear-gradient(0.25turn,#00bb70, #bde6cc);
border-radius: 10px;
animation-name: spaceInUp ;
animation-duration: .8s;

  
}

.title-carousel{
    opacity: 0;
    
    animation-name:spaceInLeft ;

    animation-duration: 1s;
    animation-delay: 1.3s;
    animation-fill-mode: forwards;  
}

.title-carousel .btn-outline-light:hover{
   background: rgba(0, 0, 0, 0.32);
  color: #ffffff;

}

.carourou-inner{
    opacity: 0;
    animation-name:spaceInRight;
    animation-duration: 1s;
     animation-delay: .8s;
    animation-fill-mode: forwards;  
}



.carousel-custom img{
    margin: 0 auto;
    padding: 10px;
    

}

.media-icon a{
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.37);
    color: #fff;
    text-decoration: none;
}

.media-icon a i:hover{
    transform: scale(2,2);
}

.jumbotron-1:hover img{
    animation-name: swap-2;
    animation-duration: 1s;
}

.jumbotron-2:hover img{
    animation-name: twisterInUp-2;
    animation-duration: 0.8s;
   
}


.jumbotron-3:hover img{
    animation-name: tinUpIn-2;
    animation-duration: 1s;
   
}




@-webkit-keyframes swap-2 {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scale(0, 0) translate(500px, 0px);
    transform: scale(0, 0) translate(500px, 0px); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: scale(1, 1) translate(-85px, 0px);
    transform: scale(1, 1) translate(-85px, 0px); } }


@keyframes swap-2 {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scale(0, 0) translate(500px, 0px);
    transform: scale(0, 0) translate(500px, 0px); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: scale(1, 1) translate(-85px, 0px);
    transform: scale(1, 1) translate(-85px, 0px); } }


@-webkit-keyframes tinUpIn-2 {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translate(-100px,-100%);
    transform: scale(1, 1) translateY(-100px,-100%); 
     }
  50%,
  70%,
  90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translate(-100px,0);
    transform: scale(1.1, 1.1) translate(-100px,0); }
  60%,
  80%,
  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translate(-100px,0);
    transform: scale(1, 1) translate(-100px,0); } }


@keyframes twisterInUp-2 {
  0% {
    opacity: 0;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: scale(0, 0) rotate(360deg) translate( -100px,100%);
    transform: scale(0, 0) rotate(360deg) translate(-100px,100%); }
  30% {
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: scale(0, 0) rotate(360deg) translate( -100px,100%);
    transform: scale(0, 0) rotate(360deg) translate( -100px,100%); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(1, 1) rotate(0deg) translate(-100px,0);
    transform: scale(1, 1) rotate(0deg) translate(-100px,0); } }