.section {
  display: block; position: relative;
  margin: 0; 
  padding: $section-padding 0;
  // background: $white;
  // text-align: center;
  text-align: inherit;
  &.center {  text-align: center; } 
	&.left {    text-align: left; }
	&.right {   text-align: right; }
  
  &.z, &.zindex, &.z-index { z-index: 1; }
    
    
  &.image {
    &.fixed { background-attachment: fixed; /* position: static; */ z-index: 88; }
    background-color: transparent;
  	background-position: center center;
  	background-repeat: no-repeat;
  	background-size: cover;
  	background-image: url('http://lorempixel.com/g/1200/500/nature/');
  }
    

    
    
  // 
	//   Header Section
	// 
	&.head {
		z-index: 2;
		background: $section-head-background;
		padding: $section-head-padding 0;
		h1, h2, .h1, .h2 {
			margin: 0; padding: 0;
			line-height: $section-head-line-height;
			font-size: $section-head-font-size;
			color: $brand-color;
			text-align: left;
			small { color: $section-head-small-color; }
		}
	}
	
    
	// 
	//   Sections with shine
	// 
    &.shine-top {
        z-index: 1;
        overflow: hidden;
        &:before {
            display: block; position: absolute; content: ""; z-index: 11;
            margin: 0; padding: 0;
            bottom: 100%; left: 10%; right: 10%; height: 100px;
            border-radius: 500px / 20px;
            box-shadow: 0 5px 20px 0 rgba(0,0,0,.23) ;
        }
    }
    &.shine-bottom {
        z-index: 1;
        overflow: hidden;
        &:after {
            display: block; position: absolute; content: ""; z-index: 11;
            margin: 0; padding: 0;
            top: 100%; left: 10%; right: 10%; height: 100px;
            border-radius: 500px / 20px ;
            box-shadow: 0 -5px 20px 0 rgba(0,0,0,.23) ;
        }
    }
    

	// 
	//   Border Stylez
	// 
  &.hard-top {
      border-top: solid 1px $main-border-color;
      @include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75) );
  }
	&.hard-bottom {
      border-bottom: solid 1px rgba(255,255,255,.75);
      @include box-shadow( inset 0 -1px 1px 0 $main-border-color );
  }
	&.hard-top.hard-bottom {
		@include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75), inset 0 -1px 1px 0 $main-border-color );
	}
	
	&.dotted-top {
      border-top: dotted 2px $gray-light;
      @include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75) );
  }
	&.dotted-bottom {
      border-bottom: dotted 2px $gray-light;
      @include box-shadow( 0 1px 1px 0 rgba(255,255,255,.75) );
  }
	&.dotted-top, &.dotted-bottom {
		@include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75), 0 1px 1px 0 rgba(255,255,255,.75) );
	}
	
	// 
	//   Section Sizes
	// 
	&.section-xs, &.sctn-xs, &.compact { padding-top: $section-xs-padding; padding-bottom: $section-xs-padding; }
	&.section-sm, &.sctn-sm, &.flatted, &.tight { padding-top: $section-sm-padding; padding-bottom: $section-sm-padding; }
	
	&.section-lg, &.sctn-lg, &.fat { padding-top: $section-lg-padding; padding-bottom: $section-lg-padding; }
	&.section-xl, &.sctn-xl, &.fatter { padding-top: $section-xl-padding; padding-bottom: $section-xl-padding; }
	&.section-xxl, &.sctn-xxl { padding-top: $section-xxl-padding; padding-bottom: $section-xxl-padding; }
	
	&.flat { padding-top: 0; padding-bottom: 0; }
	&.flat-top { padding-top: 0; }
  &.flat-bottom { padding-bottom: 0; }
	
	
	// 
	//   Section Colors
	// 
	background: $section-background;
	
  &.dark {
		background: $section-dark-background;
  }
  &.black {
		background: #333;
		color: #fff;
  }
	&.bright {
		background: $section-bright-background;
	}
	&.soft { 
		background: $section-soft-background; 
	}
  &.blank { background: transparent; }
  
  @each $clrName, $clrValue in $brandColorz {
    &.#{ $clrName } { background: $clrValue; }
  }
	
	// 
	//   Speech Section
	// 
	&.speech {
      &:after {
          display: block; position: absolute; content: "";
          margin: 0; padding: 0;
          width: 0; height: 0;
          border: solid 10px transparent;
          border-right:  solid 10px $section-background;
          border-bottom: solid 10px $section-background;
          bottom: -8px;
          left: 50%;
          margin-left: -8px;
          @include rotation( 45 );
          z-index: 99;
      }
      &.dark:after {
          border-right:  solid 10px $section-dark-background;
          border-bottom: solid 10px $section-dark-background;
      }
      &.bright:after {
          border-right:  solid 10px $section-bright-background;
          border-bottom: solid 10px $section-bright-background;
      }
      &.soft:after {
          border-right:  solid 10px $section-soft-background;
          border-bottom: solid 10px $section-soft-background;
      }
  }
	
	
	// 
	//   Rotated Sections
	// 
	&.rotated {
	    z-index: 99;
	    &:after, &:before {
            display: none; position: absolute; content: "";
            margin: 0; padding: 0;
            height: $section-padding * 1.4;
            left: -10%; right: -10%;
            z-index: -1;
            background: inherit;
        }
        &:before { top: -1 * $section-padding / 2; }
        &:after { bottom: -1 * $section-padding / 2; }
        
        &.top-left, &.top-right, &.both-left, &.both-right {
            &:before { display: block; }
        }
        &.bottom-left, &.bottom-right, &.both-left, &.both-right {
            &:after { display: block; }
        }
        
        
        &.top-left, &.both-left {
            &:before { @include rotation( 2 ); }
        }
        &.top-right, &.both-right {
            &:before { @include rotation( -2 ); }
        }
        &.bottom-left, &.both-left {
            &:after { @include rotation( 2 ); }
        }
        &.bottom-right, &.both-right {
            &:after { @include rotation( -2 ); }
        }
        
        
        
        // &.top-right:before { @include rotation( -2 ); }
        // &.bottom-right:after { @include rotation( -2 ); }
        
	}
	
}