$nec-primary : #ed5c01;


.no-js {
	
   #responsive-menu {
      display: none;
    }
  
}


h1, .h1 {
  font-size: 2.25rem;
  line-height: 2.25rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;

  @include breakpoint(small only){
	font-size:1.5rem;
  	line-height: 1.75rem;
  }
  
}

h2, .h2 {
    font-size: 1.75rem;
    line-height: 2.25rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
	
    @include breakpoint(small only)
	{
		position:relative;
		font-size:1.5rem;
		line-height: 1.5rem;
    }
}

h3, .h3 {
    font-size: 1.5rem;
    line-height: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
	
}

h4, .h4 {
  font-size: 1.25rem;
  line-height: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

h5, .h5 {
  font-size: 1rem;
  line-height: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 0;
  color:$black;
}

p, ul, ol, pre, table, blockquote {
  margin-top: 0rem;
  margin-bottom: 1.5rem;
}
ul ul, ol ol, ul ol, ol ul {
  margin-top: 0rem;
  margin-bottom: 0rem;
}

/* Let's make sure all's aligned */
hr, .hr {
  margin: -1px 0;
}

sub, sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}

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

/* 
 * 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;}


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


.row-default{
	position:relative;
	z-index:10;
	&.collapse-grid{
		overflow:hidden;
		@include breakpoint(small only){
			padding-left:0;
			padding-right:0;
		}
	}
	
}

.row-default.first-section{padding:0;margin:0;}

.large-line-right{position:relative;}
.large-line-right::after{
	content:"";border-right:solid 1px $light-gray;position:absolute;top:0;right:-3em;bottom:0;
	@include breakpoint(medium down){
		display:none;
	}
}


.collapse-grid > .grid-container{@include xy-grid-container(100%,0);}



#hide{display:none;}


/* 
 * Make a button hidden and extend click area to clostest relative parent
 */
.overlay-link{display:block;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;text-indent:-5000px;}


/* 
 * horizontal ruler
 */
.hr-devider{
	
	margin:1.5rem 0;
	hr{margin:0.75rem 0;border-bottom:dotted 2px $light-gray;}
	
	@include breakpoint(medium down)
	{
		margin:0;
	}
		
}

.button.white{background-color:$white;color:$secondary-color;}


#view-container{overflow:hidden;}
.row-default{
	
	// start positions
	.cell:not(.no-transition){
		opacity: 0;
		transition: opacity 250ms ease-out 0s,transform 250ms ease-out 0s;
		transform: translate3d(-3rem, 0px, 0px);
		backface-visibility: hidden;
		
	}

	// 4 column
	.cell.large-3:not(.no-transition){
		
		&:nth-child(1){transform: translate3d(-3rem, 0px, 0px);transition-delay: 100ms;}
		&:nth-child(2){transform: translate3d(-3rem, 0px, 0px);transition-delay: 200ms;}
		&:nth-child(3){transform: translate3d(-3rem, 0px, 0px);transition-delay: 300ms;}
		&:nth-child(4){transform: translate3d(-3rem, 0px, 0px);transition-delay: 400ms;}
	}
	
	.cell:nth-child(1):not(.no-transition){
		transform: translate3d(3rem, 0px, 0px);
		transition-delay: 100ms;
	}

	// move to default
	.cell.come-in{
		opacity: 1;
		transform: translate3d(0, 0, 0) !important;
	}
	
	// loaded and on screen
	.cell.already-visible {
		opacity:1;
		transition:none;
		transform: translate3d(0, 0, 0) !important;
	}

	
}

@keyframes come-in {
  to { transform: translateX(0); }
}