/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px), only screen and (min-width : 768px) and (max-width : 1024px) {

  /* red slides
    ------------ */

  .red-slide .heading{
    font-size: 35px !important;
    max-width: 400px !important;
  }
  #page-1 .heading .heading-top{
    margin-bottom:-10px !important;
  }
  #page-1 .heading .heading-bottom{
    margin-top: -6px !important;
  }
  .red-slide .text-body{
    margin-top: 80px !important;
  }
}

/* Smartphones (portrait and landscape) --r--------- */
@media only screen and (min-width : 320px) and (max-width : 992px), only screen and (min-device-width : 320px) and (max-device-width : 992px) {
  /* header
    ------------ */
    .content {background-size: cover !important;}
    #page-3 .content .page-text-left {display: none !important;}
    .product--mobile-responsive {top: 20% !important;}
    .panel-arrows-controller .panel-left-arrow, .panel-arrows-controller .panel-right-arrow {top: 175px;}
    .product-details--mobile-responsive {top: 20% !important;}
    #page-1.page.wod--landing-page.page-1{
      height: auto;
    }
    #page-1.page.wod--landing-page.page-1 .content.h-tile{
      position: static;
    }
    #page-1.page.wod--landing-page.page-1, #page-3.page.wod--landing-page.page-3{
      margin-bottom: 30px;
    }

    #page-3.page.wod--landing-page.page-3{
      height: auto;
    }
    #page-3.page.wod--landing-page.page-3 .content {
      height: auto;
    }
    #page-3.page.wod--landing-page.page-3 .content.h-tile{
      position: static;
    }
    #page-3.page.wod--landing-page.page-3 .d-scroller-thumbnails-wrapper{
      position: static;
      margin-top: 10px;
    }

    #page-4.page.wod--landing-page.page-4.centered-tile .page-title.small-sub{
      margin-top: 52vh !important;
    }
    #page-4.page.wod--landing-page.page-4.centered-tile .page-title.small-sub .heading-top{
      margin-bottom: 0 !important;
    }
    #page-4.page.wod--landing-page.page-4{
      height: 90vh !important;
    }

    .page.wod .content .page-title:not(.center){
      /*margin-top: -10%;*/
      min-width: 200px !important;
    }

    #page-3.page.wod--landing-page.page-3 #d-scroll-tile-1{
      position: static;
    }
    #page-3.page.wod--landing-page.page-3 #d-scroll-tile-2{
      position: static;
    }

    .page.detail-page-header.detail-page .page-title.center.small-sub {
      margin-top: 45vh !important;
    }
    .isolated-thumbs .d-scroller-thumbnails-wrapper{
      margin-top: 0;
    }
    .page.tech-innov.tile.centered-tile.tech-inno--landing-page.page-3,  .page.tech-innov.tile.centered-tile.tech-inno--landing-page.page-6{
        height: auto !important;
    }
    .page.tech-inno--landing-page.page-6 .content .d-scroller-thumbnails-wrapper{
        position: static !important;
    }

    .tech-inno--landing-page.page-3 .d-scroller-tile, .tech-inno--landing-page.page-6 .d-scroller-tile{
      height:auto;
      position: static;
    }

    #page-2.store-detail{
      min-height: 0 !important;
    }
    .page-title.center.small-sub{
      margin: 0 auto;
    }
    .page-title.center.small-sub .heading-top{
      font-size: 25px;
      margin-bottom: 20px;
    }
    .page-title.center.small-sub .heading-bottom{
      font-size: 20px;
    }
    .page-title .heading-top{
      /*line-height: 30px;*/
      margin-bottom: 2px;
    }
    .page-title .heading-bottom{
      margin-left: 10px;
    }
  #page-toggle{
    display:none !important;
    right: 0px;
  }
  #page-1.page.dair_system{
    height: auto;
  }
  #page-1.dair_system .page-title.page-header{
    top:12vh !important;
  }
  #page-3.dair_system .page-title{
    top:8vh !important;
  }
  .dair_system .page-title .heading-top{
    padding-left: 18px;
    font-size: 24px !important;
  }
  .dair_system .page-title .heading-bottom{
    font-size: 24px !important;
  }
  .page.dair_system .page-title{
    max-width: 90% !important;
  }
  .dair_system#page-1 .content {
    background-position: 0 150px !important;
    margin-top: 0;
    padding-bottom: 85% !important;
  }
  .dair_system .main-copy{
    font-size: 12px;
  }
  .dair_logo{
    margin-top: 15px;
    margin-bottom: -8%;
  }
  .dair_logo object {
    width: 187 !important; 
    height: 82px !important;
    padding-top: 0px;
  }
  .hex_number object{
      width: 70px;
      height: 62px;
  }  
  .hex_text{
    font-size: 12px;
    width: 65%;
  }
  .efficiency_text{
    font-size: 12px;
    width: 90%;
  }
  .hex-container .row{
    margin: 0px;
  }
  .why-different{
    margin-top: 160px;
  }
  .why-different object{
    width: 95%;
  }
  .efficiency_chart object{
    width: 95%;
  }
  .research_chart object{
    width: 95%;
  }
  .research_year_chart object{
    width: 95%;
  }
  .page.detail-page .page-title{
    top: 0;
    margin-top: 30px !important;
  }
  .detail-page .title-tint{
    margin-top: 40px;
  }
  .detail-page .title-tint img{
    width:300px;
  }
  .detail-page .btt-full-fade{
    display: block;
  }
  .carousel-left, .carousel-right{
    display: none;
  }
  .d-scroller-thumbnails .d-scroller-thumb{
      margin: 0 -25px;
  }
  #logo-dainese{
    left: 86px!important;
  }
  
  #page-1.page{
    height:100vh;
  }
  #page-6.page.experience, #page-9.page.wod{
    height: auto;
  }

  #page-6.page.experience .content, #page-9.page.wod .content{
    height: auto;
  }
  #page-4.page.experience{
    height: 130vh;
  }
  #page-8.page.experience{
    height: 68vh;
  }
  
  #page-3 .content .page-text-left{
    margin-top: 75% !important;
  }
  .threesixty .threesixty_images{
    margin: 0 auto;
    text-align: center;
  }
  .threesixty .threesixty_images img{
    width: 84% !important;
    left:6%;
  }
  .biker-wrapper.info-wrapper.back{
    margin: 0 !important;
    width: 100% !important;
    border: none;
  }
  .threesixty.bikelooks{
    width: 100% !important;
  }
  .d-scroller-tile{
    /* background-size: auto; */
  }
  #page-8 .content.h-tile{
    background-size: 100%; 
  }
  #page-8 .content .copy .page-heading{
    margin-top: 75%;
  }
  /* .btt-fade, */
  .ltr-fade, .rtl-fade, .btt-full-fade{
    display: none;
  }
  .d-scroller-thumbnails-wrapper{
    position: static;
    margin-top: 90%;
  }
  .page.wod .d-scroller-thumbnails-wrapper{
    margin-top: 120%;
  }
  .page.wod.immersive-experience .d-scroller-thumbnails-wrapper{
    margin-top: 0px;
    bottom: 0;
    position: absolute;
  }
  
  .header-logo-left{
    margin-top: 15px;
  }
  .header-logo-left img{
    height: 30px!important;
  }
  .apply-overlay.container{
    padding-left: 0;
    padding-right: 0;
  }
  .apply-container.container{
    padding-left: 5px;
    padding-right: 5px;
  }
  .jspVerticalBar{
    width: 0;
  }
  
  .full-vid{
    object-fit:fill;
    width:120%;
    margin-left: -10%;
  }
  .full-vid video{
    object-fit:fill;
  }
  #media-th-mdcezB{
    margin-top: 35%;
    height: auto;
  }
  #page-2 .content .page-span-title{
    top: 70vh;
  }
  .dainese-range-slider-wrapper{
      bottom: 35vh;
  }
  #page-3 .content .biker-wrapper .dir-btn-left{
    left:20px !important;
  }
  #page-3 .content .biker-wrapper .dir-btn-right{
    right: 20px !important;
  }
  #page-3 .content .biker-wrapper .dir-btn{
    top:0;
    margin-top: 80%;
  }
  #page-1.careers{
    position: relative;
    width: 100%;
    /*padding-bottom: 65.5%;*/
    height: auto;

    margin-top: 270px;
  }
  #page-1.careers .slider-pages{
     position: relative;
    width: 100%;
    padding-bottom: 60.5%;
    height: auto;
    margin-top: 130px;

  }
  #page-1.careers .slider-pages .content{
    margin-top: 0;
  }
  .page.collection .jobs .title{
    font-size: 16px;
    text-transform: uppercase;
  }
  #page-1.careers .content{
    position: absolute;
    top:0;
    background-size: 100%;
    margin-top: 60px;
    width:100%;
    height: 100%;
    overflow: visible;
  }
  #page-1.careers .content .page-title{
    position: absolute;
    top:0;
    margin-top: -100px;
  }
  .page.collection .jobs .position.col-sm-4.col-sm-offset-1 a{
    padding-left: 15px;
    font-style: italic;
    font-size: 16px;
  }
  .page.collection .jobs .position.col-sm-7{
    border-bottom: none;
    margin-bottom: 0;
    margin-top: 10px;
    background-image: url('../img/list_arrow.png');
    background-position: right center;
    background-repeat: no-repeat;
  }
  .page.collection .jobs .position.col-sm-7 a{
      font-family: 'Proxima Nova Bold', serif;
      font-size: 15px !important;
    }
 #job-spinner{
    display: block;
    text-align: center;
    margin: 0 auto;
    margin-top: 120px;
  }
  #position-detail{
    margin-top: 60px;
  }
    #page-2 .job-detail{
      display: block;
      margin-left: 100%;
      position: fixed;
      top:0px;
      padding-top: 0px;
      width:100%;
      height:100%;
      background-color: #000;
      z-index: 100;
    }
    #job-expander{
      height: 100vh;
    }
    .job_listing{
      padding-top: 100px;
    }
    .job_listing h2{
      font-size: 20px;
    }

    #page-2.careers .page-title{
        top:0 !important;
        margin: 30px;
        margin-left: 0 !important;
        margin-top: 30px;
    }
    .position-title{
      top:100px;
      margin-top: 80px;
    }
    .inner-detail{
      height: calc(100% - 20px);
      overflow-y: auto;
    }
    .detail-scroll{
      position: relative;
    }
    #close-position{
      margin-top: 70px;
    }
    .apply-cta{
      top:40px;
    }

  /* footer
    ------------ */
  footer .top .img-responsive, footer .top .learn-more-btn{
    float: none;
    display: block;
    margin: 0 auto;
  }
  footer .top .learn-more-btn{
    text-align: center;
    margin-top: 30px;
  }
  footer .bottom .menu-container{
    width: 90%;
    margin: 0 auto;
    padding-bottom: 10px;
    border-bottom: 3px solid #333;
    margin-bottom: 10px;
  }
  footer .bottom .menu-container .sub-menu{
    display: none;
  }
  footer .foot {
    display: none;
  }

  .page-title{
    top: 12vh;/* TODO: removing the !important so the titles can be re-built */
    font-size: 20px;/* TODO: removing the !important so the titles can be re-built */
    max-width: 70%;/* TODO: removing the !important so the titles can be re-built */
    min-width: 50%;/* TODO: removing the !important so the titles can be re-built */
  }
  #page-toggle{
    display: none;
  }

  /* red slides
    ------------ */
  .red-slide .content{
    height: calc(100% - 60px)!important;
    margin-top: 60px!important;
  }
  .red-slide .heading{
    font-size: 30px!important;
    max-width: 90%!important;
    top: 25%!important;
    margin-top: 0%
  }
  .red-slide .heading .heading-top{
    margin-bottom:-8px!important;
    padding: 0 20px!important;
  }
  .red-slide .heading .heading-bottom{
    padding: 0 20px!important;
    margin-top: -6px!important;
  }
  .red-slide .heading .text-body{
    margin: 20px 0 0 15%!important;
    /*font-size: 14px!important;*/
    max-width: 80%!important;
    line-height: 26px!important;
    float: none!important;
  }

  /* featured tech
    ------------ */
  .featured-tech .heading-top{
    margin-bottom: -5px!important;
  }
  .featured-tech .page-span-title h1{
    font-size: 24px!important;
  }
  .featured-tech .page-span-title h3{
    font-size: 14px!important;
    margin-top: 4px!important;
  }

  /* featured tech
    ------------ */
  .look{
    height: auto!important;
  }
  .look .content{
    height: 100%!important;
    padding-bottom: 40px;
  }
  .look .page-text{
    width:auto!important;
  }
  .look .info-wrapper{
    position: relative!important;
    left: 0!important;
    width: 60%!important;
    height: 350px!important;
    margin: 160px auto 0 auto!important;
    background-size: contain!important;
    background-position: center bottom!important;
    border-bottom: 3px solid #fff;
  }
  .look .page-text-left{
    position: static!important;
    left: 0!important;
    width: 90%!important;
    margin: 34px auto!important;
  }
  .look .page-text .page-text-title{
    font-size: 22px!important;
  }
  .look .page-text-left p{
    position: static!important;
    width: 90%!important;
  }
  .look .page-text-right{
    position: static!important;
    width: 100%!important;
    text-align: center!important;
    right:0!important;
  }

  /* featured product
    ------------ */
  .featured-product{
    height: auto;
    padding-bottom: 20px;
  }
  .featured-product.experience{
    height: 180vh;
  }
  .featured-product .content{
    height: 100%;
  }
  .featured-product .content .left, .featured-product .content .right{
    float: none;
    display: block;
  }
  .featured-product .h-arrow{
    top: 24%;
  }
  .featured-product .info-wrapper{
    position: relative!important;
    left: 0!important;
    top: 0!important;
    width: 90%!important;
    height: 300px!important;
    margin: 40px auto 0 auto!important;
    background-size: contain!important;
    background-position: center bottom!important;
  }
  .featured-product .page-title{
    margin: 30px 0 0 0 !important;
    max-width: 90%!important;
  }
  .featured-product .page-title .heading-top{
    margin-left: 0!important;
    padding-left: 17px;
  }
  .featured-product .right h1.heading{
    font-size: 36px!important;
  }

  .recommended-product .page-title{
    width: 5px;
  }
  .recommended-product .page-title .heading-top{
    font-size: 12px;
    margin-bottom: 2px;
    max-width: 80%
  }
  .page.collection.product-page .page-title .separator {
    width: 90%;
  }
  .page.collection.product-page .page-title .heading-bottom {
    font-size: 24px!important;
    max-width: 80%;
    margin-top: 2px;
    margin-bottom: 16px;
  }
  .recommended-product .entry{
    margin: 0 0 20px 0!important;
  }

  /* trending
    ------------ */
  .trending{
    height: auto;
  }
  .trending .content{
    height: auto;
    padding-top:120px;
    padding-bottom:20px;
  }
  .trending .content .column{
    display: block;
  }
  .trending .content .column .media-container{
    margin-top: 0!important;
    height: auto!important;
  }
  .trending .content .column .media-container .social-media{
    position: static!important;
  }

  /* tiles
    ------------ */
  .tile .content .d-scroller-tile h1 {
    font-size: 30px!important;
  }

  /* event tiles
    ------------ */
  .tile.event-page .content .d-scroller-tile .left h1{
    margin-top: 130px!important;
    font-size: 40px!important;
  }
  .tile.event-page .content .d-scroller-tile .left p{
    margin-top: -2px;
    font-size: 16px!important;
  }
  .tile.event-page .content .d-scroller-tile .right .title{
    margin-top: -50px!important;
    font-size: 24px!important;
  }
  .tile.event-page .content .d-scroller-tile .right p{
    /* font-size: 14px!important; */
    line-height: 18px!important;
  }

  /* centered tiles
    ------------ */
  .centered-tile {
    height: 130vh!important;
  }
  .centered-tile .content{
    height: 100%!important;
    background-position: center!important;
  }
  .centered-tile .page-title.center{
    margin: 23vh 0 0 0!important;
    min-width: 0!important;
    max-width: 100%!important;
    width: 100%!important;
    position: static!important;
  }
  .centered-tile .page-title.small-sub{
    margin-top: 40vh!important;
  }
  .centered-tile .page-title.small-sub .heading-top{
    margin-bottom: 30px!important;
  }
  .centered-tile .copy{
    text-align: center!important;
  }
  .centered-tile-empty .page-title.center{
    margin-top: 44vh!important;
  }
  #page-6.tech-innov .page-title.center .heading-bottom{
    /*margin-top: 13px!important; */
  }
  #page-4.wod .page-title.center .heading-bottom{
    margin-top: 4px!important;
  }
  #page-4.wod .copy{
    width: 90%!important;
    margin: 0 auto!important;
  }

  /* plugins
    ------------ */
  .h-page{
    width: 20%!important;
  }
  .dainese-range-slider{
    width:50%!important;
  }

  /* navigation
    ------------ */
  header, nav{
    z-index: 9999;
  }
  #logo-dainese{
    width: 120px;
    left: 106px;
    top: 25px;
  }
  #logo-dn, #logo-agv{
    height: 40px;
    width: auto;
  }
  .header-logo-left{
    margin-top: 11px;
  }
  #header-top{
    display: none;
  }
  header{
    position: fixed;
    top: 0;
    left: 0;
    height: 60px;
  }
  #nav-toggle{
    border-bottom-width: 60px;
    border-right-width: 40px;
    width: 90px;
  }
  #nav-toggle a{
    margin-top: 17px;
    margin-left: 19px;
  }
  nav{
    height: 0;
  }
  .header-menu-mobile{
    height: calc(100% - 60px);
    width: 100%;
    background-color: #333;
    background: #333333;
    background: -moz-linear-gradient(top,  #333333 0%, #181818 8%);
    background: -webkit-linear-gradient(top,  #333333 0%,#181818 8%);
    background: linear-gradient(to bottom,  #333333 0%,#181818 8%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#181818',GradientType=0 );
    position: fixed;
    top: 60px;
    left: 0;
    padding-top: 30px;
  }
  .header-menu-mobile-inner{
    transition: transform .2s;
  }
  .header-menu-mobile .back{
    color: #fff;
    font-size: 12px;
    font-family: 'Proxima Nova Bold', sans-serif;
    margin-left: 7.5%;
  }
  .header-menu-mobile a{
    padding: 16px 0;
  }
  .header-menu-mobile .menu-item-has-children a:after{
    font-family: "Glyphicons Halflings";
    content: "\e258";
    color: #fff;
    float: right;
    font-size: 14px;
  }
  .header-menu-mobile ul{
    margin: 0;
    padding: 0;
    width: 100%;
  }
  .header-menu-mobile ul li{
    display: block;
    width: 100%;
    margin: 0 auto;
  }
  .header-menu-mobile ul li a{
    width: 85%;
    border-bottom: 1px solid #444;
    margin: 0 auto;
  }
  .header-menu-mobile ul li .sub-menu{
    display: block!important;
    position: absolute;
    left: 100%;
    width: 100%;
    top: 0;
  }
  .header-menu-mobile .sub-menu li{
    display: block!important;
  }
  .header-menu-mobile .sub-menu li a{
    width: 85%;
    margin: 0 auto;
  }
  .header-menu-mobile .sub-menu li a:before{
    width:30px;
  }
  .nodesktop{
    display: block;
  }
  .nomobile{
    display: none;
  }
}