@media screen and (max-width: $tablette) {
  body.point-out {
    cursor: pointer !important;
  }

  body {
    nav.vertical[side-nav].slide {
      padding-bottom: 70px;
    }
    nav.vertical[side-nav] {
      background-color: $primary;
      border-left: 10px solid $accent;
      padding-left: 0;
      padding-bottom: 70px;
      h2 {
        color: $white;
        font-size: 18px;
      }
      ul {
        border-left: none !important;
        li {
          a.selected {
            background: $shadow;
          }
          a {
            color: $white;
            padding-right: 20px;
            padding-top: 8px;
            padding-bottom: 8px;
            i.close,
            i.edit {
              display: none;
            }
          }
        }
      }
      a.classic-link {
        background: $white;
        &:hover {
          color: $accent;
        }
      }
    }

    .mobile-nav-opener {
      @include fonticon;
      background: none;
      padding: 15px;

      &::before {
        content: "\e84f";
        font-size: 21px;
        color: $white;
        position: absolute;
        top: 13px;
        left: 10px;
      }
      &::before:hover {
        color: $accent;
      }
    }
  }
  //// end body

  .application-title {
    i.blog,
    i.wiki {
      display: inline-block !important;
    }
  }
  h1 {
    font-size: 18px;
    margin-bottom: 9px;
    line-height: 30px;
  }
  h1.application-title {
    font-size: 16px;
    span {
      color: $white;
    }
  }

  [subtitle] {
    background: $primary;
  }

  .navbar {
    height: 50px;
  }
  nav.vertical[side-nav] {
    top: 60px;
  }
  nav.horizontal {
    right: 0;
    height: 50px;
    > a,
    > popover a,
    > span a {
      font-size: 14px;
      margin-left: 2px;
      height: 50px;
      line-height: 50px;
    }
    > popover a {
      display: block;
    }
    .searchPortal a {
      display: inline;
    }

    i.mail span.new-mails {
      font-size: 10px;
      top: -43px;
      left: 15px;
    }
    i.disconnect {
      width: 22px !important;
      margin-right: 0;
      margin-left: 0;
    }
    > a i::before,
    popover > a i::before {
      font-size: 25px;
    }
  }

  nav.vertical.half-stamps {
    & > div {
      width: 520px;
      margin: 10px auto;
      float: none;
    }
    article {
      width: auto;
      float: none !important;
      margin-left: auto;
      margin-right: auto;
    }
    article.selected {
      background: $primary-light;
    }
    input[type="checkbox"] {
      position: absolute;
      left: 78px;
      z-index: 2;
    }
  }

  .previews {
    width: 95%;
    margin: auto;
  }

  body {
    font-size: 14px;
    .material section.main {
      padding: 8px 15px;
      padding-bottom: 100px;
      top: 52px;
    }
  }

  .forgot.panel {
    h1 {
      width: 100%;
      text-align: center;
      font-size: 30px;
      margin-top: 35px;
    }
  }

  h2 + article.rigid-grid .three-mobile + .margin-two {
    margin-left: 25%;
    form {
      .bottom-locked input {
        margin-bottom: 10px;
        font-size: 13px;
      }
    }
  }

  .twelve-mobile input[type="search"] {
    margin-top: 15px;
  }

  article form .rigid-grid > .margin-two {
    margin-left: 25%;
    input[type="text"] {
      font-size: 13px;
    }
    .bottom-locked > .right-magnet {
      margin-bottom: 10px;
    }
  }

  .rigid-grid {
    .side-col {
      nav.vertical {
        .illustration {
          img {
            margin: 0;
          }
          input[type="checkbox"] {
            left: 5px;
          }
        }
      }
    }

    .option-row {
      //remove material card fx
      & > div {
        box-shadow: none;
        background: transparent;
      }
    }

    //actu maincol
    .main-col {
      overflow: hidden;
      .cell button.microbox {
        float: right;
      }
      //comments on actu
      .cell.right-magnet {
        margin: 0 0 10px;
        //create blog button
        a.button {
          float: right;
        }
      }
    }
  }

  //home filters
  .widgets-friend app-title ~ .twelve.cell {
    margin-top: 15px;
  }

  .toggle-panel {
    right: -15px;
    top: 0;
  }
  .toggle-panel.hide + ul.icons-tabs {
    right: -15px;
  }

  ul.icons-tabs {
    top: 0;
    right: 285px;
  }

  .microbox-material .filters-icons li {
    margin: 2px;
  }

  .account {
    .avatar + div {
      margin: 25px 0 45px 100px;
    }
    .sheet h2 {
      margin: 25px 0 0 100px;
    }

    .mood icons-select {
      .options-list.icons-view {
        width: auto;
      }
      .options-list.icons-view.toggle-visible {
        box-shadow: 0px 3px 2px 1px $neutral-grey;
      }
    }
    .icons-select .options-list.toggle-visible {
      height: auto;
    }

    i.show-details::before {
      content: "\e811";
    }
  }

  .side-panel-right {
    position: absolute;
    top: 0;
    background: $background;
  }

  //forum
  body {
    nav.illustrated-links ul li {
      .tiny-illustration + .content {
        padding-left: 5px;

        h1 {
          padding-top: 5px;
        }
      }
    }

    nav.illustrated-links {
      ul.secondary-list {
        padding-left: 62px;
      }
    }

    .whose-bubble {
      text-align: left !important;
      margin-bottom: 10px;
      .image {
        margin: 0;
        padding: 0;
        img {
          position: absolute;
          left: 0;
          bottom: -60px;
          width: 50px;
          height: 50px;
        }
      }
    }
    .whose-bubble + article.bubble {
      margin-left: 60px;
    }
    .bubble-container.alternate-container + resource-right {
      margin-top: 30px;
      display: block;
    }
  }
  ///end forum

  .microbox-wrapper {
    background: rgba($white, 0.6);
  }
  .microbox-content {
    background: $white;
    box-shadow: 0 0 3px 2px rgba($black, 0.2);
  }

  .microbox-content container {
    float: none;
    text-align: left;

    .checkbox-filters {
      ul li {
        padding: 20px;
      }
    }
  }

  //for lightbox medialib in side nav
  body nav.vertical[side-nav] .lightbox {
    ul li a {
      color: $primary;
    }
    ul li a.selected {
      color: $accent;
    }
    h2 {
      color: $primary;
    }
  }

  div.flashmsg {
    margin-right: 60px;
  }

  // end tablettes
}