@charset "UTF-8";
@import "modular-scale";
@import "compass";

//  ==================
//  Offcanvas Settings
//  ==================

$offcanvas-width: 100%!default;
$offcanvas-left-width: $offcanvas-width;
$offcanvas-right-width: $offcanvas-width;
$offset--left: 100%!default;
$offset--right: 100%!default;
$offset--top: 12.5em!default;
$offset--bottom: 12.5em!default;
$offcanvas-content-reveal-left-offset: $offset--left!default;
$offcanvas-content-reveal-right-offset: $offset--right!default;

//content
$offset-content-wrap--left: 17em!default;
$offset-content-wrap--right: $offset-content-wrap--left!default;

// position
$offcanvas-enable-left:    true!default;
$offcanvas-enable-right:   true!default;
$offcanvas-enable-top:   false!default;
$offcanvas-enable-bottom:   false!default;
// style
$offcanvas-enable-overlay:   true!default;
$offcanvas-enable-push:   true!default;
$offcanvas-enable-reveal:   true!default;

$supportCSSTransforms:   true!default;
// z-index
$elements:  body-text,offcanvas-reveal,offcanvas-content-wrap,header,offcanvas-overlay,offcanvas,offcanvas-trigger,offcanvas-panel,offcanvas-btn,offcanvas-btn-active;

// https://material.google.com/motion/duration-easing.html#duration-easing-common-durations
$deceleration-curve: cubic-bezier(0.0, 0.0, 0.2, 1); //Easing out
$acceleration-curve: cubic-bezier(0.4, 0.0, 1, 1); // Easing in
$sharp-curve: cubic-bezier(0.4, 0.0, 0.6, 1);
$standard-curve: cubic-bezier(0.4, 0.0, 0.2, 1);

//  ================
//  Offcanvas Mixins
//  ================

//GPU acceleration
%u-ha {
  transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
%u-offcanvas-animate {
  transition: transform 300ms $sharp-curve;
}

%is-open {
  transform: translate3d(0,0,0);
  visibility: visible;
}

@mixin offcanvas($position:left, $offset:$offcanvas-width, $overlay:false, $reveal:$offcanvas-enable-reveal) {
  @if $position == 'left' {
    width: $offcanvas-left-width;
    transform: translate3d(-$offset,0,0);

    @if ($supportCSSTransforms == false) {

      &.c-offcanvas--support-no-transitions {
        left: -$offset--left;
          &.is-open {
            left: 0;

        }

      }

    }
  }
  @if ($position == 'right') {
    width: $offcanvas-right-width;
    right: 0;
    transform: translate3d($offset,0,0);
  } @else if ($position == 'top') {
    left: 0;
    right: 0;
    top: 0;
    height:$offset;
    min-height: auto;
    width:100%;
    transform: translate3d(0,-$offset,0);
  } @else if ( $position == 'bottom' ) {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    height:$offset;
    min-height: auto;
    width:100%;
    transform: translate3d(0,$offset,0);
  }
}


@mixin offcanvas-content($position:left,$offset:$offcanvas-width, $reveal:true) {
  @if ($reveal == true) {
    @if ($position == 'right') {
      &.is-open {
        transform: translate3d(-$offset,0,0);
      }
    }
    @if ($position == 'left') {
      &.is-open {
        transform: translate3d($offset,0,0);
      }
    }

  }
}

@mixin offcanvas-bg($position:left, $offset:$offcanvas-width) {

  @if ($position == 'right') {
    &.is-open {
      transform: translate3d(-$offset,0,0);
    }
  }
  @if ($position == 'left') {
    &.is-open {
      transform: translate3d($offset,0,0);
    }
  }
}

/**
 * Offcanvas-content-wrap
*/

.c-offcanvas-content-wrap {
  position: relative;
  z-index: index($elements, offcanvas-content-wrap);
  overflow: hidden;
}

/**
 * Offcanvas Panel
*/

.c-offcanvas {
  @extend %u-ha;
  @extend %u-offcanvas-animate;
  position: fixed;
  min-height: 100%;
  max-height: none;
  top: 0;
  display: block;
  background: #fff;
  overflow: hidden;

  &.is-open {
    @extend %is-open;
  }
  &--opening {
    transition-timing-function: $sharp-curve;
  }
  &.is-closed {
    //width: 0; IE10 BUG
    max-height: 100%;
    overflow: hidden;
    visibility: hidden;
    box-shadow: none;
  }

}

.c-offcanvas.is-scrollable {
  overflow-y: auto;
}

.c-offcanvas--overlay {
  z-index: index($elements, offcanvas);
}

.c-offcanvas--reveal {
  z-index: index($elements, offcanvas-reveal);
}

/**
 * Offcanvas BG-Overlay
*/

.c-offcanvas-bg {
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: index($elements, offcanvas-overlay);
  left: -100%;
  background-color: transparent;
  transition: background-color 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;

  &.is-animating,
  &.is-open {
    left: 0;
    background-color: hsla(0, 0%, 0%, 0.68);
    visibility: visible;
  }

  &.is-closed {visibility: hidden}
}

/**
 * Position Left
 *
*/

@if ($offcanvas-enable-left == true) {
  .c-offcanvas--left {
    height: 100%;
    @include offcanvas(left,$offset--left,$offcanvas-enable-overlay,$offcanvas-enable-push);
  }

  @if ($supportCSSTransforms == false) {

    .c-offcanvas.c-offcanvas--support-no-transitions {
      left: -$offset--left;

      .c-offcanvas--left{
        &.c-offcanvas--overlay,
        &.c-offcanvas--push,
        &.is-open {
          left: 0;
        }
      }

    }

  }
}

/**
 *  Position Right
 *
*/

@if ($offcanvas-enable-right == true) {

  .c-offcanvas--right {
    height: 100%;
    @include offcanvas(right,$offset--right,$offcanvas-enable-overlay,$offcanvas-enable-push);
  }
}

/**
 * Position Top
 *
*/

@if ($offcanvas-enable-top == true) {

  .c-offcanvas--top {
    @include offcanvas(top,$offset--top,$offcanvas-enable-overlay,$offcanvas-enable-push);
  }
}

/**
 * Position Bottom
 *
*/

@if ($offcanvas-enable-bottom == true) {

  .c-offcanvas--bottom {
    @include offcanvas(bottom,$offset--bottom,$offcanvas-enable-overlay,$offcanvas-enable-push);
  }
}

/**
 * Reveal
 *
*/

@if ($offcanvas-enable-reveal == true) {
  .c-offcanvas-content-wrap{
    @extend %u-ha;
    @extend %u-offcanvas-animate;
    z-index: index($elements, offcanvas-content-wrap);
  }
  
  .c-offcanvas-content-wrap--reveal {
    //Left
    @if ($offcanvas-enable-left == true) {
      &.c-offcanvas-content-wrap--left {
        @include offcanvas-content(left,$offcanvas-content-reveal-left-offset);
      }
    }
    // Right
    @if ($offcanvas-enable-right == true) {
      &.c-offcanvas-content-wrap--right {
        @include offcanvas-content(right,$offcanvas-content-reveal-right-offset);
      }
    }
  }
  
  .c-offcanvas--reveal{
    z-index: 0;
    transform: translate3d(0,0,0);
  }

  .c-offcanvas-bg.c-offcanvas-bg--reveal{
    @extend %u-offcanvas-animate;
    @if ($offcanvas-enable-left == true) {
      &.c-offcanvas-bg--left {
        @include offcanvas-bg(left,$offset--left);
      }
    }
    @if ($offcanvas-enable-right == true) {
      &.c-offcanvas-bg--right {
        @include offcanvas-bg(right,$offset--right);
      }
    }
  }
}

/**
 * Push
 *
*/
@if ($offcanvas-enable-push== true) {

  .c-offcanvas--push {
    z-index: index($elements, offcanvas);
    &--opening {
      transition-timing-function: $deceleration-curve;
    }
  }
  
  .c-offcanvas-content-wrap{
    @extend %u-ha;
    @extend %u-offcanvas-animate;
    z-index: index($elements, offcanvas-content-wrap);
  }
  
  .c-offcanvas-content-wrap--push {
    //Left
    @if ($offcanvas-enable-left == true) {
      &.c-offcanvas-content-wrap--left {
        @include offcanvas-content(left,$offcanvas-content-reveal-left-offset);
      }
    }
    // Right
    @if ($offcanvas-enable-right == true) {
      &.c-offcanvas-content-wrap--right {
        @include offcanvas-content(right,$offcanvas-content-reveal-right-offset);
      }
    }
  }

  .c-offcanvas-bg.c-offcanvas-bg--push{
    @extend %u-offcanvas-animate;
    @if ($offcanvas-enable-left == true) {
      &.c-offcanvas-bg--left {
        @include offcanvas-bg(left,$offset--left);
      }
    }
    @if ($offcanvas-enable-right == true) {
      &.c-offcanvas-bg--right {
        @include offcanvas-bg(right,$offset--right);
      }
    }
  }
}

//  ==================
//  Codepen
//  ==================

//Colors
   
$muted: hsl(0,0%,90%);
$muted--dark: darken($muted, 5%);
$muted--light: lighten($muted, 5%);
$muted--aa: hsl(0,0%,50%);
$muted--aaa: hsl(0,0%,46%);
$dark:hsl(0, 0%, 17%);

$red: #ff00cc;
$blue: #152027;
$blueLight: #333399;

$gray0: #fff;
$gray50: #fafafa;
$gray100: #f5f5f5;
$gray200: #eee;
$gray300: #e0e0e0;
$gray400: #bdbdbd;
$gray500: hsl(0, 0%, 62%);
$gray600: #757575;
$gray700: #616161;
$gray800: #424242;
$gray900: #212121;
$graphite: #282b2d;
$darkGraphite: #1c1c1e;
$silver: #f4f4f4;

%u-unstyled {
    margin: 0;
    padding:0;
    list-style: none;
}

// Mixins
@mixin hocus() {
    &:hover,
    &:focus {
        @content;
    }
}

@mixin hidden-visually() {
  position: absolute !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
}

// Utilities

.u-unstyled {
    @extend %u-unstyled;
}

.u-pos-relative {
  position: relative !important;
}

.u-hidden-visually {
  @include hidden-visually();
}
.u-transition-all {
    -webkit-transition: all 200ms cubic-bezier(0.23,1,.32,1) 0ms;
    transition: all 200ms cubic-bezier(0.23,1,.32,1) 0ms;
}

.u-text-center { text-align:center }

[tabindex="-1"]:focus {
    outline: 0;
}

// https://github.com/suitcss/components-grid/blob/master/lib/grid.css

.l-grid {
  box-sizing: border-box;
  display: flex;
  flex-flow: row wrap;
  margin: 0;
  padding: 0;
}


.l-grid__cell {
  box-sizing: inherit;
  flex-basis: 100%; 
  min-width: 0; 
}

//https://github.com/inuitcss/inuitcss/blob/develop/utilities/_utilities.widths.scss
@mixin inuit-widths($columns, $breakpoint: null) {
  @each $denominator in $columns {
    @for $numerator from 1 through $denominator {
      .u-size-#{$numerator}\/#{$denominator}#{$breakpoint} {
        width: ($numerator / $denominator) * 100% !important;
        flex-basis: auto !important;
      }
    }
  }

}
$inuit-columns: 3 4 !default;
@include inuit-widths($inuit-columns);

.l-wrapper {
  max-width: 552px;
  margin: 0 auto;
}



.c-button {
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-block;
    font: inherit;
    font-family: sans-serif;
    font-style: normal;
    margin: 0;
    padding: .4em 1em;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    user-select: none;
    white-space: normal;
    vertical-align: middle;
    min-width: 2.5rem;
    overflow: hidden;
    width: 100%;
    transition: color .1s,background-color .2s,box-shadow .28s cubic-bezier(0.4,0,.2,1);
    border-radius: .25rem;
    z-index: 1;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    &:hover,
    &:focus {
      outline: 0;
    }

    &:active,
    &.is-active {
      text-decoration: none;
      color: hsl(0, 0%, 20%);
      cursor: pointer;
      outline: 0;
    }

    &:focus:not(:hover){
      outline: 4px solid hsl(216, 90%, 88%);
    }
}


/**
 * Raised
 *
 */

.c-button--raised {
    background: #fafafa;  
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24), 0 1px 6px rgba(0, 0, 0, 0.12);
    &.c-button--iconOnly {box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23);}
	&:hover,
	&:active,
	&:focus {
        outline: 0
	}
	&:focus:active {
        transition-delay: 0s;
        outline: 0
	}
    &.is-clicked {
        box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2),0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
}


.c-button--paper {
    background: none;   
    
	&:hover {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
    }
    
	&:active,
	&:focus {
        box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
        outline: 0
	}
	&:focus:active {
        transition-delay: 0s;
        outline: 0
	}
    &.is-clicked {
        box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2),0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    
    .o-ripple {
        background: transparentize(#d1d1d1, 0.1)
    }
    
}

.c-button--iconOnly {
    
    width: 3.5em;
    height: 3.5em;
    padding: 0;
    .Icon { margin: 1em 0; }
    
}

.c-button--mini {    
    width: 2.75em;
    height: 2.75em;
    .Icon { margin: .625em 0 }
}

@mixin button($base-color,$text-color:white) {
	$dark-color: adjust-hue( darken( $base-color, 2% ), -1% );
	$light-color: lighten( $base-color, 7% );
	$highlight-color: transparentize( desaturate( lighten($base-color, 40% ), 50% ), 0.5 );
	$hover-color: saturate( darken($base-color, 4% ), 7% );
	
	color: $text-color;
	background-color: $base-color;
	
	
	&:hover,
	&:focus {
		@if $base-color != $dark  {
			color: $text-color;
			background-color: $hover-color;
		} @else {
			color: $text-color;
		background-color: $light-color;
		}
	}
	
	&:active,&.is-active {
		color: $text-color;
		background-color: $dark-color;
	}
}

.c-button--dark {
	@include button( $darkGraphite );
}
.c-button--soft {
    border-radius:13rem;       
}

.c-button--offcanvas {
    display: block;
    margin: 0;
    padding: .375em .75em .4em;
    padding-top: .375em;
    z-index: index($elements, header);
    position: absolute;
    top: 1.188em;  
  
  transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 300ms $sharp-curve;
  
    &.is-animating, 
    &.is-clicked, 
    &.is-active {  
      position: fixed;
      z-index: index($elements, offcanvas-btn-active);
    }
}

.c-button--offcanvas-left {
  left: 1.188em;
  
    &.is-active { 
        transform: translate3d(1em,0,0);
        background: $red;
    }
}

.c-button--offcanvas-right {
  right: 1.188em;
  
    &.is-active { 
        background: $blueLight;
    }
}

/**
 * Hamburger Menu Icon
 *
 *
*/


// hamburger Config
// ===============================================

$hamburger-color: #fff;
$hamburger-transition: .18s;
$hamburger-base: .618em;
$hamburger-space: $hamburger-base/4;
$hamburger-size: 2em;
$hamburger-radius: $hamburger-size/14;


// Hamburger Utilities
// ===============================================

@mixin hamburger_lines {
  display: block;
  height: 2px;
  background: $hamburger-color;
  transition: $hamburger-transition;
}
// Navicon Styles
// ===============================================


.o-hamburger {
  @include hamburger_lines;
  position: relative;
  &:before,
  &:after {
   @include hamburger_lines;
    position: absolute;
    left: 0;
    content: '';
    transform-origin:center;
    width: 100%;
  }
  &:before { top: 0.454em; }
  &:after { top: -0.454em; }
}

.c-button--hamburger {
  &.is-active {
    .o-hamburger {
      background: transparent;
      &:before,
      &:after {
        top: 0;
      }
      &:before { 
          transform: rotate3d(0, 0, 1, 45deg); 
      }
      &:after { 
          transform: rotate3d(0, 0, 1, -45deg); 
      }
    }
  }
}

body {
  overflow-x: hidden;  
  font-family: 'Source Sans Pro', sans-serif;
}

.c-offcanvas-content-wrap {
  @extend %u-ha;
  @extend %u-offcanvas-animate;
  transition-duration: 350ms;
  min-height:100vh;
  // http://uigradients.com/ Cosmic Fusion
  background: #ff00cc; 
  background: -webkit-linear-gradient(to left, #ff00cc , #333399); 
  background: linear-gradient(to left, #ff00cc , #333399); 
              
}

.c-offcanvas-content-wrap--left.is-open{
      transform: translate3d(10em,0,0);
}
.c-offcanvas-content-wrap--right.is-open{
      transform: translate3d(-10em,0,0);
}

a {
    cursor: pointer;
    text-decoration: none;
   // transition: all 0.3s linear;
    &:hover,
    &:focus {
      outline:none;
        text-decoration: underline;
    }
    &:active {
        text-decoration: none;
    }
}

.c-page {
  min-height:100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.c-page__title {
  font-size:5vw;
  color:hsla(0,0%,100%,0.9);
  em { 
    font-style:normal;
    font-weight:300
  }
}

.c-panel {
  color:#fff;  
  background: $blueLight;
}


.c-panel__content {
    height: 100vh;
    padding: 0;
    margin: 0;
}

.c-panel--red {
  background: $red;
}

.c-panel--animate-content {
  
  .c-panel__content { opacity:0}
  
  &.is-closed {
    .c-panel__content,
    .c-nav-primary__item,
    .c-nav-primary__links--border .c-nav-primary__item {      
      opacity:0
    }
    .c-nav-primary__links--border { border-color:transparent}
  }
  
  &.is-animating {
    .c-panel__content,
    .c-nav-primary__item {       
      opacity:0.25
    }    
    .c-nav-primary__links--border { 
      width:0;
      border-color:transparent;
      .c-nav-primary__item {       
        opacity:0;             
        transition-delay:1s
      }  
    }
  }
  
  
  &.is-open {
    .c-panel__content,
    .c-nav-primary__item,
    .c-nav-primary__links--border .c-nav-primary__item { opacity:1}
  }
  
}

.c-header {
    position: relative;
    padding: 5.625em 1.618em 5.625em;
}

.c-header__link {
  @include hocus() {
      -webkit-filter: drop-shadow(0 0 7px #ff00cc);
    filter: drop-shadow(0 0 7px #ff00cc);    
  }
}

.c-nav-primary {  
    position: relative;
    padding: 5.625em 1.618em 5.625em;
}
.c-nav-primary__item {
  display:block;
  font-weight: 900;
  color: inherit;
  font-size: 1.618em;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  
  @include hocus() {
    
    color: $red;
    text-decoration: none;
    text-shadow: 0 0 5px rgba(38, 38, 111, 0.38), 0 0 20px rgba(255, 0, 204, 0.62);
  }
}

.c-nav-primary__links--border {
  border-top:2px solid $red;
  padding-top:1em;
  margin-top:1em;
  transition: 0.2s border;
}

/////////////////////////////////////////////////////////
// Animation Default Settings                          //
/////////////////////////////////////////////////////////


// Base module settings
$base-duration					: 1s !default;           // used in 1-base module
$base-origin 					: top center !default;
$base-degrees 					: 30deg !default;        // used in lightspeed & special modules
$base-fill-mode					: both !default;
$base-iteration-count			: infinite !default;

$base-timing-function-in		: ease-in !default;
$base-timing-function-out		: ease-out !default;
$base-timing-function-in-out	: ease-in-out !default;
$base-distance					: 20px !default; 

@keyframes fadeInUp {
		0% {
			opacity: 0;
			transform: translateY($base-distance * 2);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}