/* #Reset & Basics
    ================================================== */
    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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
    {
        margin: 0rem;
        padding: 0rem;
        font-size: 1.6rem;
        font: inherit;
        vertical-align: baseline;
    }

    table
    {
        border-collapse: collapse;
        border-spacing: 0;
    }

    img
    {
        vertical-align: middle;
    }

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





    /* #Basic Styles
    ================================================== */
    html
    {
        font-size: 62.5%;
    }

    body
    {
        -webkit-font-smoothing:	antialiased;
        -moz-osx-font-smoothing: grayscale;

        -webkit-text-size-adjust: 100%;
    }





    /* #Links
    ================================================== */
    a,
    a:visited
    {
        cursor: pointer;
        outline: 0;
        
        padding-bottom: 0.4rem;
        
        text-decoration: none;
        
        background-position: 0% 100%;
        background-repeat: no-repeat;
        background-size: 0% 1px;

        transition: all 0.25s ease;
    }

    a:hover
    {
        background-size: 100% 1px;
    }

    a.underline,
    .underline-all a
    {
        background-size: 100% 1px;
    }

    a.logo
    {
        padding: 0rem 0rem;
        
        background-image: none;
    }

    /* color settings */
    a,
    a:visited 			    { color: var(--theme-color-2-1); background-image: linear-gradient(var(--theme-color-2-4), var(--theme-color-2-4)); }
    a:hover                 { color: var(--theme-color-2-1); }





    /* #Typography
    ================================================== */
    h1, h2, h3, h4, h5
    {
        margin-bottom: 3.0rem;

        color: var(--theme-color-3-1);
        font-weight: 500;
        line-height: 3.0rem;
    }

    h1 a, h2 a, h3 a, h4 a, h5 a { font-weight: inherit; }
    h1                 { font-size: 2.5rem; }
    h2                 { font-size: 2.5rem; }
    h3                 { font-size: 2.0rem; }
    h4                 { font-size: 1.8rem; }
    h5                 { font-size: 1.6rem; }

    .subheader         { color: var(--theme-color-3-2); }

    p                  { margin: 0rem 0rem 3.0rem 0rem; }
    p img              { margin: 0rem; }

    em, i              { font-style: italic; }
    strong, b          { font-weight: 500; }
    underline, u       { text-decoration: underline; }
    line-through, t    { text-decoration: line-through; }

    small              { font-size: 86.6%; }
    medium             { font-size: 100%; }
    big                { font-size: 120%; }

    .color.theme       { color: var(--theme-color-2-2); }
    .color.blue        { color: var(--theme-color-blue-1); }
    .color.green       { color: var(--theme-color-green-1); }
    .color.yellow      { color: var(--theme-color-yellow-1); }
    .color.red         { color: var(--theme-color-red-1); }
    .color.grey        { color: var(--theme-color-grey-1); }

    hr                 { border-top: 2px solid var(--theme-color-3-3); border-width: 2px 0 0; clear: both; margin: 0rem 0rem 3.0rem 0rem; height: 0px; }





    /* #Table (ref: materializecss)
    ================================================== */
    table
    {
        display: table;
        width: 100%;
        margin: 0rem 0rem 3.0rem 0rem;
    }

    table > tbody                                       { overflow: auto; }

    table > tbody > tr                                  { transition: background-color 0.25s ease; }

    table.centered      thead tr th,
    table.centered      tbody tr td                     { text-align: center; }

    td, th
    {
        

        padding: 0.70rem 1.5rem;

        font-size: 1.6rem;
        line-height: 3.0rem;
        text-align: left;
        vertical-align: middle;
    }

    th 
    {
        font-weight: 500;
    }

    table > tbody::-webkit-scrollbar
    {
        width: 0.5rem;
    }

    /* color settings */
    table                                                           { background-color: var(--theme-color-1-2); color: var(--theme-color-1-1); }

    table.box-shadow                                                { box-shadow: var(--theme-box-shadow); }

    table.bordered      > thead > tr                                { border-bottom: 1px solid var(--theme-color-3-3); }
    table.bordered      > tbody > tr                                { border-bottom: 1px solid var(--theme-color-3-3); }

    table.striped       > tbody > tr:nth-child(odd)                 { background-color: var(--theme-color-4-1); }

    table.highlight     > tbody > tr:hover                          { background-color: var(--theme-color-4-1); }

    th                                                              { background-color: var(--theme-color-1-2); color: var(--theme-color-3-1); }

    table               > tbody::-webkit-scrollbar-track            { background-color: var(--theme-color-4-2); }
    table               > tbody::-webkit-scrollbar-thumb            { background-color: var(--theme-color-2-2); }

    /* clearing */
    table::after
    {
        clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
    }





    /* #Highlights
    ================================================== */
    .highlights
    {
        padding: 0.5rem 0.3rem;
    }

    .highlights.dotted 		{ border-bottom: 1px dotted; }
    .highlights.dashed 		{ border-bottom: 1px dashed; }
    .highlights.line 		{ border-bottom: 1px solid; }
    .highlights.double 		{ border-bottom: 3px double; }

    /* color settings */
    .highlights.theme 		{ background-color: var(--theme-color-2-2); color: var(--theme-color-1-2); }
    .highlights.yellow 		{ background-color: var(--theme-color-highlights-yellow); }





    /* #Lists
    ================================================== */
    ul, ol			{ margin: 0rem 0rem 3.0rem 3.0rem; padding: 0rem; }
    ul				{ list-style: disc; }
    ol				{ list-style: decimal; }

    ul.list-style ul, ul.list-style ol,
    ol.list-style ol, ol.list-style ul	{ margin: 0.75rem 1.5rem 0.75rem 1.5rem; }

    /* style settings */
    ul.list-style li, ol.list-style li
    {
        transition: padding 0.25s ease;
    }

    ul.list-style 				        li		    { padding: 0rem 0rem 0rem 1.5rem; }
    ol.list-style 				        li		    { padding: 0rem 0rem 0rem 1.5rem; }

    /* right-scroll */
    ul.list-style.right-scroll 			li:hover	{ padding: 0rem 0rem 0rem 2.0rem; }

    /* decimal */
    ol.list-style.decimal				{ list-style-type: decimal; }
    ol.list-style.alphabet				{ list-style-type: upper-latin; }
    ol.list-style.roman					{ list-style-type: upper-roman; }
    ol.list-style.lower-alphabet		{ list-style-type: lower-latin; }
    ol.list-style.lower-roman			{ list-style-type: lower-roman; }





    /* #dir nav
    ================================================== */
    .dir-nav 
    {
        position: relative;
        float: left;

        z-index: 99999;

        width: 100%;
        margin: 0rem 0rem 0rem 0rem;
    }

    .dir-nav ul 
    {
        position: relative;
        float: left;

        margin: 0rem;
        padding: 0rem;

        list-style: none;
    }

    .dir-nav ul li 
    {
        position: relative;
        float: left;

        margin: 0rem 0rem 0rem 0rem;
        padding: 0rem;

        transition: background-color 0.25s ease;
    }

    .dir-nav > ul > li > a 
    {
        display: inline-block;
        padding: 0rem 0rem;

        font-size: 1.5rem;
        line-height: 3.0rem;
    }

    .dir-nav > ul > li.home > a::before
    {
        content: '\f015';

        font-family: 'Font Awesome 5 Pro';
        font-size: 1.5rem;
        font-weight: 900;
        line-height: 3.0rem;
    }

    .dir-nav > ul > li.dir > a::before
    {
        content: '...';
    }

    .dir-nav > ul > li::after
    {
        content: '/';
        margin: 0rem 0.75rem;
    }

    .dir-nav > ul > li:last-child::after
    {
        content: '';
        margin: 0rem 0rem;
    }

    .dir-nav ul ul 
    {
        position: absolute;
        opacity: 0;
        visibility: hidden;

        min-width: 100%;

        top: 100%;
        left: 0;
        margin: 0.75rem 0rem 0rem 0rem;
        padding: 0rem;

        transition: all 0.25s ease;

        transform: translate3d(0, 15px, 0);
    }

    .dir-nav ul ul::before 
    {
        position: absolute;
        opacity: 0;
        content: "123";

        top: -0.75rem;
        width: 100%;
        height: 0.75rem;
    }

    .dir-nav li li 
    {
        float: none;

        width: 238px;
    }

    .dir-nav li li a 
    {
        display: block;
        padding: 0.75rem 1.5rem 0.75rem 3.5rem;

        font-size: 1.5rem;
        line-height: 3.0rem;

        text-indent: -2.05rem;
        
        background-image: none;
    }

    .dir-nav li li a::before
    {
        content: '\f0da';

        left: 1.5rem;
        padding-right: 1.5rem;

        font-family: 'Font Awesome 5 Pro';
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 3.0rem;
    }

    /*
    .dir-nav ul li a::after 
    {
        opacity: 0.5;
        content: '\f107';

        padding-left: 0.75rem;

        font-family: 'Font Awesome 5 Pro';
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 3.0rem;
    }

    .dir-nav ul li a:only-child::after 
    {
        content: '';
        padding: 0;
    }
    */

    .dir-nav ul li:hover > ul 
    {
        opacity: 1;
        visibility: visible;

        transform: translate3d(0, 0, 0);
    }

    /* color settings */
    .dir-nav         li,
    .dir-nav         li a,
    .dir-nav         li a:visited                    { color: var(--theme-color-3-2); }
    .dir-nav         li a:hover                      { color: var(--theme-color-2-1); }

    .dir-nav         ul ul                           { background-color: var(--theme-color-4-2); box-shadow: var(--theme-box-shadow); }

    .dir-nav         li li a,
    .dir-nav         li li a:visited                 { color: var(--theme-color-3-2); }
    .dir-nav         li li a:hover                   { color: var(--theme-color-2-1); }

    .dir-nav         > ul > li:hover > a             { color: var(--theme-color-2-1); }

    .dir-nav         li li:last-child 
    {
        border-bottom: none;
    }

    /* clearing */
    .dir-nav::after
    {
        clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
    }





    /* #Title Divider
    ================================================== */
    .title-divider
    {
        width: 100%;
        margin: 0rem 0rem 3.0rem 0rem;
    }

    .title-divider .title
    {
        display: inline-block;

        font-weight: 500;
    }

    .title-divider .title a
    {
        padding: 0rem 0rem;
        
        font-weight: inherit;
        
        background-image: none;
    }

    .title-divider h1.title { font-size: 2.5rem; margin-bottom: 2.25rem; }
    .title-divider h2.title { font-size: 2.5rem; margin-bottom: 2.25rem; }
    .title-divider h3.title { font-size: 2.0rem; margin-bottom: 2.0rem; }
    .title-divider h4.title { font-size: 2.0rem; margin-bottom: 2.0rem; }
    .title-divider h5.title { font-size: 2.0rem; margin-bottom: 2.0rem; }

    .title-divider .title span
    {
        display: inline-block;

        margin-right: 0.75rem;
    }

    .title-divider .title span.style
    {
        font-weight: 400;
    }

    .title-divider .title span:last-child
    {
        margin-right: 0rem;    
    }

    .title-divider .subtitle
    {
        position: relative;
        float: left;
        z-index: 10;

        margin-top: 1.40rem;

        font-size: 1.6rem;
        line-height: 3.0rem;
        font-weight: 500;
    }

    .title-divider .subtitle a
    {        
        font-size: 1.6rem;
        line-height: 3.0rem;
        font-weight: 500;
    }

    .title-divider .subtitle.left 	{ float: left; }
    .title-divider .subtitle.right 	{ float: right; }

    .title-divider .subtitle span
    {
        display: inline-block;
    }

    .title-divider .subtitle span::after
    {
        content: '/';
        margin: 0rem 0.75rem;
    }

    .title-divider .subtitle span:last-child::after
    {
        content: '';
        margin: 0rem 0rem;
    }

    .title-divider .subtitle span i
    {
        margin-right: 0.75rem;
    }

    .title-divider .subtitle a.top i.fa
    {
        margin-left: 0.75rem;
    }

    .title-divider .line
    {
        position: relative;

        width: 100%;
        height: 0;
    }

    /* color settings */
    .title-divider				.title	              { color: var(--theme-color-3-1); }

    .title-divider 				.title 	a,
    .title-divider 				.title 	a:visited     { color: var(--theme-color-3-1); }
    .title-divider 				.title 	a:hover       { color: var(--theme-color-2-1); }

    .title-divider 				.title	span.style    { opacity: 0.5; }

    .title-divider				.subtitle             { color: var(--theme-color-3-2); }

    .title-divider 				.subtitle 	a,
    .title-divider 				.subtitle 	a:visited { color: var(--theme-color-3-2); }
    .title-divider 				.subtitle 	a:hover   { color: var(--theme-color-2-1); }

    .title-divider 				.line                 { border-top: 1px solid var(--theme-color-3-3); }

    /* clearing */
    .title-divider::after
    {
        clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
    }





    /* #Forms
    ================================================== */
    input[type="text"],
    input[type="number"],
    input[type="password"],
    input[type="email"],
    textarea,
    select
    {
        position: relative;
        display: inline-block;
        outline: none;

        max-width: 100%;
        height: 4.5rem;

        padding: 0.70rem 1.5rem;
        margin: 0rem;

        font-family: 'Roboto', Arial, sans-serif;
        font-size: 1.6rem;

        border-radius: 0px;

        transition: all 0.25s ease;

        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    select
    {
        padding: 0rem 4.5rem 0rem 1.5rem;

        background-position:
        calc(100% - 1.5rem) calc(1.95rem + 0rem),
        calc(100% - 1.0rem) calc(1.95rem + 0rem),
        calc(100% - 3.0rem) 0.7rem;

        background-size:
        0.5rem 0.6rem,
        0.5rem 0.6rem,
        0.1rem 3.0rem;

        background-repeat: no-repeat;
    }

    textarea
    {
        min-height: 8.0rem;

        padding: 1.5rem 1.5rem;

        line-height: 3.0rem;        
    }

    input[type="checkbox"], input[type="radio"]
    {
        position: relative;
        display: inline-block;
        outline: none;

        width: 1.2rem;
        height: 1.2rem;

        margin: 0rem 1.5rem 0rem 0rem;

        border-radius: 0px;

        transition: all 0.25s ease;

        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    input[type="radio"]
    {
        border-radius: 30px;
    }

    /* size settings */
    input[type="text"].small,
    input[type="number"].small,
    input[type="password"].small,
    input[type="email"].small,
    textarea.small,
    select.small		{ height: 3.0rem;   padding: 0rem 1.5rem;   font-size: 1.6rem; }

    textarea.small
    {
        padding: 1.5rem 1.5rem;
        min-height: 6.0rem;
    }

    select.small 
    { 
        padding: 0rem 4.5rem 0rem 1.5rem;

        background-position:
        calc(100% - 1.5rem) calc(1.2rem + 0rem),
        calc(100% - 1.0rem) calc(1.2rem + 0rem),
        calc(100% - 3.0rem) 0.7rem;

        background-size:
        0.5rem 0.6rem,
        0.5rem 0.6rem,
        0.1rem 1.5rem;
    }

    input[type="text"].medium,
    input[type="number"].medium,
    input[type="password"].medium,
    input[type="email"].medium,
    textarea.medium,
    select.medium		{ height: 4.5rem;   padding: 0.75rem 1.5rem;   font-size: 1.6rem; }

    textarea.medium
    {
        padding: 1.5rem 1.5rem;
        min-height: 8.0rem;
    }

    select.medium 
    { 
        padding: 0rem 4.5rem 0rem 1.5rem;

        background-position:
        calc(100% - 1.5rem) calc(1.95rem + 0rem),
        calc(100% - 1.0rem) calc(1.95rem + 0rem),
        calc(100% - 3.0rem) 0.7rem;

        background-size:
        0.5rem 0.6rem,
        0.5rem 0.6rem,
        0.1rem 3.0rem;
    }

    input[type="text"].big,
    input[type="number"].big,
    input[type="password"].big,
    input[type="email"].big,
    textarea.big,
    select.big		    { height: 6.0rem;   padding: 1.5rem 2.0rem;   font-size: 1.8rem; }

    textarea.big
    {
        padding: 1.5rem 2.0rem;
        min-height: 12.0rem;
    }

    select.big 
    { 
        padding: 0rem 5.0rem 0rem 2.0rem;

        background-position:
        calc(100% - 1.5rem) calc(2.7rem + 0rem),
        calc(100% - 1.0rem) calc(2.7rem + 0rem),
        calc(100% - 3.0rem) 0.7rem;

        background-size:
        0.5rem 0.6rem,
        0.5rem 0.6rem,
        0.1rem 4.5rem;
    }

    /* color settings */
    input[type="text"],        input[type="number"],           input[type="password"],         input[type="email"],        textarea
    {
        color: var(--theme-color-1-1);
        background-color: var(--theme-color-1-2);
        border: 1px solid var(--theme-color-6-1);
    }

    input[type="text"]:focus,  input[type="number"]:focus,     input[type="password"]:focus,   input[type="email"]:focus,  textarea:focus
    {
        color: var(--theme-color-2-1);
        border: 1px solid var(--theme-color-2-1);
    }

    input::placeholder,
    textarea::placeholder
    {
        color: var(--theme-color-6-2);
    }

    select,
    select option
    {
        color: var(--theme-color-1-1);
        background-color: var(--theme-color-1-2);
        background-image:
        linear-gradient(45deg, transparent 50%, var(--theme-color-6-1) 50%),
        linear-gradient(135deg, var(--theme-color-6-1) 50%, transparent 50%),
        linear-gradient(to right, var(--theme-color-6-1), var(--theme-color-6-1));
        border: 1px solid var(--theme-color-6-1);
    }

    select:focus,
    select:focus option   
    { 
        color: var(--theme-color-2-1);
        background-image:
        linear-gradient(45deg, transparent 50%, var(--theme-color-2-1) 50%),
        linear-gradient(135deg, var(--theme-color-2-1) 50%, transparent 50%),
        linear-gradient(to right, var(--theme-color-2-1), var(--theme-color-2-1));
        border: 1px solid var(--theme-color-2-1);
    }

    select::placeholder
    {
        color: var(--theme-color-6-2);
    }

    input[type="checkbox"],         input[type="radio"]
    {
        color: var(--theme-color-1-1);
        background-color: var(--theme-color-1-2);
        border: 1px solid var(--theme-color-6-1);
    }

    input[type="checkbox"]:checked, input[type="radio"]:checked
    {
        color: var(--theme-color-2-1);
        background-color: var(--theme-color-2-2);
        border: 1px solid var(--theme-color-2-1);
    }





    /* #Buttons & Social Button Colors
    ================================================== */
    a.button
    {
        background-image: none;
    }

    .button
    {
        display: inline-block;
        cursor: pointer;

        padding: 0.75rem 1.5rem;
        margin: 0rem 0rem 0rem 0rem;

        font-size: 1.6rem;
        line-height: 3.0rem;
        text-align: center;
        vertical-align: middle;
    }

    .button.full-width
    {
        width: 100%;    
    }

    .button i.fa.padding-right
    {
        padding-right: 0.75rem;
    }

    /* colors */
    .button,
    .button:visited         { color: var(--theme-color-1-2); box-shadow: var(--theme-box-shadow); }
    .button:hover           { color: var(--theme-color-1-2); }

    .button                 { background-color: var(--theme-color-2-2); }
    .button:hover           { background-color: var(--theme-color-2-3); }
    .button:active          { background-color: var(--theme-color-2-4); }

    .button.blue            { background-color: var(--theme-color-blue-1); }
    .button.blue:hover      { background-color: var(--theme-color-blue-2); }
    .button.blue:active     { background-color: var(--theme-color-blue-3); }

    .button.green           { background-color: var(--theme-color-green-1); }
    .button.green:hover     { background-color: var(--theme-color-green-2); }
    .button.green:active    { background-color: var(--theme-color-green-3); }

    .button.yellow          { background-color: var(--theme-color-yellow-1); }
    .button.yellow:hover    { background-color: var(--theme-color-yellow-2); }
    .button.yellow:active   { background-color: var(--theme-color-yellow-3); }

    .button.red             { background-color: var(--theme-color-red-1); }
    .button.red:hover       { background-color: var(--theme-color-red-2); }
    .button.red:active      { background-color: var(--theme-color-red-3); }

    .button.grey            { background-color: var(--theme-color-grey-1); }
    .button.grey:hover      { background-color: var(--theme-color-grey-2); }
    .button.grey:active     { background-color: var(--theme-color-grey-3); }

    /* size settings */
    .button.small 			{ padding: 0rem 1.5rem;       font-size: 1.6rem; }
    .button.medium			{ padding: 0.70rem 1.5rem;    font-size: 1.6rem; }
    .button.big 			{ padding: 1.45rem 3.0rem;    font-size: 1.6rem; }





    /* #Page Numbers
    ================================================== */
    .pages 
    {
        width: 100%;

        font-size: 0rem;
        text-align: center;
    }

    .pages .info
    {
        margin: 0rem 0rem 3.0rem 0rem;

        font-size: 1.6rem;
        line-height: 3.0rem;
        text-align: center;
        vertical-align: middle;
    }

    .pages a
    {
        position: relative;
        display: inline-block;

        min-width: 4.5rem;

        padding: 0.75rem 0rem;
        margin: 0rem 0.375rem 3.0rem 0.375rem;

        font-size: 1.6rem;
        line-height: 3.0rem;
        text-align: center;
        vertical-align: middle;
    }

    .pages a.current
    {
        cursor: not-allowed;    
    }

    .pages a:first-child
    {
        margin-left: 0rem;
    }

    .pages a:last-child
    {
        margin-right: 0rem;
    }

    .pages a.dots
    {
        cursor: default;
    }

    /* colors */
    .pages .info             { color: var(--theme-color-3-2); }
    .pages a,
    .pages a:visited         { background-color: var(--theme-color-4-2); color: var(--theme-color-1-1); box-shadow: var(--theme-box-shadow); }
    .pages a:hover           { background-color: var(--theme-color-2-3); color: var(--theme-color-1-2); }
    .pages a:active          { background-color: var(--theme-color-2-4); }

    .pages a.dots            { background-color: var(--theme-color-4-2); color: var(--theme-color-1-1); }

    .pages a.current,
    .pages a.current:hover,
    .pages a.current:active  { background-color: var(--theme-color-2-2); color: var(--theme-color-1-2); }





    /* #Divider
    ================================================== */
    .divider
    {
        position: relative;

        width: 100%;
        margin: 0rem 0rem 3.0rem 0rem;
    }

    /* font awesome - <div class="divider color dotted fa fa-angle-double-down style"></div> */
    .divider.style
    {
        top: 0.70rem;

        text-align: center;
    }

    .divider.style::before
    {
        position: relative;
        top: -0.70rem;

        padding: 0rem 1.5rem;

        font: 900 1.6rem 'Font Awesome 5 Pro';
    }

    /* color settings */
    .divider				{ border-top: 1px solid var(--theme-color-3-3); color: var(--theme-color-3-3); }
    .divider.style::before  { background-color: var(--theme-color-1-2); }
    .divider.double			{ border-top-width: 2px; }
    .divider.space			{ border: 0px; }

    .divider.theme			{ border-color: var(--theme-color-2-1); color: var(--theme-color-2-1); }

    .divider.solid			{ border-top-style: solid; }
    .divider.dotted			{ border-top-style: dotted; }
    .divider.dashed			{ border-top-style: dashed; }

    /* clearing */
    .divider::after
    {
        clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
    }





    /* #Images
    ================================================== */
    img.responsive
    {
        max-width: 100%;
        height: auto;
    }

    img.left
    {
        float: left;
        max-width: 100%;
        margin: 0.75rem 1.5rem 0.75rem 0rem;
    }

    img.right
    {
        float: right;
        max-width: 100%;
        margin: 0.75rem 0rem 0.75rem 1.5rem;
    }

    img.responsive.left
    {
        max-width: 40%;
    }

    img.responsive.right
    {
        max-width: 40%;
    }





    /* #Back To Top
    * (activate in executor.js)
    ================================================== */
    .back-top
    {
        position: fixed;
        z-index: 100000;

        bottom: 3.0rem;
        right: 1.5rem;
    }

    .back-top a
    {
        display: inline-block;

        width: 4.5rem;
        height: 4.5rem;
        
        padding: 0rem 0rem;

        font-size: 1.6rem;
        line-height: 4.5rem;
        text-align: center;
    }

    /* color settings */
    .back-top 			a,
    .back-top           a:visited  { background-color: var(--theme-color-2-2); color: var(--theme-color-1-2); box-shadow: var(--theme-box-shadow); }
    .back-top           a:hover    { background-color: var(--theme-color-2-3); }
    .back-top           a:active   { background-color: var(--theme-color-2-4); }





    /* #Blockquotes
    ================================================== */
    blockquote
    {
        margin: 0rem 0rem 3.0rem 0rem;
        padding: 0rem;
    }

    blockquote, blockquote p
    {
        font-size: 1.6rem;
        line-height: 3.0rem;
        font-style: italic;
    }

    blockquote cite
    {
        display: block;
        margin: 1.5rem 0rem 0rem 0rem;

        font-size: 1.6rem;
        line-height: 3.0rem;
        font-weight: 500;
    }

    blockquote cite span
    {
        font-weight: 400;
    }

    blockquote cite::before
    {
        content: "\2014 \0020";
    }

    /* color settings */
    blockquote		 		                    { color: var(--theme-color-3-1); }

    blockquote				a,
    blockquote				a:visited           { color: var(--theme-color-2-1); }
    blockquote 				a:hover             { color: var(--theme-color-2-1); }

    blockquote 				cite				{ color: var(--theme-color-3-1); }

    blockquote 				cite a,
    blockquote 				cite a:visited      { color: var(--theme-color-2-1); }
    blockquote 				cite a:hover        { color: var(--theme-color-2-1); }

    blockquote 				cite span			{ color: var(--theme-color-3-2); }

    blockquote 				cite span a,
    blockquote 				cite span a:visited { color: var(--theme-color-2-1); }
    blockquote 				cite span a:hover   { color: var(--theme-color-2-1); }

    /* clearing */
    blockquote::after
    {
        clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
    }





    /* #Pullquotes
    ================================================== */
    .pullquote
    {
        float: left;

        width: 60%;
        margin: 1.5rem;
        padding: 1.5rem;

        font-size: 1.6rem;
        line-height: 3.0rem;
        font-style: italic;
    }

    /* color settings */
    .pullquote		 			{ color: var(--theme-color-3-1); box-shadow: var(--theme-box-shadow); }

    .pullquote		a,
    .pullquote		a:visited   { color: var(--theme-color-2-1); }
    .pullquote		a:hover     { color: var(--theme-color-2-1); }

    /* right settings */
    .pullquote.right
    {
        float: right;
    }

    /* clearing */
    .pullquote::after
    {
        clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
    }





    /* #Dropcaps
    ================================================== */
    .dropcaps
    {
        display: block;
        float: left;

        width: 4.5rem;
        height: 4.5rem;

        margin: 0rem 1.5rem 0rem 0rem;

        font-size: 1.6rem;
        line-height: 4.5rem;
        text-align: center;
    }

    /* color settings */
    .dropcaps		 	{ background-color: var(--theme-color-2-2); color: var(--theme-color-1-2); box-shadow: var(--theme-box-shadow); }





    /* #Tabs
    * (activate in executor.js)
    ================================================== */
    .tabs
    {
        width: 100%;
        margin: 0rem 0rem 3.0rem 0rem;
    }

    .tabs > ul
    {
        display: block;
        list-style: none;

        width: 100%;

        padding: 0rem;
        margin: 0rem;

        font-size: 0rem;
        text-align: left;
    }

    .tabs > ul > li
    {
        display: inline-block;

        margin: 0rem 0.75rem 1.5rem 0rem;

        text-align: left;
    }

    .tabs > ul > li:last-child
    {
        margin: 0rem 0rem 1.5rem 0rem;
    }

    .tabs > ul > li > a
    {
        display: block;

        padding: 0.70rem 1.5rem;

        font-size: 1.6rem;
        line-height: 3.0rem;
        font-weight: 500;
        vertical-align: middle;
    }

    .tabs > ul > li > a > span
    {
        margin-right: 0.75rem;
    }

    /* icon settings */
    .tabs > ul > li > a::before
    {
        padding-right: 1.5rem;

        font-family: 'Font Awesome 5 Pro';
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 3.0rem;
    }

    .tabs > ul > li > a::before            { content: "\f13a"; }
    .tabs > ul > li > a:hover::before      { content: "\f13a"; }
    .tabs > ul > li.active > a::before     { content: "\f056"; }

    .tabs > div
    {
        width: 100%;
    }

    .tabs > div > div
    {
        padding: 1.5rem;
    }

    /* color #tabs settings */
    .tabs 				> ul > li > a,
    .tabs 				> ul > li > a:visited           { background-color: var(--theme-color-4-1); color: var(--theme-color-3-1); }
    .tabs 				> ul > li > a:hover             { background-color: var(--theme-color-2-2); color: var(--theme-color-1-2); }
    .tabs 			    > ul > li.active > a            { background-color: var(--theme-color-2-2); color: var(--theme-color-1-2); }

    /* color #container settings */
    .tabs               > div                           { background-color: var(--theme-color-4-2); }

    /* right tabs settings */
    .tabs.right 		> ul  		        { text-align: right; }

    /* center tabs settings */
    .tabs.center 		> ul                { text-align: center; }

    /* responsive settings */
    @media handheld, only screen and (max-width: 750px)
    {
        .tabs           > ul > li           { display: block; margin: 0rem 0rem 1.5rem 0rem; }
    }

    /* clearing */
    .tabs::after
    {
        clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
    }





    /* #Toggle
    * (activate in executor.js)
    ================================================== */
    .toggle
    {
        width: 100%;
        margin: 0rem 0rem 3.0rem 0rem;
    }

    .toggle > ul
    {
        display: block;
        list-style: none;

        padding: 0rem;
        margin: 0rem;
    }

    .toggle > ul > li
    {
        margin: 0rem 0rem 1.5rem 0rem;
        
        transition: border 0.25s ease;
    }

    .toggle > ul > li:last-child
    {
        margin: 0rem 0rem 0rem 0rem;
    }

    .toggle > ul > li > a
    {
        display: block;

        padding: 1.45rem 1.5rem 1.45rem 4.5rem;
        
        text-indent: -3.0rem;

        font-size: 1.6rem;
        line-height: 3.0rem;
        font-weight: 500;
        vertical-align: middle;
    }

    /* icon settings */
    .toggle > ul > li > a::before
    {
        padding-right: 1.4rem;

        font-family: 'Font Awesome 5 Pro';
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 3.0rem;
    }

    .toggle > ul > li >         a::before               { content: "\f13a"; }
    .toggle > ul > li >         a:hover::before         { content: "\f13a"; }
    .toggle > ul > li.active >  a::before               { content: "\f056"; }

    /* toggle-content */
    .toggle > ul > li > div
    {
        overflow: auto;

        margin: 0rem 0rem 0rem 0rem;
        padding: 1.5rem 1.5rem 1.5rem 4.5rem;

        max-height: 55.0rem;
    }

    .toggle > ul > li > div p:last-child
    {
        margin: 0rem 0rem 0rem 0rem;
    }

    .toggle > ul > li > div::-webkit-scrollbar
    {
        width: 0.5rem;
    }

    /* color settings */
    .toggle > ul > li                                             { border: 0.1rem solid var(--theme-color-4-1); }
    .toggle > ul > li.active                                      { border: 0.1rem solid var(--theme-color-2-2); }

    .toggle	> ul > li           > a,
    .toggle	> ul > li           > a:visited                       { color: var(--theme-color-3-1); }
    .toggle	> ul > li           > a:hover                         { color: var(--theme-color-2-1); }
    .toggle	> ul > li.active    > a                               { color: var(--theme-color-2-1); }

    .toggle > ul > li > div                                       {  }

    .toggle > ul > li > div::-webkit-scrollbar-track              { background-color: var(--theme-color-4-2); }
    .toggle > ul > li > div::-webkit-scrollbar-thumb              { background-color: var(--theme-color-2-2); }

    /* clearing */
    .toggle::after
    {
        clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
    }





    /* #Sidebar
    ================================================== */
    .sidebar
    {
        width: 100%;
        margin: 0rem 0rem 3.0rem 0rem;
    }

    .sidebar ul
    {
        display: block;
        list-style: none;

        width: 100%;

        padding: 0rem;
        margin: 0rem;
    }

    .sidebar ul li
    {
        width: 100%;

        margin: 0rem 0rem 0.75rem 0rem;
    }

    .sidebar ul li:last-child
    {
        margin: 0rem 0rem 0rem 0rem;
    }

    .sidebar ul li h1,
    .sidebar ul li h2,
    .sidebar ul li h3,
    .sidebar ul li h4,
    .sidebar ul li h5
    {
        margin-bottom: 0rem;
    }

    .sidebar ul li a
    {
        display: block;

        padding: 0.70rem 1.5rem;

        font-size: 1.6rem;
        line-height: 3.0rem;
        font-weight: 500;
        vertical-align: middle;
    }

    /* icon settings */
    .sidebar ul li a::before
    {
        padding-right: 1.5rem;

        font-family: 'Font Awesome 5 Pro';
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 3.0rem;
    }

    .sidebar ul li a::before            { content: "\f10c"; }
    .sidebar ul li a:hover::before      { content: "\f192"; }
    .sidebar ul li.active a::before     { content: "\f192"; }

    /* color settings */
    .sidebar		 		ul li a,
    .sidebar		 		ul li a:visited     { background-color: var(--theme-color-4-1); color: var(--theme-color-1-1); }
    .sidebar 				ul li a:hover       { background-color: var(--theme-color-2-2); color: var(--theme-color-1-2); }

    /* clearing */
    .sidebar::after
    {
        clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
    }





    /* #Message Boxes
    * (activate in executor.js)
    ================================================== */
    .message-box
    {
        position: relative;
        float: left;

        width: 100%;

        padding: 0.75rem 3.0rem 0.75rem 1.5rem;
        margin: 0rem 0rem 3.0rem 0rem;

        font-size: 1.6rem;
        line-height: 3.0rem;
    }

    .message-box strong
    {
        padding: 0rem 0.75rem 0rem 0rem;

        text-transform: uppercase;
    }

    .message-box strong::before
    {
        display: inline-block;
        
        width: 3.0rem;
        
        padding-right: 1.5rem;

        font-family: 'Font Awesome 5 Pro';
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 3.0rem;
    }

    .message-box div
    {
        padding: 3.0rem 0rem 3.0rem 3.0rem;
    }

    .message-box            strong::before { content: "\f249"; }
    .message-box.info       strong::before { content: "\f05a"; }
    .message-box.note       strong::before { content: "\f4aa"; }
    .message-box.confirm    strong::before { content: "\f058"; }
    .message-box.error      strong::before { content: "\f06a"; }

    .message-box .closemsg
    {
        position: absolute;
        cursor: pointer;

        right: 1.5rem;
        top: 0.75rem;

        font-family: 'Font Awesome 5 Pro';
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 3.0rem;

        transition: opacity 0.25s ease;
    }

    .message-box .closemsg::before
    {
        content: "\f00d";
    }

    .message-box .closemsg		   { opacity: 0.3; }
    .message-box .closemsg:hover   { opacity: 1; }

    /* color settings */
    .message-box.info
    {
        background-color: var(--theme-color-info-2);
        color: var(--theme-color-info-1);
        border: 1px solid var(--theme-color-info-3);
    }

    .message-box.info		a,
    .message-box.info		a:visited       { color: var(--theme-color-1-1); }
    .message-box.info		a:hover         { color: var(--theme-color-info-4); }

    .message-box.note
    {
        background-color: var(--theme-color-note-2);
        color: var(--theme-color-note-1);
        border: 1px solid var(--theme-color-note-3);
    }

    .message-box.note		a,
    .message-box.note		a:visited       { color: var(--theme-color-1-1); }
    .message-box.note		a:hover         { color: var(--theme-color-note-4); }

    .message-box.confirm
    {
        background-color: var(--theme-color-confirm-2);
        color: var(--theme-color-confirm-1);
        border: 1px solid var(--theme-color-confirm-3);
    }

    .message-box.confirm	a,
    .message-box.confirm	a:visited       { color: var(--theme-color-1-1); }
    .message-box.confirm	a:hover         { color: var(--theme-color-confirm-4); }

    .message-box.error
    {
        background-color: var(--theme-color-error-2);
        color: var(--theme-color-error-1);
        border: 1px solid var(--theme-color-error-3);
    }

    .message-box.error		a,
    .message-box.error		a:visited       { color: var(--theme-color-1-1); }
    .message-box.error		a:hover         { color: var(--theme-color-error-4); }

    /* clearing */
    .message-box::after
    {
        clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
    }





    /* #Header contact
    ================================================== */
    .header-contact
    {
        margin: 0rem 0rem 0rem 0rem;
    }

    .header-contact ul
    {
        position: relative;
        float: left;

        width: 100%;

        margin: 0rem;
        padding: 0rem;

        list-style: none;
    }

    .header-contact ul li
    {
        position: relative;
        float: left;
        display: flex;

        margin: 0rem 4.5rem 0rem 0rem;
        padding: 0rem;
    }

    .header-contact ul li:last-child
    {
        margin: 0rem 0rem 0rem 0rem;
    }

    .header-contact ul li .icon
    {
        flex: inherit;

        width: 3.0rem;
        height: 3.0rem;

        margin: 0rem 0rem 0rem 0rem;
        padding: 0rem 0rem 0rem 0rem;

        font-size: 1.5rem;
        line-height: 3.0rem;
        text-align: center;

        transition: all 0.25s ease;
    }

    .header-contact ul li:last-child .icon
    {
        margin: 0rem 0rem 0rem 0rem;
    }

    .header-contact ul li .icon::before
    {
        content: '';

        font-family: 'Font Awesome 5 Pro';
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 3.0rem;
    }

    .header-contact ul li .icon a
    {
        position: relative;
        display: block;
        
        top: -100%;
        
        padding: 0rem 0rem;
        
        height: 100%;
        width: 100%;
        
        background-image: none;
    }

    .header-contact ul li:hover .icon
    {
        border-radius: 3.0rem;

        transform: rotate(360deg);
    }

    .header-contact ul li .icon.phone::before
    {
        content: '\f095';
    }

    .header-contact ul li .icon.fax::before
    {
        content: '\f1ac';
    }

    .header-contact ul li .icon.mobile::before
    {
        content: '\f10b';
    }

    .header-contact ul li .icon.whatsapp::before
    {
        content: '\f232';
        
        font-family: 'Font Awesome 5 Brands';
    }

    .header-contact ul li .icon.skype::before
    {
        content: '\f17e';
        
        font-family: 'Font Awesome 5 Brands';
    }

    .header-contact ul li .icon.email::before
    {
        content: '\f1d8';
    }

    .header-contact ul li .icon.address::before
    {
        content: '\f3c5';
    }

    .header-contact ul li .info
    {
        flex: 1;
    }

    .header-contact ul li .info span
    {
        display: block;

        margin: 0rem 0rem 0.75rem 1.5rem;
        padding: 0rem 0rem 0rem 0rem;

        font-size: 1.5rem;
        line-height: 3.0rem;
        font-weight: 400;

        transition: all 0.25s ease;
    }

    .header-contact ul li .info span a
    {        
        font-size: 1.5rem;
        line-height: 3.0rem;
        font-weight: 400;
    }

    .header-contact ul li .info.title span,
    .header-contact ul li .info.title span a
    {
        font-weight: 500;
    }

    /* color settings */
    .header-contact      ul li         .icon                                { background-color: var(--theme-color-1-2); color: var(--theme-color-1-1); box-shadow: var(--theme-box-shadow); }
    .header-contact      ul li:hover   .icon                                { color: var(--theme-color-2-1); }

    .header-contact      ul li         .info 	        span                { color: var(--theme-color-1-1); }
    .header-contact      ul li         .info 	        span a,
    .header-contact      ul li         .info 	        span a:visited      { color: var(--theme-color-1-1); }
    .header-contact      ul li         .info 	        span a:hover        { color: var(--theme-color-2-1); }

    .header-contact      ul li         .info.title 	    span                { color: var(--theme-color-3-1); }
    .header-contact      ul li         .info.title 	    span a,
    .header-contact      ul li         .info.title 	    span a:visited      { color: var(--theme-color-3-1); }
    .header-contact      ul li         .info.title 	    span a:hover        { color: var(--theme-color-2-1); }

    /* clearing */
    .header-contact::after
    {
        clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
    }





    /* #social share
    ================================================== */
    .social-share
    {
        width: 100%;

        margin: 0rem 0rem 0rem 0rem;
    }

    .social-share ul
    {
        position: relative;
        float: left;

        margin: 0rem;
        padding: 0rem;

        list-style: none;
    }

    .social-share ul li
    {
        position: relative;
        float: left;
        display: flex;

        margin: 0rem 1.5rem 1.5rem 0rem;
        padding: 0rem;
    }

    .social-share ul li:last-child
    {
        margin: 0rem 0rem 1.5rem 0rem;
    }

    .social-share ul li .icon
    {
        flex: inherit;

        width: 3.0rem;
        height: 3.0rem;

        margin: 0rem 0rem 0rem 0rem;
        padding: 0rem 0rem 0rem 0rem;

        font-size: 1.5rem;
        line-height: 3.0rem;
        text-align: center;

        transition: all 0.25s ease;
    }

    .social-share ul li .icon::before
    {
        content: '';

        font-family: 'Font Awesome 5 Brands';
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 3.0rem;
    }

    .social-share ul li .icon a
    {
        position: relative;
        display: block;
        
        top: -100%;
        
        padding: 0rem 0rem;
        
        height: 100%;
        width: 100%;
        
        background-image: none;
    }

    .social-share ul li:hover .icon
    {
        border-radius: 3.0rem;

        transform: rotate(360deg);
    }

    .social-share ul li .icon.facebook::before
    {
        content: '\f082';
    }

    .social-share ul li .icon.twitter::before
    {
        content: '\f099';
    }

    .social-share ul li .icon.pinterest::before
    {
        content: '\f231';
    }

    .social-share ul li .icon.linkedin::before
    {
        content: '\f08c';
    }

    .social-share ul li .icon.facebook-messenger::before
    {
        content: '\f39f';
    }

    .social-share ul li .icon.whatsapp::before
    {
        content: '\f232';
    }

    .social-share ul li .info
    {
        flex: 1;
    }

    .social-share ul li .info span
    {
        display: block;

        margin: 0rem 0rem 0rem 1.5rem;
        padding: 0rem 0rem 0rem 0rem;

        font-size: 1.5rem;
        font-weight: 400;
        line-height: 3.0rem;

        transition: all 0.25s ease;
    }

    .social-share ul li .info.title span,
    .social-share ul li .info.title span a
    {
        font-weight: 500;
    }

    /* color settings */
    .social-share      ul li         .icon                              { background-color: var(--theme-color-1-2); color: var(--theme-color-1-1); box-shadow: var(--theme-box-shadow); }
    .social-share      ul li:hover   .icon                              { color: var(--theme-color-2-1); }

    .social-share      ul li         .info 	        span                { color: var(--theme-color-1-1); }
    .social-share      ul li         .info 	        span a,
    .social-share      ul li         .info 	        span a:visited      { color: var(--theme-color-1-1); }
    .social-share      ul li         .info 	        span a:hover        { color: var(--theme-color-2-1); }

    .social-share      ul li         .info.title 	span                { color: var(--theme-color-3-1); }
    .social-share      ul li         .info.title 	span a,
    .social-share      ul li         .info.title 	span a:visited      { color: var(--theme-color-3-1); }
    .social-share      ul li         .info.title 	span a:hover        { color: var(--theme-color-2-1); }

    /* clearing */
    .social-share::after
    {
        clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
    }





    /* #footer top exchange
    ================================================== */
    .footer-exchange
    {
        margin: 0rem 0rem 0rem 0rem;
    }

    .footer-exchange ul
    {
        position: relative;
        float: left;

        width: 100%;

        margin: 0rem;
        padding: 0rem;

        list-style: none;
    }

    .footer-exchange ul li
    {
        position: relative;
        float: left;
        display: flex;

        margin: 0rem 1.5rem 1.5rem 0rem;
        padding: 0rem;
    }

    .footer-exchange ul li:last-child
    {
        margin: 0rem 0rem 1.5rem 0rem;
    }

    .footer-exchange ul li .icon
    {
        flex: inherit;

        width: 3.0rem;
        height: 3.0rem;

        margin: 0rem 0rem 0rem 0rem;
        padding: 0rem 0rem 0rem 0rem;

        font-size: 1.6rem;
        line-height: 3.0rem;
        text-align: center;

        transition: all 0.25s ease;
    }

    .footer-exchange ul li:last-child .icon
    {
        margin: 0rem 0rem 0rem 0rem;
    }

    .footer-exchange ul li .icon::before
    {
        content: '';

        font-family: 'Font Awesome 5 Pro';
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 3.0rem;
    }

    .footer-exchange ul li .icon a
    {
        position: relative;
        display: block;
        
        top: -100%;
        
        padding: 0rem 0rem;
        
        height: 100%;
        width: 100%;
        
        background-image: none;
    }

    .footer-exchange ul li:hover .icon
    {
        border-radius: 3.0rem;

        transform: rotate(360deg);
    }

    .footer-exchange ul li .icon.buy::before
    {
        content: '\f107';
    }

    .footer-exchange ul li .icon.sell::before
    {
        content: '\f106';
    }

    .footer-exchange ul li .icon.usd::before
    {
        content: '\f155';
    }

    .footer-exchange ul li .icon.eur::before
    {
        content: '\f153';
    }

    .footer-exchange ul li .icon.gbp::before
    {
        content: '\f154';
    }

    .footer-exchange ul li .info
    {
        flex: 1;
    }

    .footer-exchange ul li .info span
    {
        display: block;

        margin: 0rem 0rem 0rem 1.5rem;
        padding: 0rem 0rem 0rem 0rem;

        font-size: 1.6rem;
        line-height: 3.0rem;
        font-weight: 400;

        transition: all 0.25s ease;
    }

    .footer-exchange ul li .info.title span,
    .footer-exchange ul li .info.title span a
    {
        font-weight: 500;
    }

    /* color settings */
    .footer-exchange      ul li         .icon                               { background-color: var(--theme-color-1-2); color: var(--theme-color-1-1); box-shadow: var(--theme-box-shadow); }
    .footer-exchange      ul li:hover   .icon                               { color: var(--theme-color-2-1); }

    .footer-exchange      ul li         .info 	        span                { color: var(--theme-color-1-1); }
    .footer-exchange      ul li         .info 	        span a,
    .footer-exchange      ul li         .info 	        span a:visited      { color: var(--theme-color-1-1); }
    .footer-exchange      ul li         .info 	        span a:hover        { color: var(--theme-color-2-1); }

    .footer-exchange      ul li         .info.title 	span                { color: var(--theme-color-3-1); }
    .footer-exchange      ul li         .info.title 	span a,
    .footer-exchange      ul li         .info.title 	span a:visited      { color: var(--theme-color-3-1); }
    .footer-exchange      ul li         .info.title 	span a:hover        { color: var(--theme-color-2-1); }

    /* clearing */
    .footer-exchange::after
    {
        clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
    }





    /* #footer top social share
    ================================================== */
    .footer-social-share
    {
        width: 100%;

        margin: 0rem 0rem 0rem 0rem;
    }

    .footer-social-share ul
    {
        position: relative;
        float: left;

        margin: 0rem;
        padding: 0rem;

        list-style: none;
    }

    .footer-social-share ul li
    {
        position: relative;
        float: left;
        display: flex;

        margin: 0rem 1.5rem 1.5rem 0rem;
        padding: 0rem;
    }

    .footer-social-share ul li:last-child
    {
        margin: 0rem 0rem 1.5rem 0rem;
    }

    .footer-social-share ul li .icon
    {
        flex: inherit;

        width: 3.0rem;
        height: 3.0rem;

        margin: 0rem 0rem 0rem 0rem;
        padding: 0rem 0rem 0rem 0rem;

        font-size: 1.6rem;
        line-height: 3.0rem;
        text-align: center;

        transition: all 0.25s ease;
    }

    .footer-social-share ul li .icon::before
    {
        content: '';

        font-family: 'Font Awesome 5 Brands';
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 3.0rem;
    }

    .footer-social-share ul li .icon a
    {
        position: relative;
        display: block;
        
        top: -100%;
        
        padding: 0rem 0rem;
        
        height: 100%;
        width: 100%;
        
        background-image: none;
    }

    .footer-social-share ul li:hover .icon
    {
        border-radius: 3.0rem;

        transform: rotate(360deg);
    }

    .footer-social-share ul li .icon.facebook::before
    {
        content: '\f082';
    }

    .footer-social-share ul li .icon.twitter::before
    {
        content: '\f099';
    }

    .footer-social-share ul li .icon.pinterest::before
    {
        content: '\f231';
    }

    .footer-social-share ul li .icon.linkedin::before
    {
        content: '\f08c';
    }

    .footer-social-share ul li .icon.facebook-messenger::before
    {
        content: '\f39f';
    }

    .footer-social-share ul li .icon.whatsapp::before
    {
        content: '\f232';
    }

    .footer-social-share ul li .info
    {
        flex: 1;
    }

    .footer-social-share ul li .info span
    {
        display: block;

        margin: 0rem 0rem 0rem 1.5rem;
        padding: 0rem 0rem 0rem 0rem;

        font-size: 1.6rem;
        font-weight: 400;
        line-height: 3.0rem;

        transition: all 0.25s ease;
    }

    .footer-social-share ul li .info.title span,
    .footer-social-share ul li .info.title span a
    {
        font-weight: 500;
    }

    /* color settings */
    .footer-social-share      ul li         .icon                               { background-color: var(--theme-color-1-2); color: var(--theme-color-1-1); box-shadow: var(--theme-box-shadow); }
    .footer-social-share      ul li:hover   .icon                               { color: var(--theme-color-2-1); }

    .footer-social-share      ul li         .info 	        span                { color: var(--theme-color-1-1); }
    .footer-social-share      ul li         .info 	        span a,
    .footer-social-share      ul li         .info 	        span a:visited      { color: var(--theme-color-1-1); }
    .footer-social-share      ul li         .info 	        span a:hover        { color: var(--theme-color-2-1); }

    .footer-social-share      ul li         .info.title 	span                { color: var(--theme-color-3-1); }
    .footer-social-share      ul li         .info.title 	span a,
    .footer-social-share      ul li         .info.title 	span a:visited      { color: var(--theme-color-3-1); }
    .footer-social-share      ul li         .info.title 	span a:hover        { color: var(--theme-color-2-1); }

    /* clearing */
    .footer-social-share::after
    {
        clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
    }





    /* #footer contact
    ================================================== */
    .footer-contact
    {
        width: 100%;

        margin: 0rem 0rem 3.0rem 0rem;
    }

    .footer-contact ul
    {
        position: relative;
        float: left;

        width: 100%;

        margin: 0rem;
        padding: 0rem;

        list-style: none;
    }

    .footer-contact ul li
    {
        position: relative;
        float: left;
        display: flex;

        width: 100%;

        margin: 0rem;
        padding: 0rem;
    }

    .footer-contact ul li .icon
    {
        flex: inherit;

        width: 3.0rem;
        height: 3.0rem;

        margin: 0rem 0rem 0rem 0rem;
        padding: 0rem 0rem 0rem 0rem;

        font-size: 1.5rem;
        line-height: 3.0rem;
        text-align: center;

        transition: all 0.25s ease;
    }

    .footer-contact ul li .icon::before
    {
        content: '\f0c9';

        font-family: 'Font Awesome 5 Pro';
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 3.0rem;
    }

    .footer-contact ul li:hover .icon
    {
        border-radius: 3.0rem;

        transform: rotate(360deg);
    }

    .footer-contact ul li .icon.phone::before
    {
        content: '\f095';
    }

    .footer-contact ul li .icon.fax::before
    {
        content: '\f1ac';
    }

    .footer-contact ul li .icon.mobile::before
    {
        content: '\f10b';
    }

    .footer-contact ul li .icon.whatsapp::before
    {
        content: '\f232';
        
        font-family: 'Font Awesome 5 Brands';
    }

    .footer-contact ul li .icon.skype::before
    {
        content: '\f17e';
        
        font-family: 'Font Awesome 5 Brands';
    }

    .footer-contact ul li .icon.email::before
    {
        content: '\f1d8';
    }

    .footer-contact ul li .icon.address::before
    {
        content: '\f3c5';
    }

    .footer-contact ul li .info
    {
        flex: 1;
    }

    .footer-contact ul li .info span
    {
        display: block;

        margin: 0rem 0rem 0.75rem 1.5rem;
        padding: 0rem 0rem 0rem 0rem;

        transition: all 0.25s ease;
    }

    .footer-contact ul li .info span a
    {        
        font-size: 1.5rem;
        line-height: 3.0rem;
        font-weight: 400;
    }

    .footer-contact ul li .info.title span,
    .footer-contact ul li .info.title span a
    {
        font-weight: 500;
    }

    /* color settings */
    .footer-contact      ul li         .icon                             { background-color: var(--theme-color-1-2); color: var(--theme-color-1-1); box-shadow: var(--theme-box-shadow); }
    .footer-contact      ul li:hover   .icon                             { color: var(--theme-color-2-1); }

    .footer-contact      ul li         .info 	      span               { color: var(--theme-color-1-1); }
    .footer-contact      ul li         .info 	      span a,
    .footer-contact      ul li         .info 	      span a:visited     { color: var(--theme-color-1-1); }
    .footer-contact      ul li         .info 	      span a:hover       { color: var(--theme-color-2-1); }

    .footer-contact      ul li         .info.title 	  span               { color: var(--theme-color-3-1); }
    .footer-contact      ul li         .info.title 	  span a,
    .footer-contact      ul li         .info.title 	  span a:visited     { color: var(--theme-color-3-1); }
    .footer-contact      ul li         .info.title 	  span a:hover       { color: var(--theme-color-2-1); }

    /* clearing */
    .footer-contact::after
    {
        clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
    }





    /* #footer menu
    ================================================== */
    .footer-menu
    {
        width: 100%;

        margin: 0rem 0rem 3.0rem 0rem;
    }

    .footer-menu ul
    {
        position: relative;
        float: left;

        width: 100%;

        margin: 0rem;
        padding: 0rem;

        list-style: none;
    }

    .footer-menu ul li
    {
        position: relative;
        float: left;
        display: flex;

        width: 100%;

        margin: 0rem;
        padding: 0rem;
    }

    .footer-menu ul li .icon
    {
        flex: inherit;

        margin: 0rem 0rem 0rem 0rem;
        padding: 0rem 0rem 0rem 0rem;

        font-size: 1.5rem;
        line-height: 3.0rem;

        transition: all 0.25s ease;
    }

    .footer-menu ul li .icon::before
    {
        content: '\f0da';

        font-family: 'Font Awesome 5 Pro';
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 3.0rem;
    }

    .footer-menu ul li .icon.arrow::before
    {
        content: '\f0da';
    }

    .footer-menu ul li .info
    {
        flex: 1;
    }

    .footer-menu ul li .info span
    {
        display: block;

        margin: 0rem 0rem 0.75rem 1.5rem;
        padding: 0rem 0rem 0rem 0rem;
    }

    .footer-menu ul li .info span a
    {        
        font-size: 1.5rem;
        line-height: 3.0rem;
        font-weight: 400;
    }

    .footer-menu ul li .info span h1,
    .footer-menu ul li .info span h2,
    .footer-menu ul li .info span h3,
    .footer-menu ul li .info span h4,
    .footer-menu ul li .info span h5
    {
        margin-bottom: 0rem;

        font-size: 1.5rem;
    }

    .footer-menu ul li .info.title span,
    .footer-menu ul li .info.title span a
    {
        font-weight: 500;
    }

    /* color settings */
    .footer-menu    ul li           .icon                               { color: var(--theme-color-1-1); }
    .footer-menu    ul li:hover     .icon                               { color: var(--theme-color-2-1); }

    .footer-menu    ul li           .info           span h1,
    .footer-menu    ul li           .info           span h2,
    .footer-menu    ul li           .info           span h3,
    .footer-menu    ul li           .info           span h4,
    .footer-menu    ul li           .info           span h5             { color: var(--theme-color-1-1); }

    .footer-menu    ul li           .info 	        span                { color: var(--theme-color-1-1); }
    .footer-menu    ul li           .info 	        span a,
    .footer-menu    ul li           .info 	        span a:visited      { color: var(--theme-color-1-1); }
    .footer-menu    ul li           .info 	        span a:hover        { color: var(--theme-color-2-1); }

    .footer-menu    ul li           .info.title 	span                { color: var(--theme-color-3-1); }
    .footer-menu    ul li           .info.title 	span a,
    .footer-menu    ul li           .info.title 	span a:visited      { color: var(--theme-color-3-1); }
    .footer-menu    ul li           .info.title 	span a:hover        { color: var(--theme-color-2-1); }

    /* clearing */
    .footer-menu::after
    {
        clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
    }





    /* #footer social
    ================================================== */
    .footer-social
    {
        width: 100%;

        margin: 0rem 0rem 1.5rem 0rem;
    }

    .footer-social ul
    {
        position: relative;
        float: left;
        
        width: 100%;

        margin: 0rem;
        padding: 0rem;

        list-style: none;
    }

    .footer-social ul li
    {
        position: relative;
        float: left;
        display: flex;

        margin: 0rem 1.5rem 1.5rem 0rem;
        padding: 0rem;
    }

    .footer-social ul li:last-child
    {
        margin: 0rem 0rem 1.5rem 0rem;
    }

    .footer-social ul li .icon
    {
        flex: inherit;

        width: 4.5rem;
        height: 4.5rem;

        margin: 0rem 0rem 0rem 0rem;
        padding: 0rem 0rem 0rem 0rem;

        font-size: 1.5rem;
        line-height: 4.5rem;
        text-align: center;

        transition: all 0.25s ease;
    }

    .footer-social ul li .icon::before
    {
        content: '';

        font-family: 'Font Awesome 5 Brands';
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 4.5rem;
    }

    .footer-social ul li .icon a
    {
        position: relative;
        display: block;
        
        top: -100%;
        
        padding: 0rem 0rem;
        
        height: 100%;
        width: 100%;
        
        background-image: none;
    }

    .footer-social ul li:hover .icon
    {
        border-radius: 3.0rem;

        transform: rotate(360deg);
    }

    .footer-social ul li .icon.facebook::before
    {
        content: '\f082';
    }

    .footer-social ul li .icon.instagram::before
    {
        content: '\f16d';
    }

    .footer-social ul li .icon.twitter::before
    {
        content: '\f099';
    }

    .footer-social ul li .icon.youtube::before
    {
        content: '\f167';
    }

    .footer-social ul li .icon.pinterest::before
    {
        content: '\f231';
    }

    .footer-social ul li .info
    {
        flex: 1;
    }

    .footer-social ul li .info span
    {
        display: block;

        margin: 0rem 0rem 0rem 1.5rem;
        padding: 0rem 0rem 0rem 0rem;

        font-size: 1.5rem;
        line-height: 4.5rem;
        font-weight: 400;

        transition: all 0.25s ease;
    }

    .footer-social ul li .info.title span,
    .footer-social ul li .info.title span a
    {
        font-weight: 500;
    }

    /* color settings */
    .footer-social      ul li         .icon                             { background-color: var(--theme-color-1-2); color: var(--theme-color-1-1); box-shadow: var(--theme-box-shadow); }
    .footer-social      ul li:hover   .icon                             { color: var(--theme-color-2-1); }

    .footer-social      ul li         .info 	    span                { color: var(--theme-color-1-1); }
    .footer-social      ul li         .info 	    span a,
    .footer-social      ul li         .info 	    span a:visited      { color: var(--theme-color-1-1); }
    .footer-social      ul li         .info 	    span a:hover        { color: var(--theme-color-2-1); }

    .footer-social      ul li         .info.title 	span                { color: var(--theme-color-3-1); }
    .footer-social      ul li         .info.title 	span a,
    .footer-social      ul li         .info.title 	span a:visited      { color: var(--theme-color-3-1); }
    .footer-social      ul li         .info.title 	span a:hover        { color: var(--theme-color-2-1); }

    /* clearing */
    .footer-social::after
    {
        clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
    }





    /* #footer stats-visitor
    ================================================== */
    .footer-stats-visitor
    {
        width: 100%;

        margin: 0rem 0rem 3.0rem 0rem;

        font-size: 1.3rem;
        line-height: 3.0rem;
        font-weight: 400;
    }

    .footer-stats-visitor span
    {
        padding-right: 0.75rem;
    }

    .footer-stats-visitor span:last-child
    {
        padding-right: 0rem;
    }

    /* color settings */
    .footer-stats-visitor span                     { color: var(--theme-color-2-1); }





    /* #footer login
    ================================================== */
    .footer-login
    {
        position: relative;
        float: left;

        margin: 0rem 0.75rem 3.0rem 0rem;

        font-size: 1.3rem;
        line-height: 3.0rem;
        font-weight: 400;
    }

    .footer-login a::before
    {
        content: '\f2f6';

        font-family: 'Font Awesome 5 Pro';
        font-size: 1.3rem;
        font-weight: 900;
        line-height: 3.0rem;
    }

    /* color settings */
    .footer-login      a,
    .footer-login      a:visited                   { color: var(--theme-color-1-1); }
    .footer-login      a:hover                     { color: var(--theme-color-2-1); }





    /* #footer copyright
    ================================================== */
    .footer-copyright
    {
        position: relative;
        float: left;

        margin: 0rem 0rem 3.0rem 0rem;
        
        font-size: 1.3rem;
        line-height: 3.0rem;
        font-weight: 400;
    }

    .footer-copyright a
    {        
        font-size: 1.3rem;
        line-height: 3.0rem;
        font-weight: 400;
    }

    /* color settings */
    .footer-copyright      a.theme,
    .footer-copyright      a.theme:visited         { color: var(--theme-color-2-1); }

    .footer-copyright      a,
    .footer-copyright      a:visited               { color: var(--theme-color-1-1); }
    .footer-copyright      a:hover                 { color: var(--theme-color-2-1); }





    /* #Navigation
    ================================================== */
    .navigation 
    {
        position: relative;
        float: left;

        z-index: 100000;

        margin: 0rem 0rem 0rem 0rem;
    }

    .navigation ul 
    {
        position: relative;
        float: left;

        margin: 0rem;
        padding: 0rem;

        list-style: none;
    }

    .navigation ul li 
    {
        position: relative;
        float: left;

        margin: 0rem;
        padding: 0rem;

        transition: background-color 0.25s ease;
    }

    .navigation > ul > li
    {
        margin-right: 1.5rem;
    }

    .navigation > ul > li:last-child
    {
        margin-right: 0rem;
    }

    .navigation ul ul 
    {
        position: absolute;

        visibility: hidden;
        opacity: 0;

        top: 100%;
        left: 0;

        margin: 0.75rem 0rem 0rem 0rem;

        transition: all 0.25s ease;

        transform: translate3d(0, 15px, 0);
    }

    .navigation ul li:hover > ul 
    {
        visibility: visible;
        opacity: 1;

        transform: translate3d(0, 0, 0);
    }

    .navigation ul ul::before 
    {
        position: absolute;

        opacity: 0;
        content: "123";

        top: -0.75rem;

        width: 100%;
        height: 0.75rem;
    }

    .navigation li li 
    {
        float: none;

        width: 238px;
    }

    .navigation li li ul 
    {
        top: 0;
        left: 100%;

        margin: 0rem 0rem 0rem 0.75rem;
    }

    .navigation li li ul::after 
    {
        position: absolute;

        opacity: 0;
        content: "";

        left: -0.75rem;
        top: 0;

        width: 0.75rem;
        height: 100%;
    }

    .navigation > ul > li > a 
    {
        display: block;

        padding: 2.20rem 1.5rem;

        font-size: 1.6rem;
        font-weight: 500;
        line-height: 3.0rem;
        
        background-image: none;
    }

    .navigation ul li > a::after 
    {
        opacity: 0.5;
        content: '\f107';

        padding-left: 0.75rem;

        font-family: 'Font Awesome 5 Pro';
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 3.0rem;
    }

    .navigation > ul > li > a::after 
    {
        font-size: 1.6rem;
    }

    .navigation ul li > a:only-child::after 
    {
        content: '';

        padding: 0;
    }

    .navigation li li > a 
    {
        display: block;

        padding: 0.75rem 3.0rem 0.75rem 1.5rem;

        font-size: 1.5rem;
        line-height: 3.0rem;
        
        background-image: none;
    }

    .navigation li li > a::after 
    {
        position: absolute;

        content: '\f105';

        top: 0.75rem;
        right: 1.5rem;
    }

    .navigation i.flag-icon
    {
        margin-right: 0.75rem;
    }

    /* color settings */
    .navigation         ul > li > a,
    .navigation         ul > li > a:visited         { color: var(--theme-color-1-2); }
    .navigation         ul ul                       { background-color: var(--theme-color-1-2); box-shadow: var(--theme-box-shadow); }
    .navigation         li li                       { border-bottom: 1px solid var(--theme-color-3-3); }
    .navigation         li li > a,
    .navigation         li li > a:visited           { color: var(--theme-color-2-1); }
    .navigation         li li:hover                 { background-color: var(--theme-color-4-1); }
    .navigation         > ul > li:hover             { background-color: var(--theme-color-2-3); color: var(--theme-color-1-2); }
    .navigation         > ul > li:hover > a         { color: var(--theme-color-1-2); }

    .navigation         li li:last-child 
    {
        border-bottom: none;
    }

    /* clearing */
    .navigation::after
    {
        clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
    }





    /* #Navigation mobile button
    ================================================== */
    .navigation-button 
    {
        margin: 0rem 0rem 0rem 0rem;
    }

    .navigation-button ul 
    {
        display: block;

        margin: 0rem;
        padding: 0rem;

        list-style: none;
    }

    .navigation-button ul li 
    {
        margin: 0rem;
        padding: 0rem;
    }

    .navigation-button ul li a
    {
        display: block;

        padding: 0.70rem 1.5rem;

        font-size: 1.6rem;
        font-weight: 500;
        line-height: 3.0rem;
        
        background-image: none;
    }

    .navigation-button ul li a::before
    {
        content: '\f0c9';

        padding-right: 1.5rem;

        font-family: 'Font Awesome 5 Pro';
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 3.0rem;
    }

    .navigation-button ul li a.open::before 
    {
        content: '\f0c9';
    }

    .navigation-button ul li a.close::before 
    {
        content: '\f2d3';
    }

    /* color settings */
    .navigation-button         ul li a,
    .navigation-button         ul li a:visited      { color: var(--theme-color-1-2); }
    .navigation-button.active  ul li a,
    .navigation-button         ul li a:hover        { background-color: var(--theme-color-2-3); color: var(--theme-color-1-2); }
    .navigation-button         ul li a:active       { background-color: var(--theme-color-2-4); color: var(--theme-color-1-2); }

    /* clearing */
    .navigation-button::after
    {
        clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
    }





    /* #Navigation mobile content
    ================================================== */
    .navigation-mobile
    {
        z-index: 100000;

        width: 100%;

        margin: 0rem 0rem 0rem 0rem;
    }

    .navigation-mobile ul 
    {
        position: relative;
        float: left;

        width: 100%;

        margin: 0rem;
        padding: 0rem;

        list-style: none;
    }

    .navigation-mobile ul li
    {
        position: relative;
        float: left;

        width: 100%;

        margin: 0rem;
        padding: 0rem;
    }

    .navigation-mobile > ul > li
    {
        margin: 0.375rem 0rem;
    }

    .navigation-mobile > ul > li:first-child
    {
        margin-top: 1.5rem;
    }

    .navigation-mobile > ul > li:last-child
    {
        margin-bottom: 1.5rem;
    }

    .navigation-mobile li li
    {
        margin: 0.1rem 0rem 0rem 0rem;
    }

    .navigation-mobile > ul > li > ul > li:first-child
    {
        margin: 0.75rem 0rem 0rem 0rem;
    }

    .navigation-mobile ul li > a
    {
        display: block;

        margin: 0rem;
        padding: 0.75rem 4.5rem 0.75rem 1.5rem;

        font-size: 1.5rem;
        font-weight: 400;
        line-height: 3.0rem;
        
        background-image: none;
    }

    .navigation-mobile > ul > li > a
    {
        padding: 0.70rem 4.5rem 0.70rem 1.5rem;
        
        font-size: 1.6rem;
        font-weight: 500;
    }

    .navigation-mobile ul li > a::before
    {
        padding-right: 1.5rem;

        font-family: 'Font Awesome 5 Pro';
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 3.0rem;
    }

    .navigation-mobile > ul > li > a::before 
    {
        content: '\f0c9';
        
        font-size: 1.6rem;
    }

    .navigation-mobile li li > a::before 
    {
        content: '\f0da';
    }

    .navigation-mobile li li li > a::before
    {
        content: '\f105';
    }

    .navigation-mobile ul li > span
    {
        position: absolute;
        display: block;

        top: 0rem;
        right: 0rem;

        margin: 0rem;
        padding: 0rem;
    }

    .navigation-mobile ul li > span a
    {
        display: block;

        min-width: 4.5rem;

        padding: 0.70rem 1.5rem;
        margin: 0rem 0rem;

        font-size: 1.6rem;
        line-height: 3.0rem;
        text-align: center;
        vertical-align: middle;
        
        background-image: none;
    }

    .navigation-mobile ul li > span a::before
    {
        content: '\f13a';
        
        font-family: 'Font Awesome 5 Pro';
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 3.0rem;
    }

    .navigation-mobile ul li > span.plus a::before 
    {
        content: '\f13a';
    }

    .navigation-mobile ul li > span.minus a::before 
    {
        content: '\f056';
    }

    .navigation-mobile i.flag-icon
    {
        margin-right: 0.75rem;
    }

    .navigation-mobile ul li > a              { padding-left: 4.5rem;  text-indent: -2.8rem; }
    .navigation-mobile li li > a              { padding-left: 7.0rem;  text-indent: -2.05rem; }
    .navigation-mobile li li li > a           { padding-left: 9.5rem;  text-indent: -2.1rem; }
    .navigation-mobile li li li li > a        { padding-left: 12.0rem; text-indent: -2.07rem; }
    .navigation-mobile li li li li li > a     { padding-left: 14.5rem; text-indent: -2.07rem; }
    .navigation-mobile li li li li li li > a  { padding-left: 17.0rem; text-indent: -2.07rem; }

    /* color settings */
    .navigation-mobile         > ul > li >                a,
    .navigation-mobile         > ul > li >                a:visited       { background-color: var(--theme-color-2-3); color: var(--theme-color-1-2); box-shadow: var(--theme-box-shadow); }
    .navigation-mobile         > ul > li:hover >          a,
    .navigation-mobile         > ul > li.active >         a               { background-color: var(--theme-color-1-2); color: var(--theme-color-2-1); }

    .navigation-mobile         li li >                    a,
    .navigation-mobile         li li >                    a:visited       { background-color: var(--theme-color-2-2); color: var(--theme-color-1-2); }
    .navigation-mobile         li li:hover >              a,
    .navigation-mobile         li li.active >             a               { background-color: var(--theme-color-2-4); }

    .navigation-mobile         > ul > li >        span    a,
    .navigation-mobile         > ul > li >        span    a:visited       { background-color: var(--theme-color-2-3); color: var(--theme-color-1-2); border-left: 1px solid var(--theme-color-2-2); }
    .navigation-mobile         > ul > li:hover >  span    a,
    .navigation-mobile         > ul > li.active > span    a               { background-color: var(--theme-color-1-2); color: var(--theme-color-2-1); }
    .navigation-mobile         > ul > li >        span    a:hover         { background-color: var(--theme-color-2-3); color: var(--theme-color-1-2); }
    .navigation-mobile         > ul > li >        span    a:active        { background-color: var(--theme-color-2-4); color: var(--theme-color-1-2); }

    .navigation-mobile         li li >            span    a,
    .navigation-mobile         li li >            span    a:visited       { background-color: var(--theme-color-2-2); color: var(--theme-color-1-2); border-left: 1px solid var(--theme-color-2-2); }
    .navigation-mobile         li li:hover >      span    a,
    .navigation-mobile         li li.active >     span    a               { background-color: var(--theme-color-5-1); color: var(--theme-color-1-2); }
    .navigation-mobile         li li >            span    a:hover         { background-color: var(--theme-color-2-3); color: var(--theme-color-1-2); }
    .navigation-mobile         li li >            span    a:active        { background-color: var(--theme-color-2-4); color: var(--theme-color-1-2); }





    /* #Navigation side
    ================================================== */
    .navigation-side
    {
        position: relative;
        float: left;

        width: 100%;

        margin: 0rem 0rem 3.0rem 0rem;
    }

    .navigation-side ul 
    {
        position: relative;
        float: left;

        width: 100%;

        margin: 0rem;
        padding: 0rem;

        list-style: none;
    }

    .navigation-side ul li
    {
        position: relative;
        float: left;

        width: 100%;

        margin: 0rem;
        padding: 0rem;
    }

    .navigation-side > ul > li
    {
        margin: 0.75rem 0rem;
    }

    .navigation-side > ul > li:first-child
    {
        margin-top: 0rem;
    }

    .navigation-side > ul > li:last-child
    {
        margin-bottom: 0rem;
    }

    .navigation-side li li
    {
        margin: 0.1rem 0rem 0rem 0rem;
    }

    .navigation-side > ul > li > ul > li:first-child
    {
        margin: 1.5rem 0rem 0rem 0rem;
    }

    .navigation-side ul li > a
    {
        display: block;

        margin: 0rem;
        padding: 0.75rem 4.5rem 0.75rem 1.5rem;

        font-size: 1.5rem;
        line-height: 3.0rem;
        
        background-image: none;
    }

    .navigation-side > ul > li > a
    {
        padding: 1.45rem 4.5rem 1.45rem 1.5rem;
        
        font-size: 1.6rem;
    }

    .navigation-side ul li > a::before
    {
        padding-right: 1.5rem;

        font-family: 'Font Awesome 5 Pro';
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 3.0rem;
    }

    .navigation-side > ul > li > a::before 
    {
        content: '\f0c9';
        
        font-size: 1.6rem;
    }

    .navigation-side li li > a::before 
    {
        content: '\f0da';
    }

    .navigation-side li li li > a::before
    {
        content: '\f105';
    }

    .navigation-side li i.total
    {
        margin: 0rem;
        padding: 0rem 0rem 0rem 0rem;

        font-size: 1.4rem;
        line-height: 2.8rem;
        font-style: normal;
    }

    .navigation-side li i.total-icon
    {
        margin: 0rem;
        padding: 0rem 0.75rem 0rem 0rem;
    }

    .navigation-side ul li > span
    {
        position: absolute;
        display: block;

        top: 0rem;
        right: 0rem;

        margin: 0rem;
        padding: 0rem;
    }

    .navigation-side ul li > span a
    {
        display: block;

        min-width: 4.5rem;

        padding: 0.70rem 1.5rem;
        margin: 0rem 0rem;

        font-size: 1.6rem;
        line-height: 3.0rem;
        text-align: center;
        vertical-align: middle;
        
        background-image: none;
    }

    .navigation-side ul li > span a::before
    {
        content: '\f13a';
        font-family: 'Font Awesome 5 Pro';
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 3.0rem;
    }

    .navigation-side ul li > span.plus a::before 
    {
        content: '\f13a';
    }

    .navigation-side ul li > span.minus a::before 
    {
        content: '\f056';
    }

    .navigation-side > ul > li > span > a
    {
        padding: 1.45rem 1.5rem;
    }

    .navigation-side ul li > a              { padding-left: 4.5rem;  text-indent: -2.8rem;  font-weight: 500; }
    .navigation-side li li > a              { padding-left: 7.0rem;  text-indent: -2.3rem; }
    .navigation-side li li li > a           { padding-left: 9.5rem;  text-indent: -2.1rem;  font-weight: 400; }
    .navigation-side li li li li > a        { padding-left: 12.0rem; text-indent: -2.07rem; }
    .navigation-side li li li li li > a     { padding-left: 14.5rem; text-indent: -2.07rem; }
    .navigation-side li li li li li li > a  { padding-left: 17.0rem; text-indent: -2.07rem; }

    /* color settings */
    .navigation-side         > ul > li >                a,
    .navigation-side         > ul > li >                a:visited       { background-color: var(--theme-color-4-1); color: var(--theme-color-3-1); }
    .navigation-side         > ul > li:hover >          a,
    .navigation-side         > ul > li.active >         a               { background-color: var(--theme-color-2-2); color: var(--theme-color-1-2); }

    .navigation-side:hover   li li.active >             a               { background-color: var(--theme-color-4-2); color: var(--theme-color-1-1); }
    .navigation-side         li li >                    a,
    .navigation-side         li li >                    a:visited       { background-color: var(--theme-color-4-2); color: var(--theme-color-1-1); }
    .navigation-side         li li:hover >              a,
    .navigation-side         li li.active:hover >       a,
    .navigation-side         li li.active >             a               { background-color: var(--theme-color-4-1); color: var(--theme-color-1-1); }

    .navigation-side         li                         i.total         { color: var(--theme-color-2-1); }

    .navigation-side         > ul > li >                span    a,
    .navigation-side         > ul > li >                span    a:visited       { background-color: var(--theme-color-4-1); color: var(--theme-color-3-1); border-left: 1px solid var(--theme-color-1-2); }
    .navigation-side         > ul > li:hover >          span    a,
    .navigation-side         > ul > li.active >         span    a               { background-color: var(--theme-color-2-2); color: var(--theme-color-1-2); }
    .navigation-side         > ul > li >                span    a:hover         { background-color: var(--theme-color-2-3); color: var(--theme-color-1-2); }
    .navigation-side         > ul > li >                span    a:active        { background-color: var(--theme-color-2-4); color: var(--theme-color-1-2); }

    .navigation-side:hover   li li.active >             span    a               { background-color: var(--theme-color-4-2); color: var(--theme-color-1-1); }
    .navigation-side         li li >                    span    a,
    .navigation-side         li li >                    span    a:visited       { background-color: var(--theme-color-4-2); color: var(--theme-color-1-1); border-left: 1px solid var(--theme-color-1-2); }
    .navigation-side         li li:hover >              span    a,
    .navigation-side         li li.active:hover >       span    a,
    .navigation-side         li li.active >             span    a               { background-color: var(--theme-color-4-1); color: var(--theme-color-1-1); }

    .navigation-side         li li.active >             span    a:hover,
    .navigation-side         li li >                    span    a:hover         { background-color: var(--theme-color-side-1); color: var(--theme-color-1-1); }
    .navigation-side         li li.active >             span    a:active,
    .navigation-side         li li >                    span    a:active        { background-color: var(--theme-color-side-2); color: var(--theme-color-1-1); }





    /* #page contact message
    ================================================== */
    .contact-message
    {
        width: 100%;

        margin: 0rem 0rem 3.0rem 0rem;
        padding: 1.5rem;
    }

    .contact-message .results
    {
        position: relative;
        float: left;

        width: 100%;
    }

    .contact-message .results .message-box
    {
        margin: 0rem 0rem 1.5rem 0rem;
    }

    .contact-message .content
    {
        width: 100%;

        margin: 0rem 0rem 1.5rem 0rem;
    }

    .contact-message .content.human
    {
        display: none;
    }

    .contact-message .content input[type="text"],
    .contact-message .content input[type="number"],
    .contact-message .content textarea,
    .contact-message .content select
    {
        display: block;

        width: 100%;
    }

    .contact-message .content textarea
    {
        height: 15.0rem;
    }

    .contact-message .message-button
    {
        width: 100%;

        margin: 0rem 0rem 0rem 0rem;
    }

    .contact-message .message-button a.button
    {        
        width: 100%;
    }

    /* color settings */
    .contact-message                { box-shadow: var(--theme-box-shadow); }

    /* clearing */
    .contact-message::after
    {
        clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
    }





    /* #Latest content
    ================================================== */
    .information-property
    {
        position: relative;
        float: left;

        width: 100%;

        margin: 0rem 0rem 3.0rem 0rem;
        padding: 1.5rem;
    }

    .information-property ul
    {
        position: relative;
        float: left;

        width: 100%;

        margin: 0rem;
        padding: 0rem;

        list-style: none;
    }

    .information-property ul li
    {
        position: relative;
        float: left;

        width: 100%;

        margin: 0rem;
        padding: 0rem;
    }

    .information-property ul li .area
    {
        position: relative;
        float: left;

        width: 100%;

        margin: 0rem 0rem 0rem 0rem;
        padding: 0rem 0rem 1.5rem 0rem;

        font-size: 1.6rem;
        line-height: 3.0rem;
        font-weight: 500;
    }

    .information-property ul li .area a
    {        
        font-size: 1.6rem;
        line-height: 3.0rem;
        font-weight: 500;
    }

    .information-property ul li .area span
    {
        display: inline-block;
    }

    .information-property ul li .area span::after
    {
        content: '/';
        margin: 0rem 0.75rem;
    }

    .information-property ul li .area span:last-child::after
    {
        content: '';
        margin: 0rem 0rem;
    }

    .information-property ul li .title
    {
        position: relative;
        float: left;

        width: 50%;

        margin: 0rem 0rem 0rem 0rem;
        padding: 0rem 1.5rem 0rem 0rem;

        font-size: 1.6rem;
        line-height: 3.0rem;
        font-weight: 500;
    }

    .information-property ul li .info
    {
        position: relative;
        float: left;

        width: 50%;

        margin: 0rem 0rem 0rem 0rem;
        padding: 0rem 0rem 0rem 0rem;

        font-size: 1.6rem;
        line-height: 3.0rem;
        font-weight: 400;
    }

    .information-property .contact
    {
        position: relative;
        float: left;

        width: 100%;

        margin: 1.5rem 0rem 0rem 0rem;
    }

    /* color settings */
    .information-property                                    { background-color: var(--theme-color-4-2); }
    .information-property      ul li .area                   { color: var(--theme-color-3-2); }

    .information-property      ul li .area 	a,
    .information-property      ul li .area 	a:visited        { color: var(--theme-color-3-2); }
    .information-property      ul li .area 	a:hover          { color: var(--theme-color-2-1); }

    .information-property         li                         { border-bottom: 1px solid var(--theme-color-1-2); }
    .information-property      ul li .title                  { color: var(--theme-color-3-1); }
    .information-property      ul li .info.id                { color: var(--theme-color-4-3); }

    /* clearing */
    .information-property::after
    {
        clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
    }





    /* #property-info account
    ================================================== */
    .information-account
    {
        width: 100%;

        margin: 0rem 0rem 0rem 0rem;
    }

    .information-account ul
    {
        position: relative;
        float: left;

        width: 100%;

        margin: 0rem;
        padding: 0rem;

        list-style: none;
    }

    .information-account ul li
    {
        position: relative;
        float: left;
        display: flex;

        width: 100%;

        margin: 0rem;
        padding: 0rem;
    }

    .information-account ul li .icon
    {
        flex: inherit;

        width: 3.0rem;
        height: 3.0rem;

        margin: 0rem 0rem 0rem 0rem;
        padding: 0rem 0rem 0rem 0rem;

        font-size: 1.6rem;
        line-height: 3.0rem;
        text-align: center;

        transition: all 0.25s ease;
    }

    .information-account ul li .icon::before
    {
        content: '\f0c9';

        font-family: 'Font Awesome 5 Pro';
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 3.0rem;
    }

    .information-account ul li:hover .icon
    {
        border-radius: 3.0rem;

        transform: rotate(360deg);
    }

    .information-account ul li .icon.phone::before
    {
        content: '\f095';
    }

    .information-account ul li .icon.fax::before
    {
        content: '\f1ac';
    }

    .information-account ul li .icon.mobile::before
    {
        content: '\f10b';
    }

    .information-account ul li .icon.whatsapp::before
    {
        content: '\f232';
        
        font-family: 'Font Awesome 5 Brands';
    }

    .information-account ul li .icon.skype::before
    {
        content: '\f17e';
        
        font-family: 'Font Awesome 5 Brands';
    }

    .information-account ul li .icon.email::before
    {
        content: '\f1d8';
    }

    .information-account ul li .icon.address::before
    {
        content: '\f3c5';
    }

    .information-account ul li .info
    {
        flex: 1;
    }

    .information-account ul li .info span
    {
        display: block;

        margin: 0rem 0rem 0rem 1.5rem;
        padding: 0rem 0rem 0rem 0rem;

        font-size: 1.6rem;
        line-height: 3.0rem;
        font-weight: 400;

        transition: all 0.25s ease;
    }

    .information-account ul li .info span a
    {        
        font-size: 1.6rem;
        line-height: 3.0rem;
        font-weight: 400;
    }

    .information-account ul li .info.title span,
    .information-account ul li .info.title span a
    {
        font-weight: 500;
    }

    /* color settings */
    .information-account         li:first-child                                  { border-top: 1px solid var(--theme-color-4-2); }
    .information-account         li                                              { border-bottom: 1px solid var(--theme-color-4-2); }

    .information-account      ul li         .icon                                { background-color: var(--theme-color-4-2); color: var(--theme-color-1-1); box-shadow: var(--theme-box-shadow); }
    .information-account      ul li:hover   .icon                                { color: var(--theme-color-2-1); }

    .information-account      ul li         .info 	         span                { color: var(--theme-color-1-1); }
    .information-account      ul li         .info 	         span a,
    .information-account      ul li         .info 	         span a:visited      { color: var(--theme-color-1-1); }
    .information-account      ul li         .info 	         span a:hover        { color: var(--theme-color-2-1); }

    .information-account      ul li         .info.title 	 span                { color: var(--theme-color-3-1); }
    .information-account      ul li         .info.title 	 span a,
    .information-account      ul li         .info.title 	 span a:visited      { color: var(--theme-color-3-1); }
    .information-account      ul li         .info.title 	 span a:hover        { color: var(--theme-color-2-1); }

    /* clearing */
    .information-account::after
    {
        clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
    }





    /* #Side Filter
    ================================================== */
    .information-message
    {
        width: 100%;

        margin: 0rem 0rem 3.0rem 0rem;
        padding: 1.5rem;
    }

    .information-message .results
    {
        position: relative;
        float: left;

        width: 100%;
    }

    .information-message .results .message-box
    {
        margin: 0rem 0rem 1.5rem 0rem;
    }

    .information-message .content
    {
        width: 100%;

        margin: 0rem 0rem 1.5rem 0rem;
    }

    .information-message .content.human
    {
        display: none;
    }

    .information-message .content input[type="text"],
    .information-message .content input[type="number"],
    .information-message .content textarea,
    .information-message .content select
    {
        display: block;

        width: 100%;
    }

    .information-message .content textarea
    {
        height: 15.0rem;
    }

    .information-message .message-button
    {
        width: 100%;

        margin: 0rem 0rem 0rem 0rem;
    }

    .information-message .message-button a.button
    {        
        width: 100%;
    }

    /* color settings */
    .information-message                { box-shadow: var(--theme-box-shadow); }

    /* clearing */
    .information-message::after
    {
        clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
    }





    /* #exchange
    ================================================== */
    .information-exchange
    {
        width: 100%;

        margin: 0rem 0rem 0rem 0rem;
    }

    .information-exchange ul
    {
        position: relative;
        float: left;

        width: 100%;

        margin: 0rem;
        padding: 0rem;

        list-style: none;
    }

    .information-exchange ul li
    {
        position: relative;
        float: left;
        display: flex;

        width: 50%;

        margin: 0rem;
        padding: 0rem;
    }

    .information-exchange ul li .icon
    {
        flex: inherit;

        width: 3.0rem;
        height: 3.0rem;

        margin: 0rem 0rem 0rem 0rem;
        padding: 0rem 0rem 0rem 0rem;

        font-size: 1.6rem;
        line-height: 3.0rem;
        text-align: center;

        transition: all 0.25s ease;
    }

    .information-exchange ul li .icon::before
    {
        content: '';

        font-family: 'Font Awesome 5 Pro';
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 3.0rem;
    }

    .information-exchange ul li:hover .icon
    {
        border-radius: 3.0rem;

        transform: rotate(360deg);
    }

    .information-exchange ul li .icon.buy::before
    {
        content: '\f107';
    }

    .information-exchange ul li .icon.sell::before
    {
        content: '\f106';
    }

    .information-exchange ul li .icon.usd::before
    {
        content: '\f155';
    }

    .information-exchange ul li .icon.eur::before
    {
        content: '\f153';
    }

    .information-exchange ul li .icon.gbp::before
    {
        content: '\f154';
    }

    .information-exchange ul li .info
    {
        flex: 1;
    }

    .information-exchange ul li .info span
    {
        display: block;

        margin: 0rem 0rem 0rem 1.5rem;
        padding: 0rem 0rem 0rem 0rem;

        font-size: 1.6rem;
        line-height: 3.0rem;
        font-weight: 400;

        transition: all 0.25s ease;
    }

    .information-exchange ul li .info.title span,
    .information-exchange ul li .info.title span a
    {
        font-weight: 500;
    }

    /* color settings */
    .information-exchange         li:first-child                                 { border-top: 1px solid var(--theme-color-4-2); }
    .information-exchange         li:nth-child(2)                                { border-top: 1px solid var(--theme-color-4-2); }
    .information-exchange         li                                             { border-bottom: 1px solid var(--theme-color-4-2); }

    .information-exchange      ul li         .icon                               { background-color: var(--theme-color-4-2); color: var(--theme-color-1-1); box-shadow: var(--theme-box-shadow); }
    .information-exchange      ul li:hover   .icon                               { color: var(--theme-color-2-1); }

    .information-exchange      ul li         .info 	        span                 { color: var(--theme-color-1-1); }
    .information-exchange      ul li         .info 	        span a,
    .information-exchange      ul li         .info 	        span a:visited       { color: var(--theme-color-1-1); }
    .information-exchange      ul li         .info 	        span a:hover         { color: var(--theme-color-2-1); }

    .information-exchange      ul li         .info.title 	span                 { color: var(--theme-color-3-1); }
    .information-exchange      ul li         .info.title 	span a,
    .information-exchange      ul li         .info.title 	span a:visited       { color: var(--theme-color-3-1); }
    .information-exchange      ul li         .info.title 	span a:hover         { color: var(--theme-color-2-1); }

    /* clearing */
    .information-exchange::after
    {
        clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
    }





    /* #Side Filter
    ================================================== */
    .list-filter
    {
        position: relative;
        float: left;

        width: 100%;

        margin: 0rem 0rem 3.0rem 0rem;
    }

    .list-filter .filter-section
    {
        position: relative;
        float: left;

        width: 100%;

        margin: 0.1rem 0rem 0rem 0rem;
        padding: 0rem;
    }

    .list-filter .filter-section:first-child
    {
        margin: 0rem;
    }

    .list-filter .filter-section .section
    {
        position: relative;
        float: left;

        width: 100%;

        margin: 0rem;
        padding: 0rem;
    }

    .list-filter .filter-section .section > a
    {
        display: block;

        cursor: auto;

        margin: 0rem;
        padding: 1.5rem 4.5rem 1.5rem 1.5rem;

        font-size: 1.6rem;
        line-height: 3.0rem;
        font-weight: 500;
        
        background-image: none;
    }

    .list-filter .filter-section .section span
    {
        position: absolute;
        display: block;

        top: 0rem;
        right: 0rem;

        margin: 0rem;
        padding: 0rem;
    }

    .list-filter .filter-section .section > span a
    {
        display: block;

        visibility: hidden;
        opacity: 0;

        min-width: 4.5rem;

        padding: 1.45rem 1.5rem;
        margin: 0rem 0rem;

        font-size: 1.6rem;
        line-height: 3.0rem;
        text-align: center;
        vertical-align: middle;
        
        background-image: none;
    }

    .list-filter .filter-section:hover .section > span a
    {
        visibility: visible;
        opacity: 1;
    }

    .list-filter .filter-section .section > span a::before
    {
        content: '\f13a';
        font-family: 'Font Awesome 5 Pro';
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 3.0rem;
    }

    .list-filter .filter-section .section > span.plus a::before 
    {
        content: '\f13a';
    }

    .list-filter .filter-section .section > span.minus a::before 
    {
        content: '\f056';
    }

    .list-filter .filter-section .option
    {
        position: relative;
        float: left;

        overflow: hidden;

        width: 100%;

        margin: 0.75rem 0rem;
        padding: 0rem;
    }

    .list-filter .filter-section .option .content
    {
        overflow: auto;

        width: 100%;
        max-height: 30.0rem;

        margin: 0.75rem 0rem;
        padding: 0rem 1.5rem;
    }

    .list-filter .filter-section .option .content::-webkit-scrollbar
    {
        width: 0.5rem;
    }

    .list-filter .filter-section .option .content input[type="text"],
    .list-filter .filter-section .option .content input[type="number"],
    .list-filter .filter-section .option .content select,
    .list-filter .filter-section .option .content label
    {
        display: block;

        width: 100%;
    }

    .list-filter .filter-button
    {
        position: relative;
        float: left;

        width: 100%;

        margin: 1.5rem 0rem 0rem 0rem;
        padding: 1.5rem;
    }

    /* color settings */
    .list-filter    .filter-section                                                     { background-color: var(--theme-color-4-2); }
    .list-filter    .filter-section       .section >                    a,
    .list-filter    .filter-section       .section >                    a:visited       { background-color: var(--theme-color-4-2); color: var(--theme-color-3-1); }
    .list-filter    .filter-section:hover .section >                    a,
    .list-filter    .filter-section       .section:hover >              a               { background-color: var(--theme-color-4-1); color: var(--theme-color-3-1); }

    .list-filter    .filter-section       .section >              span  a,
    .list-filter    .filter-section       .section >              span  a:visited       { background-color: var(--theme-color-4-2); color: var(--theme-color-3-1); border-left: 1px solid var(--theme-color-1-2); }
    .list-filter    .filter-section:hover .section >              span  a               { background-color: var(--theme-color-4-1); color: var(--theme-color-3-1); }
    .list-filter    .filter-section       .section >              span  a:hover         { background-color: var(--theme-color-side-1); color: var(--theme-color-3-1); }
    .list-filter    .filter-section       .section >              span  a:active        { background-color: var(--theme-color-side-2); color: var(--theme-color-3-1); }

    .list-filter    .filter-section       .option .content label                        { color: var(--theme-color-1-1); }
    .list-filter    .filter-section       .option .content label:hover                  { color: var(--theme-color-2-1); }

    .list-filter    .filter-section       .option .content::-webkit-scrollbar-track     { background-color: var(--theme-color-4-2); }
    .list-filter    .filter-section       .option .content::-webkit-scrollbar-thumb     { background-color: var(--theme-color-2-2); }

    .list-filter    .filter-button                                                      { background-color: var(--theme-color-4-2); }




    /* #Content box
    ================================================== */
    .content-box 
    {
        position: relative;
        float: left;

        display: flex;
        flex-wrap: wrap;

        width: 100%;

        margin: 0rem 0rem 3.0rem 0rem;
        padding: 0rem;
    }

    .content-box.box-1.no-flex
    {
        display: block;
    }

    .content-box.box-1 .no-record-found
    {
        width: 100%;

        padding: 3.0rem 1.5rem;

        font-size: 1.6rem;
        line-height: 3.0rem;
        font-weight: 400;
        text-align: center;
    }

    .content-box.box-1 .box-left
    {
        position: relative;
        float: left;

        width: 100%;
    }

    .content-box.box-1 .box-right
    {
        position: relative;
        float: left;
        
        display: flex;
        flex-direction: column;

        width: 100%;
    }

    .content-box.box-1 .box-right .box-price
    {
        position: absolute;
        top: -4.4rem;
        right: 1.5rem;

        height: 3.0rem;

        vertical-align: middle;
    }

    .content-box.box-1.details .box-right .box-price
    {
        top: 1.5rem;
    }

    .content-box.box-1 .box-right .box-price span 
    {
        display: inline-block;

        height: 3.0rem;

        margin: 0rem 0rem;
        padding: 0rem 0.75rem;

        font-size: 1.5rem;
        line-height: 3.0rem;
        font-weight: 400;
    }

    .content-box.box-1 .box-image
    {
        position: relative;
        display: block;
        overflow: hidden;

        width: 100%;
        height: 100%;

        transform: translate3d(0, 0, 0);
    }

    .content-box.box-1 .box-image picture a
    {
        padding: 0rem 0rem;
        
        background-image: none;
    }

    .content-box.box-1 .box-image img
    {
        display: block;
        margin: auto;

        width: 100%;
        height: 100%;

        object-fit: cover;

        filter: brightness(100%);

        transform: scale(1.0);

        transition: filter 0.25s ease, transform 0.25s linear;
    }

    .content-box.box-1:hover .box-image img
    {
        filter: brightness(110%);

        transform: scale(1.2);
    }

    .content-box.box-1 .box-image .box-label
    {
        position: absolute;

        height: 3.0rem;

        vertical-align: middle;
    }

    .content-box.box-1 .box-image .box-label.auto-hide
    {
        visibility: hidden;
        opacity: 0;

        transition: opacity 0.25s ease;
    }

    .content-box.box-1:hover .box-image .box-label.auto-hide
    {
        visibility: visible;
        opacity: 1;
    }

    .content-box.box-1 .box-image .box-label.hover-hide
    {
        visibility: visible;
        opacity: 1;

        transition: opacity 0.25s ease;
    }

    .content-box.box-1:hover .box-image .box-label.hover-hide
    {
        visibility: hidden;
        opacity: 0;
    }

    .content-box.box-1 .box-image .box-label.top-left       { top: 1.5rem;      left: 1.5rem; }
    .content-box.box-1 .box-image .box-label.top-right      { top: 1.5rem;      right: 1.5rem; }
    .content-box.box-1 .box-image .box-label.bottom-left    { bottom: 1.5rem;   left: 1.5rem; }
    .content-box.box-1 .box-image .box-label.bottom-right   { bottom: 1.5rem;   right: 1.5rem; }

    .content-box.box-1 .box-image .box-label span 
    {
        display: inline-block;

        height: 3.0rem;

        margin-right: 0.75rem;
        padding: 0rem 0.75rem;

        font-size: 1.5rem;
        line-height: 3.0rem;
        font-weight: 400;
    }

    .content-box.box-1 .box-image .box-label span:last-child 
    {
        margin-right: 0rem;
    }

    .content-box.box-1 .box-map
    {
        display: block;

        width: 100%;
        height: auto;
    }

    .content-box.box-1 .box-title 
    {
        display: block; 
        margin: 1.5rem 1.5rem 1.5rem 1.5rem;

        max-width: 100%;
    }

    .content-box.box-1 .box-title a
    {        
        font-weight: 500;
    }

    .content-box.box-1 .box-title h1,
    .content-box.box-1 .box-title h2,
    .content-box.box-1 .box-title h3,
    .content-box.box-1 .box-title h4,
    .content-box.box-1 .box-title h5
    {
        margin-bottom: 0rem;
        
        font-size: 1.8rem;
    }

    .content-box.box-1 .box-title .subtitle 
    {
        display: block; 
        margin-top: 0.70rem;

        max-width: 100%;

        font-size: 1.6rem;
        line-height: 3.0rem;
        font-weight: 500;
    }

    .content-box.box-1 .box-title .subtitle span 
    {
        display: inline-block;
        margin-right: 1.5rem;
    }

    .content-box.box-1 .box-title .subtitle span:last-child 
    {
        margin-right: 0rem;
    }

    .content-box.box-1 .box-title .subtitle a
    {        
        font-size: 1.6rem;
        line-height: 3.0rem;
        font-weight: 500;
    }

    .content-box.box-1 .box-title .subtitle span::after
    {
        content: '/';
        margin: 0rem 0.75rem;
    }

    .content-box.box-1 .box-title .subtitle span:last-child::after
    {
        content: '';
        margin: 0rem 0rem;
    }

    .content-box.box-1 .box-title .subtitle span i
    {
        margin-right: 0.75rem;
    }

    .content-box.box-1 .box-desc 
    {
        display: block;
        margin: 1.5rem 1.5rem 1.5rem 1.5rem;

        max-width: 100%;

        font-size: 1.6rem;
        line-height: 3.0rem;
    }

    .content-box.box-1 .box-desc p:last-child
    {
        margin-bottom: 0rem;
    }

    .content-box.box-1 .box-link
    {
        display: flex; 
        flex: auto;
        
        margin: 1.5rem 1.5rem 1.5rem 1.5rem;

        max-width: 100%;

        font-size: 1.6rem;
        line-height: 3.0rem;
    }

    .content-box.box-1 .box-link span
    {
        align-self: flex-end;
        
        margin-right: 1.5rem;
        
        transition: all 0.25s ease;
    }

    .content-box.box-1 .box-link span:last-child
    {
        margin-right: 0rem;
    }

    .content-box.box-1 .box-link span::after
    {
        content: '\f30b';

        margin-left: 0.75rem;

        font-family: 'Font Awesome 5 Pro';
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 3.0rem;
        
        transition: all 0.25s ease;
    }

    .content-box.box-1 .box-link span:hover::after
    {
        margin-left: 1.25rem;
    }

    .content-box.box-1 .box-link span i
    {
        margin-right: 0.75rem;
    }

    .content-box.box-1 .box-link a
    {        
        font-size: 1.6rem;
        line-height: 3.0rem;
    }

    .content-box.box-1 .box-info
    {
        display: flex; 
        flex: auto;
        
        margin: 1.5rem 1.5rem 1.5rem 1.5rem;

        max-width: 100%;

        font-size: 1.6rem;
        line-height: 3.0rem;
    }

    .content-box.box-1 .box-info span
    {
        align-self: flex-end;
        
        margin-right: 1.5rem;
        
        transition: all 0.25s ease;
    }

    .content-box.box-1 .box-info span:last-child
    {
        margin-right: 0rem;
    }

    .content-box.box-1 .box-info span i
    {
        margin-right: 0.75rem;
    }

    .content-box.box-1 .box-button
    {
        display: block; 
        margin: 1.5rem 1.5rem 0rem 1.5rem;

        max-width: 100%;

        font-size: 0rem;
    }

    .content-box.box-1 .box-button a
    {
        margin-right: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .content-box.box-1 .box-button a:last-child
    {
        margin-right: 0rem;
    }

    .content-box.box-1.details  .box-left                  { width: 33.3333333333%; }
    .content-box.box-1.details  .box-right                 { width: 66.6666666667%; }

    /* color settings */
    .content-box.box-1                                                      { background-color: var(--theme-color-1-2); box-shadow: var(--theme-box-shadow); }

    .content-box.box-1                 .box-right .box-price        span    { background-color: var(--theme-color-4-3); color: var(--theme-color-1-2); box-shadow: var(--theme-box-shadow); }

    .content-box.box-1                 .box-image .box-label        span    { background-color: var(--theme-color-2-2); color: var(--theme-color-1-2); box-shadow: var(--theme-box-shadow); }
    .content-box.box-1                 .box-image .box-label.blue   span    { background-color: var(--theme-color-blue-1); }
    .content-box.box-1                 .box-image .box-label.green  span    { background-color: var(--theme-color-green-1); }
    .content-box.box-1                 .box-image .box-label.yellow span    { background-color: var(--theme-color-yellow-1); }
    .content-box.box-1                 .box-image .box-label.red    span    { background-color: var(--theme-color-red-1); }
    .content-box.box-1                 .box-image .box-label.grey   span    { background-color: var(--theme-color-grey-1); }

    .content-box.box-1                 .box-title h1,
    .content-box.box-1                 .box-title h2,
    .content-box.box-1                 .box-title h3,
    .content-box.box-1                 .box-title h4,
    .content-box.box-1                 .box-title h5                        { color: var(--theme-color-3-1); }

    .content-box.box-1                 .box-title a,
    .content-box.box-1                 .box-title a:visited                 { color: var(--theme-color-3-1); }
    .content-box.box-1                 .box-title a:hover                   { color: var(--theme-color-2-1); }

    .content-box.box-1                 .box-title .subtitle                 { color: var(--theme-color-3-2); }
    .content-box.box-1                 .box-title .subtitle a,
    .content-box.box-1                 .box-title .subtitle a:visited       { color: var(--theme-color-3-2); }
    .content-box.box-1                 .box-title .subtitle a:hover         { color: var(--theme-color-2-1); }

    .content-box.box-1                 .box-link span::after                { color: var(--theme-color-3-2); }
    .content-box.box-1                 .box-link span:hover::after          { color: var(--theme-color-2-1); }

    .content-box.box-1                 .box-link                            { color: var(--theme-color-3-2); }
    .content-box.box-1                 .box-link a,
    .content-box.box-1                 .box-link a:visited                  { color: var(--theme-color-3-2); }
    .content-box.box-1                 .box-link a:hover                    { color: var(--theme-color-2-1); }

    .content-box.box-1                 .box-info                            { color: var(--theme-color-1-1); }

    /* responsive settings */
    @media handheld, only screen and (max-width: 750px)
    {
        .content-box.box-1.details  .box-left                  { width: 100%; }
        .content-box.box-1.details  .box-right                 { width: 100%; }
        .content-box.box-1.details  .box-right .box-price      { top: -4.4rem; }
    }

    /* clearing */
    .content-box::after
    {
        clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
    }





    /* #Feature content
    ================================================== */
    .feature 
    {
        position: relative;
        float: left;

        width: 100%;

        margin: 3.0rem 0rem 3.0rem 0rem;
        padding: 0rem;
    }

    .feature .feature-image
    {
        position: relative;
        display: inline-block;
        
        max-width: 100%;
        
        margin: 0rem 0rem 0rem 0rem;
    }

    .feature .feature-image img
    {
        width: auto;
        height: 7.0rem;
    }

    .feature .feature-image:before
    {
        content: "";
        position: absolute;
        bottom: 0rem;
        left: 0.4rem;
        
        z-index: -1;
        
        width: 8.0rem;
        height: 8.0rem;
        
        border-radius: 1.0rem;
        
        transform: rotate(22deg);
        
        transition: all 0.25s ease;
    }

    .feature:hover .feature-image:before
    {        
        border-radius: 5.0rem;
        
        transform: rotate(360deg);
    }

    .feature .feature-title 
    {
        display: block; 
        margin: 3.0rem 0rem 3.0rem 0rem;

        max-width: 100%;
    }

    .feature .feature-title a
    {        
        font-weight: 500;
    }

    .feature .feature-title h1,
    .feature .feature-title h2,
    .feature .feature-title h3,
    .feature .feature-title h4,
    .feature .feature-title h5
    {
        margin-bottom: 0rem;
        
        font-size: 2.0rem;
    }

    .feature .feature-desc 
    {
        display: block;
        margin: 3.0rem 0rem 3.0rem 0rem;

        max-width: 100%;

        font-size: 1.6rem;
        line-height: 3.0rem;
    }

    .feature .feature-desc p:last-child
    {
        margin-bottom: 0rem;
    }

    .feature .feature-link
    {
        display: block;
        
        margin: 3.0rem 0rem 3.0rem 0rem;

        max-width: 100%;

        font-size: 1.6rem;
        line-height: 3.0rem;
    }

    .feature .feature-link span
    {        
        margin-right: 1.5rem;
        
        transition: all 0.25s ease;
    }

    .feature .feature-link span:last-child
    {
        margin-right: 0rem;
    }

    .feature .feature-link span::after
    {
        content: '\f30b';

        margin-left: 0.75rem;

        font-family: 'Font Awesome 5 Pro';
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 3.0rem;
        
        transition: all 0.25s ease;
    }

    .feature .feature-link span:hover::after
    {
        margin-left: 1.25rem;
    }

    .feature .feature-link span i
    {
        margin-right: 0.75rem;
    }

    .feature .feature-link a
    {        
        font-size: 1.6rem;
        line-height: 3.0rem;
    }

    /* color settings */
    .feature                 .feature-image:before                    { background-color: var(--theme-color-4-2); box-shadow: var(--theme-box-shadow); }

    .feature                 .feature-title h1,
    .feature                 .feature-title h2,
    .feature                 .feature-title h3,
    .feature                 .feature-title h4,
    .feature                 .feature-title h5                        { color: var(--theme-color-3-1); }

    .feature                 .feature-title a,
    .feature                 .feature-title a:visited                 { color: var(--theme-color-3-1); }
    .feature                 .feature-title a:hover                   { color: var(--theme-color-2-1); }
    
    .feature                 .feature-desc                            { color: var(--theme-color-1-1); }

    .feature                 .feature-link span::after                { color: var(--theme-color-3-2); }
    .feature                 .feature-link span:hover::after          { color: var(--theme-color-2-1); }

    .feature                 .feature-link                            { color: var(--theme-color-3-2); }
    .feature                 .feature-link a,
    .feature                 .feature-link a:visited                  { color: var(--theme-color-3-2); }
    .feature                 .feature-link a:hover                    { color: var(--theme-color-2-1); }





    /* #Latest content
    ================================================== */
    .latest
    {
        width: 100%;

        margin: 0rem 0rem 3.0rem 0rem;
    }

    .latest ul
    {
        position: relative;
        
        display: flex;
        flex-wrap: wrap;

        list-style: none;

        padding: 0rem;
        margin: 0rem;
    }

    .latest ul li
    {
        position: relative;
        float: left;

        width: 100%;

        margin: 0rem 0rem 3.0rem 0rem !important;
    }

    .latest li:last-child
    {
        margin: 0rem 0rem 0rem 0rem;
    }

    .latest li .latest-image
    {
        position: relative;
        float: left;
        display: flex;
        overflow: hidden;

        width: 11rem;
        height: auto;

        transform: translate3d(0, 0, 0);

        margin: 0rem 1.5rem 0rem 0rem;
    }

    .latest li .latest-image a
    {
        padding: 0rem 0rem;
        
        background-image: none;
    }

    .latest li .latest-image img
    {
        display: block;
        margin: auto;

        width: 100%;
        height: 100%;

        object-fit: cover;

        filter: brightness(100%);

        transform: scale(1.0);

        transition: filter 0.25s ease, transform 0.25s linear;
    }

    .latest li:hover .latest-image img
    {
        filter: brightness(110%);

        transform: scale(1.2);
    }

    .latest li .latest-content
    {
        display: flex;
        overflow: hidden;
    }

    .latest li .latest-content a
    {        
        font-size: 1.6rem;
        line-height: 3.0rem;
    }

    .latest li .latest-content h1,
    .latest li .latest-content h2,
    .latest li .latest-content h3,
    .latest li .latest-content h4,
    .latest li .latest-content h5
    {
        max-height: 9.0rem;
        
        margin-bottom: 0rem;

        font-size: 1.6rem;
    }

    .latest li .latest-content .box-price
    {
        display: block;

        font-size: 1.6rem;
        line-height: 3.0rem;
        font-weight: 500;
    }

    /* color settings */
    .latest         li      .latest-image                       { background-color: var(--theme-color-1-2); box-shadow: var(--theme-box-shadow); }

    .latest         li      .latest-content .box-price          { color: var(--theme-color-4-3); }

    .latest         li      .latest-content h1,
    .latest         li      .latest-content h2,
    .latest         li      .latest-content h3,
    .latest         li      .latest-content h4,
    .latest         li      .latest-content h5                  { color: var(--theme-color-1-1); }

    .latest         li      .latest-content a,
    .latest         li      .latest-content a:visited           { color: var(--theme-color-1-1); }
    .latest         li      .latest-content a:hover             { color: var(--theme-color-2-1); }

    /* clearing */
    .latest::after
    {
        clear: both; display: block; visibility: hidden; content: ""; font-size: 0; width: 0; height: 0; line-height: 0;
    }





    /* #Image Hover Mask Effects
    ================================================== */
    /*
     * mask - 1
     ----------------------------------------------*/
    .mask-1
    {
        position: absolute;
        overflow: hidden;

        width: 100%;
        height: 100%;

        top: 0rem;

        margin: 0rem;
        padding: 0rem;
    }

    .mask-1 .mask
    {
        position: absolute;

        width: 100%;
        height: 100%;

        top: -100%;
        left: 0rem;

        margin: 0rem;
        padding: 0rem;

        transition: top 0.25s ease;
    }

    .mask-1:hover .mask
    {
        top: 0rem;
    }

    .mask-1 .mask-button
    {
        position: absolute;

        width: 100%;
        height: 100%;

        top: -100%;
        left: 0rem;

        margin-top: -2.25rem;

        font-size: 0rem;
        text-align: center;

        transition: top 0.25s ease;
    }

    .mask-1:hover .mask-button
    {
        top: 50%;
    }

    .mask-1 .mask-button a
    {
        display: inline-block;

        width: 4.5rem;
        height: 4.5rem;

        margin: 0rem 0.375rem;
        padding: 0rem 0rem;

        font-size: 1.6rem;
        font-weight: 400;
        text-align: center;
        line-height: 4.5rem;
    }

    .mask-1 .mask-button a i
    {
        font-weight: 400;
    }

    /* color settings */
    .mask-1 				    .mask 			          { background-color: var(--theme-color-mask-1-1); }
    .mask-1 					.mask-button a,
    .mask-1 					.mask-button a:visited    { background-color: var(--theme-color-mask-1-2); color: var(--theme-color-1-2); box-shadow: var(--theme-box-shadow); }

    .mask-1 					.mask-button a:hover      { background-color: var(--theme-color-2-3); }
    .mask-1 					.mask-button a:active     { background-color: var(--theme-color-2-4); }