@import '/css/_fortus/fonts.css';

html {
	--f-blue: #212d40;
	--f-dark-blue: #001d30;
	--f-green: #00deba;
	--f-green-hover: rgb(0,196.5,164.6351351351);
	--f-light-green: #c7ffda;
	--f-white: #e9e4e9;
	--f-darkgrey: #2e2e2e;
	--f-grey: #4a4e69;
	--f-pink: #de82c7;
	--white: #fff;
}

html, body, form {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 400;
}

html, body, form, label {
	color: var(--f-white);
}

body {
	font-size: 1.0556rem;
	line-height: 1.75;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: var(--f-green);
	text-decoration: none;
}

	a:hover, a:active {
		color: var(--f-green);
		text-decoration: none;
	}

/* Fonts */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	font-family: 'Space Grotesk', sans-serif;
	color: var(--f-green);
	margin-bottom: 32px;
	margin-bottom: 1.77778rem;
	font-weight: 700;
	line-height: 1.25
}

.h1, h1 {
	font-size: 3.5556rem;
	line-height: 1.15
}

@media screen and (max-width: 640px) {
	.h1, h1 {
		font-size: 2.333rem
	}
}

.h2, h2 {
	font-size: 2rem;
	line-height: 1.25
}

@media screen and (max-width: 640px) {
	.h2, h2 {
		font-size: 1.6rem
	}
}

.h3, h3 {
	font-size: 1.481rem;
	line-height: 1.3
}

@media screen and (max-width: 640px) {
	.h3, h3 {
		font-size: 1.3335rem
	}
}

.h4, h4 {
	font-size: 1.333rem;
	line-height: 1.4
}

@media screen and (max-width: 640px) {
	.h4, h4 {
		font-size: 1.244rem
	}
}

.h5, h5 {
	font-size: 1.333rem;
	line-height: 1.4
}

@media screen and (max-width: 640px) {
	.h5, h5 {
		font-size: 1.156rem
	}
}

.h6, h6 {
	font-size: 1.11rem;
	line-height: 1.4
}

@media screen and (max-width: 640px) {
	.h6, h6 {
		font-size: 1.067rem
	}
}

/* Fortus svg */
.fortus-lines {
	background-image: url('/images/_fortus/fortus-lines.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top right;
}

/* Main */
form[action="/afrekenen"] > main.o-band > .o-wrapper {
	padding: 84px 50px 84px 50px;
}

main.o-band {
	padding-top: 32px;
	padding-bottom: 32px;
}

	/* White background */
	main.o-band > .o-wrapper {
		position: relative;
		z-index: 0;
		overflow: visible;
		color: var(--f-blue);
		padding: 84px 120px 84px 84px;
	}

@media screen and (max-width: 1024px) {
	main.o-band .o-wrapper {
		max-width: 90%;
		padding: 25px;
	}
}

/* Corner mask */
main.o-band .o-wrapper::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--f-green);
	--mask: radial-gradient(84px at 100% 0, #0000 98%, #000);
	-webkit-mask: var(--mask);
	mask: var(--mask);
	pointer-events: none;
	z-index: -1;
}

@media screen and (max-width: 1024px) {
	main.o-band .o-wrapper::before {
		--mask: radial-gradient(44px at 100% 0, #0000 98%, #000);
	}
}

main.o-band .o-wrapper label {
	color: var(--f-blue);
}

main.o-band .o-wrapper a {
	color: var(--f-blue);
	text-decoration: underline;
	text-underline-position: under;
	text-underline-offset: -2px;
}

main.o-band .o-wrapper .o-btn,
main.o-band .o-wrapper .o-btn:link,
main.o-band .o-wrapper .o-btn:visited {
	border-color: var(--f-blue);
	background-color: var(--f-blue);
	color: var(--white);
	cursor: pointer;
	text-decoration: none;
}

	main.o-band .o-wrapper .o-btn:hover,
	main.o-band .o-wrapper .o-btn:active {
		border-color: var(--f-blue);
		background-color: var(--f-green);
		color: var(--f-blue);
	}

	main.o-band .o-wrapper .o-btn .fa {
		color: var(--white);
	}

	main.o-band .o-wrapper .o-btn:hover .fa,
	main.o-band .o-wrapper .o-btn:active .fa {
		color: var(--f-blue);
	}

main.o-band .o-wrapper p a {
	text-decoration: underline;
	text-underline-position: under;
	text-underline-offset: -2px;
}

main.o-band .o-wrapper a:hover,
main.o-band .o-wrapper a:active {
	color: var(--f-blue);
	text-decoration: none;
}

main.o-band .o-wrapper .h1, main.o-band .o-wrapper h1,
main.o-band .o-wrapper .h2, main.o-band .o-wrapper h2,
main.o-band .o-wrapper .h3, main.o-band .o-wrapper h3,
main.o-band .o-wrapper .h4, main.o-band .o-wrapper h4,
main.o-band .o-wrapper .h5, main.o-band .o-wrapper h5,
main.o-band .o-wrapper .h6, main.o-band .o-wrapper h6 {
	color: var(--f-blue);
}

main.o-band .o-wrapper .c-heading--brand span {
	color: var(--f-blue);
}

main.o-band .o-wrapper .c-module--nav .o-list-block__item,
main.o-band .o-wrapper .c-module--nav .o-list-block__item:not(:last-child) {
	border-color: var(--f-blue);
}

main.o-band .o-wrapper .o-list-block__header,
main.o-band .o-wrapper .o-list-block__header:hover,
main.o-band .o-wrapper .o-list-block__header:active {
	text-decoration: none;
	background-color: var(--f-blue);
	color: var(--f-white);
}

main.o-band .o-wrapper .c-module--nav .o-list-block__item:not(:last-child) {
	border-bottom: 1px solid var(--f-blue);
}

main.o-band .o-wrapper .o-list-block__link {
	text-decoration: none;
}

main.o-band .o-wrapper .c-module--nav {
	border-color: var(--f-blue);
}

main.o-band hr {
	background-color: var(--f-blue);
	color: var(--f-blue);
}

main .o-wrapper a.c-news-item__link {
	text-decoration: none;
}

main .o-wrapper .c-news-item__heading {
	text-decoration: underline;
	text-underline-position: under;
	text-underline-offset: -2px;
}

.c-heading--light {
	color: var(--f-blue);
}

.c-heading--dotted:after {
	background-image: url('/images/_fortus/dots-aa49c4b771.svg');
}

.c-heading--brand {
	color: var(--f-green);
}

.o-btn {
	background-color: var(--f-blue);
	color: var(--f-green);
	border: solid 1px var(--f-green-hover);
	border-radius: .125rem;
	padding-left: 32px;
	padding-right: 32px;
}

	.o-btn:hover {
		background-color: var(--f-green-hover);
		color: var(--f-blue);
	}

.flickity-prev-next-button .arrow {
	fill: var(--f-pink);
}

.js-carousel .flickity-prev-next-button {
	background: var(--f-pink);
}

	.js-carousel .flickity-prev-next-button .arrow {
		fill: var(--f-blue);
	}

.c-carousel__box {
	border-color: var(--f-green);
	overflow: hidden;
}

.c-list-arrow__link, .c-list-arrow__item--active:before, .c-list-arrow__item:hover:before {
	color: var(--f-green);
}

/* Header */
.c-page-head {
	background-color: var(--f-blue);
}

.c-page-hero {
	background-image: none;
	background-color: var(--f-blue);
	box-shadow: none;
}

.c-site-nav__link {
	font-size: 1rem;
	font-weight: 600;
	padding-left: 23px;
	padding-right: 23px;
}

	.c-site-nav__link:hover {
		background-color: var(--f-blue);
		color: var(--f-green);
		text-decoration: none;
	}

@media screen and (max-width: 640px) {
	.c-site-nav__link.dropdown-toggle:after {
		color: var(--f-dark-blue);
	}
}

.is-hovered .c-site-nav__link {
	background-color: var(--f-blue);
	color: var(--f-green);
}

.social-nav {
	display: flex;
	align-items: end;
	padding-bottom: 10px;
}

/* Navigation */
.c-band--brand {
	background: var(--f-green);
}

.c-site-nav__link {
	color: var(--f-blue);
	background-color: var(--f-green);
}

/* Banner */
.c-page-hero__text--category {
	background: none;
	color: var(--f-green);
	font-size: 3rem;
}

@media screen and (max-width: 640px) {
	.c-page-hero__text--category {
		font-size: 2rem;
	}
}

/* Navigation webshop */
.o-flyout__content--mega .o-layout__item > li:hover > .c-site-nav__link--level-1 {
	color: var(--f-green);
}

a.c-site-nav__link--level-1:link, a.c-site-nav__link--level-1:visited {
	color: var(--white);
	white-space: normal;
}

a.c-site-nav__link--level-1:hover, a.c-site-nav__link--level-1:active {
	color: var(--f-green);
}

.o-flyout__content--mega .o-layout__item .u-hide-portable {
	background: var(--f-blue);
	box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
	min-height: 100%;
}

	.o-flyout__content--mega .o-layout__item .u-hide-portable li {
		padding-top: 6px;
		padding-bottom: 6px;
	}

.c-site-nav__link--level-2:link, .c-site-nav__link--level-2:visited {
	color: var(--white);
	white-space: normal;
	line-height: 1.3;
}

.c-site-nav__link--level-2:hover, .c-site-nav__link--level-2:active {
	color: var(--f-green);
	text-decoration: none;
}

/* Webshop content background */
main .o-wrapper .o-flyout__content.o-flyout__content--mega.c-flyout__content.c-flyout__content--mega {
	background-color: var(--f-green);
}

.o-flyout__content--mega .o-layout {
	margin-left: 0;
}

.o-flyout__content--mega .o-layout__item > li {
	background-color: var(--f-blue);
	height: 100%;
}

	.o-flyout__content--mega .o-layout__item > li > .c-site-nav__link--level-1 {
		color: var(--f-green);
		text-decoration: none;
		text-align: center;
		font-weight: 600;
		line-height: 1.5;
		padding: 15px;
	}

@media screen and (max-width: 63.9375em) {
	.o-flyout__content--mega .o-layout__item {
		margin-bottom: 15px;
	}

		.o-flyout__content--mega .o-layout__item > li > .c-site-nav__link--level-1 {
			text-align: left;
			display: flex;
			align-items: center;
		}

			.o-flyout__content--mega .o-layout__item > li > .c-site-nav__link--level-1 .u-pg {
				margin-right: 5px;
			}
}

o-flyout__content--mega .o-layout__item > li > .c-site-nav__link--level-1 .u-pg {
	font-size: 3rem;
}

.o-flyout__content--mega .u-hide-portable a.c-site-nav__link--level-1:link,
.o-flyout__content--mega .u-hide-portable a.c-site-nav__link--level-1:visited,
.o-flyout__content--mega .u-hide-portable a.c-site-nav__link--level-2:link,
.o-flyout__content--mega .u-hide-portable a.c-site-nav__link--level-2:visited {
	color: var(--white);
	white-space: normal;
	text-decoration: none;
}

.o-flyout__content--mega .u-hide-portable a.c-site-nav__link--level-1:hover,
.o-flyout__content--mega .u-hide-portable a.c-site-nav__link--level-1:active,
.o-flyout__content--mega .u-hide-portable a.c-site-nav__link--level-2:hover,
.o-flyout__content--mega .u-hide-portable a.c-site-nav__link--level-2:active {
	color: var(--f-green);
}

.o-flyout__content--mega .c-site-nav__block.o-layout__item {
	padding-left: 10px;
}

@media screen and (min-width: 64em) {
	.o-flyout__content--mega .c-site-nav__block.o-layout__item {
		min-height: 141px;
	}

	.c-flyout__content--mega .c-site-nav__block {
		margin-top: 0;
		margin-bottom: 0.5rem;
	}
}

@media screen and (max-width: 63.9375em) {
	.o-flyout__content--mega .c-site-nav__block.o-layout__item {
		padding-left: 0;
	}
}

.c-band--tint {
	background: var(--f-blue);
}

.js-fixed-header {
	background-color: var(--f-blue);
}

	.js-fixed-header .c-meta-nav__link {
		color: var(--f-white);
	}

		.js-fixed-header .c-meta-nav__link:hover {
			text-decoration: underline;
			text-underline-position: under;
			text-underline-offset: -2px;
		}

.c-meta-nav__link--cart:focus,
.c-meta-nav__link--cart:hover {
	background-color: var(--white);
	color: var(--f-dark-blue);
	text-decoration: none !important;
}

.is-clone {
	border-color: var(--f-green);
}

.c-flyout__content {
	background-color: var(--f-green);
	border: 0;
}

	.c-flyout__content a {
		color: var(--f-dark-blue);
	}

		.c-flyout__content a:hover,
		.c-flyout__content a:active {
			text-decoration: underline;
			text-underline-position: under;
			text-underline-offset: -2px;
		}

.c-breadcrumb {
	background-color: transparent;
}

	.c-breadcrumb a {
		color: var(--f-white);
	}

		.c-breadcrumb a:hover {
			color: var(--f-green);
			text-decoration: none;
		}

.c-breadcrumb__item:before {
	font-size: 1em;
	top: 9px;
	left: -15px;
}

.c-dropdown-cart,
.c-dropdown-cart-toggle.is-active .c-meta-nav__link--cart {
	background-color: var(--white);
	color: var(--f-dark-blue);
}

.c-dropdown-cart__title {
	white-space: normal;
	line-height: 1;
}

/* Header - Searchbox */
.u-desk-pt- {
	padding-top: 1px !important;
}

#PnlSearch .c-search__input {
	border-radius: .125rem;
	border-right-width: 0px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-color: var(--f-green);
	background-color: var(--f-blue);
	color: var(--f-green);
}

#PnlSearch .c-search__btn {
	border-color: var(--f-green);
	background-color: var(--f-blue);
	border-radius: 0 .125rem .125rem 0;
}

/* Header - Searchbox suggestions */
#MasterPageBodyTag .ui-widget-content {
	z-index: 100 !important;
	border-color: var(--f-green);
	background-color: var(--f-blue);
	box-shadow: 0 1px 5px rgba(0, 0, 0, .25);
	border-radius: .125rem;
	display: block !important;
}

	#MasterPageBodyTag .ui-widget-content a {
		color: var(--f-white);
	}

	#MasterPageBodyTag .ui-state-hover,
	#MasterPageBodyTag .ui-widget-content .ui-state-hover,
	#MasterPageBodyTag .ui-widget-header .ui-state-hover,
	#MasterPageBodyTag .ui-state-focus,
	#MasterPageBodyTag .ui-widget-content .ui-state-focus,
	#MasterPageBodyTag .ui-widget-header .ui-state-focus {
		border-color: transparent;
		background: none;
		color: var(--f-green);
		cursor: pointer;
	}

/* Footer */
.c-footer-nav__link {
	color: var(--f-blue);
}

	.c-footer-nav__link:focus, .c-footer-nav__link:hover {
		color: var(--f-blue);
		text-decoration: underline;
	}

.c-page-micro {
	color: var(--f-blue);
}


/* Form */
.c-page-newsletter .o-btn--wide {
	cursor: pointer;
	padding: 4px 16px;
}

.o-form__control--rounded {
	border-radius: .125rem !important;
}

.o-form__control {
	background-color: var(--f-blue);
	border: 1px solid var(--f-green);
	color: var(--f-green);
}

	.o-form__control.c-page-newsletter__name, .o-form__control.c-page-newsletter__email {
		height: 43px !important;
	}

.c-page-newsletter__cta {
	color: var(--f-green-hover);
}

input:focus {
	border-color: var(--f-green-hover);
}


/* Webshop */
main.o-band .o-wrapper .c-accordion {
	border-color: var(--f-blue);
}

main.o-band .o-wrapper a.c-accordion__toggle {
	border-color: var(--f-blue);
	text-decoration: none;
	font-weight: 500;
}

	main.o-band .o-wrapper a.c-accordion__toggle.is-active,
	main.o-band .o-wrapper a.c-accordion__toggle:hover,
	main.o-band .o-wrapper a.c-accordion__toggle:active {
		font-weight: 600;
	}

main.o-band .o-wrapper a.c-list-arrow__link {
	text-decoration: none;
}

	main.o-band .o-wrapper a.c-list-arrow__link:hover {
		font-weight: 600;
	}

main.o-band .o-wrapper .c-accordion__text-show {
	color: var(--f-blue);
}

main.o-band .o-wrapper .c-list-arrow__item:before,
main.o-band .o-wrapper .c-list-arrow__item--active:before,
main.o-band .o-wrapper .c-list-arrow__item:hover:before {
	color: var(--f-blue);
}

main.o-band .o-wrapper.webshop a.btnback {
	background: none;
	color: var(--f-green);
	text-decoration: none;
	border: none;
	right: 52px;
}

	main.o-band .o-wrapper.webshop a.btnback:active,
	main.o-band .o-wrapper.webshop a.btnback:hover {
		background: none;
		color: var(--f-green);
		text-decoration: underline;
		text-underline-position: under;
		text-underline-offset: -2px;
		border: none;
	}

	main.o-band .o-wrapper.webshop a.btnback .fa {
		color: var(--f-green);
		margin-right: 5px;
		font-size: 16px;
	}

@media screen and (max-width: 1024px) {
	main.o-band .o-wrapper.webshop a.btnback {
		border-radius: 0 .5rem .5rem 0;
		border-color: var(--f-blue);
		background: none;
		color: var(--f-blue);
		border: solid 1px var(--f-blue);
		right: 52px;
	}

		main.o-band .o-wrapper.webshop a.btnback:active,
		main.o-band .o-wrapper.webshop a.btnback:hover {
			border: solid 1px var(--f-blue);
			color: var(--f-blue);
		}

		main.o-band .o-wrapper.webshop a.btnback .fa {
			color: var(--f-blue);
		}

	.c-flyover-panel__btn {
		margin-left: -25px;
	}
}

main.o-band .o-wrapper a.c-box {
	border-color: var(--f-blue);
	background: var(--fwhite);
	color: var(--f-blue);
	text-decoration: none;
	font-weight: 600;
	border-radius: .125rem;
}

	main.o-band .o-wrapper a.c-box .c-box__title {
		text-align: center;
		font-size: 1rem;
		line-height: 1.1;
		margin-top: 5px;
	}

main.o-band .o-wrapper .addtofavorite,
main.o-band .o-wrapper .direct_bestellen {
	background-color: var(--f-green);
	border-color: var(--f-green);
}

	main.o-band .o-wrapper .o-layout__item .addtofavorite {
		border-radius: 0 0 3rem 0;
	}

	main.o-band .o-wrapper .c-box__image img {
		border-radius: 0;
	}

	main.o-band .o-wrapper .c-box__price--normal,
	main.o-band .o-wrapper .c-box__stock {
		color: var(--f-blue);
	}

		main.o-band .o-wrapper .c-box__stock .h1 {
			margin: 0 3px 0 0;
		}
	/* Webshop Product Detail */
	main.o-band .o-wrapper .c-product__image {
		position: relative;
		border: solid 1px var(--f-blue);
		border-radius: .125rem;
	}

	main.o-band .o-wrapper .stickerdetails {
		top: 72%;
		left: unset;
		right: 10px;
	}

	@media screen and (max-width: 720px) {
		main.o-band .o-wrapper .stickerdetails {
			top: 75%;
			right: unset;
		}
	}

	@media screen and (max-width: 1024px) {
		main.o-band .o-wrapper .stickerdetails {
			left: 150px;
		}
	}

	main.o-band .o-wrapper .btnToggleFavorite {
		border-radius: 50px;
		padding: 0 16px;
		margin-top: 10px;
	}

		main.o-band .o-wrapper .btnToggleFavorite .fa {
			color: var(--white);
		}

		main.o-band .o-wrapper .btnToggleFavorite:hover .fa {
			color: var(--f-blue);
		}

	main.o-band .o-wrapper .circle {
		border-color: var(--f-blue);
	}

		main.o-band .o-wrapper .circle a {
			text-decoration: none;
		}

	.sticker {
		top: 120px;
		left: 145px;
	}
	/* Webshop Product Detail Tabs */
	.c-tabs {
		border-color: var(--f-blue);
		border-radius: .125rem;
	}

	.c-tabs__content {
		border-color: var(--f-blue);
		border-radius: 0 0 .125rem .125rem;
	}

	.c-tabs .o-tabs__item:first-child .o-tabs__link {
		border-radius: 0;
	}

	.c-tabs .o-tabs__item .o-tabs__link {
		text-decoration: none;
	}

	.c-tabs .o-tabs__item.is-active .o-tabs__link {
		color: var(--white);
	}
	/* Webshop Cart */
	.order-steps li[data-step] a,
	.order-steps li[data-step] a:hover,
	.order-steps li[data-step] a:active {
		text-decoration: none;
	}

	.order-steps li[data-step='done'] a,
	.order-steps li[data-step='done'] a:hover,
	.order-steps li[data-step='done'] a:active {
		color: var(--white);
		text-decoration: none;
		background: var(--f-blue);
	}

	.order-steps li:before, .order-steps li:after {
		border-left-color: var(--f-green);
	}

	.order-steps li[data-step='active'] a,
	.order-steps li[data-step='active'] a:hover,
	.order-steps li[data-step='active'] a:active {
		color: var(--white);
	}

	.order-steps li[data-step='active']:after {
		border-left-color: var(--f-blue);
	}

	.order-steps li:after {
		border-left-color: #F2F2F2;
	}

	.order-steps li[data-step='active'] {
		background: var(--f-blue);
		color: var(--white);
	}

	.shopping-cart ul,
	.shopping-cart ul:last-child,
	.c-cart__total--row:nth-child(2) {
		border-color: var(--f-blue);
	}
	/* Medewerkers */
	.uc_medewerkers h2 {
		border-color: var(--f-blue);
	}

	.c-box {
		border-color: var(--f-blue);
		border-radius: .125rem;
	}

	main.o-band .o-wrapper a.c-profile__contact--phone {
		text-decoration: none;
	}
	/* Offerte */
	#quoteoverview .dataTable td:first-child .o-btn {
		padding-left: 10px;
		padding-right: 10px;
	}

	#quoteoverview .datum {
		white-space: nowrap;
	}

	.dataTables_paginate .paginate_button.current {
		color: var(--white);
	}