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

  @include breakpoint(medium) {
    .title-bar {
      display: none;
    }
  }
}

/*
 * Shadeout
 */
.shade-out{position:fixed;width:100%;height:100%;top:0em;bottom:0;background-color:rgba($black,0.85);z-index:100;cursor:pointer;}


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


/*
 * row with border bottom
 */
.devider-after::after{clear:both;content:"";display:block;position:absolute;bottom:0;left:0;right:0;border-bottom:solid 1px $light-gray;position:relative;height:1.25em;margin-bottom:2.25em;}
.devider-before::after{clear:both;content:"";display:block;position:absolute;top:0;left:0;right:0;border-top:solid 1px $light-gray;position:relative;height:1.25em;margin-bottom:2.25em;}



@media screen and #{breakpoint(large)}{
	.grid-container > section{margin-right: -1rem;margin-left: -1rem;}
}


.grid-default{position:relative;padding:1.5em 0 1.5em 0}

.button.gray{background-color:$medium-gray;}
.button.gray:hover{
	background:scale-color($medium-gray, $lightness: -15%);
	color:$white;
}

.button.transparent{background-color:transparent;}
.button.transparent:hover{
	background:scale-color($medium-gray, $lightness: -15%);
	color:$white;
}

.overlay-link{display:block;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;text-indent:-5000px;}

::placeholder{opacity: 1;}


@media screen and #{breakpoint(medium up)}{
	h1,.h1{font-size:4.125rem;line-height:4.5rem;margin-top:1.5rem;margin-bottom:3rem;}
	h2,.h2{font-size:2.5625rem;line-height:3rem;margin-top:1.5rem;margin-bottom:1.5rem;}
	h3,.h3{font-size:1.625rem;line-height:3rem;margin-top:1.5rem;margin-bottom:0rem;}
	h4,.h4{font-size:1.3125rem;line-height:3rem;margin-top:0;margin-bottom:0rem;}
	h5,.h5{font-size:1rem;line-height:1.5rem;margin-top:1.5rem;margin-bottom:0rem;}
}

.image-404{width:9em;margin:3em auto;}

.hide-after-1-lines{display:block;height:1.5em;overflow:hidden;}
.hide-after-2-lines{display:block;height:3em;overflow:hidden;}
.hide-after-3-lines{display:block;height:4.5em;overflow:hidden;}
.hide-after-4-lines{display:block;height:6em;overflow:hidden;}
.hide-after-5-lines{display:block;height:7.5em;overflow:hidden;}
.hide-after-6-lines{display:block;height:9em;overflow:hidden;}
.hide-after-7-lines{display:block;height:10.5em;overflow:hidden;}
.hide-after-8-lines{display:block;height:12em;overflow:hidden;}
.hide-after-9-lines{display:block;height:13.5em;overflow:hidden;}
.hide-after-10-lines{display:block;height:15em;overflow:hidden;}

@media screen and #{breakpoint(large)}{
	.grid-container .grid-container{padding-right: 1rem;padding-left: 1rem;}
}
@media screen and #{breakpoint(small only)}{
	.grid-container .grid-container{padding-right: 0.5rem;padding-left: 0.5rem;}
}