/****************************************************************
 *
 *  Name: Developer Styles
 *  Author: Samantha Pasch
 *  Author URI: http://www.samanthapasch.com/
 *  Description: CSS file for site development.
 *
****************************************************************/

/*===============================================================
 * 
 *  DEVELOPER NOTES
 *
 *  - Use REM for width, height, margin, and padding.
 *  - Only use EM on child width, height, margin, and padding if
 *  parent has specified width, height, margin, and padding.
 *  - Grid should be used on parent, then flex the items.
 *  - Only use EM on child font if parent has specific font size.
 *  - Float, clear, and vertical-align have no effect on a flex
 *  item.
 *
===============================================================*/

/*===============================================================
 *
 *  1) GLOBAL
 *  Crucial markups for site body and html. 
 *
===============================================================*/

/* A) General Site Styles 
=================================*/

/* Note: Responsive meta tag. */
@-ms-viewport {
  width: device-width;
}

/* Note: Smooth scrolling IF user doesn't have a preference 
due to motion sensitivities. */
@media screen and (prefers-reduced-motion: no-preference) {    
    html, body { 
        scroll-behavior: smooth; }
}

html, body, #site-wrap {
    height: 100%;
    min-height: 100%;
}

html {
    margin: 0;
    width: 100%;
    max-width: 100%;
    color: var(--primary-colour);
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: scrollbar;
}

body {
    position: static!important;
    min-width: 15.625rem;
    margin: 0;
    background-color: var(--primary-bg);
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -moz-tap-highlight-color: rgba(0,0,0,0);
    -ms-tap-highlight-color: rgba(0,0,0,0);
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

#site-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 100%;
    font-family: var(--body-font);
    font-style: normal;
    font-weight: var(--body-weight);
    font-size: 1rem;
    text-transform: none;
    letter-spacing: 0em;
    line-height: 1.4em;
    overflow-x: hidden!important;
}

p {
    font-size: var(--body-size);
}

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
}

button {
    padding: 0;
    border: none;
    /*color: var(--primary-colour);*/
    background: none;
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

[type=button]:not(:disabled), 
[type=reset]:not(:disabled), 
[type=submit]:not(:disabled),
button:not(:disabled) {
    cursor: pointer;
}

button:hover,
button:focus {
    background: none;
    opacity: 1;
}

button:focus {
    outline: none;
    outline-offset: 0;
}

button[disabled="disabled"] {
    color: var(--primary-colour);
}

:focus {
    outline: none!important;
}

:focus-visible {
    outline: -webkit-focus-ring-color auto 0;
}

input:not([type="radio"]):not([type="checkbox"]), textarea {
    -webkit-appearance: none;
}

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

* {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
    word-wrap: break-word;
    border-collapse: collapse;
}

/* Last-child no margin-bottom for lists/groups. */
html body ol li > *:last-child, html body ul li > *:last-child, html body dl li > *:last-child {
    margin-bottom: 0;
}

svg:not(:root) {
    overflow: hidden;
}



/*===============================================================
 *
 *  2) STYLE RESETS
 *  Resets styles for cross browser compatability.
 *
===============================================================*/

/* A) Common Style Resets 
=================================*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    /*font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;*/
    vertical-align: baseline;
}

ol, ul, li, nav, section, aside {
    list-style: none;
}

a {
    text-decoration: none;
}

/* Note: Tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}

caption, th, td {
    text-align: left;
    font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}

blockquote, q {
    quotes: "" "";
}

* { 
    margin: 0; 
    padding: 0;
}

/* Note: Remember to define focus styles */
*:focus, *:active { 
    outline: 0;
}


/* B) HTML5 Style Resets 
=================================*/

article, aside, details, figcaption, figure, 
footer, header, hgroup, main, menu, nav, 
section, summary { 
    display: block;
}

audio, canvas, progress, video { 
    display: inline-block; 
    vertical-align: baseline;
}

audio:not([controls]) { 
    display: none; height: 0;
}

[hidden], template { 
    display: none;
}

video { 
    height: auto; 
    max-width: 100%;
}



/*===============================================================
 *
 *  3) TYPOGRAPHY
 *  General and custom typgraphy styles.
 *
===============================================================*/

/* A) General
=================================*/

h1 { margin-top: 0; }

p, h1, h2, h3, h4, h5, h6, small, span {
    font-weight: normal;
    line-height: 1.4em!important;
}

small, figcaption { 
    font-style: italic!important;
    font-size: 0.75rem!important;
}

html body * textarea {
    line-height: 1.6em!important;
}

html body * input ~ label,
html body * textarea ~ label {
    position: absolute;
    margin: 0rem 0rem 0.188rem 0rem!important;
    top: 0rem;
    left: 0;
    right: 0;
    font-size: 0.625rem!important;
    line-height: 1em!important;
    -webkit-transition: all 250ms ease 0ms;
    -moz-transition: all 250ms ease 0ms;
    -o-transition: all 250ms ease 0ms;
    transition: all 250ms ease 0ms;
    pointer-events: none;
}

html body * textarea:focus ~ label,
html body * textarea:valid ~ label,
html body * input:focus ~ label,
html body * input:valid ~ label,
html body * input:focus ~ label,
html body * input:valid ~ label {
    top: -0.938rem!important;
    font-size: 0.5rem!important;
}


/* Desktop */
@media (min-width: 1021px) {

    html body h1 { font-size: 2.875rem; }  /* 46px */
    html body h2 { font-size: 2.438rem; }  /* 39px */
    html body h3 { font-size: 2rem; }      /* 32px */
    html body h4 { font-size: 1.75rem; }   /* 28px */
    html body h5 { font-size: 1.5rem; }    /* 24px */
    html body h6 { font-size: 1.25rem; }   /* 20px */

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1020px) {

    html body h1 { font-size: 2.438rem; }  /* 39px */
    html body h2 { font-size: 2rem; }      /* 32px */
    html body h3 { font-size: 1.75rem; }   /* 28px */
    html body h4 { font-size: 1.5rem; }    /* 24px */
    html body h5 { font-size: 1.25rem; }   /* 20px */
    html body h6 { font-size: 1.125rem; }  /* 18px */

}

/* Mobile */
@media (max-width: 767px) {

    html body h1 { font-size: 2rem; }      /* 32px */
    html body h2 { font-size: 1.75rem; }   /* 28px */
    html body h3 { font-size: 1.5rem; }    /* 24px */
    html body h4 { font-size: 1.375rem; }  /* 22px */
    html body h5 { font-size: 1.25rem; }   /* 20px */
    html body h6 { font-size: 1.125rem; }  /* 18px */
  
}


/* B) Font Singular Styles
=================================*/

/* Size */
.text-size-6 { font-size: 0.375rem!important; }
.text-size-8 { font-size: 0.5rem!important; }
.text-size-10 { font-size: 0.625rem!important; }
.text-size-12 { font-size: 0.75rem!important; }
.text-size-14 { font-size: 0.875rem!important; }
.text-size-16 { font-size: 1rem!important; }
.text-size-18 { font-size: 1.125rem!important; }
.text-size-20 { font-size: 1.25rem!important; }
.text-size-22 { font-size: 1.375rem!important; }
.text-size-24 { font-size: 1.5rem!important; }
.text-size-26 { font-size: 1.625rem!important; }
.text-size-28 { font-size: 1.75rem!important; }
.text-size-30 { font-size: 1.875rem!important; }
.text-size-32 { font-size: 2rem!important; }
.text-size-34 { font-size: 2.125rem!important; }
.text-size-36 { font-size: 2.25rem!important; }
.text-size-38 { font-size: 2.375rem!important; }
.text-size-40 { font-size: 2.5rem!important; }
.text-size-42 { font-size: 2.625rem!important; }
.text-size-44 { font-size: 2.75rem!important; }
.text-size-46 { font-size: 2.875rem!important; }
.text-size-48 { font-size: 3rem!important; }
.text-size-50 { font-size: 3.125rem!important; }
.text-size-52 { font-size: 3.25rem!important; }
.text-size-54 { font-size: 3.375rem!important; }
.text-size-56 { font-size: 3.5rem!important; }
.text-size-58 { font-size: 3.625rem!important; }
.text-size-60 { font-size: 3.75rem!important; }
.text-size-62 { font-size: 3.875rem!important; }
.text-size-64 { font-size: 4rem!important; }
.text-size-66 { font-size: 4.125rem!important; }
.text-size-68 { font-size: 4.25rem!important; }
.text-size-70 { font-size: 4.375rem!important; }
.text-size-72 { font-size: 4.5rem!important; }
.text-size-74 { font-size: 4.625rem!important; }
.text-size-76 { font-size: 4.75rem!important; }
.text-size-78 { font-size: 4.875rem!important; }
.text-size-80 { font-size: 5rem!important; }
.text-size-82 { font-size: 5.125rem!important; }
.text-size-84 { font-size: 5.25rem!important; }
.text-size-86 { font-size: 5.375rem!important; }
.text-size-88 { font-size: 5.5rem!important; }
.text-size-90 { font-size: 5.625rem!important; }
.text-size-92 { font-size: 5.75rem!important; }
.text-size-94 { font-size: 5.875rem!important; }
.text-size-96 { font-size: 6rem!important; }
.text-size-98 { font-size: 6.125rem!important; }

/* Desktop */
@media (min-width: 1021px) {

    html body .desktop-text-size-6 { font-size: 0.375rem!important; }
    html body .desktop-text-size-8 { font-size: 0.5rem!important; }
    html body .desktop-text-size-10 { font-size: 0.625rem!important; }
    html body .desktop-text-size-12 { font-size: 0.75rem!important; }
    html body .desktop-text-size-14 { font-size: 0.875rem!important; }
    html body .desktop-text-size-16 { font-size: 1rem!important; }
    html body .desktop-text-size-18 { font-size: 1.125rem!important; }
    html body .desktop-text-size-20 { font-size: 1.25rem!important; }
    html body .desktop-text-size-22 { font-size: 1.375rem!important; }
    html body .desktop-text-size-24 { font-size: 1.5rem!important; }
    html body .desktop-text-size-26 { font-size: 1.625rem!important; }
    html body .desktop-text-size-28 { font-size: 1.75rem!important; }
    html body .desktop-text-size-30 { font-size: 1.875rem!important; }
    html body .desktop-text-size-32 { font-size: 2rem!important; }
    html body .desktop-text-size-34 { font-size: 2.125rem!important; }
    html body .desktop-text-size-36 { font-size: 2.25rem!important; }
    html body .desktop-text-size-38 { font-size: 2.375rem!important; }
    html body .desktop-text-size-40 { font-size: 2.5rem!important; }
    html body .desktop-text-size-42 { font-size: 2.625rem!important; }
    html body .desktop-text-size-44 { font-size: 2.75rem!important; }
    html body .desktop-text-size-46 { font-size: 2.875rem!important; }
    html body .desktop-text-size-48 { font-size: 3rem!important; }
    html body .desktop-text-size-50 { font-size: 3.125rem!important; }
    html body .desktop-text-size-52 { font-size: 3.25rem!important; }
    html body .desktop-text-size-54 { font-size: 3.375rem!important; }
    html body .desktop-text-size-56 { font-size: 3.5rem!important; }
    html body .desktop-text-size-58 { font-size: 3.625rem!important; }
    html body .desktop-text-size-60 { font-size: 3.75rem!important; }
    html body .desktop-text-size-62 { font-size: 3.875rem!important; }
    html body .desktop-text-size-64 { font-size: 4rem!important; }
    html body .desktop-text-size-66 { font-size: 4.125rem!important; }
    html body .desktop-text-size-68 { font-size: 4.25rem!important; }
    html body .desktop-text-size-70 { font-size: 4.375rem!important; }
    html body .desktop-text-size-72 { font-size: 4.5rem!important; }
    html body .desktop-text-size-74 { font-size: 4.625rem!important; }
    html body .desktop-text-size-76 { font-size: 4.75rem!important; }
    html body .desktop-text-size-78 { font-size: 4.875rem!important; }
    html body .desktop-text-size-80 { font-size: 5rem!important; }
    html body .desktop-text-size-82 { font-size: 5.125rem!important; }
    html body .desktop-text-size-84 { font-size: 5.25rem!important; }
    html body .desktop-text-size-86 { font-size: 5.375rem!important; }
    html body .desktop-text-size-88 { font-size: 5.5rem!important; }
    html body .desktop-text-size-90 { font-size: 5.625rem!important; }
    html body .desktop-text-size-92 { font-size: 5.75rem!important; }
    html body .desktop-text-size-94 { font-size: 5.875rem!important; }
    html body .desktop-text-size-96 { font-size: 6rem!important; }
    html body .desktop-text-size-98 { font-size: 6.125rem!important; }

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1020px) {

    html body .tablet-text-size-6 { font-size: 0.375rem!important; }
    html body .tablet-text-size-8 { font-size: 0.5rem!important; }
    html body .tablet-text-size-10 { font-size: 0.625rem!important; }
    html body .tablet-text-size-12 { font-size: 0.75rem!important; }
    html body .tablet-text-size-14 { font-size: 0.875rem!important; }
    html body .tablet-text-size-16 { font-size: 1rem!important; }
    html body .tablet-text-size-18 { font-size: 1.125rem!important; }
    html body .tablet-text-size-20 { font-size: 1.25rem!important; }
    html body .tablet-text-size-22 { font-size: 1.375rem!important; }
    html body .tablet-text-size-24 { font-size: 1.5rem!important; }
    html body .tablet-text-size-26 { font-size: 1.625rem!important; }
    html body .tablet-text-size-28 { font-size: 1.75rem!important; }
    html body .tablet-text-size-30 { font-size: 1.875rem!important; }
    html body .tablet-text-size-32 { font-size: 2rem!important; }
    html body .tablet-text-size-34 { font-size: 2.125rem!important; }
    html body .tablet-text-size-36 { font-size: 2.25rem!important; }
    html body .tablet-text-size-38 { font-size: 2.375rem!important; }
    html body .tablet-text-size-40 { font-size: 2.5rem!important; }
    html body .tablet-text-size-42 { font-size: 2.625rem!important; }
    html body .tablet-text-size-44 { font-size: 2.75rem!important; }
    html body .tablet-text-size-46 { font-size: 2.875rem!important; }
    html body .tablet-text-size-48 { font-size: 3rem!important; }
    html body .tablet-text-size-50 { font-size: 3.125rem!important; }
    html body .tablet-text-size-52 { font-size: 3.25rem!important; }
    html body .tablet-text-size-54 { font-size: 3.375rem!important; }
    html body .tablet-text-size-56 { font-size: 3.5rem!important; }
    html body .tablet-text-size-58 { font-size: 3.625rem!important; }
    html body .tablet-text-size-60 { font-size: 3.75rem!important; }
    html body .tablet-text-size-62 { font-size: 3.875rem!important; }
    html body .tablet-text-size-64 { font-size: 4rem!important; }
    html body .tablet-text-size-66 { font-size: 4.125rem!important; }
    html body .tablet-text-size-68 { font-size: 4.25rem!important; }
    html body .tablet-text-size-70 { font-size: 4.375rem!important; }
    html body .tablet-text-size-72 { font-size: 4.5rem!important; }
    html body .tablet-text-size-74 { font-size: 4.625rem!important; }
    html body .tablet-text-size-76 { font-size: 4.75rem!important; }
    html body .tablet-text-size-78 { font-size: 4.875rem!important; }
    html body .tablet-text-size-80 { font-size: 5rem!important; }
    html body .tablet-text-size-82 { font-size: 5.125rem!important; }
    html body .tablet-text-size-84 { font-size: 5.25rem!important; }
    html body .tablet-text-size-86 { font-size: 5.375rem!important; }
    html body .tablet-text-size-88 { font-size: 5.5rem!important; }
    html body .tablet-text-size-90 { font-size: 5.625rem!important; }
    html body .tablet-text-size-92 { font-size: 5.75rem!important; }
    html body .tablet-text-size-94 { font-size: 5.875rem!important; }
    html body .tablet-text-size-96 { font-size: 6rem!important; }
    html body .tablet-text-size-98 { font-size: 6.125rem!important; }

}

/* Mobile */
@media (max-width: 767px) {

    html body .mobile-text-size-6 { font-size: 0.375rem!important; }
    html body .mobile-text-size-8 { font-size: 0.5rem!important; }
    html body .mobile-text-size-10 { font-size: 0.625rem!important; }
    html body .mobile-text-size-12 { font-size: 0.75rem!important; }
    html body .mobile-text-size-14 { font-size: 0.875rem!important; }
    html body .mobile-text-size-16 { font-size: 1rem!important; }
    html body .mobile-text-size-18 { font-size: 1.125rem!important; }
    html body .mobile-text-size-20 { font-size: 1.25rem!important; }
    html body .mobile-text-size-22 { font-size: 1.375rem!important; }
    html body .mobile-text-size-24 { font-size: 1.5rem!important; }
    html body .mobile-text-size-26 { font-size: 1.625rem!important; }
    html body .mobile-text-size-28 { font-size: 1.75rem!important; }
    html body .mobile-text-size-30 { font-size: 1.875rem!important; }
    html body .mobile-text-size-32 { font-size: 2rem!important; }
    html body .mobile-text-size-34 { font-size: 2.125rem!important; }
    html body .mobile-text-size-36 { font-size: 2.25rem!important; }
    html body .mobile-text-size-38 { font-size: 2.375rem!important; }
    html body .mobile-text-size-40 { font-size: 2.5rem!important; }
    html body .mobile-text-size-42 { font-size: 2.625rem!important; }
    html body .mobile-text-size-44 { font-size: 2.75rem!important; }
    html body .mobile-text-size-46 { font-size: 2.875rem!important; }
    html body .mobile-text-size-48 { font-size: 3rem!important; }
    html body .mobile-text-size-50 { font-size: 3.125rem!important; }
    html body .mobile-text-size-52 { font-size: 3.25rem!important; }
    html body .mobile-text-size-54 { font-size: 3.375rem!important; }
    html body .mobile-text-size-56 { font-size: 3.5rem!important; }
    html body .mobile-text-size-58 { font-size: 3.625rem!important; }
    html body .mobile-text-size-60 { font-size: 3.75rem!important; }
    html body .mobile-text-size-62 { font-size: 3.875rem!important; }
    html body .mobile-text-size-64 { font-size: 4rem!important; }
    html body .mobile-text-size-66 { font-size: 4.125rem!important; }
    html body .mobile-text-size-68 { font-size: 4.25rem!important; }
    html body .mobile-text-size-70 { font-size: 4.375rem!important; }
    html body .mobile-text-size-72 { font-size: 4.5rem!important; }
    html body .mobile-text-size-74 { font-size: 4.625rem!important; }
    html body .mobile-text-size-76 { font-size: 4.75rem!important; }
    html body .mobile-text-size-78 { font-size: 4.875rem!important; }
    html body .mobile-text-size-80 { font-size: 5rem!important; }
    html body .mobile-text-size-82 { font-size: 5.125rem!important; }
    html body .mobile-text-size-84 { font-size: 5.25rem!important; }
    html body .mobile-text-size-86 { font-size: 5.375rem!important; }
    html body .mobile-text-size-88 { font-size: 5.5rem!important; }
    html body .mobile-text-size-90 { font-size: 5.625rem!important; }
    html body .mobile-text-size-92 { font-size: 5.75rem!important; }
    html body .mobile-text-size-94 { font-size: 5.875rem!important; }
    html body .mobile-text-size-96 { font-size: 6rem!important; }
    html body .mobile-text-size-98 { font-size: 6.125rem!important; }

}

/* Style */
body .text-style-italic {
    font-style: italic;
}

/* Weight */
body .text-weight-100 {
    font-weight: 100!important;
}

body .text-weight-200 {
    font-weight: 200!important;
}

body .text-weight-300 {
    font-weight: 300!important;
}

body .text-weight-400 {
    font-weight: 400!important;
}

body .text-weight-500 {
    font-weight: 500!important;
}

body .text-weight-600 {
    font-weight: 600!important;
}

body .text-weight-700 {
    font-weight: 700!important;
}

body .text-weight-800 {
    font-weight: 800!important;
}

/* Transform */
body .text-uppercase {
    text-transform: uppercase;
}

body .text-lowercase {
    text-transform: lowercase;
}

body .text-capitalize {
    text-transform: none!important;
}

/* Line Height */
body .text-lh-100 {
    line-height: 1em!important;
}

body .text-lh-120 {
    line-height: 1.2em!important;
}

body .text-lh-140 {
    line-height: 1.4em!important;
}

body .text-lh-160 {
    line-height: 1.6em!important;
}

body .text-lh-170 {
    line-height: 1.7em!important;
}

body .text-lh-180 {
    line-height: 1.8em!important;
}

body .text-lh-190 {
    line-height: 1.9em!important;
}

body .text-lh-200 {
    line-height: 2em!important;
}

/* Letter Spacing */
body .text-ls-40 {
    letter-spacing: .04em!important;
}

body .text-ls-60 {
    letter-spacing: .06em!important;
}

body .text-ls-80 {
    letter-spacing: .08em!important;
}

body .text-ls-100 {
    letter-spacing: .1em!important;
}

body .text-ls-120 {
    letter-spacing: .12em!important;
}

body .text-ls-140 {
    letter-spacing: .14em!important;
}

body .text-ls-160 {
    letter-spacing: .16em!important;
}


/* C) Global Font Classes
=================================*/

html body .hyperlink-text-dotted p a,
html body .hyperlink-text-dotted p > a,
html body .hyperlink-text-dotted > p > a {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-decoration-color: currentColor;
    color: currentColor;   
}

body .topbar-font {
    font-family: var(--topbar-font);
    font-style: var(--topbar-style);
    font-weight: var(--topbar-weight);
    font-size: var(--topbar-size);
    text-transform: var(--topbar-transform);
    letter-spacing: var(--topbar-spacing);
}

body .body-font {
    font-family: var(--body-font);
    font-style: normal;
    font-weight: var(--body-weight);
    font-size: var(--body-size);
}

html body .body-font-look {
    font-family: var(--body-font);
    font-weight: var(--body-weight);
}

body .headline-font {
    font-family: var(--headline-font);
    font-style: var(--headline-style);
    font-weight: var(--headline-weight);
    font-size: var(--headline-size);
    text-transform: var(--headline-transform);
    letter-spacing: var(--headline-spacing);    
}

html body .headline-font-look {
    font-family: var(--headline-font);
    font-style: var(--headline-style);
    font-weight: var(--headline-weight);
}

body .tagline-font,
body .tagline-font-target a {
    font-family: var(--tagline-font);
    font-style: var(--tagline-style);
    font-weight: var(--tagline-weight);
    font-size: var(--tagline-size);
    text-transform: var(--tagline-transform);
    letter-spacing: var(--tagline-spacing);
}

html body .tagline-font-look {
    font-family: var(--tagline-font);
    font-weight: var(--tagline-weight);
}

body .tagline-small-font {
    font-family: var(--tagline-small-font);
    font-style: var(--tagline-small-style);
    font-weight: var(--tagline-small-weight);
    font-size: var(--tagline-small-size);
    text-transform: var(--tagline-small-transform);
    letter-spacing: var(--tagline-small-spacing);    
}

body .accent-font {
    font-family: var(--accent-font);
    font-style: var(--accent-style);
    font-weight: var(--accent-weight);
    font-size: var(--accent-size);
}

html body .accent-font-look {
    font-family: var(--accent-font);
    font-weight: var(--accent-weight);
}

body .footer-font {
    font-family: var(--footer-font);
    font-style: var(--footer-style);
    font-weight: var(--footer-weight);
    font-size: var(--footer-size);
    text-transform: var(--footer-transform);
    letter-spacing: var(--footer-spacing);    
}

body .footer-credits-font {
    font-family: var(--footer-credits-font);
    font-style: var(--footer-credits-style);
    font-weight: var(--footer-credits-weight);
    font-size: var(--footer-credits-size);
    text-transform: var(--footer-credits-transform);
    letter-spacing: var(--footer-credits-spacing);    
}

body .global-button-font,
body .global-button-font > input {
    font-family: var(--buttons-font);
    font-style: var(--buttons-style);
    font-weight: var(--buttons-weight);
    font-size: var(--buttons-size);
    text-transform: var(--buttons-transform);
    letter-spacing: var(--buttons-spacing);
}


/* D) Global Content Colours
==================================*/

body .input-underline-colour > input {
    border-color: var(--input-underline-colour);
}

body .primary-text-colour,
body form .primary-text-colour > input,
body form .primary-text-colour > input::placeholder {
    color: var(--primary-colour);
}

body .overlay-text-colour,
body form .overlay-text-colour > input,
body form .overlay-text-colour > input::placeholder {
    color: var(--overlay-colour);
}

body .primary-svg-colour {
    fill: var(--primary-colour);
}

body .overlay-svg-colour {
    fill: var(--overlay-colour);
}

body .primary-bg-colour {
    background-color: var(--primary-bg);
}

body .secondary-bg-colour {
    background-color: var(--secondary-bg);
}

body .footer-text-colour,
body .footer-text-colour a,
body .footer-text-colour > input,
body .footer-text-colour > input::placeholder,
body .footer-text-colour::placeholder {
    color: var(--footer-colour);
}

body .footer-primary-bg-colour {
    background-color: var(--footer-primary-bg);
}

body .footer-secondary-bg-colour {
    background-color: var(--footer-secondary-bg);
}

body .border-dark-colour,
body .border-dark-colour > * {
    border-color: var(--border-dark);
}

body .border-light-colour,
body .border-light-colour > * {
    border-color: var(--border-light);
}

body .border-accent-colour,
body .border-accent-colour > * {
    border-color: var(--border-accent);
}


/* E) Transitions & Affects
==================================*/

/* Opacity */
.text-opacity {
    opacity: 1;
    -webkit-transition: opacity 250ms ease 0ms;
    -moz-transition: opacity 250ms ease 0ms;
    -o-transition: opacity 250ms ease 0ms;
    transition: opacity 250ms ease 0ms;
}

.text-opacity-hook:hover .text-opacity {
    opacity: .6;
}



/*===============================================================
 *
 *  4) CLEARFIXES
 *  Removes flaots of two or more elements.
 *
===============================================================*/

.clf::before, form::before { 
    content: " "; 
    visibility: hidden; 
    display: table; 
    height: 0;
    line-height: 0;
    clear: both;
}

.clf::after, form::after { 
   content: " "; 
   visibility: hidden; 
   display: table; 
   height: 0;
   line-height: 0;
   clear: both;
}



/*===============================================================
 *
 *  5) ADMIN BAR
 *  Adjusts WordPress admin bar for better build experience.
 *
===============================================================*/

/* Fix admin bar to top on mobile view */
@media (max-width: 600px) {

    #wpadminbar { 
        position: fixed!important; 
        top: 0!important; }

}



/*===============================================================
 *
 *  6) HTML NO SCROLL
 *  Used mainly for navigation buttons menu overlay/sidebar.
 *
===============================================================*/

html.no-scroll { 
    overflow-y: hidden!important;
}



/*===============================================================
 *
 *  7) DEVICE STATE
 *  Triggered through JS to detect when an element is desktop,
 *  tablet, or mobile width.
 *
===============================================================*/

.device-height {
    height: var(--vh);
}

.device-state {
    border: 0 none;
    clip: rect(0px, 0px, 0px, 0px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* Desktop */
@media (min-width: 1021px) {

    .device-state:before {
        content: "desktop"; }

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1020px) {

    .device-state:before {
        content: "tablet";}

}

/* Mobile */
@media (max-width: 767px) {

    .device-state:before {
        content: "mobile"; }
  
}



/*===============================================================
 *
 * 11) PAGEWRAPS
 * General DIV styles.
 *
===============================================================*/

/* A) Displays
=================================*/

body .display-none { display: none; }
.display-table { display: table; }
.display-block { display: block; }
.display-inline { display: inline; }
.display-inline-block { display: inline-block; }

.display-flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

/* Desktop */
@media (min-width: 1021px) {

    html body .desktop-view { display: inherit; }
    html body .tablet-view { display: none; }
    html body .mobile-view { display: none; }

    html body .desktop-display-none { display: none!important; }
    body .desktop-display-block { display: block; }
    body .desktop-display-inline { display: inline; }
    body .desktop-display-inline-block { display: inline-block; }
    body .desktop-display-table { display: table; }

    body .desktop-display-flex {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex; }

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1020px) {

    html body .desktop-view { display: none; }
    html body .tablet-view { display: inherit; }
    html body .mobile-view { display: none; }

    html body .tablet-display-none { display: none!important; }
    body .tablet-display-block { display: block; }
    body .tablet-display-inline { display: inline; }
    body .tablet-display-inline-block { display: inline-block; }
    body .tablet-display-table { display: table; }

    body .tablet-display-flex {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex; }

}

/* Mobile */
@media (max-width: 767px) {

    html body .desktop-view { display: none; }
    html body .tablet-view { display: none; }
    html body .mobile-view { display: inherit; }

    html body .mobile-display-none { display: none!important; }
    html body .mobile-display-block { display: block; }
    body .mobile-display-inline { display: inline; }
    body .mobile-display-inline-block { display: inline-block; }
    body .mobile-display-table { display: table; }

    body .mobile-display-flex {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex; }

}


/* B) Positions
=================================*/

body .initial-position { position: initial; }
body .inherit-position { position: inherit; }
body .relative-position { position: relative; }
body .absolute-position { position: absolute; }
body .fixed-position { position: fixed; }
body .static-position { position: static; }
body .sticky-position { position: sticky; }

body .float-left { float: left; }
body .float-right { float: right; }


/* C) Overflow
=================================*/

/* General */
.overflow-hidden { overflow: hidden!important; }
.overflow-visible { overflow: visible!important; }
.overflow-auto { overflow: auto!important; }
.overflow-scroll { overflow: scroll!important; }

/* Overflow Y */
.overflow-y-hidden { overflow-y: hidden!important; }
.overflow-y-visible { overflow-y: visible!important; }
.overflow-y-auto { overflow-y: auto!important; }
.overflow-y-scroll { overflow-y: scroll!important; }

/* Overflow X */
.overflow-x-hidden { overflow-x: hidden!important; }
.overflow-x-visible { overflow-x: visible!important; }
.overflow-x-auto { overflow-x: auto!important; }
.overflow-x-scroll { overflow-x: scroll!important; }

/* Overflow Text Ellipsis */
body .overflow-ellipsis {
    min-width: 0;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/* D) Absolute Fill 
=================================*/

body .absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

body .absolute-fill {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Desktop */
@media (min-width: 1021px) {

    body .desktop-absolute-fill {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0; }

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1020px) {

    body .tablet-absolute-fill {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0; }

}

/* Mobile */
@media (max-width: 767px) {

    body .mobile-absolute-fill {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0; }

}


/* E) Z Index
=================================*/

body .z-index-down { z-index: -1; }
body .z-index-0 { z-index: 0; }
body .z-index-up { z-index: 1; }
body .z-index-2 { z-index: 2; }
body .z-index-250 { z-index: 250; }
body .z-index-500 { z-index: 500; }
body .z-index-750 { z-index: 750; }
body .z-index-1000 { z-index: 1000; }
body .z-index-max { z-index: 9999; }


/* F) Widths
=================================*/

.width-auto { width: auto; }

.width-25 { width: 1.563rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.min-width-25 { min-width: 1.563rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.max-width-25 { max-width: 1.563rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.width-50 { width: 3.125rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.min-width-50 { min-width: 3.125rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.max-width-50 { max-width: 3.125rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.width-75 { width: 4.688rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.min-width-75 { min-width: 4.688rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.max-width-75 { max-width: 4.688rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.width-100 { width: 6.25rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.min-width-100 { min-width: 6.25rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.max-width-100 { max-width: 6.25rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.width-150 { width: 9.375rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.min-width-150 { min-width: 9.375rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.max-width-150 { max-width: 9.375rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.width-200 { width: 12.5rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.min-width-200 { min-width: 12.5rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.max-width-200 { max-width: 12.5rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.width-250 { width: 15.625rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.min-width-250 { min-width: 15.625rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.max-width-250 { max-width: 15.625rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.width-300 { width: 18.75rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.min-width-300 { min-width: 18.75rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.max-width-300 { max-width: 18.75rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.width-350 { width: 21.875rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.min-width-350 { min-width: 21.875rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.max-width-350 { max-width: 21.875rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.width-400 { width: 25rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.min-width-400 { min-width: 25rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.max-width-400 { max-width: 25rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.width-450 { width: 28.125rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.min-width-450 { min-width: 28.125rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.max-width-450 { max-width: 28.125rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.width-500 { width: 31.25rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.minwidth-500 { min-width: 31.25rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.max-width-500 { max-width: 31.25rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.width-550 { width: 34.375rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.minwidth-550 { min-width: 34.375rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.max-width-550 { max-width: 34.375rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.width-600 { width: 37.5rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.min-width-600 { min-width: 37.5rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.max-width-600 { max-width: 37.5rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.width-650 { width: 40.625rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.min-width-650 { min-width: 40.625rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.max-width-650 { max-width: 40.625rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.width-700 { width: 43.75rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.min-width-700 { min-width: 43.75rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.max-width-700 { max-width: 43.75rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.width-750 { width: 46.875rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.min-width-750 { min-width: 46.875rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.max-width-750 { max-width: 46.875rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.width-800 { width: 50rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.min-width-800 { min-width: 50rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.max-width-800 { max-width: 50rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.width-850 { width: 53.125rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.min-width-850 { min-width: 53.125rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.max-width-850 { max-width: 53.125rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.width-900 { width: 56.25rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.min-width-900 { min-width: 56.25rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.max-width-900 { max-width: 56.25rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.width-1000 { width: 62.5rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.min-width-1000 { min-width: 62.5rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.max-width-1000 { max-width: 62.5rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.width-1100 { width: 68.75rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.min-width-1100 { min-width: 68.75rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.max-width-1100 { max-width: 68.75rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.width-1200 { width: 75rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.min-width-1200 { min-width: 75rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.max-width-1200 { max-width: 75rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* 1 Column */
.width-calc-100 { width: calc(100% / 1); }

/* 2 Columns */
.width-calc-50 { width: calc(100% / 2); }

/* 3 Columns */
.width-calc-33 { width: calc(100% / 3); }

/* 4 Columns */
.width-calc-25 { width: calc(100% / 4); }

/* 5 Columns */
.width-calc-20 { idth: calc(100% / 5); }

/* 6 Columns */
.width-calc-16 { width: calc(100% / 6); }

/* 8 Columns */
.width-calc-12 { idth: calc(100% / 8); }

/* 10 Columns */
.width-calc-10 { idth: calc(100% / 10); }


/* Desktop */
@media (min-width: 1021px) {

    .width-1of1 { 
        width: 100%; 
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    .min-width-1of1 { 
        min-width: 100%; 
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    .max-width-1of1 { 
        max-width: 100%; 
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    body .desktop-width-auto { width: auto; }

    body .desktop-width-1of1 {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    body .desktop-min-width-1of1 {
        min-width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    body .desktop-max-width-1of1 {
        max-width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    body .desktop-width-25 { width: 1.563rem; }
    body .desktop-min-width-25 { min-width: 1.563rem; }
    body .desktop-max-width-25 { max-width: 1.563rem; }

    body .desktop-width-50 { width: 3.125rem; }
    body .desktop-min-width-50 { min-width: 3.125rem; }
    body .desktop-max-width-50 { max-width: 3.125rem; }

    body .desktop-width-75 { width: 4.688rem; }
    body .desktop-min-width-75 { min-width: 4.688rem; }
    body .desktop-max-width-75 { max-width: 4.688rem; }

    body .desktop-width-100 { width: 6.25rem; }
    body .desktop-min-width-100 { min-width: 6.25rem; }
    body .desktop-max-width-100 { max-width: 6.25rem; }

    body .desktop-width-150 { width: 9.375rem; }
    body .desktop-min-width-150 { min-width: 9.375rem; }
    body .desktop-max-width-150 { max-width: 9.375rem; }

    body .desktop-width-200 { width: 12.5rem; }
    body .desktop-min-width-200 { min-width: 12.5rem; }
    body .desktop-max-width-200 { max-width: 12.5rem; }

    body .desktop-width-250 { width: 15.625rem; }
    body .desktop-min-width-250 { min-width: 15.625rem; }
    body .desktop-max-width-250 { max-width: 15.625rem; }

    body .desktop-width-300 { width: 18.75rem; }
    body .desktop-min-width-300 { min-width: 18.75rem; }
    body .desktop-max-width-300 { max-width: 18.75rem; }

    body .desktop-width-350 { width: 21.875rem; }
    body .desktop-min-width-350 { min-width: 21.875rem; }
    body .desktop-max-width-350 { max-width: 21.875rem; }

    body .desktop-width-400 { width: 25rem; }
    body .desktop-min-width-400 { min-width: 25rem; }
    body .desktop-max-width-400 { max-width: 25rem; }

    body .desktop-width-450 { width: 28.125rem; }
    body .desktop-min-width-450 { min-width: 28.125rem; }
    body .desktop-max-width-450 { max-width: 28.125rem; }

    body .desktop-width-500 { width: 31.25rem; }
    body .desktop-min-width-500 { min-width: 31.25rem; }
    body .desktop-max-width-500 { max-width: 31.25rem; }

    body .desktop-width-550 { width: 34.375rem; }
    body .desktop-min-width-550 { min-width: 34.375rem; }
    body .desktop-max-width-550 { max-width: 34.375rem; }

    body .desktop-width-600 { width: 37.5rem; }
    body .desktop-min-width-600 { min-width: 37.5rem; }
    body .desktop-max-width-600 { max-width: 37.5rem; }

    body .desktop-width-650 { width: 40.625rem; }
    body .desktop-min-width-650 { min-width: 40.625rem; }
    body .desktop-max-width-650 { max-width: 40.625rem; }

    body .desktop-width-700 { width: 43.75rem; }
    body .desktop-min-width-700 { min-width: 43.75rem; }
    body .desktop-max-width-700 { max-width: 43.75rem; }

    body .desktop-width-750 { width: 46.875rem; }
    body .desktop-min-width-750 { min-width: 46.875rem; }
    body .desktop-max-width-750 { max-width: 46.875rem; }

    body .desktop-width-800 { width: 50rem; }
    body .desktop-min-width-800 { min-width: 50rem; }
    body .desktop-max-width-800 { max-width: 50rem; }

    body .desktop-width-900 { width: 56.25rem; }
    body .desktop-min-width-900 { min-width: 56.25rem; }
    body .desktop-max-width-900 { max-width: 56.25rem; }

    body .desktop-width-1000 { width: 62.5rem; }
    body .desktop-min-width-1000 { min-width: 62.5rem; }
    body .desktop-max-width-1000 { max-width: 62.5rem; }

    body .desktop-width-1200 { width: 75rem; }
    body .desktop-min-width-1200 { min-width: 75rem; }
    body .desktop-max-width-1200 { max-width: 75rem; }

    /* 1 Column */
    body .desktop-width-calc-100 { width: calc(100% / 1); }

    /* 2 Columns */
    body .desktop-width-calc-50 { width: calc(100% / 2); }

    /* 3 Columns */
    body .desktop-width-calc-33 { width: calc(100% / 3); }

    /* 4 Columns */
    body .desktop-width-calc-25 { width: calc(100% / 4); }

    /* 5 Columns */
    body .desktop-width-calc-20 { idth: calc(100% / 5); }

    /* 6 Columns */
    body .desktop-width-calc-16 { width: calc(100% / 6); }

    /* 8 Columns */
    body .desktop-width-calc-12 { idth: calc(100% / 8); }

    /* 10 Columns */
    body .desktop-width-calc-10 { idth: calc(100% / 10); }

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1020px) {

    .width-1of1 {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    .min-width-1of1 { min-width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    .max-width-1of1 { max-width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    body .tablet-width-auto { width: auto; }

    body .tablet-width-1of1 {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    body .tablet-min-width-1of1 {
        min-width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    body .tablet-max-width-1of1 {
        max-width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }


    body .tablet-width-25 { width: 1.563rem; }
    body .tablet-min-width-25 { min-width: 1.563rem; }
    body .tablet-max-width-25 { max-width: 1.563rem; }

    body .tablet-width-50 { width: 3.125rem; }
    body .tablet-min-width-50 { min-width: 3.125rem; }
    body .tablet-max-width-50 { max-width: 3.125rem; }

    body .desktop-width-75 { width: 4.688rem; }
    body .desktop-min-width-75 { min-width: 4.688rem; }
    body .desktop-max-width-75 { max-width: 4.688rem; }

    body .tablet-width-100 { width: 6.25rem; }
    body .tablet-min-width-100 { min-width: 6.25rem; }
    body .tablet-max-width-100 { max-width: 6.25rem; }

    body .tablet-width-150 { width: 9.375rem; }
    body .tablet-min-width-150 { min-width: 9.375rem; }
    body .tablet-max-width-150 { max-width: 9.375rem; }

    body .tablet-width-200 { width: 12.5rem; }
    body .tablet-min-width-200 { min-width: 12.5rem; }
    body .tablet-max-width-200 { max-width: 12.5rem; }

    body .tablet-width-250 { width: 15.625rem; }
    body .tablet-min-width-250 { min-width: 15.625rem; }
    body .tablet-max-width-250 { max-width: 15.625rem; }

    body .tablet-width-300 { width: 18.75rem; }
    body .tablet-min-width-300 { min-width: 18.75rem; }
    body .tablet-max-width-300 { max-width: 18.75rem; }

    body .tablet-width-350 { width: 21.875rem; }
    body .tablet-min-width-350 { min-width: 21.875rem; }
    body .tablet-max-width-350 { max-width: 21.875rem; }

    body .tablet-width-400 { width: 25rem; }
    body .tablet-min-width-400 { min-width: 25rem; }
    body .tablet-max-width-400 { max-width: 25rem; }

    body .tablet-width-450 { width: 28.125rem; }
    body .tablet-min-width-450 { min-width: 28.125rem; }
    body .tablet-max-width-450 { max-width: 28.125rem; }

    body .tablet-width-500 { width: 31.25rem; }
    body .tablet-min-width-500 { min-width: 31.25rem; }
    body .tablet-max-width-500 { max-width: 31.25rem; }

    body .tablet-width-550 { width: 34.375rem; }
    body .tablet-min-width-550 { min-width: 34.375rem; }
    body .tablet-max-width-550 { max-width: 34.375rem; }

    body .tablet-width-600 { width: 37.5rem; }
    body .tablet-min-width-600 { min-width: 37.5rem; }
    body .tablet-max-width-600 { max-width: 37.5rem; }

    body .tablet-width-650 { width: 40.625rem; }
    body .tablet-min-width-650 { min-width: 40.625rem; }
    body .tablet-max-width-650 { max-width: 40.625rem; }

    body .tablet-width-700 { width: 43.75rem; }
    body .tablet-min-width-700 { min-width: 43.75rem; }
    body .tablet-max-width-700 { max-width: 43.75rem; }

    body .tablet-width-750 { width: 46.875rem; }
    body .tablet-min-width-750 { min-width: 46.875rem; }
    body .tablet-max-width-750 { max-width: 46.875rem; }

    body .tablet-width-800 { width: 50rem; }
    body .tablet-min-width-800 { min-width: 50rem; }
    body .tablet-max-width-800 { max-width: 50rem; }

    body .tablet-width-900 { width: 56.25rem; }
    body .tablet-min-width-900 { min-width: 56.25rem; }
    body .tablet-max-width-900 { max-width: 56.25rem; }

    body .tablet-width-1000 { width: 62.5rem; }
    body .tablet-min-width-1000 { min-width: 62.5rem; }
    body .tablet-max-width-1000 { max-width: 62.5rem; }

    body .tablet-width-1200 { width: 75rem; }
    body .tablet-min-width-1200 { min-width: 75rem; }
    body .tablet-max-width-1200 { max-width: 75rem; }


    /* 1 Column */
    body .tablet-width-calc-100 { width: calc(100% / 1); }

    /* 2 Columns */
    body .tablet-width-calc-50 { width: calc(100% / 2); }

    /* 3 Columns */
    body .tablet-width-calc-33 { width: calc(100% / 3); }

    /* 4 Columns */
    body .tablet-width-calc-25 { width: calc(100% / 4); }

    /* 5 Columns */
    body .tablet-width-calc-20 { idth: calc(100% / 5); }

    /* 6 Columns */
    body .tablet-width-calc-16 { width: calc(100% / 6); }

    /* 8 Columns */
    body .tablet-width-calc-12 { idth: calc(100% / 8); }

    /* 10 Columns */
    body .tablet-width-calc-10 { idth: calc(100% / 10); }

}

/* Mobile */
@media (max-width: 767px) {

    .width-1of1 {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    .min-width-1of1 {
        min-width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    .max-width-1of1 {
        max-width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    body .mobile-width-auto { width: auto; }

    body .mobile-width-1of1 {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    body .mobile-min-width-1of1 {
        min-width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    body .mobile-max-width-1of1 {
        max-width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }


    body .mobile-width-25 { width: 1.563rem; }
    body .mobile-min-width-25 { min-width: 1.563rem; }
    body .mobile-max-width-25 { max-width: 1.563rem; }

    body .mobile-width-50 { width: 3.125rem; }
    body .mobile-min-width-50 { min-width: 3.125rem; }
    body .mobile-max-width-50 { max-width: 3.125rem; }

    body .mobile-width-75 { width: 4.688rem; }
    body .mobile-min-width-75 { min-width: 4.688rem; }
    body .mobile-max-width-75 { max-width: 4.688rem; }

    body .mobile-width-100 { width: 6.25rem; }
    body .mobile-min-width-100 { min-width: 6.25rem; }
    body .mobile-max-width-100 { max-width: 6.25rem; }

    body .mobile-width-150 { width: 9.375rem; }
    body .mobile-min-width-150 { min-width: 9.375rem; }
    body .mobile-max-width-150 { max-width: 9.375rem; }

    body .mobile-width-200 { width: 12.5rem; }
    body .mobile-min-width-200 { min-width: 12.5rem; }
    body .mobile-max-width-200 { max-width: 12.5rem; }

    body .mobile-width-250 { width: 15.625rem; }
    body .mobile-min-width-250 { min-width: 15.625rem; }
    body .mobile-max-width-250 { max-width: 15.625rem; }

    body .mobile-width-300 { width: 18.75rem; }
    body .mobile-min-width-300 { min-width: 18.75rem; }
    body .mobile-max-width-300 { max-width: 18.75rem; }

    body .mobile-width-350 { width: 21.875rem; }
    body .mobile-min-width-350 { min-width: 21.875rem; }
    body .mobile-max-width-350 { max-width: 21.875rem; }

    body .mobile-width-400 { width: 25rem; }
    body .mobile-min-width-400 { min-width: 25rem; }
    body .mobile-max-width-400 { max-width: 25rem; }

    body .mobile-width-450 { width: 28.125rem; }
    body .mobile-min-width-450 { min-width: 28.125rem; }
    body .mobile-max-width-450 { max-width: 28.125rem; }

    body .mobile-width-500 { width: 31.25rem; }
    body .mobile-min-width-500 { min-width: 31.25rem; }
    body .mobile-max-width-500 { max-width: 31.25rem; }

    body .mobile-width-550 { width: 34.375rem; }
    body .mobile-min-width-550 { min-width: 34.375rem; }
    body .mobile-max-width-550 { max-width: 34.375rem; }

    body .mobile-width-600 { width: 37.5rem; }
    body .mobile-min-width-600 { min-width: 37.5rem; }
    body .mobile-max-width-600 { max-width: 37.5rem; }

    body .mobile-width-650 { width: 40.625rem; }
    body .mobile-min-width-650 { min-width: 40.625rem; }
    body .mobile-max-width-650 { max-width: 40.625rem; }

    body .mobile-width-700 { width: 43.75rem; }
    body .mobile-min-width-700 { min-width: 43.75rem; }
    body .mobile-max-width-700 { max-width: 43.75rem; }

    body .mobile-width-750 { width: 46.875rem; }
    body .mobile-min-width-750 { min-width: 46.875rem; }
    body .mobile-max-width-750 { max-width: 46.875rem; }

    body .mobile-width-800 { width: 50rem; }
    body .mobile-min-width-800 { min-width: 50rem; }
    body .mobile-max-width-800 { max-width: 50rem; }

    /* 1 Column */
    body .mobile-width-calc-100 { width: calc(100% / 1); }

    /* 2 Columns */
    body .mobile-width-calc-50 { width: calc(100% / 2); }

    /* 3 Columns */
    body .mobile-width-calc-33 { width: calc(100% / 3); }

    /* 4 Columns */
    body .mobile-width-calc-25 { width: calc(100% / 4); }

    /* 5 Columns */
    body .mobile-width-calc-20 { idth: calc(100% / 5); }

    /* 6 Columns */
    body .mobile-width-calc-16 { width: calc(100% / 6); }

    /* 8 Columns */
    body .mobile-width-calc-12 { idth: calc(100% / 8); }

    /* 10 Columns */
    body .mobile-width-calc-10 { idth: calc(100% / 10); }

}


/* G) Heights
=================================*/

.height-auto { height: auto; }

.height-1of1 {
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.min-height-1of1 {
    min-height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.max-height-1of1 {
    max-height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.min-vh-1of1 { min-height: 100vh!important; }

.height-25 { height: 1.563rem; }
.min-height-25 { min-height: 1.563rem; }
.max-height-25 { max-height: 1.563rem; }

.height-50 { height: 3.125rem; }
.min-height-50 { min-height: 3.125rem; }
.max-height-50 { max-height: 3.125rem; }

.height-75 { height: 4.688rem; }
.min-height-75 { min-height: 4.688rem; }
.max-height-75 { max-height: 4.688rem; }

.height-100 { height: 6.25rem; }
.min-height-100 { min-height: 6.25rem; }
.max-height-100 { max-height: 6.25rem; }

.height-150 { height: 9.375rem; }
.min-height-150 { min-height: 9.375rem; }
.max-height-150 { max-height: 9.375rem; }

.height-200 { height: 12.5rem; }
.min-height-200 { min-height: 12.5rem; }
.max-height-200 { max-height: 12.5rem; }

.height-250 { height: 15.625rem; }
.min-height-250 { min-height: 15.625rem; }
.max-height-250 { max-height: 15.625rem; }

.height-300 { height: 18.75rem; }
.min-height-300 { min-height: 18.75rem; }
.max-height-300 { max-height: 18.75rem; }

.height-350 { height: 21.875rem; }
.min-height-350 { min-height: 21.875rem; }
.max-height-350 { max-height: 21.875rem; }

.height-400 { height: 25rem; }
.min-height-400 { min-height: 25rem; }
.max-height-400 { max-height: 25rem; }

.height-450 { height: 28.125rem; }
.min-height-450 { min-height: 28.125rem; }
.max-height-450 { max-height: 28.125rem; }

.height-500 { height: 31.25rem; }
.minheight-500 { min-height: 31.25rem; }
.max-height-500 { max-height: 31.25rem; }

.height-550 { height: 34.375rem; }
.minheight-550 { min-height: 34.375rem; }
.max-height-550 { max-height: 34.375rem; }

.height-600 { height: 37.5rem; }
.min-height-600 { min-height: 37.5rem; }
.max-height-600 { max-height: 37.5rem; }

.height-650 { height: 40.625rem; }
.min-height-650 { min-height: 40.625rem; }
.max-height-650 { max-height: 40.625rem; }

.height-700 { height: 43.75rem; }
.min-height-700 { min-height: 43.75rem; }
.max-height-700 { max-height: 43.75rem; }

.height-750 { height: 46.875rem; }
.min-height-750 { min-height: 46.875rem; }
.max-height-750 { max-height: 46.875rem; }

.height-800 { height: 50rem; }
.min-height-800 { min-height: 50rem; }
.max-height-800 { max-height: 50rem; }

/* Desktop */
@media (min-width: 1021px) {

    body .desktop-height-auto { height: auto; }

    body .desktop-height-1of1 {
        height: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    body .desktop-min-height-1of1 {
        min-height: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    body .desktop-max-height-1of1 {
        max-height: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    body .desktop-height-25 { height: 1.563rem; }
    body .desktop-min-height-25 { min-height: 1.563rem; }
    body .desktop-max-height-25 { max-height: 1.563rem; }

    body .desktop-height-50 { height: 3.125rem; }
    body .desktop-min-height-50 { min-height: 3.125rem; }
    body .desktop-max-height-50 { max-height: 3.125rem; }

    body .desktop-height-75 { height: 4.688rem; }
    body .desktop-min-height-75 { min-height: 4.688rem; }
    body .desktop-max-height-75 { max-height: 4.688rem; }

    body .desktop-height-100 { height: 6.25rem; }
    body .desktop-min-height-100 { min-height: 6.25rem; }
    body .desktop-max-height-100 { max-height: 6.25rem; }

    body .desktop-height-150 { height: 9.375rem; }
    body .desktop-min-height-150 { min-height: 9.375rem; }
    body .desktop-max-height-150 { max-height: 9.375rem; }

    body .desktop-height-200 { height: 12.5rem; }
    body .desktop-min-height-200 { min-height: 12.5rem; }
    body .desktop-max-height-200 { max-height: 12.5rem; }

    body .desktop-height-250 { height: 15.625rem; }
    body .desktop-min-height-250 { min-height: 15.625rem; }
    body .desktop-max-height-250 { max-height: 15.625rem; }

    body .desktop-height-300 { height: 18.75rem; }
    body .desktop-min-height-300 { min-height: 18.75rem; }
    body .desktop-max-height-300 { max-height: 18.75rem; }

    body .desktop-height-350 { height: 21.875rem; }
    body .desktop-min-height-350 { min-height: 21.875rem; }
    body .desktop-max-height-350 { max-height: 21.875rem; }

    body .desktop-height-400 { height: 25rem; }
    body .desktop-min-height-400 { min-height: 25rem; }
    body .desktop-max-height-400 { max-height: 25rem; }

    body .desktop-height-450 { height: 28.125rem; }
    body .desktop-min-height-450 { min-height: 28.125rem; }
    body .desktop-max-height-450 { max-height: 28.125rem; }

    body .desktop-height-500 { height: 31.25rem; }
    body .desktop-min-height-500 { min-height: 31.25rem; }
    body .desktop-max-height-500 { max-height: 31.25rem; }

    body .desktop-height-550 { height: 34.375rem; }
    body .desktop-min-height-550 { min-height: 34.375rem; }
    body .desktop-max-height-550 { max-height: 34.375rem; }

    body .desktop-height-600 { height: 37.5rem; }
    body .desktop-min-height-600 { min-height: 37.5rem; }
    body .desktop-max-height-600 { max-height: 37.5rem; }

    body .desktop-height-650 { height: 40.625rem; }
    body .desktop-min-height-650 { min-height: 40.625rem; }
    body .desktop-max-height-650 { max-height: 40.625rem; }

    body .desktop-height-700 { height: 43.75rem; }
    body .desktop-min-height-700 { min-height: 43.75rem; }
    body .desktop-max-height-700 { max-height: 43.75rem; }

    body .desktop-height-750 { height: 46.875rem; }
    body .desktop-min-height-750 { min-height: 46.875rem; }
    body .desktop-max-height-750 { max-height: 46.875rem; }

    body .desktop-height-800 { height: 50rem; }
    body .desktop-min-height-800 { min-height: 50rem; }
    body .desktop-max-height-800 { max-height: 50rem; }

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1020px) {

    body .tablet-height-auto { height: auto; }

    body .tablet-height-1of1 {
        height: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    body .tablet-min-height-1of1 {
        min-height: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    body .tablet-max-height-1of1 {
        max-height: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    body .tablet-height-25 { height: 1.563rem; }
    body .tablet-min-height-25 { min-height: 1.563rem; }
    body .tablet-max-height-25 { max-height: 1.563rem; }

    body .tablet-height-50 { height: 3.125rem; }
    body .tablet-min-height-50 { min-height: 3.125rem; }
    body .tablet-max-height-50 { max-height: 3.125rem; }

    body .desktop-height-75 { height: 4.688rem; }
    body .desktop-min-height-75 { min-height: 4.688rem; }
    body .desktop-max-height-75 { max-height: 4.688rem; }

    body .tablet-height-100 { height: 6.25rem; }
    body .tablet-min-height-100 { min-height: 6.25rem; }
    body .tablet-max-height-100 { max-height: 6.25rem; }

    body .tablet-height-150 { height: 9.375rem; }
    body .tablet-min-height-150 { min-height: 9.375rem; }
    body .tablet-max-height-150 { max-height: 9.375rem; }

    body .tablet-height-200 { height: 12.5rem; }
    body .tablet-min-height-200 { min-height: 12.5rem; }
    body .tablet-max-height-200 { max-height: 12.5rem; }

    body .tablet-height-250 { height: 15.625rem; }
    body .tablet-min-height-250 { min-height: 15.625rem; }
    body .tablet-max-height-250 { max-height: 15.625rem; }

    body .tablet-height-300 { height: 18.75rem; }
    body .tablet-min-height-300 { min-height: 18.75rem; }
    body .tablet-max-height-300 { max-height: 18.75rem; }

    body .tablet-height-350 { height: 21.875rem; }
    body .tablet-min-height-350 { min-height: 21.875rem; }
    body .tablet-max-height-350 { max-height: 21.875rem; }

    body .tablet-height-400 { height: 25rem; }
    body .tablet-min-height-400 { min-height: 25rem; }
    body .tablet-max-height-400 { max-height: 25rem; }

    body .tablet-height-450 { height: 28.125rem; }
    body .tablet-min-height-450 { min-height: 28.125rem; }
    body .tablet-max-height-450 { max-height: 28.125rem; }

    body .tablet-height-500 { height: 31.25rem; }
    body .tablet-min-height-500 { min-height: 31.25rem; }
    body .tablet-max-height-500 { max-height: 31.25rem; }

    body .tablet-height-550 { height: 34.375rem; }
    body .tablet-min-height-550 { min-height: 34.375rem; }
    body .tablet-max-height-550 { max-height: 34.375rem; }

    body .tablet-height-600 { height: 37.5rem; }
    body .tablet-min-height-600 { min-height: 37.5rem; }
    body .tablet-max-height-600 { max-height: 37.5rem; }

    body .tablet-height-650 { height: 40.625rem; }
    body .tablet-min-height-650 { min-height: 40.625rem; }
    body .tablet-max-height-650 { max-height: 40.625rem; }

    body .tablet-height-700 { height: 43.75rem; }
    body .tablet-min-height-700 { min-height: 43.75rem; }
    body .tablet-max-height-700 { max-height: 43.75rem; }

    body .tablet-height-750 { height: 46.875rem; }
    body .tablet-min-height-750 { min-height: 46.875rem; }
    body .tablet-max-height-750 { max-height: 46.875rem; }

    body .tablet-height-800 { height: 50rem; }
    body .tablet-min-height-800 { min-height: 50rem; }
    body .tablet-max-height-800 { max-height: 50rem; }

}

/* Mobile */
@media (max-width: 767px) {

    body .mobile-height-auto { height: auto; }

    body .mobile-height-1of1 {
        height: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    body .mobile-min-height-1of1 {
        min-height: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    body .mobile-max-height-1of1 {
        max-height: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }


    body .mobile-height-25 { height: 1.563rem; }
    body .mobile-min-height-25 { min-height: 1.563rem; }
    body .mobile-max-height-25 { max-height: 1.563rem; }

    body .mobile-height-50 { height: 3.125rem; }
    body .mobile-min-height-50 { min-height: 3.125rem; }
    body .mobile-max-height-50 { max-height: 3.125rem; }

    body .mobile-height-75 { height: 4.688rem; }
    body .mobile-min-height-75 { min-height: 4.688rem; }
    body .mobile-max-height-75 { max-height: 4.688rem; }

    body .mobile-height-100 { height: 6.25rem; }
    body .mobile-min-height-100 { min-height: 6.25rem; }
    body .mobile-max-height-100 { max-height: 6.25rem; }

    body .mobile-height-150 { height: 9.375rem; }
    body .mobile-min-height-150 { min-height: 9.375rem; }
    body .mobile-max-height-150 { max-height: 9.375rem; }

    body .mobile-height-200 { height: 12.5rem; }
    body .mobile-min-height-200 { min-height: 12.5rem; }
    body .mobile-max-height-200 { max-height: 12.5rem; }

    body .mobile-height-250 { height: 15.625rem; }
    body .mobile-min-height-250 { min-height: 15.625rem; }
    body .mobile-max-height-250 { max-height: 15.625rem; }

    body .mobile-height-300 { height: 18.75rem; }
    body .mobile-min-height-300 { min-height: 18.75rem; }
    body .mobile-max-height-300 { max-height: 18.75rem; }

    body .mobile-height-350 { height: 21.875rem; }
    body .mobile-min-height-350 { min-height: 21.875rem; }
    body .mobile-max-height-350 { max-height: 21.875rem; }

    body .mobile-height-400 { height: 25rem; }
    body .mobile-min-height-400 { min-height: 25rem; }
    body .mobile-max-height-400 { max-height: 25rem; }

    body .mobile-height-450 { height: 28.125rem; }
    body .mobile-min-height-450 { min-height: 28.125rem; }
    body .mobile-max-height-450 { max-height: 28.125rem; }

    body .mobile-height-500 { height: 31.25rem; }
    body .mobile-min-height-500 { min-height: 31.25rem; }
    body .mobile-max-height-500 { max-height: 31.25rem; }

    body .mobile-height-550 { height: 34.375rem; }
    body .mobile-min-height-550 { min-height: 34.375rem; }
    body .mobile-max-height-550 { max-height: 34.375rem; }

    body .mobile-height-600 { height: 37.5rem; }
    body .mobile-min-height-600 { min-height: 37.5rem; }
    body .mobile-max-height-600 { max-height: 37.5rem; }

    body .mobile-height-650 { height: 40.625rem; }
    body .mobile-min-height-650 { min-height: 40.625rem; }
    body .mobile-max-height-650 { max-height: 40.625rem; }

    body .mobile-height-700 { height: 43.75rem; }
    body .mobile-min-height-700 { min-height: 43.75rem; }
    body .mobile-max-height-700 { max-height: 43.75rem; }

    body .mobile-height-750 { height: 46.875rem; }
    body .mobile-min-height-750 { min-height: 46.875rem; }
    body .mobile-max-height-750 { max-height: 46.875rem; }

    body .mobile-height-800 { height: 50rem; }
    body .mobile-min-height-800 { min-height: 50rem; }
    body .mobile-max-height-800 { max-height: 50rem; }

}


/* H) Margins
=================================*/

.margin-none { margin: 0; }
.margin-top-auto { margin-top: auto }
.margin-bottom-auto { margin-bottom: auto; }

/* Equal Margin */
.margin-10 { margin: 0.625rem; }
.margin-20 { margin: 1.25rem; }
.margin-30 { margin: 1.875rem; }
.margin-40 { margin: 2.5rem; }
.margin-50 { margin: 3.125rem; }
.margin-60 { margin: 3.75rem; }
.margin-70 { margin: 4.375rem; }
.margin-80 { margin: 5rem; }
.margin-90 { margin: 5.625rem; }
.margin-100 { margin: 6.25rem; }
.margin-110 { margin: 6.875rem; }
.margin-120 { margin: 7.5rem; }

/* Margin X */
body .margin-x-auto { margin-left: auto!important; margin-right: auto!important; }
.margin-x-10 { margin: 0rem 0.625rem; }
.margin-x-20 { margin: 0rem 1.25rem; }
.margin-x-30 { margin: 0rem 1.875rem; }
.margin-x-40 { margin: 0rem 2.5rem; }
.margin-x-50 { margin: 0rem 3.125rem; }
.margin-x-60 { margin: 0rem 3.75rem; }
.margin-x-70 { margin: 0rem 4.375rem; }
.margin-x-80 { margin: 0rem 5rem; }
.margin-x-90 { margin: 0rem 5.625rem; }
.margin-x-100 { margin: 0rem 6.25rem; }
.margin-x-110 { margin: 0rem 6.875rem; }
.margin-x-120 { margin: 0rem 7.5rem; }

/* Margin Y */
body .margin-y-auto { margin-top: auto!important; margin-bottom: auto!important; }
.margin-y-10 { margin: 0.625rem 0rem; }
.margin-y-20 { margin: 1.25rem 0rem; }
.margin-y-30 { margin: 1.875rem 0rem; }
.margin-y-40 { margin: 2.5rem 0rem; }
.margin-y-50 { margin: 3.125rem 0rem; }
.margin-y-60 { margin: 3.75rem 0rem; }
.margin-y-70 { margin: 4.375rem 0rem; }
.margin-y-80 { margin: 5rem 0rem; }
.margin-y-90 { margin: 5.625rem 0rem; }
.margin-y-100 { margin: 6.25rem 0rem; }
.margin-y-110 { margin: 6.875rem 0rem; }
.margin-y-120 { margin: 7.5rem 0rem; }

/* Margin Top */
.margin-top-0 { margin-top: 0rem; }
.margin-top-10 { margin-top: 0.625rem; }
.margin-top-20 { margin-top: 1.25rem; }
.margin-top-30 { margin-top: 1.875rem; }
.margin-top-40 { margin-top: 2.5rem; }
.margin-top-50 { margin-top: 3.125rem; }
.margin-top-60 { margin-top: 3.75rem; }
.margin-top-70 { margin-top: 4.375rem; }
.margin-top-80 { margin-top: 5rem; }
.margin-top-90 { margin-top: 5.625rem; }
.margin-top-100 { margin-top: 6.25rem; }
.margin-top-110 { margin-top: 6.875rem; }
.margin-top-120 { margin-top: 7.5rem; }

/* Margin Right */
.margin-right-auto { margin-right: auto!important; }
.margin-right-0 { margin-right: 0rem; }
.margin-right-10 { margin-right: 0.625rem; }
.margin-right-20 { margin-right: 1.25rem; }
.margin-right-30 { margin-right: 1.875rem; }
.margin-right-40 { margin-right: 2.5rem; }
.margin-right-50 { margin-right: 3.125rem; }
.margin-right-60 { margin-right: 3.75rem; }
.margin-right-70 { margin-right: 4.375rem; }
.margin-right-80 { margin-right: 5rem; }
.margin-right-90 { margin-right: 5.625rem; }
.margin-right-100 { margin-right: 6.25rem; }
.margin-right-110 { margin-right: 6.875rem; }
.margin-right-120 { margin-right: 7.5rem; }

/* Margin Bottom */
.margin-bottom-0 { margin-bottom: 0rem; }
.margin-bottom-10 { margin-bottom: 0.625rem; }
.margin-bottom-20 { margin-bottom: 1.25rem; }
.margin-bottom-30 { margin-bottom: 1.875rem; }
.margin-bottom-40 { margin-bottom: 2.5rem; }
.margin-bottom-50 { margin-bottom: 3.125rem; }
.margin-bottom-60 { margin-bottom: 3.75rem; }
.margin-bottom-70 { margin-bottom: 4.375rem; }
.margin-bottom-80 { margin-bottom: 5rem; }
.margin-bottom-90 { margin-bottom: 5.625rem; }
.margin-bottom-100 { margin-bottom: 6.25rem; }
.margin-bottom-110 { margin-bottom: 6.875rem; }
.margin-bottom-120 { margin-bottom: 7.5rem; }

/* Margin Left */
.margin-left-auto { margin-left: auto!important; }
.margin-left-0 { margin-left: 0rem; }
.margin-left-10 { margin-left: 0.625rem; }
.margin-left-20 { margin-left: 1.25rem; }
.margin-left-30 { margin-left: 1.875rem; }
.margin-left-40 { margin-left: 2.5rem; }
.margin-left-50 { margin-left: 3.125rem; }
.margin-left-60 { margin-left: 3.75rem; }
.margin-left-70 { margin-left: 4.375rem; }
.margin-left-80 { margin-left: 5rem; }
.margin-left-90 { margin-left: 5.625rem; }
.margin-left-100 { margin-left: 6.25rem; }
.margin-left-110 { margin-left: 6.875rem; }
.margin-left-120 { margin-left: 7.5rem; }

/* Desktop */
@media (min-width: 1021px) {
    
    body .desktop-margin-none { margin: 0; }
    body .desktop-margin-top-auto { margin-top: auto }
    body .desktop-margin-bottom-auto { margin-bottom: auto; }
    body .desktop-margin-left-auto { margin-left: auto!important; }
    body .desktop-margin-right-auto { margin-right: auto!important; }

    /* Equal Margin */
    body .desktop-margin-10 { margin: 0.625rem; }
    body .desktop-margin-20 { margin: 1.25rem; }
    body .desktop-margin-30 { margin: 1.875rem; }
    body .desktop-margin-40 { margin: 2.5rem; }
    body .desktop-margin-50 { margin: 3.125rem; }
    body .desktop-margin-60 { margin: 3.75rem; }
    body .desktop-margin-70 { margin: 4.375rem; }
    body .desktop-margin-80 { margin: 5rem; }
    body .desktop-margin-90 { margin: 5.625rem; }
    body .desktop-margin-100 { margin: 6.25rem; }
    body .desktop-margin-110 { margin: 6.875rem; }
    body .desktop-margin-120 { margin: 7.5rem; }

    /* Margin X */
    body .desktop-margin-x-auto { margin-left: auto!important; margin-right: auto!important; }
    body .desktop-margin-x-10 { margin: 0rem 0.625rem; }
    body .desktop-margin-x-20 { margin: 0rem 1.25rem; }
    body .desktop-margin-x-30 { margin: 0rem 1.875rem; }
    body .desktop-margin-x-40 { margin: 0rem 2.5rem; }
    body .desktop-margin-x-50 { margin: 0rem 3.125rem; }
    body .desktop-margin-x-60 { margin: 0rem 3.75rem; }
    body .desktop-margin-x-70 { margin: 0rem 4.375rem; }
    body .desktop-margin-x-80 { margin: 0rem 5rem; }
    body .desktop-margin-x-90 { margin: 0rem 5.625rem; }
    body .desktop-margin-x-100 { margin: 0rem 6.25rem; }
    body .desktop-margin-x-110 { margin: 0rem 6.875rem; }
    body .desktop-margin-x-120 { margin: 0rem 7.5rem; }

    /* Margin Y */
    body .desktop-margin-y-auto { margin: auto 0rem auto 0rem; }
    body .desktop-margin-y-10 { margin: 0.625rem 0rem; }
    body .desktop-margin-y-20 { margin: 1.25rem 0rem; }
    body .desktop-margin-y-30 { margin: 1.875rem 0rem; }
    body .desktop-margin-y-40 { margin: 2.5rem 0rem; }
    body .desktop-margin-y-50 { margin: 3.125rem 0rem; }
    body .desktop-margin-y-60 { margin: 3.75rem 0rem; }
    body .desktop-margin-y-70 { margin: 4.375rem 0rem; }
    body .desktop-margin-y-80 { margin: 5rem 0rem; }
    body .desktop-margin-y-90 { margin: 5.625rem 0rem; }
    body .desktop-margin-y-100 { margin: 6.25rem 0rem; }
    body .desktop-margin-y-110 { margin: 6.875rem 0rem; }
    body .desktop-margin-y-120 { margin: 7.5rem 0rem; }

    /* Margin Top */
    body .desktop-margin-top-0 { margin-top: 0rem; }
    body .desktop-margin-top-10 { margin-top: 0.625rem; }
    body .desktop-margin-top-20 { margin-top: 1.25rem; }
    body .desktop-margin-top-30 { margin-top: 1.875rem; }
    body .desktop-margin-top-40 { margin-top: 2.5rem; }
    body .desktop-margin-top-50 { margin-top: 3.125rem; }
    body .desktop-margin-top-60 { margin-top: 3.75rem; }
    body .desktop-margin-top-70 { margin-top: 4.375rem; }
    body .desktop-margin-top-80 { margin-top: 5rem; }
    body .desktop-margin-top-90 { margin-top: 5.625rem; }
    body .desktop-margin-top-100 { margin-top: 6.25rem; }
    body .desktop-margin-top-110 { margin-top: 6.875rem; }
    body .desktop-margin-top-120 { margin-top: 7.5rem; }

    /* Margin Right */
    body .desktop-margin-right-0 { margin-right: 0rem; }
    body .desktop-margin-right-10 { margin-right: 0.625rem; }
    body .desktop-margin-right-20 { margin-right: 1.25rem; }
    body .desktop-margin-right-30 { margin-right: 1.875rem; }
    body .desktop-margin-right-40 { margin-right: 2.5rem; }
    body .desktop-margin-right-50 { margin-right: 3.125rem; }
    body .desktop-margin-right-60 { margin-right: 3.75rem; }
    body .desktop-margin-right-70 { margin-right: 4.375rem; }
    body .desktop-margin-right-80 { margin-right: 5rem; }
    body .desktop-margin-right-90 { margin-right: 5.625rem; }
    body .desktop-margin-right-100 { margin-right: 6.25rem; }
    body .desktop-margin-right-110 { margin-right: 6.875rem; }
    body .desktop-margin-right-120 { margin-right: 7.5rem; }

    /* Margin Bottom */
    body .desktop-margin-bottom-0 { margin-bottom: 0rem; }
    body .desktop-margin-bottom-10 { margin-bottom: 0.625rem; }
    body .desktop-margin-bottom-20 { margin-bottom: 1.25rem; }
    body .desktop-margin-bottom-30 { margin-bottom: 1.875rem; }
    body .desktop-margin-bottom-40 { margin-bottom: 2.5rem; }
    body .desktop-margin-bottom-50 { margin-bottom: 3.125rem; }
    body .desktop-margin-bottom-60 { margin-bottom: 3.75rem; }
    body .desktop-margin-bottom-70 { margin-bottom: 4.375rem; }
    body .desktop-margin-bottom-80 { margin-bottom: 5rem; }
    body .desktop-margin-bottom-90 { margin-bottom: 5.625rem; }
    body .desktop-margin-bottom-100 { margin-bottom: 6.25rem; }
    body .desktop-margin-bottom-110 { margin-bottom: 6.875rem; }
    body .desktop-margin-bottom-120 { margin-bottom: 7.5rem; }

    /* Margin Left */
    body .desktop-margin-left-0 { margin-left: 0rem; }
    body .desktop-margin-left-10 { margin-left: 0.625rem; }
    body .desktop-margin-left-20 { margin-left: 1.25rem; }
    body .desktop-margin-left-30 { margin-left: 1.875rem; }
    body .desktop-margin-left-40 { margin-left: 2.5rem; }
    body .desktop-margin-left-50 { margin-left: 3.125rem; }
    body .desktop-margin-left-60 { margin-left: 3.75rem; }
    body .desktop-margin-left-70 { margin-left: 4.375rem; }
    body .desktop-margin-left-80 { margin-left: 5rem; }
    body .desktop-margin-left-90 { margin-left: 5.625rem; }
    body .desktop-margin-left-100 { margin-left: 6.25rem; }
    body .desktop-margin-left-110 { margin-left: 6.875rem; }
    body .desktop-margin-left-120 { margin-left: 7.55rem; }

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1020px) {
    
    body .tablet-margin-none { margin: 0; }
    body .tablet-margin-top-auto { margin-top: auto }
    body .tablet-margin-bottom-auto { margin-bottom: auto; }
    body .tablet-margin-left-auto { margin-left: auto!important; }
    body .tablet-margin-right-auto { margin-right: auto!important; }

    /* Equal Margin */
    body .tablet-margin-10 { margin: 0.625rem; }
    body .tablet-margin-20 { margin: 1.25rem; }
    body .tablet-margin-30 { margin: 1.875rem; }
    body .tablet-margin-40 { margin: 2.5rem; }
    body .tablet-margin-50 { margin: 3.125rem; }
    body .tablet-margin-60 { margin: 3.75rem; }
    body .tablet-margin-70 { margin: 4.375rem; }
    body .tablet-margin-80 { margin: 5rem; }
    body .tablet-margin-90 { margin: 5.625rem; }
    body .tablet-margin-100 { margin: 6.25rem; }
    body .tablet-margin-110 { margin: 6.875rem; }
    body .tablet-margin-120 { margin: 7.5rem; }

    /* Margin X */
    body .tablet-margin-x-auto { margin-left: auto!important; margin-right: auto!important; }
    body .tablet-margin-x-10 { margin: 0rem 0.625rem; }
    body .tablet-margin-x-20 { margin: 0rem 1.25rem; }
    body .tablet-margin-x-30 { margin: 0rem 1.875rem; }
    body .tablet-margin-x-40 { margin: 0rem 2.5rem; }
    body .tablet-margin-x-50 { margin: 0rem 3.125rem; }
    body .tablet-margin-x-60 { margin: 0rem 3.75rem; }
    body .tablet-margin-x-70 { margin: 0rem 4.375rem; }
    body .tablet-margin-x-80 { margin: 0rem 5rem; }
    body .tablet-margin-x-90 { margin: 0rem 5.625rem; }
    body .tablet-margin-x-100 { margin: 0rem 6.25rem; }
    body .tablet-margin-x-110 { margin: 0rem 6.875rem; }
    body .tablet-margin-x-120 { margin: 0rem 7.5rem; }

    /* Margin Y */
    body .tablet-margin-y-auto { margin: auto 0rem auto 0rem; }
    body .tablet-margin-y-10 { margin: 0.625rem 0rem; }
    body .tablet-margin-y-20 { margin: 1.25rem 0rem; }
    body .tablet-margin-y-30 { margin: 1.875rem 0rem; }
    body .tablet-margin-y-40 { margin: 2.5rem 0rem; }
    body .tablet-margin-y-50 { margin: 3.125rem 0rem; }
    body .tablet-margin-y-60 { margin: 3.75rem 0rem; }
    body .tablet-margin-y-70 { margin: 4.375rem 0rem; }
    body .tablet-margin-y-80 { margin: 5rem 0rem; }
    body .tablet-margin-y-90 { margin: 5.625rem 0rem; }
    body .tablet-margin-y-100 { margin: 6.25rem 0rem; }
    body .tablet-margin-y-110 { margin: 6.875rem 0rem; }
    body .tablet-margin-y-120 { margin: 7.5rem 0rem; }

    /* Margin Top */
    body .tablet-margin-top-0 { margin-top: 0rem; }
    body .tablet-margin-top-10 { margin-top: 0.625rem; }
    body .tablet-margin-top-20 { margin-top: 1.25rem; }
    body .tablet-margin-top-30 { margin-top: 1.875rem; }
    body .tablet-margin-top-40 { margin-top: 2.5rem; }
    body .tablet-margin-top-50 { margin-top: 3.125rem; }
    body .tablet-margin-top-60 { margin-top: 3.75rem; }
    body .tablet-margin-top-70 { margin-top: 4.375rem; }
    body .tablet-margin-top-80 { margin-top: 5rem; }
    body .tablet-margin-top-90 { margin-top: 5.625rem; }
    body .tablet-margin-top-100 { margin-top: 6.25rem; }
    body .tablet-margin-top-110 { margin-top: 6.875rem; }
    body .tablet-margin-top-120 { margin-top: 7.5rem; }

    /* Margin Right */
    body .tablet-margin-right-0 { margin-right: 0rem; }
    body .tablet-margin-right-10 { margin-right: 0.625rem; }
    body .tablet-margin-right-20 { margin-right: 1.25rem; }
    body .tablet-margin-right-30 { margin-right: 1.875rem; }
    body .tablet-margin-right-40 { margin-right: 2.5rem; }
    body .tablet-margin-right-50 { margin-right: 3.125rem; }
    body .tablet-margin-right-60 { margin-right: 3.75rem; }
    body .tablet-margin-right-70 { margin-right: 4.375rem; }
    body .tablet-margin-right-80 { margin-right: 5rem; }
    body .tablet-margin-right-90 { margin-right: 5.625rem; }
    body .tablet-margin-right-100 { margin-right: 6.25rem; }
    body .tablet-margin-right-110 { margin-right: 6.875rem; }
    body .tablet-margin-right-120 { margin-right: 7.5rem; }

    /* Margin Bottom */
    body .tablet-margin-bottom-0 { margin-bottom: 0rem; }
    body .tablet-margin-bottom-10 { margin-bottom: 0.625rem; }
    body .tablet-margin-bottom-20 { margin-bottom: 1.25rem; }
    body .tablet-margin-bottom-30 { margin-bottom: 1.875rem; }
    body .tablet-margin-bottom-40 { margin-bottom: 2.5rem; }
    body .tablet-margin-bottom-50 { margin-bottom: 3.125rem; }
    body .tablet-margin-bottom-60 { margin-bottom: 3.75rem; }
    body .tablet-margin-bottom-70 { margin-bottom: 4.375rem; }
    body .tablet-margin-bottom-80 { margin-bottom: 5rem; }
    body .tablet-margin-bottom-90 { margin-bottom: 5.625rem; }
    body .tablet-margin-bottom-100 { margin-bottom: 6.25rem; }
    body .tablet-margin-bottom-110 { margin-bottom: 6.875rem; }
    body .tablet-margin-bottom-120 { margin-bottom: 7.5rem; }

    /* Margin Left */
    body .tablet-margin-left-0 { margin-left: 0rem; }
    body .tablet-margin-left-10 { margin-left: 0.625rem; }
    body .tablet-margin-left-20 { margin-left: 1.25rem; }
    body .tablet-margin-left-30 { margin-left: 1.875rem; }
    body .tablet-margin-left-40 { margin-left: 2.5rem; }
    body .tablet-margin-left-50 { margin-left: 3.125rem; }
    body .tablet-margin-left-60 { margin-left: 3.75rem; }
    body .tablet-margin-left-70 { margin-left: 4.375rem; }
    body .tablet-margin-left-80 { margin-left: 5rem; }
    body .tablet-margin-left-90 { margin-left: 5.625rem; }
    body .tablet-margin-left-100 { margin-left: 6.25rem; }
    body .tablet-margin-left-110 { margin-left: 6.875rem; }
    body .tablet-margin-left-120 { margin-left: 7.5rem; }

}

/* Mobile */
@media (max-width: 767px) {
    
    body .mobile-margin-none { margin: 0; }
    body .mobile-margin-top-auto { margin-top: auto }
    body .mobile-margin-bottom-auto { margin-bottom: auto; }
    body .mobile-margin-left-auto { margin-left: auto!important; }
    body .mobile-margin-right-auto { margin-right: auto!important; }

    /* Equal Margin */
    body .mobile-margin-10 { margin: 0.625rem; }
    body .mobile-margin-20 { margin: 1.25rem; }
    body .mobile-margin-30 { margin: 1.875rem; }
    body .mobile-margin-40 { margin: 2.5rem; }
    body .mobile-margin-50 { margin: 3.125rem; }
    body .mobile-margin-60 { margin: 3.75rem; }
    body .mobile-margin-70 { margin: 4.375rem; }
    body .mobile-margin-80 { margin: 5rem; }
    body .mobile-margin-90 { margin: 5.625rem; }
    body .mobile-margin-100 { margin: 6.25rem; }
    body .mobile-margin-110 { margin: 6.875rem; }
    body .mobile-margin-120 { margin: 7.5rem; }

    /* Margin X */
    body .mobile-margin-x-auto { margin-left: auto!important; margin-right: auto!important; }
    body .mobile-margin-x-10 { margin: 0rem 0.625rem; }
    body .mobile-margin-x-20 { margin: 0rem 1.25rem; }
    body .mobile-margin-x-30 { margin: 0rem 1.875rem; }
    body .mobile-margin-x-40 { margin: 0rem 2.5rem; }
    body .mobile-margin-x-50 { margin: 0rem 3.125rem; }
    body .mobile-margin-x-60 { margin: 0rem 3.75rem; }
    body .mobile-margin-x-70 { margin: 0rem 4.375rem; }
    body .mobile-margin-x-80 { margin: 0rem 5rem; }
    body .mobile-margin-x-90 { margin: 0rem 5.625rem; }
    body .mobile-margin-x-100 { margin: 0rem 6.25rem; }
    body .mobile-margin-x-110 { margin: 0rem 6.875rem; }
    body .mobile-margin-x-120 { margin: 0rem 7.5rem; }

    /* Margin Y */
    body .mobile-margin-y-auto { margin: auto 0rem auto 0rem; }
    body .mobile-margin-y-10 { margin: 0.625rem 0rem; }
    body .mobile-margin-y-20 { margin: 1.25rem 0rem; }
    body .mobile-margin-y-30 { margin: 1.875rem 0rem; }
    body .mobile-margin-y-40 { margin: 2.5rem 0rem; }
    body .mobile-margin-y-50 { margin: 3.125rem 0rem; }
    body .mobile-margin-y-60 { margin: 3.75rem 0rem; }
    body .mobile-margin-y-70 { margin: 4.375rem 0rem; }
    body .mobile-margin-y-68 { margin: 5rem 0rem; }
    body .mobile-margin-y-90 { margin: 5.625rem 0rem; }
    body .mobile-margin-y-100 { margin: 6.25rem 0rem; }
    body .mobile-margin-y-110 { margin: 6.875rem 0rem; }
    body .mobile-margin-y-120 { margin: 7.5rem 0rem; }

    /* Margin Top */
    body .mobile-margin-top-0 { margin-top: 0rem; }
    body .mobile-margin-top-10 { margin-top: 0.625rem; }
    body .mobile-margin-top-20 { margin-top: 1.25rem; }
    body .mobile-margin-top-30 { margin-top: 1.875rem; }
    body .mobile-margin-top-40 { margin-top: 2.5rem; }
    body .mobile-margin-top-50 { margin-top: 3.125rem; }
    body .mobile-margin-top-60 { margin-top: 3.75rem; }
    body .mobile-margin-top-70 { margin-top: 4.375rem; }
    body .mobile-margin-top-80 { margin-top: 5rem; }
    body .mobile-margin-top-90 { margin-top: 5.625rem; }
    body .mobile-margin-top-100 { margin-top: 6.25rem; }
    body .mobile-margin-top-110 { margin-top: 6.875rem; }
    body .mobile-margin-top-120 { margin-top: 7.5rem; }

    /* Margin Right */
    body .mobile-margin-right-0 { margin-right: 0rem; }
    body .mobile-margin-right-10 { margin-right: 0.625rem; }
    body .mobile-margin-right-20 { margin-right: 1.25rem; }
    body .mobile-margin-right-30 { margin-right: 1.875rem; }
    body .mobile-margin-right-40 { margin-right: 2.5rem; }
    body .mobile-margin-right-50 { margin-right: 3.125rem; }
    body .mobile-margin-right-60 { margin-right: 3.75rem; }
    body .mobile-margin-right-70 { margin-right: 4.375rem; }
    body .mobile-margin-right-80 { margin-right: 5rem; }
    body .mobile-margin-right-90 { margin-right: 5.625rem; }
    body .mobile-margin-right-100 { margin-right: 6.25rem; }
    body .mobile-margin-right-110 { margin-right: 6.875rem; }
    body .mobile-margin-right-120 { margin-right: 7.5rem; }

    /* Margin Bottom */
    body .mobile-margin-bottom-0 { margin-bottom: 0rem; }
    body .mobile-margin-bottom-10 { margin-bottom: 0.625rem; }
    body .mobile-margin-bottom-20 { margin-bottom: 1.25rem; }
    body .mobile-margin-bottom-30 { margin-bottom: 1.875rem; }
    body .mobile-margin-bottom-40 { margin-bottom: 2.5rem; }
    body .mobile-margin-bottom-50 { margin-bottom: 3.125rem; }
    body .mobile-margin-bottom-60 { margin-bottom: 3.75rem; }
    body .mobile-margin-bottom-70 { margin-bottom: 4.375rem; }
    body .mobile-margin-bottom-80 { margin-bottom: 5rem; }
    body .mobile-margin-bottom-90 { margin-bottom: 5.625rem; }
    body .mobile-margin-bottom-100 { margin-bottom: 6.25rem; }
    body .mobile-margin-bottom-110 { margin-bottom: 6.875rem; }
    body .mobile-margin-bottom-120 { margin-bottom: 7.5rem; }

    /* Margin Left */
    body .mobile-margin-left-0 { margin-left: 0rem; }
    body .mobile-margin-left-10 { margin-left: 0.625rem; }
    body .mobile-margin-left-20 { margin-left: 1.25rem; }
    body .mobile-margin-left-30 { margin-left: 1.875rem; }
    body .mobile-margin-left-40 { margin-left: 2.5rem; }
    body .mobile-margin-left-50 { margin-left: 3.125rem; }
    body .mobile-margin-left-60 { margin-left: 3.75rem; }
    body .mobile-margin-left-70 { margin-left: 4.375rem; } 
    body .mobile-margin-left-80 { margin-left: 5rem; } 
    body .mobile-margin-left-90 { margin-left: 5.625rem; } 
    body .mobile-margin-left-100 { margin-left: 6.25rem; } 
    body .mobile-margin-left-110 { margin-left: 6.875rem; } 
    body .mobile-margin-left-120 { margin-left: 7.5rem; }    

}


/* I) Paddings
=================================*/

body .padding-none { padding: 0!important; }
body .padding-top-auto { padding-top: auto }
body .padding-bottom-auto { padding-bottom: auto; }

/* Equal Padding */
body .padding-10 { padding: 0.625rem; }
body .padding-20 { padding: 1.25rem; }
body .padding-30 { padding: 1.875rem; }
body .padding-40 { padding: 2.5rem; }
body .padding-50 { padding: 3.125rem; }
body .padding-60 { padding: 3.75rem; }
body .padding-70 { padding: 4.375rem; }
body .padding-80 { padding: 5rem; }
body .padding-90 { padding: 5.625rem; }
body .padding-100 { padding: 6.25rem; }
body .padding-110 { padding: 6.875rem; }
body .padding-120 { padding: 7.5rem; }

/* Padding X */
body .padding-x-auto { padding: 0rem auto 0rem auto; }
body .padding-x-10 { padding: 0rem 0.625rem; }
body .padding-x-20 { padding: 0rem 1.25rem; }
body .padding-x-30 { padding: 0rem 1.875rem; }
body .padding-x-40 { padding: 0rem 2.5rem; }
body .padding-x-50 { padding: 0rem 3.125rem; }
body .padding-x-60 { padding: 0rem 3.75rem; }
body .padding-x-70 { padding: 0rem 4.375rem; }
body .padding-x-80 { padding: 0rem 5rem; }
body .padding-x-90 { padding: 0rem 5.625rem; }
body .padding-x-100 { padding: 0rem 6.25rem; }
body .padding-x-110 { padding: 0rem 6.875rem; }
body .padding-x-120 { padding: 0rem 7.5rem; }

/* Padding Y */
body .padding-y-auto { padding: auto 0rem auto 0rem; }
body .padding-y-10 { padding: 0.625rem 0rem; }
body .padding-y-20 { padding: 1.25rem 0rem; }
body .padding-y-30 { padding: 1.875rem 0rem; }
body .padding-y-40 { padding: 2.5rem 0rem; }
body .padding-y-50 { padding: 3.125rem 0rem; }
body .padding-y-60 { padding: 3.75rem 0rem; }
body .padding-y-70 { padding: 4.375rem 0rem; }
body .padding-y-80 { padding: 5rem 0rem; }
body .padding-y-90 { padding: 5.625rem 0rem; }
body .padding-y-100 { padding: 6.25rem 0rem; }
body .padding-y-110 { padding: 6.875rem 0rem; }
body .padding-y-120 { padding: 7.5rem 0rem; }

/* Padding Top */
body .padding-top-0 { padding-top: 0rem; }
body .padding-top-10 { padding-top: 0.625rem; }
body .padding-top-20 { padding-top: 1.25rem; }
body .padding-top-30 { padding-top: 1.875rem; }
body .padding-top-40 { padding-top: 2.5rem; }
body .padding-top-50 { padding-top: 3.125rem; }
body .padding-top-60 { padding-top: 3.75rem; }
body .padding-top-70 { padding-top: 4.375rem; }
body .padding-top-80 { padding-top: 5rem; }
body .padding-top-90 { padding-top: 5.625rem; }
body .padding-top-100 { padding-top: 6.25rem; }
body .padding-top-110 { padding-top: 6.875rem; }
body .padding-top-120 { padding-top: 7.5rem; }

/* Padding Right */
body .padding-right-0 { padding-right: 0rem; }
body .padding-right-10 { padding-right: 0.625rem; }
body .padding-right-20 { padding-right: 1.25rem; }
body .padding-right-30 { padding-right: 1.875rem; }
body .padding-right-40 { padding-right: 2.5rem; }
body .padding-right-50 { padding-right: 3.125rem; }
body .padding-right-60 { padding-right: 3.75rem; }
body .padding-right-70 { padding-right: 4.375rem; }
body .padding-right-80 { padding-right: 5rem; }
body .padding-right-90 { padding-right: 5.625rem; }
body .padding-right-100 { padding-right: 6.25rem; }
body .padding-right-110 { padding-right: 6.875rem; }
body .padding-right-120 { padding-right: 7.5rem; }

/* Padding Bottom */
body .padding-bottom-0 { padding-bottom: 0rem; }
body .padding-bottom-10 { padding-bottom: 0.625rem; }
body .padding-bottom-20 { padding-bottom: 1.25rem; }
body .padding-bottom-30 { padding-bottom: 1.875rem; }
body .padding-bottom-40 { padding-bottom: 2.5rem; }
body .padding-bottom-50 { padding-bottom: 3.125rem; }
body .padding-bottom-60 { padding-bottom: 3.75rem; }
body .padding-bottom-70 { padding-bottom: 4.375rem; }
body .padding-bottom-80 { padding-bottom: 5rem; }
body .padding-bottom-90 { padding-bottom: 5.625rem; }
body .padding-bottom-100 { padding-bottom: 6.25rem; }
body .padding-bottom-110 { padding-bottom: 6.875rem; }
body .padding-bottom-120 { padding-bottom: 7.5rem; }

/* Padding Left */
body .padding-left-0 { padding-left: 0rem; }
body .padding-left-10 { padding-left: 0.625rem; }
body .padding-left-20 { padding-left: 1.25rem; }
body .padding-left-30 { padding-left: 1.875rem; }
body .padding-left-40 { padding-left: 2.5rem; }
body .padding-left-50 { padding-left: 3.125rem; }
body .padding-left-60 { padding-left: 3.75rem; }
body .padding-left-70 { padding-left: 4.375rem; }
body .padding-left-80 { padding-left: 5rem; }
body .padding-left-90 { padding-left: 5.625rem; }
body .padding-left-100 { padding-left: 6.25rem; }
body .padding-left-110 { padding-left: 6.875rem; }
body .padding-left-120 { padding-left: 7.5rem; }

/* Desktop */
@media (min-width: 1021px) {

    html body .desktop-padding-none { padding: 0; }
    html body .desktop-padding-top-auto { padding-top: auto }
    html body .desktop-padding-bottom-auto { padding-bottom: auto; }

    /* Equal Padding */
    html body .desktop-padding-10 { padding: 0.625rem; }
    html body .desktop-padding-20 { padding: 1.25rem; }
    html body .desktop-padding-30 { padding: 1.875rem; }
    html body .desktop-padding-40 { padding: 2.5rem; }
    html body .desktop-padding-50 { padding: 3.125rem; }
    html body .desktop-padding-60 { padding: 3.75rem; }
    html body .desktop-padding-70 { padding: 4.375rem; }
    html body .desktop-padding-80 { padding: 5rem; }
    html body .desktop-padding-90 { padding: 5.625rem; }
    html body .desktop-padding-100 { padding: 6.25rem; }
    html body .desktop-padding-110 { padding: 6.875rem; }
    html body .desktop-padding-120 { padding: 7.5rem; }

    /* Padding X */
    html body .desktop-padding-x-auto { padding: 0rem auto 0rem auto; }
    html body .desktop-padding-x-10 { padding: 0rem 0.625rem; }
    html body .desktop-padding-x-20 { padding: 0rem 1.25rem; }
    html body .desktop-padding-x-30 { padding: 0rem 1.875rem; }
    html body .desktop-padding-x-40 { padding: 0rem 2.5rem; }
    html body .desktop-padding-x-50 { padding: 0rem 3.125rem; }
    html body .desktop-padding-x-60 { padding: 0rem 3.75rem; }
    html body .desktop-padding-x-70 { padding: 0rem 4.375rem; }
    html body .desktop-padding-x-80 { padding: 0rem 5rem; }
    html body .desktop-padding-x-90 { padding: 0rem 5.625rem; }
    html body .desktop-padding-x-100 { padding: 0rem 6.25rem; }
    html body .desktop-padding-x-110 { padding: 0rem 6.875rem; }
    html body .desktop-padding-x-120 { padding: 0rem 7.5rem; }

    /* Padding Y */
    html body .desktop-padding-y-auto { padding: auto 0rem auto 0rem; }
    html body .desktop-padding-y-10 { padding: 0.625rem 0rem; }
    html body .desktop-padding-y-20 { padding: 1.25rem 0rem; }
    html body .desktop-padding-y-30 { padding: 1.875rem 0rem; }
    html body .desktop-padding-y-40 { padding: 2.5rem 0rem; }
    html body .desktop-padding-y-50 { padding: 3.125rem 0rem; }
    html body .desktop-padding-y-60 { padding: 3.75rem 0rem; }
    html body .desktop-padding-y-70 { padding: 4.375rem 0rem; }
    html body .desktop-padding-y-80 { padding: 5rem 0rem; }
    html body .desktop-padding-y-90 { padding: 5.625rem 0rem; }
    html body .desktop-padding-y-100 { padding: 6.25rem 0rem; }
    html body .desktop-padding-y-110 { padding: 6.875rem 0rem; }
    html body .desktop-padding-y-120 { padding: 7.5rem 0rem; }

    /* Padding Top */
    html body .desktop-padding-top-0 { padding-top: 0rem; }
    html body .desktop-padding-top-10 { padding-top: 0.625rem; }
    html body .desktop-padding-top-20 { padding-top: 1.25rem; }
    html body .desktop-padding-top-30 { padding-top: 1.875rem; }
    html body .desktop-padding-top-40 { padding-top: 2.5rem; }
    html body .desktop-padding-top-50 { padding-top: 3.125rem; }
    html body .desktop-padding-top-60 { padding-top: 3.75rem; }
    html body .desktop-padding-top-70 { padding-top: 4.375rem; }
    html body .desktop-padding-top-80 { padding-top: 5rem; }
    html body .desktop-padding-top-90 { padding-top: 5.625rem; }
    html body .desktop-padding-top-100 { padding-top: 6.25rem; }
    html body .desktop-padding-top-110 { padding-top: 6.875rem; }
    html body .desktop-padding-top-120 { padding-top: 7.5rem; }

    /* Padding Right */
    html body .desktop-padding-right-0 { padding-right: 0rem; }
    html body .desktop-padding-right-10 { padding-right: 0.625rem; }
    html body .desktop-padding-right-20 { padding-right: 1.25rem; }
    html body .desktop-padding-right-30 { padding-right: 1.875rem; }
    html body .desktop-padding-right-40 { padding-right: 2.5rem; }
    html body .desktop-padding-right-50 { padding-right: 3.125rem; }
    html body .desktop-padding-right-60 { padding-right: 3.75rem; }
    html body .desktop-padding-right-70 { padding-right: 4.375rem; }
    html body .desktop-padding-right-80 { padding-right: 5rem; }
    html body .desktop-padding-right-90 { padding-right: 5.625rem; }
    html body .desktop-padding-right-100 { padding-right: 6.25rem; }
    html body .desktop-padding-right-110 { padding-right: 6.875rem; }
    html body .desktop-padding-right-120 { padding-right: 7.5rem; }

    /* Padding Bottom */
    html body .desktop-padding-bottom-0 { padding-bottom: 0rem; }
    html body .desktop-padding-bottom-10 { padding-bottom: 0.625rem; }
    html body .desktop-padding-bottom-20 { padding-bottom: 1.25rem; }
    html body .desktop-padding-bottom-30 { padding-bottom: 1.875rem; }
    html body .desktop-padding-bottom-40 { padding-bottom: 2.5rem; }
    html body .desktop-padding-bottom-50 { padding-bottom: 3.125rem; }
    html body .desktop-padding-bottom-60 { padding-bottom: 3.75rem; }
    html body .desktop-padding-bottom-70 { padding-bottom: 4.375rem; }
    html body .desktop-padding-bottom-80 { padding-bottom: 5rem; }
    html body .desktop-padding-bottom-90 { padding-bottom: 5.625rem; }
    html body .desktop-padding-bottom-100 { padding-bottom: 6.25rem; }
    html body .desktop-padding-bottom-110 { padding-bottom: 6.875rem; }
    html body .desktop-padding-bottom-120 { padding-bottom: 7.5rem; }

    /* Padding Left */
    html body .desktop-padding-left-0 { padding-left: 0rem; }
    html body .desktop-padding-left-10 { padding-left: 0.625rem; }
    html body .desktop-padding-left-20 { padding-left: 1.25rem; }
    html body .desktop-padding-left-30 { padding-left: 1.875rem; }
    html body .desktop-padding-left-40 { padding-left: 2.5rem; }
    html body .desktop-padding-left-50 { padding-left: 3.125rem; }
    html body .desktop-padding-left-60 { padding-left: 3.75rem; }
    html body .desktop-padding-left-70 { padding-left: 4.375rem; }
    html body .desktop-padding-left-80 { padding-left: 5rem; }
    html body .desktop-padding-left-90 { padding-left: 5.625rem; }
    html body .desktop-padding-left-100 { padding-left: 6.25rem; }
    html body .desktop-padding-left-110 { padding-left: 6.875rem; }
    html body .desktop-padding-left-120 { padding-left: 7.5rem; }

}

/*Tablet */
@media (min-width: 768px) and (max-width: 1020px) {

    html body .tablet-padding-none { padding: 0; }
    html body .tablet-padding-top-auto { padding-top: auto }
    html body .tablet-padding-bottom-auto { padding-bottom: auto; }

    /* Equal Padding */
    html body .tablet-padding-10 { padding: 0.625rem; }
    html body .tablet-padding-20 { padding: 1.25rem; }
    html body .tablet-padding-30 { padding: 1.875rem; }
    html body .tablet-padding-40 { padding: 2.5rem; }
    html body .tablet-padding-50 { padding: 3.125rem; }
    html body .tablet-padding-60 { padding: 3.75rem; }
    html body .tablet-padding-70 { padding: 4.375rem; }
    html body .tablet-padding-80 { padding: 5rem; }
    html body .tablet-padding-90 { padding: 5.625rem; }
    html body .tablet-padding-100 { padding: 6.25rem; }
    html body .tablet-padding-110 { padding: 6.875rem; }
    html body .tablet-padding-120 { padding: 7.5rem; }

    /* Padding X */
    html body .tablet-padding-x-auto { padding: 0rem auto 0rem auto; }
    html body .tablet-padding-x-10 { padding: 0rem 0.625rem; }
    html body .tablet-padding-x-20 { padding: 0rem 1.25rem; }
    html body .tablet-padding-x-30 { padding: 0rem 1.875rem; }
    html body .tablet-padding-x-40 { padding: 0rem 2.5rem; }
    html body .tablet-padding-x-50 { padding: 0rem 3.125rem; }
    html body .tablet-padding-x-60 { padding: 0rem 3.75rem; }
    html body .tablet-padding-x-70 { padding: 0rem 4.375rem; }
    html body .tablet-padding-x-80 { padding: 0rem 5rem; }
    html body .tablet-padding-x-90 { padding: 0rem 5.625rem; }
    html body .tablet-padding-x-100 { padding: 0rem 6.25rem; }
    html body .tablet-padding-x-110 { padding: 0rem 6.875rem; }
    html body .tablet-padding-x-120 { padding: 0rem 7.5rem; }

    /* Padding Y */
    html body .tablet-padding-y-auto { padding: auto 0rem auto 0rem; }
    html body .tablet-padding-y-10 { padding: 0.625rem 0rem; }
    html body .tablet-padding-y-20 { padding: 1.25rem 0rem; }
    html body .tablet-padding-y-30 { padding: 1.875rem 0rem; }
    html body .tablet-padding-y-40 { padding: 2.5rem 0rem; }
    html body .tablet-padding-y-50 { padding: 3.125rem 0rem; }
    html body .tablet-padding-y-60 { padding: 3.75rem 0rem; }
    html body .tablet-padding-y-70 { padding: 4.375rem 0rem; }
    html body .tablet-padding-y-80 { padding: 5rem 0rem; }
    html body .tablet-padding-y-90 { padding: 5.625rem 0rem; }
    html body .tablet-padding-y-100 { padding: 6.25rem 0rem; }
    html body .tablet-padding-y-110 { padding: 6.875rem 0rem; }
    html body .tablet-padding-y-120 { padding: 7.5rem 0rem; }

    /* Padding Top */
    html body .tablet-padding-top-0 { padding-top: 0rem; }
    html body .tablet-padding-top-10 { padding-top: 0.625rem; }
    html body .tablet-padding-top-20 { padding-top: 1.25rem; }
    html body .tablet-padding-top-30 { padding-top: 1.875rem; }
    html body .tablet-padding-top-40 { padding-top: 2.5rem; }
    html body .tablet-padding-top-50 { padding-top: 3.125rem; }
    html body .tablet-padding-top-60 { padding-top: 3.75rem; }
    html body .tablet-padding-top-70 { padding-top: 4.375rem; }
    html body .tablet-padding-top-80 { padding-top: 5rem; }
    html body .tablet-padding-top-90 { padding-top: 5.625rem; }
    html body .tablet-padding-top-100 { padding-top: 6.25rem; }
    html body .tablet-padding-top-110 { padding-top: 6.875rem; }
    html body .tablet-padding-top-120 { padding-top: 7.5rem; }

    /* Padding Right */
    html body .tablet-padding-right-0 { padding-right: 0rem; }
    html body .tablet-padding-right-10 { padding-right: 0.625rem; }
    html body .tablet-padding-right-20 { padding-right: 1.25rem; }
    html body .tablet-padding-right-30 { padding-right: 1.875rem; }
    html body .tablet-padding-right-40 { padding-right: 2.5rem; }
    html body .tablet-padding-right-50 { padding-right: 3.125rem; }
    html body .tablet-padding-right-60 { padding-right: 3.75rem; }
    html body .tablet-padding-right-70 { padding-right: 4.375rem; }
    html body .tablet-padding-right-80 { padding-right: 5rem; }
    html body .tablet-padding-right-90 { padding-right: 5.625rem; }
    html body .tablet-padding-right-100 { padding-right: 6.25rem; }
    html body .tablet-padding-right-110 { padding-right: 6.875rem; }
    html body .tablet-padding-right-120 { padding-right: 7.5rem; }

    /* Padding Bottom */
    html body .tablet-padding-bottom-0 { padding-bottom: 0rem; }
    html body .tablet-padding-bottom-10 { padding-bottom: 0.625rem; }
    html body .tablet-padding-bottom-20 { padding-bottom: 1.25rem; }
    html body .tablet-padding-bottom-30 { padding-bottom: 1.875rem; }
    html body .tablet-padding-bottom-40 { padding-bottom: 2.5rem; }
    html body .tablet-padding-bottom-50 { padding-bottom: 3.125rem; }
    html body .tablet-padding-bottom-60 { padding-bottom: 3.75rem; }
    html body .tablet-padding-bottom-70 { padding-bottom: 4.375rem; }
    html body .tablet-padding-bottom-80 { padding-bottom: 5rem; }
    html body .tablet-padding-bottom-90 { padding-bottom: 5.625rem; }
    html body .tablet-padding-bottom-100 { padding-bottom: 6.25rem; }
    html body .tablet-padding-bottom-110 { padding-bottom: 6.875rem; }
    html body .tablet-padding-bottom-120 { padding-bottom: 7.5rem; }

    /* Padding Left */
    html body .tablet-padding-left-0 { padding-left: 0rem; }
    html body .tablet-padding-left-10 { padding-left: 0.625rem; }
    html body .tablet-padding-left-20 { padding-left: 1.25rem; }
    html body .tablet-padding-left-30 { padding-left: 1.875rem; }
    html body .tablet-padding-left-40 { padding-left: 2.5rem; }
    html body .tablet-padding-left-50 { padding-left: 3.125rem; }
    html body .tablet-padding-left-60 { padding-left: 3.75rem; }
    html body .tablet-padding-left-70 { padding-left: 4.375rem; }
    html body .tablet-padding-left-80 { padding-left: 5rem; }
    html body .tablet-padding-left-90 { padding-left: 5.625rem; }
    html body .tablet-padding-left-100 { padding-left: 6.25rem; }
    html body .tablet-padding-left-110 { padding-left: 6.875rem; }
    html body .tablet-padding-left-120 { padding-left: 7.5rem; }

}

/* Mobile */
@media (max-width: 767px) {
    
    html body .mobile-padding-none { padding: 0; }
    html body .mobile-padding-top-auto { padding-top: auto }
    html body .mobile-padding-bottom-auto { padding-bottom: auto; }

    /* Equal Padding */
    html body .mobile-padding-10 { padding: 0.625rem; }
    html body .mobile-padding-20 { padding: 1.25rem; }
    html body .mobile-padding-30 { padding: 1.875rem; }
    html body .mobile-padding-40 { padding: 2.5rem; }
    html body .mobile-padding-50 { padding: 3.125rem; }
    html body .mobile-padding-60 { padding: 3.75rem; }
    html body .mobile-padding-70 { padding: 4.375rem; }
    html body .mobile-padding-80 { padding: 5rem; }
    html body .mobile-padding-90 { padding: 5.625rem; }
    html body .mobile-padding-100 { padding: 6.25rem; }
    html body .mobile-padding-110 { padding: 6.875rem; }
    html body .mobile-padding-120 { padding: 7.5rem; }

    /* Padding X */
    html body .mobile-padding-x-auto { padding: 0rem auto 0rem auto; }
    html body .mobile-padding-x-10 { padding: 0rem 0.625rem; }
    html body .mobile-padding-x-20 { padding: 0rem 1.25rem; }
    html body .mobile-padding-x-30 { padding: 0rem 1.875rem; }
    html body .mobile-padding-x-40 { padding: 0rem 2.5rem; }
    html body .mobile-padding-x-50 { padding: 0rem 3.125rem; }
    html body .mobile-padding-x-60 { padding: 0rem 3.75rem; }
    html body .mobile-padding-x-70 { padding: 0rem 4.375rem; }
    html body .mobile-padding-x-80 { padding: 0rem 5rem; }
    html body .mobile-padding-x-90 { padding: 0rem 5.625rem; }
    html body .mobile-padding-x-100 { padding: 0rem 6.25rem; }
    html body .mobile-padding-x-110 { padding: 0rem 6.875rem; }
    html body .mobile-padding-x-120 { padding: 0rem 7.5rem; }

    /* Padding Y */
    html body .mobile-padding-y-auto { padding: auto 0rem auto 0rem; }
    html body .mobile-padding-y-10 { padding: 0.625rem 0rem; }
    html body .mobile-padding-y-20 { padding: 1.25rem 0rem; }
    html body .mobile-padding-y-30 { padding: 1.875rem 0rem; }
    html body .mobile-padding-y-40 { padding: 2.5rem 0rem; }
    html body .mobile-padding-y-50 { padding: 3.125rem 0rem; }
    html body .mobile-padding-y-60 { padding: 3.75rem 0rem; }
    html body .mobile-padding-y-70 { padding: 4.375rem 0rem; }
    html body .mobile-padding-y-80 { padding: 5rem 0rem; }
    html body .mobile-padding-y-90 { padding: 5.625rem 0rem; }
    html body .mobile-padding-y-100 { padding: 6.25rem 0rem; }
    html body .mobile-padding-y-110 { padding: 6.875rem 0rem; }
    html body .mobile-padding-y-120 { padding: 7.5rem 0rem; }

    /* Padding Top */
    html body .mobile-padding-top-0 { padding-top: 0rem; }
    html body .mobile-padding-top-10 { padding-top: 0.625rem; }
    html body .mobile-padding-top-20 { padding-top: 1.25rem; }
    html body .mobile-padding-top-30 { padding-top: 1.875rem; }
    html body .mobile-padding-top-40 { padding-top: 2.5rem; }
    html body .mobile-padding-top-50 { padding-top: 3.125rem; }
    html body .mobile-padding-top-60 { padding-top: 3.75rem; }
    html body .mobile-padding-top-70 { padding-top: 4.375rem; }
    html body .mobile-padding-top-80 { padding-top: 5rem; }
    html body .mobile-padding-top-90 { padding-top: 5.625rem; }
    html body .mobile-padding-top-100 { padding-top: 6.25rem; }
    html body .mobile-padding-top-110 { padding-top: 6.875rem; }
    html body .mobile-padding-top-120 { padding-top: 7.5rem; }

    /* Padding Right */
    html body .mobile-padding-right-0 { padding-right: 0rem; }
    html body .mobile-padding-right-10 { padding-right: 0.625rem; }
    html body .mobile-padding-right-20 { padding-right: 1.25rem; }
    html body .mobile-padding-right-30 { padding-right: 1.875rem; }
    html body .mobile-padding-right-40 { padding-right: 2.5rem; }
    html body .mobile-padding-right-50 { padding-right: 3.125rem; }
    html body .mobile-padding-right-60 { padding-right: 3.75rem; }
    html body .mobile-padding-right-70 { padding-right: 4.375rem; }
    html body .mobile-padding-right-80 { padding-right: 5rem; }
    html body .mobile-padding-right-90 { padding-right: 5.625rem; }
    html body .mobile-padding-right-100 { padding-right: 6.25rem; }
    html body .mobile-padding-right-110 { padding-right: 6.875rem; }
    html body .mobile-padding-right-120 { padding-right: 7.5rem; }

    /* Padding Bottom */
    html body .mobile-padding-bottom-0 { padding-bottom: 0rem; }
    html body .mobile-padding-bottom-10 { padding-bottom: 0.625rem; }
    html body .mobile-padding-bottom-20 { padding-bottom: 1.25rem; }
    html body .mobile-padding-bottom-30 { padding-bottom: 1.875rem; }
    html body .mobile-padding-bottom-40 { padding-bottom: 2.5rem; }
    html body .mobile-padding-bottom-50 { padding-bottom: 3.125rem; }
    html body .mobile-padding-bottom-60 { padding-bottom: 3.75rem; }
    html body .mobile-padding-bottom-70 { padding-bottom: 4.375rem; }
    html body .mobile-padding-bottom-80 { padding-bottom: 5rem; }
    html body .mobile-padding-bottom-90 { padding-bottom: 5.625rem; }
    html body .mobile-padding-bottom-100 { padding-bottom: 6.25rem; }
    html body .mobile-padding-bottom-110 { padding-bottom: 6.875rem; }
    html body .mobile-padding-bottom-120 { padding-bottom: 7.5rem; }

    /* Padding Left */
    html body .mobile-padding-left-0 { padding-left: 0rem; }
    html body .mobile-padding-left-10 { padding-left: 0.625rem; }
    html body .mobile-padding-left-20 { padding-left: 1.25rem; }
    html body .mobile-padding-left-30 { padding-left: 1.875rem; }
    html body .mobile-padding-left-40 { padding-left: 2.5rem; }
    html body .mobile-padding-left-50 { padding-left: 3.125rem; }
    html body .mobile-padding-left-60 { padding-left: 3.75rem; }
    html body .mobile-padding-left-70 { padding-left: 4.375rem; }
    html body .mobile-padding-left-80 { padding-left: 5rem; }
    html body .mobile-padding-left-90 { padding-left: 5.625rem; }
    html body .mobile-padding-left-100 { padding-left: 6.25rem; }
    html body .mobile-padding-left-110 { padding-left: 6.875rem; }
    html body .mobile-padding-left-120 { padding-left: 7.5rem; }

}


/* J) Aspect Ratios (Images)
=================================*/

.aspect-prepped {
    position: relative;
    width: 100%;
    background-color: #E6E6E6;
    overflow: hidden;
}

.aspect-prepped-dark {
    position: relative;
    width: 100%;
    background-color: #000000;
    overflow: hidden;
}

.aspect-auto { 
    height: 0!important;
    padding-bottom: auto!important;
}

.aspect-skinny { 
    height: 0!important;
    padding-bottom: 20%!important;
}

.aspect-skinny-2 { 
    height: 0!important;
    padding-bottom: 28%!important;
}

.aspect-21x9 { 
    height: 0!important;
    padding-bottom: 42%!important;
}

/* YouTube Standard */
.aspect-16x9 { 
    height: 0!important;
    padding-bottom: 56.25%!important;
}

.aspect-2x3 { 
    height: 0!important;
    padding-bottom: 66.66%!important;
}

.aspect-3x4 {
    height: 0!important;
    padding-bottom: 75%!important;
}

.aspect-4x5 {
    height: 0!important;
    padding-bottom: 80%!important;
}

.aspect-9x10 {
    height: 0!important;
    padding-bottom: 90%!important;
}

.aspect-1x1 {
    height: 0!important;
    padding-bottom: 100%!important;
}

.aspect-11x10 {
    height: 0!important;
    padding-bottom: 110%!important;
}

.aspect-5x4 {
    height: 0!important;
    padding-bottom: 125%!important;
}

.aspect-8x11 {
    height: 0!important;
    padding-bottom: 129.412%!important;
}

.aspect-5x7 {
    height: 0!important;
    padding-bottom: 140%!important;
}

.aspect-vh-50 {
    height: 0!important;
    padding-bottom: 50vh!important;
}

.aspect-vh-60 {
    height: 0!important;
    padding-bottom: 60vh!important;
}

.aspect-vh-70 {
    height: 0!important;
    padding-bottom: 70vh!important;
}

.aspect-vh-75 {
    height: 0!important;
    padding-bottom: 75vh!important;
}

.aspect-vh-80 {
    height: 0!important;
    padding-bottom: 80vh!important;
}

.aspect-vh-90 {
    height: 0!important;
    padding-bottom: 90vh!important;
}

.aspect-vh {
    height: 0!important;
    padding-bottom: 100vh!important;
}


/* Desktop */
@media (min-width: 1021px) {

    html body .desktop-aspect-skinny { 
        height: 0!important;
        padding-bottom: 20%!important;
    }

    html body .desktop-aspect-21x9 { 
        height: 0!important;
        padding-bottom: 42%!important;
    }

    html body .desktop-aspect-16x9 { 
        height: 0!important;
        padding-bottom: 56.25%!important;
    }

    html body .desktop-aspect-2x3 { 
        height: 0!important;
        padding-bottom: 66.66%!important;
    }

    html body .desktop-aspect-3x4 {
        height: 0!important;
        padding-bottom: 75%!important;
    }

    html body .desktop-aspect-4x5 {
        height: 0!important;
        padding-bottom: 80%!important;
    }

    html body .desktop-aspect-9x10 {
        height: 0!important;
        padding-bottom: 90%!important;
    }

    html body .desktop-aspect-11x10 {
        height: 0!important;
        padding-bottom: 110%!important;
    }

    html body .desktop-aspect-1x1 {
        height: 0!important;
        padding-bottom: 100%!important;
    }

    html body .desktop-aspect-5x4 {
        height: 0!important;
        padding-bottom: 125%!important;
    }

    html body .desktop-aspect-8x11 {
        height: 0!important;
        padding-bottom: 129.412%!important;
    }

    html body .desktop-aspect-5x7 {
        height: 0!important;
        padding-bottom: 140%!important;
    }

    html body .desktop-aspect-vh-50 {
        height: 0!important;
        padding-bottom: 50vh!important;
    }

    html body .desktop-aspect-vh-60 {
        height: 0!important;
        padding-bottom: 60vh!important;
    }

    html body .desktop-aspect-vh-70 {
        height: 0!important;
        padding-bottom: 70vh!important;
    }

    html body .desktop-aspect-vh-75 {
        height: 0!important;
        padding-bottom: 75vh!important;
    }

    html body .desktop-aspect-vh-80 {
        height: 0!important;
        padding-bottom: 80vh!important;
    }

    html body .desktop-aspect-vh-90 {
        height: 0!important;
        padding-bottom: 90vh!important;
    }

    html body .desktop-aspect-vh {
        height: 0!important;
        padding-bottom: 100vh!important;
    }


    /* Custom Layout Aspects (Columns: 1x5) */
    html .column-group.desktop-column-width-custom-1x5 > .responsive:nth-child(1) .desktop-aspect-custom,
    html .column-group.desktop-column-width-custom-1x5 > .responsive:nth-child(2) .desktop-aspect-custom {
        height: 0!important;
        padding-bottom: 66.66%!important;
    }

    html .column-group.desktop-column-width-custom-1x5 > .responsive:nth-child(3) .desktop-aspect-custom,
    html .column-group.desktop-column-width-custom-1x5 > .responsive:nth-child(4) .desktop-aspect-custom,
    html .column-group.desktop-column-width-custom-1x5 > .responsive:nth-child(5) .desktop-aspect-custom {
        height: 0!important;
        padding-bottom: 100%!important;
    }

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1020px) {

    html body .tablet-aspect-skinny { 
        height: 0!important;
        padding-bottom: 20%!important;
    }

    html body .tablet-aspect-21x9 { 
        height: 0!important;
        padding-bottom: 42%!important;
    }

    html body .tablet-aspect-16x9 { 
        height: 0!important;
        padding-bottom: 56.25%!important;
    }

    html body .tablet-aspect-2x3 { 
        height: 0!important;
        padding-bottom: 66.66%!important;
    }

    html body .tablet-aspect-3x4 {
        height: 0!important;
        padding-bottom: 75%!important;
    }

    html body .tablet-aspect-4x5 {
        height: 0!important;
        padding-bottom: 80%!important;
    }

    html body .tablet-aspect-9x10 {
        height: 0!important;
        padding-bottom: 90%!important;
    }

    html body .tablet-aspect-1x1 {
        height: 0!important;
        padding-bottom: 100%!important;
    }

    html body .tablet-aspect-11x10 {
        height: 0!important;
        padding-bottom: 110%!important;
    }

    html body .tablet-aspect-5x4 {
        height: 0!important;
        padding-bottom: 125%!important;
    }

    html body .tablet-aspect-8x11 {
        height: 0!important;
        padding-bottom: 129.412%!important;
    }

    html body .tablet-aspect-5x7 {
        height: 0!important;
        padding-bottom: 140%!important;
    }

    html body .tablet-aspect-vh-50 {
        height: 0!important;
        padding-bottom: 50vh!important;
    }

    html body .tablet-aspect-vh-60 {
        height: 0!important;
        padding-bottom: 60vh!important;
    }

    html body .tablet-aspect-vh-70 {
        height: 0!important;
        padding-bottom: 70vh!important;
    }

    html body .tablet-aspect-vh-75 {
        height: 0!important;
        padding-bottom: 75vh!important;
    }

    html body .tablet-aspect-vh-80 {
        height: 0!important;
        padding-bottom: 80vh!important;
    }

    html body .tablet-aspect-vh-90 {
        height: 0!important;
        padding-bottom: 90vh!important;
    }

    html body .tablet-aspect-vh {
        height: 0!important;
        padding-bottom: 100vh!important;
    }

    /* Custom Layout Aspects (Columns: 1x3) */
    html .column-group.tablet-column-width-custom-1x3 > .responsive:nth-child(3) .tablet-aspect-custom {
        height: 0!important;
        padding-bottom: 66.66%!important;
    }

    /* Custom Layout Aspects (Columns: 1x5) */
    html .column-group.tablet-column-width-custom-1x5 > .responsive:nth-child(1) .tablet-aspect-custom {
        height: 0!important;
        padding-bottom: 66.66%!important;
    }

    html .column-group.tablet-column-width-custom-1x5 > .responsive:nth-child(2) .tablet-aspect-custom,
    html .column-group.tablet-column-width-custom-1x5 > .responsive:nth-child(3) .tablet-aspect-custom,
    html .column-group.tablet-column-width-custom-1x5 > .responsive:nth-child(4) .tablet-aspect-custom,
    html .column-group.tablet-column-width-custom-1x5 > .responsive:nth-child(5) .tablet-aspect-custom {
        height: 0!important;
        padding-bottom: 100%!important;
    }

}

/* Mobile */
@media (max-width: 767px) {

    html body .mobile-aspect-skinny { 
        height: 0!important;
        padding-bottom: 25%!important;
    }

    html body .mobile-aspect-21x9 { 
        height: 0!important;
        padding-bottom: 42%!important;
    }

    html body .mobile-aspect-16x9 { 
        height: 0!important;
        padding-bottom: 56.25%!important;
    }

    html body .mobile-aspect-2x3 { 
        height: 0!important;
        padding-bottom: 66.66%!important;
    }

    html body .mobile-aspect-3x4 {
        height: 0!important;
        padding-bottom: 75%!important;
    }

    html body .mobile-aspect-4x5 {
        height: 0!important;
        padding-bottom: 80%!important;
    }

    html body .mobile-aspect-9x10 {
        height: 0!important;
        padding-bottom: 90%!important;
    }

    html body .mobile-aspect-1x1 {
        height: 0!important;
        padding-bottom: 100%!important;
    }

    html body .mobile-aspect-11x10 {
        height: 0!important;
        padding-bottom: 110%!important;
    }

    html body .mobile-aspect-5x4 {
        height: 0!important;
        padding-bottom: 125%!important;
    }

    html body .mobile-aspect-8x11 {
        height: 0!important;
        padding-bottom: 129.412%!important;
    }

    html body .mobile-aspect-5x7 {
        height: 0!important;
        padding-bottom: 140%!important;
    }

    html body .mobile-aspect-vh-50 {
        height: 0!important;
        padding-bottom: 50vh!important;
    }

    html body .mobile-aspect-vh-60 {
        height: 0!important;
        padding-bottom: 60vh!important;
    }

    html body .mobile-aspect-vh-70 {
        height: 0!important;
        padding-bottom: 70vh!important;
    }

    html body .mobile-aspect-vh-75 {
        height: 0!important;
        padding-bottom: 75vh!important;
    }

    html body .mobile-aspect-vh-80 {
        height: 0!important;
        padding-bottom: 80vh!important;
    }

    html body .mobile-aspect-vh-90 {
        height: 0!important;
        padding-bottom: 90vh!important;
    }

    html body .mobile-aspect-vh {
        height: 0!important;
        padding-bottom: 100vh!important;
    }

    /* Custom Layout Aspects (Columns: 1x5) */
    html .column-group.mobile-column-width-custom-1x5 > .responsive:nth-child(1) .mobile-aspect-custom,
    html .column-group.mobile-column-width-custom-1x5 > .responsive:nth-child(2) .mobile-aspect-custom,
    html .column-group.mobile-column-width-custom-1x5 > .responsive:nth-child(3) .mobile-aspect-custom,
    html .column-group.mobile-column-width-custom-1x5 > .responsive:nth-child(4) .mobile-aspect-custom,
    html .column-group.mobile-column-width-custom-1x5 > .responsive:nth-child(5) .mobile-aspect-custom {
        height: 0!important;
        padding-bottom: 100%!important;
    }

}



/*===============================================================
 *
 *  12) CONTENT BLOCKS
 *  Determine the size of the section + section prepping.
 *
===============================================================*/

/* A) Sections Prepping
-=================================*/

body .section-spacer {
    display: block;
    position: relative;
    width: 100%;
    height: 2.5rem;
}

body .prepped-section {
    display: block;
    position: relative;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
}

.content-divider {
    display: block;
    position: relative;
    width: 100%;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

.content-divider::before {
    content: " ";
    display: table;
    position: relative;
    width: 100%;
    height: 0.063rem;
    margin: 0 auto!important;
    background-color: var(--dark-border);
}


/* B) Content Blocks
-=================================*/

[class*="content-block"] {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: none;
  clear: both;
}

[class*="content-block"]::after { 
    display: table; 
    content: " ";
    clear: both;
}

[class*="content-block"]::before { 
    display: table; 
    content: " ";
    clear: both;
}

/* Desktop */
@media (min-width: 1021px) {

    /* 960px */ 
    body .content-block-xs,
    body .desktop-content-block-xs {
        max-width: 60rem; }
  
    /* 1200px */ 
    body .content-block-s,
    body .desktop-content-block-s {
      max-width: 75rem; }
     
    /* 1400px */ 
    body .content-block-m,
    body .desktop-content-block-m {
      max-width: 87.5rem; }
      
    /* 1600px */ 
    body .content-block-l,
    body .desktop-content-block-l {
      max-width: 100rem; }
      
    /* 1920px */ 
    body .content-block-xl,
    body .desktop-content-block-xl {
      max-width: 120rem; }
  
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1020px) {
  
  /* 920px */
  body .content-block-xs, body .tablet-content-block-xs,
  body .content-block-s, body .tablet-content-block-s,
  body .content-block-m, body .tablet-content-block-m,
  body .content-block-l, body .tablet-content-block-l,
  body .content-block-xl, body .tablet-content-block-xl {
    max-width: 57.5rem; }
  
}

/* Mobile */
@media (max-width: 767px) {


  /* 550px */
  body .content-block-xs,
  body .content-block-s,
  body .content-block-m,
  body .content-block-l,
  body .content-block-xl {
    max-width: 34.375rem; }
  
}



/*===============================================================
 *
 *  13) FLEXBOX
 *  Good for columns, overlays, and grid childs.
 *
===============================================================*/

/* A) Parent: Flexbox Style
=================================*/

.flex-height .flex-height-push .flex-pushed,
.flex-height .flex-height-push > .flex-pushed {
    margin-top: auto!important;
}

.flex-height .flex-height-push-1 > *:nth-of-type(1) {
    margin-top: auto!important;
}

.flex-height .flex-height-push-2 > *:nth-of-type(2) {
    margin-top: auto!important;
}

.flex-height .flex-height-push-3 > *:nth-of-type(3) {
    margin-top: auto!important;
}

.flex-height .flex-height-push-4 > *:nth-of-type(4) { 
    margin-top: auto!important;
}


.flex-height {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    height: 100%;

}

.flex-box-prepped {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    position: relative;
    width: 100%;
    padding: 0;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    text-align: center;
    list-style: none;
}

body .flex-row-wrap {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap!important;
    -ms-flex-flow: row wrap!important;
    flex-flow: row wrap!important;
}

body .flex-row-nowrap {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap!important;
    -ms-flex-flow: row nowrap!important;
    flex-flow: row nowrap!important;
}

body .flex-row-reverse {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap-reverse!important;
    -ms-flex-flow: row wrap-reverse!important;
    flex-flow: row wrap-reverse!important;
}

body .flex-column-wrap {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column wrap!important;
    -ms-flex-flow: column wrap!important;
    flex-flow: column wrap!important;
}

body .flex-column-nowrap {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column nowrap!important;
    -ms-flex-flow: column nowrap!important;
    flex-flow: column nowrap!important;
}

body .flex-column-reverse {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column-reverse!important;
    -ms-flex-direction: column-reverse!important;
    flex-direction: column-reverse!important;
}

/* Desktop */
@media (min-width: 1021px) {

    .desktop-flex-box-prepped {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        position: relative;
        width: 100%;
        padding: 0;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        text-align: center;
        list-style: none;
    }

    .desktop-flex-height {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: column nowrap;
        -ms-flex-flow: column nowrap;
        flex-flow: column nowrap;
        height: 100%;

    }

    .desktop-flex-row-wrap {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap!important;
        -ms-flex-flow: row wrap!important;
        flex-flow: row wrap!important; }

    .desktop-flex-row-nowrap {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row nowrap!important;
        -ms-flex-flow: row nowrap!important;
        flex-flow: row nowrap!important; }

    .desktop-flex-row-reverse {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap-reverse!important;
        -ms-flex-flow: row wrap-reverse!important;
        flex-flow: row wrap-reverse!important; }

    .desktop-flex-column-wrap {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: column wrap!important;
        -ms-flex-flow: column wrap!important;
        flex-flow: column wrap!important; }

    .desktop-flex-column-nowrap {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: column nowrap!important;
        -ms-flex-flow: column nowrap!important;
        flex-flow: column nowrap!important; }

    .desktop-flex-column-reverse {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column-reverse!important;
        -ms-flex-direction: column-reverse!important;
        flex-direction: column-reverse!important; }

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1020px) {

    .tablet-flex-box-prepped {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        position: relative;
        width: 100%;
        padding: 0;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        text-align: center;
        list-style: none;
    }

    .tablet-flex-height {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: column nowrap;
        -ms-flex-flow: column nowrap;
        flex-flow: column nowrap;
        height: 100%;

    }

    .tablet-flex-row-wrap {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap!important;
        -ms-flex-flow: row wrap!important;
        flex-flow: row wrap!important; }

    .tablet-flex-row-nowrap {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row nowrap!important;
        -ms-flex-flow: row nowrap!important;
        flex-flow: row nowrap!important; }

    .tablet-flex-row-reverse {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap-reverse!important;
        -ms-flex-flow: row wrap-reverse!important;
        flex-flow: row wrap-reverse!important; }

    .tablet-flex-column-wrap {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: column wrap!important;
        -ms-flex-flow: column wrap!important;
        flex-flow: column wrap!important; }

    .tablet-flex-column-nowrap {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: column nowrap!important;
        -ms-flex-flow: column nowrap!important;
        flex-flow: column nowrap!important; }

    .tablet-flex-column-reverse {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column-reverse!important;
        -ms-flex-direction: column-reverse!important;
        flex-direction: column-reverse!important; }


}

/* Mobile */
@media (max-width: 767px) {

    .mobile-flex-box-prepped {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        position: relative;
        width: 100%;
        padding: 0;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        text-align: center;
        list-style: none;
    }

    .mobile-flex-height {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: column nowrap;
        -ms-flex-flow: column nowrap;
        flex-flow: column nowrap;
        height: 100%;

    }

    .mobile-flex-row-wrap {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap!important;
        -ms-flex-flow: row wrap!important;
        flex-flow: row wrap!important; }

    .mobile-flex-row-nowrap {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row nowrap!important;
        -ms-flex-flow: row nowrap!important;
        flex-flow: row nowrap!important; }

    .mobile-flex-row-reverse {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap-reverse!important;
        -ms-flex-flow: row wrap-reverse!important;
        flex-flow: row wrap-reverse!important; }

    .mobile-flex-column-wrap {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: column wrap!important;
        -ms-flex-flow: column wrap!important;
        flex-flow: column wrap!important; }

    .mobile-flex-column-nowrap {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: column nowrap!important;
        -ms-flex-flow: column nowrap!important;
        flex-flow: column nowrap!important; }

    .mobile-flex-column-reverse {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column-reverse!important;
        -ms-flex-direction: column-reverse!important;
        flex-direction: column-reverse!important; }

}


/* B) Parent: Justify Content
=================================*/

.content-start {
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    text-align: left;
}

.content-center {    
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    text-align: center;
}

.content-end {
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    text-align: right;
}

.content-evenly {
    justify-content: space-evenly;
    text-align: justify;
}

.content-around {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    text-align: justify;
}

.content-between {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    text-align: center;
}

/* Desktop */
@media (min-width: 1021px) {

    .desktop-content-start {
        -webkit-box-pack: start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        text-align: left; }

    .desktop-content-center {    
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        text-align: center; }

    .desktop-content-end {
        -webkit-box-pack: end;
        -moz-box-pack: end;
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
        text-align: right; }

    .desktop-content-evenly {
        justify-content: space-evenly;
        text-align: justify; }

    .desktop-content-around {
        -webkit-box-pack: justify;
        -moz-box-pack: justify;
        -ms-flex-pack: distribute;
        -webkit-justify-content: space-around;
        justify-content: space-around;
        text-align: justify; }

    .desktop-content-between {
        -webkit-box-pack: justify;
        -moz-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        text-align: center; }

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1020px) {

    .tablet-content-start {
        -webkit-box-pack: start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        text-align: left; }

    .tablet-content-center {    
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        text-align: center; }

    .tablet-content-end {
        -webkit-box-pack: end;
        -moz-box-pack: end;
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
        text-align: right; }

    .tablet-content-evenly {
        justify-content: space-evenly;
        text-align: justify; }

    .tablet-content-around {
        -webkit-box-pack: justify;
        -moz-box-pack: justify;
        -ms-flex-pack: distribute;
        -webkit-justify-content: space-around;
        justify-content: space-around;
        text-align: justify; }

    .tablet-content-between {
        -webkit-box-pack: justify;
        -moz-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        text-align: center; }

}

/* Mobile */
@media (max-width: 767px) {

    .mobile-content-start {
        -webkit-box-pack: start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        text-align: left; }

    .mobile-content-center {    
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        text-align: center; }

    .mobile-content-end {
        -webkit-box-pack: end;
        -moz-box-pack: end;
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
        text-align: right; }

    .mobile-content-evenly {
        justify-content: space-evenly;
        text-align: justify; }

    .mobile-content-around {
        -webkit-box-pack: justify;
        -moz-box-pack: justify;
        -ms-flex-pack: distribute;
        -webkit-justify-content: space-around;
        justify-content: space-around;
        text-align: justify; }

    .mobile-content-between {
        -webkit-box-pack: justify;
        -moz-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        text-align: center; } 
  
}


/* C) Parent: Align Content
=================================*/

.align-start {
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
}

.align-center {
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
}

.align-end {
    -webkit-align-content: flex-end;
    -ms-flex-line-pack: end;
    align-content: flex-end;
}

.align-stretch {
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
}

.align-around {
    -webkit-align-content: space-around;
    -ms-flex-line-pack: distribute;
    align-content: space-around;
}

.align-between {
    -webkit-align-content: space-between;
    -ms-flex-line-pack: justify;
    align-content: space-between;
}

/* Desktop */
@media (min-width: 1021px) {

    .desktop-align-start {
        -webkit-align-content: flex-start;
        -ms-flex-line-pack: start;
        align-content: flex-start; }

    .desktop-align-center {
        -webkit-align-content: center;
        -ms-flex-line-pack: center;
        align-content: center; }

    .desktop-align-end {
        -webkit-align-content: flex-end;
        -ms-flex-line-pack: end;
        align-content: flex-end; }

    .desktop-align-stretch {
        -webkit-align-content: stretch;
        -ms-flex-line-pack: stretch;
        align-content: stretch; }

    .desktop-align-around {
        -webkit-align-content: space-around;
        -ms-flex-line-pack: distribute;
        align-content: space-around; }

    .desktop-align-between {
        -webkit-align-content: space-between;
        -ms-flex-line-pack: justify;
        align-content: space-between; }

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1020px) {
    
    .tablet-align-start {
        -webkit-align-content: flex-start;
        -ms-flex-line-pack: start;
        align-content: flex-start; }

    .tablet-align-center {
        -webkit-align-content: center;
        -ms-flex-line-pack: center;
        align-content: center; }

    .tablet-align-end {
        -webkit-align-content: flex-end;
        -ms-flex-line-pack: end;
        align-content: flex-end; }

    .tablet-align-stretch {
        -webkit-align-content: stretch;
        -ms-flex-line-pack: stretch;
        align-content: stretch; }

    .tablet-align-around {
        -webkit-align-content: space-around;
        -ms-flex-line-pack: distribute;
        align-content: space-around; }

    .tablet-align-between {
        -webkit-align-content: space-between;
        -ms-flex-line-pack: justify;
        align-content: space-between; }

}

/* Mobile */
@media (max-width: 767px) {
    
    .mobile-align-start {
        -webkit-align-content: flex-start;
        -ms-flex-line-pack: start;
        align-content: flex-start; }

    .mobile-align-center {
        -webkit-align-content: center;
        -ms-flex-line-pack: center;
        align-content: center; }

    .mobile-align-end {
        -webkit-align-content: flex-end;
        -ms-flex-line-pack: end;
        align-content: flex-end; }

    .mobile-align-stretch {
        -webkit-align-content: stretch;
        -ms-flex-line-pack: stretch;
        align-content: stretch; }

    .mobile-align-around {
        -webkit-align-content: space-around;
        -ms-flex-line-pack: distribute;
        align-content: space-around; }

    .mobile-align-between {
        -webkit-align-content: space-between;
        -ms-flex-line-pack: justify;
        align-content: space-between; }

}


/* D) Parent: Align Items
=================================*/

.items-start {
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

.items-center {
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.items-end {
    -webkit-box-align: end;
    -moz-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

.items-stretch {
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
}

.items-baseline {
    -webkit-box-align: baseline;
    -moz-box-align: baseline;
    -ms-flex-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
}

/* Desktop */
@media (min-width: 1021px) {

    .desktop-items-start {
        -webkit-box-align: start;
        -moz-box-align: start;
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        align-items: flex-start; }

    .desktop-items-center {
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center; }

    .desktop-items-end {
        -webkit-box-align: end;
        -moz-box-align: end;
        -ms-flex-align: end;
        -webkit-align-items: flex-end;
        align-items: flex-end; }

    .desktop-items-stretch {
        -webkit-box-align: stretch;
        -moz-box-align: stretch;
        -ms-flex-align: stretch;
        -webkit-align-items: stretch;
        align-items: stretch; }

    .desktop-items-baseline {
        -webkit-box-align: baseline;
        -moz-box-align: baseline;
        -ms-flex-align: baseline;
        -webkit-align-items: baseline;
        align-items: baseline; }

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1020px) {
    
    .tablet-items-start {
        -webkit-box-align: start;
        -moz-box-align: start;
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        align-items: flex-start; }

    .tablet-items-center {
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center; }

    .tablet-items-end {
        -webkit-box-align: end;
        -moz-box-align: end;
        -ms-flex-align: end;
        -webkit-align-items: flex-end;
        align-items: flex-end; }

    .tablet-items-stretch {
        -webkit-box-align: stretch;
        -moz-box-align: stretch;
        -ms-flex-align: stretch;
        -webkit-align-items: stretch;
        align-items: stretch; }

    .tablet-items-baseline {
        -webkit-box-align: baseline;
        -moz-box-align: baseline;
        -ms-flex-align: baseline;
        -webkit-align-items: baseline;
        align-items: baseline; }

}

/* Mobile */
@media (max-width: 767px) {
    
    .mobile-items-start {
        -webkit-box-align: start;
        -moz-box-align: start;
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        align-items: flex-start; }

    .mobile-items-center {
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center; }

    .mobile-items-end {
        -webkit-box-align: end;
        -moz-box-align: end;
        -ms-flex-align: end;
        -webkit-align-items: flex-end;
        align-items: flex-end; }

    .mobile-items-stretch {
        -webkit-box-align: stretch;
        -moz-box-align: stretch;
        -ms-flex-align: stretch;
        -webkit-align-items: stretch;
        align-items: stretch; }

    .mobile-items-baseline {
        -webkit-box-align: baseline;
        -moz-box-align: baseline;
        -ms-flex-align: baseline;
        -webkit-align-items: baseline;
        align-items: baseline; }

}


/* E) Child: Flexbox Style
=================================*/

.flex-item-inline {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
}

/* Desktop */
@media (min-width: 1021px) {

    body .desktop-flex-item-inline {
        display: -webkit-inline-box;
        display: -moz-inline-box;
        display: -ms-inline-flexbox;
        display: -webkit-inline-flex;
        display: inline-flex;
        -webkit-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
    }

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1020px) {

    body .tablet-flex-item-inline {
        display: -webkit-inline-box;
        display: -moz-inline-box;
        display: -ms-inline-flexbox;
        display: -webkit-inline-flex;
        display: inline-flex;
        -webkit-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
    }

}

/* Mobile */
@media (max-width: 767px) {

    body .mobile-flex-item-inline {
        display: -webkit-inline-box;
        display: -moz-inline-box;
        display: -ms-inline-flexbox;
        display: -webkit-inline-flex;
        display: inline-flex;
        -webkit-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
    }

}


/* F) Child: Flex Size
=================================*/

body .flex-grow-1 {
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

body .flex-grow-2 {
    -webkit-flex: 2 2 auto;
    -ms-flex: 2 2 auto;
    flex: 2 2 auto;
}

body .flex-grow-3 {
    -webkit-flex: 3 1 auto;
    -ms-flex: 3 1 auto;
    flex: 3 1 auto;
}

body .flex-grow-4 {
    -webkit-flex: 4 1 auto;
    -ms-flex: 4 1 auto;
    flex: 4 1 auto;
}

body .flex-grow-5 {
    -webkit-flex: 5 1 auto;
    -ms-flex: 5 1 auto;
    flex: 5 1 auto;
}

body .flex-grow-6 {
    -webkit-flex: 6 1 auto;
    -ms-flex: 6 1 auto;
    flex: 6 1 auto;
}

/* Desktop */
@media (min-width: 1021px) {

    html body .desktop-flex-grow-1 {
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto; }

    html body .desktop-flex-grow-2 {
        -webkit-flex: 2 1 auto;
        -ms-flex: 2 1 auto;
        flex: 2 1 auto; }

    html body .desktop-flex-grow-3 {
        -webkit-flex: 3 1 auto;
        -ms-flex: 3 1 auto;
        flex: 3 1 auto; }

    html body .desktop-flex-grow-4 {
        -webkit-flex: 4 1 auto;
        -ms-flex: 4 1 auto;
        flex: 4 1 auto; }

    html body .desktop-flex-grow-5 {
        -webkit-flex: 5 1 auto;
        -ms-flex: 5 1 auto;
        flex: 5 1 auto; }

    html body .desktop-flex-grow-6 {
        -webkit-flex: 6 1 auto;
        -ms-flex: 6 1 auto;
        flex: 6 1 auto; }

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1020px) {

    html body .tablet-flex-grow-1 {
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto; }

    html body .tablet-flex-grow-2 {
        -webkit-flex: 2 1 auto;
        -ms-flex: 2 1 auto;
        flex: 2 1 auto; }

    html body .tablet-flex-grow-3 {
        -webkit-flex: 3 1 auto;
        -ms-flex: 3 1 auto;
        flex: 3 1 auto; }

    html body .tablet-flex-grow-4 {
        -webkit-flex: 4 1 auto;
        -ms-flex: 4 1 auto;
        flex: 4 1 auto; }

    html body .tablet-flex-grow-5 {
        -webkit-flex: 5 1 auto;
        -ms-flex: 5 1 auto;
        flex: 5 1 auto; }

    html body .tablet-flex-grow-6 {
        -webkit-flex: 6 1 auto;
        -ms-flex: 6 1 auto;
        flex: 6 1 auto; }

}

/* Mobile */
@media (max-width: 767px) {

    html body .mobile-flex-grow-1 {
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto; }

    html body .mobile-flex-grow-2 {
        -webkit-flex: 2 1 auto;
        -ms-flex: 2 1 auto;
        flex: 2 1 auto; }

    html body .mobile-flex-grow-3 {
        -webkit-flex: 3 1 auto;
        -ms-flex: 3 1 auto;
        flex: 3 1 auto; }

    html body .mobile-flex-grow-4 {
        -webkit-flex: 4 1 auto;
        -ms-flex: 4 1 auto;
        flex: 4 1 auto; }

    html body .mobile-flex-grow-5 {
        -webkit-flex: 5 1 auto;
        -ms-flex: 5 1 auto;
        flex: 5 1 auto; }

    html body .mobile-flex-grow-6 {
        -webkit-flex: 6 1 auto;
        -ms-flex: 6 1 auto;
        flex: 6 1 auto; }
  
}


/* G) Child: Align Self
=================================*/

.self-start {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
}

.self-center {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
}

.self-end {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
}

.self-stretch {
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}

.self-baseline {
    -webkit-align-self: baseline;
    -ms-flex-item-align: baseline;
    align-self: baseline;
}

/* Desktop */
@media (min-width: 1021px) {

    .desktop-self-start {
        -webkit-align-self: flex-start;
        -ms-flex-item-align: start;
        align-self: flex-start; }

    .desktop-self-center {
        -webkit-align-self: center;
        -ms-flex-item-align: center;
        align-self: center; }

    .desktop-self-end {
        -webkit-align-self: flex-end;
        -ms-flex-item-align: end;
        align-self: flex-end; }

    .desktop-self-stretch {
        -webkit-align-self: stretch;
        -ms-flex-item-align: stretch;
        align-self: stretch; }

    .desktop-self-baseline {
        -webkit-align-self: baseline;
        -ms-flex-item-align: baseline;
        align-self: baseline; }

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1020px) {

    .tablet-self-start {
        -webkit-align-self: flex-start;
        -ms-flex-item-align: start;
        align-self: flex-start; }

    .tablet-self-center {
        -webkit-align-self: center;
        -ms-flex-item-align: center;
        align-self: center; }

    .tablet-self-end {
        -webkit-align-self: flex-end;
        -ms-flex-item-align: end;
        align-self: flex-end; }

    .tablet-self-stretch {
        -webkit-align-self: stretch;
        -ms-flex-item-align: stretch;
        align-self: stretch; }

    .tablet-self-baseline {
        -webkit-align-self: baseline;
        -ms-flex-item-align: baseline;
        align-self: baseline; }

}

/* Mobile */
@media (max-width: 767px) {

    .mobile-self-start {
        -webkit-align-self: flex-start;
        -ms-flex-item-align: start;
        align-self: flex-start; }

    .mobile-self-center {
        -webkit-align-self: center;
        -ms-flex-item-align: center;
        align-self: center; }

    .mobile-self-end {
        -webkit-align-self: flex-end;
        -ms-flex-item-align: end;
        align-self: flex-end; }

    .mobile-self-stretch {
        -webkit-align-self: stretch;
        -ms-flex-item-align: stretch;
        align-self: stretch; }

    .mobile-self-baseline {
        -webkit-align-self: baseline;
        -ms-flex-item-align: baseline;
        align-self: baseline; }

}



/*===============================================================
 *
 *  14) COLUMNS (FLEXBOX)
 *  Grid, but using flex only.
 *
===============================================================*/

/* A) General
=================================*/

.column-group {
    display: block;
    margin-top: 0rem;
    margin-right: -0.625rem;
    margin-left: -0.625rem;
    margin-bottom: 0rem;
    direction: ltr;
}

body .column-group.column-group-flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}

.column-group::before, .column-group::after {
    content: " "; 
    display: table; 
    height: 0;
    line-height: 0;
    clear: both;
    visibility: hidden; 
}

.column-group + * { 
    clear: both; 
}

.column {
    margin: 0rem;
    padding-right: 0.625rem;
    padding-left:  0.625rem;
    background-clip: content-box!important;
    vertical-align: top;
    list-style: none;
}

body .column-group > .column.relative-position {
    position: relative;
}

.column.column-1-order-1:nth-of-type(1) { order: 1; }
.column.column-1-order-2:nth-of-type(1) { order: 2; }
.column.column-1-order-3:nth-of-type(1) { order: 3; }
.column.column-1-order-4:nth-of-type(1) { order: 4; }
.column.column-1-order-5:nth-of-type(1) { order: 5; }
.column.column-1-order-6:nth-of-type(1) { order: 6; }
.flex-item-hook.column-1-order-1:nth-of-type(1) { order: 1; }
.flex-item-hook.column-1-order-2:nth-of-type(1) { order: 2; }
.flex-item-hook.column-1-order-3:nth-of-type(1) { order: 3; }
.flex-item-hook.column-1-order-4:nth-of-type(1) { order: 4; }
.flex-item-hook.column-1-order-5:nth-of-type(1) { order: 5; }
.flex-item-hook.column-1-order-6:nth-of-type(1) { order: 6; }

.column.column-2-order-1:nth-of-type(2) { order: 1; }
.column.column-2-order-2:nth-of-type(2) { order: 2; }
.column.column-2-order-3:nth-of-type(2) { order: 3; }
.column.column-2-order-4:nth-of-type(2) { order: 4; }
.column.column-2-order-5:nth-of-type(2) { order: 5; }
.column.column-2-order-6:nth-of-type(2) { order: 6; }
.flex-item-hook.column-2-order-1:nth-of-type(2) { order: 1; }
.flex-item-hook.column-2-order-2:nth-of-type(2) { order: 2; }
.flex-item-hook.column-2-order-3:nth-of-type(2) { order: 3; }
.flex-item-hook.column-2-order-4:nth-of-type(2) { order: 4; }
.flex-item-hook.column-2-order-5:nth-of-type(2) { order: 5; }
.flex-item-hook.column-2-order-6:nth-of-type(2) { order: 6; }

.column.column-3-order-1:nth-of-type(3) { order: 1; }
.column.column-3-order-2:nth-of-type(3) { order: 2; }
.column.column-3-order-3:nth-of-type(3) { order: 3; }
.column.column-3-order-4:nth-of-type(3) { order: 4; }
.column.column-3-order-5:nth-of-type(3) { order: 5; }
.column.column-3-order-6:nth-of-type(3) { order: 6; }
.flex-item-hook.column-3-order-1:nth-of-type(3) { order: 1; }
.flex-item-hook.column-3-order-2:nth-of-type(3) { order: 2; }
.flex-item-hook.column-3-order-3:nth-of-type(3) { order: 3; }
.flex-item-hook.column-3-order-4:nth-of-type(3) { order: 4; }
.flex-item-hook.column-3-order-5:nth-of-type(3) { order: 5; }
.flex-item-hook.column-3-order-6:nth-of-type(3) { order: 6; }

.column.column-4-order-1:nth-of-type(4) { order: 1; }
.column.column-4-order-2:nth-of-type(4) { order: 2; }
.column.column-4-order-3:nth-of-type(4) { order: 3; }
.column.column-4-order-4:nth-of-type(4) { order: 4; }
.column.column-4-order-5:nth-of-type(4) { order: 5; }
.column.column-4-order-6:nth-of-type(4) { order: 6; }
.flex-item-hook.column-4-order-1:nth-of-type(4) { order: 1; }
.flex-item-hook.column-4-order-2:nth-of-type(4) { order: 2; }
.flex-item-hook.column-4-order-3:nth-of-type(4) { order: 3; }
.flex-item-hook.column-4-order-4:nth-of-type(4) { order: 4; }
.flex-item-hook.column-4-order-5:nth-of-type(4) { order: 5; }
.flex-item-hook.column-4-order-6:nth-of-type(4) { order: 6; }

.column.column-5-order-1:nth-of-type(5) { order: 1; }
.column.column-5-order-2:nth-of-type(5) { order: 2; }
.column.column-5-order-3:nth-of-type(5) { order: 3; }
.column.column-5-order-4:nth-of-type(5) { order: 4; }
.column.column-5-order-5:nth-of-type(5) { order: 5; }
.column.column-5-order-6:nth-of-type(5) { order: 6; }
.flex-item-hook.column-5-order-1:nth-of-type(5) { order: 1; }
.flex-item-hook.column-5-order-2:nth-of-type(5) { order: 2; }
.flex-item-hook.column-5-order-3:nth-of-type(5) { order: 3; }
.flex-item-hook.column-5-order-4:nth-of-type(5) { order: 4; }
.flex-item-hook.column-5-order-5:nth-of-type(5) { order: 5; }
.flex-item-hook.column-5-order-6:nth-of-type(5) { order: 6; }

.column.column-6-order-1:nth-of-type(6) { order: 1; }
.column.column-6-order-2:nth-of-type(6) { order: 2; }
.column.column-6-order-3:nth-of-type(6) { order: 3; }
.column.column-6-order-4:nth-of-type(6) { order: 4; }
.column.column-6-order-5:nth-of-type(6) { order: 5; }
.column.column-6-order-6:nth-of-type(6) { order: 6; }
.flex-item-hook.column-6-order-1:nth-of-type(6) { order: 1; }
.flex-item-hook.column-6-order-2:nth-of-type(6) { order: 2; }
.flex-item-hook.column-6-order-3:nth-of-type(6) { order: 3; }
.flex-item-hook.column-6-order-4:nth-of-type(6) { order: 4; }
.flex-item-hook.column-6-order-5:nth-of-type(6) { order: 5; }
.flex-item-hook.column-6-order-6:nth-of-type(6) { order: 6; }


/* Desktop */
@media (min-width: 1021px) {

    .column.desktop-column-1-order-1:nth-of-type(1) { order: 1; }
    .column.desktop-column-1-order-2:nth-of-type(1) { order: 2; }
    .column.desktop-column-1-order-3:nth-of-type(1) { order: 3; }
    .column.desktop-column-1-order-4:nth-of-type(1) { order: 4; }
    .column.desktop-column-1-order-5:nth-of-type(1) { order: 5; }
    .column.desktop-column-1-order-6:nth-of-type(1) { order: 6; }

    .column.desktop-column-2-order-1:nth-of-type(2) { order: 1; }
    .column.desktop-column-2-order-2:nth-of-type(2) { order: 2; }
    .column.desktop-column-2-order-3:nth-of-type(2) { order: 3; }
    .column.desktop-column-2-order-4:nth-of-type(2) { order: 4; }
    .column.desktop-column-2-order-5:nth-of-type(2) { order: 5; }
    .column.desktop-column-2-order-6:nth-of-type(2) { order: 6; }

    .column.desktop-column-3-order-1:nth-of-type(3) { order: 1; }
    .column.desktop-column-3-order-2:nth-of-type(3) { order: 2; }
    .column.desktop-column-3-order-3:nth-of-type(3) { order: 3; }
    .column.desktop-column-3-order-4:nth-of-type(3) { order: 4; }
    .column.desktop-column-3-order-5:nth-of-type(3) { order: 5; }
    .column.desktop-column-3-order-6:nth-of-type(3) { order: 6; }

    .column.desktop-column-4-order-1:nth-of-type(4) { order: 1; }
    .column.desktop-column-4-order-2:nth-of-type(4) { order: 2; }
    .column.desktop-column-4-order-3:nth-of-type(4) { order: 3; }
    .column.desktop-column-4-order-4:nth-of-type(4) { order: 4; }
    .column.desktop-column-4-order-5:nth-of-type(4) { order: 5; }
    .column.desktop-column-4-order-6:nth-of-type(4) { order: 6; }

    .column.desktop-column-5-order-1:nth-of-type(5) { order: 1; }
    .column.desktop-column-5-order-2:nth-of-type(5) { order: 2; }
    .column.desktop-column-5-order-3:nth-of-type(5) { order: 3; }
    .column.desktop-column-5-order-4:nth-of-type(5) { order: 4; }
    .column.desktop-column-5-order-5:nth-of-type(5) { order: 5; }
    .column.desktop-column-5-order-6:nth-of-type(5) { order: 6; }

    .column.desktop-column-6-order-1:nth-of-type(6) { order: 1; }
    .column.desktop-column-6-order-2:nth-of-type(6) { order: 2; }
    .column.desktop-column-6-order-3:nth-of-type(6) { order: 3; }
    .column.desktop-column-6-order-4:nth-of-type(6) { order: 4; }
    .column.desktop-column-6-order-5:nth-of-type(6) { order: 5; }
    .column.desktop-column-6-order-6:nth-of-type(6) { order: 6; }

}


/* Tablet */
@media (min-width: 768px) and (max-width: 1020px) {

    .column.tablet-column-1-order-1:nth-of-type(1) { order: 1; }
    .column.tablet-column-1-order-2:nth-of-type(1) { order: 2; }
    .column.tablet-column-1-order-3:nth-of-type(1) { order: 3; }
    .column.tablet-column-1-order-4:nth-of-type(1) { order: 4; }
    .column.tablet-column-1-order-5:nth-of-type(1) { order: 5; }
    .column.tablet-column-1-order-6:nth-of-type(1) { order: 6; }

    .column.tablet-column-2-order-1:nth-of-type(2) { order: 1; }
    .column.tablet-column-2-order-2:nth-of-type(2) { order: 2; }
    .column.tablet-column-2-order-3:nth-of-type(2) { order: 3; }
    .column.tablet-column-2-order-4:nth-of-type(2) { order: 4; }
    .column.tablet-column-2-order-5:nth-of-type(2) { order: 5; }
    .column.tablet-column-2-order-6:nth-of-type(2) { order: 6; }

    .column.tablet-column-3-order-1:nth-of-type(3) { order: 1; }
    .column.tablet-column-3-order-2:nth-of-type(3) { order: 2; }
    .column.tablet-column-3-order-3:nth-of-type(3) { order: 3; }
    .column.tablet-column-3-order-4:nth-of-type(3) { order: 4; }
    .column.tablet-column-3-order-5:nth-of-type(3) { order: 5; }
    .column.tablet-column-3-order-6:nth-of-type(3) { order: 6; }

    .column.tablet-column-4-order-1:nth-of-type(4) { order: 1; }
    .column.tablet-column-4-order-2:nth-of-type(4) { order: 2; }
    .column.tablet-column-4-order-3:nth-of-type(4) { order: 3; }
    .column.tablet-column-4-order-4:nth-of-type(4) { order: 4; }
    .column.tablet-column-4-order-5:nth-of-type(4) { order: 5; }
    .column.tablet-column-4-order-6:nth-of-type(4) { order: 6; }

    .column.tablet-column-5-order-1:nth-of-type(5) { order: 1; }
    .column.tablet-column-5-order-2:nth-of-type(5) { order: 2; }
    .column.tablet-column-5-order-3:nth-of-type(5) { order: 3; }
    .column.tablet-column-5-order-4:nth-of-type(5) { order: 4; }
    .column.tablet-column-5-order-5:nth-of-type(5) { order: 5; }
    .column.tablet-column-5-order-6:nth-of-type(5) { order: 6; }

    .column.tablet-column-6-order-1:nth-of-type(6) { order: 1; }
    .column.tablet-column-6-order-2:nth-of-type(6) { order: 2; }
    .column.tablet-column-6-order-3:nth-of-type(6) { order: 3; }
    .column.tablet-column-6-order-4:nth-of-type(6) { order: 4; }
    .column.tablet-column-6-order-5:nth-of-type(6) { order: 5; }
    .column.tablet-column-6-order-6:nth-of-type(6) { order: 6; }

}


/* Mobile */
@media (max-width: 767px) {

    .column.mobile-column-1-order-1:nth-of-type(1) { order: 1; }
    .column.mobile-column-1-order-2:nth-of-type(1) { order: 2; }
    .column.mobile-column-1-order-3:nth-of-type(1) { order: 3; }
    .column.mobile-column-1-order-4:nth-of-type(1) { order: 4; }
    .column.mobile-column-1-order-5:nth-of-type(1) { order: 5; }
    .column.mobile-column-1-order-6:nth-of-type(1) { order: 6; }

    .column.mobile-column-2-order-1:nth-of-type(2) { order: 1; }
    .column.mobile-column-2-order-2:nth-of-type(2) { order: 2; }
    .column.mobile-column-2-order-3:nth-of-type(2) { order: 3; }
    .column.mobile-column-2-order-4:nth-of-type(2) { order: 4; }
    .column.mobile-column-2-order-5:nth-of-type(2) { order: 5; }
    .column.mobile-column-2-order-6:nth-of-type(2) { order: 6; }

    .column.mobile-column-3-order-1:nth-of-type(3) { order: 1; }
    .column.mobile-column-3-order-2:nth-of-type(3) { order: 2; }
    .column.mobile-column-3-order-3:nth-of-type(3) { order: 3; }
    .column.mobile-column-3-order-4:nth-of-type(3) { order: 4; }
    .column.mobile-column-3-order-5:nth-of-type(3) { order: 5; }
    .column.mobile-column-3-order-6:nth-of-type(3) { order: 6; }

    .column.mobile-column-4-order-1:nth-of-type(4) { order: 1; }
    .column.mobile-column-4-order-2:nth-of-type(4) { order: 2; }
    .column.mobile-column-4-order-3:nth-of-type(4) { order: 3; }
    .column.mobile-column-4-order-4:nth-of-type(4) { order: 4; }
    .column.mobile-column-4-order-5:nth-of-type(4) { order: 5; }
    .column.mobile-column-4-order-6:nth-of-type(4) { order: 6; }

    .column.mobile-column-5-order-1:nth-of-type(5) { order: 1; }
    .column.mobile-column-5-order-2:nth-of-type(5) { order: 2; }
    .column.mobile-column-5-order-3:nth-of-type(5) { order: 3; }
    .column.mobile-column-5-order-4:nth-of-type(5) { order: 4; }
    .column.mobile-column-5-order-5:nth-of-type(5) { order: 5; }
    .column.mobile-column-5-order-6:nth-of-type(5) { order: 6; }

    .column.mobile-column-6-order-1:nth-of-type(6) { order: 1; }
    .column.mobile-column-6-order-2:nth-of-type(6) { order: 2; }
    .column.mobile-column-6-order-3:nth-of-type(6) { order: 3; }
    .column.mobile-column-6-order-4:nth-of-type(6) { order: 4; }
    .column.mobile-column-6-order-5:nth-of-type(6) { order: 5; }
    .column.mobile-column-6-order-6:nth-of-type(6) { order: 6; }

}


/* B) Column Widths
=================================*/

/* Apply the same width to all columns */
.column-group.column-width-1x6 > .responsive {
    width: 16.66%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.column-group.column-width-1x5 > .responsive {
    width: 20%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.column-group.column-width-1x4 > .responsive {
    width: 25%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.column-group.column-width-1x3 > .responsive {
    width: 33.33%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.column-group.column-width-1x2 > .responsive {
    width: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.column-group.column-width-1x1 > .responsive {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Specify each columns width */
.column-group.column-width-adjust > .responsive-1x6 {
    width: 16.66%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.column-group.column-width-adjust > .responsive-1x5 {
    width: 20%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.column-group.column-width-adjust > .responsive-1x4 {
    width: 25%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.column-group.column-width-adjust > .responsive-1x3 {
    width: 33.33%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.column-group.column-width-adjust > .responsive-2x5 {
    width: 40%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.column-group.column-width-adjust > .responsive-1x2 {
    width: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.column-group.column-width-adjust > .responsive-3x5 {
    width: 60%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.column-group.column-width-adjust > .responsive-4x5 {
    width: 80%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.column-group.column-width-adjust > .responsive-1x1 {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/* C) Column Spacing
=================================*/

/* Spacing 0 PX to 0 REM */
.column-group.column-gap-0 { margin-right: 0rem!important; margin-left: 0rem!important; }
.column-group.column-gap-0 > .column { padding-right: 0rem!important; padding-left: 0rem!important; }
.column-group.row-gap-0 > .column { margin-bottom: 0rem!important; }

/* Spacing 10 PX to REM */
.column-group.column-gap-10 { margin-right: -0.625rem; margin-left: -0.625rem; }
.column-group.column-gap-10 > .column { padding-right: 0.625rem; padding-left: 0.625rem; }
.column-group.row-gap-10 > .column { margin-bottom: 0.625rem; }

/* Spacing 10 PX to REM */
.column-group.column-gap-15 { margin-right: -0.938rem; margin-left: -0.938rem; }
.column-group.column-gap-15 > .column { padding-right: 0.938rem; padding-left: 0.938rem; }
.column-group.row-gap-15 > .column { margin-bottom: 0.938rem; }

/* Spacing 20 PX to REM */
.column-group.column-gap-20 { margin-right: -1.25rem; margin-left: -1.25rem; }
.column-group.column-gap-20 > .column { padding-right: 1.25rem; padding-left: 1.25rem; }
.column-group.row-gap-20 > .column { margin-bottom: 1.25rem; }

/* Spacing 30 PX to REM */
.column-group.column-gap-30 { margin-right: -1.875rem; margin-left: -1.875rem; }
.column-group.column-gap-30 > .column { padding-right: 1.875rem; padding-left: 1.875rem; }
.column-group.row-gap-30 > .column {  margin-bottom: 1.875rem; }

/* Spacing 40 PX to REM */
.column-group.column-gap-40 { margin-right: -2.5rem; margin-left: -2.5rem; }
.column-group.column-gap-40 > .column  { padding-right: 2.5rem; padding-left: 2.5rem; }
.column-group.row-gap-40 > .column { margin-bottom: 2.5rem; }

/* Spacing 50 PX to REM */
.column-group.column-gap-50 { margin-right: -3.125rem; margin-left: -3.125rem; }
.column-group.column-gap-50 > .column { padding-right: 3.125rem; padding-left: 3.125rem; }
.column-group.row-gap-50 > .column { margin-bottom: 3.125rem; }

/* Spacing 60 PX to REM */
.column-group.column-gap-60 { margin-right: -3.75rem; margin-left: -3.75rem; }
.column-group.column-gap-60 > .column { padding-right: 3.75rem; padding-left: 3.75rem; }
.column-group.row-gap-60 > .column { margin-bottom: 3.75rem; }


/* D) Column Alignment 
=================================*/

.column-align-top > .column { vertical-align: top; align-items: flex-start; }
.column-align-middle > .column { vertical-align: middle; }
.column-align-baseline > .column { vertical-align: baseline; }
.column-align-bottom > .column { vertical-align: bottom; }

/* Desktop */
@media (min-width: 1021px) {

    html body .column { 
        display: inherit; 
        clear: none; }

    body .column.desktop-column-1-order-1:nth-of-type(1) { order: 1; }
    body .column.desktop-column-1-order-2:nth-of-type(1) { order: 2; }
    body .column.desktop-column-1-order-3:nth-of-type(1) { order: 3; }
    body .column.desktop-column-1-order-4:nth-of-type(1) { order: 4; }

    body .column.desktop-column-2-order-1:nth-of-type(2) { order: 1; }
    body .column.desktop-column-2-order-2:nth-of-type(2) { order: 2; }
    body .column.desktop-column-2-order-3:nth-of-type(2) { order: 3; }
    body .column.desktop-column-2-order-4:nth-of-type(2) { order: 4; }

    body .column.desktop-column-3-order-1:nth-of-type(3) { order: 1; }
    body .column.desktop-column-3-order-2:nth-of-type(3) { order: 2; }
    body .column.desktop-column-3-order-3:nth-of-type(3) { order: 3; }
    body .column.desktop-column-3-order-4:nth-of-type(3) { order: 4; }

    body .column.desktop-column-4-order-1:nth-of-type(4) { order: 1; }
    body .column.desktop-column-4-order-2:nth-of-type(4) { order: 2; }
    body .column.desktop-column-4-order-3:nth-of-type(4) { order: 3; }
    body .column.desktop-column-4-order-4:nth-of-type(4) { order: 4; }

    /* Equal Columns */
    html .column-group.desktop-column-width-1x8 > .responsive {
        width: 12.5%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.desktop-column-width-1x7 > .responsive {
        width: 14.23%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.desktop-column-width-1x6 > .responsive {
        width: 16.66%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.desktop-column-width-1x5 > .responsive {
        width: 20%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.desktop-column-width-1x4 > .responsive {
        width: 25%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.desktop-column-width-1x3 > .responsive {
        width: 33.33%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.desktop-column-width-1x2 > .responsive {
        width: 50%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.desktop-column-width-1x1 > .responsive {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }


    /* Custom Layout Columns (Columns: 1x3) */
    html .column-group.desktop-column-width-custom-1x3 > .responsive:nth-child(1),
    html .column-group.desktop-column-width-custom-1x3 > .responsive:nth-child(2),
    html .column-group.desktop-column-width-custom-1x3 > .responsive:nth-child(3) {
        width: 33.33%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }


    /* Custom Layout Columns (Columns: 1x5) */
    html .column-group.desktop-column-width-custom-1x5 > .responsive:nth-child(1),
    html .column-group.desktop-column-width-custom-1x5 > .responsive:nth-child(2) {
        width: 50%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.desktop-column-width-custom-1x5 > .responsive:nth-child(3),
    html .column-group.desktop-column-width-custom-1x5 > .responsive:nth-child(4),
    html .column-group.desktop-column-width-custom-1x5 > .responsive:nth-child(5) {
        width: 33.33%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }    


    /* Offset Columns */
    html .column-group.desktop-column-width-25x75 > .responsive:first-child {
        width: 25%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.desktop-column-width-25x75 > .responsive:last-child {
        width: 75%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.desktop-column-width-75x25 > .responsive:first-child {
        width: 75%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.desktop-column-width-75x25 > .responsive:last-child {
        width: 25%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.desktop-column-width-30x70 > .responsive:first-child {
        width: 30%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.desktop-column-width-30x70 > .responsive:last-child {
        width: 70%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.desktop-column-width-70x30 > .responsive:first-child {
        width: 70%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.desktop-column-width-70x30 > .responsive:last-child {
        width: 30%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.desktop-column-width-60x40 > .responsive:first-child {
        width: 60%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.desktop-column-width-60x40 > .responsive:last-child {
        width: 40%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.desktop-column-width-40x60 > .responsive:first-child {
        width: 40%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.desktop-column-width-40x60 > .responsive:last-child {
        width: 60%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }


    /* Specify each columns width */
    html .column-group.column-width-adjust > .desktop-responsive-1x6 {
        width: 16.66%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.column-width-adjust > .desktop-responsive-1x5 {
        width: 20%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.column-width-adjust > .desktop-responsive-1x4 {
        width: 25%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.column-width-adjust > .desktop-responsive-1x3 {
        width: 33.33%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.column-width-adjust > .desktop-responsive-2x5 {
        width: 40%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.column-width-adjust > .desktop-responsive-1x2 {
        width: 50%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.column-width-adjust > .desktop-responsive-3x5 {
        width: 60%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.column-width-adjust > .desktop-responsive-2x3 {
        width: 75%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.column-width-adjust > .desktop-responsive-4x5 {
        width: 80%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.column-width-adjust > .desktop-responsive-1x1 {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    body .column-group.desktop-column-gap-0 { margin-right: 0rem!important; margin-left: 0rem!important; }
    body .column-group.desktop-column-gap-0 > .column { padding-right: 0rem!important; padding-left: 0rem!important; }
    body .column-group.desktop-row-gap-0 > .column { margin-bottom: 0rem!important; }

    body .column-group.desktop-column-gap-10 { margin-right: -0.625rem; margin-left: -0.625rem; }
    body .column-group.desktop-column-gap-10 > .column { padding-right: 0.625rem; padding-left: 0.625rem; }
    body .column-group.desktop-row-gap-10 > .column { margin-bottom: 0.625rem; }

    body .column-group.desktop-column-gap-15 { margin-right: -0.938rem; margin-left: -0.938rem; }
    body .column-group.desktop-column-gap-15 > .column { padding-right: 0.938rem; padding-left: 0.938rem; }
    body .column-group.desktop-row-gap-15 > .column { margin-bottom: 0.938rem; }

    body .column-group.desktop-column-gap-20 { margin-right: -1.25rem;  margin-left: -1.25rem; }
    body .column-group.desktop-column-gap-20 > .column { padding-right: 1.25rem; padding-left: 1.25rem; }
    body .column-group.desktop-row-gap-20 > .column { margin-bottom: 1.25rem; }

    body .column-group.desktop-column-gap-30 { margin-right: -1.875rem; margin-left: -1.875rem; }
    body .column-group.desktop-column-gap-30 > .column { padding-right: 1.875rem; padding-left: 1.875rem; }
    body .column-group.desktop-row-gap-30 > .column { margin-bottom: 1.875rem; }

    body .column-group.desktop-column-gap-40 { margin-right: -2.5rem; margin-left: -2.5rem; }
    body .column-group.desktop-column-gap-40 > .column  {  padding-right: 2.5rem;  padding-left: 2.5rem; }
    body .column-group.desktop-row-gap-40 > .column {  margin-bottom: 2.5rem; }

    body .column-group.desktop-column-gap-50 { margin-right: -3.125rem; margin-left: -3.125rem; }
    body .column-group.desktop-column-gap-50 > .column { padding-right: 3.125rem; padding-left: 3.125rem; }
    body .column-group.desktop-row-gap-50 > .column { margin-bottom: 3.125rem; }

    body .column-group.desktop-column-gap-60 { margin-right: -3.75rem; margin-left: -3.75rem; }
    body .column-group.desktop-column-gap-60 > .column { padding-right: 3.75rem; padding-left: 3.75rem; }
    body .column-group.desktop-row-gap-60 > .column { margin-bottom: 3.75rem; }    

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1020px) {
    
    html body .column { 
        display: inherit;
        clear: none; }

    body .column.tablet-column-1-order-1:nth-of-type(1) { order: 1; }
    body .column.tablet-column-1-order-2:nth-of-type(1) { order: 2; }
    body .column.tablet-column-1-order-3:nth-of-type(1) { order: 3; }
    body .column.tablet-column-1-order-4:nth-of-type(1) { order: 4; }

    body .column.tablet-column-2-order-1:nth-of-type(2) { order: 1; }
    body .column.tablet-column-2-order-2:nth-of-type(2) { order: 2; }
    body .column.tablet-column-2-order-3:nth-of-type(2) { order: 3; }
    body .column.tablet-column-2-order-4:nth-of-type(2) { order: 4; }

    body .column.tablet-column-3-order-1:nth-of-type(3) { order: 1; }
    body .column.tablet-column-3-order-2:nth-of-type(3) { order: 2; }
    body .column.tablet-column-3-order-3:nth-of-type(3) { order: 3; }
    body .column.tablet-column-3-order-4:nth-of-type(3) { order: 4; }

    body .column.tablet-column-4-order-1:nth-of-type(4) { order: 1; }
    body .column.tablet-column-4-order-2:nth-of-type(4) { order: 2; }
    body .column.tablet-column-4-order-3:nth-of-type(4) { order: 3; }
    body .column.tablet-column-4-order-4:nth-of-type(4) { order: 4; }


    /* Equal Columns */
    html .column-group.tablet-column-width-1x8 > .responsive {
        width: 12.5%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.tablet-column-width-1x7 > .responsive {
        width: 14.23%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.tablet-column-width-1x6 > .responsive {
        width: 16.66%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.tablet-column-width-1x5 > .responsive {
        width: 20%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.tablet-column-width-1x4 > .responsive {
        width: 25%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.tablet-column-width-1x3 > .responsive {
        width: 33.33%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.tablet-column-width-1x2 > .responsive {
        width: 50%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.tablet-column-width-1x1 > .responsive {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }


    /* Custom Layout Columns (Columns: 1x3) */
    html .column-group.tablet-column-width-custom-1x3 > .responsive:nth-child(1),
    html .column-group.tablet-column-width-custom-1x3 > .responsive:nth-child(2) {
        width: 50%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.tablet-column-width-custom-1x3 > .responsive:nth-child(3) {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }


    /* Custom Layout Columns (Columns: 1x5) */
    html .column-group.tablet-column-width-custom-1x5 > .responsive:nth-child(1) {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.tablet-column-width-custom-1x5 > .responsive:nth-child(2),
    html .column-group.tablet-column-width-custom-1x5 > .responsive:nth-child(3),
    html .column-group.tablet-column-width-custom-1x5 > .responsive:nth-child(4),
    html .column-group.tablet-column-width-custom-1x5 > .responsive:nth-child(5) {
        width: 50%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }


    /* Offset Columns */
    html .column-group.tablet-column-width-25x75 > .responsive:first-child {
        width: 25%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.tablet-column-width-25x75 > .responsive:last-child {
        width: 75%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.tablet-column-width-75x25 > .responsive:first-child {
        width: 75%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.tablet-column-width-75x25 > .responsive:last-child {
        width: 25%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.tablet-column-width-30x70 > .responsive:first-child {
        width: 30%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.tablet-column-width-30x70 > .responsive:last-child {
        width: 70%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.tablet-column-width-70x30 > .responsive:first-child {
        width: 70%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.tablet-column-width-70x30 > .responsive:last-child {
        width: 30%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.tablet-column-width-60x40 > .responsive:first-child {
        width: 60%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.tablet-column-width-60x40 > .responsive:last-child {
        width: 40%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.tablet-column-width-40x60 > .responsive:first-child {
        width: 40%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.tablet-column-width-40x60 > .responsive:last-child {
        width: 60%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }


    /* Specify each columns width */
    html .column-group.column-width-adjust > .tablet-responsive-1x6 {
        width: 16.66%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.column-width-adjust > .tablet-responsive-1x5 {
        width: 20%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.column-width-adjust > .tablet-responsive-1x4 {
        width: 25%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.column-width-adjust > .tablet-responsive-1x3 {
        width: 33.33%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.column-width-adjust > .tablet-responsive-2x5 {
        width: 40%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.column-width-adjust > .tablet-responsive-1x2 {
        width: 50%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.column-width-adjust > .tablet-responsive-3x5 {
        width: 60%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.column-width-adjust > .tablet-responsive-4x5 {
        width: 80%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.column-width-adjust > .tablet-responsive-1x1 {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    body .column-group.tablet-column-gap-0 { margin-right: 0rem!important; margin-left: 0rem!important; }
    body .column-group.tablet-column-gap-0 > .column { padding-right: 0rem!important; padding-left: 0rem!important; }
    body .column-group.tablet-row-gap-0 > .column { margin-bottom: 0rem!important; }

    body .column-group.tablet-column-gap-10 { margin-right: -0.625rem; margin-left: -0.625rem; }
    body .column-group.tablet-column-gap-10 > .column { padding-right: 0.625rem; padding-left: 0.625rem; }
    body .column-group.tablet-row-gap-10 > .column { margin-bottom: 0.625rem; }

    body .column-group.tablet-column-gap-15 { margin-right: -0.938rem; margin-left: -0.938rem; }
    body .column-group.tablet-column-gap-15 > .column { padding-right: 0.938rem; padding-left: 0.938rem; }
    body .column-group.tablet-row-gap-15 > .column { margin-bottom: 0.938rem; }

    body .column-group.tablet-column-gap-20 { margin-right: -1.25rem;  margin-left: -1.25rem; }
    body .column-group.tablet-column-gap-20 > .column { padding-right: 1.25rem; padding-left: 1.25rem; }
    body .column-group.tablet-row-gap-20 > .column { margin-bottom: 1.25rem; }

    body .column-group.tablet-column-gap-30 { margin-right: -1.875rem; margin-left: -1.875rem; }
    body .column-group.tablet-column-gap-30 > .column { padding-right: 1.875rem; padding-left: 1.875rem; }
    body .column-group.tablet-row-gap-30 > .column { margin-bottom: 1.875rem; }

    body .column-group.tablet-column-gap-40 { margin-right: -2.5rem; margin-left: -2.5rem; }
    body .column-group.tablet-column-gap-40 > .column  {  padding-right: 2.5rem;  padding-left: 2.5rem; }
    body .column-group.tablet-row-gap-40 > .column {  margin-bottom: 2.5rem; }

    body .column-group.tablet-column-gap-50 { margin-right: -3.125rem; margin-left: -3.125rem; }
    body .column-group.tablet-column-gap-50 > .column { padding-right: 3.125rem; padding-left: 3.125rem; }
    body .column-group.tablet-row-gap-50 > .column { margin-bottom: 3.125rem; }

    body .column-group.tablet-column-gap-60 { margin-right: -3.75rem; margin-left: -3.75rem; }
    body .column-group.tablet-column-gap-60 > .column { padding-right: 3.75rem; padding-left: 3.75rem; }
    body .column-group.tablet-row-gap-60 > .column { margin-bottom: 3.75rem; }

}

/* Mobile */
@media (max-width: 767px) {
    
    html body .column {  
        display: inherit; 
        clear: none; }

    body .column.mobile-column-1-order-1:nth-of-type(1) { order: 1; }
    body .column.mobile-column-1-order-2:nth-of-type(1) { order: 2; }
    body .column.mobile-column-1-order-3:nth-of-type(1) { order: 3; }
    body .column.mobile-column-1-order-4:nth-of-type(1) { order: 4; }

    body .column.mobile-column-2-order-1:nth-of-type(2) { order: 1; }
    body .column.mobile-column-2-order-2:nth-of-type(2) { order: 2; }
    body .column.mobile-column-2-order-3:nth-of-type(2) { order: 3; }
    body .column.mobile-column-2-order-4:nth-of-type(2) { order: 4; }

    body .column.mobile-column-3-order-1:nth-of-type(3) { order: 1; }
    body .column.mobile-column-3-order-2:nth-of-type(3) { order: 2; }
    body .column.mobile-column-3-order-3:nth-of-type(3) { order: 3; }
    body .column.mobile-column-3-order-4:nth-of-type(3) { order: 4; }

    body .column.mobile-column-4-order-1:nth-of-type(4) { order: 1; }
    body .column.mobile-column-4-order-2:nth-of-type(4) { order: 2; }
    body .column.mobile-column-4-order-3:nth-of-type(4) { order: 3; }
    body .column.mobile-column-4-order-4:nth-of-type(4) { order: 4; }


    /* Equal Columns */
    html .column-group.mobile-column-width-1x8 > .responsive {
        width: 12.5%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.mobile-column-width-1x7 > .responsive {
        width: 14.23%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.mobile-column-width-1x6 > .responsive { 
        width: 16.66%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.mobile-column-width-1x5 > .responsive {
        width: 20%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.mobile-column-width-1x4 > .responsive {
        width: 25%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.mobile-column-width-1x3 > .responsive {
        width: 33.33%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.mobile-column-width-1x2 > .responsive {
        width: 50%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.mobile-column-width-1x1 > .responsive {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }


    /* Custom Layout Columns (Columns: 1x3) */
    html .column-group.mobile-column-width-custom-1x3 > .responsive:nth-child(1),
    html .column-group.mobile-column-width-custom-1x3 > .responsive:nth-child(2),
    html .column-group.mobile-column-width-custom-1x3 > .responsive:nth-child(3) {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }


    /* Custom Layout Columns (Columns: 1x5) */
    html .column-group.mobile-column-width-custom-1x5 > .responsive:nth-child(1),
    html .column-group.mobile-column-width-custom-1x5 > .responsive:nth-child(2), 
    html .column-group.mobile-column-width-custom-1x5 > .responsive:nth-child(3), 
    html .column-group.mobile-column-width-custom-1x5 > .responsive:nth-child(4),
    html .column-group.mobile-column-width-custom-1x5 > .responsive:nth-child(5) {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }


    /* Offset Columns */
    html .column-group.mobile-column-width-25x75 > .responsive:first-child {
        width: 25%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.mobile-column-width-25x75 > .responsive:last-child {
        width: 75%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.mobile-column-width-75x25 > .responsive:first-child {
        width: 75%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.mobile-column-width-75x25 > .responsive:last-child {
        width: 25%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.mobile-column-width-30x70 > .responsive:first-child {
        width: 30%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.mobile-column-width-30x70 > .responsive:last-child {
        width: 70%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.mobile-column-width-70x30 > .responsive:first-child {
        width: 70%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.mobile-column-width-70x30 > .responsive:last-child {
        width: 30%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }


    /* Specify each columns width */
    html .column-group.column-width-adjust > .mobile-responsive-1x6 {
        width: 16.66%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.column-width-adjust > .mobile-responsive-1x5 {
        width: 20%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.column-width-adjust > .mobile-responsive-1x4 {
        width: 25%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.column-width-adjust > .mobile-responsive-1x3 {
        width: 33.33%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.column-width-adjust > .mobile-responsive-2x5 {
        width: 40%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.column-width-adjust > .mobile-responsive-1x2 {
        width: 50%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.column-width-adjust > .mobile-responsive-3x5 {
        width: 60%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.column-width-adjust > .mobile-responsive-4x5 {
        width: 80%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    html .column-group.column-width-adjust > .mobile-responsive-1x1 {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }

    body .column-group.mobile-column-gap-0 { margin-right: 0rem!important; margin-left: 0rem!important; }
    body .column-group.mobile-column-gap-0 > .column { padding-right: 0rem!important; padding-left: 0rem!important; }
    body .column-group.mobile-row-gap-0 > .column { margin-bottom: 0rem!important; }

    body .column-group.mobile-column-gap-10 { margin-right: -0.625rem; margin-left: -0.625rem; }
    body .column-group.mobile-column-gap-10 > .column { padding-right: 0.625rem; padding-left: 0.625rem; }
    body .column-group.mobile-row-gap-10 > .column { margin-bottom: 0.625rem; }

    body .column-group.mobile-column-gap-15 { margin-right: -0.938rem; margin-left: -0.938rem; }
    body .column-group.mobile-column-gap-15 > .column { padding-right: 0.938rem; padding-left: 0.938rem; }
    body .column-group.mobile-row-gap-15 > .column { margin-bottom: 0.938rem; }

    body .column-group.mobile-column-gap-20 { margin-right: -1.25rem;  margin-left: -1.25rem; }
    body .column-group.mobile-column-gap-20 > .column { padding-right: 1.25rem; padding-left: 1.25rem; }
    body .column-group.mobile-row-gap-20 > .column { margin-bottom: 1.25rem; }

    body .column-group.mobile-column-gap-30 { margin-right: -1.875rem; margin-left: -1.875rem; }
    body .column-group.mobile-column-gap-30 > .column { padding-right: 1.875rem; padding-left: 1.875rem; }
    body .column-group.mobile-row-gap-30 > .column { margin-bottom: 1.875rem; }

    body .column-group.mobile-column-gap-40 { margin-right: -2.5rem; margin-left: -2.5rem; }
    body .column-group.mobile-column-gap-40 > .column  {  padding-right: 2.5rem;  padding-left: 2.5rem; }
    body .column-group.mobile-row-gap-40 > .column {  margin-bottom: 2.5rem; }

    body .column-group.mobile-column-gap-50 { margin-right: -3.125rem; margin-left: -3.125rem; }
    body .column-group.mobile-column-gap-50 > .column { padding-right: 3.125rem; padding-left: 3.125rem; }
    body .column-group.mobile-row-gap-50 > .column { margin-bottom: 3.125rem; }

    body .column-group.mobile-column-gap-60 { margin-right: -3.75rem; margin-left: -3.75rem; }
    body .column-group.mobile-column-gap-60 > .column { padding-right: 3.75rem; padding-left: 3.75rem; }
    body .column-group.mobile-row-gap-60 > .column { margin-bottom: 3.75rem; }


}



/*===============================================================
 *
 *  15) FLICKITY
 *  Classes and styles for Flickity slider.
 *
===============================================================*/

/* A) General
-=================================*/

.flickity-slider.column-group.column-group-flex {
    display: block!important;
}

[data-slider-controls*="adaptive-height"] .flickity-viewport {
    -webkit-transition: height 250ms ease-in-out 0ms;
    -moz-transition: height 250ms ease-in-out 0ms;
    -o-transition: height 250ms ease-in-out 0ms;
    transition: height 250ms ease-in-out 0ms;
}

.absolute-slider.flickity-enabled,
.absolute-slider.flickity-enabled .slide,
.absolute-slider.flickity-enabled .flickity-viewport,
.absolute-slider.flickity-enabled .flickity-slider { 
    height: 100%!important;
    box-sizing: border-box!important;
}   


/* B) Page Dots
-=================================*/

/* Flickity Dots General */
.flickity-prepped.flickity-enabled .flickity-page-dots {
    display: table;
    position: relative;
    bottom: 0;
    width: auto;
    margin: 0 auto;
    margin-top: 1.875rem;
}

.flickity-prepped.flickity-enabled .flickity-page-dots .dot {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    margin: 0rem 0.5rem;
    background-color: currentColor;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.4;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: opacity 300ms ease-in-out 0ms;
    -moz-transition: opacity 300ms ease-in-out 0ms;
    -o-transition: opacity 300ms ease-in-out 0ms;
    transition: opacity 300ms ease-in-out 0ms;
}

/* Flickity Counter Dots General */
.flickity-prepped.slider-counter-prepped.flickity-enabled .flickity-page-dots {
    counter-reset: counter;
}

.flickity-prepped.slider-counter-prepped.flickity-enabled .flickity-page-dots .dot {
    width: auto;
    margin-left: 0;
    margin-right: 0;
    background-color: transparent;
    cursor: pointer;
    -webkit-transition: opacity 300ms ease-in-out 0ms;
    -moz-transition: opacity 300ms ease-in-out 0ms;
    -o-transition: opacity 300ms ease-in-out 0ms;
    transition: opacity 300ms ease-in-out 0ms;
}

.flickity-prepped.slider-counter-prepped.flickity-enabled .flickity-page-dots li.dot {
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
    font-family: var(--body-font);
    font-style: normal;
    font-weight: normal;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0em;
    line-height: 1.4em;
    color: currentColor;
    list-style: none;
    border: none;
    border-radius: 0;
    opacity: 0.6;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    counter-increment: counter;
}

.flickity-prepped.flickity-enabled .flickity-page-dots li.dot::before {
    padding: 0rem 0.625rem;
}

.flickity-prepped.flickity-enabled .flickity-page-dots li.dot:hover {
    opacity: 1;
    -webkit-transition: opacity 300ms ease-in-out 0ms;
    -moz-transition: opacity 300ms ease-in-out 0ms;
    -o-transition: opacity 300ms ease-in-out 0ms;
    transition: opacity 300ms ease-in-out 0ms;
}

body .flickity-prepped.flickity-enabled .flickity-page-dots li.dot.is-selected { 
    opacity: 1;
    -webkit-transition: opacity 300ms ease-in-out 0ms;
    -moz-transition: opacity 300ms ease-in-out 0ms;
    -o-transition: opacity 300ms ease-in-out 0ms;
    transition: opacity 300ms ease-in-out 0ms;
}


/* C) Dots Counter Increments
-=================================*/

.flickity-prepped.flickity-enabled.slider-counter-decimal .flickity-page-dots li.dot::before {
    content: counter(counter, decimal);
}

.flickity-prepped.flickity-enabled.slider-counter-decimal-0 .flickity-page-dots li.dot::before {
    content: counter(counter, decimal-leading-zero);
}

.flickity-prepped.flickity-enabled.slider-counter-roman .flickity-page-dots li.dot::before {
    content: counter(counter, upper-roman);
}

.flickity-prepped.flickity-enabled.slider-counter-lower-roman .flickity-page-dots li.dot::before {
    content: counter(counter, lower-roman);
}


/* D) Dots :after Affects
-=================================*/

/* Dash after selected dot */
body .flickity-prepped.slider-dots-dash .flickity-page-dots .dot::after {
    content: " ";
    display: inline-block;
    position: relative;
    top: 0;
    margin: 0rem 0.125rem;
    width: 0;
    height: 0.063rem;
    background-color: currentColor;
    vertical-align: middle;
    -webkit-transition: width 300ms ease-in-out 0ms;
    -moz-transition: width 300ms ease-in-out 0ms;
    -o-transition: width 300ms ease-in-out 0ms;
    transition: width 300ms ease-in-out 0ms;
}

body .flickity-prepped.slider-dots-dash .flickity-page-dots li.dot.is-selected::after { 
    width: 14px;
}


/* E) Page Buttons
-=================================*/

.slider-custom-buttons .flickity-button {
    background: transparent;
    z-index: 10!important;    
}

.slider-custom-buttons .flickity-button:focus {
    outline: 0!important;
    box-shadow: none!important;
}

.slider-custom-buttons .flickity-button:active {
    opacity: 1!important;
}

.slider-custom-buttons .flickity-button.next::after,
.slider-custom-buttons .flickity-button.previous::after {
    content: url('data:image/svg+xml,<svg style="width: 1.2em;" fill="rgba(0,0,0,1)" x="0px" y="0px" width="100%" height="100%" version="1.1" viewBox="0 19 28 8" enable-background="new 0 19 28 8" xmlns="http://www.w3.org/2000/svg"><path d="M26.2,22.5l-3-2.9l0,0l0.6-0.6l4.2,4l-4.2,4l-0.6-0.6l0,0l3-2.9H0v-1L26.2,22.5z"></path></svg>');
}

.slider-custom-buttons .flickity-button.next::after {
    display: inline-block;
    position: relative;
    width: 100%;
}

.slider-custom-buttons .flickity-button.previous::after {
    display: inline-block;
    position: relative;
    width: 100%;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.slider-custom-buttons .flickity-button.next .flickity-button-icon {
    display: none;
    visibility: hidden;
}

.slider-custom-buttons .flickity-prev-next-button {
    top: 100%!important;
    width: 32px!important;
    height: auto!important;
    border-radius: 0%!important;
    transform: translateY(-19px)!important;
}

.slider-custom-buttons .flickity-button.previous .flickity-button-icon {
    display: none;
    visibility: hidden;
}


/* Hero Slider Buttons */
.absolute-slider.slider-custom-buttons button {
    display: inline-flex;
    justify-content: center;
    top: -5%!important;
    position: relative!important;
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: translateY(0%)!important;
    -moz-transform: translateY(0%)!important;
    -ms-transform: translateY(0%)!important;
    -o-transform: translateY(0%)!important;
    transform: translateY(0%)!important;
    opacity: .4;
}

.absolute-slider.slider-custom-buttons button.previous {
    left: 5px!important;
    transform: translateX(-35vw)!important; 
}

.absolute-slider.slider-custom-buttons button.next {
    right: 5px!important;
    transform: translateX(35vw)!important; 
}


/* F) Slider Transitions
-=================================*/

/* Zoom */
.flickity-prepped.slider-scale-up .slide [class*="background-"] {
    transition: transform 0s linear 0.6s;
    transform: scale(1);
}

.flickity-prepped.slider-scale-up .slide.is-selected [class*="background-"] {
    transition: transform 8s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    transform: scale(1.04) translateZ(0px);
}

/* Fade */
.flickity-enabled.slider-fade .flickity-slider {
    transform: none!important;
}

.flickity-enabled.slider-fade .flickity-slider > * {
    transform: none!important;
    left: 0!important;
    opacity: 0;
    z-index: -1;
    -webkit-transition: opacity 1000ms ease 0s;
    -moz-transition: opacity 1000ms ease 0s;
    -o-transition: opacity 1000ms ease 0s;
    transition: opacity 1000ms ease 0s;
}

.flickity-enabled.slider-fade .flickity-slider > *.is-selected {
    transform: none!important;
    opacity: 1;
    z-index: 0;
    -webkit-transition: opacity 1000ms ease 0s;
    -moz-transition: opacity 1000ms ease 0s;
    -o-transition: opacity 1000ms ease 0s;
    transition: opacity 1000ms ease 0s;
}


/* G) Slider Counter Status
-=================================*/

/* Custom Nav Template

<div class="featured-group-navigation">
    <div class="display-flex relative-position width-1of1">
        <div class="flex-box-prepped height-1of1 align-end items-center">
            <div class="flex-item-inline relative-position width-auto height-1of1 content-start items-center">
                <span class="slider-status-slide"></span>
            </div>
            <div class="flex-item-inline relative-position flex-grow-1 height-1of1 content-center items-center">
                <span class="slider-status-separator"></span>
            </div>
            <div class="flex-item-inline relative-position width-auto height-1of1 content-end items-center">
                <span class="slider-status-total"></span>
            </div>
        </div>
    </div>
</div>

*/

.flickity-enabled .slider-status {
    font-family: var(--body-font);
    font-style: normal;
    font-weight: normal;
    font-size: 1.125rem;
    text-transform: none;
    letter-spacing: 0.22em;
    line-height: 1.4em;
    color: var(--secondary-colour);
}



/*===============================================================
 *
 *  16) MISCELLANEOUS
 *  Aditional styles for elements.
 *
===============================================================*/

/* A) Counters
=================================*/

.counter-reset { 
    counter-reset: counter ;
    list-style: none;
}

/* Decimal */
.counter-decimal::after {
    padding-left: 0.313rem;
    content: counter(counter, decimal);
    counter-increment: counter;
}

/* Deciaml Leading Zero */
.counter-decimal-0::after {
    padding-left: 0.313rem;
    content: counter(counter, decimal-leading-zero);
    counter-increment: counter;
}

/* Upper Roman */
.counter-roman::after {
    padding-left: 0.313rem;
    content: counter(counter, upper-roman);
    counter-increment: counter;
}

/* Lower Roman */
.counter-lower-roman::after {
    padding-left: 0.313rem;
    content: counter(counter, lower-roman);
    counter-increment: counter;
}


/* B) Pointers
=================================*/

.pointer-events-pointer {
    cursor: pointer;
}

.pointer-events-none {
    pointer-events: none;
}


/* C) Backgrounds
=================================*/

body .background-prepped {
    background-position: center center!important;
    background-repeat: no-repeat!important;
    background-size: cover!important;
}

/* Positions */
body .background-pos-center { background-position: center center!important; }
body .background-pos-top { background-position: top center!important; }
body .background-pos-right { background-position: right!important; }
body .background-pos-bottom { background-position: bottom center!important; }
body .background-pos-left { background-position: left!important; }

/* Repeats */
body .background-repeat { background-repeat: repeat!important; }
body .background-no-repeat { background-repeat: no-repeat!important; }

/* Sizes */
body .background-contain { background-size: contain!important; }
body .background-cover { background-size: cover!important; }

/* Opacity */
.opacity-0 {
    opacity: 0;
}
 
/* Overlays */
/* 1. -------------------- */
.overlay-light {
    background-color: rgba(255,255,255,.14);
}

body .overlay-light.overlay-on-hover { 
    background-color: rgba(0,0,0,0);
    -webkit-transition: background-color 445ms ease-in-out 0ms;
    -moz-transition: background-color 445ms ease-in-out 0ms;
    -ms-transition: background-color 445ms ease-in-out 0ms;
    -o-transition: background-color 445ms ease-in-out 0ms;
    transition: background-color 445ms ease-in-out 0ms;
}

body .overlay-light.overlay-on-hover:hover {
    background-color: rgba(255,255,255,.46);
}


/* 2. -------------------- */
.overlay-extra-light {
    background-color: rgba(255,255,255,.46);
}

body .overlay-extra-light.overlay-on-hover { 
    background-color: rgba(0,0,0,0);
    -webkit-transition: background-color 445ms ease-in-out 0ms;
    -moz-transition: background-color 445ms ease-in-out 0ms;
    -ms-transition: background-color 445ms ease-in-out 0ms;
    -o-transition: background-color 445ms ease-in-out 0ms;
    transition: background-color 445ms ease-in-out 0ms;
}

body .overlay-extra-light.overlay-on-hover:hover {
    background-color: rgba(255,255,255,.6);
}


/* 3. -------------------- */
.overlay-dark {
    background-color: rgba(0,0,0,0.46);
}

body .overlay-dark.overlay-on-hover { 
    background-color: rgba(0,0,0,0);
    -webkit-transition: background-color 445ms ease-in-out 0ms;
    -moz-transition: background-color 445ms ease-in-out 0ms;
    -ms-transition: background-color 445ms ease-in-out 0ms;
    -o-transition: background-color 445ms ease-in-out 0ms;
    transition: background-color 445ms ease-in-out 0ms;
}

body .overlay-dark.overlay-on-hover:hover {
    background-color: rgba(0,0,0,0.46);
}


/* 4. -------------------- */
.overlay-semi-dark {
    background-color: rgba(0,0,0,0.26);
}

body .overlay-semi-dark.overlay-on-hover { 
    background-color: rgba(0,0,0,0);
    -webkit-transition: background-color 445ms ease-in-out 0ms;
    -moz-transition: background-color 445ms ease-in-out 0ms;
    -ms-transition: background-color 445ms ease-in-out 0ms;
    -o-transition: background-color 445ms ease-in-out 0ms;
    transition: background-color 445ms ease-in-out 0ms;
}

body .overlay-semi-dark.overlay-on-hover:hover {
    background-color: rgba(0,0,0,0.46);
}


/* 5. -------------------- */
.overlay-extra-dark {
    background-color: rgba(0,0,0,0.6);
}

body .overlay-extra-dark.overlay-on-hover { 
    background-color: rgba(0,0,0,0);
    -webkit-transition: background-color 445ms ease-in-out 0ms;
    -moz-transition: background-color 445ms ease-in-out 0ms;
    -ms-transition: background-color 445ms ease-in-out 0ms;
    -o-transition: background-color 445ms ease-in-out 0ms;
    transition: background-color 445ms ease-in-out 0ms;
}

body .overlay-extra-dark.overlay-on-hover:hover {
    background-color: rgba(0,0,0,0.6);
}


/* Overlay Hover Text */
body .overlay-text-hover .post-headline-font,
body .overlay-text-hover .related-headline-font {
    opacity: 0!important;
    -webkit-transition: opacity 445ms ease 0ms;
    -moz-transition: opacity 445ms ease 0ms;
    -ms-transition: opacity 445ms ease 0ms;
    -o-transition: opacity 445ms ease 0ms;
    transition: opacity 445ms ease 0ms;
}

body .overlay-text-hover:hover .post-headline-font,
body .overlay-text-hover:hover .related-headline-font {
    opacity: 1!important;
}


.overlay-bottom {
    position: relative;
    background: rgb(0,0,0);
    background: -moz-linear-gradient(0deg, rgba(0,0,0,0.8323704481792717) 0%, rgba(0,0,0,0.47102591036414565) 20%, rgba(0,0,0,0) 60%);
    background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.8323704481792717) 0%, rgba(0,0,0,0.47102591036414565) 20%, rgba(0,0,0,0) 60%);
    background: linear-gradient(0deg, rgba(0,0,0,0.8323704481792717) 0%, rgba(0,0,0,0.47102591036414565) 20%, rgba(0,0,0,0) 60%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
}

.overlay-bottom-high {
    position: relative;
    background: rgb(0,0,0);
    background: -moz-linear-gradient(0deg, rgba(0,0,0,0.7959558823529411) 0%, rgba(0,0,0,0.4962359943977591) 50%, rgba(0,0,0,0) 70%);
    background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.7959558823529411) 0%, rgba(0,0,0,0.4962359943977591) 50%, rgba(0,0,0,0) 70%);
    background: linear-gradient(0deg, rgba(0,0,0,0.7959558823529411) 0%, rgba(0,0,0,0.4962359943977591) 50%, rgba(0,0,0,0) 70%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
}

.hero-overlay-dark {
    background: rgb(0,0,0);
    background: -moz-linear-gradient(0deg, rgba(0,0,0,0.7483368347338936) 0%, rgba(0,0,0,0.4990371148459384) 35%, rgba(0,0,0,0.2497373949579832) 83%, rgba(0,0,0,0.036852240896358524) 100%);
    background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.7483368347338936) 0%, rgba(0,0,0,0.4990371148459384) 35%, rgba(0,0,0,0.2497373949579832) 83%, rgba(0,0,0,0.036852240896358524) 100%);
    background: -o-linear-gradient(0deg, rgba(0,0,0,0.7483368347338936) 0%, rgba(0,0,0,0.4990371148459384) 35%, rgba(0,0,0,0.2497373949579832) 83%, rgba(0,0,0,0.036852240896358524) 100%);
    background: linear-gradient(0deg, rgba(0,0,0,0.7483368347338936) 0%, rgba(0,0,0,0.4990371148459384) 35%, rgba(0,0,0,0.2497373949579832) 83%, rgba(0,0,0,0.036852240896358524) 100%);
}

.overlay-bottom-light {
    background: rgb(0,0,0);
    background: -moz-linear-gradient(0deg, rgba(0,0,0,0.6306897759103641) 7%, rgba(0,0,0,0.40379901960784315) 51%, rgba(0,0,0,0.0844712885154062) 100%);
    background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.6306897759103641) 7%, rgba(0,0,0,0.40379901960784315) 51%, rgba(0,0,0,0.0844712885154062) 100%);
    background: linear-gradient(0deg, rgba(0,0,0,0.6306897759103641) 7%, rgba(0,0,0,0.40379901960784315) 51%, rgba(0,0,0,0.0844712885154062) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
}

.overlay-filter-sepia {
    -webkit-filter: grayscale(100%) sepia(20%);
    -moz-filter: grayscale(100%) sepia(20%);
    -ms-filter: grayscale(100%) sepia(20%);
    -o-filter: grayscale(100%) sepia(20%);
    filter: grayscale(100%) sepia(20%);
}

.overlay-filter-bw {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}



/*===============================================================
 *
 *  17) SVG ARROWS
 *  Custom arrows used for next/prev sliders or pagination.
 *
===============================================================*/

/* Shwoopy Arrow HTML
<div class="theme-arrow">
    <svg xmlns="http://www.w3.org/2000/svg" width="63" height="41" viewBox="0 0 63 41" fill="none">
        <rect width="61.1774" height="3" rx="1.90475" transform="matrix(-1 0 0 1 62.1774 18.5079)" fill="#19130E"/>
        <path d="M1.75781 20.4126C8.97452 20.4126 14.8248 12.169 14.8248 2" stroke="#19130E" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M1.75781 20.4126C8.97452 20.4126 14.8248 28.6562 14.8248 38.8252" stroke="#19130E" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
</div>

/* Long Arrow
<svg style="width: 1.2em; fill: currentColor;" x="0px" y="0px" width="100%" height="100%" version="1.1" viewBox="0 19 28 8" enable-background="new 0 19 28 8" xmlns="http://www.w3.org/2000/svg">
    <path class="st0" d="M26.2,22.5l-3-2.9l0,0l0.6-0.6l4.2,4l-4.2,4l-0.6-0.6l0,0l3-2.9H0v-1L26.2,22.5z"></path>
</svg>

==================================*/


/* A) Arrow Styles
-=================================*/

.theme-arrow svg {
    width: 1.75rem;
    height:  auto;
}

.theme-arrow.left-facing svg {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

.theme-arrow.right-facing svg {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}



/*===============================================================
 *
 *  18) DARK BUTTONS
 *  Styles and classes for dark buttons.
 *
===============================================================*/

.button-prepped { 
    display: inline-block;
    position: relative;
    padding: 1rem 3.375rem;
    line-height: 1em!important;
    text-align: center;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 1;
}


/* A) Angle Black Swipe Right
=================================*/

body .common-button-dark,
body a.common-button-dark {
    position: relative;
    border-width: 0.063rem;
    border-style: solid;
    border-color: var(--buttons-dark-border);
    color: var(--buttons-dark-colour);
    background-color: transparent;    
    -webkit-transition: all 300ms ease 0ms;
    -moz-transition: all 300ms ease 0ms;
    -o-transition: all 300ms ease 0ms;
    transition: all 300ms ease 0ms;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 0;
}

body .common-button-dark:hover,
body a.common-button-dark:hover {
    color: var(--buttons-dark-hover-colour);
    opacity: 1;
}

body .common-button-dark::before,
body a.common-button-dark::before {
    content: " ";
    position: absolute;
    width: calc(100% + 1.875rem);
    height: 104%;
    top: -2%;
    left: -0.938rem;
    background-color: var(--buttons-dark-bg);
    -webkit-transform: skewX(.312rad);
    -moz-transform: skewX(.312rad);
    -ms-transform: skewX(.312rad);
    -o-transform: skewX(.312rad);
    transform: skewX(.312rad); /* 20deg */
    -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
    -moz-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
    -o-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
    transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
    z-index: -1;
}

body .common-button-dark:hover::before,
body a.common-button-dark:hover::before {
    width: 0;
}

/* Angle Black Swipe Left */
body .common-button-dark-reverse,
body a.common-button-dark-reverse {
    position: relative;
    border-width: 0.063rem;
    border-style: solid;
    border-color: var(--buttons-dark-border);
    color: var(--buttons-dark-hover-colour);
    background-color: transparent;
    -webkit-transition: all 300ms ease 0ms;
    -moz-transition: all 300ms ease 0ms;
    -o-transition: all 300ms ease 0ms;
    transition: all 300ms ease 0ms;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
}

body .common-button-dark-reverse:hover,
body a.common-button-dark-reverse:hover {
    color: var(--buttons-dark-colour);
    opacity: 1;
}

body .common-button-dark-reverse::before,
body a.common-button-dark-reverse::before {
    content: " ";
    position: absolute;
    width: 0;
    height: 104%;
    top: -2%;
    left: -0.938rem;
    background-color: var(--buttons-dark-bg);    
    -webkit-transform: skewX(.312rad);
    -moz-transform: skewX(.312rad);
    -ms-transform: skewX(.312rad);
    -o-transform: skewX(.312rad);
    transform: skewX(.312rad); /* 20deg */    
    -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
    -moz-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
    -o-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
    transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
    z-index: -1;
}

body .common-button-dark-reverse:hover::before,
body a.common-button-dark-reverse:hover::before {
    width: calc(100% + 1.875rem);
}


/* B) Ghost Button
=================================*/

body .ghost-button-dark,
body a.ghost-button-dark {
    position: relative;
    border-width: 0.063rem;
    border-style: solid;
    border-color: var(--buttons-dark-border);
    background-color: var(--buttons-dark-hover-bg);
    color: var(--buttons-dark-colour);    
    -webkit-transition: all 600ms ease 0ms;
    -moz-transition: all 600ms ease 0ms;
    -o-transition: all 600ms ease 0ms;
    transition: all 600ms ease 0ms;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 0;
}

body .ghost-button-dark::before,
body a.ghost-button-dark::before {
    content: " ";
    position: absolute;
    bottom: 0;
    left: -1%;
    width: 102%;
    height: 102%;
    background-color: var(--buttons-dark-bg);
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    -o-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transition: transform 600ms cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: transform 600ms cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: transform 600ms cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: transform 600ms cubic-bezier(0.77, 0, 0.175, 1) 0s;
    z-index: -1;
}

body .ghost-button-dark:hover,
body a.ghost-button-dark:hover {
    color: var(--buttons-dark-colour);
}

body .ghost-button-dark:hover::before,
body a.ghost-button-dark:hover::before {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
}


/* C) Opacity Button
=================================*/

body .opacity-button-dark,
body a.opacity-button-dark {
    position: relative;
    border-width: 0.063rem;
    border-style: solid;
    border-color: var(--buttons-dark-border);
    background-color: var(--buttons-dark-bg);
    color: var(--buttons-dark-colour);
    -webkit-transition: background-color 300ms cubic-bezier(.42,0,.58,1) 0ms, border-color 300ms cubic-bezier(.42,0,.58,1) 0ms, color 300ms cubic-bezier(.42,0,.58,1) 0ms;
    -moz-transition: background-color 300ms cubic-bezier(.42,0,.58,1) 0ms, border-color 300ms cubic-bezier(.42,0,.58,1) 0ms, color 300ms cubic-bezier(.42,0,.58,1) 0ms;
    -o-transition: background-color 300ms cubic-bezier(.42,0,.58,1) 0ms, border-color 300ms cubic-bezier(.42,0,.58,1) 0ms, color 300ms cubic-bezier(.42,0,.58,1) 0ms;
    transition: background-color 300ms cubic-bezier(.42,0,.58,1) 0ms, border-color 300ms cubic-bezier(.42,0,.58,1) 0ms, color 300ms cubic-bezier(.42,0,.58,1) 0ms;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 0;
}

body .opacity-button-dark:hover,
body a.opacity-button-dark:hover {
    border-color: var(--buttons-dark-hover-border);
    background-color: var(--buttons-dark-hover-bg);
    color: var(--buttons-dark-hover-colour)!important;
}



/*================================================================
 *
 *  19) UNDERLINE BUTTONS
 *  Underline styles for < a > links.
 *
/*===============================================================*/

/* A) Scale 1 Left to Right
=================================*/

body .underline-prepped,
body a.underline-prepped,
body button.underline-prepped {
    position: relative;
    padding-bottom: 0.063rem;
}

body .underline-scale-1-ltr::after,
body a.underline-scale-1-ltr::after,
body button.underline-scale-1-ltr::after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.063rem;
    background-color: currentColor;
    -webkit-transition: transform 460ms cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: transform 460ms cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: transform 460ms cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: transform 460ms cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    -o-transform-origin: bottom left;
    transform-origin: bottom left;
}

body .underline-scale-1-ltr:hover::after,
body a.underline-scale-1-ltr:hover::after,
body button.underline-scale-1-ltr:hover::after {
    -webkit-transform: scale(0, 1);
    -moz-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    -o-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: bottom right;
    -moz-transform-origin: bottom right;
    -ms-transform-origin: bottom right;
    -o-transform-origin: bottom right;
    transform-origin: bottom right;
}


/* B) Scale 0 Left to Right
=================================*/

body .underline-scale-2-ltr::after,
body a.underline-scale-2-ltr::after,
body button.underline-scale-2-ltr::after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.063rem;
    background-color: currentColor;
    -webkit-transition: transform 460ms cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: transform 460ms cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: transform 460ms cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: transform 460ms cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: bottom right;
    -moz-transform-origin: bottom right;
    -ms-transform-origin: bottom right;
    -o-transform-origin: bottom right;
    transform-origin: bottom right;
}

body .underline-scale-2-ltr:hover::after,
body a.underline-scale-2-ltr:hover::after,
body button.underline-scale-2-ltr:hover::after {
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    -o-transform-origin: bottom left;
    transform-origin: bottom left;
}


/* C) Scale Strike Left to Right
=================================*/

body .underline-scale-strike-ltr::before,
body a.underline-scale-strike-ltr::before,
body button.underline-scale-strike-ltr::before {
    content: " ";
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
    height: 0.063rem;
    background-color: currentColor;
    -webkit-transition: transform 460ms cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: transform 460ms cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: transform 460ms cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: transform 460ms cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center left;
    -moz-transform-origin: center left;
    -ms-transform-origin: center left;
    -o-transform-origin: center left;
    transform-origin: center left;
}

body .underline-scale-strike-ltr::after,
body a.underline-scale-strike-ltr::after,
body button.underline-scale-strike-ltr::after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.063rem;
    background-color: currentColor;
}

body .underline-scale-strike-ltr:hover::before,
body a.underline-scale-strike-ltr:hover::before,
body button.underline-scale-strike-ltr:hover::before {
    -webkit-transform: scale(0, 1);
    -moz-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    -o-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: center right;
    -moz-transform-origin: center right;
    -ms-transform-origin: center right;
    -o-transform-origin: center right;
    transform-origin: center right;
}


/* For post/article/image hovers to strike the scale animation */

/* Scale 1 Left to Right */
body .underline-scale-hook:hover .underline-scale-1-ltr::after,
body .underline-scale-hook:hover a.underline-scale-1-ltr::after,
body .underline-scale-hook:hover button.underline-scale-1-ltr::after {
    -webkit-transform: scale(0, 1);
    -moz-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    -o-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: bottom right;
    -moz-transform-origin: bottom right;
    -ms-transform-origin: bottom right;
    -o-transform-origin: bottom right;
    transform-origin: bottom right;
}

/* Scale 0 Left to Right */
body .underline-scale-hook:hover .underline-scale-2-ltr::after,
body .underline-scale-hook:hover a.underline-scale-2-ltr::after,
body .underline-scale-hook:hover button.underline-scale-2-ltr::after {
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    -o-transform-origin: bottom left;
    transform-origin: bottom left;
}

/* Scale Strike Left to Right */
body .underline-scale-hook:hover .underline-scale-strike-ltr::before,
body .underline-scale-hook:hover a.underline-scale-strike-ltr::before,
body .underline-scale-hook:hover button.underline-scale-strike-ltr::before {
    -webkit-transform: scale(0, 1);
    -moz-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    -o-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: center right;
    -moz-transform-origin: center right;
    -ms-transform-origin: center right;
    -o-transform-origin: center right;
    transform-origin: center right;
}


/*================================================================
 *
 *  20) BORDERS
 *  Border styles.
 *
/*===============================================================*/

body .border-y-light {
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body .border-x-light {
    border-left: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

body .border-top-light {
    border-top: 1px solid var(--border-light);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

body .border-left-light {
    border-left: 1px solid var(--border-light);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

body .border-bottom-light {
    border-bottom: 1px solid var(--border-light);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

body .border-right-light {
    border-right: 1px solid var(--border-light);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

body .border-y-dark {
    border-top: 1px solid var(--border-dark);
    border-bottom: 1px solid var(--border-dark);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
    
body .border-x-dark {
    border-left: 1px solid var(--border-dark);
    border-right: 1px solid var(--border-dark);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

body .border-top-dark {
    border-top: 1px solid var(--border-dark);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

body .border-left-dark {
    border-left: 1px solid var(--border-dark);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

body .border-bottom-dark {
    border-bottom: 1px solid var(--border-dark);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body .border-right-dark {
    border-right: 1px solid var(--border-dark);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


body .border-y-accent {
    border-top: 1px solid var(--border-accent);
    border-bottom: 1px solid var(--border-accent);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body .border-x-accent {
    border-left: 1px solid var(--border-accent);
    border-right: 1px solid var(--border-accent);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

body .border-top-accent {
    border-top: 1px solid var(--border-accent);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

body .border-left-accent {
    border-left: 1px solid var(--border-accent);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

body .border-bottom-accent {
    border-bottom: 1px solid var(--border-accent);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

body .border-right-accent {
    border-right: 1px solid var(--border-accent);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}


/* Desktop */
@media (min-width: 1021px) {

    body .desktop-border-y-light {
        border-top: 1px solid var(--border-light);
        border-bottom: 1px solid var(--border-light);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    body .desktop-border-x-light {
        border-left: 1px solid var(--border-light);
        border-right: 1px solid var(--border-light);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .desktop-border-top-light {
        border-top: 1px solid var(--border-light);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .desktop-border-left-light {
        border-left: 1px solid var(--border-light);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .desktop-border-bottom-light {
        border-bottom: 1px solid var(--border-light);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .desktop-border-right-light {
        border-right: 1px solid var(--border-light);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .desktop-border-y-dark {
        border-top: 1px solid var(--border-dark);
        border-bottom: 1px solid var(--border-dark);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
        
    body .desktop-border-x-dark {
        border-left: 1px solid var(--border-dark);
        border-right: 1px solid var(--border-dark);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .desktop-border-top-dark {
        border-top: 1px solid var(--border-dark);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .desktop-border-left-dark {
        border-left: 1px solid var(--border-dark);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .desktop-border-bottom-dark {
        border-bottom: 1px solid var(--border-dark);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    body .desktop-border-right-dark {
        border-right: 1px solid var(--border-dark);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    body .desktop-border-y-accent {
        border-top: 1px solid var(--border-accent);
        border-bottom: 1px solid var(--border-accent);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
        
    body .desktop-border-x-accent {
        border-left: 1px solid var(--border-accent);
        border-right: 1px solid var(--border-accent);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .desktop-border-top-accent {
        border-top: 1px solid var(--border-accent);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .desktop-border-left-accent {
        border-left: 1px solid var(--border-accent);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .desktop-border-bottom-accent {
        border-bottom: 1px solid var(--border-accent);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    body .desktop-border-right-accent {
        border-right: 1px solid var(--border-accent);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1020px) {

    body .tablet-border-y-light {
        border-top: 1px solid var(--border-light);
        border-bottom: 1px solid var(--border-light);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    body .tablet-border-x-light {
        border-left: 1px solid var(--border-light);
        border-right: 1px solid var(--border-light);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .tablet-border-top-light {
        border-top: 1px solid var(--border-light);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .tablet-border-left-light {
        border-left: 1px solid var(--border-light);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .tablet-border-bottom-light {
        border-bottom: 1px solid var(--border-light);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .tablet-border-right-light {
        border-right: 1px solid var(--border-light);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .tablet-border-y-dark {
        border-top: 1px solid var(--border-dark);
        border-bottom: 1px solid var(--border-dark);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
        
    body .tablet-border-x-dark {
        border-left: 1px solid var(--border-dark);
        border-right: 1px solid var(--border-dark);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .tablet-border-top-dark {
        border-top: 1px solid var(--border-dark);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .tablet-border-left-dark {
        border-left: 1px solid var(--border-dark);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .tablet-border-bottom-dark {
        border-bottom: 1px solid var(--border-dark);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    body .tablet-border-right-dark {
        border-right: 1px solid var(--border-dark);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    body .tablet-border-y-accent {
        border-top: 1px solid var(--border-accent);
        border-bottom: 1px solid var(--border-accent);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
        
    body .tablet-border-x-accent {
        border-left: 1px solid var(--border-accent);
        border-right: 1px solid var(--border-accent);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .tablet-border-top-accent {
        border-top: 1px solid var(--border-accent);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .tablet-border-left-accent {
        border-left: 1px solid var(--border-accent);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .tablet-border-bottom-accent {
        border-bottom: 1px solid var(--border-accent);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    body .tablet-border-right-accent {
        border-right: 1px solid var(--border-accent);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

}

/* Mobile */
@media (max-width: 767px) {

    body .mobile-border-y-light {
        border-top: 1px solid var(--border-light);
        border-bottom: 1px solid var(--border-light);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    body .mobile-border-x-light {
        border-left: 1px solid var(--border-light);
        border-right: 1px solid var(--border-light);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .mobile-border-top-light {
        border-top: 1px solid var(--border-light);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .mobile-border-left-light {
        border-left: 1px solid var(--border-light);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .mobile-border-bottom-light {
        border-bottom: 1px solid var(--border-light);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .mobile-border-right-light {
        border-right: 1px solid var(--border-light);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .mobile-border-y-dark {
        border-top: 1px solid var(--border-dark);
        border-bottom: 1px solid var(--border-dark);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
        
    body .mobile-border-x-dark {
        border-left: 1px solid var(--border-dark);
        border-right: 1px solid var(--border-dark);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .mobile-border-top-dark {
        border-top: 1px solid var(--border-dark);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .mobile-border-left-dark {
        border-left: 1px solid var(--border-dark);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .mobile-border-bottom-dark {
        border-bottom: 1px solid var(--border-dark);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    body .mobile-border-right-dark {
        border-right: 1px solid var(--border-dark);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    body .mobile-border-y-accent {
        border-top: 1px solid var(--border-accent);
        border-bottom: 1px solid var(--border-accent);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
        
    body .mobile-border-x-accent {
        border-left: 1px solid var(--border-accent);
        border-right: 1px solid var(--border-accent);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .mobile-border-top-accent {
        border-top: 1px solid var(--border-accent);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .mobile-border-left-accent {
        border-left: 1px solid var(--border-accent);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    body .mobile-border-bottom-accent {
        border-bottom: 1px solid var(--border-accent);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    body .mobile-border-right-accent {
        border-right: 1px solid var(--border-accent);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

}



/*===============================================================
 *
 *  21) ANIMATIONS
 *  Animation styles for elements.
 *
===============================================================*/

/* A) Trigger Animation
=================================*/

.has-animation {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -ms-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

.animated {
    -webkit-animation-duration: 1200ms;
    -moz-animation-duration: 1200ms;
    -ms-animation-duration: 1200ms;
    -o-animation-duration: 1200ms;
    animation-duration: 1200ms;
}

.animated[class*="in-view"] {
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -ms-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}


/* B) Fade-in 
=================================*/

.animated[class*="in-view"].fade-in {
  -webkit-animation-name: fade-in;
  -moz-animation-name: fade-in;
  -o-animation-name: fade-in;
  animation-name: fade-in;
}

@-webkit-keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }

}

@-moz-keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }

}

@-ms-keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }

}

@-o-keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }

}

@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


/* C) Fade-in & Up 
=================================*/

.animated[class*="in-view"].fade-in-up {
  -webkit-animation-name: fade-in-up;
  -moz-animation-name: fade-in-up;
  -o-animation-name: fade-in-up;
  animation-name: fade-in-up;
}

@-webkit-keyframes fade-in-up {
    0% { opacity: 0; -webkit-transform: translateY(1.25rem); }
    100% { opacity: 1; -webkit-transform: translateY(0); }

}

@-moz-keyframes fade-in-up {
    0% { opacity: 0; -moz-transform: translateY(1.25rem); }
    100% { opacity: 1; -moz-transform: translateY(0); }

}

@-ms-keyframes fade-in-up {
    0% { opacity: 0; -ms-transform: translateY(1.25rem); }
    100% { opacity: 1; -ms-transform: translateY(0); }

}

@-o-keyframes fade-in-up {
    0% { opacity: 0; -o-transform: translateY(1.25rem); }
    100% { opacity: 1; -o-transform: translateY(0); }

}

@keyframes fade-in-up {
    0% { opacity: 0; transform: translateY(1.25rem); }
    100% { opacity: 1; transform: translateY(0); }
}


/* D) Fade-in & Down 
=================================*/

.animated[class*="in-view"].fade-in-down {
  -webkit-animation-name: fade-in-down;
  -moz-animation-name: fade-in-down;
  -o-animation-name: fade-in-down;
  animation-name: fade-in-down;
}

@-webkit-keyframes fade-in-down {
    0% { opacity: 0; -webkit-transform: translateY(-1.25rem); }
    100% { opacity: 1; -webkit-transform: translateY(0); }

}

@-moz-keyframes fade-in-down {
    0% { opacity: 0; -moz-transform: translateY(-1.25rem); }
    100% { opacity: 1; -moz-transform: translateY(0); }

}

@-ms-keyframes fade-in-down {
    0% { opacity: 0; -ms-transform: translateY(-1.25rem); }
    100% { opacity: 1; -ms-transform: translateY(0); }

}

@-o-keyframes fade-in-down {
    0% { opacity: 0; -o-transform: translateY(-1.25rem); }
    100% { opacity: 1; -o-transform: translateY(0); }

}

@keyframes fade-in-down {
    0% { opacity: 0; transform: translateY(-1.25rem); }
    100% { opacity: 1; transform: translateY(0); }
}


/* E) Fade-in & Left 
=================================*/

.animated[class*="in-view"].fade-in-left {
  -webkit-animation-name: fade-in-left;
  -moz-animation-name: fade-in-left;
  -o-animation-name: fade-in-left;
  animation-name: fade-in-left;
}

@-webkit-keyframes fade-in-left {
    0% { opacity: 0; -webkit-transform: translateX(-1.25rem); } 
    100% { opacity: 1; -webkit-transform: translateX(0); }

}

@-moz-keyframes fade-in-left {
    0% { opacity: 0; -moz-transform: translateX(-1.25rem); } 
    100% { opacity: 1; -moz-transform: translateX(0); }

}

@-ms-keyframes fade-in-left {
    0% { opacity: 0; -ms-transform: translateX(-1.25rem); } 
    100% { opacity: 1; -ms-transform: translateX(0); }

}

@-o-keyframes fade-in-left {
    0% { opacity: 0; -o-transform: translateX(-1.25rem); } 
    100% { opacity: 1; -o-transform: translateX(0); }

}

@keyframes fade-in-left {
    0% { opacity: 0; transform: translateX(-1.25rem); } 
    100% { opacity: 1; transform: translateX(0); }
}


/* F) Fade-in & Right 
=================================*/

.animated[class*="in-view"].fade-in-right {
  -webkit-animation-name: fade-in-right;
  -moz-animation-name: fade-in-right;
  -o-animation-name: fade-in-right;
  animation-name: fade-in-right;
}

@-webkit-keyframes fade-in-right {
    0% { opacity: 0; -webkit-transform: translateX(1.563rem); } 
    100% { opacity: 1; -webkit-transform: translateX(0); }
}

@-moz-keyframes fade-in-right {
    0% { opacity: 0; -moz-transform: translateX(1.563rem); } 
    100% { opacity: 1; -moz-transform: translateX(0); }
}

@-ms-keyframes fade-in-right {
    0% { opacity: 0; -ms-transform: translateX(1.563rem); } 
    100% { opacity: 1; -ms-transform: translateX(0); }
}

@-o-keyframes fade-in-right {
    0% { opacity: 0; -o-transform: translateX(1.563rem); } 
    100% { opacity: 1; -o-transform: translateX(0); }
}


@keyframes fade-in-right {
    0% { opacity: 0; transform: translateX(1.563rem); } 
    100% { opacity: 1; transform: translateX(0); }
}


/* G) Fade-in Scale Down
=================================*/

.animated[class*="in-view"].fade-in-scale-down {
  -webkit-animation-name: fade-in-scale-down;
  -moz-animation-name: fade-in-scale-down;
  -o-animation-name: fade-in-scale-down;
  animation-name: fade-in-scale-down;
}

@-webkit-keyframes fade-in-scale-down {
    0% { opacity: 0; -webkit-transform: scale(1.08); -webkit-transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1) 0ms; } 
    100% { opacity: 1; -webkit-transform: scale(1.01) translateZ(0rem); }

}

@-moz-keyframes fade-in-scale-down {
    0% { opacity: 0; -moz-transform: scale(1.08); -moz-transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1) 0ms; } 
    100% { opacity: 1; -moz-transform: scale(1.01) translateZ(0rem); }

}

@-ms-keyframes fade-in-scale-down {
    0% { opacity: 0; -ms-transform: scale(1.08); -ms-transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1) 0ms; } 
    100% { opacity: 1; -ms-transform: scale(1.01) translateZ(0rem); }

}

@-o-keyframes fade-in-scale-down {
    0% { opacity: 0; -o-transform: scale(1.08); -o-transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1) 0ms; } 
    100% { opacity: 1; -o-transform: scale(1.01) translateZ(0rem); }

}

@keyframes fade-in-scale-down {
    0% { opacity: 0; transform: scale(1.08); transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1) 0ms; } 
    100% { opacity: 1; transform: scale(1.01) translateZ(0rem); }
}


/* H) Clippings
=================================*/

.image-clip {
    -webkit-animation: 0ms cubic-bezier(.42,0,.58,1) 0ms forwards paused;
    -moz-animation: 0ms cubic-bezier(.42,0,.58,1) 0ms forwards paused;
    -ms-animation: 0ms cubic-bezier(.42,0,.58,1) 0ms forwards paused;
    -o-animation: 0ms cubic-bezier(.42,0,.58,1) 0ms forwards paused;
    animation: 0ms cubic-bezier(.42,0,.58,1) 0ms forwards paused;
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    visibility: hidden;
}

/* For Images */
.animated[class*="in-view"].image-clip.clip-in-image {
    -webkit-animation: clip-in-image 1000ms cubic-bezier(.19,1,.22,1) 90ms 1 normal forwards running;
    -moz-animation: clip-in-image 1000ms cubic-bezier(.19,1,.22,1) 90ms 1 normal forwards running;
    -ms-animation: clip-in-image 1000ms cubic-bezier(.19,1,.22,1) 90ms 1 normal forwards running;
    -o-animation: clip-in-image 1000ms cubic-bezier(.19,1,.22,1) 90ms 1 normal forwards running;
    animation: clip-in-image 1000ms cubic-bezier(.19,1,.22,1) 90ms 1 normal forwards running;
}

@-webkit-keyframes clip-in-image {
    0% { -webkit-clip-path: inset(0 100% 0 0); visibility: hidden; }
    100% { -webkit-clip-path: inset(0 0 0 0); visibility: visible; }
}

@-moz-keyframes clip-in-image {
    0% { clip-path: inset(0 100% 0 0); visibility: hidden; }
    100% { clip-path: inset(0 0 0 0); visibility: visible; }
}

@-ms-keyframes clip-in-image {
    0% { clip-path: inset(0 100% 0 0); visibility: hidden; }
    100% { clip-path: inset(0 0 0 0); visibility: visible; }
}

@-o-keyframes clip-in-image {
    0% { clip-path: inset(0 100% 0 0); visibility: hidden; }
    100% { clip-path: inset(0 0 0 0); visibility: visible; }
}

@keyframes clip-in-image {
    0% { clip-path: inset(0 100% 0 0); visibility: hidden; }
    100% { clip-path: inset(0 0 0 0); visibility: visible; }
}


/* I) Image Scale on Hover 
=================================*/

/* Scale Up */
.scale-hook .scale-up {
    -webkit-transform: scale(1.01);
    -moz-transform: scale(1.01);
    -ms-transform: scale(1.01);
    -o-transform: scale(1.01);
    transform: scale(1.01);
    -webkit-transition: transform 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -moz-transition: transform 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -o-transition: transform 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    transition: transform 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}

.scale-hook:hover .scale-up {
    -webkit-transform: scale(1.04) translateZ(0rem);
    -moz-transform: scale(1.04) translateZ(0rem);
    -ms-transform: scale(1.04) translateZ(0rem);
    -o-transform: scale(1.04) translateZ(0rem);
    transform: scale(1.04) translateZ(0rem);
}

/* Scale Down */
.scale-hook .scale-down {
    -webkit-transform: scale(1.04);
    -moz-transform: scale(1.04);
    -ms-transform: scale(1.04);
    -o-transform: scale(1.04);
    transform: scale(1.04);
    -webkit-transition: transform 2000ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
    -moz-transition: transform 2000ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
    -ms-transition: transform 2000ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
    -o-transition: transform 2000ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
    transition: transform 2000ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
}

.scale-hook:hover .scale-down {
    -webkit-transform: scale(1.01) translateZ(0rem);
    -moz-transform: scale(1.01) translateZ(0rem);
    -ms-transform: scale(1.01) translateZ(0rem);
    -o-transform: scale(1.01) translateZ(0rem);
    transform: scale(1.01) translateZ(0rem);
}


/* J) Image Filter on Hover 
=================================*/

.filter-hook .filter-sepia {
    -webkit-filter: grayscale(100%) sepia(30%);
    -moz-filter: grayscale(100%) sepia(30%);
    -ms-filter: grayscale(100%) sepia(30%);
    -o-filter: grayscale(100%) sepia(30%);
    filter: grayscale(100%) sepia(30%);
    -webkit-transition: filter 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -moz-transition: filter 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -o-transition: filter 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    transition: filter 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}

.filter-hook:hover .filter-sepia {
    filter: grayscale(0%) sepia(0%);
}

.filter-hook .filter-grayscale {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: filter 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -moz-transition: filter 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -o-transition: filter 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    transition: filter 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}

.filter-hook:hover .filter-grayscale {
    filter: grayscale(0%) sepia(0%);
}



/* K) Opacity Hook 
===============================*/

.opacity-adjust-1 { opacity: 1; }
.opacity-adjust-09 { opacity: .9; }
.opacity-adjust-08 { opacity: .8; }
.opacity-adjust-07 { opacity: .7; }
.opacity-adjust-06 { opacity: .6; }
.opacity-adjust-05 { opacity: .5; }
.opacity-adjust-04 { opacity: .4; }
.opacity-adjust-03 { opacity: .3; }
.opacity-adjust-02 { opacity: .2; }
.opacity-adjust-01 { opacity: .1; }

/* Hover */
.opacity-hook-0 .opacity-scale-1,
.opacity-hook-0 .opacity-scale-09,
.opacity-hook-0 .opacity-scale-08,
.opacity-hook-0 .opacity-scale-07,
.opacity-hook-0 .opacity-scale-06,
.opacity-hook-0 .opacity-scale-05,
.opacity-hook-0 .opacity-scale-04,
.opacity-hook-0 .opacity-scale-03,
.opacity-hook-0 .opacity-scale-02,
.opacity-hook-0 .opacity-scale-01 {
    opacity: 0;
    -webkit-transition: opacity 200ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -moz-transition: opacity 200ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -o-transition: opacity 200ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
    transition: opacity 200ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
}

.opacity-hook-0:hover .opacity-scale-1 { opacity: 1; }
.opacity-hook-0:hover .opacity-scale-09 { opacity: .9; }
.opacity-hook-0:hover .opacity-scale-08 { opacity: .8; }
.opacity-hook-0:hover .opacity-scale-07 { opacity: .7; }
.opacity-hook-0:hover .opacity-scale-06 { opacity: .6; }
.opacity-hook-0:hover .opacity-scale-05 { opacity: .5; }
.opacity-hook-0:hover .opacity-scale-04 { opacity: .4; }
.opacity-hook-0:hover .opacity-scale-03 { opacity: .3; }
.opacity-hook-0:hover .opacity-scale-02 { opacity: .2; }
.opacity-hook-0:hover .opacity-scale-01 { opacity: .1; }

.opacity-hook-1 .opacity-scale-1,
.opacity-hook-1 .opacity-scale-09,
.opacity-hook-1 .opacity-scale-08,
.opacity-hook-1 .opacity-scale-07,
.opacity-hook-1 .opacity-scale-06,
.opacity-hook-1 .opacity-scale-05,
.opacity-hook-1 .opacity-scale-04,
.opacity-hook-1 .opacity-scale-03,
.opacity-hook-1 .opacity-scale-02,
.opacity-hook-1 .opacity-scale-01 {
    opacity: 1;
    -webkit-transition: opacity 200ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -moz-transition: opacity 200ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -o-transition: opacity 200ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
    transition: opacity 200ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
}

.opacity-hook-1:hover .opacity-scale-1 { opacity: 1; }
.opacity-hook-1:hover .opacity-scale-09 { opacity: .9; }
.opacity-hook-1:hover .opacity-scale-08 { opacity: .8; }
.opacity-hook-1:hover .opacity-scale-07 { opacity: .7; }
.opacity-hook-1:hover .opacity-scale-06 { opacity: .6; }
.opacity-hook-1:hover .opacity-scale-05 { opacity: .5; }
.opacity-hook-1:hover .opacity-scale-04 { opacity: .4; }
.opacity-hook-1:hover .opacity-scale-03 { opacity: .3; }
.opacity-hook-1:hover .opacity-scale-02 { opacity: .2; }
.opacity-hook-1:hover .opacity-scale-01 { opacity: .1; }


/* Desktop */
@media (min-width: 1021px) {

    .desktop-opacity-hook-0 .opacity-scale-1,
    .desktop-opacity-hook-0 .opacity-scale-09,
    .desktop-opacity-hook-0 .opacity-scale-08,
    .desktop-opacity-hook-0 .opacity-scale-07,
    .desktop-opacity-hook-0 .opacity-scale-06,
    .desktop-opacity-hook-0 .opacity-scale-05,
    .desktop-opacity-hook-0 .opacity-scale-04,
    .desktop-opacity-hook-0 .opacity-scale-03,
    .desktop-opacity-hook-0 .opacity-scale-02,
    .desktop-opacity-hook-0 .opacity-scale-01 {
        opacity: 0;
        -webkit-transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
        -moz-transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
        -o-transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
        transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    }

    .desktop-opacity-hook-0:hover .opacity-scale-1 { opacity: 1; }
    .desktop-opacity-hook-0:hover .opacity-scale-09 { opacity: .9; }
    .desktop-opacity-hook-0:hover .opacity-scale-08 { opacity: .8; }
    .desktop-opacity-hook-0:hover .opacity-scale-07 { opacity: .7; }
    .desktop-opacity-hook-0:hover .opacity-scale-06 { opacity: .6; }
    .desktop-opacity-hook-0:hover .opacity-scale-05 { opacity: .5; }
    .desktop-opacity-hook-0:hover .opacity-scale-04 { opacity: .4; }
    .desktop-opacity-hook-0:hover .opacity-scale-03 { opacity: .3; }
    .desktop-opacity-hook-0:hover .opacity-scale-02 { opacity: .2; }
    .desktop-opacity-hook-0:hover .opacity-scale-01 { opacity: .1; }

    .desktop-opacity-hook-1 .opacity-scale-1,
    .desktop-opacity-hook-1 .opacity-scale-09,
    .desktop-opacity-hook-1 .opacity-scale-08,
    .desktop-opacity-hook-1 .opacity-scale-07,
    .desktop-opacity-hook-1 .opacity-scale-06,
    .desktop-opacity-hook-1 .opacity-scale-05,
    .desktop-opacity-hook-1 .opacity-scale-04,
    .desktop-opacity-hook-1 .opacity-scale-03,
    .desktop-opacity-hook-1 .opacity-scale-02,
    .desktop-opacity-hook-1 .opacity-scale-01 {
        opacity: 1;
        -webkit-transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
        -moz-transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
        -o-transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
        transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    }

    .desktop-opacity-hook-1:hover .opacity-scale-1 { opacity: 1; }
    .desktop-opacity-hook-1:hover .opacity-scale-09 { opacity: .9; }
    .desktop-opacity-hook-1:hover .opacity-scale-08 { opacity: .8; }
    .desktop-opacity-hook-1:hover .opacity-scale-07 { opacity: .7; }
    .desktop-opacity-hook-1:hover .opacity-scale-06 { opacity: .6; }
    .desktop-opacity-hook-1:hover .opacity-scale-05 { opacity: .5; }
    .desktop-opacity-hook-1:hover .opacity-scale-04 { opacity: .4; }
    .desktop-opacity-hook-1:hover .opacity-scale-03 { opacity: .3; }
    .desktop-opacity-hook-1:hover .opacity-scale-02 { opacity: .2; }
    .desktop-opacity-hook-1:hover .opacity-scale-01 { opacity: .1; }

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1020px) {

    .tablet-opacity-hook-0 .opacity-scale-1,
    .tablet-opacity-hook-0 .opacity-scale-09,
    .tablet-opacity-hook-0 .opacity-scale-08,
    .tablet-opacity-hook-0 .opacity-scale-07,
    .tablet-opacity-hook-0 .opacity-scale-06,
    .tablet-opacity-hook-0 .opacity-scale-05,
    .tablet-opacity-hook-0 .opacity-scale-04,
    .tablet-opacity-hook-0 .opacity-scale-03,
    .tablet-opacity-hook-0 .opacity-scale-02,
    .tablet-opacity-hook-0 .opacity-scale-01 {
        opacity: 0;
        -webkit-transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
        -moz-transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
        -o-transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
        transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    }

    .tablet-opacity-hook-0:hover .opacity-scale-1 { opacity: 1; }
    .tablet-opacity-hook-0:hover .opacity-scale-09 { opacity: .9; }
    .tablet-opacity-hook-0:hover .opacity-scale-08 { opacity: .8; }
    .tablet-opacity-hook-0:hover .opacity-scale-07 { opacity: .7; }
    .tablet-opacity-hook-0:hover .opacity-scale-06 { opacity: .6; }
    .tablet-opacity-hook-0:hover .opacity-scale-05 { opacity: .5; }
    .tablet-opacity-hook-0:hover .opacity-scale-04 { opacity: .4; }
    .tablet-opacity-hook-0:hover .opacity-scale-03 { opacity: .3; }
    .tablet-opacity-hook-0:hover .opacity-scale-02 { opacity: .2; }
    .tablet-opacity-hook-0:hover .opacity-scale-01 { opacity: .1; }

    .tablet-opacity-hook-1 .opacity-scale-1,
    .tablet-opacity-hook-1 .opacity-scale-09,
    .tablet-opacity-hook-1 .opacity-scale-08,
    .tablet-opacity-hook-1 .opacity-scale-07,
    .tablet-opacity-hook-1 .opacity-scale-06,
    .tablet-opacity-hook-1 .opacity-scale-05,
    .tablet-opacity-hook-1 .opacity-scale-04,
    .tablet-opacity-hook-1 .opacity-scale-03,
    .tablet-opacity-hook-1 .opacity-scale-02,
    .tablet-opacity-hook-1 .opacity-scale-01 {
        opacity: 1;
        -webkit-transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
        -moz-transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
        -o-transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
        transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    }

    .tablet-opacity-hook-1:hover .opacity-scale-1 { opacity: 1; }
    .tablet-opacity-hook-1:hover .opacity-scale-09 { opacity: .9; }
    .tablet-opacity-hook-1:hover .opacity-scale-08 { opacity: .8; }
    .tablet-opacity-hook-1:hover .opacity-scale-07 { opacity: .7; }
    .tablet-opacity-hook-1:hover .opacity-scale-06 { opacity: .6; }
    .tablet-opacity-hook-1:hover .opacity-scale-05 { opacity: .5; }
    .tablet-opacity-hook-1:hover .opacity-scale-04 { opacity: .4; }
    .tablet-opacity-hook-1:hover .opacity-scale-03 { opacity: .3; }
    .tablet-opacity-hook-1:hover .opacity-scale-02 { opacity: .2; }
    .tablet-opacity-hook-1:hover .opacity-scale-01 { opacity: .1; }

}

/* Mobile */
@media (max-width: 767px) {

    .mobile-opacity-hook-0 .opacity-scale-1,
    .mobile-opacity-hook-0 .opacity-scale-09,
    .mobile-opacity-hook-0 .opacity-scale-08,
    .mobile-opacity-hook-0 .opacity-scale-07,
    .mobile-opacity-hook-0 .opacity-scale-06,
    .mobile-opacity-hook-0 .opacity-scale-05,
    .mobile-opacity-hook-0 .opacity-scale-04,
    .mobile-opacity-hook-0 .opacity-scale-03,
    .mobile-opacity-hook-0 .opacity-scale-02,
    .mobile-opacity-hook-0 .opacity-scale-01 {
        opacity: 0;
        -webkit-transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
        -moz-transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
        -o-transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
        transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    }

    .mobile-opacity-hook-0:hover .opacity-scale-1 { opacity: 1; }
    .mobile-opacity-hook-0:hover .opacity-scale-09 { opacity: .9; }
    .mobile-opacity-hook-0:hover .opacity-scale-08 { opacity: .8; }
    .mobile-opacity-hook-0:hover .opacity-scale-07 { opacity: .7; }
    .mobile-opacity-hook-0:hover .opacity-scale-06 { opacity: .6; }
    .mobile-opacity-hook-0:hover .opacity-scale-05 { opacity: .5; }
    .mobile-opacity-hook-0:hover .opacity-scale-04 { opacity: .4; }
    .mobile-opacity-hook-0:hover .opacity-scale-03 { opacity: .3; }
    .mobile-opacity-hook-0:hover .opacity-scale-02 { opacity: .2; }
    .mobile-opacity-hook-0:hover .opacity-scale-01 { opacity: .1; }

    .mobile-opacity-hook-1 .opacity-scale-1,
    .mobile-opacity-hook-1 .opacity-scale-09,
    .mobile-opacity-hook-1 .opacity-scale-08,
    .mobile-opacity-hook-1 .opacity-scale-07,
    .mobile-opacity-hook-1 .opacity-scale-06,
    .mobile-opacity-hook-1 .opacity-scale-05,
    .mobile-opacity-hook-1 .opacity-scale-04,
    .mobile-opacity-hook-1 .opacity-scale-03,
    .mobile-opacity-hook-1 .opacity-scale-02,
    .mobile-opacity-hook-1 .opacity-scale-01 {
        opacity: 1;
        -webkit-transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
        -moz-transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
        -o-transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
        transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    }

    .mobile-opacity-hook-1:hover .opacity-scale-1 { opacity: 1; }
    .mobile-opacity-hook-1:hover .opacity-scale-09 { opacity: .9; }
    .mobile-opacity-hook-1:hover .opacity-scale-08 { opacity: .8; }
    .mobile-opacity-hook-1:hover .opacity-scale-07 { opacity: .7; }
    .mobile-opacity-hook-1:hover .opacity-scale-06 { opacity: .6; }
    .mobile-opacity-hook-1:hover .opacity-scale-05 { opacity: .5; }
    .mobile-opacity-hook-1:hover .opacity-scale-04 { opacity: .4; }
    .mobile-opacity-hook-1:hover .opacity-scale-03 { opacity: .3; }
    .mobile-opacity-hook-1:hover .opacity-scale-02 { opacity: .2; }
    .mobile-opacity-hook-1:hover .opacity-scale-01 { opacity: .1; }

}


/* L) Underlines & Strike Throughs
=================================*/

/* Strike Left */
.strike-hook:hover .strike-right {
    -webkit-animation: 600ms cubic-bezier(.59,0.0,.67,1) 0s strike-right;
    -moz-animation: 600ms cubic-bezier(.59,0.0,.67,1) 0s strike-right;
    -o-animation: 600ms cubic-bezier(.59,0.0,.67,1) 0s strike-right;
    -ms-animation: 600ms cubic-bezier(.59,0.0,.67,1) 0s strike-right;;
    animation: 600ms cubic-bezier(.59,0.0,.67,1) 0s strike-right;
}

@keyframes strike-right {
    0% {
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
    50% {
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%);
    }
    50.1% {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}

/* Strike Right */
.strike-hook:hover .strike-left {
    -webkit-animation: 600ms cubic-bezier(.59,0.0,.67,1) 0s strike-left;
    -moz-animation: 600ms cubic-bezier(.59,0.0,.67,1) 0s strike-left;
    -ms-animation: 600ms cubic-bezier(.59,0.0,.67,1) 0s strike-left;;
    -o-animation: 600ms cubic-bezier(.59,0.0,.67,1) 0s strike-left;
    animation: 600ms cubic-bezier(.59,0.0,.67,1) 0s strike-left;
}

@keyframes strike-left {
    0% {
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
    50% {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    50.1% {
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}

.underline-dtu:after {
    content: " ";
    display: block;
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--accent-colour);
    opacity: 1;
    pointer-events: none;
    -webkit-transition: height 400ms cubic-bezier(0.77, 0, 0.175, 1) 0ms;
    -moz-transition: height 400ms cubic-bezier(0.77, 0, 0.175, 1) 0ms;
    -ms-transition: height 400ms cubic-bezier(0.77, 0, 0.175, 1) 0ms;
    -o-transition: height 400ms cubic-bezier(0.77, 0, 0.175, 1) 0ms;
    transition: height 400ms cubic-bezier(0.77, 0, 0.175, 1) 0ms;
    z-index: -1;
}

.underline-dtu:hover:after {
    height: 100%;
}

.underline-ltr:after {
    content: " ";
    display: block;
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: 0.063rem solid var(--primary-colour);
    opacity: 1;
    pointer-events: none;
    -webkit-transition: width 400ms cubic-bezier(0.77, 0, 0.175, 1) 0ms;
    -moz-transition: width 400ms cubic-bezier(0.77, 0, 0.175, 1) 0ms;
    -ms-transition: width 400ms cubic-bezier(0.77, 0, 0.175, 1) 0ms;
    -o-transition: width 400ms cubic-bezier(0.77, 0, 0.175, 1) 0ms;
    transition: width 400ms cubic-bezier(0.77, 0, 0.175, 1) 0ms;
}

.underline-ltr:hover:after {
    -webkit-animation: strike-loop 1240ms cubic-bezier(1, 0, 0, 1) 0ms 1 normal none running;
    -moz-animation: strike-loop 1240ms cubic-bezier(1, 0, 0, 1) 0ms 1 normal none running;
    -ms-animation: strike-loop 1240ms cubic-bezier(1, 0, 0, 1) 0ms 1 normal none running;
    -o-animation: strike-loop 1240ms cubic-bezier(1, 0, 0, 1) 0ms 1 normal none running;
    animation: strike-loop 1240ms cubic-bezier(1, 0, 0, 1) 0ms 1 normal none running;
}

@-webkit-keyframes strike-loop {
    0% { -webkit-transform: scale(1, 1); -webkit-transform-origin: 100% 50% 0; }
    50% { -webkit-transform: scale(0, 1); -webkit-transform-origin: 100% 50% 0; }
    50.1% { -webkit-transform: scale(0, 1); -webkit-transform-origin: 0 50% 0; }
    100% { -webkit-transform: scale(1, 1); -webkit-transform-origin: 0 50% 0; }
}

@-moz-keyframes strike-loop {
0% { -moz-transform: scale(1, 1); -moz-transform-origin: 100% 50% 0; }
    50% { -moz-transform: scale(0, 1); -moz-transform-origin: 100% 50% 0; }
    50.1% { -moz-transform: scale(0, 1); -moz-transform-origin: 0 50% 0; }
    100% { -moz-transform: scale(1, 1); -moz-transform-origin: 0 50% 0; }
}

@-ms-keyframes strike-loop {
    0% { -ms-transform: scale(1, 1); -ms-transform-origin: 100% 50% 0; }
    50% { -ms-transform: scale(0, 1); -ms-transform-origin: 100% 50% 0; }
    50.1% { -ms-transform: scale(0, 1); -ms-transform-origin: 0 50% 0; }
    100% { -ms-transform: scale(1, 1); -ms-transform-origin: 0 50% 0; }
}

@-o-keyframes strike-loop {
    0% { -o-transform: scale(1, 1); -o-transform-origin: 100% 50% 0; }
    50% { -o-transform: scale(0, 1); -o-transform-origin: 100% 50% 0; }
    50.1% { -o-transform: scale(0, 1); -o-transform-origin: 0 50% 0; }
    100% { -o-transform: scale(1, 1); -o-transform-origin: 0 50% 0; }
}

@keyframes strike-loop {
    0% { transform: scale(1, 1); transform-origin: 100% 50% 0; }
    50% { transform: scale(0, 1); transform-origin: 100% 50% 0; }
    50.1% { transform: scale(0, 1); transform-origin: 0 50% 0; }
    100% { transform: scale(1, 1); transform-origin: 0 50% 0; }
}


/* M) Signal Down
=================================*/

.signal-down {
    position: relative;
    width: 2px;
    height: 52px;
    margin: 0 auto;
}

.signal-down .signal-down-inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
}

html .signal-down .signal-down-inner::before {
    background-color: #FAFAF7;
    opacity: 0.6;
    transform: scale(1,1);
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -ms-transform: scale(1,1);
    -o-transform: scale(1,1);
    z-index: 1;
}

.signal-down .signal-down-inner::after, .signal-down .signal-down-inner::before {
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    transform-origin: top;
    transform: scale(1,0);
    -webkit-transform: scale(1,0);
    -moz-transform: scale(1,0);
    -ms-transform: scale(1,0);
    -o-transform: scale(1,0);

    transition: transform 1s cubic-bezier(.215,.61,.355,1);
    -webkit-transition: transform 1s cubic-bezier(.215,.61,.355,1);
    -moz-transition: transform 1s cubic-bezier(.215,.61,.355,1);
    -o-transition: transform 1s cubic-bezier(.215,.61,.355,1);
}

.signal-down .signal-down-inner::after {
    background: #727272;
    animation: signal-down 4s infinite;
    transform: scale(1,0);
    -webkit-transform: scale(1,0);
    -moz-transform: scale(1,0);
    -ms-transform: scale(1,0);
    -o-transform: scale(1,0);
    z-index: 2;
}

@keyframes signal-down {
    0% {
        transform-origin: top left;
        transform: scale(1,0);
        -webkit-transform: scale(1,0);
        -moz-transform: scale(1,0);
        -ms-transform: scale(1,0);
        -o-transform: scale(1,0);
        animation-timing-function: cubic-bezier(.50,.02,.50,1);
        -webkit-transition-timing-function: cubic-bezier(.50,.02,.50,1);
        -moz-transition-timing-function: cubic-bezier(.50,.02,.50,1);
        -o-transition-timing-function: cubic-bezier(.50,.02,.50,1); }
    25% {
        transform-origin: top left;
        transform: scale(1,1);
        -webkit-transform: scale(1,1);
        -moz-transform: scale(1,1);
        -ms-transform: scale(1,1);
        -o-transform: scale(1,1); }
    50% {
        transform-origin: bottom left;
        transform: scale(1,1);
        -webkit-transform: scale(1,1);
        -moz-transform: scale(1,1);
        -ms-transform: scale(1,1);
        -o-transform: scale(1,1);
        animation-timing-function: cubic-bezier(.50,.02,.50,1);
        -webkit-transition-timing-function: cubic-bezier(.50,.02,.50,1);
        -moz-transition-timing-function: cubic-bezier(.50,.02,.50,1);
        -o-transition-timing-function: cubic-bezier(.50,.02,.50,1); }
    75% {
        transform-origin: bottom left;
        transform: scale(1,0);
        -webkit-transform: scale(1,0);
        -moz-transform: scale(1,0);
        -ms-transform: scale(1,0);
        -o-transform: scale(1,0); }
    100% {
        transform-origin: bottom left;
        transform: scale(1,0);
        -webkit-transform: scale(1,0);
        -moz-transform: scale(1,0);
        -ms-transform: scale(1,0);
        -o-transform: scale(1,0); }
}