//variables
$num-of-modules: 12;
$module-width: 80px;
$gutter: 20px;
$desired-width: 1180px;
$layout-width: $desired-width;

$min-wdith: $layout-width + $gutter;

// create a flexible gutter
$flex-gutter: percentage($gutter/$layout-width);

@mixin grid($col-num, $gutter-num) {
    width: percentage((($module-width * $col-num)+($gutter * $gutter-num))/$layout-width);
}

@mixin device-grid($col-num, $gutter-num) {
    width: percentage((($module-width * $col-num)+(($gutter / 1.5) * $gutter-num))/$layout-width);
}

@mixin push($col-num, $gutter-num) {
    margin-left: percentage((($module-width * $col-num)+($gutter * $gutter-num))/$layout-width);
}

@mixin pull($col-num, $gutter-num) {
    margin-right: percentage((($module-width * $col-num)+($gutter * $gutter-num))/$layout-width);
}

@mixin elasticGrid($col-num, $gutter-num) {
    max-width: percentage((($module-width * $col-num)+($gutter * $gutter-num))/$layout-width);
}

@mixin bp($point) {
    @if $point == x-large-desktop  {
        @media only screen
        and (min-width: 1201px)
        { @content; }
    }
    @if $point == large-desktop  {
        @media only screen
        and (max-width: 1200px)
        { @content; }
    }
    @else if $point == desktop  {
        @media only screen
        and (max-width: 992px)
        { @content; }
    }
    @else if $point == small-desktop-nav  {
        @media only screen
        and (max-width: 825px)
        { @content; }
    }
    @else if $point == tablet {
        @media only screen
        and (max-width: 768px)
        { @content; }
    }
    @else if $point == mobile {
        @media only screen
        and (max-width: 480px)
        { @content; }
    }
    // @if $point == x-large-desktop  {
    //     @media (min-width: 2000px)
    //     { @content; }
    // }
    // @else if $point == large-desktop  {
    //     @media (min-width: 1180px)
    //     { @content; }
    // }
    // @else if $point == desktop  {
    //     @media (min-width: 980px)
    //     and (max-width: 1179px)
    //     { @content; }
    // }
    // @else if $point == small-desktop  {
    //     @media (min-width: 768px)
    //     and (max-width: 979px)
    //     { @content; }
    // }
    // @else if $point == tablet {
    //     @media (max-width: 767px)
    //     { @content; }
    // }
    // @else if $point == tabletP {
    //     @media (max-width: 767px)
    //     and (orientation : portrait)
    //     { @content; }
    // }
    // @else if $point == tabletL {
    //     @media (max-width: 767px)
    //     and (orientation : landscape)
    //     { @content; }
    // }
    // @else if $point == ipad {
    //     @media only screen
    //     and (min-device-width : 768px)
    //     and (max-device-width : 1024px)
    //     { @content; }
    // }
    // @else if $point == ipadL {
    //     @media only screen
    //     and (min-device-width : 768px)
    //     and (max-device-width : 1024px)
    //     and (orientation : landscape)
    //     { @content; }
    // }
    // @else if $point == ipadP {
    //     @media only screen
    //     and (min-device-width : 768px)
    //     and (max-device-width : 1024px)
    //     and (orientation : portrait)
    //     { @content; }
    // }
    // @else if $point == iphone {
    //     @media only screen
    //     and (min-device-width : 320px)
    //     and (max-device-width : 568px)
    //     { @content; }
    // }
    // @else if $point == mobile {
    //     @media (max-width: 590px)
    //     { @content; }
    // }
    //
    //

}

.container {

    .col {
        float: left;

        &:first-child {
            margin-right: $flex-gutter;
        }

        &.one {
            @include grid(1,0);

            &.elastic {
                @include elasticGrid(1,0);
            }
        }

        &.two {
            @include grid(2,1);

            &.elastic {
                @include elasticGrid(2,1);
            }
        }

        &.three {
            @include grid(3,2);

            &.elastic {
                @include elasticGrid(3,2);
            }
        }

        &.four {
            @include grid(4,3);

            &.elastic {
                @include elasticGrid(4,3);
            }
        }

        &.five {
            @include grid(5,4);

            &.elastic {
                @include elasticGrid(5,4);
            }
        }

        &.six {
            @include grid(6,5);

            &.elastic {
                @include elasticGrid(6,5);
            }
        }

        &.seven {
            @include grid(7,6);

            &.elastic {
                @include elasticGrid(7,6);
            }
        }

        &.eight {
            @include grid(8,7);

            &.elastic {
                @include elasticGrid(8,7);
            }
        }

        &.nine {
            @include grid(9,8);

            &.elastic {
                @include elasticGrid(9,8);
            }
        }

        &.ten {
            @include grid(10,9);

            &.elastic {
                @include elasticGrid(10,9);
            }
        }

        &.eleven {
            @include grid(11,10);

            &.elastic {
                @include elasticGrid(11,10);
            }
        }

        &.twelve {
            @include grid(12,11);

            &.elastic {
                @include elasticGrid(12,11);
            }

            &:first-child {
                margin-right: 0px;
            }
        }

        &.center {
            float: none;
             margin: 0 auto !important;
             position: relative;
             display: block;
        }

        &.last {
            float: right;
        }

        &.push-one {
            @include push(1,0);
        }

        &.push-two {
            @include push(2,1);
        }

        &.push-three {
            @include push(3,2);
        }

        &.push-four {
            @include push(4,3);
        }

        &.push-five {
            @include push(5,4);
        }

        &.push-six {
            @include push(6,5);
        }

        &.push-seven {
            @include push(7,6);
        }

        &.push-eight {
            @include push(8,7);
        }

        &.push-nine {
            @include push(9,8);
        }

        &.push-ten {
            @include push(10,9);
        }

        &.push-eleven {
            @include push(11,10);
        }

        &.push-twelve {
            @include push(12,11);
        }

        @include bp(mobile) { width: 100% !important;}

        &.tablet-full {
            // @include bp(tablet) { @include device-grid(12,11);}
            @include bp(ipad)   { @include device-grid(12,11);}

            &.push-one, &.push-two, &.push-three, &.push-four, &.push-five, &.push-six, &.push-seven, &.push-eight, &.push-nine, &.push-ten, &.push-eleven, &.push-twelve {
                // @include bp(tablet) { margin-left: 0px;}
                @include bp(ipad)   { margin-left: 0px;}
            }
        }

        &.tablet-half {
            // @include bp(tablet) { @include device-grid(6,5);}
            @include bp(ipad)   { @include device-grid(6,5);}

            &.push-one, &.push-two, &.push-three, &.push-four, &.push-five, &.push-six, &.push-seven, &.push-eight, &.push-nine, &.push-ten, &.push-eleven, &.push-twelve {
                // @include bp(tablet) { margin-left: 0px;}
                @include bp(ipad)   { margin-left: 0px;}
            }
        }

        &.tablet-half-modded {
            // @include bp(tablet) { @include grid(5,4);}
            @include bp(ipad)   { @include grid(5,4);}

            &.push-one, &.push-two, &.push-three, &.push-four, &.push-five, &.push-six, &.push-seven, &.push-eight, &.push-nine, &.push-ten, &.push-eleven, &.push-twelve {
                // @include bp(tablet) { margin-left: 0px;}
                @include bp(ipad)   { margin-left: 0px;}
            }
        }

        &.tablet-one-third {
            // @include bp(tablet) { @include grid(4,3);}
            @include bp(ipad)   { @include grid(4,3);}
        }

        &.tablet-two-thirds {
            // @include bp(tablet) { @include grid(8,7);}
            @include bp(ipad)   { @include grid(8,7);}
        }

        &.tablet-one-fourth {
            @include bp(tablet) { @include grid(3,2);}
            @include bp(ipad)   { @include grid(3,2);}
        }

        &.tablet-three-fourths {
            // @include bp(tablet) { @include grid(9,8);}
            @include bp(ipad)   { @include grid(9,8);}
        }

        &.mobile-full {
            // @include bp(mobile) { @include device-grid(12,11);}
            @include bp(iphone) { @include device-grid(12,11);}

            &.push-one, &.push-two, &.push-three, &.push-four, &.push-five, &.push-six, &.push-seven, &.push-eight, &.push-nine, &.push-ten, &.push-eleven, &.push-twelve {
                // @include bp(tablet) { margin-left: 0px;}
                @include bp(iphone)   { margin-left: 0px;}
            }
        }

        &.mobile-half {
            // @include bp(mobile) { @include device-grid(6,5);}
            @include bp(iphone) { @include device-grid(6,5);}
        }

        &.mobile-one-third {
            // @include bp(mobile) { @include grid(4,3);}
            @include bp(iphone)   { @include grid(4,3);}
        }

        &.mobile-two-thirds {
            // @include bp(mobile) { @include grid(8,7);}
            @include bp(iphone)   { @include grid(8,7);}
        }

        &.mobile-one-fourth {
            // @include bp(mobile) { @include grid(3,2);}
            @include bp(iphone)   { @include grid(3,2);}
        }

        &.mobile-three-fourths {
            // @include bp(mobile) { @include grid(9,8);}
            @include bp(iphone)   { @include grid(9,8);}
        }
    }

    .col.one {

        & + .col.one {
            margin-right: $flex-gutter;

            &:last-child {
                margin-right: 0px;
            }
        }
    }

    .col.three {

        & + .col.three {
            margin-right: $flex-gutter;

            &:last-child {
                margin-right: 0px;
            }
        }
    }
}