framework.less

/////////////////////////////////////////////////////////////

// Config

/////////////////////////////////////////////////////////////

// Set width of content

@grid-width: 550px; // Sets the width of your content area on desktop devices


// Set column gutter between columns

@surrounding-gutter: 25px; // Sets the whitespace around your content
@column-gutter: 25px; // Sets the whitespace between collumns

// Setting breakpoints

@breakpoint-md: @grid-width; // Sets the first breakpoint, normally equals the desktop width of your content area
@breakpoint-sm: 480px; // Sets the breakpoint to target small devices
@breakpoint-xs: 320px; // Sets the breakpoint to target the smallest devices

// Set base font-size

@base-font-size: 16px; // Sets the base font size. All other font sizes are calculated from this size
@base-font-line-height: 1.52;
@base-whitespace: @column-gutter;

// Optional width for all content-wrappers
@content-full: auto; // Set to 100% to disable dynamic scaling to content. Otherwise, keep auto.

/////////////////////////////////////////////////////////////

// Reset styling

/////////////////////////////////////////////////////////////

BODY {margin:0;padding:0; height:100%; width:100%;}

IMG {
    display:block;
    outline: none;
    -attr-border: 0;
}

TABLE {
    -attr-cellspacing: 0;
    -attr-cellpadding: 0;
    -attr-border: 0;
    mso-cellspacing: 0;
    mso-padding-alt: 0;
    mso-table-lspace: 0;
    mso-table-rspace: 0;
    border: 0;
    TD {
        mso-table-lspace: 0;
        mso-table-rspace: 0;
        padding:0;


        &.content-box {
            &.padding {padding: 0.5 * @column-gutter!important;}

            &.padding-top {padding-top: 0.5 * @column-gutter!important;}
            &.padding-right {padding-right: 0.5 * @column-gutter!important;}
            &.padding-bottom {padding-bottom: 0.5 * @column-gutter!important;}
            &.padding-left {padding-left: 0.5 * @column-gutter!important;}

            &.h-padding {padding-left: (0.5 * @column-gutter)!important; padding-right: (0.5 * @column-gutter)!important;}
            &.v-padding {padding-top: (0.5 * @column-gutter)!important; padding-bottom: (0.5 * @column-gutter)!important;}

            /* --- */

            &.double-padding {padding: @column-gutter!important;}

            &.double-padding-top {padding-top: @column-gutter!important;}
            &.double-padding-right {padding-right: @column-gutter!important;}
            &.double-padding-bottom {padding-bottom: @column-gutter!important;}
            &.double-padding-left {padding-left: @column-gutter!important;}

            &.double-h-padding {padding-left: @column-gutter!important; padding-right: @column-gutter!important;}
            &.double-v-padding {padding-top: @column-gutter!important; padding-bottom: @column-gutter!important;}
        }

        &.grid-row{
            &.padding {padding: (0.5 * @column-gutter) ceil(@surrounding-gutter - (0.5 * @column-gutter)) (0.5 * @column-gutter) floor(@surrounding-gutter - (0.5 * @column-gutter))!important;}
            &.h-padding {padding-left:ceil(@surrounding-gutter - (0.5 * @column-gutter)); padding-right:floor(@surrounding-gutter - (0.5 * @column-gutter));}
            &.v-padding {padding-top:(0.5 * @column-gutter); padding-bottom:(0.5 * @column-gutter);}

            &.full-padding {padding:  (0.5 * @column-gutter) @surrounding-gutter!important;}
            &.full-h-padding {padding-left: @surrounding-gutter; padding-right: @surrounding-gutter;}
            &.full-v-padding {padding-top:  (0.5 * @column-gutter); padding-bottom: (0.5 * @column-gutter);}
        }
    }
}

@-ms-viewport {
    width: device-width;
}

// Remove margin on email wrapper in Android 4.4 KitKat
// See more at: https://blog.jmwhite.co.uk/2015/09/19/revealing-why-emails-appear-off-centre-in-android-4-4-kitkat
div[style*="margin: 16px 0"] {margin:0 !important; font-size:100% !important;}

#outlook a { padding: 0; }
.ReadMsgBody { width: 100%; } .ExternalClass { width: 100%; }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div, .ExternalClass * { line-height: 100%; }

/////////////////////////////////////////////////////////////

// Calculated

/////////////////////////////////////////////////////////////

// Calculate column widths (content-box-sizing)

@col-1: floor((@grid-width - (( 2 * @surrounding-gutter ) - @column-gutter)) / 12);
@col-2: (((@grid-width - (( 2 * @surrounding-gutter ) - @column-gutter)) / 12) * 2);
@col-3: (((@grid-width - (( 2 * @surrounding-gutter ) - @column-gutter)) / 12) * 3);
@col-4: (((@grid-width - (( 2 * @surrounding-gutter ) - @column-gutter)) / 12) * 4);
@col-5: (((@grid-width - (( 2 * @surrounding-gutter ) - @column-gutter)) / 12) * 5);
@col-6: (((@grid-width - (( 2 * @surrounding-gutter ) - @column-gutter)) / 12) * 6);
@col-7: (((@grid-width - (( 2 * @surrounding-gutter ) - @column-gutter)) / 12) * 7);
@col-8: (((@grid-width - (( 2 * @surrounding-gutter ) - @column-gutter)) / 12) * 8);
@col-9: (((@grid-width - (( 2 * @surrounding-gutter ) - @column-gutter)) / 12) * 9);
@col-10: (((@grid-width - (( 2 * @surrounding-gutter ) - @column-gutter)) / 12) * 10);
@col-11: (((@grid-width - (( 2 * @surrounding-gutter ) - @column-gutter)) / 12) * 11);
@col-12: floor(((@grid-width - (( 2 * @surrounding-gutter ) - @column-gutter)) / 12) * 12);
@col-hero: (@grid-width);
@col-gutter: @column-gutter;


// Calculate column widths (border-box-sizing)

@col-1-boxed: floor(@grid-width - ( 2 * @surrounding-gutter + @column-gutter) / 12);
@col-2-boxed: (((@grid-width - ( 2 * @surrounding-gutter + @column-gutter)) / 12) * 2 );
@col-3-boxed: (((@grid-width - ( 2 * @surrounding-gutter + @column-gutter)) / 12) * 3 );
@col-4-boxed: (((@grid-width - ( 2 * @surrounding-gutter + @column-gutter)) / 12) * 4 );
@col-5-boxed: (((@grid-width - ( 2 * @surrounding-gutter + @column-gutter)) / 12) * 5 );
@col-6-boxed: (((@grid-width - ( 2 * @surrounding-gutter + @column-gutter)) / 12) * 6 );
@col-7-boxed: (((@grid-width - ( 2 * @surrounding-gutter + @column-gutter)) / 12) * 7 );
@col-8-boxed: (((@grid-width - ( 2 * @surrounding-gutter + @column-gutter)) / 12) * 8 );
@col-9-boxed: (((@grid-width - ( 2 * @surrounding-gutter + @column-gutter)) / 12) * 9 );
@col-10-boxed: (((@grid-width - ( 2 * @surrounding-gutter + @column-gutter)) / 12) * 10 );
@col-11-boxed: (((@grid-width - ( 2 * @surrounding-gutter + @column-gutter)) / 12) * 11 );
@col-12-boxed: floor(((@grid-width - ( 2 * @surrounding-gutter + @column-gutter)) / 12) * 12);

/////////////////////////////////////////////////////////////

// Grid

/////////////////////////////////////////////////////////////

TABLE.body {
    -attr-width: 100%;
    width: 100%;
    TD.body-band {
        -attr-align: center;
    }
}

TABLE.grid {
    -attr-align: center;
    -attr-border: 0;
    border:0;
    TD.grid-row {
        text-align: center;
        vertical-align: top;
        font-size: 0;

        TABLE.content-box {
            -att-width:100%;
            width:100%;
        }
    }
}

TABLE.mso-col-container {
    -attr-width:unit(@col-12 + 2);

    TD.mso-col {
        font-size: 0;
        -attr-valign:top;
        &.col {

            &-1 {
                .mixin-grid-mso-column(@col-1);}
            &-2 {
                .mixin-grid-mso-column(@col-2);}
            &-3 {
                .mixin-grid-mso-column(@col-3);}
            &-4 {
                .mixin-grid-mso-column(@col-4);}
            &-5 {
                .mixin-grid-mso-column(@col-5);}
            &-6 {
                .mixin-grid-mso-column(@col-6);}
            &-7 {
                .mixin-grid-mso-column(@col-7);}
            &-8 {
                .mixin-grid-mso-column(@col-8);}
            &-9 {
                .mixin-grid-mso-column(@col-9);}
            &-10 {
                .mixin-grid-mso-column(@col-10);}
            &-11 {
                .mixin-grid-mso-column(@col-11);}
            &-12 {
                .mixin-grid-mso-column(@col-12);}
        }
    }
}

TABLE.mso-boxed-col-container {
    -attr-width:unit(@col-12-boxed + 2);

    TD.mso-boxed-col {
        font-size: 0;
        -attr-valign:top;
        &.boxed-col {

            &-1 {
                .mixin-grid-mso-column(@col-1-boxed);}
            &-2 {
                .mixin-grid-mso-column(@col-2-boxed);}
            &-3 {
                .mixin-grid-mso-column(@col-3-boxed);}
            &-4 {
                .mixin-grid-mso-column(@col-4-boxed);}
            &-5 {
                .mixin-grid-mso-column(@col-5-boxed);}
            &-6 {
                .mixin-grid-mso-column(@col-6-boxed);}
            &-7 {
                .mixin-grid-mso-column(@col-7-boxed);}
            &-8 {
                .mixin-grid-mso-column(@col-8-boxed);}
            &-9 {
                .mixin-grid-mso-column(@col-9-boxed);}
            &-10 {
                .mixin-grid-mso-column(@col-10-boxed);}
            &-11 {
                .mixin-grid-mso-column(@col-11-boxed);}
            &-12 {
                .mixin-grid-mso-column(@col-12-boxed);}
        }
    }
}

TABLE.mso-hero-container {
    -attr-width:unit(@grid-width + 2);
     TD.mso-col {
        font-size: 0;
        -attr-valign:top;
         &.col-hero {.mixin-grid-mso-column(@col-hero);}
    }
}

DIV.grid-col {
    display: inline-block;
    vertical-align: top;
    @media screen and (-webkit-min-device-pixel-ratio:0) { float:left; }
    &.col {

        &-1 {
            .mixin-grid-column(@col-1,@column-gutter);}
        &-2 {
            .mixin-grid-column(@col-2,@column-gutter);}
        &-3 {
            .mixin-grid-column(@col-3,@column-gutter);}
        &-4 {
            .mixin-grid-column(@col-4,@column-gutter);}
        &-5 {
            .mixin-grid-column(@col-5,@column-gutter);}
        &-6 {
            .mixin-grid-column(@col-6,@column-gutter);}
        &-7 {
            .mixin-grid-column(@col-7,@column-gutter);}
        &-8 {
            .mixin-grid-column(@col-8,@column-gutter);}
        &-9 {
            .mixin-grid-column(@col-9,@column-gutter);}
        &-10 {
            .mixin-grid-column(@col-10,@column-gutter);}
        &-11 {
            .mixin-grid-column(@col-11,@column-gutter);}
        &-12 {
            .mixin-grid-column(@col-12,@column-gutter);}

        &-hero {
            .mixin-hero-image(@col-hero,0);}
    }

    &.boxed-col {

        &-1 {
            .mixin-grid-column(@col-1-boxed,@column-gutter);}
        &-2 {
            .mixin-grid-column(@col-2-boxed,@column-gutter);}
        &-3 {
            .mixin-grid-column(@col-3-boxed,@column-gutter);}
        &-4 {
            .mixin-grid-column(@col-4-boxed,@column-gutter);}
        &-5 {
            .mixin-grid-column(@col-5-boxed,@column-gutter);}
        &-6 {
            .mixin-grid-column(@col-6-boxed,@column-gutter);}
        &-7 {
            .mixin-grid-column(@col-7-boxed,@column-gutter);}
        &-8 {
            .mixin-grid-column(@col-8-boxed,@column-gutter);}
        &-9 {
            .mixin-grid-column(@col-9-boxed,@column-gutter);}
        &-10 {
            .mixin-grid-column(@col-10-boxed,@column-gutter);}
        &-11 {
            .mixin-grid-column(@col-11-boxed,@column-gutter);}
        &-12 {
            .mixin-grid-column(@col-12-boxed,@column-gutter);}

        &-hero {
            .mixin-hero-image(@col-hero,0);}
    }


    TABLE.content-wrapper {
        -attr-align: center;
        width: @content-full;
        TD.content-wrapper {
            -attr-align: center;
        }
        TD.mso-col {
            -attr-align: center;
            text-align: center;
            vertical-align: top;
            font-size: 0;
        }
    }

    TABLE.content {
        TD.image {
            -attr-align: center;
            IMG {
                width:100%;
                height: auto;
            }
        }
        TD.text {
            -attr-width: 100%;
            -attr-align: center;
            mso-line-height-rule: exactly;
            padding-top: 0;
        }
        TD.preheader {
            -attr-width: 100%;
            -attr-align: center;
            mso-line-height-rule: exactly;
            padding-top: (0.25 * @base-whitespace);
            padding-bottom: ( 0.25 * @base-whitespace);
        }
    }
}

@media (max-width: @breakpoint-md) {
    .col {
        &-md {
            &-1 {.mixin-responsive-grid-column(1,@breakpoint-md);}
            &-2 {.mixin-responsive-grid-column(2,@breakpoint-md);}
            &-3 {.mixin-responsive-grid-column(3,@breakpoint-md);}
            &-4 {.mixin-responsive-grid-column(4,@breakpoint-md);}
            &-5 {.mixin-responsive-grid-column(5,@breakpoint-md);}
            &-6 {.mixin-responsive-grid-column(6,@breakpoint-md);}
            &-7 {.mixin-responsive-grid-column(7,@breakpoint-md);}
            &-8 {.mixin-responsive-grid-column(8,@breakpoint-md);}
            &-9 {.mixin-responsive-grid-column(9,@breakpoint-md);}
            &-10 {.mixin-responsive-grid-column(10,@breakpoint-md);}
            &-11 {.mixin-responsive-grid-column(11,@breakpoint-md);}
            &-12 {.mixin-responsive-grid-column(12,@breakpoint-md);}
        }
    }
}

@media (max-width: @breakpoint-sm) {
    .col-sm {
        &-1 {.mixin-responsive-grid-column(1,@breakpoint-sm);}
        &-2 {.mixin-responsive-grid-column(2,@breakpoint-sm);}
        &-3 {.mixin-responsive-grid-column(3,@breakpoint-sm);}
        &-4 {.mixin-responsive-grid-column(4,@breakpoint-sm);}
        &-5 {.mixin-responsive-grid-column(5,@breakpoint-sm);}
        &-6 {.mixin-responsive-grid-column(6,@breakpoint-sm);}
        &-7 {.mixin-responsive-grid-column(7,@breakpoint-sm);}
        &-8 {.mixin-responsive-grid-column(8,@breakpoint-sm);}
        &-9 {.mixin-responsive-grid-column(9,@breakpoint-sm);}
        &-10 {.mixin-responsive-grid-column(10,@breakpoint-sm);}
        &-11 {.mixin-responsive-grid-column(11,@breakpoint-sm);}
        &-12 {.mixin-responsive-grid-column(12,@breakpoint-sm);}
    }
}

@media (max-width: @breakpoint-xs) {
    .col-xs {
        &-1 {.mixin-responsive-grid-column(1,@breakpoint-xs);}
        &-2 {.mixin-responsive-grid-column(2,@breakpoint-xs);}
        &-3 {.mixin-responsive-grid-column(3,@breakpoint-xs);}
        &-4 {.mixin-responsive-grid-column(4,@breakpoint-xs);}
        &-5 {.mixin-responsive-grid-column(5,@breakpoint-xs);}
        &-6 {.mixin-responsive-grid-column(6,@breakpoint-xs);}
        &-7 {.mixin-responsive-grid-column(7,@breakpoint-xs);}
        &-8 {.mixin-responsive-grid-column(8,@breakpoint-xs);}
        &-9 {.mixin-responsive-grid-column(9,@breakpoint-xs);}
        &-10 {.mixin-responsive-grid-column(10,@breakpoint-xs);}
        &-11 {.mixin-responsive-grid-column(11,@breakpoint-xs);}
        &-12 {.mixin-responsive-grid-column(12,@breakpoint-xs);}
    }
}
/////////////////////////////////////////////////////////////

// Typography

/////////////////////////////////////////////////////////////

.content .text p, .content .text em, .content .text {
    margin:0 0 @base-whitespace 0;
    Margin:0 0 @base-whitespace 0;
    padding:0;
    font-size: @base-font-size;
    line-height: @base-font-line-height;
}

H1,
H1 A {
    .mixin-desktop-typography (3, 1.05);
    margin: 0;
    padding: 0;
}

H2,
H2 A {
    .mixin-desktop-typography (2.25, 1.25);
    margin: 0;
    padding: 0;
}

H3,
H3 A {
    .mixin-desktop-typography (1.75, 1.25);
    margin: 0;
    padding: 0;
}

H4,
H4 A,
H5,
H5 A {
    .mixin-desktop-typography (1.125, 1.22222);
    margin: 0 ;
    padding: 0;
}

ul, ol, li {
    padding: 0;
    Margin: 0;
    Margin: 5px 0 5px 5px;
}

@media (max-width: @breakpoint-md) {
    H1,H1 A {.mixin-responsive-typography (@breakpoint-md, 2.5, 1.125)!important;}
    H2,H2 A {.mixin-responsive-typography (@breakpoint-md, 2, 1.25)!important;}
    H3,H3 A {.mixin-responsive-typography (@breakpoint-md, 1.5, 1.25)!important;}
    H4,H4 A {.mixin-responsive-typography (@breakpoint-md, 1.125, 1.11111)!important;}
    H5,H5 A {.mixin-responsive-typography (@breakpoint-md, 1.125, 1.11111)!important;}
    .text p, .text em, .text {Margin: 0 0 @base-whitespace 0!important; .mixin-responsive-typography(@breakpoint-md, 1, @base-font-line-height)!important;}
}
@media (max-width: @breakpoint-sm) {
    H1,H1 A {.mixin-responsive-typography (@breakpoint-sm, 2, 1.25)!important;}
    H2,H2 A {.mixin-responsive-typography (@breakpoint-sm, 1.625, 1.15384615)!important;}
    H3,H3 A {.mixin-responsive-typography (@breakpoint-sm, 1.375, 1.13636364)!important;}
    H4,H4 A {.mixin-responsive-typography (@breakpoint-sm, 1.125, 1.11111)!important;}
    H5,H5 A {.mixin-responsive-typography (@breakpoint-sm, 1.125, 1.11111)!important;}
    .text p, .text em, .text {Margin: 0 0 (1.25 * (1 * @base-font-size) * 1px) 0; .mixin-responsive-typography(@breakpoint-sm, 1, 1.25)!important;}
}
@media (max-width: @breakpoint-xs) {
    H1,H1 A {.mixin-responsive-typography (@breakpoint-xs, 2, 1.25)!important;}
    H2,H2 A {.mixin-responsive-typography (@breakpoint-xs, 1.625, 1.15384615)!important;}
    H3,H3 A {.mixin-responsive-typography (@breakpoint-xs, 1.375, 1.13636364)!important;}
    H4,H4 A {.mixin-responsive-typography (@breakpoint-xs, 1.125, 1.22222)!important;}
    H5,H5 A {.mixin-responsive-typography (@breakpoint-xs, 1.125, 1.22222)!important;}
    .text p, .text em, .text { Margin: 0 0 (1.25 * (1.2 * @base-font-size) * 1px) 0; .mixin-responsive-typography(@breakpoint-xs, 1.1, 1.25)!important;}
}


/////////////////////////////////////////////////////////////

// Responsive Helper classes

/////////////////////////////////////////////////////////////
// These helper classes can be used to responsive behavior of content

.text-center {.mixin-text-center;}
.text-left {.mixin-text-left;}
.text-right {.mixin-text-right;}
.text-justify {.mixin-text-justify;}
.hidden {.mixin-hidden;}
.whitespace {Margin: (0.5 * @base-whitespace) 0;}

@media (max-width: @breakpoint-md) {
    .img-cover-md {.mixin-img-cover!important}
    .img-no-scale-md {.mixin-img-no-scale!important;}
    .img-down-scale-md {.mixin-img-down-scale!important;}
    .text-center-md {.mixin-text-center!important;}
    .text-left-md {.mixin-text-left!important;}
    .text-right-md {.mixin-text-right!important;}
    .text-justify-md {.mixin-text-justify!important;}
    .hidden-md {.mixin-hidden!important;}
    .whitespace-md {Margin: (0.5 * @base-whitespace) 0!important;}
}
@media (max-width: @breakpoint-sm) {
    .img-cover-sm {.mixin-img-cover!important;}
    .img-no-scale-sm {.mixin-img-no-scale!important;}
    .img-down-scale-sm {.mixin-img-down-scale!important;}
    .text-center-sm {.mixin-text-center!important;}
    .text-left-sm {.mixin-text-left!important;}
    .text-right-sm {.mixin-text-right!important;}
    .text-justify-sm {.mixin-text-justify!important;}
    .hidden-sm {.mixin-hidden!important;}
    .whitespace-sm {Margin: (0.5 * @base-whitespace) 0!important;}
}
@media (max-width: @breakpoint-xs) {
    .img-cover-xs {.mixin-img-cover!important;}
    .img-no-scale-xs {.mixin-img-no-scale!important;}
    .img-down-scale-xs {.mixin-img-down-scale!important;}
    .text-center-xs {.mixin-text-center!important;}
    .text-left-xs {.mixin-text-left!important;}
    .text-right-xs {.mixin-text-right!important;}
    .text-justify-xs {.mixin-text-justify!important;}
    .hidden-xs {.mixin-hidden!important;}
    .whitespace-xs {Margin: (0.5 * @base-whitespace) 0!important;}
}

.assistive{
    clip:rect(0, 0, 0, 0);
    width:1px;
    height:1px;
    max-height:1px;

    padding:0;
    margin:-1px;
    overflow:hidden;
    display:block;
    position:absolute;

    mso-hide:all;
}


/////////////////////////////////////////////////////////////

// Mixins

/////////////////////////////////////////////////////////////
// These mixin functions are meant simplify the code in this LESS file. Do not use them directly in your HTML.

.mixin-img-cover {
    object-fit:cover;
    overflow:hidden;
}
.mixin-img-no-scale {
    object-fit:none;
}
.mixin-img-down-scale {
    object-fit:scale-down;
}

.mixin-text-center {
    text-align: center;
}

.mixin-text-left {
    text-align: left;
}

.mixin-text-right {
    text-align: right;
}

.mixin-text-justify {
    text-align: justify;
}

.mixin-hidden {
    display: none;
}

.mixin-grid-column(@col-x, @gutter){
    max-width:@col-x;
    min-height:1px;
    width:@col-x;
    TD.content-wrapper {
        -attr-width: unit(@col-x);

        &.padding {
            padding: 0 ceil(0.5 * @gutter) 0 floor(0.5 * @gutter);
        }

        &.h-padding {padding-left:ceil(0.5 * @gutter); padding-right:floor(0.5 * @gutter);}
        &.v-padding {padding-left:ceil(0.5 * @gutter); padding-right:floor(0.5 * @gutter);}

        &.double-padding {
             padding: 0 @gutter 0 @gutter;
        }

        &.double-h-padding {padding-left:@gutter; padding-right:@gutter;}
        &.double-v-padding {padding-top:@gutter; padding-bottom:@gutter;}

        TABLE.content {
            width: 100%;
            TD.content {
                -attr-width: unit( ceil(@col-x - @gutter) );
            }
            TD.image IMG {
                -attr-width: unit( ceil(@col-x - @gutter) );
                max-width: ceil(@col-x - @gutter);
                width: ceil(@col-x - @gutter);
            }
        }
    }

    TD.content-wrapper.full-gutter-hor {
        border:blue;
        padding: 0 @column-gutter 0 @column-gutter;
        TABLE.content {
            TD.image IMG {
                -attr-width: unit( ceil(@col-x - 2 * @column-gutter) );
                max-width: ceil(@col-x - 2 * @column-gutter);
                width: ceil(@col-x - 2 * @column-gutter);
            }
        }
    }
}

.mixin-hero-image(@col-x, @gutter){
    max-width:@col-x;
    width:100%;
    TD.content-wrapper {
        -attr-width: unit(@col-x);
        padding: 0;
        TABLE.content {
            width: 100%;
            TD.content {
                -attr-width: unit( ceil(@col-x - @gutter) );
            }
            TD.image IMG {
                -attr-width: unit( ceil(@col-x - @gutter) );
                max-width: ceil(@col-x - @gutter);
                width:100%;
            }
        }
    }
}

.mixin-grid-mso-column(@col-x){
    -attr-width: unit(@col-x);
}

.mixin-responsive-grid-column (@col-x,@breakpoint){
    @width: unit( ((@col-x / 12 ) * 100), %);

    max-width: @width!important;
    width:@width!important;

    TABLE.content-wrapper {
        max-width:100%!important;
        width:100%!important;
    }

    .image {
        IMG {
            max-width:100%!important;
            width:100%!important;
            position:relative;
        }
    }
    .text {
        width:100%!important;
    }
}

.mixin-desktop-typography (@font-size, @line-height) {
    font-size: (@font-size * @base-font-size) * 1px;
    line-height: (@line-height * (@font-size * @base-font-size)) * 1px;
}

.mixin-responsive-typography (@breakpoint, @font-size, @line-height) {
    font-size: (@font-size * @base-font-size) * 1px;
    line-height: (@line-height * (@font-size * @base-font-size)) * 1px;
}