/* Shared Font Styles */
main {
    font-family: HelveticaNeue, Arial, sans-serif;
}

main p, main a, main p_link, main p_link:hover,
main h1, main h2, main h3, main h4, main h5, main h6, main h7 {
    font-family: inherit; /* Arver fonten fra main-elementet */
}

main p, main p_link {
    font-size: 16px;
    line-height: 20px;
    font-weight: 300;
}

main p_link {
    color: #009fe3;
    text-align: left;
    padding-left: 0px;
}


main h1 {
    font-size: 90px;
    font-weight: 600;
    line-height: 90px;
    margin-top: 0;
    margin-bottom: 5px;
    text-align: center;
}

main h2 {
    font-size: 60px;
    font-weight: 600;
    line-height: 60px;
    margin-top: 0;
    margin-bottom: 5px;
    text-align: center;
}

main h3 {
    font-size: 40px;
    font-weight: 400;
    line-height: 40px;
    margin-top: 30px;
    margin-bottom: 5px;
    text-align: center;
}

main h4 {
    font-size: 18px;
    font-weight: 400;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
}

main h5 {
    font-size: 23px;
    font-weight: 300;
    line-height: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
}

main h6 {
    font-size: 23px;
    font-weight: 300;
    line-height: 25px;
    margin-bottom: 10px;
    margin-top: 5px;
    text-align: center;
    text-decoration: line-through;
}

main p {
    font-size: 16px;
    line-height: 20px;
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 5px;
    text-align: left;
}


main .saleline {
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 10px;
    color: #006fc9;
}

main .pligttekst {
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #8f8f8f;
}

/* Standard
–––––––––––––––––––––––––––––––––––––––––––––––––– */
main .columns {
    padding-left: 2%;
    padding-right: 2%
}

main .section {
    padding: 0rem 0 5rem 0;
    text-align: center;
}

main .container {
    padding: 10px;
    margin-top: 0px
}

main .center {
    text-align: center;
}

main .left {
    text-align: left;
}

main .right {
    text-align: right;
}

main .header {
    margin-top: 5%
}

main .header1 {
    margin-top: 5%
}

/* images
–––––––––––––––––––––––––––––––––––––––––––––––––– */
main img {
    max-width: 100%;
    margin-top: 2%;
    margin-bottom: 2%;
}

main .bannerimg {
    max-width: 100%;
    height: auto;
    margin-left: 2%;
}

main .herobannerimg {
    max-width: 100%;
    height: auto
}

main .boximg {
    max-width: 266px;
    height: auto;
    margin-top: 0%;
    margin-bottom: 0%;
}

/* Color
–––––––––––––––––––––––––––––––––––––––––––––––––– */
main .blue {
    color: #4639E1
}

main .studyblue {
    color: #1BD1F8;
}

main .green {
    color: #4EAC57
}

main .white {
    color: #fff;
}

main .black {
    color: #000;
}

main .red {
    color: #c93a56
}

main .darkgrey {
    color: #8b8b93
}

main .fafafa {
    color: #FAFAFA
}

main .efefef {
    color: #efefef
}


/* Knapper
–––––––––––––––––––––––––––––––––––––––––––––––––– */
main .buttongrey {
    background-color: transparent;
    border: 1px solid #000;
    border-radius: 5px;
    font-size: 16px;
    color: #000;
    font-weight: 100;
    padding: 10px 20px;
    margin-top: 0px;
    min-width: 160px;
    text-align: center;
    -webkit-transition-duration: 0.4s;
    /* Safari */
    transition-duration: 0.6s;
    overflow: hidden;
    cursor: pointer;
    font-family: helvetica, arial, sans-serif;
    display: inline-block;
    margin-bottom: 0px
}

main .buttongrey:hover {
    background: #000;
    color: #fff;
    text-decoration: none
}

main .buttonblack {
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 5px;
    font-size: 16px;
    color: #fff;
    font-weight: 100;
    padding: 10px 20px;
    margin-top: 0px;
    min-width: 160px;
    text-align: center;
    -webkit-transition-duration: 0.4s;
    /* Safari */
    transition-duration: 0.6s;
    overflow: hidden;
    cursor: pointer;
    font-family: helvetica, arial, sans-serif;
    display: inline-block;
    margin-bottom: 0px
}

main .buttonblack:hover {
    background: #fff;
    color: #000;
    text-decoration: none
}

main .buttonred {
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 5px;
    font-size: 16px;
    color: #FFF;
    font-weight: 100;
    padding: 10px 20px;
    margin-top: 0px;
    min-width: 160px;
    text-align: center;
    -webkit-transition-duration: 0.4s;
    /* Safari */
    transition-duration: 0.6s;
    overflow: hidden;
    cursor: pointer;
    font-family: helvetica, arial, sans-serif;
    display: inline-block;
    margin-bottom: 0px
}

main .buttonred:hover {
    background: #fff;
    color: grey;
    text-decoration: none
}

main .buttongreen {
    background-color: #4EAC57;
    border-radius: 6px;
    font-size: 16px;
    color: #FFFFFF;
    padding: 10px 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 160px;
    text-align: center;
    -webkit-transition-duration: 0.2s;
    /* Safari */
    transition-duration: 0.2s;
    overflow: hidden;
    cursor: pointer;
    font-family: helvetica, arial, sans-serif;
}

main .buttongreen:hover {
    background: #017a4e;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    transition: 5ms;
}

main .btnappblue {
    background-color: #4639E1;
    border-radius: 6px;
    font-size: 16px;
    color: #FFFFFF;
    padding: 10px 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 160px;
    text-align: center;
    -webkit-transition-duration: 0.2s;
    /* Safari */
    transition-duration: 0.2s;
    overflow: hidden;
    cursor: pointer;
    font-family: helvetica, arial, sans-serif;
}

main .btnappblue:hover {
    background: #1A1D56;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    transition: 5ms;
}




/* Baggrunde color
–––––––––––––––––––––––––––––––––––––––––––––––––– */

main .backgroundhero {
    background-image: url(../images/a-man-using-a-smartphone-DTHGPSW@2x.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 0%;
    margin-top: 0%;
    padding-top: 5%;
    padding-bottom: 0%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

main #backgroundblack {
    background-color: black;
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    height: auto;
    background-repeat: no-repeat;
    background-position: 0%;
    left: 50%;
    padding-top: 5%;
    padding-bottom: 5%
}

main #backgroundblue {
    background-color: #4639E1;
    width: 100%;
    margin: 0% auto;
    border-radius: 0px;
    margin-bottom: -1px;
    margin-top: 0%;
    padding-top: 5%;
    padding-bottom: 0px;
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    background-repeat: no-repeat;
    margin-top: 0px;
    background-position: center;
    left: 50%;
    z-index: 1
}

main #backgroundgrey {
    background-color: #fafafa;
    width: 100%;
    margin: 0% auto;
    border-radius: 0px;
    margin-bottom: 0px;
    margin-top: 0%;
    padding-top: 2%;
    padding-bottom: 0px;
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    background-repeat: no-repeat;
    margin-top: 0px;
    background-position: center;
    left: 50%;
}

main #backgroundgreen {
    background-color: #4EAC57;
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    height: auto;
    background-repeat: no-repeat;
    background-position: 0%;
    left: 50%;
    padding-top: 5%;
    padding-bottom: 5%
}

main #backgroundorange {
    background-color: #ED774F;
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    height: auto;
    background-repeat: no-repeat;
    background-position: 0%;
    left: 50%;
    padding-top: 5%;
    padding-bottom: 5%
}

main #backgroundred {
    background-color: #E13545;
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    height: auto;
    background-repeat: no-repeat;
    background-position: 0%;
    left: 50%;
    padding-top: 5%;
    padding-bottom: 5%
}




/* Baggrunde color rounded corners
–––––––––––––––––––––––––––––––––––––––––––––––––– */
main .appbluebox {
    background: #4639E1;
    color: #fff;
    width: 100%;
    text-align: center;
    margin: 0% auto;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    margin-bottom: 0px;
    margin-top: 0%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 5% !IMPORTANT;
    padding-right: 5% !IMPORTANT;
}


main .greybox {
    background-color: #f5f5f7;
    width: 100%;
    margin: 0% auto;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 3% !important;
    padding-right: 3% !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

main .goldbox {
    background-image: linear-gradient(200deg, #001e32, #00121e);
    width: 100%;
    margin: 0% auto;
    border-radius: 20px;
    margin-bottom: 10px;
    margin-top: 5%;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5% !IMPORTANT;
    padding-right: 5% !IMPORTANT;
}

main .blackbox {
    background-color: #000;
    width: 100%;
    margin: 0% auto;
    border-radius: 20px;
    margin-bottom: 10px;
    margin-top: 5%;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5% !IMPORTANT;
    padding-right: 5% !IMPORTANT;
}

main .redbox {
    background-color: #E13545;
    width: 100%;
    margin: 0% auto;
    border-radius: 20px;
    margin-bottom: 10px;
    margin-top: 5%;
    padding-top: 10%;
    padding-bottom: 10%;
    padding-left: 5% !IMPORTANT;
    padding-right: 5% !IMPORTANT;
}

main .greybox1 {
    background-color: #FAFAFA;
    width: 100%;
    margin: 0% auto;
    border-radius: 20px;
    margin-bottom: 10px;
    margin-top: 5%;
    padding-top: 10%;
    padding-bottom: 0%;
    padding-left: 5% !IMPORTANT;
    padding-right: 5% !IMPORTANT;
}

main .greyboximage {
    background-image: url(/c/Kampagner%202023/Januar%20udsalg/Images/AirPods_Pro_2gen_Box-2000x2000.jpg);
    background-size: cover;
    height: 490px;
    background-position: center;
    width: 100%;
    margin: 0% auto;
    border-radius: 20px;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 0% !IMPORTANT;
    padding-right: 0% !IMPORTANT;
}


/* Kampagne
––––––––––––––––––––––––––––––––––––––––––––––––––*/

main .introtekst {
    padding-left: 90px;
    padding-right: 90px;
}

main .introtekst2 {
    padding-left: 90px;
    padding-right: 90px;
}

main .introtekst3 {
    padding-left: 200px;
    padding-right: 200px;
}

main #centerplacement {
    position: relative;
    max-width: 100%;
    margin-top: 33%;
}

main .imageheadermob {
    display: none;
}

main .imageheaderdesk {
    display: block;
    margin-top: 0%;
    margin-bottom: 2%
}




/* TABLET
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Bigger than 950 */
@media (max-width: 950px) {

    main h1 {
        font-size: 70px;
        font-weight: 800;
        line-height: 70px;
        text-align: center;
        padding-left: 0%;
        padding-right: 0%;
        margin-bottom: 20px;
    }

    main h2 {
        font-size: 60px;
        font-weight: 800;
        line-height: 60px;
        margin-top: 8%;
        margin-bottom: 20px;
    }

    main h3 {
        font-size: 45px;
        font-weight: 800;
        line-height: 45px;
        margin-bottom: 0px;
    }
    
    main h4 {
        font-size: 18px;
        font-weight: 400;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    main h5 {
        font-size: 22px;
        font-weight: 300;
        line-height: 26px;
    }

    main h6 {
        font-size: 22px;
        line-height: 26px;
        font-weight: 300;
        margin-bottom: 6%;
        margin-top: 16px;
        padding-left: 0px;
        padding-right: 0px
    }

    main h7 {
        font-size: 30px;
        line-height: 38px;
        font-weight: 800;
        margin-bottom: 0%;
        margin-top: 0px;
        text-align: center;
    }

    main h8 {
        font-size: 10px;
        font-weight: 300;
        line-height: 15px;
    }

    main h9 {
        font-size: 12px;
        line-height: 12px;
        font-weight: 100;
    }

    /* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
    main .section {
        padding: 2rem 0 2rem;
        width: 100%;
    }

    main .columns {
        padding-left: 6%;
        padding-right: 6%;
    }

    main .columnstest {
        padding-left: 2%;
        padding-right: 2%;
        width: 50%
    }

    main .container {
        max-width: 100%;
        padding: 15px 15px;
        margin-right: 0px;
        margin-left: 0px
    }

    main .reverse-columns {
        display: flex;
        flex-direction: column-reverse;
    }

    main .backgroundhero {
        background-image: url(../images/a-man-using-a-smartphone-DTHGPSW@2x.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        margin-bottom: 0%;
        margin-top: 0%;
        padding-top: 0%;
        padding-bottom: 0%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    main .container-flex.reverse {
        flex-direction: row;
    }

    main .container-flex.mobile-reverse {
        flex-direction: row-reverse;
    }

    main .center {
        text-align: center;
        margin-top: 4px;
    }

    main img {
        max-width: 100%;
        margin-top: 5%;
    }

    main .introtekst {
        padding-left: 0px;
        padding-right: 0px;
    }

    main .introtekst2 {
        padding-left: 0px;
        padding-right: 0px;
    }

    main .introtekst3 {
        padding-left: 0px;
        padding-right: 0px;
    }

    main #centerplacement {
        position: relative;
        max-width: 100%;
        margin-top: 10%;
        margin-left: 0%;
    }




}




/* MOBILE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Bigger than 650 */
@media (max-width: 650px) {

    main h1 {
        font-size: 40px;
        font-weight: 800;
        line-height: 40px;
        text-align: center;
        padding-left: 5px;
        padding-right: 5px;
        margin-bottom: 20px;
    }

    main h2 {
        font-size: 30px;
        font-weight: 800;
        line-height: 30px;
        margin-top: 0%;
        margin-bottom: 20px;
    }

    main h3 {
        font-size: 26px;
        font-weight: 800;
        line-height: 26px;
        margin-bottom: 10px;
    }

    main h4 {
        font-size: 18px;
        font-weight: 400;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    main h5 {
        font-size: 22px;
        font-weight: 300;
        line-height: 26px;
    }

    main h6 {
        font-size: 22px;
        line-height: 26px;
        font-weight: 300;
        margin-bottom: 6%;
        margin-top: 16px;
        padding-left: 0px;
        padding-right: 0px
    }

    main h7 {
        font-size: 30px;
        line-height: 38px;
        font-weight: 800;
        margin-bottom: 0%;
        margin-top: 10px;
        text-align: center;
    }

    main h8 {
        font-size: 10px;
        font-weight: 300;
        line-height: 15px;
    }

    main h9 {
        font-size: 12px;
        line-height: 12px;
        font-weight: 100;
    }

    /* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
    main .section {
        padding: 2rem 0 2rem;
        width: 100%;
    }

    main .columns {
        padding-left: 0%;
        padding-right: 0%
    }

    main .columnstest {
        padding-left: 2%;
        padding-right: 2%;
        width: 50%
    }

    main .container {
        max-width: 100%;
        padding: 15px 15px;
        margin-right: 0px;
        margin-left: 0px
    }

    main .reverse-columns {
        display: flex;
        flex-direction: column-reverse;
    }

    main .backgroundhero {
        background-image: url(../images/a-man-using-a-smartphone-DTHGPSW@2x.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        margin-bottom: 0%;
        margin-top: 0%;
        padding-top: 0%;
        padding-bottom: 0%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    main .container-flex.reverse {
        flex-direction: row;
    }

    main .container-flex.mobile-reverse {
        flex-direction: row-reverse;
    }

    main .center {
        text-align: center;
        margin-top: 4px;
    }

    main img {
        max-width: 100%;
        margin-top: 5%;
    }

    main .introtekst {
        padding-left: 0px;
        padding-right: 0px;
    }

    main .introtekst2 {
        padding-left: 0px;
        padding-right: 0px;
    }

    main .introtekst3 {
        padding-left: 0px;
        padding-right: 0px;
    }

    main #centerplacement {
        position: relative;
        max-width: 100%;
        margin-top: 10%;
        margin-left: 0%;
    }

    main .imageheaderdesk {
        display: none;
    }

    main .imageheadermob {
        display: block;
    }


}