created grid system and used it for home

sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js

@@ -14,6 +14,9 @@
       $('.os-scroll').overlayScrollbars({
         overflowBehavior:{x:'h',y:'scroll'}
       });
+      // $('.row .col>*', 'main[role="main"]').overlayScrollbars({
+      //   overflowBehavior:{x:'h',y:'scroll'}
+      // });
     };
 
     function  initAjaxLinks(){

sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css

@@ -11,6 +11,877 @@ a, a:focus, a:active {
 a:focus {
   -moz-outline-style: none; }
 
+.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-1-offset-1, .col-1-offset-2, .col-1-offset-3, .col-1-offset-4, .col-1-offset-5, .col-1-offset-6, .col-1-offset-7, .col-1-offset-8, .col-1-offset-9, .col-1-offset-10, .col-1-offset-11, .col-2-offset-1, .col-2-offset-2, .col-2-offset-3, .col-2-offset-4, .col-2-offset-5, .col-2-offset-6, .col-2-offset-7, .col-2-offset-8, .col-2-offset-9, .col-2-offset-10, .col-3-offset-1, .col-3-offset-2, .col-3-offset-3, .col-3-offset-4, .col-3-offset-5, .col-3-offset-6, .col-3-offset-7, .col-3-offset-8, .col-3-offset-9, .col-4-offset-1, .col-4-offset-2, .col-4-offset-3, .col-4-offset-4, .col-4-offset-5, .col-4-offset-6, .col-4-offset-7, .col-4-offset-8, .col-5-offset-1, .col-5-offset-2, .col-5-offset-3, .col-5-offset-4, .col-5-offset-5, .col-5-offset-6, .col-5-offset-7, .col-6-offset-1, .col-6-offset-2, .col-6-offset-3, .col-6-offset-4, .col-6-offset-5, .col-6-offset-6, .col-7-offset-1, .col-7-offset-2, .col-7-offset-3, .col-7-offset-4, .col-7-offset-5, .col-8-offset-1, .col-8-offset-2, .col-8-offset-3, .col-8-offset-4, .col-9-offset-1, .col-9-offset-2, .col-9-offset-3, .col-10-offset-1, .col-10-offset-2, .col-11-offset-1 {
+  width: 100%;
+  display: inline-block;
+  font-size: 16px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  white-space: normal; }
+
+.row {
+  font-size: 0;
+  white-space: nowrap;
+  position: relative; }
+
+.col-1 {
+  padding-left: 0em;
+  padding-right: 1em;
+  margin-left: 0%; }
+  .col-1:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-1 {
+      width: 8.33333%;
+      vertical-align: top; } }
+
+.col-2 {
+  padding-left: 0em;
+  padding-right: 1em;
+  margin-left: 0%; }
+  .col-2:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-2 {
+      width: 16.66667%;
+      vertical-align: top; } }
+
+.col-3 {
+  padding-left: 0em;
+  padding-right: 1em;
+  margin-left: 0%; }
+  .col-3:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-3 {
+      width: 25%;
+      vertical-align: top; } }
+
+.col-4 {
+  padding-left: 0em;
+  padding-right: 1em;
+  margin-left: 0%; }
+  .col-4:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-4 {
+      width: 33.33333%;
+      vertical-align: top; } }
+
+.col-5 {
+  padding-left: 0em;
+  padding-right: 1em;
+  margin-left: 0%; }
+  .col-5:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-5 {
+      width: 41.66667%;
+      vertical-align: top; } }
+
+.col-6 {
+  padding-left: 0em;
+  padding-right: 1em;
+  margin-left: 0%; }
+  .col-6:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-6 {
+      width: 50%;
+      vertical-align: top; } }
+
+.col-7 {
+  padding-left: 0em;
+  padding-right: 1em;
+  margin-left: 0%; }
+  .col-7:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-7 {
+      width: 58.33333%;
+      vertical-align: top; } }
+
+.col-8 {
+  padding-left: 0em;
+  padding-right: 1em;
+  margin-left: 0%; }
+  .col-8:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-8 {
+      width: 66.66667%;
+      vertical-align: top; } }
+
+.col-9 {
+  padding-left: 0em;
+  padding-right: 1em;
+  margin-left: 0%; }
+  .col-9:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-9 {
+      width: 75%;
+      vertical-align: top; } }
+
+.col-10 {
+  padding-left: 0em;
+  padding-right: 1em;
+  margin-left: 0%; }
+  .col-10:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-10 {
+      width: 83.33333%;
+      vertical-align: top; } }
+
+.col-11 {
+  padding-left: 0em;
+  padding-right: 1em;
+  margin-left: 0%; }
+  .col-11:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-11 {
+      width: 91.66667%;
+      vertical-align: top; } }
+
+.col-12 {
+  padding-left: 0em;
+  padding-right: 1em;
+  margin-left: 0%; }
+  .col-12:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-12 {
+      width: 100%;
+      vertical-align: top; } }
+
+.col-1-offset-1 {
+  padding-left: 1em;
+  padding-right: 1em;
+  margin-left: 8.33333%; }
+  .col-1-offset-1:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-1-offset-1 {
+      width: 8.33333%;
+      vertical-align: top; } }
+
+.col-1-offset-2 {
+  padding-left: 2em;
+  padding-right: 1em;
+  margin-left: 16.66667%; }
+  .col-1-offset-2:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-1-offset-2 {
+      width: 8.33333%;
+      vertical-align: top; } }
+
+.col-1-offset-3 {
+  padding-left: 3em;
+  padding-right: 1em;
+  margin-left: 25%; }
+  .col-1-offset-3:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-1-offset-3 {
+      width: 8.33333%;
+      vertical-align: top; } }
+
+.col-1-offset-4 {
+  padding-left: 4em;
+  padding-right: 1em;
+  margin-left: 33.33333%; }
+  .col-1-offset-4:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-1-offset-4 {
+      width: 8.33333%;
+      vertical-align: top; } }
+
+.col-1-offset-5 {
+  padding-left: 5em;
+  padding-right: 1em;
+  margin-left: 41.66667%; }
+  .col-1-offset-5:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-1-offset-5 {
+      width: 8.33333%;
+      vertical-align: top; } }
+
+.col-1-offset-6 {
+  padding-left: 6em;
+  padding-right: 1em;
+  margin-left: 50%; }
+  .col-1-offset-6:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-1-offset-6 {
+      width: 8.33333%;
+      vertical-align: top; } }
+
+.col-1-offset-7 {
+  padding-left: 7em;
+  padding-right: 1em;
+  margin-left: 58.33333%; }
+  .col-1-offset-7:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-1-offset-7 {
+      width: 8.33333%;
+      vertical-align: top; } }
+
+.col-1-offset-8 {
+  padding-left: 8em;
+  padding-right: 1em;
+  margin-left: 66.66667%; }
+  .col-1-offset-8:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-1-offset-8 {
+      width: 8.33333%;
+      vertical-align: top; } }
+
+.col-1-offset-9 {
+  padding-left: 9em;
+  padding-right: 1em;
+  margin-left: 75%; }
+  .col-1-offset-9:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-1-offset-9 {
+      width: 8.33333%;
+      vertical-align: top; } }
+
+.col-1-offset-10 {
+  padding-left: 10em;
+  padding-right: 1em;
+  margin-left: 83.33333%; }
+  .col-1-offset-10:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-1-offset-10 {
+      width: 8.33333%;
+      vertical-align: top; } }
+
+.col-1-offset-11 {
+  padding-left: 11em;
+  padding-right: 1em;
+  margin-left: 91.66667%; }
+  .col-1-offset-11:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-1-offset-11 {
+      width: 8.33333%;
+      vertical-align: top; } }
+
+.col-2-offset-1 {
+  padding-left: 1em;
+  padding-right: 1em;
+  margin-left: 16.66667%; }
+  .col-2-offset-1:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-2-offset-1 {
+      width: 16.66667%;
+      vertical-align: top; } }
+
+.col-2-offset-2 {
+  padding-left: 2em;
+  padding-right: 1em;
+  margin-left: 33.33333%; }
+  .col-2-offset-2:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-2-offset-2 {
+      width: 16.66667%;
+      vertical-align: top; } }
+
+.col-2-offset-3 {
+  padding-left: 3em;
+  padding-right: 1em;
+  margin-left: 50%; }
+  .col-2-offset-3:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-2-offset-3 {
+      width: 16.66667%;
+      vertical-align: top; } }
+
+.col-2-offset-4 {
+  padding-left: 4em;
+  padding-right: 1em;
+  margin-left: 66.66667%; }
+  .col-2-offset-4:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-2-offset-4 {
+      width: 16.66667%;
+      vertical-align: top; } }
+
+.col-2-offset-5 {
+  padding-left: 5em;
+  padding-right: 1em;
+  margin-left: 83.33333%; }
+  .col-2-offset-5:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-2-offset-5 {
+      width: 16.66667%;
+      vertical-align: top; } }
+
+.col-2-offset-6 {
+  padding-left: 6em;
+  padding-right: 1em;
+  margin-left: 100%; }
+  .col-2-offset-6:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-2-offset-6 {
+      width: 16.66667%;
+      vertical-align: top; } }
+
+.col-2-offset-7 {
+  padding-left: 7em;
+  padding-right: 1em;
+  margin-left: 116.66667%; }
+  .col-2-offset-7:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-2-offset-7 {
+      width: 16.66667%;
+      vertical-align: top; } }
+
+.col-2-offset-8 {
+  padding-left: 8em;
+  padding-right: 1em;
+  margin-left: 133.33333%; }
+  .col-2-offset-8:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-2-offset-8 {
+      width: 16.66667%;
+      vertical-align: top; } }
+
+.col-2-offset-9 {
+  padding-left: 9em;
+  padding-right: 1em;
+  margin-left: 150%; }
+  .col-2-offset-9:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-2-offset-9 {
+      width: 16.66667%;
+      vertical-align: top; } }
+
+.col-2-offset-10 {
+  padding-left: 10em;
+  padding-right: 1em;
+  margin-left: 166.66667%; }
+  .col-2-offset-10:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-2-offset-10 {
+      width: 16.66667%;
+      vertical-align: top; } }
+
+.col-3-offset-1 {
+  padding-left: 1em;
+  padding-right: 1em;
+  margin-left: 25%; }
+  .col-3-offset-1:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-3-offset-1 {
+      width: 25%;
+      vertical-align: top; } }
+
+.col-3-offset-2 {
+  padding-left: 2em;
+  padding-right: 1em;
+  margin-left: 50%; }
+  .col-3-offset-2:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-3-offset-2 {
+      width: 25%;
+      vertical-align: top; } }
+
+.col-3-offset-3 {
+  padding-left: 3em;
+  padding-right: 1em;
+  margin-left: 75%; }
+  .col-3-offset-3:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-3-offset-3 {
+      width: 25%;
+      vertical-align: top; } }
+
+.col-3-offset-4 {
+  padding-left: 4em;
+  padding-right: 1em;
+  margin-left: 100%; }
+  .col-3-offset-4:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-3-offset-4 {
+      width: 25%;
+      vertical-align: top; } }
+
+.col-3-offset-5 {
+  padding-left: 5em;
+  padding-right: 1em;
+  margin-left: 125%; }
+  .col-3-offset-5:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-3-offset-5 {
+      width: 25%;
+      vertical-align: top; } }
+
+.col-3-offset-6 {
+  padding-left: 6em;
+  padding-right: 1em;
+  margin-left: 150%; }
+  .col-3-offset-6:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-3-offset-6 {
+      width: 25%;
+      vertical-align: top; } }
+
+.col-3-offset-7 {
+  padding-left: 7em;
+  padding-right: 1em;
+  margin-left: 175%; }
+  .col-3-offset-7:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-3-offset-7 {
+      width: 25%;
+      vertical-align: top; } }
+
+.col-3-offset-8 {
+  padding-left: 8em;
+  padding-right: 1em;
+  margin-left: 200%; }
+  .col-3-offset-8:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-3-offset-8 {
+      width: 25%;
+      vertical-align: top; } }
+
+.col-3-offset-9 {
+  padding-left: 9em;
+  padding-right: 1em;
+  margin-left: 225%; }
+  .col-3-offset-9:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-3-offset-9 {
+      width: 25%;
+      vertical-align: top; } }
+
+.col-4-offset-1 {
+  padding-left: 1em;
+  padding-right: 1em;
+  margin-left: 33.33333%; }
+  .col-4-offset-1:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-4-offset-1 {
+      width: 33.33333%;
+      vertical-align: top; } }
+
+.col-4-offset-2 {
+  padding-left: 2em;
+  padding-right: 1em;
+  margin-left: 66.66667%; }
+  .col-4-offset-2:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-4-offset-2 {
+      width: 33.33333%;
+      vertical-align: top; } }
+
+.col-4-offset-3 {
+  padding-left: 3em;
+  padding-right: 1em;
+  margin-left: 100%; }
+  .col-4-offset-3:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-4-offset-3 {
+      width: 33.33333%;
+      vertical-align: top; } }
+
+.col-4-offset-4 {
+  padding-left: 4em;
+  padding-right: 1em;
+  margin-left: 133.33333%; }
+  .col-4-offset-4:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-4-offset-4 {
+      width: 33.33333%;
+      vertical-align: top; } }
+
+.col-4-offset-5 {
+  padding-left: 5em;
+  padding-right: 1em;
+  margin-left: 166.66667%; }
+  .col-4-offset-5:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-4-offset-5 {
+      width: 33.33333%;
+      vertical-align: top; } }
+
+.col-4-offset-6 {
+  padding-left: 6em;
+  padding-right: 1em;
+  margin-left: 200%; }
+  .col-4-offset-6:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-4-offset-6 {
+      width: 33.33333%;
+      vertical-align: top; } }
+
+.col-4-offset-7 {
+  padding-left: 7em;
+  padding-right: 1em;
+  margin-left: 233.33333%; }
+  .col-4-offset-7:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-4-offset-7 {
+      width: 33.33333%;
+      vertical-align: top; } }
+
+.col-4-offset-8 {
+  padding-left: 8em;
+  padding-right: 1em;
+  margin-left: 266.66667%; }
+  .col-4-offset-8:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-4-offset-8 {
+      width: 33.33333%;
+      vertical-align: top; } }
+
+.col-5-offset-1 {
+  padding-left: 1em;
+  padding-right: 1em;
+  margin-left: 41.66667%; }
+  .col-5-offset-1:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-5-offset-1 {
+      width: 41.66667%;
+      vertical-align: top; } }
+
+.col-5-offset-2 {
+  padding-left: 2em;
+  padding-right: 1em;
+  margin-left: 83.33333%; }
+  .col-5-offset-2:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-5-offset-2 {
+      width: 41.66667%;
+      vertical-align: top; } }
+
+.col-5-offset-3 {
+  padding-left: 3em;
+  padding-right: 1em;
+  margin-left: 125%; }
+  .col-5-offset-3:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-5-offset-3 {
+      width: 41.66667%;
+      vertical-align: top; } }
+
+.col-5-offset-4 {
+  padding-left: 4em;
+  padding-right: 1em;
+  margin-left: 166.66667%; }
+  .col-5-offset-4:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-5-offset-4 {
+      width: 41.66667%;
+      vertical-align: top; } }
+
+.col-5-offset-5 {
+  padding-left: 5em;
+  padding-right: 1em;
+  margin-left: 208.33333%; }
+  .col-5-offset-5:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-5-offset-5 {
+      width: 41.66667%;
+      vertical-align: top; } }
+
+.col-5-offset-6 {
+  padding-left: 6em;
+  padding-right: 1em;
+  margin-left: 250%; }
+  .col-5-offset-6:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-5-offset-6 {
+      width: 41.66667%;
+      vertical-align: top; } }
+
+.col-5-offset-7 {
+  padding-left: 7em;
+  padding-right: 1em;
+  margin-left: 291.66667%; }
+  .col-5-offset-7:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-5-offset-7 {
+      width: 41.66667%;
+      vertical-align: top; } }
+
+.col-6-offset-1 {
+  padding-left: 1em;
+  padding-right: 1em;
+  margin-left: 50%; }
+  .col-6-offset-1:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-6-offset-1 {
+      width: 50%;
+      vertical-align: top; } }
+
+.col-6-offset-2 {
+  padding-left: 2em;
+  padding-right: 1em;
+  margin-left: 100%; }
+  .col-6-offset-2:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-6-offset-2 {
+      width: 50%;
+      vertical-align: top; } }
+
+.col-6-offset-3 {
+  padding-left: 3em;
+  padding-right: 1em;
+  margin-left: 150%; }
+  .col-6-offset-3:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-6-offset-3 {
+      width: 50%;
+      vertical-align: top; } }
+
+.col-6-offset-4 {
+  padding-left: 4em;
+  padding-right: 1em;
+  margin-left: 200%; }
+  .col-6-offset-4:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-6-offset-4 {
+      width: 50%;
+      vertical-align: top; } }
+
+.col-6-offset-5 {
+  padding-left: 5em;
+  padding-right: 1em;
+  margin-left: 250%; }
+  .col-6-offset-5:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-6-offset-5 {
+      width: 50%;
+      vertical-align: top; } }
+
+.col-6-offset-6 {
+  padding-left: 6em;
+  padding-right: 1em;
+  margin-left: 300%; }
+  .col-6-offset-6:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-6-offset-6 {
+      width: 50%;
+      vertical-align: top; } }
+
+.col-7-offset-1 {
+  padding-left: 1em;
+  padding-right: 1em;
+  margin-left: 58.33333%; }
+  .col-7-offset-1:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-7-offset-1 {
+      width: 58.33333%;
+      vertical-align: top; } }
+
+.col-7-offset-2 {
+  padding-left: 2em;
+  padding-right: 1em;
+  margin-left: 116.66667%; }
+  .col-7-offset-2:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-7-offset-2 {
+      width: 58.33333%;
+      vertical-align: top; } }
+
+.col-7-offset-3 {
+  padding-left: 3em;
+  padding-right: 1em;
+  margin-left: 175%; }
+  .col-7-offset-3:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-7-offset-3 {
+      width: 58.33333%;
+      vertical-align: top; } }
+
+.col-7-offset-4 {
+  padding-left: 4em;
+  padding-right: 1em;
+  margin-left: 233.33333%; }
+  .col-7-offset-4:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-7-offset-4 {
+      width: 58.33333%;
+      vertical-align: top; } }
+
+.col-7-offset-5 {
+  padding-left: 5em;
+  padding-right: 1em;
+  margin-left: 291.66667%; }
+  .col-7-offset-5:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-7-offset-5 {
+      width: 58.33333%;
+      vertical-align: top; } }
+
+.col-8-offset-1 {
+  padding-left: 1em;
+  padding-right: 1em;
+  margin-left: 66.66667%; }
+  .col-8-offset-1:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-8-offset-1 {
+      width: 66.66667%;
+      vertical-align: top; } }
+
+.col-8-offset-2 {
+  padding-left: 2em;
+  padding-right: 1em;
+  margin-left: 133.33333%; }
+  .col-8-offset-2:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-8-offset-2 {
+      width: 66.66667%;
+      vertical-align: top; } }
+
+.col-8-offset-3 {
+  padding-left: 3em;
+  padding-right: 1em;
+  margin-left: 200%; }
+  .col-8-offset-3:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-8-offset-3 {
+      width: 66.66667%;
+      vertical-align: top; } }
+
+.col-8-offset-4 {
+  padding-left: 4em;
+  padding-right: 1em;
+  margin-left: 266.66667%; }
+  .col-8-offset-4:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-8-offset-4 {
+      width: 66.66667%;
+      vertical-align: top; } }
+
+.col-9-offset-1 {
+  padding-left: 1em;
+  padding-right: 1em;
+  margin-left: 75%; }
+  .col-9-offset-1:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-9-offset-1 {
+      width: 75%;
+      vertical-align: top; } }
+
+.col-9-offset-2 {
+  padding-left: 2em;
+  padding-right: 1em;
+  margin-left: 150%; }
+  .col-9-offset-2:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-9-offset-2 {
+      width: 75%;
+      vertical-align: top; } }
+
+.col-9-offset-3 {
+  padding-left: 3em;
+  padding-right: 1em;
+  margin-left: 225%; }
+  .col-9-offset-3:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-9-offset-3 {
+      width: 75%;
+      vertical-align: top; } }
+
+.col-10-offset-1 {
+  padding-left: 1em;
+  padding-right: 1em;
+  margin-left: 83.33333%; }
+  .col-10-offset-1:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-10-offset-1 {
+      width: 83.33333%;
+      vertical-align: top; } }
+
+.col-10-offset-2 {
+  padding-left: 2em;
+  padding-right: 1em;
+  margin-left: 166.66667%; }
+  .col-10-offset-2:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-10-offset-2 {
+      width: 83.33333%;
+      vertical-align: top; } }
+
+.col-11-offset-1 {
+  padding-left: 1em;
+  padding-right: 1em;
+  margin-left: 91.66667%; }
+  .col-11-offset-1:last-child {
+    padding-right: 0; }
+  @media only screen and (min-width: 768px) {
+    .col-11-offset-1 {
+      width: 91.66667%;
+      vertical-align: top; } }
+
 body, html {
   position: relative;
   width: 100%;
@@ -40,12 +911,12 @@ main[role="main"] {
   width: 100%;
   height: 100%;
   overflow: hidden; }
-  main[role="main"] .layout-content > * {
+  main[role="main"] .layout-content {
-    pointer-events: auto; }
-  main[role="main"] .layout-content, main[role="main"] .region-content, main[role="main"] #block-edlptheme-content {
     width: 100%;
     height: 100%;
     overflow: hidden; }
+  main[role="main"] .layout-content > * {
+    pointer-events: auto; }
 
 footer[role="contentinfo"] {
   position: fixed;
@@ -124,6 +995,18 @@ header[role="banner"] {
           border-color: red;
           background-color: red; }
 
+main[role="main"] .layout-content .row {
+  height: 100%;
+  overflow: hidden; }
+  main[role="main"] .layout-content .row .col {
+    max-height: 100%;
+    position: relative; }
+  main[role="main"] .layout-content .row .col > * {
+    border-top: 1px solid red;
+    border-bottom: 1px solid red;
+    background-color: rgba(255, 255, 255, 0.9);
+    max-height: 100%; }
+
 #agenda {
   pointer-events: auto;
   background-color: rgba(255, 255, 255, 0.9);

sites/all/themes/custom/edlptheme/assets/scripts/main.js

@@ -14,6 +14,9 @@
       $('.os-scroll').overlayScrollbars({
         overflowBehavior:{x:'h',y:'scroll'}
       });
+      // $('.row .col>*', 'main[role="main"]').overlayScrollbars({
+      //   overflowBehavior:{x:'h',y:'scroll'}
+      // });
     };
 
     function  initAjaxLinks(){

sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -8,6 +8,7 @@
 
 @import 'base/reset';
 @import 'base/colors';
+@import 'base/grid';
 @import 'base/layout';
 
 // header
@@ -93,13 +94,25 @@ header[role="banner"]{
 }
 
 // main
-// main[role="main"]{
+main[role="main"]{
-//   .layout-content{
+  .layout-content{
-//     p{
+    .row{
-//       white-space:normal;
+      height:100%;
-//     }
+      overflow: hidden;
-//   }
+      .col{
-// }
+        max-height: 100%;
+        position: relative;
+      }
+      .col>*{
+        border-top: 1px solid red;
+        border-bottom: 1px solid red;
+        background-color: $transparent-bg;
+        max-height: 100%;
+      }
+    }
+  }
+}
+
 
 #agenda{
   pointer-events: auto;

sites/all/themes/custom/edlptheme/assets/styles/base/_grid.scss

@@ -0,0 +1,49 @@
+// http://www.thesassway.com/intermediate/simple-grid-mixins
+
+$default_gap: 1em;
+$default_sum: 12;
+
+@mixin row() {
+  font-size: 0;
+  white-space: nowrap;
+  position: relative;
+}
+
+%col-reset {
+    width: 100%;
+    display: inline-block;
+    font-size: 16px;
+    box-sizing: border-box;
+    white-space:normal;
+}
+
+@mixin col($col, $offset: 0, $sum: $default_sum, $gap: $default_gap, $align: top) {
+  @extend %col-reset;
+  padding-left: $gap*$offset;
+  padding-right: $gap;
+  &:last-child{padding-right: 0;}
+  margin-left: percentage(($col/$sum)*$offset);
+
+  @media only screen and (min-width: 768px) {
+    width: percentage($col/$sum);
+    vertical-align: $align;
+  }
+}
+
+.row{
+  @include row;
+}
+
+@for $c from 1 through $default_sum {
+  .col-#{$c} {
+      @include col($c);
+  }
+}
+
+@for $c from 1 through $default_sum - 1 {
+  @for $o from 1 through $default_sum - $c {
+    .col-#{$c}-offset-#{$o} {
+      @include col($c, $o);
+    }
+  }
+}

sites/all/themes/custom/edlptheme/assets/styles/base/_layout.scss

@@ -32,13 +32,13 @@ main[role="main"]{
   padding:7em 2em 9em;
   width:100%; height:100%;
   overflow: hidden;
-  .layout-content>*{
+  .layout-content{
-    pointer-events: auto;
-  }
-  .layout-content, .region-content, #block-edlptheme-content{
     width: 100%; height:100%;
     overflow:hidden;
   }
+  .layout-content>*{
+    pointer-events: auto;
+  }
 }
 
 footer[role="contentinfo"]{

sites/all/themes/custom/edlptheme/templates/block/block--system-main-block.html.twig

@@ -0,0 +1,3 @@
+{% block content %}
+  {{ content }}
+{% endblock %}

sites/all/themes/custom/edlptheme/templates/layout/region--content.html.twig

@@ -0,0 +1 @@
+{{ content }}