/* ==========================================================================
   03_GENERALS: SITE
   --------------------------------------------------------------------------
   * README

   * DOCUMENT
   * HEADER
   * BANNER
   * MAIN
   * FOOTER
   ========================================================================== */

/* README
   ========================================================================== */

/*!
 * Styles on this stylesheet are the Site default styles.
 * That means they apply to the HTML components you can find in the
 * BaseTemplate.nopage file, and therefore, they apply to all site pages.

 * If you need to deal with an exception to these Site default styles, you
 * should manage it by adding a .body--modifier class via
 * {% block extraBodyClass %}{% endblock %} in the .page file that requires it,
 * and develop the given exception nested to that body modifier class in
 * stylesheet #17 under the corresponding page subtitle.

 * If you need to deal with styles for a new type of Site component or a new
 * sub-element for an existing one, you should develop them in this stylesheet,
 * under a new component subtitle or under the correspondent one accordingly,
 * separating them in Structure, Behaviour or Appearance styles as appropriate.
 */

/* DOCUMENT
   ========================================================================== */

@font-face {
    font-family: 'CircularStd';
    src: url('../fonts/CircularStd-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'CircularStd-Medium';
    src: url('../fonts/CircularStd-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal
}

/* Structure
   -------------------------------------------------------------------------- */
.body {
    margin: 0 auto;
    width: 100%;
}

[class*="__wrapper"] {
    margin: 0 auto;
    width: 100%;
    max-width: 1275px;
    height: 100%;
    padding-left: 24px;
    padding-right: 24px;
}

/* Behaviour
   -------------------------------------------------------------------------- */
.body {
    overflow-y: scroll;
}

/* Appearance
   -------------------------------------------------------------------------- */
html {
    background-color: #FFFFFF;
}

.body {
    background-color: #FFFFFF;
    font-family: 'CircularStd', Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: normal;
    font-weight: normal;
    font-style: normal;
    color: #2D2D2D;
}

@media all and (max-width:1024px) {
  /* Structure
   -------------------------------------------------------------------------- */
  [class*="__wrapper"] {
      padding-left: 32px;
      padding-right: 32px;
  }
}

/* HEADER
   ========================================================================== */

/* Structure
   -------------------------------------------------------------------------- */
.header {
    margin: 0 auto;
    width: 100%;
}

.header__wrapper {
    padding-top: 9px;
    padding-bottom: 9px;
}

.header__logo {
    float: left;
    padding: 9px 0;
}

.header__logo--default {
    width: 161px;
    height: 42px;
}

/* Behaviour
   -------------------------------------------------------------------------- */

/*
 * 1. To make the header fixed.
 */
.body__content {
    padding-top: 60px; /* 1 */
}

.header {
    position: fixed; /* 1 */
    top: 0; /* 1 */
    z-index: 4; /* 1 */
}

/* Appearance
   -------------------------------------------------------------------------- */
.header {
    -webkit-box-shadow: 0 0 12px 0 rgba(91, 91, 91, .3);
    box-shadow: 0 0 12px 0 rgba(91, 91, 91, .3);
    background-color: #222b3b;
    color: #FFFFFF;
}

.header__logo h1 {
  font-size: 20px;
  font-weight: 900;
}

@media all and (max-width:768px) {
  /* Structure
   -------------------------------------------------------------------------- */
  .header__logo {
      float: right;
  }

  /* Behaviour
   -------------------------------------------------------------------------- */
  .header__logo--nav {
      display: none;
  }

  /* Appearance
   -------------------------------------------------------------------------- */
  .header__logo {
      font-size: 20px;
      font-weight: 900;
      text-align: right;
  }
}

@media all and (max-width:415px) {
  /* Behaviour
   -------------------------------------------------------------------------- */
  .header__logo--nav {
      display: block;
  }
}

/* BANNER: MAIN
   ========================================================================== */

/* Structure
   -------------------------------------------------------------------------- */
.banner {
    margin: 0 auto;
    width: 100%;
}

.banner__wrapper {
    padding-top: 90px;
    padding-bottom: 90px;
}

.home .banner__wrapper {
    padding-top: 117px;
    padding-bottom: 117px;
}

.banner__subtitle {
    margin-top: 20px;
}

.banner__actions {
    margin-top: 24px;
}

/* Behaviour
   -------------------------------------------------------------------------- */
.banner {
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
}

/*
 * 1. To center content vertically.
 */
.banner__content {
    display: table; /* 1 */
    width: 100%; /* 1 */
    height: 100%; /* 1 */
}

.banner__content>* {
    display: table-cell; /* 1 */
    vertical-align: middle; /* 1 */
}

/* Appearance
   -------------------------------------------------------------------------- */
.banner {
    background-color: #F5F5F5; /* var(--color--site) in an IE free world */
    color: #FFFFFF;
}

.banner--main {
    background-image: url('../images/banner--main.jpg');
}

.home .banner--main {
    background-image: url('../images/banner--main--home.jpg');
}

.banner--main .banner__title {
    color: #222b3b;
    font-family: 'CircularStd-Medium', Arial, Helvetica, sans-serif;
    font-size: 48px;
    font-weight: 900;
    line-height: 1.5;
}

.banner__subtitle {
    font-size: 22px;
}

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

    /* Structure
       -------------------------------------------------------------------------- */

    .banner__wrapper {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .home .banner__wrapper {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .banner__title>* {
        display: block;
    }

    /* Appearance
       -------------------------------------------------------------------------- */
    .banner--main .banner__title {
        font-size: 32px;
    }

}

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

    /* Appearance
       -------------------------------------------------------------------------- */
    .banner--main {
        background-image: url('../images/banner--main--mobile.jpg');
    }

    .home .banner--main {
        background-image: url('../images/banner--main--home--mobile.jpg');
    }

}

/* MAIN
   ========================================================================== */

/* Structure
   -------------------------------------------------------------------------- */
.main {
    margin: 0 auto;
    width: 100%;
}

.main__wrapper {
    padding-top: 48px;
    padding-bottom: 48px;
}

.home .main__wrapper {
    max-width: 100%;
    padding: 0;
}

/* Appearance
   -------------------------------------------------------------------------- */
.main {
    background-color: #FFFFFF;
    color: #2D2D2D;
}

/* FOOTER
   ========================================================================== */

/* Structure
   -------------------------------------------------------------------------- */
.footer {
    margin: 0 auto;
    width: 100%;
}

.footer__wrapper {
    padding-top: 20px;
    padding-bottom: 20px;
}

.footer__rights {
    float: right;
}

.footer__langs {
    float: left;
}

.footer .link {
    margin: 0 8px;
}

/* Behaviour
   -------------------------------------------------------------------------- */
.footer {
    text-align: center;
}

/* FOOTER STICKY
  ========================================================================== */

.body--footer-sticky .body__content {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   min-height: 100vh;
}

.body--footer-sticky .main {
   flex: 1 0 auto;
}

.body--footer-sticky .footer {
   flex-shrink: 0;
}

/* Appearance
   -------------------------------------------------------------------------- */
.footer {
    background: #222b3b;
    color: #FFFFFF;
}

.footer .link {
    color: inherit;
}

.footer__langs {
    font-size: 18px;
    font-weight: 900;
}

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

    /* Structure
       -------------------------------------------------------------------------- */
    .footer__rights {
        float: none;
    }

    .footer__rights span {
        display: block;
        margin-bottom: 4px;
    }

    .footer__langs {
        display: none;
    }

}

/* NEW ELEMENTS
  ========================================================================== */

/* Structure
   -------------------------------------------------------------------------- */

/* Behaviour
   -------------------------------------------------------------------------- */

/* Appearance
   -------------------------------------------------------------------------- */
.home .article__content {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 100%;
}

.box__title,
.box__info {
    width: 50%;
    padding: 48px 120px;
}

.box__title--odd,
.box__info--even {
    background-color: #f3f5f9;
}

.box__title__wrapper,
.box__info__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    max-width: 405px;
}

.box__title__wrapper {
    margin: 0 0 0 auto
}

.box__info__wrapper {
    margin: 0;
}

.paragraph {
    line-height: 1.5;
}

.cards {
    display: flex;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
}

.home .cards {
    background-color: #222b3b;
    display: block;
    padding: 48px;
}

.home .cards__wrapper {
    display: flex;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    padding: 0;
}

.cards__card {
    background: #FFFFFF;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 10px 20px 0 rgba(34, 127, 255, 0.15);
    box-shadow: 0 10px 20px 0 rgba(34, 127, 255, 0.15);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    margin: 0 12px;
    width: 300px;
}

.cards__card__banner {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    -ms-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
    height: 100px;
}

.cards__card__banner--dimitri {
    background-image: url(../images/dimitri.jpg);
}

.cards__card__banner--julian {
    background-image: url(../images/julian.jpg);
}

.cards__card__content {
    padding: 24px;
}

.cards__card__content img {
    margin-bottom: 16px;
}

.cards__card__content__name,
.cards__card__content__title {
    display: block;
    line-height: 1.5;
}

.cards__card__content__name {
    font-size: 18px;
    font-weight: 900;
}

.home .cards__card__content__name {
    margin-bottom: 8px;
}

.cards__card__content .link {
    display: inline-block;
    margin-top: 16px;
}

/* modals */
.modal__header__box {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
}

.modal__header__box__photo {
    margin-right: 16px;
}

.modal__header__box__photo img {
    width: 59px;
}

@media all and (max-width:1024px) {
  .box__title,
  .box__info {
      width: 100%;
      padding: 48px 32px;
  }
  .box__title__wrapper,
  .box__info__wrapper {
      display: block;
      max-width: 100%;
  }

  .home .cards {
      padding: 48px 0;
  }
}

@media all and (max-width:415px) {
  .cards {
      flex-direction: column;
  }

  .cards__card {
      margin: 12px auto;
      width: 100%;
  }

  .home .cards__card {
      margin: 0 12px;
      width: 300px;
  }
}