eSales Media Git repositories
Browse code

Progress

Benjamin Roth authored on21/02/2023 19:42:19
Showing1 changed files
files/themes/aldegott_2022/assets/css/inc/common.scss
History View file @12e841b
... ... 
@@ -11,6 +11,11 @@
11 11 
     vertical-align: middle;
12 12 
   }
13 13
14 
+  > video {
15 
+    max-width: 100%;
16 
+    height: auto;
17 
+  }
18 
+
14 19 
   .responsive {
15 20 
     overflow: hidden;
16 21 
     position: relative;
... ... 
@@ -153,144 +158,16 @@
153 158
154 159 
 .embed-wrapper {
155 160 
   position: relative;
156 
-  .embed-arrow {
157 
-    z-index: 2;
158 
-    background-color: $color-bg-tertiary;
159 
-    color: $color-text-invert;
160 
-
161 
-    position: absolute;
162 
-    left: 0;
163 
-    top: 0;
164 
-    bottom: 0;
165 
-    right: 60%;
166 
-    right: calc(50% + 250px);
167 
-
168 
-    @include for-max-size(1200px) {
169 
-      right: auto;
170 
-      width: 250px;
171 
-    }
172 
-
173 
-    &:before {
174 
-      position: absolute;
175 
-      top:0;
176 
-      bottom: 0;
177 
-      left: 100%;
178 
-      width: 50px;
179 
-      content: '';
180 
-      background: url('data:image/svg+xml; charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%22100%22%20fill%3D%22%23000000%22%20viewBox%3D%220%200%2010%20100%22%20preserveAspectRatio%3D%22none%22%20%3E%3Cpath%20d%3D%22M0%2C0%20L0%2C100%20L10%2C50z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat 100% 50%;
181 
-      -webkit-background-size: 100% 100%;
182 
-      background-size: 100% 100%;
183 
-    }
184 
-
185 
-    + .embed-map {
186 
-      right: 0;
187 
-      left: 40%;
188 
-      left: calc(50% - 250px);
189 
-      width: auto;
190 
-
191 
-      @include for-max-size(1200px) {
192 
-        left: 0;
193 
-        padding-left: 250px;
194 
-
195 
-        iframe {
196 
-          left: 250px;
197 
-          right: 0;
198 
-          width: calc(100% - 250px);
199 
-        }
200 
-      }
201 
-    }
202 
-  }
203 
-  .embed-map {
161 
+  &.embed-map {
204 162 
     z-index: 1;
163 
+    overflow: hidden;
164 
+    @include aspect-ratio(2,1);
165 
+  }
166 
+  iframe {
205 167 
     position: absolute;
206 
-    left: 0;
207 
-    top: 0;
168 
+    inset: 0;
208 169 
     width: 100%;
209 170 
     height: 100%;
210 
-    overflow: hidden;
211 
-
212 
-    iframe {
213 
-      position: absolute;
214 
-      top: 0;
215 
-      left: 0;
216 
-      width: 100%;
217 
-      height: 100%;
218 
-    }
219 
-  }
220 
-
221 
-  .embed-arrow-inside {
222 
-    @include aspect-ratio(2,0.75,true);
223 
-    @include centered-1200;
224 
-    //z-index: 1;
225 
-    display: flex;
226 
-    align-items: center;
227 
-
228 
-    .embed-arrow-text-holder {
229 
-      display: inline-flex;
230 
-      justify-content: center;
231 
-      width: 50%;
232 
-      padding-right: 250px;
233 
-      @include box-sizing(border-box);
234 
-
235 
-      @include for-max-size(1200px) {
236 
-        width: 235px;
237 
-        padding-right: 0;
238 
-      }
239 
-    }
240 
-    .embed-arrow-text {
241 
-      z-index: 2;
242 
-      em, i {
243 
-        font-style: normal;
244 
-        color: $color-text-alt;
245 
-      }
246 
-
247 
-      & {
248 
-        color: $color-text-invert;
249 
-      }
250 
-
251 
-      h1, h2, h3, h4, h5, h6 {
252 
-        text-align: left;
253 
-        color: $color-text-alt;
254 
-
255 
-        em, i {
256 
-          color: $color-text-invert;
257 
-        }
258 
-      }
259 
-    }
260 
-  }
261 
-
262 
-  @include for-mobile {
263 
-    display: flex;
264 
-    flex-direction: column;
265 
-    .embed-arrow {
266 
-      display: none;
267 
-
268 
-      + .embed-map {
269 
-        order: 2;
270 
-        position: relative;
271 
-        padding: 0;
272 
-        @include aspect-ratio(2,1);
273 
-
274 
-        iframe {
275 
-          width: 100%;
276 
-          left: 0;
277 
-        }
278 
-      }
279 
-    }
280 
-    .embed-arrow-inside {
281 
-      width: 100%;
282 
-      justify-content: center;
283 
-      order: 1;
284 
-      background: $color-bg-tertiary;
285 
-
286 
-      .embed-arrow-text-holder {
287 
-        padding: 50px 0;
288 
-        &,
289 
-        h1,h2,h3,h4,h5,h6 {
290 
-          text-align: center;
291 
-        }
292 
-      }
293 
-    }
294 171 
   }
295 172 
 }
296 173
... ... 
@@ -517,7 +394,7 @@ ol {
517 394 
     }
518 395 
     &.-emphasised-block,
519 396 
     .-emphasised-block& {
520 
-      font-size: font-size(25px);
397 
+      @include font-size(25px);
521 398 
       text-transform: uppercase;
522 399 
       font-weight: 700;
523 400 
       font-family: $font-family-alternate;
... ... 
@@ -653,19 +530,32 @@ p.back,
653 530 
  * PAGINATION
654 531 
  */
655 532 
 .pagination {
656 
-  @include box;
657 533 
   line-height: 35px;
658 534 
   display: flex;
659 535 
   p {
660 536 
     font-size: font-size(14px);
537 
+    font-family: $font-family-alternate;
538 
+    letter-spacing: 0.125em;
661 539 
     float: left;
662 
-    font-weight: 600;
663 
-    letter-spacing: 0.1em;
540 
+    font-weight: 700;
664 541 
     text-transform: uppercase;
665 542 
     margin: 0 auto 0 0;
543 
+    position: relative;
544 
+
545 
+    &:after {
546 
+      content: '';
547 
+      position: absolute;
548 
+      bottom: 4px;
549 
+      left: 0;
550 
+      width: 100%;
551 
+      @include border-radius(99em);
552 
+      background-color: $color-text;
553 
+      height: 3px;
554 
+    }
666 555 
   }
667 556
668 557 
   ul {
558 
+    font-size: font-size(15px);
669 559 
     text-align: center;
670 560 
     position: relative;
671 561 
     padding: 0;
... ... 
@@ -679,22 +569,22 @@ p.back,
679 569
680 570 
     a {
681 571 
       &:hover {
682 
-        border-bottom-color: $color-bg-secondary;
683 
-        color: mix($color-link,#000,60%);
572 
+        color: $color-text;
573 
+        background-color: $color-bg-tertiary;
684 574 
       }
685 575 
     }
686 576
687 577 
     a,strong {
578 
+      @include border-radius(9999em);
688 579 
       font-weight: 400;
689 580 
       display: block;
690 
-      min-width: 1.5em;
581 
+      width: 2em;
691 582 
       height: 2em;
692 583 
       line-height: 2em;
693 584 
       padding: 0 0.125em;
694 585 
       -webkit-box-sizing: border-box;
695 586 
       -moz-box-sizing: border-box;
696 587 
       box-sizing: border-box;
697 
-      border-bottom: 2px transparent solid;
698 588 
       color: $color-link;
699 589 
       text-align: center;
700 590 
       -webkit-transition: all 0.25s;
... ... 
@@ -705,9 +595,9 @@ p.back,
705 595
706 596 
       &.active
707 597 
       {
708 
-        border-bottom-color: $color-bg-secondary;
709 
-        color: $color-text;
710 
-        font-weight: 600;
598 
+        background-color: $color-bg-primary;
599 
+        color: $color-text-invert;
600 
+        font-weight: 400;
711 601 
       }
712 602
713 603 
       &.next,
... ... 
@@ -732,25 +622,25 @@ p.back,
732 622
733 623 
       &.next {
734 624 
         &:before {
735 
-          background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23C48F3A" width="1em" height="1em" viewBox="0 0 32 32"%3E%3Cpath d="M24.262 16.064c-0.025 1.433-0.607 2.82-1.616 3.843l-12.093 12.093-2.815-2.815c4.040-4.039 8.156-8.003 12.118-12.118 0.548-0.584 0.553-1.573-0.035-2.168l-12.083-12.083 2.815-2.815 12.092 12.092c1.035 1.050 1.624 2.5 1.617 3.973z"/%3E%3C/svg%3E') 50% 50% no-repeat;
625 
+          background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 62 123' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M60.32,65.45c1.409,-2.509 1.409,-5.581 0,-8.09l-36.13,-54.92c-1.41,-2.31 -5.08,-3.18 -7.05,-1.74l-15,7c-2.22,1.39 -2.78,5.14 -1.37,7.46l30.23,46.24l-29.95,45.67c-1.69,2.6 -0.84,6.36 0.85,7.52l15.24,7.22c2.25,1.45 5.64,0.29 7.05,-1.73l36.13,-54.63Z' style='fill:%23#{str-replace($color-bg-secondary,'#','')};fill-rule:nonzero;'/%3E%3C/svg%3E") 50% 50% no-repeat;
736 626 
         }
737 627 
       }
738 628
739 629 
       &.previous {
740 630 
         &:before {
741 
-          background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23C48F3A" width="1em" height="1em" viewBox="0 0 32 32"%3E%3Cpath d="M7.738 15.936c0.025-1.433 0.607-2.82 1.616-3.843l12.093-12.093 2.815 2.815c-4.040 4.039-8.156 8.003-12.118 12.118-0.548 0.584-0.553 1.573 0.035 2.168l12.083 12.083-2.815 2.815-12.092-12.092c-1.035-1.050-1.624-2.5-1.617-3.973z"/%3E%3C/svg%3E') 50% 50% no-repeat;
631 
+          background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 62 123' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M1.678,65.45c-1.409,-2.509 -1.409,-5.581 0,-8.09l36.13,-54.92c1.41,-2.31 5.08,-3.18 7.05,-1.74l15,7c2.22,1.39 2.78,5.14 1.37,7.46l-30.23,46.24l29.95,45.67c1.69,2.6 0.84,6.36 -0.85,7.52l-15.24,7.22c-2.25,1.45 -5.64,0.29 -7.05,-1.73l-36.13,-54.63Z' style='fill:%23#{str-replace($color-bg-secondary,'#','')};fill-rule:nonzero;'/%3E%3C/svg%3E") 50% 50% no-repeat;
742 632 
         }
743 633 
       }
744 634
745 635 
       &.last {
746 636 
         &:before {
747 
-          background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23C48F3A" width="1em" height="1em" viewBox="0 0 32 32"%3E%3Cpath d="M24.262 16.064c-0.025 1.433-0.607 2.82-1.616 3.843l-12.093 12.093-2.815-2.815c4.040-4.039 8.156-8.003 12.118-12.118 0.548-0.584 0.553-1.573-0.035-2.168l-12.083-12.083 2.815-2.815 12.092 12.092c1.035 1.050 1.624 2.5 1.617 3.973z"/%3E%3C/svg%3E') 50% 50% no-repeat;
637 
+          background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 100 123' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M60.322,65.45c1.409,-2.509 1.409,-5.581 -0,-8.09l-36.13,-54.92c-1.41,-2.31 -5.08,-3.18 -7.05,-1.74l-15,7c-2.22,1.39 -2.78,5.14 -1.37,7.46l30.23,46.24l-29.95,45.67c-1.69,2.6 -0.84,6.36 0.85,7.52l15.24,7.22c2.25,1.45 5.64,0.29 7.05,-1.73l36.13,-54.63Z' style='fill:%23#{str-replace($color-bg-secondary,'#','')};fill-rule:nonzero;'/%3E%3Cpath d='M100,6.617c0,-3.652 -2.965,-6.617 -6.617,-6.617l-13.233,-0c-3.651,-0 -6.616,2.965 -6.616,6.617l-0,109.266c-0,3.652 2.965,6.617 6.616,6.617l13.233,0c3.652,0 6.617,-2.965 6.617,-6.617l0,-109.266Z' style='fill:%23#{str-replace($color-bg-secondary,'#','')};'/%3E%3C/svg%3E") 50% 50% no-repeat;
748 638 
         }
749 639 
       }
750 640
751 641 
       &.first {
752 642 
         &:before {
753 
-          background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23C48F3A" width="1em" height="1em" viewBox="0 0 32 32"%3E%3Cpath d="M7.738 15.936c0.025-1.433 0.607-2.82 1.616-3.843l12.093-12.093 2.815 2.815c-4.040 4.039-8.156 8.003-12.118 12.118-0.548 0.584-0.553 1.573 0.035 2.168l12.083 12.083-2.815 2.815-12.092-12.092c-1.035-1.050-1.624-2.5-1.617-3.973z"/%3E%3C/svg%3E') 50% 50% no-repeat;
643 
+          background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 100 123' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M39.678,65.45c-1.409,-2.509 -1.409,-5.581 -0,-8.09l36.13,-54.92c1.41,-2.31 5.08,-3.18 7.05,-1.74l15,7c2.22,1.39 2.78,5.14 1.37,7.46l-30.23,46.24l29.95,45.67c1.69,2.6 0.84,6.36 -0.85,7.52l-15.24,7.22c-2.25,1.45 -5.64,0.29 -7.05,-1.73l-36.13,-54.63Z' style='fill:%23#{str-replace($color-bg-secondary,'#','')};fill-rule:nonzero;'/%3E%3Cpath d='M26.466,6.617c0,-3.652 -2.965,-6.617 -6.616,-6.617l-13.233,-0c-3.652,-0 -6.617,2.965 -6.617,6.617l-0,109.266c-0,3.652 2.965,6.617 6.617,6.617l13.233,0c3.651,0 6.616,-2.965 6.616,-6.617l0,-109.266Z' style='fill:%23#{str-replace($color-bg-secondary,'#','')};'/%3E%3C/svg%3E") 50% 50% no-repeat;
754 644 
         }
755 645 
       }
756 646 
     }
... ... 
@@ -878,65 +768,68 @@ p.back,
878 768 
       }
879 769 
     }
880 770
881 
-    & > li {
882 
-      flex: 0;
883 
-      max-width: 100%;
884 
-      min-width: 0;
885 
-      margin-top: $gutter-default;
886 
-      margin-left: $gutter-default;
887 
-
888 
-      &.row_first {
889 
-        margin-top: 0;
890 
-      }
891 
-
892 
-    }
893 
-
894 
-    @for $i from 1 through 12 {
895 
-      &.cols_#{$i} > li {
896 
-        flex-basis: 100% / $i - $gutter-default;
897 
-      }
898 
-    }
899 
-
900 
-    @media screen and (max-width: 900px) {
901 
-      $gutter: floor((1 / 900) * 1000000) / 1000000 * 30 * 100%;
902 
-      margin-left: -#{$gutter};
771 
+    :not(.-variable-grid)& {
903 772
904 773 
       & > li {
905 
-        margin-top: $gutter;
906 
-        margin-left: $gutter;
774 
+        flex: 0;
775 
+        max-width: 100%;
776 
+        min-width: 0;
777 
+        margin-top: $gutter-default;
778 
+        margin-left: $gutter-default;
907 779
908 780 
         &.row_first {
909 781 
           margin-top: 0;
910 782 
         }
783 
+
911 784 
       }
912 785
913 786 
       @for $i from 1 through 12 {
914 787 
         &.cols_#{$i} > li {
915 
-          flex-basis: 100% / $i - $gutter;
788 
+          flex-basis: 100% / $i - $gutter-default;
916 789 
         }
917 790 
       }
918 
-    }
919 791
920 
-    @media screen and (max-width: 599px) {
921 
-      $gutter: floor((1 / 599) * 1000000) / 1000000 * 30 * 100%;
922 
-      margin-left: -#{$gutter};
792 
+      @media screen and (max-width: 900px) {
793 
+        $gutter: floor((1 / 900) * 1000000) / 1000000 * 30 * 100%;
794 
+        margin-left: -#{$gutter};
923 795
924 
-      & > li {
925 
-        margin-top: $gutter;
926 
-        margin-left: $gutter;
927 
-
928 
-        &.row_first {
796 
+        & > li {
929 797 
           margin-top: $gutter;
798 
+          margin-left: $gutter;
799 
+
800 
+          &.row_first {
801 
+            margin-top: 0;
802 
+          }
930 803 
         }
931 804
932 
-        &:first-child {
933 
-          margin-top: 0;
805 
+        @for $i from 1 through 12 {
806 
+          &.cols_#{$i} > li {
807 
+            flex-basis: 100% / $i - $gutter;
808 
+          }
934 809 
         }
935 810 
       }
936 811
937 
-      @for $i from 1 through 12 {
938 
-        &.cols_#{$i} > li {
939 
-          flex-basis: 100% - $gutter;
812 
+      @media screen and (max-width: 599px) {
813 
+        $gutter: floor((1 / 599) * 1000000) / 1000000 * 30 * 100%;
814 
+        margin-left: -#{$gutter};
815 
+
816 
+        & > li {
817 
+          margin-top: $gutter;
818 
+          margin-left: $gutter;
819 
+
820 
+          &.row_first {
821 
+            margin-top: $gutter;
822 
+          }
823 
+
824 
+          &:first-child {
825 
+            margin-top: 0;
826 
+          }
827 
+        }
828 
+
829 
+        @for $i from 1 through 12 {
830 
+          &.cols_#{$i} > li {
831 
+            flex-basis: 100% - $gutter;
832 
+          }
940 833 
         }
941 834 
       }
942 835 
     }
... ... 
@@ -945,7 +838,7 @@ p.back,
945 838
946 839 
 .ce_form {
947 840 
   position: relative;
948 
-  padding: 0 12.5%;
841 
+  //padding: 0 12.5%;
949 842 
   -webkit-box-sizing: border-box;
950 843 
   -moz-box-sizing: border-box;
951 844 
   box-sizing: border-box;
... ... 
@@ -1053,12 +946,16 @@ p.info {
1053 946 
   display: flex;
1054 947 
   align-items: center;
1055 948
1056 
-  @if $horizontal == center  {
949 
+  @if $horizontal == center {
1057 950 
     justify-content: center;
1058 951 
   } @else if $horizontal == left {
1059 952 
     justify-content: flex-start;
1060 953 
   } @else if $horizontal == right {
1061 954 
     justify-content: flex-end;
955 
+  } @else if $horizontal == centerright {
956 
+    justify-content: center;
957 
+  } @else if $horizontal == centerleft {
958 
+    justify-content: center;
1062 959 
   }
1063 960
1064 961 
   > * {
... ... 
@@ -1069,15 +966,94 @@ p.info {
1069 966 
       align-self: center;
1070 967 
     } @else if $vertical == top {
1071 968 
       align-self: flex-start;
969 
+    } @else if $vertical == bottomtop {
970 
+      align-self: flex-start;
971 
+      //@include transform(translateY(100%));
972 
+      padding-top: 1.5rem;
1072 973 
     } @else if $vertical == topmiddle {
1073 974 
       align-self: center;
975 
+      padding-bottom: 1.5rem;
1074 976 
       @include transform(translateY(-100%));
1075 977 
     } @else if $vertical == bottommiddle {
1076 978 
       align-self: center;
979 
+      padding-top: 1.5rem;
1077 980 
       @include transform(translateY(100%));
981 
+    } @else if $vertical == topbottom {
982 
+      align-self: flex-end;
983 
+      padding-bottom: 1.5rem;
984 
+      //@include transform(translateY(-100%));
1078 985 
     } @else if $vertical == bottom {
1079 986 
       align-self: flex-end;
1080 987 
     }
988 
+
989 
+    @if $horizontal == centerright {
990 
+      @if $vertical == topmiddle {
991 
+        @include transform(translate(100%,-100%));
992 
+      } @elseif $vertical == bottommiddle {
993 
+        @include transform(translate(100%,100%));
994 
+      } @else {
995 
+        @include transform(translateX(100%));
996 
+      }
997 
+    } @else if $horizontal == centerleft {
998 
+      @if $vertical == topmiddle or $vertical == topbottom {
999 
+        @include transform(translate(-100%,-100%));
1000 
+      } @elseif $vertical == bottommiddle or $vertical == bottomtop {
1001 
+        @include transform(translate(-100%,100%));
1002 
+      } @else {
1003 
+        @include transform(translateX(-100%));
1004 
+      }
1005 
+    }
1006 
+  }
1007 
+
1008 
+  @include for-tablet {
1009 
+    > * {
1010 
+      @if $horizontal == centerright {
1011 
+        @if $vertical == topmiddle {
1012 
+          @include transform(translate(30vw,-100%));
1013 
+        } @elseif $vertical == bottommiddle {
1014 
+          @include transform(translate(30vw,100%));
1015 
+        } @else {
1016 
+          @include transform(translateX(30vw));
1017 
+        }
1018 
+        margin-left: -25vw;
1019 
+      } @else if $horizontal == centerleft {
1020 
+        @if $vertical == topmiddle or $vertical == topbottom {
1021 
+          @include transform(translate(-30vw,-100%));
1022 
+        } @elseif $vertical == bottommiddle or $vertical == bottomtop {
1023 
+          @include transform(translate(-30vw,100%));
1024 
+        } @else {
1025 
+          @include transform(translateX(-30vw));
1026 
+        }
1027 
+        margin-right: -25vw;
1028 
+      }
1029 
+    }
1030 
+  }
1031 
+
1032 
+  @include for-max-size(1230px) {
1033 
+    -webkit-box-sizing: border-box;
1034 
+    -moz-box-sizing: border-box;
1035 
+    box-sizing: border-box;
1036 
+    padding-left: 15px;
1037 
+    padding-right: 15px;
1038 
+  }
1039 
+
1040 
+  @include for-max-size(399px)
1041 
+  {
1042 
+    justify-content: center;
1043 
+    > * {
1044 
+      @if $vertical == bottomtop {
1045 
+        @include transform(translateY(100%));
1046 
+      } @else if $vertical == topmiddle {
1047 
+        @include transform(translateY(-100%));
1048 
+      } @else if $vertical == bottommiddle {
1049 
+        @include transform(translateY(100%));
1050 
+      } @else if $vertical == topbottom {
1051 
+        @include transform(translateY(-100%));
1052 
+      } @else {
1053 
+        @include transform(none);
1054 
+      }
1055 
+      margin: 0;
1056 
+    }
1081 1057 
   }
1082 1058 
 }
1083 1059
... ... 
@@ -1106,3 +1082,44 @@ p.info {
1106 1082 
 .color-white {
1107 1083 
   color: $color-text-invert;
1108 1084 
 }
1085 
+
1086 
+/**
1087 
+ * EYE-CATCHER
1088 
+ */
1089 
+
1090 
+.eye-catcher {
1091 
+  background-color: $color-bg-secondary;
1092 
+  color: $color-text-invert;
1093 
+  padding: 15px;
1094 
+  @include font-alt;
1095 
+  line-height: 1.2;
1096 
+  font-size: font-size(24px);
1097 
+
1098 
+  &.floating {
1099 
+    @include box-shadow(2px 2px 5px 0 rgba(0,0,0,0.7))
1100 
+  }
1101 
+
1102 
+  &.round {
1103 
+    @include aspect-ratio(1,1,true);
1104 
+    @include border-radius(9999em);
1105 
+    border: 6px $color-text-invert solid;
1106 
+    text-align: center;
1107 
+    display: flex;
1108 
+    align-items: center;
1109 
+    justify-content: center;
1110 
+  }
1111 
+
1112 
+  &[class*="right middle positioned"] {
1113 
+    position: absolute;
1114 
+    right: 0;
1115 
+    top: 50%;
1116 
+    @include transform(translateY(-50%));
1117 
+  }
1118 
+
1119 
+  .content {
1120 
+    span {
1121 
+      font-size: 80%;
1122 
+    }
1123 
+  }
1124 
+
1125 
+}
Browse code

Progress

Benjamin Roth authored on14/12/2022 15:59:06
Showing1 changed files
files/themes/aldegott_2022/assets/css/inc/common.scss
History View file @f03cbe1
... ... 
@@ -522,6 +522,24 @@ ol {
522 522 
       font-weight: 700;
523 523 
       font-family: $font-family-alternate;
524 524 
       letter-spacing: 0.05em;
525 
+
526 
+      &.-underlined,
527 
+      .-underlined& {
528 
+        padding-bottom: 0.3em;
529 
+        position: relative;
530 
+        &:after {
531 
+          position: absolute;
532 
+          left: 0.8em;
533 
+          right: 0;
534 
+          height: 0;
535 
+          @include border-radius(99em);
536 
+          border-color: currentColor;
537 
+          content: "";
538 
+          bottom: -0.15em;
539 
+          border-bottom-width: 10px;
540 
+          border-bottom-style: solid;
541 
+        }
542 
+      }
525 543 
     }
526 544 
     /*&.-ico-dl {
527 545 
       &:before {
... ... 
@@ -1085,3 +1103,6 @@ p.info {
1085 1103 
 .color-brown {
1086 1104 
   color: $color-bg-primary;
1087 1105 
 }
1106 
+.color-white {
1107 
+  color: $color-text-invert;
1108 
+}
Browse code

Progress live

Benjamin Roth authored on14/12/2022 13:32:50
Showing1 changed files
files/themes/aldegott_2022/assets/css/inc/common.scss
History View file @f030173
... ... 
@@ -481,14 +481,16 @@ ol {
481 481 
 }
482 482
483 483 
 .ce_text,
484 
-.hero-wrapper {
484 
+.hero-wrapper,
485 
+.ce_hyperlink {
485 486 
   ul,ol {
486 487 
     @extend .list;
487 488 
   }
488 489
489 490 
   a:not(.button) {
490 491 
     &[target="_blank"]:not(.-ico-dl),
491 
-    &.-emphasised-block:not(.-ico-dl) {
492 
+    &.-emphasised-block:not(.-ico-dl),
493 
+    .-emphasised-block& {
492 494 
       &:before {
493 495 
         content: '';
494 496 
         width: .5em;
... ... 
@@ -513,8 +515,9 @@ ol {
513 515 
         }
514 516 
       }
515 517 
     }
516 
-    &.-emphasised-block {
517 
-      font-size: 1.25em;
518 
+    &.-emphasised-block,
519 
+    .-emphasised-block& {
520 
+      font-size: font-size(25px);
518 521 
       text-transform: uppercase;
519 522 
       font-weight: 700;
520 523 
       font-family: $font-family-alternate;
Browse code

Progress

Benjamin Roth authored on14/12/2022 00:09:31
Showing1 changed files
files/themes/aldegott_2022/assets/css/inc/common.scss
History View file @bd9ee9a
... ... 
@@ -1072,3 +1072,13 @@ p.info {
1072 1072 
   letter-spacing: 0.05em;
1073 1073 
   color: $color-bg-secondary;
1074 1074 
 }
1075 
+
1076 
+.color-default {
1077 
+  color: $color-text;
1078 
+}
1079 
+.color-platin {
1080 
+  color: $color-bg-secondary;
1081 
+}
1082 
+.color-brown {
1083 
+  color: $color-bg-primary;
1084 
+}
Browse code

Progress

Benjamin Roth authored on12/12/2022 00:17:47
Showing1 changed files
files/themes/aldegott_2022/assets/css/inc/common.scss
History View file @fe1cbe6
... ... 
@@ -817,6 +817,14 @@ p.back,
817 817 
       justify-content: center;
818 818 
     }
819 819
820 
+    .-flex-inline& {
821 
+      display: inline-flex;
822 
+    }
823 
+
824 
+    .-valign-center& {
825 
+      align-items: center;
826 
+    }
827 
+
820 828 
     .-variable-grid& {
821 829 
       margin-left: 0;
822 830 
       align-items: stretch;
... ... 
@@ -1063,4 +1071,4 @@ p.info {
1063 1071 
   font-family: $font-family-alternate;
1064 1072 
   letter-spacing: 0.05em;
1065 1073 
   color: $color-bg-secondary;
1066 
-}
1067 1074 
\ No newline at end of file
1075 
+}
Browse code

Remote Progress

Benjamin Roth authored on21/11/2022 12:28:49
Showing1 changed files
files/themes/aldegott_2022/assets/css/inc/common.scss
History View file @7a03ca5
... ... 
@@ -480,13 +480,15 @@ ol {
480 480 
   }
481 481 
 }
482 482
483 
-.ce_text {
483 
+.ce_text,
484 
+.hero-wrapper {
484 485 
   ul,ol {
485 486 
     @extend .list;
486 487 
   }
487 488
488 489 
   a:not(.button) {
489 
-    &[target="_blank"]:not(.-ico-dl) {
490 
+    &[target="_blank"]:not(.-ico-dl),
491 
+    &.-emphasised-block:not(.-ico-dl) {
490 492 
       &:before {
491 493 
         content: '';
492 494 
         width: .5em;
... ... 
@@ -494,6 +496,7 @@ ol {
494 496 
         display: inline-block;
495 497 
         position: relative;
496 498 
         background: $color-link;
499 
+        background: currentColor;
497 500 
         -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 62 123' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M60.32,65.45c1.409,-2.509 1.409,-5.581 0,-8.09l-36.13,-54.92c-1.41,-2.31 -5.08,-3.18 -7.05,-1.74l-15,7c-2.22,1.39 -2.78,5.14 -1.37,7.46l30.23,46.24l-29.95,45.67c-1.69,2.6 -0.84,6.36 0.85,7.52l15.24,7.22c2.25,1.45 5.64,0.29 7.05,-1.73l36.13,-54.63Z' style='fill:%23#{str-replace($color-bg-secondary,'#','')};fill-rule:nonzero;'/%3E%3C/svg%3E");
498 501 
         mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 62 123' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M60.32,65.45c1.409,-2.509 1.409,-5.581 0,-8.09l-36.13,-54.92c-1.41,-2.31 -5.08,-3.18 -7.05,-1.74l-15,7c-2.22,1.39 -2.78,5.14 -1.37,7.46l30.23,46.24l-29.95,45.67c-1.69,2.6 -0.84,6.36 0.85,7.52l15.24,7.22c2.25,1.45 5.64,0.29 7.05,-1.73l36.13,-54.63Z' style='fill:%23#{str-replace($color-bg-secondary,'#','')};fill-rule:nonzero;'/%3E%3C/svg%3E");
499 502 
         -webkit-mask-repeat: no-repeat;
... ... 
@@ -1048,3 +1051,16 @@ p.info {
1048 1051 
     }
1049 1052 
   }
1050 1053 
 }
1054 
+
1055 
+/**
1056 
+ * Custom Formats
1057 
+ */
1058 
+
1059 
+.emphasised {
1060 
+  font-size: 1.125em;
1061 
+  text-transform: uppercase;
1062 
+  font-weight: 700;
1063 
+  font-family: $font-family-alternate;
1064 
+  letter-spacing: 0.05em;
1065 
+  color: $color-bg-secondary;
1066 
+}
1051 1067 
\ No newline at end of file
Browse code

Progress

Benjamin Roth authored on17/11/2022 20:40:21
Showing1 changed files
files/themes/aldegott_2022/assets/css/inc/common.scss
History View file @f1373af
... ... 
@@ -1004,6 +1004,15 @@ p.info {
1004 1004 
   }
1005 1005 
 }
1006 1006
1007 
+@keyframes underlineAnimation {
1008 
+  0% {
1009 
+    width: 0;
1010 
+  }
1011 
+  100% {
1012 
+    width: 100%;
1013 
+  }
1014 
+}
1015 
+
1007 1016 
 /**
1008 1017 
  * Text Positioning
1009 1018 
  */
Browse code

Progress

Benjamin Roth authored on17/11/2022 19:43:56
Showing1 changed files
files/themes/aldegott_2022/assets/css/inc/common.scss
History View file @ee8f8ad
... ... 
@@ -1008,11 +1008,34 @@ p.info {
1008 1008 
  * Text Positioning
1009 1009 
  */
1010 1010
1011 
-@mixin text-position-wrapper {
1011 
+@mixin text-position-wrapper($horizontal: center, $vertical: middle) {
1012 1012 
   display: flex;
1013 1013 
   align-items: center;
1014 
-  justify-content: center;
1015 
-}
1016 
-@mixin text-position($horizontal: 'center', $vertical: 'middle') {
1017 
-  @if($horizontal = '')
1014 
+
1015 
+  @if $horizontal == center  {
1016 
+    justify-content: center;
1017 
+  } @else if $horizontal == left {
1018 
+    justify-content: flex-start;
1019 
+  } @else if $horizontal == right {
1020 
+    justify-content: flex-end;
1021 
+  }
1022 
+
1023 
+  > * {
1024 
+    max-width: 100%;
1025 
+    //display: block;
1026 
+
1027 
+    @if $vertical == middle  {
1028 
+      align-self: center;
1029 
+    } @else if $vertical == top {
1030 
+      align-self: flex-start;
1031 
+    } @else if $vertical == topmiddle {
1032 
+      align-self: center;
1033 
+      @include transform(translateY(-100%));
1034 
+    } @else if $vertical == bottommiddle {
1035 
+      align-self: center;
1036 
+      @include transform(translateY(100%));
1037 
+    } @else if $vertical == bottom {
1038 
+      align-self: flex-end;
1039 
+    }
1040 
+  }
1018 1041 
 }
Browse code

Remote Progress

Benjamin Roth authored on17/11/2022 13:24:16
Showing1 changed files
files/themes/aldegott_2022/assets/css/inc/common.scss
History View file @8f2f8db
... ... 
@@ -1002,4 +1002,17 @@ p.info {
1002 1002 
     opacity: 0;
1003 1003 
     @include transform(translateX(0) scale(1));
1004 1004 
   }
1005 
-}
1006 1005 
\ No newline at end of file
1006 
+}
1007 
+
1008 
+/**
1009 
+ * Text Positioning
1010 
+ */
1011 
+
1012 
+@mixin text-position-wrapper {
1013 
+  display: flex;
1014 
+  align-items: center;
1015 
+  justify-content: center;
1016 
+}
1017 
+@mixin text-position($horizontal: 'center', $vertical: 'middle') {
1018 
+  @if($horizontal = '')
1019 
+}
Browse code

Progress

Benjamin Roth authored on15/11/2022 15:35:41
Showing1 changed files
files/themes/aldegott_2022/assets/css/inc/common.scss
History View file @39e3ec0
... ... 
@@ -937,4 +937,69 @@ p.info {
937 937
938 938 
 .modal-content {
939 939 
   display: none;
940 
+}
941 
+
942 
+@-webkit-keyframes swiperNextAnimation {
943 
+  0% {
944 
+    opacity: 1;
945 
+    @include transform(translateX(0));
946 
+  }
947 
+  50% {
948 
+    opacity: .5;
949 
+    @include transform(scale(0.75));
950 
+  }
951 
+  100% {
952 
+    opacity: 1;
953 
+    @include transform(translateX(0) scale(1));
954 
+  }
955 
+}
956 
+@keyframes swiperNextAnimation {
957 
+  0% {
958 
+    opacity: 1;
959 
+    @include transform(translateX(0));
960 
+  }
961 
+  50% {
962 
+    opacity: .5;
963 
+    @include transform(scale(0.75));
964 
+  }
965 
+  100% {
966 
+    opacity: 1;
967 
+    @include transform(translateX(0) scale(1));
968 
+  }
969 
+}
970 
+@-webkit-keyframes swiperPrevAnimation {
971 
+  0% {
972 
+    opacity: 0;
973 
+    @include transform(translateX(0));
974 
+  }
975 
+  45% {
976 
+    opacity: .7;
977 
+    @include transform(scale(0.75));
978 
+  }
979 
+  90% {
980 
+    opacity: 0;
981 
+    @include transform(scale(0.75));
982 
+  }
983 
+  100% {
984 
+    opacity: 0;
985 
+    @include transform(translateX(0) scale(1));
986 
+  }
987 
+}
988 
+@keyframes swiperPrevAnimation {
989 
+  0% {
990 
+    opacity: 0;
991 
+    @include transform(translateX(0));
992 
+  }
993 
+  45% {
994 
+    opacity: .7;
995 
+    @include transform(scale(0.75));
996 
+  }
997 
+  90% {
998 
+    opacity: 0;
999 
+    @include transform(scale(0.75));
1000 
+  }
1001 
+  100% {
1002 
+    opacity: 0;
1003 
+    @include transform(translateX(0) scale(1));
1004 
+  }
940 1005 
 }
941 1006 
\ No newline at end of file
Browse code

Progress

Benjamin Roth authored on07/11/2022 18:15:35
Showing1 changed files
files/themes/aldegott_2022/assets/css/inc/common.scss
History View file @6f8cc39
... ... 
@@ -511,9 +511,11 @@ ol {
511 511 
       }
512 512 
     }
513 513 
     &.-emphasised-block {
514 
-      font-size: 1.5em;
514 
+      font-size: 1.25em;
515 515 
       text-transform: uppercase;
516 516 
       font-weight: 700;
517 
+      font-family: $font-family-alternate;
518 
+      letter-spacing: 0.05em;
517 519 
     }
518 520 
     /*&.-ico-dl {
519 521 
       &:before {
... ... 
@@ -800,76 +802,110 @@ p.back,
800 802 
 /**
801 803 
  * Gallery
802 804 
  */
803 
-.ce_gallery  ul {
804 
-  display: flex;
805 
-  align-items: flex-start;
806 
-  flex-wrap: wrap;
807 
-  margin-left: -#{$gutter-default};
805 
+.ce_gallery {
806 
+  ul {
807 
+    display: flex;
808 
+    align-items: flex-start;
809 
+    flex-wrap: wrap;
810 
+    margin-left: -#{$gutter-default};
808 811
809 
-  .-centered& {
810 
-    align-items: center;
811 
-    justify-content: center;
812 
-  }
812 
+    .-centered& {
813 
+      align-items: center;
814 
+      justify-content: center;
815 
+    }
813 816
814 
-  & > li {
815 
-    flex: 0;
816 
-    max-width: 100%;
817 
-    min-width: 0;
818 
-    margin-top: $gutter-default;
819 
-    margin-left: $gutter-default;
817 
+    .-variable-grid& {
818 
+      margin-left: 0;
819 
+      align-items: stretch;
820 
+      flex-wrap: nowrap;
820 821
821 
-    &.row_first {
822 
-      margin-top: 0;
823 
-    }
822 
+      > li {
823 
+        margin-left: 0;
824 
+        flex-grow: 1;
825 
+        background-color: $color-bg-lightgrey;
826 
+        height: 25vw;
827 
+        max-height: 600px;
828 
+      }
824 829
825 
-  }
830 
+      @for $i from 1 through 12 {
831 
+        &.cols_#{$i} > li {
832 
+          flex-basis: auto;
833 
+        }
834 
+      }
826 835
827 
-  @for $i from 1 through 12 {
828 
-    &.cols_#{$i} > li {
829 
-      flex-basis: 100% / $i - $gutter-default;
836 
+      figure {
837 
+        display: inline;
838 
+      }
839 
+      img {
840 
+        max-height: 600px;
841 
+        height: 25vw;
842 
+        object-fit: cover;
843 
+        max-width: 100%;
844 
+        min-width: 100%;
845 
+        vertical-align: bottom;
846 
+      }
830 847 
     }
831 
-  }
832 
-
833 
-  @media screen and (max-width: 900px) {
834 
-    $gutter: floor((1 / 900) * 1000000) / 1000000 * 30 * 100%;
835 
-    margin-left: -#{$gutter};
836 848
837 849 
     & > li {
838 
-      margin-top: $gutter;
839 
-      margin-left: $gutter;
850 
+      flex: 0;
851 
+      max-width: 100%;
852 
+      min-width: 0;
853 
+      margin-top: $gutter-default;
854 
+      margin-left: $gutter-default;
840 855
841 856 
       &.row_first {
842 857 
         margin-top: 0;
843 858 
       }
859 
+
844 860 
     }
845 861
846 862 
     @for $i from 1 through 12 {
847 863 
       &.cols_#{$i} > li {
848 
-        flex-basis: 100% / $i - $gutter;
864 
+        flex-basis: 100% / $i - $gutter-default;
849 865 
       }
850 866 
     }
851 
-  }
852 
-
853 
-  @media screen and (max-width: 599px) {
854 
-    $gutter: floor((1 / 599) * 1000000) / 1000000 * 30 * 100%;
855 
-    margin-left: -#{$gutter};
856 867
857 
-    & > li {
858 
-      margin-top: $gutter;
859 
-      margin-left: $gutter;
868 
+    @media screen and (max-width: 900px) {
869 
+      $gutter: floor((1 / 900) * 1000000) / 1000000 * 30 * 100%;
870 
+      margin-left: -#{$gutter};
860 871
861 
-      &.row_first {
872 
+      & > li {
862 873 
         margin-top: $gutter;
874 
+        margin-left: $gutter;
875 
+
876 
+        &.row_first {
877 
+          margin-top: 0;
878 
+        }
863 879 
       }
864 880
865 
-      &:first-child {
866 
-        margin-top: 0;
881 
+      @for $i from 1 through 12 {
882 
+        &.cols_#{$i} > li {
883 
+          flex-basis: 100% / $i - $gutter;
884 
+        }
867 885 
       }
868 886 
     }
869 887
870 
-    @for $i from 1 through 12 {
871 
-      &.cols_#{$i} > li {
872 
-        flex-basis: 100% - $gutter;
888 
+    @media screen and (max-width: 599px) {
889 
+      $gutter: floor((1 / 599) * 1000000) / 1000000 * 30 * 100%;
890 
+      margin-left: -#{$gutter};
891 
+
892 
+      & > li {
893 
+        margin-top: $gutter;
894 
+        margin-left: $gutter;
895 
+
896 
+        &.row_first {
897 
+          margin-top: $gutter;
898 
+        }
899 
+
900 
+        &:first-child {
901 
+          margin-top: 0;
902 
+        }
903 
+      }
904 
+
905 
+      @for $i from 1 through 12 {
906 
+        &.cols_#{$i} > li {
907 
+          flex-basis: 100% - $gutter;
908 
+        }
873 909 
       }
874 910 
     }
875 911 
   }
Browse code

Initial commit

Benjamin Roth authored on07/11/2022 09:19:06
Showing1 changed files
files/themes/aldegott_2022/assets/css/inc/common.scss
History View file @6e83285
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,904 @@
1 
+@if not-imported("import_once_func") { @import "import_once_func"; }
2 
+@if not-imported("framework") { @import "framework"; }
3 
+
4 
+.content-wrapper {
5 
+  @include centered-1200;
6 
+  @include box-sizing(border-box);
7 
+}
8 
+
9 
+.video_container {
10 
+  video {
11 
+    vertical-align: middle;
12 
+  }
13 
+
14 
+  .responsive {
15 
+    overflow: hidden;
16 
+    position: relative;
17 
+
18 
+    video {
19 
+      max-width:100%;
20 
+      height:auto;
21 
+      left: 0;
22 
+      position: absolute;
23 
+      top: 0;
24 
+    }
25 
+
26 
+    iframe {
27 
+      border: 0;
28 
+      height: 100%;
29 
+      left: 0;
30 
+      position: absolute;
31 
+      top: 0;
32 
+      width: 100%;
33 
+    }
34 
+
35 
+    &.ratio-169 {
36 
+      padding-top: 56.25%;
37 
+    }
38 
+    &.ratio-1610 {
39 
+      padding-top: 62.5%;
40 
+    }
41 
+    &.ratio-219 {
42 
+      padding-top: 42.85%;
43 
+    }
44 
+    &.ratio-43 {
45 
+      padding-top: 75%;
46 
+    }
47 
+    &.ratio-32 {
48 
+      padding-top: 66.66%;
49 
+    }
50 
+  }
51 
+}
52 
+
53 
+.image_container {
54 
+
55 
+  &,
56 
+  picture {
57 
+    overflow: hidden;
58 
+  }
59 
+
60 
+  img {
61 
+    vertical-align: middle;
62 
+  }
63 
+
64 
+  a {
65 
+    display: inline-block;
66 
+    vertical-align: bottom;
67 
+    overflow: hidden;
68 
+    position: relative;
69 
+
70 
+    &:before/*,
71 
+    &:after*/ {
72 
+      -webkit-transition: all 0.25s;
73 
+      -moz-transition: all 0.25s;
74 
+      -ms-transition: all 0.25s;
75 
+      -o-transition: all 0.25s;
76 
+      transition: all 0.25s;
77 
+    }
78 
+
79 
+    &:before {
80 
+      //background: rgba(255, 255, 255, 0.25) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.821 26.973l-9.492-9.249c1.182-1.802 1.874-3.953 1.874-6.268 0-6.327-5.128-11.455-11.455-11.455s-11.454 5.128-11.454 11.455c0 6.326 5.128 11.454 11.454 11.454 1.88 0 3.649-0.462 5.213-1.263l9.771 9.521c0.569 0.555 1.307 0.832 2.044 0.832 0.763 0 1.524-0.296 2.098-0.886 1.129-1.158 1.106-3.013-0.053-4.142zM19.256 11.455c0 1.783-0.625 3.418-1.662 4.705-0.528 0.655-1.164 1.215-1.88 1.661-1.152 0.718-2.507 1.14-3.966 1.14-4.146 0-7.507-3.361-7.507-7.507s3.361-7.508 7.507-7.508c4.147 0 7.508 3.361 7.508 7.508z"></svg>');
81 
+      background: rgba(255, 255, 255, 0.25) url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23323535" width="1.5em" height="1.5em" viewBox="0 0 32 32"%3E%3Cpath d="M30.821 26.973l-9.492-9.249c1.182-1.802 1.874-3.953 1.874-6.268 0-6.327-5.128-11.455-11.455-11.455s-11.454 5.128-11.454 11.455c0 6.326 5.128 11.454 11.454 11.454 1.88 0 3.649-0.462 5.213-1.263l9.771 9.521c0.569 0.555 1.307 0.832 2.044 0.832 0.763 0 1.524-0.296 2.098-0.886 1.129-1.158 1.106-3.013-0.053-4.142zM19.256 11.455c0 1.783-0.625 3.418-1.662 4.705-0.528 0.655-1.164 1.215-1.88 1.661-1.152 0.718-2.507 1.14-3.966 1.14-4.146 0-7.507-3.361-7.507-7.507s3.361-7.508 7.507-7.508c4.147 0 7.508 3.361 7.508 7.508z"/%3E%3C/svg%3E') 50% 50% no-repeat;
82 
+      position: absolute;
83 
+      top: 0;
84 
+      bottom: 0;
85 
+      left: 0;
86 
+      right: 0;
87 
+      visibility: hidden;
88 
+      opacity: 0;
89 
+      content: '';
90 
+    }
91 
+    /*&:after {
92 
+      @include icon('\e906',26px);
93 
+      position: absolute;
94 
+      left: 50%;
95 
+      top: 50%;
96 
+      visibility: hidden;
97 
+      opacity: 0;
98 
+      margin: -13px 0 0 -13px;
99 
+      color: rgba(0, 0, 0, 0.75);
100 
+      -webkit-transform: scale3d(0.5,0.5,1);
101 
+      -moz-transform: scale3d(0.5,0.5,1);
102 
+      -ms-transform: scale3d(0.5,0.5,1);
103 
+      -o-transform: scale3d(0.5,0.5,1);
104 
+      transform: scale3d(0.5,0.5,1);
105 
+    }*/
106 
+
107 
+    &:hover {
108 
+      &:before/*,
109 
+      &:after*/ {
110 
+        opacity: 1;
111 
+        visibility: visible;
112 
+      }
113 
+
114 
+      /*&:after {
115 
+        -webkit-transform: scale3d(1,1,1);
116 
+        -moz-transform: scale3d(1,1,1);
117 
+        -ms-transform: scale3d(1,1,1);
118 
+        -o-transform: scale3d(1,1,1);
119 
+        transform: scale3d(1,1,1);
120 
+      }*/
121 
+    }
122 
+  }
123 
+
124 
+  figcaption {
125 
+    padding: 5px 0 0;
126 
+    font-size: font-size(13px);
127 
+    color: $color-text-breadcrumb;
128 
+    line-height: 1.3;
129 
+  }
130 
+
131 
+  &.float_right {
132 
+    float: right;
133 
+    margin: 0 0 $gutter-default $gutter-default;
134 
+  }
135 
+
136 
+  &.float_left {
137 
+    float: left;
138 
+    margin: 0 $gutter-default $gutter-default 0;
139 
+  }
140 
+
141 
+  @media screen and (max-width: 599px) {
142 
+    &.float_right {
143 
+      float: none;
144 
+      margin: 0 0 $gutter-default;
145 
+    }
146 
+
147 
+    &.float_left {
148 
+      float: none;
149 
+      margin: 0 0 $gutter-default;
150 
+    }
151 
+  }
152 
+}
153 
+
154 
+.embed-wrapper {
155 
+  position: relative;
156 
+  .embed-arrow {
157 
+    z-index: 2;
158 
+    background-color: $color-bg-tertiary;
159 
+    color: $color-text-invert;
160 
+
161 
+    position: absolute;
162 
+    left: 0;
163 
+    top: 0;
164 
+    bottom: 0;
165 
+    right: 60%;
166 
+    right: calc(50% + 250px);
167 
+
168 
+    @include for-max-size(1200px) {
169 
+      right: auto;
170 
+      width: 250px;
171 
+    }
172 
+
173 
+    &:before {
174 
+      position: absolute;
175 
+      top:0;
176 
+      bottom: 0;
177 
+      left: 100%;
178 
+      width: 50px;
179 
+      content: '';
180 
+      background: url('data:image/svg+xml; charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%22100%22%20fill%3D%22%23000000%22%20viewBox%3D%220%200%2010%20100%22%20preserveAspectRatio%3D%22none%22%20%3E%3Cpath%20d%3D%22M0%2C0%20L0%2C100%20L10%2C50z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat 100% 50%;
181 
+      -webkit-background-size: 100% 100%;
182 
+      background-size: 100% 100%;
183 
+    }
184 
+
185 
+    + .embed-map {
186 
+      right: 0;
187 
+      left: 40%;
188 
+      left: calc(50% - 250px);
189 
+      width: auto;
190 
+
191 
+      @include for-max-size(1200px) {
192 
+        left: 0;
193 
+        padding-left: 250px;
194 
+
195 
+        iframe {
196 
+          left: 250px;
197 
+          right: 0;
198 
+          width: calc(100% - 250px);
199 
+        }
200 
+      }
201 
+    }
202 
+  }
203 
+  .embed-map {
204 
+    z-index: 1;
205 
+    position: absolute;
206 
+    left: 0;
207 
+    top: 0;
208 
+    width: 100%;
209 
+    height: 100%;
210 
+    overflow: hidden;
211 
+
212 
+    iframe {
213 
+      position: absolute;
214 
+      top: 0;
215 
+      left: 0;
216 
+      width: 100%;
217 
+      height: 100%;
218 
+    }
219 
+  }
220 
+
221 
+  .embed-arrow-inside {
222 
+    @include aspect-ratio(2,0.75,true);
223 
+    @include centered-1200;
224 
+    //z-index: 1;
225 
+    display: flex;
226 
+    align-items: center;
227 
+
228 
+    .embed-arrow-text-holder {
229 
+      display: inline-flex;
230 
+      justify-content: center;
231 
+      width: 50%;
232 
+      padding-right: 250px;
233 
+      @include box-sizing(border-box);
234 
+
235 
+      @include for-max-size(1200px) {
236 
+        width: 235px;
237 
+        padding-right: 0;
238 
+      }
239 
+    }
240 
+    .embed-arrow-text {
241 
+      z-index: 2;
242 
+      em, i {
243 
+        font-style: normal;
244 
+        color: $color-text-alt;
245 
+      }
246 
+
247 
+      & {
248 
+        color: $color-text-invert;
249 
+      }
250 
+
251 
+      h1, h2, h3, h4, h5, h6 {
252 
+        text-align: left;
253 
+        color: $color-text-alt;
254 
+
255 
+        em, i {
256 
+          color: $color-text-invert;
257 
+        }
258 
+      }
259 
+    }
260 
+  }
261 
+
262 
+  @include for-mobile {
263 
+    display: flex;
264 
+    flex-direction: column;
265 
+    .embed-arrow {
266 
+      display: none;
267 
+
268 
+      + .embed-map {
269 
+        order: 2;
270 
+        position: relative;
271 
+        padding: 0;
272 
+        @include aspect-ratio(2,1);
273 
+
274 
+        iframe {
275 
+          width: 100%;
276 
+          left: 0;
277 
+        }
278 
+      }
279 
+    }
280 
+    .embed-arrow-inside {
281 
+      width: 100%;
282 
+      justify-content: center;
283 
+      order: 1;
284 
+      background: $color-bg-tertiary;
285 
+
286 
+      .embed-arrow-text-holder {
287 
+        padding: 50px 0;
288 
+        &,
289 
+        h1,h2,h3,h4,h5,h6 {
290 
+          text-align: center;
291 
+        }
292 
+      }
293 
+    }
294 
+  }
295 
+}
296 
+
297 
+/**
298 
+ * Icon handling
299 
+ */
300 
+*[data-icon] {
301 
+  &:before {
302 
+    @include icon;
303 
+    content: attr(data-icon);
304 
+    margin-right: 0.5ex;
305 
+  }
306 
+  &.-after {
307 
+    &:before {
308 
+      content: none;
309 
+    }
310 
+    &:after {
311 
+      @include icon(attr(data-icon));
312 
+      margin-left: 0.5ex;
313 
+    }
314 
+  }
315 
+}
316 
+
317 
+.show-mobile {
318 
+  display: none;
319 
+  @include for-mobile {
320 
+    display: block;
321 
+  }
322 
+}
323 
+.show-tablet {
324 
+  display: none;
325 
+  @include for-tablet {
326 
+    display: block;
327 
+  }
328 
+}
329 
+.show-tablet-up {
330 
+  display: none;
331 
+  @include for-tablet-up {
332 
+    display: block;
333 
+  }
334 
+}
335 
+.show-desktop-up {
336 
+  display: none;
337 
+  @include for-desktop-up {
338 
+    display: block;
339 
+  }
340 
+}
341 
+
342 
+/**
343 
+ * Separator
344 
+ */
345 
+hr {
346 
+  border: none;
347 
+  border-bottom: 1px $color-stroke-grey solid;
348 
+  margin: 1.5em 0;
349 
+}
350 
+
351 
+/**
352 
+ * Lists
353 
+ */
354 
+ul,
355 
+ol {
356 
+  &.list {
357 
+    padding-top: 0.25em;
358 
+    margin-bottom: 0.75em;
359 
+
360 
+    li {
361 
+      position: relative;
362 
+      line-height: 1.3;
363 
+      padding: 0 0 0.25em 15px;
364 
+
365 
+      &:last-child {
366 
+        padding-bottom: 0;
367 
+      }
368 
+
369 
+      &:before {
370 
+        //@include icon("\e913",100%,1);
371 
+        line-height: 1;
372 
+        font-size: 100%;
373 
+        content: '\2022';
374 
+        color: $color-list-icon;
375 
+        position: absolute;
376 
+        left: 0;
377 
+        top: 0.1em;
378 
+      }
379 
+
380 
+      &[data-icon] {
381 
+        &:before {
382 
+          content: attr(data-icon);
383 
+        }
384 
+      }
385 
+    }
386 
+
387 
+    &.list-check {
388 
+      li {
389 
+        &:before {
390 
+          content: '\e98e';
391 
+        }
392 
+      }
393 
+    }
394 
+  }
395 
+
396 
+  &.attribute_list {
397 
+    -webkit-box-sizing: border-box;
398 
+    -moz-box-sizing: border-box;
399 
+    box-sizing: border-box;
400 
+
401 
+    .attribute {
402 
+      font-size: font-size(13px);
403 
+      text-transform: uppercase;
404 
+      font-weight: 600;
405 
+      line-height: 1/13*(12*1.5);
406 
+      letter-spacing: 0.1em;
407 
+      position: relative;
408 
+      padding: 0.25em 0 0.25em 140px;
409 
+      min-height: 1.5em;
410 
+
411 
+      .label {
412 
+        font-size: font-size(12px);
413 
+        text-transform: uppercase;
414 
+        font-weight: 600;
415 
+        line-height: 1.5;
416 
+        letter-spacing: 0.1em;
417 
+        color: $color-bg-quaternary;
418 
+        position: absolute;
419 
+        max-width: 130px;
420 
+        left: 0;
421 
+        top: 0.25em;
422 
+
423 
+        &:after {
424 
+          //content: ':';
425 
+        }
426 
+      }
427 
+
428 
+      @include for-mobile {
429 
+        padding-left: 0;
430 
+        margin-bottom: 0.5em;
431 
+        .label {
432 
+          position: relative;
433 
+          left: auto;
434 
+          top: auto;
435 
+          display: block;
436 
+        }
437 
+      }
438 
+
439 
+      &.rows {
440 
+        padding-left: 0;
441 
+        font-family: $font-family-alternate;
442 
+        font-size: font-size(16px);
443 
+        letter-spacing: normal;
444 
+        text-transform: none;
445 
+        line-height: 1/16*(12*1.5);
446 
+        margin-bottom: 0.5em;
447 
+
448 
+        p {
449 
+          margin-bottom: 0.5em;
450 
+        }
451 
+
452 
+        .label {
453 
+          font-family: $font-family;
454 
+          font-size: font-size(12px);
455 
+          position: relative;
456 
+          left: auto;
457 
+          top: auto;
458 
+          display: block;
459 
+        }
460 
+      }
461 
+
462 
+      &.spacing {
463 
+        margin-bottom: 1.5em;
464 
+      }
465 
+    }
466 
+  }
467 
+}
468 
+
469 
+ol {
470 
+  padding-left: 1.1em;
471 
+
472 
+  &.list {
473 
+    li {
474 
+      padding-left: 5px;
475 
+
476 
+      &:before {
477 
+        content: none;
478 
+      }
479 
+    }
480 
+  }
481 
+}
482 
+
483 
+.ce_text {
484 
+  ul,ol {
485 
+    @extend .list;
486 
+  }
487 
+
488 
+  a:not(.button) {
489 
+    &[target="_blank"]:not(.-ico-dl) {
490 
+      &:before {
491 
+        content: '';
492 
+        width: .5em;
493 
+        height: 1em;
494 
+        display: inline-block;
495 
+        position: relative;
496 
+        background: $color-link;
497 
+        -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 62 123' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M60.32,65.45c1.409,-2.509 1.409,-5.581 0,-8.09l-36.13,-54.92c-1.41,-2.31 -5.08,-3.18 -7.05,-1.74l-15,7c-2.22,1.39 -2.78,5.14 -1.37,7.46l30.23,46.24l-29.95,45.67c-1.69,2.6 -0.84,6.36 0.85,7.52l15.24,7.22c2.25,1.45 5.64,0.29 7.05,-1.73l36.13,-54.63Z' style='fill:%23#{str-replace($color-bg-secondary,'#','')};fill-rule:nonzero;'/%3E%3C/svg%3E");
498 
+        mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 62 123' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M60.32,65.45c1.409,-2.509 1.409,-5.581 0,-8.09l-36.13,-54.92c-1.41,-2.31 -5.08,-3.18 -7.05,-1.74l-15,7c-2.22,1.39 -2.78,5.14 -1.37,7.46l30.23,46.24l-29.95,45.67c-1.69,2.6 -0.84,6.36 0.85,7.52l15.24,7.22c2.25,1.45 5.64,0.29 7.05,-1.73l36.13,-54.63Z' style='fill:%23#{str-replace($color-bg-secondary,'#','')};fill-rule:nonzero;'/%3E%3C/svg%3E");
499 
+        -webkit-mask-repeat: no-repeat;
500 
+        mask-repeat: no-repeat;
501 
+        vertical-align: middle;
502 
+        margin-right: 10px;
503 
+        @include transition(all 0.2s ease);
504 
+      }
505 
+
506 
+      &:hover {
507 
+        &:before {
508 
+          background: mix($color-link,#000,80%);
509 
+          @include transform(translateX(5px));
510 
+        }
511 
+      }
512 
+    }
513 
+    &.-emphasised-block {
514 
+      font-size: 1.5em;
515 
+      text-transform: uppercase;
516 
+      font-weight: 700;
517 
+    }
518 
+    /*&.-ico-dl {
519 
+      &:before {
520 
+        @include icon('\e908');
521 
+        margin-right: 5px;
522 
+      }
523 
+    }
524 
+    &.-ico-goto {
525 
+      &:before {
526 
+        @include icon('\e90a');
527 
+        margin-right: 5px;
528 
+      }
529 
+    }*/
530 
+  }
531 
+}
532 
+
533 
+/**
534 
+ * Multi column text
535 
+ */
536 
+.ce_text {
537 
+
538 
+  &.layout_2col {
539 
+
540 
+    .text {
541 
+      -webkit-column-count: 2;
542 
+      -moz-column-count: 2;
543 
+      column-count: 2;
544 
+      -webkit-column-gap: $gutter-default;
545 
+      -moz-column-gap: $gutter-default;
546 
+      column-gap: $gutter-default;
547 
+
548 
+      p, div, ul, ol, dl {
549 
+        break-inside: avoid-column;
550 
+        break-before: auto;
551 
+      }
552 
+
553 
+      h1, h2, h3, h4, h5, h6 {
554 
+        break-inside: avoid-column;
555 
+        break-after: avoid-column;
556 
+      }
557 
+    }
558 
+
559 
+    @media screen and (max-width: 599px) {
560 
+      .text {
561 
+        -webkit-column-count: 1;
562 
+        -moz-column-count: 1;
563 
+        column-count: 1;
564 
+      }
565 
+    }
566 
+  }
567 
+}
568 
+
569 
+/**
570 
+ * Back links
571 
+ */
572 
+p.back,
573 
+.ce_hyperlink.back {
574 
+  clear: both;
575 
+  > a {
576 
+    text-transform: uppercase;
577 
+    font-size: font-size(14px);
578 
+    font-weight: 600;
579 
+    color: $color-text;
580 
+    letter-spacing: 0.1em;
581 
+
582 
+    svg {
583 
+      vertical-align: -1px;
584 
+      font-size: font-size(12px);
585 
+    }
586 
+  }
587 
+}
588 
+
589 
+/**
590 
+ * Boxes
591 
+ */
592 
+%box {
593 
+  @include box;
594 
+}
595 
+
596 
+%box-white {
597 
+  @include box-white;
598 
+}
599 
+
600 
+%box-grey {
601 
+  @include box-grey;
602 
+}
603 
+
604 
+.box {
605 
+  @extend %box;
606 
+}
607 
+
608 
+/**
609 
+ * Slider related
610 
+ */
611 
+.negate-slider-pagination {
612 
+  margin-bottom: -30px;
613 
+
614 
+  /*@media screen and (max-width: 900px) {
615 
+    &.-medium-col-1-1 {
616 
+      margin-bottom: 0;
617 
+    }
618 
+  }
619 
+  @media screen and (max-width: 599px) {
620 
+    &.-small-col-1-1 {
621 
+      margin-bottom: 0;
622 
+    }
623 
+  }*/
624 
+}
625 
+
626 
+/**
627 
+ * PAGINATION
628 
+ */
629 
+.pagination {
630 
+  @include box;
631 
+  line-height: 35px;
632 
+  display: flex;
633 
+  p {
634 
+    font-size: font-size(14px);
635 
+    float: left;
636 
+    font-weight: 600;
637 
+    letter-spacing: 0.1em;
638 
+    text-transform: uppercase;
639 
+    margin: 0 auto 0 0;
640 
+  }
641 
+
642 
+  ul {
643 
+    text-align: center;
644 
+    position: relative;
645 
+    padding: 0;
646 
+    margin: 0 0 0 auto;
647 
+  }
648 
+
649 
+  li {
650 
+    display: inline-block;
651 
+    vertical-align: middle;
652 
+    margin-bottom: 0;
653 
+
654 
+    a {
655 
+      &:hover {
656 
+        border-bottom-color: $color-bg-secondary;
657 
+        color: mix($color-link,#000,60%);
658 
+      }
659 
+    }
660 
+
661 
+    a,strong {
662 
+      font-weight: 400;
663 
+      display: block;
664 
+      min-width: 1.5em;
665 
+      height: 2em;
666 
+      line-height: 2em;
667 
+      padding: 0 0.125em;
668 
+      -webkit-box-sizing: border-box;
669 
+      -moz-box-sizing: border-box;
670 
+      box-sizing: border-box;
671 
+      border-bottom: 2px transparent solid;
672 
+      color: $color-link;
673 
+      text-align: center;
674 
+      -webkit-transition: all 0.25s;
675 
+      -moz-transition: all 0.25s;
676 
+      -ms-transition: all 0.25s;
677 
+      -o-transition: all 0.25s;
678 
+      transition: all 0.25s;
679 
+
680 
+      &.active
681 
+      {
682 
+        border-bottom-color: $color-bg-secondary;
683 
+        color: $color-text;
684 
+        font-weight: 600;
685 
+      }
686 
+
687 
+      &.next,
688 
+      &.previous,
689 
+      &.first,
690 
+      &.last {
691 
+        position: relative;
692 
+        text-indent: -9999em;
693 
+        overflow: hidden;
694 
+        //color: $color-link;
695 
+        &:before,
696 
+        &:after {
697 
+          content: '';
698 
+          width: 1em;
699 
+          height: 1em;
700 
+          position: absolute;
701 
+          left: 50%;
702 
+          top: 50%;
703 
+          @include transform(translate(-50%,-50%));
704 
+        }
705 
+      }
706 
+
707 
+      &.next {
708 
+        &:before {
709 
+          background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23C48F3A" width="1em" height="1em" viewBox="0 0 32 32"%3E%3Cpath d="M24.262 16.064c-0.025 1.433-0.607 2.82-1.616 3.843l-12.093 12.093-2.815-2.815c4.040-4.039 8.156-8.003 12.118-12.118 0.548-0.584 0.553-1.573-0.035-2.168l-12.083-12.083 2.815-2.815 12.092 12.092c1.035 1.050 1.624 2.5 1.617 3.973z"/%3E%3C/svg%3E') 50% 50% no-repeat;
710 
+        }
711 
+      }
712 
+
713 
+      &.previous {
714 
+        &:before {
715 
+          background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23C48F3A" width="1em" height="1em" viewBox="0 0 32 32"%3E%3Cpath d="M7.738 15.936c0.025-1.433 0.607-2.82 1.616-3.843l12.093-12.093 2.815 2.815c-4.040 4.039-8.156 8.003-12.118 12.118-0.548 0.584-0.553 1.573 0.035 2.168l12.083 12.083-2.815 2.815-12.092-12.092c-1.035-1.050-1.624-2.5-1.617-3.973z"/%3E%3C/svg%3E') 50% 50% no-repeat;
716 
+        }
717 
+      }
718 
+
719 
+      &.last {
720 
+        &:before {
721 
+          background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23C48F3A" width="1em" height="1em" viewBox="0 0 32 32"%3E%3Cpath d="M24.262 16.064c-0.025 1.433-0.607 2.82-1.616 3.843l-12.093 12.093-2.815-2.815c4.040-4.039 8.156-8.003 12.118-12.118 0.548-0.584 0.553-1.573-0.035-2.168l-12.083-12.083 2.815-2.815 12.092 12.092c1.035 1.050 1.624 2.5 1.617 3.973z"/%3E%3C/svg%3E') 50% 50% no-repeat;
722 
+        }
723 
+      }
724 
+
725 
+      &.first {
726 
+        &:before {
727 
+          background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23C48F3A" width="1em" height="1em" viewBox="0 0 32 32"%3E%3Cpath d="M7.738 15.936c0.025-1.433 0.607-2.82 1.616-3.843l12.093-12.093 2.815 2.815c-4.040 4.039-8.156 8.003-12.118 12.118-0.548 0.584-0.553 1.573 0.035 2.168l12.083 12.083-2.815 2.815-12.092-12.092c-1.035-1.050-1.624-2.5-1.617-3.973z"/%3E%3C/svg%3E') 50% 50% no-repeat;
728 
+        }
729 
+      }
730 
+    }
731 
+  }
732 
+}
733 
+
734 
+
735 
+/* --- CALLOUTS --- */
736 
+.callout {
737 
+  border-left: 30px solid #BBB;
738 
+  background-color: #EEE;
739 
+  padding: 15px 15px 15px 15px;
740 
+  display: block;
741 
+  position: relative;
742 
+  margin-bottom: 0.75em;
743 
+
744 
+  &.info {
745 
+    border-left-color: #fab200;
746 
+    background-color: #fff3d4;
747 
+    color: #966c00;
748 
+
749 
+  }
750 
+
751 
+  &.success {
752 
+    border-left-color: #52A256;
753 
+    background-color: #e7f3e7;
754 
+    color: #376c39;
755 
+
756 
+    &:before {
757 
+      content: "\e86c";
758 
+    }
759 
+  }
760 
+
761 
+  &.warning {
762 
+    border-left-color: #e27b41;
763 
+    background-color: #faeae0;
764 
+    color: #b6531c;
765 
+
766 
+    &:before {
767 
+      content: "\e002";
768 
+    }
769 
+  }
770 
+
771 
+  &.danger {
772 
+    border-left-color: #E84F4F;
773 
+    background-color: #fce8e8;
774 
+    color: #b91818;
775 
+
776 
+    &:before {
777 
+      content: "\e000";
778 
+    }
779 
+  }
780 
+
781 
+  &:before {
782 
+    position: absolute;
783 
+    left: -15px;
784 
+    top: 50%;
785 
+    line-height: 1;
786 
+    text-align: center;
787 
+    @include iconfont;
788 
+    font-size: font-size(20px);
789 
+    color: #fff;
790 
+    content: "\eaae";
791 
+    -webkit-transform: translate(-50%, -50%);
792 
+    -moz-transform: translate(-50%, -50%);
793 
+    -ms-transform: translate(-50%, -50%);
794 
+    -o-transform: translate(-50%, -50%);
795 
+    transform: translate(-50%, -50%);
796 
+  }
797 
+}
798 
+
799 
+
800 
+/**
801 
+ * Gallery
802 
+ */
803 
+.ce_gallery  ul {
804 
+  display: flex;
805 
+  align-items: flex-start;
806 
+  flex-wrap: wrap;
807 
+  margin-left: -#{$gutter-default};
808 
+
809 
+  .-centered& {
810 
+    align-items: center;
811 
+    justify-content: center;
812 
+  }
813 
+
814 
+  & > li {
815 
+    flex: 0;
816 
+    max-width: 100%;
817 
+    min-width: 0;
818 
+    margin-top: $gutter-default;
819 
+    margin-left: $gutter-default;
820 
+
821 
+    &.row_first {
822 
+      margin-top: 0;
823 
+    }
824 
+
825 
+  }
826 
+
827 
+  @for $i from 1 through 12 {
828 
+    &.cols_#{$i} > li {
829 
+      flex-basis: 100% / $i - $gutter-default;
830 
+    }
831 
+  }
832 
+
833 
+  @media screen and (max-width: 900px) {
834 
+    $gutter: floor((1 / 900) * 1000000) / 1000000 * 30 * 100%;
835 
+    margin-left: -#{$gutter};
836 
+
837 
+    & > li {
838 
+      margin-top: $gutter;
839 
+      margin-left: $gutter;
840 
+
841 
+      &.row_first {
842 
+        margin-top: 0;
843 
+      }
844 
+    }
845 
+
846 
+    @for $i from 1 through 12 {
847 
+      &.cols_#{$i} > li {
848 
+        flex-basis: 100% / $i - $gutter;
849 
+      }
850 
+    }
851 
+  }
852 
+
853 
+  @media screen and (max-width: 599px) {
854 
+    $gutter: floor((1 / 599) * 1000000) / 1000000 * 30 * 100%;
855 
+    margin-left: -#{$gutter};
856 
+
857 
+    & > li {
858 
+      margin-top: $gutter;
859 
+      margin-left: $gutter;
860 
+
861 
+      &.row_first {
862 
+        margin-top: $gutter;
863 
+      }
864 
+
865 
+      &:first-child {
866 
+        margin-top: 0;
867 
+      }
868 
+    }
869 
+
870 
+    @for $i from 1 through 12 {
871 
+      &.cols_#{$i} > li {
872 
+        flex-basis: 100% - $gutter;
873 
+      }
874 
+    }
875 
+  }
876 
+}
877 
+
878 
+.ce_form {
879 
+  position: relative;
880 
+  padding: 0 12.5%;
881 
+  -webkit-box-sizing: border-box;
882 
+  -moz-box-sizing: border-box;
883 
+  box-sizing: border-box;
884 
+
885 
+  @include for-tablet {
886 
+    padding: 6.25%;
887 
+  }
888 
+  @include for-mobile {
889 
+    padding: 0;
890 
+  }
891 
+}
892 
+
893 
+p.info {
894 
+  font-size: font-size(12px);
895 
+  text-transform: uppercase;
896 
+  color: $color-text-info;
897 
+  letter-spacing: 0.1em;
898 
+  line-height: 1.3;
899 
+  font-weight: 600;
900 
+}
901 
+
902 
+.modal-content {
903 
+  display: none;
904 
+}
0 905 
\ No newline at end of file