/*--------------------------------------------------
    [Font Family]
----------------------------------------------------*/

.font-family-base {
    font-family: 'Roboto', sans-serif !important;
}

.font-family-droid {
    font-family: 'Droid Serif', serif !important;
}


/*--------------------------------------------------
    [Wrapper]
----------------------------------------------------*/

/* Media Queries below 992px */
@media (min-width: $screen-md-min) {
    .wrapper {
        &.wrapper-top-space {
            margin-top: 90px;
        }
    }
}


/*--------------------------------------------------
    [Boxed Layout]
----------------------------------------------------*/

.boxed-layout-overlay {
    background: $color-sky-light;
}

.boxed-layout-overlay-img {
    background: url(../../assets/img/500x500/17.jpg) repeat;
}

.boxed-layout {
    max-width: 1200px;
    height: auto;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto !important;
    margin-right: auto !important;
    background: $color-white;
    @include clearfix;
}

/* Media Queries above 768px */
@media (min-width: $screen-sm-min) {
    .boxed-layout {
        width: 750px;
    }
}

/* Media Queries above 992px */
@media (min-width: $screen-md-min) {
   .boxed-layout {
        width: 970px;
   }
}

/* Media Queries above 1200px */
@media (min-width: $screen-lg-min) {
    .boxed-layout {
        width: 1170px;
    }
}


/*--------------------------------------------------
    [Full Width Container]
----------------------------------------------------*/

.full-width-container {
    position: relative;
    padding: 0;
    margin: 0;
    @include clearfix;
}


/*--------------------------------------------------
    [Container Extra Small]
----------------------------------------------------*/

.container-xs {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    @include clearfix;
}

/* Media Queries below 768px */
@media (min-width: $screen-sm-min) {
    .container-xs {
        width: 750px;
    }
}


/*--------------------------------------------------
    [Container Small]
----------------------------------------------------*/

.container-sm {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    @include clearfix;
}

/* Media Queries below 768px */
@media (min-width: $screen-sm-min) {
    .container-sm {
        width: 750px;
    }
}

/* Media Queries below 1200px */
@media (min-width: $screen-lg-min) {
    .container-sm {
        width: 970px;
    }
}


/*--------------------------------------------------
    [Clearfix]
----------------------------------------------------*/

.clearfix {
    @include clearfix;
}


/*--------------------------------------------------
    [Position]
----------------------------------------------------*/

.position-r { position: relative; }
.position-a { position: absolute; }
.position-s { position: static; }
.position-i { position: inherit; }


/*--------------------------------------------------
    [Overflow]
----------------------------------------------------*/

.overflow-h { overflow: hidden; }
.overflow-a { overflow: auto; }
.overflow-i { overflow: inherit; }


/*--------------------------------------------------
    [Display]
----------------------------------------------------*/

.display-none { display: none; }
.display-block { display: block; }
.display-inline { display: inline; }
.display-ib { display: inline-block; }
.display-inherit { display: inherit; }
.display-initial { display: initial; }

/* Media Queries under 992px */
@media (max-width: $screen-md-min) {
    .md-display-none { display: none; }
    .md-display-block { display: block; }
    .md-display-inline { display: inline; }
    .md-display-ib { display: inline-block; }
    .md-display-inherit { display: inherit; }
    .md-display-initial { display: initial; }
}

/* Media Queries under 768px */
@media (max-width: $screen-sm-min) {
    .sm-display-none { display: none; }
    .sm-display-block { display: block; }
    .sm-display-inline { display: inline; }
    .sm-display-ib { display: inline-block; }
    .sm-display-inherit { display: inherit; }
    .sm-display-initial { display: initial; }
}

/* Media Queries under 480px */
@media (max-width: $screen-xs-min) {
    .xs-display-none { display: none; }
    .xs-display-block { display: block; }
    .xs-display-inline { display: inline; }
    .xs-display-ib { display: inline-block; }
    .xs-display-inherit { display: inherit; }
    .xs-display-initial { display: initial; }
}


/*--------------------------------------------------
    [Text Align]
----------------------------------------------------*/

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Media Queries under 992px */
@media (max-width: $screen-md-min) {
    .md-text-center { text-align: center; }
    .md-text-left { text-align: left; }
    .md-text-right { text-align: right; }
}

/* Media Queries under 768px */
@media (max-width: $screen-sm-min) {
    .sm-text-center { text-align: center; }
    .sm-text-left { text-align: left; }
    .sm-text-right { text-align: right; }
}

/* Media Queries under 480px */
@media (max-width: $screen-xs-min) {
    .xs-text-center { text-align: center; }
    .xs-text-left { text-align: left; }
    .xs-text-right { text-align: right; }
}


/*--------------------------------------------------
    [Font Sizes]
----------------------------------------------------*/

.font-size-10 { @include font($size: $font-size-10 !important); }
.font-size-11 { @include font($size: $font-size-11 !important); }
.font-size-12 { @include font($size: $font-size-12 !important); }
.font-size-13 { @include font($size: $font-size-13 !important); }
.font-size-14 { @include font($size: $font-size-14 !important); }
.font-size-15 { @include font($size: $font-size-15 !important); }
.font-size-16 { @include font($size: $font-size-16 !important); }
.font-size-18 { @include font($size: $font-size-18 !important); }
.font-size-20 { @include font($size: $font-size-20 !important); }
.font-size-22 { @include font($size: $font-size-22 !important); }
.font-size-24 { @include font($size: $font-size-24 !important); }
.font-size-26 { @include font($size: $font-size-26 !important); }
.font-size-28 { @include font($size: $font-size-28 !important); }
.font-size-30 { @include font($size: $font-size-30 !important); }
.font-size-32 { @include font($size: $font-size-32 !important); }
.font-size-34 { @include font($size: $font-size-34 !important); }
.font-size-36 { @include font($size: $font-size-36 !important); }
.font-size-50 { @include font($size: $font-size-50 !important); }
.font-size-70 { @include font($size: $font-size-70 !important); }
.font-size-100 { @include font($size: $font-size-100 !important); }


/*--------------------------------------------------
    [Line Through]
----------------------------------------------------*/

.line-through {
    text-decoration: line-through;
}


/*--------------------------------------------------
    [Letter Spacing]
----------------------------------------------------*/

.letter-spacing-0 { letter-spacing: 0; }
.letter-spacing-1 { letter-spacing: $letter-spacing-1; }
.letter-spacing-2 { letter-spacing: $letter-spacing-2; }
.letter-spacing-3 { letter-spacing: $letter-spacing-3; }
.letter-spacing-4 { letter-spacing: $letter-spacing-4; }
.letter-spacing-5 { letter-spacing: $letter-spacing-5; }


/*--------------------------------------------------
    [Font Style]
----------------------------------------------------*/

.font-style-inherit {
    @include font($style: inherit !important);
}

.font-style-italic {
    @include font($style: italic !important);
}


/*--------------------------------------------------
    [Line Height]
----------------------------------------------------*/

.line-height-1 { line-height: $line-height-1; }
.line-height-base { line-height: $line-height-base; }
.line-height-2 { line-height: $line-height-2; }


/*--------------------------------------------------
    [Font Weight]
----------------------------------------------------*/

.fweight-200 { @include font($weight: $font-weight-200 !important); }
.fweight-300 { @include font($weight: $font-weight-300 !important); }
.fweight-400 { @include font($weight: $font-weight-400 !important); }
.fweight-500 { @include font($weight: $font-weight-500 !important); }
.fweight-600 { @include font($weight: $font-weight-600 !important); }
.fweight-700 { @include font($weight: $font-weight-700 !important); }


/*--------------------------------------------------
    [Background Position]
----------------------------------------------------*/

.bg-position-fixed {
    background-attachment: fixed !important;
    min-height: 100% !important;
}

.bg-position-center-top {
    background-size: cover !important;
    background-position: center top !important;
}

.bg-position-center-center {
    background-size: cover !important;
    background-position: center center !important;
}

.bg-position-center-bottom {
    background-size: cover !important;
    background-position: center bottom !important;
}


/*--------------------------------------------------
    [Border]
----------------------------------------------------*/

.border-1 {
    border: 1px solid $color-tint-light;
}

.border-top-1 {
    border-top: 1px solid $color-tint-light;
}

.border-bottom-1 {
    border-bottom: 1px solid $color-tint-light;
}


/*--------------------------------------------------
    [Full Width]
----------------------------------------------------*/

.full-width {
    @include size(100%, auto);
}


/*--------------------------------------------------
    [Vertical Center Aligned Block]
    Using CSS3 Translate3D
----------------------------------------------------*/

.ver-center-aligned-block {
    @include position(absolute, $top: 50%, $left: 0, $right: 0);
    @include translate3d(0,-50%,0);
}


/*--------------------------------------------------
    [Center Aligned Block]
    Using CSS3 Translate3D
----------------------------------------------------*/

.center-aligned-block {
    @include position(absolute, $top: 50%, $left: 50%);
    @include translate3d(-50%,-50%,0);
}


/*--------------------------------------------------
    [Center Aligned Block - above 768px]
----------------------------------------------------*/

.sm-center-aligned-block {
    @include position(absolute, $top: 50%, $left: 50%);
    @include translate3d(-50%,-50%,0);
}

@media (max-width: $screen-sm-min) {
    .sm-center-aligned-block {
        @include position(absolute, $top: 50%, $left: 0);
        @include translate3d(0,-50%,0);
    }
}


/*--------------------------------------------------
    [Center Aligned Block - above 992px]
----------------------------------------------------*/

.md-center-aligned-block {
    @include position(absolute, $top: 50%, $left: 50%);
    @include translate3d(-50%,-50%,0);
}

@media (max-width: $screen-md-min) {
    .md-center-aligned-block {
        @include position(absolute, $top: 50%, $left: 0);
        @include translate3d(0,-50%,0);
    }
}


/*--------------------------------------------------
    [Vertical Center Aligned Content]
    Set displays an element as in inline-level flex container
----------------------------------------------------*/

.center-content-ver-wrap {
    @include position(absolute, $top: 0);
    display: block;
    @include size(100%);
    overflow: hidden;
}

.center-content-ver-align {
    display: table;
    @include size(100%);
}

.center-content-ver-body {
    display: table-cell;
    float: none;
    text-align: center;
    vertical-align: middle;
}


/*--------------------------------------------------
    [Vertical Center Aligned Content above 768px]
    Set displays an element as in inline-level flex container
----------------------------------------------------*/

/* Media Queries above 768px */
@media (min-width: $screen-sm-min) {
    .center-content-ver-wrap-sm {
        @include position(absolute, $top: 0);
        display: block;
        @include size(100%);
        overflow: hidden;
    }

    .center-content-ver-align-sm {
        display: table;
        @include size(100%);
    }

    .center-content-ver-body-sm {
        display: table-cell;
        float: none;
        text-align: center;
        vertical-align: middle;
    }
}


/*--------------------------------------------------
    [Vertical Center Aligned Content above 992px]
    Set displays an element as in inline-level flex container
----------------------------------------------------*/

/* Media Queries above 992px */
@media (min-width: $screen-md-min) {
    .center-content-ver-wrap-md {
        @include position(absolute, $top: 0);
        display: block;
        @include size(100%);
        overflow: hidden;
    }

    .center-content-ver-align-md {
        display: table;
        @include size(100%);
    }

    .center-content-ver-body-md {
        display: table-cell;
        float: none;
        text-align: center;
        vertical-align: middle;
    }
}


/*--------------------------------------------------
    [Horizontal Center Aligned Content All Column]
    Set displays an element as in inline-level flex container
----------------------------------------------------*/

.center-content-hor-col-wrap {
    display: table;
    @include size(100%);
    vertical-align: middle;
}

.center-content-hor-col-align {
    display: table-cell;
    float: none;
    vertical-align: middle;
}


/*--------------------------------------------------
    [Horizontal Center Aligned Content above 768px]
    Set displays an element as in inline-level flex container
----------------------------------------------------*/

/* Media Queries above 768px */
@media (min-width: $screen-sm-min) {
    .center-content-hor-wrap-sm {
        display: table;
        @include size(100%);
        vertical-align: middle;
    }

    .center-content-hor-align-sm {
        display: table-cell;
        float: none;
        vertical-align: middle;

        &.center-content-hor-align-sm-width-xs {
            min-width: 150px;
        }

        &.center-content-hor-align-sm-width-sm {
            min-width: 250px;
        }

        &.center-content-hor-align-sm-width-md {
            min-width: 300px;
        }
    }
}

/* Media Queries below 768px */
@media (max-width: $screen-sm-min) {
    .center-content-hor-align-sm {
        display: block;
        text-align: center;
        margin: 0 auto;
        padding: 15px 0;
    }
}


/*--------------------------------------------------
    [Horizontal Center Aligned Content above 992px]
    Set displays an element as in inline-level flex container
----------------------------------------------------*/

@media (min-width: $screen-md-min) {
    .center-content-hor-wrap-md {
        display: table;
        @include size(100%);
        vertical-align: middle;
    }

    .center-content-hor-align-md {
        display: table-cell;
        float: none;
        vertical-align: middle;

        &.center-content-hor-align-md-width-xs {
            min-width: 150px;
        }

        &.center-content-hor-align-md-width-md {
            min-width: 250px;
        }

        &.center-content-hor-align-md-width-md {
            min-width: 300px;
        }
    }
}

/* Media Queries below 992px */
@media (max-width: $screen-md-min) {
    .center-content-hor-align-md {
        display: block;
        text-align: center;
        margin: 0 auto;
        padding: 15px 0;
    }
}


/*--------------------------------------------------
    [Center Aligned Block]
    Center align a block level element
----------------------------------------------------*/

.center-block {
    display: block;
    text-align: center;
    margin: 0 auto;
}


/*--------------------------------------------------
    [Content]
----------------------------------------------------*/

.content {
    padding-top: ($gutter * 4);
    padding-bottom: ($gutter * 4);
}
.content-sm {
    padding-top: ($gutter * 6);
    padding-bottom: ($gutter * 6);
}
.content-md {
    padding-top: ($gutter * 8);
    padding-bottom: ($gutter * 8);
}
.content-lg {
    padding-top: ($gutter * 10);
    padding-bottom: ($gutter * 10);
}


/*------------------------------------------------------------------
    [No padding, margin space]
------------------------------------------------------------------*/

.no-space {
    padding: 0 !important;
    margin: 0 !important;
}

/* No padding, margin space above 992px */
@media (min-width: $screen-md-min) {
    .md-no-space {
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* No Space in a row class */
.no-space-row {
    margin-right: 0;
    margin-left: 0;

    > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
}

/* 5px Space in a row class */
.space-row-5 {
    margin-right: -5px;
    margin-left: -5px;

    > [class*="col-"] {
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* 10px Space in a row class */
.space-row-10 {
    margin-right: -10px;
    margin-left: -10px;

    > [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }
}


/*------------------------------------------------------------------
    [Padding]
------------------------------------------------------------------*/

.padding-0 { padding: 0 !important; }
.padding-5 { padding: $gutter / 2 !important; }
.padding-10 { padding: $gutter !important; }
.padding-20 { padding: $gutter * 2 !important; }
.padding-30 { padding: $gutter * 3 !important; }
.padding-40 { padding: $gutter * 4 !important; }
.padding-50 { padding: $gutter * 5 !important; }
.padding-60 { padding: $gutter * 6 !important; }
.padding-70 { padding: $gutter * 7 !important; }
.padding-80 { padding: $gutter * 8 !important; }
.padding-90 { padding: $gutter * 9 !important; }
.padding-100 { padding: $gutter * 10 !important; }


/*------------------------------------------------------------------
    [Padding under 1200px]
------------------------------------------------------------------*/

@media (max-width: $screen-lg-min) {
    .lg-padding-10 { padding: $gutter !important; }
    .lg-padding-20 { padding: $gutter * 2 !important; }
    .lg-padding-30 { padding: $gutter * 3 !important; }
    .lg-padding-40 { padding: $gutter * 4 !important; }
    .lg-padding-50 { padding: $gutter * 5 !important; }
    .lg-padding-60 { padding: $gutter * 6 !important; }
    .lg-padding-70 { padding: $gutter * 7 !important; }
    .lg-padding-80 { padding: $gutter * 8 !important; }
    .lg-padding-90 { padding: $gutter * 9 !important; }
    .lg-padding-100 { padding: $gutter * 10 !important; }
}


/*------------------------------------------------------------------
    [Padding under 992px]
------------------------------------------------------------------*/

@media (max-width: $screen-md-min) {
    .md-padding-10 { padding: $gutter !important; }
    .md-padding-20 { padding: $gutter * 2 !important; }
    .md-padding-30 { padding: $gutter * 3 !important; }
    .md-padding-40 { padding: $gutter * 4 !important; }
    .md-padding-50 { padding: $gutter * 5 !important; }
    .md-padding-60 { padding: $gutter * 6 !important; }
    .md-padding-70 { padding: $gutter * 7 !important; }
    .md-padding-80 { padding: $gutter * 8 !important; }
    .md-padding-90 { padding: $gutter * 9 !important; }
    .md-padding-100 { padding: $gutter * 10 !important; }
}


/*------------------------------------------------------------------
    [Padding under 768px]
------------------------------------------------------------------*/

@media (max-width: $screen-sm-min) {
    .sm-padding-10 { padding: $gutter !important; }
    .sm-padding-20 { padding: $gutter * 2 !important; }
    .sm-padding-30 { padding: $gutter * 3 !important; }
    .sm-padding-40 { padding: $gutter * 4 !important; }
    .sm-padding-50 { padding: $gutter * 5 !important; }
    .sm-padding-60 { padding: $gutter * 6 !important; }
    .sm-padding-70 { padding: $gutter * 7 !important; }
    .sm-padding-80 { padding: $gutter * 8 !important; }
    .sm-padding-90 { padding: $gutter * 9 !important; }
    .sm-padding-100 { padding: $gutter * 10 !important; }
}


/*------------------------------------------------------------------
    [Padding under 480px]
------------------------------------------------------------------*/

@media (max-width: $screen-xs-min) {
    .xs-padding-10 { padding: $gutter !important; }
    .xs-padding-20 { padding: $gutter * 2 !important; }
    .xs-padding-30 { padding: $gutter * 3 !important; }
    .xs-padding-40 { padding: $gutter * 4 !important; }
    .xs-padding-50 { padding: $gutter * 5 !important; }
    .xs-padding-60 { padding: $gutter * 6 !important; }
    .xs-padding-70 { padding: $gutter * 7 !important; }
    .xs-padding-80 { padding: $gutter * 8 !important; }
    .xs-padding-90 { padding: $gutter * 9 !important; }
    .xs-padding-100 { padding: $gutter * 10 !important; }
}


/*------------------------------------------------------------------
    [Left & Right Padding]
------------------------------------------------------------------*/

.padding-lr-5 {
    padding-left: $gutter - 5 !important;
    padding-right: $gutter - 5 !important;
}

.padding-lr-10 {
    padding-left: $gutter !important;
    padding-right: $gutter !important;
}

.padding-lr-15 {
    padding-left: $gutter - 15 !important;
    padding-right: $gutter - 15 !important;
}

.padding-lr-20 {
    padding-left: $gutter * 2 !important;
    padding-right: $gutter * 2 !important;
}


/*------------------------------------------------------------------
    [Left margin]
------------------------------------------------------------------*/

.margin-l-5 { margin-left: $gutter - 5 !important; }
.margin-l-10 { margin-left: $gutter !important; }
.margin-l-20 { margin-left: $gutter * 2 !important; }
.margin-l-30 { margin-left: $gutter * 3 !important; }


/*------------------------------------------------------------------
    [Right margin]
------------------------------------------------------------------*/

.margin-r-5 { margin-right: $gutter - 5 !important; }
.margin-r-10 { margin-right: $gutter !important; }
.margin-r-20 { margin-right: $gutter * 2 !important; }
.margin-r-30 { margin-right: $gutter * 3 !important; }


/*------------------------------------------------------------------
    [Overlay Top margin]
------------------------------------------------------------------*/

.margin-t-o-10,
.margin-t-o-20,
.margin-t-o-30,
.margin-t-o-40,
.margin-t-o-50,
.margin-t-o-60,
.margin-t-o-70,
.margin-t-o-80,
.margin-t-o-90,
.margin-t-o-100 {
    position: relative;
    z-index: 1;
}

.margin-t-o-10 {
    margin-top: $gutter * -1 !important;
}
.margin-t-o-20 {
    margin-top: $gutter * -2 !important;
}
.margin-t-o-30 {
    margin-top: $gutter * -3 !important;
}
.margin-t-o-40 {
    margin-top: $gutter * -4 !important;
}
.margin-t-o-50 {
    margin-top: $gutter * -5 !important;
}
.margin-t-o-60 {
    margin-top: $gutter * -6 !important;
}
.margin-t-o-70 {
    margin-top: $gutter * -7 !important;
}
.margin-t-o-80 {
    margin-top: $gutter * -8 !important;
}
.margin-t-o-90 {
    margin-top: $gutter * -9 !important;
}
.margin-t-o-100 {
    margin-top: $gutter * -10 !important;
}


/*------------------------------------------------------------------
    [Overlay Left margin]
------------------------------------------------------------------*/

@media (min-width: $screen-sm-min) {
    .margin-l-o-10,
    .margin-l-o-20,
    .margin-l-o-30,
    .margin-l-o-40,
    .margin-l-o-50,
    .margin-l-o-60,
    .margin-l-o-70,
    .margin-l-o-80,
    .margin-l-o-90,
    .margin-l-o-100 {
        position: relative;
        z-index: 1;
    }

    .margin-l-o-10 {
        margin-left: $gutter * -1 !important;
    }
    .margin-l-o-20 {
        margin-left: $gutter * -2 !important;
    }
    .margin-l-o-30 {
        margin-left: $gutter * -3 !important;
    }
    .margin-l-o-40 {
        margin-left: $gutter * -4 !important;
    }
    .margin-l-o-50 {
        margin-left: $gutter * -5 !important;
    }
    .margin-l-o-60 {
        margin-left: $gutter * -6 !important;
    }
    .margin-l-o-70 {
        margin-left: $gutter * -7 !important;
    }
    .margin-l-o-80 {
        margin-left: $gutter * -8 !important;
    }
    .margin-l-o-90 {
        margin-left: $gutter * -9 !important;
    }
    .margin-l-o-100 {
        margin-left: $gutter * -10 !important;
    }
}


/*------------------------------------------------------------------
    [Overlay Right margin]
------------------------------------------------------------------*/

@media (min-width: $screen-sm-min) {
    .margin-r-o-10,
    .margin-r-o-20,
    .margin-r-o-30,
    .margin-r-o-40,
    .margin-r-o-50,
    .margin-r-o-60,
    .margin-r-o-70,
    .margin-r-o-80,
    .margin-r-o-90,
    .margin-r-o-100 {
        position: relative;
        z-index: 1;
    }

    .margin-r-o-10 {
        margin-right: $gutter * -1 !important;
    }
    .margin-r-o-20 {
        margin-right: $gutter * -2 !important;
    }
    .margin-r-o-30 {
        margin-right: $gutter * -3 !important;
    }
    .margin-r-o-40 {
        margin-right: $gutter * -4 !important;
    }
    .margin-r-o-50 {
        margin-right: $gutter * -5 !important;
    }
    .margin-r-o-60 {
        margin-right: $gutter * -6 !important;
    }
    .margin-r-o-70 {
        margin-right: $gutter * -7 !important;
    }
    .margin-r-o-80 {
        margin-right: $gutter * -8 !important;
    }
    .margin-r-o-90 {
        margin-right: $gutter * -9 !important;
    }
    .margin-r-o-100 {
        margin-right: $gutter * -10 !important;
    }
}


/*------------------------------------------------------------------
    [Top margin]
------------------------------------------------------------------*/

.margin-t-0 { margin-top: 0 !important; }
.margin-t-5 { margin-top: $gutter - 5 !important; }
.margin-t-10 { margin-top: $gutter !important; }
.margin-t-20 { margin-top: ($gutter * 2) !important; }
.margin-t-30 { margin-top: ($gutter * 3) !important; }
.margin-t-40 { margin-top: ($gutter * 4) !important; }
.margin-t-50 { margin-top: ($gutter * 5) !important; }
.margin-t-60 { margin-top: ($gutter * 6) !important; }
.margin-t-70 { margin-top: ($gutter * 7) !important; }
.margin-t-80 { margin-top: ($gutter * 8) !important; }
.margin-t-90 { margin-top: ($gutter * 9) !important; }
.margin-t-100 { margin-top: ($gutter * 10) !important; }


/*------------------------------------------------------------------
    [Bottom margin]
------------------------------------------------------------------*/

.margin-b-0 { margin-bottom: 0 !important; }
.margin-b-5 { margin-bottom: $gutter - 5 !important; }
.margin-b-10 { margin-bottom: $gutter !important; }
.margin-b-10 { margin-bottom: $gutter !important; }
.margin-b-20 { margin-bottom: ($gutter * 2) !important; }
.margin-b-30 { margin-bottom: ($gutter * 3) !important; }
.margin-b-40 { margin-bottom: ($gutter * 4) !important; }
.margin-b-50 { margin-bottom: ($gutter * 5) !important; }
.margin-b-60 { margin-bottom: ($gutter * 6) !important; }
.margin-b-70 { margin-bottom: ($gutter * 7) !important; }
.margin-b-80 { margin-bottom: ($gutter * 8) !important; }
.margin-b-90 { margin-bottom: ($gutter * 9) !important; }
.margin-b-100 { margin-bottom: ($gutter * 10) !important; }


/*------------------------------------------------------------------
    [Top margin below 1200px]
------------------------------------------------------------------*/

@media (max-width: $screen-lg-min) {
    .lg-margin-b-0 { margin-bottom: 0 !important; }
    .lg-margin-b-5 { margin-bottom: $gutter - 5 !important; }
    .lg-margin-b-10 { margin-bottom: $gutter !important; }
    .lg-margin-b-20 { margin-bottom: ($gutter * 2) !important; }
    .lg-margin-b-30 { margin-bottom: ($gutter * 3) !important; }
    .lg-margin-b-40 { margin-bottom: ($gutter * 4) !important; }
    .lg-margin-b-50 { margin-bottom: ($gutter * 5) !important; }
    .lg-margin-b-60 { margin-bottom: ($gutter * 6) !important; }
    .lg-margin-b-70 { margin-bottom: ($gutter * 7) !important; }
    .lg-margin-b-80 { margin-bottom: ($gutter * 8) !important; }
    .lg-margin-b-90 { margin-bottom: ($gutter * 9) !important; }
    .lg-margin-b-100 { margin-bottom: ($gutter * 10) !important; }
}


/*------------------------------------------------------------------
    [Top margin below 992px]
------------------------------------------------------------------*/

@media (max-width: $screen-md-min) {
    .md-margin-b-0 { margin-bottom: 0 !important; }
    .md-margin-b-5 { margin-bottom: $gutter - 5 !important; }
    .md-margin-b-10 { margin-bottom: $gutter !important; }
    .md-margin-b-20 { margin-bottom: ($gutter * 2) !important; }
    .md-margin-b-30 { margin-bottom: ($gutter * 3) !important; }
    .md-margin-b-40 { margin-bottom: ($gutter * 4) !important; }
    .md-margin-b-50 { margin-bottom: ($gutter * 5) !important; }
    .md-margin-b-60 { margin-bottom: ($gutter * 6) !important; }
    .md-margin-b-70 { margin-bottom: ($gutter * 7) !important; }
    .md-margin-b-80 { margin-bottom: ($gutter * 8) !important; }
    .md-margin-b-90 { margin-bottom: ($gutter * 9) !important; }
    .md-margin-b-100 { margin-bottom: ($gutter * 10) !important; }
}


/*------------------------------------------------------------------
    [Top margin below 768px]
------------------------------------------------------------------*/

@media (max-width: $screen-sm-min) {
    .sm-margin-b-0 { margin-bottom: 0 !important; }
    .sm-margin-b-5 { margin-bottom: $gutter - 5 !important; }
    .sm-margin-b-10 { margin-bottom: $gutter !important; }
    .sm-margin-b-20 { margin-bottom: ($gutter * 2) !important; }
    .sm-margin-b-30 { margin-bottom: ($gutter * 3) !important; }
    .sm-margin-b-40 { margin-bottom: ($gutter * 4) !important; }
    .sm-margin-b-50 { margin-bottom: ($gutter * 5) !important; }
    .sm-margin-b-60 { margin-bottom: ($gutter * 6) !important; }
    .sm-margin-b-70 { margin-bottom: ($gutter * 7) !important; }
    .sm-margin-b-80 { margin-bottom: ($gutter * 8) !important; }
    .sm-margin-b-90 { margin-bottom: ($gutter * 9) !important; }
    .sm-margin-b-100 { margin-bottom: ($gutter * 10) !important; }
}


/*------------------------------------------------------------------
    [Top margin below 480px]
------------------------------------------------------------------*/

@media (max-width: $screen-xs-min) {
    .xs-margin-b-0 { margin-bottom: 0 !important; }
    .xs-margin-b-5 { margin-bottom: $gutter - 5 !important; }
    .xs-margin-b-10 { margin-bottom: $gutter !important; }
    .xs-margin-b-20 { margin-bottom: ($gutter * 2) !important; }
    .xs-margin-b-30 { margin-bottom: ($gutter * 3) !important; }
    .xs-margin-b-40 { margin-bottom: ($gutter * 4) !important; }
    .xs-margin-b-50 { margin-bottom: ($gutter * 5) !important; }
    .xs-margin-b-60 { margin-bottom: ($gutter * 6) !important; }
    .xs-margin-b-70 { margin-bottom: ($gutter * 7) !important; }
    .xs-margin-b-80 { margin-bottom: ($gutter * 8) !important; }
    .xs-margin-b-90 { margin-bottom: ($gutter * 9) !important; }
    .xs-margin-b-100 { margin-bottom: ($gutter * 10) !important; }
}


/*--------------------------------------------------
    [Height]
----------------------------------------------------*/

.height-100 { height: ($gutter * 10) !important; }
.height-150 { height: ($gutter * 15) !important; }
.height-200 { height: ($gutter * 20) !important; }
.height-250 { height: ($gutter * 25) !important; }
.height-300 { height: ($gutter * 30) !important; }
.height-350 { height: ($gutter * 35) !important; }
.height-400 { height: ($gutter * 40) !important; }
.height-450 { height: ($gutter * 45) !important; }
.height-500 { height: ($gutter * 50) !important; }


/*--------------------------------------------------
    [Width]
----------------------------------------------------*/

.width-100 { width: ($gutter * 10) !important; }
.width-150 { width: ($gutter * 15) !important; }
.width-200 { width: ($gutter * 20) !important; }
.width-250 { width: ($gutter * 25) !important; }
.width-300 { width: ($gutter * 30) !important; }
.width-350 { width: ($gutter * 35) !important; }
.width-400 { width: ($gutter * 40) !important; }
.width-450 { width: ($gutter * 45) !important; }
.width-500 { width: ($gutter * 50) !important; }


/*--------------------------------------------------
    [Ul li padding left & right (default is 0 5px)]
----------------------------------------------------*/

.ul-li-lr-0 > li {
    padding-left: 0;
    padding-right: 0;
}
.ul-li-lr-1 > li {
    padding-left: 1px;
    padding-right: 1px;
}
.ul-li-lr-2 > li {
    padding-left: 2px;
    padding-right: 2px;
}
.ul-li-lr-3 > li {
    padding-left: 3px;
    padding-right: 3px;
}
.ul-li-lr-4 > li {
    padding-left: 4px;
    padding-right: 4px;
}
.ul-li-lr-5 > li {
    padding-left: 5px;
    padding-right: 5px;
}


/*--------------------------------------------------
    [Ul li padding top & bottom]
----------------------------------------------------*/

.ul-li-tb-0 > li {
    padding-top: 0;
    padding-bottom: 0;
}
.ul-li-tb-1 > li {
    padding-top: 1px;
    padding-bottom: 1px;
}
.ul-li-tb-2 > li {
    padding-top: 2px;
    padding-bottom: 2px;
}
.ul-li-tb-3 > li {
    padding-top: 3px;
    padding-bottom: 3px;
}
.ul-li-tb-4 > li {
    padding-top: 4px;
    padding-bottom: 4px;
}
.ul-li-tb-5 > li {
    padding-top: 5px;
    padding-bottom: 5px;
}


/*--------------------------------------------------
    [Border radius]
----------------------------------------------------*/

.radius-0 { @include border-radius(0 !important); }
.radius-3 { @include border-radius(3px !important); }
.radius-5 { @include border-radius(5px !important); }
.radius-6 { @include border-radius(6px !important); }
.radius-7 { @include border-radius(7px !important); }
.radius-8 { @include border-radius(8px !important); }
.radius-9 { @include border-radius(9px !important); }
.radius-10 { @include border-radius(10px !important); }
.radius-50 { @include border-radius(50px !important); }
.radius-circle { @include border-radius(50% !important); }