.no-js {
  @include breakpoint(small only) {
    .top-bar {
      display: none;
    }
  }

  @include breakpoint(medium) {
    .toggle-main-navigation {
      display: none;
    }
  }
}

/* 
 * vertical offset
 */
.default-spacer{height:1.5em;}
.space-5{margin-top:6em;}
.space-4{margin-top:4.5em;}
.space-3{margin-top:3em;}
.space-2{margin-top:1.5em;}
.space-1{margin-top:0em;}


.logo{}

.logo__white{
	background: url(/images/nomor-wit.svg) no-repeat;
	height:6rem;
	width:6rem;
}


.lazy-load-image{
	background:rgba($black,0.5);
}


/*
 * BRAND TYPE HOVER
 */
.hover-logo{
	
	&::before{
		content:"";
		line-height:4rem;
		text-align:center;
		color:$white;
		font-size:1.75rem;
		padding-top:1.5rem;
		position:absolute;
		top:45%;
		margin-top:-1rem;
		height:1.75rem;
		left:0;
		right:0;		
		z-index:100;
		background: url(/images/product/nomor-1605-white.svg) no-repeat 50% 50%;
		opacity:0;
	}
	
	&::after{
		@include animate;
		content:"";
		position:absolute;
		top:10%;
		right:10%;
		bottom:10%;
		left:10%;
		background:$primary-color;
		mix-blend-mode: multiply;
		opacity:0;
	}
	
	&:hover::after{
		opacity:1;
	}
	
	&:hover::before{
		opacity:1;
	}
	img[data-src]{display:block;height:0;padding-bottom:50%;width:100%;background-color:$medium-gray;}
}
.hover-logo__1601::before{content: "vergadertafel";background: url(/images/product/nomor-1601-white.svg) no-repeat 50% 50%;}
.hover-logo__1602::before{content: "tafel";background: url(/images/product/nomor-1602-white.svg) no-repeat 50% 50%;}
.hover-logo__1603::before{content: "statafel";background: url(/images/product/nomor-1603-white.svg) no-repeat 50% 50%;}
.hover-logo__1604::before{content: "vergadertafel";background: url(/images/product/nomor-1604-white.svg) no-repeat 50% 50%;}
.hover-logo__1605::before{content: "bank";background: url(/images/product/nomor-1605-white.svg) no-repeat 50% 50%;}
.hover-logo__1606::before{content: "ruimtedeler";background: url(/images/product/nomor-1606-white.svg) no-repeat 50% 50%;}
.hover-logo__1607::before{content: "ruimtedeler";background: url(/images/product/nomor-1607-white.svg) no-repeat 50% 50%;}


/*
 * Replace text by logo
 */
.brand-type{
	position:relative;
	visibility: hidden;
	&::after{
		content:"";
		position:absolute;
		top:0;right:0;bottom:0;left:0;
		background: url(/images/product/nomor-1601-black.svg) no-repeat 100% 50%;
		background-position:right center;
		visibility: visible;
		
		@include breakpoint(small only){
			background-position:left center !important;
		}
	
	}
	
	
}

.brand-type__1601::after{background-image: url(/images/product/nomor-1601-black.svg);}
.brand-type__1602::after{background-image: url(/images/product/nomor-1602-black.svg);}
.brand-type__1603::after{background-image: url(/images/product/nomor-1603-black.svg);}
.brand-type__1604::after{background-image: url(/images/product/nomor-1604-black.svg);}
.brand-type__1605::after{background-image: url(/images/product/nomor-1605-black.svg);}
.brand-type__1606::after{background-image: url(/images/product/nomor-1606-black.svg);}


/*
 * Extend button with dot onleft side
 */
.button{
	position:relative;
	padding-left:4rem;
	padding-right:3rem;
	font-weight:600;
	&::before{
		left:0.75rem;
		content:"";
		display:inline-block;
		width:1.5rem;
		height:1.5rem;
		position:absolute;
		top:50%;
		margin-top:-0.75rem;
		border-radius:50%;
		background-color:$white;
	}
}