/* Main color Green #000 */
/* Light yellow Yellow - #fbd721 */

:root {
  /* COLOUR VARIABLES */

  /* CW request can we change this to be --primary */
  --red: #e41b23;
  
  --purple-100: #dacfe2;
  --purple-200: #b07eb3;
  --purple-300: #7a3e84;
  --purple-400: #5a2d83;
  --purple-600: #3a1b56;
  
  --green-100: #f0f9e8;
  --green-200: #d2edba;
  --green-300: #44cc22;
  --green-400: #35a319;
  --green-600: #269010;
  --green-700: #1a6b08;
  --green-800: #0d4600;

  --orange-400: #d68f00;

  --blue-400: #a7dde9;

  --white: #ffffff;
  --black-100: #f0f0f0;
  --black-200: #e6e6e6;
  --black-400: #3a3a3a;
  --black: #000000;
  --grey-400: #454545;

  --primarycolor-400: var(--purple-400);
  --secondarycolor-400: var(--green-400);
  --heading-color: var(--white);

  --fb-line-clamp: 7;
  --linkforeground: var(--purple-400);
  --activecolor: var(--purple-400);
  --activebackground: var(--black-200);

  --fontweightbold: 600;
}

.facebook .content-wrap {background: var(--primarycolor-400);}

h1, h2, h3, h4, h5, h6 {color: var(--primarycolor-400);}

a, .arrowbutton a {color: var(--linkforeground);}

.seecmsdownloadarea li:after {color: var(--purple-400);}

.header .left, .mobile-header .left {width: 450px;}
.header a.logo, .mobile-header a.logo, .homeheader .header a.logo {background: url(../images/leemingstjohns-logo.png) no-repeat center center; background-size: 100%; width: 110px; height: 110px;}
.header-container {background: var(--white) url(../images/leemingstjohns-header-background.png) no-repeat center top; background-size: 100%;}
.header .right .socials a, .header .right .socials .arrowbutton a {color: var(--purple-400);}
.header .right .socials p a:hover {color: var(--purple-300); text-decoration: underline;}

.header-container.homeheader.homestick .header a.logo {background: url(../images/leemingstjohns-logo.png) no-repeat center center; background-size: 100%;}
.header-container.homeheader.homestick .header .right .socials p a {color: var(--purple-400);}
.header-container.homeheader.homestick .header .right .socials p a:hover {color: var(--red);}

.nav-wrap, .nav, .header-container.homeheader.homestick .nav-wrap, .mobile-nav, .mobile-nav .top, .mobile-nav li a {background: var(--purple-400);}
.nav li.selected a, .mobile-nav li.selected a {background: var(--activebackground);}
.nav li:hover a {background: var(--black-200);  color: var(--purple-300);}
.nav li.selected a {color: var(--activecolor);}
.nav li.selected:hover a {color: var(--purple-300);}
.dropdown-wrap {background: var(--black-200); box-shadow: 0 5px 5px #00000044;}
.dropdown-wrap h3 {color: var(--purple-400);}
.dropdown-wrap p {color: var(--purple-400);}
.dropdown li a {color: var(--purple-400)!important;}
.dropdown li a:hover {color: var(--purple-300)!important; text-decoration: underline;}
.search .input {border: 1px solid var(--purple-400);}
.search input[type="submit"] {background: var(--purple-400) url(../images/search-icon-white.png) no-repeat center center; background-size: 16px;}

.title-wrap {background: var(--black-200);}
.title-wrap .title h2 {color: var(--purple-400);}

.breadcrumb .selected {color: var(--purple-400); font-weight: var(--fontweightbold);}

.snav li.selected a {background: var(--black-200); color: var(--purple-300)!important;}
.snav li:hover a {background: var(--purple-400); color: var(--white)!important;}

.quicklinks .quicklink.q1 {background: var(--black-200);}
.quicklinks .quicklink.q2 {background: var(--black-200);}
.quicklinks .quicklink.q3 {background: var(--black-200);}
.quicklinks .quicklink.q4 {background: var(--black-200);}
.quicklinks a {color: var(--purple-300); background: none!important;}
.quicklinks a:hover {margin-left: 10px;}

.newsfeeds .newsfeed .newsstory, .newsfeedmain .newsstory {background: var(--green-800);}
.newsfeeds .newsfeed .newsstory .text p, .newsfeeds .newsfeed .newsstory .text h4, .newsfeeds .newsfeed .newsstory .text p a {color: var(--purple-300);}

.twitter .tweet {background: var(--green-800);}
.twitter .tweet p {color: var(--purple-300);}
.twitter .tweet p a {color: var(--purple-300);}
.twitter p.date {color: var(--grey-400);}

.faqs .faq .heading {background: var(--purple-400);}
.faqs .faq .text {padding: 20px; display: none; background-color: var(--black-100);}

.bannerstrapline {background: var(--black-200);}
.bannerstrapline .inner h2 {color: var(--primarycolor-400); padding: 0;}
.bannerstrapline .inner p {color: var(--purple-300);}

.gridboxes .box .text li a {color: var(--linkforeground);}
.gridboxes .box .text li a:hover {text-decoration: underline;}

input[type="submit"], button, input[type="button"] {background: var(--purple-400); color: var(--white); margin-bottom: 20px; font-weight: var(--fontweightbold);}
input[type="submit"]:hover, button, input[type="button"]:hover {background-color: var(--black-200); color: var(--purple-400);}

.footer-wrap {background: var(--purple-400);}
.footer a:hover {text-decoration: underline;}
.footer p a i {color: var(--black-200);}

.footer .bottom p {color: var(--white);}
.footer .bottom p a {color: var(--black-200);}
.footer .bottom p a:hover {color: var(--black-200); text-decoration: underline;}
.footer h4 {color: var(--black-200);}

@media screen and (max-width: 1024px){
  .header .left, .mobile-header .left {width: 300px;}
}

@media screen and (max-width: 800px){

  .top-mobile-header p {background: var(--primarycolor-400);}
  .top-mobile-header p:last-child {background: var(--black-200);}
  .top-mobile-header p:last-child a {color: var(--primarycolor-400);}

  .mobile-nav li.selected a {color: var(--purple-400);}

  .header .left, .mobile-header .left {width: 300px;}
  .mobile-header span {font-size: 150%;}
}