@import url('history-template-styles.css'); /* importing styles for HISTORY template */
@import url('athlete-detail-page-template.css');/* athlete detail template */
@import url('wod-template-styles.css');/* World of Dainese detail template */



@media (max-width: 767px) {/* Mobile Styles */
  
  #page-toggle {/* un-hide the page nav dots show */
    display: block;/* TODO: this should just a temp rule. It's overriding a rule in responsive.css (line: 332). Is that rule in that file necessary? Determine then address one of the two. */
  }    
  /* form input on store locator page */
  #locator-form .wpsl-search-input{
    width: 60%;
  }
  .page.store-locator #wpsl-search-input {
    line-height: 1.8;
    width: 60% !important;
  }
  #locator-form .btn[type="submit"] {
    display: inline;
  }
  
  
  #wpsl-result-list #wpsl-stores {/* store results list: removing scroll y at mobile */
    height: auto !important;
  }
  
  
  .wpsl-store-below .wpsl-search + #wpsl-gmap {/* Adding spacing around the Store Locations Google Map */
    margin-left: auto;
    margin-right: auto;
    width: 92%;
  }
  
  
  /* store results list: headings above results */
  #wpsl-result-list .row.locator-hdr .col-sm-4.hdr-store {
    display: inline-block;
    padding-left: 0;
  }
  #wpsl-result-list .row.locator-hdr .col-sm-6.hdr-address {
    display: inline-block;
  }
  #wpsl-result-list .row.locator-hdr .col-sm-2.hdr-contact {
    display: inline-block;
  }
  #wpsl-result-list .row.locator-hdr .col-sm-4.hdr-store h4, 
    #wpsl-result-list .row.locator-hdr .col-sm-6.hdr-address h4, 
  #wpsl-result-list .row.locator-hdr .col-sm-2.hdr-contact h4 {
    border-bottom: 0 none;
    margin-bottom: 0;
  }
}



/* .h-section-slider is a new custom class. Targets the horizontal section sliders */

/* section content slider */
.h-section-slider .slider-pages{
  height: 100vh!important;
}

#store-locator.h-section-slider .slider-pages{
  height: auto!important;	
}
#store-locator.h-section-slider .slider-pages .content{
  height: auto!important;
}
/* Smartphones (portrait and landscape) --r--------- */
@media only screen and (min-width : 320px) and (max-width : 767px), only screen and (min-device-width : 320px) and (max-device-width : 767px) {
  .h-section-slider .slider-pages{
    height: 68vh;
  }
}


.h-section-slider .slider-pages .content{
  height: 100vh!important;
}
@media only screen and (min-width : 320px) and (max-width : 767px), only screen and (min-device-width : 320px) and (max-device-width : 767px) {
  .h-section-slider .content.h-tile {
      background-size: 100%;
  }
}
@media only screen and (max-width: 767px) and (min-width: 320px), only screen and (max-device-width: 767px) and (min-device-width: 320px) {
  .h-section-slider .content, 
    #store-locator.h-section-slider .content{
    background-size: cover;
  }
}
@media only screen and (max-width: 960px) and (min-width: 767px), only screen and (max-device-width: 960px) and (min-device-width: 767px) {
  #store-locator .top-item .sub-head-and-text {
    display: block;
    width: 80%;
  }
}


/* alt slider pages */
.page.athlete.collection .alt-slider-pages img.h-tile{
  overflow: hidden;
  /*width: 100%;*/
  width: auto;
  max-height: 100%;
}

.section-readability-underlay::before {/* this psuedo-element as an underlay colored gradient behind a page section for improved text readability */
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background-color: rgba(0,0,0,0.7);*/
  /*z-index: -1;*/
  opacity: 1;
  -webkit-transition: opacity .2s, background-color .2s;
  transition: opacity .2s, background-color .2s;

  
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.9+100 */
  background: -moz-linear-gradient(bottom,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#e6000000',GradientType=0 );
}






/* 
******

NOTE: 
The base HTML font size is set to 10px. 
But media query em units are based off the browser's internal font-size of 16px 
Because of that media query em units should be based off of 16px.

******
*/

.responsive-presentation-image, 
  .event-page.tile .responsive-presentation-image, 
  .athlete-page.tile .responsive-presentation-image {/* this element fixes spacing issues with titles */
  display: none;
}

.text--hidden-on-desktop {
  display: none;/* *Must be hidden by default. This element is hidden unless manually displayed; it is mobile only. */
}



/* 
***** TOUCHES THESE SIZES:
  330px / 16px = 20.625em 
  399px / 16px = 24.9375em 
  569px / 16px = 35.5625em 
  767px / 16px = 47.9375em 
  959px / 16px = 59.9375em 
******
*/

@media screen and (max-width: 60em)  {/* MQ: MOBILE VERY SMALL thru DESKTOP */
  
  .tech-innovation-page {
    
  }/* /.tech-innovation-page */
  
  
  .page.home-featured-product-section--responsive {
    /* background: none; */
  }
  
  
  /* WOD: World of Dianese */
  .page.wod--landing-page.page-3 {
    min-height: 100vh;
    height: 150vh;
  }
  .page.wod--landing-page.page-3 .content {
    min-height: 100%;
  }
  .page.wod--landing-page.page-3 .text-holder .page-title.center.small-sub {/* fixes shifting left of title on mobile */
    max-width: 100%;
  }
  .page.wod--landing-page.page-3 .text-holder .page-title.center.small-sub .heading-top {/* adding space above heading */
    margin-top: 2rem;
  }
  .page.wod--landing-page.page-3 .text-holder .page-title.center.small-sub .heading-bottom {/* removes negative spacing between heading and copy */
    margin-top: 0;
  }
  
  .tech-innovation-page.experience .content.h-tile .slider-pages .content  { }
  
  .collections-page.tile { }
  
  
  .page.top-slide.video-slide { }/* the top slide with the video */
  
  
  .page.featured-technology-page--responsive .slider-pages .full-vid {/* featured technology */
    top: 11rem;
    object-fit: contain;/* scale the internal contents */
    height: auto;
  }
  .page.featured-technology-page--responsive .slider-pages .page-title {
    top: 4rem;/* 40px / 10px = 4rem */
  }
  .page.featured-technology-page--responsive .slider-pages .page-span-title {
   top: 0; 
  }
  
  .page.shop-the-look-section--responsive { }
  
  .tech-inno--landing-page {  }
  
  
  #page-1.page.page.tech-innov.tech-inno--landing-page.page-1 {/* tech and innovation landing page - page-1 section */
    /*height: 100vh; // was 100vh but much taller than needed on mobile */
    /*height: 76vh; */
  }
   
  #page-6.page.tech-inno--landing-page.page-6 {/* tech and innovation landing page #page-3 and others */
    /* height: 100vh !important; */
    height: auto;
  }
  #page-3.page.tech-inno--landing-page.page-3{
    height: auto;
  }
  
  
  
    .page.shop-the-look-section--responsive .content .page-title, 
    .page.featured-product-section--responsive .page-title, 
    .event-page.tile .page-title, 
    .athlete-page.tile .page-title, 
    .tech-innovation-page.experience .content.h-tile .page-title, 
    #page-9.collections-page.tile .page-title, 
    .tech-innovation-page.page .slider-pages .content .page-title, 
    .page.tech-inno--landing-page .page-title, 
    .page.tech-inno--landing-page.page-6 .page-title, 
    .page.wod--landing-page.page-1 .content.h-tile .heading.heading-moto, 
    .page.wod--landing-page.page-2 .content .page-title, 
    .page.wod--landing-page.page-3 .content .d-scroller-tile.visible > .page-title {
    z-index: 10;/* ensure no titles stack above the site naviation bar */
    top: 4rem;/* 40px / 10px = 4rem */
    font-size: 2rem;/* was 20px | 20px / 10px = 2 */
    max-width: 70%;/* was 70% 185px / 320px = 57.8125% */
    min-width: 50%;/* was 50% */
  }
  
  .page.featured-product-section--responsive .page-title {
    margin-top: 0;
  }
  
  
  .page.home-featured-product-section--responsive .page-title.text--hidden-on-desktop {/* home > featured product title */
    top: 0;
  }
  
  
  .page.featured-product-section--responsive .product--mobile-responsive { }
  
  .page.featured-product-section--responsive .product-details--mobile-responsive { }
  
  
  .athlete-page.tile .navigation {
    display: none;
  }

  
  #page-6.page.experience.athlete-page.tile .content {/* ensure that tile doesn't collapse */
    height: auto;
    min-height: 90vh;
  }
  
  #page-9.collections-page.tile .content {
    background: #000;
  }
  
  .event-page.tile .page-title .heading-top, 
    .athlete-page.tile .page-title .heading-top, 
    .tech-innovation-page.experience .content.h-tile .heading-top {
    text-align: left;
    margin-left: 1.2rem;/* = 22px */
  } 
  .event-page.tile .page-title .heading-top-centered, 
    .athlete-page.tile .page-title .heading-top-centered, 
    .tech-innovation-page.experience .content.h-tile .heading-top-centered {
    text-align: left;
    margin-left: 1.2rem;/* = 22px */
  }
  
  /* technology and innovation landing page */
  .page.tech-inno--landing-page .heading.heading-moto {
    top: -2rem !important;
  }
  
  
  .athelete-page.tile .title-tint, 
    .tech-innovation-page.experience .title-tint, 
    #page-9.collections-page.tile .title-tint, 
    .page.tech-inno--landing-page.page-6 .title-tint, 
    .page.wod--landing-page.page-3 .title-tint {/* SEEN ON ATHELTE PAGE and others */
    display: none;
  }
  
  .page.shop-the-look-section--responsive .content, 
    .event-page.tile .d-scroller-tile.visible, 
    .athlete-page.tile .d-scroller-tile.visible, 
    .tech-innovation-page.experience .content.h-tile, 
    .tech-innovation-page.page .slider-pages .content, 
    .collections-page.tile .d-scroller-tile.visible, 
    .page.tech-inno--landing-page .content.h-tile, 
    #page-3.page.tech-inno--landing-page.page-3 .d-scroller-tile.visible, 
    .page.tech-inno--landing-page.page-6 .d-scroller-tile.visible, 
    .page.wod--landing-page.page-1 .content.h-tile, 
    .page.wod--landing-page.page-2 .content, 
    .page.wod--landing-page.page-3 .d-scroller-tile.visible, 
    .page.wod--landing-page.page-4 .d-scroller-tile.visible {/* the image */
    background-size: contain;
    background-position: right 11rem;
  }
  .page.wod--landing-page.page-2 .content {
    background-position: 0 11rem !important;/* keep this image anchored to the top. (over riding styles from responsive.css) */
  }
  
  .page.shop-the-look-section--responsive .responsive-presentation-image, 
    .event-page.tile .responsive-presentation-image, 
    .athlete-page.tile .responsive-presentation-image, 
    .tech-innovation-page.experience .content.h-tile .responsive-presentation-image, 
    .page.tile.centered-tile.collections-page .d-scroller-tile.visible .responsive-presentation-image, 
    .page.tech-inno--landing-page.page-1 .content.h-tile .responsive-presentation-image,
    .page.tech-inno--landing-page.page-3 .d-scroller-tile.visible .responsive-presentation-image, 
    .page.tech-inno--landing-page.page-6 .responsive-presentation-image, 
    .page.wod--landing-page.page-1 .content.h-tile .responsive-presentation-image, 
    .page.wod--landing-page.page-2 .content .responsive-presentation-image, 
    .page.wod--landing-page.page-3 .responsive-presentation-image {/* this element fixes spacing issues with titles */
    pointer-events: none;
    display: block;
    max-width: 100%;
    height: auto;
  }/* TODO: ONCE THE BANNER ON WORLD OF DIANESE 'STORIES' WORKS WITH PLUGIN ADD THIS RULE TO ENABLE THE RESPONSIVE SPACER GRAPHIC ".page.wod--landing-page.page-4 .responsive-presentation-image" */
  
  .page.shop-the-look-section--responsive .responsive-presentation-image {/* shop the look */
    overflow: hidden;
    /*max-height: 21.875%;*//* restricting the height to allow the elements to flow towards the top of the section */
    max-height: 15rem;
  }
  
  .page.tech-inno--landing-page.page-3 .d-scroller-tile.visible .responsive-presentation-image {
    /*max-height: 28%;*/
  }
  
    
  .page.shop-the-look-section--responsive .responsive-presentation-image img, 
    .event-page.tile .responsive-presentation-image img, 
    .athlete-page.tile .responsive-presentation-image img, 
    .tech-innovation-page.experience .content.h-tile .responsive-presentation-image img, 
    .page.tile.centered-tile.collections-page .d-scroller-tile.visible .responsive-presentation-image img, 
    .page.tech-inno--landing-page.page-1 .content.h-tile .responsive-presentation-image img, 
    .page.tech-inno--landing-page.page-3 .d-scroller-tile.visible .responsive-presentation-image img, 
    .page.tech-inno--landing-page.page-6 .responsive-presentation-image img, 
    .page.wod--landing-page.page-1 .content.h-tile .responsive-presentation-image img, 
    .page.wod--landing-page.page-2 .content .responsive-presentation-image img, 
    .page.wod--landing-page.page-3 .responsive-presentation-image img, 
    .page.wod--landing-page.page-4 .responsive-presentation-image img {
    pointer-events: none;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-top: 11rem;
    margin-bottom: 0;
  }
  
  
  /* shop the look hidden text elements */
  .page.shop-the-look-section--responsive .page-text.page-text-left.text--hidden-on-mobile, 
    .page.wod--landing-page.page-1 .text-body.text--hidden-on-mobile {
    display: none;
  }
  
  /* home page featured product */
  .page.home-featured-product-section--responsive .text--hidden-on-mobile {
    display: none !important;/* hide the desktop only copy elements */
  }
  .page.home-featured-product-section--responsive .product--mobile-responsive {
    width: 100%;
  }
  .page.home-featured-product-section--responsive .product-details--mobile-responsive {
    width: 100%;
  }
  .page.home-featured-product-section--responsive .featured-product-wrapper.info-wrapper {
    margin-top: 0;/* over ride so it flows to top of containing elements */
    margin-left: auto;/* center the product image/interactive elements */
    margin-right: auto;
  }
  .page.home-featured-product-section--responsive .text--hidden-on-desktop {
    display: block;/* show the mobile only copy elements */
  }
  
  
  
  
  /* shop the look cart links */
  .page.shop-the-look-section--responsive .page-text.page-text-right.cart-links {
    left: 5vw;
  }
  
  
  .athlete-page.tile .d-scroller-tile.visible .btt-fade {/* FADE EFFECT: ATHLETE PAGE */
    top: 0;
  }
  .athlete-page.tile .d-scroller-tile.visible .text-holder, 
    #page-9.collections-page.tile .text-holder {/* CTA TEXT: ATHLETE PAGE */
    /*top: -55%;*/
      top: 0;
  }
  #page-9.collections-page.tile .text-holder .page-title.center {
    margin-top: 0 !important;
    margin-left: auto;
    margin-right: auto;
    top: 0;
  }
  #page-9.collections-page.tile .text-holder p.copy {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    width: auto;
  }
  .event-page.tile .d-scroller-tile.visible > div.left, 
    .athelte-page.tile .d-scroller-tile.visible > div.left {
    text-align: left;
  }
  
  .event-page.tile .d-scroller-tile.visible > div.right, 
    .athlete-page.tile .d-scroller-tile.visible > div.right {
    margin-top: -20px;
    width: 100%;
    top: 0;
    left: 0;
    padding-right: 0;
  }
  .event-page.tile .d-scroller-tile.visible .separator, 
    .athlete-page.tile .d-scroller-tile.visible .separator {
    margin-left: 8rem;
  }
  .event-page.tile .d-scroller-tile.visible .separator + p, 
    .athlete-page.tile .d-scroller-tile.visible .separator + p {
    padding-right: 1.5rem;/* = 15px */
  }
  
  
  
  
  .tech-innovation-page.experience .content.h-tile .copy .page-heading {/* technology and innovation */
    margin-top: 0;
  }
  
  .tech-innovation-page.experience .content.h-tile .col-sm-4.col-sm-offset-7 {/* technology and innovation */
    margin-left: 0;
    width: auto;
  }
  .tech-innovation-page.experience .content.h-tile .col-sm-4.col-sm-offset-7 .copy {/* technology and innovation */
    margin-top: 10px !important;
    padding-right: 15px;
  }
  .tech-innovation-page.experience .content.h-tile .col-sm-4.col-sm-offset-7 .copy .page-heading {
    margin-top: 0 !important;
  }
  
  .athlete-page.tile .content .d-scroller-tile.visible .text-holder h1, 
    #page-6.athlete-page.tile .content .d-scroller-tile.visible .text-holder h1 {
    margin-top: 0;
  }
  
  .page.tech-inno--landing-page.page-6 .text-holder .page-title.center {/* tech innovate landing - page 6 section */
    margin-top: 0 !important;
  }
  
  .page.wod--landing-page.page-2 .text-holder .page-title {
    top: -15rem !important;
    position: absolute;
  }

  
  .event-page.tile .d-scroller-tile + .d-scroller-thumbnails-wrapper, 
    .athlete-page.tile .d-scroller-tile + .d-scroller-thumbnails-wrapper, 
    #page-9.collections-page.tile .d-scroller-thumbnails-wrapper, 
    .page.tech-inno--landing-page.page-6 .d-scroller-thumbnails-wrapper, 
    .page.wod--landing-page.page-3 .d-scroller-thumbnails-wrapper, 
    .page.wod--landing-page.page-4 .d-scroller-thumbnails-wrapper {/* thumbnails */
    position: absolute;
    bottom: 0;
    margin-top: 0;
  }
  
  .page.tech-inno--landing-page.page-3 .content .d-scroller-thumbnails-wrapper, 
    .page.tech-inno--landing-page.page-6 .d-scroller-thumbnails-wrapper, 
    .page.wod--landing-page.page-3 .d-scroller-thumbnails-wrapper, 
    .page.wod--landing-page.page-4 .d-scroller-thumbnails-wrapper {
   /*  background: transparent;/* hid the gradient backgroun effect */
  }
  
  .event-page.tile .d-scroller-tile + .d-scroller-thumbnails-wrapper .carousel-left, 
    .athlete-page.tile .d-scroller-tile + .d-scroller-thumbnails-wrapper .carousel-left {
    top: 10px; 
  }
  .event-page.tile .d-scroller-tile + .d-scroller-thumbnails-wrapper .carousel-right, 
    .athlete-page.tile .d-scroller-tile + .d-scroller-thumbnails-wrapper .carousel-right {
    top: 10px; 
  }
  
  .event-page.tile .d-scroller-thumbnails .d-scroller-thumb, 
    .athlete-page.tile .d-scroller-thumbnails .d-scroller-thumb, 
    #page-9.collections-page.tile .d-scroller-thumbnails .d-scroller-thumb, 
    .page.tech-inno--landing-page.page-3 .content .d-scroller-thumbnails-wrapper .d-scroller-thumb, 
    .page.wod--landing-page.page-3 .d-scroller-thumbnails-wrapper .d-scroller-thumb {/* single thumbnail */
    width: 212px;/* fallback */
    width: 21.2rem;
    /* height: 90px; */
  }
  
  
  .event-page.tile .d-scroller-tile.visible h1.title, 
    .athlete-page.tile .d-scroller-tile.visible h1.title {/* the title */
    margin-left: 8rem;
  }
  .event-page.tile .content .d-scroller-tile .left h1, 
    .athlete-page.tile .content .d-scroller-tile .left h1 {/* date number */
    font-size: 4.512rem !important;/* 45.12px / 10px = rem */
    margin-top: 0 !important;
  }
  .event-page.tile .content .d-scroller-tile .left h1.title, 
    .athlete-page.tile .content .d-scroller-tile .left h1.title {
    font-size: 4.512rem !important;/* 45.12px / 10px = rem */
    margin-top: 0 !important;
  }
  .event-page.tile .right .title, 
    .athlete-page.tile .right .title {
    margin-top: 0;
  }
  .event-page.tile .content .d-scroller-tile .left p, 
    .athlete-page.tile .content .d-scroller-tile .left p {
    font-size: 0.943rem !important;/* 9.43px / 10px = 0.943rem */
    margin-top: 0;
  }
  
  
  .tech-innovation-page.experience .h-pagination-wrapper {/* tech and innovation */
    top: 106vh;
  }

  #page-8.page.experience.tech-innovation-page .content {
    min-height: 110vh;
  }

  #page-8 .content .copy p {
    margin: 18px 0 15px 0;
    font-size: 15px;
    padding-left: 20%;
  }
  .tech-inno--landing-page .text-body {/* tech and innovation landing page */
    bottom: -300%;
    position: absolute;
    left: 2rem;  
  }
  .page.tech-inno--landing-page.page-1 .heading.heading-moto .text-body.text--hidden-on-mobile {/* tech and innovation - page 1 section */
    display: none;/* hide the text so that we can show a different text div that's mobile only */
  }
  .page.tech-inno--landing-page.page-1 .text-body.text--hidden-on-desktop {
    display: block;
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: 0;
    left: 0;
    bottom: 0;
    width: auto;
    max-width: 97%;
  }
  
  #page-6.page.tech-inno--landing-page.page-6 .content .text-holder {/* tech innovation landing - Dainese Protection section */
    /*top: -6rem;/* move it to overlap above the banner image */
  }
  
  
  .page.tech-inno--landing-page.page-3 .text-holder .page-title.center, 
    .page.wod--landing-page.page-2 .content  .text-holder .page-title, 
    .page.tech-inno--landing-page.page-6 .content .text-holder .page-title {/* tech and innovation landing: page-3 section */
    margin-top: 0 !important;
    top: 0;
  }
  #page-6.page.tech-inno--landing-page.page-6 .content .text-holder .page-title .heading-top {/* technology innovation landing page */
    margin-bottom: 0;
  }
  
  .page.tech-inno--landing-page.page-3 .text-holder .page-title.center .heading-top {
    text-align: center;
    padding-left: 1.5rem;/* = 15px */
  }
  .page.tech-inno--landing-page.page-3 .text-holder .copy {
    margin-left: 0;
  }
  
  /* World of Dianeses */
  .page.wod--landing-page.page-1 .text-body.text--hidden-on-desktop {
   display: block;
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: 0;
    left: 0;
    bottom: 0;
    width: auto;
    max-width: 97%; 
  }
  
  .page.wod--landing-page.page-3 .text-holder .page-title {/* allows text to flow to the top */
    margin-top: 0;
  }
  .page.wod--landing-page.page-3 .text-holder > p.copy {
    padding-left: 15px;
    padding-right: 15px; 
  }
  
  
  
}/* /MQ: MOBILE VERY SMALL */


/* iphone small form factor mobile phones */
@media screen and (max-width: 20em) and (max-height: 500px) {/* 320px */
  /* World of Dianese */
  .page.wod--landing-page.page-3 {
    height: 180vh;
  }
  .page.wod--landing-page.page-3 .text-holder .page-title.center.small-sub {
    max-width: 100%;
  }
}




/* 400px / 16px = 25em | 569px / 16px = 35.5625em | 767px / 16px = 47.9375em  */
@media screen and (min-width: 25em) and (max-width: 60em) {/* MQ: MOBILE MEDIUM */
  .event-page.tile .page-title, 
    .athlete-page.tile .page-title, 
    .tech-innovation-page.experience .content.h-tile .page-title {
    min-width: 260px;/* fallback */
    min-width: 26rem;
    max-width: 70%;/* was 70% 185px / 320px = 57.8125% */
  }
  .event-page.tile .page-title .heading-top-centered, 
    .athlete-page.tile .page-title .heading-top-centered {
    text-align: center;
  }
    
  .event-page.tile .d-scroller-tile.visible > div.left, 
    .athlete-page.tile .d-scroller-tile.visible > div.left {
    bottom: -20px;
  }
}/* /MQ: MOBILE MEDIUM */





/* 768px / 16px = 48em | 959px / 16px = 59.9375em | 960px / 16px = 60rem */
@media screen and (min-width: 48em) and (max-width: 60em) {/* MQ: TABLET */
  .event-page.tile .d-scroller-tile.visible > div.right, 
    .athlete-page.tile .d-scroller-tile.visible > div.right {
    top: -10rem;/* -100px */
  }
  .event-page.tile .d-scroller-tile.visible > div.left, 
    .athlete-page.tile .d-scroller-tile.visible > div.left {
    bottom: 20px;
  }
  .tech-innovation-page.experience .h-pagination-wrapper {/* tech and innovation */
    top: 85vh
  }
  
  
  /* technology and innovation landing page */
  #page-1.page.page.tech-innov.tech-inno--landing-page.page-1 {/* tech and innovation landing page - page-1 section */  
    height: 85vh;
  }
  .page.tech-inno--landing-page .heading.heading-moto {
    margin-top: 8rem !important;
    top: -2rem !important;
  }
  .tech-inno--landing-page .text-body {/* tech and innovation landing page */
    bottom: -600%;
    position: absolute;
    left: 2rem;  
  }
  
  /* world of Dianese */
  
}





/* 961px / 16px = 60em | 1450px / 16px = 90.625em */
@media screen and (min-width: 60.0625em) and (max-width: 90.625em) {/* MQ: DESKTOP */ 
  .event-page.tile .d-scroller-tile.visible {/* the image */
    /*background-size: contain;*/
  }
}



@media screen and (min-width: 60em) {
  /* ensure button is clickable because product contain elements were covering 75% of the button clickable surface */
  .page.collection.product-page.featured-product.recommended-product .right.col-sm-7 .btn.red {
    position: relative;
    z-index: 10;
  }
}