| 
						
						
							
								
							
						
						
					 | 
				
				 | 
				
					@ -15,12 +15,6 @@ | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
									margin: 0 auto; | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
								} | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
								.panel { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
									padding: 10px; | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
									background-color: #efefef; | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
									border: 1px dotted #cecece; | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
								} | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
								.header { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
									padding: 8px 0 0; | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
									background-color: #e9e9e9; | 
				
			
			
		
	
	
		
			
				
					| 
						
							
								
							
						
						
							
								
							
						
						
					 | 
				
				 | 
				
					@ -155,7 +149,7 @@ | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        <li class="group__item">third item</li> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    </ul> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					</nav></code></pre> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="panel margin-bottom-1x"> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="panel panel__inner margin-bottom-1x"> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    <nav class="group"> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        <ul class="group__section"> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					            <li class="group__item">first item</li> | 
				
			
			
		
	
	
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
				
				 | 
				
					@ -172,7 +166,7 @@ | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        <li class="group__item">third item</li> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    </ul> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					</nav></code></pre> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="panel"> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="panel panel__inner"> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    <nav class="group group--horizontal"> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        <ul class="group__section group__section--separate"> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					            <li class="group__item">first item</li><li class="group__item">second item</li><li class="group__item">third item</li> | 
				
			
			
		
	
	
		
			
				
					| 
						
							
								
							
						
						
							
								
							
						
						
					 | 
				
				 | 
				
					@ -386,13 +380,13 @@ toRem(10px 10px 0 0); | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    margin-top and -bottom from <strong>$crispy__margin</strong> as px. | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					</p> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<pre class="code"><div class="panel margin-bottom-0x">margin-bottom-0x</div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="panel margin-bottom-1x">margin-bottom-1x</div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="panel margin-bottom-2x">margin-bottom-2x</div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="panel margin-bottom-3x">margin-bottom-3x</div></code></pre> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="panel margin-bottom-0x">margin-bottom-0x</div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="panel margin-bottom-1x">margin-bottom-1x</div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="panel margin-bottom-2x">margin-bottom-2x</div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="panel margin-bottom-3x">margin-bottom-3x</div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="margin-bottom-1x">margin-bottom-1x</div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="margin-bottom-2x">margin-bottom-2x</div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="margin-bottom-3x">margin-bottom-3x</div></code></pre> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="panel panel__inner margin-bottom-0x">margin-bottom-0x</div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="panel panel__inner margin-bottom-1x">margin-bottom-1x</div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="panel panel__inner margin-bottom-2x">margin-bottom-2x</div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="panel panel__inner margin-bottom-3x">margin-bottom-3x</div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<!-- helpers / media --> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<h3 class="h4 margin-top-1x"> | 
				
			
			
		
	
	
		
			
				
					| 
						
							
								
							
						
						
							
								
							
						
						
					 | 
				
				 | 
				
					@ -430,13 +424,13 @@ toRem(10px 10px 0 0); | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    Width | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					</h3> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<pre class="code"><code><div class="panel width-25">width-25</div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="panel width-50">width-50</div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="panel width-75">width-75</div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="panel width-100">width-100</div></code></pre> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="panel width-25 margin-bottom-1x">width-25</div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="panel width-50 margin-bottom-1x">width-50</div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="panel width-75 margin-bottom-1x">width-75</div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="panel width-100 margin-bottom-1x">width-100</div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="width-50">width-50</div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="width-75">width-75</div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="width-100">width-100</div></code></pre> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="panel panel__inner width-25 margin-bottom-1x">width-25</div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="panel panel__inner width-50 margin-bottom-1x">width-50</div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="panel panel__inner width-75 margin-bottom-1x">width-75</div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<div class="panel panel__inner width-100 margin-bottom-1x">width-100</div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
										<!-- blockquote --> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
										<h3 class="h4 margin-top-2x margin-bottom-0x">blockquote</h3> | 
				
			
			
		
	
	
		
			
				
					| 
						
							
								
							
						
						
						
					 | 
				
				 | 
				
					
  |