/* ----------------------------------------------------------------
    2. VARIABLES
 * ---------------------------------------------------------------- */
/* Styles */
#root .color-main {
  color: #009390; }

#root .color-second,
#root .color-secondary {
  color: #333; }

#root .color-grey {
  color: #919191; }

#root .color-red {
  color: #e30613; }

#root .color-white {
  color: #fff; }

#root .color-link {
  color: #009390; }

#root .color-violet {
  color: #52378a; }

#root .no-margin {
  margin: 0; }

#root .no-wrap {
  white-space: nowrap; }

#root .lower {
  text-transform: none; }

#root .left-text {
  text-align: left; }

.bigger {
  font-size: 1.352em; }

.smaller {
  font-size: .8em; }

.bg-grey {
  background: #fafafa;
  margin-bottom: -10px; }

.link-block {
  display: block; }
  .link-block:hover {
    text-decoration: none; }

.text-justify p {
  text-align: justify; }

#root .lazy-carousel,
#root .lazy-category {
  display: none; }

/*
 *
 *  VML Library v1.0
 *  Mixins
 *
 *  $author    Marcin Pajak
 *  $copyright Copyright (C) 2013 VML Poland
 *             All rights reserved.
 *
 */
.caret-base {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: top; }

/*
.bg($path){
    background-image: ~"url('${bgPath}${path}')"; }

.bg($path,$repeat){
    background: ~"url('${bgPath}${path}')" 0 0 $repeat; }

.bg($path,$posx,$posy){
    background: ~"url('${bgPath}${path}')" $posx $posy no-repeat; }

.bg($path,$posx,$posy,$repeat){
    background: ~"url('${bgPath}${path}')" $posx $posy $repeat; }

.bg($path,$posx,$posy,$repeat,$color){
    background: ~"url('${bgPath}${path}')" $posx $posy $repeat $color; }

.bgx($path){
    background: ~"url('${bgPath}${path}')" 0 0 repeat-x; }

.bgy($path){
    background: ~"url('${bgPath}${path}')" 0 0 repeat-y; }

.font($size) {
    font-size: $size !important; }

.color($color) {
    color: $color !important; }
  
.caret-base() {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: top; }
  
.caret($color,$size,$pos) when ($pos = right) {
    .caret-base;
    border-left:  $size solid $color;
    border-bottom: $size solid transparent;
    border-top:  $size solid transparent;}
  
.caret($color,$size,$pos) when ($pos = left) {
    .caret-base;
    border-right:  $size solid $color;
    border-bottom: $size solid transparent;
    border-top:  $size solid transparent; }  
  
.caret($color,$size,$pos) when ($pos = top) {
    .caret-base;
    border-bottom:  $size solid $color;
    border-left: $size solid transparent;
    border-right:  $size solid transparent; }  
    
.caret($color,$size,$pos) when ($pos = bottom) {
    .caret-base;
    border-top:  $size solid $color;
    border-left: $size solid transparent;
    border-right:  $size solid transparent; } 
  

.absolute-middle($height) {
    height: $height;
    margin-top: -$height/2;
    position: absolute;
    top: 50%; }

.absolute-center($size) {
    height: $size;
    left: 50%;
    margin-left: -$size/2;
    margin-top: -$size/2;
    position: absolute;
    top: 50%;
    width: $size;  }

.absolute-center($height,$width) {
    height: $height;
    left: 50%;
    margin-left: -$width/2;
    margin-top: -$height/2;
    position: absolute;
    top: 50%;
    width: $width;  }

.icon-size($size){
    height: $size;
    line-height: $size;
    width: $size; }

.icon-size($height,$width){
    height: $height;
    line-height: $height;
    width: $width; }

.border-radius($radius) {
    border-radius: $radius;}

.max-width($percents) {
    margin-left: auto;
    margin-right: auto;
    max-width: $percents; }  

.transition($rule,$time,$easing) {
   -webkit-transition: $rule $time $easing;
   -moz-transition: $rule $time $easing;
   -o-transition: $rule $time $easing;
   -ms-transition: $rule $time $easing;
   transition: $rule $time $easing  }  

.disable-select() {
    -webkit-user-select: none;
    -moz-user-select: none; 
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none; }  

// Based on Bootstrap
.clearfix {
    *zoom: 1;
    &:before,
    &:after {
        display: table;
        content: "";
        line-height: 0;
    }

    &:after {
        clear: both;
    }
}

.tab-focus() {
    outline: thin dotted #333;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.center-block() {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.ie7-inline-block() {
    *display: inline; 
    *zoom: 1;
}

.ie7-restore-left-whitespace() {
    *margin-left: .3em;

    &:first-child {
        *margin-left: 0;
    }
}

.ie7-restore-right-whitespace() {
    *margin-right: .3em;
}

// Drop shadows
.box-shadow($shadow) {
  -webkit-box-shadow: $shadow;
     -moz-box-shadow: $shadow;
          box-shadow: $shadow;
}

// Transitions
.transition($transition) {
  -webkit-transition: $transition;
     -moz-transition: $transition;
       -o-transition: $transition;
          transition: $transition;
}
.transition-delay($transition-delay) {
  -webkit-transition-delay: $transition-delay;
     -moz-transition-delay: $transition-delay;
       -o-transition-delay: $transition-delay;
          transition-delay: $transition-delay;
}

// Transformations
.rotate($degrees) {
  -webkit-transform: rotate($degrees);
     -moz-transform: rotate($degrees);
      -ms-transform: rotate($degrees);
       -o-transform: rotate($degrees);
          transform: rotate($degrees);
}
.scale($ratio) {
  -webkit-transform: scale($ratio);
     -moz-transform: scale($ratio);
      -ms-transform: scale($ratio);
       -o-transform: scale($ratio);
          transform: scale($ratio);
}
.translate($x, $y) {
  -webkit-transform: translate($x, $y);
     -moz-transform: translate($x, $y);
      -ms-transform: translate($x, $y);
       -o-transform: translate($x, $y);
          transform: translate($x, $y);
}
.skew($x, $y) {
  -webkit-transform: skew($x, $y);
     -moz-transform: skew($x, $y);
      -ms-transform: skewX($x) skewY($y); // See https://github.com/twitter/bootstrap/issues/4885
       -o-transform: skew($x, $y);
          transform: skew($x, $y);
  -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
}
.translate3d($x, $y, $z) {
  -webkit-transform: translate3d($x, $y, $z);
     -moz-transform: translate3d($x, $y, $z);
       -o-transform: translate3d($x, $y, $z);
          transform: translate3d($x, $y, $z);
}

// Opacity
.opacity($opacity) {
    opacity: $opacity / 100;
    filter: ~"alpha(opacity=${opacity})"; }

.placeholder($color: $placeholderText) {
    &:-moz-placeholder {
      color: $color; }
    
    &:-ms-input-placeholder {
      color: $color; }
    
    &::-webkit-input-placeholder {
      color: $color; }
}
*/
.wod-scene {
  overflow: hidden; }

.wod-scene-video video {
  width: 100%;
  top: 50%;
  position: absolute;
  left: 0;
  -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
       -o-transform: translateY(-50%);
          transform: translateY(-50%); }

.wod-scene-video audio {
  display: none; }

.wod-skip-intro {
  color: #fff;
  position: absolute;
  bottom: 10px;
  right: 25px; }

.wod-start-btn {
  color: #fff;
  border: 1px solid #fff;
  -webkit-border-radius: 20px;
          border-radius: 20px;
  display: inline-block;
  padding: 6px 25px;
  font-size: 12px;
  -webkit-box-shadow: inset 0px 0px 45px 0px #fff;
          box-shadow: inset 0px 0px 45px 0px #fff; }
  .wod-start-btn:hover {
    color: #fff; }

.wod-scene-intro-splash {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("/PalmoliveEU/Equity/v2/common/gfx/wod/intro.png") center center no-repeat;
  -o-background-size: cover;
     background-size: cover; }
  .wod-scene-intro-splash > p {
    color: #fff;
    font-style: italic;
    margin: 0;
    font-size: 30px;
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.5);
    padding-top: 230px; }
  .wod-scene-intro-splash > ul {
    color: #fff;
    position: relative;
    margin-bottom: 45px; }
    .wod-scene-intro-splash > ul li {
      font-size: 17px;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      text-align: center;
      -webkit-transition: all 300ms;
         -moz-transition: all 300ms;
           -o-transition: all 300ms;
              transition: all 300ms;
      opacity: 0; }
      .wod-scene-intro-splash > ul li.active {
        opacity: 1; }

.wod-container .icon-sound {
  background-position: 0 -22px; }
  .wod-container .icon-sound.muted {
    background-position: 0 0; }

.wod-link {
  text-transform: initial; }

.point {
  background: transparent; }

.point-item:hover .point-iris, .point-item.is-active .point-iris, .no-touch .point-item:hover .point-iris {
  background: rgba(144, 89, 202, 0.62); }

.point-item:hover .point-rose, .point-item.is-active .point-rose, .no-touch .point-item:hover .point-rose {
  background: rgba(232, 138, 174, 0.72); }

.point-item:hover .point-orchid, .point-item.is-active .point-orchid, .no-touch .point-item:hover .point-orchid {
  background: rgba(193, 97, 146, 0.7); }

.point-item:hover .point-jasmine, .point-item.is-active .point-jasmine, .no-touch .point-item:hover .point-jasmine {
  background: rgba(210, 208, 191, 0.75); }

.point-item:hover .point-honey, .point-item.is-active .point-honey, .no-touch .point-item:hover .point-honey {
  background: rgba(240, 197, 60, 0.74); }

.point-item:hover .point-raspberry, .point-item.is-active .point-raspberry, .no-touch .point-item:hover .point-raspberry {
  background: rgba(197, 55, 72, 0.74); }

.point-item:hover .point-fig, .point-item.is-active .point-fig, .no-touch .point-item:hover .point-fig {
  background: rgba(97, 68, 84, 0.77); }

.point-item:hover .point-mint, .point-item.is-active .point-mint, .no-touch .point-item:hover .point-mint {
  background: rgba(135, 169, 43, 0.76); }

.point-item:hover .point-almond, .point-item.is-active .point-almond, .no-touch .point-item:hover .point-almond {
  background: rgba(186, 106, 74, 0.75); }

.point-item:hover .point-argan, .point-item.is-active .point-argan, .no-touch .point-item:hover .point-argan {
  background: rgba(214, 170, 129, 0.75); }

.point-item:hover .point-olive, .point-item.is-active .point-olive, .no-touch .point-item:hover .point-olive {
  background: rgba(206, 174, 75, 0.75); }

.point-item:hover .point-algae, .point-item.is-active .point-algae, .no-touch .point-item:hover .point-algae {
  background: rgba(73, 177, 123, 0.75); }

.point-item:hover .point-bamboo, .point-item.is-active .point-bamboo, .no-touch .point-item:hover .point-bamboo {
  background: rgba(128, 199, 2, 0.75); }

.point-item:hover .point-lotus, .point-item.is-active .point-lotus, .no-touch .point-item:hover .point-lotus {
  background: rgba(195, 169, 187, 0.75); }

.point-item:hover .point-minerals, .point-item.is-active .point-minerals, .no-touch .point-item:hover .point-minerals {
  background: rgba(186, 182, 190, 0.75); }