@import "default";

body,
html {
   @media only screen and (max-width: 860px) {
      height: 100%;
   }
}

body {
   @media only screen and (max-width: 860px) {
      margin-top: 95px;

      &.mobileStickynav {
         margin-top: 153px;
      }
   }

   @media only screen and (max-width: 640px) {
      margin-top: 66px;

      &.mobileStickynav {
         margin-top: 122px;
      }
   }
}

.no-margin {
   margin: 0 !important;
}

.showload {
   &:before {
      position: fixed;
      content: '';
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: $blk;
   }
}

.first-section-fixer {
   margin-top: 100px !important;

   @media only screen and (max-width: 640px) {
      margin-top: 0 !important;
   }
}

.lazy.auto {
   width: 1px;
   height: 1px;
}

.sizeCenterElm {
   // width: 943px;
   // width: 1100px;
   width: 1135px;
   margin: 0 auto;
   max-width: 100%;

   &:before,
   &:after {
      content: " ";
      display: table;
   }

   &:after {
      clear: both;
   }

   @media only screen and (max-width: 1280px) {
      width: 960px;
   }

   @media only screen and (max-width: 1024px) {
      width: 800px;
   }

   @media only screen and (max-width: 860px) {
      width: 100%;
      padding: 0 1em;
   }
}

.gridCenter {
   // width: 943px;
   margin: 0 auto;
   max-width: 100%;

   &:before,
   &:after {
      content: " ";
      display: table;
   }

   &:after {
      clear: both;
   }
}

.noteOffers {
   font-weight: 600;
   font-family: $nuni;
   font-size: (14 / 16) + 0em;
   display: $b;
}

.flexImages {
   display: none;
}

.navigation {
   // position: fixed;
   background: $blk;
   top: 0;
   z-index: 3;

   .sizeCenterElm {
      position: $rel;

      @media only screen and (max-width: 860px) {
         background-color: #000;
         z-index: 10;
      }
   }

   .hamburger {
      display: none;
      float: right;
      padding-right: 0;

      @media only screen and (max-width: 860px) {
         padding-top: 36px;
      }

      @media only screen and (max-width: 640px) {
         padding-top: 20px;
      }

      .hamburger-inner,
      .hamburger-inner::before,
      .hamburger-inner::after {
         @media only screen and (max-width: 860px) {
            background-color: #fff !important;
         }
      }

      @media only screen and (max-width: 860px) {
         display: inline-block;
      }
   }

   .logo {
      height: 95px;
      font-size: 43px;
      color: #fff;
      max-width: 175px;
      margin-left: -75px;
      position: relative;
      display: block;
      text-align: left;
      background-size: contain;
      margin-top: 0px;
      margin-bottom: 0;
      float: left;
      margin-right: 48px;
      transition-delay: 300ms;

      img {
         display: block;
         padding-top: 30px;
      }

      @media only screen and (max-width: 860px) {
         margin-left: 0;
      }

      @media only screen and (max-width: 640px) {
         margin-left: 0;
         height: 65px;

         img {
            padding-top: 20px;
            width: 40px;
         }
      }
   }

   ul.maniNav {
      list-style: none;
      display: flex;
      padding: 0;
      margin: 0;

      // margin-top: 60px;
      @media only screen and (max-width: 860px) {
         display: none;
      }

      >li {
         float: $l;
         display: table-cell;
         position: $rel;
         height: 95px;
         padding-bottom: 15px;

         >a {
            line-height: inherit;
            display: $tc;
            font-family: $nunsans;
            font-weight: 400;
            font-size: (13.5 / 16) * 1em;
            letter-spacing: 0.05em;
            vertical-align: bottom;
            height: 95px;
            background: 0;
            padding: 0 15px 15px 15px;
            text-transform: $upc;
            overflow: $hd;
            color: #707070;
            position: $rel;

            // opacity:0.45;
            // .ghost {
            //    position: absolute;
            //    opacity: 0;
            //    opacity: 1;
            //    overflow: hidden;
            //    color: #fff;
            //    box-sizing: border-box;
            //    padding: 0;
            //    left: 0;
            //                      right: 0;
            //    height: 0;
            //                      text-align:$c;
            //    line-height: 12px;
            //    top: 64px;
            //    vertical-align: baseline;
            //    text-align: center;
            // }
            // &:before {
            //    content: "";
            //    position: absolute;
            //    left: -100%;
            //    bottom: 2%;
            //    display: block;
            //    width: 100%;
            //    height: 2px;
            //    border-radius: 10px;
            //    background-color: #fff;
            //    -webkit-transition: all .4s;
            //    -moz-transition: all .4s;
            //    -ms-transition: all .4s;
            //    -o-transition: all .4s;
            //    transition: all .4s;
            // }
            &:hover,
            &.current {
               color: $wht;
               // opacity:1;
               // &:before {
               //    left:0;
               // }
               // .ghost {
               //    height: 12px;
               //    color: #fff !important
               // }
            }
         }

         .submenu {
            position: fixed;
            padding: 0em;
            left: 0em;
            right: 0;
            top: -100%;
            width: 100%;
            // opacity:0;
            border-top: solid 1px rgba(255, 255, 255, 0.2);
            background-color: rgba(0, 0, 0, 0.8);
            // display:$n;
            z-index: -1;
            //-webkit-transform: perspective(400) rotate3d(1, 0, 0, -0deg) scale3d(1, 0, 1);
            //-moz-transform: perspective(400) rotate3d(1, 0, 0, -0deg) scale3d(1, 0, 1);
            //-o-transform: perspective(400) rotate3d(1, 0, 0, -0deg) scale3d(1, 0, 1);
            //-ms-transform: perspective(400) rotate3d(1, 0, 0, -0deg) scale3d(1, 0, 1);
            //transform: perspective(400) rotate3d(1, 0, 0, -0deg) scale3d(1, 0, 1);
            //-webkit-transform-origin:  50% 0;
            //-moz-transform-origin:  50% 0;
            //-o-transform-origin:  50% 0;
            //-ms-transform-origin:  50% 0;
            //transform-origin:  50% 0;
            transition: 500ms;

            ul {
               list-style: none;
            }

            .mainProduct {
               padding: 1em 0;

               // border-right:solid 1px rgba(255, 255, 255, 0.2);
               li {
                  float: $l;
                  padding: 0 1em;
                  width: 180px;

                  a {
                     -webkit-transform: perspective(400) scale(.95);
                     -moz-transform: perspective(400) scale(.95);
                     -o-transform: perspective(400) scale(.95);
                     -ms-transform: perspective(400) scale(.95);
                     transform: perspective(400) scale(.95);
                     opacity: .7;
                     display: $b;

                     .fujiCategory {
                        height: 80px;
                        display: table-cell;
                        vertical-align: middle;
                     }

                     .fujiName {
                        margin: 1em 0;
                     }

                     .title,
                     p {
                        font-family: $nunsans;
                        font-weight: 600;
                     }

                     .title {
                        font-size: (16 / 16) * 1em;
                        color: $wht;
                        min-height: 38px;
                        line-height: 1.2;
                     }

                     p {
                        font-size: (14 / 16) * 1em;
                        font-weight: 400;
                        color: $gold;
                        line-height: 1.3;
                     }

                     &:hover {
                        -webkit-transform: perspective(400) scale(1);
                        -moz-transform: perspective(400) scale(1);
                        -o-transform: perspective(400) scale(1);
                        -ms-transform: perspective(400) scale(1);
                        transform: perspective(400) scale(1);
                        -webkit-transform-origin: 50% 0;
                        -moz-transform-origin: 50% 0;
                        -o-transform-origin: 50% 0;
                        -ms-transform-origin: 50% 0;
                        transform-origin: 50% 0;
                        transition: 500ms;
                        opacity: 1;
                     }
                  }
               }
            }
         }

         &:first-child {
            .submenu {
               // background-color:red;
            }
         }

         &:hover {
            .submenu {
               z-index: -1;
               //-webkit-transform:perspective(400) rotate3d(0, 0, 0, 0) scale3d(1, 1, 1);
               //-moz-transform:perspective(400) rotate3d(0, 0, 0, 0) scale3d(1, 1, 1);
               //-o-transform:perspective(400) rotate3d(0, 0, 0, 0) scale3d(1, 1, 1);
               //-ms-transform:perspective(400) rotate3d(0, 0, 0, 0) scale3d(1, 1, 1);
               //transform:perspective(400) rotate3d(0, 0, 0, 0) scale3d(1, 1, 1);
               // left:0;
               top: 6.5em;
               // opacity:1;
               // display:$b;
            }
         }
      }
   }

   .secMenu {
      padding: 2em;

      ul {
         margin: 0;

         li {
            a {
               font-family: $nunsans;
               font-size: (18 / 16) * 1em;
               color: $semiitem;
               font-weight: 600;
               display: inline-block;
               padding-left: 1.3em;
               position: $rel;

               &:before {
                  content: "\f0da";
                  position: $abs;
                  left: 0;
                  top: 2px;
                  font: normal normal normal 19px/1 FontAwesome;
               }

               &:hover {
                  color: $wht !important;
               }
            }
         }
      }
   }

   .billingual {
      position: $abs;
      right: -75px;
      bottom: 10px;

      @media only screen and (max-width: 860px) {
         display: none;
      }

      .changeBil {
         background-color: transparent;
         border: 0;
         color: #fff;
         width: 55px;
         margin-bottom: 8px;
         font-family: $nunsans;
         font-size: 13px;
         height: 33px;
         line-height: 14px;
         margin-right: 15px;
         color: #707070;
         float: $l;
         background-image: url("{{ asset_path('theme::img/remove/arrowKebawah.png') }}");
      }

      .btnSearch {
         width: 32px;
         height: 32px;
         border-radius: 32px;
         background-color: #acacac;
         position: $rel;
         float: $l;
         cursor: pointer;

         &:before {
            position: $abs;
            top: 0;
            bottom: 0;
            z-index: 3;
            left: 0;
            right: 0;
            margin: auto;
            text-align: center;
            height: 16px;
            font-size: 15px;
            color: #000;
            -webkit-transition: all .4s;
            -moz-transition: all .4s;
            -ms-transition: all .4s;
            -o-transition: all .4s;
            transition: all .4s;
         }
      }
   }

   .btnMobile {
      display: none;
      position: absolute;
      right: 10px;
      top: 0;
      width: 33px;
      height: 36px;
      margin: 8px auto;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: .5s ease-in-out;
      -moz-transition: .5s ease-in-out;
      -o-transition: .5s ease-in-out;
      transition: .5s ease-in-out;
      cursor: pointer;

      span {
         display: block;
         position: absolute;
         height: 5px;
         width: 100%;
         background: #cccccc;
         border-radius: 5px;
         opacity: 1;
         left: 0;
         -webkit-transform: rotate(0deg);
         -moz-transform: rotate(0deg);
         -o-transform: rotate(0deg);
         transform: rotate(0deg);
         -webkit-transition: .25s ease-in-out;
         -moz-transition: .25s ease-in-out;
         -o-transition: .25s ease-in-out;
         transition: .25s ease-in-out;

         &:nth-child(1) {
            top: 6px;
            -webkit-transform-origin: left center;
            -moz-transform-origin: left center;
            -o-transform-origin: left center;
            transform-origin: left center;
         }

         &:nth-child(2) {
            top: 16px;
            -webkit-transform-origin: left center;
            -moz-transform-origin: left center;
            -o-transform-origin: left center;
            transform-origin: left center;
         }

         &:nth-child(3) {
            top: 26px;
            -webkit-transform-origin: left center;
            -moz-transform-origin: left center;
            -o-transform-origin: left center;
            transform-origin: left center;
         }
      }

      &.open {
         span {
            &:nth-child(1) {
               -webkit-transform: rotate(45deg);
               -moz-transform: rotate(45deg);
               -o-transform: rotate(45deg);
               transform: rotate(45deg);
               top: 0px;
               left: 10px;
            }

            &:nth-child(2) {
               width: 0%;
               opacity: 0;
            }

            &:nth-child(3) {
               -webkit-transform: rotate(-45deg);
               -moz-transform: rotate(-45deg);
               -o-transform: rotate(-45deg);
               transform: rotate(-45deg);
               top: 24px;
               left: 10px;
            }
         }
      }
   }

   .link {
      color: $semiitem;
      margin: 1.5em 0;

      &:before {
         background: $gold;
      }

      &:hover {
         border-color: $gold;
         color: $wht;
      }
   }

   &.removeShadow {
      box-shadow: none;
   }

   @media screen and (min-width: 1025px) {
      height: 100px;
      width: 100%;
      position: fixed;
      // position:$rel;
      top: 0;
      z-index: 10;
      transition-delay: .00ms;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
      background-color: $col-subtitle;
      transition: height 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
      background-color: rgba(0, 0, 0, 1);
      // background-color:rgba(0, 0, 0, 0.8);
      // background-color:#000;
      color: #fff;

      &.homeNav {

         background-color: rgba(0, 0, 0, 0.8);
      }

      * {
         box-sizing: border-box;
         // transition: all 300ms cubic-bezier(0.165,0.840,0.440,1.000);
         // transition: all 300ms ;
      }
   }

   @media screen and (max-width: 1024px) {
      padding: 0 1em;

      .btnMobile {
         display: $b;
      }
   }

   @media only screen and (max-width: 860px) {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 10;
   }
}

ul#menuMobile {
   display: none;

   @media only screen and (max-width: 860px) {
      z-index: 0;
      display: block;
      height: 100%;
      left: 0;
      padding: 1em;
      top: -100%;
      position: fixed;
      text-align: center;
      width: 100%;
      background: $blk;
      -webkit-transition: all .4s;
      -moz-transition: all .4s;
      -ms-transition: all .4s;
      -o-transition: all .4s;
      transition: all .4s;
      margin: 0;

      &.menuShow {
         z-index: 9;
         overflow-y: auto;
         top: 95px;

         li {
            list-style: none;

            a {
               padding: 6px 0;
               color: #fff;
               width: 100%;
               display: table;
               text-transform: uppercase;
            }

            ul {
               li {
                  width: 33.3%;
                  display: table;
                  float: left;

                  a {
                     .fujiName {
                        font-size: 10px;
                        line-height: 1;
                        margin: 10px 0;
                     }
                  }
               }
            }
         }
      }
   }

   @media only screen and (max-width: 640px) {
      z-index: 0;
      display: block;
      height: 100%;
      left: 0;
      padding: 1em;
      top: -100%;
      position: fixed;
      text-align: center;
      width: 100%;
      background: $blk;
      -webkit-transition: all .4s;
      -moz-transition: all .4s;
      -ms-transition: all .4s;
      -o-transition: all .4s;
      transition: all .4s;
      margin: 0;

      &.menuShow {
         z-index: 9;
         overflow-y: auto;
         top: 65px;

         li {
            list-style: none;

            a {
               padding: 6px 0;
               color: #fff;
               width: 100%;
               display: table;
               text-transform: uppercase;
            }

            ul {
               li {
                  width: 33.3%;
                  display: table;
                  float: left;

                  a {
                     .fujiName {
                        font-size: 10px;
                        line-height: 1;
                        margin: 10px 0;
                     }
                  }
               }
            }
         }
      }
   }
}

.homeSlide {
   .mainslide {
      .layerimg {
         img {
            width: 100%;
         }
      }

      .caption {
         position: $abs;
         top: 190px;
         left: 0;
         right: 0;
         color: $wht;

         * {
            box-sizing: border-box;
            transition: all 1000ms;
         }

         .sizeCaption {
            width: 260px;
            -webkit-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translate3d(-15em, 0em, -15em);
            -moz-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translate3d(-15em, 0em, -15em);
            -o-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translate3d(-15em, 0em, -15em);
            -ms-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translate3d(-15em, 0em, -15em);
            transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translate3d(-15em, 0em, -15em);
            opacity: 0;
         }

         .iconProduct {
            padding-bottom: 2.1em;
         }

         h1 {
            font-family: $oswald;
            text-transform: $upc;
            font-size: 45px;
            font-size: 3em;
            font-weight: 500;
            color: #d7d7d7;
            line-height: 1;
            margin-bottom: .4em;
         }

         p {
            color: #acacac;
            font-family: $nunsans;
            font-size: 1.2em;
            line-height: 25px;
         }

         .link {
            color: #d7d7d7;
            border-color: #d7d7d7;
            font-size: 1em;
            margin-top: 3em;

            &:hover {
               // color:rgba(0, 0, 0, 0.7);
            }
         }
      }

      @media only screen and (max-width: 860px) {
         .layerimg {
            padding-top: 50%;
         }

         .caption {
            top: 66px;
            text-align: center;

            h1 {
               font-size: 2.5em;
            }

            p {
               font-size: 0.792em;
               line-height: 15px;
            }

            .sizeCaption {
               width: 60%;
               margin: 0 20%;

               .iconProduct {
                  padding-bottom: 0;
               }
            }
         }
      }

      @media only screen and (max-width: 640px) {
         .layerimg {
            padding-top: 100%;
         }

         .caption {
            top: 66px;
            text-align: center;

            h1 {
               font-size: 2.5em;
            }

            p {
               font-size: 0.792em;
               line-height: 15px;
            }

            .sizeCaption {
               width: 100%;
               padding: 0 2em;

               .iconProduct {
                  padding-bottom: 0;
               }
            }
         }
      }
   }

   .fmnav-active-slide {
      .mainslide {
         .caption {
            .sizeCaption {
               @include delay(.8s);
               -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(0em, 0em, 0em);
               -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(0em, 0em, 0em);
               -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(0em, 0em, 0em);
               -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(0em, 0em, 0em);
               transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(0em, 0em, 0em);
               opacity: 1;
            }
         }
      }
   }

   .fmnav-control-nav {
      left: 0;
      right: 0;
      margin: auto;
      width: 1100px;
      max-width: 100%;
      text-align: $l;

      li {
         display: inline-block;
         overflow: hidden;
         padding: 0.4em;
         margin: 0;

         a {
            text-indent: 99em;
            display: inline-block;
            width: 8px;
            height: 8px;
            margin-right: .5em;

            &.fmnav-active {
               background-color: $gold;
               -webkit-transform: scale(1.4);
               -moz-transform: scale(1.4);
               -o-transform: scale(1.4);
               -ms-transform: scale(1.4);
               transform: scale(1.4);
               margin: 0.5em;
            }
         }
      }

      @media only screen and (max-width: 860px) {
         width: 100%;
         text-align: center;
         bottom: 0;
         position: relative;
      }
   }
}

.titleHomeCategory {
   font-family: $oswald;
   font-size: 30px;
   font-weight: 400;
   text-transform: $upc;
}

.titleCategory {
   font-family: $oswald;
   font-size: (32 / 16) * 1em;
   line-height: 1;
   text-transform: $upc;
   font-weight: 500;
}

.categoryCamera {
   $marg: 1rem;
   $wd: 33.33333%;
   $calc: calc(#{$wd} - #{$marg});
   $sum: $calc;

   $fontsz: 16;
   background-color: $blk;
   color: $wht;
   padding: 1em 0;

   .title-model {
      color: $gold;
      text-align: $c;
      font-family: $nuni;
      font-weight: 400;
      font-size: 1.8em;
      margin-bottom: .9em;
   }

   .menu-model {
      margin:0 -#{$marg} 2em;
      display: $b;
      text-align: $c;

      li {
         padding-bottom: 0;
         display: inline-block;
         padding: 0 $marg;
         text-align: $c;

         a {
            color: $semiitem;
            font-size: 1.285em;
            font-family: $nuni;
            font-weight: 300;

            &:hover,
            &.current {
               color: $wht;
            }
         }

         @media only screen and (max-width: 640px) {
            padding: 0 0.3rem;

            a {
               font-size: 0.85em;
            }
         }
      }

      @media only screen and (max-width: 640px) {
         margin: 0 0 2em;
      }
   }

   .sizeCenterElm {
      position: $rel;
   }

   .fujislide {
      .fmnav-viewport {
         z-index: 4;
      }

      &.thumbs-slide {
         text-align: $c;
         position: $rel;

         &:before {
            position: $abs;
            bottom: 0;
            left: 0;
            right: 0;
            content: '';
            width: 100%;
            // box-shadow: 0px 0px 59px 70px #000;
            z-index: 3;
         }

         .slides {
            li {
               cursor: pointer;
               opacity: .7;
               @include transition(300ms);

               span {
                  &:after {
                     display: block;
                     content: '';
                     border-bottom: solid 2px $gold;
                     transform: scaleX(0);
                     transition: transform 250ms ease-in-out;
                     width: 60px;
                     margin: auto;
                     margin-top: 0.3em;
                  }
               }

               &:hover,
               &.fmnav-active-slide {
                  opacity: 1;

                  span {
                     &:after {
                        transform: scaleX(1);
                     }
                  }
               }
            }

            @media only screen and (max-width: 640px) {
               li {
                  // width: 100px !important;
               }
            }
         }

         .i-camera {
            height: 70px;
            position: relative;
            margin-bottom: 10px;

            img {
               position: absolute;
               bottom: 0;
               left: 0;
               right: 0;
               margin: auto;
            }
         }

         @media only screen and (max-width: 640px) {
            &:before {
               box-shadow: 0px 0px 15px 20px #000;
            }
         }
      }

      &.imgSlide {
         &:before {
            // position:$abs;
            // top:0;
            // bottom:0;
            // left:0;
            // right:0;
            // content:'';
            // height:50%;
            // background-image:url(../img/homeshadow.png);
         }
      }
   }

   .thumbs-slide {
      span {
         color: $wht;
      }
   }

   .description-model {
      position: $abs;
      bottom: 66px;
      right: 0;
      width: 200px;
      float: $r;
      z-index: 1;

      p {
         color: $wht;
      }

      @media only screen and (max-width: 640px) {
         bottom: inherit;
         right: inherit;
         width: 100%;
         position: relative;
         padding: 0 1em;
      }
   }

   .model-image-type {
      position: $abs;
      bottom: -125px;
      z-index: 2;
      left: 0;

      // bottom:30px;
      @media only screen and (max-width: 860px) {
         bottom: -25px;
      }

      @media only screen and (max-width: 640px) {
         bottom: 0px;
         left: 0;
         width: 40%;
      }
   }

   .layerModel {
      .layerModels {
         img {
            width: 100%;
         }
      }

      .detail-model {
         // background-color:$blk;
         margin-top: 0;
         padding: 35px 0 66px 0;
         // box-shadow:inset 0px -230px 160px -64px #000;
         bottom: 0;
         left: 0;
         right: 0;
         z-index: 1;

         &:before {
            // position:$abs;
            // left: 0;
            // right: 0;
            // box-shadow: 0px -50px 100px 80px #000;
            // top: 0;
            // bottom: 0;
            // width: 100%;
            // display: block;
         }

         @media only screen and (max-width: 640px) {
            padding: 0;
            margin-top: 0;
         }
      }

      .imageProduk {
         margin-top: -260px;
         // position:$abs;
         // bottom:0;
         // left:0;
         // right:0;
      }

   }

   .bottom-detail {
      width: 500px;
      float: $r;

      @media only screen and (max-width: 640px) {
         width: 100%;
         padding: 1em;
      }
   }

   .model-brand {
      display: $b;
      margin: 0 0 0.3em;
      line-height: 1;

      img {
         display: block;
      }

      @media only screen and (max-width: 640px) {
         margin: 0 0 12px 0;
      }
   }

   .sideLeft {
      float: $l;
      width: 300px;
      padding-right: 1em;

      @media only screen and (max-width: 640px) {
         width: 50%;
      }
   }

   .note-brand {
      color: $wht;
   }

   .link {
      color: $wht;
      border-color: $wht;

      @media only screen and (max-width: 640px) {
         width: 50%;
      }
   }
}

.homeNewsEvent {
   background-color: $blk;
   overflow: hidden;
   padding: 5em 0;

   @media only screen and (max-width: 640px) {
      padding: 0;
   }

   .fuji-carousel {
      position: inherit;

      .owl-stage-outer {
         overflow: inherit;
         z-index: 2;
      }

      .owl-nav {
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
         margin: 0;
      }
   }

   .titleHomeCategory {
      color: $wht;
      margin-bottom: 1em;

      @media only screen and (max-width: 640px) {
         padding: 0 1em;
      }
   }

   .item {
      .caption {
         position: $abs;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
         opacity: 1;
         background-color: rgba(0, 0, 0, 0.8);
         @include transition(300ms);

         .posBot {
            position: $abs;
            left: 25px;
            bottom: 25%;
            color: $wht;
            width: 50%;
            @include transition(300ms);

            @media only screen and (min-width: 641px) and (max-width: 860px) {
               font-size: 0.8em;
            }
         }

         .title {
            font-family: $nunsans;
            font-weight: 600;
            font-size: 1.12em;
            color: $wht;
            margin: 0;
         }

         .event-location,
         .event-date {
            display: block;
            font-size: 0.9em;
         }

         p {
            font-family: $nunsans;
            font-size: 0.94em;
            color: $wht;
            font-weight: 300;
            margin: 0;
            line-height: 1.4;
         }
      }

      .goArrow {
         position: $abs;
         right: 25px;
         bottom: 25px;
         width: 53px;
         height: 53px;
         border-radius: 53px;
         background-color: $gold;

         &:before {
            content: '';
            position: $abs;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            height: 20px;
            width: 15px;
            background-image: url("{{ asset_path('theme::img/icons.png') }}");
            background-repeat: no-repeat;
            background-position: -117px -29px;
            display: $b;
            @include transition(300ms);
         }

         &:hover {
            background-color: $wht;

            &:before {
               background-position: -99px -29px;
            }
         }
      }

      &:hover {
         .caption {
            background: none;

            .title {
               color: $wht;
               text-shadow: 2px 2px 4px #000;
            }

            p {
               color: $wht;
               text-shadow: 2px 2px 4px #000;
            }

            .posBot {
               left: 25px;
               bottom: 25px;
            }

            .event-location,
            .event-date {
               text-shadow: 2px 2px 4px #000;
            }
         }
      }
   }

   @media only screen and (max-width: 640px) {
      .fuji-carousel {
         display: table;
      }

      .item {
         position: relative;

         .caption {
            position: relative;
            opacity: 1;

            .posBot {
               position: relative;
               bottom: inherit;
               padding-top: 1em;
               padding-bottom: 1em;
            }
         }
      }
   }
}

.viewall {
   position: $rel;
   padding-left: 30px;
   font-family: $oswald;
   font-weight: 400;
   font-size: 18px;
   text-transform: $upc;
   color: $wht;
   margin: 1em;
   display: $ib;

   &:before {
      content: '';
      position: $abs;
      top: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      height: 20px;
      width: 15px;
      background-image: url("{{ asset_path('theme::img/icons.png') }}");
      background-repeat: no-repeat;
      background-position: -117px -29px;
      display: $b;
      @include transition(300ms);
   }

   &:hover {
      color: $gold;

      &:before {
         background-position: -99px -29px;
      }
   }
}

.homeCYC {
   img {
      width: 100%;
   }

   .caption {
      width: 40%;
      margin: $at;
      position: $abs;
      top: 0;
      bottom: 0;
      // transform: translate(0px, -50%);
      text-align: $c;

      .titleHomeCategory {
         // font-size: 44px;
         font-size: (44 / 16) * 1em;
         text-transform: $upc;
         color: $wht;
         font-weight: 900;
         font-family: $nunsans;
         margin: 3rem 0 0.5rem;
      }

      p {
         font-size: (28 / 16) + 0em;
         font-weight: 300;
         color: $wht;
         font-family: $nunsans;
         width: 90%;
         margin: $at;
         line-height: 1.3;
      }

      .link {
         margin-top: 3em;
         color: #fff;
         border-color: #fff;
         font-size: (16 / 16) + 0em;

         &:before {
            background: #fff;
         }

         &:hover {
            color: #fff !important;
            background: #fff;

         }
      }
   }

   @media only screen and (max-width: 860px) {
      .caption {
         .titleHomeCategory {
            font-size: 1.8em;
         }

         p {
            color: $wht;
            font-size: 1em;
         }
      }
   }

   @media only screen and (max-width: 640px) {
      .caption {
         right: 0 !important;
         width: 100% !important;
         position: relative !important;

         .titleHomeCategory {
            font-size: 1.8em;
         }

         p {
            color: $wht;
            font-size: 1em;
         }

         .link {
            margin-top: 1em;
         }

         .midleheight {
            height: 100% !important;
            padding-bottom: 2em;
         }
      }
   }
}

.imageFull {
   .poscapRight {
      right: 10%;
      left: initial;
   }

   .poscapCenter {
      right: 0;
      left: 0;
   }

   .poscapLeft {
      left: 10%;
      right: initial;
   }

   img {
      width: 100%;
   }

   .caption {
      margin: auto;
      position: absolute;
      top: 0;
      bottom: 0;
      text-align: center;
   }
}

.videoFull {
   video {
      width: 100%;
   }
}

.homeCampaign {
   background-color: $blk;

   .layerImg {
      position: $rel;

      img {
         width: 100%;
      }
   }

   .titleHomeCategory,
   p {
      color: $wht;
   }

   .caption {
      margin: $at;
      position: $abs;
      top: 50%;
      right: 0%;
      left: 0;
      transform: translate(0px, -50%);
      text-align: $c;

      .titleHomeCategory {
         font-size: (113 / 16) * 1em;
         line-height: 1;
      }

      p {
         margin: 0;
         font-size: (14 / 16) + 0em;
         font-family: $nuni;
         font-weight: 400;
      }

      @media only screen and (max-width: 640px) {
         width: 50%;
         left: auto;
         right: 0;
      }
   }

   .sizeCaption {
      width: 496px;
      margin: auto;
      display: $b;

      &.captionBot {
         min-height: 300px;
         padding: 0 10px;

         .titleHomeCategory {
            color: #c0a062;
            font-family: $nunsans;
            font-weight: 300;
            font-size: (28 / 16) * 1em;
            color: $gold;
            text-transform: $cap;
            line-height: 1;
         }

         p {
            font-family: $nunsans;
            font-weight: 300;
            font-size: (21 / 16) + 0em;
            color: $wht;
            line-height: 1.4;
         }

         @media only screen and (max-width: 640px) {
            width: 50%;
            margin-right: 0;
            min-height: inherit;
            margin-top: -60px;

            p {
               font-size: 1em;
               line-height: 1;
            }
         }
      }
   }

   .productCampaign {
      transform: translate(0px, 10%);
      position: absolute;
      left: 0;
      top: 50%;
      height: 465px;
      width: 404px;

      img {
         position: absolute;
         margin: auto;
         top: 0;
         bottom: 0;
         left: 0;
      }

      @media only screen and (max-width: 640px) {
         width: 50%;
         top: auto;
         height: auto;
         bottom: -35px;
      }
   }

   .ic-download {
      transform: translate(0px, -50%);
      margin-bottom: -30px;

      @media only screen and (max-width: 640px) {
         transform: scale(0.7);
      }
   }

   @media only screen and (max-width: 640px) {
      .sizeCaption {
         width: 100%;
      }
   }
}

.homeSocial {
   background-color: $blk;
   color: $wht;
   padding-top: 2em;

   .headtitle {
      margin-bottom: 2em;

      .noteHast {
         font-family: $nunsans;
         font-size: (14 / 16) + 0em;
         color: #1cbbb4;
      }

      .titleHomeCategory {
         font-size: (33 / 16) * 1em;
         line-height: 1;
      }

      @media only screen and (max-width: 640px) {
         text-align: center;
      }
   }

   .gridSocial {
      .grid {
         margin: 0;
         list-style: $n;
         padding: 0;

         &:before,
         &:after {
            content: " ";
            display: table;
         }

         &:after {
            clear: both;
         }

         li {
            width: 25%;
            float: $l;
            display: $ib;
            position: $rel;
            background-color: $blk;
            height: 283.75px;
            overflow: hidden;

            img {
               width: 100%;
               opacity: .5;
            }

            .icons {
               position: $abs;
               z-index: 3;
            }

            .ic-video {
               top: 0;
               bottom: 0;
               right: 0;
               left: 0;
            }

            .ic-instagram,
            .fa {
               bottom: 15px;
               right: 15px;
               font-size: 28px;
               color: $wht;
            }
         }
      }

      @media only screen and (max-width: 860px) {
         .grid {
            li {
               height: 180px;
            }
         }
      }

      @media only screen and (max-width: 640px) {
         .grid {
            li {
               width: 50%;
               height: 200px;
            }
         }
      }
   }
}

.slideContent {
   .image-highlight {
      @include delay(.3s);
      @include transition(0.5s);
      opacity: 0;
      float: $l;
      width: 72%;

      img {
         max-width: inherit;
         width: 100%;

         // -webkit-transform: perspective(1px) scale(1.1);
         // -moz-transform: perspective(1px) scale(1.1);
         // -o-transform: perspective(1px) scale(1.1);
         // -ms-transform: perspective(1px) scale(1.1);
         // transform: perspective(1px) scale(1.1);
         @media screen and (min-width: 1400px) {
            // width:100%;
         }
      }

      @media only screen and (max-width: 860px) {
         width: 100%;
      }
   }

   .captionhighlight {
      @include delay(.3s);
      @include transition(0.5s);
      opacity: 0;
      float: $l;
      width: 28%;
      padding: 0 3em;
      overflow: hidden;
      position: relative;
      opacity: 0;
      -webkit-transform: translate3d(-100%, 0%, 0px);
      -moz-transform: translate3d(-100%, 0%, 0px);
      -o-transform: translate3d(-100%, 0%, 0px);
      -ms-transform: translate3d(-100%, 0%, 0px);
      transform: translate3d(-100%, 0%, 0px);
      text-align: $c;

      // .midleheight {width:1%;padding:0 10px 50px;}
      .titlehighlight {
         font-family: $nunsans;
         font-size: (15 / 16) * 1em;
         color: #000;
         font-weight: 700;
         line-height: 1.4;
         margin: 1em 0;
         display: inline-block;
      }

      .namehighlight {
         font-family: $oswald;
         font-weight: 500;
         font-size: (32 / 16) * 1em;
         color: #363636;
         text-transform: $upc;
         line-height: 1.1;
      }

      p {
         margin: 15px 0;
         font-family: $nunsans;
         font-size: (21 / 16) * 1em;
         color: #494949;
         font-weight: 300;
         line-height: 1.4;
      }

      @media screen and (min-width: 1400px) {
         // padding:0 9.4em 0 4.6em;
      }

      @media screen and (max-height:900px) {}

      @media only screen and (max-width: 860px) {
         width: 100%;
         padding-bottom: 4em;

         .midleheight {
            display: block;
         }

         .namehighlight {
            font-size: 1.5em;
         }

         font-size: 1em;
      }
   }

   .fmnav-active-slide {
      .image-highlight {
         opacity: 1;
      }

      .captionhighlight {
         opacity: 1;
         -webkit-transform: translate3d(0%, 0%, 0px);
         -moz-transform: translate3d(0%, 0%, 0px);
         -o-transform: translate3d(0%, 0%, 0px);
         -ms-transform: translate3d(0%, 0%, 0px);
         transform: translate3d(0%, 0%, 0px);
      }
   }

   .fmnav-direction-nav {
      position: absolute;
      bottom: 1em;
      right: 0;
      width: 28%;
      text-align: $c;
      z-index: 3;

      @media only screen and (max-width: 860px) {
         width: 100%;
         bottom: 23%;
      }

      @media only screen and (max-width: 640px) {
         width: 100%;
         bottom: 35%;
      }

      li {
         list-style: none;
         display: inline-block;

         a {
            width: 61px;
            height: 61px;
            border-radius: 61px;
            background-color: #d7d7d7;
            opacity: 1;
            position: $rel;
            display: $b;
            text-indent: 9999em;
            margin: 0 .5em;

            @media only screen and (max-width: 860px) {
               position: absolute;
               width: 40px;
               height: 40px;
            }

            &:before {
               content: '';
               position: $abs;
               left: 0;
               bottom: 0;
               right: 0;
               top: 0;
               margin: auto;
               background-image: url("{{ asset_path('theme::img/icons.png') }}");
               background-repeat: no-repeat;
               width: 9px;
               height: 14px;
            }

            &.fmnav-prev {
               left: 0;

               &:before {
                  background-position: -151px -82px;
               }
            }

            &.fmnav-next {
               right: 0;

               &:before {
                  background-position: -162px -80px;
               }
            }

            &:hover {
               background-color: $gold;
            }
         }
      }
   }
}

.fujiInspiring {
   img {
      width: 100%;
   }

   .caption {
      position: $abs;
      bottom: 3em;
      height: 180px;
      max-height: inherit;
      width: 350px;
      left: 3em;

      .titleCaption {
         font-family: $oswald;
         font-weight: 500;
         font-size: (30.38 / 16) * 1em;
         line-height: 1;
         color: $wht;
         width: 160px;
         text-transform: $upc;
         margin-bottom: .5em;

         @media only screen and (max-width: 640px) {
            font-size: 1em;
         }
      }

      p {
         color: $wht;
         font-size: (30 / 16) + 0em;
         font-family: $nuni;
         font-weight: 400;
         line-height: 1.2;
      }

      @media only screen and (max-width: 640px) {
         position: absolute;
         bottom: 0;
         height: auto;
         max-height: inherit;
         width: 100%;
         left: 0;
         padding: 1em;
      }
   }

   .specialBanner {
      background-color: #000;
      overflow: hidden;
      -webkit-transition: all .4s;
      -moz-transition: all .4s;
      -ms-transition: all .4s;
      -o-transition: all .4s;
      transition: all .4s;

      img {
         opacity: .4;
         -webkit-transition: all .4s;
         -moz-transition: all .4s;
         -ms-transition: all .4s;
         -o-transition: all .4s;
         transition: all .4s;
      }

      &:hover {
         img {
            opacity: .6;
         }
      }

      .titlefeature {
         font-family: $oswald;
         font-weight: 400;
         text-transform: $upc;
         color: $gold;
         font-size: (16 / 16) + 0em;
      }

      .caption {
         // bottom: 0em;
      }

      p {
         font-size: (21 / 16) + 0em;

         @media only screen and (max-width: 640px) {
            font-size: 0.8em;
         }
      }

      // &:hover {
      //    color:#fff
      // }
      &.nopaci {
         .caption {
            position: $abs;
            bottom: 0;
            right: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;

            @media only screen and (max-width: 860px) {
               .sizeCenterElm {
                  margin-top: 10% !important;
               }
            }
         }

         .notes {
            display: $b;
            font-size: (13 / 16) + 0em;
            font-weight: 700;
            color: rgba(0, 0, 0, 0.53);

            @media only screen and (max-width: 640px) {
               color: #fff;
            }
         }

         img {
            opacity: 1;
         }

         .link {
            font-size: (14 / 16) + 0em;
            text-transform: $upc;
            color: $semiitem;
            background-color: $wht;
            border-radius: 40px;
            display: block;
            line-height: 3em;
            margin: 1.5em auto 0;
            margin-top: 3em;
            width: 200px;
            border-color: $wht;
         }
      }

      .captionbanner {
         position: $abs;
         top: 0;
         bottom: 0;
         left: 0;
         margin: 0 auto;

         .midleheight {
            width: 1%;
         }

         .titleCaption {
            font-weight: 900;
            text-transform: $upc;
            font-size: (59 / 16) + 0em;
            letter-spacing: .1em;
            line-height: 1;
            color: rgba(255, 255, 255, 0.8);
         }

         p {
            letter-spacing: .1em;
            font-size: (26 / 16) + 0em;
            color: $blk;
            line-height: 1;
            font-weight: 800;
            font-family: $nuni;
            width: 90%;
            margin: .5em auto;
            text-transform: uppercase;

            @media only screen and (max-width: 640px) {
               color: #fff;
               font-size: 1em;
            }
         }
      }

      .sizeCaption {
         width: 500px;
         max-width: 100%;
      }
   }

   @media only screen and (max-width: 640px) {
      .specialBanner {
         .sizeCaption {
            width: 100%;
            padding: 1em;

         }

         .captionbanner {
            position: relative;

            .midleheight {
               height: 200px !important;
            }

            .titleCaption {
               font-size: 1.688em;
            }
         }
      }
   }
}

.topBotZero {
   position: $abs;
   top: 0;
   bottom: 0;
}

.contentFeature {
   .caption {
      left: 5%;
      right: initial;
      width: 485px;
      max-width: 100%;
      display: table;

      .titleHomeCategory {
         font-size: (21 / 16) + 0em;
         color: #acacac;
         margin: 0;
         text-transform: $upc;
         font-weight: 500;
         margin-bottom: 1.2em;
      }

      p {
         color: $blk;
         font-size: (45 / 16) + 0em;
         font-family: $nuni;
         text-transform: $upc;
         line-height: 1.3;
      }

      .link {
         margin-top: 2em;
      }
   }
}

.contentGallery {
   background-color: #ebebeb;
   padding: 5em 0 0;

   .titleHomeCategory {
      font-size: (20 / 16) + 0em;
      font-weight: 500;
      margin-bottom: 1em;
   }

   .gallery {
      text-align: $c;

      ul {
         list-style: none;
         margin: 1em 0;
         padding: 0;
         display: $ib;
      }

      li {
         display: inline-block;
         float: left;
         width: 150px;
         text-align: $c;
         margin-right: 1em;

         a {
            font-size: 0.85em;
            color: $blk;
            text-transform: $cap;
            border: solid 1px $blk;
            display: block;
            line-height: 40px;
            border-radius: 34px;
            font-size: (17 / 16) + 0em;
            font-family: $nunsans;
            text-transform: $cap;
            font-weight: 600;
            @include transition(0.5s);

            &.selected,
            &:hover {
               background-color: $gold;
               color: $wht;
               border-color: $col-title;
            }
         }
      }

      @media only screen and (max-width: 640px) {
         ul {
            width: 100%;

            li {
               width: 33.3%;
               margin: 0;
               padding: 0.2em;

               a {
                  font-size: 0.8em;
               }
            }
         }
      }
   }

   .detailFil {
      margin-top: 1em;
      margin-bottom: 1em;

      .grid {
         margin: 0 -1rem;
         display: inline-block;
         list-style: none;
         width: 100%;

         li {
            width: 33.33333%;
            padding: 1em;
            overflow: hidden;
            float: left;
            position: $rel;

            >a,
            .boxOffers {
               display: $b;
               border-radius: 10px;
               position: $rel;
               overflow: $hd;
               @include transition(300ms);

               &:after {
                  // content:'';
                  // position:$abs;
                  // top:0;
                  // bottom:0;
                  // left:0;
                  // right:0;
                  // box-shadow: inset 0px -255px 160px -64px rgba(0, 0, 0, 0.7);
                  // @include transition(0.5s);
               }
            }

            a.arrowLink {
               position: $abs;
               bottom: 2em;
               right: 2em;
               opacity: 0;

               &:after {
                  display: none;
               }
            }

            .caption {
               padding: 1em;
               position: $abs;
               bottom: 0;
               width: 75%;
               z-index: 3;

               p {
                  color: $wht;
                  font-size: (21 / 16) + 0em;
                  font-family: $nunsans;
                  line-height: 1.3;
               }

               .category {
                  display: inline-block;
                  font-family: $sans;
                  font-size: (13 / 16) + 0em;
                  color: #1cbbb4;
                  text-transform: $cap;
               }
            }

            // .fa {
            //    width:25px;
            //    height:25px;
            //    line-height:25px;
            //    border-radius:25px;
            //    color:#fff;
            //    font-size:14px;
            //    text-align:$c;
            //    &.fa-twitter {background-color:#3289c7;}
            //    &.fa-facebook {background-color:#4e71a8;}
            //    &.fa-instagram {color:#b32195;font-size:20px;text-align:$l;}
            // }
            &:hover {

               >a,
               .boxOffers {
                  box-shadow: 0px 0px 25px -5px #000;

                  &:after {
                     // box-shadow:inset 0px -600px 0px -85px rgba(0, 0, 0, 0.7);
                  }
               }

               a.arrowLink {
                  opacity: 1;
               }
            }
         }
      }
   }

   @media only screen and (max-width: 640px) {
      .detailFil {
         .grid {
            margin: 0;

            li {
               width: 100%;
               padding: 0.5em 2em;

               .caption {
                  height: 150px;

                  .sideLeft {
                     width: 50% !important;
                  }

                  .title {
                     font-size: 0.8em !important;
                  }

                  p {
                     font-size: 1.1em;
                     line-height: 1;
                  }
               }
            }
         }
      }
   }
}

.whtShadow {
   .detailFil {
      .grid {
         li {
            >a {
               &:after {
                  content: '';
                  position: $abs;
                  top: 0;
                  bottom: 0;
                  left: 0;
                  right: 0;
                  box-shadow: inset 0px -255px 160px -64px rgba(0, 0, 0, 0.7);
                  @include transition(0.5s);
               }
            }

            &:hover {
               >a {
                  box-shadow: 0px 0px 25px -5px #000;

                  &:after {
                     box-shadow: inset 0px -600px 0px -85px rgba(0, 0, 0, 0.7);
                  }
               }

               // a.arrowLink {
               //    opacity:1;
               // }
            }
         }
      }
   }
}

.switch {
   ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: inline-block;
      border: solid 1px $sm;
      border-radius: 5px;

      li {
         float: $l;
         width: 100px;
         height: 42px;
         line-height: 40px;

         a {
            text-align: $c;
            display: $b;
            font-family: $nuni;
            font-weight: 400;
            color: $sm;
            text-transform: $upc;
            font-size: (12 / 16) + 0em;
            margin: 1px;
            overflow: hidden;
            border-radius: 5px;
            position: $rel;
            z-index: 1;

            &:after {
               position: $abs;
               top: 0;
               left: 0;
               right: 0;
               bottom: 0;
               content: '';
               z-index: -1;
               @include transition(300ms);
            }

            &.selected {
               // background-color:$gold;
            }

            &:hover,
            &.selected {
               color: $wht;

               &:after {
                  background-color: $gold;

               }
            }
         }
      }
   }
}

.gridSO {
   padding: 3em 0 0;

   * {
      @include transition(300ms);
   }

   .headOffers {
      .titleHomeCategory {
         font-size: (31 / 16) + 0em;
         margin-bottom: 1.4em;

         @media only screen and (max-width: 640px) {
            font-size: 1em;
            float: left;
            width: 50%;
            margin: 0.5em 0;
         }
      }

      .showTitle {
         float: $l;
         display: $ib;
         height: 40px;
         line-height: 40px;
         font-family: $nuni;
         font-weight: 800;
         text-transform: $upc;
         color: $sm;
      }

      .sideLeft {
         float: $l;
         width: 50%;

         ul {
            float: $l;
            margin-left: 2em;

            li {
               a {}
            }
         }
      }

      .sideRight {
         float: $l;
         width: 50%;

         .showTitle {
            float: $l;
         }

         .select {
            float: $l;
            width: 180px;
            overflow: hidden;
            border-radius: 30px;
            border: solid 1px $sm;
            margin-left: 2em;

            select {
               background-color: transparent;
               display: block;
               font-family: $nuni;
               font-weight: 600;
               color: $sm;
               text-transform: uppercase;
               font-size: 0.75em;
               overflow: hidden;
               border-radius: 5px;
               position: relative;
               padding-left: 2em;
               z-index: 1;
            }

            &:before {
               width: 35px;
               display: none;
            }

            &:after {
               font-family: $oswald;
               font-weight: 300;
               font-size: 21px;
               width: 35px;
               height: 15px;
               content: '>';
               display: $b;
               line-height: 8px;
               text-align: $c;
               background-color: transparent;
               -webkit-transform: rotate(90deg);
               -moz-transform: rotate(90deg);
               -o-transform: rotate(90deg);
               -ms-transform: rotate(90deg);
               transform: rotate(90deg);
               background-image: none;
            }
         }
      }

      @media only screen and (max-width: 640px) {
         padding: 0 1em;

         .cell {
            width: 50%;
            float: left;
         }

         .sideRight {
            width: 100%;

            .showTitle {
               font-size: 0.5em;
               float: left;
               width: 30%;
            }

            .select {
               width: 70%;
               float: left;
               margin: 0;

               select {
                  font-size: 0.5em;
                  margin: 0;
               }
            }
         }
      }
   }

   .detailFil {
      .grid {
         li {
            overflow: initial;

            .caption {
               @media screen and (min-width: 1025px) {
                  height: 115px;

                  .sideLeft {
                     .productOffers {
                        height: 50px;
                        overflow: $hd;
                        display: $b;
                     }

                     .bonusOffers {
                        height: 25px;
                        display: table-cell;
                        vertical-align: bottom;
                        width: 1%;
                     }
                  }
               }

               position:$rel;
               width: 100%;
               background-color: $wht;
               overflow:hidden;

               .sideLeft {
                  width: 200px;
                  max-width: 100%;
                  float: $l;

                  .productOffers {}
               }

               .sideRight {
                  width: 75px;
                  max-width: 100%;
                  float: $r;
                  border-left: solid 1px #ddd;
                  padding-left: 14px;
               }

               .title {
                  font-family: $oswald;
                  font-weight: 500;
                  font-size: (19 / 16) + 0em;
                  line-height: (21 / 16) + 0;
                  color: $blk;
                  text-transform: $upc;
                  margin: 0;
               }

               p {
                  font-weight: 600;
                  font-family: $nuni;
                  font-size: (14 / 16) + 0em;
                  display: $b;
               }

               p {
                  color: $sm;
                  margin: 0;
                  line-height: (17 / 16) + 0;
               }

               .noteOffers {
                  color: #c2c2c2;
                  line-height: 17px;
               }

               .dateOffers {
                  font-family: $oswald;
                  font-weight: 500;
                  color: #494949;
                  display: $b;
                  font-size: (15 / 16) + 0em;
                  line-height: (20 / 16) + 0;
                  margin-bottom: 10px;

                  &:last-child {
                     margin-bottom: 0;
                  }
               }
            }

            .layerImage {
               @media screen and (min-width: 1025px) {
                  height: 345px;
               }

               img {
                  width: 100%;
                  // @include transition(800ms);
               }
            }

            .boxOffers {
               border-radius: 5px;
            }

            &:hover {

               >a,
               .boxOffers {
                  box-shadow: 0px 0px 32px -5px #7d7070;

                  &:after {
                     // box-shadow:inset 0px -600px 0px -85px rgba(0, 0, 0, 0.7);
                  }
               }

               .title {
                  color: $gold;
                  padding-left: .5em;
               }

               .layerImage {
                  img {
                     @include scale(1.02, 1.02, 1.02)
                  }
               }

               p {
                  color: $gold;
                  @include delay(.3s);
                  padding-left: .5em;
               }
            }
         }
      }
   }
}

.detailOffer {
   img {
      width: 100%;
   }

   .caption {
      position: $abs;
   }
}

.pagination {
   ul {
      margin: 1em 0 2em;
      width: auto;
      display: table;
      width: $at;
      text-align: $c;

      li {
         float: $l;
         list-style: none;
         padding: 0 0.2em;

         a,
         span {
            display: $b;
            width: 30px;
            height: 30px;
            border-radius: 30px;
            line-height: 30px;
            font-size: 1em;
            text-align: $c;
            font-family: $nuni;
            font-weight: 600;
            color: $sm;
         }

         &.next {
            margin: 0 2em 0 .5em;
         }

         &.prev,
         &.next {
            text-transform: $upc;

            a {
               width: auto;
               height: auto;
            }
         }

         &:hover {
            a {
               color: $blk;
            }
         }

         &.active {
            span {
               background-color: $gold;
               color: $blk;
            }
         }
      }
   }
}

.bannerDetailOffer {
   img {
      width: 100%;
   }

   .caption {
      position: absolute;
      top: 40%;
      left: 0;
      right: 0;

      @media only screen and (max-width: 860px) {
         top: 2%;
      }

      .titleCaption {
         color: $wht;
         font-family: $oswald;
         font-weight: 500;
         text-transform: $upc;
         font-size: (45 / 16) + 0em;
         line-height: 1.1;
         margin-bottom: .2em;
      }

      p {
         color: rgba(255, 255, 255, 0.75);
         font-weight: 300;
         font-size: (21 / 16) + 0em;
      }

      .sizeCaption {
         width: 400px;
         max-width: 100%;
         margin-left: 5em;
      }
   }

   @media only screen and (max-width: 640px) {
      .caption {
         position: relative;
         top: auto;
         padding: 0 1em;

         .titleCaption {
            color: $blk;
            font-size: 1.8em;
         }

         p {
            color: $blk;
         }

         .sizeCaption {
            width: 100%;
            margin: 0;
            text-align: center;
            margin-top: 2em;
         }
      }
   }
}

.bannerProduct {
   transition: all 300ms;

   &.hidden {
      opacity: 0
   }

   .imgbnr {
      width: 100%;
   }

   .imgcmr {
      position: $abs;
      bottom: 0;
      right: 0;
   }

   .caption {
      position: absolute;
      top: 0;
      height: 100%;
      display: flex;
      align-items: center;
      left: 0;
      right: 0;

      .titleCaption {
         color: $wht;
         font-family: $oswald;
         font-weight: 500;
         text-transform: $upc;
         font-size: (45 / 16) + 0em;
         line-height: 1;
         margin-bottom: .4em;
      }

      p {
         color: $wht;
         font-weight: 300;
         font-size: (18 / 16) + 0em;
      }

      .sizeCaption {
         width: 260px;
         max-width: 100%;

         .highlightTitle {
            color: $wht !important;
            font-weight: 800;
         }

         // margin-left:5em;
      }
   }

   .botRight {}

   @media screen and (min-width: 1025px) {
      margin-bottom: 10em;
      background-color: $wht;

      .imgcmr {
         right: 5em;
      }
   }

   @media screen and (max-width: 640px) {
      .caption {
         background: rgba(0, 0, 0, 0.7);
         padding: 0 1em;

         .sizeCaption {
            width: 100%;
            text-align: center;
         }

         .titleCaption {
            font-size: 2em;
         }

         p {
            color: $wht !important;
            font-size: 0.9em;
            line-height: 1;
         }
      }

      .imgcmr {
         right: 15%;
         width: 70%;
         z-index: 2;
         bottom: -90% !important;
      }
   }
}

.bannerNewsDetail {
   transition: all 300ms;

   &.hidden {
      opacity: 0
   }

   .imgbnr {
      width: 100%;
   }

   .imgcmr {
      position: $abs;
      bottom: 0;
      right: 0;
   }

   .caption {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      display: flex;
      height: 100%;
      align-items: center;

      .sizeCenterElm {
         width: 900px;
      }

      .date {
         font-size: 0.8125em;
         color: #868f96;
         display: block;
      }

      .titleCaption {
         color: $wht;
         font-family: $oswald;
         font-weight: 500;
         text-transform: $upc;
         font-size: (45 / 16) + 0em;
         line-height: 1;
         margin-bottom: .4em;
      }

      p {
         color: $wht;
         font-weight: 300;
         font-size: (18 / 16) + 0em;
      }

      .sizeCaption {
         width: 800px;
         max-width: 100%;
         // margin-left:5em;
      }

      @media screen and (max-width: 640px) {
         .titleCaption {
            font-size: 1.5125em;
         }

         .sizeCaption {
            width: 100%;
            padding: 1em;
         }

         p {
            font-size: 0.8em;
         }
      }
   }

   .botRight {}

   @media screen and (min-width: 1025px) {
      // margin-bottom: 10em;
      background-color: $wht;

      .imgcmr {
         right: 5em;
      }
   }
}

.headlineProduct {
   padding-bottom: 2em;
   padding-top: 2em;

   .titleProduct {
      color: $gold;
      font-size: (13 / 16) + 0em;
      font-family: $nunsans;
      font-weight: 400;
      text-transform: $upc;
   }

   .headline {
      font-size: (33 / 16) + 0em;
      font-family: $oswald;
      font-weight: 500;
      text-transform: $upc;

      @media screen and (min-width: 1025px) {
         padding: 0 1em;
      }
   }

   @media screen and (max-width: 640px) {
      padding: 0 1em;

      .headline {
         font-size: 1.3em;
      }
   }
}

.categoryProduct {
   padding-bottom: 2em;
   padding-top: 2em;

   * {
      transition: all 300ms;
   }

   .item {
      width: 33.33333%;
      float: left;
      position: relative;
      z-index: 2;
      padding: 1em;


      .i-camera {
         position: $rel;
         background-color: $wht;
         border-radius: 5px;
         // overflow:$hd;
      }

      .categCamera {
         font-size: (14 / 16) + 0em;
         font-family: $nunsans;
         font-weight: 400;
         color: $gold;
         margin-bottom: .3em;
         line-height: 1;
         position: $rel;
         z-index: 3;
         display: $ib;
         position: $abs;
         left: 2.7em;
         top: 1.8em;
         z-index: 4;
         // top:0;
      }

      .titleProduct {
         font-size: (21 / 16) + 0em;
         font-family: $nunsans;
         font-weight: 700;
         text-transform: $upc;
         position: $rel;
         z-index: 3;
         height: 65px;
      }

      .imgCamera {
         display: $b;

         @media screen and (min-width: 1025px) {
            height: 224px;

            img {
               position: $abs;
               bottom: 0;
               top: 0;
               left: 0;
               right: 0;
               margin: auto;
               z-index: -1;
            }
         }
      }

      .detail {
         background-color: rgba(0, 0, 0, 0.75);
         box-shadow: 0px 0px 21px -5px #000;
         border-radius: 5px;

         @media screen and (min-width: 1025px) {
            opacity: 0;
            position: $abs;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            z-index: -1;
         }

         .arrow {
            position: absolute;
            bottom: 0;
            top: 0;
            left: 0;
            right: 0;
            margin: auto;
            color: red;
            display: inline-grid;
            width: 100%;
            text-align: $c;
            align-content: center;
         }

         .ic-arrow {
            width: 41px;
            height: 41px;
            display: block;
            margin: auto;
            background-image: url("{{ asset_path('theme::img/arrow-right.png') }}");
            background-repeat: no-repeat;
            background-position: center;
            margin-bottom: 1em;
            border-radius: 41px;
            border: solid 2px $wht;
         }

         .text {
            font-family: $nunsans;
            font-size: (14 / 16) + 0em;
            color: $wht;
         }
      }

      .boxProduct {
         padding: 2.5em;
         position: $rel;

         &.hover {

            .detail {
               z-index: 1;
               opacity: 1;
            }
         }

         .cameraproduct {
            .titleProduct {
               color: $blk;
            }

            &:hover {
               .titleProduct {
                  color: $wht;
               }

               .detail {
                  opacity: 1;
                  z-index: 1;
               }
            }
         }
      }

      ul.slides {
         margin: 0;
         z-index: 3;

         li {
            padding: 0;

            &:hover {
               .detail {
                  // opacity:1;
               }
            }
         }
      }

      .fmnav-control-nav {
         bottom: inherit;
         top: 1.5em;
         right: 2.5em;
         text-align: $r;
         width: auto;
         z-index: 3;

         li {
            margin: 0 0.1em;

            a {
               background-color: #9b9da3;

               &:hover {
                  background-color: #494949;
               }

               &.fmnav-active {
                  background-color: $gold;
               }
            }
         }
      }
   }

   @media screen and (max-width: 860px) {
      .item {
         .boxProduct {
            position: relative;

            .cameraproduct {
               .titleProduct {
                  color: $blk !important;
                  font-size: 1em;
                  line-height: 1;
                  height: 50px;
               }
            }
         }

         .detail {
            opacity: 0 !important;
         }
      }
   }

   @media screen and (max-width: 640px) {
      .item {
         width: 50%;
         padding: 0.3em;

         .boxProduct {
            padding: 4em 1em;
            position: relative;
            height: 300px;

            .cameraproduct {
               .titleProduct {
                  color: $blk !important;
                  font-size: 1em;
                  line-height: 1;
                  height: 50px;
               }
            }
         }

         .categCamera {
            left: 1em;
         }

         .fmnav-control-nav {
            right: 1em;
         }

         .detail {
            opacity: 0 !important;
         }
      }
   }
}

.campaignProduct {
   .bgImg {
      background-color: #000;

      @media only screen and (max-width: 640px) {
         height: 180px;
      }

      >img {
         opacity: .55;

      }
   }

   .caption {
      .midleheight {
         display: table;
         width: 100%;

         @media only screen and (max-width: 640px) {
            height: auto !important;
         }

         h2 {
            margin-top: 3em;

            @media only screen and (max-width: 860px) {
               margin-top: 1em;
               font-size: 1.5em;
            }

            @media only screen and (max-width: 640px) {
               margin-top: 1em;
               margin-bottom: 0;
               font-size: 1.5em;
            }
         }
      }
   }

   .titleHomeCategory {
      // font-size: 44px;
      font-size: (44 / 16) * 1em;
      text-transform: $upc;
      color: $wht;
      font-weight: 900;
      font-family: $nunsans;
      margin: 3rem 0 0.5rem;
   }

   p {
      font-size: (28 / 16) + 0em;
      font-weight: 300;
      color: rgba(255, 255, 255, 0.65);
      font-family: $nunsans;
      width: 90%;
      margin: $at;
      line-height: 1.3;
   }

   .ic-video {
      margin-top: 3em;
      opacity: .45;

      &:hover {
         opacity: 1;
      }

      @media only screen and (max-width: 860px) {
         margin-top: 1em;
         transform: scale(0.8);
      }

      @media only screen and (max-width: 640px) {
         margin-top: -1em;
         transform: scale(0.5);
      }
   }
}

.productGallery {
   .headtitle {
      padding: 2em 0;
   }

}

.galleryGrid {
   li {
      position: $rel;

      @media screen and (min-width: 1025px) {
         width: 50%;
         float: left;
         display: $ib;
         padding: .25em;
      }

      img {
         width: 100%;
      }

      .caption {
         position: $abs;
         left: .25em;
         right: .25em;
         bottom: .25em;
         color: $wht;
         background-image: url("{{ asset_path('theme::img/shadow.png') }}");
         background-repeat: repeat-x;

         .rowCaption {
            position: $rel;
            padding: 2em 0 3em 3em;
            background: rgba(255, 255, 255, 0);
            background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
            background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(0, 0, 0, 0.5)));
            background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
            background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
            background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
         }

         h1,
         span {
            font-family: $nunsans;
            font-weight: 600;
            font-size: (13 / 16) + 0em;
            margin: 0;
         }

         span {
            font-weight: 400;
         }
      }
   }
}

.contentProd {
   display: $b;

   .feature {
      font-family: $nuni;
      font-weight: 400;
      font-size: (13 / 16) + 0em;
      color: $gold;
      text-transform: $upc;
      line-height: 1;
      display: $b;
   }

   h2 {
      font-size: (27 / 16) + 0em;
      margin-bottom: 0.5em;
      color: $blk;
      font-family: $oswald;
      font-weight: 500;
      text-transform: $upc;
      line-height: 1.3;
   }

   p {
      line-height: 1.4;
      text-align: justify;

      strong {
         font-size: (17 / 16) + 0em;
         color: #00ac7c;
      }
   }

   @media only screen and (max-width: 640px) {
      padding: 0 1em;
   }
}

.imageContent {
   overflow: hidden;
   position: $rel;


   .grid-x {
      &:first-child {
         &.contentProd {
            .medium-6 {
               float: $l;
               padding-right: 10em;
            }
         }

         .imgDec {
            left: 0;
            right: inherit;
         }
      }

      &:last-child {
         &.contentProd {
            .medium-6 {
               float: $r;
               padding-left: 10em;
            }
         }

         .imgDec {
            right: 0;
            left: inherit;
         }
      }

   }

   // > .mainContent {
   // }
   .mainContent {
      padding: 0;
   }

   // .imgDec {
   //    &:first-child {
   //          left: 0;
   //    }
   //    &:last-child {
   //          right: 0;
   //          // width:131.5%;
   //    }
   // }
   .imgDec {
      top: 0;
      bottom: 0;

      position: absolute;
      // width: 123%;
      // width: 100%;
      max-width: inherit;

      img {
         width: 100%;
      }
   }

   @media only screen and (max-width: 860px) {
      .imgDec {
         position: relative;
         width: 100%;
      }

      .grid-x {
         &.contentProd {
            padding: 1em;
            text-align: center;

            .medium-6 {
               padding: 0 !important;
               width: 100%;
            }
         }
      }
   }
}

.campaignDetail {
   .caption {
      left: 0;
      right: 0;
      text-align: $l;

      p {
         font-size: (14 / 16) + 0em;
         color: rgba(255, 255, 255, 0.65);

         strong {
            font-size: (17 / 16) + 0em;

         }
      }

      .titleHomeCategory {
         font-size: (27 / 16) + 0em;
         font-weight: 500;
         margin-bottom: 1em;
         color: $wht;

      }
   }

   @media only screen and (max-width: 860px) {
      .caption {
         text-align: $c;
         position: relative;
         padding: 1em;

         p {
            color: $blk;
         }

         .midleheight {
            height: auto !important;
         }
      }
   }
}

.titlefeature {
   font-family: $oswald;
   font-weight: 400;
   text-transform: $upc;
   color: $gold;
   font-size: (16 / 16) + 0em;
}

.bundling {
   padding: 2em 0 0;
   overflow: hidden;

   .titleHomeCategory {
      font-weight: 500;
      color: $gold;
      font-size: (86 / 16) + 0em;
      width: 500px;
      margin-bottom: -35px;
      line-height: 1;
      z-index: 3;
      position: relative;

      @media only screen and (max-width: 640px) {
         font-size: 2.5em;
         width: 100%;
         padding: 0 1em;
      }
   }

   .fuji-bundling {
      display: table;
      margin-bottom: 4em;

      .i-camera {
         img {
            width: 60%;
         }
      }

      .item {
         // width: 100%;

      }
   }

   @media only screen and (max-width: 640px) {
      margin-bottom: 2em;

      .fuji-bundling {
         display: table;

         .item {
            width: 100%;
         }
      }
   }
}

.fuji-bundling {
   width: 100%;

   a {
      display: $b;
   }

   * {
      transition: all 300ms
   }

   .i-camera {
      // height: 110px;
      position: relative;
      margin-bottom: 10px;
      text-align: $c;

      @media screen and (min-width: 1025px) {
         height: 185px;

         img {
            position: $abs;
            bottom: 0;
            top: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 60%;
            @include transition(1000ms);
         }
      }

      img {}
   }

   .nameProduct {
      font-weight: 400;
      font-family: $nuni;
      color: #111111;
      font-size: (17 / 16) + 0em;
      margin: 0;
      line-height: 21px;
      height: auto;
   }

   .caption {
      width: 80%;
      margin: 0 auto;
      float: none;
      text-align: $c;

      @media screen and (min-width: 1025px) {
         height: 120px;
      }

      span {
         display: $b;
         color: $sm;
      }
   }

   .item {
      width: 33.33333%;
      float: left;
      padding: 1em 0;
      position: $rel;
      z-index: 2;

      .small-6 {
         width: 50%;
         float: $l;
         padding: 0 1em;
         position: $rel;
      }

      .boxleft {
         text-align: $r;

         &:after {
            position: $abs;
            content: '';
            margin: auto;
            top: 0;
            bottom: 0;
            right: 0;
            height: 40px;
            width: 1px;
            background-color: #b7b7b7;
         }

         a {
            height: 45px;
            display: table-cell;
            vertical-align: middle;
         }
      }

      .boxright {
         text-align: $l;
         padding-top: 5px;
      }

      .noteOffers {
         line-height: 1;
         font-size: (13 / 16) + 0em;
         text-transform: $cap;
      }

      .price {
         font-family: $oswald;
         font-weight: 500;
         font-size: (18 / 16) + 0em;
         color: #c0a062;
         text-transform: $upc;
         line-height: 24px;
      }

      &:nth-of-type(odd) {
         background-color: $wht;
      }

      .link {
         clear: both;
         margin: auto;
         display: $b;
         margin: 1em auto 0;
         top: 1em;
         position: $rel;
         border-radius: 30px;
         width: 140px;

         &.outstock {
            color: $wht !important;
            pointer-events: none;
            background: $semiitem !important;
            border-color: $semiitem !important;
            opacity: .6;
         }
      }

      &:hover {
         color: #fff;

         &:nth-of-type(odd) {
            box-shadow: 0px 0px 60px -10px #909090;
         }

         &:nth-of-type(even) {
            z-index: 3;
            box-shadow: 0px 0px 30px 0px #cccccc;
         }

         img {
            @include scale(1.2, 1.2, 1.2)
         }

         .nameProduct {
            color: $blk;
         }

         .category {
            color: $blk;
         }

         .link {
            color: $wht;
            background-color: $gold;
         }
      }
   }

   @media only screen and (max-width: 640px) {
      // padding: 0 1em;
      width: 100%;
      overflow-x: auto;
      white-space: nowrap;
      display: flex;

      .item {
         display: table;
         width: 230px;

         .i-camera {
            padding: 1em;
         }

         .caption {
            white-space: normal;

            p {
               font-size: 0.6125em;
               height: 45px;
               overflow: hidden;
            }
         }
      }
   }
}

.related-lens {
   .fuji-bundling {
      .i-camera {
         @media screen and (min-width: 1025px) {
            height: 250px;
         }

      }
   }

   .nameProduct {
      height: 70px;
   }
}

.grid-margin-x {
   @media only screen and (max-width: 640px) {
      margin: 0;
   }
}

.formApplication {
   .sideLeft {
      width: 46%;
      float: $l;

      @media only screen and (max-width: 640px) {
         width: 100%;
      }
   }

   .sideRight {
      width: 43.66667%;
      float: $r;

      p {
         line-height: (22 / 16) + 0em;
      }

      .inputLocation {
         margin-top: 2em;
      }

      @media only screen and (max-width: 640px) {
         width: 100%;
      }
   }

   .locationStore {
      text-transform: $cap;
   }

   ::-webkit-input-placeholder {
      color: #c2c2c2;
   }

   ::-moz-placeholder {
      color: #c2c2c2;
   }

   :-ms-input-placeholder {
      color: #c2c2c2;
   }

   :-moz-placeholder {
      color: #c2c2c2;
   }

   input,
   .locationStore {
      display: $b;
      border: solid 1px #c2c2c2;
      border-radius: 10px;
      padding: 8px 15px;
      position: $rel;
      font-size: (14 / 16) + 0em;
      color: #494949;
      background-color: $trans;
      box-shadow: $n;
      font-family: $nunsans;
      font-weight: 400;
   }

   .idUser {
      .select {
         width: 30%;
         display: $ib;
         overflow: hidden;
         border-radius: 10px;
         border: solid 1px #c2c2c2;
         height: 39px;

         select {
            background-color: transparent;
            display: block;
            font-family: $nunsans;
            font-weight: 400;
            color: #c2c2c2;
            font-size: (14 / 16) + 0em;
            overflow: hidden;
            border-radius: 5px;
            position: relative;
            padding-left: 1em;
            z-index: 1;
         }

         &:before {
            width: 35px;
            display: none;
         }

         &:after {
            font-family: $oswald;
            font-weight: 300;
            font-size: 21px;
            width: 35px;
            height: 15px;
            content: '>';
            display: $b;
            line-height: 8px;
            color: #c2c2c2;
            text-align: $c;
            background-color: transparent;
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            transform: rotate(90deg);
            background-image: none;
         }
      }

      input {
         width: 65%;
         float: $r;
         margin-top: 0;
      }
   }

   label,
   .titleSec {
      display: $b;
      font-size: (16 / 16) + 0em;
      font-weight: 600;
      color: $blk;
      line-height: 1;
      padding: 0 0 .5em;
   }

   .fillForm {
      margin-top: 2em;
   }

   .bgpopup {
      position: absolute;
      top: 0;
      bottom: 0;
      background-color: rgba(255, 255, 255, 0.77);
      width: 100%;
   }

   .bxShadow {
      box-shadow: 0px 0px 60px -10px #717171;
   }

   .boxPop {
      background-color: $wht;
      margin: auto;
      position: $rel;
      z-index: 3;
   }

   .nameProduct {
      font-weight: 400;
      font-family: $nuni;
      color: #111111;
      font-size: 1.2875em;
      margin: 1em 0 0.5em;
      line-height: 22px;
   }

   .notePromo {
      margin: .5em 0 1.5em;
   }

   .noteOffers {
      line-height: 1;
      font-size: (13 / 16) + 0em;
      text-transform: $cap;
      color: $sm;
   }

   .price {
      font-family: $oswald;
      font-weight: 500;
      font-size: (18 / 16) + 0em;
      color: $gold;
      text-transform: $upc;
      line-height: 24px;
   }
}

.inputLocation {
   .locationStore {
      width: 240px;

      &:after {
         position: $abs;
         content: "\f041";
         font-family: FontAwesome;
         right: 15px;
         top: 2px;
         font-size: 22px;
         color: #c2c2c2;
      }
   }

   .visible {
      visibility: hidden;
   }
}

.containerPopup {
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 2em 0;
   z-index: 10;
   display: none;

   .titlePop {
      text-align: $c;
      font-family: $oswald;
      font-weight: 600;
      text-transform: $upc;
      font-size: (30 / 16) + 0em;
      padding: 1.5em 0 0;
      margin: 0;
   }

   .close {
      position: $abs;
      right: 2.5em;
      top: 2.5em;
      font-family: $nunsans;
      text-transform: $cap;
      color: $sm;
      font-size: (17 / 16) + 0em;

      @media only screen and (max-width: 640px) {
         right: 1.5em;
         top: 0.5em;
      }
   }
}

.boxLocation {
   .sizeBox {
      width: 960px;
      padding: 0 7em 7em;

      @media only screen and (max-width: 640px) {
         width: 80%;
         padding: 2em;
      }
   }

   .titlePop {
      border-bottom: solid 5px #e1e1e1;
      margin-bottom: .6em;

      @media only screen and (max-width: 640px) {
         font-size: 1.2em;
      }
   }

   &.singleList {
      ul {
         -moz-column-count: inherit !important;
         -moz-column-gap: 30px;
         -webkit-column-count: inherit !important;
         -webkit-column-gap: 30px;
         max-height: 300px;
         overflow-y: auto;

         li {
            width: 100%;

            a {
               overflow: hidden;

               div {
                  display: block;
                  overflow: hidden;
                  font-size: 12px;
                  text-transform: capitalize;
                  @include transition(500ms);
                  max-height: 0;
               }

               &:hover {
                  div {
                     max-height: 100px;
                  }
               }
            }
         }
      }
   }

   ul {
      -moz-column-count: 4;
      -moz-column-gap: 30px;
      -webkit-column-count: 4;
      -webkit-column-gap: 30px;
      list-style: none;
      margin: 0 -.5rem;

      @media only screen and (max-width: 640px) {
         -moz-column-count: inherit !important;
         -moz-column-gap: 30px;
         -webkit-column-count: inherit !important;
         -webkit-column-gap: 30px;
         max-height: 300px;
         overflow-y: auto;
      }

      li {
         width: 180px;
         padding-left: 0;
         line-height: 30px;

         a {
            font-family: $oswald;
            font-weight: 500;
            font-size: (26 / 16) + 0em;
            text-transform: $upc;
            color: #9b9da3;
            padding-left: 10px;
            position: $rel;
            display: $b;

            @media only screen and (max-width: 640px) {
               font-size: 1.25em;
            }

            &:before {
               position: $abs;
               content: "\f0da";
               font-family: FontAwesome;
               left: 0;
               top: 13px;
               margin: auto;
               font-size: 14px;
               font-weight: 300;
               line-height: 10px;
               color: $gold;
               opacity: 0;
               @include transition(300ms);
            }

            &:hover {
               color: $blk;

               &:before {
                  opacity: 1;
               }
            }
         }
      }
   }
}

.descriptionPromo {
   background-color: $wht;
   position: $rel;
   margin-top: 3em;

   * {
      color: #494949;
   }

   &:after,
   &:before {
      position: $abs;
      content: '';

      @media only screen and (max-width: 640px) {
         background: none;
      }
   }

   &:after {
      background-color: #fff;
      top: 0;
      bottom: 0;
      right: -100%;
      left: 0;

      @media only screen and (max-width: 640px) {
         background: none;
      }
   }

   &:before {
      background-color: #fff;

      @media only screen and (max-width: 640px) {
         background: none;
      }
   }

   .detailDesc {
      position: $rel;
      z-index: 1;
      padding: 3em 0 3em 3em;

      @media only screen and (max-width: 640px) {
         padding: 2em;
      }
   }

   .layerImg {
      position: $abs;
      z-index: 2;
      top: -50px;
      right: -17%;

      @media only screen and (max-width: 640px) {
         position: relative;
         top: auto;
         right: auto;
         width: 70%;
         margin: 2em auto;
      }

      img {
         position: $rel;
         z-index: 1;
      }

      // &:after {
      //    position:$abs;
      //    content:'';
      //    bottom: -10px;
      //    height: 44px;
      //    width: 85%;
      //    margin: auto;
      //    left: 0;
      //    right:0;
      //    box-shadow: 0px -2px 70px 37px #000;
      //    border-radius: 100%;
      //    z-index:0;
      //    -webkit-transform: rotateX(-60deg) rotateY(0deg) rotateZ(0deg);;
      //    -moz-transform: rotateX(-60deg) rotateY(0deg) rotateZ(0deg);;
      //    -o-transform: rotateX(-60deg) rotateY(0deg) rotateZ(0deg);;
      //    -ms-transform: rotateX(-60deg) rotateY(0deg) rotateZ(0deg);;
      //    transform: rotateX(-60deg) rotateY(0deg) rotateZ(0deg);
      // }
   }

   .nameProduct {
      font-weight: 400;
      font-family: $nuni;
      color: #111111;
      font-size: (27 / 16) + 0em;
      margin: 1.5em 0 .5em;
      line-height: 21px;
   }

   .notePromo {
      margin: .5em 0 2.3em;
   }

   .noteOffers {
      line-height: 1;
      font-size: (13 / 16) + 0em;
      text-transform: $cap;
      color: $sm;
   }

   .price {
      font-family: $oswald;
      font-weight: 500;
      font-size: (18 / 16) + 0em;
      color: $gold;
      text-transform: $upc;
      line-height: 24px;
   }

   li,
   p {
      font-size: (13 / 16) + 0em;
      color: #494949;
   }

   li {
      font-weight: 700;
   }

   .link {
      background-color: $trans;
      background-color: transparent;
      border: solid 1px #494949;
      display: inline-block;
      margin-top: 2em;
      width: 130px;
      padding: .8em;
      font-size: 1em;

      &:hover {
         color: $wht;
         background-color: $gold;
         border-color: $gold;
      }
   }
}

.boxConfirm {
   padding: 0;

   .sizeBox {
      width: 670px;
      height: 620px;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;

      @media only screen and (max-width: 640px) {
         width: 100%;
      }
   }

   .contents {
      width: 350px;
      margin: auto;
      text-align: $c;

      p {
         padding: 0 1.5em;
      }
   }

   .mCSB_outside+.mCSB_scrollTools {
      opacity: 0;
   }

   .confrmProduct {
      text-align: $c;
      padding: 1em 0;

      a,
      input {
         display: $ib;
         width: 130px;
         line-height: 40px;
         border: solid 1px #494949;
         padding: 0;
         border-radius: 10px;
         font-family: $nunsans;
         font-size: (16 / 16) + 0em;
         text-transform: $cap;
         cursor: pointer;

         &:hover {
            color: $wht;
            background-color: $gold;
         }
      }
   }
}

.relatedOffers {
   padding: 4em 0 3em;

   .titleHomeCategory {
      font-family: $nuni;
      font-weight: 400;
      color: #c0a062;
      font-size: 1.3125em;
      margin-bottom: 1.5em;
   }

   .fuji-relatedOffers {
      .owl-item {
         img {
            width: auto;
         }
      }

      .owl-nav {
         button {

            &.owl-prev,
            &.owl-next {
               width: 50px;
               height: 50px;
               margin: auto;
               background-color: transparent;
               border: solid 1px $sm;
               border-radius: 50px;

               span {
                  background-image: none;
                  text-indent: 0;
                  bottom: 0;
                  top: 0;
                  height: 18px;
                  width: 20px;
                  margin: auto;
                  line-height: 13px;
                  font-size: 28px;
                  color: $sm;
                  font-family: $oswald;
                  font-weight: 300;
               }

               &:hover {
                  background-color: #c0a062;
                  border-color: #c0a062;

                  span {
                     color: #fff;
                  }
               }
            }

            &.owl-prev {
               left: -8em;
            }

            &.owl-next {
               right: -8em;
            }
         }
      }

      .i-camera {
         height: 110px;
         position: relative;
         margin-bottom: 10px;

         img {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            opacity: .5;
         }
      }

      .nameProduct {
         font-family: $nuni;
         font-weight: 700;
         text-transform: uppercase;
         font-size: 1em;
         margin: 0;
         color: $sm;
      }

      .caption {
         text-align: center;

         span {
            display: $b;
            color: $sm;

         }
      }

      .item {
         * {
            @include transition(300ms);
         }

         &:hover {
            .nameProduct {
               color: #000;
            }

            .category {
               color: #000;
            }

            .i-camera {
               img {
                  opacity: 1;
               }
            }
         }
      }
   }
}

.relatedArticle {
   background-color: $wht;
   overflow: hidden;
   padding: 5em 0;
   position: $rel;
   margin-top: -.25em;

   * {
      transition: all 300ms;
   }

   .fuji-carousel {}

   .fuji-carousel {
      position: inherit;

      .owl-stage-outer {
         overflow: inherit;
         z-index: 2;
      }

      .owl-nav {
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
         margin: 0;

         button {
            width: 60px;
            height: 60px;
            margin: auto;
            background-color: rgba(0, 0, 0, 0.77);
            border-radius: 60px;

            span {
               background-image: none;

               &:before {
                  font-family: FontAwesome;
                  position: $abs;
                  right: 0;
                  left: 0;
                  text-indent: 0;
                  line-height: 38px;
                  margin: auto;
                  text-align: center;
                  font-size: 19px;
                  color: $wht;
               }
            }

            &.owl-prev {
               left: 3em;

               span {
                  &:before {
                     content: "\f060";
                  }
               }
            }

            &.owl-next {
               right: 3em;

               span {
                  &:before {
                     content: "\f061";
                  }
               }
            }

            &:hover {
               background-color: $wht;

               span {
                  &:before {
                     color: $blk;
                  }
               }
            }
         }
      }

      @media screen and (max-width: 640px) {
         .owl-item {
            margin-right: 0.5em !important;
         }
      }

   }

   .titleCategory {
      color: $blk;
      margin-bottom: 1em;
      text-align: $c;
   }

   .item {
      border-radius: 5px;
      overflow: $hd;
      background-color: rgba(197, 197, 197, 0.4);
      position: $rel;

      >a {
         display: block;
      }

      .caption {
         position: $abs;
         bottom: 0;
         left: 0;
         right: 0;
         opacity: 1;
         background-color: rgba(63, 64, 67, 0.95);
         padding: 1em 0;
         @include transition(300ms);

         @media screen and (min-width: 1025px) {
            height: 140px;
         }

         .posBot {
            position: $rel;
            padding-left: 25px;
            color: $wht;
            width: 75%;
         }

         .title {
            font-family: $nunsans;
            font-weight: 500;
            font-size: (21 / 16) + 0em;
            line-height: 1.1;
            color: $wht;
            margin: 0;
         }

         .category {
            font-family: $nunsans;
            font-size: (13 / 16) + 0em;
            color: $sm;
            font-weight: 300;
            margin: 0;
            line-height: 1.4;
            position: $abs;
            bottom: 15px;
            left: 25px;
            font-family: $sans;
            text-transform: $cap;
         }
      }

      .goArrow {
         position: $abs;
         right: 25px;
         bottom: 25px;
         width: 53px;
         height: 53px;
         border-radius: 53px;
         background-color: $gold;

         &:before {
            content: '';
            position: $abs;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            height: 20px;
            width: 15px;
            background-image: url("{{ asset_path('theme::img/icons.png') }}");
            background-repeat: no-repeat;
            background-position: -117px -29px;
            display: $b;
            @include transition(300ms);
         }

         &:hover {
            background-color: $wht;

            &:before {
               background-position: -99px -29px;
            }
         }
      }

      &:hover {
         box-shadow: 0px 0px 35px 0px #8e8e8e;

         >a {
            opacity: 0.6;
         }

         .caption {
            opacity: 1;
         }
      }
   }

   .viewall {
      color: $sm;
      position: $abs;
      top: 0;
      right: 0;
      font-weight: 500;
      margin: 0;
      font-size: (21 / 16) + 0em;
      line-height: 50px;

      &:before {
         background-position: -132px -29px;
      }

      &:hover {
         color: $gold;

         &:before {
            background-position: -99px -29px;
         }
      }
   }

   .owl-item {
      &:hover {
         .item {}
      }
   }

   @media screen and (max-width: 860px) {
      .item {
         .caption {
            position: relative;
            height: 130px;

            .title {
               font-size: 0.9em;
            }

            .posBot {
               position: relative;
               padding: 0 1em;
               color: #fff;
               width: 100%;
            }

            .category {
               position: relative;
               bottom: 0;
               left: 1em;
            }
         }
      }

      .viewall {
         right: 1em;
      }

   }

   @media screen and (max-width: 640px) {
      position: relative;
      padding: 2em 2em 1em;

      .item {
         .caption {
            position: relative;
            height: 120px;

            .title {
               font-size: 0.9em;
            }

            .posBot {
               position: relative;
               padding: 0 1em;
               color: #fff;
               width: 100%;
            }

            .category {
               position: relative;
               bottom: 0;
               left: 1em;
            }
         }
      }

      .viewall {
         position: relative;
      }
   }
}

.menuDetail {
   .sizeCenterElm {
      position: $rel;
   }

   .thumbsShowPdt {
      color: $wht;
      padding: 0 15px;

      .logoTitlenya {
         font-family: 'Oswald', sans-serif;
         text-transform: uppercase;
         font-size: 1.25em;
         margin-bottom: 0;
         display: table;
         float: left;
         line-height: 2.2;
         letter-spacing: 1px;
         font-weight: 200;
      }

      .fa {
         margin-right: 48px;
         margin-left: -75px;
         font-size: 43px;
         color: #fff;
         width: 47px;
         height: 47px;
         position: relative;
         display: block;
         text-align: center;
         margin-top: 0px;
         margin-bottom: 0;
         float: left;
         transition-delay: 300ms;

         &:before {
            position: $abs;
            content: '';
            left: 0;
            right: 0;
            width: 30px;
            height: 30px;
            top: 0;
            bottom: 0;
            margin: auto;
            background-image: url("{{ asset_path('theme::img/arrow-right.png') }}");
            background-repeat: no-repeat;
            background-position: $c;
            background-size: 11px;
            border: solid 1px #fff;
            border-radius: 100%;
            opacity: .5;
            -webkit-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            transform: rotate(180deg);
         }
      }
   }

   .navDetail {
      position: relative;
      margin: 0 -15px;

      ul {
         list-style: none;
         margin: 13px 0;

         li {
            display: inline-block;

            a {
               color: #707070;
               padding: 0 15px;
               display: $b;
               text-transform: $cap;
               font-size: (14 / 16) + 0em;
               font-weight: 500;

               &:hover,
               &.current {
                  color: $wht;
               }
            }

            &.current {
               a {
                  color: $wht;
               }
            }
         }
      }
   }

   @media screen and (min-width: 1025px) {
      position: fixed;
      left: 0;
      top: 100px;
      width: 100%;
      // position:$rel;
      z-index: 5;
      transition-delay: .00ms;
      box-shadow: 0 10px 15px -8px rgba(0, 0, 0, 0.5);
      transition: height 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
      background-color: rgba(0, 0, 0, 0.8);
      // background-color:#000;
      color: #fff;

      &.homeNav {

         background-color: #000;
      }

      * {
         box-sizing: border-box;
         transition: all 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
      }

      .navDetail {
         float: $r;
         right: -75px;
      }

      .thumbsShowPdt {
         img {
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            left: 35px;
         }
      }
   }

   @media only screen and (max-width: 860px) {
      background: $blk;
      padding: 1em 0;
      z-index: 9;
      position: fixed;
      top: 95px;
      width: 100%;

      .thumbsShowPdt {
         .fa {
            margin: 0 0 0 8px;
            width: 20px;
            height: 20px;

            &:before {
               width: 20px;
               height: 20px;
               margin-top: 2px;
               margin-right: 8px;
            }
         }

         img {
            height: 9px;
         }

         color: #fff;
         padding: 0 15px;
         float: left;
         display: inline-block;
      }

      .navDetail {
         position: relative;
         margin: 0 -15px;
         display: inline-block;

         ul {
            margin: 0 1em;

            li {
               a {
                  font-size: 1.075em;
               }
            }
         }
      }

      .sizeCenterElm {
         white-space: nowrap;
         overflow-x: auto;
      }

      .thumbsShowPdt {
         .logoTitlenya {
            font-size: 0.95em;
            line-height: 1.5;
         }
      }
   }

   @media only screen and (max-width: 640px) {
      background: $blk;
      padding: 1em 0;
      z-index: 9;
      position: fixed;
      top: 65px;
      width: 100%;

      .thumbsShowPdt {
         .fa {
            margin: 0 0 0 8px;
            width: 20px;
            height: 20px;

            &:before {
               width: 20px;
               height: 20px;
               margin-top: 2px;
               margin-right: 8px;
            }
         }

         img {
            height: 9px;
         }

         color: #fff;
         padding: 0 15px;
         float: left;
         display: inline-block;
      }

      .navDetail {
         position: relative;
         margin: 0 -15px;
         display: inline-block;

         ul {
            margin: 0 1em;

            li {
               a {
                  font-size: 1.075em;
               }
            }
         }
      }

      .sizeCenterElm {
         white-space: nowrap;
         overflow-x: auto;
      }

      .thumbsShowPdt {
         .logoTitlenya {
            font-size: 0.95em;
            line-height: 1.5;
         }
      }
   }
}

@media only screen and (max-width: 640px) {
   .grid-margin-x>.small-12.categoryProduct {
      margin-left: 0;
      margin-right: 0;
      width: 100%;
   }
}

.relatedProduct {
   background-color: #f1f1f1;

   .titleCategory {
      text-align: $c;
      margin: 4.5em 0 2em;
      color: $sm;
      font-size: (20 / 16) * 1em;
   }

   .fuji-bundling {
      .caption {
         height: auto;

         @media screen and (min-width: 1025px) {
            height: 55px;
            overflow: hidden;
         }

         p {
            line-height: 1.3;
         }
      }

      .nameProduct {
         text-align: $c;
         color: $sm;

         @media only screen and (max-width: 640px) {
            white-space: normal;
            padding: 0 1em;
         }
      }

      p {
         font-family: $sans;
         color: $sm;
         font-size: (13 / 16) * 1em;
      }

      .item {
         background-color: transparent !important;
         padding: 1em;

         // background-color:#f8f4f1 !important;
         .boxItem {
            padding: 1.5em 0;
            background-color: #f8f4f1;
            border-radius: 5px;
            overflow: hidden;
         }

         &:hover {
            box-shadow: none !important;

            .boxItem {
               box-shadow: 0px 0px 60px -10px #909090;
            }

            p {
               color: $blk;
            }

            // box-shadow:0px 0px 60px -10px #909090 !important;
         }

         @media only screen and (min-width: 640px) and (max-width: 860px) {
            height: 320px;
            display: flex;
         }
      }

   }

   &.transBG {
      background-color: $wht;
      padding: 0 0 5em;
   }
}

.specialPage {
   overflow: $hd;
   background: #e3e3e3;

   .titleOffers {
      text-transform: $upc;
      font-size: (30 / 16) * 1em;
      font-weight: 600
   }

   .stepOffer {
      padding-right: 3em;

      ol {
         margin-left: 0;
      }

      li {
         width: 100%;
         position: $rel;
         padding: 15px 0 15px 90px;
         text-indent: 0;
         font-family: $nunsans;
         font-weight: 700;
         font-size: (16 / 16) * 1em;
         color: $sm;
         line-height: 1.2;

         a {
            color: $blk;
            font-family: inherit;
            font-weight: inherit;
         }

         &:before {
            content: counter(item);
            counter-increment: li;
            position: absolute;
            height: 60px;
            width: 60px;
            margin-left: 0;
            line-height: 60px;
            text-align: center;
            top: 5px;
            left: 0;
            font-size: (17 / 16) * 1em;
            color: $wht;
            background-color: $sm;
            border-radius: 100%;
            padding-right: 0;
            font-family: $nuni;
            font-weight: 600;
         }

         &.active {
            &:before {
               background-color: $gold;
            }
         }
      }
   }

   .mainContent {
      padding: 2em 0 0;
   }

   .contens {
      margin: 0;

      .mainwyswyg {}

      @media only screen and (max-width: 640px) {
         width: 100%;
      }
   }

   .bannerImg {
      text-align: center;
   }

   @media only screen and (max-width: 640px) {
      .mainContent {
         padding: 2em 1em 0;
      }
   }
}

.productSpec {
   background-color: #f1f1f1;

   .sizeCenterElm {
      position: $rel;

      @media screen and (min-width: 860px) {
         .heiBox {
            margin-bottom: 5%;
         }
      }
   }

   .bannerImg {
      @media screen and (min-width: 860px) {
         position: absolute;
         top: -10%;
         left: -10%;
         width: 50%;
      }

      @media screen and (max-width: 1280px) {
         left: -17%;
      }

      @media screen and (max-width: 860px) {
         img {
            width: 100%;
         }
      }
   }

   .spesification {
      position: $rel;
      z-index: 2;

      .boxSpec {
         .sideLeft {
            width: 65px;
            float: $l;
         }

         .sideRight {
            width: 75%;
            float: $l;
         }

         @media screen and (min-width: 860px) {}

         @media screen and (max-width: 860px) {
            // .sideLeft {
            //    width:100%;
            // }
            // .sideRight {
            //    width:100%;
            // }
         }

         .icon {
            background-image: url("{{ asset_path('theme::img/iconspec.png') }}");
            background-repeat: no-repeat;
            width: 50px;
            height: 48px;
            display: $b;

            &.ic-pixel {
               background-position: -5px 0px;
            }

            &.ic-storage {
               background-position: -5px -47px;
            }

            &.ic-control {
               background-position: -82px -47px;
            }

            &.ic-face {
               background-position: -10px -95px;
            }

            &.ic-wireless {
               background-position: -81px -95px;
            }
         }

         h1,
         h2,
         h3,
         h4,
         h5,
         h6 {
            font-size: (27 / 16) * 1em;
            font-family: $nunsans;
            font-weight: 800;
            color: $col-subtitle;
            margin-bottom: 0em;
            line-height: 1;
         }

         .title {
            font-family: $oswald;
            font-weight: 500;
            font-size: (17 / 16) * 1em;
            color: $sm;
            text-transform: $upc;
            margin-bottom: .5em;
         }

         p {
            font-size: (17.2 / 16) * 1em;
            color: $sm;
            line-height: 1.3;
            font-weight: 300;

            strong {
               color: $col-subtitle;
            }
         }
      }

      ul {
         li {
            width: 100%;
            display: inline-block;
            float: $l;
            padding: .8em;

            .boxSpec {
               background-color: $wht;
               padding: 1em;
               border-radius: 5px;
               overflow: $hd;
            }

            @media screen and (min-width: 860px) {
               width: 50%;

               .boxSpec {
                  height: 120px;
               }
            }
         }
      }

      .link {
         margin: 1em auto;
         display: $b;
         color: $sm;
         border-color: $sm;
         text-transform: $cap;

         &:before {
            background-color: $col-subtitle;
         }

         &:hover {
            color: $wht !important;
            border-color: $col-subtitle;
         }
      }
   }
}

.heiProduct {
   overflow: hidden;
}

.accessoriesMarginFixer {
   margin-top: 150px;
}

.slideProduct {
   background-color: #ececec;
   text-align: $c;
   padding: .5em 0;
   margin-bottom: 1em;

   .sizeCenterElm {
      position: $rel;
      padding: 0 2em;
   }

   .right {
      float: right;
   }

   .slider {
      position: $rel;
      padding: 6.4em 0 0;

      .slides {
         li {
            .boxImage {
               position: $rel;
               display: $ib;
               width: 446px;

               &:after {
                  position: $abs;
                  content: '';
                  left: 0;
                  right: 0;
                  bottom: 0;
                  background-image: url("{{ asset_path('theme::img/shadow-product.png') }}");
                  background-repeat: no-repeat;
                  height: 18px;
                  background-position: $c;
               }
            }
         }
      }
   }

   .titlePage {
      text-transform: $upc;
      font-size: (70 / 16) + 0em;
      color: #a8a8a8;
      margin: 0;
      position: $abs;
      top: 0;
      left: 0;
      font-family: $oswald;
      font-weight: 400;
      letter-spacing: .08em;
   }

   ul,
   ol {
      display: $b;
      list-style: $n;
   }

   .fmnav-control-nav {
      position: $rel;
      bottom: 0;
      padding: 1.5em 0 2em;

      li {
         cursor: pointer;

         * {
            transition: all 300ms;
         }

         img {
            opacity: .3;

            &.fmnav-active {
               opacity: 1;
            }
         }

         &:hover {
            img {
               opacity: .6;
            }
         }
      }
   }

   .fmnav-direction-nav {
      a {
         width: 50px;
         height: 50px;
         border-radius: 50px;
         // background-color:red;
         background-color: #fff;
         opacity: 1;
         display: $b;
         text-indent: 9999em;
         margin: 0 .5em;

         &:before {
            content: '';
            position: $abs;
            left: 0;
            bottom: 0;
            right: 0;
            top: 0;
            margin: auto;
            background-image: url("{{ asset_path('theme::img/icons.png') }}");
            background-repeat: no-repeat;
            width: 20px;
            height: 20px;
            opacity: 1;
            // background-size: 130px;
         }

         &.fmnav-prev {
            left: 0;

            &:before {
               background-position: -1px -38px;
            }
         }

         &.fmnav-next {
            right: 0;

            &:before {
               background-position: -20px -38px;
            }
         }

         &:hover {
            background-color: #494949;
            // &:before {
            //    opacity: .3;
            // }
         }

         &.fmnav-disabled {
            opacity: 0;
         }
      }
   }
}

.compare-section {
   .section-capacity {
      padding: .68em 0 1.68em;
      border-bottom: solid 1px #d9d9d9;
   }

   h1,
   h2,
   h3,
   h4,
   h5,
   h5,
   p,
   li,
   small {
      font-family: $nunsans;
   }

   li {
      list-style: $n;
   }

   p,
   small {
      color: #707070;
   }

   small {
      display: $b;
      color: #acacac;
   }

   .compare-column {
      padding: 1em 1em 0 0;

      &.compare-spesififikasi {
         padding: 0;
      }

      ul,
      ol {
         padding: 0;
         margin: 0;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h5 {
         font-weight: 800;
         color: $blk;
         font-size: 1.5em;
         margin: 0;
         line-height: 1;
         letter-spacing: 0.03em;
      }

      p,
      li {
         font-weight: 600;
         margin: 0;
         line-height: 1.5;
         font-size: (15 / 16) + 0em;

         strong {
            color: #000;
         }
      }
   }

   .compare-title {
      font-family: $nunsans;
      font-weight: 600;
      font-size: (21 / 16) + 0em;
      margin: 0;
      padding: 1em 0 0;
      line-height: 1;
      color: $col-subtitle;
      letter-spacing: 0.03em;
   }

   .notes {
      margin: 3em 0;

      p {
         font-size: (14 / 16) + 0em;
         line-height: 1.3;
         color: #111111;
      }
   }

   @media only screen and (max-width: 640px) {
      padding: 1em;

      .compare-column {
         p {
            font-size: 0.6375em;
         }
      }
   }
}

.aksesoris-section {
   &.findLens {
      h3 {
         text-align: center;
      }

      .boxtabs {
         .aksesori-padding>ul>li {
            width: 100%;
            border-bottom: solid 1px #c8ccce;
            padding: 2em 0;

            .boxImage {
               width: 30%;
               float: left;
            }

            .nameImage {
               width: 70%;
               padding-left: 2.5em;
               float: left;
               text-align: left;

               ul {
                  li {
                     text-align: left;
                     list-style: disc;
                     list-style-position: inside;
                     width: 100%;
                  }
               }

               a.detailResult {
                  display: inline-block;
                  width: 180px;
                  text-align: center;
                  border: solid 1px;
                  text-transform: capitalize;
                  padding: 0.5em;
                  border-radius: 6px;
                  cursor: pointer;
                  position: relative;
                  overflow: hidden;
                  z-index: 1;
                  margin-top: 2em;
               }
            }
         }
      }


   }

   ul {
      margin: 0;
      padding: 0;
      list-style: none;
   }

   .boxtabs {
      border-bottom: solid 1px #d9d9d9;
      padding: 2em 0;

      .aksesori-padding {
         width: 80%;
         margin: 0 auto;
         display: table;
      }

      .boxImage {
         height: 180px;
         display: table;
         width: 100%;
         text-align: center;
      }

      h3 {
         font-family: $oswald;
         text-transform: uppercase;
         font-weight: 500;
         margin-bottom: 1.5em;
      }

      li {
         width: 33.3%;
         float: left;
         text-align: center;
      }
   }

   .tabSelection {
      text-align: $c;
      padding: 1em 0;
      border-bottom: solid 1px #d9d9d9;

      li {

         display: inline-block;
         padding: 0 1em;
      }
   }

   .tabDetail {
      text-align: $c;

      ul {
         margin: 2em 0;
         position: relative;
         display: inline-block;
      }

      li {
         display: inline-block;
         margin: 15px;
         width: 23%;

         // border: solid 1px #ddd;
         .boxImage {
            height: 150px;
         }

         .nameImage {
            // height:150px;
         }
      }
   }

   @media screen and (max-width: 640px) {
      .boxtabs {
         li {
            width: 50%;
         }

         .boxImage {
            height: 150px;
         }
      }
   }
}

.fujiListNews {
   padding: 2em 1em;
   background-color: #ebebeb;

   .bigListNews {
      img {
         width: 100%;
      }

      .caption {
         h2 {
            &.titleCaption {
               font-size: 1.925em;
            }
         }
      }
   }

   .latestNews {
      padding: 0 1em;

      img {
         width: 100%;
      }

      .titleCaption {
         font-size: (50 / 16) + 0em;
         font-weight: 200;
         font-family: $nunsans;
         margin: .2em 0;
         line-height: 1.2;
      }

      .link {
         color: #898989;
         border-color: #898989;
         margin-top: 3em;
         font-family: $oswald;
         font-size: (17 / 16) + 0em;
         font-weight: 300;
         width: 160px;
         letter-spacing: 0.03em;

         &:before {
            background-color: $gold;
         }

         &:hover {
            color: $wht !important;
         }
      }
   }

   .thumbnews {
      padding-left: 1em;

      @media screen and (max-width: 640px) {
         padding: 0;
      }

      ul {
         list-style: none;
         padding: 0;
         margin: 0;

         * {
            transition: all 300ms;
         }

         li {
            width: 50%;
            float: $l;
            padding: 0 1em 1em;

            img {
               width: 100%;
            }

            &:hover {
               .layerImg {
                  opacity: 1;
               }

               .caption {
                  .title {
                     color: #000;
                  }
               }
            }

            @media screen and (max-width: 640px) {
               width: 100%;
               padding: 0 0 1em 0;
            }
         }
      }

      .layerImg {
         display: $b;
         opacity: .66;
      }

      .caption {
         padding: 1em 0;

         .date {
            font-size: (13 / 16) + 0em;
            color: #868f96;
            display: $b;
         }

         .title {
            color: #707070;
            font-family: $nunsans;
            font-weight: 600;
            font-size: (21 / 16) + 0em;
            margin: 0;
         }
      }
   }

   @media screen and (min-width: 1025px) {
      .thumbnews {
         .caption {
            height: 135px;
         }
      }
   }

   @media screen and (min-width: 860px) {
      .thumbnews {
         height: 620px;
      }
   }
}

.newsPromo {
   padding: 2em;

   .caption {
      left: 10%;
      width: 600px;
   }

   .link {
      color: #898989;
      border-color: #898989;
      margin-top: 3em;
      font-size: (15 / 16) + 0em;
      font-weight: 300;
      width: 160px;
      letter-spacing: 0.03em;

      &:before {
         background-color: $gold;
      }

      &:hover {
         color: $wht !important;
      }
   }

   @media only screen and (max-width: 640px) {
      .caption {
         left: auto;
         width: 100%;
         position: relative;
         padding: 2em;

         p {
            font-size: 1.8em;
         }
      }

      padding: 0;
   }
}

.bannerNews {
   margin-top: 5em;

   .sizeCenterElm {
      padding: 0 2.3em;
   }

   .headTitle {
      padding: 0 2em 2em 0;

      .date {
         font-size: (13 / 16) + 0em;
         color: #868f96;
         display: $b;
      }

      .title {
         color: #111111;
         font-family: $nunsans;
         font-weight: 700;
         font-size: (47 / 16) + 0em;
         margin: 0.5em 0 .3em;
         text-transform: $upc;
         line-height: 1.1;
      }

      p {
         font-family: $nunsans;
         font-weight: 300;
         color: #71787c;
         font-size: (20 / 16) + 0em;
         line-height: 1.3;
      }
   }

   img {
      width: 100%;
   }
}

.descNews {
   padding: 2em 0;

   .mainContent {
      padding: 0 2.5em 0 0;

      p {
         font-weight: 600;
         line-height: 1.5;
         margin-left: 2em;
         margin-right: 2em;
         font-size: (17 / 16) + 0em;
         margin-bottom: 1.5em;
      }

      img {
         margin-bottom: 2em;
      }

      @media screen and (max-width: 640px) {
         padding: 0;

         p {
            margin-left: 0;
            margin-right: 0;
         }

         img {
            height: auto !important;
         }
      }
   }

   .sizeCenterElm {
      padding: 0 2.3em;
   }

   .titleSide {
      font-family: $nunsans;
      font-weight: 900;
      font-size: (15 / 16) + 0em;
      margin: 0 0 1em;
      padding-bottom: 1em;
      text-transform: $upc;
      border-bottom: solid 1px #d9d9d9;
      color: #494949;
      letter-spacing: 0.03em;
   }

   .highlightedNews {
      padding-left: 1.3em;

      * {
         transition: all 300ms;
      }

      ul {
         margin-top: 2.5em;
      }

      li {
         float: $l;
         width: 100%;
         border-bottom: solid 1px #d9d9d9;
         opacity: .44;
         padding-bottom: 1.3em;
         margin-bottom: 2em;

         &:last-child {}

         .desc {
            width: 67%;
            float: $l;
            padding-right: .5em;

            p {
               font-weight: 600;
               line-height: 1.3;
               font-size: (16 / 16) + 0em;
            }
         }

         .img {
            width: 33%;
            float: $l;
            padding-left: .5em;

            img {
               width: 100%;
            }
         }

         &:hover {
            opacity: 1;
         }
      }
   }
}

.relatedItem {
   overflow: $hd;
   padding-bottom: 2em;

   .titleCategory {
      font-size: (27 / 16) + 0em;
      text-align: $l;
      margin: 2em 0 1em;
      font-family: $nunsans;
      font-weight: 800;
   }

   .fuji-carousel {
      position: inherit;

      .item {
         float: none;
         width: 100%;
      }

      .owl-item {
         opacity: .3;

         &.active {
            opacity: 1;
         }

         img {
            width: inherit;
         }
      }

      .owl-stage-outer {
         overflow: inherit;
         z-index: 2;
      }
   }
}

.footers {
   background-color: $blk;

   p {
      color: #696969;
      font-family: $nunsans;
      font-size: (12 / 16) + 0em;
   }

   .head-footer {
      padding: 3.3em 0px 0;

      .title-socmed {
         color: #fff;
         margin: 0 0 7px;
         letter-spacing: 0.03em;
         font-weight: 600;
         display: inline-block;
         float: left;
         font-family: $nunsans;
         font-size: (17 / 16) + 0em;
         font-weight: 700;
      }

      .foterSoc {
         display: $ib;
         float: $r;

         .logo,
         .footer-socmed {
            float: $l;
            line-height: 33px;
         }
      }

      .footer-socmed {
         padding: 0;
         margin: 0 2em 0 0;

         li {
            display: inline-block;
            padding-right: 5px;

            a {
               font-size: 21px;
               border-radius: 100%;
               width: 37px;
               color: #fff;
               line-height: 37px;
               text-align: center;
               background-color: $wht;
               color: $blk;
               // &.fa-facebook {background-color:#537bbd}
               // &.fa-twitter {background-color:#78cdf0}
               // &.fa-youtube {background-color:#e9654b}
               // &.fa-instagram {background-color:#696a6a}
               // &.fa-google-plus {background-color:#4c4c4b}
               // &.fa-rss {background-color:#f39200}
            }
         }
      }
   }

   .body-footer {
      padding: 0;
      margin: 0;
      display: $ib;
      float: $l;
      width: 74%;

      >[class*="block-grid-"] {
         display: block;
         padding: 0;
         margin: 0 -0.825rem;

         &:before,
         &:after {
            content: " ";
            display: table;
         }

         &:after {
            clear: both;
         }

         >li {
            display: inline-block;
            list-style: none;
            float: left;
            height: auto;
            width: auto;
            padding: 0 0.825rem 1.25rem;

            &:nth-of-type(7n+1) {
               clear: none;
            }

            &:nth-of-type(1n) {
               clear: none;
            }
         }
      }

      >ul {
         >li {
            display: inline-block;

            >a {
               min-height: 50px;
               font-family: $nunsans;
               display: block;
               color: #fff;
               font-size: (16 / 16) + 0em;
               padding-top: 10px;
               line-height: 19px;
               text-transform: capitalize;
            }
         }
      }

      ul {
         list-style: none;

         ul {
            padding: 0;
            margin-left: 0;

            &.adanich {
               -moz-column-count: 2;
               -moz-column-gap: 30px;
               -webkit-column-count: 2;
               -webkit-column-gap: 30px;

               li {}
            }

            li {
               line-height: normal;
               width: 100px
            }

            a {
               // @extend .transition-border;
               position: relative;
               overflow: hidden;
               font-size: 13px;
               color: #696969;
               line-height: 18px;
               display: inline-block;
               font-family: $nunsans;
               font-size: (16 / 16) + 0em;

               &:hover {
                  color: #fff;
                  // &:before {left:0;}
               }
            }
         }
      }

      .second-menu {
         border-top: solid 1px #bbc5ca;
         padding: 0;
      }
   }

   .sitemap {
      display: $ib;
      float: $l;
      padding: 0;
      margin: 0;

      >ul {
         >li {
            display: $b;

            >a {
               display: block;
               color: #fff;
               padding-top: 10px;
               letter-spacing: 0.05em;
               line-height: 19px;
               text-transform: capitalize;
               font-family: $nunsans;
               font-size: (16 / 16) + 0em;

               &:hover {
                  color: $gold;
               }
            }
         }
      }
   }

   @media only screen and (max-width: 640px) {
      display: none;
   }
}

.footers-mobile {
   display: none;

   @media only screen and (max-width: 640px) {
      display: block;
      background-color: $blk;
      padding: 1em;

      p {
         color: #696969;
         font-family: $nunsans;
         font-size: (12 / 16) + 0em;
      }

      ul {
         margin: 0;
      }

      .footerAccordion {
         border-top: solid 1px $wht;
         padding-top: 2em;
      }

      .footerMenunya {
         li {
            display: inline-block;
            list-style: none;
            float: left;
            height: auto;
            width: 100%;
            padding: 0 0.525rem 1.25rem;
            overflow: hidden;

            a {
               font-family: $nunsans;
               display: block;
               color: #fff;
               text-transform: capitalize;
            }

            ul {
               display: block;
               overflow: hidden;
               font-size: 12px;
               text-transform: capitalize;
               max-height: 0;

               li {
                  padding: 0;
               }
            }

            &.accodrionActive {
               color: #c0a062;

               ul {
                  max-height: 1000px;
                  @include transition(800ms);
               }
            }
         }
      }

      .foterSoc {
         border-top: solid 1px $wht;
         text-align: center;
         padding-top: 2em;

         ul {
            margin: 0;

            li {
               list-style: none;
               display: inline;

               a {
                  font-size: 21px;
                  border-radius: 100%;
                  width: 37px;
                  color: #fff;
                  line-height: 37px;
                  text-align: center;
                  background-color: #fff;
                  color: #000;
               }
            }
         }
      }

   }
}

.terms-red {
   display: block;
   color: red;
}

.term-box {
   display: table;
   -webkit-transition: all .4s;
   -moz-transition: all .4s;
   -ms-transition: all .4s;
   -o-transition: all .4s;
   transition: all .4s;

   &.failed {
      border: solid 1px red;
      padding: 1em;
   }
}

.loader {
   height: 631px;
   width: 450px;
   position: relative;
   margin: auto;

   img {
      width: auto !important;
      margin: auto;
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
   }
}

@-webkit-keyframes rubberBand {
   from {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }

   30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
      transform: scale3d(1.25, 0.75, 1);
   }

   40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
      transform: scale3d(0.75, 1.25, 1);
   }

   50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
      transform: scale3d(1.15, 0.85, 1);
   }

   65% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
      transform: scale3d(0.95, 1.05, 1);
   }

   75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
      transform: scale3d(1.05, 0.95, 1);
   }

   to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }
}

@keyframes rubberBand {
   from {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }

   30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
      transform: scale3d(1.25, 0.75, 1);
   }

   40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
      transform: scale3d(0.75, 1.25, 1);
   }

   50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
      transform: scale3d(1.15, 0.85, 1);
   }

   65% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
      transform: scale3d(0.95, 1.05, 1);
   }

   75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
      transform: scale3d(1.05, 0.95, 1);
   }

   to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }
}

.template {
   // -webkit-transition: all .4s;
   // -moz-transition: all .4s;
   // -ms-transition: all .4s;
   // -o-transition: all .4s;
   // transition: all .4s;
   -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
   -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
   box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
   background: rgba(255, 255, 255, 0.8);
   overflow: hidden;
   width: 300px;
   height: auto;
   z-index: 3;
   padding: 1em;
   opacity: 0;
   bottom: 9px;
   position: absolute;
   left: -130px;
   border-radius: 6px;
   text-align: left;
   -webkit-transform: scale(0.2);
   -moz-transform: scale(0.2);
   -o-transform: scale(0.2);
   -ms-transform: scale(0.2);
   transform: scale(0.2);
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;

   h2 {
      font-family: $oswald;
      color: #494949;
   }

   p {
      font-weight: 400;
      font-size: 0.9375em;
      color: #494949;
   }

   @media only screen and (max-width: 640px) {
      position: fixed;
   }
}

.ihotspot {
   width: 50px;
   height: 50px;
   text-align: center;
   border-radius: 100%;
   background: rgba(255, 255, 255, 0.5);
   cursor: pointer;
   -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
   -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
   box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
   -webkit-transition: all .4s;
   -moz-transition: all .4s;
   -ms-transition: all .4s;
   -o-transition: all .4s;
   transition: all .4s;

   &:after {
      position: absolute;
      content: "+";
      width: 10px;
      height: 10px;
      top: 6px;
      left: 18px;
      font-size: 1.5em;
   }

   &:hover {
      background: #c0a062;
      color: #fff;
      z-index: 4 !important;

      &>.template {
         opacity: 1;
         color: #494949;
         bottom: 9px;
         width: 300px;
         height: auto;
         z-index: 3;
         left: -130px;
         -webkit-transform: scale(1);
         -moz-transform: scale(1);
         -o-transform: scale(1);
         -ms-transform: scale(1);
         transform: scale(1);

         @media only screen and (max-width: 640px) {
            width: 90%;
            left: 5%;
            bottom: 45%;
            translate: translate(-50%, -50%);
         }
      }
   }

   @media only screen and (max-width: 640px) {
      width: 30px;
      height: 30px;

      &:after {
         top: -4px;
         left: 7.5px;
      }
   }
}

.imagehotspot-container:hover {
   z-index: 4 !important;
}

.productSlide {
   .mainslide {
      position: relative;
   }

   .captionSlidernye {
      position: absolute;
      left: 10%;
      bottom: 2em;

      span {
         display: block;
         color: #fff;
         font-family: 'Open Sans', sans-serif;
         font-size: 0.8125em;

         &.titleGallery {
            font-weight: 700;
         }
      }
   }

   .fmnav-direction-nav {
      position: absolute;
      bottom: 50%;
      width: 100%;

      .fmnav-prev {
         left: 30px;
         opacity: 1;
         text-indent: -9999px;
         z-index: 3;

         &:after {
            content: "";
            background: url("{{ asset_path('theme::img/icons.png') }}");
            background-position: left 2px top 5px;
            position: absolute;
            left: 0;
            top: 0;
            width: 46px;
            height: 46px;
            text-indent: 1px;
            color: #fff;
         }

         &.fmnav-disabled {
            opacity: 0;
         }
      }

      .fmnav-next {
         right: 30px;
         opacity: 1;
         text-indent: 9999px;
         left: auto;
         z-index: 3;

         &:after {
            content: "";
            background: url("{{ asset_path('theme::img/icons.png') }}");
            background-position: left -50px top 5px;
            position: absolute;
            left: 0;
            top: 0;
            width: 46px;
            height: 46px;
            text-indent: 1px;
         }

         &.fmnav-disabled {
            opacity: 0;
         }
      }
   }

   .slides {
      &>li {
         .mainslide {
            .layerimg {
               img {
                  width: 100%;
               }
            }
         }
      }
   }
}

.class404 {
   .caption {
      .sizeCaption {
         width: 520px;

         h2,
         p,
         li {
            color: #71787c;
         }
      }
   }
}

.studio-event {
   .box-headline {
      padding: 2em 0 4em;

      .sizeCenterElm {
         padding-right: 35%;
      }

      h2 {
         &.headline {
            // font-size: 44px;
            font-size: (44 / 16) * 1em;
            text-transform: $upc;
            color: $blk;
            font-weight: 900;
            font-family: $nunsans;
            margin: 3rem 0 3rem 0;
            position: relative;
            line-height: 1;

            &:after {
               content: "";
               position: absolute;
               bottom: -0.7em;
               left: 0;
               width: 100px;
               height: 4px;
               border-radius: 3px;
               background: #00a050;
            }
         }
      }

      p {
         font-family: $nunsans;
         color: #9b9da3;
         font-size: 1.23em;
         line-height: 1.3;
      }

      @media only screen and (max-width: 640px) {
         padding: 2em 2em 4em;

         .sizeCenterElm {
            padding-right: 0;
         }

         h2 {
            &.headline {
               font-size: 1.75em;
            }
         }
      }
   }

   .small-4 {
      padding: 0 3em;

      @media only screen and (max-width: 640px) {
         padding: 0;
      }
   }

   .small-8 {
      padding-right: 3em;

      @media only screen and (max-width: 640px) {
         padding: 0;
      }
   }

   .box-description {
      .caption {
         bottom: auto;
         top: 0;
         padding: 2em 0;

         .link {
            color: $wht;
         }

         .textTitle {
            font-weight: 600;
            margin: 0;
            line-height: 1.5;
            font-size: 0.9375em;
            font-family: $nunsans;
            color: $wht;
            display: block;
         }

         .date {
            font-weight: 800;
            margin: 0;
            line-height: 1.5;
            font-size: 0.8375em;
            font-family: $nunsans;
            color: $wht;
            display: block;
         }

         .contentOswald {
            font-weight: 800;
            margin: 0;
            line-height: 1.5;
            font-size: 1.175em;
            font-family: $oswald;
            color: $wht;
            display: block;
         }

         .spacer {
            display: block;
            margin: 2em 0;
         }

         .eventTitle {
            font-size: (44 / 16) * 1em;
            text-transform: $cap;
            color: $wht;
            font-weight: 900;
            font-family: $nunsans;
            margin: 2rem 0 1rem 0;
            position: relative;
            line-height: 1;
         }

         a.link {
            border-radius: 10px;
            background: transparent;
            margin: 1em 0 0 0;
            width: 150px;
            line-height: 2em;
         }

         @media only screen and (max-width: 640px) {
            position: relative !important;
            padding: 1em;
            background: #fff !important;

            p {
               color: #000;
            }

            .link {
               color: $blk;
               border-color: $blk;
            }

            .textTitle {
               font-weight: 600;
               margin: 0;
               line-height: 1.5;
               font-size: 0.9375em;
               font-family: $nunsans;
               color: $blk;
               display: block;
            }

            .date {
               font-weight: 800;
               margin: 0;
               line-height: 1.5;
               font-size: 0.8375em;
               font-family: $nunsans;
               color: $blk;
               display: block;
            }

            .contentOswald {
               font-weight: 800;
               margin: 0;
               line-height: 1.5;
               font-size: 1.175em;
               font-family: $oswald;
               color: $blk;
               display: block;
            }

            .spacer {
               display: block;
               margin: 2em 0;
            }

            .eventTitle {
               font-size: 1.3em;
               text-transform: $cap;
               color: $blk;
               font-weight: 900;
               font-family: $nunsans;
               margin: 2rem 0 1rem 0;
               position: relative;
               line-height: 1;
            }

            a.link {
               border-radius: 10px;
               background: transparent;
               margin: 1em 0 0 0;
               width: 150px;
               line-height: 2em;
            }
         }
      }
   }

   .relatedArticle {
      .titleCategory {
         color: #c0a062;
      }

      .item {
         background: none;
         padding: 0 2em;

         .caption {
            position: relative;
            bottom: auto;
            left: auto;
            right: auto;
            background: none !important;
            height: auto;

            .title {
               color: #000;
            }

            .category {
               position: relative;
               bottom: auto;
               color: #000;
            }
         }

         &:hover {
            color: #fff;

            &:nth-of-type(odd) {
               box-shadow: none;
            }

            &:nth-of-type(even) {
               z-index: 0;
               box-shadow: none;
            }

            img {
               @include scale(1, 1, 1)
            }

            .nameProduct {
               color: $blk;
            }

            .category {
               color: $blk;
            }

            .link {
               color: $wht;
               background-color: $gold;
            }
         }

         @media only screen and (max-width: 640px) {
            padding: 0;

            .caption {
               .posBot {
                  padding: 0;
               }

               .category {
                  font-size: 8px;
                  left: auto;
               }
            }
         }
      }
   }

   .fuji-carousel {
      .owl-stage-outer {
         overflow: hidden;
      }

      .owl-item {
         img {
            margin: 0 auto;
            width: auto;

            // height: 100%;
            @media only screen and (max-width: 640px) {
               height: auto;
            }
         }
      }

      .owl-nav {
         button.owl-next {
            background: none;
            height: 50px;
            width: 50px;
            border: solid 1px #868f96;
            right: -3em;
            top: 3em;

            span:before {
               color: #868f96;
            }

            &:hover {
               background: #c0a062;
               border-color: #c0a062;

               span:before {
                  color: #fff;

               }
            }

         }

         button.owl-prev {
            background: none;
            height: 50px;
            width: 50px;
            border: solid 1px #868f96;
            left: -3em;
            top: 3em;

            span:before {
               color: #868f96;
            }

            &:hover {
               background: #c0a062;
               border-color: #c0a062;

               span:before {
                  color: #fff;

               }
            }

         }
      }

   }

   .eventForm {
      width: 50%;
      padding-right: 5%;

      @media only screen and (max-width: 640px) {
         padding: 2em;
      }

      form {
         .block-input {
            width: 100%;
            position: relative;
            display: inline-table;

            .block-input-2 {
               width: 50%;
               position: relative;
               display: inline-table;
               float: left;
            }
         }

         input[type='radio'] {
            margin: 1em;
         }

         button {
            border-radius: 10px;
            background: transparent;
            margin: 1em 0 0 0;
            width: 150px;
            line-height: 2em;
            border: solid 1px #000;
            cursor: pointer;
            -webkit-transition: all .4s;
            -moz-transition: all .4s;
            -ms-transition: all .4s;
            -o-transition: all .4s;
            transition: all .4s;

            &:hover {
               background: $blk;
               color: $wht;
            }
         }
      }

      @media only screen and (max-width: 640px) {
         width: 100%;

         form {
            input[type='radio'] {
               margin: 0.4em;
            }
         }
      }
   }

}

.eventList {
   .textTitle {
      font-weight: 600;
      margin: 0;
      line-height: 1.3;
      font-size: 0.9375em;
      font-family: $nunsans;
      color: $blk;
      display: block;
   }

   p {
      margin-bottom: 0;

      &.event-close {
         strong {
            color: red;
         }
      }
   }

   h3 {
      margin-top: 1em;
      font-size: 1.275em;
      font-weight: 500;
      line-height: 1.1;
   }

   a {
      margin-top: 1em;
   }

   .date {
      font-weight: 800;
      margin: 0;
      line-height: 1.5;
      font-size: 0.8375em;
      font-family: $nunsans;
      color: $blk;
      display: block;
   }

   .contentOswald {
      font-weight: 800;
      margin: 0;
      line-height: 1.5;
      font-size: 1.175em;
      font-family: $oswald;
      color: #c0a062;
      display: block;
   }

   ul {
      li {
         list-style: none;
         width: 30%;
         display: inline-table;
         position: relative;
         float: left;
         margin: 1em;

         .boxEvent {
            background: #f8f4f1;
            padding: 2em;
            position: absolute;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 2;
            -webkit-transition: all .4s;
            -moz-transition: all .4s;
            -ms-transition: all .4s;
            -o-transition: all .4s;
            transition: all .4s;

            a {}
         }

         &:hover {
            .boxEvent {
               box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
               background: rgba(0, 0, 0, 0.5);

               span,
               h3,
               p,
               strong {
                  color: $wht;
               }

               a {
                  border-color: $wht;
                  color: $wht;
               }
            }
         }
      }
   }

   @media only screen and (max-width: 640px) {
      ul {
         margin: 0;

         li {
            margin: 0;
            width: 100%;
         }
      }
   }
}

.storiesBanner {
   position: relative;
}

.productLens {
   .imageContent {
      .mainEditor {
         padding: 2em;
         background: #f1f1f1;
         text-align: center;

         img {
            margin: 2em auto;
            display: table;
         }

         &.midleheight {
            display: table !important;
            padding-top: 200px !important;
            width: 100%;
         }
      }

   }

   .lensSpecLeft {
      background: #343434;
      text-align: left;
      padding: 80px 2em;
      min-height: 500px;
      height: auto;

      span {
         color: #fff;
         display: block;
         margin-bottom: 1em;
      }

      ul {
         margin-left: 18px;

         li {
            list-style: disc;
            color: $wht;
            padding: 0 1em 0 0;
            line-height: 1.12;

            a {
               color: #71787c;
               font-family: $oswald;
               font-size: 1.5em;

               &.thumbsCurrent {
                  color: #fff
               }
            }
         }
      }

      a.lensSpecTrig {
         color: #9b9da3;
         text-transform: uppercase;
         font-family: $oswald;
         font-weight: 500;
         position: absolute;
         left: 2em;
         bottom: 2em;
         -webkit-transition: all .4s;
         -moz-transition: all .4s;
         -ms-transition: all .4s;
         -o-transition: all .4s;
         transition: all .4s;

         .fa-chevron-left {
            font-size: 0.4em;
            height: 18px;
            width: 18px;
            padding: 6px;
            background: #9b9da3;
            border-radius: 100%;
            position: absolute;
            right: -25px;
            color: #fff;
            top: 3px;
            -webkit-transition: all .4s;
            -moz-transition: all .4s;
            -ms-transition: all .4s;
            -o-transition: all .4s;
            transition: all .4s;
         }

         &:hover {
            color: #c0a062;

            .fa-chevron-left {
               background: #c0a062
            }
         }
      }
   }

   .lensSpecRight {
      background: #9b9da3;
      // padding: 100px 2em 2em;
      padding: 0;
      min-height: 500px;
      height: auto;

      img {
         width: 100%;
      }
   }

   .specLens {
      background: #494949;
      border-radius: 5px;

      table {
         width: 800px;
         margin: 0 auto;

         th,
         td {
            font-family: $nuni;
            color: #fff;
            text-align: left;
            padding: 1em;
         }

         th {
            border-top: solid 3px #fff;
         }

         td {
            border-top: solid 2px #707070;
         }
      }
   }

   .boxTabLens {
      padding-bottom: 0;
   }

   #specLensContent {
      display: none;
      margin-bottom: 2em;
   }

   #gallery {
      margin-top: 3em;
   }

   @media only screen and (max-width: 640px) {
      background: #f1f1f1;

      .imageContent {
         .mainEditor.midleheight {
            padding-top: 1em !important;
         }
      }

      .lensSpecLeft {
         padding: 2em 2em 4em;
         min-height: auto;

         ul {
            margin: 0;
            overflow-x: auto;
            white-space: nowrap;
            display: flex;

            li {
               list-style: none;
               color: #fff;
               padding: 0 1em 0 0;
               line-height: 1.12;
               width: auto;
               float: left;
               display: table;

               a {
                  font-size: 1em;
               }
            }
         }
      }

      .lensSpecRight {
         min-height: auto;
      }

      .specLens {
         table {
            width: 100%;
         }
      }
   }

   .boxTabLens {
      padding: 0;
      margin: 0;
      width: 100%;
   }
}

.storeBanner {
   .caption {
      height: 130px;

      .titleCaption {
         font-family: $nuni;
         text-transform: uppercase;
         font-weight: 700;
         width: auto;
         font-size: 3em;

         @media only screen and (max-width: 640px) {
            font-size: 1.4em;
         }
      }

      .titlefeature {
         font-family: $nuni;
         color: $wht;
         opacity: 1;
      }
   }
}

.storeLocator {
   .storeLeftBlock {
      min-height: 500px;
      padding: 2em;

      @media only screen and (max-width: 640px) {
         min-height: inherit;
      }

      .address {
         font-size: 0.865em;
         line-height: 1.5;
         display: table;
      }

      h3 {
         font-size: 0.965em;
         text-transform: uppercase;
         font-weight: 800;
      }

      .searchLocator {
         margin-top: 2em;
         padding: 2em 0;
         border-top: solid 1px #e1e1e1;

         input {
            border-radius: 8px;
         }

         button {
            padding: 1em 2em;
            border: solid 1px #e1e1e1;
            color: #e1e1e1;
            border-radius: 8px;
            cursor: pointer;
            -webkit-transition: all .4s;
            -moz-transition: all .4s;
            -ms-transition: all .4s;
            -o-transition: all .4s;
            transition: all .4s;

            &:hover {
               background: #434343;
               color: $wht;
               border-color: #434343;
            }
         }
      }
   }
}

.aksesoris-banner {
   .caption {
      background: none !important;

      .titleCaption {
         text-transform: uppercase;
         font-size: 4.375em;
         color: #a8a8a8;
         margin: 0;
         font-family: 'Oswald', sans-serif;
         font-weight: 400;
         letter-spacing: 0.08em;
      }
   }

}

.findLens {
   .specialBanner {
      background: #dbdcdf;

      &.bgFindlens {
         background: #dbdcdf;
         margin-bottom: 4em;
         display: table;
      }

      .captionbanner {
         width: 100%;
      }

      .sizeCaption {
         margin: 0 auto;
         width: 100%;

         .titleCaption {
            color: #c0a062;
         }

         p {
            font-family: $nuni;
            color: $wht;
            opacity: 0.44;
            font-size: 1em;
            text-transform: none;
            width: 100%;
            margin: 2em 0;

            &.goldPar {
               color: #c0a062;
            }
         }

         form {
            margin-bottom: 100px;
            width: 100%;

            select {
               width: 200px;
               background: none;
               color: $wht;

               option {
                  color: $blk;
               }
            }
         }

         .find-next {
            height: 80px;
            width: 80px;
            background: $wht;
            color: $blk;
            border-radius: 100%;
            display: inline-table;
            padding: 2.65em 0;
            font-size: 0.7em;
            -webkit-transition: all .4s;
            -moz-transition: all .4s;
            -ms-transition: all .4s;
            -o-transition: all .4s;
            transition: all .4s;

            &:hover {
               -webkit-box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 1);
               -moz-box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 1);
               box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 1);
            }
         }
      }
   }

   .findLensFull {
      width: 100%;

      a {
         display: inline-block;
         width: 180px;
         text-align: center;
         border: solid 1px;
         text-transform: capitalize;
         padding: 0.5em;
         border-radius: 6px;
         cursor: pointer;
         position: relative;
         overflow: hidden;
         z-index: 1;
         margin-top: 2em;
      }
   }

   .lensCategory {
      width: 20%;
      display: inline-table;
      padding: 5px;

      @media only screen and (max-width: 640px) {
         width: 50% !important;
         display: table-cell;
         padding: 5px;
         float: left;
      }

      input[type="radio"] {
         display: none;

         &:checked {
            +.box {
               -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 1);
               -moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 1);
               box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 1);
               background-color: $wht;

               img {
                  opacity: 0.6;
               }

               span {
                  color: white;
                  transform: translateY(100px);

                  &:before {
                     transform: translateY(0px);
                     opacity: 1;
                  }
               }
            }
         }
      }

      .box {
         background-color: none;
         transition: all 250ms ease;
         display: inline-block;
         text-align: center;
         cursor: pointer;
         position: relative;
         font-weight: 900;

         img {
            opacity: 1;
         }

         &:active {
            transform: translateY(10px);
         }

         span {
            position: absolute;
            transform: translate(0, 80px);
            left: 0;
            right: 0;
            top: 15%;
            transition: all 300ms ease;
            font-size: 1.3em;
            line-height: 1;
            user-select: none;
            font-family: 'Oswald', sans-serif;
            color: $wht;
            font-weight: 400;
            text-shadow: 1px 1px 1px #000;

            &:before {
               font-size: 1.2em;
               display: block;
               transform: translateY(-80px);
               opacity: 0;
               transition: all 300ms ease-in-out;
               font-weight: normal;
               color: white;
            }
         }
      }
   }
}

form .parsley-error {
   background: none !important;
   border: solid 2px red !important;
   border-radius: 4px;
}

label.error {
   color: red;
   font-size: 16px;
   font-weight: normal;
   line-height: 1.4;
   margin-top: 0.5em;
   width: 100%;
   float: none;
}

.parsley-errors-list.filled {
   color: red;
   font-size: 12px;
   font-weight: normal;
   list-style: outside none none;
   position: absolute;
   right: 35px;
   top: 0;
   z-index: 2;
}

.alertSubmitPenawaran {
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   width: 100%;
   z-index: 11;
}

.alertSubmitPenawaran .bgAlertPenawaran {
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 1;
}

.alertSubmitPenawaran .mainAlertPenawaran {
   background-color: #fff;
   border-radius: 10px;
   bottom: 0;
   height: 80%;
   left: 0;
   margin: auto;
   overflow: hidden;
   padding: 1em 1.5em;
   position: absolute;
   right: 0;
   top: 0;
   width: 90%;
   z-index: 2;
}

.alertSubmitPenawaran .mainAlertPenawaran h4 {
   font-size: 2em;
   font-family: "Roboto", sans-serif;
   font-weight: 300;
   margin: 0em 0 0.5em;
}

.alertSubmitPenawaran .mainAlertPenawaran p {
   font-size: 1em;
   line-height: 1.3em;
   font-weight: 300;
}

.alertSubmitPenawaran .mainAlertPenawaran p a {
   color: red;
   display: block;
}

.alertSubmitPenawaran .mainAlertPenawaran p i {
   font-weight: 800;
}

.alertSubmitPenawaran .btnClose {
   position: absolute;
   top: 0;
   right: 0;
   width: 55px;
   height: 40px;
   background-image: url(../../img/ic-related.png);
   background-repeat: no-repeat;
   background-position: -91px -155px;
   border-bottom-left-radius: 15px;
}

.fujiExclusive {
   z-index: 3;
   position: absolute;
   right: 14px;
   width: auto !important;
   top: 18px;
}

.searchBar {
   position: fixed;
   padding: 0em;
   left: -100%;
   right: 0;
   top: 100px;
   width: 100%;
   z-index: -1;
   transition: 500ms;

   form {
      position: relative;
   }

   input {
      background: #71787c !important;
      border: none !important;
      border-radius: 0 !important;
      color: #fff;
      padding: 2em 4em !important;
      font-size: 1.5em;
   }

   button {
      position: absolute;
      top: 20px;
      right: 1em;
      color: #fff;
      background: #acacac;
      width: 55px;
      height: 55px;
      border-radius: 100%;
      font-size: 1.5em;
      cursor: pointer;
   }

   &.searchShow {
      z-index: -1;
      left: 0;
   }
}

.searchBanner {
   padding: 2em 0;
   background: #5c6164;
   opacity: 0.6;
   max-width: 1200px;
   margin: 100px auto 0;

   .searchTitle {
      color: #fff;
   }

   .searchBar {
      z-index: 1;
      position: relative;
      top: auto;

      input {
         margin: 0;
         padding: 1em 0 !important;
         font-size: 3em;
         box-shadow: none;
         color: #fff;
         opacity: 1;
         background: none !important;
      }
   }
}

.searchResult {
   padding: 2em;
   background: #ebebeb;

   .sizeCenterElm {
      max-width: 900px;
   }

   ul {
      margin: 0;

      li {
         list-style: none;

         h2 {
            font-size: 1em;
            font-weight: 800;
         }

         a {
            color: #00ac7c;
         }

         border-bottom: solid 1px #d3d4d5;
         padding: 0.5em;
         opacity: 0.6;
         -webkit-transition: all .4s;
         -moz-transition: all .4s;
         -ms-transition: all .4s;
         -o-transition: all .4s;
         transition: all .4s;

         &:hover {
            opacity: 1;
         }
      }
   }
}

.combobox {
   margin-bottom: 1.5em !important;
   border-radius: 10px !important;
}

.chosen-container {
   font-size: 1em !important;
   margin-bottom: 2em;

   .chosen-single {
      padding: 0.7em 1em !important;
      height: 40px !important;
      line-height: 1em !important;
   }
}

.findLensNext {
   position: relative !important;

   p {
      color: #414141 !important;
      font-size: 1.5em !important;
   }
}

.fujiInspiring {
   .specialBanner.bannerStore.nopaci {
      .caption {
         display: flex;
         align-items: flex-end;
         padding-bottom: 35px;
      }

      @media only screen and (max-width: 640px) {
         .caption {
            position: relative;
            padding: 1em;
            display: table;
         }
      }
   }
}

@media only screen and (max-width: 640px) {
   #map {
      height: 300px !important;
   }
}

.storeLocator .storeLeftBlock.serviceList {
   padding-top: 5em;

   ul {
      margin: 0;

      li {
         display: table;
         width: 20%;
         padding: 2em;
         float: left;
         border-right: solid 1px #c8ccce;

         @media only screen and (max-width: 860px) {
            width: 50%;
            margin: 1em 0;

            &:nth-child(2n+2) {
               border-right: none;
            }
         }

         @media only screen and (max-width: 640px) {
            width: 100%;
            border-right: none;
            border-bottom: solid 1px #c8ccce;
         }

         &:last-child {
            border: none;
         }

         span {
            color: #868f96;

            strong {
               color: $blk;
            }
         }
      }
   }
}

.xPhotoGrapher {
   ul {
      margin: 0;

      li {
         width: 100%;
         list-style: none;
         padding: 5.5em 0;
         border-bottom: solid 1px #c8ccce;

         h2 {
            font-size: 1.5em !important;
            font-weight: 700;
         }
      }
   }

   .photographProfile {
      text-align: center;

      img {
         border-radius: 100%;
      }

      a {
         display: inline-block;
         width: 120px;
         text-align: center;
         border: solid 1px;
         text-transform: capitalize;
         padding: 0.5em;
         border-radius: 6px;
         cursor: pointer;
         position: relative;
         overflow: hidden;
         z-index: 1;
         margin-top: 2em;
      }

      @media only screen and (max-width: 640px) {
         a {
            display: table;
            margin: 2em auto;
         }
      }
   }

   .photographRight {
      .profile {
         display: inline-table;
         width: 60%;
         float: left;
         padding: 0 12px;
         border-right: solid 1px #c8ccce;

         @media only screen and (max-width: 640px) {
            width: 100%;
            padding: 0 1em 1em;
            text-align: center;

            p {
               font-size: 0.8em;
               line-height: 1.3;
            }
         }
      }

      .cameraUse {
         display: inline-table;
         width: 40%;
         float: left;
         padding-left: 2em;

         ul {
            margin: 0;

            li {
               list-style: none;
               width: 33.3%;
               float: left;
               padding: 8px;
               border: none;
            }
         }

         @media only screen and (max-width: 640px) {
            width: 100%;
            padding: 1em;
            text-align: center;
         }
      }

      .photographerGallery {
         display: inline-table;
         width: 100%;
         margin-top: 2em;

         ul {
            li {
               list-style: none;
               width: 33.3%;
               float: left;
               padding: 12px;
               border: none;

               @media only screen and (max-width: 640px) {
                  width: 100%;

                  img {
                     width: 100%;
                  }
               }
            }
         }
      }
   }

   &.xPhotoGrapherDetail {
      h2 {
         font-size: 1.5em !important;
         font-weight: 700;
      }

      .photographProfile {
         position: relative;
         top: -65px;

         @media only screen and (max-width: 640px) {
            width: 30%;
            margin: 1em auto;
            top: auto;
         }
      }

      .photographRight {
         padding-top: 2em;

         @media only screen and (max-width: 640px) {
            padding: 0;
         }

         .profile {
            h2 {
               color: $wht;
               position: relative;
               top: -75px;

               @media only screen and (max-width: 640px) {
                  color: $blk;
                  top: auto;
               }
            }
         }
      }

      .photographerGallery {
         ul {
            li {
               width: 33.3%;
               border: none;
               float: left;
               padding: 1em;

               @media only screen and (max-width: 640px) {
                  width: 100%;
               }

               img {
                  width: 100%;
               }
            }
         }
      }
   }
}

.navArrow {
   position: relative;

   h3 {
      text-transform: uppercase;

      span {
         margin-top: 15px;
         font-size: 16px;

         &.bookingDate {
            margin-left: 100px;
            color: #00ac7c;
         }

         &.bookingTanggal {
            color: #808080;
         }
      }
   }

   i {
      cursor: pointer;

      &.fa-chevron-circle-right {
         position: absolute;
         right: 1em;
         top: 12px;
         font-size: 2.5em;
      }

      &.fa-chevron-circle-left {
         position: absolute;
         right: 2em;
         top: 12px;
         font-size: 2.5em;
      }
   }
}

.navCalendar {
   border-bottom: solid 1px #bfbeba;

   ul {
      margin: 0;
      padding: 0;

      li {
         width: 50%;
         float: left;
         text-align: center;
         list-style: none;

         a {
            font-family: 'Oswald', sans-serif;
            text-transform: uppercase;
            padding: 0.8em 0;
            display: block;
            font-size: 1.2em;
            color: #bfbeba;
         }

         &.active {
            border-bottom: solid 4px #c0a062;

            a {
               color: #000;
            }
         }
      }
   }
}

.navCalendarForm {
   i {
      font-size: 2.5em;
      margin-top: 12px;
      margin-left: 1em;
      cursor: pointer;
   }

   h3 {
      font-family: 'Oswald', sans-serif;
      font-weight: 500;
   }
}

.eventForm {
   padding-top: 3em;

   form {
      padding-right: 50%;

      &.calendarForm {
         padding-right: 0;
         margin-bottom: 3em;
      }
   }
}

.bookStudio {
   @media only screen and (max-width: 640px) {
      overflow: auto;
   }

   table {
      width: 100%;
      padding-right: 10%;
      margin-bottom: 3em;

      th {
         &.today {
            color: #c0a062;
         }

         font-family: 'Oswald',
         sans-serif;
         text-transform: uppercase;
         padding: 1em;
         border-bottom: solid 1px #9b9da3;
         text-align: left;
         vertical-align: top;
         font-size: 1.3em;
         font-weight: 500;
         color: #9b9da3;

         &:first-child {
            color: #00ac7c;
            font-weight: 400;
         }

         span {
            font-family: 'Nunito Sans', sans-serif;
            display: block;
            font-size: 0.6em;
            text-transform: capitalize;
            font-weight: 600;
            color: #9b9da3;
         }
      }

      td {
         font-family: 'Nunito Sans', sans-serif;
         font-weight: 600;
         color: #9b9da3;
         font-size: 0.8em;
         vertical-align: top;
         padding: 1em;
         width: 20%;
         height: 95px;
         border-bottom: solid 1px #9b9da3;

         span {
            color: #707070;
            display: block;

            &.goldText {
               color: #c0a062;
            }

            &.nameBooker {
               font-size: 1.3em;
            }

            &.regNum {}
         }

         &.hasBook {
            background: #494949;

            span {
               &.goldText {
                  color: #c0a062;
               }

               &.nameBooker {
                  color: #fff;
               }

               &.regNum {
                  color: #fff;
               }
            }
         }

         position: relative;

         a {
            position: absolute;
            top: 0;
            left: 0;
            background: #9b9da3;
            color: #fff;
            opacity: 0;
            z-index: -1;
            -webkit-transition: all .4s;
            -moz-transition: all .4s;
            -ms-transition: all .4s;
            -o-transition: all .4s;
            transition: all .4s;
            width: 100%;
            height: 100%;
            padding: 2em;
         }

         &:hover {
            a {
               z-index: 2;
               opacity: 1;
            }
         }
      }
   }
}

.prodDetailMob {
   display: none;

   @media only screen and (max-width: 640px) {
      display: block;
   }
}

@media only screen and (max-width: 640px) {
   .prodDetailDeskt {
      display: none;
   }
}

.xPhotographStories {
   display: flex;
   align-items: center;
   padding: 2em;
}

.slideXphotographer {
   .slides {
      li {
         position: relative;
      }
   }

   .backgroundNya {
      width: 100%;
   }

   .captionnya {
      display: block;
      text-align: center;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      height: 100%;
      width: 100%;
      padding: 25%;
      background: rgba(0, 0, 0, 0.5);

      @media only screen and (max-width: 640px) {
         padding: 2em;
         line-height: 1.2;
         font-size: 0.8em;
      }

      .profilePhotonya {
         border-radius: 100%;
      }

      h2 {
         color: $wht;
      }

      p {
         color: $wht;
      }
   }
}

.sessionForm {
   position: fixed;
   top: 25%;
   left: 25%;
   width: 50%;
   background: rgba(255, 255, 255, 1);
   z-index: 20;
   height: auto;
   border-radius: 10px;
   padding: 2em;
   margin-top: 2em;

   @media only screen and (max-width: 640px) {
      top: 10%;
      left: 10%;
      width: 90%;
      display: table;
   }

   &.errorForm {
      li {
         color: #dc3545;
         font-weight: 500;
         list-style: inside;
         line-height: 2;
      }
   }

   &.successForm {
      li {
         list-style: none;
         color: #28a745;
         font-weight: 500;
         line-height: 2;
      }
   }

   span.close {
      position: absolute;
      right: 1em;
      top: 0.5em;
      font-family: 'Nunito Sans', sans-serif;
      text-transform: capitalize;
      color: #868f96;
      font-size: 1.0625em;
      cursor: pointer;
   }

}

.bg-session:before {
   content: "";
   position: fixed;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   background: rgba(0, 0, 0, 0.7);
   z-index: 10;
}

#carousel {
   padding-bottom: 2em;
}

.prism {
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   font-family: "proxima-nova-soft", sans-serif;
   -webkit-user-select: none;
   overflow: hidden;
   height: 100%;
   z-index: -1;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   opacity: 0;

   &.munculcoy {
      z-index: 99999999;
      opacity: 1;
   }
}

.prism .vertical-centered-box {
   position: absolute;
   width: 100%;
   height: 100%;
   text-align: center;
}

.prism .vertical-centered-box:after {
   content: '';
   display: inline-block;
   height: 100%;
   vertical-align: middle;
   margin-right: -0.25em;
}

.prism .vertical-centered-box .content {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   display: inline-block;
   vertical-align: middle;
   text-align: left;
   font-size: 0;
}

.prism {
   background: #000;
}

.loader-circle {
   position: absolute;
   left: 50%;
   top: 50%;
   width: 120px;
   height: 120px;
   border-radius: 50%;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
   margin-left: -60px;
   margin-top: -60px;
}

.loader-line-mask {
   position: absolute;
   left: 50%;
   top: 50%;
   width: 60px;
   height: 120px;
   margin-left: -60px;
   margin-top: -60px;
   overflow: hidden;
   -webkit-transform-origin: 60px 60px;
   -moz-transform-origin: 60px 60px;
   -ms-transform-origin: 60px 60px;
   -o-transform-origin: 60px 60px;
   transform-origin: 60px 60px;
   -webkit-mask-image: -webkit-linear-gradient(top, #000000, rgba(0, 0, 0, 0));
   -webkit-animation: rotate 1.2s infinite linear;
   -moz-animation: rotate 1.2s infinite linear;
   -o-animation: rotate 1.2s infinite linear;
   animation: rotate 1.2s infinite linear;
}

.loader-line-mask .loader-line {
   width: 120px;
   height: 120px;
   border-radius: 50%;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

#particles-background,
#particles-foreground {
   left: -51%;
   top: -51%;
   width: 202%;
   height: 202%;
   -webkit-transform: scale3d(0.5, 0.5, 1);
   -moz-transform: scale3d(0.5, 0.5, 1);
   -ms-transform: scale3d(0.5, 0.5, 1);
   -o-transform: scale3d(0.5, 0.5, 1);
   transform: scale3d(0.5, 0.5, 1);
}

#particles-background {
   background: #2c2d44;
   background-image: -moz-linear-gradient(45deg, #000000 2%, #000000 100%);
   background-image: -webkit-linear-gradient(45deg, #000000 2%, #000000 100%);
   background-image: linear-gradient(45deg, #000000 2%, #000000 100%);
}

lesshat-selector {
   -lh-property: 0;
}

@-webkit-keyframes rotate {
   0% {
      -webkit-transform: rotate(0deg);
   }

   100% {
      -webkit-transform: rotate(360deg);
   }
}

@-moz-keyframes rotate {
   0% {
      -moz-transform: rotate(0deg);
   }

   100% {
      -moz-transform: rotate(360deg);
   }
}

@-o-keyframes rotate {
   0% {
      -o-transform: rotate(0deg);
   }

   100% {
      -o-transform: rotate(360deg);
   }
}

@keyframes rotate {
   0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
   }

   100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}

[not-existing] {
   zoom: 1;
}

lesshat-selector {
   -lh-property: 0;
}

@-webkit-keyframes fade {
   0% {
      opacity: 1;
   }

   50% {
      opacity: 0.25;
   }
}

@-moz-keyframes fade {
   0% {
      opacity: 1;
   }

   50% {
      opacity: 0.25;
   }
}

@-o-keyframes fade {
   0% {
      opacity: 1;
   }

   50% {
      opacity: 0.25;
   }
}

@keyframes fade {
   0% {
      opacity: 1;
   }

   50% {
      opacity: 0.25;
   }
}

[not-existing] {
   zoom: 1;
}

lesshat-selector {
   -lh-property: 0;
}

@-webkit-keyframes fade-in {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

@-moz-keyframes fade-in {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

@-o-keyframes fade-in {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

@keyframes fade-in {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

[not-existing] {
   zoom: 1;
}

#carousel .fmnav-direction-nav .fmnav-next {
   opacity: 1;
   text-shadow: none;

   &:after {
      content: "›";
      width: 30px;
      height: 45px;
      font-size: 5em;
      opacity: 1;
      color: #fff;
      position: absolute;
      left: 0;
      top: 0;
      line-height: 0.5;
   }

   &.fmnav-disabled {
      opacity: 0;
   }
}

#carousel .fmnav-direction-nav .fmnav-prev {
   opacity: 1;
   text-shadow: none;

   &:after {
      content: "‹";
      width: 30px;
      height: 45px;
      font-size: 5em;
      opacity: 1;
      color: #fff;
      position: absolute;
      left: 0;
      top: 0;
      line-height: 0.5;
   }

   &.fmnav-disabled {
      opacity: 0;
   }
}

#carousel .fmnav-direction-nav {
   height: 0;
}

#carousel .fmnav-direction-nav a {
   top: 30%;
}

.bookingAccordion {
   border-top: solid 1px $wht;
   padding-top: 2em;

   &>li {
      display: inline-block;
      list-style: none;
      float: left;
      height: auto;
      width: 100%;
      padding: 0.5em 0;
      font-size: 1.5em;
      overflow: hidden;
      border-top: solid 1px #ccc;
      font-family: 'Oswald', sans-serif;
      display: block;
      position: relative;
      text-transform: uppercase;

      &:before {
         content: '';
         position: $abs;
         top: 0;
         bottom: 0;
         left: auto;
         right: 0;
         margin: auto;
         height: 20px;
         width: 15px;
         background-image: url("{{ asset_path('theme::img/icons.png') }}");
         background-repeat: no-repeat;
         background-position: -99px -29px;
         display: $b;
         @include transition(300ms);
      }

      .isinye {
         display: block;
         overflow: hidden;
         font-size: 12px;
         text-transform: capitalize;
         max-height: 0;

         li {
            font-size: 1.1em;
            color: #71787c;
            counter-increment: li;
            list-style: none;

            &:before {
               content: counter(li);
               color: $blk;
               font-weight: 800;
               display: inline-block;
               width: 1.5em;
               margin-left: -1.5em;
            }
         }
      }

      &.accodrionActive {
         color: #c0a062;

         .isinye {
            max-height: 2000px;
            @include transition(500ms);
         }
      }
   }
}