@biggive/components 1.0.186 → 1.0.188

package/dist/collection/components/biggive-main-menu/biggive-main-menu.css

@@ -0,0 +1,1084 @@
+body {
+  background-color: #FFFFFF;
+}
+body.background-primary {
+  background-color: #2C089B;
+}
+body.background-secondary {
+  background-color: #2C089B;
+}
+body.background-tertiary {
+  background-color: #2C089B;
+}
+body.background-brand-1 {
+  background-color: #B30510;
+}
+body.background-brand-2 {
+  background-color: #B30510;
+}
+body.background-brand-3 {
+  background-color: #B30510;
+}
+body.background-brand-4 {
+  background-color: #B30510;
+}
+body.background-brand-5 {
+  background-color: #B30510;
+}
+body.background-brand-6 {
+  background-color: #B30510;
+}
+
+h1, h3, h3, h4, h5, h6 {
+  margin-bottom: 0;
+}
+
+h1, .heading-1 {
+  font-size: 47px;
+  line-height: 60px;
+  font-weight: bold;
+}
+
+h2, .heading-2 {
+  font-size: 38px;
+  line-height: 45px;
+  font-weight: bold;
+}
+
+h3, .heading-3 {
+  font-size: 25px;
+  line-height: 32px;
+  font-weight: bold;
+}
+
+h4, .heading-4 {
+  font-size: 20px;
+  line-height: 24px;
+  font-weight: bold;
+}
+
+h5, .heading-5 {
+  font-size: 17px;
+  line-height: 24px;
+  font-weight: bold;
+}
+
+a {
+  color: inherit;
+  text-decoration: underline;
+}
+a:hover {
+  text-decoration: none;
+}
+
+.colour-primary {
+  color: #2C089B;
+}
+
+.colour-secondary {
+  color: #2AF135;
+}
+
+.colour-tertiary {
+  color: #FF7272;
+}
+
+.colour-brand-1 {
+  color: #B30510;
+}
+
+.colour-brand-2 {
+  color: #6E0887;
+}
+
+.colour-brand-3 {
+  color: #50B400;
+}
+
+.colour-brand-4 {
+  color: #FFE500;
+}
+
+.colour-brand-5 {
+  color: #F07D00;
+}
+
+.colour-brand-6 {
+  color: #CBC8C8;
+}
+
+.colour-white {
+  color: #FFFFFF;
+}
+
+.colour-black {
+  color: #000000;
+}
+
+.text-colour-hover-primary:hover,
+.text-colour-primary {
+  color: #2C089B;
+}
+
+.text-colour-hover-secondary:hover,
+.text-colour-secondary {
+  color: #2AF135;
+}
+
+.text-colour-hover-tertiary:hover,
+.text-colour-tertiary {
+  color: #FF7272;
+}
+
+.text-colour-hover-brand-1:hover,
+.text-colour-brand-1 {
+  color: #B30510;
+}
+
+.text-colour-hover-brand-2:hover,
+.text-colour-brand-2 {
+  color: #6E0887;
+}
+
+.text-colour-hover-brand-3:hover,
+.text-colour-brand-3 {
+  color: #50B400;
+}
+
+.text-colour-hover-brand-4:hover,
+.text-colour-brand-4 {
+  color: #FFE500;
+}
+
+.text-colour-hover-brand-5:hover,
+.text-colour-brand-5 {
+  color: #F07D00;
+}
+
+.text-colour-hover-brand-6:hover,
+.text-colour-brand-6 {
+  color: #CBC8C8;
+}
+
+.text-colour-hover-white:hover,
+.text-colour-white {
+  color: #FFFFFF;
+}
+
+.text-colour-hover-black:hover,
+.text-colour-black {
+  color: #000000;
+}
+
+.fill-primary {
+  fill: #2C089B;
+}
+
+.fill-secondary {
+  fill: #2AF135;
+}
+
+.fill-tertiary {
+  fill: #FF7272;
+}
+
+.fill-brand-1 {
+  fill: #B30510;
+}
+
+.fill-brand-2 {
+  fill: #6E0887;
+}
+
+.fill-brand-3 {
+  fill: #50B400;
+}
+
+.fill-brand-4 {
+  fill: #FFE500;
+}
+
+.fill-brand-5 {
+  fill: #F07D00;
+}
+
+.fill-brand-6 {
+  fill: #CBC8C8;
+}
+
+.fill-white {
+  fill: #FFFFFF;
+}
+
+.fill-black {
+  fill: #000000;
+}
+
+.fill-red {
+  fill: red;
+}
+
+.background-colour-hover-primary:hover,
+.background-colour-primary {
+  background-color: #2C089B;
+}
+
+.background-colour-hover-secondary:hover,
+.background-colour-secondary {
+  background-color: #2AF135;
+}
+
+.background-colour-hover-tertiary:hover,
+.background-colour-tertiary {
+  background-color: #FF7272;
+}
+
+.background-colour-hover-brand-1:hover,
+.background-colour-brand-1 {
+  background-color: #B30510;
+}
+
+.background-colour-hover-brand-2:hover,
+.background-colour-brand-2 {
+  background-color: #6E0887;
+}
+
+.background-colour-hover-brand-3:hover,
+.background-colour-brand-3 {
+  background-color: #50B400;
+}
+
+.background-colour-hover-brand-4:hover,
+.background-colour-brand-4 {
+  background-color: #FFE500;
+}
+
+.background-colour-hover-brand-5:hover,
+.background-colour-brand-5 {
+  background-color: #F07D00;
+}
+
+.background-colour-hover-brand-6:hover,
+.background-colour-brand-6 {
+  background-color: #CBC8C8;
+}
+
+.background-colour-hover-white:hover,
+.background-colour-white {
+  background-color: #FFFFFF;
+}
+
+.background-colour-hover-black:hover,
+.background-colour-black {
+  background-color: #000000;
+}
+
+.background-colour-transparent {
+  background-color: transparent;
+}
+
+.input-wrap {
+  display: flex;
+  justify-content: space-between;
+}
+
+.input-text {
+  font-family: "Euclid Triangle", sans-serif;
+  font-size: 17px;
+  line-height: 24px;
+  color: #000000;
+  padding: 5px 10px;
+  box-sizing: border-box;
+  width: 100%;
+}
+.input-text:focus {
+  outline: 0;
+}
+.input-text:placeholder {
+  color: #4A4A4A;
+}
+
+.button {
+  font-size: 17px;
+  line-height: 24px;
+  padding: 10px 30px;
+  border-radius: 5px;
+  border: 1px solid #000000;
+  background-color: #000000;
+  color: #FFFFFF;
+  display: inline-block;
+  text-decoration: none;
+  text-align: center;
+  transition: all ease-in-out 0.5s;
+  cursor: pointer;
+}
+.button:hover {
+  background-color: #FFFFFF;
+  color: #000000;
+}
+.button.size-small {
+  font-size: 13px;
+  line-height: 17px;
+  padding: 5px 15px;
+}
+.button.button.rounded-true {
+  border-radius: 27.5px;
+}
+.button.button.rounded-true.size-small {
+  border-radius: 20px;
+}
+
+.button-primary {
+  color: #FFFFFF;
+  background-color: #2C089B;
+  border-color: #2C089B;
+}
+.button-primary:hover {
+  color: #2C089B;
+  background-color: #FFFFFF;
+}
+
+.button-secondary {
+  color: #000000;
+  background-color: #2AF135;
+  border-color: #2AF135;
+}
+.button-secondary:hover {
+  background-color: #FFFFFF;
+  border-color: #000000;
+}
+
+.button-tertiary {
+  color: #FFFFFF;
+  background-color: #FF7272;
+  border-color: #FF7272;
+}
+.button-tertiary:hover {
+  background-color: #FFFFFF;
+}
+
+.button-brand-1 {
+  color: #FFFFFF;
+  background-color: #B30510;
+  border-color: #B30510;
+}
+.button-brand-1:hover {
+  background-color: #FFFFFF;
+}
+
+.button-brand-2 {
+  color: #FFFFFF;
+  background-color: #6E0887;
+  border-color: #6E0887;
+}
+.button-brand-2:hover {
+  background-color: #FFFFFF;
+}
+
+.button-brand-3 {
+  color: #FFFFFF;
+  background-color: #50B400;
+  border-color: #50B400;
+}
+.button-brand-3:hover {
+  background-color: #FFFFFF;
+}
+
+.button-brand-4 {
+  color: #FFFFFF;
+  background-color: #FFE500;
+  border-color: #FFE500;
+}
+.button-brand-4:hover {
+  background-color: #000000;
+}
+
+.button-brand-5 {
+  color: #FFFFFF;
+  background-color: #F07D00;
+  border-color: #F07D00;
+}
+.button-brand-5:hover {
+  background-color: #FFFFFF;
+}
+
+.button-brand-6 {
+  color: #FFFFFF;
+  background-color: #CBC8C8;
+  border-color: #CBC8C8;
+}
+.button-brand-6:hover {
+  background-color: #000000;
+}
+
+.button-white {
+  color: #2C089B;
+  background-color: #FFFFFF;
+  border-color: #FFFFFF;
+}
+.button-white:hover {
+  color: #FFFFFF;
+  background-color: #2C089B;
+}
+
+.button-black {
+  color: #FFFFFF;
+  background-color: #000000;
+  border-color: #000000;
+}
+.button-black:hover {
+  color: #000000;
+  background-color: #FFFFFF;
+}
+
+.button-clear-primary {
+  color: #2C089B;
+  background-color: transparent;
+  text-decoration: underline;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-primary:hover {
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.button-clear-secondary {
+  color: #2AF135;
+  background-color: transparent;
+  text-decoration: underline;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-secondary:hover {
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.button-clear-tertiary {
+  color: #FF7272;
+  background-color: transparent;
+  text-decoration: underline;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-tertiary:hover {
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.button-clear-brand-1 {
+  color: #B30510;
+  background-color: transparent;
+  text-decoration: underline;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-brand-1:hover {
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.button-clear-brand-2 {
+  color: #6E0887;
+  background-color: transparent;
+  text-decoration: underline;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-brand-2:hover {
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.button-clear-brand-3 {
+  color: #50B400;
+  background-color: transparent;
+  text-decoration: underline;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-brand-3:hover {
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.button-clear-brand-4 {
+  color: #FFE500;
+  background-color: transparent;
+  text-decoration: underline;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-brand-4:hover {
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.button-clear-brand-5 {
+  color: #F07D00;
+  background-color: transparent;
+  text-decoration: underline;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-brand-5:hover {
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.button-clear-brand-6 {
+  color: #CBC8C8;
+  background-color: transparent;
+  text-decoration: underline;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-brand-6:hover {
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.button-clear-white {
+  color: #FFFFFF;
+  background-color: transparent;
+  text-decoration: underline;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-white:hover {
+  color: #FFFFFF;
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.button-rounded {
+  border-radius: 27.5px;
+}
+.button-rounded.size-small {
+  border-radius: 20px;
+}
+
+.progress-bar {
+  display: flex;
+}
+.progress-bar .slider {
+  margin: auto 15px auto 0;
+  position: relative;
+  flex-grow: 1;
+}
+.progress-bar .slider:before {
+  content: "";
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-color: #E8E8E8;
+  border-radius: 4px;
+}
+.progress-bar .slider .progress {
+  position: relative;
+  border-radius: 4px;
+  background-color: #000000;
+  height: 8px;
+}
+.progress-bar .counter {
+  font-weight: 700;
+  color: #000000;
+  font-size: 14px;
+  line-height: 18px;
+}
+
+.progress-bar-primary .slider .progress {
+  background-color: #2C089B;
+}
+.progress-bar-primary .counter {
+  color: #2C089B;
+}
+
+.progress-bar-secondary .slider .progress {
+  background-color: #2AF135;
+}
+.progress-bar-secondary .counter {
+  color: #2AF135;
+}
+
+.video-wrap {
+  position: relative;
+  padding-bottom: 56.25%;
+}
+
+.video-wrap iframe,
+.video-wrap video {
+  position: absolute;
+  border: 0;
+  display: block;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.image-wrap img {
+  width: 100%;
+  height: auto;
+}
+
+.align-left {
+  text-align: left;
+}
+
+.align-right {
+  text-align: right;
+}
+
+.align-center {
+  text-align: center;
+}
+
+.align-justify {
+  text-align: justify;
+}
+
+.space-below-0 {
+  margin-bottom: 0;
+}
+
+.space-below-1 {
+  margin-bottom: 5px;
+}
+
+.space-below-2 {
+  margin-bottom: 10px;
+}
+
+.space-below-3 {
+  margin-bottom: 15px;
+}
+
+.space-below-4 {
+  margin-bottom: 30px;
+}
+
+.space-below-5 {
+  margin-bottom: 45px;
+}
+
+.space-below-6 {
+  margin-bottom: 60px;
+}
+
+.space-above-0 {
+  margin-top: 0;
+}
+
+.space-above-1 {
+  margin-top: 5px;
+}
+
+.space-above-2 {
+  margin-top: 10px;
+}
+
+.space-above-3 {
+  margin-top: 15px;
+}
+
+.space-above-4 {
+  margin-top: 30px;
+}
+
+.space-above-5 {
+  margin-top: 45px;
+}
+
+.space-above-6 {
+  margin-top: 60px;
+}
+
+.horizontal-padding-1 {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.horizontal-padding-2 {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.horizontal-padding-3 {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.horizontal-padding-4 {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+.horizontal-padding-5 {
+  padding-left: 45px;
+  padding-right: 45px;
+}
+
+.horizontal-padding-6 {
+  padding-left: 60px;
+  padding-right: 60px;
+}
+
+.vertical-padding-1 {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.vertical-padding-2 {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.vertical-padding-3 {
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+
+.vertical-padding-4 {
+  padding-top: 30px;
+  padding-bottom: 30px;
+}
+
+.vertical-padding-5 {
+  padding-top: 45px;
+  padding-bottom: 45px;
+}
+
+.vertical-padding-6 {
+  padding-top: 60px;
+  padding-bottom: 60px;
+}
+
+:host {
+  display: block;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Euclid Triangle", sans-serif;
+}
+
+a[class^=icon-], a[class*=icon-] {
+  padding-left: 20px;
+  background-repeat: no-repeat;
+  background-size: auto 10px;
+  background-position: left center;
+}
+a.icon-green {
+  background-image: url(/assets/images/triangles-combined.svg);
+}
+a.icon-children {
+  background-image: url(/assets/images/triangles-combined-children.svg);
+}
+a.icon-christmas {
+  background-image: url(/assets/images/triangles-combined-christmas-challenge.svg);
+}
+a.icon-green-match {
+  background-image: url(/assets/images/triangles-combined-green-match.svg);
+}
+a.icon-women-girls {
+  background-image: url(/assets/images/triangles-combined-women-girls.svg);
+}
+a.icon-anchor-match {
+  background-image: url(/assets/images/triangles-combined-anchor.svg);
+}
+a.icon-emergency {
+  background-image: url(/assets/images/triangles-combined-emergency.svg);
+}
+
+.mobile-only {
+  display: none !important;
+}
+
+.row-top {
+  padding: 10px 30px;
+  background-color: #2C089B;
+  display: flex;
+}
+.row-top .social-icon-wrap {
+  margin-right: 15px;
+}
+.row-top .nav-secondary {
+  margin-left: auto;
+  display: grid;
+}
+.row-top .nav-secondary ul {
+  list-style: none;
+  display: inline-flex;
+  margin: auto;
+}
+.row-top .nav-secondary li {
+  border-right: 1px solid #FFFFFF;
+  height: fit-content;
+  padding: 0 10px;
+}
+.row-top .nav-secondary li:last-child {
+  border-right: 0;
+  padding-right: 0;
+}
+.row-top .nav-secondary li a {
+  color: #FFFFFF;
+  text-decoration: none;
+}
+.row-top .social-icon-wrap {
+  display: flex;
+}
+.row-top .social-icon-wrap .social-icon-item {
+  margin-right: 15px;
+}
+
+nav {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  height: 70px;
+  background: white;
+  z-index: 99;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+nav .navbar {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: auto;
+  padding: 0 50px;
+}
+nav .navbar .nav-links {
+  line-height: 70px;
+  height: 100%;
+}
+nav .navbar .nav-links .sidebar-logo {
+  display: none;
+}
+nav .navbar .nav-links .links {
+  display: flex;
+}
+nav .navbar .nav-links .links li {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  list-style: none;
+  padding: 0 14px;
+}
+nav .navbar .nav-links .links li a {
+  height: 100%;
+  text-decoration: none;
+  white-space: nowrap;
+  color: black;
+  font-size: 17px;
+  font-weight: 500;
+}
+nav .navbar .nav-links .links li .sub-menu {
+  position: absolute;
+  top: 70px;
+  left: 0;
+  line-height: 40px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  border-radius: 0 0 4px 4px;
+  display: none;
+  z-index: 2;
+  background-color: inherit;
+}
+nav .navbar .nav-links .links li .sub-menu li {
+  padding: 0 22px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+nav .navbar .nav-links .links li .sub-menu a {
+  color: black;
+  font-size: 15px;
+  font-weight: 500;
+}
+nav .navbar .nav-links .links li .sub-menu .more .sub-sub-menu {
+  position: absolute;
+  top: 0;
+  left: 100%;
+  border-radius: 0 4px 4px 4px;
+  z-index: 1;
+  display: none;
+}
+nav .navbar .nav-links .links li .arrow {
+  margin-left: 5px;
+  line-height: 70px;
+  text-align: center;
+  display: inline-block;
+  color: black;
+  transition: all 0.3s ease;
+}
+nav .navbar .nav-links .links li .arrow.transform-90 {
+  transform: rotate(90deg);
+}
+nav .navbar .logo {
+  min-width: 180px;
+  width: 180px;
+}
+nav .navbar .logo a {
+  font-size: 30px;
+  color: black;
+  text-decoration: none;
+  font-weight: 600;
+  display: flex;
+}
+nav .navbar .bx-menu {
+  display: none;
+}
+
+@media (hover: hover) {
+  /* when hover is supported */
+  .row-top .nav-secondary li a:hover {
+    border-bottom-color: #FFFFFF;
+    color: #FFFFFF;
+  }
+
+  nav .navbar .nav-links .links li .sub-menu .more:hover .sub-sub-menu {
+    display: block;
+  }
+  nav .navbar .nav-links .links li:hover .sub-menu-arrow {
+    transform: rotate(90deg);
+  }
+  nav .navbar .nav-links .links li:hover .sub-menu {
+    display: block;
+    background-color: white;
+  }
+  nav .navbar .nav-links .links li:hover .sub-menu .sub-sub-menu {
+    background-color: white;
+  }
+}
+@media (max-width: 1200px) {
+  nav .navbar .logo {
+    min-width: 120px;
+    width: 120px;
+  }
+  nav .navbar .nav-links .links li {
+    padding: 0 7px;
+  }
+  nav .navbar .nav-links .links li a {
+    font-size: 15px;
+  }
+  nav .navbar .nav-links .links li .sub-menu a {
+    font-size: 13px;
+  }
+}
+@media (max-width: 968px) {
+  .mobile-only {
+    display: block !important;
+  }
+
+  .row-top {
+    display: none;
+  }
+
+  nav .navbar .bx-menu {
+    display: block;
+    font-size: 25px;
+    color: black;
+  }
+  nav .navbar .nav-links {
+    position: fixed;
+    top: 0;
+    left: -100%;
+    display: block;
+    max-width: 350px;
+    width: 100%;
+    background: white;
+    line-height: 40px;
+    padding: 20px;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    transition: all 0.5s ease;
+    z-index: 1000;
+    overflow-y: scroll;
+  }
+  nav .navbar .nav-links .sidebar-logo {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  nav .navbar .nav-links .sidebar-logo #mobileLogo {
+    width: 130px;
+  }
+  nav .navbar .nav-links .sidebar-logo #x {
+    margin-right: 15px;
+  }
+  nav .navbar .nav-links .sidebar-logo i {
+    font-size: 25px;
+    color: black;
+  }
+  nav .navbar .nav-links .mobile-social-icon-wrap {
+    margin-top: 20px;
+  }
+  nav .navbar .nav-links .links {
+    display: block;
+    margin-top: 20px;
+  }
+  nav .navbar .nav-links .links li {
+    display: block;
+    border-bottom: 1px solid #e6e6e6;
+  }
+  nav .navbar .nav-links .links li a {
+    width: 100%;
+    display: block;
+  }
+  nav .navbar .nav-links .links li .arrow {
+    line-height: 40px;
+  }
+  nav .navbar .nav-links .links li .display-sub-menu {
+    display: block !important;
+  }
+  nav .navbar .nav-links .links li .sub-menu {
+    position: relative;
+    top: 0;
+    box-shadow: none;
+    display: none;
+  }
+  nav .navbar .nav-links .links li .sub-menu li {
+    border-bottom: none;
+  }
+  nav .navbar .nav-links .links li .sub-menu .sub-sub-menu {
+    display: none;
+    position: relative;
+    left: 0;
+  }
+  nav .navbar .nav-links .links li .sub-menu .sub-sub-menu li {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  nav .navbar .nav-links .links li .sub-menu .more span {
+    display: flex;
+    align-items: center;
+  }
+  nav .navbar .nav-links .links li .sub-menu .more .sub-sub-menu.display-sub-menu {
+    position: initial;
+  }
+}
+@media (max-width: 968px) and (max-width: 370px) {
+  nav .navbar .nav-links {
+    max-width: 100%;
+  }
+}