/*disable input number styling*/
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}


/* background attachement fixed FIX - IE11*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
html{
    overflow: hidden;  
}
body{
    overflow: auto;
    height: 100%;
}
}



/*
  INDEX

  $1 -- Header
  $2 -- Homepage
  $3 -- List All Products
  $4 -- List Types
  $5 -- Detail Item
  $6 -- Generic
  $7 -- Timeline

*/






/* $1 -- Header */
/*
  ---
   Rotate texts to be sideways on the Header/Sidebar
   "Share" and "PT/EN Version"
  ---
*/
@media only screen and (min-width: 1280px) {
  .cHyx56jWjvW,
  .crkmgunbGoPZ {
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
    transform: rotate(-180deg);
  }
}


/*
  ---
   main nav wrapper element has display:none on editor
   force display:block, hz default and current displacement
  ---
*/
.cr1XS2VjDZ {
  display: block;
}

/*
  ---
   nav wrapper
   force correct display + hz default and current displacement
  ---
*/
/* 
.cSk5eTGddDvb{
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
}
.cSk5eTGddDvb.current{
  transform: translateX(0%);
} 
*/


/*
  ---
   main nav wrapper and meta nav wrapper
   changes behaviour for smaller brkpoints
  ---
*/
@media only screen and (max-width: 1279px) {
  .cHkxZy3ejwW {
    display: block;
    transform: translateX(-100%);
  }
  .cHkxZy3ejwW.current {
    transform: translateX(0%);
  }

  .cr1XS2VjDZ {
    display: block;
    transform: translateX(-100%);
  }
  .cr1XS2VjDZ.current {
    transform: translateX(0%);
  }
}






/* $2 -- Homepage */
/*
  ---
   Homepage Cinemagraph Cover
   positioning placeholder image and video
  ---
*/
.cB1CguLjwZ,
video#unicer-video {
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translate(-50%, -50%);
  position: absolute;
}

/*
  ---
   Animated straplines on cover
   cd-headline ------  cHyB4afbuPvd
   cd-words-wrapper  ---  crkPVafbdvvW
   b  ---  bl-text
  ---
*/
/*
*/
.crkPVafbdvvW {
  display: inline-block;
  position: relative;
  text-align: left;
}
.crkPVafbdvvW .bl-text {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
  left: 0;
  top: 0;
}
.crkPVafbdvvW .bl-text.is-visible {
  position: relative;
}

.cHyB4afbuPvd.slide .crkPVafbdvvW {
  display: inline-block;
  padding: .2em 0;
}
.cHyB4afbuPvd.slide .cd-words-wrapper {
  overflow: hidden;
  vertical-align: top;
}
.cHyB4afbuPvd.slide .bl-text {
  opacity: 0;
  top: .2em;
}
.cHyB4afbuPvd.slide .bl-text.is-visible {
  top: 0;
  opacity: 1;
  -webkit-animation: slide-in 0.6s;
  -moz-animation: slide-in 0.6s;
  animation: slide-in 0.6s;
}
.cHyB4afbuPvd.slide .bl-text.is-hidden {
  -webkit-animation: slide-out 0.6s;
  -moz-animation: slide-out 0.6s;
  animation: slide-out 0.6s;
}

@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes slide-in {
  0% {
    opacity: 0;
    -moz-transform: translateY(-100%);
  }
  60% {
    opacity: 1;
    -moz-transform: translateY(20%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}
@keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -ms-transform: translateY(20%);
    -o-transform: translateY(20%);
    transform: translateY(20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes slide-out {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateY(120%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
  }
}
@-moz-keyframes slide-out {
  0% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
  60% {
    opacity: 0;
    -moz-transform: translateY(120%);
  }
  100% {
    opacity: 0;
    -moz-transform: translateY(100%);
  }
}
@keyframes slide-out {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateY(120%);
    -moz-transform: translateY(120%);
    -ms-transform: translateY(120%);
    -o-transform: translateY(120%);
    transform: translateY(120%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
  }
}

/*
  ---
   calcs for some guides width on homepage
   default and brkpoints
  ---
*/
@media only screen and (max-width: 1023px) {
  .cr12emyAIODW, /*hz guides Beers*/
  .cSk3s6MWuDvd, /*hz guides Ciders*/
  .cS1XY6BqYuW /*hz guides Ciders*/ {
    width: calc(100vw - 136px);
  }
}

@media only screen and (max-width: 1279px) {
  .cr12emyAIODW, /*hz guides Beers*/
  .cSk3s6MWuDvd, /*hz guides Ciders*/
  .cS1XY6BqYuW /*hz guides Ciders*/ {
    width: calc(100vw - 208px);
  }
}

@media only screen and (min-width: 1280px) {
  /*hz guide on cover*/
  .cS1bVafbuDDW {
    width: calc(100vw - 244px);
  }
}

@media only screen and (max-width: 1588px) {
  .cr12emyAIODW, /*hz guides Beers*/
  .cSk3s6MWuDvd, /*hz guides Ciders*/
  .cS1XY6BqYuW /*hz guides Ciders*/ {
    width: calc(100vw - 348px);
  }
}

/*
  ---
   make images on Beers slider height responsive
  ---
*/
/*.cH16wwRgPZ .bl-slider-slide img { max-height: 100% }*/


/*
  ---
   map top and bottom white color fades
  ---
*/
.cry0HxafZuvPZ /*top*/{
  background: -webkit-linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255,0.8), rgba(255, 255, 255,1), rgb(255, 255, 255));
  background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255,0.8), rgba(255, 255, 255,1), rgb(255, 255, 255));
}
.cSyl8epzbdPDW /*bottom*/{
  background: -webkit-linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255,0.8), rgba(255, 255, 255,1), rgb(255, 255, 255));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255,0.8), rgba(255, 255, 255,1), rgb(255, 255, 255));
}

/*
  ---
   map grainy overlay texture
  ---
*/
.cr12BxTzZuvPZ { pointer-events: none; }






/* $3 -- List All Products */
/*
  ---
   list images, center images and make them height responsive
   THIS CLASSES ARE SHARES STYLES
   USED IN EVERY PRODUCT LIST
   NO MATTER WHERE THEY EXIST (List Types and Detail Item)
  ---
*/

.cBJrldbr4VdZ,
.cSJGV8dQtb {
 /* left:50%; */
 /* transform: translateX(-50%);*/
  text-align: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 1, 1) 0.2s;
} 

.cBJrldbr4VdZ img,
.cSJGV8dQtb img, {
  max-height: 100%;
  display: inline-block !important;
}


/* $5 -- Detail Item */
/*
  ---
   create faux left side on detail related grid
   to fill with white if needed
  ---
*/

.cSJldpvuOZ {
  position: relative;
  overflow:visible;
}

.cSJldpvuOZ:before {
  content: '';
  position: absolute;
  top:0;
  right:100%;
  height:100%;
  width:100%;
  background-color: white;
}



/*
  ---
   manage guides visibility on related list
   list item Dynamic Visibility: feature not working
  ---
*/
/*hide v guide on every 4th item*/
.cSJldpvuOZ > .bl-grid-items > .bl-grid-cell:nth-child(4n+4) .cB1eZu4KuuZ {
  display:none;
}
/*show h guide on every 1st and 4th item*/
.cSJldpvuOZ > .bl-grid-items > .bl-grid-cell:nth-child(4n+4) .cH1elXFYdud {
  display:block;
  right:auto;
  left:0;
}
.cSJldpvuOZ > .bl-grid-items > .bl-grid-cell:nth-child(4n+3) .cH1elXFYdud {
  display:block;
}






/* $6 -- Generic */
/*
  ---
   Scroll Down Tip
  ---
*/
@keyframes slide-up {
  0% {
    transform:translateY(100%);
  }
  100% {
    transform:translateY(0%);
  }
}
.cBkzI6oyXFb{
  transform:translateY(100%);
  animation: slide-up 0.25s ease-out 2.5s forwards;
}

/*
  ---
   Cover submenu Panel entry animation
  ---
*/
@keyframes slide-left {
  0% {
    transform:translateX(-100%);
  }
  100% {
    transform:translateX(0%);
  }
}
.cS10venJQKZ {
  transform:translateX(-100%);
  animation: slide-left 0.35s ease-out 0.25s forwards;
}

/*
  ---
   Cover Background Images
   trying to change background-attachment:fixed for mobile devices
   IMPLEMENT WITH JAVASCRIPT???
  ---
*/


/*.cBkHlue317td,
.cS10venJQKZ {
  background-size: cover;
  background-position: 50% 50%;
  background-attachment: initial;
}*/

@media only screen and (max-width: 1024px) {
.cBkHlue317td /*original image*/,
.cS10venJQKZ /*colored image*/ {
    background-size: cover;
    background-position: 50% 50%;
    background-attachment: initial;
  }
}

/*
@supports (background-attachment: fixed) {
  .cBkHlue317td,
  .cS10venJQKZ{
    background-size: cover;
    background-position: 50% 50%;
    background-attachment: fixed;
  }
}
*/






/* $7 -- Timeline */

/*
  ---
   make all images grayscale
   and change on hover
  ---
*/
.cr1e8CY5CFZ img,
.cB11lx2jcRtW img { filter: grayscale(1); }

.cr1e8CY5CFZ.hover img,
.cB11lx2jcRtW.hover img { filter: grayscale(0); }

/*
  ---
   vertical center text block on decade milestones wiht photo
  ---
*/
@media only screen and (min-width: 1024px){
  .cSJUu0qCJcZ,
  .cr1U7znR1qW {
    top:50%;
    transform: translate(-50%, -50%);
  }
}

/*
  ---
   vertical center year on decade milestones wiht photo and no photo
  ---
*/
@media only screen and (max-width: 1023px){
  .cHyq7f2Cy9Z,
  .cBk5O05Ck5d {
    top: 3rem;
    left: 50%;
    right:auto;
    bottom: auto;
    transform: translate(-50%, 0%);
  }
  .cHkqKyenRKd,
  .cryVy2s5RKW {
    top: 50%;
    left: 50%;
    right:auto;
    bottom: auto;
    transform: translate(-50%, -50%);
  }
}


/*
  ---
   images gradient mask
  ---
*/
@media only screen and (min-width: 1024px){
  .cHJuScc0td {
    background: -webkit-linear-gradient(to left, rgba(0, 0, 0, 0.3), rgba(0, 0, 0,0.8));
    background: linear-gradient(to left, rgba(0, 0, 0, 0.3), rgba(0, 0, 0,0.8));
  }
  .cBJZxenscRFW {
    background: -webkit-linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0,0.8));
    background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0,0.8));
  }
}
@media only screen and (max-width: 1023px){
  .cB11lx2jcRtW:after {
    content:'';
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    display: block;
    background: -webkit-linear-gradient(to left, rgba(0, 0, 0, 0.3), rgba(0, 0, 0,0.8));
    background: linear-gradient(to left, rgba(0, 0, 0, 0.3), rgba(0, 0, 0,0.8));
  }
  .cr1e8CY5CFZ:after {
    content:'';
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    display: block;
    background: -webkit-linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0,0.8));
    background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0,0.8));
  }
}

@media only screen and (max-width: 767px){
  .cB11lx2jcRtW:after {
    background: -webkit-linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0,0.8));
    background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0,0.8));
  }
  .cr1e8CY5CFZ:after {
    background: -webkit-linear-gradient(to left, rgba(0, 0, 0, 0.3), rgba(0, 0, 0,0.8));
    background: linear-gradient(to left, rgba(0, 0, 0, 0.3), rgba(0, 0, 0,0.8));
  }
}

/*
  ---
   center item snippet
  ---
*/
.cH1mVZggcd {
  top:50%;
  left:50%;
  right:auto;
  bottom:auto;
  transform: translate(-50%, -50%);
}

/*.cH1mVZggcd img{ max-height:100%; }*/

/*
  ---
   animate image overlay
  ---
*/

/*.cH1mVZggcd — item snippet*/
/*.cByPwWlx5b — item snippet image*/

@keyframes overlay-in {
  0% {
    transform: scale(0.95);
    transform-origin: 50% 50%;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.5)
  }
  100% {
    transform: scale(1);
    transform-origin: 50% 50%;
    box-shadow: 0 2px 50px 0 rgba(0,0,0,0.5)
  }
}


.cH1mVZggcd .cByPwWlx5b {
  transform: scale(0.95);
  transform-origin: 50% 50%;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.5)
}
.cH1mVZggcd.current .cByPwWlx5b {
   animation:  overlay-in 0.25s ease-out 0s forwards;
}

.cH1TQg6fWuPwW, .cSJdNlpz-uww-, .cBy5NepzduwPb {
pointer-events: none;
}



input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;} 

input[type=number] {-moz-appearance: textfield;}