/*dcg-splitter-series-redesign*/

/********* General *********/

.breadcrumb-wrapper {
    z-index: 99;
  }
  
  #seriesRedesignPage>div.series-hero-section {
    max-width: 1920px;
    margin: 0 auto;
  }
  
  p.heroRedesign_compareBox {
    display: none;
  }
  
  p.heroSectionContent-headLine {
    font-size: 2.6em;
  }
  p.heroSectionContent-SubHeading {
    font-size: 1.8em;
  }
  p.heroSectionContent-text {
    font-size: 1em;
  }
  
  @media only screen and (max-width: 64em) {
    p.heroSectionContent-headLine {
      font-size: 2.4em !important;
    }
    p.heroSectionContent-SubHeading {
      font-size: 1.5em !important;
    }
  }
  
  #seriesRedesignPage #compareSection {
    display: none;
  }
  
  
  
  /********* Component 1 *********/
  
  #backgrounImageLayout:nth-of-type(2) .heroSectionContent-headLine {
    margin-bottom: 0.3em;
  }
  
  #backgrounImageLayout {
    background-color: #323f48 !important;
  }
  
  @media only screen and (min-width: 53em) {
    #backgrounImageLayout div div.heroContentWrapper.leftImageAlign div {
      padding: 1em 2em 1em 5em;
    }
  }
  
  @media screen and (max-width: 53em) {
  
    #backgrounImageLayout:nth-of-type(2) .heroBackgroundImage {
      display:none;
    }
  
    #backgrounImageLayout:nth-of-type(2) .heroContentWrapper{
      width: 90%;
      padding: 8em 0 1em 0;
    }
  }
  
  @media (min-width:30em) and (max-width: 53em) {
  
    #backgrounImageLayout:nth-of-type(2) .heroSectionContent-headLine, .heroSectionContent-SubHeading, .heroSectionContent-text {
      text-align: left;
    }
  
  }
  
  /********* Component 2 *********/
  
  p.systemsinfo-espot-heading {
    line-height: 1 !important;
  }
  
  #espotMediaWrapperDCG {
    min-height: 340px !important;
  }
  
  .espotMediaItem {
    transition-duration: 0.3s;
  }
  
  .espotMediaItem:hover {
      -ms-transform: scale(1.04); /* IE 9 */
      -webkit-transform: scale(1.04); /* Safari 3-8 */
    transform: scale(1.04);
  }
  
  /********* Component 3 *********/
  
  #triggeredVideoLayout #triggeredBackground, #triggeredVideoLayout #triggeredBackground img {
    height: 100%;
    object-fit: cover;
    /* Update to fit image*/
    width: 100%;
  }
  
  #triggeredWrapper > div > div > p {
    display: none !important;
  }
  
  .series-watchVideo {
    border-radius: 2px;
  }
  
  @media (max-width: 850px) {
    #triggeredVideoLayout #triggeredBackground {
      display: none;
    }
    #triggeredWrapper {
      height: 450px;
      background-image: url("/medias/ww-kickoff-dcg-mobile.PNG?context=bWFzdGVyfHJvb3R8NDA0MDA0fGltYWdlL3BuZ3xoNTIvaGZiLzk5MTg3Nzg4MzQ5NzQucG5nfDVlYTE1MmRkYTU3YmJhY2ZlZDhlNDEzMzNkZjlkZWI1ZjBhZjRkMzJhM2I0MzFjMDZlNDAxMWE3ZTZiNGFjM2Y");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    #triggeredWrapper>div {
      position: relative;
      top: 20%;
    }
    #triggeredVideoLayout #triggeredWrapper>div>p.heroSectionContent-headLine {
      width: 100%;
      font-size: 4.75vw;
    }
  }
  
  /********* Component 4 *********/
  
  #backgrounImageLayout:nth-of-type(6) .heroSectionContent-headLine {
    font-size: 2.3em;
  }
  
  #backgrounImageLayout:nth-of-type(6) .heroSectionContent-Quote {
    font-size: 1.8em;
  }
  
  span.hero-quote-source {
    font-size: .5em;
    font-weight: 400;
  }
  
  @media only screen and (max-width: 53.125em) {
    #backgrounImageLayout:nth-of-type(6) .heroSectionContent-Quote {
      font-size: 1.4em;
    }
    #backgrounImageLayout:nth-of-type(6) .heroSectionContent-headLine {
      font-size: 2.4em;
    }
  }
  
  @media (min-width:53.125em) {
    #backgrounImageLayout:nth-of-type(6) .heroSectionContent-headLine {
      position: relative;
      top: 3.4em;
    }
    #backgrounImageLayout:nth-of-type(6) .heroSectionContent-Quote{
       position: relative;
       top: -4.5em;
     }
  }
  
  /*********** Alliances ************/
  
  #imageTextSideBySideLayout div div.heroSection-mediaItem.rightAlign img {
    object-fit: cover;
  }
  
  
  /********* lenovo services *********/
  
  #imageTextSideBySideLayout div div.heroSection-mediaItem.leftAlign img {
    object-fit: cover;
  }
  
  #imageTextSideBySideLayout:nth-of-type(7) .heroSectionContent-subHeading {
    font-weight: 300;
    font-size: 1.6em;
    line-height: 1.2em;
    position: relative;
    top:-1.0em;
  }
  
  @media screen and (max-width: 53.125em) {
    .heroSectionContent-subHeading {
      text-align: center;
    }
  }