* {
    margin: 0;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    margin-bottom: 15px;
}

body { /*for at få alt helt ud til kanten af siden */
    background-color:rgb(217, 243, 233);
    background-repeat: no-repeat;
    background-attachment: fixed; /*With this option, your background will scroll along with the viewer*/
    background-position: center;
    width: 100%;
    height: auto;
    object-fit: contain;
    background-size: cover; /*fylder hele skærmen ud*/
}


@import url('https://fonts.googleapis.com/css2?family=Karla&family=Spirax&display=swap');

/*https://fonts.google.com/specimen/Spirax?preview.text=Bryllupsfotograf%0A&categoryFilters=Feeling:%2FExpressive%2FCute&preview.script=Latn&specimen.preview.text=Bryllupsfotograf%0A*/
.spirax-regular {
  font-family: "Spirax", system-ui;
  font-weight: 400;
  font-style: normal;
}

.fab {
    padding: 10px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}

header {
    width: 100%;
    height: 120px;
    position: fixed;
    top: 0; /* Nu er headeren klistret til toppen af siden */
    z-index: 3;
    background-color: rgb(217, 243, 233);
}

header nav {
    height: 100%;
}


header img{
    height: 110px;
    margin-left: 10px;
    margin-top: 5px;
}

header ul {
    float: right; /* "fold-ud" iconet placeres i venstre side i mobil verions*/
    list-style-type: none;
    padding-right: 45px; /* her bliver header texten skubbet ud fra højre side */
    margin: 0;
    display: none; /*punkterne forsvinder i mobil*/
}

header li {
    display: inline-block; /* afstand ift. padding både for oven og for neden. Undlad "block" hvis der bare skal være padding i siderne - man kan også bruge display-none for at fjerne menuen*/
    margin: 0; /* hele vejen rundt*/
    padding: 25px 8px; /*første værdi: top og bund - anden værdi: siderne */
}

header a {
    text-decoration: none; /*fjerne linkets understreger*/
    color: #000000;
    font-family: "Karla", sans-serif;
    font-size: 20px;
    padding: 5px;
}

header li a {
  padding: 10px 10px 10px 10px;
}

h1, h2, h3, h4, h5, h6 {
    color: #000000;
}

h1 {
    font-family: "Spirax", system-ui;
    color: white;
    font-size: 70px;
    text-align: center;
    position: relative;
    margin-top: 100px;
    padding-top: 400px;
    text-shadow: 2px 2px 10px black;
}

h2 {
    text-align: center;
    font-family: "Spirax", system-ui;
    font-size: 50px;
    margin-top: 40px;
    margin-bottom: 10px;
}

h3 {
    text-align: center;
    font-family: "Spirax", system-ui;
    font-size: 30px;
    margin-bottom: 20px;
    margin-top: 10px;
    padding-top: 20px;
}

h4 {
    text-align: center;
    font-family: "Spirax", system-ui;
    font-size: 25px;
    margin-bottom: 20px;
    margin-top: 10px;
    padding-top: 20px;
}


p {
    font-family: 'Karla', sans-serif;
    font-size: 18px;
    color: black;
    line-height: 30px;
    padding: 10px;
    margin-left: 20px;
    margin-right: 20px;
}

li {
    color: #000000;
    font-family: "Karla", sans-serif;
    font-size: 18px;
    padding: 5px;
    margin-left: 50px;
    line-height: 30px;
}

section {
    padding-top: 50px;
}

.p-white {
    color: white;
    padding-top: 10px;
}


/*-----------HEADER-----------*/

.hoverlogo {
  position: absolute;
  position: fixed;
  margin-top: -90px;
  margin-left: 10px;
  width:  200px;
  height: 200px;
  z-index: 5;
}

.gallery-hoverlogo {
  position: absolute;
  position: fixed;
  margin-top: 10px;
  margin-left: 10px;
  width:  200px;
  height: 200px;
  z-index: 5;
}


.fa-bars {
    float: right;
    margin-top: 30px;
    margin-right: 30px;
    margin-left: auto;
    font-size: 50px;
    color: #000000;
    padding: 5px; /*give knappen noget extra plads når man skal ramme den med finger/pil*/
    /*click-bar funktion - pilen viser at man kan trykke på den*/
    cursor: pointer;
}

/* Burgermenu */

.mainnav li a {
    transition: all 0.3s ease 0s;
    display: inline-block; /*gør at teksten bliver på sin plads når man hover*/
}

.mainnav li a:hover {
    color: #00876bff;
    transform: scale(1.3); /*gør at teksten scaler når man hover*/
}

.boarder {
    display: none;
    width: 180%;
    position: fixed;
    margin-top: -2px;
    margin-left: -150px;
    z-index: 3;
}

.gallery-boarder {
    display: none;
    width: 180%;
    position: fixed;
    margin-top: 98px;
    margin-left: -150px;
    z-index: 3;
}

/*https://www.youtube.com/watch?v=6Luw79S_fMY*/
/*-----------Background carrousel-----------*/
.container {
    height: 100vh;
    width: 100%;
    position: relative;
}


@keyframes fade {
    0% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    75% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.slide {
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    animation: fade 12s ease-in-out infinite alternate;
}

.slide:nth-of-type(1) {
    animation-delay: -10.0s;
}
.slide:nth-of-type(2) {
    animation-delay: -7.5s;
}
.slide:nth-of-type(3) {
    animation-delay: -5.0s;
}
.slide:nth-of-type(4) {
    animation-delay: -2.5s;
}

/*----------CTA button style------------*/

.center { /*Centers the cta button*/
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.cta {
    z-index: 2;
    position: relative;
    width: 180px;
    background-color: #04AA6D;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: 15px 2px;
    cursor: pointer;
    font-family: 'Karla', sans-serif;

    transition: 0.4s; /*if an animation is added - this make a smooth transisions back to normal*/
}

.cta:hover{
    transform: scale(1.15);
    transition: 0.4s;
}

/*----------Luft mellem afsnit------------*/

.space {
    padding-top: 150px;
    background-color: #263a34;
}

.darkgreen {
    width: 100%;
    background-color: #263a34;
}

.darkgreen2 {
    width: 100%;
    margin-top: -80px;
    background-color: #263a34;
    text-align: center;
}

/*----------info side------------*/

.section-info {
    padding-bottom: 30px;
}

.info-flex-box {
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-items: flex-start;
    align-content: center;
}

.info {
    height: auto;
    width: 700px;
    background-color: aliceblue;
    margin: 10px;
    padding: 20px;
    border: 5px solid #bbe1d1ff;
}

.h3-white {
    color: white;
}


/*----------Kontakt side------------*/

.contact-container{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.contact-left{
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
}

.contact-left-title h2{
    font-weight:  600;
    color: aliceblue;
    font-size: 40px;
    margin-bottom: 5px;
}

.contact-inputs{
    width: 400px;
    height: 50px;
    border: none;
    outline: none;
    padding-left: 25px;
    font-weight: 500;
    color: #666;
}


.contact-left textarea{
    height: 140px;
    width: 400px;
    padding-top: 15px;
    font-family: "Karla", sans-serif;
    padding-left: 20px;
    font-size: 18px;
}


.contact-inputs:focus{
    border: 2px solid #04AA6D;
}

input {
    font-size: 18px;
}

.contact-inputs::placeholder{
    color: #666;
    font-family: "Karla", sans-serif;
}

.contact-left button{
    height: 50px;
    width: 100px;
    display: flex;
    align-items: center;
    padding: 15px 30px;
    font-size: 18px;
    color: aliceblue;
    background-color: #04AA6D;
    gap: 10px;
    border: none;
    cursor: pointer;
}

.contact-left button:hover{
    transform: scale(1.15);
    transition: 0.4s;
}

/*-----------Slideshow containers-----------*/

.slideshow-container {
    position: relative;
    margin: auto;
    width: 100%;
}
  
  /* Hide the images by default */
  /*Den var "display: none;" i den originale version
  men så kom der intet frem når siden så var uploaded?
  Nu har jeg bare uploaded den og så må vi lige se
  om jeg kan løse det.*/
.mySlides {
    display: block;
}
  
  /* Next & previous buttons */

.next-previous-buttons {
    text-align:center;
    margin-top: 260px;

}

.prev, .next {
    cursor: pointer;
    /*position: absolute;*/
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: #bbb;
    font-weight: bold;
    font-size: 30px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}
  
  /* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}
  
  /* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
    background-color: #04AA6D;
    color: aliceblue;
}
  
/* Diamond with image inside --https://codepen.io/4dgaurav/pen/oNxrPp--*/
.diamond-box {
    margin-top: -50px;
    margin-right: 40px;
    float: right;
    width: 400px;
}
.diamond-shape, .diamond-shape div {
  margin: 0 auto;
  transform-origin: 50% 50%;
  overflow: hidden;
  width: 250px;
  height: 250px;
}
.diamond-shape {
  transform: rotate(45deg) translateY(10px);
}
.diamond-shape .dia1 {
  width: 355px;
  height: 355px;
  transform: rotate(-45deg) translateY(-74px);
}
.diamond-shape .dia1 img {
  max-width: 100%;
  height: auto;
}


.text-box {
    width: 500px;
    height: 300px;
    padding: 30px 50px 30px 30px;
    background-color: aliceblue;
}

.text-box p {
    font-size: 18px;
    font-family: 'Karla', sans-serif;
    text-align: left;
}

.customer {
    color: #000000;
    font-family: 'Karla', sans-serif;
    font-size: 16px;
    float: right;
    font-style: italic; 
}




/* The dots/bullets/indicators */

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0px 3px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    margin-bottom: 2px;
}
  
.active, .dot:hover {
    background-color: #04AA6D;
}

.smaller-width {
    max-width: 850px;
    margin: auto;
    text-align: center;
}

.much-smaller-width {
    max-width: 600px;
    margin: auto;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}


/*-----------Galleri-----------*/

.gallery{
    padding: 20px;
}

.gallery-grid {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
}

.gallery-grid img:hover {
    transform: scale(1.10);
    transition: 0.4s ease;
}

/*-----------Små billeder showcase (Flat Lays mm.)-----------*/

.small-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  padding-bottom: 20px;
  max-width: 1000px;
  margin: 10px;
}

.small-gallery-grid img {
  width: 100%;
  display: block;
  object-fit: cover;
}
  
/*-----------Profile-----------*/

.h2-color{
    color: aliceblue;
}

section:first-of-type {
    width: 100%;
    background-color: #263a34;
}

section {
    max-width: auto;
    margin: 20px;
    margin: auto;
    padding-bottom: 80px;
}

.profile {
    height: 260px;
    float: right;
    margin-left: 30px;
    margin-top: 20px;
    margin-right: 20px;
}

/*-----------Proficiencies-----------*/

.whoami h2{
    margin-top: 0;
}

.contact-container{
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.whoami {
    height: auto;
    max-width: 700px;
    background-color: aliceblue;
    margin: 10px;
    padding: 20px;
    border: 5px solid #bbe1d1ff;
}

h3:first-of-type {
    margin-top: 0px;
}

section a img:hover {
    border: #ffa837 solid 5px;
}

section img {
    height: 300px;
}

.pic-container{
    height: 500px;
    width: 100%;
    margin: auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
}

.gallerypic{
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.pakke-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    align-items: flex-start;
}

.pakke {
    height: auto;
    width: 400px;
    background-color: white;
    border: 5px solid #bbe1d1ff;
    margin: 10px;
}

.pakke li {
    margin-left: 50px;
    font-family: 'Karla', sans-serif;
    font-size: 18px;
}

.best-pick {
    color: #04AA6D;
    font-size: 15px;
    text-align: center;
    margin-top: -30px;
    margin-bottom: 20px;
}


.gallerysome{
    object-fit: contain;
    width: 250px;
    height: 100%;
    margin: 10px;
}

.square {
    width: 400px;
    margin: auto;
    margin-top: 20px;
}


/*-----------Contact-----------*/

.contact {
    background-color: white;
    border: 5px solid #bbe1d1ff;
}

.contact h2 {
    padding-top: 20px;
}

.contact h3 {
    margin-top: 10px;
}

.contact p {
    padding-top: 0;
    text-align: center;
}

.contact p:last-of-type{
    padding-bottom: 30px;
}

/*-----------FOOTER-----------*/

footer {
    margin-top: 0px;
    height: 350px;
    background-color:#00876bff;
    padding-top: 30px;
}

footer p {
    grid-area: d;
    color: white;
    font-size: 11px;
    text-align: center;
}

footer li {
    list-style-type: none;
    font-size: 15px;
}

footer a {
    text-decoration: none;
    color: white;
}

footer a:hover {
    color: #bbe1d1ff;
}

.footer-grid p {
    text-align: left;
}

.footer-pic {
    display: none;
    grid-area: c;
    min-width: 250px;
    max-width: 250px;
    margin: auto;
    padding-top: 40px;
}

.footer-li {
    grid-area: a;
}

.footer-kontakt {
    grid-area: b;
}

.footer-kontakt p {
    font-size: 15px;
}

.footer-grid {
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      ". a b c ."
      ". . d . ."
      ;
}

/*NAVIGATION*/

.toggleShow {
    /*vertical menu*/
    display: flex;
    flex-direction: column;
    position: absolute;
    /*rykker navigationen ned*/
    top: 100px;
    right: 0;
    width: 200px;
    background-color: rgb(217, 243, 233);
    padding: 10px;
    text-align: right;
    z-index: 4;
}


@media screen and (min-width: 800px) {
    /*Header*/

    .mainnav {
        text-align: center;
    }

    /*desktop version - her kommer tekst punkterne ud ved siden af hinanden*/
    header ul {
        float: none;
        display: block;
    }

    header li a {
        padding: 20px 20px 20px 20px;
    }

    h1 {
        font-size: 100px;
    }

    .fa-bars {
        display: none;
    }

    .profile {
        height: 360px;
    }

    section img {
        height: 500px;
    }

    .gallerypic{
        width: 380px;
    }

    .hoverlogo {
    width:  250px;
    height: 250px;
    }

    .gallery-hoverlogo {
    width:  250px;
    height: 250px;
    }

    .boarder {
        display: block;
    }

    .gallery-boarder {
        display: block;
    }


    /*desktop version - diamand billeder*/
    .diamond-box {
    margin-top: -250px;
    float: right;
    }

    /* Next & previous buttons */

    .next-previous-buttons {
    margin: 20px;
    }

    .footer-pic {
    display: block;
    }

}