@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap');

    .text-gradient {
        background: #000;
        background-color: #000;
        background-image: linear-gradient(.351turn, #ff5858 23.71%, #c058ff 78.8%);
        background-size: 100%;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: all .75s ease;
    }

    body {
        background: #f5f5f5 url("https://cdn.artiestonline.nl/artiestonline.nl/img/bg01.png") top right no-repeat;
        font-family: 'Roboto', sans-serif;
    }

    #menu {
        padding-top: 20px;
    }

    #menu a.brand {
        display: inline-block;
        font-weight: 900;
        font-size: 35px;
        margin-top: 0px;
    }

    #menu ul {
        display: inline-block;
        list-style: none;
        margin: 0;
        padding: 0 30px 0 0px;
    }

    #menu ul li {
        display: inline-block;
        padding: 0 14px;
    }

    #menu ul li a {
        color: #434343;
        text-decoration: none;
        font-weight: 700;
        font-size: 18px;
    }

    #menu ul li a:hover {
        background: #000;
        background-color: #000;
        background-image: linear-gradient(.351turn, #ff5858 23.71%, #c058ff 78.8%);
        background-size: 100%;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: all .75s ease;
    }

    #menu button {
        border: 0px;
        display: inline-block;
        background: #333 linear-gradient(.351turn, #ff5858 23.71%, #c058ff 78.8%);
        padding: 8px 25px;
        color: #fff;
        font-weight: 700;
        font-size: 20px;
        text-decoration: none;
        border-radius: 10px;
        margin-top: 0px;
        transition: all .75s ease;
    }

    #menu button:hover {
        background: #333;
        transition: all 2s ease;
    }

    #menu.scroll {
        position: fixed;
        top: 0px;
        left: 0;
        width: 100%;
        z-index: 100;
    }

    #menu.scroll .container {
        background: #fff;
        border-radius: 15px;
        padding: 10px 20px;
        box-shadow: #ddd 0 0 20px;
    }

    #menu.scroll a.brand {
        margin-top: 0px;
    }

    #menu.scroll a.button {
        margin-top: 2px;
    }

    #header {
        height: 600px;
    }

    #header.scroll {
        margin-top: 80px;
    }

    #header .container {
        height: 550px;
    }

    #header h1 {
        font-weight: 700;
        font-size: 90px;
        line-height: 85px;
        padding: 0px;
        margin: 0px;
    }

    #header h2 {
        font-weight: 700;
        font-size: 90px;
        line-height: 85px;
        padding: 0px;
        margin: 0px;
    }

    #header .ticker div {
        display: inline-block;
        word-wrap: break-word;
    }

    #example .cont {
        position: relative;
        margin: 0 auto;
        width: 1000px;
        height: 500px;
    }

    #example #frame {
        margin: 0 auto;
        width: 1000px;
        height: 500px;
        border: 20px solid #fff;
        background: url(https://cdn.artiestonline.nl/artiestonline.nl/img/arjanvoorbeeld.jpg);
        background-size: 1000px;
        border-radius: 10px;
    }

    #example .cont .pricetag {
        position: absolute;
        right: 80px;
        top: -20px;
        text-align: center;
    }

    #example .cont .pricetag h3 {
        font-weight: 700;
        line-height: 20px;
        margin-top: 5px;
        padding: 0px;
        letter-spacing: -2px;
    }

    #example .cont .pricetag h3 .streep {
        position: absolute;
        display: block;
        width: 70px;
        height: 10px;
        top: 12px;
        left: 30px;
        z-index: 10;
        background: url(https://cdn.artiestonline.nl/artiestonline.nl/img/streep.png) no-repeat;
        transform: rotate(-10deg);
    }

    #example .cont .pricetag h2 {
        font-weight: 900;
        font-size: 65px;
        line-height: 65px;
        margin: 0px;
        padding: 0px;
        margin-top: -10px;
        letter-spacing: -3px;
    }

    #example .cont .pricetag p {
        margin: 0px;
        padding: 0px font-weight: 700;
        font-size: 20px;
        line-height: 30px;
    }

    #example .star {
        position: absolute;
        top: -20px;
        left: -30px;
        z-index: 2;
        transform: rotate(10deg);
    }

    #intro .text {
        max-width: 1000px;
        margin: 90px auto;
        text-align: center;
    }

    #intro .text h4 {
        font-size: 20px;
        letter-spacing: 1px;
        color: #434343;
        line-height: 35px;
        text-align: center;
    }

    #intro .text button {
        border: 0px;
        display: inline-block;
        background: #333 linear-gradient(.351turn, #ff5858 23.71%, #c058ff 78.8%);
        padding: 18px 50px;
        color: #fff;
        font-weight: 700;
        font-size: 20px;
        text-decoration: none;
        border-radius: 10px;
        margin-top: 30px;
        transition: all .75s ease;
    }

    #intro .text button:hover {
        background: #333;
        transition: all .75s ease;
    }

    #features {
        padding: 100px 0;
    }

    #features .container {
        max-width: 1000px;
    }

    #features ul {
        margin: 40px 0 0 0;
        padding: 0;
        list-style: none;
        max-width: 600px;
    }

    #features ul li {
        padding: 10px 5px 10px 60px;
        border-bottom: 1px solid #ddd;
        font-size: 20px;
        letter-spacing: 1px;
        color: #434343;
        line-height: 30px;
        background: url("https://cdn.artiestonline.nl/artiestonline.nl/img/check.png") 10px 13px no-repeat;
    }

    #features ul li:last-child {
        border-bottom: 0;
    }

    #logos {
        padding: 40px;
    }

    #logos .container {
        padding: 0 50px;
    }

    #logos img {
        filter: grayscale(1);
        transition: .5s;
    }

    #logos img:hover {
        filter: grayscale(0);
        transition: .5s;
    }

    #faq {
        padding: 90px 0;
    }

    #faq .faqcontainer {
        background: #fff;
        border-radius: 15px;
        max-width: 1000px;
        margin: 20px auto;
    }

    #faq h3 {
        width: 100%;
        font-weight: 900;
        font-size: 50px;
        text-align: center;
        padding: 30px 0;
    }

    #faq a.vragen {
        display: inline-block;
        width: 100%;
        font-weight: 400;
        font-size: 20px;
        text-align: center;
        padding: 30px 0;
        text-decoration: none;
        color: #434343;
    }

    #faq .accordion {
        border-bottom: 1px solid #ddd;
        margin-bottom: 20px;
    }

    #faq .accordion .accordion-item h2 button {
        font-family: 'Roboto', sans-serif;
        font-size: 20px;
        letter-spacing: 1px;
        color: #434343;
        line-height: 30px;
    }

    #faq .accordion-body {
        padding: 20px;
        font-family: 'Roboto', sans-serif;
        font-size: 18px;
        font-weight: 300;
        letter-spacing: 1px;
        color: #434343;
        line-height: 30px;
    }

    #kosten h2 {
        width: 100%;
        font-weight: 900;
        font-size: 50px;
        text-align: center;
        padding: 30px 0;
    }

    #kosten {
        padding: 70px 0px;
    }

    #kosten .container {
        padding: 0 100px;
        max-width: 900px;
    }

    #kosten .kader {
        margin-top: 10px;
        padding: 25px;
        text-align: center;
        border-radius: 10px 10px 0 0;
    }

    #kosten .grey {
        background: #fff;
    }

    #kosten .blue {
        background: #52729b;
        color: #fff;
    }

    #kosten .blue h4 {
        font-size: 20px;
        color: #ccc;
        line-height: 20px;
        font-weight: 300;
    }

    #kosten .blue h2 {
        font-size: 30px;
        color: #fff;
        line-height: 30px;
    }

    #kosten .blue h3 {
        font-size: 40px;
        color: #fff;
        line-height: 40px;
        font-weight: 900;
    }

    #kosten .blue h3 s {
        font-size: 20px;
        color: #fff;
    }

    #kosten .blue p {
        font-size: 12px;
        color: #fff;
    }

    #kosten .grey h4 {
        font-size: 20px;
        color: #333;
        line-height: 20px;
        font-weight: 300;
    }

    #kosten .grey h2 {
        font-size: 30px;
        line-height: 30px;
    }

    #kosten .grey h3 {
        font-size: 40px;
        line-height: 40px;
        font-weight: 900;
    }

    #kosten .grey h3 s {
        font-size: 20px;
    }

    #kosten .grey p {
        font-size: 12px;
    }

    #kosten p {
        margin-top: 25px;
    }

    #kosten .button {
        display: inline-block;
        padding: 10px;
        background: #333;
        color: #fff;
        font-weight: 700;
        font-size: 20px;
        width: 100%;
        text-decoration: none;
        text-align: center;
        border-radius: 0 0 10px 10px;
    }

    #kosten h2.title {
        width: 100%;
        text-align: center;
        padding-bottom: 30px;
    }

    #contact {
        font-family: 'Roboto', sans-serif;
        font-size: 16px;
        letter-spacing: 1px;
        color: #434343;
        line-height: 30px;
        padding: 60px 0;
    }

    #contact .links {
        padding: 40px;
    }

    #contact a {
        color: #434343;
        text-decoration: none;
    }

    #contact a.whatsapp {
        color: #5db039;
        text-decoration: none;
        font-weight: 700;
    }

    #contact a.whatsapp img {
        width: 40px;
    }

    #ref .container {
        padding: 70px 0;
        max-width: 600px;
    }

    .image {
        position: absolute;
        z-index: 1;
        width: 200px;
        height: 200px;
        margin: -60px 0 0 -60px;
        -webkit-animation: spin 20s linear infinite;
        -moz-animation: spin 20s linear infinite;
        animation: spin 20s linear infinite;
    }

    #example .pricetag:hover .image {
        -webkit-animation: spin 4s linear infinite;
        -moz-animation: spin 4s linear infinite;
        animation: spin 4s linear infinite;
    }

    @-moz-keyframes spin {
        100% {
            -moz-transform: rotate(360deg);
        }
    }

    @-webkit-keyframes spin {
        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes spin {
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

.alert {font-family: 'Roboto', sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
    color: #434343;
    line-height: 30px;}

#aanvraag { 
            font-family: 'Roboto', sans-serif;
                font-size: 16px;
                letter-spacing: 1px;
                color: #434343;
                line-height: 30px;}
#aanvraag .modal-content {
                background: #f5f5f5; 
}
#aanvraag form { padding: 20px; }
#aanvraag h2 { font-weight: 900;
    font-size: 40px;
    line-height: 45px;
    padding: 0px;
    margin: 0px; 
background: #000;
    background-color: #000;
    background-image: linear-gradient(.351turn, #ff5858 23.71%, #c058ff 78.8%);
    background-size: 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }

    #aanvraag .input-group { margin-top: 10px; }
    #aanvraag .input-group-text { min-width: 200px; text-align: right; }
    #aanvraag .text { padding: 20px 0 0 20px; }
    #aanvraag button { margin-top: 15px; }
        #aanvraag .button {
            border: 0px;
            display: inline-block;
            background: #333 linear-gradient(.351turn, #ff5858 23.71%, #c058ff 78.8%);
            padding: 18px 50px;
            color: #fff;
            font-weight: 700;
            font-size: 20px;
            text-decoration: none;
            border-radius: 10px;
            transition: all .75s ease;
            float: right;
        }

        .bg2 {
        background: #f5f5f5 url("https://cdn.artiestonline.nl/artiestonline.nl/img/bg02.png") top left no-repeat;
        }
                .bg3 {
                    background: #f5f5f5 url("https://cdn.artiestonline.nl/artiestonline.nl/img/bg03.png") top right no-repeat;
                }

#info { text-align: center; padding: 60px 20px; 
font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 1px;
    color: #434343;
    line-height: 30px;
    }
#info ul, #info ol {
        display: inline-block;
        text-align: left;
        padding: 20px 20%;
    }
    #info h1, #info h2 {
            font-weight: 700;
            font-size: 40px;
            line-height: 45px;

        }
#info a { color: #434343; }

@media (max-width: 600px) {

    body { background-size: 200%; }
    #menu a.brand { font-size: 26px; margin: 8px 0 0 10px; }
    #menu .mainmenu { display: none; }
    #menu button { float: right; margin-top: 3px;}
    #menu.scroll { width: 94%; margin: 0 3%; }
    #menu.scroll a.brand { margin-top: 6px; }
    #header { height: 400px; }
    #header .container { height: 350px; }

        #header h1 {
            font-weight: 700;
            font-size: 35px;
            line-height: 40px;
            padding: 0px;
            margin: 0px;
        }
    
        #header h2 {
            font-weight: 700;
            font-size: 35px;
            line-height: 40px;
            padding: 0px;
            margin: 0px;
            text-align: left !imporant; 
        }

        #example .cont {
            position: relative;
            margin: 0 auto;
            width: 80%;
            height: 500px;
        }
    
        #example #frame {
            margin: 0 auto;
            width: 100%;
            height: 500px;
            border: 20px solid #fff;
            background: url(https://cdn.artiestonline.nl/artiestonline.nl/img/arjanvoorbeeld.jpg);
            background-size: 100%;
            border-radius: 10px;
        }

        #intro { padding: 25px; }
        #features { padding: 25px; }
        #features img { width: 100%; padding: 0 20%; }

        #example .cont .pricetag {
            position: absolute;
            right: 120px;
            top: -20px;
            text-align: center;
        }

        #kosten .container {
            padding: 20px;
            max-width: auto;
        }

        #aanvraag .input-group-text {
            width: 100%;
            max-width: 100px !important;
            min-width: auto;
        }

        #logos {
            padding: 0px;
        }

        #info ul, #info ol { padding: 10px; }
}