:root {
  /* Official colors - style guide */
  --afp-blue: #325aff;
  --afp-black: #000;
  --afp-white: #fff;
  
  /* sub main colors */
  --afp-pink: #FF6E6E;
  --afp-yellow: #FFD223;
  --afp-orange: #FFA050;
  --afp-turquoise: #7DFAAF;
  --afp-purple: #cd73fa;
  --afp-light-blue: #87EBFA;
  --afp-darker-white: #F5F5F7;
  
  /* secondary colors */
  --afp-secondary-grey-100: #9B9187;
  --afp-secondary-grey-80: #AFA79F;
  --afp-secondary-grey-60: #C3BDB7;
  --afp-secondary-grey-40: #D7D3CF;
  --afp-secondary-grey-20: #EBE9E7;
  --afp-secondary-grey-10: #F5F4F3;
  
  
  /* Additional colors - custom */
  --afp-light-green: #7DFAAF;
  --afp-darker-green: #65ce8f;
  --afp-lighter-bleu: #E8F8EB;
  --afp-darker-orange: #e06f12;
  --afp-darker-pink: #d96e6e;
  --afp-blue-darker: #2544bf;
  --extremely-light-gray: rgba(0, 0, 0, 0.1);
  /* Others */
  --max-height-landing-presentation-container: 1280px;
  --min-height-landing-presentation-container: min(
    var(--max-height-landing-presentation-container),
    min(100vh, 100vw)
  );
  }
  
/* BASE CSS */
html {
  font-family: 'Source Sans Pro', Arial, sans-serif;
}
/*
Josh's Custom CSS Reset
https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  height: 100%;
}
body {
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
#main-container a {
  color: inherit;
  text-decoration: none !important;
}
#main-container {
  margin: auto;
  width: 100%;
  background-color: var(--afp-white);
}
.width-container {
  max-width: 1280px; 
  margin: auto;
  padding: 1rem;
}
#main-title {
  font-size: 2rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: 47px;
  color: #000 !important;
}
.landing-para {
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  max-width: 760px;
  margin: auto;
  margin-bottom: 55px;
}
@media screen and (min-width: 992px) {
  #main-title {
      font-size: 64px;
  }
}
#main-container input[type="radio"] {
  position: absolute;
  left: -9999px;
}
.filters {
  text-align: center;
  margin-bottom: 2rem;
}
.filters * {
  display: inline-block;
}
.filters label {
  padding: 5px 16px;
  margin-bottom: 0.25rem;
  border-radius: 50px;
  min-width: 50px;
  line-height: normal;
  cursor: pointer;
  transition: all 0.1s;
  font-weight: 700;
  font-size: 16px;
}
.filters label:hover {
  background: var(--afp-blue);
  color: var(--afp-white);
}
#main-container ol {
  padding: 0;
}
.posts {
  display: flex;
  flex-wrap: wrap;
  gap: 45px;
  list-style-type: none;
}
.h3-category {
  margin-bottom: 20px;
  font-weight: 900;
  font-size: 24px;
}
@media screen and (max-width: 768px) {
  .h3-category {
    text-align: center;
  }
}
.posts img {
  width: 100%;
  max-height: 186px;
}
.posts .post {
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  flex-basis: 30%;
  min-width: 254px;
  height: fit-content;
  height: -moz-fit-content;
  overflow: hidden;
  margin-bottom: 55px;
  padding: 0 !important;
}
@media screen and (max-width: 768px) {
  .posts .post {
      margin-right: auto;
      margin-left: auto;
  }
}
.posts .post-title {
  font-size: 16px;
  font-weight: 900;
}
.posts figcaption {
  padding: 1rem !important;
  display: flex;
  flex-direction: column;
  height: 160px;
  justify-content: space-between;
}
.posts .post-link {
  color: var(--afp-blue);
  font-size: 14px;
}
.post-link img {
  width: 22px;
  height: 22px;
  border: 1px solid var(--afp-blue);
  border-radius: 50%;
  padding: 2px;
  float: right;
  margin-right: 10px;
}
.posts .post-link:hover {
  text-decoration: underline;
}
[value="all"]:checked ~ .filters [for="all"],
[value="webinar"]:checked ~ .filters [for="webinar"],
[value="infographies"]:checked ~ .filters [for="infographies"],
[value="user-guide"]:checked ~ .filters [for="user-guide"],
[value="white-paper"]:checked ~ .filters [for="white-paper"],
[value="video"]:checked ~ .filters [for="video"],
[value="presentation"]:checked ~ .filters [for="presentation"] {
  background: var(--afp-blue) !important;
  color: var(--afp-white) !important;
} 

[value="all"]:checked ~ .posts [data-category],
[value="all"]:checked ~ .h3-category [data-category] {
  display: block;
}

[value="webinar"]:checked ~ .posts .post:not([data-category*="webinar"]),
[value="webinar"]:checked ~ .h3-category:not([data-category*="webinar"]),
[value="infographies"]:checked ~ .posts .post:not([data-category*="infographies"]),
[value="infographies"]:checked ~ .h3-category:not([data-category*="infographies"]),
[value="user-guide"]:checked ~ .posts .post:not([data-category*="user-guide"]),
[value="user-guide"]:checked ~ .h3-category:not([data-category*="user-guide"]),
[value="white-paper"]:checked ~ .posts .post:not([data-category*="white-paper"]),
[value="white-paper"]:checked ~ .h3-category:not([data-category*="white-paper"]),
[value="video"]:checked ~ .posts .post:not([data-category*="video"]),
[value="video"]:checked ~ .h3-category:not([data-category*="video"]),
[value="presentation"]:checked ~ .posts .post:not([data-category*="presentation"]),
[value="presentation"]:checked ~ .h3-category:not([data-category*="presentation"]) {
display: none;
}

/* drupal adpatation */
.node-type-afp-produit .panel-pane.pane-entity-view.pane-node .line.mb1.bgblue.line.relative.mb2.pt1.pb2.pa0m, .info_social.mb2, #breadcrumb.line.hidem, #navbar-administration.navbar-oriented .navbar-tray-vertical>.navbar-lining:before {
display: none;
}
body.not-logged-in.section-produits-services {
padding-top: 65px !important;
}
#main-container .img_margin {
margin: auto !important;
}

main ol li:before {
  content: unset !important;
}