@comicrelief/component-library 8.51.2 → 8.51.4

package/src/components/Organisms/FooterNew/__snapshots__/FooterNew.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders correctly 1`] = `
+exports[`does not render copyright text when not supplied 1`] = `
 .c17 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -362,7 +362,8 @@ exports[`renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   background-color: #18181A;
   border-color: transparent;
-  padding-left: 18px;
+  height: 44px;
+  padding: 12px 2.4rem 12px 18px;
   -webkit-transition: background-color 0.2s ease,text-indent 0.18s ease;
   transition: background-color 0.2s ease,text-indent 0.18s ease;
   border: 1px solid #FFFFFF;
@@ -409,9 +410,14 @@ exports[`renders correctly 1`] = `
 .c24 {
   margin: 0;
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-  padding: 1rem;
+  height: 44px;
+  padding: 0 1rem;
   border-radius: 0.5rem;
   overflow: hidden;
+  min-width: -webkit-max-content;
+  min-width: -moz-max-content;
+  min-width: max-content;
+  width: 100%;
 }
 
 .c24 .emailSignUpButtonContent {
@@ -429,10 +435,13 @@ exports[`renders correctly 1`] = `
   -ms-flex-pack: center;
   justify-content: center;
   line-height: 1;
+  white-space: nowrap;
 }
 
 .c24 .emailSignUpButtonLabel {
   display: inline-block;
+  font-size: 16px;
+  line-height: 1;
   -webkit-transform: translateX(13px);
   -ms-transform: translateX(13px);
   transform: translateX(13px);
@@ -440,6 +449,7 @@ exports[`renders correctly 1`] = `
   -webkit-transition: transform 0.22s ease;
   transition: transform 0.22s ease;
   will-change: transform;
+  white-space: nowrap;
 }
 
 .c24 .emailSignUpButtonArrow {
@@ -503,9 +513,9 @@ exports[`renders correctly 1`] = `
   display: block;
   width: 100%;
   height: 100%;
-  max-width: 1200px;
+  max-width: 1424px;
   margin: 0 auto;
-  padding: 0 2rem;
+  padding: 0 1rem;
 }
 
 .c7 {
@@ -572,7 +582,7 @@ exports[`renders correctly 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: bold;
-  font-size: 1rem;
+  font-size: 16px;
 }
 
 .c37:hover,
@@ -586,6 +596,7 @@ exports[`renders correctly 1`] = `
 .c38 {
   color: #FFFFFF;
   font-weight: bold;
+  font-size: 16px;
 }
 
 .c40 {
@@ -636,8 +647,8 @@ exports[`renders correctly 1`] = `
 .c42 > span {
   color: #FFFFFF;
   opacity: 0.8;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   -webkit-text-decoration-color: #FFFFFF;
   text-decoration-color: #FFFFFF;
   font-weight: normal;
@@ -675,7 +686,7 @@ exports[`renders correctly 1`] = `
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
   justify-content: flex-start;
-  margin-bottom: 2rem;
+  padding-bottom: 2rem;
 }
 
 .c32 {
@@ -695,7 +706,7 @@ exports[`renders correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  margin-bottom: 0;
+  padding-bottom: 0;
   display: none;
 }
 
@@ -716,7 +727,7 @@ exports[`renders correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  margin-bottom: 0;
+  padding-bottom: 0;
   display: none;
 }
 
@@ -737,7 +748,7 @@ exports[`renders correctly 1`] = `
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
   justify-content: flex-start;
-  margin-bottom: 2rem;
+  padding-bottom: 2rem;
 }
 
 .c4 {
@@ -893,8 +904,8 @@ exports[`renders correctly 1`] = `
 
 @media (min-width:740px) {
   .c14 {
-    width: auto;
-    min-width: 360px;
+    width: 100%;
+    max-width: 364px;
   }
 }
 
@@ -916,13 +927,18 @@ exports[`renders correctly 1`] = `
 
 @media (min-width:740px) {
   .c22 {
-    width: auto;
+    width: 100%;
+    max-width: 123px;
+    -webkit-flex: 0 0 auto;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
   }
 }
 
 @media (min-width:740px) {
   .c24 {
     margin: 0;
+    max-width: 123px;
   }
 }
 
@@ -939,9 +955,15 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c1 {
+    padding: 0 2rem;
+  }
+}
+
 @media (min-width:1024px) {
   .c1 {
-    padding: 0 9rem;
+    padding: 0 4rem;
   }
 }
 
@@ -954,6 +976,8 @@ exports[`renders correctly 1`] = `
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
     justify-content: space-between;
+    -webkit-column-gap: 3rem;
+    column-gap: 3rem;
     -webkit-align-items: flex-start;
     -webkit-box-align: flex-start;
     -ms-flex-align: flex-start;
@@ -966,9 +990,10 @@ exports[`renders correctly 1`] = `
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
-    -webkit-flex: 0 0 auto;
-    -ms-flex: 0 0 auto;
-    flex: 0 0 auto;
+    -webkit-flex: 1 1 auto;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+    min-width: 0;
   }
 }
 
@@ -1024,9 +1049,1635 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c42 > span {
-    -webkit-text-decoration: none;
-    text-decoration: none;
+  .c2 {
+    -webkit-flex: 0 0 auto;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    display: none;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+  }
+}
+
+@media (min-width:1024px) {
+  .c2 {
+    display: none;
+  }
+}
+
+@media (min-width:740px) {
+  .c32 {
+    -webkit-flex: 0 0 auto;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 2rem;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: end;
+    -webkit-justify-content: flex-end;
+    -ms-flex-pack: end;
+    justify-content: flex-end;
+  }
+}
+
+@media (min-width:1024px) {
+  .c32 {
+    display: none;
+  }
+}
+
+@media (min-width:740px) {
+  .c34 {
+    -webkit-flex: 0 0 auto;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 2rem;
+    display: none;
+    -webkit-box-pack: end;
+    -webkit-justify-content: flex-end;
+    -ms-flex-pack: end;
+    justify-content: flex-end;
+  }
+}
+
+@media (min-width:1024px) {
+  .c34 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+}
+
+@media (min-width:740px) {
+  .c46 {
+    -webkit-flex: 0 0 auto;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: start;
+    -webkit-justify-content: flex-start;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+  }
+}
+
+@media (min-width:1024px) {
+  .c46 {
+    display: none;
+  }
+}
+
+@media (min-width:1024px) {
+  .c44 {
+    margin-bottom: 0;
+  }
+}
+
+<div>
+  <footer
+    className="c0"
+    role="banner"
+  >
+    <div
+      className="c1"
+    >
+      
+      <div
+        className="c2"
+      >
+        <a
+          className="c3 c4"
+          color="red"
+          href="/"
+          target="_self"
+          title="Go to Comic Relief homepage"
+          type="standard"
+        >
+          <div
+            className="c5"
+            rotate={0}
+          >
+            <img
+              alt="Comic Relief logo"
+              className="c6"
+              src="mock.asset"
+            />
+          </div>
+        </a>
+      </div>
+      <div
+        className="c7"
+      >
+        <div
+          className="c8"
+        >
+          <div
+            className="c9"
+          >
+            <form
+              noValidate={true}
+              onSubmit={[Function]}
+            >
+              <div
+                className="c10"
+              >
+                <div
+                  className="c11"
+                >
+                  <span
+                    className="c12"
+                  >
+                    Subscribe to our newsletter
+                  </span>
+                </div>
+                <div
+                  className="c13"
+                >
+                  <div
+                    className="c14"
+                  >
+                    <label
+                      className="c15 c16"
+                      htmlFor="email-signup"
+                    >
+                      <span
+                        className="c17 c18"
+                        dangerouslySetInnerHTML={
+                          Object {
+                            "__html": "Email address",
+                          }
+                        }
+                      />
+                      <div
+                        className="c19"
+                      >
+                        
+                        <div
+                          className="c20"
+                        >
+                          <input
+                            aria-required={false}
+                            className="c21"
+                            id="email-signup"
+                            name="email"
+                            onBlur={[Function]}
+                            onChange={[Function]}
+                            placeholder="Enter your email address"
+                            required={false}
+                            type="email"
+                          />
+                          
+                        </div>
+                      </div>
+                      
+                    </label>
+                  </div>
+                  <div
+                    className="c22"
+                  >
+                    <button
+                      className="c23 c24"
+                      color="white"
+                      type="submit"
+                    >
+                      <span
+                        className="emailSignUpButtonContent"
+                      >
+                        <span
+                          className="emailSignUpButtonLabel"
+                        >
+                          Sign up
+                        </span>
+                        <span
+                          aria-hidden="true"
+                          className="emailSignUpButtonArrow"
+                        >
+                          <svg
+                            className="c25"
+                            direction="right"
+                            height={18}
+                            viewBox="0 0 96 96"
+                            width={18}
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="m90.871,50.776c-0.016,0.016 -0.026,0.036 -0.043,0.052l-32,32c-0.781,0.781 -1.804,1.172 -2.828,1.172s-2.047,-0.391 -2.829,-1.171a4,4 0 0 1 0,-5.657l25.172,-25.172l-70.343,0a4,4 0 0 1 0,-8l70.343,0l-25.172,-25.171a4,4 0 0 1 5.657,-5.657l32,32c0.016,0.016 0.027,0.036 0.043,0.052c0.167,0.172 0.321,0.357 0.455,0.557c0.069,0.104 0.118,0.216 0.176,0.325c0.065,0.121 0.138,0.236 0.191,0.364c0.057,0.137 0.09,0.279 0.13,0.42c0.032,0.109 0.074,0.214 0.097,0.327a4.017,4.017 0 0 1 0,1.568c-0.023,0.113 -0.065,0.217 -0.097,0.327c-0.041,0.141 -0.074,0.283 -0.13,0.42c-0.053,0.128 -0.126,0.243 -0.191,0.364c-0.059,0.109 -0.107,0.221 -0.176,0.325a4.035,4.035 0 0 1 -0.455,0.555z"
+                              id="svg_1"
+                              transform="rotate(-180 47.998626708984375,48.00019836425781) "
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </form>
+          </div>
+          <div
+            className="c26"
+          >
+            <ul
+              className="c27"
+            >
+              <li
+                className="c28"
+              >
+                <a
+                  className="c29 c30"
+                  data-test="icon-facebook"
+                  href="https://www.facebook.com/comicrelief"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  title="Check out our Facebook page"
+                >
+                  <img
+                    alt="facebook"
+                    className="c31"
+                    src="mock.asset"
+                  />
+                </a>
+              </li>
+              <li
+                className="c28"
+              >
+                <a
+                  className="c29 c30"
+                  data-test="icon-instagram"
+                  href="https://www.instagram.com/comicrelief"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  title="Check out our Instagram account"
+                >
+                  <img
+                    alt="instagram"
+                    className="c31"
+                    src="mock.asset"
+                  />
+                </a>
+              </li>
+              <li
+                className="c28"
+              >
+                <a
+                  className="c29 c30"
+                  data-test="icon-x"
+                  href="https://x.com/comicrelief"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  title="Check out our X account"
+                >
+                  <img
+                    alt="x"
+                    className="c31"
+                    src="mock.asset"
+                  />
+                </a>
+              </li>
+              <li
+                className="c28"
+              >
+                <a
+                  className="c29 c30"
+                  data-test="icon-tiktok"
+                  href="https://www.tiktok.com/@comicrelief"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  title="Check out our TikTok account"
+                >
+                  <img
+                    alt="tiktok"
+                    className="c31"
+                    src="mock.asset"
+                  />
+                </a>
+              </li>
+              <li
+                className="c28"
+              >
+                <a
+                  className="c29 c30"
+                  data-test="icon-youtube"
+                  href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  title="Check out our YouTube channel"
+                >
+                  <img
+                    alt="youtube"
+                    className="c31"
+                    src="mock.asset"
+                  />
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div
+          className="c32"
+        >
+          <a
+            className="c3 c4"
+            color="red"
+            href="/"
+            target="_self"
+            title="Go to Comic Relief homepage"
+            type="standard"
+          >
+            <div
+              className="c33"
+              rotate={0}
+            >
+              <img
+                alt="Comic Relief logo"
+                className="c6"
+                src="mock.asset"
+              />
+            </div>
+          </a>
+        </div>
+        <div
+          className="c34"
+        >
+          <a
+            className="c3 c4"
+            color="red"
+            href="/"
+            target="_self"
+            title="Go to Comic Relief homepage"
+            type="standard"
+          >
+            <div
+              className="c33"
+              rotate={0}
+            >
+              <img
+                alt="Comic Relief logo"
+                className="c6"
+                src="mock.asset"
+              />
+            </div>
+          </a>
+        </div>
+      </div>
+      <nav
+        aria-label="Primary footer navigation"
+        className="c35"
+        role="navigation"
+      >
+        <li
+          className="c36"
+        >
+          <a
+            className="c3 c37"
+            color="red"
+            href="/contact-us"
+            target="_self"
+            type="standard"
+          >
+            <span
+              className="c17 c38"
+            >
+              Contact us
+            </span>
+          </a>
+        </li>
+        <li
+          className="c36"
+        >
+          <a
+            className="c3 c37"
+            color="red"
+            href="https://www.comicrelief.com/frequently-asked-questions"
+            target="_self"
+            type="standard"
+          >
+            <span
+              className="c17 c38"
+            >
+              FAQs
+            </span>
+          </a>
+        </li>
+      </nav>
+      <div
+        className="c39"
+      >
+        <ul
+          className="c27"
+        >
+          <li
+            className="c28"
+          >
+            <a
+              className="c29 c30"
+              data-test="icon-facebook"
+              href="https://www.facebook.com/comicrelief"
+              rel="noopener noreferrer"
+              target="_blank"
+              title="Check out our Facebook page"
+            >
+              <img
+                alt="facebook"
+                className="c31"
+                src="mock.asset"
+              />
+            </a>
+          </li>
+          <li
+            className="c28"
+          >
+            <a
+              className="c29 c30"
+              data-test="icon-instagram"
+              href="https://www.instagram.com/comicrelief"
+              rel="noopener noreferrer"
+              target="_blank"
+              title="Check out our Instagram account"
+            >
+              <img
+                alt="instagram"
+                className="c31"
+                src="mock.asset"
+              />
+            </a>
+          </li>
+          <li
+            className="c28"
+          >
+            <a
+              className="c29 c30"
+              data-test="icon-x"
+              href="https://x.com/comicrelief"
+              rel="noopener noreferrer"
+              target="_blank"
+              title="Check out our X account"
+            >
+              <img
+                alt="x"
+                className="c31"
+                src="mock.asset"
+              />
+            </a>
+          </li>
+          <li
+            className="c28"
+          >
+            <a
+              className="c29 c30"
+              data-test="icon-tiktok"
+              href="https://www.tiktok.com/@comicrelief"
+              rel="noopener noreferrer"
+              target="_blank"
+              title="Check out our TikTok account"
+            >
+              <img
+                alt="tiktok"
+                className="c31"
+                src="mock.asset"
+              />
+            </a>
+          </li>
+          <li
+            className="c28"
+          >
+            <a
+              className="c29 c30"
+              data-test="icon-youtube"
+              href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
+              rel="noopener noreferrer"
+              target="_blank"
+              title="Check out our YouTube channel"
+            >
+              <img
+                alt="youtube"
+                className="c31"
+                src="mock.asset"
+              />
+            </a>
+          </li>
+        </ul>
+      </div>
+      <nav
+        aria-label="Secondary footer navigation"
+        className="c40"
+        role="navigation"
+      >
+        <li
+          className="c41"
+        >
+          <a
+            className="c3 c42"
+            color="red"
+            href="https://www.comicrelief.com/terms-of-use"
+            target="_self"
+            type="standard"
+          >
+            <span
+              className="c17 c43"
+            >
+              Terms of use
+            </span>
+          </a>
+        </li>
+        <li
+          className="c41"
+        >
+          <a
+            className="c3 c42"
+            color="red"
+            href="https://www.comicrelief.com/privacy-notice"
+            target="_self"
+            type="standard"
+          >
+            <span
+              className="c17 c43"
+            >
+              Privacy notice
+            </span>
+          </a>
+        </li>
+      </nav>
+      <div
+        className="c44"
+      >
+        <p
+          className="c17 c45"
+        >
+          Comic Relief is the trading name of Charity Projects, a registered charity in England and Wales (326568) and Scotland (SC039730), which is a company limited by guarantee registered in England and Wales (01806414). Registered address: 6th Floor, The White Chapel Building, 10 Whitechapel High Street, London, E1 8QS.
+        </p>
+      </div>
+      <div
+        className="c46"
+      />
+    </div>
+  </footer>
+</div>
+`;
+
+exports[`renders correctly 1`] = `
+.c17 {
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  text-transform: inherit;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  font-size: 1rem;
+  line-height: 1.25rem;
+}
+
+.c17 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.c6 {
+  object-fit: cover;
+  width: 100%;
+  display: block;
+  height: auto;
+  margin-right: 1rem;
+}
+
+.c5 {
+  display: inline-block;
+  z-index: 3;
+  width: 59px;
+  -webkit-transform: inherit;
+  -ms-transform: inherit;
+  transform: inherit;
+  vertical-align: bottom;
+}
+
+.c33 {
+  display: inline-block;
+  z-index: 3;
+  width: 59px;
+  -webkit-transform: inherit;
+  -ms-transform: inherit;
+  transform: inherit;
+  vertical-align: bottom;
+}
+
+.c3 {
+  position: relative;
+  display: inline;
+  color: #000000;
+  font-weight: normal;
+}
+
+.c3:hover,
+.c3:focus {
+  color: #000000;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c23 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  position: relative;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  height: 2.5rem;
+  width: 100%;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  padding: 0.6rem 1rem;
+  border-radius: 0.5rem;
+  background-color: #FFFFFF;
+  color: #000000;
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 700;
+  text-transform: inherit;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  font-size: 1rem;
+  line-height: 1.25rem;
+}
+
+.c23 > a {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c23:hover,
+.c23:focus,
+.c23:focus-within,
+.c23:focus-visible {
+  background-color: #E1E2E3;
+  outline-offset: 3px;
+}
+
+.c23:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.c15 {
+  width: 100%;
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  color: #000000;
+}
+
+.c15:after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  content: 'Optional';
+  font-family: inherit;
+  font-size: 1rem;
+}
+
+.c18 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.c19 {
+  position: relative;
+  font-size: 1.25rem;
+}
+
+.c20 {
+  position: relative;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c21 {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 48px;
+  padding: 1rem 2.4rem 1rem 1.5rem;
+  background-color: #F4F3F5;
+  border: 1px solid;
+  border-color: #969598;
+  box-shadow: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  color: #000000;
+  border-radius: 0.5rem;
+  font-size: inherit;
+  z-index: 2;
+  font-family: inherit;
+}
+
+.c21:focus {
+  border: 1px solid #666;
+}
+
+.c29 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  display: block;
+  position: relative;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+  background-color: #222222;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
+  -webkit-transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
+  transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
+  -webkit-transform-origin: center;
+  -ms-transform-origin: center;
+  transform-origin: center;
+}
+
+.c29:hover,
+.c29:focus {
+  opacity: 0.6;
+}
+
+.c29:hover,
+.c29:focus {
+  -webkit-transform: scale(1.15);
+  -ms-transform: scale(1.15);
+  transform: scale(1.15);
+}
+
+.c29:hover,
+.c29:focus {
+  background-color: #3A3A3A;
+  opacity: 1;
+}
+
+.c31 {
+  width: 100%;
+  -webkit-filter: brightness(0) invert(1);
+  filter: brightness(0) invert(1);
+}
+
+.c27 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  gap: 2rem;
+  list-style-type: none;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  margin: 3rem 0;
+  padding: 0;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c28 {
+  width: 54px;
+  height: 54px;
+  -webkit-flex: 0 0 54px;
+  -ms-flex: 0 0 54px;
+  flex: 0 0 54px;
+  margin-right: 0;
+}
+
+.c30 {
+  width: auto;
+}
+
+.c25 {
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+  fill: #FFFFFF;
+}
+
+.c10 {
+  margin-bottom: 1.5rem;
+  color: #FFFFFF;
+}
+
+.c11 {
+  margin-bottom: 1rem;
+}
+
+.c12 {
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  text-transform: inherit;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  font-size: 1rem;
+  line-height: 1.25rem;
+  font-weight: bold;
+}
+
+.c13 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 1rem;
+  overflow: visible;
+}
+
+.c14 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  overflow: visible;
+}
+
+.c16 {
+  overflow: visible;
+}
+
+.c16 input {
+  font-size: 1rem;
+  line-height: 1.25rem;
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  background-color: #18181A;
+  border-color: transparent;
+  height: 44px;
+  padding: 12px 2.4rem 12px 18px;
+  -webkit-transition: background-color 0.2s ease,text-indent 0.18s ease;
+  transition: background-color 0.2s ease,text-indent 0.18s ease;
+  border: 1px solid #FFFFFF;
+  color: #FFFFFF;
+}
+
+.c16 input::-webkit-input-placeholder {
+  color: #E1E2E3;
+}
+
+.c16 input::-moz-placeholder {
+  color: #E1E2E3;
+}
+
+.c16 input:-ms-input-placeholder {
+  color: #E1E2E3;
+}
+
+.c16 input::placeholder {
+  color: #E1E2E3;
+}
+
+.c16 input:hover,
+.c16 input:focus {
+  background-color: #3A3A3A;
+}
+
+.c22 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.c24 {
+  margin: 0;
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  height: 44px;
+  padding: 0 1rem;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  min-width: -webkit-max-content;
+  min-width: -moz-max-content;
+  min-width: max-content;
+  width: 100%;
+}
+
+.c24 .emailSignUpButtonContent {
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-template-columns: auto 18px;
+  -webkit-column-gap: 0.5rem;
+  column-gap: 0.5rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.c24 .emailSignUpButtonLabel {
+  display: inline-block;
+  font-size: 16px;
+  line-height: 1;
+  -webkit-transform: translateX(13px);
+  -ms-transform: translateX(13px);
+  transform: translateX(13px);
+  -webkit-transition: -webkit-transform 0.22s ease;
+  -webkit-transition: transform 0.22s ease;
+  transition: transform 0.22s ease;
+  will-change: transform;
+  white-space: nowrap;
+}
+
+.c24 .emailSignUpButtonArrow {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  opacity: 0;
+  -webkit-transform: translateX(-13px);
+  -ms-transform: translateX(-13px);
+  transform: translateX(-13px);
+  -webkit-transition: opacity 0.22s ease,-webkit-transform 0.22s ease;
+  -webkit-transition: opacity 0.22s ease,transform 0.22s ease;
+  transition: opacity 0.22s ease,transform 0.22s ease;
+  will-change: transform,opacity;
+}
+
+.c24 .emailSignUpButtonArrow svg {
+  fill: currentColor !important;
+}
+
+.c24:hover,
+.c24:focus {
+  background-color: #E1E2E3;
+  color: #000000;
+}
+
+.c24:hover .emailSignUpButtonLabel,
+.c24:focus .emailSignUpButtonLabel {
+  -webkit-transform: translateX(0);
+  -ms-transform: translateX(0);
+  transform: translateX(0);
+}
+
+.c24:hover .emailSignUpButtonArrow,
+.c24:focus .emailSignUpButtonArrow {
+  opacity: 1;
+  -webkit-transform: translateX(0);
+  -ms-transform: translateX(0);
+  transform: translateX(0);
+}
+
+.c0 {
+  text-align: left;
+  background: #18181A;
+  padding-top: 4.5rem;
+}
+
+.c1 {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-width: 1424px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+.c7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-bottom: 1rem;
+  gap: 1rem;
+}
+
+.c8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.c9 {
+  max-width: 100%;
+}
+
+.c26 {
+  margin-bottom: 1rem;
+  box-sizing: content-box;
+  gap: 1rem;
+  display: none;
+}
+
+.c39 {
+  margin-bottom: 1rem;
+  box-sizing: content-box;
+  gap: 1rem;
+  display: block;
+}
+
+.c35 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  list-style: none;
+  padding: 1rem 0;
+  margin: 0 0 1rem 0;
+  gap: 2rem;
+}
+
+.c36 {
+  margin: 0;
+}
+
+.c37 {
+  color: #FFFFFF;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.c37:hover,
+.c37:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  -webkit-text-decoration-color: #FFFFFF;
+  text-decoration-color: #FFFFFF;
+}
+
+.c38 {
+  color: #FFFFFF;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.c40 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  list-style: none;
+  padding: 0;
+  margin: 0 0 1rem 0;
+  gap: 0.5rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c41 {
+  margin: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c41:not(:last-child)::after {
+  content: '|';
+  margin-left: 0.5rem;
+  color: #FFFFFF;
+  opacity: 0.8;
+}
+
+.c42 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c42 > span {
+  color: #FFFFFF;
+  opacity: 0.8;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-text-decoration-color: #FFFFFF;
+  text-decoration-color: #FFFFFF;
+  font-weight: normal;
+  font-size: 0.875rem;
+}
+
+.c42:hover,
+.c42:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  -webkit-text-decoration-color: #FFFFFF;
+  text-decoration-color: #FFFFFF;
+}
+
+.c43 {
+  color: #FFFFFF;
+  opacity: 0.8;
+  font-weight: normal;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 2rem;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  padding-bottom: 2rem;
+}
+
+.c32 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 2rem;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding-bottom: 0;
+  display: none;
+}
+
+.c34 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 2rem;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding-bottom: 0;
+  display: none;
+}
+
+.c46 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 2rem;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  padding-bottom: 2rem;
+}
+
+.c4 {
+  color: transparent;
+  border: 0;
+}
+
+.c4:hover {
+  border: 0;
+}
+
+.c4 img {
+  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.41,1.64,0.41,0.8);
+  -webkit-transition: transform 0.6s cubic-bezier(0.41,1.64,0.41,0.8);
+  transition: transform 0.6s cubic-bezier(0.41,1.64,0.41,0.8);
+}
+
+.c4:hover img,
+.c4:focus img {
+  -webkit-transform: rotate(-14deg);
+  -ms-transform: rotate(-14deg);
+  transform: rotate(-14deg);
+}
+
+.c44 {
+  display: block;
+  width: 100%;
+  height: 100%;
+  text-align: left;
+  margin-bottom: 2rem;
+}
+
+.c45 {
+  color: #FFFFFF;
+  opacity: 0.8;
+  font-size: 0.875rem;
+  margin-bottom: 0.5rem;
+}
+
+@media (min-width:740px) {
+  .c17 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c17 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
+@media (min-width:1150px) {
+  .c5 {
+    width: 72px;
+  }
+}
+
+@media (min-width:1150px) {
+  .c33 {
+    width: 59px;
+  }
+}
+
+@media (min-width:740px) {
+  .c23 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c23 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
+@media (min-width:740px) {
+  .c23 {
+    width: auto;
+  }
+}
+
+@media (min-width:1024px) {
+  .c23 {
+    width: auto;
+  }
+}
+
+@media (min-width:740px) {
+
+}
+
+@media (min-width:1024px) {
+
+}
+
+@media (min-width:740px) {
+  .c27 {
+    -webkit-box-pack: start;
+    -webkit-justify-content: start;
+    -ms-flex-pack: start;
+    justify-content: start;
+    margin: 0.5rem 0;
+  }
+}
+
+@media (min-width:740px) {
+  .c28 {
+    margin-right: 0;
+  }
+}
+
+@media (min-width:1024px) {
+  .c25 {
+    fill: #FFFFFF;
+  }
+}
+
+@media (min-width:740px) {
+  .c10 {
+    margin-bottom: 1.5rem;
+  }
+}
+
+@media (min-width:740px) {
+  .c12 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c12 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
+@media (min-width:740px) {
+  .c13 {
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    -webkit-align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+}
+
+@media (min-width:740px) {
+  .c14 {
+    width: 100%;
+    max-width: 364px;
+  }
+}
+
+@media (min-width:740px) {
+  .c16 input,
+  .c16 textarea {
+    text-indent: 0;
+    -webkit-transition: text-indent 0.18s ease;
+    transition: text-indent 0.18s ease;
+  }
+
+  .c16:hover input,
+  .c16:hover textarea,
+  .c16:focus-within input,
+  .c16:focus-within textarea {
+    text-indent: 4px;
+  }
+}
+
+@media (min-width:740px) {
+  .c22 {
+    width: 100%;
+    max-width: 123px;
+    -webkit-flex: 0 0 auto;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+  }
+}
+
+@media (min-width:740px) {
+  .c24 {
+    margin: 0;
+    max-width: 123px;
+  }
+}
+
+@media (min-width:740px) {
+  .c0 {
+    padding-bottom: 3rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c0 {
+    padding-top: 5.5rem;
+    padding-bottom: 5rem;
+  }
+}
+
+@media (min-width:740px) {
+  .c1 {
+    padding: 0 2rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c1 {
+    padding: 0 4rem;
+  }
+}
+
+@media (min-width:740px) {
+  .c7 {
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    -webkit-column-gap: 3rem;
+    column-gap: 3rem;
+    -webkit-align-items: flex-start;
+    -webkit-box-align: flex-start;
+    -ms-flex-align: flex-start;
+    align-items: flex-start;
+  }
+}
+
+@media (min-width:740px) {
+  .c8 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-flex: 1 1 auto;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+}
+
+@media (min-width:740px) {
+  .c9 {
+    max-width: 100%;
+  }
+}
+
+@media (min-width:740px) {
+  .c26 {
+    box-sizing: border-box;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    margin-bottom: 0;
+    -webkit-align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+}
+
+@media (min-width:740px) {
+  .c39 {
+    box-sizing: border-box;
+    display: none;
+    margin-bottom: 1rem;
+    -webkit-align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+}
+
+@media (min-width:740px) {
+  .c35 {
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    -webkit-flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+  }
+}
+
+@media (min-width:740px) {
+  .c41 {
+    display: inline;
   }
 }