:root {
    --blue: #26e;
    --light-blue: #7af;
    --ultra-blue: #def;
    --violet: #44e;
    --light-violet: #88f;
    --pink: #d6a;
    --red: #e45;
    --orange: #f75;
    --yellow: #fc0;
    --green: #4c5;
    --teal: #20c997;
    --cyan: #399;
    --white: #fff;
    --gray: #ddd;
    --iron: #999;
    --gray-dark: #555;
    --primary: #26e;
    --secondary: #88f;
    --success: #28a745;
    --info: #88f;
    --warning: #fc0;
    --danger: #e45;
    --light: #fafafa;
    --dark: #111;
}

html {
    scroll-behavior: smooth;
}

@font-face {
    font-family: Avenir Next, ;
    src: local(__avenir-next-medium), url('lettertype/__avenir-next-medium') format('opentype');
}

body {
    font-family: Avenir Next, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: content-box;
    background-color: var(--light);
    font-style: normal;
    overflow-x: hidden;
}

h1 {
    font-size: 2.4em;
    src: local(Avenir-next-bold), url('lettertype/__avenir-next-bold') format('opentype');
}

h2 {
    font-size: 2.2em;
    font-weight: 500;
}

h3 {
    font-size: 2em;
    font-weight: 500;
}

h4 {
    font-size: 1.8em;
    font-weight: 500;
}

h5 {
    font-size: 1.6em;
    font-weight: 500;
}

h6 {
    font-size: 1.1em;
    font-weight: 500;
}

p {
    font-size: 1.1em;
    line-height: 1.4em;
}

.italic {
    font-style: italic;
}

.quote {
    font-family: Didot;
}

.quote {
    font-size: 2em;
}

ul,
ol {
    margin: 0;
}

li {
    display: inline;
    width: auto;
    font-weight: 400;
    text-decoration: none;
    padding: 0 0.6rem;
}

a {
    text-decoration: none !important;
    font-weight: 500;
    cursor: pointer;
}

a:hover {
    opacity: 0.4;
}

.o-100 {
    opacity: 1;
}

.o-100:hover {
    opacity: 1;
}

.navbar {
    box-shadow: 0px 0px 24px 5px rgb(0 0 0 / 20%);
    padding: 0;
}

.navbar a {
    color: var(--blue);
}

.breadcrumble {
    background-color: none !important;
}

.hamburger-menu {
    width: 36px;
    height: 36px;
}

.bg-blue a {
    color: var(--light);
}

.bg-light {
    color: var(--light);
}

.navbar-brand {
    width: 84px;
    height: 84px;
    padding: 0;
    margin: 0;
}

.navbar-brand img {
    width: 84px;
    height: 84px;
}

.navbar-links {
    display: block;
}

.navflag {
    width: 32px;
    margin: 0 0.4em 0;
}

.btn-hero {
    width: 24em;
    height: 3.2em;
    border-style: solid;
    border-width: 0.32em;
    border-radius: 4em;
    border-color: var(--white);
    background-color: rgba(238, 238, 238, 0.00);
    color: var(--white) !important;
    font-weight: 500;
}

.btn-hero:hover {
    background-color: var(--white);
    color: var(--blue) !important;
}

.btn-hero a {
    color: var(--white);
}

.btn-hero:hover a {
    color: var(--blue);
}

.btn-a {
    border-style: none;
    border-radius: 0.4em;
    font-weight: 500;
}

.btn-a:hover {
    opacity: 0.4;
}

.btn-cta-a {
    border-style: solid;
    border-width: 0.32em;
    border-radius: 4em;
    border-color: var(--white);
    background-color: rgba(238, 238, 238, 0.00);
    color: var(--white);
}

.btn-cta-a:hover {
    border-style: solid;
    border-width: 0.32em;
    border-radius: 4em;
    border-color: var(--white);
    background-color: var(--white);
    color: var(--blue);
    opacity: 1;
}

.hero {
    height: 45em;
    background-image: url(../afbeeldingen/_jpg/webdesign.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 1;
}

.hero-about {
    height: 45em;
    background-image: url(../afbeeldingen/_svg/hero-about.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 1;
}

.hero-optie {
    height: 45em;
    background-image: url(../afbeeldingen/_jpg/optimalisatie-akita-1440x1440.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
    opacity: 1;
}

.hero-kwijt {
    height: 45em;
    background-image: url(../afbeeldingen/_jpg/logo-kwijt.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 1;
}

.hero-portfolio {
    height: 54em;
    background-image: url(../afbeeldingen/_jpg/portolfio-hero.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    background-attachment: fixed;
    opacity: 1;
}

.hero-webdesign {
    height: 54em;
    background-image: url(../afbeeldingen/_jpg/webdesign-hero.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    background-attachment: fixed;
    opacity: 1;
    background-color: var(--dark);
}

.hero-front-end {
    height: 54em;
    background-image: url(../afbeeldingen/_jpg/front-end.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    background-attachment: fixed;
    opacity: 1;
    background-color: var(--dark);
}

.hero-multi-color-1 {
    height: 45em;
    background-image: url(../afbeeldingen/_svg/color-ful-gradient-1.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
    opacity: 1;
}

.hero-multi-color-2 {
    height: 45em;
    background-image: url(../afbeeldingen/_svg/color-ful-gradient-2.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
    opacity: 1;
}

.hero-multi-color-3 {
    height: 44em;
    background-image: url(../afbeeldingen/_png/multi-color-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 1;
}

/* positions */

.sticky {
    position: sticky !important;
}

.fit {
    object-fit: scale-down;
}

/* Colors */

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

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

.ultra-blue {
    color: var(--ultra-blue) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.dark-gray {
    color: var(--dark-gray) !important;
}

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

.bg-dark-gray-64 {
    background-color: var(--dark-gray) !important;
    opacity: 0.64;
}

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

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

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

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

.gradient-blue {
    background-image: linear-gradient(-45deg, #26e, #7af);
}

.gradient-violet {
    background-image: linear-gradient(-45deg, #44e, #88f);
}

.gradient-green {
    background-image: linear-gradient(-45deg, #28ba44, #a0dfac);
}

.gradient-yellow {
    background-image: linear-gradient(-45deg, #ffd41d, #f6e798);
}

.gradient-orange {
    background-image: linear-gradient(-45deg, #ef675c, #f4ae8e);
}

.gradient-red {
    background-image: linear-gradient(-45deg, #ed3e54, #f38f9b);
}

.multi {
    background: linear-gradient(45deg, #e45, #f4ae8e, #ffd41d, #a0dfac);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: gradient 10s infinite ease-in-out;
    animation-direction: alternate;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

s .o-100 {
    opacity: 1;
}

.o-80 {
    opacity: 0.8;
}

.o-60 {
    opacity: 0.6;
}

.o-40 {
    opacity: 0.4;
}

.o-20 {
    opacity: 0.2;
}

.o-0 {
    opacity: 0;
}

.gradient-blue h6 {
    color: var(--white);
    margin: 0 0 0.5em 0;
}

.gradient-blue a {
    color: var(--white);
}

.card {
    border-radius: 16px;
}

.card:hover {
    animation: smooth-lift 0.4s ease-in-out;
    animation-fill-mode: forwards;
}

card:hover .static {
    animation: none;
}

.card img {
    border-radius: 8px;
}

.card-title {
    color: var(--blue);
}

/* Images */

.social-icon {
    width: 2em;
    height: 2em;
}

/* animation */

@-webkit-keyframes smooth-lift {
    0% {
        transform: translateY(0em);
    }

    75% {
        transform: translateY(-1em);
        box-shadow: 0px 0px 24px 1px rgb(0 0 0 / 20%);
    }

    100% {
        transform: translateY(-1.2em);
        box-shadow: 0px 0px 24px 1px rgb(0 0 0 / 20%);
    }

}

/* Portfolio Carousel */

.carousel-inner {
    width: 100%;
    overflow: hidden;
}

.carousel-inner img {
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    object-fit: cover;
}

.carousel-caption {
    width: 100%;
    position: static;
}

.carousel-caption::before,
::after {
    background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
}

/* Portfolio Gallery */

/* Countdown */




/* Call of Action */

/* Custom dropdown */
.dropdown-menu {
    position: absolute;
    top: 100%;
    z-index: 1000;
    display: none;
    min-width: 0rem;
    padding: 0;
    margin: 0;
    font-size: 1rem;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 0 0 0.4rem 0.4rem;
    border-style: none;
}

.lang {
    position: absolute;
    display: block;
    top: 84px;
    right: 12%;
}

.dropdown-item:focus,
.dropdown-item:hover {
    color: var(--light);
    background-color: var(--light-blue);
    opacity: 1;
}

.dropdown-item:active {
    color: var(--blue);
    background-color: var(--light-blue);
    opacity: 1;
}

dropdown-toggle:hover {
    opacity: 0.2;
}

/* Toast */

.toast {}

/* Espant mark */
s
/* width */

.w-30 {
    width: 30% !important;
}

/* Company slider */

@-webkit-keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(calc(-250px * 7));
        transform: translateX(calc(-250px * 7));
    }
}

@keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(calc(-250px * 7));
        transform: translateX(calc(-250px * 7));
    }
}

.slider {
    background: pr;
    height: 100px;
    margin: auto;
    overflow: hidden;
    position: relative;
}

.slider::before,
.slider::after {
    background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
    content: "";
    height: 100px;
    position: absolute;
    width: 200px;
    z-index: 2;
}

.slider::after {
    right: 0;
    top: 0;
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
}

.slider::before {
    left: 0;
    top: 0;
}

.slider .slide-track {
    -webkit-animation: scroll 32s linear infinite;
    animation: scroll 32s linear infinite;
    display: flex;
    width: calc(320px * 12);
}

.slider .slide {
    height: auto;
    width: 320px;
}


/* Scrollbar */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--gray);
    opacity: 1;
    top: 0;
}

.scrollspy-example {
    position: relative;
    height: 200px;
    margin-top: .5rem;
    overflow: auto;
}



.glass-morphism {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(2.0px);
    -webkit-backdrop-filter: blur(4.0px);
    border-radius: 10px;
}

.glass-morphism-3 {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(2.0px);
    -webkit-backdrop-filter: blur(4.0px);
    border-radius: 10px;
}

/* Fade-in  */

.fade-in {
    animation: fadeIn ease-in-out 1s;
    -webkit-animation: fadeIn ease-in-out 1s;
    -moz-animation: fadeIn ease-in-out 1s;
    -o-animation: fadeIn ease-in-out 1s;
    -ms-animation: fadeIn ease-in-out 1s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.hideme {
    opacity: 0;
}

#logo-ontwerp {}