/*
Theme Name: Remake
Theme URI: https://codeless.co/remake
Description: A modern and versatile WordPress theme for creative professionals and businesses.
Version: 1.2.0
Author: Codeless
Author URI: https://codeless.co
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: codeless
Tags: blog, portfolio, business, creative, modern, responsive
Tested up to: 6.4
Requires PHP: 8.0
*/

/*-----------------------------------------------------------------------------------
[Table of contents]

1. Base WordPress Styles
   - HTML & Body
   - Links
   - Images & Media
   - Tables
   - Forms
   - WordPress Core Classes

2. Typography
3. Layout
4. Header
5. Navigation
6. Content
7. Sidebar
8. Footer
9. Blog
10. Portfolio
11. WooCommerce
12. Responsive
13. Utilities
-----------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------
1. Base WordPress Styles
-----------------------------------------------------------------------------------*/

/* HTML & Body */
html {
    overflow-x: hidden;
}

body {
    margin-right: 0 !important;
    font-family: Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Links */
a {
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

a:hover {
    text-decoration: none;
}

/* Images & Media */
.wp-caption {
    max-width: 100%;
    margin-bottom: 1.5em;
}

.wp-caption-text {
    margin: 10px 0;
    text-align: center;
    font-size: 14px;
    font-style: italic;
}

.wp-caption.aligncenter {
    margin-left: auto;
    margin-right: auto;
}

/* Tables */
.entry-content table,
.content-col > table,
.single-post .comment table {
    width: 100%;
    margin-bottom: 1.5em;
    border-collapse: collapse;
}

.entry-content th,
.content-col > table th,
.single-post .comment table th {
    padding: 0.75em;
    border-bottom: 2px solid;
    font-weight: 600;
}

.entry-content td,
.content-col > table td,
.single-post .comment table td {
    padding: 0.75em;
    border-bottom: 1px solid;
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
    width: 100%;
    padding: 0.75em;
    border: 1px solid;
    border-radius: 4px;
    transition: all 0.3s ease;
}

input:focus,
textarea:focus {
    outline: none;
}

/* WordPress Core Classes */
.alignleft {
    float: left;
    margin: 0.5em 1em 0.5em 0;
}

.alignright {
    float: right;
    margin: 0.5em 0 0.5em 1em;
}

.aligncenter {
    display: block;
    margin: 0 auto;
}

.wp-caption.alignleft {
    margin: 0.5em 1em 0.5em 0;
}

.wp-caption.alignright {
    margin: 0.5em 0 0.5em 1em;
}

.wp-caption-text {
    margin: 0.5em 0;
    text-align: center;
    font-size: 0.9em;
    font-style: italic;
}

.content-col > h1:not(.page-title), .content-col > h2, .content-col > h3, .content-col > h4, .content-col > h5, .content-col > h6 {
    margin: 1.414em 0 0.5em; 
    font-family: Arial, Helvetica, sans-serif;
}

.content-col > p {
    margin-bottom: 1.3em; 
    margin-top: 0; 
}

/* WP Defaults */
.gallery:after {
    content: "";
    display: table;
    clear: both;
}

img.aligncenter, div.aligncenter, figure.aligncenter {
    display: block;
    margin: 0em auto;
}

img.wp-post-image {
    display: block;
    margin: 0em auto;
}

img.alignright {
    float: right;
    margin: 1em 0 1em 2em;
}

div.alignright, figure.alignright {
    float: right;
    margin: 1em 0 1em 2em;
}

img.alignleft, div.alignleft, figure.alignleft, img.wp-post-image.attachment-thumb {
    float: left;
    margin: 1em 2em 1em 0;
}

figure:not(.woocommerce-product-gallery__wrapper) {
    margin: 0;
    padding: 0;
}

p img.alignright, p img.alignleft {
    margin-top: 0;
}

.gallery figure {
    margin: 0;
    padding: 0;
}

.gallery figure img {
    display: block;
    margin: 0 auto;
}

.gallery.gallery-columns-1 figure {
    width: 100%;
    margin: 0 0 1em 0;
    float: none;
}
.gallery.gallery-columns-3 figure {
    width: 32%;
}
.gallery.gallery-columns-3 figure:nth-of-type(3n+3) {
    margin-right: 0;
}
.gallery.gallery-columns-3 figure:nth-of-type(3n+4) {
    clear: left;
}
.gallery.gallery-columns-2 figure {
    width: 49%;
}
.gallery.gallery-columns-2 figure:nth-of-type(even) {
    margin-right: 0;
}
.gallery.gallery-columns-2 figure:nth-of-type(odd) {
    clear: left;
}
.gallery.gallery-columns-4 figure {
    width: 23.25%;
}
.gallery.gallery-columns-4 figure:nth-of-type(4n+4) {
    margin-right: 0;
}
.gallery.gallery-columns-4 figure:nth-of-type(4n+5) {
    clear: left;
}
.gallery.gallery-columns-5 figure {
    width: 18%;
}
.gallery.gallery-columns-5 figure:nth-of-type(5n+5) {
    margin-right: 0;
}
.gallery.gallery-columns-5 figure:nth-of-type(5n+6) {
    clear: left;
}
.gallery.gallery-columns-6 figure {
    width: 14.2%;
}
.gallery.gallery-columns-6 figure:nth-of-type(6n+6) {
    margin-right: 0;
}
.gallery.gallery-columns-6 figure:nth-of-type(6n+7) {
    clear: left;
}
.gallery.gallery-columns-7 figure {
    width: 12%;
}
.gallery.gallery-columns-7 figure:nth-of-type(7n+7) {
    margin-right: 0;
}
.gallery.gallery-columns-7 figure:nth-of-type(7n+8) {
    clear: left;
}
.gallery.gallery-columns-8 figure {
    width: 10.2%;
}
.gallery.gallery-columns-8 figure:nth-of-type(8n+8) {
    margin-right: 0;
}
.gallery.gallery-columns-8 figure:nth-of-type(8n+9) {
    clear: left;
}
.gallery.gallery-columns-9 figure {
    width: 8.85%;
}
.gallery.gallery-columns-9 figure:nth-of-type(9n+9) {
    margin-right: 0;
}
.gallery.gallery-columns-9 figure:nth-of-type(9n+10) {
    clear: left;
}

@media (max-width: 767px) {
    img.alignright, div.alignright, figure.alignright, img.alignleft, div.alignleft, figure.alignleft, img.wp-post-image.attachment-thumb {
        display: block;
        margin: 1em auto;
        float: none;
    }

    .gallery.gallery-columns-4 figure, .gallery.gallery-columns-5 figure, .gallery.gallery-columns-6 figure, .gallery.gallery-columns-7 figure, .gallery.gallery-columns-8 figure, .gallery.gallery-columns-9 figure {
        width: 100%;
        margin: 0 0 1em 0;
        float: none;
    }
}

.wp-caption-text,
.gallery-caption,
.entry-caption {
    line-height: 1.5em;
}

.bypostauthor{
    display:block;
} 

.alignleft {
    float: left;
    padding-right: 20px;
}
.alignright {
    float: right;
    padding-left: 20px;
}
.aligncenter {
    display: block;
    float: none !important;
    margin-left: auto;
    margin-right: auto;
}
.wp-caption {
    max-width: 100%;
    padding: 4px;
    float: none;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin-top:20px;
    margin-bottom: 10px;
    float:left;
}
.wp-caption a {
    padding: 0px;
    padding-bottom: 0px;
}
.inner-content #comments{
    margin-top: 60px;
    clear:both;
}
.entry-content table, .content-col > table, .single-post .comment table {
    border-collapse: collapse;
    margin: 0 0 1.5em;
    width: 100%;
}

.entry-content thead th, .content-col > table thead th, .single-post .comment thead th {
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: 0.5em;
}

.entry-content th, .content-col > table th, .single-post .comment table th {
    padding: 0.59em;
    text-align: left;
}

.entry-content tr, .content-col > table tr, .single-post .comment table tr {
    border-bottom: 1px solid #e7e7e7;
}

.entry-content tr:last-child, .content-col > table tr:last-child, .single-post .comment table tr:last-child{
    border-bottom:none;
}

.entry-content td, .content-col > table td, .single-post .comment table td {
    padding: 0.59em;
    font-size:16px;
}

.entry-content dl dt, .single-post .comment dl dt{
    font-weight:600;
    margin-top:8px;
} 

.entry-content dl dt:first-child, .single-post .comment dl dt:first-child{
    margin-top:0px;
}

article.default-style .entry-overlay, article.default-style .entry-media{
    display:inline-block !important;
}

article.default-style .entry-overlay{
    height: calc(100% - 8px);
}

.entry-content th:first-child, .content-col > table th:first-child
.entry-content td:first-child, .content-col > table td:first-child,
.single-post .comment th:first-child, .single-post .comment td:first-child {
    padding-left: 0;
}

.entry-content th:last-child, .content-col > table th:last-child
.entry-content td:last-child, .content-col > table th:last-child,
.single-post .comment td:last-child, .single-post .comment table th:last-child {
    padding-right: 0;
}

.wp-caption.alignleft {
    margin-right: 20px;
    float:left;
}
.wp-caption.alignright {
    margin-left: 20px;
    float:right;
}
.wp-caption-text {
    padding-left: 7px;
    margin-bottom: 7px;
    padding-right:7px;
    text-align: center;
    font-size: 13px;
}
.wp-caption-text,
.gallery-caption,
.entry-caption {
    line-height: 1.5em;
}
img.wp-smiley,
.rsswidget img {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}
/* WP Quick Gallery*/

.entry-content dl.gallery-item {
    margin: 0;
}
.post-password-form input[type="password"] {
    background: #fff;
    height: 45px;
    width: 180px;
    border-width: 1px;
    border-style: solid;
    border-color:#e1e1e1;
}
.post-password-form input[type="submit"]{
    height: 45px;
    top: -1px;
    position: relative;
    font-size: 18px;
    background: #000;
    color: #fff;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 16px;
}
article embed {
    max-width: 100%;
}
a {
    -webkit-transition: color 200ms cubic-bezier(0.780, 0.140, 0.20, 0.86), background-color 200ms cubic-bezier(0.780, 0.140, 0.20, 0.86);
    -moz-transition: color 200ms cubic-bezier(0.780, 0.140, 0.20, 0.86), background-color 200ms cubic-bezier(0.780, 0.140, 0.20, 0.86);
    -o-transition: color 200ms cubic-bezier(0.780, 0.140, 0.20, 0.86), background-color 200ms cubic-bezier(0.780, 0.140, 0.20, 0.86);
    transition: color 200ms cubic-bezier(0.780, 0.140, 0.20, 0.86), background-color 200ms cubic-bezier(0.780, 0.140, 0.20, 0.86);
}
a:hover {
    text-decoration: none;
}
.scrollup {
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 50px;
    right: 100px;
    display: none;
    text-indent: -9999px;
    background-image: url('img/icon_top.png');
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(34, 34, 34, 0.6);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}
.tp-caption a i {
    color: #fff !important;
}

.content-col > .page-title {
    margin-bottom: 60px;
}
input[type="search"] {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -webkit-appearance: none;
}
/* Search Page */

.content-col > .search-form {
    position: relative;
    display: inline;
}
.content-col > .search-form label {
    display: none;
}
.content-col > .search-form input[type="search"] {
    width: 100%;
    max-width: 650px;
    border-radius:4px;
    padding-left: 10px;
    height: 58px;
    background: #eee;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.content-col > .search-form i {
    position: absolute;
    right: 10px;
    top: 2px;
}
.content-col > .search__related {
    margin-top: 45px;
    pointer-events: auto;
}
.content-col > .search__related .search__col {
    padding-right: 20px;
}
.content-col > .search__related .search__col .widget-title {
    margin-bottom: 0.75em;
}
@media (max-width: 767px) {
    .content-col > .search__related {
        display: block !important;
        width: 100%;
    }
    .content-col > .search__related .search__col {
        margin-bottom: 30px;
    }
}
/* End Search Page */
/* 404 not found title */

h2.not-found-404 {
    width: 100%;
    text-align: left;
    font-size: 160px !important;
    color: #eee !important;
    line-height: 200px !important;
    margin-top:0;
    margin-bottom:0;
}
.error404 h1.page-title{
    margin-bottom:20px;
}
@media (min-width: 992px) {
    .cl-hide-not-mobile {
        display: none !important;
        visibility: hidden;
    }
}
@media (max-width: 991px) {
    .cl-hide-on-mobile {
        display: none !important;
        visibility: hidden;
    }


}
/** 
 *  ------------------------- END BASE WP -------------------------
 *  ---------------------------------------------------------------
 */
/** 
 *  ------------------------- TYPOGRAPHY -------------------------
 *  --------------------------------------------------------------
 */

/*-----------------------------------------------------------------------------------
2. Typography
-----------------------------------------------------------------------------------*/

/* Headings */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    line-height: 1.2;
}

h1 {
    font-size: 2.5em;
    margin-bottom: 0.5em;
}

h2 {
    font-size: 2em;
    margin-bottom: 0.5em;
}

h3 {
    font-size: 1.75em;
    margin-bottom: 0.5em;
}

h4 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
}

h5 {
    font-size: 1.25em;
    margin-bottom: 0.5em;
}

h6 {
    font-size: 1em;
    margin-bottom: 0.5em;
}

/* Paragraphs */
p {
    margin: 0 0 1.3em;
    line-height: 1.6;
}

/* Lists */
ul, ol {
    margin: 0 0 1.3em;
    padding-left: 2em;
}

li {
    margin-bottom: 0.5em;
}

/* Blockquotes */
blockquote {
    margin: 0 0 1.3em;
    padding: 1em 2em;
    font-style: italic;
    border-left: 4px solid;
}

blockquote p:last-child {
    margin-bottom: 0;
}

/* Links */
a {
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    text-decoration: none;
}

/* Code */
code, pre {
    font-family: monospace;
    font-size: 0.9em;
}

pre {
    margin: 0 0 1.3em;
    padding: 1em;
    overflow: auto;
    border: 1px solid;
}

/* Text Selection */
::selection {
    background: transparent;
}

/* Dropcaps */
.dropcaps {
    float: left;
    font-size: 3em;
    line-height: 0.8;
    padding: 0.1em 0.1em 0 0;
    color: #333;
}

/** 
 *  ------------------------- END TYPOGRAPHY -------------------------
 *  ------------------------------------------------------------------
 */
/** 
 *  ------------------------- LAYOUT -----------------------------
 *  --------------------------------------------------------------
 */
@media(min-width:1200px){
    .container{
        max-width:100%;
    }
}
#content {
    position: relative;
}
#content > p {
    margin: 0;
    padding: 0;
}
@media (min-width: 768px) {
    #content.cl-layout-modern .cl-layout-modern-bg {
        position: absolute;
        top: 0;
        height: 100%;
        z-index: 0;
    }
    #content.cl-layout-modern.cl-layout-left_sidebar .cl-layout-modern-bg {
        left: 0;
    }
    #content.cl-layout-modern.cl-layout-left_sidebar .content-col {
        padding-left: 40px;
    }
    #content.cl-layout-modern.cl-layout-right_sidebar .cl-layout-modern-bg {
        right: 0;
    }
    #content.cl-layout-modern.cl-layout-right_sidebar .content-col {
        padding-right: 40px;
    }
}
@media (max-width: 767px) {
    #content.cl-layout-modern .cl-layout-modern-bg {
        display: none;
    }
}
#content .inner-content .inner-content-row .content-col .container-content {
    width: 100%;
}

/* Layout Bordered */
.cl-layout-bordered{
    padding: 20px;
}
.cl-layout-bordered > #wrapper{
    position:relative;
}
.cl-layout-bordered > #wrapper .header_container.cl-transparent{
    top:0 !important;
}
.cl-layout-border-container > div{
    position:fixed;
    z-index:99999;
    background:#fff;
}
.cl-layout-border-container > .top{
    width:100%;
    height:20px;
    top:0;
    left:0;
}
.cl-layout-border-container > .bottom{
    width:100%;
    height:20px;
    bottom:0;
    left:0;
}
.cl-layout-border-container > .left{
    width:20px;
    height:100%;
    top:0;
    left:0;
}
.cl-layout-border-container > .right{
    width:20px;
    height:100%;
    top:0;
    right:0;
}
/* Layout Bordered */

/* Boxed Layout */
.cl-boxed-layout{
    margin:0 auto;
}


/** 
 *  ------------------------- END LAYOUT -------------------------
 *  --------------------------------------------------------------
 */


@media (max-width: 340px) {
    .extra_tools_wrapper {
        display: none;
        visibility: hidden;
    }
}
/* Sub Menu for Tools */

@media (min-width: 992px) {
    .extra_tools_wrapper .tool {
        position: relative;
    }
    .extra_tools_wrapper .tool .cl-submenu {
        list-style: none;
        margin: 0 !important;
        display: none;
        visibility: hidden;
        position: absolute;
        left: 0;
        top: 100%;
        left: 6px;
        z-index: 9999999;
        padding: 0px;
        -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
        min-width: 20em;
        max-width: 20em;
        padding: 16px;
    }
    .extra_tools_wrapper .tool.showDropdown > .cl-submenu {
        display: block !important;
        visibility: visible !important;
    }
    .extra_tools_wrapper .tool.showDropdown.dropdownRightToLeft > .cl-submenu {
        left: auto;
        right: 0;
    }
    .tool .header_cart {
        width: 100%;
        line-height: 20px;
    }
}
.tool .tool-link {
    position: relative;
}
#site-header-cart .button.checkout {
    margin-left: 10px;
}
#site-header-cart ul {
    margin: 0;
    padding: 0;
    list-style: none
}
#site-header-cart ul li {
    padding-left: 25px;
    position: relative;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}
#site-header-cart ul li .quantity{
    color:#999;
}
#site-header-cart ul li:last-child {
    margin-bottom: 0;
    border-bottom-width: 0;
}
#site-header-cart ul li .remove {
    position: absolute;
    left: 0px;
    top: 5px;
    color:#eee !important;
}
#site-header-cart ul li img {
    width: 32px;
    float: right;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
}
#site-header-cart ul li a:not(.remove) {
    width: 100%;
    display: block;
}
.tool .tool-link .cart-total {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    position: absolute;
    top: -10px;
    right: -9px;
    left: auto;
    color: #fff;
    text-align: center;
    line-height: 16px;
    font-size: 11px;
}
.tool.search > i {
    cursor: pointer;
}
.tool.search.search-style-simple{
    min-width:60px;
    text-align:right;
}
.tool .header_search {
    line-height: 20px;
    width: 200px;
}
#site-header-search form {
    width: 100%;
    position: relative;
}
#site-header-search label {
    display: none;
}
#site-header-search input[type="search"] {
    height: 35px;
    padding-left: 10px;
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
#site-header-search input[type="search"]:focus{
    border-color:#3a3a3a;
}
#site-header-search form i {
    position: absolute;
    right: 10px;
    top: 8px;
    font-size: 12px;
}
@media (max-width: 991px) {
    #site-header-search,
    #site-header-cart {
        padding-left: 15px;
        padding-right: 15px;
    }
    #site-header-search form i {
        top: 5px !important;
    }
}
/* End Sub Menu for Tools */
/* -------------------------------- MOBILE MENU -------------------------- */

.cl-mobile-menu.menu-wrapper {
    display: none;
    padding-top: 24px;
    padding-bottom: 24px;
    width: 100%;
    justify-content: flex-start !important;
    padding:15px 30px;
}

.cl-mobile-menu-button span{
    background-color:#000 !important;
}

.cl-mobile-menu nav {
    overflow: hidden;
}
.cl-mobile-menu-button {
    display: none;
    position: relative;
    width: 24px;
    height: 16px;
    cursor: pointer;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    position: relative;
}
@media (max-width: 991px) {
    .header_container .header-row #navigation {
        display: none;
    }
    .cl-mobile-menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        width:100%;
    }
    .cl-mobile-menu .menu > ul > li {
        padding-top: 4px;
        padding-bottom: 4px;
        padding-left:15px;
        padding-right:15px;
    }
    .cl-mobile-menu .menu li a {
        width: 100%;
        display: block;
    }
    .cl-mobile-menu .menu li.hasSubMenu {
        cursor: pointer;
    }
    .cl-mobile-menu .menu .codeless_custom_menu_mega_menu > ul > li.hasSubMenu {
        position: relative;
    }
    .cl-mobile-menu .menu li.hasSubMenu > a:after {
        content: "\e842";
        font-family: "feather";
        font-style: normal;
        font-weight: normal;
        speak: none;
        position: absolute;
        font-size: 11px;
        right: 30px;
    }
    
    .cl-mobile-menu nav li.hasSubMenu.open > a:after{
        content: "\e845";
    }
  
    .cl-mobile-menu .hasSubMenu > ul {
        display: none;
        padding: 10px 15px;
    }
    .cl-mobile-menu .hasSubMenu > ul > li,
    .cl-mobile-menu .hasSubMenu > .codeless_custom_menu_mega_menu > ul > li {
        padding-top: 0px;
        padding-bottom: 0px;
    }
    .cl-mobile-menu-button {
        display: inline-block;
    }
    .cl-mobile-menu-button span {
        display: block;
        position: absolute;
        height: 2px;
        width: 100%;
        border-radius: 4px;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }
    .cl-mobile-menu-button span:nth-child(1) {
        top: 0px;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
    }
    .cl-mobile-menu-button span:nth-child(2) {
        top: 6px;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
    }
    .cl-mobile-menu-button span:nth-child(3) {
        top: 12px;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
    }
    .cl-mobile-menu-button.open span:nth-child(1) {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        top: -3px;
        left: 4px;
    }
    .cl-mobile-menu-button.open span:nth-child(2) {
        width: 0%;
        opacity: 0;
    }
    .cl-mobile-menu-button.open span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top: 14px;
        left: 4px;
    }
}
/* -------------------------------- END MOBILE MENU ---------------------- */

.header_container * {
    box-sizing: border-box;
}

.header_container.header-left .header-el { width:auto; margin-left:auto; margin-right:auto}

.header_container .header-row-inner {
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: inherit;
    align-items: center;
}
.header-row .header-row-inner .c-left {
    justify-content: flex-start;
}
.header-row .header-row-inner .header-col {
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    min-height: 100%;
    position: relative;
    flex-grow: 1;
    -webkit-box-align: center;
    -webkit-box-flex: 1;
}
.cl-header-forced-center .header-row.main .header-row-inner .header-col{
    width:100%;
}
.cl-header-forced-center .header-row.extra_row .header-row-inner .header-col{
    width:100%;
}

.cl-header-forced-center .header-row.main .header-row-inner .header-col.c-middle{
    width:200%;
}
.cl-header-forced-center .header-row.extra_row .header-row-inner .header-col.c-middle{
    width:200%;
}

.header-row .header-row-inner .c-right {
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
    -webkit-box-pack: end; /* justify-content */
    border-right-width: 0;
}
.header-row .header-row-inner .c-middle {
    justify-content: center;
}
.header-col .header-el {
    position: relative;
    min-width: 24px;
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
}
.header-el .content {
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #fff;
    font-weight: bold;
    line-height: 40px;
}

/* Top Nav */
.top_nav.header-row{
    height:30px;
}
@media (max-width:991px){
    .top_nav.header-row{
        display:none;
    }
}
/* End Top Nav */

/* Logo  */

#logo.logo_font {
    float: left;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif !important;
}
#logo img {
    height: 40px;
}
#logo img {
    max-width: none;
    top: 50%;
    position: relative;
}
#logo img.dark {
    display: block;
    visibility: visible;
}
#logo img.light {
    display: none;
    visibility: hidden;
}
.background--dark #logo img.light {
    display: block;
    visibility: visible;
}
.background--dark #logo img.dark {
    display: none;
    visibility: hidden;
}

@media( min-width:992px){
    .logo_ipad{
        display:none;
    }
}

@media( min-width:768px){
    .logo_iphone{
        display:none;
    }
}

@media( min-width:768px ) and (max-width:991px){
    #logo.is-responsive img:not(.logo_ipad) {
        display:none;
    }
}
@media(max-width:767px){
    #logo.is-responsive img:not(.logo_iphone) {
        display:none;
    }
}

@media (max-width:991px){
    .logo_font.cl-responsive_color_light{
        color:#fff !important;
    }
}
/* Logo End  */

@media (min-width:992px){
    /* Sticky */
    .cl-header-sticky{
        -webkit-transition: -webkit-transform .3s ease-in-out, opacity .15s ease-in-out;
        -moz-transition: -moz-transform .3s ease-in-out, opacity .15s ease-in-out;
        transition: transform .3s ease-in-out, opacity .15s ease-in-out;
    }

    .cl-header-sticky:not(.cl-transparent):not(.cl-actived-fullscreen-header){
        position:static;
        width:100%;
        top:0;
        z-index:99999;
    }

    .admin-bar .cl-header-sticky:not(.cl-transparent):not(.cl-actived-fullscreen-header){
        position:static;
        width:100%;
        top:32px;
        z-index:99999;
    }

    main#main{
        -webkit-transition: margin-top .3s ease-in-out, opacity .15s ease-in-out;
        -moz-transition: margin-top .3s ease-in-out, opacity .15s ease-in-out;
        transition: margin-top .3s ease-in-out, opacity .15s ease-in-out;
    }


    .cl-header-sticky-prepare:not(.cl-actived-fullscreen-header){
        transform:translateY(-100%);
        -webkit-transform:translateY(-100%);
        -moz-transform:translateY(-100%);
        position:absolute;

    }
    .cl-header-sticky-prepare .top_nav{
        display:none;
        visibility: hidden;
    }
    .cl-header-sticky-prepare.cl-header-top-nav-sticky .top_nav{
        display:block;
        visibility: visible;
    }
    .cl-header-sticky-ready:not(.cl-actived-fullscreen-header){
        position: fixed !important;
        background: #fff;
        top: 0;
        width: 100%;
        z-index: 99999;
    }

    .cl-header-sticky-ready.cl-header-sticky-shadow{
        box-shadow: 0 -11px 42px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 0 -11px 42px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0 -11px 42px rgba(0, 0, 0, 0.1);
    }

    .cl-header-sticky-active:not(.cl-actived-fullscreen-header){
        transform:translateY(0%);
        -webkit-transform:translateY(0%);
        -moz-transform:translateY(0%);
    }
/* End Sticky */
}
@media (max-width:767px){
    .cl-header-sticky-mobile{
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 9999;
        background:#fff;
        box-shadow:1px 1px 18px rgba(0,0,0,0.15);
    }
    .cl-header-sticky-mobile .header-row-inner{
        background:#fff !important;
    }
    body.cl-with-sticky-mobile #main{
        padding-top:90px;
    }
}

.cl-header-side .container{
    max-width:100%;
}

/* ------------------------ Header Layouts --------------------------  */

.header_container {
    position: relative;
    width: 100%;
    z-index: 100;
}

.header_container > .main, .header_container > .top_nav, .header_container > .extra_row {
    position: relative;
    width: 100%;
}

.header_container.boxed-style {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.header-layout-top #viewport {
    position: relative;
}

.header_container:not(.header-left):not(.header-right):not(.menu-full-style) #navigation:not(.vertical-menu) nav .menu > li:last-child {
    margin-right: 0;
}

/* Navigation */
#navigation {
    position: relative;
}

#navigation nav {
    position: relative;
}

#navigation nav > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#navigation nav > ul > li {
    position: relative;
    margin: 0;
    padding: 0;
}

#navigation nav > ul > li > a {
    display: block;
    padding: 1em;
    text-decoration: none;
    transition: all 0.3s ease;
}

#navigation nav > ul > li > a:hover {
    text-decoration: none;
}

#navigation nav > ul > li > ul {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    min-width: 200px;
    margin: 0;
    padding: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

#navigation nav > ul > li:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#navigation nav > ul > li > ul > li {
    position: relative;
    margin: 0;
    padding: 0;
}

#navigation nav > ul > li > ul > li > a {
    display: block;
    padding: 0.75em 1em;
    text-decoration: none;
    transition: all 0.3s ease;
}

#navigation nav > ul > li > ul > li > a:hover {
    text-decoration: none;
}

/* Mobile Menu */
.cl-mobile-menu {
    position: relative;
}

@media (max-width: 991px) {
    .cl-mobile-menu {
        display: block;
    }
    
    .cl-mobile-menu-button {
        display: block;
        position: relative;
        width: 30px;
        height: 30px;
        cursor: pointer;
    }
    
    .cl-mobile-menu-button span {
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        left: 0;
        transition: all 0.3s ease;
    }
    
    .cl-mobile-menu-button span:nth-child(1) {
        top: 0;
    }
    
    .cl-mobile-menu-button span:nth-child(2) {
        top: 50%;
        transform: translateY(-50%);
    }
    
    .cl-mobile-menu-button span:nth-child(3) {
        bottom: 0;
    }
    
    .cl-mobile-menu-button.open span:nth-child(1) {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }
    
    .cl-mobile-menu-button.open span:nth-child(2) {
        opacity: 0;
    }
    
    .cl-mobile-menu-button.open span:nth-child(3) {
        bottom: 50%;
        transform: translateY(50%) rotate(-45deg);
    }
    
    .cl-mobile-menu nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 100;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.3s ease;
    }
    
    .cl-mobile-menu nav.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    .cl-mobile-menu nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    .cl-mobile-menu nav ul li {
        position: relative;
        margin: 0;
        padding: 0;
    }
    
    .cl-mobile-menu nav ul li a {
        display: block;
        padding: 0.75em 1em;
        text-decoration: none;
        transition: all 0.3s ease;
    }
    
    .cl-mobile-menu nav ul li a:hover {
        text-decoration: none;
    }
}

/* ... existing code ... */