/*Text align*/
section {
    text-align: center;
}

.info-large {
    text-align: left;
}

.home-btn {
    text-align: left;
}

.info-content {
    text-align: left;
}

.project-intro-facts {
    text-align: left;
}

/*Intro texten längst upp*/
.project-intro {
    padding-top: 1em;
}

.project-intro-heading {
    font-size: 1.5em;
    font-weight: 400;
    margin-bottom: 2em;
    text-align: left;
}

.intro-column {
    font-size: 1em;
}

/*Biden efter introtxten*/
.project-img {
    border-radius: 1em;
}

p {
    margin-bottom: 3em;
}

/*Underrubriker processen*/
.process-subheading {
    font-size: 1em;
    font-weight: 400;
    margin-bottom: 0;
    text-align: left;
}

/*Brödtext process*/
.process-desc {
    font-size: 1.3em;
    margin-top: 0;
    text-align: left;
}

/*Grid för gamla bilder av interrail*/
.img-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 25px;
}

.img-row img {
    width: 50%;
}

/*Grid för prototypen*/
.interrail-prototype-row-full {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: flex-start;
    gap: 25px;

}

/*Länk och pil i projekt process text*/
.project-process a {
    font-size: 1em;
}

.project-process .right-arrow {
    max-width: 2%;
    margin-left: .5em;
    fill: black;
}

/*Skugga för bilder*/
.process-img-shadow {
    box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.2), 12px 12px 40px 0 rgba(0, 0, 0, 0.19);
}

/*Pil och text till vänster längst ner*/
.home-btn a {
    font-size: 2em;
}

.left-arrow {
    max-width: 3.5%;
    margin-right: .5em;
    fill: black;
}

/*Ta bort lite margin för info längst ner*/
.info {
    margin-top: 5em;
}

/*Footer*/
footer p {
    margin-bottom: 1em;
}

/*HÄR BÖRJAR MEDIA QUERIES*/
@media only screen and (min-width: 500px) {
    /*Intro texten längst upp*/
    .project-intro-heading {
        font-size: 1.7em;
        font-weight: 400;
        margin-bottom: 2em;
    }

    .intro-column {
        font-size: 1.1em;
    }

    /*Underrubriker processen*/
    .process-subheading {
        font-size: 1.2em;
        font-weight: 400;
        margin-bottom: 0;
    }

    /*Brödtext process*/
    .process-desc {
        font-size: 1.5em;
        margin-top: 0;
    }

    /*Pil till vänster längst ner*/
    .home-btn a {
        font-size: 2.1em;
    }

    .left-arrow {
        max-width: 3%;
    }
}

@media only screen and (min-width: 690px) {
    /*Gör grid av info om roll, uppdragsgivare och år*/
    .project-intro-facts {
        display: grid;
        grid-template-columns: auto auto;
        gap: 25px;
    }
    
    /*Storlek på pilen till vänster längst ner*/
    .left-arrow {
        max-width: 2%;
    }

    /*Storlek på pil i project process brödtext*/
    .project-process .right-arrow {
        max-width: 1.5%;
    }

    /*Padding för hemknappen längst ner*/
    .home-btn {
        margin-top: 7em;
        margin-bottom: 7em;
    }

    .home-btn a {
        font-size: 2.3em;
    }

    /*Storlek på bilden längst upp när den ska vara lite mindre, ex. torpa*/
        /*Storlek på bilder*/
        .project-img-smaller {
            width: 80%;
        }

}

@media only screen and (min-width: 800px) {
    /*Grid för prototypen*/
.interrail-prototype-row-full {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
    align-items: flex-start;
    gap: 25px;

    }

    /*Storlek på pilen till vänster längst ner*/
    .left-arrow {
        max-width: 1.5%;
    }

    /*Bredd på kolumnen med två bilder */
    .img-width-interrail {
        width: 45%;
    }

    .img-row img {
        width: 40%;
    }

}

@media only screen and (min-width: 900px) {
      /*Gör grid av info om roll, uppdragsgivare och år*/
      .project-intro-facts {
        grid-template-columns: 33% 33% auto;
    }

    /*Storlek på bilder*/
    .project-img {
        width: 80%;
    }

    /*Pilen i project process texten*/
    .project-process .right-arrow {
        max-width: 1.2%;
    }

        /*Storlek på bilden längst upp när den ska vara lite mindre, ex. torpa*/
        /*Storlek på bilder*/
        .project-img-smaller {
            width: 70%;
        }
}

@media only screen and (min-width: 1000px) { 
     /*Margin*/
     header {
        padding-bottom: 1em;
    }

    /*Storleken på bilderna*/
    .img-width-interrail {
        width: 40%;
    }

    .process-img {
        width: 80%;
    }

     /*Pilen i project process texten*/
     .project-process .right-arrow {
        max-width: 1%;
    }

    /*Mellanrum mellan bilder i grid*/
    .img-row {
        gap: 70px;
    }

    .interrail-prototype-row-full {
        width: 110%;
        margin-left: -5%;
        gap: 35px;
    }

      /*Storlek på pilen till vänster längst ner*/
      .left-arrow {
        max-width: 1.5%;
    }

    /*Henknappen längs ner*/
    .home-btn a {
        font-size: 2.5em;
    }
}

@media only screen and (min-width: 1200px) {
    /*Margin*/
    header {
        padding-bottom: 1em;
    }

    /*Storlek på text*/
    .project-intro-heading {
        font-size: 1.9em;
        line-height: 1.4em;
    }

    .intro-column {
        font-size: 1.2em;
    }

    /*Storleken på bilderna*/
    .img-width-interrail {
        width: 35%;
    }

    .process-img {
        width: 70%;
    }

    .img-row img {
        width: 35%;
    }

            /*Storlek på bilden längst upp när den ska vara lite mindre, ex. torpa*/
        /*Storlek på bilder*/
        .project-img-smaller {
            width: 60%;
        }

    /*Pilen i project process texten*/
    .project-process .right-arrow {
        max-width: .9%;
    }

    /*Gör grid av info om roll, uppdragsgivare och år*/
    .project-intro-facts {
        grid-template-columns: 30% 30% 30%;
        gap: 30px;
    }

    /*Henknappen längst ner*/
    .home-btn a {
        font-size: 2.7em;
    }

}

@media only screen and (min-width: 1400px) {
     /*Margin*/
     header {
        padding: 2em 10em;
        }

    .hero {
        padding: 2em 10em;
    }

    section {
        padding: 4em 10em;
    }

    /*Storlek på text*/
    .project-intro-heading {
        font-size: 2em;
    }

    .intro-column {
        font-size: 1.2em;
    }

    /*Underrubriker processen*/
    .process-subheading {
        font-size: 1.3em;
    }

    /*Brödtext process*/
    .process-desc {
        font-size: 1.7em;
        line-height: 1.45em;
    }

    /*Storleken på bilderna*/
    .img-width-interrail {
        width: 30%;
    }

    .process-img {
        width: 65%;
    }

    /*Grid för prototypen*/
    .interrail-prototype-row-full {
    grid-template-columns: auto auto auto auto;
    gap: 50px;
    width: 125%;
    margin-left: -12.5%;

    }

    /*Style för grid med tre rader , exempelvis torpa wireframe*/

    .full-row-3 {
        display: grid;
        grid-template-columns: auto auto auto;
        justify-content: center;
        align-items: flex-start;
        gap: 25px;
    
        }

      /*Henknappen längst ner*/
      .home-btn a {
        font-size: 3em;
    }
}

@media only screen and (min-width: 1500px) {

/*Margin*/
header {
    padding: 2em 15em;
}

.hero {
   padding: 2em 15em;
}

section {
   padding: 4em 15em;
}

    /*Grid för prototypen*/
    .interrail-prototype-row-full {
        gap: 60px;
        width: 130%;
        margin-left: -15%;
    
        }

     /*Henknappen längst ner*/
      .home-btn a {
        font-size: 3.2em;
    }

    /*Storlek på pilen till vänster längst ner*/
    .left-arrow {
        max-width: 1.6%;
    }
}

@media only screen and (min-width: 1624px) {
    /*Storlek på text*/
    .project-intro-heading {
        font-size: 2.3em;
    }

    .intro-column {
        font-size: 1.3em;
    }

    /*Underrubriker processen*/
    .process-subheading {
        font-size: 1.5em;
    }

    /*Brödtext process*/
    .process-desc {
        font-size: 1.9em;
        line-height: 1.55em;
    }

    /*Bild på gamla interrail*/
    .img-row img {
        width: 30%;
    }

        /*Storlek på bilden längst upp när den ska vara lite mindre, ex. torpa*/
        /*Storlek på bilder*/
        .project-img-smaller {
            width: 50%;
        }

       /*Henknappen längst ner*/
       .home-btn a {
        font-size: 3.6em;
    }

}

@media only screen and (min-width: 1700px) {
    /*Margin*/
    header {
        padding: 2em 15em;
        padding-bottom: 2em;
    }
    
  .project-intro {
      padding: 0em 15em;
  }

  section {
      padding: 4em 15em;
  }

   }

   @media only screen and (min-width: 1900px) { 
     /*Margin*/
     header {
        padding: 2em 17em;
        padding-bottom: 9em;
    }
    .project-intro {
        padding: 0em 25em;
        }
 
        section {
        padding: 4em 25em;
        }
}

   @media only screen and (min-width: 2000px) {
        /*Margin*/
        header {
            padding: 2em 18em;
            padding-bottom: 9em;
        }
        .project-intro {
            padding: 0em 30em;
            }
     
            section {
            padding: 4em 30em;
            }
   }

   @media only screen and (min-width: 2100px) { 
   header {
    padding: 2em 20em;
    padding-bottom: 9em;
}
   }

   @media only screen and (min-width: 2150px) { 
          /*Margin*/
          .project-intro {
            padding: 0em 34em;
            }
     
            section {
            padding: 4em 34em;
            }
        }

  @media only screen and (min-width: 2400px) { 
    /*Margin*/
    header {
        padding: 2em 23em;
        padding-bottom: 9em;
    }

    .project-intro {
      padding: 0em 40em;
      }

      section {
      padding: 4em 40em;
      }
  }

/*SLUT PÅ MEDIA QUERIES*/


.project-process, .home-btn {
    opacity: 0;
    transform: translateY(150px);
    transition: 1s ease-out;
  }

  .project-process.scrolled, .home-btn.scrolled {
    transform: translateY(0);
  opacity: 1;
}