/*===========================================================

    Project:    ITHO Redesign
    Client:     ITHO Daalderop
    Company:    IlionX
    Developer:  Jasper Zuidhof / Milou Bitter
    E-mail:     jzuidhof@ilionx.com / mbitter@ilionx.com
    DOB:        March 2021

===========================================================*/


/*===============================================
 
    Colors
	ITHO PRIMARY	= #1040a1
	ITHO SECONDARY	= #0592AF
	ITHO ORANGE		= #FF9400
	ITHO BACKGROUND = #F8F8F8
	ITHO GREY		= #C6C6C6
	ITHO BORDER 	= #DADADA
    ITHO DARK BLUE  = #0A2C71

==============================================*/


/*===============================================
 
    Font
    
==============================================*/

@font-face {
	font-family: Barlow;
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("https://assets.bettyblocks.com/2c0e717501424d48b7981a84525fbc60_assets/files/932c49e60b3e48e4a9565b4d964e497b") format("truetype");*/
  	/*src: url("//assets.bettyblocks.com/8d6bac1c72cb450786e8d4254c52be68_assets/files/932c49e60b3e48e4a9565b4d964e497b?_=9373fb661b5c2954ab84d1b7f42774fe") format("truetype");*/
}

@font-face {
	font-family: Barlow;
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url("https://assets.bettyblocks.com/2c0e717501424d48b7981a84525fbc60_assets/files/c4e7e99789a242d99d659b11bbb88121") format("truetype");*/
  	/*src: url("//assets.bettyblocks.com/8d6bac1c72cb450786e8d4254c52be68_assets/files/932c49e60b3e48e4a9565b4d964e497b?_=9373fb661b5c2954ab84d1b7f42774fe") format("truetype");*/
}

@font-face {
	font-family: Barlow;
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url("https://assets.bettyblocks.com/2c0e717501424d48b7981a84525fbc60_assets/files/32eaa78b1b5e44d8a0a38abca05af117") format("truetype");
  	/*src: url("//assets.bettyblocks.com/8d6bac1c72cb450786e8d4254c52be68_assets/files/32eaa78b1b5e44d8a0a38abca05af117?_=72871854aabdd7a79c4fc5038cb4faaf") format("truetype");*/
}



/* 
	Material Icons 
*/

.header-sub-wrapper :before,
.header-sub-wrapper :after,
.material-icons:before,
.material-icons:after {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
}


/*
	Font Awesome Icons
*/

.fa:before,
.fa:after,
.fab:before,
.fab:after {
	font-size: 24px;
}


/*===============================================
 
    Variables
    
==============================================*/

:root {
	/*  
  		colors
  	*/
	--itho-primary-color: #1040A1;
	--itho-secondary-color: #0592AF;
	--itho-action-color: #FF9400;
	--itho-text-color: #4A4A4A;
	--itho-background-color: #F8F8F8;
	--itho-grey-color: #C6C6C6;
	--itho-border-color: #DADADA;
	--itho-section-color: #B1D3F8;
    --itho-dark-blue-color: #0A2C71;

	/*
        :textselection 
    */
	--selection-text-color: white;
	--selection-background-color: var(--itho-primary-color);
	/*
        <html>
    */
	--html-background-color: white;
	--html-text-color: var(--itho-text-color);
	/*
        <body>
    */
	--body-font-family: 'Barlow', sans-serif;
	--body-font-size: 16px;
	--body-text-color: var(--itho-text-color);
	--body-line-height: 1.75rem;
	--body-font-weight: 400;
	--body-letter-spacing: 0.02rem;
	/*
        <div> / box
    */
	--box-border-style: 1px solid var(--itho-grey-color);
	--box-border-color: var(--itho-grey-color);
	/*
        <nav>
    */
	--main-nav-background-color: var(--itho-primary-color);
	--main-nav-text-color: white;
	/*
        <aside>
    */
	--main-aside-background-color: #E8EBEF;
	--main-aside-text-color: inherit;
	/*
        <headers>
    */
	--header-primary-color: var(--itho-primary-color);
	--header-padding: 1rem 0;
	--header-line-height: 1.25;
	--header-font-family: 'Barlow', sans-serif;
    --header-font-weight: 500;
	/* <h1> */
	--header-h1-font-size: 2.5rem;
	/* <h2> */
	--header-h2-font-size: 2rem;
	/* <h3> */
	--header-h3-font-size: 1.25rem;
	/* <h4> */
	--header-h4-font-size: 1rem;
	/* <h5> */
	--header-h5-font-size: .83rem;
	/* <h6> */
	--header-h6-font-size: .67rem;
	/*
        <p>
    */
	--paragraph-primary-color: var(--itho-text-color);
	--paragraph-padding: 1rem 0;
	--paragraph-text-size: 1rem;
	--paragraph-line-height: 1.75rem;
	/*
        <label>
    */
	--label-padding: 1rem;
	--label-font-size: 1rem;
	/*
        <input> <textarea> <select>
    */
	--input-text-color: var(--itho-text-color);
	--input-text-font: inherit;
	--input-padding: .5rem 5rem .5rem 1rem;
	--input-border-style: 1px solid var(--itho-grey-color);
	--input-line-height: 1.6;
	--input-border-radius: 2px;
	--input-placeholder-color: var(--itho-grey-color);
	/*
        <section>
    */
	--section-padding: 1rem;
	/*
        <a>
    */
	--anchor-text-color: var(--itho-primary-color);
	--anchor-text-font: inherit;
	--anchor-text-weight: bold;
	--anchor-text-decoration: none;
	--anchor-hover-text-color: #1385c1;
	--anchor-hover-text-decoration: none;
	/*
        <button>
    */
	--button-font-weight: normal;
	--button-padding: .75rem 2rem;
	--button-text-color: white;
	--button-background-color: var(--itho-secondary-color);
	--button-border-style: 1px solid var(--itho-secondary-color);
	--button-border-radius: 2rem;
	--button-hover-background-color: #0E80B2;
	--button-hover-text-color: #FFF;
	/*
        <button primary>
    */
	--button-primary-text-color: white;
	--button-primary-background-color: var(--itho-action-color);
	--button-primary-border-style: 1px solid var(--itho-action-color);
	--button-primary-hover-background-color: #0E80B2;
	--button-primary-hover-border-style: 1px solid #0E80B2;
	/*
        <button secondary>
    */
	--button-secondary-text-color: white;
	--button-secondary-background-color: var(--itho-primary-color);
	--button-secondary-border-style: 1px solid var(--itho-primary-color);
	--button-secondary-hover-background-color: var(--itho-primary-color);
	--button-secondary-hover-border-style: 1px solid var(--itho-primary-color);
	/*
        <button outline>
    */
	--button-outline-text-color: var(--itho-secondary-color);
	--button-outline-background-color: white;
	--button-outline-border-style: 1px solid var(--itho-secondary-color);
	--button-outline-hover-text-color: white;
	--button-outline-hover-background-color: var(--itho-secondary-color);
	--button-outline-hover-border-style: 1px solid var(--itho-secondary-color);
	/*
        <table>
    */
	--table-cell-padding: 1rem;
	--table-header-padding: 1rem;
	--table-border-style: none;
}

.kg:root {
	--kg-primary-color: #63B98B;
	--kg-secondary-color: #B1DCC5;
	--kg-action-color: #FF9400;
	--kg-background-color: #F8F8F8;
	--kg-grey-color: #C6C6C6;
	--kg-text-color: #1040A1;
	--header-line-height: 1.25;
}


/*===========================================================

    Text Selection

===========================================================*/

:focus {
	outline-color: var(--anchor-text-color);
}

::-moz-selection {
	/* Code for Firefox */
	color: var(--selection-text-color);
	background: var(--selection-background-color);
}

::selection {
	color: var(--selection-text-color);
	background: var(--selection-background-color);
}


/*===========================================================

    Placeholder

===========================================================*/

::-webkit-input-placeholder {
	/* Chrome/Opera/Safari */
	opacity: 0;
}

 ::-moz-placeholder {
	/* Firefox 19+ */
	opacity: 0;
}

 :-ms-input-placeholder {
	/* IE 10+ */
	opacity: 0;
}

 :-moz-placeholder {
	/* Firefox 18- */
	opacity: 0;
}


/*===========================================================

    Generic

===========================================================*/

html {
	background-color: var(--html-background-color);
	color: var(--html-text-color);
	min-height: 100vh;
	box-sizing: border-box;
	font-size: var(--body-font-size);
}

body {
	min-height: inherit;
	padding: 0;
	margin: 0;
	font-weight: var(--body-font-weight);
	font-size: var(--body-font-size);
	font-family: var(--body-font-family);
	color: var(--body-text-color);
	line-height: var(--body-line-height);
	letter-spacing: var(--body-letter-spacing);
}

* {
	font-family: inherit;
	box-sizing: inherit;
	font-smooth: always;
	-webkit-font-smoothing: antialiased;
}

hr {
	border-top: var(--box-border-style);
}

header {
	color: var(--header-primary-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--header-primary-color);
	padding: var(--header-padding);
	line-height: var(--header-line-height);
}

h1,
.h1 {
	font-size: var(--header-h1-font-size);
}

h2,
.h2 {
	font-size: var(--header-h2-font-size);
}

h3,
.h3 {
	font-size: var(--header-h3-font-size);
}

h4,
.h4 {
	font-size: var(--header-h4-font-size);
}

h5,
.h5 {
	font-size: var(--header-h5-font-size);
}

h6,
.h6 {
	font-size: var(--header-h6-font-size);
}

p {
	color: var(--paragraph-primary-color);
	/* padding: var(--paragraph-padding); */
	font-size: var(--paragraph-text-size);
	line-height: var(--paragraph-line-height);
}

a {
	color: var(--anchor-text-color);
	font-family: var(--anchor-text-font);
	font-weight: var(--anchor-text-weight);
	text-decoration: var(--anchor-text-decoration);
	cursor: pointer;
}

a:hover {
	color: var(--anchor-hover-text-color);
	text-decoration: var(--anchor-hover-text-decoration);
}

.label,
label {
	padding: var(--label-padding);
	font-size: var(--label-font-size);
}

input,
textarea,
select {
	color: var(--input-text-color);
	font-family: var(--input-text-font);
	padding: var(--input-padding);
	border: var(--input-border-style);
	line-height: var(--input-line-height);
	border-radius: var(--input-border-radius);
}

::placeholder {
	color: var(--input-placeholder-color);
}

:-ms-input-placeholder {
	color: var(--input-placeholder-color);
}

::-ms-input-placeholder {
	color: var(--input-placeholder-color);
}

.btn-wrapper{
    color: white;
}

.btn,
button,
[type="submit"] {
	color: var(--button-text-color);
	background-color: var(--button-background-color);
	border: var(--button-border-style);
	border-radius: var(--button-border-radius);
	font-weight: var(--button-font-weight);
	cursor: pointer;
	padding: var(--button-padding);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.btn:hover,
button:hover,
[type="submit"]:hover {
	background-color: var(--button-hover-background-color);
	color: var(--button-hover-text-color);
}

.btn p {
	margin: 0;
}


/*
	Select
*/

select {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
	background-position: calc(100% - 1rem) center !important;
}


/*
	Primary
*/

.btn.primary,
.btn.btn-primary {
	color: var(--button-primary-text-color);
	background-color: var(--button-primary-background-color);
	border: var(--button-primary-border-style);
}

.btn.primary:hover,
.btn.btn-primary:hover{
	background-color: var(--button-primary-hover-background-color);
	border: var(--button-primary-hover-border-style);
}


/*
	Secondary
*/

.btn.secondary {
	color: var(--button-secondary-text-color);
	background-color: var(--button-secondary-background-color);
	border: var(--button-secondary-border-style);
}

.btn.secondary:hover {
	background-color: var(--button-secondary-hover-background-color);
	border: var(--button-secondary-hover-border-style);
}


/*
	Outline
*/

.btn.outline {
	color: var(--button-outline-text-color);
	background-color: var(--button-outline-background-color);
	border: var(--button-outline-border-style);
}

.btn.outline:hover {
	color: var(--button-outline-hover-text-color);
	background-color: var(--button-outline-hover-background-color);
	border: var(--button-outline-hover-border-style);
}

.btn.outline:hover .material-icons {
	font-size: 1.5rem;
}

[readonly] {
	border-color: transparent;
	font-size: 1rem;
	font-style: italic;
}

caption {
	text-align: left;
	padding: var(--table-header-padding);
}

table {
	border: var(--table-border-style);
	display: flex;
	flex-direction: column;
}

thead,
tbody,
tfoot {
	flex: 1;
}

tr {
	display: flex;
}

tbody tr {
	cursor: pointer;
}

tbody tr:hover {
	background-color: var(--button-hover-background-color);
	color: var(--button-hover-text-color);
}

tbody tr:hover a:hover {
    color: white;
}

td {
	flex: 1;
	padding: var(--table-cell-padding);
}

th {
	flex: 1;
	padding: var(--table-header-padding);
	text-align: left;
}

nav ul,
footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
}

nav ul li {
	display: inline-flex;
}

nav ul a {
	padding: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

a .fas,
a .material-icons {
	padding-right: 1rem;
}

.input-group>.custom-file .custom-file-input:focus~.custom-file-label,
.input-group>.custom-select:focus,
.input-group>.form-control:focus {
	z-index: 0;
}


/*
	Classes
*/

table.table-basic{
  display: table;
}

table.table-basic tbody{
  display: table-row-group;
}

table.table-basic tbody tr{
  display: table-row;
}

table.table-basic tbody tr th{
  display: table-cell;
}

table.table-basic tbody tr td{
  display: table-cell;
}

table.table-basic thead{
  display: table-row-group;
}

table.table-basic thead tr{
  display: table-row;
}

table.table-basic thead tr th{
  display: table-cell;
}

table.table-basic thead tr td{
  display: table-cell;
}

.sr-only {
	/*     position: absolute; */
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	/* added line */
	border: 0;
}

.hidden {
	display: none !important;
}

.asterisk {
	display: inline-block;
	padding-left: .25rem;
}

.no-overflow {
	overflow: unset !important;
}

.logo {
	max-width: 22rem;
	margin: 2rem 4rem;
}

.mw-wrapper {
	max-width: 1400px;
	margin: 0 auto;
	width: 100%;
}

.mc-wrapper {
	max-width: 960px;
}

/*
	Flex page fix
*/

body {
  display: flex;
  flex-direction: column;
}

body > main {
   flex-grow: 1; 
}


/*===========================================================

    Generic Responsive 

===========================================================*/

@media (max-width: 1199.98px) {
	 :root {
		--body-font-size: 15px;
	}
}

@media (max-width: 991.98px) {
	 :root {
		--body-font-size: 14px;
	}
}

@media (max-width: 767.98px) {
	 :root {
		--body-font-size: 13px;
	}
}

@media (max-width: 575.98px) {
	 :root {
		--body-font-size: 13px;
		/*         --body-font-weight: 300; */
		--paragraph-line-height: 2.1;
	}
}


/*===============================================
 
    Variables KlimaatGarant
    
==============================================*/

.kg:root {
	/*  
  		colors
  	*/
	--itho-primary-color: #63B98B;
	--itho-secondary-color: #63B98B;
	--itho-action-color: #63B98B;
	--itho-text-color: #1040A1;
	--itho-background-color: #F8F8F8;
	--itho-grey-color: #C6C6C6;
	--itho-border-color: #DADADA;
	/*
  		<body>
  	*/
	--body-font-family: 'Barlow', sans-serif;
	--body-letter-spacing: 0.025rem;
	--body-font-weight: 400;
	/*
  		<header>
  	*/
	--header-line-height: 1.25;
	--header-primary-color: #044A92;
  --header-font-weight: 500;
	
	/*
  		<p>
  	*/
	--paragraph-line-height: 1.8;
	/* <h1> */
	--header-h1-font-size: 2.5rem;
	/* <h2> */
	--header-h2-font-size: 2rem;
	/* <h3> */
	--header-h3-font-size: 1.25rem;
	/* <h4> */
	--header-h4-font-size: 1rem;
	/* <h5> */
	--header-h5-font-size: .83rem;
	/* <h6> */
	--header-h6-font-size: .67rem;
  /* <button primary> */
    --button-primary-text-color: white;
    --button-primary-background-color: #0568AF;
    --button-primary-border-style: 1px solid #0568AF;
    --button-primary-hover-background-color: #0E80B2;
    --button-primary-hover-border-style: 1px solid #0E80B2;
}


/*
	KG Whirl
*/

.kg .home-bing-search-wrapper{
    overflow-x: visible;
}

.kg div>section,
.kg main>section {
	position: relative;
	overflow-x: hidden;
}

.kg main>section:nth-child(even):before,
.kg div>section:nth-child(even):before,
.kg .home-product-slider-wrapper:before {
	content: "";
	display: block;
	bottom: 0;
	left: 0;
	position: absolute;
	background-image: url(//assets.bettyblocks.com/8d6bac1c72cb450786e8d4254c52be68_assets/files/kg-whirl.png?_=424e112d9d5838bc7d77150838cd2085);
	width: 50rem;
	height: 50rem;
	background-repeat: no-repeat;
	background-position: -20rem 20rem;
	background-size: contain;
	pointer-events: none;
}

.kg .kg-no-bg:before {
	opacity: 0 !important;
}

.kg main>section:nth-child(4n):before,
.kg div>section:nth-child(4n):before,
.kg .home-product-slider-wrapper:before {
	left: auto;
	right: 0;
	background-position: 20rem 20rem;
}

.kg .home-extra-content-wrapper:before {
	display: none !important;
}


/*
	KG strong emphasis
*/

.kg h1 strong,
.kg h2 strong,
.kg h3 strong,
.kg h4 strong,
.kg h5 strong,
.kg h6 strong {
	font-size: 100%;
}

@media (max-width: 575.98px) {
	.kg h1 {
		font-size: 1.8rem;
	}
	.kg h1 strong {
		font-size: 100%;
	}
}