@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
/* reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body {line-height: 1; } ol, ul {list-style: none; } blockquote, q {quotes: none; } blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none; } /* remember to define focus styles! */ :focus {outline: 0; } /* remember to highlight inserts somehow! */ ins {text-decoration: none; } del {text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse: collapse; border-spacing: 0; }

/*
   BACKSTAGE | BOAT SHOP MEDEMBLIK
   2022 - Cybox Backstage CMS

*/

/* BASICS */
html {
    scroll-behavior: smooth;
}
html, body {
    height: auto;
}
body {
    /* design color vars*/
    --background: #fff; /* main background and light color for buttons etc */
    --accents: #182d36; /* secondary backgrounds */
    --accents2: #182d36; /* secondary backgrounds */
    --light: #f7efe4;
    --main: #122a33; /* general text color, previously all that was #000; */
    --titles: #182d36; /* colors for general h1, h2, h3 */
    --primarycta: #ccbca0; /* buttons and menu active class */
    --secondarycta: #ffdba1; /* buttons hover and menu hovers */
    --success: #009688; /* buttons hover and menu hovers */
    --error: #ff006c; /* buttons hover and menu hovers */


    /* general */
    background: var(--background);
    color: var(--main);
    font-family: 'Chivo', sans-serif;
    font-size: 1.2em;
    font-weight: 400;
    line-height: 1.6;
    overflow-x: hidden;
    overflow-y: scroll;
    padding-top: 200px; /* #header-height */
}
a {
    text-decoration: none;
    /*color: var(--primarycta);*/
    color: #ab9a7e;
}
a:hover {
    color: var(--secondarycta);
}
body:after {
    content: "";
    width: 100%;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
    background: var(--accents);
}

/* OVERALL TYPE & BUTTONS */
h1 {
    margin-bottom: 25px;
    margin-top: -5px;
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    line-height: 1.2;
    font-weight: 900;
    color: #182d36;
}
body.__accessoires-en-onderhoud h1,
body.__lifestyle h1,
body.__watersport h1 {
    font-size: 48px;
}
h2 {
    margin-bottom: 20px;
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    color: #182d36;
    font-weight: 900;
    line-height: 1.2;
}
.page_content h2 {
    margin-bottom: 20px;
}
.page_content p + h2,
.page_content ul + h2,
.page_content ol + h2 {
    margin-top: 30px;
}
h3 {
    margin-bottom: 10px;
    font-size: 21px;
    line-height: 1.2;
    font-weight: 700;
    color: #182d36;
}
.btn {
	padding: 16px 30px 18px 30px;
    margin: 0px 0;
    border-radius: 35px;
	border: 0;
	display: inline-flex;
    justify-content: center;
	background: var(--primarycta);
	color: var(--main);
	line-height: 1;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	text-align: center;
    font-family: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    width: auto;
    font-weight: 400;
    font-size: 1em;
}
p .btn {
    margin: 10px 0 15px -5px;
}
p:last-of-type .btn {
    margin-top: 30px;
}
.page_content p .btn { padding: 17px 30px 18px 30px; }
body.__dock-marine .page_content p .btn { display: inline-block; margin-left: 0; margin-bottom: -9px; }
body.__dock-marine .page_content p .btn em { font-style: normal; }
body.__dock-marine .page_content p .btn strong { font-weight: 400; }
#homeslider + .row.first .page_content p .btn { padding: 16px 30px 18px 30px; }

.shop_products_container .product:hover .btn,
.btn:hover {
	background: var(--secondarycta);
	color: var(--main);
}
.btn.grey {
	opacity: 0.5;
	background: var(--accents);
	color: #fff;
}

/* HEADER (MENU) */
#header {
    width: 100%;
    height: 200px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 7;
    background: var(--accents);
    transition: height 600ms;
}
body.scroll #header {
    height: 100px;
}

#header #search-button-mobile.nav-button { display: none; }

#header #header-container {
    max-width: 1400px;
    width: 90%;
    margin: 0 auto;
    height: 100%;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
/* MENU - logo */
#header #logo {
    width: 221px;
    height: 150px;
    overflow: hidden;
    transition: all 300ms;
    margin-bottom: 25px;
}
#header #logo a {
    display: block;
}
#header #logo img {
    display: block;
    width: 100%;
    pointer-events: none;
    transition: all 300ms;
}
#menu-holder {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
body.scroll #header #logo {
    height: 80px;
    margin-bottom: 10px;
}
body.scroll #header  #logo img {
    margin-top: -83px;
}
/* MENU - main nav */
ul#menu {
    display: flex;
    align-items: center;
    column-gap: 20px;
    position: relative;
    right: -5px;
    line-height: 1;
    order: 2;
    margin-bottom: 30px;
}
body.scroll ul#menu {
    margin-bottom: 30px;
}
ul#menu + span {
    position: relative;
    display: flex;
    column-gap: 30px;
    top: -30px;
}
ul#menu li {
    position: relative;
    white-space: nowrap;
}
ul#menu li.webshop {
    display: none;
}
ul#menu li:first-of-type {
    margin-left: 0;
}
ul#menu li a.master {
    position: relative;
    display: block;
    margin-bottom: 0;
    padding: 10px 2px;
    font-size: 22px;
    color: var(--light);
    font-weight: 700;
    z-index: 2;
}
/* cart button */
ul#menu li#cart-button {
    display: none;
    margin-left: 10px;
}
ul li#cart-button a {
    display: flex;
    align-items: center;
    background: var(--primarycta);
    border-radius: 6px;
    font-weight: bold;
    font-size: 1.2em;
    color: var(--accents);
    padding:  10px;
}
ul li#cart-button a:hover {
    background-color: #ffdba1;
}
ul li#cart-button a svg {
    display: block;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    fill: var(--accents);
}
ul#menu-second li#cart-button a span.cart-num {
    font-size: 23px;
    color: #182d36;
}
ul#menu li.active a.master {
    color: var(--primarycta);
}
ul#menu li a.master:hover {
    color: var(--secondarycta);
}
ul#menu li.hassub ul.sub {
    line-height: 1.8;
    position: absolute;
    bottom: 0px;
    left: -30px;
    visibility: hidden;
    transform: translateY(100%);
    padding: 25px 30px;
    padding-top: 25px;
    background: var(--accents);
    min-width: 200px;
    white-space: nowrap;
    z-index: 1;
}
ul#menu li.hassub:hover ul.sub {
    visibility: visible;
}
ul#menu li.hassub ul.sub li {
    margin-left: 0;
}
ul#menu li.hassub ul.sub li a {
    color: var(--main);
}
ul#menu li.hassub ul.sub li.active a {
    color: var(--primarycta);
}
ul#menu li.hassub ul.sub li a:hover {
    color: var(--secondarycta);
}
ul#menu li.hassub ul.sub li ul.subsub {
    margin-left: 1em;
}
ul#menu li.hassub ul.sub li.active ul.subsub li a {
    color: var(--main);
}
ul#menu li.hassub ul.sub li.active ul.subsub li.subsubactive a {
    color: var(--primarycta);
}
ul#menu li.hassub ul.sub li.active ul.subsub li a:hover {
    color: var(--secondarycta);
}

/* SECONDAY NAV - optionally, see header html, no sub foldout support */
ul#menu-second {
    order: 0;
    display: flex;
    align-items: center;
    column-gap: 0;
    font-size: .9em;
    position: relative;
    right: 0;
    padding: 20px;
    background: rgba(0,0,0,.1);
    transition: 300ms;
    border-radius: 4px;
}
ul#menu-second.webshop {
    padding: 0;
    background-color: transparent;
}
ul#menu-second.webshop li.webshop {
    margin-right: 15px;
}
ul#menu-second.webshop li.webshop a {
    position: relative;
    top: -1px;
    padding: 7px 16px 10px 16px;
    font-size: 25px;
    color: #182d36;
    font-weight: 600;
    border-radius: 6px;
    background-color: var(--primarycta);
}
ul#menu-second.webshop li.webshop a:hover {
    background-color: #ffdba1;
}

ul#menu-second li a { 
    color: var(--light);
    padding:  5px 10px;
}
ul#menu-second li.active a,
ul#menu-second li a:hover {
    color: var(--primarycta);
}
ul#menu-second li.hassub ul.sub {
    display: none;
}
body.scroll ul#menu-second {
    transform: translateY(-130%);
} 
.extra-logo {
    display: none;
}

ul.search {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
ul.search #search-button-desktop.nav-button,
ul.search #search-button-mobile.nav-button {
    position: relative; display: block!important; top: auto; width: 24px; height: 24px; transform: none;
}
ul.search #search-button-desktop.nav-button:hover,
ul.search #search-button-mobile.nav-button:hover {
    opacity: 0.75;
}

/* MENU - nav buttons divs */
.nav-button {
    width: 30px;
    height: 30px;
    border-radius: 40px;
    position: absolute;
    right: 0;
    top: 50%;
    cursor: pointer;
    transform: translateY(-50%);
}
.nav-button a {
    display: block;
    width: 100%;
    height: 100%;
}
.nav-button svg {
    fill: var(--light);
    width: 100%; 
    height: 100%;
}
.nav-button#menu-button {
    right: 20px;
    display: none;
    z-index: 3;  
}

/* MENU - language - put it where you like */
#langmenu {
    position: absolute;
    left: 30px;
    top: 50%;
    display: flex;
    transform: translateY(-50%);
}
#langmenu a {
    display: block;
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 30px;
    opacity: 0.5;
    margin-right: 20px;
}
#langmenu a.active,
#langmenu a:hover {
    opacity: 1;
}
#langmenu a img {
    display: block;
    width: 100%;
}


/* PAGE-HEADER */
#page-header {
    position: relative;
    background: #ccc;
    height: 50vh;
}
#page-header img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#page-header .arrow-down {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 50%;
    bottom: 50px;
    cursor: pointer;
    transform: translateX(-50%);
}
#page-header .arrow-down svg {
    width: 30px;
    height: 30px;
    fill: var(--background);
}

/* BREADCRUMBS */
.content .page_content .breadcrumbs { position: relative; display: flex; justify-content: flex-start; margin-top: -30px; margin-bottom: 30px; height: 30px; font-size: 16px; }

body.__motoren .content .page_content .breadcrumbs,
body.__accessoires-en-onderhoud .content .page_content .breadcrumbs,
body.__lifestyle .content .page_content .breadcrumbs,
body.__dock-marine .content .page_content .breadcrumbs,
body.__watersport .content .page_content .breadcrumbs { justify-content: center; }

.content .page_content .breadcrumbs ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
.content .page_content .breadcrumbs ul li { display: flex; align-items: center; margin: 0; padding: 0; color: #182d36; list-style: none; white-space: nowrap; }
.content .page_content .breadcrumbs ul li:last-of-type { opacity: 0.5; }
.content .page_content .breadcrumbs ul li:not(:last-child):after { display: inline-block; margin: 0 12px; width: 1px; height: 16px; content: ""; opacity: .25; transform: rotate(15deg); background-color: #182d36; }
.content .page_content .breadcrumbs ul li a { color: #ab9a7e; text-decoration: underline; }
.content .page_content .breadcrumbs ul li a:hover { text-decoration: none; }
.content .page_content .breadcrumbs ul li:last-of-type a { color: #182d36; text-decoration: none; pointer-events: none; }


/* VIDEO HEADER HIGHFIELD BOATS */
#header-video { position: relative; width: 100%; height: calc(100vh - 300px); line-height: 1; text-align: center; box-sizing: border-box; overflow: hidden; background: var(--accents); }
#header-video:after { position: absolute; left: 0; bottom: 0; width: 100%; height: 100px; content: ""; background: var(--background); }
#header-video #video { position: relative; display: flex; justify-content: center; align-items: center; margin: 0 auto; width: calc(100% - 340px); height: 100%; overflow: hidden; z-index: 1; background-color: #ccc; }
#header-video #video #vimeo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/*#header-video #video #vimeo video { width: 100%; height: 100%; object-fit: cover; }*/
#header-video #video .watch_btn { position: absolute; top: 30px; right: 30px; width: 45px; height: 45px; font-size: 0; border-radius: 50%; transition: all ease 0.15s; z-index: 1; background-color: #182d36; }
#header-video #video .watch_btn.youtube:hover { background-color: #ff0000; }
#header-video #video .watch_btn.vimeo:hover { background-color: #00b2ef; }
#header-video #video .watch_btn:before { position: absolute; display: block; top: calc(50% + -1px); right: calc(100% + 2px); width: 180px; font-size: 18px; color: #fff; font-weight: 700; line-height: 1; pointer-events: none; /*white-space: nowrap;*/ text-align: right; opacity: 0; visibility: hidden; transform: translateY(-50%); transition: all ease 0.15s; }
#header-video #video .watch_btn.youtube:before { content: "Bekijk de hele video op YouTube"; }
#header-video #video .watch_btn.vimeo:before { content: "Bekijk de hele video op Vimeo"; }
#header-video #video .watch_btn:hover:before { right: calc(100% + 12px); opacity: 1; visibility: visible; }
#header-video #video .watch_btn a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
#header-video #video .watch_btn a svg { position: relative; top: 0; width: 40%; height: 40%; fill: #fff; }
#header-video #video .watch_btn.vimeo a svg { right: 1px; }
#header-video #video video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); }
body.__electric #header-video #video video { transform: scale(1); }
body.__roll_up #header-video #video video { transform: scale(1.15); }

#header-video #video .center { position: absolute; top: 50%; left: 0%; padding: 0 1em; width: 100%; text-align: center; border: 1px solid transparent; box-sizing: border-box; filter: drop-shadow(0px 0px 30px #000); transform: translateY(-50%); z-index: 2; }
#header-video #video .center .title { margin: 0 0 30px 0; font-family: 'Playfair Display', serif; /*font-size: 96px;*/ font-size: 5vw; color: #fff; font-weight: 900; line-height: .9; text-align: center; text-transform: uppercase; pointer-events: none; opacity: 1; transition: all ease 0.15s; }
#header-video #video:hover .center .title { opacity: 0.1; }
body.__electric #header-video #video .center { padding: 0 10em; }

#header-video #video .down { position: absolute; bottom: 60px; width: 45px; height: 45px; z-index: 1; }
#header-video #video .down svg { fill: #fff; }

@media screen and (max-width: 1000px) {
    #header-video,
    #header-video #video { height: 400px!important; }
    #header-video:after { display: none; }
}

.row.prijzen { padding-bottom: 0; }
.row.prijzen a.button { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; padding: 40px 45px; width: 100%; font-size: 32px; color: #33434d; font-weight: 900; text-transform: uppercase; border-radius: 12px; box-sizing: border-box; opacity: 1; transition: all ease 0.15s; background-color: #f7efe4; }
.row.prijzen a.button:hover { opacity: 0.8; }
.row.prijzen a.button svg { width: 32px; height: 32px; fill: #182d36; }


/* HEADER COLUMNS */
#header-columns { position: relative; width: 100%; height: calc(100vh - 300px); line-height: 1; text-align: center; box-sizing: border-box; overflow: hidden; background: var(--accents); }
#header-columns:after { position: absolute; left: 0; bottom: 0; width: 100%; height: 100px; content: ""; background: var(--background); }
#header-columns #columns { position: relative; display: flex; margin: 0 auto; width: calc(100% - 340px); height: 100%; overflow: hidden; z-index: 1; background-color: #9f9886; }
#header-columns #columns .column { display: flex; flex-direction: column; /*justify-content: center;*/ width: calc(100% / 3); }
#header-columns #columns .column.intro { padding: 60px; font-size: 17px; line-height: 1.5; text-align: left; box-sizing: border-box; overflow-y: auto; background-color: #ccbca0; }
#header-columns #columns .column.intro a.back { margin-top: 20px; color: #122a33; text-decoration: underline; }
#header-columns #columns .column.intro a.back:hover { text-decoration: none; }

#header-columns #columns .column.intro::-webkit-scrollbar { width: 18px; }
#header-columns #columns .column.intro::-webkit-scrollbar-track { background-color: transparent; }
#header-columns #columns .column.intro::-webkit-scrollbar-thumb { border-radius: 20px; border: 6px solid transparent; cursor: grab; background-color: #fff; background-clip: content-box; }

#header-columns #columns .column.intro p { margin-bottom: 20px; }
#header-columns #columns .column.intro p:last-of-type { margin-bottom: 0; }
#header-columns .down { position: absolute; bottom: 60px; left: 0; right: 0; margin: 0 auto; width: 45px; height: 45px; z-index: 1; }
#header-columns .down svg { fill: #fff; }

#header-columns #columns .column-wrapper { display: flex; flex-wrap: wrap; width: calc((100% / 3) * 2); }
#header-columns #columns .column-wrapper .column { width: 100%; height: 100%; overflow: hidden; }
#header-columns #columns .column-wrapper .column a { height: 100%; pointer-events: none; }
#header-columns #columns .column-wrapper .column img { display: block; width: 100%; height: 100%; object-fit: cover; }

#header-columns #columns .model-slides { width: calc((100% / 3) * 2); }
#header-columns #columns .model-slides .column { width: 100%; height: 100%; overflow: hidden; }
#header-columns #columns .model-slides .column a { height: 100%; }
#header-columns #columns .model-slides .column img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); }

.owl-stage-outer,
.owl-stage,
.owl-item { height: 100%; }


/* CONTENT */
.row {
    padding: 100px 0;
}

/* CONTENT - HIGHFIELD BOATS */
.row.intro { padding: 0; }
.row.intro .content { max-width: 1200px; }
.row.intro .content .page_content { display: flex; justify-content: space-between; }
.row.intro .text,
.row.intro .image { width: 45%; }
.row.intro .text { display: flex; flex-direction: column; justify-content: center; }
.row.intro .text h2 { font-size: 36px; }
.row.intro .image { display: flex; justify-content: center; margin-top: 120px; }
.row.intro .image img { width: 85%; }

.row.submenu { margin: 0 auto; margin-bottom: 100px; padding: 0; width: calc(100% - 340px); background-color: #f7efe4; }
.row.submenu .content { width: 100%; max-width: none; column-gap: normal; }
.row.submenu .sub-items { display: flex; }
.row.submenu .sub-items .sub-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 0 75px 0; width: 50%; }
.row.submenu .sub-items .sub-item:after { position: absolute; top: 15%; right: -2px; width: 4px; height: 70%; content: ""; background-color: #fff; }
.row.submenu .sub-items .sub-item:first-of-type { z-index: 1; }
.row.submenu .sub-items .sub-item:last-of-type { content: none; }
/*.row.submenu .sub-items .sub-item:nth-of-type(even) { background-color: rgb(0 0 0 / 2%); }*/
.row.submenu .sub-items .sub-item:hover { background-color: rgb(204 188 160 / 15%); }
.row.submenu .sub-items .sub-item a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.row.submenu .sub-items .sub-item .title { position: relative; margin-bottom: 30px; font-size: 36px; color: #33434d; font-weight: 400; text-transform: uppercase; }
.row.submenu .sub-items .sub-item .title span { position: absolute; top: 5px; margin-left: 10px; padding: 6px 8px 5px 8px; font-size: 11px; color: #fff; font-weight: 700; line-height: 1; text-transform: uppercase; border-radius: 3px; background-color: #182d36; }
.row.submenu .sub-items .sub-item .image { }

.row.image { padding: 0; }
.row.image .content { width: calc(100% - 340px); max-width: none; }
.row.image .content .page_content { }
.row.image .image { position: relative; height: calc(100vh - 300px); background-color: #000; }
.row.image .image .down { position: absolute; bottom: 90px; left: 0; right: 0; margin: 0 auto; width: 45px; height: 45px; z-index: 2; }
.row.image .image .down svg { fill: #fff; }

.row.image .image .image-content { position: absolute; display: flex; align-items: center; justify-content: center; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
.row.image .image .image-content .center { display: flex; flex-direction: column; align-items: center; color: #fff; text-align: center; }
.row.image .image .image-content .center span { position: relative; display: block; }
.row.image .image .image-content .center span:first-of-type { display: flex; align-items: center; justify-content: center; font-weight: 700; }
.row.image .image .image-content .center span:first-of-type:before,
.row.image .image .image-content .center span:first-of-type:after { position: absolute; width: 30px; height: 3px; content: ""; background-color: #fff; }
.row.image .image .image-content .center span:first-of-type:before { left: -50px; }
.row.image .image .image-content .center span:first-of-type:after { right: -50px; }
.row.image .image .image-content .center h2 { margin: 0px 0 20px 0; font-size: 5vw; color: #fff; text-transform: uppercase; }

.row.image .image .image-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.row.image .image .image-image:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; z-index: 1; background-color: rgba(0,0,0,0.25); }
.row.image .image .image-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

.anchor { position: relative; top: -200px; }

.row.more h2:first-of-type,
.row.text h2:first-of-type { font-size: 48px; }

.row.specs { margin-top: -15px; padding-top: 0; }
.row.specs + .row.specs { margin-top: -40px; }
.row.specs .content .page_content h2 { margin-bottom: 45px; font-size: 48px; }
.row.specs .content .page_content table { margin: 0; padding: 0; font-size: 18px; border: none; border-top: 1px solid #ccc; }
.row.specs .content .page_content table tr { border-bottom: 1px solid #ccc; }
.row.specs .content .page_content table tr td { padding: 8px 0; width: 11%; border: none; }
.row.specs .content .page_content table tr td:first-of-type { width: 45%; }

body.userforms .content .page_content table { margin-bottom: 25px; width: 50%; border: none; }
body.userforms .content .page_content table tr td { padding: 1px 0; border: none; }


/* CONTENT - ONDERHOUD */
.content .page_content.form { display: flex; }
.content .page_content.form .left { flex: 1; padding-right: 90px; width: 100%; text-align: left; }
.content .page_content.form .right { width: 50%; }
.content .page_content.form .right .form { padding: 60px; width: 100%; font-size: 17px; line-height: 1.5; text-align: left; box-sizing: border-box; background-color: rgb(204 188 160 / 25%); }
.content .page_content.form .right .form h2 { margin-top: -5px; margin-bottom: 25px; font-family: 'Playfair Display',serif; font-size: 36px; color: #182d36; font-weight: 900; line-height: 1.2; }
.content .page_content.form .right .form form .field label em { display: block; margin-top: 5px; margin-bottom: 15px; font-size: .9em; color: rgb(24 45 54 / 50%); line-height: 1.3; }


/* CONTENT - MOTOREN + DOCK MARINE */
body.__motoren .row.first,
body.__dock-marine .row.first {
    padding: 120px 0 120px 0;
}

.row.media { }
.row.first + .row.media { padding-top: 0; }
.row.media + .row { padding-top: 0; }
.row.media .content { width: 100%; max-width: none; }
.row.media .content .page_content { }
.row.media .content .page_content .media { display: flex; flex-wrap: wrap; width: 100%; background-color: #f7efe4; }
.row.media .content .page_content .media a { width: calc(100% / 4); }
.row.media .content .page_content .media a img { }

.row.maps {
    padding-bottom: 0;
}

.content {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1400px;
    width: 90%;
    margin: 0px auto;
    column-gap:  60px;
}
body.__electric .row.first .content,
body.__roll_up .row.first .content,
body.__motoren .row.first .content, /* TEMO */
body.__accessoires-en-onderhoud .row.first .content, /* Accessoires & Onderhoud */
body.__lifestyle .row.first .content, /* Lifestyle */
body.__watersport .row.first .content, /* Watersport */
body.__dock-marine .row.first .content {
    max-width: 1200px;
    text-align: center;
}
body.__electric .row.more .content .page_content,
body.__roll_up .row.more .content .page_content,
body.__motoren .row.more .content .page_content { /* TEMO */
    padding: 120px 200px;
    background-color: #f7efe4;
}

/* CONTENT > page_content */
.content .page_content {
    width: 100%;
    box-sizing: border-box;
    order: 1;
    /*min-height: 400px;*/
}
body.homepage .row.first .content .page_content {
    column-count: 2;
    column-gap: 90px;
}
.content .page_content.hasmedia {
    width: 60%;
}
.content .page_content p {
    margin-bottom: 20px;
}
.content .page_content p:last-of-type {
    margin-bottom: 0;
}
.content .page_content p:last-of-type + ul,
.content .page_content p:last-of-type + ol {
    margin-top: 10px;
}
.content .page_content img {
	display: block;
	width: 100%;
    height: auto;
}
.content .page_content p:last-of-type > img {
	margin-bottom: 0;
}
.content .page_content ul,
.content .page_content ol {
    margin-bottom: 20px;
}
.content .page_content p + ul,
.content .page_content p + ol {
    margin-top: -10px;
}
.content .page_content ul li {
    list-style-type: disc;
    margin-left: 20px;
}
.content .page_content ol li {
    list-style-type: decimal;
    margin-left: 20px;
}
.content .page_content ol li ul li {
    list-style-type: disc;
}
.content .page_content blockquote {
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 40px 40px;
    line-height: 1.5;
    border-radius: 10px;
    background-color: #f7efe4;
}
.content .page_content table {
    margin-bottom: 20px;
    width: 100%;
    border: 1px solid #ccc;
}
.content .page_content table tr td,
.content .page_content table tr th {
    border: 1px solid #ccc;
    padding: 10px;
}
.content .media {
    order: 1;
    width: 40%;
    box-sizing: border-box;
}
.content .media a {
    position: relative;
    display: block;
    overflow: hidden;
    margin-bottom: 0;
}
.content .media a:last-of-type { 
    margin-bottom: 0;
}
.content .media a img {
    width: 100%;
    display: block;
}
.content .media a.video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.content .media a .icon, .fotoalbum a .icon, .news-overview .item a .image .icon, .productmedia a .icon, .product a .icon {
    position: absolute;
    left: 50%;
    top: 50%; 
    transform: translate(-50%,-50%);
    width: 30px;
    height: 30px;
    display: none;
}
.content .media a .icon svg, .fotoalbum a .icon svg, .news-overview .item a .image .icon svg, .productmedia a .icon svg, .product a .icon svg {
    fill: var(--background);
    display: block;
    width: 30px; 
    height: 30px; 
}
.fotoalbum a:hover .icon, .content .media a:hover .icon, .news-overview .item a:hover .image .icon, .productmedia a:hover .icon, .product a:hover .icon {
    display: block;
}
.content .media a.video .icon, .productmedia a.video .icon {
    display: block;
}
.content .media .caption, .content .page_content .fotoalbum a .caption {
    display: block;
    padding: 30px 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    box-sizing: border-box;
    color: var(--background);
    opacity: 1;
    transition: opacity 300ms;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%; 
    line-height: 1;   
}

body.over .content { column-gap: 0; }
body.over .content .page_content { width: 55%; line-height: 1.7; }
body.over .content .page_content h2 { margin-bottom: 30px; font-family: 'Playfair Display',serif; font-size: 24px; font-weight: 400; line-height: 1.5; }
body.over .content .media { width: 40%; }
body.over .content .media a { margin-bottom: 30px; }



/* HIGHFIELD BOATS (MODELLEN) */

body.__modellen .row.first .content { }
body.__modellen .row.first .content .page_content { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
body.__modellen .row.first .content .page_content .left { width: 47.5%; }
body.__modellen .row.first .content .page_content .model-overview { position: absolute; display: flex; flex-wrap: wrap; flex-direction: column; top: 0; right: 0; width: 47.5%; height: 100%; }
body.__modellen .row.first .content .page_content .overview-wrapper { position: sticky; /*top: 200px;*/ top: 150px; }

.model-overview .model { position: relative; display: flex; flex-wrap: wrap; margin-bottom: 15px; padding: 0; width: 100%; border: 4px solid #f7efe4; border-radius: 6px; overflow: hidden; box-sizing: border-box; }
.model-overview .model.electric { border: 4px solid rgb(247 239 228 / 85%); border-radius: 8px; background-color: #031016; }
.model-overview .model:last-of-type { margin-bottom: 0; }
.model-overview .model * { opacity: 1; transition: all ease 0.15s; }
.model-overview .model:hover * { opacity: 0.9; }
.model-overview .model a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.model-overview .model .image { display: flex; align-items: center; justify-content: center; width: 150px; height: 100px; border-right: 4px solid #f7efe4; box-sizing: border-box; }
.model-overview .model .image img { display: block; width: auto; height: auto; max-width: 80%; max-height: 70%; }
.model-overview .model .info { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; padding: 0 5%; width: calc(100% - 150px); font-size: 18px; box-sizing: border-box; }
.model-overview .model .info * { white-space: nowrap; }
.model-overview .model .info .title { width: 40%; font-size: 24px; color: #33434d; font-weight: 900; text-transform: uppercase; }
.model-overview .model .info .length { width: 24%; }
.model-overview .model .info .capacity { width: 25%; }
.model-overview .model .info svg { position: absolute; right: 5%; width: 24px; height: 24px; fill: #182d36; }


body.__model .row.first .content .page_content,
body.__model .row.image.colors .content .page_content { display: flex; flex-wrap: wrap; align-items: flex-start; }

body.__model .content .page_content .column.features { position: sticky; top: 200px; padding-right: 5%; width: 45%; box-sizing: border-box; }
body.__model .content .page_content .column.features h2 { margin-bottom: 30px; }

body.__model .content .page_content .column.specifications { width: 55%; }
body.__model .content .page_content .column.specifications table { font-size: 16px; border: none; }
body.__model .content .page_content .column.specifications table:first-of-type { margin-top: 30px; }
body.__model .content .page_content .column.specifications table tr td { padding: 5px 10px; border: none; }
body.__model .content .page_content .column.specifications table tr:first-of-type td,
body.__model .content .page_content .column.specifications table tr td:first-of-type { font-weight: 700; }
body.__model .content .page_content .column.specifications table tr:nth-of-type(odd) { background-color: rgb(204 188 160 / 25%); }

body.__model .row.image.colors { margin-top: -20px; margin-bottom: 20px; padding-top: 0; }

body.__model .content .page_content .column.image { position: relative; margin-right: 5%; padding-bottom: 40%; width: 40%; height: 0; border: 5px solid rgb(204 188 160 / 25%); border-radius: 10px; box-sizing: border-box; }
body.__model .content .page_content .column.image .image-wrapper { position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
body.__model .content .page_content .column.image img { display: block; width: auto; height: auto; max-width: 80%; max-height: 75%; }

body.__model .content .page_content .column.colors { position: relative; padding-bottom: 40%; width: 55%; height: 0; border: 5px solid rgb(204 188 160 / 25%); border-radius: 10px; box-sizing: border-box; }
body.__model .content .page_content .column.colors .image-wrapper { position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
body.__model .content .page_content .column.colors img { display: block; width: auto; height: auto; max-width: 80%; max-height: 80%; }


/*.classic-temp .item { position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 45px; background-color: #182d36; }
.classic-temp .item.sheet { cursor: pointer; }
.classic-temp .item.sheet:before { position: absolute; content: "Download product sheet (PDF)"; font-size: 24px; color: #fff; font-weight: 700; text-transform: uppercase; opacity: 0; visibility: hidden; transition: all ease 0.15s; z-index: 1; }
.classic-temp .item.sheet:hover:before { opacity: 1; visibility: visible; }
.classic-temp .item img { opacity: 1; transition: all ease 0.15s; }
.classic-temp .item.sheet:hover img { opacity: 0.25; }
.classic-temp .item.sheet:last-of-type { margin-bottom: 0; }*/

.models + .models { margin-top: 100px; }
.models h2 { margin-bottom: 45px; font-family: 'Chivo', sans-serif; font-size: 36px; font-weight: 400; line-height: 1.2; }
.models .item.sheet { position: relative; display: flex; align-items: center; justify-content: flex-start; margin-bottom: 20px; cursor: pointer; border: 4px solid #f7efe4; border-radius: 6px; box-sizing: border-box; }
.models .item.sheet * { opacity: 1; transition: all ease 0.15s; }
.models .item.sheet a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
.models .item.sheet:hover .image,
.models .item.sheet:hover .title,
.models .item.sheet:hover svg { opacity: 0.6; }
.models .item.sheet:last-of-type { margin-bottom: 0; }
.models .item.sheet .image { order: 1; padding: 20px; width: 20%; border-right: 4px solid #f7efe4; box-sizing: border-box; }
.models .item.sheet .image img { display: block; width: 100%; }
.models .item.sheet .title { position: relative; order: 2; margin: 0 45px; font-size: 40px; color: #182d36; font-weight: 900; transition: all ease 0.15s; z-index: 1; }
.models .item.sheet svg { position: absolute; right: 45px; width: 36px; height: 36px; fill: #182d36; }

.row.colour_scheme { padding-top: 0; }
.row.colour_scheme .models h2 { margin-bottom: 15px; }
.models .item.colors { margin-top: 45px; }


.link-rows { width: 100%; border-top: 5px solid rgb(204 188 160 / 25%); }
.link-rows .link-row { width: 100%; border-bottom: 5px solid rgb(204 188 160 / 25%); }
.link-rows .link-row a { display: flex; align-items: center; justify-content: space-between; padding: 40px 0; font-size: 40px; color: #182d36; font-weight: 900; line-height: 1; /*text-transform: uppercase;*/ }
.link-rows .link-row a svg { width: 36px; height: 36px; fill: #182d36; }
.link-rows .link-row:hover a { opacity: 0.6; }


/* MARINE LIFESTYLE */
.row.products { padding-top: 0; }
.row.products .content { max-width: none; width: calc(100% - 340px); }
.row.products .products { display: flex; flex-direction: column; }
.row.products .products .product { display: flex; margin-bottom: 50px; height: calc(100vh - 300px); background-color: #ccbca0; }
.row.products .products .product .left { display: flex; flex-direction: column; padding: 60px; width: 40%; font-size: 17px; line-height: 1.5; overflow-y: auto; box-sizing: border-box; }
body.homepage .row.products .products .product .left { justify-content: center; }
.row.products .products .product .left .naam h2 { margin: 0; margin-bottom: 25px; font-size: 36px; color: #182d36; font-weight: 900; line-height: 1.2; }
.row.products .products .product .right { width: 60%; /*background-color: #ccbca0;*/ }
.row.products .products .product .right .images { height: 100%; overflow: hidden; }
.row.products .products .product .right .images .image { height: 100%; }
.row.products .products .product .right .images .image img { width: 100%; height: 100%; object-fit: cover; }

.row.products .products .product .left::-webkit-scrollbar { width: 18px; }
.row.products .products .product .left::-webkit-scrollbar-track { background-color: transparent; }
.row.products .products .product .left::-webkit-scrollbar-thumb { border-radius: 20px; border: 6px solid transparent; cursor: grab; background-color: #fff; background-clip: content-box; }
.row.products .products .product .left::-webkit-scrollbar-thumb:hover { opacity: 0.5; }

.row.products .products .product:nth-of-type(odd) .left a { color: #182d36; text-decoration: underline; }
.row.products .products .product:nth-of-type(odd) .left a:hover { text-decoration: none; }

.row.products .products .product:nth-of-type(even) { color: #fff; background-color: #182d36; }
.row.products .products .product:nth-of-type(even) .left { order: 1; }
.row.products .products .product:nth-of-type(even) .left h2 { color: #fff!important; }
.row.products .products .product:nth-of-type(even) .left a { color: #fff; text-decoration: underline; }
.row.products .products .product:nth-of-type(even) .left a:hover { text-decoration: none; }

.row.products .products .product:nth-of-type(even) .left::-webkit-scrollbar { width: 17px; }


/* CONTACTPAGINA */
body.userforms .content { column-gap: normal; align-items: initial; width: calc(100% - 340px); max-width: none; }
body.userforms .content .page_content { order: 1; padding: 90px; padding-bottom: 0; padding-left: 0; width: calc(100% / 2); font-size: 17px; line-height: 1.5; box-sizing: border-box; /*background-color: #ccbca0;*/ background-color: transparent; }
body.userforms .content .page_content a { color: #182d36; text-decoration: underline; }
body.userforms .content .page_content a:hover { text-decoration: none; }
body.userforms .content .form { order: 2; padding: 90px; width: calc(100% / 2); font-size: 17px; line-height: 1.5; border-radius: 6px; box-sizing: border-box; background-color: #f2eee7; }
body.userforms .content .form h2 { margin-bottom: 25px; margin-top: -5px; font-family: 'Playfair Display', serif; font-size: 36px; line-height: 1.2; font-weight: 900; color: #182d36; }
body.userforms .content .media { order: 3; width: calc(100% / 3); }

body.userforms .row.media .content { width: 100%; }
body.userforms .row.media .content .page_content { padding: 0; width: 100%; background-color: transparent; }


/* OVERALL downloads/links */
.content .links { margin-top: 45px; padding: 35px 45px 40px 45px; border-radius: 6px; background-color: #f7efe4; }
.content .links h3 { margin-bottom: 20px; font-family: 'Playfair Display', serif; font-size: 26px; color: #182d36; font-weight: 900; line-height: 1.2; }
.content .links a.file,
.content .links a.link { display: flex; align-items: center; flex-wrap: nowrap; padding: 6px 0; color: var(--main); border-bottom: 4px solid rgb(204 188 160 / 25%); }
.content .links a:first-of-type { border-top: 4px solid rgb(204 188 160 / 25%); }
.content .links a.link svg,
.content .links a.file svg  { display: inline-block; margin-right: 16px; width: 16px; height: 16px; fill: var(--main); opacity: 0.8; }
.content .links a.link:hover,
.content .links a.file:hover { color: var(--primarycta); }
.content .links a.link:hover svg,
.content .links a.file:hover svg { fill: var(--primarycta); }


/* CONTENT > submenu on page */
#submenu {
    width: 250px; max-width: 250px; min-width: 250px; /* = some forcing in general template */
    /*background: var(--accents);*/
    padding:  30px;
    box-sizing: border-box;
    border: 4px solid var(--light);
    border-radius: 6px;
}
#submenu ul li {
    line-height: 1.4;
    margin-bottom: 10px;    
}
#submenu ul li.parent {
    font-weight: 700;
    text-transform: uppercase;
}
#submenu ul li:last-of-type {
    margin-bottom: 0;
}
#submenu ul li a {
    color: var(--main);
    display: block;
}
#submenu ul li.hassub a.master {
    font-weight: 700;
}
#submenu ul li.parent a,
#submenu ul li a.master {
    /* if these needs to be bigger etc. */
}
#submenu ul li ul {
    margin: 5px 0;
    margin-top: 10px;
    margin-left: 15px;
}
#submenu-trigger {
    display: none;
}
#submenu ul li a:hover {
    color: var(--secondarycta);
}
#submenu ul li.parent.active a,
#submenu ul li.active a.master,
#submenu ul li.active ul li.subactive a {
    color: var(--primarycta);
}


/* ELEMENTS - tweak to your purposes & likings! */
.elements {
    margin-top: 100px;
    display: flex;
    flex-wrap: wrap;
    width: 104%;
    margin-left: -2%;
}
.elements .element {
    width: 50%;
    margin: 0;
    background: #182d36;
}
.elements .element:nth-of-type(1),
.elements .element:nth-of-type(4) {
    color: #fff;
}
.elements .element:nth-of-type(2),
.elements .element:nth-of-type(3) {
    background: #ccbca0;
}
.elements .element a {
    /*display: inline-block;*/
    color: var(--light);
    text-decoration: underline;
}
.elements .element a:hover {
    text-decoration: none;
}
.elements .element:nth-of-type(2) a,
.elements .element:nth-of-type(3) a {
   color: #122a33;
}
.elements .element a h2 {
    color: var(--background);
}
.elements .element:nth-of-type(1) h2,
.elements .element:nth-of-type(4) h2 {
   color: #fff;
}
.elements .element:nth-of-type(2) h2,
.elements .element:nth-of-type(3) h2 {
   color: #122a33;
}
.elements .element .text {
    padding: 50px 50px 60px 50px;
    font-size: 17px;
}
.elements .element .text .naam h2 {
    margin-top: 0;
    font-size: 32px;
}

.elements .element .image {
    padding: 0;
}
.elements .element .image img {
    display: block;
    width: 100%;
}
.elements .element .media {
    padding: 0;
    width: 100%;
}
.elements .element .media a {
    margin-bottom: 0;
}


/* MAPS */
#map_canvas {
    height: 90vh; 
    height: calc(100vh - 300px);
    width: 100%; 
    clear: both; 
}


/* FOOTER */
#footer {
    background: var(--accents);
    padding: 100px 0;
}
#footer,
#footer a,
#footer a svg {
    color: var(--background);
    fill: var(--background);
}
#footer li a:hover ,
#footer li a:hover svg,
#footer li .back-to-top:hover  {
    color: var(--primarycta);
    fill: var(--primarycta);
    cursor: pointer;
}
#footer #footer-container {
    max-width: 1400px;
    width: 90%;
    position: relative;
    margin: 0px auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;  
    column-gap: 100px; 
}
#footer #footer-container .column {
    box-sizing: border-box;
}
#footer #footer-container .column a.more {
    display: inline-block;
    margin-top: 31px;
    color: var(--primarycta);
    text-decoration: underline;
}
#footer #footer-container .column a.more:hover {
    text-decoration: none;
}
#footer #footer-container .column.two-col ul {
    columns:  2;
    column-gap:  30px;
}
#footer #footer-container .column ul li {
    white-space: nowrap;
}
#footer #footer-container .column ul li.head {
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    color: var(--primarycta);
    font-weight: 900;
}
#footer #footer-container .column ul li.phone {
    margin-top: 5px;
}
#footer #footer-container .column ul li.kvk {
    margin-top: 26px;
}
#footer #footer-container #footer-logo {
    position: absolute;
    right: -5px;
    top: 0;
    width: 221px;
    height: 150px;
}
#footer #footer-container #footer-logo a {
    display: block;
}
#footer #footer-container #footer-logo img {
    display: block;
    width: 100%;
    pointer-events: none;
}




/* CREDITS */
#credits {
    background: var(--accents2);
    color: var(--light);
    padding: 0 0 100px 0;   
    font-size: .8em;
}
#credits #credits-container {
    max-width: 1400px;
    width: 90%;
    position: relative;
    margin: 0px auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}
#credits #credits-container ul {
    display: flex;
    column-gap: 20px;
}
#credits #credits-container ul li a {
    color: #f7efe4;
}
#credits #credits-container ul li a:hover {
    color: #ccbca0;
}
#credits #credits-container ul li svg {
    margin-right: 0;
    width: 12px;
    height: 12px;
    margin-left: 6px;
    transform: translateY(1px);
    fill: #f7efe4;
}
#credits #credits-container ul li:hover svg {
    fill: #ccbca0;
}
#credits #credits-container ul li .back-to-top {
    cursor: pointer;
}
#credits #credits-container ul li .back-to-top:hover span {
    color: #ccbca0;
}
#credits #credits-container .social-buttons {
    position: absolute;
    right: 0;
    bottom: 0;
}
#credits #credits-container .social-buttons ul {
    display: flex;
    column-gap: 15px;
}
#credits #credits-container .social-buttons ul li a {
    display: block;
    width: 30px;
    height: 30px;
    position: relative;  
    cursor: pointer;  
}
#credits #credits-container .social-buttons ul li a svg {
    display: block;
    width: 100%;
    height: 100%;
    transform: translateY(0px);
    margin: 0;
}


/* MAILSTAGE */
#ms-success {
    display: none;
}
#ms-fail {
    display: none;
}
#mailstage {

}


/* CLOSE OVERLAY */
#close-overlay /* overlay that closes slideouts: menu, search, language */ {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--main);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 600ms ease-in-out;
}
#close-overlay.active {
    cursor: pointer;
    pointer-events: all;
    opacity: .5;
}
/*.close-menus {
    position: absolute;
    right: 20px;
    top: 22px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 40px;
}
.close-menus svg {
    fill: var(--main);
    width: 30px;
    height: 30px;
}*/
.close-menus {
    position: absolute;
    right: 20px;
    top: 22px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--main);
}
.close-menus:hover {
    opacity: 0.8;
}
.close-menus svg {
    fill: #fff;
    width: 12px;
    height: 12px;
}


/* DISABLE SELECTION */
#menu, #header, #submenu, #kiek, #kiek *, #menu-slideout, #contact, .media {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}


/* NOTIFICATION WINDOW */
#notfication-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    display: flex;
    justify-content: center;
    /* Max duration for this transition: 500ms */
    transition: opacity 200ms ease-in-out;
    pointer-events: none;
}
#notfication-wrapper.hidden {
    opacity: 0;
}
#notfication-wrapper.hidden #notification-window {
    pointer-events: none;
}
#notification-window {
    position: relative;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 60px;
    font-size: 1.1em;
    line-height: 1.1;
    max-width: 500px;
    pointer-events: auto;
}
#notification-window.info {
    background: var(--primarycta);
}
#notification-window.error {
    background: var(--error);
}
#notification-window .close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 1.4em;
    line-height: .5;
    cursor: pointer;
}