/* -------------------------------------------------------------
  Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library
  By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets

  List of CSS3 Sass Mixins File to be @imported and @included as you need

  The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER
  ENDING css files

  note: All CSS3 Properties are being supported by Safari 5
  more info: http://www.findmebyip.com/litmus/#css3-properties

  Mixins available:
    -   css3-prefix             - arguments: Property, Value
    -   background-gradient     - arguments: Start Color: #3C3C3C, End Color: #999999
    -   background-horizontal   - arguments: Start Color: #3C3C3C, End Color: #999999
    -   background-radial       - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100%
    -   background-size         - arguments: Width: 100%, Height: 100%
    -   background-opacity      - arguments: Color: #000, Opacity: .85
    -   border-radius           - arguments: Radius: 5px
    -   border-radius-separate  - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px
    -   box                     - arguments: Orientation: horizontal, Pack: center, Align: center
    -   box-rgba                - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C
    -   box-shadow              - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4)
    -   box-sizing              - arguments: Type: border-box
    -   columns                 - arguments: Count: 3, Gap: 10
    -   double-borders          - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0
    -   flex                    - arguments: Value: 1
    -   flip                    - arguments: ScaleX: -1
    -   font-face               - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf
    -   opacity                 - arguments: Opacity: 0.5
    -   outline radius          - arguments: Radius: 5px
    -   resize                  - arguments: Direction: both
    -   rotate                  - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0
    CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html
    -   text-shadow             - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4)
    -   transform               - arguments: Parameters: null
    -   transform-style         - arguments: Style: preserve-3d
    -   transition              - Default arguments: What: all, Length: 1s, Easing: ease-in-out
    -                            - Examples: @include transition (all 2s ease-in-out);
    -                                        @include transition (opacity 1s ease-in 2s, width 2s ease-out);
    -   triple-borders          - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0
    -   keyframes               - arguments: Animation name
                                - content:   Animation css
    -   animation               - arguments: name duration timing-function delay iteration-count direction fill-mode play-state
                                             (http://www.w3schools.com/cssref/css3_pr_animation.asp)

------------------------------------------------------------- */
/* ADDS A BROWSER PREFIX TO THE PROPERTY */
/* BACKGROUND GRADIENT */
/* BACKGROUND HORIZONTAL */
/* BACKGROUND RADIAL */
/* BACKGROUND SIZE */
/* BACKGROUND COLOR OPACITY */
/* BORDER RADIUS */
/* BOX */
/* BOX RGBA */
/* BOX SHADOW */
/* BOX SIZING */
/* COLUMNS */
/* DOUBLE BORDERS */
/* FLEX */
/* FLIP */
/* FONT FACE */
/* OPACITY */
/* OUTLINE RADIUS */
/* RESIZE */
/* ROTATE*/
/* TEXT SHADOW */
/* TRANSFORM  */
/* TRANSFORM STYLE */
/* TRANSITION */
/* TRIPLE BORDERS */
/* KEYFRAMES */
/* ANIMATION */
.loader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: #fff;
  text-align: center;
  font-size: 2em; }
  .loader .fa {
    position: absolute;
    top: 50%;
    margin-top: -22px;
    margin-left: -17px; }

.fa {
  color: #737373; }

.cart-notice, #breadcrumb {
  display: none; }

#main-content .container {
  width: 100%;
  float: left;
  height: 100%;
  position: relative;
  max-width: 100%;
  padding: 0; }

.shadow {
  position: relative;
  -webkit-box-shadow: 0px, 0px, 14px, rgba(62, 62, 62, 0.2);
  -khtml-box-shadow: 0px, 0px, 14px, rgba(62, 62, 62, 0.2);
  -moz-box-shadow: 0px, 0px, 14px, rgba(62, 62, 62, 0.2);
  -ms-box-shadow: 0px, 0px, 14px, rgba(62, 62, 62, 0.2);
  -o-box-shadow: 0px, 0px, 14px, rgba(62, 62, 62, 0.2);
  box-shadow: 0px, 0px, 14px, rgba(62, 62, 62, 0.2);
  -webkit-border-radius: 5px 2px 2px 5px;
  -khtml-border-radius: 5px 2px 2px 5px;
  -moz-border-radius: 5px 2px 2px 5px;
  -ms-border-radius: 5px 2px 2px 5px;
  -o-border-radius: 5px 2px 2px 5px;
  border-radius: 5px 2px 2px 5px; }
  .shadow .up {
    position: relative;
    z-index: 10; }
  .shadow:before, .shadow:after {
    content: '';
    border: 1px solid #737373;
    background: #fff;
    -webkit-border-radius: 2px;
    -khtml-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    position: absolute;
    bottom: -2px;
    top: 2px;
    right: -2px;
    z-index: 5;
    left: 2px;
    -webkit-transition: all, 0.2s, ease;
    -khtml-transition: all, 0.2s, ease;
    -moz-transition: all, 0.2s, ease;
    -ms-transition: all, 0.2s, ease;
    -o-transition: all, 0.2s, ease;
    transition: all, 0.2s, ease; }
  .shadow:after {
    bottom: -4px;
    top: 4px;
    right: -4px;
    z-index: 1;
    left: 4px; }
  .shadow:hover:before, .shadow:hover:after {
    right: 0;
    left: 0;
    bottom: 0;
    top: 0; }

.flyers {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 17%;
  border-left: 1px solid #737373;
  background-color: #f8f8f8;
  padding: 2em;
  overflow: hidden;
  font-family: 'Biryani', sans-serif;
  z-index: 10;
  display: none; }
  .flyers h2 {
    margin: 0 0 .5em;
    padding: 0;
    font-size: 1em; }
  .flyers .flyer {
    display: block;
    width: 100%;
    padding-bottom: 120%;
    border: 1px solid #7F7F7F;
    background: #fff;
    font-size: .775em;
    text-decoration: none;
    color: #0d82e3;
    position: relative;
    font-weight: 400;
    margin-bottom: 2em;
    overflow: hidden;
    -webkit-border-radius: 5px 2px 2px 5px;
    -khtml-border-radius: 5px 2px 2px 5px;
    -moz-border-radius: 5px 2px 2px 5px;
    -ms-border-radius: 5px 2px 2px 5px;
    -o-border-radius: 5px 2px 2px 5px;
    border-radius: 5px 2px 2px 5px; }
    .flyers .flyer:before {
      content: '';
      display: block;
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, transparent 20%);
      background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, transparent 20%);
      background: linear-gradient(to right, rgba(0, 0, 0, 0.4) 0%, transparent 20%);
      -webkit-transition: all, 0.3s, ease;
      -khtml-transition: all, 0.3s, ease;
      -moz-transition: all, 0.3s, ease;
      -ms-transition: all, 0.3s, ease;
      -o-transition: all, 0.3s, ease;
      transition: all, 0.3s, ease;
      z-index: 10; }
    .flyers .flyer span {
      display: block;
      position: absolute;
      text-align: center; }
    .flyers .flyer .name {
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 1em 1em .8em;
      color: #fff;
      background: rgba(0, 0, 0, 0.7);
      line-height: 1;
      z-index: 0; }
    .flyers .flyer .image {
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      background-position: center center;
      background-repeat: no-repeat;
      -webkit-background-size: cover;
      -khtml-background-size: cover;
      -moz-background-size: cover;
      -ms-background-size: cover;
      -o-background-size: cover;
      background-size: cover; }
    .flyers .flyer:hover:before {
      background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.1) 0%, transparent 10%);
      background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.1) 0%, transparent 10%);
      background: linear-gradient(to right, rgba(0, 0, 0, 0.1) 0%, transparent 10%); }

.flip-bar {
  width: 100%;
  border-width: 1px 0;
  float: left;
  font-size: 1em;
  padding: .3em .5em;
  border-bottom: 1px solid #f1f1f1;
  background: #76addb; }
  .flip-bar .fa {
    font-size: .675em;
    position: relative;
    top: -2px;
    color: #fff; }
  .flip-bar .flip-logo {
    width: 20%;
    float: left;
    height: 2em;
    line-height: 1.5em;
    padding-left: 1em; }
    .flip-bar .flip-logo img {
      max-width: 8em; }
  .flip-bar .flip-controls {
    width: 80%;
    float: left;
    text-align: right; }
    .flip-bar .flip-controls .flip-nav-all {
      display: none !important; }
    .flip-bar .flip-controls h1 {
      font-size: .775em;
      margin: 0;
      padding: 0 1em;
      line-height: 1;
      display: inline-block;
      position: relative;
      top: -2px; }
    .flip-bar .flip-controls .but {
      display: inline-block;
      border: none;
      cursor: pointer;
      width: 2em;
      height: 2em;
      line-height: 2em;
      text-align: center;
      -webkit-transition: all, 0.3s, ease;
      -khtml-transition: all, 0.3s, ease;
      -moz-transition: all, 0.3s, ease;
      -ms-transition: all, 0.3s, ease;
      -o-transition: all, 0.3s, ease;
      transition: all, 0.3s, ease; }
      .flip-bar .flip-controls .but .fa {
        -webkit-transition: all, 0.3s, ease;
        -khtml-transition: all, 0.3s, ease;
        -moz-transition: all, 0.3s, ease;
        -ms-transition: all, 0.3s, ease;
        -o-transition: all, 0.3s, ease;
        transition: all, 0.3s, ease; }
      .flip-bar .flip-controls .but:hover {
        text-decoration: none; }
        .flip-bar .flip-controls .but:hover .fa {
          color: #000; }
    .flip-bar .flip-controls .flip-nav-pagination {
      display: inline-block;
      font-size: .775em;
      vertical-align: top;
      padding: 0 1em;
      width: auto;
      height: 2.575em;
      line-height: 2.575em;
      text-align: center; }

.flip-view {
  width: 100%;
  clear: both;
  position: absolute;
  top: 120px;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 1em;
  overflow: hidden; }
  .flip-view .flip-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 200;
    background: rgba(255, 255, 255, 0.8);
    overflow-x: scroll;
    display: none; }
    .flip-view .flip-menu ul {
      display: block;
      white-space: nowrap;
      position: absolute;
      top: 50%;
      left: 0;
      margin-top: -15%; }
      .flip-view .flip-menu ul li {
        width: 10%;
        margin: 1%;
        display: inline-block; }
        .flip-view .flip-menu ul li div {
          display: none; }
        .flip-view .flip-menu ul li a {
          display: block;
          width: 100%;
          border: 1px solid #7F7F7F;
          background: #fff;
          font-size: .775em;
          text-decoration: none;
          color: #0d82e3;
          position: relative;
          font-weight: 400;
          overflow: hidden;
          -webkit-border-radius: 5px 2px 2px 5px;
          -khtml-border-radius: 5px 2px 2px 5px;
          -moz-border-radius: 5px 2px 2px 5px;
          -ms-border-radius: 5px 2px 2px 5px;
          -o-border-radius: 5px 2px 2px 5px;
          border-radius: 5px 2px 2px 5px;
          -webkit-transition: scale, 0.2s, ease;
          -khtml-transition: scale, 0.2s, ease;
          -moz-transition: scale, 0.2s, ease;
          -ms-transition: scale, 0.2s, ease;
          -o-transition: scale, 0.2s, ease;
          transition: scale, 0.2s, ease; }
          .flip-view .flip-menu ul li a img {
            max-width: 100%; }
          .flip-view .flip-menu ul li a span {
            display: inline-block;
            position: absolute;
            bottom: 1em;
            left: 0;
            right: 0;
            font-weight: 600;
            font-size: .875em;
            padding: 1em 0;
            text-align: center;
            background: #fff; }
        .flip-view .flip-menu ul li:hover a {
          -webkit-transform: scale(1.3);
          -khtml-transform: scale(1.3);
          -moz-transform: scale(1.3);
          -ms-transform: scale(1.3);
          -o-transform: scale(1.3);
          transform: scale(1.3); }
  .flip-view .flip-viewer {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto; }
  .flip-view .img-wrap {
    position: relative;
    overflow: hidden; }
  .flip-view .flip-nav-prev, .flip-view .flip-nav-next {
    display: block;
    height: 100%;
    width: 2em;
    position: absolute;
    top: 0;
    left: -2em;
    text-align: center;
    cursor: pointer;
    -webkit-transition: all, 0.3s, ease;
    -khtml-transition: all, 0.3s, ease;
    -moz-transition: all, 0.3s, ease;
    -ms-transition: all, 0.3s, ease;
    -o-transition: all, 0.3s, ease;
    transition: all, 0.3s, ease; }
    .flip-view .flip-nav-prev .fa, .flip-view .flip-nav-next .fa {
      position: absolute;
      top: 50%;
      margin-top: -1em;
      text-align: center;
      left: 50%;
      margin-left: -.4em; }
    .flip-view .flip-nav-prev:hover, .flip-view .flip-nav-next:hover {
      background-color: rgba(115, 115, 115, 0.75); }
      .flip-view .flip-nav-prev:hover .fa, .flip-view .flip-nav-next:hover .fa {
        color: #fff; }
  .flip-view .flip-nav-prev {
    -webkit-border-radius: 10px 0 0 10px;
    -khtml-border-radius: 10px 0 0 10px;
    -moz-border-radius: 10px 0 0 10px;
    -ms-border-radius: 10px 0 0 10px;
    -o-border-radius: 10px 0 0 10px;
    border-radius: 10px 0 0 10px; }
  .flip-view .flip-nav-next {
    left: auto;
    right: -2em;
    -webkit-border-radius: 0 10px 10px 0;
    -khtml-border-radius: 0 10px 10px 0;
    -moz-border-radius: 0 10px 10px 0;
    -ms-border-radius: 0 10px 10px 0;
    -o-border-radius: 0 10px 10px 0;
    border-radius: 0 10px 10px 0; }
    .flip-view .flip-nav-next .fa {
      margin-left: -.3em; }

a.pin {
  position: absolute;
  z-index: 2000;
  display: block;
  width: 25px;
  height: 25px;
  margin-left: -15px;
  margin-top: -15px;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #fff;
  background-image: url("/content/img/marker.png");
  -webkit-box-shadow: 0px, 0px, 10px, #0d82e3;
  -khtml-box-shadow: 0px, 0px, 10px, #0d82e3;
  -moz-box-shadow: 0px, 0px, 10px, #0d82e3;
  -ms-box-shadow: 0px, 0px, 10px, #0d82e3;
  -o-box-shadow: 0px, 0px, 10px, #0d82e3;
  box-shadow: 0px, 0px, 10px, #0d82e3;
  -webkit-border-radius: 100%;
  -khtml-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  -webkit-transition: all, 0.3s, ease;
  -khtml-transition: all, 0.3s, ease;
  -moz-transition: all, 0.3s, ease;
  -ms-transition: all, 0.3s, ease;
  -o-transition: all, 0.3s, ease;
  transition: all, 0.3s, ease;
  -webkit-background-size: 100% auto;
  -khtml-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -ms-background-size: 100% auto;
  -o-background-size: 100% auto;
  background-size: 100% auto; }
  a.pin img {
    max-width: 100%;
    max-height: 100%; }
  a.pin:hover {
    -webkit-box-shadow: 0px, 0px, 10px, #0d82e3;
    -khtml-box-shadow: 0px, 0px, 10px, #0d82e3;
    -moz-box-shadow: 0px, 0px, 10px, #0d82e3;
    -ms-box-shadow: 0px, 0px, 10px, #0d82e3;
    -o-box-shadow: 0px, 0px, 10px, #0d82e3;
    box-shadow: 0px, 0px, 10px, #0d82e3;
    -webkit-transform: scale(1.4);
    -khtml-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -ms-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4); }

#fliphere .product {
  position: absolute;
  width: auto;
  z-index: 2000;
  background: transparent;
  height: auto;
  float: none;
  display: inline-block;
  margin-left: -12px;
  margin-top: -1.5em;
  font-size: .675em; }
  #fliphere .product.inlist {
    width: 60px; }
  #fliphere .product .product-action-controls .product-quantity {
    font-size: 1em; }
  #fliphere .product .action-add-product {
    padding: 1px 6px 3px 9px;
    font-size: 1.5em; }
    #fliphere .product .action-add-product .icon img {
      max-width: 100%;
      max-height: 100%; }
  #fliphere .product .product-action-wrap-button {
    box-shadow: 0px 0px 0px 1px #f9e039, 0px 0px 10px 4px #333;
    width: 100%; }
    #fliphere .product .product-action-wrap-button:before {
      display: none; }

#fliphere .zoom-panel .product {
  font-size: 1em;
  width: 120px;
  margin-top: -3em;
  margin-left: -60px; }
  #fliphere .zoom-panel .product .action-add-product {
    padding: 3px 10px 3px 14px;
    font-size: 1.5em; }

.flip-bar {
  display: none; }

.flip-adv-cover {
  text-align: center;
  display: table;
  vertical-align: middle;
  font-size: .875em; }
  .flip-adv-cover img {
    max-width: 30% !important;
    margin-right: -20%; }
  .flip-adv-cover .flip-cover-block {
    display: table-cell;
    vertical-align: middle;
    padding: 1em; }
  .flip-adv-cover h3 {
    color: #257cc4;
    display: block;
    line-height: 1.2;
    font-size: 2em;
    font-family: "Sarala", sans-serif; }
  .flip-adv-cover ol {
    font-size: 1.5em;
    list-style: none;
    margin: 0;
    padding: 0; }
    .flip-adv-cover ol li {
      -webkit-border-radius: 10px;
      -khtml-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px;
      border-radius: 10px;
      padding: .6em;
      font-family: "Sarala", sans-serif;
      font-weight: bold;
      margin: 0 auto;
      line-height: 1.2; }
      .flip-adv-cover ol li span {
        display: inline-block;
        position: relative; }
        .flip-adv-cover ol li span:before {
          content: '';
          position: absolute;
          left: 0;
          bottom: -6px;
          height: 6px;
          -webkit-border-radius: 10px;
          -khtml-border-radius: 10px;
          -moz-border-radius: 10px;
          -ms-border-radius: 10px;
          -o-border-radius: 10px;
          border-radius: 10px;
          background-color: #f9e039;
          width: 100%;
          display: block; }

.touchevents #fliphere .zoom-panel .product {
  font-size: .775em;
  width: 100px; }

.touchevents .flip-adv-cover {
  float: left;
  display: block;
  width: 80%; }
  .touchevents .flip-adv-cover .flip-cover-block {
    display: block;
    font-size: .5em; }

.no-touchevents #flip-pages {
  height: 100%;
  margin: 0;
  position: relative; }
  .no-touchevents #flip-pages .flip-adv-cover {
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 50%;
    left: 0;
    padding: 2em; }
    .no-touchevents #flip-pages .flip-adv-cover .boxbanner {
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%); }
      .no-touchevents #flip-pages .flip-adv-cover .boxbanner img {
        width: auto; }
    .no-touchevents #flip-pages .flip-adv-cover .videoWrapper {
      top: 50%;
      margin-top: -34%; }
  .no-touchevents #flip-pages .form-style label {
    display: block;
    font-weight: 600; }
  .no-touchevents #flip-pages .form-style input {
    -webkit-border-radius: 1px;
    -khtml-border-radius: 1px;
    -moz-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;
    border: 1px solid #737373;
    -webkit-box-shadow: 0px, 0px, 3px, #737373, inset;
    -khtml-box-shadow: 0px, 0px, 3px, #737373, inset;
    -moz-box-shadow: 0px, 0px, 3px, #737373, inset;
    -ms-box-shadow: 0px, 0px, 3px, #737373, inset;
    -o-box-shadow: 0px, 0px, 3px, #737373, inset;
    box-shadow: 0px, 0px, 3px, #737373, inset;
    background: #fff; }
  .no-touchevents #flip-pages .flip-page {
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 0;
    border: 1px solid #737373; }
    .no-touchevents #flip-pages .flip-page .boxbannerinpage {
      position: absolute;
      z-index: 10;
      width: 300px;
      height: 280px;
      background: rgba(0, 0, 0, 0.6);
      bottom: 0;
      padding: 0 5px;
      right: 0;
      text-align: center;
      cursor: default; }
      .no-touchevents #flip-pages .flip-page .boxbannerinpage .closeadv {
        display: inline-block;
        text-align: center;
        position: relative;
        font-size: 11px;
        cursor: pointer;
        font-weight: bold;
        color: #fff; }
    .no-touchevents #flip-pages .flip-page.landingpage {
      background-color: #fff; }
      .no-touchevents #flip-pages .flip-page.landingpage form {
        position: relative;
        z-index: 1000; }
    .no-touchevents #flip-pages .flip-page.current {
      width: 50%; }
    .no-touchevents #flip-pages .flip-page.left {
      right: 50%;
      border-right: none; }
      .no-touchevents #flip-pages .flip-page.left.current {
        -webkit-box-shadow: -3px, 0px, 5px, rgba(204, 204, 204, 0.15);
        -khtml-box-shadow: -3px, 0px, 5px, rgba(204, 204, 204, 0.15);
        -moz-box-shadow: -3px, 0px, 5px, rgba(204, 204, 204, 0.15);
        -ms-box-shadow: -3px, 0px, 5px, rgba(204, 204, 204, 0.15);
        -o-box-shadow: -3px, 0px, 5px, rgba(204, 204, 204, 0.15);
        box-shadow: -3px, 0px, 5px, rgba(204, 204, 204, 0.15); }
      .no-touchevents #flip-pages .flip-page.left:before {
        content: '';
        display: block;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        background: -moz-linear-gradient(right, rgba(0, 0, 0, 0.3) 0%, transparent 8%);
        background: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.3) 0%, transparent 8%);
        background: linear-gradient(to left, rgba(0, 0, 0, 0.3) 0%, transparent 8%);
        -webkit-transition: all, 0.3s, ease;
        -khtml-transition: all, 0.3s, ease;
        -moz-transition: all, 0.3s, ease;
        -ms-transition: all, 0.3s, ease;
        -o-transition: all, 0.3s, ease;
        transition: all, 0.3s, ease;
        z-index: 2000; }
    .no-touchevents #flip-pages .flip-page.right {
      left: 50%;
      width: 50%;
      border-left: none; }
      .no-touchevents #flip-pages .flip-page.right.current {
        -webkit-box-shadow: 3px, 0px, 5px, rgba(204, 204, 204, 0.15);
        -khtml-box-shadow: 3px, 0px, 5px, rgba(204, 204, 204, 0.15);
        -moz-box-shadow: 3px, 0px, 5px, rgba(204, 204, 204, 0.15);
        -ms-box-shadow: 3px, 0px, 5px, rgba(204, 204, 204, 0.15);
        -o-box-shadow: 3px, 0px, 5px, rgba(204, 204, 204, 0.15);
        box-shadow: 3px, 0px, 5px, rgba(204, 204, 204, 0.15); }
        .no-touchevents #flip-pages .flip-page.right.current.last {
          border: none; }
          .no-touchevents #flip-pages .flip-page.right.current.last:before {
            display: none; }
      .no-touchevents #flip-pages .flip-page.right:before {
        content: '';
        display: block;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, transparent 8%);
        background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, transparent 8%);
        background: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, transparent 8%);
        -webkit-transition: all, 0.3s, ease;
        -khtml-transition: all, 0.3s, ease;
        -moz-transition: all, 0.3s, ease;
        -ms-transition: all, 0.3s, ease;
        -o-transition: all, 0.3s, ease;
        transition: all, 0.3s, ease;
        z-index: 10; }
    .no-touchevents #flip-pages .flip-page.zoomable {
      cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABY0lEQVQ4T63Uv0tWURgH8I/m6qQuIoIOKoqLkLM4SBAFNjgEmUWLmyGIhqJC0F6tRuafoGM4mUJNgT+QhEZRcNI55IEj3Pdy7/u+qXe63Hvu55znPN97Gtzz1VDideAp+vEAV9jHeq35i8BJjOE7DnGCQXRjGjPYLYPz4AQGsFxlJWv4iN9FY7LgKB5hLjMwyu1Kq8x+v4k3OMujWfAbotzs1YaveJx73oPXmC8D+/DuP8BwfuFhGTiOQD+kAc/QgmZM4VN6Hk36ke438B7HWfSm5CKwtQTcqQfsxSJe1LmHMewnhqs1JUL7sk4wmvIKC9XAETzBbC42nfib+3Ardfm8GhjvohlDqfyi3EYuv+A0peJfLTDeP0+528YR/qRfLwIeYd7D2/RfRxYr0LLDoT2VH4dDEy5xgIhKY1pl7HfsewVaBtY6VErR24IxYSF6FzCPrmD1ruANuoTPuLgPsGK/rwE33UYVGfpZpgAAAABJRU5ErkJggg==) 15 15, auto; }
  .no-touchevents #flip-pages .scan {
    max-height: 100%;
    max-width: 100%;
    width: 100%; }

@-webkit-keyframes spin {
  0% {
    transform: scale(1); }
  25% {
    transform: scale(1.2); }
  50% {
    transform: scale(1); }
  75% {
    transform: scale(1.2); }
  100% {
    transform: scale(1); } }

@-moz-keyframes spin {
  0% {
    transform: scale(1); }
  25% {
    transform: scale(1.2); }
  50% {
    transform: scale(1); }
  75% {
    transform: scale(1.2); }
  100% {
    transform: scale(1); } }

@-ms-keyframes spin {
  0% {
    transform: scale(1); }
  25% {
    transform: scale(1.2); }
  50% {
    transform: scale(1); }
  75% {
    transform: scale(1.2); }
  100% {
    transform: scale(1); } }

@-o-keyframes spin {
  0% {
    transform: scale(1); }
  25% {
    transform: scale(1.2); }
  50% {
    transform: scale(1); }
  75% {
    transform: scale(1.2); }
  100% {
    transform: scale(1); } }

@keyframes spin {
  0% {
    transform: scale(1); }
  25% {
    transform: scale(1.2); }
  50% {
    transform: scale(1); }
  75% {
    transform: scale(1.2); }
  100% {
    transform: scale(1); } }

.touchevents .boxbannerinpage {
  display: none; }

.touchevents #flip-pages {
  height: 100%;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  outline: none; }
  .touchevents #flip-pages .flip-page {
    display: inline-block;
    position: relative;
    height: 100%; }

.touchevents .flip-bar {
  padding: 0;
  height: 10%;
  float: none;
  border: none;
  background: #fff; }
  .touchevents .flip-bar .flip-logo {
    width: 100%;
    background-color: #fff;
    padding: .4em;
    float: none;
    text-align: center; }
    .touchevents .flip-bar .flip-logo img {
      top: auto;
      max-width: 100%;
      max-height: 60%; }
  .touchevents .flip-bar .flip-controls {
    display: none; }

.touchevents .flip-view {
  padding: 0;
  height: 90%;
  top: 10px; }
  .touchevents .flip-view .img-wrap {
    height: 100%;
    display: inline-block;
    float: left; }
    .touchevents .flip-view .img-wrap img.scan {
      height: 100%;
      display: block; }
  .touchevents .flip-view .flip-nav-prev, .touchevents .flip-view .flip-nav-next {
    display: none; }

.touchevents .slick-slide {
  filter: alpha(opacity=50);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  -webkit-opacity: 0.5;
  -khtml-opacity: 0.5;
  -moz-opacity: 0.5;
  -ms-opacity: 0.5;
  -o-opacity: 0.5;
  opacity: 0.5;
  overflow: hidden; }
  .touchevents .slick-slide img {
    display: inline-block; }
  .touchevents .slick-slide.slick-active {
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-opacity: 1;
    -khtml-opacity: 1;
    -moz-opacity: 1;
    -ms-opacity: 1;
    -o-opacity: 1;
    opacity: 1; }

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0; }

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.flyers.skinActive {
  display: none; }

.skinAdv {
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: top center;
  padding-top: 100px; }
  .skinAdv .container {
    max-width: 975px;
    float: none;
    background: #fff;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
    -webkit-border-radius: 2px 2px 0 0;
    -khtml-border-radius: 2px 2px 0 0;
    -moz-border-radius: 2px 2px 0 0;
    -ms-border-radius: 2px 2px 0 0;
    -o-border-radius: 2px 2px 0 0;
    border-radius: 2px 2px 0 0;
    -webkit-box-shadow: 0px, 0px, 8px, rgba(204, 204, 204, 0.35);
    -khtml-box-shadow: 0px, 0px, 8px, rgba(204, 204, 204, 0.35);
    -moz-box-shadow: 0px, 0px, 8px, rgba(204, 204, 204, 0.35);
    -ms-box-shadow: 0px, 0px, 8px, rgba(204, 204, 204, 0.35);
    -o-box-shadow: 0px, 0px, 8px, rgba(204, 204, 204, 0.35);
    box-shadow: 0px, 0px, 8px, rgba(204, 204, 204, 0.35); }

.zoom-panel {
  position: fixed;
  background-color: rgba(13, 130, 227, 0.5);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 1000; }
  .zoom-panel .zoom-page {
    background-repeat: no-repeat;
    background-position: top center;
    -webkit-background-size: 100% auto;
    -khtml-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -ms-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
    position: absolute;
    left: 40px;
    top: 0;
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAB6UlEQVQ4T6XUS6iPURQF8N9FBgwwIAaKlJiYEBMlj66BKZJQUpKMMCEDBjKQjKS8CqG8RlLyCBOJiYGSbnlMKEoKRV6t2/7+3T7+/5uc+gbf2fusvdba+5w+f67RWIPVmIuJ+IoB3MJxPPvLucGtvlZgMU5iercD+Ilj2IEv7byhgBtwCiMr6S1u4jXGFNuFGFHxx+jHh6GgDWCY5XDAUnVnSfveYjATR7Gk9m8XaFh3JMezeBKZAVuGBz0kp+j58jhpm6t4BzBSTxfA1mLQA28wFAueYhpeYAZ+NU25hhWIZ1PRltkNPMWPVHA+HjWAbzAZZxG2WXt7ULyPO0PYJbWjLE0Jo/iyH3sKaJB+l9Xk5eyPGr0Q2Ncw/FyeHMb2fwAci0+VvxsHGsAnmINIWVQJo3owzIjkS+7dyluJKw3goWKWpNl4PlyLK34G68uyKXjfAM6qEcgNiNmZ/njTa2Wwc6/j4wWsbZKbm5Lp31KbF7Hxb/e04gGLvPH1vwqX24AZ1HuYV4GXOIjreFVNS2wT1rUelY9YjoeN5AZ8Ai5haUtrRqj9KrXt6IC2E+NjWOzq8oRlZlP0Kk5g3BDkgPZ3q5z9SMw3Cd+q+7FlsJtYgBst0IHhpAw3QW3Qd/8LmIJ5GM4V022/AVWGZmYIB7xPAAAAAElFTkSuQmCC) 7 7, auto; }
    .zoom-panel .zoom-page > img {
      display: none; }
    .zoom-panel .zoom-page a.pin {
      width: 50px;
      height: 50px;
      margin-left: -10px;
      margin-top: -10px; }

.pinmode #flip-pages .flip-page {
  cursor: default; }

.pennymarketform, .pennymarketformbanner {
  text-align: center;
  background-color: #fff; }
  .pennymarketform .adv-header, .pennymarketformbanner .adv-header {
    background-color: #FCEB00;
    height: 13%;
    padding: 0 1em;
    margin-bottom: 8%;
    font-weight: bold;
    font-size: 1.8em;
    letter-spacing: -1px;
    color: #F50000;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle; }
    .pennymarketform .adv-header img, .pennymarketformbanner .adv-header img {
      max-height: 110% !important;
      vertical-align: middle;
      margin-right: 10px; }
    .pennymarketform .adv-header span, .pennymarketformbanner .adv-header span {
      display: inline-block;
      vertical-align: middle; }
  .pennymarketform .img-wrap, .pennymarketformbanner .img-wrap {
    background-repeat: repeat;
    background-size: 50% auto; }
  .pennymarketform form, .pennymarketformbanner form {
    max-width: 80%;
    margin: 0 auto;
    padding: 0 0 1.5em; }
  .pennymarketform p, .pennymarketformbanner p {
    display: block;
    overflow: hidden;
    padding: 0;
    margin: 0 0 1em; }
  .pennymarketform label, .pennymarketformbanner label {
    font-weight: bold;
    color: #000;
    font-size: 1em;
    line-height: 1.2em;
    margin-bottom: .5em;
    float: left;
    width: 20%;
    height: 60px;
    line-height: 60px; }
  .pennymarketform input, .pennymarketformbanner input {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    font-size: .875em;
    padding: 0 10px;
    height: 60px;
    line-height: 60px;
    float: left;
    width: 80% !important; }
    .pennymarketform input:focus, .pennymarketformbanner input:focus {
      outline: none;
      box-shadow: none;
      border: 1px solid #333; }
  .pennymarketform input[type=checkbox], .pennymarketformbanner input[type=checkbox] {
    display: inline-block;
    margin: 0;
    height: auto !important;
    width: auto !important;
    float: none; }
  .pennymarketform .check, .pennymarketformbanner .check {
    font-weight: bold;
    font-size: .775em;
    margin: 0 0 2em; }
  .pennymarketform .red, .pennymarketformbanner .red {
    color: #F50000;
    font-size: .675em;
    text-align: center;
    font-weight: bold; }
  .pennymarketform .btn, .pennymarketformbanner .btn {
    background-color: #F50000;
    color: #fff;
    padding: 1.5em 1em;
    margin: 2em 0 0;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    white-space: initial; }
  .pennymarketform .lavazza, .pennymarketformbanner .lavazza {
    max-width: 80% !important;
    margin: 0 auto;
    max-height: 33% !important;
    vertical-align: bottom;
    position: absolute;
    bottom: 2em;
    left: 50%;
    margin-left: -40%; }
  .touch .pennymarketform, .touch .pennymarketformbanner {
    text-align: left; }
    .touch .pennymarketform .adv-header, .touch .pennymarketformbanner .adv-header {
      font-size: 1em; }
    .touch .pennymarketform p, .touch .pennymarketformbanner p {
      margin: 0 0 .5em; }
    .touch .pennymarketform input, .touch .pennymarketformbanner input {
      height: 25px;
      line-height: 25px;
      width: 100%;
      -webkit-border-radius: 5px;
      -khtml-border-radius: 5px;
      -moz-border-radius: 5px;
      -ms-border-radius: 5px;
      -o-border-radius: 5px;
      border-radius: 5px;
      font-size: 14px;
      padding: 2px 3px; }
    .touch .pennymarketform label, .touch .pennymarketformbanner label {
      display: block;
      width: auto;
      height: auto;
      line-height: 1;
      font-size: .7em;
      width: 100%; }
    .touch .pennymarketform .btn, .touch .pennymarketformbanner .btn {
      padding: .2em; }

.pennymarketformbanner {
  background-image: url("sass/images/caffe.jpg");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover; }

.flip-view:not(.pinmode) .flip-page:hover a.pin, .flip-view:not(.pinmode) .flip-page:hover .product, .flip-view:not(.pinmode) .flip-page.here a.pin, .flip-view:not(.pinmode) .flip-page.here .product {
  -webkit-animation: spin 0.5s linear 1;
  -khtml-animation: spin 0.5s linear 1;
  -moz-animation: spin 0.5s linear 1;
  -ms-animation: spin 0.5s linear 1;
  -o-animation: spin 0.5s linear 1;
  animation: spin 0.5s linear 1; }

.product-action-wrap-button {
    width: 100%;
    max-width: 220px;
    clear: both;
    background: #004279;
    -webkit-border-radius: 30px;
    -khtml-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
    font-family: "Sarala", sans-serif;
    color: #ffffff;
    font-size: 1em;
    height: 2.775em;
    line-height: 2.775em;
    padding: 0;
    text-transform: capitalize;
    font-weight: 700;
    position: relative;
    margin: 0 auto;
    text-align: center;
}
.icon {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    line-height: 1;
    font-size: 1em;
    height: 1em;
    width: 1em;
}