@media screen and (max-width: 1280px) {
  .library main .objects .object {
    width: calc(100% / 3);
  }
}

@media screen and (max-width: 1000px) {
  body>header .title {
    width: 35%;
  }

  body>header nav {
    width: 65%;
  }

  .library main .objects .object {
    width: calc(100% / 2);
  }
}

@media screen and (max-width: 850px) {
  body.no-scroll>header {
    z-index: 20;
  }

  body.library.no-scroll {
    overflow-y: scroll;
  }

  body>header .title {
    text-align: center;
    font-size: 1.5rem;
    width: 100%;
  }

  body>header .title h1 {
    padding: 0.75rem;
    border-bottom: none;
  }

  body>header nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 5vh;  }

 

  body>header nav .menuButton {
    display: none;
    font-size: 2rem;
    font-weight: normal;
    text-align: center;
    padding: 0.5rem;
  }

  body>header nav .menuButton img {
    height: 2.5rem;
  }

  body.home.no-scroll {
    overflow: scroll;
  }

  .home main {
    display: block;
    margin-bottom: 0;
  }

  .home main #infos h3,
  .home main .newsfeed h3 {
    margin: 0 0 0.5rem 0;
  }

  .home main #infos {
    position: relative;
    padding: 1rem;
    width: 100%;
    top: 4vh;
  }

  .home main #infos .details img {
    width: 100%;
  }

  .home main #infos img {
    width: 100%;
  }

  .home main #infos .arrow {
    padding: 0 5% 0 5%;
  }

  .home main #infos .about,
  .home main #infos .details {
    margin: 0 0 2rem 0;
  }

  .home main #infos .details#formation p:not(:first-of-type) {
    text-indent: 0;
  }

  .home main #infos .details .machines,
  .home main #infos .details .papiers {
    margin: 1rem 0 0 0;
  }

  .home main #infos .details .machines .machine,
  .home main #infos .details .machines ul,
  .home main #infos .details .papiers .machine,
  .home main #infos .details .papiers ul {
    font-size: 1rem;
  }

  .home main #infos #friends ul li{
    font-size: 1rem;
    line-height: 1.25rem;
  }

  .home main .newsfeed {
    position: relative;
    margin-top: 0;
    height: inherit;
    width: 100%;
    top: 0;
  }

  .home main .newsfeed h3 {
    display: block;
  }

  .home main .newsfeed .posts .post.loaded:not(.open):hover {
    outline: none;
  }

  .home main .newsfeed .posts .post {
    padding: 1rem;
  }

  .home main .newsfeed .posts #backBlock {
    display: none;
  }

  .home main .newsfeed .posts .post.open {
    position: relative;
    top: inherit;
    left: 0;
    width: 100%;
    height: inherit;
    padding: 1rem;
    display: block;
  }

  .home main .newsfeed .posts .post.open header {
    margin: 0 0 2rem 0;
    display: block;
  }

  .home main .newsfeed .posts .post.open header h4 {
    width: calc(100% - 2.5rem);
  }

  .home main .newsfeed .posts .post.open header .close {
    top: 1rem;
    right: 1rem;
  }

  .home main .newsfeed .posts .post.open header h4,
  .home main .newsfeed .posts .post.open header .date,
  .home main .newsfeed .posts .post.open header .type {
    margin: 0;
    padding: 0;
    justify-content: flex-start;
    line-height: 1.25rem;
  }

  .home main .newsfeed .posts .post.open header h4 li,
  .home main .newsfeed .posts .post.open header .date li,
  .home main .newsfeed .posts .post.open header .type li {
    padding: 0;
    margin: 0;
  }

  .home main .newsfeed .posts .post.open header h4 {
    margin-top: 1rem;
  }

  .home main .newsfeed .posts .post.open header .date {
    top: 0;
  }

  .home main .newsfeed .posts .post.open .content {
    display: block;
  }

  .home main .newsfeed .posts .post.open .content .images {
    width: 100%;
    max-width: 100%;
    height: auto;
    position: relative;
    top: 0;
    padding: 0;
  }

  .home main .newsfeed .posts .post.open .content .images img {
    text-align: center;
    filter: none;
    max-width: 100%;
  }

  .home main .newsfeed .posts .post.open .content .images iframe {
    height: calc(100vw / 1.9);
  }

  .home main .newsfeed .posts .post.open .content .text {
    margin: 0 0 2rem 0;
    width: 100%;
  }

  .home main .newsfeed .posts .post.open .content .text p {
    width: 100%;
  }

  .library main {
    margin: 3rem 0 0 0;
  }

  .library main #search input {
    right: 3vw;
  }

  .library main #tags {
    display: none;
  }

  .library main .objects {
    display: block;
    margin-top: 5vh;
  }

  .library main .objects .object {
    text-align: center;
    padding: 1rem;
    width: 100%;
    filter: none;
    overflow: visible;
    max-height: none;
    text-align: left;
  }

  .library main .objects .object>header {
    opacity: 1;
  }

  .library main .objects .object>header h4 {
    font-family: "HKBold";
    text-decoration: underline;
    text-transform: capitalize;
  }

  .library main .objects .object .images .image {
    height: inherit;
  }

  .library main .objects .object .images .image img {
    max-height: 70vh;
  }

  .library main .objects .object .general {
    opacity: 1;
  }

  .library main .objects .object.open.loaded:hover {
    background-color: #fff;
  }

  .library main .objects .object.open.loaded {
    position: relative;
    top: 0;
    margin: 0;
    display: block;
    max-height: none;
    height: inherit;
    font-size: 1rem;
    width: 100%;
    background-color: #fff;
  }

  .library main .objects .object.open.loaded>header h4 {
    width: 90%;
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .library main .objects .object.open.loaded>header .close {
    display: none;
  }

  .library main .objects .object.open.loaded .images {
    width: 100%;
    padding: 0;
  }

  .library main .objects .object.open.loaded .images .image img {
    max-height: 70vh;
  }

  .library main .objects .object.open.loaded .datas {
    width: 100%;
  }

  .library main .objects .object.open.loaded .datas .general {
    margin-left: 0;
    font-size: 1rem;
    line-height: 1.25rem;
  }

  .library main .objects .object.open.loaded .datas .metas {
    display: block;
    margin: 0 0 1.5rem 0;
  }

  .library main .objects .object.open.loaded .datas .metas h4,
  .library main .objects .object.open.loaded .datas .metas ul,
  .library main .objects .object.open.loaded .datas .metas li {
    display: inline-block;
  }

  .library main .objects .object.open.loaded .datas .metas h4 {
    font-family: "HKBold";
  }

  .library main .objects .object.open.loaded .datas .metas h4:after {
    content: ":";
  }

  .library main .objects .object.open.loaded .datas .text {
    width: 100%;
    margin: 0 0 1rem 0;
  }

  .library main .objects .object.open.loaded .datas .text p {
    font-size: 1rem;
    line-height: 1.25rem;
  }
}

@media screen and (max-width: 600px) {
  .home main {
    font-size: 1rem;
    line-height: 1.25rem;
  }

  .home main #infos h3,
  .home main .newsfeed h3 {
    font-size: 2rem;
    line-height: 2.5rem;
  }

  .home main #infos p:first-of-type {
    padding-top: 0.5rem;
  }

  .home main #infos .important {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .home main #infos .about p strong::before,
  .home main #infos .details p strong::before {
    width: 1.5rem;
    height: 1.7rem;
    margin: 0 0 0 -1.7rem;
  }

  .home main #infos .about p strong,
  .home main #infos .details p strong {
    padding: 0 0 0 1.7rem;
    font-size: 1rem;
  }

  .home main #infos .about p:not(:first-of-type),
  .home main #infos .details p:not(:first-of-type) {
    text-indent: 1.5rem;
  }

  .home main #infos .about p:last-of-type,
  .home main #infos .details p:last-of-type {
    margin: 0;
  }

  .home main #infos .details#formation p:not(:first-of-type) {
    text-indent: 0;
  }

  .home main #infos .details .machines h4,
  .home main #infos .details .papiers h4 {
    padding: 0 0 0.5rem 0;
  }

  .home main #infos .details .machines .machine,
  .home main #infos .details .machines ul,
  .home main #infos .details .papiers .machine,
  .home main #infos .details .papiers ul {
    font-size: 1rem;
  }

  .home main #infos .details .machines .machine p,
  .home main #infos .details .papiers .machine p {
    font-size: 1rem;
    line-height: 1.25rem;
  }

  .home main .newsfeed .posts .post.loaded:not(.open):hover {
    outline: none;
  }

  .home main .newsfeed .posts .post>header .date {
    font-size: 1rem;
  }

  .home main .newsfeed .posts .post.open header h4 {
    font-size: 1.5rem;
    line-height: 1.75rem;
  }

  .home main .newsfeed .posts .post.open .content .text {
    font-size: 1rem;
    line-height: 1.25rem;
  }

  .home main .newsfeed .posts .post.open .content .text p {
    font-size: 1rem;
    line-height: 1.25rem;
  }
}

@media screen and (max-width: 400px) {
  body>header .title {
    font-size: 1rem;
  }

  body>header nav .menuButton img {
    height: 2rem;
  }
}

@media only screen and (max-width: 1300px) {
  html {
    font-size: 14px;
  }
}

@media only screen and (max-width: 1550px) {
  html {
    font-size: 16px;
  }
}