/* Phase 01 */
.menu-shop,
.menu-collections { display: none !important; }


/* Font
-------------------------------------------------- */
  @font-face {
    font-family: 'Bebas Neue';
    src: url('../fonts/BebasNeue.eot'); /* IE9 Compat Modes */
    src: url('../fonts/BebasNeue.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/BebasNeue.woff') format('woff'), /* Modern Browsers */
         url('../fonts/BebasNeue.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('../fonts/BebasNeue.svg') format('svg'); /* Legacy iOS */
         
    font-style:   normal;
    font-weight:  400;
  }

  @font-face {
    font-family: 'Poplar Std';
    src: url('../fonts/PoplarStd.eot'); /* IE9 Compat Modes */
    src: url('../fonts/PoplarStd.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/PoplarStd.woff') format('woff'), /* Modern Browsers */
         url('http://www.levisthailand.com/lvc/wp-content/themes/roots-master/assets/fonts/PoplarStd.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('../fonts/PoplarStd.svg') format('svg'); /* Legacy iOS */
         
    font-style:   normal;
    font-weight:  400;
  }

  @font-face {
    font-family: 'kitRegular';
    src: url('../fonts/kitRegular.eot'); /* IE9 Compat Modes */
    src: url('../fonts/kitRegular.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/kitRegular.woff') format('woff'), /* Modern Browsers */
         url('http://www.levisthailand.com/lvc/wp-content/themes/roots-master/assets/fonts/kitRegular.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('../fonts/kitRegular.svg') format('svg'); /* Legacy iOS */
         
    font-style:   normal;
    font-weight:  400;
  }

  body, a, div, strong, span, li, h1, h2, h3, h4, p, em, input, label { font-family: 'Bebas Neue', kitRegular; font-weight: normal; }
  strong, h1, h2, h3, h4 { font-weight: bold; }


/* Sprite
-------------------------------------------------- */

  .stext { background: url('../img/sprite-text-large.png') no-repeat left top; }
  .stext.historic-501 { background-position: 0px 0px; width: 339px; height: 276px; }
  .stext.a-bad-time-in-levis { background-position: -349px 0px; width: 313px; height: 41px; }
  .stext.collection { background-position: -672px 0px; width: 221px; height: 39px; }
  .stext.grew-sweat-shirt { background-position: -903px 0px; width: 343px; height: 39px; }
  .stext.have-you-ever-had { background-position: -1256px 0px; width: 445px; height: 49px; }
  .stext.icons { background-position: -1711px 0px; width: 232px; height: 129px; }
  .stext.levis-vintage-clothing { background-position: -1953px 0px; width: 610px; height: 21px; }
  .stext.line-443 { background-position: -2573px 0px; width: 443px; height: 2px; }
  .stext.longhorn-shirt { background-position: -3026px 0px; width: 307px; height: 39px; }
  .stext.presents-dash { background-position: -3343px 0px; width: 500px; height: 37px; }
  .stext.presents { background-position: -3853px 0px; width: 139px; height: 19px; }
  .stext.the-historic-501 { background-position: -4002px 0px; width: 376px; height: 55px; }
  .stext.two-pocket { background-position: -4388px 0px; width: 500px; height: 39px; }
  .stext.type-3-trucker-jacket { background-position: -4898px 0px; width: 465px; height: 39px; }
  .stext.welcome-back-to-1973 { background-position: -5373px 0px; width: 608px; height: 89px; }
  .stext.year-1920s { background-position: -5991px 0px; width: 208px; height: 119px; }
  .stext.year-1950s { background-position: -6209px 0px; width: 208px; height: 122px; }
  .stext.year-1960s { background-position: -6427px 0px; width: 208px; height: 119px; }

  .stext.experience-orange-tab { background: url(../img/text/experience-orange-tab.png); width: 314px; height: 29px; }
  .home-01 .experience-orange-tab { position: absolute; bottom: 10px; left: 50%; margin-left: -157px; }

  .historic-content .slide-main .animate .stext { visibility: visible; }


/* Animate content
-------------------------------------------------- */
  .animate { position: absolute; width: auto; height: auto; top: 50%; left: 50%; z-index: 1; }
  .animate .stext { display: block; margin: 0 auto 15px; visibility: hidden; }

  .slide-wrapper .link { position: absolute; left: 50%; bottom: 20%; color: #FFF; text-decoration: none; font-size: 2em; z-index: 1; text-shadow: 0 0 5px rgba(0,0,0,1); }
  .slide-wrapper .detail { background: rgba(60, 58, 57, 0.6); padding: 15px 80px 15px 20px; position: absolute; right: 0; bottom: 15%; z-index: 1; color: #FFF; visibility: hidden; }


/* Sticky footer styles
-------------------------------------------------- */
  html {
    position: relative;
    min-height: 100%;
  }
  body {
    /* Margin bottom by footer height */
    margin-bottom: 40px;
  }
  #footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 40px;
    background-color: #f5f5f5;
  }


/* Flip animate 
-------------------------------------------------- */
  .flip-card {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;
  }
  .flip-card-side-a,
  .flip-card-side-b {
    width: 100%;
    position: absolute;
    height: 100%;
    backface-visibility: hidden;
    
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
  }

  .flip-card-side-a {
    -webkit-transform: rotateX(0deg) translateZ(20px);
    -moz-transform: rotateX(0deg) translateZ(20px);
    -o-transform: rotateX(0deg) translateZ(20px);
    transform: rotateX(0deg) translateZ(20px);
    z-index: 1;
  }
  .flip-card-side-b {
    -webkit-transform: rotateX(89deg) translateZ(20px);
    -moz-transform: rotateX(89deg) translateZ(20px);
    -o-transform: rotateX(89deg) translateZ(20px);
    transform: rotateX(89deg) translateZ(20px);
  }

  /* start animate */
  .flip .flip-card-side-a {
    -webkit-transform: rotateX(-89deg) translateZ(20px);
    -moz-transform: rotateX(-89deg) translateZ(20px);
    -o-transform: rotateX(-89deg) translateZ(20px);
    transform: rotateX(-89deg) translateZ(20px);
  }
  .flip .flip-card-side-b {
    -webkit-transform: rotateX(0deg) translateZ(20px);
    -moz-transform: rotateX(0deg) translateZ(20px);
    -o-transform: rotateX(0deg) translateZ(20px);
    transform: rotateX(0deg) translateZ(20px);
    z-index: 1;
  }

  .btn-scale,
  .btn-scale-em em {
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
  }
  .btn-scale:hover,
  .btn-scale-em:hover em {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }

  .fb-share { position: absolute; top: 100%; margin-top: 10px; height: 40px; }
  .btn-share { position: relative; height: 40px; width: 170px; padding: 0; margin: 0; }
  .btn-share span { background: url(../img/icon-facebook.png) no-repeat 4px 4px; height: 20px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 40px; text-align: center; }
  .btn-share .hover { background-color: #FFF; color: #000 }
  .btn-share .normal { background-color: #000; color: #FFF }

  .form-submit input { margin: 0; padding: 0; border: 0; height: 30px; width: 80px; line-height: 30px; font-size: 1.2em; }
  .form-submit .normal { background: #5a5655; color: #FFF; }
  .form-submit .hover { background: #FFF; color: #5a5655; height: 29px; }

  .form-submit .flip-card-side-a {
    -webkit-transform: rotateX(0deg) translateZ(15px);
    -moz-transform: rotateX(0deg) translateZ(15px);
    -o-transform: rotateX(0deg) translateZ(15px);
    transform: rotateX(0deg) translateZ(15px);
    z-index: 1;
  }
  .form-submit .flip-card-side-b {
    -webkit-transform: rotateX(90deg) translateZ(15px);
    -moz-transform: rotateX(90deg) translateZ(15px);
    -o-transform: rotateX(90deg) translateZ(15px);
    transform: rotateX(90deg) translateZ(15px);
  }

  .form-submit.flip .flip-card-side-a {
    -webkit-transform: rotateX(-90deg) translateZ(15px);
    -moz-transform: rotateX(-90deg) translateZ(15px);
    -o-transform: rotateX(-90deg) translateZ(15px);
    transform: rotateX(-90deg) translateZ(15px);
  }
  .form-submit.flip .flip-card-side-b {
    -webkit-transform: rotateX(0deg) translateZ(15px);
    -moz-transform: rotateX(0deg) translateZ(15px);
    -o-transform: rotateX(0deg) translateZ(15px);
    transform: rotateX(0deg) translateZ(15px);
    z-index: 1;
  }

  .historic-content .flex-direction-nav a { overflow: visible; text-indent: 0; }
  .historic-content .flex-direction-nav a:before { display: none; }
  
  .flex-prev .normal { background: url(../img/arrow-prev.png); }
  .flex-prev .hover { background: url(../img/arrow-prev-hover.png); }
  .flex-next .normal { background: url(../img/arrow-next.png); }
  .flex-next .hover { background: url(../img/arrow-next-hover.png); }
  
  .historic-content .flex-direction-nav .normal,
  .historic-content .flex-direction-nav .hover { content: " "; position: absolute; width: 47px; height: 47px; left: 0; }

  .historic-content .flex-direction-nav a {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;
  }

  .historic-content .flex-direction-nav .normal 
  .historic-content .flex-direction-nav .hover {
    backface-visibility: hidden;
    
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
  }

  .historic-content .flex-direction-nav .normal {
    -webkit-transform: rotateX(0deg) translateZ(23px);
    -moz-transform: rotateX(0deg) translateZ(23px);
    -o-transform: rotateX(0deg) translateZ(23px);
    transform: rotateX(0deg) translateZ(23px);
    z-index: 1;
  }

  .historic-content .flex-direction-nav .hover {
    -webkit-transform: rotateX(89deg) translateZ(23px);
    -moz-transform: rotateX(89deg) translateZ(23px);
    -o-transform: rotateX(89deg) translateZ(23px);
    transform: rotateX(89deg) translateZ(23px);
  }

  .historic-content .flex-direction-nav .flip .normal {
    -webkit-transform: rotateX(-89deg) translateZ(23px);
    -moz-transform: rotateX(-89deg) translateZ(23px);
    -o-transform: rotateX(-89deg) translateZ(23px);
    transform: rotateX(-89deg) translateZ(23px);
  }

  .historic-content .flex-direction-nav .flip .hover {
    -webkit-transform: rotateX(0deg) translateZ(23px);
    -moz-transform: rotateX(0deg) translateZ(23px);
    -o-transform: rotateX(0deg) translateZ(23px);
    transform: rotateX(0deg) translateZ(23px);
    z-index: 1;
  }
 

/* Custom page CSS
-------------------------------------------------- */
  a, a:hover, a:active, a:focus, button, input, textarea, select { outline: 0; }
  * { letter-spacing: 0.05em; }
  body { background: #fff; }
  body > .container {
    padding: 35px 15px 0;
  }
  .container .text-muted {
    margin: 20px 0;
  }

  #footer > .container {
    padding-right: 15px;
    padding-left: 15px;
  }

  .resize { position: fixed; top: 0; left: 50%; z-index: 0; }
  .hidden-content { display: none; }

  #header,
  #footer { z-index: 10000; }

  .container { position: relative; z-index: 1; }
  .wrap { overflow-x: hidden; margin-bottom: 40px; }

  #modal-zoom .container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: auto; margin: 0; padding: 0; }
  #modal-zoom .container img { display: block; width: 100%; height: auto; }
  #modal-zoom .btn-close { position: fixed; top: 150px; right: 50%; margin-right: -640px; }

  .zoomable {
    cursor: -webkit-zoom-in; cursor: -moz-zoom-in;
  }

  /* fixed head */
  .scroll-fixed { position: fixed; height: 77px; top: 0; left: 0; width: 100%; z-index: 2; }
  .single-products .scroll-fixed { position: static; }
  .onload-fade { 
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    /* IE 5-7 */
    filter: alpha(opacity=0);
    /* Netscape */
    -moz-opacity: 0;
    /* Safari 1.x */
    -khtml-opacity: 0;
    /* Good browsers */
    opacity: 0;
  }

  .extra-header,
  #menu-extra { display: none; }


/* Override
-------------------------------------------------- */
  .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus,
  .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus { background: transparent; color: #000; }


/* Header
-------------------------------------------------- */
  #header { margin: 0; background: transparent; border: 0; }
  #header .container { position: relative; }
  
  .navbar-brand { position: absolute; left: 0; top: 0; width: 200px; height: 115px; background: url(../img/logo.png); z-index: 1; text-indent: -9999px; overflow: hidden; }

  .nav-header { height: 80px; padding-left: 197px; }
  .nav-header .app-title { position: relative; height: 37px; line-height: 53px; overflow: hidden; margin: 0; font-weight: normal; letter-spacing: 0.05em; }
  .nav-header .app-title strong:after { content: " "; position: absolute; height: 1px; width: 100%; left: 0; bottom: 0; background: #000; }
  .nav-header .navbar-collapse { height: 40px; }
  .nav-header .navbar-nav { margin-left: -15px; }
  .nav-header .navbar-nav > li > a { padding: 0 15px; height: 40px; line-height: 40px; font-size: 1.2em; margin-right: 20px; }
  .nav-header .dropdown-menu { background: transparent; border: 0; box-shadow: none; border-top: 2px solid #90131d; }
  .nav-header .dropdown-menu > li > a:hover { background: transparent; }
  .nav-header .dropdown-menu > li { position: relative; z-index: 2; }
  .nav-header .dropdown-menu > li.dropdown-bg { position: fixed; z-index: 1; }

  .navbar-about { position: absolute; right: 0; bottom: 5px; width: 600px; }
  .navbar-about>.form-email,
  .navbar-about>.navbar-extra { float: right; }
  
  .form-email { width: 325px; }
  .form-email .label-physical { float: left; margin: 0; height: 30px; line-height: 30px; width: 45px; font-size: 1.2em; font-weight: normal; }
  .form-email .input-wrapper { position: relative; float: left; height: 30px; line-height: 30px; margin-left: 10px; width: 190px; }
  .form-email .input-wrapper input { padding: 0; margin: 0; border: 0; width: 100%; height: 30px; text-indent: 10px; font-size: 1.2em; }
  .form-email .input-wrapper .label-placeholder { position: absolute; top: 0; left: 0; height: 100%; width: 100%; text-indent: 10px; font-size: 1.2em; font-weight: normal; color: #747272; }

  .form-email .notification { position: absolute; top: 0; left: 58px; background: #FFF; height: 30px; width: 190px; line-height: 30px; text-indent: 10px; }

  .navbar-extra>li { display: inline; }
  .navbar-extra>li>a { display: inline-block; padding: 0 0 0 15px; height: 30px; line-height: 30px; font-size: 1.2em; margin-left: 35px; color: #000; background: transparent; }
  .navbar-extra>li>a:hover { background: transparent; }

  .nav-header .app-title { font-size: 1em; line-height: 55px; width: auto; }
  .nav-header .app-title strong { font-weight: normal; position: relative; }
  .nav-header .app-title,
  .nav-header .navbar-nav>li>a { text-transform: uppercase; color: #000; }
  .nav-header .dropdown-menu>li>a { text-transform: uppercase; color: #FFF; padding: 3px 15px; font-size: 1.2em; }
  .nav-header .dropdown-menu>li>a:hover { color: #EEE; }
  .nav-header .dropdown-bg { background: rgba(0, 0, 0, .8); position: fixed; top: 79px; left: 0; right: 0; display: none; }

  .dropdown-menu a span { display: inline-block; line-height: 1.1em; }
  .dropdown-menu a:hover span { border-bottom: solid 1px #90131D }
  .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    background: transparent;
  }
  .dropdown-menu > .active > a span, .dropdown-menu > .active > a:hover span, .dropdown-menu > .active > a:focus span {
    border-bottom: solid 1px #90131D;
  }

  .dropdown-menu .dropdown-menu {
    position: static;
    display: block;
    border-top: 0;
    overflow: visible;
    width: 150px;
    padding: 0;
    float: none;
  }
  .dropdown-menu .dropdown-menu li {
    padding: 0 0 0 20px;
    background: url(../img/icon-diamond.png) no-repeat 20px 12px;
  }


/* Footer
-------------------------------------------------- */
  #footer { height: 40px; overflow: hidden; background: #FFF; }
  #footer .container { position: relative; height: 40px; }
  #footer .copy-right { position: absolute; height: 40px; line-height: 45px; left: 0; top: 0; /*margin-left: -17px;*/ font-size: 1em; }
  #footer .nav-footer { position: absolute; height: 40px; line-height: 45px; right: 0; top: 0; }
  /*#footer .nav-footer ul { margin-right: -40px; }*/
  #footer .nav-footer ul li { }
  #footer .nav-footer ul li a { background: transparent; padding: 0 0 0 20px; line-height: 40px; font-size: 1em; }

  #footer .container p,
  #footer .container a { color: #666; text-transform: uppercase; font-size: 1em; }


/* Page
-------------------------------------------------- */
  .page { background: #FFF; }
  .category #header { background: rgba(255,255,255,.4); }
  .category .content-main .container { padding-top: 25px; }


/* Historic
-------------------------------------------------- */
  .historic-content { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
  .historic-content .container { margin-top: 110px; }
  .historic-content .resize { 
    /*left: 0; margin-left: 0!important; */
    left: 50%;
    position: absolute; 
  }
  .historic-navigator { position: fixed; left: 0; bottom: 40px; width: 100%; height: 35px; line-height: 35px; background: #000; }
  .historic-nav { padding: 0; margin: 0 0 0 -60px; list-style: none; display: block; height: 35px; width: 100%; text-align: left; }
  .historic-nav > li { float: left; width: 75px; height: 35px; line-height: 35px; text-align: center; }
  .historic-nav > li > a { color: #FFF; display: inline-block; line-height: 35px; font-size: 1.2em; }
  .historic-nav > li > a:hover { text-decoration: none; font-size: 1.5em; }
  .historic-nav > li > a.current { font-size: 1.5em; background: url(../img/icon-current.png) no-repeat center bottom; }


/* Historic Slide Show
-------------------------------------------------- */
  .historic-content { background: #716d6c; }
  .historic-content .flex-viewport { height: 100%; }
  .historic-content .flex-viewport .slides { height: 100%; }
  .historic-content .flex-viewport .slides > li { height: 100%; position: relative; overflow: hidden; }
  .historic-content .historic-thumbnail { position: absolute; top: 0; left: 50%; }
  .historic-content .flex-control-nav { display: none; }
  .historic-content .flex-direction-nav a { position: fixed; top: 40%; width: 47px; height: 47px; opacity: 1; z-index: 1; text-align: left; }
  .historic-content .flex-direction-nav .flex-prev { left: 20px; }
  .historic-content .flex-direction-nav .flex-next { right: 20px; }
  .historic-content .flex-direction-nav .flex-disabled { display: none; }

  .historic-content .slides > li > .container { margin: 0; height: 100%; width: 100%; }

  /* Slide About */
  .slide-about h3,
  .slide-about p { color: #FFF; font-size: 1.1em; line-height: 1.6em; }
  .slide-about h3 { border-bottom: solid 1px #FFF; text-transform: uppercase; height: 40px; line-height: 40px; font-size: 1.9em; }
  .slide-about .content-detail { position: absolute; top: 130px; left: 50%; margin-left: -380px; width: 450px; }
  .slide-about .about-thumbnail { position: absolute; left: 50%; top: 120px; margin-left: 120px; }

  /* Slide Product */
  .slide-historic .historic-hidden-content { color: #FFF; text-transform: uppercase; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #6f6a66; z-index: 1; }
  .slide-historic .about-content .container { margin: 0 auto; width: 920px; box-sizing: border-box; padding: 105px 0 80px; height: 100%; position: relative; }
  .slide-historic .about-content .container .content-about { width: 500px; height: 100%; }
  .slide-historic .about-content h4 { margin-left: 15px; font-size: 2em; margin-bottom: 0; }
  .slide-historic .about-content h5 { display: block; border-bottom: solid 1px #FFF; padding: 0 0 5px; font-size: 1.5em; margin: 0; }
  .slide-historic .about-content .content-data { font-size: 1.1em; line-height: 1.3em; padding-top: 5px; position: absolute; top: 40px; bottom: 40px; overflow: auto; }
  .slide-historic .about-content .content-design-detail { margin-left: 50px; }
  .slide-historic .about-content .content-design-detail ul { padding: 5px 0 0 20px; list-style: disc; }
  .slide-historic .about-content .content-design-detail ul li { font-size: 1.1em; }

  .slide-historic .archive-content .modal-content { top: 5px; }

  .dot-line { height: 3px; background: url(../img/bg-dot-4x3.png); }
  .dot-line .btn { position: absolute; top: -25px; height: 53px; line-height: 53px; padding: 0 10px; font-size: 1.2em; color: #fff; }
  .dot-line .btn .diamond { position: absolute; width: 53px; height: 53px; text-indent: -9999px; overflow: hidden; }
  .view-about, .view-archive { position: absolute; z-index: 1; width: 10%; }
  .view-about { top: 40%; left: 50%; margin-left: -23%; }
  .view-archive { top: 60%; right: 50%; margin-right: -24%; }
  .view-about .btn { left: -55px; }
  .view-archive .btn { right: -65px; }
  .view-about .btn .diamond { left: -55px; background: url(../img/button-diamond-about.png); }
  .view-archive .btn .diamond { right: -55px; background: url(../img/button-diamond-archive.png); }

  .btn-back { width: 53px; height: 53px; background: url(../img/button-diamond-back.png) center center; }
  .about-content .btn-back { position: absolute; width: 53px; height: 53px; background: url(../img/button-diamond-back.png) center center; bottom: 100px; right: 50%; margin-right: -500px; }

  .btn-close { display: inline-block; width: 53px; height: 53px; background: url(../img/button/close.png) no-repeat center center; }

  .archive-item { margin: 0; padding: 0; list-style: none; }
  .archive-item li { 
    margin: 15px; float: left; width: 764px; opacity: 0; 

    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .archive-item li.active { opacity: 1; }
  .archive-item li .slide-detail { }
  .archive-item li .slide-thumbnail { width: auto; height: 360px; display: block; margin: 0 auto; /*visibility: hidden;*/ }
  
  .archive-scrollable { height: 380px; width: 794px; position: relative; overflow: visible; }

  .archive-slideshow .flip-card { content: " "; position: absolute; width: 47px; height: 47px; top: 170px; display: none; }
  .archive-slideshow .flip-card .flip-card-side-b { 
    -webkit-transform: rotateX(89deg) translateZ(24px);
    -moz-transform: rotateX(89deg) translateZ(24px);
    -o-transform: rotateX(89deg) translateZ(24px);
    transform: rotateX(89deg) translateZ(24px);
  }
  .archive-slideshow .flip.flip-card .flip-card-side-b { 
    -webkit-transform: rotateX(0deg) translateZ(24px);
    -moz-transform: rotateX(0deg) translateZ(24px);
    -o-transform: rotateX(0deg) translateZ(24px);
    transform: rotateX(0deg) translateZ(24px);
  }
  .archive-slideshow .flex-prev { left: -50px; }
  .archive-slideshow .flex-next { right: -50px; }

  .archive-control { position: absolute; left: 5px; bottom: 0; margin: 0; padding: 0; list-style: none; visibility: hidden; }
  .archive-control li { display: inline; margin: 0 10px; }
  .archive-control li a { display: inline-block; width: 12px; height: 12px; border: solid 1px #FFF; border-radius: 50%; }
  .archive-control li a:hover { background: rgba(255,255,255,.4); }
  .archive-control li a.active { background: rgba(255,255,255,1); }

/* Category slideshow
---------------------------------------------------- */
  .category-slide { position: fixed; top: 0; left: 0; width: 100%; height: 625px; background: transparent; }
  .scroll-down { position: fixed; z-index: 1; top: 570px; left: 50%; margin-left: -13px; width: 25px; height: 35px; background: url(../img/icon-scrolldown.png); }


/* Content 
---------------------------------------------------- */
  .content-hilight { position: relative; min-height: 625px; }
  .content-hilight .content-center { position: absolute; top: 50%; left: 50%; /*visibility: hidden;*/ z-index: 1; color: #FFF; text-align: center; }
  .main-orange-tab .content-center { top: 40%; }

  .zipper .content-hilight .content-center { position: fixed; top: 0; left: 0; width: 100%; height: 625px; }

  .content-hilight .fixed-bg { position: fixed; top: 0; left: 0; width: 100%; height: auto; z-index: 0; }
  .content-main { position: relative; background: #FFF; z-index: 2; padding-bottom: 20px; min-height: 625px; }
  .category .content-hilight { height: 545px; }
  #content { position: relative; z-index: 2; background: #fff; }
  .green-bg { position: fixed; top: 0; right: 0; width: 505; height: 100%; width: 50%; background: #f4f5ec; }

  .feature-image { position: absolute; right: 100%; margin-right: 50px; margin-top: -70px; width: 95%; }
  .feature-image a { display: block; }
  .feature-image img { display: block; width: 100%; height: 100%; }
  .feature-image .zoom { background: url(../img/icon-zoom.png); width: 25px; height: 25px; bottom: 10px; right: 10px; box-shadow: 0; position: absolute; }


/* Orange tab
---------------------------------------------------- */
  .orange-exp { position: fixed; bottom: 40px; left: 0; width: 100%; background: #FFF; z-index: 2; }
  .orange-exp h3 { height: 40px; line-height: 40px; margin: 0; text-align: center; font-size: 1.4em; background: #000; color: #FFF; text-shadow: none; }
  .orange-exp .page-links { width: 100%; margin: 0; padding: 0; list-style: none; overflow: hidden; }
  .orange-exp .link-item { position: relative; float: left; width: 33%; height: 160px; overflow: hidden; }
  .orange-exp .link-item:last-child { width: 34%; }
  .orange-exp .link-item a { display: block; width: 100%; height: 100%; position: relative; text-align: center; z-index: 2; padding-top: 15px; }
  .orange-exp .link-item a:hover { text-decoration: none; }
  .orange-exp .link-item a .link-logo { display: block; margin: 0 auto; }
  .orange-exp .link-item a .link-name { display: block; color: #000; font-size: 1.2em; }
  .orange-exp .link-item .link-background,
  .orange-exp .link-item .tmp-background { position: absolute; top: 0; left: 0; width: 100%; z-index: 1 }
  .orange-exp .link-item .tmp-background { z-index: 0; }


/* Zipper
-------------------------------------------------- */
  .sepaerate-bar { height: 40px; line-height: 40px; margin: 0; text-align: center; font-size: 1.4em; background: #000; color: #FFF; text-shadow: none; }
  .magazine { min-height: 600px; margin: 30px 20px; }
  .magazine #book { margin: 0 auto }
  .magazine #book img { width: 100%; }
  .magazine-detail { margin: 0 auto; text-align: justify; }


/* Historic Archive 
-------------------------------------------------- */
  .modal-backdrop.in { opacity: 1!important; background: #6f6a66; }
  .modal-content { position: absolute; top: 120px; left: 50%; padding: 0; margin: 0; margin-left: -397px; width: 794px; height: 460px; background: transparent; border: 0; 
    box-shadow: none; 
    overflow: visible;
  }
  .modal-content h5 { margin: 0; font-size: 2em; color: #FFF; border-bottom: solid 1px #FFF; margin: 0 15px 2px; }
  .modal-content .archive-slideshow { color: #FFF; margin-top: -10px; }
  .modal-content .btn-back { top: 4px; right: 15px; position: absolute; }

  .btn-shop { position: absolute; left: 50%; width: 150px; height: 40px; padding-top: 0; padding-bottom: 0; background: #000; color: #FFF; border-radius: 0; font-size: 1.3em; margin-left: -75px; }
  .btn-shop:hover { color: #FFF; }

  .btn-shop span { width: 150px; height: 40px; line-height: 40px; position: absolute; top: 0; left: 0; }
  .btn-shop .normal { background: #000; color: #FFF; z-index: 2; }
  .btn-shop .hover { background: #FFF; color: #000; z-index: 1; }

  .slide-historic .btn-shop { bottom: 120px; z-index: 1; display: none; }
  .slide-historic .modal-content .btn-shop { bottom: -10px; }

  .archive-slideshow .slides { visibility: hidden; }
  .archive-slideshow .slides li { width: 760px; height: 345px; }
  .archive-slideshow .slides li img { width: 730px; height: 345px; display: block; }
  .archive-slideshow .slides li .wrapper { padding: 0 15px; }
  .archive-slideshow .flex-control-nav { position: absolute; left: 10px; bottom: 5px; width: auto; }
  .archive-slideshow .flex-control-paging li a { background: transparent; border: solid 1px #FFF; width: 10px; height: 10px; box-shadow: none; }
  .archive-slideshow .flex-control-paging li a:hover { background: rgba(255, 255, 255, .4); }
  .archive-slideshow .flex-control-paging li a.flex-active { background: #FFF; }
  .archive-slideshow .flex-viewport { overflow: visible !important; }


/* Pages Slide Show
-------------------------------------------------- */
  .page-slider { position: fixed; top: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: 0; z-index: 0; }
  .page-slider .flex-control-nav { bottom: inherit; right: 20px; top: 35%; width: auto; z-index: 2; }
  .page-slider .flex-control-nav li { display: block; margin: 15px; }
  .page-slider .flex-control-paging li a { background: transparent; width: 12px; height: 12px; border: solid 1px #000; box-shadow: none; }
  .page-slider .flex-control-paging li a:hover { background: rgba(255,255,255,0.4); }
  .page-slider .flex-control-paging li a.flex-active { background: #000; }
  .page-slider .flex-viewport,
  .page-slider .slides { height: 100%; }
  /*.page-slider .slides > li { position: relative; height: 100%; overflow: hidden; }*/
  .page-slider .slides > li .slide-bg.resize { position: absolute; top: 0; left: 50%; }
  .page-slider .slides .slide-wrapper { position: relative; width: 100%; height: 100%; overflow: hidden; }

  .slide-item {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    
    visibility: hidden;

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;

    z-index: 0;
  }
  .slide-item.pt-page-current { visibility: visible; z-index: 1; }

  /* out */
  .pt-page-rotateBottomSideFirst {
    -webkit-transform-origin: 50% 0%;
    -webkit-animation: rotateBottomSideFirst .8s both ease-in;
    -moz-transform-origin: 50% 0%;
    -moz-animation: rotateBottomSideFirst .8s both ease-in;
    transform-origin: 50% 0%;
    animation: rotateBottomSideFirst .8s both ease-in;
  }

  /* in */
  .pt-page-moveFromBottom {
    -webkit-animation: moveFromBottom .6s ease both;
    -moz-animation: moveFromBottom .6s ease both;
    animation: moveFromBottom .6s ease both;
  }
  .pt-page-delay200 {
    -webkit-animation-delay: .2s;
    -moz-animation-delay: .2s;
    animation-delay: .2s;
  }

  /* keyframe */
  @-webkit-keyframes rotateBottomSideFirst {
    40% { -webkit-transform: rotateX(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; }
    100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; }
  }
  @-moz-keyframes rotateBottomSideFirst {
    40% { -moz-transform: rotateX(-15deg); opacity: .8; -moz-animation-timing-function: ease-out; }
    100% { -moz-transform: scale(0.8) translateZ(-200px); opacity:0; }
  }
  @keyframes rotateBottomSideFirst {
    40% { transform: rotateX(-15deg); opacity: .8; animation-timing-function: ease-out; }
    100% { transform: scale(0.8) translateZ(-200px); opacity:0; }
  }
  @-webkit-keyframes moveFromBottom {
    from { -webkit-transform: translateY(100%); }
  }
  @-moz-keyframes moveFromBottom {
    from { -moz-transform: translateY(100%); }
  }
  @keyframes moveFromBottom {
    from { transform: translateY(100%); }
  }

/**/

/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/
  .isotope-item {
    z-index: 2;
  }

  .isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
  }

  /**** Isotope CSS3 transitions ****/

  .isotope,
  .isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
       -moz-transition-duration: 0.8s;
        -ms-transition-duration: 0.8s;
         -o-transition-duration: 0.8s;
            transition-duration: 0.8s;
  }

  .isotope {
    -webkit-transition-property: height, width;
       -moz-transition-property: height, width;
        -ms-transition-property: height, width;
         -o-transition-property: height, width;
            transition-property: height, width;
  }

  .isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
       -moz-transition-property:    -moz-transform, opacity;
        -ms-transition-property:     -ms-transform, opacity;
         -o-transition-property:      -o-transform, opacity;
            transition-property:         transform, opacity;
  }

  /**** disabling Isotope CSS3 transitions ****/

  .isotope.no-transition,
  .isotope.no-transition .isotope-item,
  .isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
       -moz-transition-duration: 0s;
        -ms-transition-duration: 0s;
         -o-transition-duration: 0s;
            transition-duration: 0s;
  }

  /* End: Recommended Isotope styles */
  #options{
    margin:0 10px 10px 0;
    height:30px;
  }
  #options .filter{
    list-style:none;
    margin:0;
    padding:0;
    float:right;
  }
  #options .filter li{
    float:left;
    margin-left:30px;
  }
  #options .filter a{
    background: url(../img/bullet/boxWhite.png) no-repeat 0 4px;
    color:#0c0c0c;
    display:block;
    font-size:20px;
    padding:0 0 0 23px;
    
    height:30px;
  }
  #options .filter a:hover{
    text-decoration:none;
  }
  #options .filter .selected{
    background:url(../img/bullet/boxWhite-2.png) no-repeat 0 4px;
  }

  /* Color shapes */
  #listIcons {
    margin:0 -15px 20px;
    width:1280px;
  }
  #listIcons .box {
    width: 208px;
    height: 390px;
    margin: 2px;
    float: left;
  }
  #listIcons .pic{}
  #listIcons .pic img{
    display:block;
    width:208px;
    height:312px;
  }
  #listIcons .pic .back{
    display:none;
    
    width:208px;
    height:312px;
    
    position:absolute;
    top:0;
    left:0;
  }
  #listIcons .name{
    font-size:18px;
    margin-bottom:5px;
  }
  #listIcons .listThumb{
    list-style:none;
    margin:0;
    padding:0;
    height:25px;
  }
  #listIcons .listThumb li{
    float:left;
    margin:0 5px 0 0;
  }
  #listIcons .listThumb img{
    display:block;
    width:25px;
    height:25px;
  }

/* Fix Other Page
-------------------------------------------------- */
  body.icons,
  body.product{
    background:#fff; 
    margin:0;
  }
  .category-bing,
  .category-bing #footer,
  body.bing,
  body.bing #footer{
    background:#f0f0ed;
    margin:0;
  }
  .category-bing #content,
  .bing #content{
    background: #f0f0ed url(../img/bg/bgBing.png) repeat-x 0 bottom;
    z-index: 1;
  }
  .icons #content .container,
  .bing #content .container,
  .product #content .container{
    padding:0;
    position:relative;
    width:1280px;
  }
  .icons #footer,
  .bing #footer{
    position:relative;
  }
  .product #footer{
    z-index:1;
    
    position: absolute;
    bottom:0;
    left:0;
  }
  .icons .page-slider,
  .bing .page-slider{
    margin-top:-77px;
    overflow:hidden;
    position:relative; 
  }
  .page-slider .slides{
    width:100%; 
    
    position:absolute; 
    top:0; 
    left:0;
  }
  .titleMain{
    background:#000;
    color:#fff;
    font-size:20px;
    font-weight:400;
    margin:0 0 20px;
    padding:10px 0 8px;
    text-align:center;
  }
  .bing .titleMain{
    margin-bottom:40px;
  }
  .arrowDown{
    background:url(../img/button/arrowWhite.png) no-repeat center center;
    cursor:pointer;
    display:block;
    margin-left:-20px;
    text-indent:-9998px;
    z-index:10;
    
    width:40px;
    height:40px;
    
    position:absolute;
    top:-110px;
    left:50%;
  }


/* boxBing
-------------------------------------------------- */
  #boxBing{
    padding:0 0 20px;
  }
  #boxBing .head{
    background:url(../img/text/headBing.png) no-repeat;
    margin:0 auto 20px;
    text-indent:-9998px;
    
    width:971px;
    height:90px;
  }
  #boxBing .boxDescription{
    margin:0 auto 20px;
    width:1040px;
  }
  #boxBing p {
    color:#1b2d7c;
    font-size:18px;
  }
  #boxBing .listBing{
    background:url(../img/bg/lineRed.png) repeat-y center 0;
    margin:0 auto 20px;
    width:726px;
  }
  #boxBing .listBing ul{
    list-style:none;
    margin:0;
    padding:0;
  }
  #boxBing .listBing li{
    float:left;
    margin:0 15px;
    
    width:333px;
    height:705px;
  }
  #boxBing .listBing .title{
    border-bottom:#1b2d7c 1px solid;
    display:inline-block;
    font-size:28px;
    line-height:28px;
    padding:25px 0 0;
    position:relative;
  }
  #boxBing .listBing .title span{
    font-size:18px;
    font-style:italic;
    position:absolute;
    top:0;
    left:0;
  }
  #boxBing .listBing img{
    display:block;
    width:333px;
  }
  #boxBing .listBing .detail{
    margin:0 10px;
    position:relative;
  }
  #boxBing .listBing .box{
    background:url(http://www.levisthailand.com/lvc/wp-content/themes/roots-master/assets/img/bg/boxRed.png) no-repeat;
    display:block;
    text-indent:-9998px;
    
    width:23px;
    height:21px;
    
    position:absolute;
    top:28px;
    right:-37px;
  }
  #boxBing .shop{
    text-align:center;
  }
  #boxBing .shop a{
    background:#91121d;
    color:#fff;
    display:inline-block;
    font-size:20px;
    margin:0 auto 20px;
    text-align:center;
    padding:5px 10px;
  }
  #boxBing .shop a:hover{
    background:#000;
    text-decoration:none;
  }


/* boxProduct
-------------------------------------------------- */
  .product #content{
    background:url(http://www.levisthailand.com/lvc/wp-content/themes/roots-master/assets/img/bg/lineWhite.png) repeat-y center 0;
    margin-top:-77px;
  }
  #boxProduct {
    position: relative;
    left: 50%;
    margin-left: 25px;
    top: 25px;
    padding: 0;
    width: 430px;
  }

  #boxProduct .btn-close { float: right; margin-top: -37px; }

  #boxProduct p{
    color:#0c0c0c;
    font-size:18px;
    margin:0 0 10px;
  }
  #boxProduct .title{
    border-bottom:#0c0c0c 1px solid;
    color:#0c0c0c;
    font-size:26px;
    margin:0 0 10px;
    padding:0;
    
    width:430px;
  }
  #boxProduct .tabPic{
    margin:0 0 10px;
    position:relative;
  }
  #boxProduct .listThumb{
    list-style:none;
    margin:0;
    padding:0;
    
    height:40px;
  }
  #boxProduct .listThumb li{
    float:left;
    margin:0 10px 0 0;
  }
  #boxProduct .listThumb a{
    display:block;
    position:relative;
  }
  #boxProduct .pic{
    position: absolute;
    top: -65px;
    right: 100%;
    margin-right: 50px;
    width: 95%
  }
  #boxProduct .pic img{
    width: 100%;
    height: auto;
  }
  #boxProduct .pic span{
    background:url(http://www.levisthailand.com/lvc/wp-content/themes/roots-master/assets/img/button/magnifier.png) no-repeat;
    display:block;
    text-indent:-9998px;
    z-index:1;
    
    width:24px;
    height:23px;
    
    position:absolute;
    bottom:20px;
    right:20px;
  }
  #boxProduct .description{
    border-bottom:#0c0c0c 1px solid;
    margin:0 0 20px;
    padding:0 0 10px;
    
    width:430px;
  }
  #boxProduct .infoOther{
    width:430px;
  }
  #boxProduct .boxView,
  #boxProduct .boxDetail{
    float:left;
    margin:0 0 20px;
    
    width:49.5%;
  }
  #boxProduct .boxView p,
  #boxProduct .boxDetail p{}
  #boxProduct .boxView ul,
  #boxProduct .boxDetail ul{
    list-style:none;
    margin:0;
    padding:0;
  }
  #boxProduct .boxView li,
  #boxProduct .boxDetail li{
    float:left;
    margin:0 2px 0 0;
  }
  #boxProduct .boxView img,
  #boxProduct .boxDetail img{
    display:block;
    width:60px;
    height:90px;
  }
  #boxProduct .not-allow-zoom{
    position: absolute;
    top: 84px;
    left: 270px;
    z-index: 1;
    display: none;
  }
  #boxProduct .not-allow-zoom img{
    width: 350px;
    height: auto;
  }


/* popupProduct
-------------------------------------------------- */
  .popupProduct{
    display:none;
    z-index:100;
    
    width:100%;
    position:absolute;
    top:0;
    left:0;
  }
  .popupProduct .pic{
    margin:0;
  }
  .popupProduct .pic img{
    display:block;
    width:100%;
  }
  .popupProduct .close{
    background:url(../img/button/close.png) no-repeat center center;
    cursor:pointer;
    display:block;
    opacity:1;
    text-indent:-9998px;
    
    width:80px;
    height:80px;
    
    position:absolute;
    top:120px;
    right:15%;
  }