/******************************************************************
Site Name: Merry Dairy 2025
Author: David Hicks, brandbot.ca

Stylesheet: Main Stylesheet

// New styles related to Merry Dairy 2025 Theme
*******************************************************************/

/* VARS */

/* var(--name, value) */
:root {
  --turq: #5fbfbb;
  --dkturq: #3c9693;
  --ltturq: #8fd2d0;
  --ltltturq: #cfeeee; 
  --red: #c2063b;
  --ltred: #f8dee5;
  --brown: #48312f;
  --cream: #fcfbf3;
  --yellow: #ffdd04;
  --ltyellow: #fff9d7;
  --purple: #b5a1ce;
  --ltpurple: #eee8f7;
  --white: #ffffff;
  
  --unit: 10px;
  --s: 20px;
  --m: 40px;
  --l: 80px;
  --xl: 120px;
  --xxl: 160px;
  --xxxl:200px;
  --cubano: "Cubano",sans-serif;
  --robo: "Roboto Slab", "Helvetica", serif;
}


/* FONTS */
.roboto-slab {
  font-family: "Roboto Slab", "Helvetica", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.font-light {
  font-weight: 300;
}

.font-med {
  font-weight: 500;
}

.font-heavy {
  font-weight: 700;
}

/* TYPE */

h2.section-head {
  font-size: 4rem;
  line-height: 4rem;
  margin-top: var(--m);
} 

.center {
  text-align: center;
}

/* LAYOUT */

.flexy {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.col-20 {
  width: 20%;
}

.col-25 {
  width: 25%;
}

.col-33 {
  width: 33.3333%;
}

.col-50 {
  width: 50%;
}

.col-66 {
  width: 66.6666%;
}

.col-75{
  width: 75%;
}

.col-80{
  width: 80%;
}

/* SECTIONS */

section.section-new {
  display: block;
  position: relative;
  margin: var(--l) 0;
}

.section-inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
  width: calc(100% - var(--xxl));
}

/* HOME SCOOPS */

#home-scoops {
  margin-top: var(--xxl);
}

.scoops-medallion-wrapper {
 width: calc( 100%);
 margin: 0 auto;
 position: relative;
 margin-top: -145px;
}

.scoops-medallion {
  background: var(--turq);
  width: 200px;
  height: 200px;
  border-radius: 200px;
}

img.scoops-cones {
  width: 120px;
}

.scoops-container, .flavours-container {
  padding: var(--m);
}

.scoops-text, .flavours-text {
  font-family: var(--robo);
  font-size: 1.5rem;
}

.scoops-cta {

}

/* SCOOPS CARDS */

li.flavour-cabinet-item {
  display: block;
  width: 20%;
  margin: var(--m) 0;
}

.flavour-circle-new {
  width: 240px;
  height: 240px;
  border-radius: 240px;
  overflow: hidden;
  margin: 0 auto;
}

img.flavour-circle-image {
  width: 240px;
  height: 240px;
}

h3.card-title {
  font-family: var(--robo);
  font-size: 1.4rem;
}

.card-info {
  
}

.card-info .flavour-icon-container {
  font-family: var(--robo);
  font-size: 1.2rem;
}

/* BORDERS */

.scoops-border {
  border: 6px solid var(--turq);
}

/* MARGINS AND PADDING */


/* BUTTONS */
.buddon {
  font-family: "Roboto Slab", serif;
  font-weight: 500;
  font-size: 1.2em;
  color: var(--white);
  text-decoration: none;
  padding: var(--unit) var(--s);
  margin: var(--unit);
}

.buddon-turq {
  background: var(--turq);
  color: var(--white)!important;
}

.buddon-turq:hover {
  background: var(--dkturq);
}


.buddon-red {
  background: var(--red);
}

.buddon-grey {
  background: #bbb;
}

#filter-clear {
  height: 48px;
  margin-top: 0;
  margin-left: 0;
}

.buddon-white {
  background: var(--white);
  color: var(--turq);
  border: 2px solid var(--turq);
}



/* Main nav */

/* dropdown menu */

ul.new-top-nav li {
  position: relative;
}

.mobile-nav ul.new-top-nav li {
  position: relative;
  padding-left: 15px;
}

ul.new-top-nav li.menu-item-has-children > a:after {
  font-family: 'FontAwesome';
  display: inline-block;
  content: '\f078';
  font-size: 8px;
  padding-left: 6px;
  vertical-align: middle;
  transform-origin: center center;
  -webkit-transform: rotateX(0deg);
      transform: rotateX(0deg);
}

ul.new-top-nav li.menu-item-has-children a.hover:after {

  -webkit-transform: rotateX(180deg);
      transform: rotateX(180deg);
}

.desktop-nav ul.sub-menu {
  display: none;
  position: absolute;
  top: 24px;
  left: 0px;
  z-index: 22000;
  transition: display 0.2s;
}

.mobile-nav ul.sub-menu {
  display: none;
  position: relative;
  transition: display 0.2s;
  padding-left: 30px;
}

ul.new-top-nav li:hover {
  background: #8FD2D0;
  transition: background 0.3s;
}

.desktop-nav ul.sub-menu {
  width: 220px;
  /* border: 1px solid #fff; */
  background: #8FD2D0; /* #5FBFBB */
  transition: background 0.3s;
}

.desktop-nav ul.sub-menu li {
  width: 220px;
}

.mobile-nav ul.sub-menu {
  width: 100%;
  /* border: 1px solid #fff; */
  background: #8FD2D0; /* #5FBFBB */
  transition: background 0.3s;
}

.mobile-nav ul.sub-menu li {
  width: 100%;
}

ul.sub-menu li a {
  display: inline-block;
  text-align: left;
  padding-left: 15px;
  
}

ul.sub-menu li:hover {
  background: #b1e0de;
}
/*
.new-top-nav li .sub-menu li a:before {
  display: block;
  float: left;
  font-family: 'FontAwesome';
  content: '\f054';
  font-size: 8px;
  padding-right: 6px;
  vertical-align: middle;

}

.new-top-nav li .sub-menu li a {
  display: inline-block;
  float: left;
   padding-left: 20px ;
   text-indent: -20px ;
}
*/

/* Mobile nav */
/*
.mobile-nav-container .new-top-nav li .sub-menu li {
  border-bottom: none;
}
*/

.mobile-nav-container .new-top-nav li .sub-menu li:before {
  font-family: 'FontAwesome';
  content: '\f054';
  font-size: 8px;
  padding-right: 6px;
  vertical-align: middle;

}

.mobile-nav .menu-item-has-children.hover {
  background: #8FD2D0;
}

ul.new-top-nav li.menu-item-has-children > a:after {
  /* down caret for expandab le menu items */
  
}

/* home hero video */

#home-custom-video-ar  {
  max-height: 100%;
  /* background-color: #2fc1e6; */
  /* background: url('/path/poster.jpg'); */
  background-size: cover;
  background-position: center top;
  background-repeat: none;
  overflow:hidden;
  position: relative;
  margin-top: 10px;
}
/*
#video-poster {
  display:block;
  height: 480px;
  background: url('/wp-content/uploads/path/poster.jpg');
  background-size: auto;
  background-position: center center;
  background-repeat: none;
  overflow:hidden;
  position: relative;
  
}
*/
.video-wrapper {
  /* max-height: 480px; */
  position: relative;
 padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  display:block;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
   -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  -webkit-transition: 1.0s;
  filter: grayscale(0%);
  
  transition: 2s;

}

.video-sat {
  
   -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  -webkit-transition: 2s;
  filter: grayscale(100%);
  
}

.hero-video-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.hero-video-overlay-header {
  display: block;
  box-sizing: border-box;
  max-width: 80%;
  font-size: 60px;
  line-height: 66px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
}

@media screen and (max-width: 480px){
  .hero-video-overlay-header {
  font-size: 24px;
  line-height: 28px;
  }
  
}

@media screen and (max-width: 640px){
  .hero-video-overlay-header {
  font-size: 36px;
  line-height: 42px;
  max-width: 100%;
  }
}

.menu-feature-video {
  /* video on menu display page */
}

.mobile-nav-icon-wrap.scary-menu {
  text-align: left;
  padding-left: 20px;
}

.header {
  z-index: 1001;
  position: relative;
}

.header-logo {
  z-index: 10;
}

.new-top-nav li a, .new-top-nav li ul {
  position: relative;
  z-index: 1002;
}


/* NEW FILTERS */

.big-filter-wrap {
  width: 100%;
  margin: var(--s) 0;
}

.big-filter-head {
  font-family: var(--cubano);
  color: var(--brown);
  font-size: 1.2rem;
}

.big-filter {
  margin: var(--s);
  cursor: pointer;
}

.big-filter span.flavour-tag-icon-wrap {
  font-family: var(--robo);
  font-size: 1.2rem;
  color: var(--brown);
}

.big-filter .flavour-tag-icon {
  margin-top: -2px;
  margin-right: var(--unit);
  
}

.big-filter span.flavour-tag-icon-wrap.big-filter-label-only {
  color: var(--red);
}

.big-filter.tag-active {
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: var(--unit);
  text-decoration-color: var(--red)
}

#more-filters-container {
  display: none;
}

.filter-wrap {
  display: flex;
  flex-direction: row;
  width: 66.6666%;
  min-width: 400px;
  align-items: center;
  justify-content: center;
}

.filter-wrap.filter-checkboxes {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-width: 400px;
  align-items: center;
  justify-content: center;
}

.filter-title-wrap {
  width: 100%;
  display: flex;
  flex-direction: row;
  width: 400px;
  align-items: center;
  justify-content: left;
}

.filter-segment-label {
  font-family: var(--robo);
  font-size: 1.2rem;
  color: var(--brown);
}

.filter-segment-20 {
  width: 20%;
}

.filter-segment-80 {
  width: 80%;
}

.filter-segment-list {
  display: block;
  width: 100%;
  margin: 10px;
}

.filter-hint {
  font-size: 12px;
  text-transform: uppercase;
}

.filter-action {
 /* font-size: 12px;
  color: #fff;
  font-weight: bold; */
  text-align: center;
 /* width: 65px);
  padding: 5px;
  margin: 5px; */
 /*  border-radius: 4px; 
  background-color: #ccc; */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  float: right;
}

img.select-filter {
  width: 12px;
  height: auto;
  margin: 0 10px 0 0;
}

.filter-segment-label {
  font-size: 12px;
  text-transform: uppercase;
}


/*
.select-filter {
  width: 30px;
  height: auto;
  margin: 8px;
  margin-top: -6px;
}
*/

ul.select-filter-list {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

li.select-filter-list-item {
  font-family: var(--robo);
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  width: calc(25% - 10px);
  padding: 5px;
  margin: 5px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10002;
  position: relative;
}

li.select-filter-list-item:hover, .filter-action:hover {
  cursor: pointer;
  filter: brightness(90%);
}
/*

.filter-dairy {
  background-color: #0071F1;
}

.filter-vegan {
  background-color: #93cc7c;
}

.filter-gf {
  background-color: #cfab5e;
}

.filter-sf {
  background-color: #8a978a;
}

.filter-nas {
  background-color: #7fa9d9 ;
}

.filter-alcohol {
  background-color: #cf6b40;
}

.filter-halal {
  background-color: #e41a22;
}

.filter-kosher {
  background-color: #f6b227;
}

.filter-kosherp {
  background-color: #f8c152;
}

.filter-custard {
  background-color: #F7DE9F;
}

.filter-sorbet {
  background-color: #FF28C5;
}

.filter-annato {
  background-color: #FF6937;
}

.filter-pea {
  background-color: #CDCE57;
}

.filter-inactive {
  background-color: #cccccc;
}
*/

/* Filter Fake checkboxes */

.filter-wrap.filter-checkboxes .filter-segment-100 {
  width: 80%;
  min-width: 400px;
  display: flex;
  flex-direction: row;
}

.col-33 {
  width: 33.3333%;
}

.col-50 {
  width: 50%;
}

.filter-segment-list.select-dropdown-list {
  position: relative;
  width: 100%;
  /* padding: 0 8px; */
  padding: 0 var(--s);
  margin: 0;
  background: #fff;
}

.filter-segment-list.select-dropdown-list:first-child {
  padding-left: 0;
}


.chevron-icon {
  width: 16px;
  height: auto;
  display: none;
  float: right;
  margin-right: 5px;
 /* margin-top: 6px; */
 margin-top: 18px;
  fill: #4d3945;
}

.check-icon {
  width: 16px;
  height: auto;
  display: none;
  margin-left: 5px;
  margin-right: 10px;
  fill: #4d3945;
}

.chevron-icon:hover, .check-icon:hover {
   cursor: pointer;
  filter: brightness(90%);
}

.icon-active {
  display: inline-block;
}

.select-dropdown-list .filter-segment-label {
  color: #4d3945;
  font-size: 1.2rem;
  text-transform: none;
  height: 48px;
  line-height: 48px;
  padding-left: 5px;
  border: 1px solid #ccc;
  z-index: 100;
}

span.fine-print {
  margin-left: 5px;
  font-size: 10px;
  text-transform: uppercase;
}

.select-dropdown-list {
  position: relative;
}

.select-dropdown-list ul.select-filter-list {
  position: absolute;
  top: 24px;
  left: 0;
  background: #fff;
  flex-direction: column;
  border: 1px solid #ccc;
  margin-top: 33px;
  min-width: 300px;
  box-shadow: 6px 6px 20px -1px rgba(0,0,0,.35);
  display: none;
  z-index: 1010;
}


.select-dropdown-list li.select-filter-list-item {
  font-size: 1.2rem;
  color: #4d3945;
  font-weight: normal;
  text-align: left;
  width: 100%;
  padding: 5px;
  margin: 5px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: left;
}

.filter-title-wrap {
  display: block;
}

.filter-title-wrap .filter-title {
  display: inline-block;
  float: left;
  margin-top: 4px;
}

.filter-title-wrap .filter-action {
  display: inline-block;
  float: right;
}

/* updated homepage variant sections */

ul.variant-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}

li.variant-list-item {
  
}


/* filter options */
.filter-section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.filter-wrap {
  display: block;
}

.item-disabled {
 /* background: #ff0000!important;  */
}


.disabled-overlay {
  display: none;
  width: 200px;
  height: 200px;
  border-radius: 200px;
  background: rgba(200,200,200,.15);
  filter: grayscale(100%);
  position: absolute;
  margin-left: 35px;
  z-index: 110;
}



li.flavour-cabinet-item {
  background: #fff;
 /* filter: drop-shadow(5px 5px 10px #ccc); */
  border-radius: 4px;
}


li.flavour-cabinet-item.filter-option.item-disabled .disabled-overlay {
  display: block;
} 

li.flavour-cabinet-item.filter-option.item-disabled img, li.flavour-cabinet-item.filter-option.item-disabled .flavour-circle , li.flavour-cabinet-item.filter-option.item-disabled h3.card-title {
  /* grey out disabled flavours */
 filter: grayscale(100%);
 opacity: 0.3;
} 

li.flavour-cabinet-item.filter-option.item-disabled .flavour-circle {
  /* grey out disabled flavours */
 filter: grayscale(100%);
 opacity: 25%;
} 

@media screen and (max-width: 1280px){
  ul.flavour-cabinet li {
    width: 33.3333%!important;
  }
} /* 1280*/

@media screen and (max-width: 1024px){
  ul.flavour-cabinet li {
    width: 50%!important;
  }
} /* 1280*/


@media screen and (max-width: 767px){
  
  .big-filter-wrap {
    margin: 0;
  }
  
  .big-filter-wrap.flexy {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  #filter-all, #filter-more {
    width: 100%;
    text-align:center;
  }
  
  .big-filter-select {
    width: width: calc(50% - var(--s));
  }
  
  .big-filter {
    margin: var(--unit);
  }
  
  .scoops-cta.flexy {
    flex-direction: column;
  } 
  
  .scoops-cta a.buddon {
    width: 100%;
    text-align: center;
  }
  
  ul.flavour-cabinet li {
    width: 100%!important;
  }
  
  li.flavour-cabinet-item {
    margin: var(--s) 0;
  }
  
} /* 767 */


@media screen and (max-width: 480px){
  .section-inner {
    width: calc(100% - var(--unit));
  }
  
  #home-scoops .section-inner {
    width: calc(100% - var(--s));
  }
  
  .scoops-container, .flavours-container {
    padding: var(--s);
  }
  
  ul.flavour-cabinet li {
    width: 100%!important;
  }
  
  
} /* 480 */