@charset "UTF-8";
/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* placeholder: proportions vidéo youtube responsive */
/* placeholder : width de 100vw */
/* changer delay selon position dans la liste*/
/* changer width selon position dans la liste */
#block-webform,
.block-content-formulaire-intro {
  background-color: #f1f1f1;
  padding: 0 0 50px 0;
}
body.node-2 #block-webform,
body.node-2 .block-content-formulaire-intro {
  padding-top: 60px;
}
body.node-3 #block-webform,
body.node-3 .block-content-formulaire-intro {
  padding-top: 60px;
}
#block-webform .wrapper,
.block-content-formulaire-intro .wrapper {
  max-width: calc(1440px - 240px);
  width: calc(100% - 50px);
  margin: 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
}
#block-webform .wrapper .field--name-body,
.block-content-formulaire-intro .wrapper .field--name-body {
  width: 100%;
  margin: 0 0 0 0;
}
#block-webform .wrapper .field--name-body h2,
.block-content-formulaire-intro .wrapper .field--name-body h2 {
  font-size: 2.375em;
  font-family: "basier_squarebold";
  line-height: 100%;
  margin: 0 0 0 0;
  color: #2C3E50;
}
#block-webform .wrapper .field--name-body p,
.block-content-formulaire-intro .wrapper .field--name-body p {
  font-size: 1.125em;
  color: #3c546c;
  line-height: 140%;
  margin: 35px 0 50px 0;
}
#block-webform .wrapper form div[data-drupal-messages],
.block-content-formulaire-intro .wrapper form div[data-drupal-messages] {
  width: 100%;
  order: 3;
}
#block-webform .wrapper form div[data-drupal-messages] .messages--error,
.block-content-formulaire-intro .wrapper form div[data-drupal-messages] .messages--error {
  background-color: #fff;
  box-shadow: 0 0 0 #d9534f;
  border: 0;
  width: calc(100% - 30px);
  margin: 0;
  color: #d9534f;
  font-family: "basier_squaremedium";
  background-position: top 15px right 15px;
  padding: 15px 15px 15px 15px;
}
#block-webform .wrapper form div[data-drupal-messages] .messages--error li,
.block-content-formulaire-intro .wrapper form div[data-drupal-messages] .messages--error li {
  margin: 3px 0 0 0;
}
#block-webform .wrapper form .form-wrapper,
.block-content-formulaire-intro .wrapper form .form-wrapper {
  width: 100%;
}
#block-webform .wrapper form .form-wrapper .form-type-textfield input,
#block-webform .wrapper form .form-wrapper .form-type-email input,
.block-content-formulaire-intro .wrapper form .form-wrapper .form-type-textfield input,
.block-content-formulaire-intro .wrapper form .form-wrapper .form-type-email input {
  width: calc(100% - 30px);
  border: 0;
  padding: 15px;
  color: #2C3E50;
  font-size: 1em;
  font-family: "basier_squaremedium";
}
#block-webform .wrapper form .form-wrapper .form-type-textfield input::-webkit-input-placeholder,
#block-webform .wrapper form .form-wrapper .form-type-email input::-webkit-input-placeholder,
.block-content-formulaire-intro .wrapper form .form-wrapper .form-type-textfield input::-webkit-input-placeholder,
.block-content-formulaire-intro .wrapper form .form-wrapper .form-type-email input::-webkit-input-placeholder {
  color: #3c546c;
  font-size: 1em;
  font-family: "basier_squaremedium";
}
#block-webform .wrapper form .form-wrapper .form-type-textfield input::-moz-placeholder,
#block-webform .wrapper form .form-wrapper .form-type-email input::-moz-placeholder,
.block-content-formulaire-intro .wrapper form .form-wrapper .form-type-textfield input::-moz-placeholder,
.block-content-formulaire-intro .wrapper form .form-wrapper .form-type-email input::-moz-placeholder {
  color: #3c546c;
  font-size: 1em;
  font-family: "basier_squaremedium";
}
#block-webform .wrapper form .form-wrapper .form-type-textfield input:-ms-input-placeholder,
#block-webform .wrapper form .form-wrapper .form-type-email input:-ms-input-placeholder,
.block-content-formulaire-intro .wrapper form .form-wrapper .form-type-textfield input:-ms-input-placeholder,
.block-content-formulaire-intro .wrapper form .form-wrapper .form-type-email input:-ms-input-placeholder {
  color: #3c546c;
  font-size: 1em;
  font-family: "basier_squaremedium";
}
#block-webform .wrapper form .form-wrapper .form-type-textfield input:-moz-placeholder,
#block-webform .wrapper form .form-wrapper .form-type-email input:-moz-placeholder,
.block-content-formulaire-intro .wrapper form .form-wrapper .form-type-textfield input:-moz-placeholder,
.block-content-formulaire-intro .wrapper form .form-wrapper .form-type-email input:-moz-placeholder {
  color: #3c546c;
  font-size: 1em;
  font-family: "basier_squaremedium";
}
#block-webform .wrapper form .form-wrapper .form-actions,
.block-content-formulaire-intro .wrapper form .form-wrapper .form-actions {
  margin: 40px 0 0 0;
}
#block-webform .wrapper form .form-wrapper .form-actions input,
.block-content-formulaire-intro .wrapper form .form-wrapper .form-actions input {
  display: block;
  width: 100%;
  font-size: 1em;
  color: #fff;
  text-decoration: none;
  background-color: #d9534f;
  border-radius: 70px;
  height: 50px;
  line-height: 50px;
  font-family: "basier_squaremedium";
  border: 0;
}
#block-webform .wrapper form .form-wrapper .form-actions input:hover,
.block-content-formulaire-intro .wrapper form .form-wrapper .form-actions input:hover {
  background-color: #52b3d9;
}
#block-webform .wrapper form .webform-confirmation p,
.block-content-formulaire-intro .wrapper form .webform-confirmation p {
  font-size: 1.125em;
  color: #3c546c;
  line-height: 140%;
  font-family: "basier_squaremedium";
}
#block-webform .wrapper form .webform-confirmation a,
.block-content-formulaire-intro .wrapper form .webform-confirmation a {
  color: #3c546c;
}

@media only screen and (min-width: 1024px) {
  #block-webform,
  .block-content-formulaire-intro {
    padding: 0 0 80px 0;
  }
  body.node-2 #block-webform,
  body.node-2 .block-content-formulaire-intro {
    padding-top: 100px;
  }
  body.node-3 #block-webform,
  body.node-3 .block-content-formulaire-intro {
    padding-top: 100px;
  }
  #block-webform .wrapper .field--name-body,
  .block-content-formulaire-intro .wrapper .field--name-body {
    width: 400px;
  }
  #block-webform .wrapper .field--name-body h2,
  .block-content-formulaire-intro .wrapper .field--name-body h2 {
    font-size: 3em;
  }
  #block-webform .wrapper .field--name-body p,
  .block-content-formulaire-intro .wrapper .field--name-body p {
    margin: 35px 0 0 0;
  }
  #block-webform .wrapper form .form-wrapper,
  .block-content-formulaire-intro .wrapper form .form-wrapper {
    width: 420px;
  }
}
@media only screen and (min-width: 1280px) {
  #block-webform,
  .block-content-formulaire-intro {
    padding: 0 0 100px 0;
  }
  body.node-2 #block-webform,
  body.node-2 .block-content-formulaire-intro {
    padding-top: 100px;
  }
  body.node-3 #block-webform,
  body.node-3 .block-content-formulaire-intro {
    padding-top: 100px;
  }
  #block-webform .wrapper,
  .block-content-formulaire-intro .wrapper {
    width: calc(100% - 160px);
  }
  #block-webform .wrapper .field--name-body,
  .block-content-formulaire-intro .wrapper .field--name-body {
    width: 480px;
  }
  #block-webform .wrapper .field--name-body h2,
  .block-content-formulaire-intro .wrapper .field--name-body h2 {
    font-size: 3.75em;
  }
  #block-webform .wrapper .field--name-body p,
  .block-content-formulaire-intro .wrapper .field--name-body p {
    font-size: 1.25em;
  }
  #block-webform .wrapper form .form-wrapper .form-actions input,
  .block-content-formulaire-intro .wrapper form .form-wrapper .form-actions input {
    font-size: 1.25em;
    height: 60px;
    line-height: 60px;
  }
  #block-webform .webform-confirmation p,
  .block-content-formulaire-intro .webform-confirmation p {
    font-size: 1.25em;
  }
}
@media only screen and (min-width: 1440px) {
  #block-webform,
  .block-content-formulaire-intro {
    padding: 0 0 125px 0;
  }
  body.node-2 #block-webform,
  body.node-2 .block-content-formulaire-intro {
    padding-top: 130px;
  }
  body.node-3 #block-webform,
  body.node-3 .block-content-formulaire-intro {
    padding-top: 130px;
  }
}