@charset "utf-8";

/*
Global CSS Variables // Add as needed
*/
:root {
  /* Text Color */
  --mf1: #000000;

  /* Text Underline Display:None/Block */
  --mf16: block;

  /* text underline color */
  --mf15: #00dd6b;

  /* Headers */
  --mf2: #000000;

  /* Link Hvr */
  --mf3: #00dd6b;

  /* Newsletter Btn */
  --mf4: #00dd6bb8;

  /* Newsletter Btn Color */
  --mf12: #fff;

  /* Newsletter Btn Hvr */
  --mf5: #00dd6b8a9;

  /* Newsletter Border color */
  --mf21: 2px solid #00dd6b8a9;

  /* Newsletter Input Bg*/
  --mf22: #fff;

  /* Newsletter Text1 ""*/
  --mf18: "We'd Love To Keep In Touch!";

  /* Newsletter Text1 color*/
  --mf19: #000;

  /* Newsletter Text2 */
  --mf23: "If you'd like to receive news, views and the occasional very special offer, just enter your details below to subscribe to our mailing list. You can unsubscribe at any time.";

  /* Newsletter Text2 Color */
  --mf24: #333;

  /* Newsletter Bg*/
  --mf17: #e9e9e9;

  /* Main background */
  --mf9: white;

  /* Links Background */
  --mf6: #ffffff;

  /* Social icons color b/w */
  --mf13: invert(0);

  /*Social Icons Bg*/
  --mf20: #000;

  /* Tagline Background */
  --mf7: #000;

  /* Tagline Text */
  --mf8: #fff;

  /* Payment Options Background*/
  --mf10: transparent;

  /* Outer Width eg.1920px */
  --mf14: ;

  /* Openinig Times Display: */
  --mf11: none;
}

/******************************************************************************************************************

-----------------
RESETS AND LAYOUT
-----------------

*/
#modular-footer-wrapper {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-flow: column nowrap;
  background: var(--c1);
  /* border-top: 1px solid #dfdfdf; */
  margin: auto;
  float: none;
  max-width: var(
  --mf14);
}
#modular-footer-wrapper > div.fixed {
  max-width: 100%;
  background: var(--c1);
}
#modular-footer-wrapper
  :is(
    .modular-footer-socials,
    .modular-footer-retaillinks,
    .modular-footer-citruslime---tagline
  ) {
  border-bottom: none;
}
#modular-footer-wrapper .modular-footer-socials,
#modular-footer-wrapper
  .modular-footer-retaillinks
  .modular-footer-retaillinks-container
  .modular-footer-retaillinks-container-inner {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-flow: row wrap;
  border-top: 0;
  padding: 0;
  gap: 9rem;
}
#modular-footer-wrapper
  .modular-footer-retaillinks
  .modular-footer-retaillinks-container
  .modular-footer-retaillinks-container-inner
  > div {
  flex: 0 0 auto;
  width: auto;
}
/**********************************************************/

/******************************************************************************************************************
	Set inner footer column max width
*/
#modular-footer-wrapper
  .modular-footer-retaillinks
  .modular-footer-retaillinks-container {
  height: auto;
  max-width: var(--maxWidth);
  padding: 44px;
}

/******************************************************************************************************************
	Order of styling of main columns
*/
#modular-footer-wrapper > div.modular-footer-socials {
  display: flex;
  flex-flow: row-reverse wrap;
  padding-block: 2em;
  order: 2;
  max-width: var(--maxWidth);
  margin: auto;
  background: var(--c1);
  justify-content: center;
  gap: 0rem;
  padding-inline: 4rem;
  flex-direction: row;
  align-content: center;
  flex-wrap: wrap;
  align-items: flex-end;
  border-top: 1px solid var(--c3);
}

#modular-footer-wrapper .modular-footer-retaillinks {
  order: 1;
}
#modular-footer-wrapper .modular-footer-retaillinks:nth-child(3) {
  order: 2;
}
#modular-footer-wrapper .modular-footer-citruslime---tagline {
  order: 4;
  background: var(--c4);
  color: var(--c1);
  padding-block: 0.2rem;
}

@media screen and (max-width: 600px) {
  #modular-footer-wrapper
    .modular-footer-retaillinks
    .modular-footer-retaillinks-container {
    padding: 24px;
  }

  #modular-footer-wrapper
    .modular-footer-retaillinks
    .modular-footer-retaillinks-container
    .modular-footer-retaillinks-container-inner
    > div {
    width: 100%;
  }
}

/******************************************************************************************************************
	Social & Newsletter
*/
#modular-footer-wrapper .modular-footer-socials .modular-footer-icons {
  order: 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -moz-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  -o-flex-flow: row nowrap;
  flex-flow: row nowrap;
  width: auto;
  gap: 0.5rem;
  padding-inline: 1rem;
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-icons > a {
  height: 36px;
  width: 32px;
  background-color: var(--c4);
  filter: var(--mf13);
  border-radius: 5px;
  margin: 0rem;
  border: 0px solid var(--c6);
}

#modular-footer-wrapper
  .modular-footer-socials
  .modular-footer-icons
  > a:hover {
  filter: invert(0);
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter {
  padding: 0;
  width: auto;
  border-radius: 0;
  margin-top: 0.5em;
  background: transparent;
  max-width: 1330px;
  width: 100%;
  text-align: center;
}
#modular-footer-wrapper > div.modular-footer-socials .modular-footer-newsletter::before {
  content: var(--mf18);
  font-family: inherit;
  display: block;
  margin-bottom: 0.5em;
  color: var(--c4);
  font-size: 1.5em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

#modular-footer-wrapper
  .modular-footer-socials
  .modular-footer-newsletter
  .modular-footer-newsletter---container {
  padding: 0;
  max-width: 100%;
}

#modular-footer-wrapper
  .modular-footer-socials
  .modular-footer-newsletter
  .modular-footer-newsletter---container
  .modular-footer-newsletter---container-inner {
  position: relative;
}

#modular-footer-wrapper
  .modular-footer-socials
  .modular-footer-newsletter
  .modular-footer-newsletter---container
  > .modular-footer-newsletter---container-inner
  input {

border-radius: 5px 0px 0px 5px;

margin: 0;

height: 54px;

line-height: 54px;

font-size: 12px;

background: var(--c2);

border: 1px solid var(--c1);

border-right: 0;

color: var(--c1);
}

#modular-footer-wrapper
  .modular-footer-socials
  .modular-footer-newsletter
  .modular-footer-newsletter---container
  > .modular-footer-newsletter---container-inner
  input::placeholder {
  font-size: 12px;
  color: var(--c3);
}

#modular-footer-wrapper
  .modular-footer-socials
  .modular-footer-newsletter
  .modular-footer-newsletter---container
  > .modular-footer-newsletter---container-inner
  #newsletter-footer-submit {
  /* border-top-left-radius: 0px; */
  /* border-top-right-radius: 3px; */
  /* border-bottom-left-radius: 0px; */
  /* border-bottom-right-radius: 20px; */
/*   border-radius: 0px 20px 20px 0px; */
  font-size: 14px;
  height: 54px;
  line-height: 54px;
  background: var(--mf4);
  color: var(--mf12);
}

#modular-footer-wrapper
  .modular-footer-socials
  .modular-footer-newsletter
  .modular-footer-newsletter---container
  > .modular-footer-newsletter---container-inner
  #newsletter-footer-submit {
    border: 1px solid var(--c1);
    background: var(--c2);
    text-transform: uppercase;
    font-family: 'citrfontbold';
    display: inline-block;
    transition: all 0.3s ease-in-out;
    color: var(--c1);
    border-radius: 0px 5px 5px 0px;
    }

#modular-footer-wrapper
  .modular-footer-socials
  .modular-footer-newsletter
  .modular-footer-newsletter---container
  > .modular-footer-newsletter---container-inner
  #newsletter-footer-submit:hover {
    background: var(--c4);
    color: var(--c1);
    }

    

/* #modular-footer-wrapper > div.modular-footer-socials::before {
  content: var(--mf18);
  font-family: inherit;
  display: block;
  margin-bottom: 0.5em;
  color: var(--c1);
  font-size: 2.5em;
  max-width: 1400px;
  text-align: center;
} */
/* #modular-footer-wrapper
  > div.modular-footer-socials
  .modular-footer-newsletter::before {
  content: var(--mf23);
  font-family: inherit;
  display: block;
  color: var(--c1);
  font-size: 1em;
  margin-bottom: 2em;
  display: none;
} */

@media screen and (max-width: 1024px) {
  #modular-footer-wrapper .modular-footer-socials {
    -webkit-flex-flow: column nowrap;
    -moz-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    -o-flex-flow: column nowrap;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    padding: 24px;
  }

  #modular-footer-wrapper
    .modular-footer-socials
    .modular-footer-newsletter
    .modular-footer-newsletter---container
    .modular-footer-newsletter---container-inner {
    flex-flow: row;
    justify-content: center;
    align-items: center;
    margin-bottom: ;
  }

  #modular-footer-wrapper
    .modular-footer-socials
    .modular-footer-newsletter
    .modular-footer-newsletter---container
    > .modular-footer-newsletter---container-inner
    input {
    order: 3;
    flex-basis: 90%;
    flex: 1;
    font-size: 12px;
  }

  #modular-footer-wrapper
    .modular-footer-socials
    .modular-footer-newsletter
    .modular-footer-newsletter---container
    > .modular-footer-newsletter---container-inner
    #newsletter-footer-submit {
    order: 4;
  }
}

/******************************************************************************************************************
	Main Column and links
*/

#modular-footer-wrapper
  .modular-footer-retaillinks
  .modular-footer-retaillinks-container
  .modular-footer-retaillinks-container-inner
  h4 {
  margin-bottom: 1em;
}

#modular-footer-wrapper
  .modular-footer-retaillinks
  .modular-footer-retaillinks-container
  .modular-footer-retaillinks-container-inner
  h4::after {
}

#modular-footer-wrapper
  .modular-footer-retaillinks
  .modular-footer-retaillinks-container
  .modular-footer-retaillinks-container-inner
  a {
  color: var(--c2);
  font-size: 1rem;
}

#modular-footer-wrapper
  .modular-footer-retaillinks
  .modular-footer-retaillinks-container
  .modular-footer-retaillinks-container-inner
  h4 {
  color: var(--c2);
  font-size: 1.3rem;
}

#modular-footer-wrapper
  .modular-footer-retaillinks
  .modular-footer-retaillinks-container
  .modular-footer-retaillinks-container-inner
  h4::after {
  content: "";
  display: var(--mf16);
  width: 40px;
  height: 3px;
  background: var(--c4);
  margin: 10px 0px 10px 0px;
}

#modular-footer-wrapper
  .modular-footer-retaillinks
  .modular-footer-retaillinks-container
  .modular-footer-retaillinks-container-inner
  a:hover {
  color: var(--c4);
}

/******************************************************************************************************************
	Logo, Menu, Contact & Opening Hours
*/
#modular-footer-wrapper
  .modular-footer-retaillinks
  .modular-footer-retaillinks---logo {
}

#modular-footer-wrapper
  .modular-footer-retaillinks
  .modular-footer-retaillinks---logo
  img {
}

#modular-footer-wrapper
  .modular-footer-retaillinks
  .modular-footer-retaillinks---menu {
}
#modular-footer-wrapper
  .modular-footer-retaillinks
  .modular-footer-retaillinks---contact {
  order: 3;
}
#modular-footer-wrapper
  .modular-footer-retaillinks
  .modular-footer-retaillinks---contact
  a.mainFont {
  font-size: initial;
}
#modular-footer-wrapper
  .modular-footer-retaillinks
  .modular-footer-retaillinks---openinghours {
  display: var(--mf11);
  order: -1;
}

#modular-footer-wrapper
  .modular-footer-retaillinks
  .modular-footer-retaillinks---openinghours
  dl {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  flex: 1;
  width: auto;
  max-width: 250px;
}

#modular-footer-wrapper
  .modular-footer-retaillinks
  .modular-footer-retaillinks---openinghours
  dl
  dt {
  flex-basis: 50%;
  color: var(--mf1);
}

#modular-footer-wrapper
  .modular-footer-retaillinks
  .modular-footer-retaillinks---openinghours
  dl
  dd {
  font-weight: bold;
  color: var(--mf1);
}

/*
	Payment Icons
*/
#modular-footer-wrapper .modular-footer-payment-icons {
  text-align: center;
  background: var(--mf10);
}

#modular-footer-wrapper .modular-footer-payment-icons img {
  height: 1.5em;
}

/******************************************************************************************************************
	Custom Links
*/
#modular-footer-wrapper
  .modular-footer-retaillinks
  .modular-footer-retaillinks-container-inner---custommenu {
}
#modular-footer-wrapper
  .modular-footer-retaillinks
  .modular-footer-retaillinks-container-inner---custommenu
  > div {
}

/******************************************************************************************************************
	Tagline
*/
#modular-footer-wrapper .modular-footer-citruslime---tagline a {
  color: var(--c1);
}
#modular-footer-wrapper .modular-footer-company-details {
  padding-top: 0px;
}
.modular-footer-retaillinks-container:after{
  content: "";
  background: url(/layout/generalLyout/logo.png) center center no-repeat;
  background-size: contain;
  margin: 0;
  display: block;
  height: 65px;
  width: 350px;
  margin: auto;
  margin-top: 3rem;
  display: none;
}