/*
Theme Name: IDD Responsive
Description: Feuille de style responsive pour le theme IDD
Author: Théra
*/


@media only screen and (max-width: 1024px) { /* vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv 1024 */

/******* On rajoute des marges un peu partout *******/

/* - Header, footer, home, pages poles */

  .head-tools,
  .site-footer .widget-area,
  .home-details .thera-flex,
  .pole-teams .thera-flex {
    margin: 0 1em;
  }

  /* - Liens, contact */
  .thera-section.links,
  .thera-section.contact {
    padding: 1em 1em 0;
  }

  /* - 404 */
  .error404 .page-content {
    padding-right: 1em;
  }

  /* - Search */
  .search .content-area {
    padding: 0 1em;
  }

  /* Sticky bar */

  .slogan {
    font-size: 0.9em;
    text-align: center;
  }

  /**** Header **/
  .secure-access {
    right: 85px;
  }

}

@media only screen and (max-width: 899px) { /* vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv 899 */

  /* On descend un coup la police */

  body {
    font-size: 16px;
  }

  /* Header */

  .site-caption {
    font-size: 1.5em;
  }
}

@media only screen and (min-width: 768px) { /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 768 */
  .js .main-navigation ul, .js .main-navigation ul ul, .js .main-navigation > div > ul {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
}

@media only screen and (max-width: 767px) { /* vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv 767 */

    /* header */

    .site-header {
    height: 75px;
  }

  .custom-logo-link img {
    max-height: 75px;
  }

  .site-caption {
    font-size: 1em;
    padding-left: 1.2em;
    margin: 0;
  }

  .site-header .search-form {
    top: 23px;
  }

  .site-header .search-form input[type="search"] {
    display: inline-block;
    max-width: 100px;
    padding-left: 1.5em;
    background: rgba(255, 255, 255, 0.5) url('/wp-content/uploads/2017/05/search-icon.png') no-repeat 5px 2px;
    height: 18px;
    }

  .site-header .search-form input::-moz-placeholder {
    color: #5D5E60;
    font-size: 0.8em;
  }

  .secure-access {
    right: 65px;
    top: 0;
  }

  .lang-switch {
    font-size: 0.8em;
  }


  /* menu */

  .menu-toggle {
    z-index: 21 /* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Z-INDEX 21 */;
    position: absolute;
    top: -40px;
    right: 20px;
    padding: 0;
    color: white;
    font-weight: 500;
    font-size: 1.2em;
    transition: color 0.2s;
  }

  .main-navigation.toggled-on .menu-toggle {
    position: fixed;
    top: 43px;
    right: 20px;
    color: #333;
  }

  .js .main-navigation.toggled-on > div > ul {
    display: block;
    right: 0;
  }

  .js .main-navigation ul, .main-navigation .menu-item-has-children > a > .icon,
  .main-navigation .page_item_has_children > a > .icon, .main-navigation ul a > .icon {
      display: block;
      right: -40%;
      transition: right 0.2s;
  }


  .main-navigation ul {
    position: fixed;
    z-index: 20; /* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Z-INDEX 20 */
    width: 40%;
    height: 100%;
    right: 0;
    top: 0;
    background-color: #e1e1e1;
  }

  .main-navigation > div > ul {
    padding: 85px 20px 20px 10px;
    border-top: none;
    border-left: 5px solid #333;
  }

  .navigation-top .menu-item {
    width: 100%;
  }

  .navigation-top .menu-item a {
    text-align: right;
  }

  .navigation-top .current-menu-item,
  .navigation-top .menu-item {
    background-color: #e1e1e1;
  }


  .navigation-top .current-menu-item a {
    color: #5FA751;
  }

  /* content */

  .thera-section {
    padding-left: 1em;
    padding-right: 1em;
  }

  /* home */

  .home .panel-image, .home .single-featured-image-header {
    height: 10em;
    background-size: cover;
    background-position: right center;
  }

  .home-slogan {
      top: -9.5em;
      left: 0;
      width: 100%;
  }

  .home-slogan p {
      width: 95%;
      max-width: 450px;
      font-size: 1.5em;
      margin: 5px auto;
  }

  .edito hr + p {
    margin: 0 auto -1.5em;
  }

  .home-pres .thera-flexbox {
    min-width: 210px;
    max-width: 210px;
    height: 210px
  }

  .home-details {
    padding-left: 0;
    padding-right: 0;
  }

  /* pages poles */

  .pole-teams {
    padding-left: 0;
    padding-right: 0;
    background: #F2F5F7;
  }

  .pole-teams .thera-flexbox {
    margin-bottom: 0;
  }

  .pole-teams .thera-flexbox .plus img {
      width: 75px;
  }


  .l2-content {
    padding-left: 0;
    padding-right: 0;
  }

  .l2-content .thera-flex {
    padding: 2em 1em;
  }

  .animated-background {
    display: none;
  }

  .l2.su-tabs {
      padding-top: 0;
  }

  .l2-content .idd-supports {

    padding: 2em 0em 1em 2em;
    background-position: 1em 0.5em;
    background-size: 50px;
  }

  .l2-content .idd-supports::before {
      margin-left: 2em;
      margin-top: -0.8em;
  }

  .l2-content .idd-supports ul {
      margin-top: 2em;
  }


  /* Search */

  .search-form .search-submit {
    top: 3px;
    bottom: 0;
    max-height: 51px;
  }

  /* Error */
  .error-404.not-found {
    padding: 0 1em;
  }

  .error404 .search-form .search-submit {
    top: 2.5px;
  }

  /* Sticky bar */

  .sticky-bar {
    border-top: #134589 5px solid;
  }

  .sticky-bar .logo {
    background-position: center center;
  }

  .sticky-bar .slogan {
    font-size: 0.6em;
  }

  .sticky-bar .top {
      position: absolute;
      right: 5px;
      background-color: #ddd;
      width: 28px;
      height: 28px;
      border-radius: 5px;
      top: unset;
      bottom: 0;
  }

}

@media only screen and (max-width: 479px) { /* vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv 479 */

  /* Header */
  .site-caption {
      margin-top: -35px;
  }

  .secure-access {
    z-index: 21; /* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Z-INDEX 21 */
    position: fixed;
    top: unset;
    bottom: 5px;
    right: 20px;
  }

  .secure-access,
  .lang-switch,
  .site-header .search-form {
    position: fixed;
    z-index: 21;
    width: 0;
    right: -75%;
    overflow: hidden;
    text-align: right;
    transition: width 0.2s, right 0.2s;
  }

  .toggled-on .secure-access,
  .toggled-on .lang-switch,
  .toggled-on .search-form {
    width: 70%;
    right: 20px;
  }

  .toggled-on .search-form {
    width: 30%;
  }


  .main-navigation ul {
    width: 75%;
  }

  .js .main-navigation ul, .main-navigation .menu-item-has-children > a > .icon, .main-navigation .page_item_has_children > a > .icon, .main-navigation ul a > .icon {
    right: -75%;
  }

  .menu-toggle {
      font-size: 1em;
      top: -35px;
  }

  .main-navigation.toggled-on .menu-toggle {
    top: 47px;
  }

  /* Sticky bar */

  .sticky-bar {
    display: none;
  }

  /* Home */
  .home-slogan p {
    font-size: 1.2em;
    margin: 4px auto;
    padding: 5px 5px;
    text-align: center;
  }

  .home-pres .thera-flexbox {
      margin: 1em auto;
  }

  /* Pages */

  .page .panel-content .entry-title, .page-title, body.page:not(.twentyseventeen-front-page) .entry-title {
    top: -80px;
  }

  body.page-id-108:not(.twentyseventeen-front-page) .entry-title, body.page-id-118:not(.twentyseventeen-front-page) .entry-title, body.page-id-110:not(.twentyseventeen-front-page) .entry-title, body.page-id-121:not(.twentyseventeen-front-page) .entry-title {
    top: 0;
  }

  /* Links */

  .links .thera-flexbox {
    min-width: 200px;
    text-align: justify;
  }

  /* Teams */
  .team-pres .thera-flexbox {
      margin: 0 auto;
  }

  .principles .thera-flex {
    padding: 1em 0;
  }

  /* 404 */

  .error404 .page .panel-content .entry-title, .page-title, body.error404 .entry-title {
    top: unset;
  }

}


@media only screen and (max-height: 599px) { /* vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv Height 600 */
  .sticky-bar {
    display: none;
  }
}