/*----------------------------------------------------------------------------*/
/* TABLE OF CONTENTS */
/*------------------------------------------------------------------------------
1.0 Global
2.0 Typography
3.0 Spacing
    3.1 Margin
        3.1.1 Margin X
        3.1.2 Margin Y
        3.1.3 Margin Top
        3.1.4 Margin Right
        3.1.5 Margin Bottom
        3.1.6 Margin Left
    3.2 Padding
        3.2.1 Padding X
        3.2.2 Padding Y
        3.2.3 Padding Top
        3.2.4 Padding Right
        3.2.5 Padding Bottom
        3.2.6 Padding Left
4.0 Display
5.0 Position
6.0 Float
------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------*/
/* 1.0 Global */
/*----------------------------------------------------------------------------*/

.ejs {
    /* Spacing */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;

    /* Gutter */
    --gutter: 30px;
}

.large-text .ejs {
    /* Spacing */
    --spacing-xs: calc(5px + 5px);
    --spacing-sm: calc(10px + 5px);
    --spacing-md: calc(15px + 5px);
    --spacing-lg: calc(20px + 5px);
    --spacing-xl: calc(30px + 5px);

    /* Gutter */
    --gutter: calc(30px + 5px);
}

.ejs * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ejs *:last-child {
    margin-bottom: 0 !important;
}

.ejs *:focus {
    outline: none;
}

.disable-transitions .ejs *,
.disable-transitions .ejs *::before,
.disable-transitions .ejs *::after {
    -webkit-transition: all 0s 0s !important;
    -moz-transition: all 0s 0s !important;
    -ms-transition: all 0s 0s !important;
    transition: all 0s 0s !important;
}

.ejs section::before {
    content: "";
    display: block;
    height: var(--spacing-xl);
    margin-top: calc(var(--spacing-xl) * -1);
}

.ejs ::-moz-selection {
    background: RGBA(var(--link), 0.99);
    color: RGB(var(--white));
}

.ejs ::selection {
    background: RGBA(var(--link), 0.99);
    color: RGB(var(--white));
}

.ejs ::-webkit-input-placeholder {
    color: RGB(var(--text-placeholder));
}

.ejs ::-moz-placeholder {
    color: RGB(var(--text-placeholder));
}

.ejs ::-ms-input-placeholder {
    color: RGB(var(--text-placeholder));
}

.ejs .fa {
    font: var(--icon-font);
}

@media (max-width: 600px) {
    .large-text .ejs {
        /* Spacing */
        --spacing-xs: calc(5px);
        --spacing-sm: calc(10px);
        --spacing-md: calc(15px);
        --spacing-lg: calc(20px);
        --spacing-xl: calc(30px);

        /* Gutter */
        --gutter: calc(30px);
    }
}

/*----------------------------------------------------------------------------*/
/* 2.0 Typography */
/*----------------------------------------------------------------------------*/

.ejs * {
    font-family: var(--secondary-font);
    font-size: 18px;
    line-height: 1.1;
}

.large-text .ejs * {
   font-size: 22px;
}

.ejs {
    color: RGB(var(--text));
}

.ejs p {
    line-height: 1.5;
    margin: var(--spacing-lg) 0;
}

.ejs p:first-child {
    margin-top: 0;
}

.ejs p,
.ejs label {
    color: RGB(var(--text));
}

.ejs label {
    display: inline-block;
    margin-bottom: var(--spacing-sm);
}

.ejs ul,
.ejs ol {
    padding-left: var(--spacing-lg);
}

.ejs li {
    color: RGB(var(--text));
    line-height: 1.5;
}

.ejs a {
    color: RGB(var(--link));
    text-decoration: none;
}

.ejs a:hover,
.ejs a:focus {
    color: RGB(var(--link-hov));
    text-decoration: underline;
}

.ejs small {
    color: RGB(var(--text));
    font-size: var(--type-size-sm);
}

.ejs code {
    font-family: var(--mono-font);
    font-size: var(--type-size-sm);
    font-weight: bold;
}

.ejs pre code {
    font-family: var(--mono-font);
    font-size: var(--type-size-sm);
    font-weight: bold;
}

@media (max-width: 600px) {
    .ejs * {
        font-family: var(--secondary-font);
    }

    .ejs * {
        font-size: 17px;
    }

    .large-text .ejs * {
       font-size: 18px;
    }
}

/*----------------------------------------------------------------------------*/
/* 3.0 Spacing */
/*----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------*/
/* 3.1 Margin */
/*----------------------------------------------------------------------------*/

.ejs .m-auto {
    margin: auto !important;
}

.ejs .m-0 {
    margin: 0 !important;
}

.ejs .m-xs {
    margin: var(--spacing-xs) !important;
}

.ejs .m-sm {
    margin: var(--spacing-sm) !important;
}

.ejs .m-md {
    margin: var(--spacing-md) !important;
}

.ejs .m-lg {
    margin: var(--spacing-lg) !important;
}

.ejs .m-xl {
    margin: var(--spacing-xl) !important;
}

/*----------------------------------------------------------------------------*/
/* 3.1.1 Margin X */
/*----------------------------------------------------------------------------*/

.ejs .mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.ejs .mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.ejs .mx-xs {
    margin-left: var(--spacing-xs) !important;
    margin-right: var(--spacing-xs) !important;
}

.ejs .mx-sm {
    margin-left: var(--spacing-sm) !important;
    margin-right: var(--spacing-sm) !important;
}

.ejs .mx-md {
    margin-left: var(--spacing-md) !important;
    margin-right: var(--spacing-md) !important;
}

.ejs .mx-lg {
    margin-left: var(--spacing-lg) !important;
    margin-right: var(--spacing-lg) !important;
}

.ejs .mx-xl {
    margin-left: var(--spacing-xl) !important;
    margin-right: var(--spacing-xl) !important;
}

/*----------------------------------------------------------------------------*/
/* 3.1.2 Margin Y */
/*----------------------------------------------------------------------------*/

.ejs .my-auto {
    margin-bottom: auto !important;
    margin-top: auto !important;
}

.ejs .my-0 {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.ejs .my-xs {
    margin-bottom: var(--spacing-xs) !important;
    margin-top: var(--spacing-xs) !important;
}

.ejs .my-sm {
    margin-bottom: var(--spacing-sm) !important;
    margin-top: var(--spacing-sm) !important;
}

.ejs .my-md {
    margin-bottom: var(--spacing-md) !important;
    margin-top: var(--spacing-md) !important;
}

.ejs .my-lg {
    margin-bottom: var(--spacing-lg) !important;
    margin-top: var(--spacing-lg) !important;
}

.ejs .my-xl {
    margin-bottom: var(--spacing-xl) !important;
    margin-top: var(--spacing-xl) !important;
}

/*----------------------------------------------------------------------------*/
/* 3.1.3 Margin Top */
/*----------------------------------------------------------------------------*/

.ejs .mt-auto {
    margin-top: auto !important;
}

.ejs .mt-0 {
    margin-top: 0 !important;
}

.ejs .mt-xs {
    margin-top: var(--spacing-xs) !important;
}

.ejs .mt-sm {
    margin-top: var(--spacing-sm) !important;
}

.ejs .mt-md {
    margin-top: var(--spacing-md) !important;
}

.ejs .mt-lg {
    margin-top: var(--spacing-lg) !important;
}

.ejs .mt-xl {
    margin-top: var(--spacing-xl) !important;
}

/*----------------------------------------------------------------------------*/
/* 3.1.4 Margin Right */
/*----------------------------------------------------------------------------*/

.ejs .mr-auto {
    margin-right: auto !important;
}

.ejs .mr-0 {
    margin-right: 0 !important;
}

.ejs .mr-xs {
    margin-right: var(--spacing-xs) !important;
}

.ejs .mr-sm {
    margin-right: var(--spacing-sm) !important;
}

.ejs .mr-md {
    margin-right: var(--spacing-md) !important;
}

.ejs .mr-lg {
    margin-right: var(--spacing-lg) !important;
}

.ejs .mr-xl {
    margin-right: var(--spacing-xl) !important;
}

/*----------------------------------------------------------------------------*/
/* 3.1.5 Margin Bottom */
/*----------------------------------------------------------------------------*/

.ejs .mb-auto {
    margin-bottom: auto !important;
}

.ejs .mb-0 {
    margin-bottom: 0 !important;
}

.ejs .mb-xs {
    margin-bottom: var(--spacing-xs) !important;
}

.ejs .mb-sm {
    margin-bottom: var(--spacing-sm) !important;
}

.ejs .mb-md {
    margin-bottom: var(--spacing-md) !important;
}

.ejs .mb-lg {
    margin-bottom: var(--spacing-lg) !important;
}

.ejs .mb-xl {
    margin-bottom: var(--spacing-xl) !important;
}

/*----------------------------------------------------------------------------*/
/* 3.1.6 Margin Left */
/*----------------------------------------------------------------------------*/

.ejs .ml-auto {
    margin-left: auto !important;
}

.ejs .ml-0 {
    margin-left: 0 !important;
}

.ejs .ml-xs {
    margin-left: var(--spacing-xs) !important;
}

.ejs .ml-sm {
    margin-left: var(--spacing-sm) !important;
}

.ejs .ml-md {
    margin-left: var(--spacing-md) !important;
}

.ejs .ml-lg {
    margin-left: var(--spacing-lg) !important;
}

.ejs .ml-xl {
    margin-left: var(--spacing-xl) !important;
}

/*----------------------------------------------------------------------------*/
/* 3.2 Padding */
/*----------------------------------------------------------------------------*/

.ejs .p-auto {
    padding: auto !important;
}

.ejs .p-0 {
    padding: 0 !important;
}

.ejs .p-xs {
    padding: var(--spacing-xs) !important;
}

.ejs .p-sm {
    padding: var(--spacing-sm) !important;
}

.ejs .p-md {
    padding: var(--spacing-md) !important;
}

.ejs .p-lg {
    padding: var(--spacing-lg) !important;
}

.ejs .p-xl {
    padding: var(--spacing-xl) !important;
}

/*----------------------------------------------------------------------------*/
/* 3.2.1 Padding X */
/*----------------------------------------------------------------------------*/

.ejs .px-auto {
    padding-left: auto !important;
    padding-right: auto !important;
}

.ejs .px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ejs .px-xs {
    padding-left: var(--spacing-xs) !important;
    padding-right: var(--spacing-xs) !important;
}

.ejs .px-sm {
    padding-left: var(--spacing-sm) !important;
    padding-right: var(--spacing-sm) !important;
}

.ejs .px-md {
    padding-left: var(--spacing-md) !important;
    padding-right: var(--spacing-md) !important;
}

.ejs .px-lg {
    padding-left: var(--spacing-lg) !important;
    padding-right: var(--spacing-lg) !important;
}

.ejs .px-xl {
    padding-left: var(--spacing-xl) !important;
    padding-right: var(--spacing-xl) !important;
}

/*----------------------------------------------------------------------------*/
/* 3.2.2 Padding Y */
/*----------------------------------------------------------------------------*/

.ejs .py-auto {
    padding-bottom: auto !important;
    padding-top: auto !important;
}

.ejs .py-0 {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

.ejs .py-xs {
    padding-bottom: var(--spacing-xs) !important;
    padding-top: var(--spacing-xs) !important;
}

.ejs .py-sm {
    padding-bottom: var(--spacing-sm) !important;
    padding-top: var(--spacing-sm) !important;
}

.ejs .py-md {
    padding-bottom: var(--spacing-md) !important;
    padding-top: var(--spacing-md) !important;
}

.ejs .py-lg {
    padding-bottom: var(--spacing-lg) !important;
    padding-top: var(--spacing-lg) !important;
}

.ejs .py-xl {
    padding-bottom: var(--spacing-xl) !important;
    padding-top: var(--spacing-xl) !important;
}

/*----------------------------------------------------------------------------*/
/* 3.2.3 Padding Top */
/*----------------------------------------------------------------------------*/

.ejs .pt-auto {
    padding-top: auto !important;
}

.ejs .pt-0 {
    padding-top: 0 !important;
}

.ejs .pt-xs {
    padding-top: var(--spacing-xs) !important;
}

.ejs .pt-sm {
    padding-top: var(--spacing-sm) !important;
}

.ejs .pt-md {
    padding-top: var(--spacing-md) !important;
}

.ejs .pt-lg {
    padding-top: var(--spacing-lg) !important;
}

.ejs .pt-xl {
    padding-top: var(--spacing-xl) !important;
}

/*----------------------------------------------------------------------------*/
/* 3.2.4 Padding Right */
/*----------------------------------------------------------------------------*/

.ejs .pr-auto {
    padding-right: auto !important;
}

.ejs .pr-0 {
    padding-right: 0 !important;
}

.ejs .pr-xs {
    padding-right: var(--spacing-xs) !important;
}

.ejs .pr-sm {
    padding-right: var(--spacing-sm) !important;
}

.ejs .pr-md {
    padding-right: var(--spacing-md) !important;
}

.ejs .pr-lg {
    padding-right: var(--spacing-lg) !important;
}

.ejs .pr-xl {
    padding-right: var(--spacing-xl) !important;
}

/*----------------------------------------------------------------------------*/
/* 3.2.5 Padding Bottom */
/*----------------------------------------------------------------------------*/

.ejs .pb-auto {
    padding-bottom: auto !important;
}

.ejs .pb-0 {
    padding-bottom: 0 !important;
}

.ejs .pb-xs {
    padding-bottom: var(--spacing-xs) !important;
}

.ejs .pb-sm {
    padding-bottom: var(--spacing-sm) !important;
}

.ejs .pb-md {
    padding-bottom: var(--spacing-md) !important;
}

.ejs .pb-lg {
    padding-bottom: var(--spacing-lg) !important;
}

.ejs .pb-xl {
    padding-bottom: var(--spacing-xl) !important;
}

/*----------------------------------------------------------------------------*/
/* 3.2.6 Padding Left */
/*----------------------------------------------------------------------------*/

.ejs .pl-auto {
    padding-left: auto !important;
}

.ejs .pl-0 {
    padding-left: 0 !important;
}

.ejs .pl-xs {
    padding-left: var(--spacing-xs) !important;
}

.ejs .pl-sm {
    padding-left: var(--spacing-sm) !important;
}

.ejs .pl-md {
    padding-left: var(--spacing-md) !important;
}

.ejs .pl-lg {
    padding-left: var(--spacing-lg) !important;
}

.ejs .pl-xl {
    padding-left: var(--spacing-xl) !important;
}

/*----------------------------------------------------------------------------*/
/* 4.0 Display */
/*----------------------------------------------------------------------------*/

.ejs .d-inline {
    display: inline !important;
}

.ejs .d-block {
    display: block !important;
}

.ejs .d-inline-block {
    display: inline-block !important;
}

.ejs .d-flex {
    display: -webkit-box !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
}

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

.ejs .justify-content-center {
    -webkit-justify-content: center;
    justify-content: center;
}

/*----------------------------------------------------------------------------*/
/* 5.0 Position */
/*----------------------------------------------------------------------------*/

.ejs .p-relative {
    position: relative !important;
}

.ejs .p-absolute {
    position: absolute !important;
}

.ejs .p-fixed {
    position: fixed !important;
}

/*----------------------------------------------------------------------------*/
/* 6.0 Float */
/*----------------------------------------------------------------------------*/

.float-left {
    float: left !important;
}

.ejs .float-right {
    float: right !important;
}

.ejs .clearfix::after {
    display: block;
    clear: both;
    content: "";
}