//FONTS
$arial: Arial, serif, sans-serif;
$georgia: Georgia, "Times New Roman", serif;

//MIXINS
// ADDS A BROWSER PREFIX TO THE PROPERTY
@mixin css3-prefix($property, $value) {
    -webkit-#{$property}: #{$value};
    -khtml-#{$property}: #{$value};
    -moz-#{$property}: #{$value};
    -ms-#{$property}: #{$value};
    -o-#{$property}: #{$value};
    #{$property}: #{$value};
}
// TRANSFORM
@mixin transform($params) {
    @include css3-prefix('transform', $params);
}
//CSS FILTERS
@mixin filter($filter-type,$filter-amount) {
    -webkit-filter: $filter-type+unquote('(#{$filter-amount})');
    -moz-filter: $filter-type+unquote('(#{$filter-amount})');
    -ms-filter: $filter-type+unquote('(#{$filter-amount})');
    -o-filter: $filter-type+unquote('(#{$filter-amount})');
    filter: $filter-type+unquote('(#{$filter-amount})');
}
// TRANSITION
@mixin transition($what: all, $length: 1s, $easing: ease-in-out) {
    @include css3-prefix('transition', $what $length $easing);
}

$typekit-fonts:    "", "";  // index [1, 2]
$typekit-fallbacks:  $georgia, $arial;

@mixin font($weight: 400, $style: normal, $font: 1) {
    $font-weight: $weight;
    $font-style:  $style;

    // Translate Weight
    @if ($weight == 100) or ($weight == thin) or ($weight == ultralight) {
        $weight: 1;
    }
    @if ($weight == 200) or ($weight == extralight) {
        $weight: 2;
    }
    @if ($weight == 300) or ($weight == light) {
        $weight: 3;
    }
    @if ($weight == 400) or ($weight == normal) or ($weight == regular) {
        $weight: 4;
    }
    @if ($weight == 500) or ($weight == medium) {
        $weight: 5;
    }
    @if ($weight == 600) or ($weight == semibold) or ($weight == demi) {
        $weight: 6;
    }
    @if ($weight == 700) or ($weight == bold) {
        $weight: 7;
    }
    @if ($weight == 800) or ($weight == extrabold) {
        $weight: 8;
    }
    @if ($weight == 900) or ($weight == black) or ($weight == heavy) {
        $weight: 9;
    }

    // Translate Style
    @if $style == normal {
        $style: n;
    }
    @else if $style == italic {
        $style: i;
    }

    // Assemble $font-family
    $primary-font:   nth($typekit-fonts, $font) + "-" + $style + $weight;
    $secondary-font: nth($typekit-fonts, $font);
    $fallback-fonts: nth($typekit-fallbacks, $font);
    $font-family:    quote($primary-font), quote($secondary-font), $fallback-fonts;

    font-family: $font-family;
    font-style:  $font-style;
    font-weight: $font-weight;
}

@mixin font-size($psd-font-size, $psd-line-height) {
    font-size: $psd-font-size;
    line-height: ($psd-line-height)/$psd-font-size;
}

//VARIABLES
//Black
$black-100: 	rgba(0,0,0,1);
$black-90: 		rgba(0,0,0,0.9);
$black-80: 		rgba(0,0,0,0.8);
$black-70: 		rgba(0,0,0,0.7);
$black-60: 		rgba(0,0,0,0.6);
$black-50: 		rgba(0,0,0,0.5);
$black-40: 		rgba(0,0,0,0.4);
$black-30: 		rgba(0,0,0,0.3);
$black-20: 		rgba(0,0,0,0.2);
$black-10: 		rgba(0,0,0,0.1);

//White
$white-100: 	rgba(255,255,255,1);
$white-90: 		rgba(255,255,255,0.9);
$white-80: 		rgba(255,255,255,0.8);
$white-70: 		rgba(255,255,255,0.7);
$white-60: 		rgba(255,255,255,0.6);
$white-50: 		rgba(255,255,255,0.5);
$white-40: 		rgba(255,255,255,0.4);
$white-30: 		rgba(255,255,255,0.3);
$white-20: 		rgba(255,255,255,0.2);
$white-10: 		rgba(255,255,255,0.1);

//Invisible
$transparent: 	rgba(255,255,255,0);

$yellow: #fbdb45;

//ANIMATIONS stuff
$hover: all, 0.2s, ease-in;
$slide: all, 0.3s,  cubic-bezier(.55,0,.1,1);
$slide-slow: all, 0.5s,  cubic-bezier(.55,0,.1,1);
$zoom: all, 1s,  cubic-bezier(.55,0,.1,1);
$zoom-slow: all, 2.4s,  cubic-bezier(.55,0,.1,1);

//GRID
$max-width:        970px; // set page max-width
$column-width:     8.3333%;    // set column width
$gutter-width:     0%;     // set gutter width
$maximum-columns:  12;       // set max number of columns

@mixin clearfix {
    zoom: 1;

    &:before, &:after {
        content: "";
        display: table;
    }

    &:after {
        clear: both;
    }
}

@mixin border-box {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

@function columns($columns, $container-columns: $maximum-columns) {
    $width: $columns * $column-width;
    $container-width: $container-columns * $column-width;
    @return percentage($width / $container-width);
}

@function gutter($container-columns: $maximum-columns, $gutter: $gutter-width) {
    $container-width: $container-columns * $column-width + ($container-columns - 1) * $gutter-width;
    @return percentage($gutter / $container-width);
}

@function newgutter($columns, $container-columns: $maximum-columns) {
    $width: $columns * $column-width;
    $container-width: $container-columns * $column-width;
    @return percentage($width / $container-width / 2);
}


@function calcPercentage($a) {
    @return percentage($a);
}


@mixin nesting {
    padding: 0; // no padding so nested elements fit

    & > div { // affect only immediate children
        float: left;
        margin-right: gutter;
        @include border-box; // math is hard. let’s use border-box
    }
}

@mixin row {
    width: 100%; // make sure to fill its container
    max-width: $max-width; // but no more than our max width
    margin: 0 auto;
    @include clearfix; // clear our floats
    @include nesting; // add nesting styles to rows
}

@function offset-columns($columns) {
    $margin:
    $columns * $column-width + $columns * $gutter-width;
    @return $margin;
}

@mixin offset($columns, $from-direction: left) {
    @if $from-direction == left {
        float: left;
        margin-left: offset-columns($columns);
    }
    @if $from-direction == right {
        float: right;
        margin-right: offset-columns($columns);
    }
}

@mixin last {
    margin-right: 0;
    float: right;
}

/*****************************************************/
.container {
    margin-left: auto;
    margin-right: auto;
    width: $max-width;
    @include border-box;
}

.row {
    @include row();
}

$i: 1;
@while $i < ($maximum-columns + 1) {
    .col-#{$i} {
        width: columns($i);
        padding-left: gutter();
        padding-right: gutter();
    }
    $i: $i + 1;
}

//STYLE
.header {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;

    figure {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;

        img {
            position: absolute;
            top: 0;
            left: 50%;
            height: auto;
            width: 110%;
            @include transform(translateX(-50%));
        }
    }
}

.blur-emily {
    @include filter(blur, 12px);
}

.mask {
    position: absolute;
    display: block;
    background-color: lighten($black-100, 10%);
    z-index: 2;

    &.mask-top {
        top: 0;
        left: 0;
        width: 100%;
        height: 7%;
    }
    &.mask-bottom {
        bottom: 0;
        left: 0;
        width: 100%;
        height: 7%;
    }
    &.mask-left {
        left: 0;
        top: 0;
        height: 100%;
        width: 0;
    }
    &.mask-right {
        right: 0;
        top: 0;
        height: 100%;
        width: 0;
    }
}

.blur-mask {
    position: absolute;
    display: block;
    background-color: lighten($black-100, 10%);
    z-index: 2;

    &.mask-top {
        top: 0;
        left: 0;
        width: 100%;
        height: 5%;
    }
    &.mask-bottom {
        bottom: 0;
        left: 0;
        width: 100%;
        height: 5%;
    }
    &.mask-left {
        left: 0;
        top: 0;
        height: 100%;
        width: 50%;
    }
    &.mask-right {
        right: 0;
        top: 0;
        height: 100%;
        width: 50%;
    }
}

.trigger {
    position: absolute;
    top: 10%;
    right: 5%;
    display: block;
    width: 35px;
    height: 35px;
    border: 1px solid $white-100;
    z-index: 4;
    cursor: pointer;

    &:before {
        position: absolute;
        content: "";
        top: 0;
        right: 0;
        display: block;
        width: 100%;
        height: 100%;
        @include transform(scale(0.5));
        background-color: $yellow;
        @include transition($slide);
    }

    &:hover {
        &:before {
            @include transform(scale(0.45));
        }
    }
}

.text-row {
    padding: 15px 0;
    text-align: left;
    margin: 0 auto !important;
}

.title {
    display: inline-block;
    vertical-align: middle;
    font-family: $georgia;
    font-size: 78px;
    line-height: 1em;
    color: $white-100;
    opacity: 0;
    letter-spacing: 0.1em;

    &.uppercase {
        text-transform: uppercase;
    }
}

.subtitle {
    display: inline-block;
    vertical-align: middle;
    font-family: $georgia;
    font-size: 23px;
    line-height: 1em;
    color: $white-100;
    opacity: 0;
}

.line {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    max-width: 160px;
    margin: 0 60px 0 30px;

    span {
        height: 6px;
        display: block;
        width: 0;
        background-color: $yellow;
    }

    &.line-short {
        max-width: 40px;
    }
}

//GENERAL STUFF
html {
    height: 100% !important;
    width: 100%;
}

body {
    height: 100%;
    width: 100%;
    @include font(300, normal, 2);
    @include font-size(13px, 30px);
    color: $white-100;
    position: relative;
}

.main-wrapper {
    height: 100%;
    width: 100%;
    position: relative;
}
/*TABLE POSITIONING STUFF*/
.outer-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;

}

.outer {
    display: table;
    height: 100% !important;
    left: 0;
    min-height: 100%;
    position: absolute;
    right: 0;
    table-layout: fixed;
    top: 0;
    width: 100%;
    z-index: 2;

    .inner {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        width: 100%;
        position: relative;
    }
}