/* Univeral responsive grid - Made in Britain with Love by Mark Foxx */
* {
    margin: 0;
    padding: 0;
}

*, *::after, *::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body,html { /* change font-family in base CSS */
    width: 100vw;
    height: 100vh;
    font-size: 16px;
    line-height: 1.428;
    font-family: sans-serif, arial;
}

@font-face {
    font-family: sans-serif, arial;
    font-display: swap;
}

article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary { /* HTML5 recognition */
    display: block; 
}

audio,canvas,video {
  display: inline-block;
}

img,video,embed,canvas { /* maxium width */
    max-width: 100%; 
    height: auto;
}

/* header, and paragraph: color default */
p, h1, h2, h3, h4, h5, h6, {color: #212121;}

/* font sizes - via root */
.mx-text-14 { font-size: .875em;}
.mx-text-18 { font-size: 1.125em;}
.mx-text-16 { font-size: 1em;}
.mx-text-24 { font-size: 1.5em;}
.mx-text-32 { font-size: 2em;}
.mx-text-36 { font-size: 2.25em;}
.mx-text-48 { font-size: 3em;}

/* suggested for h1 to h6 */
.mx-small { 
    color: #a9a9a9; 
    font-size: 85%;
}

/* informative text */
.mx-info-text {
    display: inline-block;
    color: #a9a9a9;
    margin-bottom: 0.625em;
}

/* miscellaneous shadows */
.mx-box-shadow-1 { /* panel box shadow */
    box-shadow: 0 6px 15px rgba(0,0,0,.6);
}

.mx-box-shadow-2 { /* card box shadow */
    box-shadow: 0 3px 10px rgba(0,0,0,.4);
}

.mx-box-shadow-3 { /* header box shadow */
    box-shadow: 0 3px 10px rgba(0,0,0,.7);
}

/* border radius */
.mx-radius-1 {border-radius: 1px; }
.mx-radius-2 {border-radius: 2px; }
.mx-radius-3 {border-radius: 3px; }
.mx-radius-4 {border-radius: 4px; }
.mx-radius-5 {border-radius: 5px; }
.mx-radius-6 {border-radius: 6px; }
.mx-radius-7 {border-radius: 7px; }
.mx-radius-8 {border-radius: 8px; }
.mx-radius-9 {border-radius: 9px; }
.mx-radius-10 {border-radius: 10px; }
.mx-radius-circle {border-radius: 50%; }

/* font weight */
.mx-font-weight-1 {font-weight: 100;}
.mx-font-weight-2 {font-weight: 200;}
.mx-font-weight-3 {font-weight: 300;}
.mx-font-weight-4 {font-weight: 400;}
.mx-font-weight-5 {font-weight: 500;}
.mx-font-weight-6 {font-weight: 600;}
.mx-font-weight-7 {font-weight: 700;}
.mx-font-weight-8 {font-weight: 800;}
.mx-font-weight-9 {font-weight: 900;}

.mx-font-init {font-weight: initial;}
.mx-font-bolder {font-weight: bolder;}
.mx-font-normal {font-weight: normal;}
.mx-font-lighter {font-weight: lighter;}
.mx-bold, .mx-font-bold, .mx-table th {font-weight: bold;}

/* text alignment classes */
.mx-just-left {text-align: left;}
.mx-just-justify {text-align: justify;}
.mx-just-center {text-align: center;}
.mx-just-right {text-align: right;}

/* text transform classes */
.mx-txtt-upper {text-transform: uppercase;}
.mx-txtt-lower {text-transform: lowercase;}
.mx-txtt-ucaps {text-transform: capitalize;}
.mx-txtt-none {text-transform: none;}

/* text decoration classes */
.mx-txtd-uline {text-decoration: underline;}
.mx-txtd-oline {text-decoration: overline;}
.mx-txtd-sline {text-decoration: line-through;}
.mx-txtd-none {text-decoration: none;}

/* letter spacing classes */
.mx-lspace-1 {letter-spacing: 1px;}
.mx-lspace-2 {letter-spacing: 2px;}
.mx-lspace-3 {letter-spacing: 3px;}
.mx-lspace-4 {letter-spacing: 4px;}
.mx-lspace-5 {letter-spacing: 5px;}
.mx-lspace-6 {letter-spacing: 6px;}
.mx-lspace-7 {letter-spacing: 7px;}
.mx-lspace-8 {letter-spacing: 8px;}
.mx-lspace-9 {letter-spacing: 9px;}
.mx-lspace-10 {letter-spacing: 10px;}

/* word spacing classes */
.mx-wspace-1 {word-spacing: 1px;}
.mx-wspace-2 {word-spacing: 2px;}
.mx-wspace-3 {word-spacing: 3px;}
.mx-wspace-4 {word-spacing: 4px;}
.mx-wspace-5 {word-spacing: 5px;}
.mx-wspace-6 {word-spacing: 6px;}
.mx-wspace-7 {word-spacing: 7px;}
.mx-wspace-8 {word-spacing: 8px;}
.mx-wspace-9 {word-spacing: 9px;}
.mx-wspace-10 {word-spacing: 10px;}

/* miscellaneous text/selection/diplay classes */
.mx-hide { /* hiding elements global */
    display: none;
}

.mx-border-liner {
    border-bottom: 1px solid rgba(216,214,214,.9);
}

.mx-select-none { /* prevention of user selecting text */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; 
}

.mx-text-truncate { /* truncate text @ parent dimensions */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* background classes */
.mx-size-cover { /* retains aspect ratio; clips content */
    background: cover;
}

.mx-size-contain {
/* retains aspect ratio; scales to fit */
    background: contain;
}

.mx-size-stretch {
/* loses aspect ratio; stretch to fit */
    background-size: 100% 100%; 
}

.mx-flex {
/* flexibility box block */
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}

.mx-flex-in { /* flexibility box inline */
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: inline-flex;
}

/* flex wrap */
.mx-flex-wrap {
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap; 
}

.mx-flex-nowrap {
    -webkit-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    flex-wrap: nowrap; 
}

.mx-flex-rwrap {
    -webkit-flex-wrap: wrap-reverse;
    -moz-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse; 
}

/* flex directions */
.mx-flex-row { /* default flex direction row */
    -webkit-flex-direction: row; 
    -moz-flex-direction: row;
    flex-direction: row;
}

.mx-flex-rrow { /* flex direction row reverse */
    -webkit-flex-direction: row-reverse; 
    -moz-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.mx-flex-column { /* flex direction column */
    -webkit-flex-direction: column; 
    -moz-flex-direction: column;
    flex-direction: column;
}

.mx-flex-rcolumn { /* flex direction column reverse*/
    -webkit-flex-direction: column-reverse; 
    -moz-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

.mx-flex-just-start { /* default: pos. @ start of container */
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

.mx-flex-just-end { /* pos. @ end of container || right */
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.mx-flex-just-center { /* pos. @ center of the container */
    -webkit-justify-content: center;
    justify-content: center;
}

.mx-flex-just-around { /* pos. with space ^ ... $ the lines */
    -webkit-justify-content: space-around;
    justify-content: space-around;
}

.mx-flex-just-between { /* pos. with space between the lines */
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.mx-flex-align-stretch { /* align items stretch is default */
    -webkit-align-items: stretch;
    align-items: stretch;
}

.mx-flex-align-center { /* align items center of container */
    -webkit-align-items: center;
    align-items: center;
}

.mx-flex-align-start { /* align items start of container */
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

.mx-flex-align-end { /* align items end of container */
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

.mx-flex-align-base { /* align items baseline of container */
    -webkit-align-items: baseline;
    align-items: baseline;
}

.mx-flex-content-stretch { /* align content stretch is default */
    -webkit-align-content: stretch;
    align-content: stretch;
}

.mx-flex-content-center { /* align content center */
    -webkit-align-content: center;
    align-content: center;
}

.mx-flex-content-start { /* align content start of container */
    -webkit-align-content: flex-start;
    align-content: flex-start;
}

.mx-flex-content-end { /* align content end */
    -webkit-align-content: end;
    align-content: end;
}

.mx-flex-content-base { /* align content baseline of container */
    -webkit-align-content: baseline;
    align-content: baseline;
}

.mx-flex-self-stretch { /* align items center of container */
    -webkit-align-self: stretch;
    align-self: stretch;
}

.mx-flex-self-center { /* align items center of container */
    -webkit-align-self: center;
    align-self: center;
}

.mx-flex-self-start { /* align items start of container */
    -webkit-align-self: flex-start;
    align-self: flex-start;
}

.mx-flex-self-end { /* align items end of container */
    -webkit-align-self: flex-end;
    align-self: flex-end;
}

.mx-flex-self-base { /* align items baseline of container */
    -webkit-align-self: baseline;
    align-self: baseline;
}

/* flex basis commons */
.mx-flex-base-1 {  
    -webkit-flex-basis: 10%;
    -moz-flex-basis: 10%;
    flex-basis: 10%;
}

.mx-flex-base-2 {  
    -webkit-flex-basis: 20%;
    -moz-flex-basis: 20%;
    flex-basis: 20%;
}

.mx-flex-base-3 {  
    -webkit-flex-basis: 30%;
    -moz-flex-basis: 30%;
    flex-basis: 30%;
}

.mx-flex-base-4 {  
    -webkit-flex-basis: 40%;
    -moz-flex-basis: 40%;
    flex-basis: 40%;
}

.mx-flex-base-5 {  
    -webkit-flex-basis: 50%;
    -moz-flex-basis: 50%;
    flex-basis: 50%;
}

.mx-flex-base-6 {  
    -webkit-flex-basis: 60%;
    -moz-flex-basis: 60%;
    flex-basis: 60%;
}

.mx-flex-base-7 {  
    -webkit-flex-basis: 70%;
    -moz-flex-basis: 70%;
    flex-basis: 70%;
}

.mx-flex-base-8 {  
    -webkit-flex-basis: 80%;
    -moz-flex-basis: 80%;
    flex-basis: 80%;
}

.mx-flex-base-9 {  
    -webkit-flex-basis: 90%;
    -moz-flex-basis: 90%;
    flex-basis: 90%;
}

.mx-flex-base-10 {  
    -webkit-flex-basis: 100%;
    -moz-flex-basis: 100%;
    flex-basis: 100%;
}

/* flex orders */
.mx-flex-order {-webkit-order: -1;order: -1;}
.mx-flex-order-1 {-webkit-order: 1;order: 1;}
.mx-flex-order-2 {-webkit-order: 2;order: 2;}
.mx-flex-order-3 {-webkit-order: 3;order: 3;}
.mx-flex-order-4 {-webkit-order: 4;order: 4;}
.mx-flex-order-5 {-webkit-order: 5;order: 5;}
.mx-flex-order-6 {-webkit-order: 6;order: 6;}
.mx-flex-order-7 {-webkit-order: 7;order: 7;}
.mx-flex-order-8 {-webkit-order: 8;order: 8;}
.mx-flex-order-9 {-webkit-order: 9;order: 9;}
.mx-flex-order-10 {-webkit-order: 10;order: 10;}

/* tables */
.mx-table {
    width: 100%;
}

/* containers */
.mx-container { /* 30px margins as AUTO */
    position: relative;
    width: calc(100vw - 60px);
    margin: 0 auto;
}

.mx-container-wide {
/* full width container */
    position: relative;
    width: 100%;
    height: auto;
}

/* for % flex basis columns only */
.mx-row { /* a short declartion - row */
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row; 
    -moz-flex-direction: row;
    flex-direction: row;
}

.mx-column { /* a short declartion - column */
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: column; 
    -moz-flex-direction: column;
    flex-direction: column;  
}

.mx-rrow { /* a short declartion - row */
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row-reverse; 
    -moz-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.mx-rcolumn { /* a short declartion - column reverse*/
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: column-reverse; 
    -moz-flex-direction: column-reverse;
    flex-direction: column-reverse;  
}

/* after effects */
.mxBooUI-ext-link::after,
.mxBooUI-ext-link::before {
    font-family: "Font Awesome 5 Free";
}

.mxBooUI-ext-link::after {
    content: ' \f35d';
    font-size: 1em;
}

/* tooltips, widgets etc */
.mx-check-toggle-label {
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center; 
    outline: none;
}

.mx-check-toggle-btn {
    position: relative; 
    width: 50px;
    height: 30px;
    cursor: pointer;
    border-radius: 25px;
    background: rgb(229,229,229);
    box-shadow: inset 0 4px 10px rgba(0,0,0,.3);
}

.mx-check-toggle-btn:before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 26px;
    height: 26px;
    background: grey;
    filter: opacity(.8);
    opacity: .8;
    border-radius: 50%;
    transition: all .5s ease-in-out;
}

.mx-check-toggle-box {
    filter: opacity(0); 
    opacity: 0;
}

.mx-check-toggle-box:checked + .mx-check-toggle-btn:before {
    left: 22px;
    background: rgb(255,255,255);
}

.mx-check-toggle-box:checked + .mx-check-toggle-btn {
    background: rgba(100,255,100,.8);
}


.click-to-hide,
.click-to-reveal,
.click-to-callback,
.mx-email-conceal,
.mx-cursor-pointer,
.click-to-reveal:hover {
    cursor: pointer;
}

.mx-email-conceal--finish {
    cursor: initial;
}

.mx-btn-alias,
.mx-cursor-alias {
    cursor: alias;
}

.mx-btn-all-scroll,
.mx-cursor-all-scroll {
    cursor: all-scroll;
}

.mx-btn-auto,
.mx-cursor-auto {
    cursor: auto;
}

.mx-btn-cell,
.mx-cursor-cell {
    cursor: cell;
}

.mx-btn-context-menu,
.mx-cursor-context-menu {
    cursor: context-menu;
}

.mx-btn-col-resize,
.mx-cursor-col-resize {
    cursor: col-resize;
}

.mx-btn-copy,
.mx-cursor-copy {
    cursor: copy;
}

.mx-btn-crosshair,
.mx-cursor-crosshair {
    cursor: crosshair;
}

.mx-btn-default,
.mx-cursor-default {
    cursor: default;
}

.mx-btn-e-resize,
.mx-cursor-e-resize {
    cursor: e-resize;
}

.mx-btn-ew-resize,
.mx-cursor-ew-resize {
    cursor: ew-resize;
}

.mx-btn-grab,
.mx-cursor-grab {
    cursor: grab;
}

.mx-btn-grabbing,
.mx-cursor-grabbing {
    cursor: grabbing;
}

.mx-btn-help.
.mx-cursor-help {
    cursor: help;
}

.mx-btn-move,
.mx-cursor-move {
    cursor: move;
}

.mx-btn-n-resize,
.mx-cursor-n-resize {
    cursor: n-resize;
}

.mx-btn-ne-resize,
.mx-cursor-ne-resize {
    cursor: ne-resize;
}

.mx-btn-nesw-resize,
.mx-cursor-nesw-resize {
    cursor: nesw-resize;
}

.mx-btn-ns-resize,
.mx-cursor-ns-resize {
    cursor: ns-resize;
}

.mx-btn-nw-resize,
.mx-cursor-nw-resize {
    cursor: nw-resize;
}

.mx-btn-nwse-resize,
.mx-cursor-nwse-resize {
    cursor: nwse-resize;
}

.mx-btn-no-drop,
.mx-cursor-no-drop {
    cursor: no-drop;
}

.mx-btn-none,
.mx-cursor-none {
    cursor: none;
}

.mx-btn-disabled,
.mx-cursor-not-allowed {
    cursor: not-allowed;
}

.mx-btn-pointer,
.mx-cursor-pointer {
    cursor: pointer;
}

.mx-btn-progress,
.mx-cursor-progress {
    cursor: progress;
}

.mx-btn-row-resize,
.mx-cursor-row-resize {
    cursor: row-resize;
}

.mx-btn-s-resize,
.mx-cursor-s-resize {
    cursor: s-resize;
}

.mx-btn-se-resize,
.mx-cursor-se-resize {
    cursor: se-resize;
}

.mx-btn-sw-resize,
.mx-cursor-sw-resize {
    cursor: sw-resize;
}

.mx-btn-text,
.mx-cursor-text {
    cursor: text;
}

.mx-btn-w-resize,
.mx-cursor-w-resize {
    cursor: w-resize;
}

.mx-btn-wait,
.mx-cursor-wait {
    cursor: wait;
}

.mx-btn-zoom-in,
.mx-cursor-zoom-in {
    cursor: zoom-in;
}

.mx-btn-zoom-out,
.mx-cursor-zoom-out {
    cursor: zoom-out;
}

/* no resize */
.mx-no-resize,
.mx-fields-no-resize,
.mx-inputs-no-resize {
    resize: none;
}

.mx-make-url,
.mx-anchor-link,
.mx-make-url-link {
    cursor: pointer;
}

/* general layout standards */
[class*="mx-col-"] { min-width: 1px; }
@media only screen and (min-device-width: 576px){ /* boost font size */
    body, html { font-size: 16px; }
}

@media only screen and (min-device-width: 992px) {
    .mx-container { /* 45px margins as AUTO */
        width: calc(100vw - 90px);
        margin: 0 auto; 
    }
}

@media only screen and (max-device-width: 575px){ /* Extra small devices <= 575px */
    .mx-col-xs-1 {
        -webkit-flex-basis: 8.33%;
        -moz-flex-basis: 8.33%;
        flex-basis: 8.33%;
    }
    
    .mx-col-xs-2 {
        -webkit-flex-basis: 16.66%;
        -moz-flex-basis: 16.66%;
        flex-basis: 16.66%;
    }
    
    .mx-col-xs-3 {    
        -webkit-flex-basis: 25%;
        -moz-flex-basis: 25%;
        flex-basis: 25%;
    }
    
    .mx-col-xs-4 {
        -webkit-flex-basis: 33.33%;
        -moz-flex-basis: 33.33%;
        flex-basis: 33.33%;
    }
    
    .mx-col-xs-5 {
        -webkit-flex-basis: 41.66%;
        -moz-flex-basis: 41.66%;
        flex-basis: 41.66%;
    }
    
    .mx-col-xs-6 {
        -webkit-flex-basis: 50%;
        -moz-flex-basis: 50%;
        flex-basis: 50%;
    }
    
    .mx-col-xs-7 {
        -webkit-flex-basis: 58.33%;
        -moz-flex-basis: 58.33%;
        flex-basis: 58.33%;
    }
    
    .mx-col-xs-8 {
        -webkit-flex-basis: 66.66%;
        -moz-flex-basis: 66.66%;
        flex-basis: 66.66%;
    }
    
    .mx-col-xs-9 {
        -webkit-flex-basis: 75%;
        -moz-flex-basis: 75%;
        flex-basis: 75%;
    }
    
    .mx-col-xs-10 {
        -webkit-flex-basis: 83.33%;
        -moz-flex-basis: 83.33%;
        flex-basis: 83.33%;
    }
    
    .mx-col-xs-11 {
        -webkit-flex-basis: 91.66%;
        -moz-flex-basis: 91.66%;
        flex-basis: 91.66%;
    }
    
    .mx-col-xs-12 {
        -webkit-flex-basis: 100%;
        -moz-flex-basis: 100%;
        flex-basis: 100%;
    }
    
    /* hiding elements */
    .mx-hide-sm {display: none;}
    .mx-hide-md {display: none;}
    .mx-hide-lg {display: none;}
    .mx-hide-xl {display: none;}
}
@media only screen and (min-device-width: 576px) and (max-device-width: 767px) { /* landscape devices 576px >= 767px*/
    .mx-col-sm-1 {
        -webkit-flex-basis: 8.33%;
        -moz-flex-basis: 8.33%;
        flex-basis: 8.33%;
    }
    
    .mx-col-sm-2 {
        -webkit-flex-basis: 16.66%;
        -moz-flex-basis: 16.66%;
        flex-basis: 16.66%;
    }
    
    .mx-col-sm-3 {    
        -webkit-flex-basis: 25%;
        -moz-flex-basis: 25%;
        flex-basis: 25%;
    }
    
    .mx-col-sm-4 {
        -webkit-flex-basis: 33.33%;
        -moz-flex-basis: 33.33%;
        flex-basis: 33.33%;
    }
    
    .mx-col-sm-5 {
        -webkit-flex-basis: 41.66%;
        -moz-flex-basis: 41.66%;
        flex-basis: 41.66%;
    }
    
    .mx-col-sm-6 {
        -webkit-flex-basis: 50%;
        -moz-flex-basis: 50%;
        flex-basis: 50%;
    }
    
    .mx-col-sm-7 {
        -webkit-flex-basis: 58.33%;
        -moz-flex-basis: 58.33%;
        flex-basis: 58.33%;
    }
    
    .mx-col-sm-8 {
        -webkit-flex-basis: 66.66%;
        -moz-flex-basis: 66.66%;
        flex-basis: 66.66%;
    }
    
    .mx-col-sm-9 {
        -webkit-flex-basis: 75%;
        -moz-flex-basis: 75%;
        flex-basis: 75%;
    }
    
    .mx-col-sm-10 {
        -webkit-flex-basis: 83.33%;
        -moz-flex-basis: 83.33%;
        flex-basis: 83.33%;
    }
    
    .mx-col-sm-11 {
        -webkit-flex-basis: 91.66%;
        -moz-flex-basis: 91.66%;
        flex-basis: 91.66%;
    }
    
    .mx-col-sm-12 {
        -webkit-flex-basis: 100%;
        -moz-flex-basis: 100%;
        flex-basis: 100%;
    }
    
    /* hiding elements */
    .mx-hide-xs {display: none;}
    .mx-hide-md {display: none;}
    .mx-hide-lg {display: none;}
    .mx-hide-xl {display: none;}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 991px) { /* Medium devices 768px >= 991px */
    .mx-col-md-1 {
        -webkit-flex-basis: 8.33%;
        -moz-flex-basis: 8.33%;
        flex-basis: 8.33%;
    }
    
    .mx-col-md-2 {
        -webkit-flex-basis: 16.66%;
        -moz-flex-basis: 16.66%;
        flex-basis: 16.66%;
    }
    
    .mx-col-md-3 {    
        -webkit-flex-basis: 25%;
        -moz-flex-basis: 25%;
        flex-basis: 25%;
    }
    
    .mx-col-md-4 {
        -webkit-flex-basis: 33.33%;
        -moz-flex-basis: 33.33%;
        flex-basis: 33.33%;
    }
    
    .mx-col-md-5 {
        -webkit-flex-basis: 41.66%;
        -moz-flex-basis: 41.66%;
        flex-basis: 41.66%;
    }
    
    .mx-col-md-6 {
        -webkit-flex-basis: 50%;
        -moz-flex-basis: 50%;
        flex-basis: 50%;
    }
    
    .mx-col-md-7 {
        -webkit-flex-basis: 58.33%;
        -moz-flex-basis: 58.33%;
        flex-basis: 58.33%;
    }
    
    .mx-col-md-8 {
        -webkit-flex-basis: 66.66%;
        -moz-flex-basis: 66.66%;
        flex-basis: 66.66%;
    }
    
    .mx-col-md-9 {
        -webkit-flex-basis: 75%;
        -moz-flex-basis: 75%;
        flex-basis: 75%;
    }
    
    .mx-col-md-10 {
        -webkit-flex-basis: 83.33%;
        -moz-flex-basis: 83.33%;
        flex-basis: 83.33%;
    }
    
    .mx-col-md-11 {
        -webkit-flex-basis: 91.66%;
        -moz-flex-basis: 91.66%;
        flex-basis: 91.66%;
    }
    
    .mx-col-md-12 {
        -webkit-flex-basis: 100%;
        -moz-flex-basis: 100%;
        flex-basis: 100%;
    }
    
    /* hiding elements */
    .mx-hide-xs {display:none;}
    .mx-hide-sm {display: none;}
    .mx-hide-lg {display: none;}
    .mx-hide-xl {display: none;}
}
@media only screen and (min-device-width: 992px) and (max-device-width: 1199px) { /* large devices 992px >= 1199px */
    .mx-col-lg-1 {
        -webkit-flex-basis: 8.33%;
        -moz-flex-basis: 8.33%;
        flex-basis: 8.33%;
    }
    
    .mx-col-lg-2 {
        -webkit-flex-basis: 16.66%;
        -moz-flex-basis: 16.66%;
        flex-basis: 16.66%;
    }
    
    .mx-col-lg-3 {    
        -webkit-flex-basis: 25%;
        -moz-flex-basis: 25%;
        flex-basis: 25%;
    }
    
    .mx-col-lg-4 {
        -webkit-flex-basis: 33.33%;
        -moz-flex-basis: 33.33%;
        flex-basis: 33.33%;
    }
    
    .mx-col-lg-5 {
        -webkit-flex-basis: 41.66%;
        -moz-flex-basis: 41.66%;
        flex-basis: 41.66%;
    }
    
    .mx-col-lg-6 {
        -webkit-flex-basis: 50%;
        -moz-flex-basis: 50%;
        flex-basis: 50%;
    }
    
    .mx-col-lg-7 {
        -webkit-flex-basis: 58.33%;
        -moz-flex-basis: 58.33%;
        flex-basis: 58.33%;
    }
    
    .mx-col-lg-8 {
        -webkit-flex-basis: 66.66%;
        -moz-flex-basis: 66.66%;
        flex-basis: 66.66%;
    }
    
    .mx-col-lg-9 {
        -webkit-flex-basis: 75%;
        -moz-flex-basis: 75%;
        flex-basis: 75%;
    }
    
    .mx-col-lg-10 {
        -webkit-flex-basis: 83.33%;
        -moz-flex-basis: 83.33%;
        flex-basis: 83.33%;
    }
    
    .mx-col-lg-11 {
        -webkit-flex-basis: 91.66%;
        -moz-flex-basis: 91.66%;
        flex-basis: 91.66%;
    }
    
    .mx-col-lg-12 {
        -webkit-flex-basis: 100%;
        -moz-flex-basis: 100%;
        flex-basis: 100%;
    }
    
    /* hiding elements */
    .mx-hide-xs {display:none;}
    .mx-hide-sm {display: none;}
    .mx-hide-md {display: none;}
    .mx-hide-xl {display: none;}    
}
@media only screen and (min-device-width: 1200px) { /* Extra large devices 1200px && > */
    .mx-col-xl-1 {
        -webkit-flex-basis: 8.33%;
        -moz-flex-basis: 8.33%;
        flex-basis: 8.33%;
    }
    
    .mx-col-xl-2 {
        -webkit-flex-basis: 16.66%;
        -moz-flex-basis: 16.66%;
        flex-basis: 16.66%;
    }
    
    .mx-col-xl-3 {    
        -webkit-flex-basis: 25%;
        -moz-flex-basis: 25%;
        flex-basis: 25%;
    }
    
    .mx-col-xl-4 {
        -webkit-flex-basis: 33.33%;
        -moz-flex-basis: 33.33%;
        flex-basis: 33.33%;
    }
    
    .mx-col-xl-5 {
        -webkit-flex-basis: 41.66%;
        -moz-flex-basis: 41.66%;
        flex-basis: 41.66%;
    }
    
    .mx-col-xl-6 {
        -webkit-flex-basis: 50%;
        -moz-flex-basis: 50%;
        flex-basis: 50%;
    }
    
    .mx-col-xl-7 {
        -webkit-flex-basis: 58.33%;
        -moz-flex-basis: 58.33%;
        flex-basis: 58.33%;
    }
    
    .mx-col-xl-8 {
        -webkit-flex-basis: 66.66%;
        -moz-flex-basis: 66.66%;
        flex-basis: 66.66%;
    }
    
    .mx-col-xl-9 {
        -webkit-flex-basis: 75%;
        -moz-flex-basis: 75%;
        flex-basis: 75%;
    }
    
    .mx-col-xl-10 {
        -webkit-flex-basis: 83.33%;
        -moz-flex-basis: 83.33%;
        flex-basis: 83.33%;
    }
    
    .mx-col-xl-11 {
        -webkit-flex-basis: 91.66%;
        -moz-flex-basis: 91.66%;
        flex-basis: 91.66%;
    }
    
    .mx-col-xl-12 {
        -webkit-flex-basis: 100%;
        -moz-flex-basis: 100%;
        flex-basis: 100%;
    }
    
    /* hiding elements */
    .mx-hide-xs {display:none;}
    .mx-hide-sm {display: none;}
    .mx-hide-md {display: none;}
    .mx-hide-lg {display: none;}
}