* {
  margin: 0;
  padding: 0;
}

body {
  font-size: 20px;


  max-width: 1400px; 
  margin: 0 auto !important; 
  float: none !important; 
  
}

/* BODY CLASSES BELOW:  */

.home-body {
  background-color: rgb(247, 245, 245);
}

.om-mig-body {
}

/* EVERYTHING H1 BELOW: */

.header-text {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 20pt;
  /* padding: 5%; */
  /* padding-left: 67px; */
  margin-left: 67px;

}

@media only screen and (max-width: 1100px) {
  .header-text {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 20pt;
    /* padding: 5%; */
    /* padding-left:0px; */
    margin-left: 0px;
    text-align:center;
    /* background-color: blueviolet; */
  
  }
}

@media only screen and (max-width: 640px) {
  .header-text {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 20pt;
    /* padding: 5%; */
    /* padding-left:0px; */
    margin-left: 0px;
    text-align: center;

    /* background-color: blue; */

  
  
  }
}

.header-text:hover {
  /* text-decoration: underline; */
  /* color: rgb(97, 97, 97); */

  display: inline-block;
  position: relative;
}

.header-text::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 5px;
  bottom: -5px;
  left: 0;
  background-color: coral;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.header-text:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}



.picked-text-item {
text-decoration: underline;
text-decoration-thickness: 5px;
text-decoration-color: red;
}





/* h1 {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 30pt;
  padding: 5%;
} */

/* THE LOOK OF LINKS, BELOW: */

.longer-text-link {
  text-decoration: none;
  color: black;
  font-family: "Inter", sans-serif;
  font-size: 15pt;
  font-weight: 500;

}

.longer-text-link:hover {
  /* text-decoration: underline; */

  color: rgb(97, 97, 97);
}

a {
  color: black;
}

a:hover {
  color: rgb(97, 97, 97);
}

.special-hover-ca06 {

}

.special-hover-ca06:hover {
  color:rgb(247, 249, 107)
}

.special-hover-ca05 {

}

.special-hover-ca05:hover {
  color:rgb(229, 83, 83)
}

.special-hover-ca07 {

}

.special-hover-ca07:hover {
  color:rgb(36, 154, 36)
}

/* EVERYTHING H2 BELOWN: */

.project-titles {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 20pt;
  /* padding: 5%; */
  /* padding-left: 67px; */

  /* FLEXBOX: */
  display: flex;
  justify-content: center;

  /* background-color: aqua; */
}

@media only screen and (max-width: 1100px) {
  .project-titles {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 20pt;
    /* padding: 5%; */
    padding-left:0px;
    text-align:center;
    /* background-color: blueviolet; */
  
  }
}

@media only screen and (max-width: 640px) {
  .project-titles {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 20pt;
    /* padding: 5%; */
    padding-left:0px;
    text-align: center;

    /* background-color: blue; */

  
  
  }
}


/* EVERYTHING NAV BAR BELOW: */

.nav-bar-style {
  list-style-type: none;
  text-align:right;
 
  /* background-color: brown; */
  padding-right: 67px;
  gap: 50px;



}

@media only screen and (max-width: 1100px) {
  .nav-bar-style {


    list-style-type: none;
    text-align:center;
    /* background-color: brown; */
    /* padding: 5%; */
    gap: 2px;
    padding-right: 0px;
    padding-top: 20px;

  
  }
}

@media only screen and (max-width: 640px) {
  .nav-bar-style {
    list-style-type: none;
    text-align:center;
    /* background-color: brown; */
    /* padding: 5%; */
    gap: 2px;
    padding-right: 0px;
    padding-top: 20px;
    

  
  
  }
}

.nav-items {
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 20pt;
  color: black;

  display: inline-block;
  position: relative;
  
  /* text-decoration: none; */
  /* padding: 100px; */
  /* padding-top:200px; */
}

@media only screen and (max-width: 1007px) {
  .nav-items {
    /* FLEXBOX: */

    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: 20pt;
    color: black;
    /* padding: 100px; */
    /* padding-top:200px; */
    padding-left: 12px;
  }
}

@media only screen and (max-width: 640px) {
  .nav-items {
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: 20pt;
    color: black;
    /* padding: 100px; */
    /* padding-top:200px; */
    padding-left: 12px;
  
  }
}

.nav-items:hover {
  /* text-decoration: underline; */
  /* color: rgb(97, 97, 97); */

  display: inline-block;
  position: relative;
}

.nav-items::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 5px;
  bottom: -5px;
  left: 0;
  background-color: coral;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.nav-items:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.picked-nav-item {

  text-decoration: underline;
text-decoration-thickness: 5px;
text-underline-offset: 5px;




/* text-decoration-color: rgb(132, 113, 228); */

text-decoration-color: coral

  /* color: rgb(160, 157, 157); */

}


.picked-nav-item-ca05 {
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 20pt;
  color:  rgb(114, 170, 220);
  /* padding: 100px; */
}

@media only screen and (max-width: 1007px) {
  .picked-nav-item-ca05 {
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 20pt;
    color: rgb(114, 170, 220);
    /* padding: 100px; */
    padding-left: 12px;
  }
}

@media only screen and (max-width: 640px) {
  .picked-nav-item-ca05 {
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 20pt;
    color: rgb(114, 170, 220);
    /* padding: 100px; */
    padding-left: 12px;
  
  }
}

.picked-nav-item-ca06 {
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 20pt;
  color: rgb(255, 164, 247);
  /* padding: 100px; */
}

@media only screen and (max-width: 1007px) {
  .picked-nav-item-ca06 {
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 20pt;
    color: rgb(255, 164, 247);
    /* padding: 100px; */
    padding-left: 12px;
  }
}

@media only screen and (max-width: 640px) {
  .picked-nav-item-ca06 {
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 20pt;
    color: rgb(255, 164, 247);
    /* padding: 100px; */
    padding-left: 12px;
  
  }
}

.picked-nav-item-ca07 {
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 20pt;
  color: rgb(245, 148, 63);
  /* padding: 100px; */
}

@media only screen and (max-width: 1007px) {
  .picked-nav-item-ca07 {
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 20pt;
    color: rgb(245, 148, 63);
    /* padding: 100px; */
    padding-left: 12px;
  }
}

@media only screen and (max-width: 640px) {
  .picked-nav-item-ca07 {
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 20pt;
    color: rgb(245, 148, 63);
    /* padding: 100px; */
    padding-left: 12px;
  
  }
}




.nav-container {
  /* background-color: cadetblue; */
  /* padding-left: 5%;
  padding-top: 5%;
  padding-bottom: 5%; */

  /* FLEXBOX: */

  display: flex;
  justify-content: flex-start;
  /* flex-direction: column; */
}

@media only screen and (max-width: 1100px) {

  .nav-container {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    
  
    /* background-color:rgb(255, 0, 0); */
  }
  }

@media only screen and (max-width: 640px) {

.nav-container {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  

  /* background-color:rgb(255, 0, 0); */
}
}

/* DIVS CONTAINING THE FLEXBOX CONTAINERS. LIKE PADDING OUTSIDE OF A MAIN CONTENT CONTAINER, BELOW: */

.div-surrounding-main-containers {
  /* background-color: blue; */
  padding: 1%;
}

.div-surrounding-main-containers2 {
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 1%;
}





/* CONTAINERS FOR MAIN CONTENT, IMAGES, PARAGRAPHS ETC, BELOW: */

.h1-and-nav-container {
  /* background-color:blue; */

  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-bottom: 300px; */
  padding-top: 50px;
  padding-bottom: 70px;
  /* background-color: blueviolet; */
}

@media only screen and (max-width: 1100px) {
  .h1-and-nav-container {
    /* FLEXBOX: */

    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;



    margin-bottom: 60px;
    padding-bottom: 0px;
    /* padding: none; */
  }
}

@media only screen and (max-width: 640px) {
  .h1-and-nav-container {
    /* FLEXBOX: */

    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    margin-bottom: 50px;
    padding-bottom: 0px;


    /* gap: 15%; */
  
  }
}

.paragraph-container {
  /* background-color:blue; */

  display: flex;
  justify-content: flex-start;

  margin-bottom: 20px;

padding-top: 0px;
  margin-left: 300px;
  margin-right: 300px;
  /* background-color: blueviolet; */

}

@media only screen and (max-width: 1100px) {
  .paragraph-container {
    /* FLEXBOX: */

    display: flex;
    justify-content: flex-start;
    /* align-items: flex-start; */
    /* flex-direction: column; */



    margin-bottom: 20px;
    margin-left: 80px;
    margin-right: 80px;
    /* padding: none; */
  }
}

@media only screen and (max-width: 640px) {
  .paragraph-container {
    /* FLEXBOX: */

    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* flex-direction: column; */
    margin-bottom: 20px;
    padding-top: 0px;

    margin-left: 40px;
    margin-right: 40px;

  /* margin-bottom: 300px; */

  



    /* background-color:rgb(255, 0, 0); */


    /* gap: 15%; */
  
  }
}

.paragraph-container-list-items {
  /* background-color:blue; */

  margin-bottom: 0px;

padding-top: 0px;
  margin-left: 300px;
  margin-right: 300px;
  /* background-color: blueviolet; */

}

@media only screen and (max-width: 1100px) {
  .paragraph-container-list-items {
    /* FLEXBOX: */

    display: flex;
    justify-content: flex-start;
    /* align-items: flex-start; */
    /* flex-direction: column; */



    margin-bottom: 0px;
    margin-left: 80px;
    margin-right: 80px;
    /* padding: none; */
  }
}

@media only screen and (max-width: 640px) {
  .paragraph-container-list-items {
    /* FLEXBOX: */

    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* flex-direction: column; */
    margin-bottom: 0px;
    padding-top: 0px;

    margin-left: 40px;
    margin-right: 40px;

  /* margin-bottom: 300px; */

  



    /* background-color:rgb(255, 0, 0); */


    /* gap: 15%; */
  
  }
}

.h2-container {
  /* background-color:blue; */


  display: flex;
  justify-content: flex-start;

padding-top: 50px;
padding-bottom: 0px;
  margin-left: 300px;
  margin-right: 300px;
  /* background-color: blueviolet; */

}

@media only screen and (max-width: 1100px) {
  .h2-container {
    /* FLEXBOX: */

    display: flex;
    justify-content: flex-start;
    /* align-items: flex-start; */
    /* flex-direction: column; */



    margin-bottom: 0px;
    margin-left: 80px;
    margin-right: 80px;
    /* padding: none; */
  }
}

@media only screen and (max-width: 640px) {
  .h2-container {
    /* FLEXBOX: */

    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* flex-direction: column; */
    margin-bottom: 0px;
    padding-top: 0px;

    margin-left: 40px;
    margin-right: 40px;

  /* margin-bottom: 300px; */

  



    /* background-color:rgb(255, 0, 0); */


    /* gap: 15%; */
  
  }
}

.home-container {
  /* background-color: cadetblue; */

  /* FLEXBOX: */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 35%;
}

@media only screen and (max-width: 1007px) {
  .home-container {
    /* FLEXBOX: */

    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15%;
  }
}

@media only screen and (max-width: 640px) {
  .home-container {
    /* FLEXBOX: */

    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;

    /* gap: 15%; */
  
  }
}

.om-mig-container {
  /* FLEXBOX: */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 35%;
}

@media only screen and (max-width: 1100px) {
  .om-mig-container {
    /* FLEXBOX: */

    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5%;
    
  }
}

@media only screen and (max-width: 640px) {
  .om-mig-container {
    /* FLEXBOX: */

    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 5%;
    
  }
}



.portfolio-presentation-container {
  /* FLEXBOX: */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20%;
}

@media only screen and (max-width: 1100px) {
  .portfolio-presentation-container {
    /* FLEXBOX: */

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1%;
    
  }
}

@media only screen and (max-width: 640px) {
  .portfolio-presentation-container {
    /* FLEXBOX: */

    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;

    /* gap: 15%; */
  
  }
}

.portfolio-project-page-container1 {
  /* FLEXBOX: */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 35%;

  /* background-color: aqua; */
}

@media only screen and (max-width: 1100px) {
  .portfolio-project-page-container1 {
    /* FLEXBOX: */

  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1%;
    
  }
}

@media only screen and (max-width: 640px) {
  .portfolio-project-page-container1 {
    /* FLEXBOX: */

    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;

    /* gap: 15%; */
  
  }
}

.portfolio-project-page-container2 {
  /* FLEXBOX: */

  /* background-color: brown; */
  display: flex;
  justify-content: center;
  align-items: center;
  /* gap: 35%; */

  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

@media only screen and (max-width: 1100px) {
  .portfolio-project-page-container2 {
      /* FLEXBOX: */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding-left: 0px;
  /* gap: 35%; */


  }
}

@media only screen and (max-width: 640px) {
  .portfolio-project-page-container2 {
    /* FLEXBOX: */

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-left: 0px;
  

    /* background-color: chartreuse; */

    /* gap: 15%; */
  
  }
}

.portfolio-project-page-container2.visible {
  opacity: 1;
  transform: translateY(0);
}

.portfolio-project-page-container-new {
  /* FLEXBOX: */

  /* background-color: brown; */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left:300px;

  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;



  /* gap: 35%; */


}

@media only screen and (max-width: 1100px) {
  .portfolio-project-page-container-new {
      /* FLEXBOX: */
      margin-left: 80px;



  }
}

@media only screen and (max-width: 1008px) {
  .portfolio-project-page-container-new {

margin-left: 80px;


  }
}

@media only screen and (max-width: 640px) {
  .portfolio-project-page-container-new {
    /* FLEXBOX: */

    margin-left: 40px;



  
  }
}

.portfolio-project-page-container-new.visible {
  opacity: 1;
  transform: translateY(0);
}

.portfolio-portraitpage-container {

  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left:300px;

}

@media only screen and (max-width: 1100px) {
  .portfolio-portraitpage-container {
      /* FLEXBOX: */
      margin-left: 80px;



  }
}

@media only screen and (max-width: 1008px) {
  .portfolio-portraitpage-container {

margin-left: 80px;


  }
}

@media only screen and (max-width: 640px) {
  .portfolio-portraitpage-container {
    /* FLEXBOX: */

    margin-left: 40px;



  
  }
}






.portfolio-project-page-container3 {
  /* FLEXBOX: */

  /* background-color: brown; */

  /* gap: 35%; */
}

@media only screen and (max-width: 1100px) {
  .portfolio-project-page-container3 {
      /* FLEXBOX: */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding-left: 12px;
  /* gap: 35%; */


  }
}

@media only screen and (max-width: 1008px) {
  .portfolio-project-page-container3 {
      /* FLEXBOX: */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding-left: 12px;
  /* gap: 35%; */


  }
}

@media only screen and (max-width: 640px) {
  .portfolio-project-page-container3 {
    /* FLEXBOX: */

    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    padding-left: 0px;

    /* background-color: chartreuse; */

    /* gap: 15%; */
  
  }
}

.portfolio-project-page-container3 {
  /* FLEXBOX: */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22%;
}

@media only screen and (max-width: 1100px) {
  .portfolio-project-page-container3 {
      /* FLEXBOX: */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10%;
    
  }
}

@media only screen and (max-width: 640px) {
  .portfolio-project-page-container3 {
    /* FLEXBOX: */

    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;

    /* gap: 15%; */
  
  }
}

.portfolio-project-page-container4 {
  /* FLEXBOX: */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 7%;
}

@media only screen and (max-width: 1200px) {
  .portfolio-project-page-container4 {
      /* FLEXBOX: */
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0%;
      flex-direction: column;
  }
}

.portfolio-shoes-project-page-container1 {
    /* FLEXBOX: */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22%;
}

@media only screen and (max-width: 1200px) {
  .portfolio-shoes-project-page-container1 {
    /* FLEXBOX: */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5%;
    flex-wrap: wrap;
}
}

@media only screen and (max-width: 640px) {
  .portfolio-shoes-project-page-container1 {
    /* FLEXBOX: */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 5%;
    flex-direction: column;
}
}

.portfolio-painting-project-page-container1 {
    /* FLEXBOX: */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22%;
}

@media only screen and (max-width: 1200px) {
  .portfolio-painting-project-page-container1 {
    /* FLEXBOX: */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5%;
    flex-wrap: wrap;
}
}

@media only screen and (max-width: 640px) {
  .portfolio-painting-project-page-container1 {
    /* FLEXBOX: */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 5%;
    flex-direction: column;
}
}

.kontakt-container {
  /* FLEXBOX: */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 35%;
}

@media only screen and (max-width: 1100px) {
  .kontakt-container {
    /* FLEXBOX: */

    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5%;
    
  }
}

@media only screen and (max-width: 640px) {
  .kontakt-container {
    /* FLEXBOX: */

    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 5%;
    
  }
}



/* BACKGROUND-COLORS FOR CONTAINERS, BELOW: */

.container-background-grey {
  /* background-color: rgb(212, 206, 206); */
  background-color: rgb(235, 230, 230);
}

.container-background-grey-dark {
  /* background-color: rgb(212, 206, 206); */
  background-color: rgb(147, 144, 144);
}

.container-background-pink {
  /* background-color: rgb(212, 206, 206); */
  background-color: rgb(255, 164, 247);
}



/* media queries below is to see break points for screen size
clearly when working. */

/* @media only screen and (max-width: 1200px) {
  .container-background-grey {
    background-color: chocolate;
  }
}

@media only screen and (max-width: 640px) {
  .container-background-grey {
    background-color: darkcyan;
  }
} */

.container-background-orange {
  background-color:rgb(245, 148, 63);
}

.container-background-blue {
  background-color:rgb(114, 170, 220);
}

.container-background-green {
  background-color:rgb(64, 182, 144);
}



/* STYLING FOR INDIVIDUAL ITEMS IN THE MAIN CONTENT CONTAINERS, BELOW: */

.home-text {
  max-width: 30%;
  padding-left: 5%;
  font-family: "Inter", sans-serif;
  font-size: 15pt;
  font-weight: 500;
}

@media only screen and (max-width: 1007px) {
  .home-text {
    max-width: 30%;
    min-width: 20%;
    padding-left: 5%;
    font-family: "Inter", sans-serif;
    font-size: 15pt;
    font-weight: 500;
 

   
  }
}

@media only screen and (max-width: 640px) {
  .home-text {
    max-width: 300px;
    padding-left: 5%;
    padding-top: 0%;
    padding-bottom: 10%;
    font-family: "Inter", sans-serif;
    font-size: 15pt;
    font-weight: 400;
  }
}

.home-image {
  max-width: 20%;
}

.home-image2 {
  max-width: 250px;
  padding: 100px;
}

@media only screen and (max-width: 640px) {
  .home-image2 {
   max-width: 300px;

   padding: 5%;
    order: -1;
    
    /* background-color: coral; */
  }
}

.music-image {
  max-width: 200px;
  padding: 100px;

}

@media only screen and (max-width: 640px) {
  .music-image {
   max-width: 250px;

   padding: 5%;
   padding-left: 10%;

   order: -1;

    
    /* background-color: coral; */
  }
}

.om-mig-text {
  max-width: 50%;
  padding-left: 5%;
  font-family: "Inter", sans-serif;
  font-size: 15pt;

  flex: 1 1 50%;
}

.om-mig-image {
  /* background-color: darkgoldenrod; */
  max-width: 30%;
}

.om-mig-image2 {
  max-width: 250px;
  padding: 100px;
}

@media only screen and (max-width: 640px) {
  .om-mig-image2 {
    max-width: 300px;

    padding: 5%;
     order: -1;


    /* background-color:blueviolet; */
  }
}

/* för text till vänster: */

.portfolio-presentation-text1 {
  max-width: 50%;
  padding-left: 5%;
  font-family: "Inter", sans-serif;
  font-size: 15pt;
  font-weight: 400;

  flex: 1 1 50%;
}

.portfolio-project-img1 {
  width: 700px;
  /* background-color: darkgreen; */
  /* padding-top: 5%;
  padding-left: 5%;
  padding-right: 5%; */
  padding: 5%;

}





@media only screen and (max-width: 640px) {
  .portfolio-project-img1 {
   max-width: 300px;

   padding: 5%;
    /* order: -1; */
    
    /* background-color: coral; */
  }
}



.portfolio-project-img-new {
width: 1275px;

  padding-bottom: 80px;
  /* background-color: darkgreen; */
  /* padding-top: 5%;
  padding-left: 5%;
  padding-right: 5%; */



}

@media only screen and (max-width: 1100px) {
  .portfolio-project-img-new {
   width: 950px;
   padding-bottom: 25px;

  

   /* padding-bottom: none; */
   /* padding: 5%; */
    /* order: -1; */
    
    /* background-color: coral; */
  }
}

@media only screen and (max-width: 1008px) {
  .portfolio-project-img-new {
   width: 800px;
   padding-bottom: 25px;
  

   /* padding-bottom: none; */
   /* padding: 5%; */
    /* order: -1; */
    
    /* background-color: coral; */
  }
}

@media only screen and (max-width: 810px) {
  .portfolio-project-img-new {
   width: 700px;
   padding-bottom: 20px;
  

   /* padding-bottom: none; */
   /* padding: 5%; */
    /* order: -1; */
    
    /* background-color: coral; */
  }
}



@media only screen and (max-width: 670px) {
  .portfolio-project-img-new {
   width: 645px;
   padding-bottom: 20px;
   

   /* padding-bottom: none; */
   /* padding: 5%; */
    /* order: -1; */
    /* padding: 7px; */
    
    /* background-color: coral; */
  }
}

@media only screen and (max-width: 640px) {
  .portfolio-project-img-new {
   width: 340px;
   padding-bottom: 20px;

   /* padding-bottom: none; */
   /* padding: 5%; */
    /* order: -1; */
    /* padding: 7px; */
    
    /* background-color: coral; */
  }
}

.portfolio-project-img-new2 {
  /* max-width: 100%;
  max-height: 100%; */
  width: 800px;
  padding-bottom: 40px;
  /* background-color: darkgreen; */
  /* padding-top: 5%;
  padding-left: 5%;
  padding-right: 5%; */



}

@media only screen and (max-width: 1100px) {
  .portfolio-project-img-new2 {
   /* width: 100px; */
   width: 630px;

   /* padding: 5%; */
    /* order: -1; */
    
    /* background-color: coral; */
  }
}

@media only screen and (max-width: 640px) {
  .portfolio-project-img-new2 {
   /* width: 100px; */
  width: 300px;
  padding: 0px;
  padding-bottom: 20px;

   /* padding: 5%; */
    /* order: -1; */
    
    /* background-color: coral; */
  }
}

.portfolio-project-video-new2 {
  /* max-width: 100%;
  max-height: 100%; */
  width: 800px;
  height: 450px;
  padding-bottom: 40px;
  /* background-color: darkgreen; */
  /* padding-top: 5%;
  padding-left: 5%;
  padding-right: 5%; */



}

@media only screen and (max-width: 1100px) {
  .portfolio-project-video-new2 {
   /* width: 100px; */
   width: 630px;
   height: 350px;

   /* padding: 5%; */
    /* order: -1; */
    
    /* background-color: coral; */
  }
}

@media only screen and (max-width: 640px) {
  .portfolio-project-video-new2 {
   /* width: 100px; */
  width: 300px;
  height: 200px;
  padding: 0px;
  padding-bottom: 20px;

   /* padding: 5%; */
    /* order: -1; */
    
    /* background-color: coral; */
  }
}

.portfolio-project-img2 {
  width: 300px;
  /* background-color: darkgreen; */
  padding: 2%;
}

@media only screen and (max-width: 640px) {
  .portfolio-project-img2 {
   max-width: 300px;

   padding: 5%;
    
    
    /* background-color: coral; */
  }
}

.portfolio-project-img3 {
  width: 700px;
  /* background-color: darkgreen; */
  padding: 2%;
}

@media only screen and (max-width: 1100px) {
  .portfolio-project-img3 {
    width: 600px;
    /* background-color: darkgreen; */
    padding: 2%;
  }
}

@media only screen and (max-width: 640px) {
  .portfolio-project-img3 {
   max-width: 300px;

   padding: 5%;
    
    
    /* background-color: coral; */
  }
}

.portfolio-project-img4 {
  width: 250px;
  /* background-color: darkgreen; */
  padding: 5%;
}

@media only screen and (max-width: 640px) {
  .portfolio-project-img4 {
   max-width: 250px;

   padding: 5%;
   padding-left: 10%;

    
    /* background-color: coral; */
  }
}

.portfolio-project-img5 {
  width: 600px;
  /* background-color: darkgreen; */
  padding: 5%;
}

@media only screen and (max-width: 1100px) {
  .portfolio-project-img5 {
    width: 600px;
    /* background-color: darkgreen; */
    /* padding: 5%; */
  }
}

@media only screen and (max-width: 640px) {
  .portfolio-project-img5 {
   max-width: 400px;

   padding: 0%;

    
    /* background-color: coral; */
  }
}

.portfolio-project-img6 {
  width: 250px;
  /* background-color: darkgreen; */
  padding: 5%;
  /* background-color: chocolate; */
}

@media only screen and (max-width: 1100px) {
  .portfolio-project-img6 {
    width: 250px;
    /* background-color: darkgreen; */
    /* padding: 5%; */
    /* background-color: chocolate; */
  }
}

@media only screen and (max-width: 640px) {
  .portfolio-project-img6 {
   max-width: 300px;

   padding: 5%;

    
    /* background-color: coral; */
  }
}


.portfolio-project-img7 {
  width: 400px;
  /* background-color: darkgreen; */
  padding-top: 5%;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 2%;
}

@media only screen and (max-width: 1100px) {
  .portfolio-project-img7 {
    width: 300px;
    /* background-color: darkgreen; */
    padding: 2%;
  }
}

@media only screen and (max-width: 640px) {
  .portfolio-project-img7 {
   max-width: 300px;

   padding: 5%;
    
    
    /* background-color: coral; */
  }
}

.portfolio-project-img-donut {
  width: 300px;
  /* background-color: darkgreen; */
  padding: 5%;
}

@media only screen and (max-width: 640px) {
  .portfolio-project-img-donut {
   max-width: 300px;

   padding: 5%;
    /* order: -1; */
    
    /* background-color: coral; */
  }
}

.kontakt-image {
  max-width: 250px;
  padding: 100px;
}

@media only screen and (max-width: 640px) {
  .kontakt-image {
    max-width: 300px;

    padding: 5%;
    /* padding-bottom: 30%; */
     order: -1;


    /* background-color:blueviolet; */
  }
}



.presentation-texts-general {
  max-width: 50%;
  min-width: 250px;
  padding-left: 5%; 
  padding-top: 5%;
  padding-bottom: 5%;
  font-family: "Inter", sans-serif;
  font-size: 15pt;
  font-weight: 500;

  flex: 1 1 50%;
}

@media only screen and (max-width: 1100px) {
  .presentation-texts-general {
    max-width: 50%;
    min-width: 150px;
    padding-left: 5%; 
    padding-top: 5%;
    padding-bottom: 5%;
    font-family: "Inter", sans-serif;
    font-size: 15pt;
    font-weight: 500;
  
    /* flex: 1 1 50%; */
    
  }
}

@media only screen and (max-width: 640px) {
  .presentation-texts-general {
    max-width: 300px;
    padding-left: 5%;
    padding-top: 0%;
    padding-bottom: 10%;
    font-family: "Inter", sans-serif;
    font-size: 15pt;
    font-weight: 400;

    order: 1;
  }
}

.linnelur-project-page-text {
  max-width: 50%;
  min-width: 250px;
  padding-left: 5%; 
  padding-top: 5%;
  padding-bottom: 5%;
  font-family: "Inter", sans-serif;
  font-size: 15pt;
  font-weight: 500;

  flex: 1 1 50%;

}

@media only screen and (max-width: 1100px) {
  .linnelur-project-page-text {
    max-width: 50%;
    min-width: 300px;
    padding-left: 5%; 
    padding-top: 5%;
    padding-bottom: 5%;
    font-family: "Inter", sans-serif;
    font-size: 15pt;
    font-weight: 500;
  
    /* flex: 1 1 50%; */
    
  }
}

@media only screen and (max-width: 640px) {
  .linnelur-project-page-text {
    max-width: 300px;
    padding-left: 5%;
    padding-top: 0%;
    padding-bottom: 10%;
    font-family: "Inter", sans-serif;
    font-size: 15pt;
    font-weight: 400;

    order: 1;
  }
}



.om-mig-text2 {
  max-width: 50%;
  min-width: 250px;
  padding-left: 5%; 
  padding-top: 5%;
  padding-bottom: 5%;
  font-family: "Inter", sans-serif;
  font-size: 15pt;
  font-weight: 500;

  flex: 1 1 50%;
}

@media only screen and (max-width: 1007px) {
  .om-mig-text2 {
    

    max-width: 50%;
    min-width: 200px;
    padding-left: 5%; 
    padding-top: 5%;
    padding-bottom: 5%;
    font-family: "Inter", sans-serif;
    font-size: 15pt;
    font-weight: 500;
  
    flex: 1 1 50%;
 
    
  }
}

/* @media only screen and (max-width: 640px) {
  .om-mig-text2 {
    

    max-width: 50%;
    min-width: 200px;
    padding-left: 5%; 
    padding-top: 5%;
    padding-bottom: 5%;
    font-family: "Inter", sans-serif;
    font-size: 15pt;
    font-weight: 500;
  
    flex: 1 1 50%;
 
    
  }
} */

@media only screen and (max-width: 640px) {
  .om-mig-text2 {
    

    max-width: 300px;
    padding-left: 5%;
    padding-top: 0%;
    padding-bottom: 10%;
    font-family: "Inter", sans-serif;
    font-size: 15pt;
    font-weight: 400;
 
    
  }
}

/* testar ny variant med px istället för prcent i width: */

/* .presentation-texts-general {
  /* max-width: 450px;
  min-width: 300px; */
 
  padding-left: 5%;
  font-family: "Inter", sans-serif;
  font-size: 15pt;
  background-color: crimson;

  /* flex: 1 1 50%; */
} */

/* för text till höger (tror jag): */

.portfolio-presentation-text2 {
  max-width: 50%;
  padding-right: 5%;
  font-family: "Inter", sans-serif;
  font-size: 15pt;

  flex: 1 1 50%;
}

/* .portfolio-presentation-image1 {
  background-color: darkgoldenrod;
  max-width: 20%;
  padding: 10%;
} */

/* Ny version som använder px till width iställer %. Löste problem med gigantisk anchor tag, men varför?? */

.portfolio-presentation-image1 {
  /* background-color: darkgoldenrod; */
  max-width: 250px;
  padding: 100px;
}

@media only screen and (max-width: 640px) {
  .portfolio-presentation-image1 {
    max-width: 300px;
    padding: 5%;
    order: -1;
    /* background-color: darkgreen; */
    
  }
}

.portfolio-presentation-image2 {
  max-width: 20%;
  padding: 10%;
}

/* EVERYTHING < A > TAGS BELOW */

.a-tag-background-color {
  /* används för bakgrundsfärg för kontroll */

  /* background-color: cadetblue; */
}

/* EVERYTHING FOOTER, BELOW: */

.footer-container {
  padding-left: 1%;
  padding-bottom: 1%;
  /* background-color: chocolate; */
  
  /* FLEXBOX: */
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;


}

.footer-style {
  font-family: "Inter", sans-serif;
  font-size: 10pt;
  font-weight: 400;
  }

  
  /* EVERYTHING  IMG HOVER, BELOW: hover för text ligger under sina respektive klasser */


  .img-hover1 {
    transition: transform 0.4s;
  }

  .img-hover1:hover {
    transform: scale(1.01);
  }
  @media only screen and (max-width: 1007px) {
    .img-hover1:hover {
  transform: scale(1.0)
      
    }
  }

  .text-hover1 {
    transition: transform 0.4s;
  }

  .text-hover1:hover {
    transform: scale(1.1);
  }

  .img-hover2 {
    transition: transform 0.4s;
  }

  .img-hover2:hover {
    transform: scale(1.3)
  }

  @media only screen and (max-width: 1007px) {
    .img-hover2:hover {
  transform: scale(1.0)
      
    }
  }



/* ANTECKNINGAR / EXEMPEL FRÅN ANDRA PROJEKT: */

.child-cycling-img {
  width: 20%;
  display: flex;
  position: absolute;
  /* right: 750px; */
  /* right: 710px; */
  left: 200px;
  top: 700px;
}

@media only screen and (max-width: 600px) {
  .child-cycling-img {
    display: none;
  }
}

.img-frontpage {
  margin-top: 2%;
  width: 55%;
  /* transition: width3s; */
  transition: transform 0.4s;
}
.img-frontpage:hover {
  transform: scale(1.1);
  /* transition: 2s; */
  /* width: 80%; */
}

.video {

  padding: 5%;
  padding-top: 15%;
  padding-bottom: 15%;
  /* FLEXBOX: */
  /* display: flex;
  justify-content: center; */

  /* background-color: brown; */
}

.video-container {
  display: flex;
  justify-content: center;
}

.link-no-underline {
  text-decoration: none;
}

.paragraphs {
  width: 400px;
  font-family: "Inter", sans-serif;
  font-weight: 200;
  font-size: 10pt;
  /* padding: 5%; */
  padding-bottom: 80px;
  padding-left: 67px;
}

@media only screen and (max-width: 1007px) {
  .paragraphs {
    width: 400px;
    font-family: "Inter", sans-serif;
    font-weight: 200;
    font-size: 10pt;
    /* padding: 5%; */
    padding-bottom: 0px;
    padding-left: 15px;
    /* background-color: brown; */
  }

}

@media only screen and (max-width: 640px) {
  .paragraphs {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 20pt;
    /* padding: 5%; */
    padding-left:0px;
    text-align: center;
  }

}

.paragraphs2 {


  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 15pt;
  /* padding: 5%; */
  padding-left: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  text-align: left;
}

@media only screen and (max-width: 1100px) {
  .paragraphs2 {
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: 15pt;
    /* padding: 5%; */
    padding-left:0px;
    text-align: left;
    padding-bottom: 0px;
    padding-top: 0px;

    /* background-color: blue; */
  
  }
}

@media only screen and (max-width: 640px) {
  .paragraphs2 {
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: 15pt;
    /* padding: 5%; */
    padding-left:0px;
    padding-top: 0px;
    text-align: left;
    

    /* background-color: blue; */

  
  
  }
}

.paragraphs2_bottom {


  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 15pt;
  /* padding: 5%; */
  padding-left: 0px;
  padding-top: 0px;
  padding-bottom: 50px;
  text-align: left;

  /* background-color: blueviolet; */
}

@media only screen and (max-width: 1100px) {
  .paragraphs2_bottom {
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: 15pt;
    /* padding: 5%; */
    padding-left:0px;
    text-align: left;
    padding-bottom: 20px;
    padding-top: 0px;

    /* background-color: blue; */
  
  }
}

@media only screen and (max-width: 640px) {
  .paragraphs2_bottom {
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: 15pt;
    /* padding: 5%; */
    padding-left:0px;
    padding-top: 0px;
    padding-bottom: 20px;
    text-align: left;
    

    /* background-color: blue; */

  
  
  }
}

.button_container {

  margin-left: 300px;
  margin-right: 300px;

  margin-top: 40px;
  margin-bottom: 40px;

  display: flex;
  justify-content: flex-start;

}

@media only screen and (max-width: 1100px) {
  .button_container {

    margin-left: 80px;
    margin-right: 80px;

    display: flex;
    justify-content: flex-start;

    /* background-color: blue; */

  
  
  }
}

@media only screen and (max-width: 640px) {
  .button_container {

    margin-left: 40px;
    margin-right: 40px;

    /* background-color: blue; */

  
  
  }
}



.button_style {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 15pt;
  text-decoration: none;

  background-color: rgb(115, 166, 249);
  padding: 15px;
  border-radius: 30px;
}

.h2 {


  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 15pt;
  /* padding: 5%; */
  padding-left: 0px;
  padding-top: 20px;
  padding-bottom: 0px;
  text-align: left;
}

@media only screen and (max-width: 1100px) {
  .h2 {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 15pt;
    /* padding: 5%; */
    padding-left:0px;
    text-align: left;
    padding-bottom: 0px;

    /* background-color: blue; */
  
  }
}

@media only screen and (max-width: 640px) {
  .h2 {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 15pt;
    /* padding: 5%; */
    padding-left:0px;
    text-align: left;

    /* background-color: blue; */

  
  
  }
}