From 21b5b7bf79cea45c06eeddc78c24452a9d165f43 Mon Sep 17 00:00:00 2001
From: Florian Eisenmenger <f.eisenmenger@spawntree.de>
Date: Tue, 12 Jul 2022 14:48:52 +0200
Subject: [PATCH] css

---
 files/wash-n-roll/internal/js/scripts.js      | 37 ++++++--
 .../internal/scss/abstracts/_mixins.scss      | 14 ++-
 .../internal/scss/base/_basic.scss            | 33 ++++++-
 .../internal/scss/base/_components.scss       |  1 +
 .../internal/scss/components/_blog.scss       | 69 +++++++++++++--
 .../internal/scss/components/_cart.scss       |  6 +-
 .../scss/components/_category-navigation.scss | 18 +++-
 .../internal/scss/components/_checkout.scss   | 16 ++--
 .../internal/scss/components/_error.scss      | 16 +++-
 .../internal/scss/components/_faq.scss        |  2 +-
 .../internal/scss/components/_form.scss       |  5 +-
 .../internal/scss/components/_gallery.scss    | 13 ++-
 .../internal/scss/components/_image.scss      |  3 +
 .../internal/scss/components/_product.scss    | 77 ++++++++++++----
 .../internal/scss/components/_slider.scss     | 10 +--
 .../scss/components/_teaser-large.scss        | 87 +++++++++++++++++--
 .../internal/scss/components/_text.scss       | 29 ++++++-
 .../internal/scss/components/_youtube.scss    | 71 +++++++++++++--
 .../internal/scss/layout/_____forms.scss      |  8 +-
 .../internal/scss/layout/_footer.scss         | 46 ++++++++--
 .../internal/scss/layout/_header.scss         | 41 +++++++--
 .../internal/scss/layout/_headlines.scss      |  7 +-
 .../internal/scss/layout/_main.scss           |  3 +
 .../scss/vendors/slick/_slick-theme.scss      |  2 +-
 .../internal/scss/wash-n-roll.scss            |  1 +
 25 files changed, 527 insertions(+), 88 deletions(-)
 create mode 100644 files/wash-n-roll/internal/scss/components/_image.scss

diff --git a/files/wash-n-roll/internal/js/scripts.js b/files/wash-n-roll/internal/js/scripts.js
index 86edf9a..17c7c7c 100644
--- a/files/wash-n-roll/internal/js/scripts.js
+++ b/files/wash-n-roll/internal/js/scripts.js
@@ -6,6 +6,7 @@ $('.quickContactclose').click(function () {
 });*/
 
 $(document).ready((e) => {
+    // home slider
     $(".ce_sliderStart .slider-wrapper").slick({
         autoplay: true,
         autoplaySpeed: 5000,
@@ -15,14 +16,13 @@ $(document).ready((e) => {
         arrows: false,
         dots: true,
         // responsive: [{
-        //     breakpoint: 1640,
+        //     breakpoint: 1005,
         //     settings: {
-        //         autoplaySpeed: 2000,
-        //         slidesToShow: 4,
-        //         slidesToScroll: 1,
-        //         arrows: true,
+        //         slidesToShow: 1,
+        //         slidesToScroll: 1
         //     }
-        // }, {
+        // }]
+        // , {
         //     breakpoint: 992,
         //     settings: {
         //         slidesToShow: 3,
@@ -39,6 +39,7 @@ $(document).ready((e) => {
         // }]
     });
 
+    // related products
     $(".product-slider .product_list, .mod_iso_relatedproducts .product_list").slick({
         autoplay: false,
         slidesToShow: 3,
@@ -46,8 +47,22 @@ $(document).ready((e) => {
         infinite: true,
         arrows: true,
         dots: false,
+        responsive: [{
+            breakpoint: 1281,
+            settings: {
+                slidesToShow: 2,
+                slidesToScroll: 1
+            }
+        }, {
+            breakpoint: 769,
+            settings: {
+                slidesToShow: 1,
+                slidesToScroll: 1
+            }
+        }]
     });
 
+    // Product detail product shots
     $(".spwn-image-gallery").slick({
         autoplay: false,
         slidesToShow: 1,
@@ -66,7 +81,7 @@ $(document).ready((e) => {
     $("#header-basket-items").appendTo("header a.isotope-basket, header strong.isotope-basket");
     
     // FAQ list toggle
-    $(".mod_faqlist ul li h3").on("click", (e) => {
+    $(".mod_faqlist ul li h3").on("click", function() {
         if ($(this).parents("li").hasClass("open")) {
             $(this).parents("li").find(".answer").slideUp(300);
             $(this).parents("li").removeClass("open");
@@ -115,6 +130,14 @@ $(document).ready((e) => {
         h3.append("<span class='edit-span'>(<span></span>)</span>");
         $(this).appendTo(h3.find(".edit-span span"));
     });
+    
+    $(".widget p.error").on("click", function() {
+        $(this).fadeOut(300);
+        $(this).parents(".widget").find(".mandatory").focus();
+    });
+    $(".widget .mandatory").on("click", function() {
+        $(this).parents(".widget").find("p.error").fadeOut(300);
+    });
 });
 
 jQuery(function ($) {
diff --git a/files/wash-n-roll/internal/scss/abstracts/_mixins.scss b/files/wash-n-roll/internal/scss/abstracts/_mixins.scss
index 975b822..4472fe9 100644
--- a/files/wash-n-roll/internal/scss/abstracts/_mixins.scss
+++ b/files/wash-n-roll/internal/scss/abstracts/_mixins.scss
@@ -3,6 +3,17 @@ $base-size: 16;
   @return ($target / $context) * 1rem;
 }
 
+@mixin afterOverflow {
+  &:after {
+    content:".";
+    display:block;
+    clear:both;
+    font-size:0;
+    height:0;
+    visibility:hidden;
+  }
+}
+
 @mixin transition {
   transition: all 0.3s ease-out;
 }
@@ -25,13 +36,14 @@ $base-size: 16;
   line-height: size(20);
   text-decoration: none;
   color: $font;
+  white-space: nowrap;
   border: none;
   background: $tertiary;
   border-radius: 20px;
   cursor: pointer;
   @include transition();
   &:hover {
-    color: #fff;
+    color: $white;
   }
 }
 
diff --git a/files/wash-n-roll/internal/scss/base/_basic.scss b/files/wash-n-roll/internal/scss/base/_basic.scss
index d8833ad..b4207c2 100644
--- a/files/wash-n-roll/internal/scss/base/_basic.scss
+++ b/files/wash-n-roll/internal/scss/base/_basic.scss
@@ -16,7 +16,7 @@ body {
   line-height: size(24);
   color: $font;
   font-weight: 400;
-  background: #fff;
+  background: $white;
   overflow-x: hidden;
 }
 
@@ -30,10 +30,12 @@ table, td, th {
 
 a {
   text-decoration: none;
+
   &:hover {
     text-decoration: underline;
   }
 }
+
 strong {
   font-weight: 700;
 }
@@ -86,11 +88,40 @@ img {
 
 #container {
   padding: 5rem 0 0 0;
+  @media (max-width: 1004px) {
+    padding-top: 3rem;
+  }
+
   .nopadding & {
     padding-top: 0;
   }
 }
 
+.mod_article {
+  padding: 0 190px;
+  @media (max-width: 1280px) {
+    padding-left: 14.85vw;
+    padding-right: 14.85vw;
+  }
+  @media (max-width: 1004px) {
+    padding-left: 40px;
+    padding-right: 40px;
+  }
+  @media (max-width: 768px) {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  &.spwn-full-width {
+    padding-left: 40px;
+    padding-right: 40px;
+    @media (max-width: 768px) {
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+  }
+}
+
 
 input:-moz-placeholder,
 textarea:-moz-placeholder {
diff --git a/files/wash-n-roll/internal/scss/base/_components.scss b/files/wash-n-roll/internal/scss/base/_components.scss
index 473d8d0..83eb098 100644
--- a/files/wash-n-roll/internal/scss/base/_components.scss
+++ b/files/wash-n-roll/internal/scss/base/_components.scss
@@ -1,5 +1,6 @@
 @import 'components/slider';
 @import 'components/text';
+@import 'components/image';
 @import 'components/youtube';
 @import 'components/category-navigation';
 @import 'components/teaser-large';
diff --git a/files/wash-n-roll/internal/scss/components/_blog.scss b/files/wash-n-roll/internal/scss/components/_blog.scss
index 4c26a75..cc685a3 100644
--- a/files/wash-n-roll/internal/scss/components/_blog.scss
+++ b/files/wash-n-roll/internal/scss/components/_blog.scss
@@ -2,10 +2,24 @@
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
-  padding: 0 70px 2rem 70px;
+  margin: 0 -120px;
+  padding: 0 0 2rem 0;
+  @media (max-width: 1280px) {
+    margin-left: calc(-(14.85vw + 40px));
+    margin-right: calc(-(14.85vw + 40px));
+  }
+  @media (max-width: 1004px) {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
   .layout_latest {
     width: calc(50% - 20px);
     margin: 0 0 4.5rem 0;
+    @media (max-width: 768px) {
+      width: 100%;
+    }
+
     a {
       display: block;
       position: relative;
@@ -13,38 +27,70 @@
       padding: 0 0 24px 0;
     }
   }
+
   p {
     margin: 0;
   }
+
   .spwn-head {
     display: flex;
     justify-content: space-between;
     padding: 0 0 0.5rem 0;
+
     p {
       &.category {
         color: $primary;
         font-weight: 700;
       }
+
       &.info {
         font-weight: 300;
       }
     }
   }
+
   .image_container {
     padding: 0 0 1rem 0;
+
+    img {
+      width: 100%;
+      height: 310px;
+      object-fit: cover;
+      @include transition();
+      
+      @media (max-width: 1280px) {
+        height: 280px;
+      }
+      @media (max-width: 1004px) {
+        height: 210px;
+      }
+      @media (max-width: 768px) {
+        height: 330px;
+      }
+      @media (max-width: 575px) {
+        height: 280px;
+      }
+      @media (max-width: 430px) {
+        height: 220px;
+      }
+      
+    }
   }
+
   h3 {
     padding: 0 0 0.75rem 0;
     font-size: size(20);
     line-height: size(24);
-    font-family: 'Lato', sans-serif;
   }
+
   .ce_text {
     padding: 0;
+
     p {
       padding: 0 !important;
     }
   }
+
   .more {
     position: absolute;
     right: 0;
@@ -52,9 +98,11 @@
     font-weight: 700;
     text-decoration: underline;
   }
+
   a {
     color: $font;
     text-decoration: none;
+
     &:hover {
       .more {
         color: $primary;
@@ -64,29 +112,40 @@
 }
 
 .mod_newsreader {
-  padding: 0 190px 2rem 190px;
+  
   .spwn-head {
     display: flex;
     justify-content: space-between;
     padding: 0 0 0.5rem 0;
+
     p {
       margin: 0;
+
       &.category {
         color: $primary;
         font-weight: 700;
       }
+
       &.info {
         font-weight: 300;
       }
     }
   }
-  .ce_text {
-    padding: 0 0 2rem 0;
+  
+  .spwn-js-img {
+    padding-bottom: 2rem;
   }
+
+  .block {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
   h2 {
     font-size: size(40);
     line-height: size(46);
   }
+
   .spwn-subhl {
     margin-top: -2rem;
   }
diff --git a/files/wash-n-roll/internal/scss/components/_cart.scss b/files/wash-n-roll/internal/scss/components/_cart.scss
index 2647c26..95e9569 100644
--- a/files/wash-n-roll/internal/scss/components/_cart.scss
+++ b/files/wash-n-roll/internal/scss/components/_cart.scss
@@ -1,5 +1,5 @@
 .mod_iso_cart {
-  padding: 0 190px 3rem 190px;
+  padding: 0 0 2rem 0;
 
   .spwn-qc {
     display: flex;
@@ -101,9 +101,9 @@
       .submit {
         @include button();
         width: 100%;
-        border: 2px solid #fff;
+        border: 2px solid $white;
         background-color: #b0b0b0;
-        color: #fff;
+        color: $white;
         font-size: size(22);
         font-weight: 400;
 
diff --git a/files/wash-n-roll/internal/scss/components/_category-navigation.scss b/files/wash-n-roll/internal/scss/components/_category-navigation.scss
index 2477976..de6d31e 100644
--- a/files/wash-n-roll/internal/scss/components/_category-navigation.scss
+++ b/files/wash-n-roll/internal/scss/components/_category-navigation.scss
@@ -5,9 +5,19 @@
   box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.2);
 
   .ce_image {
-
+    padding: 0;
+    
     .image_container {
       height: 264px;
+      @media (max-width: 1004px) {
+        height: 230px;
+      }
+      @media (max-width: 768px) {
+        height: 200px;
+      }
+      @media (max-width: 575px) {
+        height: 160px;
+      }
     }
 
     img {
@@ -53,7 +63,7 @@
   a, strong {
     display: block;
     padding: 15px 0 8px 0;
-    color: #fff;
+    color: $white;
     font-family: 'Mohave', sans-serif;
     font-weight: 700;
     text-align: center;
@@ -61,6 +71,10 @@
     font-size: size(54);
     line-height: size(64);
     @include transition();
+    @media (max-width: 1004px) {
+      font-size: size(28);
+      line-height: size(34);
+    }
   }
 
   a {
diff --git a/files/wash-n-roll/internal/scss/components/_checkout.scss b/files/wash-n-roll/internal/scss/components/_checkout.scss
index 0dc1cee..c0972fb 100644
--- a/files/wash-n-roll/internal/scss/components/_checkout.scss
+++ b/files/wash-n-roll/internal/scss/components/_checkout.scss
@@ -1,5 +1,5 @@
 .mod_iso_checkout {
-  padding: 0 190px 3rem 190px;
+  padding: 0 0 2rem 0;
 
   .steps {
     padding: 0 0 5.5rem 0;
@@ -121,8 +121,11 @@
 
       }
 
-      input {
+      input,
+      select,
+      textarea {
         display: block;
+        z-index: 1;
       }
     }
 
@@ -157,21 +160,22 @@
       h3 {
         padding: 0 0 16px 0;
         color: $primary;
-        font-family: 'Lato', sans-serif;
         font-weight: 400;
-        font-size: size(24);
-        line-height: size(32);
+
         .edit-span {
           padding: 0 0 0 4px;
           color: $font;
           font-size: size(12);
+
           span {
-            
+
           }
         }
+
         a {
           color: $font;
           @include transition();
+
           &:hover {
             color: $primary;
           }
diff --git a/files/wash-n-roll/internal/scss/components/_error.scss b/files/wash-n-roll/internal/scss/components/_error.scss
index 1bf47c6..b858543 100644
--- a/files/wash-n-roll/internal/scss/components/_error.scss
+++ b/files/wash-n-roll/internal/scss/components/_error.scss
@@ -1,4 +1,16 @@
-.error {
+label.error,
+p.error {
   color: #f00;
   font-weight: 700;
-}
\ No newline at end of file
+}
+
+.widget {
+  p.error {
+    position: absolute;
+    left: 10px;
+    bottom: calc(2rem + 10px);
+    z-index: 10;
+    margin: 0;
+    background: $white;
+  }
+}
diff --git a/files/wash-n-roll/internal/scss/components/_faq.scss b/files/wash-n-roll/internal/scss/components/_faq.scss
index 1fefbb8..afdfbee 100644
--- a/files/wash-n-roll/internal/scss/components/_faq.scss
+++ b/files/wash-n-roll/internal/scss/components/_faq.scss
@@ -1,5 +1,5 @@
 .mod_faqlist {
-  padding: 0 190px 2rem 190px;
+  padding: 0 0 2rem 0;
   ul {
     
   }
diff --git a/files/wash-n-roll/internal/scss/components/_form.scss b/files/wash-n-roll/internal/scss/components/_form.scss
index a22c82e..6e8234f 100644
--- a/files/wash-n-roll/internal/scss/components/_form.scss
+++ b/files/wash-n-roll/internal/scss/components/_form.scss
@@ -1,5 +1,5 @@
 .ce_form {
-  padding: 0 190px 3rem 190px;
+  padding: 0 0 3rem 0;
 }
 
 .mod_iso_checkout form,
@@ -18,6 +18,9 @@
   .widget {
     width: calc(50% - 20px);
     padding: 0 0 2rem 0;
+    @media (max-width: 575px) {
+      width: 100%;
+    }
 
     &.widget-textarea {
       width: 100%;
diff --git a/files/wash-n-roll/internal/scss/components/_gallery.scss b/files/wash-n-roll/internal/scss/components/_gallery.scss
index 23697bc..4069f1b 100644
--- a/files/wash-n-roll/internal/scss/components/_gallery.scss
+++ b/files/wash-n-roll/internal/scss/components/_gallery.scss
@@ -3,15 +3,24 @@
   ul {
     display: flex;
     justify-content: space-evenly;
-    padding: 40px 0 55px 0;
+    flex-wrap: wrap;
+    padding: 2.5rem 0 1.5rem 0;
     margin: 0 auto;
-    max-width: calc(1280px - 24px);
+    max-width: calc(1200px - 24px);
   }
   li {
     flex-grow: 1;
     flex-basis: 0;
+    padding-bottom: 2rem;
   }
   .image_container {
+    padding: 0 0.5rem;
+    @media (max-width: 1004px) {
+      padding: 0 1.5rem;
+    }
+    @media (max-width: 768px) {
+      padding: 0 2.5rem 1rem 2.5rem;
+    }
     img {
       width: 64px;
       margin: 0 auto 15px auto;
diff --git a/files/wash-n-roll/internal/scss/components/_image.scss b/files/wash-n-roll/internal/scss/components/_image.scss
new file mode 100644
index 0000000..cd74584
--- /dev/null
+++ b/files/wash-n-roll/internal/scss/components/_image.scss
@@ -0,0 +1,3 @@
+.ce_image {
+  padding: 0 0 2rem 0;
+}
diff --git a/files/wash-n-roll/internal/scss/components/_product.scss b/files/wash-n-roll/internal/scss/components/_product.scss
index caea71d..fead40c 100644
--- a/files/wash-n-roll/internal/scss/components/_product.scss
+++ b/files/wash-n-roll/internal/scss/components/_product.scss
@@ -1,6 +1,10 @@
 .mod_iso_productlist,
 .mod_iso_relatedproducts {
-  padding: 0 90px 5rem 90px;
+  padding: 0 0 5rem 0;
+  @media (max-width: 575px) {
+    padding-left: 0;
+    padding-right: 0;
+  }
 
   .product_list {
     display: flex;
@@ -10,7 +14,10 @@
 
   .product {
     position: relative;
-    padding: 0 0 7.5rem 0;
+    padding: 0 0.5rem 7.5rem 0.5rem;
+    @media (max-width: 768px) {
+      padding-bottom: 3.5rem;
+    }
 
     .formbody {
       position: relative;
@@ -19,6 +26,9 @@
       width: 270px;
       margin: 0 auto;
       padding: 0 0 2rem 0;
+      @media (max-width: 575px) {
+        width: 60vw;
+      }
     }
 
     h3 {
@@ -26,7 +36,6 @@
       margin: 0 auto;
       padding: 0 0 1rem 0;
       text-align: center;
-      font-family: 'Lato', sans-serif;
       font-size: size(20);
       line-height: size(26);
       color: $font;
@@ -38,6 +47,7 @@
 
     .image_container {
       order: 1;
+      margin: 0 auto;
 
       a {
         display: block;
@@ -48,9 +58,13 @@
         border: 4px solid $secondary;
         width: 270px;
         height: 270px;
-        object-fit: contain;
-        background: #fff;
+        object-fit: cover;
+        background: $white;
         border-radius: 50%;
+        @media (max-width: 575px) {
+          width: 60vw;
+          height: 60vw;
+        }
       }
     }
 
@@ -91,7 +105,7 @@
           border-radius: 10px;
           padding: 1px 11px 0 11px;
           font-weight: 500;
-          color: #fff;
+          color: $white;
           font-size: size(18);
         }
 
@@ -126,6 +140,12 @@
       }
     }
   }
+
+  .empty {
+    text-align: center;
+    font-weight: 700;
+    color: $primary;
+  }
 }
 
 .mod_iso_productreader {
@@ -141,6 +161,10 @@
     width: 100%;
     position: relative;
     padding: 0 0 2rem 0;
+    margin: 0 auto;
+    @media (max-width: 768px) {
+      width: 80%;
+    }
 
     .spwn-image-gallery {
 
@@ -152,6 +176,12 @@
       bottom: 150px;
       transform: translate(310px, 0);
       font-family: 'Mohave', sans-serif;
+      @media (max-width: 768px) {
+        right: 300px;
+      }
+      @media (max-width: 575px) {
+        bottom: 75px;
+      }
 
       .price {
         background: $secondary;
@@ -174,7 +204,7 @@
           border-radius: 10px;
           padding: 1px 11px 0 11px;
           font-weight: 500;
-          color: #fff;
+          color: $white;
           font-size: size(18);
         }
 
@@ -195,6 +225,9 @@
     img {
       width: 554px;
       margin: 0 auto;
+      @media (max-width: 768px) {
+        width: 100%;
+      }
     }
 
     .slick-dots {
@@ -221,7 +254,6 @@
   }
 
   h3 {
-    font-family: 'Lato', sans-serif;
     color: $primary;
     padding-bottom: 1.5rem;
   }
@@ -231,25 +263,31 @@
   }
 
   .description {
-    padding: 0 190px 3rem 190px;
+    padding: 0 0 3rem 0;
     font-weight: 700;
   }
 
   .spwn-additional-text {
-    width: 100vw;
-    position: relative;
-    left: 50%;
-    right: 50%;
-    margin: 0 -50vw 2rem -50vw;
+    margin: 0 0 2rem 0;
 
     &.spwn-bg {
+      @include fullwidth();
+      margin-bottom: 2rem;
       padding: 2rem 0 0 0;
-      background: #f5f5f5;
-    }
 
-    .spwn-inner {
-      max-width: 876px;
-      margin: 0 auto;
+      .spwn-inner {
+        max-width: calc(1280px - 24px - 190px - 190px);
+        margin: 0 auto;
+        @media (max-width: 1280px) {
+          max-width: calc(100% - 14.85vw - 14.85vw);
+        }
+        @media (max-width: 1004px) {
+          max-width: calc(100% - 40px - 40px);
+        }
+        @media (max-width: 768px) {
+          max-width: calc(100% - 20px - 20px);
+        }
+      }
     }
 
     ul {
@@ -275,6 +313,7 @@
   .submit_container {
     display: flex;
     justify-content: center;
+    flex-wrap: wrap;
     width: 100%;
     padding: 0 0 4rem 0;
 
diff --git a/files/wash-n-roll/internal/scss/components/_slider.scss b/files/wash-n-roll/internal/scss/components/_slider.scss
index 2001e56..7b08064 100644
--- a/files/wash-n-roll/internal/scss/components/_slider.scss
+++ b/files/wash-n-roll/internal/scss/components/_slider.scss
@@ -67,7 +67,7 @@
     content: "";
     display: block;
     position: absolute;
-    right: 185px;
+    right: 171px;
     top: calc(100% + 9px);
     z-index: 4;
     width: 25px;
@@ -106,9 +106,9 @@
       display: inline-block;
       padding: 10px 75px;
       text-decoration: none;
-      color: #fff;
+      color: $white;
       background: rgba(0, 0, 0, .23);
-      border: 1px solid #fff;
+      border: 1px solid $white;
       border-radius: 20px;
       @include transition();
 
@@ -118,8 +118,8 @@
     }
   }
 
-  h1, h2, h3 {
-    color: #fff;
+  h1, h2 {
+    color: $white;
     line-height: size(52);
     padding: 0 0 2rem 0;
   }
diff --git a/files/wash-n-roll/internal/scss/components/_teaser-large.scss b/files/wash-n-roll/internal/scss/components/_teaser-large.scss
index 7f48c2e..8b0e068 100644
--- a/files/wash-n-roll/internal/scss/components/_teaser-large.scss
+++ b/files/wash-n-roll/internal/scss/components/_teaser-large.scss
@@ -3,7 +3,11 @@
   margin: 5rem 0 7.5rem 0;
   background-color: $secondary;
   border-radius: 30px;
-  color: #fff;
+  color: $white;
+  @media (max-width: 575px) {
+    margin-top: 7rem;
+  }
+
   &.bg-nav-teaser {
     background-image: url("../images/backgrounds/category-navigation.jpg");
     background-repeat: no-repeat;
@@ -16,6 +20,17 @@
     left: 34px;
     top: 50%;
     transform: translate(0, -50%);
+    padding: 0;
+    @media (max-width: 768px) {
+      left: 0;
+      margin-top: -45px;
+    }
+    @media (max-width: 575px) {
+      position: relative;
+      left: auto;
+      top: auto;
+      transform: translate(0,-50px);
+    }
 
     .image_container {
       position: relative;
@@ -23,6 +38,14 @@
       height: 298px;
       background: transparent url("../images/elements/highlight-star.svg") no-repeat left top;
       background-size: 100% auto;
+      @media (max-width: 768px) {
+        width: 198px;
+        height: 198px;
+      }
+      @media (max-width: 575px) {
+        width: 298px;
+        height: 298px;
+      }
     }
 
     img {
@@ -31,17 +54,37 @@
       top: 50%;
       transform: translate(-50%, -50%);
       width: 230px;
+      @media (max-width: 768px) {
+        width: 130px;
+      }
+      @media (max-width: 575px) {
+        width: 230px;
+      }
     }
   }
 
   .ce_text {
-    padding: 25px 0 12px 330px;
+    padding: 25px 20px 12px 330px;
+    @media (max-width: 768px) {
+      padding-left: 210px;
+    }
+    @media (max-width: 575px) {
+      padding-top: 0;
+      padding-left: 20px;
+    }
 
     h3 {
       padding: 0 0 5px 0;
-      font-family: 'Lato', sans-serif;
       font-size: size(34);
       line-height: size(40);
+      @media (max-width: 575px) {
+        font-size: size(28);
+        line-height: size(34);
+      }
+      @media (max-width: 575px) {
+        font-size: size(34);
+        line-height: size(40);
+      }
     }
 
     .text {
@@ -53,6 +96,14 @@
       margin: 0;
       font-size: size(28);
       line-height: size(34);
+      @media (max-width: 768px) {
+        font-size: size(20);
+        line-height: size(28);
+      }
+      @media (max-width: 575px) {
+        font-size: size(28);
+        line-height: size(34);
+      }
     }
   }
 
@@ -79,17 +130,33 @@
       background: $secondary;
       border-bottom-left-radius: 30px;
       border-bottom-right-radius: 30px;
+      @media (max-width: 768px) {
+        padding-left: 0;
+      }
+      @media (max-width: 575px) {
+        display: block;
+        padding-left: 0;
+      }
     }
 
     li {
       flex-grow: 1;
       flex-basis: 0;
-
+      &:first-child {
+        a, strong {
+          @media (min-width: 576px) and (max-width: 768px) {
+            border-bottom-left-radius: 30px;
+          }
+        }
+      }
       &:last-child {
         a, strong {
-          color: #fff;
+          color: $white;
           background: $font;
           border-bottom-right-radius: 30px;
+          @media (max-width: 575px) {
+            border-bottom-left-radius: 30px;
+          }
 
           &:hover {
             color: rgba(255, 255, 255, .3);
@@ -110,9 +177,17 @@
       line-height: size(64);
       text-decoration: none;
       @include transition();
+      @media (max-width: 1004px) {
+        font-size: size(28);
+        line-height: size(34);
+      }
+      @media (max-width: 575px) {
+        font-size: size(54);
+        line-height: size(68);
+      }
 
       &:hover {
-        color: #fff;
+        color: $white;
       }
     }
   }
diff --git a/files/wash-n-roll/internal/scss/components/_text.scss b/files/wash-n-roll/internal/scss/components/_text.scss
index ffeab3d..6dd8971 100644
--- a/files/wash-n-roll/internal/scss/components/_text.scss
+++ b/files/wash-n-roll/internal/scss/components/_text.scss
@@ -1,9 +1,36 @@
 .ce_text {
-  padding: 0 190px 2rem 190px;
+  padding: 0 0 2rem 0;
+  @include afterOverflow();
   &.txt-col-3 {
     .text {
       column-count: 3;
       column-gap: 2rem;
     }
   }
+  .image_container {
+    &.float_above {
+      margin: 0 0 1.5rem 0;
+    }
+    &.float_below {
+      margin: 0;
+    }
+    &.float-left {
+      float: left;
+      width: 50%;
+      margin: 0 1.5rem 1.5rem 0;
+    }
+    &.float-right {
+      float: right;
+      width: 50%;
+      margin: 0 0 1.5rem 1.5rem;
+    }
+    @media (max-width: 768px) {
+      &.float-left,
+      &.float-right {
+        float: none;
+        width: 100%;
+        margin: 0 0 1.5rem 0;
+      }
+    }
+  }
 }
diff --git a/files/wash-n-roll/internal/scss/components/_youtube.scss b/files/wash-n-roll/internal/scss/components/_youtube.scss
index a26310a..4846d14 100644
--- a/files/wash-n-roll/internal/scss/components/_youtube.scss
+++ b/files/wash-n-roll/internal/scss/components/_youtube.scss
@@ -25,6 +25,12 @@
     justify-content: flex-end;
     min-height: 300px;
     margin-bottom: 6rem;
+    @media (max-width: 1004px) {
+      margin-top: 4rem;
+    }
+    @media (max-width: 575px) {
+      margin-bottom: 3rem;
+    }
 
     &:before {
       content: "";
@@ -37,21 +43,68 @@
       height: 268px;
       background: $secondary;
       border-radius: 30px;
+      @media (max-width: 1280px) {
+        height: 230px;
+      }
+      @media (max-width: 1004px) {
+        width: 70%;
+        height: 168px;
+        transform: translate(0, -130%);
+      }
+      @media (max-width: 575px) {
+        height: 120px;
+        transform: translate(0, -170%);
+      }
     }
 
-    h2, h3 {
-      color: #fff;
+    h2 {
+      color: $white;
       position: absolute;
       left: 50px;
       top: 50%;
       transform: translate(0, -50%);
-      padding-bottom: 0;
+      padding: 0 800px 0 0;
+      @media (max-width: 1280px) {
+        padding-right: calc(50vw + 90px);
+        font-size: size(48);
+        line-height: size(56);
+      }
+      @media (max-width: 1004px) {
+        top: 0;
+        transform: translate(0, -50%);
+        padding-right: 0;
+        margin-right: 27vw;
+        font-size: size(40);
+        line-height: size(48);
+      }
+      @media (max-width: 768px) {
+        font-size: size(32);
+        line-height: size(38);
+      }
+      @media (max-width: 575px) {
+        font-size: size(26);
+        line-height: size(32);
+      }
     }
 
     .video_container {
       width: 717px;
       padding-bottom: 0;
       margin-right: 85px;
+      @media (max-width: 1280px) {
+        width: 50vw;
+      }
+      @media (max-width: 1004px) {
+        width: 60vw;
+        margin-top: 2rem;
+      }
+      @media (max-width: 768px) {
+        width: 85%;
+        margin-right: 0;
+      }
+      @media (max-width: 575px) {
+        height: 52vw;
+      }
 
       .responsive {
         position: relative;
@@ -75,7 +128,10 @@
           mask-repeat: no-repeat;
           mask-position: left top;
           mask-size: 100% auto;
-          background-color: #fff;
+          background-color: $white;
+          @media (max-width: 575px) {
+            transform: translate(-50%, -50%) scale(50%);
+          }
         }
 
         &:hover {
@@ -98,7 +154,12 @@
       padding-right: 30px;
       font-size: size(24);
       line-height: size(30);
-      color: #fff;
+      color: $white;
+      @media (max-width: 575px) {
+        bottom: 50px;
+        font-size: size(18);
+        line-height: size(24);
+      }
     }
   }
 }
\ No newline at end of file
diff --git a/files/wash-n-roll/internal/scss/layout/_____forms.scss b/files/wash-n-roll/internal/scss/layout/_____forms.scss
index ceb8b91..8774f87 100644
--- a/files/wash-n-roll/internal/scss/layout/_____forms.scss
+++ b/files/wash-n-roll/internal/scss/layout/_____forms.scss
@@ -6,8 +6,8 @@
       font-size: size(15);
       background: transparent;
       border: none;
-      border-bottom: 1px solid #fff;
-      color: #fff;
+      border-bottom: 1px solid $white;
+      color: $white;
       margin-bottom: 15px;
 
       &::placeholder {
@@ -16,7 +16,7 @@
     }
 
     textarea {
-      border: 1px solid #fff;
+      border: 1px solid $white;
       margin-top: 15px;
     }
 
@@ -55,7 +55,7 @@
           content: '';
           -webkit-appearance: none;
           background-color: transparent;
-          border: 1px solid #ffff;
+          border: 1px solid $white;
           padding: 8px;
           display: block;
           width: 18px;
diff --git a/files/wash-n-roll/internal/scss/layout/_footer.scss b/files/wash-n-roll/internal/scss/layout/_footer.scss
index 300dfef..225c6ff 100644
--- a/files/wash-n-roll/internal/scss/layout/_footer.scss
+++ b/files/wash-n-roll/internal/scss/layout/_footer.scss
@@ -1,38 +1,56 @@
 footer {
-  border-top: 4rem solid #fff;
+  border-top: 4rem solid $white;
   background: #5C5B5B;
-  color: #fff;
+  color: $white;
+  @media (max-width: 768px) {
+    border-top-width: 1rem;
+  }
 
   .inside {
     @include make-container();
-    max-width: 1280px;
+    width: 100%;
+    max-width: 1200px;
     position: relative;
     display: flex;
     justify-content: space-between;
+    flex-wrap: wrap;
     padding: 70px 0 45px 0;
     font-weight: 300;
+    @media (max-width: 1280px) {
+      max-width: 1280px;
+      padding-left: 40px;
+      padding-right: 40px;
+    }
+    @media (max-width: 768px) {
+      padding-left: 20px;
+      padding-right: 20px;
+    }
 
     h3 {
-      font-size: size(24);
-      line-height: size(29);
       padding-bottom: 1.5rem;
-      font-family: 'Lato', sans-serif;
     }
+
     .mod_navigation {
       width: 50%;
+      @media (max-width: 768px) {
+        width: 100%;
+        padding-bottom: 2.5rem;
+      }
 
       ul {
-        
+
         li {
           font-size: size(18);
           line-height: size(22);
           padding: 0 0 12px 0;
+
           a {
             display: inline-block;
             padding: 5px 0;
             font-size: size(16);
             text-decoration: none;
-            color: #fff;
+            color: $white;
+
             &:hover {
               text-decoration: underline;
             }
@@ -41,15 +59,23 @@ footer {
       }
     }
   }
+
   .social-media {
     display: flex;
     justify-content: flex-start;
     position: absolute;
     left: 50%;
     bottom: 65px;
+    @media (max-width: 768px) {
+      position: relative;
+      left: auto;
+      bottom: auto;
+    }
+
     li {
       padding: 0 1.5rem 0 0;
     }
+
     a {
       display: block;
       width: 42px;
@@ -58,12 +84,14 @@ footer {
       line-height: 1px;
       text-indent: -9999px;
     }
+
     .fb {
       a {
         background: transparent url("../images/logos/sm-logo-facebook.svg") no-repeat left top;
         background-size: 100% auto;
       }
     }
+
     .ig {
       a {
         background: transparent url("../images/logos/sm-logo-instagram.svg") no-repeat left top;
@@ -98,7 +126,7 @@ footer {
   //
   //      &:hover {
   //        background: $secondary;
-  //        color: #fff;
+  //        color: $white;
   //      }
   //    }
   //  }
diff --git a/files/wash-n-roll/internal/scss/layout/_header.scss b/files/wash-n-roll/internal/scss/layout/_header.scss
index f85a0ba..2408b9e 100644
--- a/files/wash-n-roll/internal/scss/layout/_header.scss
+++ b/files/wash-n-roll/internal/scss/layout/_header.scss
@@ -1,12 +1,21 @@
 header {
   .inside {
     @include make-container();
-    max-width: 1280px;
-    padding-top: 45px;
-    padding-bottom: 25px;
+    width: 100%;
+    max-width: 1200px;
+    padding: 45px 0 25px 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
+    @media (max-width: 1280px) {
+      max-width: 1280px;
+      padding-left: 40px;
+      padding-right: 40px;
+    }
+    @media (max-width: 768px) {
+      padding-left: 20px;
+      padding-right: 20px;
+    }
     @media (min-width: 576px) {
       padding-top: 45px;
       padding-bottom: 25px;
@@ -14,21 +23,33 @@ header {
   }
 
   .ce_image {
+    padding: 0;
+
     img {
       max-width: 198px;
-      @media (min-width: 576px) {
+      @include transition();
+      @media (max-width: 1004px) {
+        max-width: 160px;
+      }
+      @media (max-width: 768px) {
         max-width: 198px;
       }
     }
   }
 
   .mod_navigation {
+    @media (max-width: 768px) {
+      display: none;
+    }
+
     ul {
       display: flex;
       justify-content: flex-start;
     }
+
     li {
       margin-left: 22px;
+
       a, strong {
         display: block;
         width: 125px;
@@ -41,18 +62,26 @@ header {
         border: 1px solid #F5F5F5;
         border-radius: 20px;
         @include transition();
+        @media (max-width: 1004px) {
+          width: 100px;
+          padding: 6px 0;
+        }
+
         &:hover {
           color: $secondary;
           border-color: $secondary;
         }
+
         &.active,
         &.trail {
           background: $secondary;
           border-color: $secondary;
+
           &:hover {
             color: $font;
           }
         }
+
         &.isotope-basket {
           position: relative;
           background: $tertiary url("../images/elements/basket.svg") no-repeat 15px 9px;
@@ -60,6 +89,7 @@ header {
           border-color: $tertiary;
           text-indent: -9999px;
           width: 78px;
+
           &:hover {
             background-color: #F5F5F5;
             border-color: $secondary;
@@ -69,11 +99,12 @@ header {
       }
     }
   }
+
   #header-basket-items {
     position: absolute;
     right: 15px;
     top: 50%;
-    transform: translate(0,-50%);
+    transform: translate(0, -50%);
     text-indent: 0;
   }
 }
diff --git a/files/wash-n-roll/internal/scss/layout/_headlines.scss b/files/wash-n-roll/internal/scss/layout/_headlines.scss
index 39bc615..e9f06a5 100644
--- a/files/wash-n-roll/internal/scss/layout/_headlines.scss
+++ b/files/wash-n-roll/internal/scss/layout/_headlines.scss
@@ -19,10 +19,14 @@ h1 {
   margin-left: -3px;
 }
 h3 {
+  font-family: 'Lato', sans-serif;
   font-size: size(24);
   line-height: size(30);
   font-weight: 700;
   padding-bottom: 3rem;
+  @media (max-width: 575px) {
+    padding-bottom: 1rem;
+  }
 }
 
 h1.ce_headline,
@@ -31,6 +35,5 @@ h3.ce_headline,
 h4.ce_headline,
 h5.ce_headline,
 h6.ce_headline {
-  padding-left: 190px;
-  padding-right: 190px;
+  
 }
diff --git a/files/wash-n-roll/internal/scss/layout/_main.scss b/files/wash-n-roll/internal/scss/layout/_main.scss
index de4d811..76407f0 100644
--- a/files/wash-n-roll/internal/scss/layout/_main.scss
+++ b/files/wash-n-roll/internal/scss/layout/_main.scss
@@ -8,6 +8,9 @@ main {
 
     .spwn-center {
       text-align: center;
+      @media (max-width: 575px) {
+        text-align: left;
+      }
     }
   }
 }
diff --git a/files/wash-n-roll/internal/scss/vendors/slick/_slick-theme.scss b/files/wash-n-roll/internal/scss/vendors/slick/_slick-theme.scss
index 45f98a3..b9ea00b 100644
--- a/files/wash-n-roll/internal/scss/vendors/slick/_slick-theme.scss
+++ b/files/wash-n-roll/internal/scss/vendors/slick/_slick-theme.scss
@@ -43,7 +43,7 @@ $slick-opacity-not-active: 0.25 !default;
 
 .slick-list {
     .slick-loading & {
-        background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
+        background: $white slick-image-url("ajax-loader.gif") center center no-repeat;
     }
 }
 
diff --git a/files/wash-n-roll/internal/scss/wash-n-roll.scss b/files/wash-n-roll/internal/scss/wash-n-roll.scss
index 2f3f7df..1248344 100644
--- a/files/wash-n-roll/internal/scss/wash-n-roll.scss
+++ b/files/wash-n-roll/internal/scss/wash-n-roll.scss
@@ -2,6 +2,7 @@ $primary: #3AAA35; // green
 $secondary: #BCD03C; // neon green
 $tertiary: #BFD4E0; // blue
 $font: #000;
+$white: #fff;
 $youtube-red: #eb3223;
 
 @import "abstracts/variables";