@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


:root {
    --main-color: #315368;
    --secondary-color: #e22e2d;

    --selection-background: var(--main-color);
    --selection-color: #fff;

    --body-font-family: 'Roboto', 'Arial', 'Helvetica', 'sans-serif';
    --body-font-size: 16px;
    --body-color:#4b5266;
    --body-line-height: 1.420;
    --body-background: #f7f8fa;
    --container-background : #fff;

    --paragraph-spacing: 10px;

    --header-top-bottom-spacing: 15px;

    --menu-link-font-size:16px;
    --menu-link-color:var(--main-color);
    --menu-link-hover-color:#966F4E;
    --menu-link-active-color:#000;
    --menu-link-padding-top-bottom: 10px ;
    --menu-link-padding-left-right: 10px ;
    --menu-submenu-background:#fff;
    --menu-submenu-color:#000;
    --menu-desktop-spacing: 15px;
    --hamburger-color:var(--main-color);

    --link-color: #333;
    --link-hover-color: #000;
    /* headings */
    --heading-spacing: 10px;
    --h1-size: 32px;
    --h1-weight: 700;
    --h1-color: #21222E;
    --h2-size: 28px;
    --h2-weight: 700;
    --h2-color: #21222E;
    --h3-size: 22px;
    --h3-weight: 700;
    --h3-color: #21222E;
    --h4-size: 22px;
    --h4-weight: 700;
    --h4-color: #21222E;
    --h5-size: 20px;
    --h5-weight: 700;
    --h5-color: #21222E;
    --h6-size: 18px;
    --h6-weight: 700;
    --h6-color: #21222E;
    
    --container: 1420px;
    --content-spacing: 50px;
    --responsive-menu: 1460px;
    --mobile-paddings: 5vw;

    --transition-time: 150ms;

    --form-label-color:#000;
    --form-label-text-transform: initial;
    --form-font-size: 18px;
    --form-color: #000;
    --form-border-radius: 4px;
    --form-border-width: 1px;
    --form-border-color: #000;
    --form-background-color: #ffffff;
    --form-padding: 5px 5px;
    --placeholder-color: #aeaeae;

    --button-font-size: 16px;
    --button-font-weight: 400;
    --button-color: #ffffff;
    --button-text-transform: uppercase;
    --button-border-radius: 4px;
    --button-border-width: 1px;
    --button-border-color: var(--main-color);
    --button-background-color: var(--main-color);
    --button-padding: 5px 20px;

    --button-hover-background-color: #fff;
    --button-hover-color: var(--main-color);
    --button-hover-border-color: var(--main-color);


    --focus-color: var(--main-color);
    --focus-style: solid;
    --focus-px: 1.5px;
    --focus-offset: 0px;

    /* WOOCOMMERCE */
    --woo-loop-product-title-color: var(--main-color);
    --woo-price-font-size: 20px;
    --woo-price-color: var(--main-color);
    /* LOOP */
    --woo-loop-product-title-size: 22px;
    /* SINGLE */
    --woo-single-product-title-size: 32px;

    --scrollbar-color-thumb: var(--main-color);
    --scrollbar-color-track: var(--body-background);
    --scrollbar-width: thin;
    --scrollbar-width-legacy: 10px;
}
/*:root {
    color-scheme: dark;
}*/

::selection {
    background: var(--selection-background);
    color: var(--selection-color);
}
::-moz-selection {
    background: var(--selection-background);
    color: var(--selection-color);
}
::-webkit-selection {
    background: var(--selection-background);
    color: var(--selection-color);
}

/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
    html {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: var(--scrollbar-width);
    }
}

/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
    html::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb);
    }
    html::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track);
    }
    html::-webkit-scrollbar {
        max-width: var(--scrollbar-width-legacy);
        max-height: var(--scrollbar-width-legacy);
    }
}
html,body{
    padding:0;
    margin:0;
}
html,code {
    font-family: var(--body-font-family);
}
body {
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
    background-color: var(--body-background);
    color: var(--body-color);
    overflow-x: hidden;
}
p{
    margin: 0;
}
p:not(:last-child){
    margin-bottom: var(--paragraph-spacing);
}
ul,ol,menu {
    margin: 0;
    padding-left: 25px;
}
ul:not(:last-child),ol:not(:last-child),menu:not(:last-child) {
    margin-bottom: var(--paragraph-spacing);
}
a {
    color: var(--link-color);
    text-decoration: none;
}
a:focus, a:active, button:focus, button:active, a::-moz-focus-inner, button::-moz-focus-inner {
    outline: var(--focus-px) var(--focus-style) var(--focus-color);
    outline-offset: var(--focus-offset);
    box-shadow: none;
    border: 0;
}
a:hover {
    color: var(--link-hover-color);
}

h1,h2,h3,h4,h5,h6{
    margin-top: 0px;
    margin-bottom: var(--heading-spacing);
    font-weight: var(--headings-weight);
}
h1{
    font-size: var(--h1-size);
    font-weight: var(--h1-weight);
    color: var(--h1-color)
}
h2 {
    font-size: var(--h2-size);
    font-weight: var(--h2-weight);
    color: var(--h2-color)
}
h3 {
    font-size: var(--h3-size);
    font-weight: var(--h3-weight);
    color: var(--h3-color)
}
h4 {
    font-size: var(--h4-size);
    font-weight: var(--h4-weight);
    color: var(--h4-color)
}
h5 {
    font-size: var(--h5-size);
    font-weight: var(--h5-weight);
    color: var(--h5-color)
}
h6 {
    font-size: var(--h6-size);
    font-weight: var(--h6-weight);
    color: var(--h6-color)
}
img, svg {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}
iframe{
    max-width: 100%;
}
input, select, textarea  {
    font-family: var(--body-font-family);
    border: var(--form-border-width) solid var(--form-border-color);
    background-color: var(--form-background-color);
    font-size: var(--form-font-size);
    padding: var(--form-padding);
    max-width: 100%;
    box-sizing: border-box;
    border-radius: var(--form-border-radius) !important;
    color: var(--form-color);
    line-height: 1;
}
select:focus > option:checked, select:focus > optgroup > option:checked, select:-internal-list-box option:checked {
    background-color: var(--selection-background) !important;
    color: var(--selection-color) !important;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--placeholder-color);
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--placeholder-color);
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--placeholder-color);
}
input:focus, select:focus, textarea:focus,
input:active, select:active, textarea:active,
input::-moz-focus-inner, select::-moz-focus-inner, textarea::-moz-focus-inner  {
    outline: var(--focus-px) var(--focus-style) var(--focus-color);
    outline-offset: var(--focus-offset);
}

input[type="checkbox"], input[type="radio"] {
    position: relative;
    -webkit-appearance: none;
    display: inline-block !important;
    width: 20px;
    height: 20px;
    padding: 0;
    cursor: pointer;
}

input[type="checkbox"]::before {
    position: absolute;
    top: 50%;
    left: 50%;
    line-height: 1;
    color: var(--main-color);
    font-size: 85%;
    z-index: 2;
    transition: all var(--transition-time) ease-in-out;
    transform: translate(-50%,-50%) scale(0);
    content: "\2714";
    transform-origin: bottom;
}
input[type="checkbox"]:checked::before {
    transform: translate(-50%,-50%) scale(1);
}
input[type="radio"]::before {
    content: '';
    position: absolute;
    background: var(--main-color);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    transition: all var(--transition-time) ease-in-out;
    transform: scale(0);
    z-index: 2;

}
input[type="radio"]:checked::before {
    transform: scale(1);
}

input[type="radio"] {
    border-radius: 50%;
}
button, 
input[type="submit"], 
.button {
    font-family: var(--body-font-family);
    border: var(--button-border-width) solid var(--button-border-color);
    background-color: var(--button-background-color);
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    padding: var(--button-padding);
    max-width: 100%;
    box-sizing: border-box;
    border-radius: var(--button-border-radius) !important;
    color: var(--button-color);
    text-transform: var(--button-text-transform);
    cursor: pointer;
    display: inline-block;
    line-height: normal;
    transition: all var(--transition-time) ease-in-out;
}

input[type="submit"]:focus,input[type="submit"]:active,button:focus,button:active,.button:focus,.button:active {
    border: var(--button-border-width) solid var(--button-border-color);
    outline: var(--focus-px) var(--focus-style) var(--focus-color);
    outline-offset: var(--focus-offset);
}
button:hover, 
input[type="submit"]:hover, 
button:active, 
input[type="submit"]:active, 
.button:hover,
.button:active,
button:focus, 
input[type="submit"]:focus, 
.button:focus {
    background-color: var(--button-hover-background-color);
    color: var(--button-hover-color);
    border-color: var(--button-hover-border-color);
}
label {
    color: var(--body-color);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/*
START GENERAL STYLE
*/
.alignleft, img.alignleft {
    margin-right: 1.5em;
    display: inline;
    float: left;
}
.alignright, img.alignright {
    margin-left: 1.5em;
    display: inline;
    float: right;
}
.aligncenter, img.aligncenter {
    margin-right: auto;
    margin-left: auto;
    display: block;
    clear: both;
}
.screen-reader-text {border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.screen-reader-text:focus {background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; }

.container {
    max-width: var(--container);
    background-color: var(--container-background);
    margin: 0 auto;
    padding: var(--content-spacing) var(--mobile-paddings) var(--content-spacing) var(--mobile-paddings);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border-radius: var(--button-border-radius);
}
@media (min-width: 1460px) {
    body.has-sidebar:not(.woocommerce) #main-wrap {
        display: grid;
        grid-template-columns: 1fr 3fr;
        grid-column-gap: 30px;
        max-width: var(--container);
        margin: 0 auto;
    }
}





.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
@media(min-width: 768px){
    body.has-sidebar:not(.woocommerce) #main-wrap {
        display: grid;
        grid-template-columns: 1fr 3fr;
        grid-column-gap: 30px;
    }
    body.has-sidebar:not(.woocommerce) #content {
        grid-area: 1/2;
    }
    body.has-sidebar:not(.woocommerce) #sidebar {
        position: sticky;
        top: 55px;
        z-index: 2;
        background: #fff;
        box-sizing: border-box;
    }
    body.admin-bar.has-sidebar:not(.woocommerce) #sidebar {
        top: 87px;
    }
    .container::after {
        content: "";
        clear: both;
        display: table;
    }
    .sidebar-sticky {
        position: sticky;
        top: 128px;
        z-index: 1;
        background: var(--body-background);
    }
}
#sidebar ul {
    padding-left: 0px;
}
#sidebar li {
    list-style: none;
    margin-bottom: 20px;
}
#sidebar .widget_recent_entries ul li a {
    font-size: 16px;
    color: #1b7da9;
}
#sidebar .widget-title {
    font-size: 22px;
    font-weight: 400;
    background: #D8D8D8;
    color: #444;
    padding: 6px;
}
#sidebar .post-date {
    display: block;
    font-style: italic;
    font-size: 12px;
}


.pagination {
    margin: 30px 0;
    text-align: center;
}
.pagination a, .pagination span {
    padding: 2px 10px;
    border: 1px solid #333;
    margin: 0 5px;
    color: #333;
}

.page-numbers.current {
    background: #333;
    cursor: default;
    color: #fff;
}
.prev.page-numbers{
    margin-right: 10px;
    border: none;
}

.next.page-numbers{
    margin-left: 10px;
    border: none;
}

.pagination ul li.active a {
    border: 1px solid;
    display: block;
    padding: 0 6.6px;
    pointer-events: none;
}
/* 
END GENERAL STYLE
*/

/*START HEADER*/
#top-header {
    position: sticky;
    top: 0;
    background-color: var(--menu-submenu-background);
    transition: all var(--transition-time) ease-in-out;
    z-index: 950;
}
.admin-bar #top-header {
    top: 32px;
}
#top-header > .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding-top: var(--header-top-bottom-spacing);
    padding-bottom: var(--header-top-bottom-spacing);
    box-shadow: unset;
}
#top-header .container::after {
    content: unset;
}
#brand a {
    font-size: var(--h1-size);
    display: flex;
}
#brand .custom-logo {
    width: auto;
    height: 40px;
}
/*END HEADER*/

/*START NAVIGATION*/
#header-menu {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}
#main-nav {
    width: 100%;
}
#main-nav ul {
    padding: 0;
    list-style: none;
}
#main-nav li {
    position: relative;
}

#main-nav > ul {
    display: flex;
    gap: var(--menu-desktop-spacing);
    justify-content: flex-end;
    flex-wrap: wrap;
}

#main-nav .sub-menu .sub-menu  {
    padding-left: 15px;
}
#main-nav li a:focus-visible ~ .sub-menu,
#main-nav li:hover > .sub-menu {
    display: block;
}

#main-nav li a {
    font-size: var(--menu-link-font-size);
    color: var(--menu-link-color);
    padding: var(--menu-link-padding-top-bottom) var(--menu-link-padding-left-right);
    white-space: nowrap;
    display: inline-block;
}
#main-nav > ul > li > .sub-menu a {
    color: var(--menu-submenu-color);
}


#main-nav .menu > li.menu-item-has-children.active > .sub-menu {
    display: block;
}
.dropdown-menu-toggle {
    display: inline-block;
    cursor: pointer;
    padding: 3px;
    text-align: center;
}
.dropdown-menu-toggle::after {
    display: block;
    content: "+";
    font-weight: bold;
}
.active .dropdown-menu-toggle::after {
    content: "-";
}
body.menu-is-active {
    overflow-y: hidden;
}
.menu-is-active #main-wrap, .menu-is-active #Footer {
    filter: blur(10px);
}
@media (min-width: 960px) {
    .responsive-ham-btn,.dropdown-menu-toggle{display: none;}
    #main-nav > ul > li > .sub-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        list-style: none;
        padding: var(--menu-link-padding-top-bottom) var(--menu-link-padding-left-right);
        background: var(--menu-submenu-background);
        z-index: 10;
    }
}
@media (max-width: 959px) {
    #main-nav {
        width: 100%;
    }
    .responsive-ham-btn{
        position: absolute;
    }
    #brand{
        width: 100%;
        text-align: center;
    }
    #header-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--container-background);
        justify-content: initial;
        opacity: 0;
        pointer-events: none;
        transition: all var(--transition-time) ease-in-out;
        padding: 20px var(--mobile-paddings);
        box-sizing: border-box;
        max-height: calc(100vh - 180px);
        overflow: auto;
    }
    #main-nav > ul {
        flex-direction: column;
        border: 1px solid var(--main-color);
        padding: var(--menu-link-padding-top-bottom);
    }
    #main-nav .menu > li.menu-item-has-children {
        display: grid;
        grid-template-columns: 1fr 42px;
        align-items: center;
    }
    #main-nav .menu > li.menu-item-has-children > .sub-menu {
        grid-column: span 2;
        grid-row: 2;
        display: none;
        border: 1px solid var(--main-color);
    }
    .menu-is-active #header-menu {
        opacity: 1;
        pointer-events: all;
    }
}
/*END NAVIGATION*/




/* 
START FOOTER
*/
#Footer {
    background-color: var(--main-color);
    font-size: 14px;
    color: #fff;
    position: relative;
}
#Footer .container {
    background-color: var(--main-color);
}



#Footer .menu {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
#Footer .menu li{margin-bottom: 5px;}
#Footer .menu a{padding: 4px 5px;}
#Footer .devbyngx {
    padding: 10px;
}
#Footer .devbyngx a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    color: #fff;
    padding: 0.5em 1em;
    width: fit-content;
    margin: auto;
    border: 1px solid #fff;
    border-radius: 50px;
}
#Footer .devbyngx a:hover {
    opacity: 0.7;
}
#Footer .devbyngx img {
    height: 16px;
}
#back-to-top {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    font-size: 22px;
    padding: 0;
    cursor: pointer;
    color: #fff
}
/* 
END FOOTER
*/



/*temp*/
#loop-wrap {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 20px;
}

/* Reduced motion — honour the OS-level "reduce motion" preference (WCAG 2.3.3).
   The smooth scroll and particle system are also disabled in main.js. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .wacta-particle {
        display: none !important;
    }
}