@media (min-width: 768px) and (max-width: 1279px) {
  #slogan h1 a img.logo {
    width: 204px;
  }

  .project-layout .content {
    padding: 0 80px 42px 50px;
  }

  .project-layout .content-text {
    font-size: 17px;
  }

  #true-essence .wrapper,
  #our-story .wrapper {
    max-width: 70%;
  }

  #true-essence .wrapper .title {
    font-size: 40px;
    line-height: 48px;
  }

  #true-essence .row .col {
    padding: 0 20px;
  }

  #true-essence .row .col:last-child {
    padding-right: 0;
  }

  #true-essence h5,
  #true-essence .content {
    font-size: 22px;
    line-height: 28px;
  }

  #showreel {
    padding: 0 15%;
  }

  #our-story h3 {
    font-size: 64px;
  }

  #our-story p {
    font-size: 28px;
    line-height: 34px;
  }

  section#contact-us > .content {
    max-width: 70%;
  }

  section#contact-us h3 {
    font-size: 64px;
  }

  #draw-something {
    border-width: 3px !important;
    border-right-width: 0 !important;
    height: 364px;
  }

  #draw-something p {
    font-size: 20px;
    line-height: 24px;
  }

  #contact-us input, #contact-us textarea {
    border-width: 3px !important;
    font-size: 20px;
    border-bottom-width: 0 !important;
  }

  #contact-us .form-input:last-child textarea {
    border-bottom-width: 3px !important;
  }

  #contact-form-homepage .form-actions button {
    font-size: 32px;
  }

  #colors-picker {
    bottom: -56px;
  }

  footer {
    padding: 24px 48px;
  }

  footer h4 {
    font-size: 28px;
    line-height: 32px;
    margin-right: 16px;
  }

  footer .footer-icon-link a svg {
    max-width: 120px;
  }

  footer .footer-content p {
    font-size: 12px;
    line-height: 18px;
    margin-bottom: 0;
    margin-left: 16px;
  }

  footer .footer-icon-link-map {
    margin-left: 16px;
  }

  .project-layout .project-header {
    width: 600px;
    padding-top: 80px;
  }

  .project-header h2 {
    font-size: 32px;
    line-height: 37px;
  }

  .project-header .description {
    font-size: 16px;
    line-height: 21px;
  }

  .project-header .separator {
    margin-top: 32px;
    margin-bottom: 32px;
  }

  .project-header .tags {
    font-size: 16px;
    line-height: 21px;
  }

  .project-navigation-footer {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .project-navigation-footer .navigation-content {
    font-size: 20px;
    line-height: 25px;
  }

  .project-navigation-footer .project-navigation svg {
    height: 100px;
    width: 215px;
  }

  .projects-page footer h4 {
    font-size: 27px;
  }

  #project-layout-spinocchio .header-content {
    display: flex;
  }

  #project-layout-ignite .project-header,
  #project-layout-adte .project-header,
  #project-layout-kodem .project-header,
  #project-layout-spinocchio .project-header {
    padding-top: 120px;
    width: 700px;
  }
}

@media (min-width: 1280px) and (max-width: 1439px) {
  #slogan h1 a img.logo {
    width: 204px;
  }

  section#brand-is-the-whole-story .content img {
    width: 900px;
  }

  .project-layout .content {
    padding: 0 80px 64px 64px;
  }

  .project-layout .content-text {
    font-size: 19px;
  }

  #true-essence .wrapper,
  #our-story .wrapper {
    max-width: 55%;
  }

  #true-essence .wrapper .title {
    font-size: 40px;
    line-height: 48px;
  }

  #true-essence .row .col {
    padding: 0 20px;
  }

  #true-essence .row .col:last-child {
    padding-right: 0;
  }

  #true-essence h5,
  #true-essence .content {
    font-size: 22px;
    line-height: 28px;
  }

  #showreel {
    padding: 0 15%;
  }

  #our-story h3 {
    font-size: 64px;
  }

  #our-story p {
    font-size: 28px;
    line-height: 34px;
  }

  section#contact-us > .content {
    max-width: 55%;
  }

  section#contact-us h3 {
    font-size: 64px;
  }

  #draw-something {
    border-width: 3px !important;
    border-right-width: 0 !important;
    height: 364px;
  }

  #draw-something p {
    font-size: 20px;
    line-height: 24px;
  }

  #contact-us input, #contact-us textarea {
    border-width: 3px !important;
    font-size: 20px;
    border-bottom-width: 0 !important;
  }

  #contact-us .form-input:last-child textarea {
    border-bottom-width: 3px !important;
  }

  #contact-form-homepage .form-actions button {
    font-size: 32px;
  }

  #colors-picker {
    bottom: -56px;
  }

  footer {
    padding: 24px 64px;
  }

  footer h4 {
    font-size: 32px;
    line-height: 40px;
    margin-right: 16px;
  }

  footer .footer-content p {
    font-size: 13px;
    line-height: 18px;
    margin-bottom: 2px;
    margin-left: 16px;
  }

  footer .footer-icon-link-map {
    margin-left: 16px;
  }

  footer .footer-mobile-row:last-child {
    flex-grow: 1;
  }

  footer .footer-mobile-row .footer-content {
    flex-grow: 1;
  }

  .project-layout .project-header {
    width: 700px;
    padding-top: 100px;
  }

  .project-header h2 {
    font-size: 40px;
    line-height: 46px;
  }

  .project-header .description {
    font-size: 18px;
    line-height: 24px;
  }

  .project-header .separator {
    margin-top: 32px;
    margin-bottom: 32px;
  }

  .project-header .tags {
    font-size: 18px;
    line-height: 24px;
  }

  .project-navigation-footer {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .project-navigation-footer .navigation-content {
    font-size: 24px;
    line-height: 28px;
  }

  .project-navigation-footer .project-navigation svg {
    height: 120px;
    width: 258px;
  }
}

@media (min-width: 1440px) and (max-width: 1679px) {
  #slogan h1 a img.logo {
    width: 250px;
  }

  section#brand-is-the-whole-story .content img {
    width: 1100px;
  }

  .project-layout .content {
    padding: 0 80px 64px 64px;
  }

  .project-layout .content-text {
    font-size: 22px
  }

  #true-essence .wrapper,
  #our-story .wrapper {
    max-width: 55%;
  }

  #true-essence .wrapper .title {
    font-size: 40px;
    line-height: 48px;
  }

  #true-essence .row .col {
    padding: 0 20px;
  }

  #true-essence .row .col:last-child {
    padding-right: 0;
  }

  #true-essence h5,
  #true-essence .content {
    font-size: 22px;
    line-height: 28px;
  }

  #showreel {
    padding: 0 15%;
  }

  #our-story h3 {
    font-size: 64px;
  }

  #our-story p {
    font-size: 28px;
    line-height: 34px;
  }

  section#contact-us > .content {
    max-width: 55%;
  }

  section#contact-us h3 {
    font-size: 64px;
  }

  #draw-something {
    border-width: 3px !important;
    border-right-width: 0 !important;
    height: 364px;
  }

  #draw-something p {
    font-size: 20px;
    line-height: 24px;
  }

  #contact-us input, #contact-us textarea {
    border-width: 3px !important;
    font-size: 20px;
    border-bottom-width: 0 !important;
  }

  #contact-us .form-input:last-child textarea {
    border-bottom-width: 3px !important;
  }

  #contact-form-homepage .form-actions button {
    font-size: 32px;
  }

  #colors-picker {
    bottom: -56px;
  }

  footer {
    padding: 24px 64px;
  }

  footer h4 {
    font-size: 32px;
    line-height: 40px;
    margin-right: 16px;
  }

  footer .footer-content p {
    font-size: 13px;
    line-height: 18px;
    margin-bottom: 2px;
    margin-left: 16px;
  }

  footer .footer-icon-link-map {
    margin-left: 16px;
  }

  footer .footer-mobile-row:last-child {
    flex-grow: 1;
  }

  footer .footer-mobile-row .footer-content {
    flex-grow: 1;
  }
}

@media (min-width: 1680px) and (max-width: 1919px) {
  #slogan h1 a img.logo {
    width: 290px;
  }

  section#brand-is-the-whole-story .content img {
    width: 1200px;
  }

  .project-layout .content {
    padding: 0 80px 64px 64px;
  }

  .project-layout .content-text {
    font-size: 22px
  }

  #true-essence .wrapper,
  #our-story .wrapper,
  section#contact-us > .content {
    max-width: 45%;
  }

  #true-essence .wrapper .title {
    font-size: 40px;
    line-height: 48px;
  }

  #true-essence .row .col {
    padding: 0 20px;
  }

  #true-essence .row .col:last-child {
    padding-right: 0;
  }

  #true-essence h5,
  #true-essence .content {
    font-size: 22px;
    line-height: 28px;
  }

  #showreel {
    padding: 0 15%;
  }

  #our-story h3 {
    font-size: 64px;
  }

  #our-story p {
    font-size: 28px;
    line-height: 34px;
  }

  section#contact-us h3 {
    font-size: 64px;
  }

  #draw-something {
    border-width: 3px !important;
    border-right-width: 0 !important;
    height: 364px;
  }

  #draw-something p {
    font-size: 20px;
    line-height: 24px;
  }

  #contact-us input, #contact-us textarea {
    border-width: 3px !important;
    font-size: 20px;
    border-bottom-width: 0 !important;
  }

  #contact-us .form-input:last-child textarea {
    border-bottom-width: 3px !important;
  }

  #contact-form-homepage .form-actions button {
    font-size: 32px;
  }

  #colors-picker {
    bottom: -56px;
  }

  footer {
    padding: 24px 64px;
  }

  footer h4 {
    margin-right: 48px;
  }

  footer .footer-content p {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 2px;
    margin-left: 32px;
  }

  footer .footer-icon-link-map {
    margin-left: 16px;
  }

  footer .footer-mobile-row:last-child {
    flex-grow: 1;
  }

  footer .footer-mobile-row .footer-content {
    flex-grow: 1;
  }
}

@media (min-width: 1920px) {
  section#brand-is-the-whole-story .content {
    padding-left: 200px;
  }

  #true-essence .wrapper,
  #our-story .wrapper,
  section#contact-us > .content {
    width: 1000px;
  }
}