epfl-elements 4.6.1 → 4.8.0

package/dist/css/elements.css

@@ -2047,7 +2047,7 @@ mark,
   color: #212121;
   background-color: #fff;
   background-clip: padding-box;
-  border: 1px solid #d5d5d5;
+  border: 1px solid #8e8e8e;
   border-radius: 2px;
   -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
   transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
@@ -3541,7 +3541,7 @@ input[type=button].btn-block {
   text-align: center;
   white-space: nowrap;
   background-color: #d5d5d5;
-  border: 1px solid #d5d5d5;
+  border: 1px solid #8e8e8e;
   border-radius: 2px;
 }
 .input-group-text input[type=radio],
@@ -3674,7 +3674,7 @@ input[type=button].btn-block {
   pointer-events: none;
   content: "";
   background-color: #fff;
-  border: 1px solid #adb5bd;
+  border: 1px solid #8e8e8e;
 }
 .custom-control-label::after {
   position: absolute;
@@ -3731,7 +3731,7 @@ input[type=button].btn-block {
   left: calc(-3.25rem + 2px);
   width: calc(1rem - 4px);
   height: calc(1rem - 4px);
-  background-color: #adb5bd;
+  background-color: #8e8e8e;
   border-radius: 0.5rem;
   -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
@@ -3764,7 +3764,7 @@ input[type=button].btn-block {
   color: #212121;
   vertical-align: middle;
   background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23212121' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") right 0.75rem center/8px 10px no-repeat;
-  border: 1px solid #d5d5d5;
+  border: 1px solid #8e8e8e;
   border-radius: 2px;
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -3858,7 +3858,7 @@ input[type=button].btn-block {
   line-height: 1.5;
   color: #212121;
   background-color: #fff;
-  border: 1px solid #d5d5d5;
+  border: 1px solid #8e8e8e;
   border-radius: 2px;
 }
 .custom-file-label::after {
@@ -4005,19 +4005,19 @@ input[type=button].btn-block {
   border-radius: 1rem;
 }
 .custom-range:disabled::-webkit-slider-thumb {
-  background-color: #adb5bd;
+  background-color: #8e8e8e;
 }
 .custom-range:disabled::-webkit-slider-runnable-track {
   cursor: default;
 }
 .custom-range:disabled::-moz-range-thumb {
-  background-color: #adb5bd;
+  background-color: #8e8e8e;
 }
 .custom-range:disabled::-moz-range-track {
   cursor: default;
 }
 .custom-range:disabled::-ms-thumb {
-  background-color: #adb5bd;
+  background-color: #8e8e8e;
 }
 
 .custom-control-label::before,
@@ -10840,7 +10840,7 @@ a.text-dark:hover, a.text-dark:focus {
   }
   pre,
 blockquote {
-    border: 1px solid #adb5bd;
+    border: 1px solid #8e8e8e;
     page-break-inside: avoid;
   }
   tr,
@@ -11461,13 +11461,13 @@ button.bg-gray-400:focus {
 }
 
 .bg-gray-500 {
-  background-color: #adb5bd !important;
+  background-color: #8e8e8e !important;
 }
 
 a.bg-gray-500:hover, a.bg-gray-500:focus,
 button.bg-gray-500:hover,
 button.bg-gray-500:focus {
-  background-color: #919ca6 !important;
+  background-color: #757575 !important;
 }
 
 .bg-gray-600 {
@@ -11531,7 +11531,7 @@ hr {
 }
 
 .text-gray-500 {
-  color: #adb5bd !important;
+  color: #8e8e8e !important;
 }
 
 .text-gray-600 {
@@ -11817,7 +11817,7 @@ input[type=button].focus {
 
 .btn-secondary {
   background: transparent;
-  border-color: #c1c1c1;
+  border-color: #8e8e8e;
 }
 .bg-dark .btn-secondary {
   border-color: #707070;
@@ -11896,14 +11896,14 @@ a.tag:hover {
   text-decoration: none;
 }
 
-.tag {
+a.tag, button.tag, span.tag, div.tag, p.tag {
   display: inline-block;
   margin: 0 0.1em 0.3em 0;
   padding: 0.4em 0.6em;
   -webkit-text-decoration: none;
   text-decoration: none;
   background: #fff;
-  border: 1px solid #c1c1c1;
+  border: 1px solid #8e8e8e;
   font-size: inherit;
   line-height: 1;
   font-weight: 400;
@@ -11913,7 +11913,7 @@ a.tag:hover {
   transition: color 0.2s ease-in-out, background 0.2s ease-in-out, border-color 0.2s ease-in-out;
   vertical-align: middle;
 }
-.tag .remove {
+a.tag .remove, button.tag .remove, span.tag .remove, div.tag .remove, p.tag .remove {
   -webkit-text-decoration: none;
   text-decoration: none;
   float: right;
@@ -11927,39 +11927,39 @@ a.tag:hover {
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
 }
-.tag .remove:hover {
+a.tag .remove:hover, button.tag .remove:hover, span.tag .remove:hover, div.tag .remove:hover, p.tag .remove:hover {
   color: #ff0000;
 }
-.tag.tag-sm {
+a.tag.tag-sm, button.tag.tag-sm, span.tag.tag-sm, div.tag.tag-sm, p.tag.tag-sm {
   font-size: 0.75em;
 }
-.tag.tag-plain {
+a.tag.tag-plain, button.tag.tag-plain, span.tag.tag-plain, div.tag.tag-plain, p.tag.tag-plain {
   border-color: #707070;
   background: #707070;
   color: #fff;
 }
-.tag.tag-primary {
+a.tag.tag-primary, button.tag.tag-primary, span.tag.tag-primary, div.tag.tag-primary, p.tag.tag-primary {
   border-bottom: 1px solid #ff0000;
 }
-.tag.tag-secondary {
+a.tag.tag-secondary, button.tag.tag-secondary, span.tag.tag-secondary, div.tag.tag-secondary, p.tag.tag-secondary {
   border-bottom: 1px solid #212121;
 }
-.tag.tag-success {
+a.tag.tag-success, button.tag.tag-success, span.tag.tag-success, div.tag.tag-success, p.tag.tag-success {
   border-bottom: 1px solid #7ed321;
 }
-.tag.tag-info {
+a.tag.tag-info, button.tag.tag-info, span.tag.tag-info, div.tag.tag-info, p.tag.tag-info {
   border-bottom: 1px solid #4a90e2;
 }
-.tag.tag-warning {
+a.tag.tag-warning, button.tag.tag-warning, span.tag.tag-warning, div.tag.tag-warning, p.tag.tag-warning {
   border-bottom: 1px solid #f5a623;
 }
-.tag.tag-danger {
+a.tag.tag-danger, button.tag.tag-danger, span.tag.tag-danger, div.tag.tag-danger, p.tag.tag-danger {
   border-bottom: 1px solid #ff0000;
 }
-.tag.tag-light {
+a.tag.tag-light, button.tag.tag-light, span.tag.tag-light, div.tag.tag-light, p.tag.tag-light {
   border-bottom: 1px solid #c1c1c1;
 }
-.tag.tag-dark {
+a.tag.tag-dark, button.tag.tag-dark, span.tag.tag-dark, div.tag.tag-dark, p.tag.tag-dark {
   border-bottom: 1px solid #212121;
 }
 
@@ -12743,6 +12743,7 @@ header.collapse-title + .collapse-item:before {
 }
 
 .form-control, .selectize-control .selectize-input {
+  border-color: #8e8e8e;
   height: auto;
   -webkit-transition: color 0.3s, border-color 0.3s, outline 0.3s, -webkit-box-shadow 0.3s;
   transition: color 0.3s, border-color 0.3s, outline 0.3s, -webkit-box-shadow 0.3s;
@@ -12778,7 +12779,7 @@ header.collapse-title + .collapse-item:before {
   margin-right: 3rem;
 }
 .nav-lang.show .dropdown-toggle {
-  border: 1px solid #adb5bd;
+  border: 1px solid #8e8e8e;
 }
 .nav-lang .dropdown-toggle,
 .nav-lang .dropdown-item {
@@ -12845,7 +12846,7 @@ header.collapse-title + .collapse-item:before {
 }
 .nav-lang .dropdown-menu a:not(.active) {
   background: white;
-  border: 1px solid #adb5bd;
+  border: 1px solid #8e8e8e;
 }
 .nav-lang .dropdown-menu a:not(.active):hover {
   background: #e6e6e6;
@@ -12912,7 +12913,7 @@ header.collapse-title + .collapse-item:before {
   color: #ff0000;
 }
 .nav-lang-short ul li a {
-  color: #adb5bd;
+  color: #8e8e8e;
 }
 .nav-lang-short ul li a:hover {
   color: #212121;
@@ -13055,135 +13056,84 @@ header.collapse-title + .collapse-item:before {
   overflow: hidden;
 }
 
-a,
-a:visited {
-  color: #212121;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  background-color: transparent;
+a {
   text-decoration-color: #ff0000;
   -webkit-transition: text-decoration-color 0.2s ease-in-out, color 0.2s ease-in-out;
   transition: text-decoration-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
-a:hover, a:focus, a:active,
-a:visited:hover,
-a:visited:focus,
-a:visited:active {
+a:hover, a:focus, a:active {
   text-decoration-color: #212121;
 }
-a:active,
-a:visited:active {
+a:active {
   color: #ff0000;
 }
-a.text-muted,
-a:visited.text-muted {
+a.text-muted {
   text-decoration-color: #707070;
 }
-a.text-muted:hover,
-a:visited.text-muted:hover {
+a.text-muted:hover {
   color: #212121 !important;
   text-decoration-color: #212121;
 }
-.text-white a, a.text-white,
-.text-white a:visited,
-a:visited.text-white {
+.text-white a, a.text-white {
   text-decoration-color: currentcolor;
 }
-.text-white a:hover, .text-white a:focus, .text-white a:active, a.text-white:hover, a.text-white:focus, a.text-white:active,
-.text-white a:visited:hover,
-.text-white a:visited:focus,
-.text-white a:visited:active,
-a:visited.text-white:hover,
-a:visited.text-white:focus,
-a:visited.text-white:active {
+.text-white a:hover, .text-white a:focus, .text-white a:active, a.text-white:hover, a.text-white:focus, a.text-white:active {
   text-decoration-color: transparent;
 }
-.bg-primary a,
-.bg-primary a:visited {
+.bg-primary a {
   color: #fff;
   text-decoration-color: currentcolor;
 }
-.bg-primary a:hover, .bg-primary a:focus, .bg-primary a:active,
-.bg-primary a:visited:hover,
-.bg-primary a:visited:focus,
-.bg-primary a:visited:active {
+.bg-primary a:hover, .bg-primary a:focus, .bg-primary a:active {
   text-decoration-color: transparent;
 }
-.bg-secondary a,
-.bg-secondary a:visited {
+.bg-secondary a {
   color: #212121;
   text-decoration-color: currentcolor;
 }
-.bg-secondary a:hover, .bg-secondary a:focus, .bg-secondary a:active,
-.bg-secondary a:visited:hover,
-.bg-secondary a:visited:focus,
-.bg-secondary a:visited:active {
+.bg-secondary a:hover, .bg-secondary a:focus, .bg-secondary a:active {
   text-decoration-color: transparent;
 }
-.bg-success a,
-.bg-success a:visited {
+.bg-success a {
   color: #212121;
   text-decoration-color: currentcolor;
 }
-.bg-success a:hover, .bg-success a:focus, .bg-success a:active,
-.bg-success a:visited:hover,
-.bg-success a:visited:focus,
-.bg-success a:visited:active {
+.bg-success a:hover, .bg-success a:focus, .bg-success a:active {
   text-decoration-color: transparent;
 }
-.bg-info a,
-.bg-info a:visited {
+.bg-info a {
   color: #fff;
   text-decoration-color: currentcolor;
 }
-.bg-info a:hover, .bg-info a:focus, .bg-info a:active,
-.bg-info a:visited:hover,
-.bg-info a:visited:focus,
-.bg-info a:visited:active {
+.bg-info a:hover, .bg-info a:focus, .bg-info a:active {
   text-decoration-color: transparent;
 }
-.bg-warning a,
-.bg-warning a:visited {
+.bg-warning a {
   color: #212121;
   text-decoration-color: currentcolor;
 }
-.bg-warning a:hover, .bg-warning a:focus, .bg-warning a:active,
-.bg-warning a:visited:hover,
-.bg-warning a:visited:focus,
-.bg-warning a:visited:active {
+.bg-warning a:hover, .bg-warning a:focus, .bg-warning a:active {
   text-decoration-color: transparent;
 }
-.bg-danger a,
-.bg-danger a:visited {
+.bg-danger a {
   color: #fff;
   text-decoration-color: currentcolor;
 }
-.bg-danger a:hover, .bg-danger a:focus, .bg-danger a:active,
-.bg-danger a:visited:hover,
-.bg-danger a:visited:focus,
-.bg-danger a:visited:active {
+.bg-danger a:hover, .bg-danger a:focus, .bg-danger a:active {
   text-decoration-color: transparent;
 }
-.bg-light a,
-.bg-light a:visited {
+.bg-light a {
   color: #212121;
   text-decoration-color: currentcolor;
 }
-.bg-light a:hover, .bg-light a:focus, .bg-light a:active,
-.bg-light a:visited:hover,
-.bg-light a:visited:focus,
-.bg-light a:visited:active {
+.bg-light a:hover, .bg-light a:focus, .bg-light a:active {
   text-decoration-color: transparent;
 }
-.bg-dark a,
-.bg-dark a:visited {
+.bg-dark a {
   color: #fff;
   text-decoration-color: currentcolor;
 }
-.bg-dark a:hover, .bg-dark a:focus, .bg-dark a:active,
-.bg-dark a:visited:hover,
-.bg-dark a:visited:focus,
-.bg-dark a:visited:active {
+.bg-dark a:hover, .bg-dark a:focus, .bg-dark a:active {
   text-decoration-color: transparent;
 }
 
@@ -13433,6 +13383,10 @@ picture .img-fluid {
   background: linear-gradient(#ff0000, #ff0000) 0/var(--sx) 100% no-repeat #c1c1c1;
 }
 
+.custom-select {
+  border-color: #8e8e8e;
+}
+
 .ms-offscreen {
   clip: rect(0 0 0 0) !important;
   position: absolute !important;
@@ -13461,7 +13415,7 @@ picture .img-fluid {
   white-space: nowrap;
   background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23212121' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
   background-size: 8px 10px;
-  border: 1px solid #d5d5d5;
+  border: 1px solid #8e8e8e;
   border-radius: 2px;
   text-align: left;
   -webkit-text-decoration: none;
@@ -13478,7 +13432,7 @@ picture .img-fluid {
 .ms-choice.disabled {
   background-color: #d5d5d5;
   background-image: none;
-  border: 1px solid #d5d5d5;
+  border: 1px solid #8e8e8e;
   cursor: default;
 }
 .ms-choice > span {
@@ -15849,6 +15803,34 @@ ol.flickity-page-dots li:before {
   z-index: 1;
 }
 
+.list-group-teaser-thumbnail .news-video-overlay {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+}
+.list-group-teaser-thumbnail .news-video-overlay:before {
+  content: "";
+  width: 2.25rem;
+  height: 2.25rem;
+  background: url(../images/icons/icon-teaser-video.svg);
+  background-size: 100%;
+  border-radius: 50%;
+  -webkit-box-shadow: 0 0 1rem rgba(0, 0, 0, 0.16);
+          box-shadow: 0 0 1rem rgba(0, 0, 0, 0.16);
+}
+
 .social-feed {
   position: relative;
   padding: 2.2rem 1.5rem 1.5rem;
@@ -15876,17 +15858,6 @@ ol.flickity-page-dots li:before {
   position: relative;
   margin-bottom: 1.6rem;
 }
-.breadcrumb-container:before {
-  content: " ";
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 3rem;
-  height: calc(100% - 2px);
-  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(80%, #fff), to(#fff));
-  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 80%, #fff 100%);
-  z-index: 120;
-}
 @media (max-width: 1199.98px) {
   .breadcrumb-container {
     padding: 0 0.8rem;
@@ -15910,7 +15881,6 @@ ol.flickity-page-dots li:before {
 }
 @media (min-width: 992px) {
   .breadcrumb-wrapper {
-    overflow-x: auto;
     overflow-y: visible;
     -webkit-user-select: none;
        -moz-user-select: none;
@@ -15961,14 +15931,6 @@ ol.flickity-page-dots li:before {
 .breadcrumb-item.breadcrumb-tags-wrapper {
   display: inline;
 }
-@media (max-width: 767.98px) {
-  .breadcrumb-item:not(.breadcrumb-tags-wrapper) {
-    display: none;
-  }
-  .breadcrumb-item.breadcrumb-tags-wrapper:after {
-    display: none;
-  }
-}
 .breadcrumb-item:before {
   content: " ";
   display: block;
@@ -15986,9 +15948,10 @@ ol.flickity-page-dots li:before {
   width: calc(100% - 0.6rem);
 }
 .breadcrumb-item:after {
-  content: "›";
-  padding-left: 0.3rem;
-  color: #495057;
+  content: "/";
+  color: #8e8e8e;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
 }
 .breadcrumb-item a {
   background-image: none !important;
@@ -16010,8 +15973,111 @@ ol.flickity-page-dots li:before {
   content: none;
 }
 .breadcrumb-item.active {
+  font-weight: bold;
   color: #495057;
 }
+.breadcrumb-item.expand-links {
+  display: none;
+}
+
+.breadcrumb .btn-expand-links {
+  height: auto;
+  padding: 0;
+  border: 0;
+  font-size: inherit;
+  line-height: 1;
+}
+
+@media (max-width: 991.98px) {
+  .breadcrumb .breadcrumb-item,
+.breadcrumb.has-expanded-links .breadcrumb-item.expand-links {
+    display: none;
+  }
+  .breadcrumb .breadcrumb-item:first-of-type,
+.breadcrumb .breadcrumb-item.expand-links,
+.breadcrumb .breadcrumb-item:last-of-type,
+.breadcrumb .breadcrumb-item.active,
+.breadcrumb .breadcrumb-item.breadcrumb-tags-wrapper,
+.breadcrumb.has-expanded-links .breadcrumb-item {
+    display: inline-block;
+  }
+}
+.breadcrumb .dropdown {
+  display: inline;
+  position: static;
+}
+
+.breadcrumb .dropdown-toggle {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  top: -0.08em;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-left: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+}
+.breadcrumb .dropdown-toggle .icon {
+  top: 0;
+  font-size: 1rem;
+  color: currentColor;
+  -webkit-transform: rotate(0);
+          transform: rotate(0);
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+.breadcrumb .dropdown-toggle:after {
+  content: none;
+}
+.breadcrumb .dropdown-toggle:hover, .breadcrumb .dropdown-toggle:active {
+  background: #ff0000 !important;
+  color: #fff !important;
+}
+.breadcrumb .dropdown-toggle:focus, .breadcrumb .dropdown-toggle:focus-visible {
+  outline-offset: 0;
+}
+.breadcrumb .dropdown-toggle:focus:not(:focus-visible) {
+  outline-color: transparent !important;
+}
+.breadcrumb .dropdown-toggle[aria-expanded=true] .icon {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+
+.breadcrumb .dropdown-menu.show {
+  top: 1.65rem !important;
+  left: -0.625rem !important;
+  -webkit-transform: none !important;
+          transform: none !important;
+}
+.breadcrumb .dropdown-menu.show.open-left {
+  right: -0.625rem !important;
+  left: auto !important;
+}
+
+.breadcrumb .dropdown-item {
+  padding: 0.125em 0.625rem;
+  font-size: 0.83rem;
+}
+.breadcrumb .dropdown-item a {
+  display: block;
+}
+.breadcrumb .dropdown-item.current-menu-item, .breadcrumb .dropdown-item.current-menu-item-parent {
+  font-weight: bold;
+}
+@media (max-width: 991.98px) {
+  .breadcrumb .dropdown-item {
+    white-space: normal;
+  }
+}
 
 .links-group {
   padding: 1.66rem;
@@ -17593,7 +17659,7 @@ li.nav-home a {
 .nav-back .icon,
 li.nav-back .icon,
 li.nav-home .icon {
-  color: #adb5bd;
+  color: #8e8e8e;
 }
 
 li.nav-back .icon {
@@ -17861,6 +17927,24 @@ a.nav-arrow:hover .icon-container {
 .nav-aside-layout .nav-aside-wrapper {
   display: block;
 }
+@media (max-width: 1199.98px) {
+  .nav-aside-layout .nav-aside-wrapper {
+    padding: 1rem;
+  }
+  .nav-aside-layout .nav-aside-wrapper .nav-aside [class^=h] {
+    padding: 0;
+  }
+  .nav-aside-layout .nav-aside-wrapper .nav-aside a {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    font-size: 1rem;
+  }
+}
+@media (min-width: 1200px) {
+  .nav-aside-layout .nav-aside-wrapper {
+    height: 100%;
+  }
+}
 @media (min-width: 1600px) {
   .nav-aside-layout .nav-aside-wrapper {
     -webkit-box-flex: 0;
@@ -17910,12 +17994,10 @@ a.nav-arrow:hover .icon-container {
 .nav-aside li.active > a:before {
   content: none;
 }
-.nav-aside li.active:not(.menu-item-has-children) + li > a:before {
-  content: none;
-}
 @media (max-width: 1199.98px) {
   .nav-aside li.active > a {
-    margin-right: 2rem;
+    margin-left: 0;
+    margin-right: 0;
   }
 }
 .nav-aside > ul > li:first-child > a:before {
@@ -17949,6 +18031,76 @@ a.nav-arrow:hover .icon-container {
   content: none;
 }
 
+.nav-toggle-layout > .nav-container {
+  width: auto;
+  margin: 0;
+  padding: 0;
+}
+@media (max-width: 1199.98px) {
+  .nav-toggle-layout > .nav-container {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background: #fff;
+    border-top: 1px solid #c1c1c1;
+    overflow-y: scroll;
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+    -webkit-transition: -webkit-transform 0.2s;
+    transition: -webkit-transform 0.2s;
+    transition: transform 0.2s;
+    transition: transform 0.2s, -webkit-transform 0.2s;
+    z-index: 120;
+  }
+  .mobile-menu-open .nav-toggle-layout > .nav-container {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+  }
+}
+
+.nav-main-mobile {
+  position: static;
+  border: 0;
+  -webkit-transform: none !important;
+          transform: none !important;
+}
+@media (min-width: 1200px) {
+  .nav-main-mobile {
+    display: none;
+  }
+}
+.nav-main-mobile .nav-wrapper {
+  height: auto;
+}
+.nav-main-mobile .nav-container {
+  margin-left: 0;
+  padding-left: 0;
+}
+.nav-main-mobile .nav-container .nav-menu {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  position: static;
+  width: 100%;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid #c1c1c1;
+}
+.nav-main-mobile .nav-container .nav-menu li {
+  border: 0;
+}
+.nav-main-mobile .nav-container .nav-menu li a {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 0.4rem;
+  padding-bottom: 0.4rem;
+}
+.nav-main-mobile .nav-container .nav-menu li.current-menu-item > a:first-child {
+  background: transparent;
+  color: #212121;
+}
+
 .person-card-avatar {
   height: 8rem;
 }