/*  =================================================================
    0.0 :ROOT ~ overwrites or extras (if needed)
================================================================== */
    :root {
        --row-width: 1140px; /* max-width */
        --font-main:  'Maison Neue', sans-serif;
        --font-weight: 400;
        
        /* -- COLORS -- */
        --color-primary: #051C1D;
        --color-secondary: #711449;
        --color-text: #9599BB;
        --color-accent: #EE3F97;
        --color-39c052e: #39c052e;
		
		/*AB3277
		EE3F97*/
		--color-white-ff: #ffffff;
		--color-grey-32: #303032;
		--color-grey-66: #666666;
		--color-grey-70: #707070;
		--color-grey-5b: #5b5b5b;
		--color-grey-eb: #ebebeb;
		--color-yellow: #fbbe20;
        
        --color-red: #d83030;
		--color-softred : #f38989;
		--color-softgreen : #78c1a3;
    }

/*  =================================================================
    1.0 STANDARDS
================================================================== */
    html, body {		
		color: #282828;
	}
    section {
		padding: 50px 20px 50px 20px;
	}
	section.padded {
		padding-top: 100px;
	}

    .bgPrimary {
        background-color: var(--color-black);
    }
    .bgSecondary {
        background-color: var(--color-secondary);
    }
	.bgAccent {
        background-color: var(--color-accent);
    }

    .evContainer {
        display: none;
    }
    .evContainer.showed {
        display: block;
    }

    main {
        padding-top: 60px;
    }

/*  1.1 Grid Rework
    -------------------------------------------------------------- */
    .gridFrame {
        grid-gap: 20px;
    }
	.gridFrame.noGap {
        grid-gap: 0;
    }

/*  1.2 Clearfix
    -------------------------------------------------------------- */
    .clear, .clearall, .clearfix {
        clear: both;
    }

/*  1.3 Panel stylings
    -------------------------------------------------------------- */
	.panel {
		width: 100%;
		display: block;
		margin: 0 auto;
		background-color: var(--color-grey_dd);
		border: 2px solid var(--color-grey_cc);
		padding: 14px;
		padding-bottom: 13px;
		font-size: 16px;
		line-height: 23px;
		margin-bottom: 20px;
	}
	.panel a {
		text-decoration: underline;
	}
	.panel.alert, 
    .panel.notice, 
    .panel.success {
		text-align: center;
	}
	
	.panel.alert {
		border: 2px solid #cc3300;
		background-color: #ff9966;
		color: #cc3300;
	}
	
	.panel.notice {
		border: 2px solid #ff9966;
		background-color: #ffcc00;
		color: #ff9966;
	}
	
	.panel.success {
		border: 2px solid #339900;
		background-color: #99cc33;
		color: #339900;
	}

/*  1.4 Text stylings
    -------------------------------------------------------------- */	
	h1, h2, h3, .head-text {
		color: var(--color-black);
		line-height: 1.3;
		font-size: 39px;
		font-weight: 500; 
		text-decoration: none solid rgb(255,255,255);
		word-spacing: 0px;
	}
	
	h2, h3, .head-text {
		font-weight: 600;
		font-size: 28px;
	}
	
	/*.head-text {
		font-weight: 600;
		color: black;
		font-size: 28px;
	}*/
	
	p {
		word-spacing: 0px;
		color: #9599BB;
		font-size: 13px;
		font-weight: 400;
	}
	

/*  =================================================================
    2.0 HEADER
================================================================== */
	.row .twoToned {
        background-color: black;
        position: relative;
        float: left;
        width: 100%;
    }
    .row .twoToned,
    .row .twoToned a {
        color: #e0e0e0;
        font-size: 14px;
    }
	
	header {
		height: auto;
		color: white;
		display: block;
		width: 100%;
		padding: 100px 20px 50px 20px;
		background-color: var(--color-secondary);
	}
	header h1 {
		color: var(--color-white);
	}
	header .grid-item:nth-child(1) {
		display: flex;
		flex-direction: column;
		gap: 40px;
	}
	main {
		padding: 0;
	}
	.maxw {
		max-width: 300px;
	}
	.button--container {
		padding: 0;
		display: flex;
		flex-direction: row;
		width: 100%;
		height: auto;
	}
	.button--container button,
	.introBlock a.button,
	.grid-item._l4-8 a.button {
		color: var(--color-white);
		line-height: 27px;
		padding: 15px 20px;
		font-size: 13px;
		background-color: var(--color-accent);
		border-width: 2px;
		border-radius: 2px;
		width: 133px;
		height: 57px;
	}
	.button--container button:nth-child(2) {
		background-color: transparent;
	}
	.button--container button.wired {
		color: var(--color-black);
		border-color: var(--color-accent);
		margin-left: 10px;
	}
	.stats-box {
		gap: 20px;
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
	}
	.stats-box div {
		max-width: 180px;
		line-height: 2em;
		text-align: center;
		border: 2px solid #9599BB;
		border-radius: 2px;
		padding: 30px;
		width: 50%;
		height: 145px;
	}
	.stats-box div p:nth-child(1) {
		font-weight: 600;
		font-size: 25px;
		color: white;
	}
	.stats-box div p:nth-child(2) {
		font-size: 13px;
		color: white;
	}
	.background-image {
		position: relative;
		width: 100%;
		background-size: contain;
		background-image: url('../img/final5.png');
		background-repeat: no-repeat; 
		background-position: center;
		min-height: 500px;
		height: 100%;
	}
	.floating-item {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		width: 91px;
		height: 71px;
		background-color: #FFFFFF1F;
		border-style: solid;
		border-width: 2px 2px 2px 2px;
		border-color: #9599BB;
		border-radius: 2px 2px 2px 2px;
	}
	.floating-item:nth-child(1) {
		top: 10%;
		left: 20%;
	}
	.floating-item:nth-child(2) {
		right: 15%;
		top: 30%;
	}
	.floating-item:nth-child(3) {
		bottom: 15%;
		left: 8%; 
	}
	.elementor-background-overlay {
		background-image: url('../img/header_overlay.png');
		background-position: center center;
		background-size: cover;
		transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
	}
	
	.subPage header {
		z-index: 1;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		display: flex;
		padding: 200px 0px 120px 0;
		background-image: url('../img/header_subpage.jpg');
		background-position: center center;
		background-size: cover;
	}
	.subPage header .elementor-background-overlay {
		width: 100%;
		height: 100%;
		z-index: 2;
		top: 0;
		left: 0;
		position: absolute;
		background-color: #10153D;
		opacity: 0.8;
		transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
	}
	.subPage header h1, .subPage header p {
		color: white; 
		z-index: 3;
	}
	

/*  =================================================================
    x.0 NAV
================================================================== */
    .mob-btn {
        position: absolute;
        right: 15px;
        top: 50%;
        margin-top: -20px;
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid #FFFFFF52;
        z-index: 2;
    }
    .mob-btn span, .mob-btn:before, .mob-btn:after {
        content: "";
        display: block;
        height: 2px;
        left: 12px;
        position: absolute;
        width: 14px;
        top: 14px;
        background-color: #FFFFFF52;
    }
    .mob-btn:before {
        top: 22px;
    }
    .mob-btn span {
        top: 18px;
        width: 10px;
    }

    nav {
        z-index: 998;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 60px;
        background-color: var(--color-black);
    }
    nav .row {                
        padding: 10px 0;
    }
    nav .logo-link {
        margin-left: 20px;
        display: inline-block;
        padding-right: 50px;
        border-right: 1px solid #FFFFFF52;
        width: auto;
        max-width: 240px;
    }
    nav .logo-link img {
        width: auto;
        height: 40px;
        float: left;                
    }

    #mainNAV {
        position: fixed;
        left: 0;
        top: 0;
        display: block;
        height: 100vh;
        z-index: 1;
        background-color: #000;
        width: 100%;
        margin: 0;
        max-width: 270px;
        box-shadow: 0 0 35px -10px rgb(0 0 0 / 25%);
        -webkit-transition: all .3s ease-out 0s;
                transition: all .3s ease-out 0s;
        -webkit-transform: translateX(-300px);
                transform: translateX(-300px);
    }
    #mainNAV.showed {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    #mainNAV:after {
        content: '';
        position: absolute;
        left: 100%;
        top: 0;
        width: calc(100vw - 270px);
        height: 100%;
        background-color: #000;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        -webkit-transition: all .3s ease-out 0s;
                transition: all .3s ease-out 0s;
    }
    #mainNAV.showed:after {
        opacity: .6;
        visibility: visible;
    }
    #mainNAV a.closeBtn {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 50px;
        background-color: #222;
        z-index: 1;
    }

    #mainNAV a.closeBtn:after, 
    #mainNAV a.closeBtn:before {
        background-color: #fff;
        content: "";
        height: 12px;
        margin: auto;
        position: absolute;
        right: 25px;
        top: 19px;
        width: 2px;
    }
    #mainNAV a.closeBtn:before {
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
    }
    #mainNAV a.closeBtn:after {
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }

    #mainNAV > ul {
        background-color: #fff;
        padding: 0;
        position: absolute;
        left: 0;
        top: 50px;
        width: calc(100% - 42px);
        height: calc(100% - 50px);
        overflow-y: scroll;
    }
	#mainNAV li ul {
		margin-bottom: 14px;
	}
    #mainNAV li {
        position: relative;
        display: inline-block;
        width: 100%;
        padding: 14px;
        border-bottom: 1px solid #e6e6e6;
    }
	
	#mainNAV li h2 {
		font-size: 16px;
		padding-left: 8px;
		margin-bottom: 7px;
	}
	#mainNAV li li {
        padding: 7px;
    }
	
    #mainNAV li a {
        position: relative;
        font-family: var(--font-main);
        font-size: 14px;
        line-height: 20px;
        color: var(--color-primary);
        font-weight: 600;
        display: block;
        padding-left: 8px;
    }
	
	#mainNAV .scBtn {
		position: absolute;
		top: 0;
		right: 0;
		width: 50px;
		height: 40px;
		text-align: center;
		border-left: 1px solid #FFFFFF52;
		padding-left: 10px;
	}
	#mainNAV .scBtn > a {
		color: #fff;
		position: relative;
		display: block;
		width: 40px;
	}
	#mainNAV .scBtn > a i {
		display: block;
		width: 40px;
		line-height: 40px;
		vertical-align: middle;
	}
	#mainNAV .scBtn > a span {
		position: absolute;
		right: 0px;
		top: -8px;
		width: 40px;
		text-align: center;
	}
	#mainNAV .dd-shop {
		position: absolute;
		top: calc(100% - 5px);
		right: 0;
		width: 320px;
		z-index: 1;
		background-color: #fff;
		padding: 20px;
		filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, .3));
		text-align: left;
		display: none;
	}
	#mainNAV .dd-shop.opened {
    display: block;
}
#mainNAV .dd-shop h3 {
    display: block;
    font-size: 18px;
    line-height: 18px;
    margin-bottom: 10px;
}
#mainNAV .dd-shop dd {
    margin: 0;
}
#mainNAV .dd-shop dl {
    width: 100%;
    position: relative;
    margin-bottom: 10px;
    line-height: 30px;
    min-height: 60px;
}
#mainNAV .dd-shop h4 {
    display: block;
    font-size: 15px;
    line-height: 19px;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
}
#mainNAV .dd-shop em {
    display: block;
    font-size: 13px;
    line-height: 15px;
}
#mainNAV .dd-shop a.btn {
    position: relative;
    background-color: #d83030;
    color: #fff;
    display: block;
    padding: 10px;
    text-align: center;
    width: 100%;
    margin: 10px 0 0 0;
    font-size: 14px;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
}

/*  =================================================================
    x.0 CONTENT
================================================================== */
    hr {
        position: relative;
        display: block;
        height: 1px;
        border: 0;
        margin: 1em auto;
        padding: 0;
        background-color: #ccc;
        width: 100%;
        max-width: 50%;
    }

.box-item i {
    height: 30px;
}


.introBlock {
    text-align: center;
}
.introBlock p {
    max-width: none;
    width: 100%;
}
.introBlock h2,
.introBlock p, h3, .head-text {
    margin-bottom: 30px;
}
.introBlock a.button {
    display: inline-block;
}
.box p {
    text-align: center;
    color: black;
    font-weight: 600;
    font-size: 18px;
}
.boxes .grid-item {
    text-align: center;
    border-radius: 2px;
    background-color: white;
    border: 2px solid #5846E026;
    padding-bottom: 40%;
}

/*  1.xx STANDARS Messages
    -------------------------------------------------------------- */
	.reviews .grid-item {	
		border: 2px solid #5846E026;
		padding: 30px;
	}
	.reviews .ratings {
		font-size: 18px;
	}
	.reviews .grid-item > p {
		padding: 30px 0;
		font-weight: 500;
	}
	.reviews figure img, 
	.reviews figure figcaption {
		float: left;
	}
	.reviews figure img {
		max-width: 70px;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 30px;
	}
	.reviews figure figcaption {
		display: block;
		width: calc(100% - 100px);
		-webkit-transform: translateY(25%);
				transform: translateY(25%);
	}
	.reviews figure h4 {
		font-size: 15px;
	}
	.reviews figure h4 small {
		font-size: 13px;
		font-weight: 400;
		color: var(--color-accent);
	}


/*  1.xx STANDARS Messages
    -------------------------------------------------------------- */
	.message {
        background-color: #0193d7;
        height: 60px;
        font-size: 16px;
        font-family: monospace;
        position: absolute;
        width: 100%;
		line-height: 60px;
        z-index: 10000;
        top: 0;
        left: 0;
        text-align:center;
    } 
	.message p {
        color: var(--color-white);
	}

/*  1.xx STANDARS LoginForm
    -------------------------------------------------------------- */
	.loginForm {
		display: block;
		margin: 50px auto;
		width: 100%;
		max-width: 480px;
		padding: 30px;
		border: 2px solid var(--color-secondary);
		border-radius: 15px;
		text-align: center;
		overflow: hidden;
	}
	.loginForm h2 {
		background-color: var(--color-secondary);
		color: var(--color-text);
		font-size: 24px;
		line-height: 32px;
		width: calc(100% + 60px);
		margin: -30px 0 30px -30px;
		padding: 15px 0;
	}
	.loginForm p {
		font-size: 15px;
		line-height: 21px;
		color: var(--color-text);
		margin-bottom: 15px;
	}
	.loginForm p a {
		color: var(--color-accent);
		border-bottom: 1px solid var(--color-accent);
		font-weight: 500;
	}
	.loginForm label {
		float: left;
		width: 100%;
		max-width: 110px;
		font-size: 15px;
		line-height: 20px;
		padding: 6px 0;
		font-weight: 400;
		margin-bottom: 5px;
		text-align: left;
	}
	.loginForm input {
		float: left;
		width: calc(100% - 110px);
		background-color: var(--color-text);
		font-size: 15px;
		line-height: 20px;
		padding: 6px 10px;
		margin-bottom: 5px;
	}
	.loginForm button {
		background-color: var(--color-text);
		padding: 12px 20px;
		line-height: 20px;
		font-size: 14px;
		font-weight: 600;
		margin-bottom: 15px;
	}
	.loginForm .optGrp input[type="checkbox"] {
		position: relative;
		max-width: 32px;
		height: 32px;
		padding: 0;
		margin: 0;
	}
	.loginForm .optGrp input[type="checkbox"]:after {
		content: '';
		position: absolute;
		left: 8px;
		top: 8px;
		width: 16px;
		height: 16px;
		background-color: transparent;
	}
	.loginForm .optGrp input[type="checkbox"]:checked:after {
		background-color: var(--color-secondary);
	}


.shoppingCart form input {
        margin-bottom: 0;
		margin: 5px 0;
	}

/*  =================================================================
    x.0 shoppingCart
================================================================== */
	.twoToned.sector {
		margin-top: -20px; /* for the padding in section */
		margin-bottom: 40px;
	}
	.twoToned.sector,
	.twoToned.sector:before,
	.twoToned.sector:after {
		border-bottom: 2px solid var(--color-primary);
	}
	.twoToned.sector:before, 
	.twoToned.sector:after {
		height: calc(100% + 2px);
	}
	.twoToned.sector:after {
		background-color: var(--color-accent);
	}
	.steps {
		position: relative;
		background-color: black;
		width: 100%;
		text-align: left;
		font-size: 0;
		line-height: 0;
		/*overflow: hidden;*/
	}	
	.steps:before,
	.steps:after {
		content: '';
		position: absolute;
		top: 0;
		width: 20px;
		height: calc(100% + 2px);
		background-color: black;
		border-bottom: 2px solid var(--color-grey-32);
	}
	.steps:before {
		left: 100%;
	}
	.steps:after {
		right: 100%;
		background-color: var(--color-accent);
	}	
	.steps li {
		display: inline-block;
		padding: 20px 10px;
		font-size: 13px;
		line-height: 19px;
		width: 25%;
		position: relative;
		background-color: var(--color-secondary);
	}
	.steps.search li {
		width: 50%;
	}
	.steps li.passed,
	.steps li.current {
		background-color: var(--color-accent);
        color: #000;
	}
	.steps li:after {
		content: '';
		position: absolute;
		top: 0;
		left: calc(100% - 3px);
		width: 3px;
		height: 100%;
		background-color: var(--color-grey-32);
	}
	.steps li a {
		color: #666;
	}
	.steps li span,
	.steps li em {
		position: relative;
		z-index: 1;
	}
	.steps li span,
    .shoppingCart li.head span,
	table.adres th {
        font-family: 'Fira Sans', sans-serif;
	}
	
	.steps li span {
		display: block;
		font-size: 16px;
		line-height: 21px;
		letter-spacing: 1px;
	}
	.steps li em {
		font-style: normal;
		display: none;
	}
	.steps.search li em {
		display: block;
	}
	.steps li.passed:before,
	.steps li.current:before  {
		content: ''; /* reset to empty */
		background-color: var(--color-accent);
		color: var(--color-white);
	}
	.steps li:nth-child(1) {
		z-index: 5;
	}
	.steps li:nth-child(2) {
		z-index: 4;
	}
	.steps li:nth-child(3) {
		z-index: 3;
	}
	.steps li:nth-child(4) {
		z-index: 2;
	}
	.steps li:nth-child(5) {
		z-index: 1;
	}

    .shoppingCart ul {
        position: relative;
        width: 100%;
    }
    .shoppingCart ul.endStep {
        max-width: 64%;
    }
    .shoppingCart li {
        position: relative;
		font-size: 14px;
    }
    .shoppingCart span {
        width: 100%;
        float: left;
        display: block;
        min-height: 26px;
        border: 0;
        margin: 1px;
        padding: 5px;
        position: relative;
    }
	.shoppingCart td[align="right"] span {
		display: inline !important;
		float: none !important;
		text-align: right !important;
		padding: 0 !important;
	}
    .shoppingCart li.head span,
	table.adres th	{
		background-color: var(--color-grey-5b);
		color: #fff;
		text-align: center;
		font-size: 20px;
		line-height: 40px;
		letter-spacing: 1px;
		text-indent: 1px;
		font-weight: normal;
	}
    .shoppingCart li.itemP:not(.first) span {
		border-top: 1px solid #aeaeae;
    }
    .shoppingCart li.itemP span {
		padding-left: 42px;
        line-height: 21px;
    }
    .shoppingCart li.sum span,
    .shoppingCart li.total span {
        border-top: 3px solid #666;
        line-height: 16px;
    }
    .shoppingCart li.sum span {
        border-top: 1px solid #999;
        line-height: 22px;
    }
    .shoppingCart li.sum span em {
        font-style: normal;
    }
    .shoppingCart li.foot {
        padding-top: 65px;
        text-align: right;
    }
    .shoppingCart li.foot span:nth-of-type(1n) {
        float: left;
    }
    .shoppingCart li.foot span:nth-of-type(2n),
    .shoppingCart li.total span {
        float: right;
        margin-right: 2px;
    }
    .shoppingCart img {
        display: inline-block;
    }
    .shoppingCart li span:nth-of-type(1n) {
		max-width: calc(70% - 2px);
    }
    .shoppingCart li span:nth-of-type(2n),
	.shoppingCart li.itemP span:nth-of-type(2n),
    .shoppingCart li.foot span:nth-of-type(2n),
	.shoppingCart li.itemP span:nth-of-type(2n) {
		max-width: calc(30% - 2px);
        float: right;
    } 
    .shoppingCart li.itemP span:nth-of-type(2n),
    .shoppingCart li.sum span:nth-of-type(1n),
    .shoppingCart li.total span:nth-of-type(1n) {
        text-align: right;
    }
	.shoppingCart li.sum span:nth-of-type(1n),
    .shoppingCart li.total span:nth-of-type(1n) {
        float: right;
		max-width: calc(44.5% - 2px);
    }
    .shoppingCart li span em {
        font-weight: normal;
        display: inline-block;
		width: 100%;
        max-width: 75px;
		float: left;
    }
	.shoppingCart li span strong,
	.shoppingCart li span label {
        display: inline-block;
		width: 100%;
        max-width: calc(100% - 75px);
		float: left;
    }
	.shoppingCart li span strong {
        display: inline;
		float: none;
    }
	.shoppingCart li span label {
        font-weight: normal;
    }
    .shoppingCart li.itemP span:nth-of-type(2n) {
        text-align: right;
    }
	.shoppingCart li.message label {		
		border: 1px solid #666;
		background: #ebebeb;
		color: #666;		
		font-weight: 700;
		display: block;
		padding: 10px;
		text-align: center;
		width: calc(100% - 2px);		
		margin: 10px 1px 15px;		
	}
	
	.shoppingCart .deleteBTN {
		position: absolute;
		left: 0;
		top: 10px;
		width: 32px;
		line-height: 32px;
		height: 32px;
		background-color: var(--color-red);
		color: #fff;
		text-align: center;
	}
	
	.shoppingCart .button {
		position: relative;
		float: left;
		width: 100%;
		margin-bottom: 5px;
		display: block;
		text-align: center;
		background-color: var(--color-white);
		color: var(--color-accent);
		line-height: 40px;
		font-size: 16px;
		border-radius: 3px;
		cursor: pointer;
		padding: 0;
		border: 0;
		text-transform: none;
		text-indent: 0;
		letter-spacing: 0;
		border: 2px solid var(--color-accent);
		-webkit-transition: all 300ms ease-in;
				transition: all 300ms ease-in;
	}
	.shoppingCart .button.right {

		margin-right: 0;
		background-color: var(--color-accent);
		border-color: var(--color-accent);
		color: var(--color-white);
	}
	
	#prijsContainer {
		width: 100%;
		position: relative;
		padding-bottom: 65px;
	}

	form.searchBar {float: left;width: 100%;padding: 30px; background-color: var(--color-yellow);}
	form.searchBar h3 {float: left; width: 100%; display: block; color: var(--color-white); margin-bottom: 10px; font-size: 30px;
    line-height: 52px;
    font-weight: 500;}
	form.searchBar input {display: block; float: left; width: calc(100% - 300px); min-height: 42px; padding: 0 21px; border-right: 2px solid var(--color-orange-dark); background-color: #fff; border-radius: 0 !important;}
	form.searchBar button {float: left; width: 300px; height: 42px; background-color: var(--color-grey-32); border-radius: 0 !important;}
	
	.resultBar p {
		margin-bottom: 20px;
	}
	.searchResults {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		padding-left: 15px;
		padding-right: 15px;
	}
	.searchResults h3 {
		padding-top: 10px;
		font-weight: 400;
	}
	.searchResults .resCol {padding: 10px; color: #515151; background-color: #e5e5e5;}
	.searchResults .resCol:nth-of-type(odd) {background-color: #efefef;}
	.searchResults figure {float: left; width: 150px; height: 70px; position: relative; overflow: hidden;}
	.searchResults figure img {position: absolute; left: 50%; top: 50%; width: 100%; height: auto; min-height: 100%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
	.searchResults h4 {float: left; display: block; width: calc(100% - 160px); margin-left: 10px; font-size: 21px; line-height: 29px; margin-top: 10px;}
	.searchResults small {float: left; display: block; width: calc(100% - 160px); margin-left: 10px; font-size: 13px; line-height: 21px;}

	.WYSIWYG.padded {
		padding-top: 75px;
		padding-bottom: 75px;
	}
	.bgDarkGrey {
		background-color: #33383E;
	}
		
	.results a {
		display: block;
		padding: 10px;
		background-color: #efefef;
		margin-bottom: 20px;
	}
	.results a:nth-of-type(even) {
		background-color: #ccc;
	}
	.results figure {
		width: 60px;
		height: 60px;
		position: relative;
		float: left;
		margin-right: 20px;
		overflow: hidden;
		background-color: #fff;
	}
	.results figure img {
		position: absolute;
		left: 50%;
		top: 50%;
		width: auto;
		max-width: 90%;
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
	}
	
	.radioContainer {
		position: relative;
		padding: 10px 0;
		padding-left: 100px;
		border-top: 1px solid #ccc;
	}
	.radioContainer:last-of-type {
		border-top: 0;
		margin-bottom: 20px;
		border-bottom: 1px solid #ccc;
	}
	.radioContainer span {
		position: absolute;
		left: 0;
		top: 50%;
		-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
				
		font-size: 14px;
		color: #666;
		font-weight: 400;
				
		line-height: 20px;
		padding: 10px 0;
		display: block;
		margin: 0;
		width: 100%;
		max-width: 100px;
	}
	.radioContainer label {
		position: relative;
		display: inline-block !important;
		line-height: 20px !important;
		width: auto !important;
		padding: 10px 20px;
		padding-left: 30px;
		border: 1px solid #ccc;
		border-radius: 4px;
		margin: 3px 6px !important;
		margin-left: 0px !important;
		-webkit-transition: all 150ms ease-out;
				transition: all 150ms ease-out;
		cursor: pointer;
	}
	.radioContainer input[type="radio"] {
		position: absolute;
		left: 10px;
		top: 50%;
		-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
		width: 10px;
		height: 10px;
		margin: 0;
		padding: 0;
		border-radius: 5px;
	}
	.radioContainer input[type="radio"]:after {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 10px;
		height: 10px;
		border-radius: 5px;
		background-color: transparent;
		-webkit-transition: all 150ms ease-out;
				transition: all 150ms ease-out;
	}
	.radioContainer label:hover {
		border-color: var(--color-red);
	}
	input[type="radio"]:checked:after,
	.radioContainer label:hover input[type="radio"]:after {
		background-color: var(--color-red);
	}
	.WYSIWYG {
		padding: 20px;
	}
	#billing {
		border: 1px solid black;
	}
	#billing:checked {
		margin-right: 10px;
		background-color: var(--color-accent);
		width: 15px;
		height: 20px;
	}
	#billing {
		margin-right: 10px;
		background-color: white;
		width: 15px;
		height: 20px;
	}
	div.row.cbContainer {
		padding-top: 15px;
		padding-bottom: 15px;
		align-items: center;
		display: flex;
	}
	input,
	select	{
		width: 95%;
		float: left;
		border: 2px solid #eaeaea;
		border-radius: 2px;
		background-color: var(--color-white-ff);
		border-radius: 3px;
		height: 30px;
		line-height: 40px;
		padding: 0 10px;
		font-size: 14px;
		color: #666;
		font-weight: 400;
		margin-bottom: 20px;
	}
	.bgBlue {
		background-color: var(--color-dewberry);
	}

/*  =================================================================
    x.0 FOOTER
================================================================== */
    footer {
        width: 100%;
        background-color: var(--color-black);
        padding: 20px;
        padding-top: 40px;
    }
    footer .gridFrame {
        padding-bottom: 20px;
    }
    footer h3,
    footer p,
    footer li,
    footer a {
        color: var(--color-text);
    }
    footer h3,
    footer p,
    footer li {
        font-size: 14px;
        line-height: 24px;
    }
    footer .logo {
        width: auto;
        height: 40px;
    }
    footer h3 {
        font-size: 24px;
        line-height: 40px;
        font-weight: 600;
    }
    footer .logo,
    footer hr {
        margin-bottom: 20px;
    }

    footer a {
        border-bottom: 1px solid var(--color-text);
    }
	
    footer li a,
	footer address p {
        line-height: 32px;
    }
	footer li a {
        font-size: 14px;
	}
	footer address i {
		display: inline-block !important;
		width: 24px;
		line-height: 24px !important;
		height: 24px;
		margin-right: 6px;
		background-color: var(--color-accent);
		text-align: center;
		border-radius: 4px;
	}
	
    footer hr {
        background-color: #FFFFFF52;
    }
    footer .btmTxt p {
        float: left;                
    }
    footer .btmTxt ul {
        float: right;                
    }
    footer .btmTxt li {
		margin-left: 10px;
        display: inline-block;
        font-size: 0;
        line-height: 0;                
    }
	

/*  =================================================================
    HOVER STATES
================================================================== */
@media (any-hover: hover) {
    
    .mob-btn {
        display: none;
    }
    nav .logo-link {
        margin-left: 0;
    }
    
    #mainNAV {
        position: relative;
        float: right;
        left: auto;
        top: auto;
        display: block;
        height: auto;
        z-index: 1;
        background-color: transparent;        
        width: 100%;
        max-width: calc(100% - 260px);
        box-shadow: none;
        -webkit-transition: all 0s ease-out;
                transition: all 0s ease-out;
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    #mainNAV a.closeBtn {
        display: none;
    }
    
    #mainNAV ul {
        position: relative;
        top: auto;
        left: auto;
        padding: 0;
        background-color: transparent;
        text-align: right;  
        float: right;
        width: auto;
		max-width: calc(100% - 70px);
        height: auto;
        overflow: hidden;
		margin-right: 70px;
    }
    #mainNAV li {
        display: inline-block;
        font-size: 0;
        line-height: 0;
        width: auto;
        padding: 0 10px;
        border-bottom: 0;
    }
    #mainNAV li a {
        line-height: 40px;
        font-size: 14px;
        color: #fff;
        display: inline-block;
    }
    #mainNAV li.last {
        margin-left: 10px;
        padding: 0;
        border-left: 1px solid #FFFFFF52;
    }
	#mainNAV li.last span {
		padding-left: 20px;
		font-size: 14px;
		line-height: 24px;
		color: var(--color-text);
	}
    #mainNAV li a.btn {
        box-shadow: inset 0 0 0 2px var(--color-accent);
        border-radius: 4px;
        padding: 0 10px;
        margin-left: 20px;
    }
	
	#mainNAV li h2,
	#mainNAV li ul {
		display: none;
	}
	
    
    a, button {
        -webkit-transition: all 200ms ease-in;
        transition: all 200ms ease-in;
    }
	
	
	.shoppingCart .button:hover {
		background-color: var(--color-accent);
		color: var(--color-white);
	}
	.shoppingCart .button.right:hover {
		background-color: var(--color-white);
		border-color: var(--color-blue);
		color: var(--color-blue);
	}
    
}

/*  =================================================================
    MEDIA QUERIES
================================================================== */
/* MOBILE */
@media only screen and (min-width: 572px) { }

@media only screen and (min-width: 572px) and (orientation: landscape) { }

/* IPADS portrait */
@media only screen and (min-width: 768px) and (min-height: 600px) {
	#prijsContainer.grid-item {
		grid-column: span 1;
	}
	.gridFrame.shopping {
        grid-template-columns: repeat(3, minmax(100px, 1fr));
    }
}

/* IPADS landscape AND mini laptops */
@media only screen and (min-width: 960px) {
     .twoToned:before,
    .twoToned:after {
        content: '';
        position: absolute;
        top: 0%;
        width: 100%;
        height: 100%;
    }
    .twoToned:before {
        left: 100%;
        background-color: black;
    }
    .twoToned:after {
        right: 100%;
    }
	
	.twoToned:after,
	nav .twoToned .hdr-left:before,
    nav .twoToned .hdr-left:after,
	.steps li:before,
	.steps li:after {
        background-color: var(--color-secondary);
	}	
    nav .twoToned .hdr-left:before,
    nav .twoToned .hdr-left:after,
	.steps li:before,
	.steps li:after	{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: calc(100% + 10px);
        height: 100%;
        transform: skew(-26deg);
    }
    nav .twoToned .hdr-left:before,
	.steps li:before {
        left: -20px;
    }
    nav .twoToned .hdr-left:after,
	.steps li:after	{
        left: calc(100% - 15px);
        max-width: 9px;
        background-color: var(--color-primary);
    }
	nav .hdr-left,
	nav .twoToned .hdr-left {
		background-color: transparent;
	}
	nav .row .twoToned .hdr-left a:first-of-type {
        margin-right: 34px;
    }
    
	
    #siteContainer {
        min-height: 100vh;
    }
    
    main {
        min-height: calc(100vh - 350px);
        margin-bottom: 350px;
    }
	
		.steps {
		overflow: hidden;
	}
	.steps:before,
	.steps:after {
		display: none;
	}
	.steps li,
	.steps li.passed,
	.steps li.current {
		background-color: transparent;
	}
	.steps li {
		padding: 20px;
		width: 20%;
	}
	.steps.search li,
	.steps._4 li {
		width: 25%;
	}
	.steps li:not(:first-of-type) {
		padding-left: 40px;
		margin-left: -20px;
	}
	.steps li em {
		display: block;
	}
	.steps li span {
		font-size: 20px;
		line-height: 23px;
	}
	
    .shoppingCart li.foot {
        padding-top: 20px;
    }
    .shoppingCart li span:nth-of-type(1n) {
        max-width: calc(82.5% - 2px);
    }
    .shoppingCart li span:nth-of-type(2n),
    .shoppingCart li.foot span:nth-of-type(2n),
    .shoppingCart li.itemP span:nth-of-type(2n),
    .shoppingCart li.sum span:nth-of-type(1n),
    .shoppingCart li.total span:nth-of-type(1n) {
        max-width: calc(17.5% - 2px);
    }
	.shoppingCart li span strong {
        display: inline-block;
		float: left;
    }
    .shoppingCart li span em {
        max-width: 125px;
    }
	.shoppingCart li span strong,
	.shoppingCart li span label {
        max-width: calc(100% - 125px);
    }
	.shoppingCart li span em.hlf + label {
		width: 50%;
        max-width: calc(50% - 125px);
    }
	.shoppingCart .button {
		width: 40%;
		margin-right: 20%;
	}
	.shoppingCart .button.right {
		margin-top: 0;
		margin-right: 0;
	}
	#prijsContainer {
		padding-bottom: 0;
		max-width: 32%;
		position: absolute;
		top: 0;
		right: 0;
	}
	
    
    footer {
        position: absolute;
        left: 0;
        bottom: 0;
    }
    .gridFrame.shopping {
        grid-template-columns: repeat(3, minmax(100px, 1fr));
    }
}

/* SMALL SCREENS */
@media only screen and (min-width: 1280px) {
    .gridFrame.shopping {
        grid-template-columns: repeat(3, minmax(100px, 1fr));
    }
}

/* WEIRD HEADER TEXT BREAKPOINT ~ must be paddings or margins */
@media only screen and (min-width: 1340px) { }

/* SMALL SCREENS */
@media only screen and (min-width: 1440px) { }