/*  ---------------------------------------------------
    Template Name: Frakun ET
    Description: Frakun ET template
    Author: Fitseder85
    Author URI: https://www.felagotsite.com/
    Version: 1.0
    Created: Frakun ET
---------------------------------------------------------  */
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Regular.eot') format('eot'),
         url('../fonts/OpenSans-Regular.woff') format('woff');
    font-weight: 300 400 600 700;
    font-style: normal;
}
@font-face {
    font-family: 'Lucida Calligraphy';
    src: url('../fonts/lucida_calligraphy.ttf') format('ttf'),
        url('../fonts/lucida_calligraphy.woff') format('woff');
    font-weight: 300 400 600 700;
    font-style: normal;
}
@font-face {
    font-family: 'FontAwesome';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../lib/fontawesome-free/webfonts/fa-solid-900.eot");
    src: url("../lib/fontawesome-free/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),
        url("../lib/fontawesome-free/webfonts/fa-solid-900.woff2") format("woff2"),
        url("../lib/fontawesome-free/webfonts/fa-solid-900.woff") format("woff"),
        url("../lib/fontawesome-free/webfonts/fa-solid-900.ttf") format("truetype"),
        url("../lib/fontawesome-free/webfonts/fa-solid-900.svg#fontawesome") format("svg");
}
@font-face {
    font-family: 'NucleoIcons';
    src: url('../fonts/nucleo-icons.eot');
    src: url('../fonts/nucleo-icons.eot') format('embedded-opentype'),
        url('../fonts/nucleo-icons.woff2') format('woff2'),
        url('../fonts/nucleo-icons.woff') format('woff'),
        url('../fonts/nucleo-icons.ttf') format('truetype'),
        url('../fonts/nucleo-icons.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
h1 {
    font-family: 'Lucida Calligraphy';
}
.font-lucida {
    font-family: 'Lucida Calligraphy';
}
/* .active {
    text-decoration: underline !important;
    text-underline-offset: 0.375em !important;
} */

.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 30px;
    z-index: 11;
    animation: action 1s infinite alternate;
}
/* Preloader */
:root {
    --fg-preload-background: var(--bs-gray-100);
    --fg-loop-wrapper-border: var(--bs-body-color);
    --fg-loop-wrapper-color: var(--bs-body-color);
    --fg-rock-background: var(--bs-body-color);
    --fg-truk-wheels-background: var(--bs-gray-800);
    --fg-truck-box-shadow: var(--bs-gray-300);
    --fg-wheels-color: var(--bs-gray-800);
    --fg-truck-bg-image: url(../icons/truck.svg);
    --fg-wheels-bg-image: url(../icons/wheels.svg);
    --fg-tree-bg-image: url(../icons/tree.svg);
}

#preloader {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999999;
    background: var(--fg-loop-wrapper-border);
}
.loop-wrapper {
    margin: 0 auto;
    position: relative;
    display: block;
    height: 80vh;
    overflow: hidden;
    border-bottom: 3px solid var(--fg-loop-wrapper-border);
    color: var(--fg-loop-wrapper-color);
    background: var(--fg-preload-background);
}
.mountain {
    position: absolute;
    right: -900px;
    bottom: -20px;
    width: 2px;
    height: 2px;
    box-shadow:
    0 0 0 50px var(--bs-secondary),
    60px 50px 0 70px var(--bs-secondary),
    90px 90px 0 50px var(--bs-secondary),
    250px 250px 0 50px var(--bs-secondary),
    290px 320px 0 50px var(--bs-secondary),
    320px 400px 0 50px var(--bs-secondary)
    ;
    transform: rotate(130deg);
    animation: mtn 20s linear infinite;
}
.hill {
    position: absolute;
    right: -900px;
    bottom: -50px;
    width: 400px;
    border-radius: 50%;
    height: 20px;
    box-shadow:
    0 0 0 50px var(--bs-primary),
    -20px 0 0 20px var(--bs-primary),
    -90px 0 0 50px var(--bs-primary),
    250px 0 0 50px var(--bs-primary),
    290px 0 0 50px var(--bs-primary),
    620px 0 0 50px var(--bs-primary);
    animation: hill 4s 2s linear infinite;
}
.tree, .tree:nth-child(2), .tree:nth-child(3) {
    position: absolute;
    height: 100px;
    width: 35px;
    bottom: 0;
    background: var(--fg-tree-bg-image) no-repeat;
}
.rock {
    margin-top: -17%;
    height: 2%;
    width: 2%;
    bottom: -2px;
    border-radius: 20px;
    position: absolute;
    background: var(--fg-rock-background);
}
.truck, .wheels {
    transition: all ease;
    width: 85px;
    margin-right: -60px;
    bottom: 0px;
    right: 50%;
    position: absolute;
    background: var(--fg-truk-wheels-background);
}
.truck {
    background: var(--fg-truck-bg-image) no-repeat;
    background-size: contain;
    height: 60px;
}
.truck:before {
    content: " ";
    position: absolute;
    width: 25px;
    box-shadow:
    -30px 28px 0 1.5px var(--fg-truck-box-shadow),
    -35px 18px 0 1.5px var(--fg-truck-box-shadow);
}
.wheels {
    background: var(--fg-wheels-bg-image) no-repeat;
    height: 15px;
    margin-bottom: 0;
    color: var(--fg-wheels-color);
}

.tree  { animation: tree 3s 0.000s linear infinite; }
.tree:nth-child(2)  { animation: tree2 2s 0.150s linear infinite; }
.tree:nth-child(3)  { animation: tree3 8s 0.050s linear infinite; }
.rock  { animation: rock 4s   -0.530s linear infinite; }
.truck  { animation: truck 4s   0.080s ease infinite; }
.wheels  { animation: truck 4s   0.001s ease infinite; }
.truck:before { animation: wind 1.5s   0.000s ease infinite; }

@keyframes tree {
    0%   { transform: translate(1350px); }
    50% {}
    100% { transform: translate(-50px); }
}
@keyframes tree2 {
    0%   { transform: translate(650px); }
    50% {}
    100% { transform: translate(-50px); }
}
@keyframes tree3 {
    0%   { transform: translate(2750px); }
    50% {}
    100% { transform: translate(-50px); }
}

@keyframes rock {
    0%   { right: -500px; }
    100% { right: 5000px; }
}
@keyframes truck {
    0%   { }
    6%   { transform: translateY(0px); }
    7%   { transform: translateY(-6px); }
    9%   { transform: translateY(0px); }
    10%   { transform: translateY(-1px); }
    11%   { transform: translateY(0px); }
    100%   { }
}
@keyframes wind {
    0%   {  }
    50%   { transform: translateY(3px) }
    100%   { }
}
@keyframes mtn {
    100% {
        transform: translateX(-4000px) rotate(130deg);
    }
}
@keyframes hill {
    100% {
        transform: translateX(-5000px);
    }
}

/* site map */
.store-directory {
    margin-top: 1em;
    border-top: 5px solid var(--bs-gray-500);
}
.store-directory>ul::before,
.store-directory>ul ul::before {
    content: "";
    display: block;
    width: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-left: 1px solid var(--bs-gray-500);
}
.store-directory>ul::after {
    display: block;
    clear: both;
    content: "";
}
.store-directory>ul {
    border: 0;
}
.store-directory>ul,
.store-directory>ul ul {
    margin: 0 0 0 1em;
    padding: 0;
    list-style: none;
    position: relative;
}
.store-directory>ul:not(.product-categories) {
    float: left;
    /* width: 25%; */
    margin: 0;
}
.store-directory>ul li {
    margin: 0;
    padding: 0 1.5em;
    line-height: 2em;
    position: relative;
}
.store-directory>ul li {
    border: none;
}
.store-directory>ul li::before {
    content: "";
    display: block;
    width: 10px;
    height: 0;
    border-top: 1px solid var(--bs-gray-500);
    margin-top: -1px;
    position: absolute;
    top: 1.571em;
    left: 0;
}
.store-directory>ul li:last-child::before {
    background: var(--bs-white);
    height: auto;
    top: 1em;
    bottom: 0;
}
.store-directory>ul>li>a {
    font-weight: 700;
    display: inline-block;
    color: var(--bs-body-color);
}
.store-directory ul li>a,
.store-directory ul li>span {
    padding: .4em 0;
    color: var(--bs-gray-700);
}
.store-directory ul li>a:hover {
    color: var(--bs-primary);
}
.store-directory>ul ul {
    margin-left: .5em;
}
.store-directory>ul>li .children {
    display: block !important;
}
.store-directory ul li .children li {
    border-top: none;
}
/* site map end */
.avatar {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
}
.avatar img {
    width: 100%;
    height: 100%;
}
.avatar .avatar-initial {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #f0eff0;
    font-size: 0.9375rem;
}
.avatar.avatar-md .avatar-initial {
    line-height: 1.3;
}
.avatar.avatar-online:after, .avatar.avatar-offline:after, .avatar.avatar-away:after, .avatar.avatar-busy:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 3px;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    box-shadow: 0 0 0 2px #fff;
}
.avatar.avatar-online:after {
    background-color: #56ca00;
}
.avatar.avatar-offline:after {
    background-color: #8a8d93;
}
.avatar.avatar-away:after {
    background-color: #ffb400;
}
.avatar.avatar-busy:after {
    background-color: #ff4c51;
}
.ribbon-wrapper{
    height:90px;
    overflow:hidden;
    position:absolute;
    right:-3px;
    top:-2px;
    width:90px;
    z-index:10
}
.ribbon-wrapper.ribbon-lg{
    height:140px;
    width:140px
}
.ribbon-wrapper.ribbon-lg .ribbon{
    right:0;
    top:26px;
    width:160px
}
.ribbon-wrapper.ribbon-xl{
    height:180px;
    width:180px
}
.ribbon-wrapper.ribbon-xl .ribbon{
    right:4px;
    top:47px;
    width:240px
}
.ribbon-wrapper .ribbon{
    box-shadow:0 0 3px rgba(0,0,0,.3);
    font-size:.8rem;
    line-height:100%;
    padding:.375rem 0;
    position:relative;
    right:-2px;
    text-align:center;
    text-shadow:0 -1px 0 rgba(0,0,0,.4);
    text-transform:uppercase;
    top:20px;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    width:110px
}
.ribbon-wrapper .ribbon::after,
.ribbon-wrapper .ribbon::before{
    border-left:3px solid transparent;
    border-right:3px solid transparent;
    border-top:3px solid #9e9e9e;
    bottom:-3px;
    content:"";
    position:absolute
}
.ribbon-wrapper .ribbon::before{left:0}
.ribbon-wrapper .ribbon::after{right:0}