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

main{
    overflow-x: hidden;
    background-color: rgba(24, 64, 83, 1);;
}

/*Header*/
nav a{
    text-decoration: none;
    color: rgba(24, 64, 83, 1);
    margin-right: 1cm;
    font-family:'Montserrat', sans-serif;
}
nav a:hover {
    border-bottom: 2px solid rgba(188, 214, 239, 1);
}

header{
    display:flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    width: 100%;
    z-index: 2;
    position: fixed;
    top: 0;
    width: 100%;
    padding-top: 0.5%;
}

#laptoplogo{
    padding-left: 1%;
}

/*Forside*/
#maps{
    padding: 2%;
    margin-left: 10%;
    margin-top: 3%;
    width: 80%;
    height: 600px;
}

 #videopladsholder_mobil video{
    width: 100%;
    height: 30%;
}

#laptopvideo {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
}
  
#laptopvideo video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*Kort sections*/
.tre_kort{
    display:flex;
    justify-content: space-around;
    flex-wrap:wrap;
    align-items: center;
    background:rgba(24, 64, 83, 1);
}

.tre_kort > section{
    width: 350px;
    height: 650px;
    background-color:rgba(188, 214, 239, 1);
    text-align: center;
    line-height: 20px;
    margin-top: 2%;
    align-items: center;
    padding-top: 2%;
    margin-bottom: 4%;  
}

.tre_korthavn{
    display:flex;
    justify-content: space-around;
    flex-wrap:wrap;
    align-items: center;
    background:rgba(188, 214, 239, 1);
}

.tre_korthavn > section{
    width: 350px;
    height: 650px;
    background-color:rgba(24, 64, 83, 1);
    text-align: center;
    line-height: 20px;
    margin-top: 3%;
    align-items: center;
    padding-top: 2%;
    margin-bottom: 4%;
    
}

.to_kort > section{
    width: 350px;
    height: 650px;
    background-color:rgba(24, 64, 83, 1);
    text-align: center;
    line-height: 20px;
    margin-top: 3%;
    align-items: center;
    padding-top: 2%;
    margin-bottom: 4%;
    
}

.to_kort{
    display:flex;
    justify-content: space-around;
    flex-wrap:wrap;
    align-items: center;
    background:rgba(188, 214, 239, 1);
    
}

.naturkort{
display:flex;
justify-content: space-around;
flex-wrap:wrap;
align-items: center;
background:rgba(69, 98, 89, 1)
}

.naturkort > section{
    width: 350px;
    height: 650px;
    background-color:rgba(195, 210, 203, 1);
    text-align: center;
    line-height: 20px;
    margin-top: 1%;
    align-items: center;
    padding-top: 2%;
    margin-bottom: 4%;
}


 .pladsholder{
    width: 350px;
    height: 350px;
}

/*Overskrifter*/
h3{ 
    font-family:'Montserrat', sans-serif;
    color:rgba(24, 64, 83, 1);
}

h1{
    font-family:'Montserrat', sans-serif;
    color:rgba(195, 210, 203, 1);
    text-align: center;
    margin-top: 6%;
}

.overskrift_kortblae{
    font-family:'Montserrat', sans-serif;
    color:rgba(188, 214, 239, 1);
}

h4{
    font-family:'Montserrat', sans-serif;
}

.blaeoverskrift{
    font-family: 'Montserrat', sans-serif;
    color: rgba(188, 214, 239, 1);
    margin-top: 4%;
    margin-left: 2%;
}

.groenoverskrift{font-family:'Montserrat', sans-serif;
color: rgba(69, 98, 89, 1);
margin-top: 4%;
margin-left: 2%;
}

.naturoverskrift{
    font-family:'Montserrat', sans-serif;
    color: rgba(69, 98, 89, 1);
}

.overskrift_havn{
    margin-top: 8%;
    margin-left: 2%;
    font-family:'Montserrat', sans-serif;
    color: rgba(24, 64, 83, 1);;
}

.lysgroen_overskrift{
    font-family: 'Montserrat', sans-serif;
    color: rgba(195, 210, 203, 1);
    margin-top: 4%;
    margin-left: 2%;
}


/*Knapper*/
.knap{
    color: rgba(188, 214, 239, 1);
    font-family:'Montserrat', sans-serif;
    font-size: 10pt;
    width: 120px;
    height: 40px;
    border: none;
    background:rgba(24, 64, 83, 1);
    text-decoration: none;
    margin-top: 2%;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
}

.knapnatur{
    color: rgba(195, 210, 203, 1);
    font-family:'Montserrat', sans-serif;
    font-size: 10pt;
    width: 120px;
    height: 40px;
    border: none;
    background:rgba(69, 98, 89, 1);
    text-decoration: none;
    margin-top: 2%;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
}

.knapblae{
    color: rgba(24, 64, 83, 1);
    font-family:'Montserrat', sans-serif;
    font-size: 10pt;
    width: 120px;
    height: 35px;
    border: none;
    background:rgba(188, 214, 239, 1);
    text-decoration: none;
    margin-top: 2%;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
}

/*Effekter på knap*/
.knapnatur:hover{
    color: white;
}

.knapblae:hover{
    color: white;
}
.knap:hover{
    color: white;
}

/*Baggrunde*/
#firkant{
    width: 100%;
    height: 700px;
    background-color:rgba(195, 210, 203, 1) ;
}

#firkant2{
    width: 100%;
    height: 1500px;
background-color: rgba(188, 214, 239, 1);
}

#firkant_havn{
    background-color:rgba(24, 64, 83, 1);
    width: 100%;
    height: 1500px;
}

#firkant_hejlsnor{
    background-color:rgba(69, 98, 89, 1);
    width: 100%;
    height: 1500px; 
}

#pladsholdergroen{
    width: 100%;
    height: 1450px;
    background: rgba(195, 210, 203, 1);
    }


/*Footer*/
footer{
    background-color: rgba(24, 64, 83, 1);;
    color: rgba(188, 214, 239, 1); 
}

footer p{
    font-family:'Montserrat', sans-serif;
    line-height: 22px;
}

footer div {
    display: flex;
    justify-content: space-around;
    width: 100%;
}

footer div section{
    height: 50%;
    width: 30%;
    padding: 2%;
}

.tekst_footer{
    margin-left: 0%;
}

#skrivmail{
    width: 60%;
    padding: 10px;
    background-color:white;
    border: none;
    color:rgba(24, 64, 83, 1) ;
    font-family:'Montserrat', sans-serif;
    font-size: 15px;
    text-align: left;
    margin-top: 10px;
}

#tilmeld{
    width: 30%;
    padding:10px;
    background-color:rgba(188, 214, 239, 1) ;
    border: none;
    font-family:'Montserrat', sans-serif;
    font-size: 15px;
    text-align: left;
    color:rgba(24, 64, 83, 1) ;
    margin-top: 10px;
}

/*Layout til siderne*/

.billede_hoejre{
    width: 55%;
    height: 575px;
    float: right;
    padding-top: 10%;
    padding-right: 5%;
}

.billede_hoejre img{
    width: 100%;
}

.tekstfirkant_venstre{
    position: absolute;
    width: 50%;
    height: 390px;
    left: 5%;
    top: 210px;
    background:rgba(24, 64, 83, 1) ;
    z-index: 1;
}

.tekstfirkant_venstre div{
    width: 100%;
}

.tekstfirkant_hoejre{
    position: absolute;
    width: 50%;
    height: 390px;
    left: 45%;
    top: 870px;
    background:rgba(24, 64, 83, 1);
    z-index: 1;
}

.tekstfirkant_hoejre div{
    width: 100%;
}

.billede_venstre{
    width: 55%;
    height: 575px;
    float: left;
    padding-top: 15%;
    padding-left: 5%;
}

.billede_venstre img{
    width: 100%;
}

.blaetekstfirkant_venstre{
    position: absolute;
    width: 50%;
    height: 390px;
    left: 5%;
    top: 210px;
    background:rgba(188, 214, 239, 1);
    z-index: 1;
}

.blaetekstfirkant_venstre div{
    width: 100%;
}

.groentekstfirkant_venstre{
    position: absolute;
    width: 50%;
    height: 390px;
    left: 5%;
    top: 210px;
    background:rgba(195, 210, 203, 1);
    z-index: 1;
}

.groentekstfirkant_venstre div{
    width: 100%;
}

.groentekstfirkant_hoejre{
    position: absolute;
    width: 50%;
    height: 390px;
    left: 45%;
    top: 870px;
    background:rgba(195, 210, 203, 1);
    z-index: 1;
}

.groentekstfirkant_hoejre div{
    width: 100%;
}

.blaetekstfirkant_hoejre{position: absolute;
    width: 50%;
    height: 390px;
    left: 45%;
    top: 870px;
    background:rgba(188, 214, 239, 1) ;
    z-index: 1;
}

.blaetekstfirkant_hoejre div{
    width: 100%;
}

.moerktekstfirkant_venstre{
    position: absolute;
    width: 50%;
    height: 390px;
    left: 5%;
    top: 210px;
    background:rgba(69, 98, 89, 1) ;
    z-index: 1;
}

.moerktekstfirkant_venstre div{
    width: 100%;
}

.moerktekstfirkant_hoejre{
    position: absolute;
    width: 50% ;
    height: 390px;
    left: 45%;
    top: 870px;
    background:rgba(69, 98, 89, 1);
    z-index: 1;
}

.moerktekstfirkant_hoejre div{
    width: 100%;
}


/*Tekst*/
p{
    font-family:'Montserrat', sans-serif;
    color: rgba(188, 214, 239, 1);
    margin-left: 2%;
    font-size: 12pt;
    line-height: 23px;
}

ol{
    font-family:'Montserrat', sans-serif;
    color: rgba(188, 214, 239, 1);
    font-size: 12pt;
}

.groentekst{
    font-family:'Montserrat', sans-serif;
    color: rgba(69, 98, 89, 1);
    line-height: 23px;
}

.tekst_kort{
    font-family:'Montserrat', sans-serif;
    color: rgba(24, 64, 83, 1) ;
    font-size: 12pt;
}

.tekst_blae{
    font-family:'Montserrat', sans-serif;
    color: rgba(24, 64, 83, 1) ;
    font-size: 12pt;
}

.naturtekst{
    font-family:'Montserrat', sans-serif;
    color: rgba(69, 98, 89, 1);
    font-size: 12pt;
}

.tekst_havn{
    font-family:'Montserrat', sans-serif;
    color: rgba(24, 64, 83, 1) ;
    font-size: 12pt;
}

.tekstpaakort{
    font-family:'Montserrat', sans-serif;
    color: rgba(195, 210, 203, 1);
    font-size: 18pt;
    text-align: center;
    margin-top: 2%;
}

.lysgroen_tekst{
    font-family:'Montserrat', sans-serif;
    color: rgba(195, 210, 203, 1);
    font-size: 12pt;
}

/*Billeder*/
.trebilleder{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4%;
}


/*Laptop*/
@media only screen and (min-width:820px){
    #laptopmenu{
        display:block;
    }

    #mobilheader{
        display:none;
    }

 
    #laptoplogo{
        display: block;
    }

    #mobillogo{
        display: none;
    }

    #laptopvideo{
        display: block;
    }

    #mobilvideo{
        display: none;
    }

    .billede_hoejre{
        display: block;
    }

    .mobilbillede_hoejre{
        display: none;
    }

}


/*Mobil*/
    @media screen and (max-width:820px)
    {
     #laptopmenu{
        display:none;
    }

    #mobilheader{
        display: flex;
        margin-right: 2%;
    }

   #laptoplogo{
        display: none;
    }

    #mobillogo{
        display: block;
        padding-top: 2%;
        
    }

    #laptopvideo{
        display: none;
    }

    #video_pladsholder{
        display: none;
    }

    #mobilvideo{
        width: 100%; 
        background-color:rgba(24, 64, 83, 1);
    }

    footer div{
        display: flex;
        flex-wrap: wrap;
    }

    footer div section{
        height: 50%;
        width: 100%;
        padding: 5%;
    }


    /*Billeder*/
    .billede_hoejre{
        display: none;
    }
   
    .billede_venstre{
        display: none;
    }

    .mobilbillede_hoejre{
        display: block;
    }

    /*Stranden til mobil*/
    .tekstfirkant_venstre{
        position: static;
        width: 100%;
        height: 450px;
        padding-top: 8%;
        margin-top: 4%;
    }

    .tekstfirkant_hoejre{
        position: static;
        width: 100%;
        height: 450px;
        padding-top: 8%; 
    }

    .blaeoverskrift{
        font-size: 15pt;
    }

    p{
        font-size: 10pt;
    }

    ol{
        font-size: 10pt;
    }
    
    /*Lystbådehavnen til mobil*/
    .blaetekstfirkant_venstre{
        position: static;
        width: 100%;
        height: 450px;
        padding-top: 8%;
        margin-top: 4%;
    }

    .blaetekstfirkant_hoejre{
        position: static;
        width: 100%;
        height: 450px;
        padding-top: 2%; 
    }

    .overskrift_havn{
        font-size: 15pt;
    }

    .tekst_havn{
        font-size: 10pt;
    }

    /*Hejls Nor til mobil*/
    .groentekstfirkant_venstre{
        position: static;
        width: 100%;
        height: 430px;
        padding-top: 8%;
        margin-top: 4%;
    }

    .groentekstfirkant_hoejre{
        position: static;
        width: 100%;
        height: 430px;
        padding-top: 2%;
    }

    #groenoverskrift{
        font-size: 15pt 
    }

    /*Inspiration og faciliteter til mobil*/
    h1{
        font-size:15pt;
        text-align:left;
    }

    .tekstpaakort{
        font-size: 10pt;
        text-align: left;
    }

    .moerktekstfirkant_venstre{
        position: static;
        width: 100%;
        height: 450px;
        padding-top: 8%;
        margin-top: 4%;
    }

    .moerktekstfirkant_hoejre{
        position: static;
        width: 100%;
        height: 450px;
        padding-top: 2%;
    }

    .lysgroen_overskrift{
        font-size: 15pt; 
    }

    .lysgroen_tekst{
        font-size: 10pt;
    }

    .pladsholder{
        padding-top: 4%;
    }

}