/*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: 310px !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;
}

#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-dcg-splitter-series-redesign-video-still-mobile.png?context=bWFzdGVyfHJvb3R8MjQ5NTc3fGltYWdlL3BuZ3xoNDIvaGZhLzk3MTA0MDQ5OTMwNTQucG5nfGRiNzcxYjI5Zjk4MzdjNTE2YTcxOTdiZWI1OWIwODEwYTc4NTZhZGYzOWYyNmJmNmRhZmRkZTdlZmY2YjQ4Y2U");
    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;
  }
}
