/* CSS Document */
@media (max-width:800px) {
  main {
    grid-template-columns: 0;
  }
  header {
    background-color: white;
    position: sticky;
    top: 0;
    z-index: 20;
    transition: 1s ease-in;
  }
  .nav-link {
    background-color: white;
  }
  header {
    flex-wrap: wrap;
    padding: unset;
  }
  header a, button {
    font-weight: 600;
  }
  h1 {
    font-size: calc(1.8rem + 1vw);
    line-height: calc(1.8rem + 1vw);
  }
  h2 {
    font-size: calc(1.4rem + .8vw);
    line-height: calc(1.4rem + .8vw);
  }
  h3 {
    font-size: calc(1rem + .6vw);
    line-height: calc(1rem + .6vw);
  }
  h4 {
    font-size: calc(0.8rem + .4vw);
    line-height: calc(0.8rem + .4vw);
  }
  h5 {
    font-size: calc(0.7rem + 0.4vw);
    line-height: calc(0.7rem + 0.4vw);
  }
  p, li {
    font-size: calc(0.8rem + 0.2vw);
    line-height: calc(1.2rem + 0.2vw);
    font-weight: 300;
  }
  a {
    font-size: calc(0.8rem + 0.4vw);
    letter-spacing: 0.08rem;
    cursor: pointer;
  }
  /*
    nav a:hover {
        padding: 0.4rem 0.6rem;
        color: #842512;
    }
    nav a:focus {
        color: #842512;
        background-color: white;
        transition: 0.1s ease-in;
        padding: 0.4rem 0.6rem;
    }
    nav a:active {
        color: #842512;
        background-color: white;
        transition: 0.1s ease-in;
        padding: 0.4rem 0.6rem;
    }
    */
  #menu-toggler {
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    background-color: white;
    padding: 0 1.2rem;
  }
  .bar {
    background: #EB8D69;
    width: 100%;
    height: 20%;
    transition: 0.3s ease-in;
  }
  .menu-active {
    padding: 2rem 0;
    grid-gap: 3rem;
    display: flex !important;
    flex-basis: 100%;
    height: 100vh;
    width: 100vw;
    transition: 1s ease-in;
  }
  .toggle.bar:nth-child(1) {
    background-color: #002152;
    transform: translateY(0.82rem) rotate(135deg);
    transition: 0.3s ease-in;
  }
  .toggle.bar:nth-child(2) {
    background-color: #002152;
    opacity: 0;
    transition: 0.3s ease-in;
  }
  .toggle:nth-child(3) {
    background-color: #002152;
    transform: translateY(-0.82rem) rotate(-135deg);
    transition: 0.3s ease-in;
  }
  footer {
    padding: 2rem;
    position: static;
    bottom: 0;
    background-color: #0A1D41;
  }
  footer ul {
    list-style-type: none;
    padding-inline-start: 0;
  }
  footer li a {
    color: white;
    font-size: calc(0.8rem + 0.2vw);
    letter-spacing: 0.08rem;
    font-weight: 600;
  }
  .footer-large {
    font-size: calc(1rem + 0.2vw);
    line-height: calc(2rem + 0.2vw);
  }
  .footer-medium {
    font-size: calc(0.8rem + 0.2vw);
    font-weight: 300;
    line-height: calc(1.4rem + 0.2vw);
  }
  .footer-small {
    font-size: calc(0.6rem + 0.2vw);
    font-weight: 300;
    line-height: calc(1.2rem + 0.2vw);
  }
  .m-text-center {
    text-align: center;
  }
  .m-text-right {
    text-align: right;
  }
  .m-d-none {
    display: none;
  }
  .m-d-flex {
    display: flex;
  }
  .m-flex-col {
    flex-direction: column;
  }
  .m-flex-reverse-column {
    flex-direction: column-reverse;
  }
  .m-flex-row {
    flex-direction: row;
  }
  .m-flex-reverse-row {
    flex-direction: row-reverse;
  }
  .m-flex-1 {
    flex: 1;
  }
  /*    negation class*/
  .m-gap {
    grid-gap: unset;
  }
  .m-gap-sm {
    grid-gap: 0.4rem;
  }
  .m-gap-1 {
    grid-gap: 1rem;
  }
  .m-gap-2 {
    grid-gap: 2rem;
  }
  .m-gap-3 {
    grid-gap: 3rem;
  }
  .m-px-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .m-m-unset {
    margin: unset;
  }
  /*    mobile grid class*/
  /*Grid Class*/
  .m-row-1-2 {
    grid-row: 1/2;
  }
  .m-row-2-3 {
    grid-row: 2/3;
  }
  .m-row-1-3 {
    grid-row: 1/3;
  }
  .m-row-1-4 {
    grid-row: 1/4;
  }
  .m-row-3-4 {
    grid-row: 3/4;
  }
  .m-column-1-2 {
    grid-column: 1/2;
  }
  .m-column-1-3 {
    grid-column: 1/3;
  }
  .m-column-2-3 {
    grid-column: 2/3;
  }
  .m-column-1-4 {
    grid-column: 1/4;
  }
  .m-column-3-4 {
    grid-column: 3/4;
  }
  /*    mobile align classes*/
  .m-j-content-end {
    justify-content: flex-end;
  }
  .m-j-content-center {
    justify-content: center;
  }
  .m-j-content-between {
    justify-content: space-between;
  }
  .m-j-content-evenly {
    justify-content: space-evenly;
  }
  .m-j-content-start {
    justify-content: flex-start;
  }
  .m-j-self-end {
    justify-self: flex-end;
  }
  .m-j-self-center {
    justify-self: center;
  }
  .m-a-items-end {
    align-items: flex-end;
  }
  .m-a-items-center {
    align-items: center;
  }
  .m-a-items-start {
    align-items: flex-start;
  }
  .m-w-20 {
    width: 20%;
  }
  .m-w-30 {
    width: 30%;
  }
  .m-w-40 {
    width: 40%;
  }
  .m-w-50 {
    width: 50%;
  }
  .m-w-60 {
    width: 60%;
  }
  .m-w-70 {
    width: 70%;
  }
  .m-w-80 {
    width: 80%;
  }
  .m-w-90 {
    width: 90%;
  }
  .m-w-100 {
    width: 100%;
  }
  .m-w-unset {
    width: unset;
  }
  .m-h-90 {
    height: 90%;
  }
  .m-h-100 {
    height: 100%;
  }
  .m-h-full {
    height: auto;
  }
  .m-h-unset {
    height: unset;
  }
  .m-text-left {
    text-align: left;
  }
  .m-text-center {
    text-align: center;
  }
  .m-text-right {
    text-align: right;
  }
  /*    ////////////////////////////////*/
  /*//////////////////////////////////////////////////////////*/
  /*Grid IDs*/
  /*Home Page IDs*/
  /*HERO SECTION*/
  /*SECTION 1*/
  #hero {
    display: grid;
    grid-template-columns: 1fr 6fr 1fr;
    grid-template-rows: 3fr 1fr 1fr;
    min-height: 70vh;
    /*		max-height: 550px;*/
  }
  #hero-banner {
    background-image: url("assets/heroX1440.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    grid-column: 1/4;
    grid-row: 1/3;
    overflow: hidden;
  }
  @media (max-width: 1920px) {
    #hero-banner {
      background-image: url("assets/heroX1920.jpg");
    }
  }
  @media (max-width: 1440px) {
    #hero-banner {
      background-image: url("assets/heroX1440.jpg");
    }
  }
  @media (max-width: 900px) {
    #hero-banner {
      background-image: url("assets/heroX900.jpg");
    }
  }
  @media (max-width: 760px) {
    #hero-banner {
      background-image: url("assets/heroX600.jpg");
    }
  }
  #hero-cta {
    grid-column: 2/3;
    grid-row: 2/4;
    z-index: 5;
  }
  #hero-stairlift {
    grid-column: 2/3;
    grid-row: 2/4;
  }
  #hero-stairlift img {
    transform: translateX(-60%);
  }
  /*FOR YOU SECTION*/
  /*SECTION 2*/
  #for-you {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    min-height: unset;
  }
  #for-you-banner {
    grid-column: 1/3;
    grid-row: 2/3;
    z-index: 5;
  }
  #for-you-hero {
    grid-column: 1/3;
    grid-row: 1/2;
    z-index: 2;
  }
  .for-you-card {
    max-width: 360px;
  }
  #for-you-card {
    grid-column: 2/3;
    grid-row: 3/4;
  }
  #for-you-bg {
    display: none;
  }
  #for-you-bg-2 {
    display: none;
  }
  /*OVERVIEW*/
  /*SECTION 3*/
  #overview {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    padding-top: 3rem;
    min-height: unset;
  }
  #overview-card {
    grid-column: 1/2;
    grid-row: 1/2;
    z-index: 5;
  }
  #overview-straight {
    grid-column: 1/2;
    grid-row: 1/2;
    z-index: 2;
  }
  #overview-straight img {
    transform: translateX(-50%);
  }
  #overview-curved {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  #overview-curved img {
    opacity: 1;
    transform: translateX(70%);
    width: 60%;
  }
  /*INFORMATION*/
  /*SECTION 4*/
  #information {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 2fr 1fr;
    padding-top: 3rem;
    grid-gap: 1rem;
    min-height: unset;
  }
  @media (max-width: 475px) {
    #information {
      grid-template-rows: 1fr 1fr;
    }
  }
  #information-img {
    background-image: url("assets/informationX1600.jpg");
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    grid-column: 1/3;
    grid-row: 1/2;
  }
  #information-content {
    padding: 2rem 0.6rem 0;
    grid-column: 1/3;
    grid-row: 2/3;
    z-index: 5;
    flex-direction: column;
    align-items: center;
  }
  #information-bg {
    grid-column: 2/3;
    grid-row: 2/3;
  }
  /*YOUR STAIRLIFT*/
  /*SECTION 5*/
  #your-stairlift {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 4fr 1fr;
    min-height: unset;
  }
  #your-stairlift-banner {
    grid-row: 2/3;
    grid-column: 1/2;
    z-index: 5;
    width: 90%;
    margin: 0 auto;
  }
  #your-stairlift-banner-img {
    /*
        background-image: url("assets/m-your-stairlift-banner.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 100%;
*/
    display: none;
  }
  #your-stairlift-img {
    display: none;
  }
  #your-stairlift-img div {
    transform: unset;
  }
  #your-stairlift-bg {
    grid-row: 1/4;
    grid-column: 1/2;
  }
  #your-stairlift-bg div {
    transform: translate(10%, 60%);
  }
  /*/////////////////////////////////*/
  /*STAIRLIFT PAGE CSS*/
  /*STAIRLIFT HERO*/
  /*SECTION 1*/
  #stairlift-hero {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 25vh 1fr;
    min-height: unset;
  }
  #stairlift-hero-content {
    grid-column: 1/3;
    grid-row: 3/4;
    padding: 0 0.4rem;
    z-index: 5;
  }
  #stairlift-hero-bg {
    background-image: url("assets/stairlift-hero-bgX800.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    grid-column: 1/3;
    grid-row: 2/3;
  }
  #stairlift-hero-img {
    display: flex;
    grid-column: 2/3;
    grid-row: 3/4;
  }
  #stairlift-hero-img img {
    opacity: 1;
    transform: translateX(65%);
    max-width: 200px;
  }
  #stairlift-hero-img.slide-in img {
    animation: stairliftheroImg 0.3s ease-out forwards;
  }
  #stairlift-hero-img.slide-out img {
    animation: none;
  }
  /*STAIRLIFT DISPLAY*/
  /*SECTION 2*/
  #stairlift-display {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr 2fr 1fr;
    padding: 1rem 0;
  }
  #stairlift-display-content {
    grid-column: 1/4;
    grid-row: 1/4;
    z-index: 5;
  }
  #stairlift-display-staircase {
    grid-column: 1/4;
    grid-row: 1/4;
  }
  #stairlift-display-worker {
    grid-column: 1/4;
    grid-row: 1/4;
  }
  #stairlift-display-staircase.fade-in {
    animation: fadeIn 0.3s ease-out forwards;
  }
  #stairlift-display-staircase.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
  }
  #stairlift-display-worker.fade-in img {
    animation: fadeIn 0.3s ease-out forwards;
  }
  #stairlift-display-worker.fade-out img {
    animation: fadeOut 0.3s ease-out forwards;
  }
  /*STAIRLIFT CONTENT*/
  /*SECTION 3*/
  #stairlift-content {
    display: grid;
    grid-template-columns: 0.8rem 1fr 0.8rem;
    grid-template-rows: 0.2rem auto 1fr;
    min-height: unset;
  }
  #stairlift-content-carousel {
    grid-column: 2/3;
    grid-row: 3/4;
    z-index: 5;
    margin: 1rem 0 2rem 0;
  }
  .carousel-img.display {
    transform: unset;
  }
  .carousel-img {
    transform: translateX(50%);
  }
  /*STAIRLIFT CONTENT*/
  /*SECTION 4*/
  #stairlift-content-bg {
    grid-column: 2/3;
    grid-row: 2/3;
  }
  /*/////////////////////////////////*/
  /*ABOUT PAGE CSS*/
  /*ABOUT HERO*/
  /*SECTION 1*/
  #about-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 30vh 1fr;
    grid-gap: 2rem;
    min-height: unset;
  }
  #about-hero-content {
    grid-column: 1/3;
    grid-row: 2/3;
  }
  #about-hero-bg {
    background-image: url("assets/about-hero-bgX600.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    grid-column: 1/3;
    grid-row: 1/2;
    opacity: 1;
  }
  #about-hero-bg.slide-in {
    animation: slideRight50 0.5s ease-out forwards;
  }
  #about-hero-bg.slide-out {
    animation: slideOutRight50 0.5s ease-out forwards;
  }
  /*ABOUT CONTENT*/
  /*SECTION 2*/
  #about-stairlift {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 30vh 1fr;
    padding-top: 1rem;
    grid-gap: 2rem;
    min-height: unset;
  }
  #about-stairlift-bg {
    background-image: url("assets/about-content-bgX600.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    grid-column: 1/4;
    grid-row: 1/2;
    opacity: 1;
  }
  #about-stairlift-content {
    grid-column: 1/4;
    grid-row: 2/3;
    z-index: 5;
  }
  #about-stairlift-img {
    grid-column: 1/3;
    grid-row: 2/3;
  }
  #about-stairlift-bg.slide-in {
    animation: slideLeft50 0.5s ease-out forwards;
  }
  #about-stairlift-bg.slide-out {
    animation: slideOutLeft50 0.5s ease-out forwards;
  }
  /*ABOUT QUESTION*/
  /*SECITON 3*/
  #about-question {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 30vh 1fr auto;
    padding-top: 3rem;
    grid-gap: 2rem;
    min-height: unset;
  }
  #about-question-content {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr 1fr;
    grid-column: 1/4;
    grid-row: 2/3;
    z-index: 5;
  }
  #about-question-bg {
    background-image: url("assets/about-question-bgX600.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    grid-column: 1/4;
    grid-row: 1/2;
    opacity: 1;
  }
  #about-question-img {
    grid-column: 1/2;
    grid-row: 3/4;
    width: 40%;
  }
  #about-question-bg.slide-in {
    animation: slideRight50 0.5s ease-out forwards;
  }
  #about-question-bg.slide-out {
    animation: slideOutRight50 0.5s ease-out forwards;
  }
  /*/////////////////////////////////////*/
  /*CONTACT SECTION */
  #contact {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 40vh 1fr;
    min-height: unset;
  }
  #contact-bg {
    background-image: url("assets/contact-bgX800.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    grid-column: 1/4;
    grid-row: 1/2;
  }
  #contact-form {
    grid-column: 2/3;
    grid-row: 2/3;
    z-index: 5;
  }
  #contact-img-stairlift {
    grid-column: 2/3;
    grid-row: 2/3;
  }
  #contact-img-staircase {
    grid-column: 2/3;
    grid-row: 2/3;
  }
  /*    //////////////////////////////////////*/
  /*ADDITIONAL CSS*/
  /*Card*/
  #logo {
    /*
        background-image: url("assets/m-logo.svg");
        background-size: cover;
        background-position: center;
*/
    height: 2.4rem;
    width: 2.4rem;
  }
  /*
    #logo:hover {
        background-image: url("assets/m-logo-alt.svg")
    }
*/
  .card {
    background-color: white;
    box-shadow: 0 0 16px 8px rgba(235, 141, 105, 0.15);
    padding: 1rem;
    overflow: hidden;
  }
  .icons {
    width: 1.4rem;
    height: 1.4rem;
  }
  .tiny-footer {
    font-size: calc(0.6rem + 0.4vw);
    line-height: calc(0.6rem + 0.4vw);
    font-weight: 300;
  }
  /*    KEYFRAME MOBILE */
  /*STAIRLIFT HERO IMG*/
  @keyframes stairliftheroImg {
    from {
      opacity: 0;
      transform: translateX(80%);
    }
    to {
      opacity: 1;
      transform: translate(50%);
    }
  }
  /*    MOBILE MEDIA QUERY END*/
  /*   //////////////////////////////////*/
}
@media (max-width: 500px) {
  .fix {
    grid-template-columns: 1fr;
  }
}