.col-right .div-right,.col-left .div-left{
	-webkit-transition: -webkit-transform 1.5s, opacity .3s;
	-moz-transition: -moz-transform 1.5s, opacity .3s;
	transition: transform 1.5s, opacity .3s;
}
.slide-right{

  opacity: 0;
	-webkit-transform: translateX(80px);
	-moz-transform: translateX(80px);
	transform: translateX(80px);
}
.slide-left{

  opacity: 0;
	-webkit-transform: translateX(-80px);
	-moz-transform: translateX(-80px);
	transform: translateX(-80px);
}


#table {
    position: absolute;
    bottom: -50px;
    left: -100px;
}

#feuille1,
#feuille2,
#feuille3,
#feuille4,
#camp1,
#camp2,
.icon-social {
    position: absolute;
}

@media (min-width: 769px) {}


/* ============================= */


/* ==========SOCIAL============== */


/* ============================= */

#icon1,
#icon2,
#icon3,
#icon4,
#icon5,
#icon6,
#icon7,
#icon8,
#icon9,
#icon10,
#icon11 {
    position: absolute;
    /*  animation: MoveIcon 2s ease-in-out infinite; */
}

#icon1 {
    left: 0px;
    top: 250px;
}

#icon2 {
    right: 10px;
    top: 150px;
    animation-delay: -100ms;
}

#icon3 {
    left: 0px;
    top: 40px;
    animation-delay: 200ms;
}

#icon4 {
    right: 30px;
    top: 420px;
    animation-delay: 300ms;
}

#icon5 {
    left: 30px;
    top: 350px;
    animation-delay: 400ms;
}

#icon6 {
    right: 40px;
    top: 280px;
    animation-delay: -500ms;
}

#icon7 {
    left: 20px;
    top: 180px;
    animation-delay: 600ms;
}

#icon8 {
    right: 10px;
    top: 40px;
    animation-delay: 700ms;
}

#icon9 {
    right: 0px;
    top: 240px;
    animation-delay: -800ms;
}

#icon10 {
    left: 20px;
    top: 480px;
}

#icon11 {
    right: 50px;
    top: 0px;
}

@media (min-width: 768px) {
    #icon1 {
        left: 50px;
        top: 250px;
    }
    #icon2 {
        right: 50px;
        top: 150px;
        animation-delay: -100ms;
    }
    #icon3 {
        left: 50px;
        top: 40px;
        animation-delay: 200ms;
    }
    #icon4 {
        right: 60px;
        top: 420px;
        animation-delay: 300ms;
    }
    #icon5 {
        left: 50px;
        top: 350px;
        animation-delay: 400ms;
    }
    #icon6 {
        right: 70px;
        top: 280px;
        animation-delay: -500ms;
    }
    #icon7 {
        left: 20px;
        top: 180px;
        animation-delay: 600ms;
    }
    #icon8 {
        right: 20px;
        top: 40px;
        animation-delay: 700ms;
    }
    #icon9 {
        right: 50px;
        top: 240px;
        animation-delay: -800ms;
    }
    #icon10 {
        left: 50px;
        top: 480px;
    }
    #icon11 {
        right: 60px;
        top: 0px;
    }
}
@media (min-width: 1024px) {
    #icon1 {
        left: 50px;
        top: 250px;
    }
    #icon2 {
        right: 50px;
        top: 150px;
        animation-delay: -100ms;
    }
    #icon3 {
        left: 50px;
        top: 40px;
        animation-delay: 200ms;
    }
    #icon4 {
        right: 50px;
        top: 420px;
        animation-delay: 300ms;
    }
    #icon5 {
        left: 50px;
        top: 350px;
        animation-delay: 400ms;
    }
    #icon6 {
        right: 50px;
        top: 280px;
        animation-delay: -500ms;
    }
    #icon7 {
        left: 20px;
        top: 180px;
        animation-delay: 600ms;
    }
    #icon8 {
        right: 20px;
        top: 40px;
        animation-delay: 700ms;
    }
    #icon9 {
        right: 100px;
        top: 240px;
        animation-delay: -800ms;
    }
    #icon10 {
        left: 100px;
        top: 480px;
    }
    #icon11 {
        right: 60px;
        top: 0px;
    }
}
@keyframes MoveIcon {
    0% {
        transform: translateY(200px)
    }
    30% {
        transform: translateY(0px)
    }
    70% {
        transform: translateY(0px)
    }
    100% {
        transform: translateY(0px)
    }
}


/* ============================= */


/* ==========E-COMMERCE============== */


/* ============================= */

.content-img.mobil-img {
    position: relative;
}

.content-img {
    overflow: hidden;
}

.animationFade {
    opacity: 1;
    animation: fade 5s ease infinite;
   
}

@keyframes fade {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    60% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}


/* ============================= */


/* ==========PORTAIL============== */


/* ============================= */


    #feuille1 {
        left:140px;
           top: 80px;
    }
    #feuille2 {
        right: 50px;
        top: 100px;
    }
    #feuille3 {
        right: 60px;
        top: 180px;
    }
    #feuille4 {
        left:90px;
        top: 180px;
    }


/* ============================= */


/* ==========THE CAMP============== */


/* ============================= */
#camp1 {
    top: 80px;
    left: 10px;
}

#camp2 {
    top: 220px;
    right: 30px;
}

#camp1 {
    left: 0px;
    animation: float 5s ease-in-out infinite .8s;
}

#camp2 {
    animation: float 5s ease-in-out infinite;
}

@media (max-width: 375px) {
    #camp1 {
        left: 0px;
    }
    #camp2 {
        right: 0px;
    }
}

@media (min-width:1440px) {

    #camp2 {
        right: 100px;
    }
}
@keyframes float {
    0% {
        transform: translateY(0px)
    }
    50% {
        transform: translateY(-40px)
    }
    100% {
        transform: translateY(0px)
    }
}