/* Theme Name: LANDING PAGE Author: IDEO POINT COM Author URI: https://www.ideopoint.com/ Version: 0.1 */
/*------ RESET & NORMALISE CSS ------*/
html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0 
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal 
}
ul {
    list-style: none 
}
button, input, select {
    margin: 0 
}
html {
    box-sizing: border-box 
}
*, *::before, *::after {
    box-sizing: inherit 
}
img, video {
    height: auto;
    max-width: 100% 
}
iframe {
    border: 0 
}
table {
    border-collapse: collapse;
    border-spacing: 0 
}
td, th {
    padding: 0 
}
/*--------------GENERAL--------------*/
* {
    font-family: 'Barlow', sans-serif;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
}
body, html {
    overflow-x: hidden;
    position: relative;
}
.wrapper {
    max-width: 1390px;
    margin: 0 auto;
}
/*--------------COULEURS --------------*/
:root{
    --color1: rgb(251,234,5);
    --color2: rgb(57,66,73);
    --color3: rgb(255,255,255);
    --color4: rgb(17,17,17);
    --color5: rgb(235,235,235);
    --color6: rgb(112,112,112);
}
/*-------------- 1 - HEADER + CONTACT--------------*/
header {
    background-image:url('../img/fond-header.jpg');
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width:100%;
    height:100%;
    padding-bottom:0px;
}
header .overlay {
    background: transparent linear-gradient(0deg, #000000 0%, #394249 100%) 0% 0% no-repeat padding-box;
    opacity: 0.8;
    position:absolute;
    mix-blend-mode: multiply;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media screen and (max-width:991px){
    header {
        background-size: auto;
        background-position: 0 0;
        width:100%;
        height:100%;
   }
    header .overlay {
        background: transparent linear-gradient(0deg, #000000 0%, #394249 100%) 0% 0% no-repeat padding-box;
        opacity: 0.9;
   }
}
/* --------------- Intro ------------- */
header .intro{
  padding:15px;
}
header .intro .logo{
    margin:0 auto;
    text-align:left;
    max-width:100%;
    height:auto;
    max-height:60px;
}
header .intro h1{
    color: var(--color3);
    text-transform:uppercase;
    font-size:48px;
    font-weight:bold;
    margin-top:50px;
    margin-bottom:30px;
}
header .intro p{
    color: var(--color3);
    font-size:22px;
    line-height:28px;
    font-weight:400;
    display:block;
    width:100%;
    max-width:500px;
}
@media screen and (max-width:991px){
    header .intro{
        padding:10px 20px;
        padding-left:0px;
        padding-top:40px;
   }
    header .intro h1{
        font-size:42px;
        margin-top:40px;
        margin-bottom:20px;
   }
    header .intro p{
        font-size:20px;
        line-height:25px;
   }
}
/* --------------- Formulaire ------------- */
.formulaire {
    background-color:var(--color4);
    padding:40px 80px;
    padding-bottom:100px;
    border-radius:10px;
    margin-top:115px;
}
@media screen and (max-width:991px){
    .formulaire {
        padding:15px;
        padding-top:40px;
        padding-bottom:150px;
        margin-top:50px;
   }
}
.formulaire .titre {
    color:var(--color3);
    text-transform:uppercase;
    font-size:26px;
    line-height:29px;
    display:block;
    width:100%;
    max-width:200px;
}
.formulaire img {
    float:right;
    max-width:100%;
    height:auto;
    max-height:60px;
    position:absolute;
    right:0;
    margin-right:15px;
    margin-top:-60px;
}
@media screen and (max-width:768px){
    .formulaire img {
        max-height:35px;
        margin-top:-80px;
    }

    .formulaire .titre {
        font-size:25px;
        line-height:27px;
    }
}    

.formulaire form {
    margin-top:30px;
}
.formulaire label {
    color:var(--color3);
    margin:5px;
}
.leftcol {
    float:left;
    width:48%;
    margin-left:4%;
}
.marginleft {
    margin-left:0;
}
@media screen and (max-width:991px){
    .leftcol {
        width:100%;
        margin-left:0%;
   }
}
input[type="text"], input[type="tel"], input[type="number"], input[type="email"] {
    line-height: 25px;
    height: 45px;
    background-color: var(--color3);
    color:var(--color2);
    font-size: 16px;
    border: none;
    border-bottom-color: currentcolor;
    border-bottom-style: none;
    border-bottom-width: medium;
    padding-left: 10px;
    border-radius:5px;
}
textarea {
    line-height: 25px;
    background-color:var(--color3);
    color:var(--color2);
    width:100%;
    font-size: 16px;
    border: none;
    border-bottom-color: currentcolor;
    border-bottom-style: none;
    border-bottom-width: medium;
    padding-left: 10px;
    padding-top:10px;
    border-radius:5px;
}
.formulaire .btncontact {
    font-size: 18px;
    font-weight: bold;
    color: var(--color4);
    text-decoration: none;
    padding: 10px 30px;
    display: block;
    margin-top: 15px;
    text-transform:uppercase;
    border-radius:5px;
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
    background: var(--color1) 0% 0% no-repeat padding-box;
    box-shadow: 4px 4px 0px var(--color4);
    border: 3px solid var(--color4);
    border-radius: 10px;
    float:right;
    cursor: pointer;
}
.formulaire .btncontact:hover {
    background-color: transparent;
    color: var(--color1);
    border:3px solid var(--color1);
    box-shadow: 4px 4px 0px var(--color4);
}
/*--------------2 - PRESTATION--------------*/
.prestation {
    padding-top:100px;
    padding-bottom:60px;
}
.prestation h2 {
    color:var(--color2);
    text-transform:uppercase;
    font-weight:bold;
    font-size:28px;
    position:relative;
}
.prestation hr {
    color:var(--color1);
    width:90px;
    border:2px solid var(--color1);
    margin-top:10px;
}
.col-new {
    float:left;
    width:12.5%;
    display:block;
}
.blocprestation {
    width:100%;
    min-height:125px;
    display:block;
    margin:25px 15px;
}
@media screen and (max-width:991px){
    .prestation hr {
        margin-bottom:45px;
    }    
    .blocprestation {
        margin:15px 0px;
   }
}
.blocprestation .blocimg {
    float:left;
    width:40%;
    display:block;
    height:100%;
    padding:10px 15px;
    background-color:var(--color3);
}
.blocprestation .bloctxt {
    float:left;
    width:60%;
    background-color:var(--color5);
    box-shadow: 0px 2px 6px #00000029;
}
.blocprestation .bloctxt h3 {
    color:var(--color2);
    font-size:20px;
    line-height:20px;
    font-weight:500;
    padding:35px 20px;
}
.blocprestation .small h3 {
    font-size:18px;
    line-height:18px;
    padding:30px 20px;
}
/*--------------3 - PRESENTATION--------------*/
.presentation {
    padding-top:60px;
    padding-bottom:60px;

    background-image:url('../img/traitfond.jpg');
    background-repeat:repeat-y;
    background-position:50% 50%;
}


.presentation table
{
border:1px solid #333;
width:100%;
max-width:1080px;
margin:0 auto;
}

.presentation table .titre
{

    font-weight:600;

    padding:10px;
    background-color:var(--color1);
}


.presentation table .titre td
{
   font-weight:600;
   font-size:17px;
   padding:10px;
    background-color:var(--color1);
    
}



.presentation table td
{
    color:var(--color2);
    font-size:17px;
    text-align: left;
    line-height:24px;
    padding:10px;

}




.presentation .row {
    position:relative;
}


.txtpresentation {
    padding:80px 70px;
    padding-left:45%;
}
@media screen and (max-width: 1600px) {
    .txtpresentation {
        padding:80px 70px;
        padding-left:30%;
   }
}
@media screen and (max-width:991px){
    .txtpresentation {
        padding:80px 20px;
        padding-top:0px;
   }
}
.txtpresentation .titre {
    background-color:var(--color3);
    color: var(--color2);
    padding:10px 15px;
    font-size:25px;
    display:inline-block;
}
.txtpresentation h2 {
    background-color:var(--color2);
    color: var(--color3);
    padding:10px 15px;
    font-size:28px;
    display:inline-block;
    margin-bottom:30px;
}
.txtpresentation p {
    color:var(--color2);
    font-size:18px;
    line-height:24px;
}
/*--------------4 - AVANTAGES--------------*/
.avantage {
    margin-top:150px;
    margin-bottom:60px;
    padding-top:80px;
    padding-bottom:80px;
    background-image:url('../img/fond-avantage.jpg');
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.avantage .overlay {
    background: var(--color2) 0% 0% no-repeat padding-box;
    background: --color2 0% 0% no-repeat padding-box;
    opacity: 0.7;
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.avantage h2 {
    color:var(--color3);
    text-transform:uppercase;
    font-weight:bold;
    font-size:28px;
    position:relative;
}
.avantage hr {
    color:var(--color1);
    width:90px;
    border:2px solid var(--color1);
    margin-top:10px;
}
.avantage .blocavantage {
    text-align:center;
    padding:40px;
    margin-top:30px;
}
@media screen and (max-width:991px){
    .avantage .blocavantage {
        margin-top:0px;
   }
}
.avantage .blocavantage img {
    max-width:100%;
    height:auto;
    max-height:130px;
}
.avantage .blocavantage p {
    text-align:center;
    color:var(--color3);
    font-size:22px;
    line-height:26px;
    margin:0 auto;
    margin-top:20px;
    display:block;
    max-width:220px;
}
.avantage .btncontact {
    font-size: 18px;
    font-weight: bold;
    color: var(--color4);
    text-decoration: none;
    padding: 10px 30px;
    margin:0 auto;
    margin-top:30px;
    display:block;
    width:100%;
    max-width:220px;
    text-transform:uppercase;
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
    background: var(--color1) 0% 0% no-repeat padding-box;
    box-shadow: 4px 4px 0px var(--color4);
    border: 3px solid var(--color4);
    border-radius: 10px;
    cursor: pointer;
}
.avantage .btncontact:hover {
    border: 3px solid var(--color1);
    color: var(--color1);
    background: transparent;
}
/*--------------5 - CHIFFRE--------------*/
.chiffre {
    padding-top:30px;
    padding-bottom:30px;
}
.paddingchiffre {
    padding:40px;
    margin-top:30px;
}
@media screen and (max-width:991px){
    .paddingchiffre {
        padding:20px 40px;
        margin-top:0px;
   }
}
.blocchiffre {
    border:4px solid var(--color1);
    text-align:center;
    padding:20px 30px;
    padding-top:35px;
    height:auto;
    min-height:250px;
    position:relative;
}

.blocchiffre span {
    color:var(--color2);
    font-weight:800;
    font-size:68px;
    word-spacing:1px;
    display:inline-block;
}
.blocchiffre p {
    color: var(--color2);
    font-size:21px;
    line-height:26px;
    text-align:center;
}
/*--------------6 - CONFIANCE--------------*/
.confiance {
    padding-top:120px;
    padding-bottom:150px;
}
.confiance .container {
    background-color: var(--color1);
    width:100%;
    max-width:1280px;
    padding-top:120px;
    padding-bottom:150px;
    position:relative;
}
.confiance .container::before {
    content: '';
    background-color:var(--color4);
    height: 150px;
    width: 2px;
    position: absolute;
    top: -75px;
    left: 50%;
}
.confiance h2{
    display:inline-block;
    background-color: var(--color3);
    color:var(--color2);
    text-transform:uppercase;
    font-weight:bold;
    font-size:26px;
    position:relative;
    padding:15px 25px;
    box-shadow: 0px 3px 6px #00000029;
    margin-left:-60px;
}
.txtconfiance {
    padding:50px 80px;
}
.txtconfiance p {
    color:var(--color2);
    font-size:17px;
    line-height:22px;
}
@media screen and (max-width:991px){
    .confiance h2{
        margin-left:0px;
   }
    .txtconfiance {
        padding:50px 15px;
   }
}
#reference {
    position:absolute;
    margin-left:-50px;
    margin-top:-30px;
}
#reference.owl-carousel .owl-dots .owl-dot.active span, #reference.owl-carousel .owl-dots .owl-dot:hover span {
    background:var(--color2);
    transform: translate3d(0px, -50%, 0px) scale(0.7);
}
#reference.owl-carousel .owl-dots{
    display: inline-block;
    width: 100%;
    text-align: center;
}
#reference.owl-carousel .owl-dots .owl-dot{
    display: inline-block;
}
#reference.owl-carousel .owl-dots .owl-dot span {
    background: var(--color2);
    display: inline-block;
    height: 20px;
    margin: 0 2px 5px;
    transform: translate3d(0px, -50%, 0px) scale(0.3);
    transform-origin: 50% 50% 0;
    transition: all 250ms ease-out 0s;
    width: 20px;
}
#reference .owl-nav {
    width:100%;
    display:block;
    position:absolute;
    margin-top:-250px;
    max-width:140px;
    left:-300px;
}
#reference .owl-nav .owl-prev {
    background-image:url('../img/arrow-left.png');
    background-size:contain;
    margin:0;
    display:block;
    background-repeat:no-repeat;
    background-position:50% 50%;
    float:left;
    padding:15px;
    color: transparent;
}
#reference .owl-nav .owl-next {
    background-image:url('../img/arrow-right.png');
    background-size:contain;
    margin:0;
    display:block;
    background-repeat:no-repeat;
    background-position:50% 50%;
    float:right;
    padding:15px;
    color: transparent;
}
@media screen and (max-width:991px){
    #reference {
        position:absolute;
        margin-left: -15px;
   }
    #reference .owl-nav {
        display:none;
   }
}
/*--------------7 - TEMOIGNAGES --------------*/
.temoin {
    padding-top:60px;
    padding-bottom:0px;
}
@media screen and (max-width:991px){
    .temoin {
        padding-top:0px;
   }
}
@media screen and (max-width:768px){
    .temoin {
        padding-top:60px;
   }
}
.temoin h2 {
    color:var(--color2);
    text-transform:uppercase;
    font-weight:bold;
    font-size:28px;
    position:relative;
}
.temoin hr {
    color:var(--color1);
    width:90px;
    border:2px solid var(--color1);
    margin-top:10px;
}
/*----------Code source OwlCarousel (CodePen)--------------*/
.owl-stage {
    margin:0;
    padding:0;
    margin-top:15px;
}
.shadow-effect {
    background: var(--color3) 0% 0% no-repeat padding-box;
    border: 1px solid var(--color6);
    border-radius: 15px;
    padding:40px 30px;
}
#customers-testimonials .shadow-effect p {
    text-align: center;
    font-size:17px;
    line-height:22px;
    letter-spacing: 0px;
    color: var(--color4);
    opacity: 1;
}
#customers-testimonials .shadow-effect img {
    text-align:center;
    margin:0 auto;
    margin-top:20px;
    margin-bottom:-20px;
}
#customers-testimonials .shadow-effect .quote {
    width:60px;
    height:43px;
    margin:0 auto;
    margin-bottom:25px;
}
.shadow-effect hr{
    color:var(--color6);
    width:50px;
    border:1px solid var(--color6);
    margin:0 auto;
    margin-top:30px;
}
.testimonial-name {
    margin: 0 auto;
    margin-top:30px;
    display: table;
    width: auto;
    text-align: center;
    color: #666;
}
#customers-testimonials .item {
    text-align: center;
    padding: 50px;
    margin-bottom:-50px;
    opacity: .2;
    -webkit-transform: scale3d(0.8, 0.8, 1);
    transform: scale3d(0.8, 0.8, 1);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
#customers-testimonials .owl-item.active.center .item {
    opacity: 1;
    -webkit-transform: scale3d(1.0, 1.0, 1);
    transform: scale3d(1.0, 1.0, 1);
    width:100%;
    padding: 50px 0px;
    padding-bottom:0px;
}
#customers-testimonials .owl-nav {
    width:100%;
    display:block;
    position:absolute;
    top:48%;
}
#customers-testimonials .owl-nav .owl-prev {
    background-image:url('../img/arrow-left.png');
    background-size:contain;
    margin:0;
    display:block;
    background-repeat:no-repeat;
    background-position:50% 50%;
    float:left;
    padding:15px;
    color: transparent;
}
#customers-testimonials .owl-nav .owl-next {
    background-image:url('../img/arrow-right.png');
    background-size:contain;
    margin:0;
    display:block;
    background-repeat:no-repeat;
    background-position:50% 50%;
    float:right;
    padding:15px;
    color: transparent;
}

@media screen and (max-width:768px){
#customers-testimonials .owl-nav {
    display:none;
}
}

/*---------- // Code source OwlCarousel (CodePen)--------------*/
/*--------------8 - ACCROCHE --------------*/
.accroche {
    padding-top:0px;
    padding-bottom:100px;
}
.bloc-accroche {
    width:100%;
    max-width:525px;
    margin:0 auto;
    margin-top:80px;
}
@media screen and (max-width:768px){
    .accroche {
        margin-top:-120px;
   }
    .bloc-accroche {
        margin-top:0px;
   }
}
.txtaccroche {
    transform: matrix(0.98, -0.17, 0.17, 0.98, 0, 0);
    color: var(--unnamed-color-ffe800);
    text-align: center;
    font: normal normal normal 45px/47px Permanent Marker;
    letter-spacing: 0px;
    color: var(--color1);
    text-transform: uppercase;
    opacity: 1;
}
.fleche {
    max-width:100%;
    height:auto;
    max-height:90px;
    float:right;
    margin-top:-20px;
}
@media screen and (max-width:580px){
    .txtaccroche {
        transform: matrix(0.98, -0.17, 0.17, 0.98, 0, 0);
        font: normal normal normal 38px/40px Permanent Marker;
        margin-left:-50px;
   }
    .fleche {
        max-height:70px;
        margin-top:-40px;
   }
}
.accroche .btncontact {
    font-size: 18px;
    font-weight: bold;
    color: var(--color4);
    text-decoration: none;
    padding: 10px 30px;
    text-align:center;
    margin:0 auto;
    margin-top:50px;
    display:block;
    width:100%;
    max-width:240px;
    text-transform:uppercase;
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
    background: var(--color1) 0% 0% no-repeat padding-box;
    box-shadow: 4px 4px 0px var(--color4);
    border: 3px solid var(--color4);
    border-radius: 10px;
    cursor: pointer;
}
.accroche .btncontact:hover {
    background-color: transparent;
    color: var(--color4);
    border:3px solid var(--color4);
    box-shadow: 4px 4px 0px var(--color4);
}
/*--------------9 - FOOTER--------------*/
footer{
    background: var(--color2);
    width:100%;
    padding:65px 0px;
    text-align:center;
}
footer img{
    margin:0 auto;
    text-align:center;
    max-width:100%;
    height:auto;
    max-height:75px;
    margin-bottom:20px;
}
footer p{
    color: var(--color3);
    width:100%;
    font-size:14px;
    text-align:center;
}



/*--------------10 - REMERCIEMENT --------------*/
.remerciement{
    background-color:var(--color4);
    width:100%;
    height:100vh;
    text-align:center;
}


.bloc-remerciement 
{
  padding-top:10%;
    }    
    



.bloc-remerciement img
{
max-width:100%;
height:auto;
max-height:100px;
}    

.bloc-remerciement  p{
    color: var(--color3);
    font-size:24px;
    line-height:28px;
    font-weight:400;
    display:block;
    width:100%;
    max-width:350px;
    margin:0 auto;
    text-transform:uppercase;
    margin-top:10px;
    letter-spacing:0.5px;
}

.bloc-remerciement .txtmerci
{
margin-top:50px;
}

.bloc-remerciement  p span{
    color: var(--color1);
}    

.bloc-remerciement  .btncontact {
    font-size: 18px;
    font-weight: bold;
    color: var(--color4);
    text-decoration: none;
    padding: 15px 30px;
    text-align:center;
    margin:0 auto;
    margin-top:50px;
    display:block;
    width:100%;
    max-width:250px;
    text-transform:uppercase;
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
    background: var(--color1) 0% 0% no-repeat padding-box;
    box-shadow: 4px 4px 0px var(--color4);
    border: 3px solid var(--color4);
    border-radius: 10px;
    cursor: pointer;
}
.bloc-remerciement  .btncontact:hover {
    background-color: transparent;
    color: var(--color1);
    border:3px solid var(--color1);
    box-shadow: 4px 4px 0px var(--color4);
}

.bloc-remerciement  .txtaccroche {
    transform: matrix(0.98, -0.17, 0.17, 0.98, 0, 0);
    color: var(--unnamed-color-ffe800);
    text-align: center;
    font: normal normal normal 45px/47px Permanent Marker;
    letter-spacing: 0px;
    color: var(--color1);
    text-transform: uppercase;
    opacity: 1;
    margin-top:70px;
}

/*--- ICONES ANIMEES ---*/

#icone-creation-site-internet #txt-lines .lines {
    animation: txtlines 3s ease-in-out infinite;
}

@keyframes txtlines {
    0% {
        fill:#040506;
    }
    40% {
        fill:#040506;
    }
    50% {
        fill: var(--color1);
    }
    60% {
        fill: var(--color1);
    }
    70% {
        fill:#040506;
    }
    100% {
        fill:#040506;
    }
}

#icone-site-internet #yellow-cube .yellow {
    animation: strokelines 3s ease-in-out infinite;
    animation-delay: 0.5s;
}

@keyframes strokelines {
    0% {
        stroke:#161615;
    }
    40% {
        stroke:#161615;
    }
    50% {
        stroke: var(--color1);
    }
    60% {
        stroke: var(--color1);
    }
    70% {
        stroke:#161615;
    }
    100% {
        stroke:#161615;
    }
}

#icone-site-internet #hand {
    animation: movehand 3s ease-in-out infinite;
    animation-delay: 0.5s;
}

@keyframes movehand {
    0% {
        transform: translate(2.019px, 11.601px);
    }
    40% {
        transform: translate(2.019px, 11.601px);
    }
    50% {
        transform: translate(0, 0);
    }
    60% {
        transform: translate(0, 0);
    }
    70% {
        transform: translate(2.019px, 11.601px);
    }
    100% {
        transform: translate(2.019px, 11.601px);
    }
}

#icone-wordpress-prestashop #points .yellow {
    animation: strokepoints 3s ease-in-out infinite;
    animation-delay: 0.5s;
}

@keyframes strokepoints {
    0% {
        stroke:#040405;
    }
    40% {
        stroke:#040405;
    }
    50% {
        stroke: var(--color1);
    }
    60% {
        stroke: var(--color1);
    }
    70% {
        stroke:#040405;
    }
    100% {
        stroke:#040405;
    }
}

#icone-wordpress-prestashop #code-middle {
    animation: htmlmiddle 3s ease-in-out infinite;
    animation-delay: 0.5s;
}

@keyframes htmlmiddle {
    0% {
        transform: translate(34px, 66.511px);
    }
    40% {
        transform: translate(34px, 66.511px);
    }
    50% {
        transform: translate(34px, 28.511px);
    }
    60% {
        transform: translate(34px, 28.511px);
    }
    70% {
        transform: translate(34px, 66.511px);
    }
    100% {
        transform: translate(34px, 66.511px);
    }
}

#icone-wordpress-prestashop #code-left {
    animation: htmlleft 3s ease-in-out infinite;
    animation-delay: 0.5s;
}

@keyframes htmlleft {
    0% {
        transform: translate(-31px, -0.167px);
    }
    40% {
        transform: translate(-31px, -0.167px);
    }
    50% {
        transform: translate(-2px, -0.167px);
    }
    60% {
        transform: translate(-2px, -0.167px);
    }
    70% {
        transform: translate(-31px, -0.167px);
    }
    100% {
        transform: translate(-31px, -0.167px);
    }
}

#icone-wordpress-prestashop #code-right {
    animation: htmlright 3s ease-in-out infinite;
    animation-delay: 0.5s;
}

@keyframes htmlright {
    0% {
        transform: translate(30px, -0.167px);
    }
    40% {
        transform: translate(30px, -0.167px);
    }
    50% {
        transform: translate(2px, -0.167px);
    }
    60% {
        transform: translate(2px, -0.167px);
    }
    70% {
        transform: translate(30px, -0.167px);
    }
    100% {
        transform: translate(30px, -0.167px);
    }
}

#icone-hebergement #chiffre-7 {
    animation: moveseven 3s ease-in-out infinite;
}

@keyframes moveseven {
    0% {
        transform: translate(32px, 36.127px);
    }
    40% {
        transform: translate(32px, 36.127px);
    }
    50% {
        transform: translate(0, 0);
    }
    60% {
        transform: translate(0, 0);
    }
    70% {
        transform: translate(32px, 36.127px);
    }
    100% {
        transform: translate(32px, 36.127px);
    }
}

#icone-hebergement #chiffre-24 {
    animation: movetwentyfour 3s ease-in-out infinite;
}

@keyframes movetwentyfour {
    0% {
        transform: translate(-49.164px, -49.582px);
    }
    40% {
        transform: translate(-49.164px, -49.582px);
    }
    50% {
        transform: translate(0, 0);
    }
    60% {
        transform: translate(0, 0);
    }
    70% {
        transform: translate(-49.164px, -49.582px);
    }
    100% {
        transform: translate(-49.164px, -49.582px);
    }
}

#icone-hebergement #slash {
    animation: moveslash 3s ease-in-out infinite;
}

@keyframes moveslash {
    0% {
        transform: translate(15.565px, 85.006px);
    }
    40% {
        transform: translate(15.565px, 85.006px);
    }
    50% {
        transform: translate(40.207px, 10.006px);
    }
    60% {
        transform: translate(40.207px, 10.006px);
    }
    70% {
        transform: translate(15.565px, 85.006px);
    }
    100% {
        transform: translate(15.565px, 85.006px);
    }
}

#icone-hebergement #round-yellow {
    animation: moveround 3s ease-in-out infinite;
}

@keyframes moveround {
    0% {
        transform: translate(-37.784px, -10.699px);
    }
    40% {
        transform: translate(-37.784px, -10.699px);
    }
    50% {
        transform: translate(-8.784px, -10.699px);
    }
    60% {
        transform: translate(-8.784px, -10.699px);
    }
    70% {
        transform: translate(-37.784px, -10.699px);
    }
    100% {
        transform: translate(-37.784px, -10.699px);
    }
}

#icone-webdesign #round-line-yellow,
#icone-webdesign #round-line-yellow-2 {
    animation: roundline 3s ease-in-out infinite;
    animation-delay: 0.5s;
}

@keyframes roundline {
    0% {
        fill:#040405;
    }
    40% {
        fill:#040405;
    }
    50% {
        fill: var(--color1);
    }
    60% {
        fill: var(--color1);
    }
    70% {
        fill:#040405;
    }
    100% {
        fill:#040405;
    }
}

/*#icone-webdesign #design-left .round {
    animation: designleftround 3s ease-in-out infinite;
    animation-delay: 1s;
}

@keyframes designleftround {
    0% {
        transform: translate(0.258px, 0.259px);
    }
    40% {
        transform: translate(0.258px, 0.259px);
    }
    50% {
        transform: translate(0.258px, 4.259px);
    }
    60% {
        transform: translate(0.258px, 4.259px);
    }
    70% {
        transform: translate(0.258px, 0.259px);
    }
    100% {
        transform: translate(0.258px, 0.259px);
    }
}*/

#icone-webdesign #design-left {
    animation: designleft 3s ease-in-out infinite;
    animation-delay: 0.5s;
}

@keyframes designleft {
    0% {
        transform: rotate(0deg);
    }
    40% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(-10deg) translateY(5px) translateX(-2px);
    }
    60% {
        transform: rotate(-10deg) translateY(5px) translateX(-2px);
    }
    70% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

#icone-webdesign #design-right {
    animation: designright 3s ease-in-out infinite;
    animation-delay: 0.5s;
}

@keyframes designright {
    0% {
        transform: rotate(0deg);
    }
    40% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(-10deg) translateY(5px) translateX(-2px);
    }
    60% {
        transform: rotate(-10deg) translateY(5px) translateX(-2px);
    }
    70% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}