@charset "utf-8";

/*Style.css*/


/*Browser reset*/

* {
    margin: 0;
    padding: 0;
}


/*Menulinje og footer*/

nav {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    display: flex;
    height: 50px;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0px;
}

#nav-container {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    display: flex;
    height: 50px;
    justify-content: space-between;
    align-items: center;
    top: 0px;
    max-width: 1600px;
}

#navlogo img {
    width: 45px;
    height: 45px;
    margin-top: 2.5px;
    margin-left: 2.5px;
    margin-right: 2.5px;
}

#navelementer {
    height: 100%;
    flex-basis: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

#navelementer a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-basis: 34%;
    color: black;
    border-width: 0px 0.5px;
    border-style: none solid;
    border-color: #aaeeee;
}

#navelementer a:hover {
    background-color: #aaeeee;
}

#navelementer a:focus {
    background-color: #aaeeee;
}

#navelementer a div {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

footer {
    text-align: center;
    padding-top: 5px;
    min-height: 20px;
    width: 100%;
}

@media only screen and (min-width: 750px) {
    #navelementer {
        height: 100%;
        flex-basis: 300px;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
}

.pagenav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.pagenav li a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 15px;
    color: black;
    border-width: 0.5px;
    border-style: solid;
    border-color: #005b88;
    background-color: #7dd5ff;
}

.pagenav li a:hover {
    background-color: #006a9d;
}

.pagenav li a:focus {
    background-color: #006a9d;
}


/*font*/

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
h1 {
    font-family: 'Open sans', sans-serif;
    padding-bottom: 5px;
    font-size: 25px;
}

h2 {
    font-family: Verdana, Geneva, sans-serif;
    padding-bottom: 5px;
    font-size: 20px;
}

h3 {
    font-family: Verdana, Geneva, sans-serif;
    padding-bottom: 5px;
    font-size: 15px;
}

p,
ul,
img,
a {
    font-family: Helvetica, sans-serif;
    font-size: 16px;
}

p {
    line-height: 1.5;
}

#titel {
    text-align: center;
    padding-bottom: 0px;
}

#pagetitel {
    padding-bottom: 0px;
}

.titel,
.pagetitel {
    font-size: 30px;
    padding-bottom: 0px;
}

.sectiontitel {
    font-size: 30px;
    margin-bottom: 10px;
    flex: 100%;
}

li {
    list-style-type: none;
}

a {
    text-decoration: none;
}

.dato {
    font-size: 14px;
}

.tag {
    font-size: 15px;
}

.lilletekst {
    font-size: 14px;
    text-align: center;
}


/*Layout*/

#container {
    padding-top: 50px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

#container,
header,
section,
#titel,
#pagetitel,
#portfoliesektion,
#nederst,
#pvenstre,
#phojre,
#logostor,
#cvogkontakt,
#cvet {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#whySiteName,
#cv {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

#uddybning {
    align-self: flex-end;
}

#uddybning div {
    padding: 10px;
}

#lignendeprojekter {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px;
}

#galleri {
    padding: 10px;
}

#portfolien,
#thegallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

#portfolien section .beforegallerypadder,
#portfolien section .gallery,
#portfolien section .aftergallerypadder,
#thegallery section .beforegallerypadder,
#thegallery section .gallery,
#thegallery section .aftergallerypadder {
    padding: 10px;
}

#portfolien section,
#thegallery section {
    border-radius: 15px;
}

.spaceunder {
    margin-bottom: 15px;
}

#cvet {
    margin-bottom: 10px;
}

section {
    /*border-bottom: 1px solid black;*/
    padding-bottom: 10px;
}

.no-padding-bottom {
    padding-bottom: 0px;
}

.notindex {
    flex-wrap: nowrap;
}

.m20 {
    flex-basis: 19.5%;
    max-width: 19.5%;
}

.m25 {
    flex-basis: 24.37;
    max-width: 24.37%;
}

.m30 {
    flex-basis: 29.5%;
    max-width: 29.5%;
}

.m33 {
    flex-basis: 32.5%;
    max-width: 32.5%;
}

.m40 {
    flex-basis: 39.5%;
    max-width: 39.5%;
}

.m50 {
    flex-basis: 49%;
    max-width: 49%;
}

.m60 {
    flex-basis: 59%;
    max-width: 59%;
}

.m66 {
    flex-basis: 66%;
    max-width: 66%;
}

.m70 {
    flex-basis: 69%;
    max-width: 69%;
}

.m100 {
    flex-basis: 100%;
}

.lignprojekter {
    flex-basis: 50%;
}

.mcollapse {
    visibility: collapse;
    height: 0px;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0px;
}

@media only screen and (min-width: 750px) {
    .mshowt-lcollapse {
        visibility: collapse;
        height: 0px;
        margin: 0;
        padding: 0;
        position: fixed;
        top: 0px;
    }
}

.padder {
    margin: 15px 10px;
    flex: 100%;
}

.beforegallerypadder {
    margin: 15px 10px 0px 10px;
    flex: 100%;
}

.aftergallerypadder {
    margin: 0px 10px 15px 10px;
    flex-basis: 100%;
}


/*billeder*/

#logostor .padder {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

#pageimg {
    flex-grow: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

#pageimg .gallerypadder {
    margin: 10px 0px 10px 100px;
}

#pageimg .padder {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.img100 {
    width: 100%;
    margin-bottom: 5px;
}

#portfoliebilleder {
    align-items: flex-start;
}

.gallery {
    max-width: 100%;
    display: flex;
    margin: 10px 5px;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-end;
}

.wrapGallery {
    max-width: 100%;
    display: flex;
    margin: 10px 5px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
}

.gallerypadder {
    margin: 0px px;
    padding: 0px;
}

.gallerypadder img,
pageimg {
    width: 100%;
    border: none;
}

.projectVideo {
    border-width: 0;
    border-style: none;
    border-image: none;
    width: 100%;
    height: 100%;
    display: flex;
}

@media only screen and (min-width: 750px) {
    .bigVideo {
        width: 400px;
        height: 225px
    }
}

@media only screen and (min-width: 1025px) {
    .bigVideo {
        width: 600px;
        height: 337.5px
    }
}


/*color*/

.noColor {
    background-color: #00000000;
}

.color1 {
    background-color: #a9d3eb;
}

.color2 {
    background-color: #aad5ff;
}

.color3 {
    background-color: #bbeeff;
}

.color4 {
    background-color: #66ccff;
}

.color5 {
    background-color: #ddf9ff;
}

.color6 {
    background-color: #bbffff;
}


/*other aesthetic effects*/

#projekttitel {
    border-radius: 0px 0px 20px 20px;
}

.roundCorners15 {
    border-radius: 15px;
}


/*background images*/

.backgroundImg1 {
    background-repeat: repeat;
}


/*knapper*/

.buttonp {
    margin: 10px 0px;
}

.button,
.buttonExternal {
    border-radius: 7px;
    padding: 8px;
    color: #ffffff;
    border: 1px solid #111111;
    text-decoration: none;
    text-shadow: none;
}

.button:hover,
.buttonExternal:hover,
.button:focus,
.buttonExternal:focus {
    text-decoration: none;
    text-shadow: none;
}

.button {
    background: #44aa44;
}

.button:hover {
    background: #116611;
}

.button:focus {
    background: #116611;
}

.buttonExternal {
    background: #aa44aa;
}

.buttonExternal:hover {
    background: #661166;
}

.buttonExternal:focus {
    background: #661166;
}


/*tags*/

#tagHolder {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.tag {
    border-radius: 5px;
    padding: 4px 8px;
    margin-right: 5px;
    margin-top: 5px;
    color: #000000;
    border: 1px solid #111111;
}


/*tablet*/

@media only screen and (min-width: 750px) {
    .t20 {
        flex-basis: 19.5%;
        max-width: 19.5%;
    }
    .t25 {
        flex-basis: 24.37;
        max-width: 24.37%;
    }
    .t30 {
        flex-basis: 29.5%;
        max-width: 29.5%;
    }
    .t33 {
        flex-basis: 32.5%;
        max-width: 32.5%;
    }
    .t40 {
        flex-basis: 39.5%;
        max-width: 39.5%;
    }
    .t50 {
        flex-basis: 49%;
        max-width: 49%;
    }
    .t60 {
        flex-basis: 59%;
        max-width: 59%;
    }
    .t66 {
        flex-basis: 66%;
        max-width: 66%;
    }
    .t70 {
        flex-basis: 69%;
        max-width: 69%;
    }
    .t100 {
        flex-basis: 100%;
    }
    .lignprojekter {
        flex-basis: 25%;
        margin-bottom: 10px;
    }
    .mcollapse {
        visibility: visible;
        height: auto;
        margin: 0;
        padding: 0;
        position: static;
        top: 0px;
    }
    .tcollapse {
        visibility: collapse;
        height: 0;
        margin: 0;
        padding: 0;
        position: fixed;
        top: 0px;
    }
    #logotablet {
        display: flex;
        justify-content: center;
        align-content: center
    }
    .titel {
        font-size: 35px;
    }
    #pagetitel {
        flex-grow: 2;
        align-items: center;
    }
    .padder {
        margin: 15px 10px;
        flex: 100%;
    }
}


/*laptop*/

@media only screen and (min-width: 1025px) {
    #container {
        max-width: 1600px;
    }
    header {
        flex-wrap: nowrap;
        min-height: 300px;
    }
    .lflexwrap {
        flex-wrap: wrap;
        height: auto;
    }
    #titel {
        flex: 2;
        align-items: center;
    }
    #logostor {
        flex: 1;
    }
    .llogo {
        width: 300px;
        height: 300px;
    }
    .mcollapse {
        visibility: visible;
        height: auto;
        margin: 0;
        padding: 0;
        position: static;
        top: 0px;
    }
    .tcollapse {
        visibility: visible;
        height: auto;
        margin: 0;
        padding: 0;
        position: static;
        top: 0px;
    }
    .lcollapse {
        visibility: collapse;
        height: 0;
        margin: 0;
        padding: 0;
        position: fixed;
        top: 0px;
    }
    #logotablet {
        display: flex;
        justify-content: center;
        align-content: center
    }
    .titel {
        font-size: 45px;
    }
    .pagetitel {
        font-size: 45px;
    }
    .l20 {
        flex-basis: 19.5%;
        max-width: 19.5%;
    }
    .l25 {
        flex-basis: 24.37;
        max-width: 24.37%;
    }
    .l30 {
        flex-basis: 29.5%;
        max-width: 29.5%;
    }
    .l33 {
        flex-basis: 32.5%;
        max-width: 32.5%;
    }
    .l33i {
        flex-basis: 32.5%;
        max-width: 32.5%;
    }
    .l40 {
        flex-basis: 39.5%;
        max-width: 39.5%;
    }
    .l50 {
        flex-basis: 49%;
        max-width: 49%;
    }
    .l60 {
        flex-basis: 59%;
        max-width: 59%;
    }
    .l66 {
        flex-basis: 66%;
        max-width: 66%;
    }
    .l70 {
        flex-basis: 69%;
        max-width: 69%;
    }
    .l100 {
        flex-basis: 100%;
    }
    .lignprojekter {
        flex-basis: 19%;
    }
    .padder {
        margin: 15px 10px;
        flex: 100%;
    }
    .gallery {
        max-width: 100%;
        display: flex;
        margin: 10px 5px;
        flex-wrap: wrap;
    }
}