/* Skibz 2015 CSS */

html { font-size: 100%; }

body {
  margin: 0;
  line-height: normal;
  font-size: 1em; /* MUST BE 1em! This base font size is really controlled in the .js for scaling control (scaleFonts()) */
  background: url(images/background_spots.svg) top -10px center #9E88C1;
  background-size: /*123px 121px*/ 7.69em 7.56em;
}
.wrapper {
  width: 95%;
  margin: 0 auto;
}
@media only screen and (max-width: 768px)   { .wrapper { font-size: 1.3em; } }
@media only screen and (max-width: 600px)   { .wrapper { font-size: 1.6em; } }
@media only screen and (max-width: 400px)   { .wrapper { font-size: 2.3em; } }
/*@media only screen and (min-width: 1400px)  {
  .wrapper { width: 80%; font-size: 82%; }
  #dropdown .wrapper { width: 70% !important; }
}
@media only screen and (min-width: 1650px)  {
  .wrapper { width: 70%; font-size: 73%; }
  #dropdown .wrapper { width: 60% !important; }
}*/



/* Fonts */
body,
.logo h1 span,
.logo div span,
#product-grid a .title span,
#made-in-britain,
#reviews article h2 .author,
#reviews article h2 .date,
#contact form input,
#dropdown .account form input,
#product #add #input-quantity,
#product #details h2 {
  /*font-family: 'ITC Avant Garde Gothic Std';*/
  font-family: 'ITCAvantGardeGothic', 'Century Gothic', sans-serif;
  font-weight: normal;
  font-style: normal;
}
.logo > span,
nav.categories ul ul,
#product-grid a .title span,
.more,
footer a#subscribe,
.green-button,
#press article .date,
#stars article .name-age,
#category #sorting select,
#contact form .field label,
#contact form input[type="submit"],
#dropdown .account form .field label,
#dropdown .account form input[type="submit"] {
  font-family: 'AvantGardeGothicITCW02Md', 'Century Gothic', sans-serif;
  font-weight: normal;
  font-style: normal;
}
/*The bold version of the font is automatically hooked up, allegedly, so we only need to tell stuff to be bold {
  font-family: 'ITCAvantGardeGothic', 'Century Gothic', sans-serif;
  font-weight: bold;
  font-style: normal;
}*/
.vag,
#search_phone a[itemprop=telephone],
nav.categories ul,
main h1,
#intro a.button,
main #blog-title,
main h2,
#reviews #pages a,
#press article .publication,
#stars article .comment,
#celebrities article .quote,
#press nav a em,
#category #video,
#category #product-count,
#category .product .title,
.unfolder .trigger,
#product #free-delivery,
#product #details h2 strong,
.alert button.close {
  /*font-family: 'Vag Rounded Std';*/
  font-family: VAGRoundedLT-Black, sans-serif;
  font-weight: normal;
  font-style: normal;
}
.vag {
  line-height: 1em;
  font-size: 1.55em;
}
.green-text { color: #A5C600; }
.purple-text { color: #574090; }



p { margin: 1em 0; }
.h1, .h2, .h3, h1, h2, h3 { margin-top: 0.65em; margin-bottom: 0.325em; }




#intro a {
  color: white;
  text-decoration: underline;
}
#intro a.button {
  padding: 0.3em 0.5em;
  font-size: 0.9em;
  text-decoration: none;
  background: white;
  border-radius: 0.5em;
  color: #574090;
}



img { max-width: 100%; height: 100%; }
.whitebox img:not([width]) { width: 100%; height: 100%; }



.floatLeft {
  float: left;
  margin-right: 1em;
  margin-bottom: 0.5em;
}
.floatRight {
  float: right;
  margin-left: 1em;
  margin-bottom: 0.5em;
}
.floatLeft, .floatRight {
  max-width: 45%;
  height: auto !important;
}
@media only screen and (max-width: 400px) {
  .floatLeft, .floatRight,
  main .whitebox img {
    float: none;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    height: auto !important;
  }
}



.logo {
  position: relative;
  width: 12.4em;
  padding-top: 0.7em;
  text-decoration: none !important;
}
header .logo {
  top: 1.3em;
  float: left;
  text-align: left;
  color: white;
  fill: white;
}
#content .logo {
  margin-bottom: 1em;
  color: #574090;
  fill: #574090;
}
@media only screen and (max-width: 768px) { #content .logo { display: none; } }
@media only screen and (max-width: 600px) { header .logo { font-size: 1em; } }
@media only screen and (max-width: 400px) { header .logo { font-size: 0.75em; } }
@media only screen and (min-width: 769px) {
  header .logo { display: none; }
  #content .logo { display: block; }
}
.logo h1,
.logo div {
  position: relative;
  top: -0.25em;
  margin: 0;
  line-height: 0.8em;
  font-size: 3.7em;
  font-weight: normal;
  transform: rotate(-9.5deg);
}
.logo > span {
  margin-left: 1.2em;
  font-size: 0.9em;
}
.logo h1 span,
.logo div span {
  position: relative;
  top: -1.5em;
  font-size: 0.15em;
  vertical-align: top;
}
.logo svg {
  position: absolute;
  right: 0;
  bottom: 0.1em;
  width: 6em;
  height: 3.95em;
}



body > header {
  color: white;
  overflow: hidden;
}
body > header .wrapper {
  overflow: hidden;
  position: relative;
  margin-bottom: 1em;
}



.trigger        { cursor: pointer; }
.trigger:hover  { text-decoration: none; }
.trigger.active { color: #574090 !important; }
  
.trigger.mainmenu {
  float: left;
  width: 1.7em;
  height: 1.14em;
  margin: 1.3em 1em 0 0;
  stroke: #FFFFFF;
  stroke-width: 3.6;
  stroke-linecap: round;
}
.trigger.mainmenu.active {
  stroke: #574090;
}
@media only screen and (max-width: 768px) {
  .trigger.mainmenu {
    float: right;
    clear: right;
    margin-top: 0.8em;
    margin-right: 0.3em;
    font-size: 1.2em;
  }
}
@media only screen and (max-width: 600px) { .trigger.mainmenu { margin-top: 1em; } }



.trigger.products {
  position: relative;
  display: none;
  float: right;
  width: 40%;
  margin: 1em 1.5em 0 0;
  padding: 0.3em 2em 0.3em 0.6em;
  color: #574090;
  border-radius: 1em;
  background: white;
  fill: #574090;
}
@media only screen and (max-width: 600px) { .trigger.products { display: block;} }
@media only screen and (max-width: 400px) { .trigger.products { width: 11em;} }

.trigger.products svg {
  position: absolute;
  right: 0.5em;
  width: 1.2em;
  height: 1.2em;
}
.trigger.products.active {
  color: white !important;
  background: #574090;
  fill: white;
}



#search_phone {
  position: relative;
  float: left;
  width: 36%;
  margin-top: 1em;
}
#search_phone a[itemprop=telephone] {
  position: absolute;
  right: 0.5em;
  font-size: 1.2em;
  color: white;
}
#search_phone a[itemprop=telephone]:hover,
#search_phone a[itemprop=telephone]:focus { text-decoration: none; }

.search.form {
  position: relative;
  z-index: 1;
  float: left;
  width: 50%;
  transition: width 0.2s;
}
.search.form.focus {
  width: 100%;
}
.search.form input {
  width: 100%;
  padding: 0.3em 2em 0.3em 0.6em;
  font-size: 1em;
  border: none;
  border-radius: 1em;
  color: #574090;
}
.search.form svg {
  position: absolute;
  top: 0.3em;
  right: 0.5em;
  width: 1.3em;
  height: 1.2em;
  stroke: #574090;
  opacity: 0.6;
  cursor: pointer;
}
.search.form svg,
#account .search svg { 
  stroke-width: 1.2;
  fill: none;
  stroke-linecap: round;
}
.search.form svg:hover { opacity: 1; }

@media only screen and (max-width: 768px) {
  #search_phone {
    width: 60%;
    float: right;
    margin-top: 0.6em;
    margin-right: 2em;
    font-size: 1.2em;
   }
}
@media only screen and (max-width: 600px) {
  #search_phone {
    float: left;
    width: 40%;
    margin: 0.8em 0 0 0.8em;
  }
  .search.form { display: none; }
  #search_phone a[itemprop=telephone] { position: static; }
}
@media only screen and (max-width: 400px) {
  #search_phone { width: 35%; margin-top: 1em; }
  #search_phone a[itemprop=telephone] { font-size: 1em; }
}



header #account {
  float: right;
  margin-top: 1em;
  text-align: right;
}
header #account a {
  text-decoration: none;
  color: white;
}
#account svg { fill: white; }

#account svg,
#account .totals { vertical-align: middle;}

#account .small svg {
  width: 1.8em;
  height: 1.8em;
}
#account .small.active { color: white !important; }
#account .account.active svg { fill: #574090; }
#account .search svg { stroke: white; }
#account .search.active svg { stroke: #574090; }

#basket svg {
  width: 1.5em;
  height: 1.45em;
  fill: white;
}
@media only screen and (max-width: 600px) {
  #account { font-size: 1.3em; }
  #account .big { display: none; }
  #account .small { display: inline; }
  #account .totals {
    display: block;
    margin-top: 0.2em;
  }
  #basket svg { width: 2em; height: 1.9em; }
}
@media only screen and (max-width: 400px) {
  #account { font-size: 1.1em; }
}
@media only screen and (min-width: 601px) {
  #account .small { display: none; }
  #basket svg { vertical-align: bottom; }
}



#delivery {
  float: right;
  margin-left: 1.5em;
  /*padding: 0.7em 0.8em 0.6em 0.8em;*/
  padding: 0.4em 0.8em 0.3em 0.8em;
  text-align: center;
  font-size: 1.3em;
  border-radius: 0 0 0.9em 0.9em;
  background: #574090;
  color: white;
}
#delivery:hover { text-decoration: none; }

#delivery small {
  display: block;
  font-size: 0.7em;
}
@media only screen and (max-width: 600px) {
  #delivery {
    width: 5.6em;
    text-align: center;
  }
}
@media only screen and (max-width: 400px) {
  #delivery {
    margin-left: 2em;
    font-size: 0.75em;
  }
}



#dropdown {
  display: none;
  overflow: hidden;
  width: 110%;
  margin: 0 0 1.5em -5%;
  padding: 3em 0;
  background: #574090;
  box-shadow: 0em 0.5em 1em -0.3em rgba(0,0,0,0.8);
}
@media only screen and (max-width: 600px) { #dropdown { margin-bottom: 3em; } }

#dropdown .wrapper {
  width: 80%;
  margin-bottom: 0;
}
#dropdown .search {
  float: none;
  margin: 0 auto;
  text-align: center;
}
#dropdown .search input {
  width: 100%;
  padding-left: 3%;
  padding-right: 10%;
  margin: 0 auto;
}
#dropdown .categories     { font-size: 1.8em; }
#dropdown .categories ul  { line-height: 1.5em; }
#dropdown .categories a   { color: white; }

#dropdown .account {
  width: 70%;
  margin: 0 auto;
}
#dropdown .account form { margin-left: 0; }
#dropdown .account form .field { width: 60%; }

@media only screen and (max-width: 768px) {
  #dropdown .account { width: 80%; }
  #dropdown .account form .field { width: 100%; }
}
#dropdown .account .column {
  float: right;
  width: 50%;
}
#dropdown .account .column.logged {
  float: none;
  width: 100%;
  text-align: center;
}
@media only screen and (max-width: 400px) {
  #dropdown .account .column {
    float: none;
    width: 100%;
  }
  #dropdown .account .column:first-child { margin-bottom: 1em; }
  #dropdown .account .column.logged { margin-bottom: 0; }
}
#dropdown .account .title {
  margin-bottom: 0.5em;
  color: #a5c600;
}
#dropdown .account form { margin-left: 0; }

#dropdown .account p {
  width: 80%;
  font-size: 0.7em;
}
#dropdown .account .forgotten {
  padding-left: 1em;
  font-size: 0.65em;
  color: #a5c600;
}
#dropdown .account .green-button { margin-top: 0; }



section#top #content {
  overflow: hidden;
  margin-bottom: 1em;
  padding: 1.2em;
  border-radius: 1.4em;
  background: white;
}
#sidebar {
  float: left;
  width: 25%;
}
@media only screen and (max-width: 600px) {
  section#top #content { padding: 0.8em; }
  #sidebar { display: none; }
}



nav.categories ul {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.2em;
  font-size: 0.9em;
}
nav.categories > ul > li { margin-top: 0.4em; }
nav.categories > ul > li:first-child { margin-top: 0; }

nav.categories ul a {
  text-decoration: none;
  color: #574090;
}
nav.categories ul a:hover { font-weight: bold; }
nav.categories li.sale a { color: #CE0071; }

nav.categories > ul > li > a { font-size: 1.1em; }



main,
#slideshow {
  float: right;
  width: 75%;
  color: #574090;
}
main .container,
#slideshow {
  overflow: hidden;
  border-radius: 1em;
}
main #slideshow { width: 100%; }

#slideshow .slide,
#slideshow .slide img {
  display: block;
  width: 100%;
}
#slideshow .nav {
  z-index: 1000;
  position: absolute;
  top: 33%;
  width: 6em;
  height: 9em;
  padding: 2em;
}
#slideshow .nav.cycle-prev { left: 0em; }
#slideshow .nav.cycle-next { right: 0em; }

#slideshow .nav svg {
  fill: none;
  stroke: white;
  stroke-width: 0.5;
}
@media only screen and (max-width: 768px) {
  #slideshow .nav { top: 28%; }
}
@media only screen and (max-width: 600px) {
  main, #slideshow {
    float: none;
    width: auto;
  }
}
@media only screen and (max-width: 400px) {
  #slideshow .nav {
    top: 25%;
    width: 5.6em;
    height: 8em;
  }
}



main .container {
  width: auto;
  padding: 2.5%;
  text-align: center;
  color: white;
  background-size: auto 10em;
}
main .container + .container { margin-top: 1.2em; }

main .container.blue-bg      { background-image: url(images/main-bg_blue.png); }
main .container.green-bg     { background-image: url(images/main-bg_green.png); }
main .container.lilac-bg { background-image: url(images/main-bg_lilac.png); }
main .container.pink-bg      { background-image: url(images/main-bg_pink.png); }
main .container.purple-bg    { background-image: url(images/main-bg_purple.png); }
main .container.teal-bg      { background-image: url(images/main-bg_teal.png); }

main#information .container { font-size: 0.8em; }

main .container > h1,
main .container > header h1,
main .container #blog-title,
#category h1 {
  margin: 0 0 0.45em 0;
  font-size: 2.1em;
}
main .whitebox h1 {
  margin-top: 0;
}
main .container h2 {
  font-size: 1.8em;
}
main .whitebox {
  clear: both;
  overflow: hidden;
  padding: 3%;
  text-align: left;
  font-size: 0.85em;
  color: /*#574090*/ black;
  background: white;
  border-radius: 1em;
}



#news article,
#awards article {
  overflow: hidden;
  margin-bottom: 1.3em;
  padding-bottom: 1.3em;
  border-bottom: 1px solid #DDD;
}
#news article:last-of-type,
#awards article:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
#news article .thumbnail,
#awards article .thumbnail {
  float: left;
  width: 6em;
  height: auto;
  padding: 0;
  border: none;
}
#news article .content,
#awards article .content {
  margin-left: 9em;
  font-size: 0.8em;
}
#news article h2,
#awards article h2 {
  margin-bottom: 0.2em;
  font-size: 1.2em;
}
#news article h2 a,
#awards article h2 {
  text-decoration: none;
  color: #574090;
}
#news article .date,
#awards article .date {
  margin-bottom: 0.5em;
  font-size: 1.1em;
  color: #a5c600;
}
#news article .more,
#awards article .more {
  padding-left: 1.5em;
  padding-right: 1.5em;
}



#reviews #pages::after {
  content: "";
  display: block;
  clear: both;
}
#reviews #pages a {
  float: left;
  width: 13%;
  font-size: 0.8em;
  color: white;
  cursor: pointer;
}
#reviews #pages a .title { height: 3.5em; }
#reviews #pages a.active,
#reviews #pages a:hover {
  text-decoration: none;
  color: #a5c600;
}
@media only screen and (max-width: 400px) { #reviews #pages a { font-size: 0.6em; } }

#reviews #pages a + a { margin-left: 1.5%; }

#reviews #pages a img {
  width: 100%;
  border-radius: 0.7em;
}
#reviews .whitebox {
  display: none;
  margin-top: 1.5em;
}
#reviews .whitebox.active { display: block; }

#reviews article {
  position: relative;
  font-size: 0.9em;
  border-bottom: 1px solid #DDD;
}
#reviews article:last-child { border-bottom: none; }

#reviews article .description {
  min-height: 2.5em;
  margin-top: -0.8em;
}
#reviews article h2 {
  margin-bottom: 0;
  font-size: 1.2em;
  color: #574090;
}
#reviews article h2 .author,
#reviews article h2 .date {
  padding-left: 0.5em;
  font-size: 0.9em;
  color: #a5c600;
}
@media only screen and (max-width: 768px) {
  #reviews article h2 .meta { display: block; }
  #reviews article h2 .meta .author { padding-left: 0; }
}
#reviews article .rating {
  width: 10em;
  height: 2em;
  margin-bottom: 1em;
}
.rating svg {
  float: left;
  width: 18%;
  margin: 0 1%;
  stroke-width: 0.5;
  stroke: #a5c600;
  fill: white;
}
.rating svg.on { fill: #a5c600; }

@media only screen and (min-width: 400px) {
  #reviews article .content { margin-right: 11em; }
  #reviews article .rating {
    position: absolute;
    top: 0;
    right: 0;
  }
}



#press article,
#category article,
#stars article,
#celebrities article {
  float: left;
  width: 32.8%;
  margin-left: 0.8%;
  margin-bottom: 0.8%;
  font-size: 0.8em;
  border-radius: 1.5em;
  background: white;
}
#celebrities article { width: 49.2%; }

@media only screen and (max-width: 768px) {
  #press article,
  #category article,
  #stars article {
    width: 49.2%;
    font-size: 1em;
  }
  #press article:nth-of-type(2n-1),
  #category article:nth-of-type(2n-1),
  #stars article:nth-of-type(2n-1) { margin-left: 0; }
}
@media only screen and (min-width: 769px) {
  #press article:nth-of-type(3n-2),
  #category article:nth-of-type(3n-2),
  #stars article:nth-of-type(3n-2) { margin-left: 0; }
}
@media only screen and (max-width: 400px) {
  #press article,
  #category article,
  #stars article,
  #celebrities article {
    width: 100%;
    margin-left: 0;
    margin-bottom: 0.5em;
    font-size: 1.2em;
  }
}
@media only screen and (min-width: 401px) {
  #celebrities article:nth-of-type(2n-1) { margin-left: 0; }
}
#press article .content,
#category .product .content {
  display: block;
  padding: 1.3em 2em 1em;
  text-decoration: none;
}
#press article img,
#category article img,
#stars article img,
#celebrities article img {
  width: 100%;
  height: auto;
}
#celebrities article .frame { position: relative; }
#celebrities article .frame .lights {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: url(images/lightbulb.png) left 0.3em top 0.2em repeat-y, url(images/lightbulb.png) right 0.3em top 0.2em repeat-y;
  background-size: 2em 2.5em;
}
#press article .publication,
#category .product .title,
#stars article .comment,
#celebrities article .quote {
  position: relative;
  height: 2.5em;
}
#press article .publication {
  margin-bottom: 0.2em;
  color: #574090;
}
#press article .publication > div,
#category .product .title > div,
#stars article .comment > div,
#celebrities article .quote > div {
  position: absolute;
  bottom: 0;
  width: 100%;
}
#press article .date,
#stars article .name-age,
#celebrities article .name {
  font-size: 0.9em;
  color: #a5c600;
}



nav#pager {
  clear: left;
  padding-top: 1em;
}
nav#pager ul {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
nav#pager ul li {
  display: inline;
}
nav#pager a {
  padding: 0 0.3em;
  text-decoration: none;
  color: white;
}
nav#pager a.active { font-weight: bold; }

nav#pager a em { font-style: normal; }

nav#pager .prev { position: absolute; left: 0; }
nav#pager .next { position: absolute; right: 0; }



@media only screen and (min-width: 769px) {
  #stars #intro { 
    width: 70%;
    margin: 0 auto;
  }
}
#stars article .content,
#celebrities article .content {
  padding: 0.45em;
  color: #574090;
}
#stars article img,
#celebrities article img { border-radius: 1.1em  1.1em 0 0 / 1.1em 1.1em 0 0; }

#stars article .comment,
#celebrities article .quote {
  height: 4em;
  font-size: 0.9em;
}
#celebrities article .quote { height: 3em; }

#stars article .name-age,
#celebrities article .name { margin: 0.3em 0; }



#blog article h1 {
  margin-bottom: 0.2em;
  font-size: 1.4em;
}
#blog .date { font-size: 0.9em; }



#category .container { text-align: left; }

#category header {
  position: relative;
  margin-bottom: 1em;
}
#category header::after {
  content: '';
  display: block;
  clear: both;
}
#category h1 { margin-bottom: 0; }
#category.home h1 { margin-bottom: 0.5em; }
#category h1 + p { margin: 0; }

#category #video {
  display: block;
  overflow: hidden;
  float: left;
  width: 5em;
  height: 4.3em;
  margin-left: 3em;
  padding-top: 0.7em;
  line-height: 1em;
  font-size: 0.85em;
  text-align: center;
  text-decoration: none;
  color: white;
  border-radius: 50%;
  background: #574090;
}
#category #video svg {
  width: 0.8em;
  height: 1.6em;
  margin: 0.2em 0 0 0.2em;
  fill: white;
}
@media only screen and (max-width: 768px) {
  /*#category #titles { width: 70%; }
  #category.home #titles { width: 100%; }*/
  #category #video {
    position: absolute;
    top: 1em;
    right: 1em;
    font-size: 1.1em;
  }
  /*#category #sorting { margin-top: 1em; }*/
}
@media only screen and (min-width: 769px) {
  /*#category #titles {
    float: left;
    width: 45%;
  }
  #category.home #titles { 
    float: none;
    width: 100%;
  }
  #category #sorting {
    position: absolute;
    right: 0;
    bottom: 0;
    text-align: right;
  }*/
}
#category #sorting { text-align: right; }

#category #product-count { font-size: 0.85em; }

#category #sorting .label { font-size: 0.7em; }
#category #sorting select {
  margin-top: 0.5em;
  padding: 0.2em 0.5em;
  font-size: 0.7em;
  color: #574090;
  border: 1px solid #CCC;
  border-radius: 0.8em;
  background-image: none;
}
#category .product .content,
#category .product .meta {
  padding-left: 0.8em;
  padding-right: 0.8em;
}
@media only screen and (max-width: 400px) {
  #category .product .meta { font-size: 1.2em; }
}
#category .product .content { padding-bottom: 1.5em; }

#category .product a {
  text-decoration: none;
  color: #574090;
}
#category .product img { margin-bottom: 0.5em; }

#category .product .price-rating {
  height: 1.5em;
  margin: 0.3em 0;
}
#category .product .price {
  display: inline-block;
  margin: 0.1em 0.3em 0 0;
  vertical-align: top;
  font-size: 0.95em;
  color: #a5c600;
}
#category .product .price .price-new { color: red; }
#category .product .price .price-old { color: #CCC; text-decoration: line-through; }

#category .product .rating {
  display: inline-block;
  width: 6em;
  height: 1.2em;
}
#category .product .rating svg {
  float: left;
  width: 16%;
  margin: 0 2%;
  stroke-width: 0.5;
  stroke: #a5c600;
  fill: white;
}
#category .product .rating svg.on { fill: #a5c600; }

.unfolder {
  position: relative;
  margin: 2em;
  padding: 0.5em 0;
  border-top: 1px solid #D8D3EA;
  border-bottom: 1px solid #D8D3EA;
}
#category .product .more { cursor: pointer; }
  
.unfolder .title {
  color: #574090;
  cursor: pointer;
}
.unfolder .content {
  font-size: 0.8em;
  padding: 2em 0;
}
.unfolder.closed .content { display: none; }
.unfolder.open .content { display: block; }

.unfolder .trigger {
  position: absolute;
  right: 0;
  bottom: 0.35em;
  content: '+';
  font-size: 1.3em;
  color: #574090;
}
.unfolder       .trigger::before { content: '+'; }
.unfolder.open  .trigger::before { content: '–'; }



#product header {
  text-align: left;
}
@media only screen and (max-width: 400px) {
  #product header { font-size: 1.4em; }
  #product #images {
    padding:0 3%;
  }
}
@media only screen and (min-width: 401px) {
  #product header {
    float: right;
    width: 50%;
    padding: 0 5% 0 2%;
  }
  #product #images {
    width: 50%;
    padding-right:3%;
  }
}
#product header,
#product #images { margin-bottom: 1.5em; }

#product h1 {
  margin-bottom: 0.3em;
  font-size: 1.3em;
}
#product #free-delivery {
  margin-top: -0.1em;
  font-size: 1em;
  text-transform: uppercase;
  color: #DB007D;
}
@media only screen and (max-width: 768px) { #product #free-delivery { font-size: 0.8em; } }
@media only screen and (max-width: 400px) { #product #free-delivery { padding-left: 0.3em; } }

#product #price { font-size: 1.1em; }
#product #price .special {
  text-decoration: line-through;
  font-size: 0.7em;
}
#product #add {
  margin-top: 0.7em;
  color: #574090;
}
#product #qty { position: relative; }
#product #qty svg {
  position: absolute;
  top: 0.15em;
  right: 0.7em;
  width: 0.6em;
  height: 0.3em;
  fill: #574090;
  cursor: pointer;
}
#product #qty svg#down {
  top: auto;
  bottom: 0.15em;
}
#product #qty svg:hover { fill: #A595D0; }

#product #input-quantity {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 0 0.5em 0 0.3em;
  font-size: 1.1em;
  border-radius: 0.3em;
  border: 1px solid #574090;
}
#product #qty + label { font-size: 0.9em; }
@media only screen and (max-width: 768px) { #product #qty + label { display: none; } }

#product #button-cart {
  margin-left: 0.3em;
  border: none;
  cursor: pointer;
}
@media only screen and (min-width: 401px) {
  #product #button-cart,
  #product #free-delivery { float: right; }
}
#product #images img,
#product #images .cycle-slide {
  display: block;
  width: 100%;
  height: auto;
}
#product #images #large { margin-bottom: 0.3em; }
#product #images #large,
#product #images #thumbnail img {
  overflow: hidden;
  border-radius: 0.5em;
}
#product #images #thumbnail img {
  width: 95%;
  cursor: pointer;
}
#product #images #nav-wrapper { position: relative; }
#product #images .nav {
  position: absolute;
  top: 1.4em;
  width: 0.6em;
  height: 1.5em;
  cursor: pointer;
}
@media only screen and (max-width: 768px) { #product #images .nav { top: 1em; } }
@media only screen and (max-width: 400px) { #product #images .nav { top: 1.8em; } }

#product #images .nav.cycle-prev { left: -0.9em; }
#product #images .nav.cycle-next { right: -0.8em; }

#product #images .nav svg {
  fill: none;
  stroke: white;
  stroke-width: 0.5;
}
#product #details { font-size: 0.8em; }

#product #details h2 {
  margin-bottom: 0.3em;
  color: #574090;
}
#product #details h2:first-child { margin-top: 0; }

#product #details ul {
  margin-left: 2em;
  padding: 0;
}
#product #details li {
  margin-bottom: 0.3em;
  color: #574090;
}
#product #reviews { font-size: 1.2em; }
#product #reviews .rating {
  display: inline-block;
  width: 5.5em;
  height: 1.1em;
  margin-left: 1em;
  vertical-align: middle;
}
.fa-stack { color: #a5c600; }

#product #category h3 { margin: 2em 0 1em 0; }



.alert {
  margin-bottom: 1em;
  padding: 0.5em 1em 0.5em 1.5em;
  font-size: 0.8em;
  border-radius: 1em;
}
.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.alert a,
.alert button.close {
  color: #574090;
}
.alert button.close {
  position: relative;
  top: -0.1em;
  float: right;
  padding: 0;
  line-height: 1;
  font-size: 1.2em;
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
}



div#bottom {
  color: white;
  text-align: center;
}
div#bottom .wrapper > p {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  color: white;
  text-align: center;
}
@media only screen and (max-width: 600px) { div#bottom .wrapper > p { width: 95%; } }



#product-grid,
#page-grid {
  text-align: center;
}
#product-grid::after,
#page-grid::after {
  content: "";
  display: block;
  clear: both;
}
#product-grid { margin-bottom: 1em; }

#product-grid a.green   { background-color: #A5C600; color: white; }
#product-grid a.purple  { background-color: #574090; color: white; }
#product-grid a.blue    { background-color: #37A0E6; color: white; }
#product-grid a.pink    { background-color: #DA007D; color: white; }
#product-grid a.teal    { background-color: #74CBCA; color: white; }
#product-grid a.yellow  { background-color: #E3E809; color: #574090; }

#product-grid a {
  position: relative;
  display: block;
  float: left;
  width: 23.5%;
  padding-bottom: 16%;
  margin-bottom: 2%;
  margin-left: 2%;
  border-radius: 10% / 14.69%;
  background-size: cover;
  box-shadow: 0.2em 0.2em 0.6em rgba(0,0,0,0.4);
}
#product-grid a .content,
#page-grid a .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#product-grid a .title {
  position: absolute;
  left: 7%;
  bottom: 7%;
  text-align: left;
  font-size: 1.3em;
}
#product-grid a.top .title { top: 7%; bottom: auto; }
#product-grid a.right .title { right: 7%; left: auto; text-align: right; }

#product-grid a .title span {
  display: block;
  padding-top: 0.2em;
  line-height: 1.1em;
  font-size: 0.6em;
  font-weight: 300;
}
@media only screen and (max-width: 768px) {
  #product-grid a { font-size: 0.9em; }
}
@media only screen and (max-width: 650px) {
  #product-grid a {
    width: 48.5%;
    margin-left: 3%;
    margin-bottom: 3%;
    padding-bottom: 32%;
    font-size: 1.6em;
  }
  #product-grid a:nth-of-type(2n-1) { margin-left: 0; }
}
@media only screen and (min-width: 651px) { #product-grid a:nth-of-type(4n-3) { margin-left: 0; } }
@media only screen and (max-width: 600px) { #product-grid a { font-size: 1.3em; } }
@media only screen and (max-width: 400px) { #product-grid a { font-size: 0.95em; } }



#page-grid { clear: both; }

#page-grid a {
  position: relative;
  display: block;
  float: left;
  width: 32%;
  margin-left: 2%;
  padding-bottom: 17%;
  margin-bottom: 2%;
  border-radius: 7% / 13.18%;
  color: #574090;
  background: #C4BADD;
  fill: #574090;
}
main #page-grid a {
  width: 48.5%;
  margin-left: 3%;
  margin-bottom: 3%;
  padding-bottom: 25.77%;
}
#page-grid a .content { padding: 1% 7% 7% 7%; }

#page-grid a .title {
  margin-bottom: 1em;
  border-bottom: 1px solid #574090;
}
#page-grid a .title span {
  position: relative;
  top: 0.4em;
  padding: 0 0.4em;
  font-size: 0.9em;
  background: #C4BADD;
}
#page-grid a.one-column svg {
  height: 2.5em;
  margin-bottom: 1em;
}
#page-grid a.two-column svg {
  float: left;
  width: 40%;
  height: 6em;
}
#page-grid a.two-column .text {
  margin-left: 45%;
  text-align: left;
}
.more {
  padding: 0.1em 0.4em;
  font-size: 0.95em;
  text-decoration: none;
  color: white;
  border-radius: 0.3em;
  background: #574090;
}
.more:hover {
  color: white;
  text-decoration: none;
}
@media only screen and (max-width: 768px) {
  #page-grid a { font-size: 0.75em; }
  #page-grid a.two-column .text { font-size: 1.05em; }
}
@media only screen and (max-width: 650px) {
  #bottom #page-grid a {
    width: 48.5%;
    margin-left: 3%;
    margin-bottom: 3%;
    padding-bottom: 25.77%;
    font-size: 1.15em;
  }
  #page-grid a.two-column .text { font-size: 1.05em !important; }
  #page-grid a:nth-of-type(2n-1) { margin-left: 0 !important; }
}
@media only screen and (min-width: 651px) {
  #bottom #page-grid a:nth-of-type(3n-2) { margin-left: 0; }
  main #page-grid a:nth-of-type(2n-1) { margin-left: 0; }
}
@media only screen and (max-width: 600px) {
  #bottom #page-grid a { font-size: 0.9em; }
  main #page-grid a { font-size: 0.84em; }
}
@media only screen and (max-width: 400px) {
  #bottom #page-grid a,
  main #page-grid a {
    width: 100%;
    margin-left: 0;
    margin-bottom: 5%;
    padding-bottom: 53.13%;
    font-size: 1.3em;
  }
  main #page-grid a { font-size: 1.2em; }
}



#made-in-britain {
  position: relative;
  float: right;
  width: 32%;
  margin-left: 2%;
  padding-bottom: 12.6%;
  background: url(images/home/made-in-britain.svg) no-repeat;
}
#made-in-britain .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 17%;
  font-size: 0.75em;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  color: white;
}
#made-in-britain .content span {
  display: block;
  font-size: 2.8em;
}
@media only screen and (max-width: 768px) {
  #made-in-britain {
    width: 58%;
    margin: 1em 0 0 4%;
    padding-bottom: 22.84%;
  }
  #made-in-britain .content { font-size: 1.05em; }
}
@media only screen and (max-width: 600px) {
  #made-in-britain {
    float: none;
    width: auto;
    margin-left: 0;
    padding-bottom: 39.38%;
    font-size: 1.4em;
  }
}
@media only screen and (max-width: 400px) { #made-in-britain { font-size: 0.96em; } }



form.big {
  width: 60%;
  margin: 0 auto;
}
@media only screen and (max-width: 400px) {
  form.big {
    width: 75%;
    margin-right: 0;
  }
}
form.big .field,
#dropdown .account form .field {
  position: relative;
  margin-bottom: 0.8em;
}
form.big .field label,
#dropdown .account form .field label {
  position: absolute;
  top: 0.35em;
  right: 100%;
  margin-right: 0.8em;
  white-space: nowrap;
}
#dropdown .account form .field label { font-size: 0.8em; }

form.big input,
form.big select,
form.big textarea,
#dropdown .account form input {
  width: 100%;
  padding: 2% 4%;
  font-size: 0.8em;
  color: black;
  border-radius: 1em;
  border: none;
}
form.big select { width: 100%; }
form.big textarea { overflow: auto; }

form.big input[type="submit"],
#dropdown .account form input[type="submit"] {
  width: 8em;
  padding: 0.2em;
  font-size: 1em;
  color: white;
  border-radius: 0.4em;
  background: #A5C600;
  cursor: pointer;
}
form.big input[disabled="disabled"] {
  color: #999;
  background: #CCC !important;
}
#dropdown .account form input[type="submit"] { font-size: 0.8em; }

.form-response .error_messages {
  margin: 1em 0 0 0;
  padding: 0;
  list-style: none;
}
#reviews form .rating { overflow: hidden; }

#reviews form .rating svg {
  cursor: pointer;
}



#social {
  width: 66%;
  padding-top: 1.5em;
}
#social .social {
  width: auto !important;
  margin-top: 0.5em;
  font-size: 1.6em;
}
#social .social a {
  display: inline-block;
  float: none;
  margin-right: 0.1em;
}
@media only screen and (max-width: 768px) { #social { width: 38%; } }
@media only screen and (max-width: 600px) { #social { width: auto; } }
@media only screen and (max-width: 400px) {
  #social { font-size: 1.3em; }
  #social .social a { font-size: 0.6em; }
}



footer {
  margin-top: 2em;
  padding: 1.8em 0;
  color: white;
  background: #574090;
}
footer .wrapper { overflow: hidden; }

footer .column,
#dropdown .mainmenu .column {
  float: left;
  width: 25%;
  /*margin-bottom: 1.8em;*/
}
@media only screen and (max-width: 768px) {
  footer nav,
  #dropdown .mainmenu nav { line-height: 1.5em; }
}
@media only screen and (max-width: 600px) {
  footer .column,
  #dropdown .mainmenu .column { width: 50%; font-size: 1.3em; }
  footer .column + .column + .column { margin-top: 1.5em; }
  #dropdown .mainmenu .column + .column + .column { display: none; }
}
@media only screen and (max-width: 400px) {
  footer .column,
  #dropdown .mainmenu .column { width: 100%; font-size: 1.5em; }
}

footer ul,
#dropdown .mainmenu ul,
#dropdown .account ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
footer nav a,
#dropdown .mainmenu nav a,
#dropdown .account nav a {
  text-decoration: none !important;
  color: white !important;
}
#share {
  margin: 1em 0;
  font-size: 0.8em;
}
@media only screen and (min-width: 400px) and (max-width: 768px) { #share { font-size: 0.75em; } }

.social { width: 10em; }
.social a,
.addthis_toolbox a.spot {
  float: left;
  width: 2em;
  height: 2em;
  margin: 0 0.5em 0.5em 0;
  padding: 0.35em;
  border-radius: 50%;
  background: white;
  fill: #574090;
}
.addthis_toolbox a.spot {
  background: #574090;
  fill: white;
}
.addthis_toolbox a.spot,
.addthis_button_compact {
  cursor: pointer;
}
.addthis_button_compact {
  width: 2em !important;
  height: 2em !important;
  padding: 0 !important;
}
.addthis_button_compact span {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
}
.addthis_button_compact span svg {
  width: auto !important;
  height: auto !important;
}
.addthis_button_pinterest { display: none; }

footer .social a:nth-of-type(4n),
#dropdown .mainmenu .social a:nth-of-type(4n) { margin-right: 0; }

.social a:hover {
  background: #42316F;
  fill: white;
}
.addthis_toolbox a.spot:hover {
  background: white;
  fill: #574090;
}
.green-button,
.green-button:hover {
  display: inline-block;
  margin-top: 0.8em;
  padding: 0.1em 1.5em;
  font-size: 0.9em;
  text-decoration: none;
  border-radius: 0.25em;
  color: white;
  background: #A5C600;
  cursor: pointer;
}
.subscribe-button-frame {
  position: static !important;
  width: 111px !important;
  height: 27px !important;
}



/* OpenCart theme and bootstrap fixes */

.row,
.form-horizontal .form-group { margin-left: 0; margin-right: 0; }
label { font-size: 0.8em; font-weight: normal; }
div.required .control-label::before {
  content: "* ";
  color: #f00;
  font-weight: bold;
}
@media all and (min-width: 768px) {
  .form-horizontal .control-label, .form-horizontal .checkbox, .form-horizontal .checkbox-inline, .form-horizontal .radio, .form-horizontal .radio-inline{ padding-top: 0.5em; }
}
.form-control {
  height: 2.1em;
}
.input-group-btn { font-size: 1em; }
:last-child.input-group-btn > .btn, :last-child.input-group-btn > .btn-group { margin-left: -0.3em; }
.btn, .form-control {
  padding: 0.3em 0.7em;
  font-size: 0.9em;
  border-radius: 0.5em;
}
.checkbox-inline, .radio-inline { padding-left: 1.6em; }
input[type=checkbox], input[type=radio] { margin-top: 0.2em; }
.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] { margin-left: -1.8em; }

.product-search #button-search,
.product-search #products { margin-top: 1em; }
.product-search #button-search { margin-left: 0.5em; margin-bottom: 0.5em; }

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
  padding-right: 0.5em;
  padding-left: 0.5em;
}

.table-responsive > .table > tbody > tr > td,
.table-responsive > .table > thead > tr > td {
  white-space: normal;
}

.breadcrumb {
  padding: 0.4em 1em;
  text-align: left;
  background-color: white;
  border-radius: 1.5em;
}
.list-group-item:first-child {
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
}
.list-group-item:last-child {
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
}

#column-right { text-align: left; }

.checkout-cart .btn .fa { font-size: 1em; }
.checkout-cart input { min-width: 4em; }

.panel-title { font-size: 1.5em; }

.modal-dialog { width: 65%; }

@media all and (max-width: 480px) {
  .input-group-btn { display: inline !important; }
  .input-group-btn .btn[data-original-title=Update] {
    border-top-left-radius: 0.5em !important; border-bottom-left-radius: 0.5em !important;
  }
  .input-group input:not(:last-child) {
    border-top-right-radius: 0.5em !important; border-bottom-right-radius: 0.5em !important;
  }
}

.checkout-survey { margin-bottom: 2em; }
#collapse-checkout-confirm .checkout-survey select { width: auto; }