/*

Template 2082 Pure Mix

http://www.tooplate.com/view/2082-pure-mix



wit: #FFFFFF
lichtgrijs: #F9F9F9
grijs: #EEEEEE
zwart: #121213


kleur logo: #A9C6C6
kleur logo midden: #006B68
kleur logo heel donker: #006461

lichtblauw portfolio: #78BFBC

*/

:root {
    --font-primary: 'Passion One', sans-serif;
    --font-secondary: 'Work Sans', sans-serif;
    --color-primary: #A9C6C6;
    --color-secondary: #006B68;
    --color-tertiary: #006461;
    --color-quaternary: #78BFBC;
    /*--color-accent: #D2BC8D;*/
    /*--color-accent: #FFD7B2;*/
    --color-accent: #A9C6C6;
    --br: .25rem;
}

/* Body
------------------------------------- */
body {
    background: #ffffff;
    font-family: var(--font-secondary);
    font-style: normal;
    font-weight: 300;
    position: relative;
    padding: 0!important;
}

.bg-primary {
    background: var(--color-primary) !important;
}

.bg-secondary {
    background: var(--color-secondary) !important;
}

.bg-accent {
    background: var(--color-accent) !important;
}

.text-primary {
    color: var(--color-primary) !important;
}

.text-secondary {
    color: var(--color-secondary) !important;
}

.font-primary {
    font-family: var(--font-primary) !important;
}

.font-secondary {
    font-family: var(--font-secondary) !important;
}


/* buttons */
.btn {
    transition: .2s all ease-in-out;
    padding: 10px 30px;
    text-transform: uppercase;
}

.btn-karin {
    background-color: var(--color-secondary);
    font-family: var(--font-primary);
    color: #FFF;
    border: 2px solid var(--color-secondary);
}
.btn-karin:hover {
    background-color: var(--color-tertiary);
    border: 2px solid var(--color-tertiary);
    color: #000;
}

.btn-karin-outline {
    color: var(--color-secondary);
    font-family: var(--font-primary);
    border: 2px solid var(--color-secondary);
}
.btn-karin-outline:hover {
    background-color: var(--color-tertiary);
    color: #000;
    border: 2px solid var(--color-tertiary);
}

.btn-karin-2 {
    background-color: var(--color-primary);
    font-family: var(--font-primary);
    color: #000;
    border: 2px solid var(--color-primary);
}
.btn-karin-2:hover {
    background-color: var(--color-accent);
    border: 2px solid var(--color-accent);
    filter: brightness(80%);
    color: #000;
}

.border-radius {
    border-radius: var(--br);
}

/* Home page */
header h1 {
    font-size: 5.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.header-dropshadow {
    filter: drop-shadow(-40px -40px 0 var(--color-secondary));
}


/* Skill bars */
.skillbar-wrapper {
    margin-top: 1.5em;
    max-width: 100%;
    background-color: white;
    padding-bottom: 4%;
}

.skillbar {
    position: relative;
    margin-bottom: 15px;
    width: 100%;
    background: #A9C6C6;
    height: 35px;
    border-radius: var(--br) !important;
}

.skillbar-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 160px;
    font-weight: bold;
    font-size: 10px;
    color: white;
    margin: 0;
    border-radius: var(--br);
}

.skillbar-title span {
    display: block;
    background: #006B68;
    /*  background: rgba(0, 0, 0, 0.1);*/
    /*  background: #A9C6C6;*/
    padding: 0 20px;
    height: 35px;
    line-height: 35px;
}

.skillbar-bar {
    height: 35px;
    width: 0%;
    transition: 1000ms linear;
    transition-property: width, background-color;
    border-radius: var(--br);
}

.skill-bar-percent {
    position: absolute;
    right: 10px;
    top: 0;
    font-size: 11px;
    height: 35px;
    line-height: 35px;
    color: white;
    font-weight: bold;
    transition: color 1000ms ease-out;
}

.complete .skill-bar-percent {
    color: white;
    font-weight: bold;
}

.complete2 .skill-bar-percent {
    color: Black;
    font-weight: bold;
}

.complete.server .skill-bar-percent {
    color: #333;
}

.photoshop .skillbar-title {
    background: #006B68;
    /**background: #15C0F7;**/
}

.photoshop .skillbar-bar {
    background: #006B68;
    /**background: #15C0F7;**/
}

.macos .skillbar-title {
    background: #006B68;
    /**background: #1AAEF8;**/
}

.macos .skillbar-bar {
    background: #006B68;
    /**background: #1AAEF8;**/
}

.indesign .skillbar-title {
    background: #006B68;
    /**background: #FF408D;**/
}
.indesign .skillbar-bar {
    background: #006B68;
    /**background: #FF408D;**/
}

.illustrator .skillbar-title {
    background: #006B68;
    /**background: #FF7D00;**/
}

.illustrator .skillbar-bar {
    background: #006B68;
    /**background: #FF7D00;**/
}

.acrobat .skillbar-title {
    background: #006B68;
    /**ackground: #C11E07;**/
}

.acrobat .skillbar-bar {
    background: #006B68;
    /**background: #C11E07;**/
}

.quark .skillbar-title {
    background: #006B68;
    /**background: #1796E8;**/
}

.quark .skillbar-bar {
    background: #006B68;
    /**background: #1796E8;**/
}

.pc .skillbar-title {
    background: #006B68;
    /**background: #80C342;**/
}

.pc .skillbar-bar {
    background: #006B68;
    /** background: #80C342;**/
}

.office .skillbar-title {
    background: #006B68;
    /**background: #DF3900;**/
}

.office .skillbar-bar {
    background: #006B68;
    /** background: #DF3900;**/
}






/* Footer */
footer {
    background: var(--color-secondary);
    color: #ffffff;
    padding: 50px 0;
    text-align: center;
}

footer ul {
    list-style: none;
    padding: 0;
}