/*
  With Intent — responsive overrides
  Ported from the Xavier theme (css/responsive.css), plus the Advanced WP
  Columns breakpoint that used to be injected inline by the plugin.
*/

/*---------------- RESPONSIVE 1200px ----------------*/

@media all and (max-width: 1200px) {

  img.size-full {
    width: 92%;
    height: auto;
    margin: 0 3%;
  }

  /* Was injected by the Advanced WP Columns plugin. */
  .csColumn {
    clear: both !important;
    float: none !important;
    text-align: center !important;
    margin-left: 2.5% !important;
    margin-right: 2.5% !important;
    width: 95% !important;
  }

  .csColumnGap {
    display: none !important;
  }

  .content > div {
    flex-direction: column;
  }

  .content p {
    line-height: 1.40em;
  }

  #intro_id {
    height: 700px;
  }

  .display1,
  .display2 {
    flex-direction: column;
    height: 1000px;
  }

  .inside_description {
    flex-direction: column-reverse;
    height: 600px;
  }

  .inside_description p {
    font-size: 30px;
  }

  .sidebar .button {
    min-width: 130px;
    margin: 0 0 0 40px;
  }

  .sidebar .logo {
    top: 20px;
    right: 10px;
  }

  .sidebar {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    padding-top: 0;
  }

  .widget {
    flex-direction: row;
  }

  /*---------------- RESIZE IN PX ----------------*/

  nav {
    height: 98px;
  }

  section article {
    scroll-margin-top: 98px;
  }

  nav ul {
    font-size: 17px;
    margin-right: 20px;
  }

  nav li {
    margin: 10px 35px;
  }

  nav .logo_with_intent {
    width: 145px;
    height: 145px;
    margin: 0 0.7vw;
  }

  nav .logo_top {
    margin: 0;
    top: 21px;
    width: 90px;
    height: 90px;
  }

  .button {
    padding: 10px;
    margin: 40px;
    font-size: 1.3em;
  }

  .post p {
    font-size: 2.3em;
    margin: 40px 20px 290px 20px;
  }

  .page p {
    font-size: 3.3em;
    margin: 0 200px;
    width: 62%;
  }

  #intro_id .intro p {
    margin: 0 auto;
    font-size: 3.3em !important;
    width: 70%;
  }

  .secondary p {
    margin: 100px 140px;
    font-size: 30px;
    width: 65%;
  }

  .widget_h2 {
    font-size: 1.2em;
    margin: 5px;
  }

  .widget {
    margin: 20px;
  }

  .sidebar p {
    font-size: 1.25em;
    margin: 5px;
  }

  .logo_middle img {
    height: inherit;
  }

  .content div div {
    font-size: 21px;
  }

  .content h2 {
    font-size: 56px;
    margin-bottom: 25px;
  }

  .logo_bottom_posts img {
    height: inherit;
  }

  .logo {
    height: inherit;
  }

} /* fin de @media 1200 */


/*---------------- RESPONSIVE 900px ----------------*/

@media all and (max-width: 900px) {

  .widget {
    flex-direction: column;
  }

  .display2 .page p,
  .display1 .page p {
    margin: 40px 20px 100px 20px;
    font-size: 3em;
  }

  /*---------------- MENU HAMBURGER ----------------*/

  nav {
    justify-content: flex-start;
  }

  nav h1 {
    position: absolute;
    left: 10px;
    height: 98px;
  }

  nav ul {
    position: absolute;
    right: 30px;
    display: none;
    flex-direction: column;
    font-size: 2.5em;
    background-color: white;
    border: black solid;
    border-width: 1px 1px 0 1px;
    padding: 0;
    margin-top: 38px;
    justify-content: initial;
  }

  nav ul.is-open {
    display: flex;
  }

  nav li {
    background-color: white;
    width: 100%;
    border: black 1px solid;
    height: 100%;
    margin: 0;
    padding: 20px 0;
    border-width: 0 0 1px 0;
  }

  nav li a {
    margin: 30px;
  }

  .logo_top {
    display: none;
  }

  .logo_with_intent {
    padding-left: 30px;
  }

  .menu-menu-container {
    position: absolute;
    right: 40px;
  }

  /* L'icône hamburger */

  .header__icon {
    position: absolute;
    display: block;
    cursor: pointer;
    right: 70px;
  }

  .header__icon:after {
    content: ' ';
    position: absolute;
    display: block;
    width: 2rem;
    height: 0;
    top: 16px;
    box-shadow: 0 20px 0 3px black, 0 32px 0 3px black, 0 44px 0 3px black;
  }

  /* Inside pages */

  #main-inner > div {
    width: 90%;
    font-size: 37px;
  }

  #main-inner h2 {
    font-size: 47px;
  }

} /* fin de @media 900 */


/*---------------- RESPONSIVE 700px ----------------*/

@media all and (max-width: 700px) {

  #intro_id {
    height: 800px;
  }

  .contact {
    height: 1200px;
  }

  .sidebar {
    flex: 2;
    flex-direction: column;
  }

  /* Was `left: 200px`, which only stayed on screen because the original
     shipped a fixed `width=600px` viewport. Pin it to the right edge instead
     so it lands in the same place at any real phone width. */
  .sidebar .logo {
    top: 10px;
    left: 0;
    align-self: flex-end;
    margin-right: 20px;
  }

  .sidebar .button {
    min-width: inherit;
    margin: 40px 0 10px 0;
  }

  #intro_id .intro p {
    font-size: 2.8em !important;
    width: 90%;
  }

  .content div div {
    margin: 0;
    font-size: 32px;
    text-align: left !important;
  }

} /* fin de @media 700 */


/*---------------- RESPONSIVE 480px ----------------*/
/*
  New. The original theme stopped at 700px because it shipped a fixed
  `width=600px` viewport, so a phone never rendered narrower than 600 CSS px.
  With a real `width=device-width` viewport the 700px type is oversized on a
  375–430px screen, so scale the headline sizes down one step. Nothing here
  changes the layout — only type size and a little breathing room.
*/

@media all and (max-width: 480px) {

  #intro_id {
    height: 620px;
  }

  #intro_id .intro p {
    font-size: 1.9em !important;
    width: 88%;
  }

  .display1,
  .display2 {
    height: 800px;
  }

  .display2 .page p,
  .display1 .page p,
  .page p {
    font-size: 1.9em;
    margin: 40px 20px 60px 20px;
    width: auto;
  }

  .post p {
    font-size: 1.6em;
    margin: 40px 20px 160px 20px;
  }

  .secondary p,
  .secondary-home {
    margin: 40px 30px;
    font-size: 1.3em;
    width: auto;
  }

  .intro-post {
    font-size: 1.9em !important;
    margin-bottom: 120px !important;
  }

  .inside_description {
    height: 500px;
  }

  .inside_description p,
  .description-post {
    font-size: 1.5em;
    margin: 40px 30px;
    width: auto;
  }

  .button {
    padding: 8px 14px;
    margin: 24px;
    font-size: 1em;
  }

  .contact {
    height: 1000px;
  }

  .content h2 {
    font-size: 1.9em;
    margin-bottom: 14px;
  }

  .content div div {
    font-size: 1em;
  }

  .logo_middle img {
    height: 90px;
  }

  .logo_bottom_posts img {
    height: 70px;
  }

  #main-inner > div {
    width: 100%;
    font-size: 1em;
  }

  #main-inner h2 {
    font-size: 1.6em;
  }

  .contact-form {
    width: 100%;
  }

  .field--half,
  .field--right {
    width: 100%;
    float: none;
  }

  nav ul {
    font-size: 1.4em;
    right: 15px;
  }

  nav li {
    padding: 12px 0;
  }

  nav li a {
    margin: 16px;
  }

} /* fin de @media 480 */