/* ---- General ---- */

.purple #masthead::after { background-image: url('/img/shapes/masthead-purple-bottom.png'); }
.cyan #masthead::after { background-image: url('/img/shapes/masthead-cyan-bottom.png'); }
.login #masthead::after { background-image: url('/img/shapes/masthead-red-bottom.png'); }
.green #masthead::after { background-image: url('/img/shapes/masthead-green-bottom.png'); }
.contact #masthead::after { background-image: url('/img/shapes/masthead-orange-bottom.png'); }
.berichten #masthead::after { background-image: url('/img/shapes/masthead-yellow-bottom.png'); }
.pink #masthead::after { background-image: url('/img/shapes/masthead-pink-bottom.png'); }

.purple .background-special::before { background-image: url('/img/shapes/background-special-purple-top.png'); }
.green .background-special::before { background-image: url('/img/shapes/background-special-green-top.png'); }

.purple .background-special::after { background-image: url('/img/shapes/background-special-purple-bottom.png'); }
.green .background-special::after { background-image: url('/img/shapes/background-special-green-bottom.png'); }

.purple #colophon::before { background-image: url('/img/shapes/colophon-purple-top.png'); }
.cyan #colophon::before { background-image: url('/img/shapes/colophon-cyan-top.png'); }
.login #colophon::before { background-image: url('/img/shapes/colophon-red-top.png'); }
.green #colophon::before { background-image: url('/img/shapes/colophon-green-top.png'); }
.contact #colophon::before { background-image: url('/img/shapes/colophon-orange-top.png'); }
.berichten #colophon::before { background-image: url('/img/shapes/colophon-yellow-top.png'); }
.pink #colophon::before { background-image: url('/img/shapes/colophon-pink-top.png'); }

.purple h1, .purple h3, .purple span, .purple strong, .purple b, .purple a:hover, .purple ul li::before  { color: var(--global-purple); }
.cyan h1, .cyan h3, .cyan span, .cyan strong, .cyan b, .cyan a:hover, .cyan ul li::before { color: var(--global-cyan); }
.login h1, .login h3, .login span, .login strong, .login b, .login a:hover, .login ul li::before { color: var(--global-red); }
.green h1, .green h3, .green span, .green strong, .green b, .green a:hover, .green ul li::before { color: var(--global-green); }
.contact h1, .contact h3, .contact span, .contact strong, .contact b, .contact a:hover, .contact ul li::before { color: var(--global-orange); }
.berichten h1, .berichten h3, .berichten span, .berichten strong, .berichten b, .berichten a:hover, .berichten ul li::before { color: var(--global-yellow); }
.pink h1, .pink h3, .pink span, .pink strong, .pink b, .pink a:hover, .pink ul li::before { color: var(--global-pink); }

/* ---- Masthead / navigatie menu ---- */

.purple #masthead .logo .color { fill: var(--global-purple); }
.cyan #masthead .logo .color { fill: var(--global-cyan); }
.login #masthead .logo .color  { fill: var(--global-red); }
.green #masthead .logo .color { fill: var(--global-green); }
.contact #masthead .logo .color { fill: var(--global-orange); }
.berichten #masthead .logo .color { fill: var(--global-yellow); }
.pink #masthead .logo .color { fill: var(--global-pink); }

.purple #masthead .logo .color-border { stroke: var(--global-purple); }
.cyan #masthead .logo .color-border { stroke: var(--global-cyan); }
.login #masthead .logo .color-border  { stroke: var(--global-red); }
.green #masthead .logo .color-border { stroke: var(--global-green); }
.contact #masthead .logo .color-border { stroke: var(--global-orange); }
.berichten #masthead .logo .color-border { stroke: var(--global-yellow); }
.pink #masthead .logo .color-border { stroke: var(--global-pink); }

.purple .navbar .active .nav-link { color: var(--global-purple); }
.cyan .navbar .active .nav-link { color: var(--global-cyan); }
.login .navbar .active .nav-link { color: var(--global-red); }
.green .navbar .active .nav-link { color: var(--global-green); }
.contact .navbar .active .nav-link { color: var(--global-orange); }
.berichten .navbar .active .nav-link { color: var(--global-yellow); }
.pink .navbar .active .nav-link { color: var(--global-pink); }

.purple .navbar .active .dropdown-menu .nav-link,
.cyan .navbar .active .dropdown-menu .nav-link,
.login .navbar .active .dropdown-menu .nav-link,
.green .navbar .active .dropdown-menu .nav-link,
.contact .navbar .active .dropdown-menu .nav-link,
.berichten .navbar .active .dropdown-menu .nav-link,
.pink .navbar .active .dropdown-menu .nav-link { color: var(--global-white); }

.purple .navbar .active .dropdown-menu .nav-link:hover { color: var(--global-purple); }
.cyan .navbar .active .dropdown-menu .nav-link:hover { color: var(--global-cyan); }
.login .navbar .active .dropdown-menu .nav-link:hover { color: var(--global-red); }
.green .navbar .active .dropdown-menu .nav-link:hover { color: var(--global-green); }
.contact .navbar .active .dropdown-menu .nav-link:hover { color: var(--global-orange); }
.berichten .navbar .active .dropdown-menu .nav-link:hover { color: var(--global-yellow); }
.pink .navbar .active .dropdown-menu .nav-link:hover { color: var(--global-pink); }

.purple .navbar-toggler:hover .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(142,89,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }
.cyan .navbar-toggler:hover .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(62,221,221, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }
.login .navbar-toggler:hover .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(214,24,24, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }
.green .navbar-toggler:hover .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(57,153,57, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }
.contact .navbar-toggler:hover .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(227,146,48, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }
.berichten .navbar-toggler:hover .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(227,227,14, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }
.pink .navbar-toggler:hover .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(180,0,118, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }

/* ---- Social media buttons / buttons / form submit ---- */

.purple .butn:hover, .purple .mediamenu a.smediabutn:hover { border-color: var(--global-purple); color: var(--global-purple); }
.cyan .butn:hover, .cyan .mediamenu a.smediabutn:hover { border-color: var(--global-cyan); color: var(--global-cyan); }
.login .butn:hover, .login .mediamenu a.smediabutn:hover, .login form div.submit input:hover { border-color: var(--global-red); color: var(--global-red); }
.green .butn:hover, .green .mediamenu a.smediabutn:hover { border-color: var(--global-green); color: var(--global-green); }
.contact .butn:hover, .contact .mediamenu a.smediabutn:hover, .contact form div.submit input:hover { border-color: var(--global-orange); color: var(--global-orange); }
.berichten .butn:hover, .berichten .mediamenu a.smediabutn:hover { border-color: var(--global-yellow); color: var(--global-yellow); }
.pink .butn:hover, .pink .mediamenu a.smediabutn:hover { border-color: var(--global-pink); color: var(--global-pink); }

.purple .butn:active, .purple .mediamenu a.smediabutn:active { background-color: var(--global-purple); border-color: var(--global-purple); color: #f4f4f4; }
.cyan .butn:active, .cyan .mediamenu a.smediabutn:active { background-color: var(--global-cyan); border-color: var(--global-cyan); color: #f4f4f4; }
.login .butn:active, .login .mediamenu a.smediabutn:active, .login form div.submit input:active { background-color: var(--global-red); border-color: var(--global-red); color: #f4f4f4; }
.green .butn:active, .green .mediamenu a.smediabutn:active { background-color: var(--global-green); border-color: var(--global-green); color: #f4f4f4; }
.contact .butn:active, .contact .mediamenu a.smediabutn:active, .contact form div.submit input:active { background-color: var(--global-orange); border-color: var(--global-orange); color: #f4f4f4; }
.berichten .butn:active, .berichten .mediamenu a.smediabutn:active, .berichten-filter button.butn.is-checked { background-color: var(--global-yellow); border-color: var(--global-yellow); color: #090a0f; }
.pink .butn:active, .pink .mediamenu a.smediabutn:active { background-color: var(--global-pink); border-color: var(--global-pink); color: #090a0f; }

.purple .mediamenu::before { background-color: var(--global-purple); }
.cyan .mediamenu::before { background-color: var(--global-cyan); }
.login .mediamenu::before { background-color: var(--global-red); }
.green .mediamenu::before { background-color: var(--global-green); }
.contact .mediamenu::before { background-color: var(--global-orange); }
.berichten .mediamenu::before { background-color: var(--global-yellow); }
.pink .mediamenu::before { background-color: var(--global-pink); }

/* ---- others ---- */

.purple .hover-card-container .hover-card:hover .face.face1{ background: var(--global-purple); }

.cyan .knoppen .butn.active, .cyan .knoppen .butn.active:hover { border-color: var(--global-cyan); color: var(--global-cyan); }

.purple .p-img { border-color: var(--global-purple); }
.cyan .p-img { border-color: var(--global-cyan); }
.login .p-img { border-color: var(--global-red); }
.green .p-img { border-color: var(--global-green); }
.contact .p-img { border-color: var(--global-orange); }
.berichten .p-img { border-color: var(--global-yellow); }
.pink .p-img { border-color: var(--global-pink); }

.purple .lable { background-color: var(--global-purple); }
.cyan .lable { background-color: var(--global-cyan); }
.login .lable { background-color: var(--global-red); }
.green .lable { background-color: var(--global-green); }
.contact .lable { background-color: var(--global-orange); }
.berichten .lable { background-color: var(--global-yellow); color: var(--global-black); }
.pink .lable { background-color: var(--global-pink); }

.cyan .projectscreen { border-color: var(--global-cyan); }
.green .projectscreen { border-color: var(--global-green); }

.cyan .projecten-categorie .pro-cat-item { border-color: var(--global-cyan); }
.cyan .projecten-categorie .pro-cat-item.left { border-color: var(--global-cyan); }
.cyan .projecten-categorie .pro-cat-item.right { border-color: var(--global-cyan); }

.purple .berichten .bericht-item { border-color: var(--global-purple); }
.berichten .berichten .bericht-item { border-color: var(--global-yellow); }

.purple .scheidingslijn svg path { stroke: var(--global-purple); }
.cyan .scheidingslijn svg path { stroke: var(--global-cyan); }
.green .scheidingslijn svg path  { stroke: var(--global-green); }
.contact .scheidingslijn svg path  { stroke: var(--global-orange); }
.berichten .scheidingslijn svg path { stroke: var(--global-yellow); }
.pink .scheidingslijn svg path { stroke: var(--global-pink); }

.login form input:focus, .login form textarea:focus { border-color: var(--global-red); }
.contact form input:focus, .contact form textarea:focus { border-color: var(--global-orange); }

.contact form div.succes span, .contact form div.fail span { border: 1px solid var(--global-orange); color: var(--global-orange); }
.login form div.succes span, .login form div.fail span { border: 1px solid var(--global-red); color: var(--global-red); }

.contact .textarea:focus-within .ql-toolbar.ql-snow, .contact .textarea:focus-within .ql-container.ql-snow { border-color: var(--global-orange); }
.contact form span.error { color: var(--global-orange); }
.login form span.error { color: var(--global-red); }

.berichten .berichten-filter .searchfilters #quicksearch { border-color: var(--global-yellow); }

.green .skill-bar .fill { background-color: var(--global-green); }

/* ---- Colophon ---- */

.purple .parallax > use:nth-child(1) { fill: rgba(var(--global-purple-rgb), 0.7); }
.purple .parallax > use:nth-child(2) { fill: rgba(var(--global-purple-rgb), 0.5); }
.purple .parallax > use:nth-child(3) { fill: rgba(var(--global-purple-rgb), 0.3); }

.cyan .parallax > use:nth-child(1) { fill: rgba(var(--global-cyan-rgb), 0.7); }
.cyan .parallax > use:nth-child(2) { fill: rgba(var(--global-cyan-rgb), 0.5); }
.cyan .parallax > use:nth-child(3) { fill: rgba(var(--global-cyan-rgb), 0.3); }

.login .parallax > use:nth-child(1) { fill: rgba(var(--global-red-rgb), 0.7); }
.login .parallax > use:nth-child(2) { fill: rgba(var(--global-red-rgb), 0.5); }
.login .parallax > use:nth-child(3) { fill: rgba(var(--global-red-rgb), 0.3); }

.green .parallax > use:nth-child(1) { fill: rgba(var(--global-green-rgb), 0.7); }
.green .parallax > use:nth-child(2) { fill: rgba(var(--global-green-rgb), 0.5); }
.green .parallax > use:nth-child(3) { fill: rgba(var(--global-green-rgb), 0.3); }

.contact .parallax > use:nth-child(1) { fill: rgba(var(--global-orange-rgb), 0.7); }
.contact .parallax > use:nth-child(2) { fill: rgba(var(--global-orange-rgb), 0.5); }
.contact .parallax > use:nth-child(3) { fill: rgba(var(--global-orange-rgb), 0.3); }

.berichten .parallax > use:nth-child(1) { fill: rgba(var(--global-yellow-rgb), 0.7); }
.berichten .parallax > use:nth-child(2) { fill: rgba(var(--global-yellow-rgb), 0.5); }
.berichten .parallax > use:nth-child(3) { fill: rgba(var(--global-yellow-rgb), 0.3); }

.pink .parallax > use:nth-child(1) { fill: rgba(var(--global-pink-rgb), 0.7); }
.pink .parallax > use:nth-child(2) { fill: rgba(var(--global-pink-rgb), 0.5); }
.pink .parallax > use:nth-child(3) { fill: rgba(var(--global-pink-rgb), 0.3); }

.purple #colophon .site-info a { color: var(--global-purple); }
.cyan #colophon .site-info a { color: var(--global-cyan); }
.login #colophon .site-info a { color: var(--global-red); }
.green #colophon .site-info a { color: var(--global-green); }
.contact #colophon .site-info a { color: var(--global-orange); }
.berichten #colophon .site-info a { color: var(--global-yellow); }
.pink #colophon .site-info a { color: var(--global-pink); }

.purple .footerpainter  { background-color: var(--global-purple); }
.cyan .footerpainter  { background-color: var(--global-cyan); }
.login .footerpainter { background-color: var(--global-red); }
.green .footerpainter  { background-color: var(--global-green); }
.contact .footerpainter  { background-color: var(--global-orange); }
.berichten .footerpainter { background-color: var(--global-yellow); }
.pink .footerpainter { background-color: var(--global-pink); }

/* ---- Back to top ---- */

.purple #backtotop:hover  { border-color: var(--global-purple); color: var(--global-purple); }
.cyan #backtotop:hover  { border-color: var(--global-cyan); color: var(--global-cyan); }
.login #backtotop:hover { border-color: var(--global-red); color: var(--global-red); }
.green #backtotop:hover  { border-color: var(--global-green); color: var(--global-green); }
.contact #backtotop:hover  { border-color: var(--global-orange); color: var(--global-orange); }
.berichten #backtotop:hover { border-color: var(--global-yellow); color: var(--global-yellow); }
.pink #backtotop:hover { border-color: var(--global-pink); color: var(--global-pink); }

.purple #backtotop:hover svg path  { stroke: var(--global-purple); }
.cyan #backtotop:hover svg path  { stroke: var(--global-cyan); }
.login #backtotop:hover svg path { stroke: var(--global-red); }
.green #backtotop:hover svg path  { stroke: var(--global-green); }
.contact #backtotop:hover svg path  { stroke: var(--global-orange); }
.berichten #backtotop:hover svg path { stroke: var(--global-yellow); }
.pink #backtotop:hover svg path { stroke: var(--global-pink); }

.purple #backtotop:active  { background-color: var(--global-purple); border-color: var(--global-purple); color: var(--global-white); }
.cyan #backtotop:active  { background-color: var(--global-cyan); border-color: var(--global-cyan); color: var(--global-white); }
.login #backtotop:active { background-color: var(--global-red); border-color: var(--global-red); color: var(--global-white); }
.green #backtotop:active  { background-color: var(--global-green); border-color: var(--global-green); color: var(--global-white); }
.contact #backtotop:active  { background-color: var(--global-orange); border-color: var(--global-orange); color: var(--global-white); }
.berichten #backtotop:active { background-color: var(--global-yellow); border-color: var(--global-yellow); color: var(--global-white); }
.pink #backtotop:active { background-color: var(--global-pink); border-color: var(--global-pink); color: var(--global-white); }

.purple #backtotop:active svg path  { stroke: var(--global-white); }
.cyan #backtotop:active svg path  { stroke: var(--global-white); }
.login #backtotop:active svg path { stroke: var(--global-white); }
.green #backtotop:active svg path  { stroke: var(--global-white); }
.contact #backtotop:active svg path  { stroke: var(--global-white); }
.berichten #backtotop:active svg path { stroke: var(--global-white); }
.pink #backtotop:active svg path { stroke: var(--global-white); }

.purple .painter { background-color: var(--global-purple); }
.cyan .painter { background-color: var(--global-cyan); }
.login .painter { background-color: var(--global-red); }
.green .painter { background-color: var(--global-green); }
.contact .painter { background-color: var(--global-orange); }
.berichten .painter { background-color: var(--global-yellow); }
.pink .painter { background-color: var(--global-pink); }