div.box-article {
  margin-top:10px;
}

.article-header {
  position: relative;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.article-header.container {
  padding-left: 0;
  padding-right: 0;
}
.picto-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.picto-container img {
  max-height: 150px;
}
.see-more {
  padding-top: 40px;
}
@media only screen and (max-width: 768px) {
  .picto-container img {
    max-height: 100px;
  }
}
.picto-container .picto,
.picto-container .logo {
  margin-bottom: 35px;
  padding-right: 20px;
}

.node--type-metier .article-header {
  position: relative;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.node-banner-desktop, .node-banner-mobile {
  height: 100%;
}

.article-header-banner {
  width: 100vw;
  position: absolute;
  left: calc(-50vw + 50%);
  z-index: -1;
  top: -140px;
  bottom: 0;
  overflow: hidden;
}

.article-header-banner-filter {
  width: 100vw;
  position: absolute;
  left: calc(-50vw + 50%);
  z-index: -1;
  top: -174px;
  bottom: 0;
  background-color: rgba(21, 37, 44, 0.5);
}

.article-header-banner-info {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.article-header-banner-info-separator {
  width: 119%;
  height: 5px;
  position: relative;
  align-self: center;
  background: #10181D 0% 0% no-repeat padding-box;
}
.article-header-banner-info-left {
  margin-right: auto;
}

.article-header-banner-info-right {
  margin-left: auto;
}

.article-header-banner-info-right div:not(.article-header-banner-info-separator) {
  display: flex;
  opacity: 1;
  padding: 5px 15px;
  background: #10181D no-repeat padding-box;
  border: #00CEFF 3px solid;
  border-radius: 10px;
  flex-direction: column;
}

.article-header-banner-info-left img {
  width: 48px;
  height: auto;
}

.article-header-banner-info-right p{
  margin: 0;
}

.user-logged-in .article-header-banner, .user-logged-in .article-header-banner-filter{
  top: -256px;
}

.article-header-banner .contextual-region,
.article-header-banner .field,
.article-header-banner .field__item {
  height: 100%;
}

.article-header-banner img{
  z-index: -1;
  height: auto;
  width: 100%;
  object-fit: cover;
  padding-top: 0;
  position: absolute;
}

.wiki-other.box-article {
  top: 30px;
  opacity: 1;
  display: flex;
  flex-direction: column;
  background-color: #0C3949;
}

.wiki-other .title-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 32px;
  margin-left: 5%;
  max-width: min(100%, calc(((290px)* 4 + (25px* 3))));
}

.wiki-other .title-container .wiki-title {
  align-self: center;
}

.wiki-other .title-container .wiki-title span {
  white-space: nowrap;
}

.wiki-other .wiki-theme-redirect {
  background: #00CEFF 0% 0% no-repeat padding-box;
  width: fit-content;
  height: fit-content;
  white-space: nowrap;
  border-radius: 40px;
  opacity: 1;
  padding: 10px 20px;
  text-align: left;
  letter-spacing: 0px;
  font-weight: bold;
  color: #10181D !important;
  line-height: 1.5;
}

@media only screen and (max-width: 767px) {
  .wiki-other .title-container {
    flex-direction: column;
    text-align: center;
  }
  .title-container .wiki-theme-redirect {
    margin: 20px auto 0;
  }
  .wiki-card-container {
    justify-content: center;
  }
}

@media only screen and (max-width: 426px) {
  .wiki-other .title-container {
    flex-direction: column;
  }

  .wiki-other .wiki-theme-redirect {
    margin-left: auto;
    margin-top: 20px;
  }

  .wiki-other .wiki-card-container {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
  }

  .wiki-other .wiki-card {
    flex: 0 1 366px;
  }
}

@media only screen and (max-width: 1400px) {
  .article-header-banner img{
    transform: initial;
    top: 0;
  }
}

div.box-article h1 {
  font-family: "NunitoSans";
  font-size: 57px;
  font-weight: 800;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.12;
  letter-spacing: normal;
  color: #ffffff;
  margin-bottom: 16px;
  overflow-wrap: break-word;
  margin-left: 0;
}


.box-article .widget-article.second{
  width:100vw;
  display:flex;
  flex-direction: column;
}

div.box-article .widget-article div {
  margin: 0;
  padding: 0;
}

div.box-article .widget-article h2 a div{
  font-size:16px;
}
div.box-article .widget-article{
  padding-left: 0;
}

.box-article .widget-article.first .date_layout,
.box-article .widget-article.first .theme_1_layout,
.box-article .widget-article.first .theme_2_layout,
.box-article .widget-article.first .localization_layout,
.box-article .widget-article.first .temps_lecture_layout,
.box-article .widget-article.first .type_metier_layout,
.box-article .widget-article.second .taxo_contrat,
.box-article .widget-article.second .taxo_metier,
.box-article .widget-article.second .taxo_localisation,
.box-article .widget-article.second .taxo_experience,
.box-article .widget-article.second .taxo_diplome {
  display: inline-block;
  padding: 0;
  position: relative;
}

.box-article .offerDetail .text-uppercase{
  display: inline-block;
  padding-left:20px;
  padding-right:20px;
}
.box-article .offerDetail div:first-of-type .text-uppercase{
  padding-left:0;
}

.box-article .widget-article.second .taxo_contrat .text-uppercase {
  display: inline-block;
  padding-left:0;
  padding-right:20px;
}

.box-article .widget-article.second .taxo_localisation .text-uppercase,
.box-article .widget-article.second .taxo_diplome .text-uppercase{
  display: inline;
  padding-right:20px;
}
/*.box-article .widget-article.second .taxo_localisation .text-uppercase {*/
/*  padding-left:25px;*/
/*}*/

.box-article .widget-article.second .taxo_localisation .text-uppercase span {
  padding:0;
}

.box-article .widget-article.second .taxo_diplome .text-uppercase span,
.box-article .widget-article.second .taxo_localisation .text-uppercase span {
  padding: 0 0 0 40px;
}

.box-article .widget-article.second .offerDetail .text-uppercase{
  display: flex;
  /*margin-left: 30px;*/
  /*margin-right: 20px;*/
  font-size: 13px;
  align-items: baseline;
}

.box-article .widget-article.second .taxo_experience .text-uppercase h2 div{
  padding-left: 5px;
}


.node--type-actualite .box-article .widget-article.first .theme_1_layout,
.box-article .widget-article.first .type_metier_layout{
  padding-left: 52px;
}
.box-article .widget-article.first .theme_2_layout {
  padding-left: 43px;
}

.box-article .widget-article.first .localization_layout {
  padding-left: 52px;
}
.node--type-actualite .box-article .widget-article.first .theme_1_layout:before,
.box-article .widget-article.first .theme_2_layout:before,
.box-article .widget-article.first .type_metier_layout:before,
.box-article .widget-article.first .localization_layout:before{
  width: 3px;
  height: 3px;
  opacity: 0.8;
  border-radius: 3px;
  background-color: #ffffff;
  content: '';
  position: absolute;
  left: 20px;
  top: 7px;
}

.box-article .widget-article.second > div > div:not(:first-child):before {
  width: 3px;
  height: 3px;
  opacity: 0.8;
  border-radius: 3px;
  background-color: #ffffff;
  content: '';
  position: absolute;
  left: 0px;
  top: 7px;
}

.box-article .widget-article.first .temps_lecture_layout {
  margin-top: 16px;
}

div.box-article .widget-article div:not(.offerDetail):first-child {
  list-style: none;
  margin-left: 0;
  /*padding-right: 5px;*/
  padding-left: 0;
}

@media only screen and (min-width: 768px) {
  div.box-article .widget-article div.offerDetail:not(:first-of-type) {
    margin-top: 5px;
  }
}

div.box-article .widget-article {
  opacity: 0.8;
  font-family: NunitoSans;
  font-size: 13px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #ffffff;
  min-height: 20px;
  position: relative;
  padding-bottom: 30px;
}

@media only screen and (max-width: 768px) {
  .article-header-banner-info-left img {
    width: 30px;
  }

  div.box-article .widget-article {
        padding-bottom: 20px;
    }
}

div.box-article.job-offer .widget-article.screen {
  padding-bottom: 35px;
}

div.box-article .widget-article.with-section {
  padding-bottom: 104px;
}

div.box-article .widget-article .twitter {
  width: 131px;
  height: 30px;
  opacity: 0.7;
  border-radius: 19px;
  background-color: rgba(0, 166, 217, 0.24);
  text-align: center;
  font-weight: 900;
  color: #FFFFFF;

}

div.box-article .widget-article .twitter a span.twitter {
  width: 39px;
  height: 19px;
  font-family: NunitoSans;
  font-size: 14px;
  font-weight: 800;
  font-stretch: normal;
  letter-spacing: normal;
  color: #FFFFFF;
  line-height: 30px;
}

div.box-article:not(.box_quizz) div.article-description {
  max-width: 860px !important;
  margin: auto;
}

div.box-article div.article-description,
.sections-content .article-description-section {
  font-family: NunitoSans;
  font-size: 20px;
  font-weight: 800;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
  color: #FFFFFF;
  padding-bottom: 40px;
  overflow-wrap: break-word;
  padding-top: 40px;
}

div.box-article div.widget-article img.img-icon {
  margin-right: 3px;
  width: 9px;
  height: 13px;
  opacity: 0.8;
  color: #ffffff;
  vertical-align: -2px;
}


div.box-article p.a_lire {
  height: 18px;
  opacity: 0.8;
  font-family: NunitoSans;
  font-size: 13px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #ffffff;
}

div.widget-article.mobile {
  display: none;
}

.widget-project .arrow,
.widget-article .arrow {
  display: none;
}

.temps_lecture_layout {
  display: block;
  width: 100%;
}

.cover-hidden-content {
  display: none;
}


/******************sous-section***********************/
.node-header .sections {
  background: #0D2833;
  width: 100vw;
  left: calc(-50vw + 50%);
  position: absolute;
  bottom: 0;
}

.node-sections.sections.fixed-sections {
  position: fixed;
  top: 0 !important;
  bottom: unset !important;
  z-index: 2;
}

.user-logged-in .node-sections.sections.fixed-sections {
  top: 39px !important;
}

.rte-scroll-up .node-sections.sections.fixed-sections {
  top: 102px !important;
}

.user-logged-in.rte-scroll-up .node-sections.sections.fixed-sections{
  top: 141px !important;
}

.node-sections .slick-arrow:before {
  top: 18px !important;
}

.title-section{
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  margin-bottom: 0;
  overflow: hidden;
}

.title-section-content {
  width: 100%;
}

.title-section .section-item{
  list-style: none;
  padding: 14px 30px;
  position: relative;
  padding-bottom:  19px;
}

.title-section .section-item a {
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  line-height: 1.67;
  letter-spacing: normal;
  text-transform: uppercase;
  color:white;
  border-bottom: none;
  outline: none;
}

.title-section .section-item:after {
  content: '|';
  position: absolute;
  right: 0;
  top:  17px;
  height: 20px;
  width: 2px;
  background: white;
  color: transparent;
}

.title-section .section-item.section-active,
.title-section .section-item:hover {
  border-bottom: 5px solid #FFFFFF;
  background-color: #09526A;
  padding-bottom: 14px;
  margin-left: -4px;
  cursor: pointer;
  box-shadow: 0px 0px 10px #000000;
}

.title-section .section-item.section-active a,
.title-section .section-item:hover a{
  color:#FFFFFF !important;
  text-decoration: none !important;
}

.title-section .section-item.section-active:after,
.title-section .section-item:hover:after,
.title-section .section-item:last-child:after{
  display: none !important;
}



.field__label{
  display:none;
}

.paragraph-section {
  display: none;
}

.paragraph-section.active {
  display: block;
  margin-top: -63px !important;
  padding-top: 63px !important;
}

.sections-content .paragraph-section.active .field {
  padding-top: 40px;
}

/* Animation */
.box-article .sections .next {
  display: block;
  color: #ffffff;
  width: 9px;
  height: 17px;
  object-fit: contain;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 26px;
}

.box-article.show-content .next {
  display: none;
}


div.title-section .second {
  display: block;
  margin-top: 5px;
  margin-bottom: 5px;
  width: 90%;
  height: 18px;
  overflow-y: hidden;
}

ul.title-section.second ul {
  overflow: hidden;
}

ul.title-section.last {
  width: 100%;
  overflow: hidden;
}


.box-article.show-content .title-section.second {
  height: auto;
  overflow-y: hidden;
  padding-left: 15px;
}

.box-article.show-content .title-section.first .temps_lecture_layout:before {
  display: none;
}

.sections .slick-arrow.slick-next:before {
  background-image: url('/themes/swi/images/arrow-next.svg');
  right: 0;
  left: auto;
  transform: none;
}

.sections .slick-arrow.slick-prev:before {
  background-image: url('/themes/swi/images/arrow-previous.svg');
  left: -20px;
  right: auto;
  transform: none;
}

.sections .slick-arrow{
  background-color: transparent !important;
  box-shadow: none;
  width: 100px !important;
}

.sections .slick-next, .sections .slick-next:hover, .sections .slick-next:focus {
  background-image: linear-gradient(to right, rgba(12, 57, 73, 0), rgba(12, 57, 73, 0.5) 26%, #0c3949 69%);
}

.sections-content.tab-content .tab-pane {
  display: none;
}

.sections-content.tab-content .tab-pane.active {
  display: block;
}

.slick-initialized .slick-slide {
  outline: none;
}



.mobile-banner{
  display:none;
}

.views-infinite-scroll-content-wrapper {
  width: 100%;
  padding: 0 15px;
}

@media only screen and (max-width: 768px) {
  nav.tabs {
    display: none;
  }
  .mobile-banner{
    display:block;
  }
  .desktop-banner{
    display:none;
  }

  div.box-article h1 {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.16;
  }

  .node--type-metier .article-header {
    min-height: 366px;
  }
  .article-header {
    margin-bottom: 20px;
  }

  .article-header-banner img {
    height: 100%;
    width: auto;
    min-width: 100%;
    object-fit: cover;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  div.conteneur {
    width: 96%;
    margin: auto;
  }


  .article-header-banner, .article-header-banner-filter {
    top: -243px;
  }

  div.widget-article ul.first {
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 90%;
    height: 18px;
    overflow: hidden;
  }

  ul.widget-article.first ul {
    overflow: hidden;
  }

  ul.widget-article.last {
    width: 100%;
    overflow: hidden;
  }

  .arrow {
    display: block;
    float: right;
    width: 22px;
    height: 19px;
    color: #ffffff;
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px 0 5px 5px;
  }

  .box-article.show-content .arrow {
    display: none;
  }

  .box-article .widget-article.first {
    height: 20px;
    overflow-y: hidden;
    white-space: nowrap;
  }

  .box-article.show-content .widget-article.first {
    height: auto;
    overflow-y: unset;
    white-space: unset;
  }

  .box-article .widget-article.second {
    display: block;
  }

  .box-article .widget-article.first .localization_layout,
  .box-article .widget-article.first .theme_2_layout,
  .box-article .widget-article.first .temps_lecture_layout,
  .box-article .widget-article.second .taxo_metier,
  .box-article .widget-article.second .taxo_localisation,
  .box-article .widget-article.second .taxo_experience,
  .box-article .widget-article.second .taxo_diplome  {
    display: none;
  }

  .box-article.show-content .widget-article.first .localization_layout,
  .box-article.show-content .widget-article.first .theme_1_layout,
  .box-article.show-content .widget-article.first .theme_2_layout,
  .box-article.show-content .widget-article.first .temps_lecture_layout,
  .box-article.show-content .widget-article.second .taxo_metier,
  .box-article.show-content .widget-article.second .taxo_localisation,
  .box-article.show-content .widget-article.second .taxo_experience,
  .box-article.show-content .widget-article.second .taxo_diplome  {
    display: block;
    padding-left: 0;
    margin-top: 5px;
  }

  .box-article .widget-article.first .theme_2_layout:before,
  .box-article .widget-article.first .localization_layout:before,
  .box-article .widget-article.second .taxo_metier:before,
  .box-article .widget-article.second .taxo_experience:before,
  .box-article .widget-article.second .taxo_localisation:before,
  .box-article .widget-article.second .taxo_diplome:before {
    top: 7px;
    display: none;
  }

  .box-article .widget-article.second .taxo_metier span,
  .box-article .widget-article.second .taxo_experience span,
  .box-article .widget-article.second .taxo_localisation span,
  .box-article .widget-article.second .taxo_diplome span {
    padding: 0 !important;
    margin: 0 !important;
  }

  .box-article .widget-article.second .taxo_localisation span span,
  .box-article .widget-article.second .taxo_diplome span span {
    padding-left: 35px !important;
  }
  .box-article .widget-article.second .taxo_localisation img.img-icono {
    margin-left: -6px;
  }


  .box-article .widget-article.first .temps_lecture_layout:before {
    width: 3px;
    height: 3px;
    opacity: 0.8;
    border-radius: 3px;
    background-color: #ffffff;
    content: '';
    position: absolute;
    left: 20px;
    top: 7px;
  }

  .box-article.show-content .widget-article.first .temps_lecture_layout:before {
    display: none;
  }

  .cover-hidden-content{
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30%;
    background-image: linear-gradient(to right, rgba(12, 57, 73, 0) 10%, rgba(16, 24, 29, 0.5) 34%, #10181d 48%, #10181d 69%);
  }

  .box-article.show-content .cover-hidden-content {
    display: none;
  }

  div.box-article div.article-description,
  .sections-content .article-description-section {
    margin-top: 0;
  }

  /*        sous-section        */
  .title-section {
    padding-left:0;
    padding-right: 0;
    overflow-y: hidden;
  }

  .paragraph-section.active {
    margin-top: -80px !important;
  }

  .title-section .section-item a{
    font-size:16px;
  }
  .cover-hidden-content{
    display:none;
  }

  .box-article .sections .next {
    display: none;
  }

  .title-section .section-item a{
    font-size: 16px;
    line-height: 1.88;
  }

  .sections .slick-arrow{
    width: 30px !important;
    height: 100% !important;
  }

  .sections .slick-arrow.slick-next:before {
    right: 5px;
  }

  .sections .slick-arrow.slick-prev:before {
    background-image: url('/themes/swi/images/arrow-previous.svg');
    left: 5px;
  }

  .widget-project .arrow,
  .widget-article .arrow {
    display: block;
  }
}