/* Min width 1100
----------------------------------- */
@media only screen and (min-width:1100px){

  .container { width: 1280px; }

}


/* Max width 1100
----------------------------------- */
@media only screen and (max-width:1100px){

  .container { width: 960px; }

  .icons #content .container, 
  .bing #content .container, 
  .product #content .container{
    padding:0 15px;
    width:auto;
  }
  .product #content{
    background:#fff;
  }
  #boxProduct {
    padding:180px 0 40px 0;
  }
  #boxProduct .title,
  #boxProduct .description{
    width:auto;
  }
  #boxProduct .pic {
    position: relative;
    top: 0;
    left: 0;
  }
  #boxProduct .pic img{
    width:100%;
  }
  #boxProduct .boxView, 
  #boxProduct .boxDetail{
    float:none;
    width:auto;
  }
  #listIcons{
    width:auto;
  }
  #listIcons .box{
    width:190px;
    margin:2px;
  }
  #listIcons .pic img{
    width:190px;
    height:auto;
  }
  #listIcons .pic .back{
    width:190px;
    height:auto;
  }
  #boxBing .head{
    background-position:center 0;
    width:100%;
  }
  #boxBing .boxDescription{
    width:auto;
  }

}


/* Max width 800
----------------------------------- */
@media only screen and (max-width:800px){

  .container { width: 100%; }
  #listIcons .box{
    width:173px;
    margin:2px;
  }
  #listIcons .pic img{
    width:173px;
    height:auto;
  }
  #listIcons .pic .back{
    width:173px;
    height:auto;
  }

}


/* Max width 500
----------------------------------- */
@media only screen and (max-width:500px){

  .container { width: 100%; }

  #header { background: #FFF; }

  #options .filter{
    float:left;
  }
  #listIcons{
    width:100%;
  }
  #listIcons .box{
    width:210px;
    height:410px;
    margin:2px;
  }
  #listIcons .pic img{
    width:210px;
    height:auto;
  }
  #listIcons .pic .back{
    width:210px;
    height:auto;
  }
  #boxBing .listBing{
    background:none;
    width:auto;
  }
  #boxBing .listBing li {
    float: none;
    margin: 0 0 20px;
    width: 100%;
    height:auto;
  }
  #boxBing .listBing img{
    width:100%;
  }
  #boxBing .listBing .box{
    display:none!important;
  }

}


/* Max width 400
----------------------------------- */
@media only screen and (max-width:400px){

  .container { width: 100%; }
  #options .filter li{
    width:30.5%;
  }
  #listIcons .box{
    width:150px;
    height:320px;
    margin:2px;
  }
  #listIcons .pic img{
    width:150px;
    height:auto;
  }
  #listIcons .pic .back{
    width:150px;
    height:auto;
  }

}


/* @ilumin media query
----------------------------------- */

/* Small device (Phone) */
@media (max-width: 767px) and (max-width: 1000px) {

  .stext { background: url('../img/sprite-text-small.png') no-repeat left top; }
  .stext.a-bad-time-in-levis { background-position: 0px 0px; width: 157px; height: 21px; }
  .stext.collection { background-position: -167px 0px; width: 111px; height: 20px; }
  .stext.grew-sweat-shirt { background-position: -288px 0px; width: 172px; height: 20px; }
  .stext.have-you-ever-had { background-position: -470px 0px; width: 223px; height: 25px; }
  .stext.historic-501 { background-position: -703px 0px; width: 170px; height: 138px; }
  .stext.icons { background-position: -883px 0px; width: 116px; height: 65px; }
  .stext.levis-vintage-clothing { background-position: -1009px 0px; width: 305px; height: 11px; }
  .stext.line-443 { background-position: -1324px 0px; width: 222px; height: 1px; }
  .stext.longhorn-shirt { background-position: -1556px 0px; width: 154px; height: 20px; }
  .stext.presents-dash { background-position: -1720px 0px; width: 250px; height: 19px; }
  .stext.presents { background-position: -1980px 0px; width: 70px; height: 10px; }
  .stext.the-historic-501 { background-position: -2060px 0px; width: 188px; height: 28px; }
  .stext.two-pocket { background-position: -2258px 0px; width: 250px; height: 20px; }
  .stext.type-3-trucker-jacket { background-position: -2518px 0px; width: 233px; height: 20px; }
  .stext.welcome-back-to-1973 { background-position: -2761px 0px; width: 304px; height: 45px; }
  .stext.year-1920s { background-position: -3075px 0px; width: 104px; height: 60px; }
  .stext.year-1950s { background-position: -3189px 0px; width: 104px; height: 61px; }
  .stext.year-1960s { background-position: -3303px 0px; width: 104px; height: 60px; }

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

  /* fix img size ... */
  .stext.levis-vintage-clothing {
    -webkit-transform: scale(0.82);
    -moz-transform: scale(0.82);
    -o-transform: scale(0.82);
    transform: scale(0.82);

/*    margin: 0;
    margin-left: -5%;*/
  }

  .page-slider .slides .slide-wrapper { padding-top: 210px; }
  .animate { position: static; margin: 0 !important; width: auto; text-align: center; }
  .animate .stext { margin-bottom: 10px; visibility: visible; }

  .historic-content .slide-main .animate { position: absolute; left: 0; right: 0; top: 50%; margin: -65px 0 0 !important; }
  .main-orange-tab .content-center { top: 200px; left: 0; right: 0; bottom: 0; padding-top: 10px; }

  .container { width: 100%; padding: 10px; }

  #header { background: #FFF !important; }

  .navbar-brand { left: 50%; top: -23px; margin-left: -100px; }
  .navbar-brand {
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
  }

  .orange-exp .link-item .link-background, .orange-exp .link-item .tmp-background {
    width: 150%;
  }

  .navbar-toggle { position: absolute; top: 0; left: 10px; border-color: transparent !important; }

  .section { 
    position: relative; overflow: hidden; width: 100%; 
  }

  body,
  .section,
  .extra-header {  
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
  }

  body { width: 100%; }
  .show-menu .scroll-fixed { margin-left: 0; }
  .show-menu { margin-left: 80%; overflow-x: hidden; }

  /* menu */
  .extra-header .navbar-brand { margin-top: 5px; left: 85px; }
  .extra-header { 
    display: block;
    position: fixed; left: -80%; display: block; top: -10px; bottom: 0; 
    width: 80%; background: #898989;
    box-shadow: inset -5px 0 10px rgba(0,0,0,0.5); 
    padding: 20px 0; height: 100%; 
    max-height: inherit; display: block; 
    box-sizing: content-box;
    overflow: auto; 
  }
  .show-menu .extra-header {
    margin: 0;
    left: 0;
  }

  .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background: #fff;
  }

  .navbar-default .navbar-toggle.active {
    background: #ddd;
  }

  #menu-extra { display: block; margin-top: 60px; margin-left: 20px; margin-right: 0; right: 0; }
  #menu-extra li { border-bottom: solid 1px #9d9d9d; }
  #menu-extra li a { color: #FFF; }
  #menu-extra .dropdown-menu { display: block !important; float: none; position: relative; border-top: 1px solid #9d9d9d; }
  #menu-extra .dropdown-menu li { border: 0; }
  #menu-extra .dropdown-menu li:before,
  #menu-extra .dropdown-menu li:after { content: " "; position: absolute; left: 15px; width: 0; height: 0; border: 3px solid transparent; }
  #menu-extra .dropdown-menu li:before { border-bottom-color: #fff; bottom: 50%; }
  #menu-extra .dropdown-menu li:after { border-top-color: #fff; top: 50%; }
  #menu-extra .dropdown-menu li a { padding: 0 30px !important; background: transparent !important; border: 0 !important; line-height: 30px; }
  #menu-extra .dropdown-menu li a:hover span { border: 0 !important; }
  .dropdown-menu > .active > a span, .dropdown-menu > .active > a:hover span, .dropdown-menu > .active > a:focus span { border: 0; }
  #menu-extra .caret { display: none; }

  .wrap { overflow: scroll; }

  /* fix layout */
  .wrap, body { margin-bottom: 0; }
  .row { margin-left: 0; margin-right: 0; }
  #content { z-index: 1; }
  #footer { height: 140px; position: relative; background: #f3f3f1; z-index: 1; }
  #footer .container { height: 130px; }
  #footer .copy-right { bottom: 0; left: 50%; top: auto; margin-left: -75px; margin-bottom: 0; }
  #footer .nav-footer { left: 0; }
  #footer .navbar-nav { margin: 0; }
  #footer .nav-footer ul { text-align: center; }
  #footer .nav-footer ul li { display: inline; }
  #footer .nav-footer ul li a { display: inline-block; padding: 0 15px; }

  .form-email { position: absolute; top: 50px; left: 50%; margin-left: -140px; width: 280px; }
  .form-email .input-wrapper { margin-left: 0; width: 150px; }

  .navbar, .scroll-fixed { height: 55px; }

  .category .content-hilight,
  .content-hilight { height: 400px; min-height: 400px; overflow: hidden; }
  .content-main { min-height: inherit; }
  .magazine { min-height: inherit; }
  .category .content-main .container { padding-top: 8px; }
  .category-slide { position: relative; height: 400px; }
  .scroll-down { position: absolute; top: auto; bottom: -5px; 
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }

  .magazine-detail { width: auto !important; position: relative; z-index: 1; }

  .zipper .content-main .container { overflow: hidden; padding-top: 0px; }
  .zipper .content-hilight .content-center { position: absolute; height: 200px; bottom: 0; top: inherit; background: #959595; }
  .zipper .content-hilight .content-center .animate { top: 0; left: 50%; 
  }
  .content-hilight .fixed-bg { position: relative; left: 50%; height: 200px; width: auto; margin-left: -200px; }

  .orange-tab .content-hilight { min-height: inherit; height: 400px; background: #959595; }
  .orange-tab .content-hilight .fixed-bg { position: relative; }
  .orange-tab .animate { top: 20px; }
  .orange-exp { position: static; }
  .orange-exp .link-item,
  .orange-exp .link-item:last-child { float: none; width: 100%; height: 200px; }
  .orange-exp .link-item a { padding-top: 35px; }

  .historic-content { position: relative; }
  .historic-navigator { display: none; }
  .historic-content .flex-direction-nav a { position: absolute; top: 50%;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
  }
  .historic-content .historic-thumbnail,
  .historic-content .resize { width: auto !important; height: 100% !important; }
  .historic-content .flex-direction-nav .flex-next { right: 5px; }
  .historic-content .flex-direction-nav .flex-prev { left: 5px; }
  .slide-about .about-thumbnail { display: none; }
  .slide-about .content-detail { margin: 0; left: 0; right: 0; width: auto; top: 0; bottom: 0; padding: 25px 55px 45px; overflow: auto; }
  .slide-historic .btn-shop { bottom: 10px; }
  .view-about, .view-archive { width: 0; 
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
  }
  .view-archive { margin: 0; right: 130px; top: 75%; }
  .view-about { margin: 0; left: 120px; top: 25%;  }

  .slide-about h3 { height: auto; line-height: 30px; margin-top: 10px; }

  .slide-historic .about-content .container { position: absolute; top: 0; margin: 0; padding: 25px 45px 45px; bottom: 0; height: auto; left: 0; right: 0; width: auto; overflow: auto; }
  .slide-historic .about-content .content-data { position: static; }
  .slide-historic .about-content .container .content-about { width: auto; height: auto; }
  .slide-historic .about-content .content-design-detail { margin: 30px 0 0 0; width: auto; }
  .historic-hidden-content .container .btn-back { display: none; }
  .historic-hidden-content .btn-back { margin: 0; right: 10px; bottom: 10px; position: absolute; z-index: 3; }

  .archive-content .container { height: 100%; padding: 25px 45px 45px; margin: 0; }
  .slide-historic .archive-content .modal-content { position: relative; top: 0; left: 0; width: 100%; height: 100%; margin: 0; }
  .archive-item { margin: 0; padding: 0; margin-left: -45px; height: 100%; }
  .archive-item li { margin: 35px 45px 15px; height: 90%; position: relative; }
  .archive-item li .slide-detail { margin-top: -20px; display: block; }
  .archive-item li .slide-thumbnail { width: 100%; height: auto; top: 50%; position: absolute; }
  .slide-historic .modal-content .btn-shop { bottom: -30px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
  }
  .modal-content h5 { margin-left: 0; margin-right: 0; }
  .modal-content .archive-slideshow { position: absolute; top: 30px; bottom: 20px; left: 0; right: 0; }
  .archive-control { left: -35px; bottom: -45px; }
  .archive-control li { margin: 0 5px; }
  .archive-scrollable { width: 100%; height: 100%; }

  #listIcons { margin: 0; }
  #listIcons .name { font-size: 1em; }
  #listIcons .box { width: 48%; }
  #listIcons .pic img { width: 100%; }

  #options { margin: 0; }
  #options .filter { float: none; }
  #options .filter li { width: 25%; margin: 0; }
  #options .filter a { font-size: 1.1em; line-height: 1.8em; }

  .scroll-gradient:before,
  .scroll-gradient:after { content: " "; position: absolute; z-index: 2; left: 0; width: 100%; height: 50px; }
  .scroll-gradient:before { 
    top: 0%; 
    background: -moz-linear-gradient(top, rgba(113,109,108,1) 0%, rgba(113,109,108,1) 20%, rgba(113,109,108,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(113,109,108,1)), color-stop(20%,rgba(113,109,108,1)), color-stop(100%,rgba(113,109,108,0)));
    background: -webkit-linear-gradient(top, rgba(113,109,108,1) 0%,rgba(113,109,108,1) 20%,rgba(113,109,108,0) 100%);
    background: -o-linear-gradient(top, rgba(113,109,108,1) 0%,rgba(113,109,108,1) 20%,rgba(113,109,108,0) 100%);
    background: -ms-linear-gradient(top, rgba(113,109,108,1) 0%,rgba(113,109,108,1) 20%,rgba(113,109,108,0) 100%);
    background: linear-gradient(to bottom, rgba(113,109,108,1) 0%,rgba(113,109,108,1) 20%,rgba(113,109,108,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#716d6c', endColorstr='#00716d6c',GradientType=0 );
  }
  .scroll-gradient:after { 
    bottom: 0%; 
    background: -moz-linear-gradient(top, rgba(113,109,108,0) 0%, rgba(113,109,108,1) 80%, rgba(113,109,108,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(113,109,108,0)), color-stop(80%,rgba(113,109,108,1)), color-stop(100%,rgba(113,109,108,1)));
    background: -webkit-linear-gradient(top, rgba(113,109,108,0) 0%,rgba(113,109,108,1) 80%,rgba(113,109,108,1) 100%);
    background: -o-linear-gradient(top, rgba(113,109,108,0) 0%,rgba(113,109,108,1) 80%,rgba(113,109,108,1) 100%);
    background: -ms-linear-gradient(top, rgba(113,109,108,0) 0%,rgba(113,109,108,1) 80%,rgba(113,109,108,1) 100%);
    background: linear-gradient(to bottom, rgba(113,109,108,0) 0%,rgba(113,109,108,1) 80%,rgba(113,109,108,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00716d6c', endColorstr='#716d6c',GradientType=0 );
  }

  /* detail page */
  .green-bg { display: none; }
  #boxProduct { padding: 30px 0; margin: 0; position: static; width: 100%; }
  #boxProduct .btn-close { position: absolute; right: 10px; top: 60px; }
  #boxProduct .title { margin-bottom: 20px; border-bottom: 0; }
  #boxProduct .tabPic { margin: 0; }
  #boxProduct .description { margin: 20px 40px; border-top: solid 1px #0c0c0c; padding: 20px 0; }
  #boxProduct .infoOther { margin: 0 40px; width: auto; }
  #boxProduct .listThumb { margin: 0 40px; }
  #boxBing .boxDescription { padding: 20px; }
  .feature-image { position: static; padding: 0; margin: 0 0 20px; width: 100%; }
  .feature-image .zoom { display: none; }
  .fb-share { position: static; }

  #boxBing .listBing .detail { margin: 0 20px; }

  /* scale */
  .animate { 
    top: 235px; left: 46%; margin-top: 0 !important;
  }
  .category .animate { top: 185px; }

  /* page slider */
  .page-slider { height: 400px; }
  .page-slider .slides > li .slide-bg.resize { top: 0; left: 0; width: auto !important; height: 200px !important; margin-left: 0 !important; }
  .page-slider .flex-control-nav { top: 200px; right: 0; }
  .slide-item { background: #959595; }
  .slide-wrapper .detail { 
    height: auto; 
    top: 300px; bottom: 0; left: 0; 
    padding: 20px 30px; 
    background: transparent; 
    visibility: visible;
    position: static;
  }

  /* remove fixed position */
  .scroll-fixed { position: relative; }
  .page-slider { position: relative; }

  .nav-header .navbar-nav > li > a { height: 30px; line-height: 30px; }
  .dropdown-menu { padding: 0; }
  .category-slide .slide-wrapper .detail { padding-top: 0px; }
  #boxProduct .boxView, #boxProduct .boxDetail { margin-top: 10px; }
}