/* Main container */
#cloudsteppers {
  margin: 0 auto;
  max-width: 1440px;
  text-align: center;
  /* Styling for image/ product boxes */ }
  #cloudsteppers p {
    font-family: Lato-light, "lato", Arial, sans-serif; }
  #cloudsteppers .upper {
    text-transform: uppercase; }
  #cloudsteppers div {
    margin: 0 auto; }
  #cloudsteppers .left {
    width: 50%;
    float: left; }
  #cloudsteppers .right {
    width: 50%;
    float: right; }
  @media all and (max-width: 720px) {
    #cloudsteppers .left,
    #cloudsteppers .right {
      width: auto;
      float: none; } }
  #cloudsteppers .intro-container h1 {
    height: 270px; }
  #cloudsteppers .intro-container img {
    margin: 3em; }
    @media all and (max-width: 480px) {
      #cloudsteppers .intro-container img {
        margin: 1.5em 0;
        width: 90vw;
        max-width: 320px; } }
  #cloudsteppers .intro-container p {
    margin: 0 auto;
    display: block;
    max-width: 80vw;
    font-size: 30px;
    letter-spacing: 0.2em;
    color: #56799c; }
    @media all and (max-width: 1485px) {
      #cloudsteppers .intro-container p {
        font-size: 30px; } }
    @media all and (max-width: 720px) {
      #cloudsteppers .intro-container p {
        font-size: 24px;
        letter-spacing: 0.1em; } }
    @media all and (max-width: 320px) {
      #cloudsteppers .intro-container p {
        font-size: 18px; } }
  #cloudsteppers .video-container {
    margin: 5em auto 1em;
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; }
    #cloudsteppers .video-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      max-width: 100%;
      height: 100%; }
  #cloudsteppers .sub-prod-container,
  #cloudsteppers .main-prod-container {
    margin: 0 auto;
    max-width: 1440px; }
    @media all and (max-width: 720px) {
      #cloudsteppers .sub-prod-container,
      #cloudsteppers .main-prod-container {
        display: block; }
        #cloudsteppers .sub-prod-container .img-box,
        #cloudsteppers .main-prod-container .img-box {
          margin-bottom: 1.75em; } }
  #cloudsteppers .img-box {
    display: inline-block; }
    #cloudsteppers .img-box a:not(.btn-shop) {
      display: block; }
    #cloudsteppers .img-box img {
      margin-bottom: 0.75em;
      width: 100%;
      max-width: 320px; }
      @media all and (max-width: 480px) {
        #cloudsteppers .img-box img {
          width: 90vw; } }
    #cloudsteppers .img-box .text-box {
      margin: 0 auto 3em; }
      @media all and (max-width: 720px) {
        #cloudsteppers .img-box .text-box {
          margin: 0 auto; } }
      #cloudsteppers .img-box .text-box p {
        margin: 0;
        text-transform: uppercase; }
        #cloudsteppers .img-box .text-box p:first-of-type {
          font-weight: bolder;
          color: #002235;
          font-size: 33.33px; }
        #cloudsteppers .img-box .text-box p:nth-child(even) {
          margin-top: -0.4em;
          color: #22b8e8;
          font-size: 22.22px; }
        @media all and (max-width: 720px) {
          #cloudsteppers .img-box .text-box p {
            font-size: 23.331px; }
            #cloudsteppers .img-box .text-box p:nth-child(even) {
              font-size: 19.998px; } }
  #cloudsteppers .img-box.top {
    margin-bottom: 1.5em; }
  #cloudsteppers .main-prod-container {
    margin: 3em auto; }
    @media all and (max-width: 720px) {
      #cloudsteppers .main-prod-container {
        margin: 4em auto 0;
        display: block; } }
    @media all and (max-width: 480px) {
      #cloudsteppers .main-prod-container {
        margin: 2em auto 0; } }
  #cloudsteppers a.btn-shop {
    padding: 0.6em 5em;
    border: 1px solid #818c8e;
    border-radius: 6px;
    font-size: 20px;
    text-transform: uppercase;
    color: #333333;
    cursor: pointer;
    -webkit-transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    -o-transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); }
    @media all and (max-width: 720px) {
      #cloudsteppers a.btn-shop {
        padding: 0.6em 0;
        margin: 2em auto;
        display: block;
        width: 90vw; } }
    #cloudsteppers a.btn-shop:hover, #cloudsteppers a.btn-shop:focus {
      background: #56799c;
      color: white;
      border: 1px solid #56799c;
      box-shadow: 2px 4px 9px -2px #000; }
  #cloudsteppers .carousel-container {
    margin: 4.5em 0 5em;
    padding: 0.1em 0;
    background: #f7f9fa; }
    #cloudsteppers .carousel-container .carousel {
      padding: 0.3em;
      margin: 2em 0; }
      #cloudsteppers .carousel-container .carousel .slick-arrow {
        top: 40%;
        padding: 20px; }
      #cloudsteppers .carousel-container .carousel .slick-prev {
        z-index: 1;
        left: 50px;
        background: url("https://s7g10.scene7.com/is/image/Pangaea2Build/IC-Desktop--Prev-Arrow-Icon--Dark?$PNGALPHA$") no-repeat center center; }
        @media all and (max-width: 1080px) {
          #cloudsteppers .carousel-container .carousel .slick-prev {
            left: 27px; } }
        @media all and (max-width: 720px) {
          #cloudsteppers .carousel-container .carousel .slick-prev {
            left: 15px; } }
        @media all and (max-width: 480px) {
          #cloudsteppers .carousel-container .carousel .slick-prev {
            left: 7px; } }
        @media all and (max-width: 320px) {
          #cloudsteppers .carousel-container .carousel .slick-prev {
            left: 0; } }
        #cloudsteppers .carousel-container .carousel .slick-prev::before {
          color: transparent; }
      #cloudsteppers .carousel-container .carousel .slick-next {
        right: 50px;
        background: url("https://s7g10.scene7.com/is/image/Pangaea2Build/IC-Desktop--Next-Arrow-Icon--Dark?$PNGALPHA$") no-repeat center center; }
        @media all and (max-width: 1080px) {
          #cloudsteppers .carousel-container .carousel .slick-next {
            right: 27px; } }
        @media all and (max-width: 720px) {
          #cloudsteppers .carousel-container .carousel .slick-next {
            right: 15px; } }
        @media all and (max-width: 480px) {
          #cloudsteppers .carousel-container .carousel .slick-next {
            right: 7px; } }
        @media all and (max-width: 320px) {
          #cloudsteppers .carousel-container .carousel .slick-next {
            right: 0; } }
        #cloudsteppers .carousel-container .carousel .slick-next::before {
          color: transparent; }
      #cloudsteppers .carousel-container .carousel .carousel-item img {
        width: auto;
        padding: 1em;
        margin: 0 auto; }
      #cloudsteppers .carousel-container .carousel .carousel-item p {
        font-size: 36px; }
        @media all and (max-width: 1080px) {
          #cloudsteppers .carousel-container .carousel .carousel-item p {
            font-size: 30px; } }
        @media all and (max-width: 720px) {
          #cloudsteppers .carousel-container .carousel .carousel-item p {
            font-size: 24px; } }
        @media all and (max-width: 480px) {
          #cloudsteppers .carousel-container .carousel .carousel-item p {
            font-size: 18px; } }
  .content-wrapper #cloudsteppers .slick-dots {
    margin-left: -5px;
    position: relative;
    bottom: 0; }
    .content-wrapper #cloudsteppers .slick-dots li button:before {
      font-size: 24px !important; }
  #cloudsteppers .slick-dots li.slick-active:nth-child(1) button:before {
    color: #b00962 !important; }
  #cloudsteppers .slick-dots li.slick-active:nth-child(2) button:before {
    color: #4c60a0 !important; }
  #cloudsteppers .slick-dots li.slick-active:nth-child(3) button:before {
    color: #59af50 !important; }
  #cloudsteppers .person-carousel {
    width: 100%;
    max-width: 1440px; }
    @media all and (max-width: 720px) {
      #cloudsteppers .person-carousel {
        display: block;
        position: relative;
        padding-bottom: 122.0748%; } }
    #cloudsteppers .person-carousel .person-carousel-item {
      width: 47%;
      max-width: 47%; }
      @media all and (max-width: 720px) {
        #cloudsteppers .person-carousel .person-carousel-item {
          max-width: 720px;
          width: 100%;
          display: block;
          position: absolute;
          top: 0;
          left: 0; }
          #cloudsteppers .person-carousel .person-carousel-item.one {
            box-shadow: 0 7px 19px -5.2px #000; }
          #cloudsteppers .person-carousel .person-carousel-item.two {
            -webkit-animation: fade-out 6s cubic-bezier(0.445, 0.05, 0.55, 0.95) alternate infinite;
            animation: fade-out 6s cubic-bezier(0.445, 0.05, 0.55, 0.95) alternate infinite; } }
      @media all and (max-width: 480px) {
        #cloudsteppers .person-carousel .person-carousel-item.one {
          box-shadow: 0 7px 19px -5.2px #000; } }
  #cloudsteppers .soft-cushion-container {
    max-width: 1440px;
    margin: 0 auto; }
    #cloudsteppers .soft-cushion-container .soft-cushion {
      margin: 0 auto 4em; }
    #cloudsteppers .soft-cushion-container * {
      margin: 0; }
    #cloudsteppers .soft-cushion-container p {
      margin: 0 auto;
      display: block;
      max-width: 65vw;
      font-size: 26px; }
      #cloudsteppers .soft-cushion-container p.cush-para {
        padding-bottom: 1em; }
    #cloudsteppers .soft-cushion-container .desc {
      font-size: 28px; }
      @media all and (max-width: 720px) {
        #cloudsteppers .soft-cushion-container .desc {
          max-width: 89vw;
          letter-spacing: 0.1em;
          font-size: 24px; } }
      @media all and (max-width: 480px) {
        #cloudsteppers .soft-cushion-container .desc {
          font-size: 20px; } }
  #cloudsteppers .bottom-btn-container {
    margin: 5em auto;
    max-width: 1440px; }
    @media all and (max-width: 720px) {
      #cloudsteppers .bottom-btn-container {
        display: block; } }

.language-de #cloudsteppers a.btn-shop,
.language-nl #cloudsteppers a.btn-shop {
  padding: 0.6em 2em; }

.language-es #cloudsteppers a.btn-shop,
.language-fr #cloudsteppers a.btn-shop {
  padding: 0.6em 3em; }

@-webkit-keyframes fade-out {
  0% {
    opacity: 1; }
  33% {
    opacity: 1; }
  66% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@keyframes fade-out {
  0% {
    opacity: 1; }
  33% {
    opacity: 1; }
  66% {
    opacity: 0; }
  100% {
    opacity: 0; } }