autoprefix

user/themes/le_style_de_lours_modif/scss/theme/_animation.scss

@@ -1,11 +1,26 @@
+@-webkit-keyframes rotateOpen{
+    0% {-webkit-transform: rotate(-15deg);transform: rotate(-15deg);}
+    100% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
+}
+
 @keyframes rotateOpen{
-    0% {transform: rotate(-15deg);}
-    100% {transform: rotate(0deg);}
+    0% {-webkit-transform: rotate(-15deg);transform: rotate(-15deg);}
+    100% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
+}
+
+@-webkit-keyframes rotateClose{
+    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}
+    100% {-webkit-transform: rotate(-15deg);transform: rotate(-15deg);}
 }
 
 @keyframes rotateClose{
-    0% { transform: rotate(0deg);}
-    100% {transform: rotate(-15deg);}
+    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}
+    100% {-webkit-transform: rotate(-15deg);transform: rotate(-15deg);}
+}
+
+@-webkit-keyframes translateOpen{
+  0%{margin-top: 0px;}
+  100%{margin-top: -155px;}
 }
 
 @keyframes translateOpen{
@@ -13,14 +28,29 @@
   100%{margin-top: -155px;}
 }
 
+@-webkit-keyframes translateClose{
+  0%{margin-top: -155px;}
+  100%{margin-top: 0px;}
+}
+
 @keyframes translateClose{
   0%{margin-top: -155px;}
   100%{margin-top: 0px;}
 }
 
+@-webkit-keyframes translateOpensvg{
+  0%{margin-top: 50px;}
+  100%{margin-top: 180px;}
+}
+
 @keyframes translateOpensvg{
   0%{margin-top: 50px;}
-  100%{margin-top: 180px;} 
+  100%{margin-top: 180px;}
+}
+
+@-webkit-keyframes translateClosesvg{
+  0%{margin-top: 180px;}
+  100%{margin-top: 50px;}
 }
 
 @keyframes translateClosesvg{
@@ -28,56 +58,98 @@
   100%{margin-top: 50px;}
 }
 
+@-webkit-keyframes visible{
+  0%{
+    opacity: 0;
+    -webkit-transform: translateY(50px);
+            transform: translateY(50px);
+  }
+  100%{
+    opacity: 1;
+    -webkit-transform: translateY(0px);
+            transform: translateY(0px);
+  }
+}
+
 @keyframes visible{
   0%{
     opacity: 0;
-    transform: translateY(50px);
+    -webkit-transform: translateY(50px);
+            transform: translateY(50px);
   }
   100%{
     opacity: 1;
-    transform: translateY(0px);
+    -webkit-transform: translateY(0px);
+            transform: translateY(0px);
+  }
+}
+
+@-webkit-keyframes hidden{
+  0%{
+    opacity: 1;
+    -webkit-transform: translateY(0px);
+            transform: translateY(0px);
+  }
+  100%{
+    opacity: 0;
+    -webkit-transform: translateY(50px);
+            transform: translateY(50px);
   }
 }
 
 @keyframes hidden{
   0%{
     opacity: 1;
-    transform: translateY(0px);
+    -webkit-transform: translateY(0px);
+            transform: translateY(0px);
   }
   100%{
     opacity: 0;
-    transform: translateY(50px);
+    -webkit-transform: translateY(50px);
+            transform: translateY(50px);
   }
 }
 
 .why_lsdo{
   &.open{
     h3{
-      animation: rotateOpen 1s, translateOpen 1s;
-      animation-fill-mode: forwards;
+      -webkit-animation: rotateOpen 1s, translateOpen 1s;
+              animation: rotateOpen 1s, translateOpen 1s;
+      -webkit-animation-fill-mode: forwards;
+              animation-fill-mode: forwards;
     }
     section{
-      animation: visible 1s;
-      animation-fill-mode: forwards;
+      -webkit-animation: visible 1s;
+              animation: visible 1s;
+      -webkit-animation-fill-mode: forwards;
+              animation-fill-mode: forwards;
     }
     svg{
-      animation: rotateOpen 1s, translateOpensvg 1s;
-      animation-fill-mode: forwards;
+      -webkit-animation: rotateOpen 1s, translateOpensvg 1s;
+              animation: rotateOpen 1s, translateOpensvg 1s;
+      -webkit-animation-fill-mode: forwards;
+              animation-fill-mode: forwards;
     }
   }
 
   &.close{
     h3{
-      animation: rotateClose 1s, translateClose 1s;
-      animation-fill-mode: forwards;
+      -webkit-animation: rotateClose 1s, translateClose 1s;
+              animation: rotateClose 1s, translateClose 1s;
+      -webkit-animation-fill-mode: forwards;
+              animation-fill-mode: forwards;
     }
     section{
-      animation: hidden 1s;
-      animation-fill-mode: forwards;
+      -webkit-animation: hidden 1s;
+              animation: hidden 1s;
+      -webkit-animation-fill-mode: forwards;
+              animation-fill-mode: forwards;
     }
     svg{
-      animation: rotateClose 1s, translateClosesvg 1s;
-      animation-fill-mode: forwards;
+      -webkit-animation: rotateClose 1s, translateClosesvg 1s;
+              animation: rotateClose 1s, translateClosesvg 1s;
+      -webkit-animation-fill-mode: forwards;
+              animation-fill-mode: forwards;
     }
   }
 

user/themes/le_style_de_lours_modif/scss/theme/_carousel.scss

@@ -1,4 +1,6 @@
 .owl-carousel{
+  display: -webkit-box!important;
+  display: -ms-flexbox!important;
   display: flex!important;
   margin: 0px 50px 0 50px;
   width: auto!important;
@@ -26,7 +28,8 @@
       position: absolute;
       width: 100%;
       top:35%;
-      transform: translateY(-50%);
+      -webkit-transform: translateY(-50%);
+              transform: translateY(-50%);
       button{
         width: 35px;
         height: 35px;

user/themes/le_style_de_lours_modif/scss/theme/_footer.scss

@@ -2,8 +2,12 @@ footer{
   margin: 0 50px 0px 50px;
   padding-bottom: 20px;
   ul{
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
     display: inline-flex;
-    justify-content: flex-end;
+    -webkit-box-pack: end;
+        -ms-flex-pack: end;
+            justify-content: flex-end;
     width: 100%;
     li{
       margin-left: 20px;
@@ -22,6 +26,8 @@ footer{
   bottom: 0;
   width: 100%;
   left: 0;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
   display: inline-flex;
   & > div {
     width: 55%;

user/themes/le_style_de_lours_modif/scss/theme/_header.scss

@@ -3,6 +3,8 @@
   top: 0;
   width: 100%;
   left: 0;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
   display: inline-flex;
   & > div {
     width: 55%;
@@ -51,6 +53,7 @@ header{
     }
   }
   .title{
+    -webkit-transition: background 1s;
     transition: background 1s;
     background: none;
     z-index: 998;
@@ -74,9 +77,13 @@ header{
       margin-top: 0px;
       white-space:nowrap;
        z-index: 1;
+       display: -webkit-inline-box;
+       display: -ms-inline-flexbox;
        display: inline-flex;
        width: 100%;
-       align-items: center;
+       -webkit-box-align: center;
+           -ms-flex-align: center;
+               align-items: center;
        &::after{
          right: 0;
          content: " ";
@@ -97,15 +104,21 @@ header{
     }
     &.Hc{
       background: white;
+      -webkit-transition: background 1s;
       transition: background 1s;
     }
   }
   .logo{
     margin: 150px 0 50px 0;
     width: 100%;
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
     display: inline-flex;
-    justify-content: space-around;
-    align-items: center;
+    -ms-flex-pack: distribute;
+        justify-content: space-around;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
     & > div{
       width: calc(100% / 3);
       min-width: 300px;
@@ -131,15 +144,21 @@ header{
       }
     }
     .why_lsdo{
+      display: -webkit-inline-box;
+      display: -ms-inline-flexbox;
       display: inline-flex;
-      flex-direction: column;
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+          -ms-flex-direction: column;
+              flex-direction: column;
       position: relative;
       h3{
         z-index: 1;
         position: absolute;
         cursor: pointer;
         margin: 0;
-        transform: rotate(-15deg) translateY(0px);
+        -webkit-transform: rotate(-15deg) translateY(0px);
+                transform: rotate(-15deg) translateY(0px);
       }
       section{
         position: absolute;
@@ -159,7 +178,8 @@ header{
         width: 100px;
         height: 20px;
         position: absolute;
-        transform: rotate(-15deg) translateY(50px);
+        -webkit-transform: rotate(-15deg) translateY(50px);
+                transform: rotate(-15deg) translateY(50px);
       }
     }
   }

user/themes/le_style_de_lours_modif/scss/theme/_media-quieries.scss

@@ -61,7 +61,10 @@
       }
     }
     .logo{
-      flex-direction: column-reverse;
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: reverse;
+          -ms-flex-direction: column-reverse;
+              flex-direction: column-reverse;
       & > div{
         width: 100%;
       }
@@ -83,8 +86,13 @@
   #start{
     .section{
       .sous-section{
-        flex-direction: column;
-        justify-content: center;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: column;
+                flex-direction: column;
+        -webkit-box-pack: center;
+            -ms-flex-pack: center;
+                justify-content: center;
         .blocks{
           width: 90%;
           margin-left: auto;
@@ -109,14 +117,18 @@
     #contact{
       .blocks{
         &:nth-of-type(1){
-          align-items: center;
+          -webkit-box-align: center;
+              -ms-flex-align: center;
+                  align-items: center;
           p{
             text-align: center!important;
           }
 
         }
         &:nth-of-type(2){
-          align-items: center;
+          -webkit-box-align: center;
+              -ms-flex-align: center;
+                  align-items: center;
           .content{
             p{
               text-align: center!important;
@@ -229,7 +241,9 @@
       }
       #clients{
         .images{
-          justify-content: center;
+          -webkit-box-pack: center;
+              -ms-flex-pack: center;
+                  justify-content: center;
           img{
             margin:10px 10px;
             min-width: 70%;
@@ -273,7 +287,9 @@
       white-space: normal;
     }
     ul{
-      justify-content: space-evenly;
+      -webkit-box-pack: space-evenly;
+          -ms-flex-pack: space-evenly;
+              justify-content: space-evenly;
       li{
         margin-left: 0;
         a{

user/themes/le_style_de_lours_modif/scss/theme/_mixins.scss

@@ -1,9 +1,13 @@
 @mixin filet{
   width: 100%;
   text-align: center;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
   display: inline-flex;
   width: 100%;
-  align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   &::after{
     right: 0;
     content: " ";
@@ -25,9 +29,13 @@
 @mixin filet-b{
   width: 100%;
   text-align: center;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
   display: inline-flex;
   width: 100%;
-  align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   &::after{
     right: 0;
     content: " ";
@@ -49,7 +57,8 @@
 @mixin triangle{
   position: absolute;
   z-index: 1;
-  transform: rotate(-135deg);
+  -webkit-transform: rotate(-135deg);
+          transform: rotate(-135deg);
   width: 0;
   height: 0;
   top: -70px;
@@ -61,7 +70,8 @@
 }
 
 @mixin rotateH{
-  transform: rotate(90deg);
+  -webkit-transform: rotate(90deg);
+          transform: rotate(90deg);
   position: absolute;
   top: -8px;
   left: -90px;
@@ -78,5 +88,6 @@
   border-right-color: transparent;
   border-bottom-color: transparent;
   position: absolute;
-  transform: translateX(-50%);
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
 }

user/themes/le_style_de_lours_modif/scss/theme/_reset.scss

@@ -1,5 +1,6 @@
 *{
-  box-sizing : border-box;
+  -webkit-box-sizing : border-box;
+          box-sizing : border-box;
 }
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 

user/themes/le_style_de_lours_modif/scss/theme/_start.scss

@@ -32,9 +32,14 @@ body {
 
 .sous-section {
     width: 100%;
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
     display: inline-flex;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    -webkit-box-pack: space-evenly;
+        -ms-flex-pack: space-evenly;
+            justify-content: space-evenly;
     h3 {
         @include filet;
     }
@@ -74,18 +79,31 @@ body {
         overflow: hidden;
         position: relative;
         .txt {
+            display: -webkit-inline-box;
+            display: -ms-inline-flexbox;
             display: inline-flex;
-            justify-content: center;
-            align-items: center;
-            flex-direction: column;
+            -webkit-box-pack: center;
+                -ms-flex-pack: center;
+                    justify-content: center;
+            -webkit-box-align: center;
+                -ms-flex-align: center;
+                    align-items: center;
+            -webkit-box-orient: vertical;
+            -webkit-box-direction: normal;
+                -ms-flex-direction: column;
+                    flex-direction: column;
             position: absolute;
             width: 100%;
             height: 100%;
             top: 0%;
             left: 0;
             background: transparent;
-            transform: scale(0.95);
+            -webkit-transform: scale(0.95);
+                    transform: scale(0.95);
+            -webkit-transition: background 0.5s ease, -webkit-transform 0.5s ease;
+            transition: background 0.5s ease, -webkit-transform 0.5s ease;
             transition: transform 0.5s ease, background 0.5s ease;
+            transition: transform 0.5s ease, background 0.5s ease, -webkit-transform 0.5s ease;
             .content{
               padding: 20px;
             }
@@ -104,8 +122,12 @@ body {
 
     &:hover {
         .txt {
+            -webkit-transition: background 0.5s ease, -webkit-transform 0.5s ease;
+            transition: background 0.5s ease, -webkit-transform 0.5s ease;
             transition: transform 0.5s ease, background 0.5s ease;
-            transform: scale(1);
+            transition: transform 0.5s ease, background 0.5s ease, -webkit-transform 0.5s ease;
+            -webkit-transform: scale(1);
+                    transform: scale(1);
             background: $blue;
             p, ul, li, a{
               color: white;
@@ -123,9 +145,14 @@ body {
 
 .no-gal {
     .section_n2 {
+        display: -webkit-inline-box;
+        display: -ms-inline-flexbox;
         display: inline-flex;
-        flex-wrap: wrap;
-        justify-content: space-evenly;
+        -ms-flex-wrap: wrap;
+            flex-wrap: wrap;
+        -webkit-box-pack: space-evenly;
+            -ms-flex-pack: space-evenly;
+                justify-content: space-evenly;
     }
 }
 
@@ -156,10 +183,17 @@ body {
       }
       #clients{
         .images {
+            display: -webkit-inline-box;
+            display: -ms-inline-flexbox;
             display: inline-flex;
-            flex-wrap: wrap;
-            align-items: center;
-            justify-content: space-evenly;
+            -ms-flex-wrap: wrap;
+                flex-wrap: wrap;
+            -webkit-box-align: center;
+                -ms-flex-align: center;
+                    align-items: center;
+            -webkit-box-pack: space-evenly;
+                -ms-flex-pack: space-evenly;
+                    justify-content: space-evenly;
             img {
                 width: 15%;
                 min-width: 150px;
@@ -184,17 +218,28 @@ body {
     #contact {
         background: transparent!important;
         .blocks{
+          display: -webkit-inline-box;
+          display: -ms-inline-flexbox;
           display: inline-flex;
-          flex-direction: column-reverse;
-          justify-content: center;
+          -webkit-box-orient: vertical;
+          -webkit-box-direction: reverse;
+              -ms-flex-direction: column-reverse;
+                  flex-direction: column-reverse;
+          -webkit-box-pack: center;
+              -ms-flex-pack: center;
+                  justify-content: center;
           &:nth-of-type(1){
-            align-items: flex-end;
+            -webkit-box-align: end;
+                -ms-flex-align: end;
+                    align-items: flex-end;
             p{
               text-align: right!important;
             }
           }
           &:nth-of-type(2){
-            align-items: flex-start;
+            -webkit-box-align: start;
+                -ms-flex-align: start;
+                    align-items: flex-start;
           }
           .title{
             display: none;

user/themes/le_style_de_lours_modif/scss/theme/_typography.scss

@@ -1,53 +1,53 @@
 body,
 html {
-    font-size: 16px;
-    line-height: 22px;
+  font-size: 16px;
+  line-height: 22px;
 }
 
 h1,
 h2,
 h3 {
-    font-family: $Regular-L;
-    font-weight: normal;
-    text-transform: uppercase;
-    margin: 0;
-    padding: 0;
+  font-family: $Regular-L;
+  font-weight: normal;
+  text-transform: uppercase;
+  margin: 0;
+  padding: 0;
 }
 
 h1,
 h2 {
-    letter-spacing: $letterI1;
+  letter-spacing: $letterI1;
 }
 
 h1 {
+  font-size: $fontH1;
+  line-height: $lineH96;
+
+  a {
+    color: $blue!important;
+    font-family: $Regular-L;
     font-size: $fontH1;
     line-height: $lineH96;
-
-    a {
-        color: $blue!important;
-        font-family: $Regular-L;
-        font-size: $fontH1;
-        line-height: $lineH96;
-    }
+  }
 }
 
 h2 {
-    font-size: $fonth2;
-    line-height: $lineH30;
-    color: $blue!important;
-    background: white;
+  font-size: $fonth2;
+  line-height: $lineH30;
+  color: $blue!important;
+  background: white;
 }
 
 h3 {
-    letter-spacing: 0.2rem;
-    font-size: $font32;
+  letter-spacing: 0.2rem;
+  font-size: $font32;
 }
 
 h5 {
-    font-family: $Roboto-B;
-    font-weight: normal;
-    font-size: $fontH5;
-    margin: 10px 0;
+  font-family: $Roboto-B;
+  font-weight: normal;
+  font-size: $fontH5;
+  margin: 10px 0;
 }
 
 a,
@@ -55,164 +55,164 @@ del,
 li,
 p,
 ul {
-    font-family: $Roboto-R;
-    font-weight: normal;
-    font-size: $fontp;
-    line-height: 1.5rem;
-    margin: 0;
-    padding: 0;
+  font-family: $Roboto-R;
+  font-weight: normal;
+  font-size: $fontp;
+  line-height: 1.5rem;
+  margin: 0;
+  padding: 0;
 }
 
 em {
-    font-family: $Roboto-I;
-    font-weight: normal;
+  font-family: $Roboto-I;
+  font-weight: normal;
 }
 
 strong {
-    font-family: $Roboto-B;
-    font-weight: normal;
+  font-family: $Roboto-B;
+  font-weight: normal;
 }
 
 header {
-    nav {
-        ul {
-            li {
-                a {
-                    font-family: $Regular-L;
-                    font-size: $fontnav;
-                    line-height: $lineH40;
-                    letter-spacing: $letterI1;
-                    color: $blue!important;
-                }
-            }
+  nav {
+    ul {
+      li {
+        a {
+          font-family: $Regular-L;
+          font-size: $fontnav;
+          line-height: $lineH40;
+          letter-spacing: $letterI1;
+          color: $blue!important;
         }
+      }
     }
+  }
 
-    .logo {
-        #user {
-            p {
-                font-size: 1.8rem;
-                font-family: $Regular-L;
-                line-height: 2.5rem;
-                letter-spacing: $letterI1;
-            }
-        }
+  .logo {
+    #user {
+      p {
+        font-size: 1.8rem;
+        font-family: $Regular-L;
+        line-height: 2.5rem;
+        letter-spacing: $letterI1;
+      }
+    }
 
-        .why_lsdo {
-            h3 {
-                font-size: $h3;
-                letter-spacing: $letterI1;
+    .why_lsdo {
+      h3 {
+        font-size: $h3;
+        letter-spacing: $letterI1;
 
-                &:hover {
-                    text-decoration: underline;
-                }
-            }
+        &:hover {
+          text-decoration: underline;
         }
+      }
     }
+  }
 }
 
 #home {
-   p {
-        font-family: $Roboto-L;
-        text-align: center;
-        font-size: $fontPi;
-        line-height: $lineH24;
-    }
+  p {
+    font-family: $Roboto-L;
+    text-align: center;
+    font-size: $fontPi;
+    line-height: $lineH24;
+  }
 }
 
 .grav-youtube {
-    margin-top: 20px;
+  margin-top: 20px;
 }
 
 .section-content {
-    h3 {
-        font-family: $Regular-L;
-        text-align: center;
-        color: black!important;
-        text-transform: inherit;
-        letter-spacing: 0.1rem!important;
-        white-space: nowrap;
-    }
+  h3 {
+    font-family: $Regular-L;
+    text-align: center;
+    color: black!important;
+    text-transform: inherit;
+    letter-spacing: 0.1rem!important;
+    white-space: nowrap;
+  }
 }
 
 .sous-section {
-    h3 {
-        font-family: $Regular-L;
-        text-align: center;
-        color: $h3-color;
-        background-color: $section;
-        white-space: nowrap;
-    }
+  h3 {
+    font-family: $Regular-L;
+    text-align: center;
+    color: $h3-color;
+    background-color: $section;
+    white-space: nowrap;
+  }
 }
 
 .galerie {
-    p {
-        font-size: 0.8rem;
-        line-height: 1.2rem;
-    }
+  p {
+    font-size: 0.8rem;
+    line-height: 1.2rem;
+  }
 }
 
 .item {
-    h4 {
-        font-family: $Roboto-B;
-        text-transform: none;
-        font-size: $h3;
-        text-align: center;
-        color: $red;
-        letter-spacing: normal!important;
-        font-weight: normal;
-    }
+  h4 {
+    font-family: $Roboto-B;
+    text-transform: none;
+    font-size: $h3;
+    text-align: center;
+    color: $red;
+    letter-spacing: normal!important;
+    font-weight: normal;
+  }
 }
 
 .item-etapes {
-    h4 {
-        font-size: $h3;
-        color: white;
-    }
-
-    .txt {
-        & > * {
-            color: white;
-        }
+  h4 {
+    font-size: $h3;
+    color: white;
+  }
+
+  .txt {
+    & > * {
+      color: white;
     }
+  }
 }
 
 #contact {
-    p {
-        strong {
-            font-family: $Regular-L;
-            font-weight: normal;
-            font-size: $h3;
-            letter-spacing: $letterI1;
-            color: $blue;
-        }
+  p {
+    strong {
+      font-family: $Regular-L;
+      font-weight: normal;
+      font-size: $h3;
+      letter-spacing: $letterI1;
+      color: $blue;
     }
+  }
 }
 
 footer {
-    h3 {
-        margin: 20px auto;
-    }
+  h3 {
+    margin: 20px auto;
+  }
 
-    section {
-        margin: auto;
-        text-align: center;
+  section {
+    margin: auto;
+    text-align: center;
 
-        p:last-child {
-            padding-bottom: 15px;
-        }
+    p:last-child {
+      padding-bottom: 15px;
     }
+  }
 
-    ul {
-        li {
-            text-transform: uppercase;
-            letter-spacing: $letterI1;
-
-            a {
-                font-family: $Regular-L;
-                font-size: $fontnav;
-                color: $blue;
-            }
-        }
+  ul {
+    li {
+      text-transform: uppercase;
+      letter-spacing: $letterI1;
+
+      a {
+        font-family: $Regular-L;
+        font-size: $fontnav;
+        color: $blue;
+      }
     }
+  }
 }