@charset "UTF-8";
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Barlow', sans-serif;
}

html {
    scroll-behavior: smooth;
}

/* Navigation */

header nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    height: 13vh;
}

header nav img {
    margin: 2vh 10vw 0 2vw;
    width: 20vw;
}

nav ul {
    display: flex;
    justify-content: space-evenly;
    width: 79vw;
    align-items: center;
    list-style-type: none;
    z-index: 100;
}

nav ul li:hover {
    transform: scale(1.1);
    transition: transform .2s;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 1vw;
    font-weight: bold;
    letter-spacing: 2px;
}

nav ul li a:hover {
    color: rgb(92, 76, 148);
}

.selected {
    color: rgb(92, 76, 148);
}

main .desktop-none {
    display: none;
}

/* Dropdown hovermenu i navigationen */

header nav ul li ul {
    display: none;
    width: auto;
    margin: 0;
    position: absolute;
    background-color: rgba(92, 76, 148, 0.85);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

header nav ul li:hover ul {
    display: block;
    visibility: visible;
}

header nav ul li ul li a {
    text-decoration: none;
    padding: 1.5vh 0;
    color: #ffffff;
    display: block;
}

header nav ul li ul li a:hover {
    color: #C0C0C0;
}

.dropdown-wrapper {
    margin-left: 1vw;
    margin-right: 1vw;
}

.dropdown-wrapper h2 {
    font-size: 1.5rem;
    color: white;
    margin-top: 1vh;
    margin-bottom: 1vh;
}

.dropdown-wrapper h3 {
    font-size: 1.2rem;
    text-shadow: 3px 3px 5px black;
}

.dropdown-category {
    display: flex;
    justify-content: space-between;
}

.dropdown-category-sectionboxes {
    height: 12vh;
    width: 12vw;
    background: black;
}

.dropdown-category-sectionboxes h3 {
    color: white !important;
    font-weight: bold;
}

.menu_dataservice {
    background-image: url(../images/menu_dataservice.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.menu_adressering {
    background-image: url(../images/menu_adressering.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.menu_distribution {
    background-image: url(../images/menu_distribution.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.menu_bogbind {
    background-image: url(../images/menu_bogbind.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.dropdown-column {
    display: flex;
    flex-direction: column;
    margin: 0 15px 0 15px
}

.dropdown-column a {
    margin-top: 7px;
    margin-left: 0.5vw;
}

.dropdown-column a:hover {
    transform: scale(1.05);
    transition: transform .25s;
    color: #C0C0C0;
}

.width li {
    margin-left: 1vw;
    margin-right: 1vw;
}

.width-dropdown {
    width: 11vw;
    padding-left: 1vw;
    padding-right: 5vw;
}

.dropdown-column a:last-child {
    margin-bottom: 10px;
}

.dropdown-category-sectionboxes h3 {
    color: black;
    text-align: center;
    padding-top: 2vh;
}

.dropdown-dark-background {
    position: fixed;
    height: 100vh;
    width: 100vw;
    background: rgba(0, 0, 0, 0.7);
    z-index: 50;
    display: none;
}

body.showmenu .dropdown-dark-background {
    display: block;
}

/* Styling for buttons */

.subscribe {
    width: 10vw;
    position: relative;
    z-index: -1;
}

button {
    width: 10vw;
    height: 5vh;
    border-radius: 0.5vw;
    border: none;
    background-color: rgb(92, 76, 148);
    color: white;
    outline: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.8vw;
}

/* Styling for footer */

footer {
    background-color: #3B3B3B;
    color: white;
    display: grid;
    grid-template-areas: 'lf mf rf';
}

/* Styling for icons */

.icons a {
    text-decoration: none;
    margin: 0 0.25vw 0 0.25vw;
}

.fa-linkedin {
    color: #2867B2;
    font-size: 2vw;
}

.fa-youtube {
    color: #FF0000;
    font-size: 2vw;
}

.leftfooter {
    grid-area: lf;
}

.leftfooter p {
    padding-top: 0vh;
    margin-bottom: 2vh;
}

.leftfooter img {
    margin-top: 2vh;
}

.middlefooter {
    grid-area: mf;
}

.middlefooter h3 {
    margin-bottom: 2vh;
}

.rightfooter {
    grid-area: rf;
}

.rightfooter p {
    margin-bottom: 2vh;
}

.rightfooter h3 {
    margin-top: 4vh;
}

footer div {
    margin: auto;
    text-align: center;
}

/* Styling for landingpage starts here */

/* Styling for header starts here */

.logo {
    width: 7vw;
}

.frontpage header {
    position: absolute;
}

/* Styling for backgroundimage starts here */

#backgroundimage {
    height: 65vh;
    text-align: center;
    background-image: url("../images/coverlager.jpg");
    background-size: center;
}

#backgroundimage h1 {
    font-size: 5vw;
    color: white;
}

#backgroundimage h2 {
    font-size: 1.5vw;
    color: white;
}

#backgroundimage .hero-left {
    padding-top: 15vh;
    margin-left: 60vw;
}

#backgroundimage .hero-right {
    padding-top: 15vh;
    padding-right: 50vw;
}

/* Styling for midterste del af forside starter her */

.splitline {
    height: 1.5vh;
    background-color: rgb(92, 76, 148);
    margin: 0;
}

.brandsection {
    height: 10vh;
    background-color: rgb(92, 76, 148);
    color: white;
    text-align: center;
    font-size: 2vh;
    padding-top: 1.2vh;
}

#top h2 {
    padding-top: 17vh;
    font-size: 2.5vw;
    text-shadow: 1.5px 1.5px rgb(34, 34, 34);
    color: white;
}

.flexbox {
    display: flex;
}

/* Styling for nyhedsbrev og footer på forsiden starter her */

#nyhedsbrev {
    text-align: center;
    height: 80vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#nyhedsbrev h2 {
    font-size: 3vw;
    color: white;
}

#nyhedsbrev .video-news {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

#nyhedsbrev .video-news video {
    width: 100vw;
    height: 100%;
    filter: grayscale(100%) brightness(40%);
}

.frontpage-boxcontainer {
    z-index: 1;
    display: flex;
    justify-content: space-evenly;
    width: 100vw;
    color: white;
    text-align: center;
}

.frontpage-boxcontainer a {
    text-decoration: none;
    color: white 
}

.categorybox {
    width: 20vw;
    padding: 25px;
    height: 30vh;
    color: white;
    opacity: 100%;
    border-radius: 0.1vw;
    border: 2px solid rgb(92, 76, 148);
    border-radius: 10px;
    transition: 0.3s;
}

.categorybox p {
    margin-top: 40%;
    font-size: 1.5rem;
    font-weight: bold;
}

.categorybox:hover {
    transform: scale(1.1);
}

.categorybox h4 {
    margin-top: 5%;
    opacity: 100%;
    font-size: 1rem;
    color: white;
}

.cat1 {
    background-image: url(../images/forsidemuligheder.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
}

.cat2 {
    background-image: url(../images/forsideloesninger.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.cat3 {
    background-image: url(../images/forsidekontakt.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

/* Styling for loesninger.html starts here */

/* Styling for the different solutions starts here */

.bodyloesninger {
    background-color: #C0C0C0;
}

.grid section {
    width: 15vw;
    height: 15vh;
}

.video-container {
    position: relative;
    text-align: center;
}

.centered {
    color: white;
    font-size: 2vw;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 2px 2px black;
}

.preview {
    width: inherit;
    background: url(../images/loesningerbaggrund.jpg);
}

/* Posters til løsninger */

.poster_adressekoeb {
    background: url(../images/poster/Adressekoebposter.jpg);
    background-size: cover;
}

.poster_databehandling {
    background: url(../images/poster/Databehandlingposter.jpg);
    background-size: cover;
}

.poster_paperwrap {
    background: url(../images/poster/Paperwrapposter.jpg);
    background-size: cover;
}

.poster_segmentering {
    background: url(../images/poster/Segmenteringposter.jpg);
    background-size: cover;
}

.poster_label {
    background: url(../images/poster/Labelposter.jpg);
    background-size: cover;
}

.poster_print {
    background: url(../images/poster/Printposter.jpg);
    background-size: cover;
}

.poster_lagerhotel {
    background: url(../images/poster/Lagerhotelposter.jpg);
    background-size: cover;
}

.poster_raadgivning {
    background: url(../images/poster/Raadgivningposter.jpg);
    background-size: cover;
}

.poster_magasiner {
    background: url(../images/poster/Magasinerposter.jpg);
    background-size: cover;
}

.poster_breve {
    background: url(../images/poster/Breveposter.jpg);
    background-size: cover;
}

.poster_pakker {
    background: url(../images/poster/Pakkerposter.jpg);
    background-size: cover;
}

.poster_adresseloest {
    background: url(../images/poster/Adresseloestposter.jpg);
    background-size: cover;
}

.poster_fals {
    background: url(../images/poster/Adresseloestposter.jpg);
    background-size: cover;
}

.poster_samlehaefter {
    background: url(../images/poster/samlehaefterposter.jpg);
    background-size: cover;
}

.poster_klaebebind {
    background: url(../images/poster/klaebebindposter.jpg);
    background-size: cover;
}
/* Posters slut */

.video-container .grayscale-filter {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: filter 250ms;
}

.video-container:hover .grayscale-filter {
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -o-filter: grayscale(0);
    filter: grayscale(0);
}

.shadow {
    box-shadow: 3px 3px 15px #888888;
    transition: transform .2s;
}

.shadow:hover {
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}


.bodyloesninger footer {
    margin-top: 10vh;
}

/* Styling for the different solution pages starts here */

.greybg {
    background-color: #888888;
}

.bg_same {
    background-image: url(../images/loesningerbaggrund.jpg);
}

.text_bg {
    color: white;
    text-shadow: 2px 2px 5px #3B3B3B;
}

.loesningermain {
    display: flex;
    width: 100%;
}

.l_category {
    width: 100%;
    order: 5;
    flex-wrap: wrap;
    justify-content: center;
}

.l_category a {
    width: 15vw;
    margin: 25px;
}

.l_category h1 {
    text-align: center;
}

.loesninger1 {
    margin-bottom: 2vh;
}

.loesninger1 h1 {
    text-align: center;
    color: rgb(92, 76, 148);
}

.loesninger2 {
    margin-bottom: 2vh;
}

.loesninger2 h1 {
    text-align: center;
    color: rgb(92, 76, 148);
}

.loesninger3 {
    margin-bottom: 2vh;
}

.loesninger3 h1 {
    text-align: center;
    color: rgb(92, 76, 148);
}

.loesningermain {
    display: flex;
    flex-direction: column;
    
}

.loesningerbackground {
    background-image: url(../images/loesningerbaggrund.jpg);
    height: 100vh;
}

.solutions-h1 {
    text-align: center;
    padding: 10vh 0 10vh 0;
    font-weight: normal;
    font-size: 2.2vw;
}

.solutions-h2 {
    margin: 0;
    padding: 0;
    font-size: 1.2vw;
}

.solutions-magh2 {
    text-align: center;
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-size: 1.2vw;
}
.solutions-flex {
    width: 90vw;
    margin: auto;
}

.solutions-text {
    width: 40vw;
    margin-right: 2.5vw;
    font-size: 1vw;
    line-height: 2;
}

.solutions-video {
    width: 40vw;
    margin-left: 5vw;
    border: 3px solid white;
}

.placeholder {
    width: inherit;
    height: 8.3vw;
}

.advantages {
    color: white;
    width: 12.5vw;
    height: 20vh;
    background-color: #6F619F;
    margin: auto;
    padding: 1.5vw;
    border: 2px solid white;
}

.advantages-flex {
    width: 50vw;
    margin: auto;
    margin-bottom: 7vh;
}

.mag-onepage {
    background-image: url(../images/magasinbaggrund.jpg);
    background-position: top; 
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
}

.magsections {
    text-align: center;
    line-height: 3vh;
    color: white;
    width: 60vw;
    padding-bottom: 5vh;
    border-bottom: 2px solid rgb(92, 76, 148);
}

.folie-onepage {
    background-image: url(../images/folieruller2_bg.jpg);
    background-position: top; 
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
}
/* Styling for case.html starts here */

.bodycase {
    background-color: #C0C0C0;
}

#myBtnContainer {
    text-align: center;
}

#myBtnContainer button {
    background: none;
    border: 3px solid #5C4C94;
    border-radius: 50px;
    width: 9vw;
    color: #5C4C94;
    margin: 0.5vw;
}

#myBtnContainer .btn:hover {
    background-color: #6F619F;
    color: white;
    transform: scale(1.10);
    transition: transform .25s;
    cursor: pointer;
}

#myBtnContainer .btn.active {
    background-color: #5C4C94;
    color: white;
}

.row {
   width: 90vw;
   margin: auto;
   height: 110vh;
}

.column {
    float: left;
    width: 15vw;
    height: 30vh;
    margin: 3vh 1.5vw;
    text-align: center;
    background-size: 100%;
    display: none;
    color: white;
    text-shadow: 2px 2px 5px black;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.show {
    display: block;
}

.hoverandclick:hover {
    transform: scale(1.05);
    transition: transform .25s;
    cursor: pointer;
}

.casebox-bg-hunden {
    background-image: url(../images/hunden.jpg);
}

.casebox-bg-aeldresagen {
    background-image: url(../images/ældresagen.jpg);
}

.casebox-bg-jaeger {
    background-image: url(../images/jægerblad.jpg);
}

.casebox-bg-skiltemagasinet {
    background-image: url(../images/impulsblad.jpg);
}

.casebox-bg-pinksolbriller {
    background-image: url(../images/pinksolbriller.jpg);
}

.casebox-bg-bruntpapir {
    background-image: url(../images/bruntpapir.jpg);
}

.casebox-bg-hvidtpapir {
    background-image: url(../images/hvidtpapir.jpg);
}

.casebox-bg-printcase {
    background-image: url(../images/printcase.jpg);
}

.casebox-bg-sclerose {
    background-image: url(../images/scleroseforeningen.jpg);
}

.casebox-bg-shapeup {
    background-image: url(../images/shapeup.jpg);
}

.casebox-bg-costume {
    background-image: url(../images/costume.jpg);
}

.casebox-bg-kingmagazine {
    background-image: url(../images/kingmagazine.jpg);
}

.casebox-bg-dkcamp {
    background-image: url(../images/DKCamp.jpg);
}

.casebox-bg-landfritid {
    background-image: url(../images/landfritid.jpg);
}

.casebox-bg-ledsager {
    background-image: url(../images/ledsager.jpg);
}

.casebox-bg-ida {
    background-image: url(../images/idaforside.jpg);
}
/* Styling for the different cases pages starts here */

.specific-cases-text video {
    margin: 0;
}

.specific-cases {
    color: white;
    padding-top: 10vh;
}

.specific-cases h1 {
    text-align: center;
    font-size: 3vw;
}

.specific-cases h2 {
    font-size: 2vw;
    margin: 10vh 0 8vh 9.5vw;
}

.specific-cases magh2 {
    text-align: center;
    font-size: 2vw;
    margin: 10vh 0 8vh 9.5vw;
}

.specific-cases-content {
    width: 90vw;
    margin: auto;
    padding-left: 5vw;
    padding-bottom: 15vh;
}

.specific-cases-text {
    width: 40vw;
    margin-right: 2.5vw;
    font-size: 1.2vw;
    line-height: 2;
}

.specific-cases-img {
    width: 40vw;
    margin: auto;
}

.specific-cases-img img {
    width: 25vw;
    margin-left: 5vw;
}

.cases-video {
    width: 40vw;
    margin-left: 5vw;
    align-content: right;
    border: 3px solid white;
}

/* Styling for hunden.html starts here */

.hunden-bg-image {
    background-image: url(../images/hundenbg.jpg);
}

.aeldresagen-bg-image {
    background-image: url(../images/ældresagenbg.jpg);
}

.skiltemagasinet-bg-image {
    background-image: url(../images/impulsbladbg.jpg);
    background-size: cover;
}

.skiltemagasinet-bg-image p, h1, h2 {
    text-shadow: 1.5px 1.5px grey;
}

.jaeger-bg-image {
    background-image: url(../images/jægerbladbg.jpg);
    background-size: cover;
}

.solbriller-bg-image {
    background-image: url(../images/pinksolbrillerbg.jpg);
    background-size: cover;
}

.solbriller-bg-image p, h1, h2 {
    text-shadow: 1.5px 1.5px grey;
}

.bruntpapir-bg-image {
    background-image: url(../images/bruntpapirbg.jpg);
    background-size: cover;
}

.bruntpapir-bg-image p, h1, h2 {
    text-shadow: 1.5px 1.5px grey;
}

.hvidtpapir-bg-image {
    background-image: url(../images/hvidtpapirbg.jpg);
    background-size: cover;
}

.hvidtpapir-bg-image p, h1, h2 {
    text-shadow: 1.5px 1.5px grey;
}

.print-bg-image {
    background-image: url(../images/printcasebg.jpg);
    background-size: cover;
}

.print-bg-image p, h1, h2 {
    text-shadow: 1.5px 1.5px grey;
}

.scleroseforeningen-bg-image {
    background-image: url(../images/scleroseforeningenbg.jpg);
    background-size: cover;
}

.scleroseforeningen-bg-image p, h1, h2 {
    text-shadow: 1.5px 1.5px grey;
}

.shapeup-bg-image {
    background-image: url(../images/shapeupbg.jpg);
    background-size: cover;
}

.shapeup-bg-image p, h1, h2 {
    text-shadow: 1.5px 1.5px grey;
}

.dkcamp-bg-image {
    background-image: url(../images/DKCampbg.jpg);
    background-size: cover;
}

.dkcamp-bg-image p, h1, h2 {
    text-shadow: 1.5px 1.5px grey;
}

.landfritid-bg-image {
    background-image: url(../images/landfritidbg.jpg);
    background-size: cover;
}

.landfritid-bg-image p, h1, h2 {
    text-shadow: 1.5px 1.5px grey;
}

.ida-bg-image {
    background-image: url(../images/idabg.jpg);
    background-size: cover;
}

.ida-bg-image p, h1, h2 {
    text-shadow: 1.5px 1.5px grey;
}

.ledsager-bg-image {
    background-image: url(../images/ledsagerbg.jpg);
    background-size: cover;
}

.ledsager-bg-image p, h1, h2 {
    text-shadow: 1.5px 1.5px grey;
}

.costume-bg-image {
    background-image: url(../images/costumebg.jpg);
    background-size: cover;
}

.costume-bg-image p, h1, h2 {
    text-shadow: 1.5px 1.5px grey;
}

.kingmagazine-bg-image {
    background-image: url(../images/kingmagazinebg.jpg);
    background-size: cover;
}

.kingmagazine-bg-image p, h1, h2 {
    text-shadow: 1.5px 1.5px grey;
}


/* Styling for kontakt.html starter her */

.bodykontakt {
    background-color: #C0C0C0;
}

.kontaktheader {
    position: absolute;
}

.vk_main {
    width: 100vw;
    background: linear-gradient(#C0C0C0, rgb(92, 76, 148), #C0C0C0);
}

.vk_main h1 {
    text-align: center;
    color: rgb(92, 76, 148);
    font-weight: bold;
    font-size: 2rem;
    margin: 2rem;
}

.vk_columns {
    width: 100vw;
    display: flex;
    justify-content: left;
    column-gap: 10vw;
}

.vk_columns_both {
    display: flex;
    flex-direction: column;
}

.vk_image {
    width: 25vw;
    margin-bottom: 1vh;
    margin-top: 1vh;
    border: 2px solid rgb(92, 76, 148);
    border-radius: 3px;
    }

.contactwrapper {
    text-align: center;
    margin-bottom: 5vh;
    margin-top: 5vh;
    display: flex;
    justify-content: space-evenly;
}

.signup {
    background-color: rgb(92, 76, 148);
    width: 20vw;
    color: white;
    height: 20vh;
}

.signup h2 {
    margin-top: 5vh;
}

.signup form {
    margin-top: 1.5vh;
}

.signup input[type=submit] {
    background-color: #3B3B3B;
    border-radius: 10px;
    border: none;
    color: white;
    margin: 1.5vh 0 1vh 0;
    height: 3vh;
    width: 7vw;
    outline: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.8vw;
}

.signup input[type=email] {
    width: 12vw;
    height: 3vh;
}

.formular {
    display: inline-block;
    background-color: rgb(92, 76, 148);
    width: 60vw;
}

.formular h3 {
    color: white;
    font-size: 2vw;
    margin: 5vh 0 5vh 0;
}

.formular form label {
    display: block;
    text-align: left;
    margin-left: 5vw;
    margin-bottom: 0.3vh;
    color: white;
}

.formular form input {
    width: 50vw;
    height: 5vh;
    margin-bottom: 2vh;
    padding-left: 1vw;
}

.formular form input:last-of-type {
    height: 20vh;
    padding-bottom: 15vh;
}

.bodyate form input:last-of-type {
    height: 5vh;
    padding-bottom: 0;
}

.formular button {
    background-color: #3B3B3B;
    margin: 2vh 0 5vh 0;
    height: 5vh;
    width: 10vw;
    outline: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.8vw;
}

/* Styling for ate.html starter her */

.bodyate {
    background-color: #C0C0C0;
}

.bodyate header {
    position: absolute;
}

.ateheader {
    background: url(../images/atebaggrund.jpg);
    background-position: bottom;
    margin: 0;
    height: 65vh;
    background-size: cover;
}

.ateheader h1 {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 3rem;
}

.center {
    color: white;
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ate-banner h1 {
    font-size: 3rem;
}

.fixedmenu-right {
    height: 35vh;
    width: 15vw;
    position: fixed;
    right: 2vw;
    bottom: 40vh;
    display: flex;
    flex-direction: column;
    text-align: center;
    color: white;
}

.fixedmenu-right a {
    width: 8vw;
    background-color: rgb(92, 76, 148);
    color: white;
    text-decoration: none;
    text-align: center;
    margin: 1.5vh auto;
    padding: 5%;
    border-radius: 10px;
    font-size: 1.2rem;
}

.ate-onepage {
    background-image: url(../images/Lager_grey2.jpg);
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.atesections {
    line-height: 3vh;
    color: white;
    width: 60vw;
    padding-bottom: 5vh;
    border-bottom: 2px solid rgb(92, 76, 148);
}

.atesections h2 {
    text-align: center;
    padding: 5vh 0 5vh 0;
}

#ate2 table, th, td {
    border: 1px solid rgb(92, 76, 148);
    text-align: center;
    border-collapse: collapse;
    padding: 10px;
}

#ate3 button {
    height: 5vh;
    width: 15vw;
    text-decoration: none;
    font-size: 1rem;
    margin-top: 2vh;
    margin-left: 37%;
}

#ate4 {
    padding-bottom: 5vh;
}

#ate4 table {
    width: 30vw;
}

#ate4 table, th, td {
    border: 1px solid white;
    text-align: center;
    border-collapse: collapse;
}

#ate4 th, td {
    text-align: left;
    padding: 10px;
}

#ate4 a {
    color: white;
    font-size: 1.2rem;
}

/* Styling for omos.html starter her */

.bodyomos {
    background-color: #C0C0C0;
}

.bodyomos header {
    position: absolute;
    z-index: 99;
}

.omosheader img {
    filter: brightness(50%);
    height: 65vh;
    width: 100%;
}

.omosheader {
    background: url(../images/omoshero.jpg);
    margin: 0;
    height: 65vh;
    background-size: cover;
}

.omos-missionandvision {
    width: 100%;
    color: white;
    position: absolute;
    top: 32vh;
    text-shadow: 1.5px 1.5px grey;
}

.omos-missionandvision div {
    width: 45vw;
    margin: 5vh auto;
    line-height: 2;
}

.omos-missionandvision h1 {
    text-align: center;
    font-size: 4vh;
}

.omos-missionandvision p {
    font-size: 2vh;
}

.history {
    margin: 0 5vw 0 5vw;
}

.history h2 {
    color: white;
    text-align: center;
    font-size: 2vw;
    font-weight: bold;
    margin: 5vh auto 5vh auto;
}

.width {
    width: 30vw;
}

.history h3 {
    text-align: center;
    color: #5C4C94;
    font-size: 1.2vw;
    margin: 2vh 0 3vh 0;
}

.history p {
    color: black;
    font-size: 1vw;
    line-height: 2;
    margin: 0;
}

.width {
    width: 25vw;
    padding: 10px 10px;
    border: 2px solid rgb(92, 76, 148);
    border-radius: 10px;
    margin-bottom: 5vh;
}

.space-evenly {
    justify-content: space-evenly;
}

.history ul {
    margin-left: 1vw;
    margin-bottom: 10vh;
    line-height: 2;
    font-style: oblique;
}

.timelinewrapper {
    text-align: center;
    margin-bottom: 5vh;
}

.timeline-center {
    display: inline-block;
    position: relative;
}

.timeline-margin {
    margin-left: 5vw;
}

.timeline-center h3 {
    margin-bottom: 5vh;
    color: rgb(92, 76, 148);
    font-size: 2vw;
}

.timeline-border {
    height: 86%;
    width: 50%;
    position: absolute;
    border-right: 5px solid rgb(92, 76, 148);
    margin: 0;
}

.dot-top {
    background: rgb(92, 76, 148);
    height: 20px;
    width: 20px;
    right: -12px;
    top: 0;
    position: absolute;
    border-radius: 50%;
    display: inline-block;
}

.dot-bottom {
    background: rgb(92, 76, 148);
    height: 20px;
    width: 20px;
    right: -12px;
    bottom: 0;
    position: absolute;
    border-radius: 50%;
    display: inline-block;
}

.timeline-singleborder {
    border-bottom: 3px solid rgb(92, 76, 148);
    margin-right: 10vw;
}

.border-left {
    margin-left: 30vw;
    width: 25vw;
}

.border-right {
    margin-right: 25vw;
    width: 30vw;
}

.timeline-singleborder h4 {
    color: rgb(92, 76, 148);
    font-size: 1.2vw;
    margin-bottom: 0.5vh;
}

.timeline-singleborder h5 {
    color: white;
    font-size: 1vw;
    margin-bottom: 0.5vh;
}

/* Hentet inspiration og hjælp fra lektion med DAHG (workshop) i forhold til navigationens burgermenu på mediaqueries */

#burgerMenuButtonWrapper, #burgermenuCloseButtonWrapper {
    display: none;
}

/* Styling for tablet version starter her */

@media (min-width: 768px) and (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 1) {
    /* Generelt */

    

    .desktop-none {
        display: block;
        position: absolute;
        margin: 1vh 0 0 2vw;
    }
    main .desktop-none {
        display: block;
        position: fixed;
        top: 0;
        margin-top: 1vh;
        position: fixed;
    }
    /* Burgermenu */
    .selected {
        color: white;
    }
    .btn {
        display: inline-block;
        text-decoration: none;
        font-size: 25px;
        background-color: rgb(92, 76, 148);
        border-radius: 10%;
        height: 5vh;
        width: 10vw;
        text-align: center;
        padding-top: 0.5vh;
        color: white;
        transition: box-shadow .2s ease-out;
    }
    .btn-close {
        color: rgb(92, 76, 148);
        background-color: white;
        font-weight: bold;
    }
    #burgerMenuButtonWrapper {
        display: block;
        text-align: right;
        position: fixed;
        width: 40vw;
        top: 0;
        margin-top: 1vh;
        margin-left: 58vw;
    }
    #burgerMenuButtonWrapper a {
        display: inline-block;
        margin: 2vw;
    }
    #burgermenuCloseButtonWrapper {
        display: block;
        text-align: right;
        margin-right: 2vw;
        margin-left: 5vw;
        margin-top: 1vh;
    }
    #burgermenuCloseButtonWrapper a {
        display: inline-block;
        margin: 2vw;
    }
    .omosheader {
        height: 10vh;
        width: 80vw;
        background-color: #C0C0C0;
        margin-left: 0;
    }
    footer .logo {
        display: block;
        margin-left: 10vw;
    }
    nav {
        display: flex;
        flex-direction: row-reverse;
    }
    header nav {
        background-color: rgb(92, 76, 148);
        width: 100vw;
        height: 100vh;
        z-index: 2;
        transform: translateX(100%);
        transition: transform .3s ease-out;
        position: fixed;
        top: 0;
    }
    header nav.active {
        transform: translateX(0);
    }
    header nav ul {
        display: block;
        width: 100vw;
    }
    header nav ul li {
        display: block;
        border-top: 2px solid white;
    }
    header nav ul li:first-of-type {
        border: none;
    }
    header nav ul li:last-child {
        border-bottom: 2px solid white;
    }
    header nav ul li a {
        display: block;
        padding: 5vw;
        font-size: 3vw;
    }
    header nav ul li:hover ul {
        position: relative;
        display: block;
        width: 100vw;
    }
    header nav ul li a:hover {
        color: #C0C0C0;
    }
    header nav ul li ul {
        display: none !important;
    }
    /* Forside */
    /* Styling for index.html (tablet) starter her */
    #backgroundimage {
        width: 100vw;
        height: 55vh;
        padding: 12vh 0 0 25vw;
        background-size: cover;
    }
    #backgroundimage h1 {
        font-size: 60px;
    }
    #backgroundimage h2 {
        display: none;
    }
    #top {
        display: none;
    }
    #left {
        background-color: #C0C0C0;
        padding: 0;
    }
    #left h2 {
        margin: 0;
        color: rgb(92, 76, 148);
        font-size: 36px;
        margin: 2vh;
    }
    #left p {
        margin: 2vh;
        width: 40vw;
        color: black;
        font-size: 20px;
        line-height: 1.2;
    }
    #left button {
        margin-left: 2vh;
        margin-bottom: 2vh;
        width: 30vw;
        font-size: 20px;
    }
    .flexbox #left, #map {
        width: 100vw;
        height: 30vh;
    }
    #nyhedsbrev {
        background-color: #c0c0c0;
        height: 40vh;
    }
    #nyhedsbrev .video-news {
        display: none;
    }
    .categorybox {
        height: 20vh;
        width: 30vw;
    }
    .categorybox h4 {
        font-size: 20px;
    }
    .categorybox p {
        display: none;
    }
    .logo {
        width: 120px;
    }
    .icons i {
        font-size: 50px;
    }
    /* Styling for loesninger.html (tablet) starter her */

    .loesninger1, .loesninger2, .loesninger3 {
        margin-top: 20vh;
        font-size: 30px;
    }
    
    .l_category {
        display: unset;
    }

    .video-container {
        margin: 6vh auto;
    }

    .grid section {
        width: 60vw;
    }
    
    .centered {
        font-size: 60px;
    }

    /* Styling for de enkelte løsninger (tablet) starter her */

    .solutions-h1 {
        font-size: 5vw;
        padding: 2vw;
    }

    .solutions-flex {
        display: unset;
    }
    
    .solutions-flex div {
        width: 80vw;
        margin: auto;
        padding: auto;
    }

    .solutions-flex video {
        width: 80vw;
        margin: 5vh 0;        
    }

    .solutions-h2 {
        font-size: 2.5vw;
        text-align: center;
    }

    .solutions-text {
        font-size: 2vw;
    }

    .advantages-flex {
        width: 90vw;
    }

    .advantages {
        margin-top: 5vh;
        width: 20vw;
        height: 13vh;
    }

    /* Styling for case.html (tablet) starter her */
    
    #myBtnContainer {
        margin-top: 10vh;
    }

    #myBtnContainer button {
        width: 16.5vw;
    }

    .row {
        height: 220vh;
    }

    .column {
        width: 40vw;
    }

    /* Styling for de enkelte cases (tablet) starter her */
    
    .specific-cases h1 {
        font-size: 3.5vw;
    }

    .specific-cases h2 {
        font-size: 2.5vw;
    }

    .specific-cases-text p {
        font-size: 2vw;
    }

    .specific-cases-img img {
        width: 35vw;
    }

    /* Styling for ate.html (tablet) starter her */

    .ateheader {
        height: 30vh;
    }

    .ateheader h1 {
        top: 15%;
    }

    .fixedmenu-right {
        display: none;
    }

    .atesections h2 {
        font-size: 4vw;
    }

    .atesections p {
        font-size: 2vw;
    }

    /* Styling for omos.html (tablet) starter her */
    
    .omosheader {
        width: 100vw;
        height: 80vh;
    }

    .omos-missionandvision {
        display: block;
        height: 40vh;
        top: 0;
    }
    .omos-missionandvision div {
        width: 80vw;
        margin: 5vh auto;
    }
    .omos-missionandvision p {
        font-size: 2vw;
    }

    .history h2 {
        margin-top: 5vh;
        font-size: 40px;
    }
    .history h3 {
        margin-top: 5vh;
        font-size: 30px;
    }
    .history p {
        font-size: 16px;
    }
    /* Styling for kontakt.html (tablet) starter her */
    .kontakttop h1 {
        font-size: 50px;
        margin-bottom: 2vh;
    }
    .kontakttop p {
        font-size: 24px;
    }
    .kontaktgrid {
        display: grid;
        grid-template-areas: 'tr tl' 'tm ml' 'mr mm' 'br bm' 'br2 bm2' 'bl bl';
    }
    .kontaktgrid div h2 {
        margin-top: 2vh;
    }
    .kontaktgrid div p {
        color: black;
        margin-bottom: 2vh;
    }
}

/* Styling for mobile version starter her */

@media (min-width: 320px) and (max-width: 767px) {
    /* Burgermenu */
    .desktop-none {
        display: block;
        position: fixed;
        margin: 1vh 0 0 2vw;
    }
    main .desktop-none {
        display: block;
        position: absolute;
        top: 0;
        margin-top: 1vh;
        position: fixed;
    }
    .btn {
        display: inline-block;
        text-decoration: none;
        font-size: 16px;
        background-color: rgb(92, 76, 148);
        border-radius: 10%;
        height: 5vh;
        width: 15vw;
        text-align: center;
        padding-top: 1vh;
        color: white;
        transition: box-shadow .2s ease-out;
    }
    .btn-close {
        color: rgb(92, 76, 148);
        background-color: white;
        padding-top: 1vh;
        font-weight: bold;
    }
    #burgerMenuButtonWrapper {
        display: block;
        text-align: right;
        position: fixed;
        width: 40vw;
        top: 0;
        margin-top: 1vh;
        margin-left: 58vw;
    }
    #burgerMenuButtonWrapper a {
        display: inline-block;
        margin: 2vw;
    }
    #burgermenuCloseButtonWrapper {
        display: block;
        text-align: right;
        margin-right: 2vw;
        margin-left: 5vw;
        margin-top: 1vh;
    }
    #burgermenuCloseButtonWrapper a {
        display: inline-block;
        margin: 2vw;
    }
    .omosheader {
        height: 10vh;
        width: 80vw;
        background-color: #C0C0C0;
    }
    .logo {
        display: none;
    }
    nav {
        display: flex;
        flex-direction: row-reverse;
    }
    header nav {
        background-color: rgb(92, 76, 148);
        width: 100vw;
        height: 100vh;
        z-index: 2;
        transform: translateX(100%);
        transition: transform .3s ease-out;
        position: fixed;
        top: 0;
    }
    header nav.active {
        transform: translateX(0);
    }
    header nav ul {
        display: block;
        width: 100vw;
    }
    header nav ul li {
        display: block;
        border-top: 1px solid white;
    }
    header nav ul li:first-of-type {
        border: none;
    }
    header nav ul li:last-child {
        border-bottom: 1px solid white;
    }
    header nav ul li a {
        display: block;
        padding: 5vw;
        font-size: 3vw;
    }
    header nav ul li:hover ul {
        position: relative;
        display: block;
        width: 100vw;
    }
    header nav ul li ul li a {
        padding: 5vw 0 5vw 10vw;
    }
    header nav ul li a:hover {
        color: #C0C0C0;
    }
    header nav ul li ul {
        display: none !important;
    }
    .desktop-none {
        display: block;
        position: absolute;
        margin: 1vh 0 0 2vw;
    }
    .desktop-none {
        display: block;
    }

    footer {
        height: 15vh;
    }
    footer p {
        font-size: 9px;
    }
    .leftfooter, .middlefooter, .rightfooter {
        height: 15vh;
        width: 33.3vw;
    }
    .logo {
        width: 80px;
    }
    footer .logo {
        display: block;
        margin-left: 10vw;
    }
    .icons i {
        font-size: 30px;
    }
    .middlefooter {
        padding-top: 4vh;
    }
    footer h3 {
        font-size: 11px;
    }

    /* Styling for index.html (mobile) starter her */

    header nav ul {
        display: block;
    }

    #backgroundimage {
        height: 40vh;
        background-size: cover;
    }

    .brandsection {
        height: 15vh;
    }

    .video-news {
        display: none;
    }

    #nyhedsbrev {
        background-color: #C0C0C0;
        height: auto;
    }

    .frontpage-boxcontainer {
        display: unset;
    }

    .categorybox {
        width: 60vw;
        height: 30vh;
        margin: 5vh auto;
    }

    /* Styling for loesninger.html (mobile) starter her */
    .loesninger1 {
        margin-top: 10vh;
    }
    
    .l_category {
        display: unset;
    }

    .video-container {
        margin: auto;
    }

    .grid section {
        width: 60vw;
    }
    
    .centered {
        font-size: 30px;
    }

    /* Styling for de enkelte løsninger (mobile) starter her */

    .solutions-h1 {
        font-size: 8vw;
        padding: 2vw;
        margin-top: 10vh;
    }

    .solutions-flex {
        display: unset;
    }
    
    .solutions-flex div {
        width: 80vw;
        margin: auto;
        padding: auto;
    }

    .solutions-flex video {
        width: 80vw;
        margin: 5vh 0;        
    }

    .solutions-h2 {
        font-size: 5vw;
        text-align: center;
    }

    .solutions-text {
        font-size: 4vw;
    }

    .advantages-flex {
        width: 90vw;
        display: unset;
    }

    .advantages {
        margin: 5vh auto;
        width: 60vw;
        height: 20vh;
    }

    /* Styling for case.html (mobile) starter her */
    
    #myBtnContainer {
        margin-top: 10vh;
    }

    #myBtnContainer button {
        width: 17vw;
        font-size: 3vw;
    }

    .row {
        height: 220vh;
    }

    .column {
        width: 40vw;
    }

    .hoverandclick {
        background-size: cover;
    }

    .hoverandclick h1 {
        font-size: 5vw;
    }

    /* Styling for de enkelte cases (mobile) starter her */
    
    .specific-cases h1 {
        font-size: 7vw;
    }

    .specific-cases h2 {
        font-size: 5vw;
    }

    .specific-cases-text p {
        font-size: 4vw;
    }

    .specific-cases-img {
        width: 80vw;
        margin: 5vh auto;
    }

    .specific-cases-img img {
        width: 70vw;
    }

    .specific-cases-content {
        display: unset;
        margin: auto;
    }

    .specific-cases-content p {
        width: 80vw;
    }

    .specific-cases-text {
        width: 90vw;
        margin: auto;
    }

    /* Styling for ate.html (mobile) starter her */

    .ateheader {
        height: 30vh;
    }

    .ateheader h1 {
        top: 15%;
    }

    .fixedmenu-right {
        display: none;
    }

    .atesections h2 {
        font-size: 8vw;
    }

    .atesections p {
        font-size: 4vw;
    }

    .atesections table {
        font-size: 3vw;
    }

    /* Styling for omos.html (mobile) starter her */
    
    .omosheader {
        width: 100vw;
        height: 90vh;
    }

    .omos-missionandvision {
        display: block;
        height: 40vh;
        top: 0;
    }
    .omos-missionandvision div {
        width: 80vw;
        margin: 5vh auto;
    }
    .omos-missionandvision p {
        font-size: 4vw;
    }

    .history h2 {
        margin-top: 5vh;
        font-size: 40px;
    }
    .history h3 {
        margin-top: 5vh;
        font-size: 7vw;
    }
    .history p {
        font-size: 16px;
    }

    .flexbox {
        display: unset;
    }

    .width {
        width: 80vw;
        margin: 5vh auto;
    }

    .timeline-center h3 {
        font-size: 5vw;
    }

    .timeline-singleborder h4 {
        font-size: 5vw;
    }

    .timeline-singleborder h5 {
        font-size: 2vw;
    }
    /* Styling for kontakt.html (mobile) starter her */ 

    .none, .splitline {
        display: none;
    }

    .contactwrapper {
        display: unset;
    }

    .formular {
        width: 80vw;
        margin: 5vh 0 0 10vw;
    }

    .formular h3 {
        font-size: 5vw;
    }

    .formular button {
        width: 30vw;
        font-size: 16px;
        border-radius: 10px;
    }

    .signup {
        width: 80vw;
        margin: 5vh 0 5vh 10vw;
    }

    .signup input[type=email] {
        width: 50vw;
    }

    .signup input[type=submit] {
        width: 30vw;
        height: 5vh;
        font-size: 16px;
    }
}