#introduction {
  background:#e4e5e7 url(https://www.velo-territoires.org/wp-content/themes/drc/extra/assets/img/pattern.png) center top repeat;
  background-position:calc(50% + 10px) 200px;
  margin-top:-200px;
  position:relative;
  z-index:5;
  height:840px;
}
#introduction .content-bloc {
  position:absolute;
  top:320px;
  left:50%;
  z-index:30;
  text-align:right;
  transform:translateX(20px);
  width:580px;
  max-width:100%;
}
#introduction .content-bloc .wrapper {
  background:#ffffff;
  padding:50px 40px 48px;
  text-align:left;
}
#introduction .content-bloc .title {
  font-size:28px;
  font-weight:700;
  line-height:40px;
}
#introduction .content-bloc .subtitle {
  font-size:18px;
  font-weight:100;
  line-height:25px;
  margin-top:12px;
}
#introduction .progress-bar {
  background:#173c86;
  position:absolute;
  top:-2px;
  left:0;
  width:100%;
  height:2px;
  transform-origin:0 0;
}
#introduction .big-button {
  text-align:left;
  width:380px;
  max-width:100%;
}
#introduction .images {
  width:calc(50% + 300px);
  height:100%;
}
#introduction .images .wrapper, #introduction .images ul, #introduction .images li {
  width:100%;
  height:100%;
}
#introduction .images li {
  position:absolute;
  top:0;
  left:0;
}
#introduction .image {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:99;
  transform:translate3d(0,0,0);
}
@media only screen and (max-width: 1240px) {
  #introduction {
    margin-top:0;
    height:calc(100vh - 80px);
  }
  #introduction .images { width:100%; }
}
@media only screen and (max-width: 1240px) and (min-width: 601px) {
  #introduction .content-bloc {
    top:50%;
    left:auto;
    bottom:0;
    right:0;
    max-width:calc(100% - 160px);
    transform:translateX(-80px) translateY(-50%);
  }
}
@media only screen and (max-width: 600px) {
  #introduction {
    display:flex;
    flex-direction:column;
    height:auto;
  }
  #introduction .images {
    order:0;
    height:50vh;
  }
  #introduction .content-bloc {
    order:1;
    position:relative;
    top:auto;
    left:auto;
    bottom:auto;
    right:auto;
    width:100%;
    transform:none;
  }
  #introduction .content-bloc .wrapper { padding:30px; }
  #introduction .big-button { width:100%; }
}
#introduction-slider-mask-wrapper {
  pointer-events:none;
  position:absolute;
  z-index:-1;
  width:100%;
  height:100%;
}
#bandeau {
  position:relative;
  z-index:10;
  height:600px;
}
#bandeau .bandeau-image {
  background-position:center;
  background-attachment:fixed;
  background-size:cover;
  margin-left:-40px;
  position:absolute;
  top:0;
  left:0;
  width:calc(100% + 40px);
  height:100%;
}
@media only screen and (max-width: 1025px), screen and (max-height: 769px) {
  #bandeau .bandeau-image { background-attachment:scroll; }
}
#bandeau .bandeau-content-wrapper {
  margin:auto;
  position:relative;
  z-index:20;
  width:100%;
  max-width:1200px;
  height:100%;
}
#bandeau .bandeau-content {
  background:rgba(23,60,134,0.9);
  display:flex;
  align-items:center;
  padding:60px;
  width:600px;
  max-width:100%;
  height:100%;
}
#bandeau .bandeau-content-inner {
  color:#ffffff;
  font-size:18px;
}
#bandeau .bandeau-content-inner h2, #bandeau .bandeau-content-inner h3, #bandeau .bandeau-content-inner h4, #bandeau .bandeau-content-inner h5, #bandeau .bandeau-content-inner p { margin-bottom:9px; }
#bandeau .bandeau-content-inner a {
  background-image:linear-gradient(to top,rgba(0,0,0,0),rgba(0,0,0,0) 0px,#ffffff 0px,#ffffff 1px,rgba(0,0,0,0) 1px), linear-gradient(to top,rgba(0,0,0,0),rgba(0,0,0,0) 0px,rgba(139,176,67,0.1) 0px,rgba(139,176,67,0.1) 1px,rgba(0,0,0,0) 1px);
  color:#8bb043;
  font-weight:900;
}
#bandeau .bandeau-content-inner a:hover { color:#ffffff; }
@media only screen and (max-width: 1240px) {
  #bandeau {
    height:auto;
    position:relative;
  }
  #bandeau .bandeau-image {
    position:relative;
    height:240px;
  }
  #bandeau .bandeau-content-wrapper { height:auto; }
  #bandeau .bandeau-content { width:100%; }
  #bandeau .bandeau-content-inner {
    margin:auto;
    max-width:800px;
  }
  #bandeau .bandeau-content-inner > *:first-child { margin-top:0; }
  #bandeau .bandeau-content-inner > *:last-child { margin-bottom:0; }
}
@media only screen and (max-width: 690px) {
  #bandeau .bandeau-content { padding:30px; }
}
#members {
  flex:0 0 auto;
  width:380px;
  min-height:360px;
}
#members a {
  align-items:center;
  background:transparent url(https://www.velo-territoires.org/wp-content/themes/drc/extra/assets/img/pattern.png) 0 0 repeat;
  display:flex;
  padding:40px;
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  transition-property:background;
}
#members a:before, #members a:after {
  background:#8bb043 url(https://www.velo-territoires.org/wp-content/themes/drc/extra/assets/img/pattern.png) 0 0 repeat;
  content:"";
  display:block;
  margin:auto;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:-1;
}
#members a:after {
  background-color:#173c86;
  right:100%;
  transition:right 600ms ease-in-out;
}
#members a:hover:after { right:0; }
#members a:hover .title-part-1 { color:#ffffff; }
#members .title {
  font-size:35px;
  line-height:40px;
}
#members .title-part-1 {
  color:#173c86;
  display:block;
  font-weight:900;
  transition:color 600ms ease-in-out;
}
#members .title-part-2 {
  color:#ffffff;
  display:block;
  font-weight:300;
  transition:color 600ms ease-in-out;
}
@media only screen and (max-width: 1000px) {
  #members {
    margin:0 auto 60px;
    width:calc(100% - 120px);
    min-height:0;
  }
}
@media only screen and (max-width: 500px) {
  #members {
    margin:0 auto 30px;
    width:calc(100% - 60px);
  }
}
.events-list {
  background:#e4e5e7;
  flex:1 1 auto;
  padding-top:6px;
}
.events-list .header { padding:0 0 0 40px; }
.events-list .events-list-wrapper { padding-top:3px; }
.events-list .events-detail {
  display:flex;
  list-style:none;
  padding:0 0 0 40px;
  min-height:100px;
  width:100%;
}
.events-list .events-detail .metas {
  border-bottom:1px solid #d1d8e7;
  color:#173c86;
  margin-right:40px;
  padding:30px 0 20px;
  flex:0 0 auto;
  min-width:200px;
  text-align:right;
}
.events-list .events-detail .metas .date {
  font-size:20px;
  line-height:25px;
  font-weight:900;
}
.events-list .events-detail .metas .category { margin-top:-4px; }
.events-list .events-detail .title {
  border-bottom:1px solid #d1d8e7;
  flex:1 1 auto;
  font-size:20px;
  font-weight:500;
  line-height:25px;
}
.events-list .events-detail .link {
  color:#2b4043;
  display:block;
  padding:30px 0 20px;
  position:relative;
  z-index:1;
  height:100%;
  width:100%;
}
.events-list .events-detail .link:after {
  background:#8bb043;
  content:"";
  display:block;
  margin:auto;
  position:absolute;
  top:auto;
  right:0;
  bottom:-1px;
  left:0;
  z-index:1;
  height:1px;
  transform:scaleX(0);
  transform-origin:left center;
  transition:none 600ms ease-in-out;
  transition-property:color, transform;
}
.events-list .events-detail .link:hover:after { transform:scaleX(1); }
.events-list .events-detail .link:hover { color:#8bb043; }
@media only screen and (max-width: 1000px) {
  .events-list .header, .events-list .events-detail { padding:0 60px; }
}
@media only screen and (max-width: 500px) {
  .events-list .header, .events-list .events-detail { padding:0 30px; }
  .events-list .events-detail { display:block; }
  .events-list .events-detail .metas {
    border-bottom:0 none;
    margin:0;
    padding-bottom:0;
    text-align:left;
  }
  .events-list .events-detail .link { padding-top:0; }
  .events-list .events-detail:last-of-type .title { border-bottom:0 none; }
}
#resources {
  background:#ffffff;
  border-top:5px solid #8bb043;
  padding:0 40px 70px 0;
  width:780px;
  position:relative;
}
#resources:after {
  background:#ffffff;
  content:"";
  display:block;
  margin:auto;
  position:absolute;
  top:-5px;
  right:780px;
  bottom:0;
  left:auto;
  width:calc(100vw - 1200px);
}
#resources .header { padding:82px 0 43px 20px; }
#resources .header .title { margin-top:-1px; }
#resources .resources-inner {
  display:flex;
  justify-content:space-between;
}
#resources .resource-excerpt {
  flex:none;
  margin:0 10px;
  width:220px;
}
#resources .resource-excerpt:first-of-type { margin-left:0; }
#resources .resource-excerpt:last-of-type { margin-right:0; }
#resources .resource-excerpt .image {
  outline:1px solid #e4e5e7;
  outline-offset:-1px;
}
#resources .resource-excerpt .subtitle {
  font-size:14px;
  font-weight:500;
  margin-top:13px;
}
#resources .resource-excerpt .title {
  color:#173c86;
  font-size:16px;
  font-weight:700;
  line-height:20px;
  margin-top:2px;
}
#resources .resource-excerpt .subtitle, #resources .resource-excerpt .title { transition:color 300ms ease-in-out; }
#resources .resource-excerpt .link:hover .subtitle, #resources .resource-excerpt .link:hover .title { color:#8bb043; }
@media only screen and (max-width: 1240px) {
  #resources {
    padding:0 60px 60px;
    width:100%;
  }
  #resources .header { padding-left:0; }
}
@media only screen and (max-width: 1240px) and (min-width: 781px) {
  #resources {
    margin:auto;
    max-width:780px;
  }
}
@media only screen and (max-width: 780px) {
  #resources { padding:30px; }
  #resources .header { padding:0 0 20px 0; }
  #resources .resources-inner { display:block; }
  #resources .resource-excerpt { margin:20px 0; }
  #resources .resource-excerpt:not(:last-of-type) {
    border-bottom:1px solid #e4e5e7;
    padding-bottom:19px;
    width:100%;
  }
  #resources .image { display:none; }
}
@media only screen and (max-width: 500px) {
  #resources { padding:30px; }
}
#links { background-color:#173c86; }
#links .header { padding:86px 0 0 38px; }
#links .header .title { color:#ffffff; }
#links .links-list { padding:55px 0 0 40px; }
#links .links-list-item {
  list-style:none;
  line-height:25px;
  padding:0 0 0 30px;
  position:relative;
}
#links .links-list-link {
  color:#ffffff;
  display:block;
  font-size:20px;
  font-weight:700;
  line-height:25px;
  padding:0 0 35px 0;
  white-space:nowrap;
}
#links .icon {
  display:inline-block;
  fill:#ffffff;
  margin-right:14px;
  position:absolute;
  top:8px;
  left:0;
  vertical-align:middle;
  width:12px;
  height:9px;
  transition:none 300ms ease-in-out;
  transition-property:fill, transform;
}
#links .links-list-link:hover { color:#8bb043; }
#links .links-list-link:hover .icon {
  fill:#8bb043;
  transform:translateX(10px);
}
@media only screen and (max-width: 1240px) {
  #links .header {
    margin:auto;
    padding-top:40px;
    max-width:780px;
  }
  #links .links-list {
    margin:auto;
    padding:60px;
    max-width:780px;
  }
  #links .links-list-link { white-space:normal; }
}
@media only screen and (max-width: 500px) {
  #links .links-list { padding:30px; }
}
#subscription {
  background:#92ba52 url(https://www.velo-territoires.org/wp-content/themes/drc/extra/assets/img/pattern.png) left top repeat;
  color:#ffffff;
  height:420px;
  margin-left:-40px;
  margin-right:0;
  padding:78px 0 0 0;
  position:relative;
  z-index:2;
}
#subscription .form-title { display:none; }
#subscription .title {
  font-size:50px;
  font-weight:900;
  line-height:50px;
  text-align:center;
}
#subscription .subtitle {
  font-size:20px;
  font-weight:700;
  line-height:25px;
  margin-top:3px;
  text-align:center;
}
#subscription .form {
  display:flex;
  margin:64px auto 0;
  max-width:1160px;
}
#subscription .field-wrapper {
  background:#ffffff;
  color:#173c86;
  flex:1 1 auto;
  font-size:20px;
  font-weight:100;
  line-height:80px;
  position:relative;
  z-index:5;
  height:80px;
}
#subscription .field-wrapper .label {
  color:#2b4043;
  padding:0 0 0 20px;
  position:absolute;
  top:0;
  left:0;
  z-index:2;
  width:100%;
  height:100%;
  transform-origin:0 0;
  transition:none 200ms ease-out;
  transition-property:color, transform;
}
#subscription .field-wrapper .input {
  display:block;
  font-weight:700;
  padding:0 0 0 20px;
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
}
#subscription .big-button {
  flex:0 0 auto;
  min-width:300px;
  z-index:10;
}
#subscription.hide-label .label {
  color:#ffffff;
  transform:translateY(-60px);
}
#subscription .error {
  color:#333333;
  font-size:20px;
  font-weight:900;
  line-height:30px;
  position:absolute;
  bottom:-35px;
  left:20px;
  z-index:-1;
  transform-origin:0 0;
  transform:translateY(-50px);
  transition:transform 200ms ease-out;
}
#subscription.has-error .input {
  outline:1px solid #b24d4d;
  outline-offset:-1px;
}
#subscription.has-error .error { transform:translateY(0); }
@media only screen and (max-width: 1240px) {
  #subscription {
    height:auto;
    margin-left:0;
    padding:60px 30px;
  }
}
@media only screen and (max-width: 690px) {
  #subscription .form { display:block; }
  #subscription .big-button {
    text-align:left;
    width:100%;
    min-width:0;
  }
  #subscription .error { bottom:-125px; }
}
.news-list .header .title {
  font-size:50px;
  margin-top:3px;
}
#members-events-wrapper {
  background:#e4e5e7;
  padding:90px 0;
}
#members-events-wrapper .inner {
  margin:auto;
  max-width:1200px;
  display:flex;
}
@media only screen and (max-width: 1000px) {
  #members-events-wrapper { padding:60px 0; }
  #members-events-wrapper .inner {
    display:block;
    width:100%;
  }
}
@media only screen and (max-width: 500px) {
  #members-events-wrapper { padding:30px 0; }
}
#resources-links-wrapper {
  overflow:hidden;
  background-color:#173c86;
}
#resources-links-wrapper .inner {
  display:flex;
  margin:auto;
  position:relative;
  width:100%;
  max-width:1240px;
}
@media only screen and (max-width: 1240px) {
  #resources-links-wrapper { background-color:#ffffff; }
  #resources-links-wrapper .inner { display:block; }
}