/* all rights reserved © Marcel Gangl */

/* media queries – desktop */

@media (min-width: 768px) {
  .h-mbtn {
    display: none;
  }

  .hero h2 {
    display: none;
  }

  .home-proj-ov-m {
    display: none;
  }

  #sticky-card-intro-h2 {
    display: none;
  }

  #sticky-card-intro-h2-secondary {
    display: none;
  }
}

/* media queries – desktop/tablet */

@media (max-width: 1070px) {
  nav ul {
    gap: 50px;
  }

  .intro-ib img {
    width: 350px;
    height: 350px;
  }

  .hero h1 {
    font-size: 38px;
    line-height: 48px;
  }

  #hero-h1-bar {
    margin-top: -8px;
    margin-bottom: -25px;
  }

  #hero-h1-txt0 {
    font-size: 16px;
  }

  .hero-h1-txt1 {
    text-decoration-thickness: 5px;
  }

  .hero-h1-txt2 {
    text-decoration-thickness: 4px;
  }

  .home-proj-ov {
    grid-template-columns: 1.5fr 200px 160px 1.5fr;
  }

  .home-proj-ov h1 {
    font-size: 38px;
    line-height: 45px;
  }

  .home-proj-ov-img {
    width: 160px;
    height: 160px;
  }

  .home-proj-ov-img img {
    width: auto;
    height: 160px;
  }

  .sticky-card-txt p,
  .sticky-card p {
    margin-right: 0px;
  }

  .sticky-card-txt-secondary p,
  .sticky-card-secondary p {
    margin-right: 0px;
  }

  .project-img-gallery {
    padding: 80px 8% 80px 8%;
    gap: 30px;
  }

  .lightbox img {
    max-width: 80%;
    height: auto;
  }
}

/* media queries – tablet */

@media (max-width: 900px) {
  nav ul {
    gap: 40px;
  }

  .home-proj-ov {
    grid-template-columns: 2fr 150px 160px 1.5fr;
  }

  .home-proj-ov h1 {
    font-size: 30px;
    line-height: 40px;
  }

  .home-proj-ov-img {
    width: 160px;
    height: 160px;
  }

  .home-proj-ov-img img {
    width: auto;
    height: 160px;
  }

  .sticky-card-txt p,
  .sticky-card p {
    margin-right: 0px;
  }

  .sticky-card-txt-secondary p,
  .sticky-card-secondary p {
    margin-right: 0px;
  }

  .about-article img {
    width: 300px;
    height: 300px;
  }
}

@media (hover: none) and (pointer: coarse) {
  .hero {
    background-attachment: scroll;
    background-size: 100%;
    background-size: cover;
    background-position: center top;
  }

  .hero-secondary {
    background-attachment: scroll;
    background-size: 100%;
    background-size: cover;
    background-position: center top;
  }
}
/* media queries – mobile/phone */

@media (max-width: 768px) {
  .image-container img {
    width: 250px;
  }

  .animated-line {
    height: 4px;
  }

  .h-mbtn {
    display: block;
  }

  #h-nav-d {
    display: none;
  }

  .intro-ib img {
    width: 300px;
    height: 300px;
  }

  .intro-ib {
    flex-direction: column;
    gap: 40px;
    padding-top: 40px;
    padding-bottom: 100px;
  }

  .intro-ib-txt {
    gap: 20px;
  }

  .intro-ib-txt h1 {
    font-size: 38px;
    line-height: 45px;
  }

  .about-article img {
    width: 300px;
    height: 300px;
  }

  .about-article {
    flex-direction: column-reverse;
    align-items: center;
    gap: 40px;
    margin-bottom: 50px;
    margin-top: -5px;
  }

  .about-article-txt h1 {
    font-size: 28px;
  }

  .hero {
    background-attachment: scroll;
    background-size: 100%;
    background-size: cover;
    background-position: center top;
  }

  .hero-secondary {
    background-attachment: scroll;
    background-size: 140vh;
    background-position: center top;
  }

  .hero h1 {
    display: none;
  }

  .hero h2 {
    display: block;
  }

  .hero-secondary h1 {
    font-family: var(--F-nv-b), var(--F-bp-f2);
    font-size: 38px;
    line-height: 48px;
    margin: 50px 24px;
  }

  .hero-secondary.portfolio h1,
  .hero-secondary.about h1,
  .hero-secondary.contact h1 {
    font-family: var(--F-nv-b), var(--F-bp-f2);
    font-size: 38px;
    line-height: 48px;
  }

  .wip-mque .mque-txt-block p,
  .wip-mque-f .mque-txt-block p {
    font-size: 35px;
  }

  .wip-mque .mque-space,
  .wip-mque-f .mque-space {
    padding-left: 15px;
    padding-right: 15px;
  }

  .wip-mque .mque,
  .wip-mque-f .mque {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .home-proj-ov {
    display: none;
  }

  .home-proj-ov-m {
    display: flex;
  }

  .hero-t {
    height: 20px;
  }

  .p-proj-ov-all {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    padding: 0px 20px 50px 20px;
    gap: 0px;
  }

  .p-proj-ov {
    padding-top: 40px;
    padding-bottom: 20px;
  }

  .p-proj-ov:nth-last-child(1) {
    border: none;
  }

  .p-proj-ov:nth-last-child(2) {
    border-bottom: solid 1px var(--C-grey);
  }

  .t-headlines {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .t-headlines h1 {
    font-size: 18px;
  }

  .t-headlines-K {
    margin-bottom: -20px;
    gap: 25px;
  }

  .t-headlines-K h1 {
    font-size: 25px;
  }

  .footer-btm img {
    width: 150px;
    height: auto;
  }

  .footer-txt-btm {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: right;
  }

  .footer-top {
    justify-content: space-between;
    padding: 50px 20px 0px 20px;
    word-break: break-word;
  }

  .footer-top h1 {
    font-size: 20px;
  }

  .footer-txt1-top,
  .footer-txt2-top {
    gap: 20px;
  }

  .footer-txt2-top {
    text-align: right;
  }

  .sticky-card,
  .sticky-card-secondary {
    padding: 20px 20px 65px 0px;
  }

  .about-awards {
    padding: 80px 20px 65px 20px;
  }

  .about-awards h1 {
    font-size: 30px;
    line-height: 40px;
  }

  .sticky-card-intro {
    padding-bottom: 20px;
  }

  .sticky-card-cont {
    margin-top: -5px;
  }

  .sticky-card-intro h1 {
    font-size: 38px;
    line-height: 45px;
    padding: 50px 20px 0px 20px;
  }

  .sticky-card-txt-secondary,
  .sticky-card-txt,
  .about-awards-txt {
    gap: 5rem;
  }

  .sticky-card-txt p,
  .sticky-card p {
    margin-right: 0px;
  }

  .sticky-card-txt h1 {
    font-size: 30px;
    line-height: 40px;
  }

  #sticky-card-intro-h2 {
    display: block;
  }

  #sticky-card-intro-h1 {
    display: none;
  }

  .sticky-card-items,
  .sticky-card-items-secondary,
  .about-awards-items {
    grid-template-columns: 0.5fr 1px 2fr;
  }

  .sticky-card-intro-secondary {
    padding-bottom: 20px;
  }

  .sticky-card-intro-secondary h1 {
    font-size: 38px;
    line-height: 45px;
    padding: 50px 20px 0px 20px;
  }

  .sticky-card-txt-secondary p,
  .sticky-card-secondary p {
    margin-right: 0px;
  }

  .sticky-card-txt-secondary h1 {
    font-size: 30px;
    line-height: 40px;
  }

  #sticky-card-intro-h2-secondary {
    display: block;
  }

  #sticky-card-intro-h1-secondary {
    display: none;
  }

  .form-container {
    margin: 20px 20px;
    width: auto;
  }

  form {
    width: auto;
  }

  .form-container,
  form,
  .form-container input,
  input,
  textarea {
    font-size: 16px;
  }

  article {
    padding: 50px 20px 30px 20px;
  }

  article p {
    padding-right: 0px;
  }

  .imprint {
    padding: 50px 20px 30px 20px;
  }

  .imprint p {
    padding-right: 0px;
  }

  .proj-bottom-btn {
    padding: 0px 20px 80px 20px;
  }

  .contact-info-section {
    padding: 30px 20px 70px 20px;
  }

  .contact-info-section span {
    gap: 20px;
  }

  .contact-info-section h1 {
    font-family: var(--F-nv-b), var(--F-bp-f2);
    font-size: 38px;
    line-height: 45px;
  }

  .intro-ib-btns > :nth-child(3) {
    flex-basis: 100%;
  }

  .project-img-gallery {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    padding: 50px 20px 50px 20px;
    gap: 20px;
  }

  .lightbox img {
    max-width: 100%;
    height: auto;
    border-radius: 0px;
    border: solid 1px var(--C-grey);
  }

  .prev,
  .next {
    display: none;
  }

  .zoom-btn {
    display: block;
  }

  .zoom-btn .zoom-out {
    display: none;
  }

  .zoom-btn.zoomed-active .zoom-in {
    display: none;
  }

  .zoom-btn.zoomed-active .zoom-out {
    display: inline;
  }

  .switch3 {
    width: 150px;
    height: 66px;
    z-index: 1;

    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .slider3:before {
    position: absolute;
    content: "";
    height: 48px;
    width: 48px;
    left: 8px;
    bottom: 8px;
    -webkit-transition: 0.4s;
    transition: 0.4s;
  }

  .slider3::after {
    content: "turn on secret style";
    font-size: 13px;
    display: inline-block;
    height: 48px;
    width: 48px;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
  }

  input:checked + .slider3::after {
    content: "turn off secret style";
    font-size: 13px;
    display: inline-block;
    height: 48px;
    width: 60px;
    position: absolute;
    top: 50%;
    left: 10px;
  }

  input:checked + .slider3:before {
    -webkit-transform: translateX(2px);
    -ms-transform: translateX(112px);
    transform: translateX(83px);
    height: 51px;
    width: 51px;
    bottom: 6px;
  }

  .slider3.round3 {
    border-radius: 10px;
  }

  .slider3.round3:before {
    border-radius: 6px;
  }
}