*{
    margin:0px;
    padding:0px;
    box-sizing: border-box;

}



.hero {
width: 100vw;
height: 100vh;
background-color: none;

}

.hero video{
    width: 100vw;
    height: 100vh;
}

#bgblade {
    position: absolute;
    
    
    bottom: 0;

  
    min-height: 100%;
    min-width: 90%;

    opacity: 50%;
    background-color: none;
    
    

    
    
}
  

.dropbtn {
    background-color: rgba(146, 135, 112, 0.842);
    color: black;
    padding: 2px 33px;
    font-size: 23px;
    border: none;
    cursor: pointer;
    height: 10vh;
    font-family: 'Amatic SC', cursive;
    font-weight: 700;
    letter-spacing: 0.1em;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
       

    
}



.dropdown {
    position: fixed;
    display: inline-block;
    right: 0;
    margin-top: 3vh;
    margin-right: 5vw;
    z-index: 100;
    
    
    
    

    
    

    
}
  

.dropdown-content {
    display: none;
    position: absolute;
   
    background-color: #f9f9f9;
    width: fit-content;
    box-shadow: 0px 5px 18px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    
    

    
  
    
}
  
.dropdown:hover .dropdown-content {
    display: block;
    
    
    
   
    
}
.dropdown-content a {
    color: black;
    padding: 10px 8px 10px 15px;
    line-height: 1.5em;
    font-family: 'Hind Siliguri', sans-serif;
    text-decoration: none;
    display: block;
    font-weight: 300;
    font-size: 13px;
    
    
}
  
.dropdown-content a:hover {
    background-color: #f1f1f1;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    
}
  
.dropdown:hover .dropbtn{
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;

}







header{
width: 100vw;
height: 15vh;

position: absolute;




}



.herotext{
    width: 50vw;
    height: 70vh;
    margin-left: 10vw;
    padding: 120px 10px 5px 10px;
    
    position: relative;
    
    
  
   
   

    
}

h1{
    font-size: 5rem;
    
    color: black;
   
    font-family: 'Amatic SC', cursive;
    
    font-weight: 100;
    
}



h2{
    font-size: 20px;
    color: palevioletred;
    font-family: 'Hind Siliguri', sans-serif;
    text-transform: uppercase;
    margin-top: 10px;
    font-weight: 400;
    line-height: 1.5em;
    

}

main{
width: 100vw;
height: 180vh;

background-color: none;

display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 0.7fr 2fr 2fr;
column-gap: 8vw;
padding-left: 10vw;
padding-right: 10vw;



}


.portitem{

    
    position: relative;
    background-color: none;
}




.portitem img{
/*max-width: 40vw;
height: 50vh;*/

object-fit: contain;


object-position: top;
width: 22vw;
height: 60vh;









}

.portitemhover{

    width: 100%;
     height: 100%;
    opacity: 0%;    
  
   border: 10px  rgba(146, 135, 112, 0.842) dotted;
   border-left: 0px;
   border-right: 0px;
   border-bottom: 0px;
    
   
   background-color: transparent;
    position: absolute;
   
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: -25px;
    /*border-radius: 20px;*/
    font-family: 'Amatic SC', cursive;
    text-align: center;
   
    font-size: 1rem;

    
}






.portitemhover:hover{
   
    
    transform:translateY(-2%);
    position: absolute;
    transition: cubic-bezier(0.165, 0.84, 0.44, 1);
    transition-duration: .5s;
    transition-property: all;
    display: block;
    opacity: 90%;
}

main h3{
grid-column: 1/-1;
grid-row: 1/2;

font-size: 4vw;
color: black;

font-family: 'Amatic SC', cursive;
text-transform: uppercase;
margin-top: 10px;
font-weight: 500;
text-align: center;
background-color: none;

justify-self: center;
}

.cv{
    width: 100vw;
    /*width: 100%;*/
    height: 100vh;
    background-color: #cc9999;
   
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 3fr 1fr;
   column-gap: 10vw;
}

.cv img{
    width: 30vw;
    height: 90vh;
   
    grid-column: 2/3;
    background-color: none;
    grid-row: 1/-1;
    position: relative;
    object-fit: contain;
    margin-top: 10vh;
    object-position: bottom;
    
  
    

    

}



.cvtekst{
    grid-column: 1/2;
    grid-row: 1/2;
    
    background-color: none;
   
    max-width: 50vw;
}

.cvtekst h2{
    padding-top: 30vh;
    padding-left: 10vw;
    font-family: 'Amatic SC', cursive;
    font-size: 2.5rem;
    
    color: white;
    font-weight: 500;
}

.cvtekst p{
    font-family: 'Hind Siliguri', sans-serif;
    font-size: 1rem;
    padding-top: 5vh;
    padding-left: 10vw;
    color: white;
    line-height: 1.3em;
    font-weight: 300;
}



.download{
    background-color: black;
    max-width: 50vw;
    height: 10vh;
    text-align: center;
    
    grid-column: 1/2;
    grid-row: 2/3;
    
    margin-left: 10vw;
    
    
}

.download a{
   
    text-decoration: none;
    
    font-size: 2rem;
color: #cc9999;
font-family: 'Amatic SC', cursive;
text-transform: uppercase;

font-weight: 500;
line-height: 10vh;

}

.sideto{
width: 100vw;
height: 100vh;
background-color: none;

display: grid;
grid-template-columns: 0.8fr 1fr 1fr;
grid-template-rows: 1fr;
gap: 30px;
padding: 0vh 10vw 10vh 10vw;

}

.sideto p{
    font-family: 'Hind Siliguri', sans-serif;
    color: #f9f9f9;
    font-size: 1.5vw;
    font-weight: 300;
}
.sideto h3{
    grid-column: 1/-1;
    grid-row: 1/2;
    
    font-size: 4vw;
    color: black;
    font-family: 'Amatic SC', cursive;
    text-transform: uppercase;
    margin-top: 0px;
    font-weight: 500;
    background-color: none;
    text-align: center;
    
    }


.cvitemet{
    grid-column: 1/2;
    display: grid;
    position: relative;
    height: 70vh;
    
}
.cvitem{
    background: none;
    display: grid;
   grid-column: 2/3;
   position: relative;
   height: 70vh;
   
   
}

.cvitem img{
    width: 100%;
height: 100%;
object-fit: cover;



}

.cvitem:hover{
    height: 100%;
    
   
   
    
    
    
    
}

.cvitemtext {
    
    
    
   object-fit: contain;
    
   
    width: 100%;
    height: 100%;
    opacity: 0%;
    
    
   
    background-color: #6e373778;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  
    text-align: center;
  
    
    
    
    
    
    
}

.cvitemtext:hover {
    
       opacity: 100%;
}

.cvitem:hover img{
    
    
    
    object-fit: cover;
    object-position: top;
    
  
    
    
    
}

.mt{
    position: relative;
    background-color: none;
    object-fit: cover;
    height: 70vh;
}
.sideto video{
    width: 100%;
    height: 100%;

}
.mt:hover{
    height: 100%;
    object-fit: cover;
    
   
    
    
    
    
    
    
}

.tofortsat{
    width: 100vw;
    height: 80vh;
    background-color: none;
    
    display: grid;
    grid-template-columns: 0.8fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 30px;
    padding: 0vh 10vw 10vh 10vw;

}

.tofortsat p{
    font-family: 'Hind Siliguri', sans-serif;
    color: #f9f9f9;
    font-size: 1.5vw;
    font-weight: 300;
}

.cvitemfire{
    background: none;
    display: grid;
   grid-column: 1/2;
   position: relative;
   height: 70vh;
   
   
}

.cvitemfire img{
    width: 100%;
height: 100%;
object-fit: cover;




}

.cvitemfire:hover{
    height: 100%;
    
   
   
    
    
    
    
}
.cvitemfire:hover img{
    
    
   
    object-fit: cover;
    object-position: top;
    
    
    
  
  
    
    
    
}

.cvitemfem{
    background: none;
    display: grid;
   grid-column: 2/3;
   position: relative;
   height: 70vh;

}

.tofortsat video{
    width: 100%;
    height: 100%;

}

.cvitemseks{
    background: none;
    display: grid;
   grid-column: 3/4;
   position: relative;
   height: 70vh;
   object-position: left;
   
   
}

.cvitemseks img{
    width: 100%;
height: 100%;
object-fit: cover;
object-position: left;



}

.cvitemseks:hover{
    height: 100%;
    
}

.skrivebord{
    width: 100vw;
    height: 120vh;
    background-image: url("img/skrivebordbaggrund.png");
    background-size: cover;
    display: grid;
    grid-template-rows: 1fr 5fr;

    grid-template-columns: 1fr 5fr;
    
}

.skrivebord h3{
    color: white;
    font-family: 'Amatic SC', cursive;
    text-transform: uppercase;
    margin-top: 5px;
    font-weight: 500;
    font-size: 50px;
    text-align: center;
    grid-row: 1/2;
    grid-column: 1/-1;
    
}

.cykelmand{
    background-color: #f1f1f1;
    border-radius: 50%;
    margin-left: 5vw;
    grid-column: 1/2;
    height: 50vh;
    width: 50vh;
    display: grid;
    position: relative;
    text-align: center;
    
   
    
        
    
    
}



.cykelmand video:hover{
    opacity: 50%;

}

.cykelmand p{
    font-size: 10vh;
    margin-top: 15%;
    color: black;
    font-family: 'Amatic SC', cursive;
    text-transform: uppercase;
}


.cykelmand video{
    background-color: white;
    height: 130%;
    overflow: hidden;
    height: 50vh;
    width: 50vh;
    border-radius: 50%;
    justify-self: center;
    position: absolute;
    padding-right: 5%;
    
    
    
    
}


.kortogtegning{
    grid-column: 2/3;
    grid-row: 1/3;
    display: grid;
    position: relative;
   
    height: 102vh;
    
}

.kortogtegning img{
    object-fit: cover;
    height: 100%;
    width: 100%;
    margin-right: 5vw;
    
}
.sidetre{
    width: 100vw;
    height: 80vh;
    background-color: #99CCCC;
    display: grid;

    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    text-align: center;
    font-size: 50px;
    
   
    
    padding: 0vh 5vw 5vh 5vw;
    gap: 25px;
    row-gap: 5px;
    

} 

.sidetre h3{
    grid-column: 1/-1;
    color: black;
    font-family: 'Amatic SC', cursive;
    text-transform: uppercase;
    margin-top: 5px;
    font-weight: 500;

}


.havitem{
    background: none;
    

    position: relative;
    
    object-fit: cover;
    justify-content: start;



   
}

.havitemto{
    background: none;
    

    position: relative;
    
    object-fit: cover;
    width: auto;
    height: auto;

    grid-row: 2/3;
    display: grid;
    
    
   
    justify-content: center;
    padding-bottom: 20%;
   
   

    
    
   
}

.havitemto img{
    object-fit: contain;
    width: 100%;
    height: 100%;
    
   
}

.sidetre video{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tang{
    
    /*z-index: 3;
   background: transparent;
    object-fit: cover;
    height: 40vh;
    width: 25vw;
    
    margin-left: -10vw;
    
    
    
    opacity: 0%;*/
    
    
    
    
    
   
}

.tang img{
   
    
    /*width: 140%;
    margin-bottom: -50vh;*/
    
    
   
}


.sidefire{
    background-color: black;
    width: 100vw;

    


}
.sidefire svg{
  
   
}

.havitemtre{
    grid-column: 4/5;
    grid-row: 2/3;
    
    width: 120%;
    height: 120%;
    object-fit: contain;
    
    position: relative;
    margin-bottom: 80px;
    object-position: bottom;

    
    
    
}
.havitemtre img{
    object-fit: contain;
    width: 100%;
    height: 100%;
    object-position: bottom;
     
    
    
    
    
}

.havitemtre:hover img{
   
    opacity: 0%;
    
}

.havitemtre:hover{
    
    background-image: url(img/havfrue.png);
    background-position: bottom;
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: left -2vw;
    background-position-y: bottom -1vw;
    
}
  

footer{
    width: 100vw;
    height: 50vh;
    background-color: black;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-row: 1fr;
   
    

}

.tango{
    
    
    grid-row: 1/-1;
    grid-column: 2/3;
    background-color: none;
    width: 40vw;
    height: 40vh;
    object-fit: cover;
    display: flex;
    flex-direction: column-reverse;
      
    
    
    
}

.tango img{
    
   max-height: 170vh; 
   width: 100%;
   opacity: 100%;
   margin-left: -10vw;
   
   
   
    background: transparent;
}

footer a{
    color: white;
    text-decoration: none;
    padding-top: 10vh;
    font-size: 1rem;
    font-family: 'Hind Siliguri', sans-serif;
    font-weight: 500;
    text-align: right;
    
    letter-spacing: 0.2em;
    margin-right: 10%;
    margin-bottom: 30vh;
    
}