:root {
  --channel-padding: 100px;
  --channel-padding-mobile: 15px;
}

.megachannel {
  position: relative;
  background-color: #0C3949;
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
  padding-bottom: 30px;
  overflow: hidden;
}

.megachannel .megachannel-content {
  padding: 100px 0;
  position: relative;
}

.megachannel .megachannel_background,
.megachannel .megachannel_background img{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.megachannel .megachannel_background img {
  width: 100%;
  height: auto;
}

.megachannel .megachannel_vignette_title a.rte-button {
  align-self: center;
}

.megachannel .megachannel-content .megachannel_channel {
  margin-top: 38px;
}

.megachannel_channel .field__items .field__item:first-child .node-case-vignette,
.megachannel_channel .field__items .field__item:first-child .node-case-vignette-slider {
  margin-left: 0;
}


.field--name-field-megachannel-channel > .field__items > .slick-prev,
.field--name-field-megachannel-channel > .field__items > .slick-next {
  top: 160px !important;
}

.megachannel-content > .megachannel_vignette_title,
.megachannel-content .slick-list,
.megachannel-content .node-case-vignette-slider {
  padding-left: var(--channel-padding);
  padding-right: var(--channel-padding);
}

.megachannel-content .channel{
  left: unset !important;
  width: 100%;
}

.megachannel_channel .slick-current .node-case-vignette-channel {
  display: block;
}

.node-case-vignette-channel {
  margin-left: -100px;
  margin-right: -100px;  
  width: 100vw;
}

.megachannel_channel .node-case-vignette-channel .channel-top,
.megachannel_channel .node-case-vignette-channel .slick-list {
  padding-left: var(--channel-padding);
  padding-right: var(--channel-padding);
}


@media only screen and (max-width: 1024px) {
  .megachannel_channel .node-case-vignette-channel .channel-top,
  .megachannel_channel .node-case-vignette-channel .slick-list,
  .megachannel-content > h2,
  .megachannel-content .node-case-vignette-slider,
  .megachannel-content > .megachannel_subtitle,                        
  .megachannel-content > .megachannel_vignette_title,                   
  .megachannel-content .slick-list,
  .megachannel_channel .node-case-vignette-channel .channel-top, 
  .megachannel_channel .node-case-vignette-channel .slick-list {                  
    padding-left: var(--channel-padding-mobile);
    padding-right: var(--channel-padding-mobile);
  }

  .node-case-vignette-channel {
    margin-left: -15px;
    margin-right: -15px;
    width: 100vw;
  }
}

@media only screen and (max-width: 767px) {
  .megachannel .megachannel-content {
    padding: 40px 0px 20px 0px;
  }

  .megachannel .megachannel-content h2 {
    font-size: 26px;
    width: 100%;
  }

  .megachannel-content > h2,
  .megachannel-content > .megachannel_subtitle,
  .megachannel-content > .megachannel_vignette_title,
  .megachannel-content .slick-list{
    padding-left: var(--channel-padding-mobile);
    padding-right: var(--channel-padding-mobile);
  }

  .megachannel-content .channel .channel-title {
    padding-top: 50px;
  }

  .megachannel-content .megachannel_vignette_title a {
    position: absolute;
    bottom: 590px;
  }

  .megachannel-content .channel-mini .channel.with-image .channel-body .channel-list,
  .megachannel-content .channel-mini.channel.with-image .channel-body .channel-list {
    width: 100vw;
  }

  .megachannel-content .slick-track > a:first-child {
    margin-left: 0 !important;
  }

  .megachannel-content .channel .channel-button {
      left: 0;
  }

  .megachannel-content .channel  .channel-list {
    margin-left: -15px;
    margin-right: 15px;
  }

  .megachannel-content .node-case-vignette-channel {
    margin-left: 0;
    margin-right: 0;
  }

  .megachannel_channel .node-case-vignette-channel .slick-list {
    padding-left: var(--channel-padding-mobile);
    padding-right: var(--channel-padding-mobile);
  }
}