/*!* SCSS RGB *!*/
/*$amethyst: rgba(155, 93, 229, 1);*/
/*$brilliant-rose: rgba(241, 91, 181, 1);*/
/*$maize: rgba(254, 228, 64, 1);*/
/*$deep-sky-blue: rgba(0, 187, 249, 1);*/
/*$aquamarine: rgba(0, 245, 212, 1);*/


.vitamined-tekst{
    color: rgba(155, 93, 229, 1);

}

.vitamined-bar{
    background-color: rgba(155, 93, 229, 1);
    width: 80%;
    height: 24px;
}

.potasium-tekst{
color: rgba(241, 91, 181, 1);
}

.potatium-bar{
background-color: rgba(241, 91, 181, 1);
    width: 30%;
    height: 24px;
}

.vitamineb12-tekst{
color: rgba(254, 228, 64, 1);
}

.vitamineb12-bar{
background-color: rgba(254, 228, 64, 1);
    width: 40%;
    height: 24px;
}

.vitaminea-tekst{
color: rgba(0, 187, 249, 1);
}

.vitaminea-bar{
background-color: rgba(0, 187, 249, 1);
    width: 60%;
    height: 24px;
}

.vitamineb-tekst{
color: rgba(0, 245, 212, 1);
}

.vitamineb-bar{
background-color: rgba(0, 245, 212, 1);
    width: 90%;
    height: 24px;
}

.vitaminec-tekst{
color: #6a1a21;
}

.vitaminec-bar{
background-color: #6a1a21;
    width: 55%;
    height: 24px;
}
.yellow-background{
    background-color: rgba(254, 228, 64, 1);
}

.orange-background{
    background-color: rgba(241, 91, 181, 1);
}

.green-background{
background-color: rgba(0, 187, 249, 1);
}



.grey{
    color: #B2B3B3;
}

.lightgrey{
    color: #676766;
}

.paars{
    background-color: rgba(155, 93, 229, 1);
    padding: 60px 40px;
}

.geel{
    background-color: rgba(254, 228, 64, 1);
    padding: 60px 40px;
}

.oranje{
    background-color: rgba(241, 91, 181, 1);
    padding: 60px 40px;
}

.paarskolom2{
    margin: 60px 0 0 0 ;
}

.claimofferbutton{
    border-radius: 24px;
    background-color: white;
    color: black;
    padding: 4px 14px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 700;
    border: solid 10px white;
    transition: 0.6s;
}

.claimofferbutton:hover{
    background-color: black;
    color: white;
    padding: 4px 14px;
    border: solid 10px black;


}

.achtergrondfoto {
    background-image: url("../images/juicebar2.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100vh;
}

.okape {
    font-size: 8em;
}

.juiceshop{
    font-size: 2em;

}

.promises{
    padding-bottom: 8em;
}

.juicegroot{
    font-size: 3em;
}

/*(foto nemen die voldoende groot is om de achtergrond te vullen)*/

body
{
    overflow-x: hidden;
}


.getstartedbutton{
    border-radius: 24px;
    background-color: black;
    color: white;
    padding: 4px 14px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 700;
    border: solid 10px black;
    transition: 0.6s;
}

.getstartedbutton:hover{
    background-color: white;
    color: black;
    padding: 4px 14px;
    border: solid 10px white;
}

.appelachtergrond{
    background-image: url("../images/pexels-ifreestock-616833.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100vh;
}

.thebest{
    font-size: 3em;

}

/*W3schools*/
.tekstachtergrond{
    background-color: rgba(255, 255, 255, 0.9);
    margin-top: 15em;
    max-width: 500px;

}

.jongenachtergond{
background-color: rgba(241, 91, 181, 0.5)
}

.tekstlinks{
    padding-top: 150px;
}

.footerachtergrond{
    background-color: rgba(0,0,0,1);
}

.achtergrondfoto-footer{
    background-image: url("../images/pexels-nicola-barts-7937002.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100vh;
}


.cirkel-icoon{
    background-color: rgba(0,0,0,0.7);
    padding: 20px;
}

/*https://www.w3schools.com/howto/howto_css_icon_bar.asp*/
.icon-bar {
    max-width: 400px;
    overflow: auto;
}

.icon-bar a {
    background-color: #555;
    float: left;
    width: 18%;
    text-align: center;
    padding: 12px 0;
    transition: all 0.3s ease;
    color: white;
    font-size: 36px;
}