<?php     
    // prevent direct file access
	if( !defined( 'ABSPATH' ) ) exit;

    function pixe_main_styles(){
?>
/* init value */
.pixe-box-sizing{ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.pixe-box-sizing *,
.pixe-box-sizing *:before, 
.pixe-box-sizing *:after { box-sizing: inherit; -moz-box-sizing: inherit; -webkit-box-sizing: inherit; }

:root{ 
    --pixe--content--width: <?php echo esc_html(pixe_get_settings('content-width', '1140px')); ?>;
    --pixe--body--background: <?php echo esc_html(pixe_get_settings('body-background', '#ffffff')); ?>; 
    --pixe--content--background: <?php echo esc_html(pixe_get_settings('content-background', 'transparent')); ?>;
    --pixe--color--placeholder: var(--pixe--color--text);
}
html body{ background: var(--pixe--body--background); margin: 0; }

.pixe-body-wrap{ overflow: hidden; }
.pixe-template-container{ margin-left: auto; margin-right: auto; width: 100%; max-width: var(--pixe--boxed--width); }
.pixe-template-content{ position: relative; }
.pixe-fixed-footer-container{ position: fixed; left: 0; right: 0; bottom: 0; margin-left: auto; margin-right: auto; max-width: var(--pixe--boxed--width); z-index: -1; }
.pixe-editor{ position: relative; font-size: 17px; line-height: 1.7; display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; max-width: 100%;
    background: var(--pixe--content--background); color: var(--pixe--color--text);
    transition: background 300ms, border 300ms, box-shadow 300ms; }
.pixe-editor a[href^="tel"], 
.pixe-editor a[href^="mailto"]{ color: inherit !important; -webkit-text-fill-color: inherit !important; text-decoration: none !important; }
.pixe-editor p, .pixe-editor pre, .pixe-editor ul, .pixe-editor ol{ margin-bottom: 20px; margin-top: 0px; }
.pixe-editor h1,.pixe-editor h2,.pixe-editor h3,.pixe-editor h4,.pixe-editor h5,.pixe-editor h6{ margin: 0 0 20px 0; color: var(--pixe--color--heading); line-height: 1.2; }
h1{ font-size: 32px; font-weight: 600; } h2{ font-size: 28px; font-weight: 600; } h3{ font-size: 22px; font-weight: 600; }
h4{ font-size: 20px; font-weight: 600; } h5{ font-size: 19px; font-weight: 500; } h6{ font-size: 18px; font-weight: 500; }
.pixe-the-content{ width: var(--pixe--content--width); max-width: 100%; margin: 0px auto; padding: 0px 15px; }
.pixe-editor-content{ display: flex; flex-wrap: wrap; align-items: flex-start; width: var(--pixe--content--width); max-width: 100%; margin: 0px auto; }
.pixe-editor *{ border-color: var(--pixe--color--border); }
.pixe-editor a{ outline: none; color: var(--pixe--color--link, #2f2f2f); text-decoration: none; transition: color 300ms; }
.pixe-editor a:hover{ color: var(--pixe--color--link-hover, #2f2f2f); }
.pixe-editor a:focus{ outline: none; }
.pixe-editor ul, 
.pixe-editor ol{ margin-left: 25px; }
.pixe-editor img{ max-width: 100%; height: auto; }
.pixe-editor pre{ padding: 22px 26px; background: #f6f6f6; color: #858585; border: 1px solid #e7e7e7; overflow: auto; }
.pixe-editor.pixe-header,
.pixe-editor.pixe-footer{ z-index: 2; }
.pixe-popup-lb{ position: fixed; display: none; top: 0; right: 0; left: 0; bottom: 0; z-index: 200; overflow: auto; }
.pixe-popup-bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
body.admin-bar .pixe-popup-lb{ top: 32px; }
.pixe-item-code-display pre{ margin-bottom: 0; }
.pixe-clear{ clear: both; }
.pixe-clearfix{ zoom: 1; }
.pixe-clearfix:after{ content: " "; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.pixe-editor select{ width: 100%; height: 45px; padding: 5px 16px; font-family: inherit; }
.pixe-editor select:focus{ outline: none; }
.pixe-editor input[type="file"]{ width: 100%; }
.pixe-editor input[type="text"],
.pixe-editor input[type="email"],
.pixe-editor input[type="tel"],
.pixe-editor input[type="number"],
.pixe-editor input[type="date"],
.pixe-editor input[type="time"],
.pixe-editor input[type="url"],
.pixe-editor input[type="password"]{ width: 100%; height: 45px; padding: 5px 16px; border-width: 1px; border-style: solid; 
    outline: none; font-family: inherit; transition: color 300ms, background 300ms; }
.pixe-editor textarea{ display: block; width: 100%; padding: 15px 16px; height: 150px; outline: none; 
    border-width: 1px; border-style: solid; font-family: inherit; transition: color 300ms, background 300ms; }
.pixe-editor input[type="checkbox"],
.pixe-editor input[type="radio"]{ vertical-align: middle; margin: -2px 5px 0px 0px; }
.pixe-editor label,
.pixe-editor input,
.pixe-editor select,
.pixe-editor textarea{ color: var(--pixe--color--text); }
::placeholder{ color: var(--pixe--color--placeholder); }
::-webkit-input-placeholder{ color: var(--pixe--color--placeholder); }
::-moz-placeholder{ color: var(--pixe--color--placeholder); }
:-ms-input-placeholder{  color: var(--pixe--color--placeholder); }
:-moz-placeholder{ color: var(--pixe--color--placeholder); }

/* width */
:root{ --pixe--width--1-1: 100%; --pixe--width--11-12: 91.6%; --pixe--width--9-10: 90%; 
    --pixe--width--7-8: 87.5%; --pixe--width--5-6: 83.33%; --pixe--width--4-5: 80%; 
    --pixe--width--3-4: 75%; --pixe--width--7-10: 70%; --pixe--width--2-3: 66.66%; 
    --pixe--width--5-8: 62.5%; --pixe--width--3-5: 60%; --pixe--width--7-12: 58.33%; 
    --pixe--width--1-2: 50%; --pixe--width--5-12: 41.66%; --pixe--width--2-5: 40%; 
    --pixe--width--3-8: 37.5%; --pixe--width--1-3: 33.33%; --pixe--width--3-10: 30%; 
    --pixe--width--1-4: 25%; --pixe--width--1-5: 20%; --pixe--width--1-6: 16.66%; 
    --pixe--width--1-8: 12.5%; --pixe--width--1-10: 10%; --pixe--width--1-12: 8.33%; }
[data-width="1-1"]{ width: 100% } [data-width="11-12"]{ width: 91.6% } [data-width="9-10"]{ width: 90% } 
[data-width="7-8"]{ width: 87.5% } [data-width="5-6"]{ width: 83.33% } [data-width="4-5"]{ width: 80% } 
[data-width="3-4"]{ width: 75% } [data-width="7-10"]{ width: 70% } [data-width="2-3"]{ width: 66.66% } 
[data-width="5-8"]{ width: 62.5% } [data-width="3-5"]{ width: 60% } [data-width="7-12"]{ width: 58.33% } 
[data-width="1-2"]{ width: 50% } [data-width="5-12"]{ width: 41.66% } [data-width="2-5"]{ width: 40% } 
[data-width="3-8"]{ width: 37.5% } [data-width="1-3"]{ width: 33.33% } [data-width="3-10"]{ width: 30% } 
[data-width="1-4"]{ width: 25% } [data-width="1-5"]{ width: 20% } [data-width="1-6"]{ width: 16.66% } 
[data-width="1-8"]{ width: 12.5% } [data-width="1-10"]{ width: 10% } [data-width="1-12"]{ width: 8.33% }

.pixe-hidden{ display: none; }
.pixe-grid{ display: flex; flex-wrap: wrap; gap: var(--pixe--gap, 10px); 
    --pixe--width: calc((100% - (var(--pixe--gap, 10px) * (var(--pixe--col, 4) - 1))) / var(--pixe--col, 4)); }
.pixe-grid-item{ width: var(--pixe--width); }
.pixe-icon{ text-align: center; transition: color 300ms, background 300ms, border 300ms; --pixe--svg--color: currentColor; }
.pixe-icon svg{ display: block; width: 100%; height: auto; }
.pixe-icon img{ display: block; } 
.pixe-icon i{ display: block; }
.pixe-map{ position: relative; }
.pixe-map iframe{ width: 100%; display: block; }
.pixe-video{ position: relative; overflow: hidden; }
.pixe-video video{ width: 100%; display: block; }
.pixe-video .pixe-overlay-background{ cursor: pointer; }
.pixe-video .pixe-icon{ color: #fff; font-size: 30px; }
.pixe-video .pixe-icon svg{ fill: #fff; }
.pixe-image{ display: flex; position: relative; overflow: hidden; justify-content: center; min-width: 10px; max-width: 100%; transition: border 300ms, box-shadow 300ms }
.pixe-image:before{ content: ' '; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; transition: background 300ms; z-index: 1; pointer-events: none; }
.pixe-image img{ display: block; transition: filter 300ms; }
.pixe-image a{ display: block; width: 100%; height: 100%; }
.pixe-overlay-background{ display: flex; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-position: center; background-size: cover; }
.pixe-overlay-content{ display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
    position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; padding: 20px; color: #fff; fill: #fff; z-index: 2; transition: padding 300ms; }
.pixe-overlay-content .pixe-title{ color: #fff; margin-bottom: 0px; word-wrap: break-word; }
.pixe-overlay-content .pixe-icon,
.pixe-overlay-content .pixe-title,
.pixe-overlay-content .pixe-caption,
.pixe-overlay-content .pixe-description{ max-width: 100%; transition: color 300ms, opacity 300ms, transform 300ms, margin 300ms; }
.pixe-overlay-content .pixe-icon.pixe-type-svg{ width: 25px; margin-bottom: 10px; }
.pixe-divider{ transition: border 300ms, background 300ms; }
.pixe-sep.pixe-divider{ height: 13px; border-left-width: 1px; border-style: solid; }
.pixe-sep.pixe-dot{ width: 3px; height: 3px; background: #5d5d5d; border-radius: 50%; }
.pixe-seq-anim{ opacity: 0; transition: opacity 300ms; }
.pixe-seq-anim.pixe-animated{ opacity: 1;  }

/* base item */
.pixe-wrapper{ display: flex; position: relative; width: 100%; padding-top: 60px; padding-bottom: 60px; transition: box-shadow 300ms, border-radius 300ms, transform 300ms; }
.pixe-wrapper-content{ display: flex; flex-wrap: wrap; align-content: flex-start; width: var(--pixe--content--width); max-width: 100%; margin-left: auto; margin-right: auto; }
.pixe-wrapper-link{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 999; }
.pixe-column{ position: relative; display: flex; max-width: 100%; transition: transform 300ms, opacity 300ms; }
.pixe-column.pixe-no-transition{ transition: none; }
.pixe-column-content{ position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; width: 100%; max-width: 100%; padding: 15px;
    margin-left: auto; margin-right: auto; transition: box-shadow 300ms, border-radius 300ms, border 300ms; }
.pixe-column-link{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 999; }
.pixe-column[data-type="query"] > .pixe-column-content{ padding: 0; }
.pixe-item{ width: 100%; position: relative; transition: background 300ms, border 300ms, transform 300ms, opacity 300ms; }
.pixe-tab-container{ position: relative; display: flex; flex-wrap: wrap; }

.pixe-bg-style{ position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; overflow: hidden; pointer-events: none; 
    transition: background 300ms, border 300ms, border-radius 300ms, box-shadow 300ms; }
.pixe-bg-inner{ position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; 
    background-size: cover; background-position: center; background-repeat: no-repeat; transition: opacity 300ms; }
.pixe-bg{ position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background-size: cover; background-position: center; background-repeat: no-repeat; }
.pixe-bg.pixe-hover{ opacity: 0; transition: opacity 300ms; }
.pixe-bg.pixe-tablet,
.pixe-bg.pixe-mobile{ display: none; }
.pixe-bg video{ width: 100%; height: 100%; object-fit: cover; }
.pixe-bg-image img{ width: 100%; height: 100%; object-fit: cover; }
.pixe-bg-map iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.pixe-column-content:hover > .pixe-bg-style > .pixe-bg.pixe-hover,
.pixe-wrapper:hover > .pixe-bg-style > .pixe-bg.pixe-hover{ opacity: 1; }

.pixe-flip-x{ -webkit-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); }
.pixe-flip-y{ -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
.pixe-flip-y.pixe-flip-x{ -webkit-transform: rotate(180deg) scaleX(-1); -ms-transform: rotate(180deg) scaleX(-1); transform: rotate(180deg) scaleX(-1); }

blockquote{ background: #f3f3f3; border-left: 2px solid #ddd; padding: 10px; }

/* fluid video */
.pixe-fvideo-wrap{ display: flex; align-items: center; justify-content: center; }
.pixe-fvideo{ background: #000; position: relative; flex-shrink: 0; padding-bottom: 56.25%; width: 100%; }
.pixe-fvideo iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* inline content */
h1.pixe-inline, h2.pixe-inline, h3.pixe-inline,
h4.pixe-inline, h5.pixe-inline, h6.pixe-inline{ margin-bottom: 0; }
.pixe-text{ transition: color 300ms, text-shadow 300ms; }
.pixe-inline{ overflow: hidden; border-width: 0; border-style: solid; transition: opacity 300ms, color 300ms, text-stroke 300ms, text-shadow 300ms; }
.pixe-inline p:last-child{ margin-bottom: 0; }
.pixe-inline blockquote{ color: inherit; }
.pixe-inline .aligncenter{ display: block; margin-left: auto; margin-right: auto; }
.pixe-inline .alignleft{ float: left; margin: 0.5em 1em 0.5em 0; }
.pixe-inline .alignright{ float: right; margin: 0.5em 0 0.5em 1em; }
.pixe-inline-icon{ display: inline-block; vertical-align: middle; color: var(--pixe--color--primary); transition: color 300ms; }
.pixe-inline-icon svg{ display: block; width: 100%; height: auto; fill: inherit; transition: fill 300ms; }
.pixe-inline-icon img{ display: block; } 
.pixe-inline-icon i{ display: block; }
.pixe-detail{ display: flex; align-items: center; gap: 10px; }
.material-symbols-outlined{ font-size: inherit; }

/* filter */
.pixe-filter{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; 
    font-size: 13px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 40px; }
.pixe-filter [data-filter]{ margin-bottom: 0; cursor: pointer; border-width: 0; border-style: solid; border-color: transparent; 
    transition: color 300ms, border-color 300ms, background 300ms; }
.pixe-filter [data-filter]:hover,
.pixe-filter [data-filter].pixe-active{ color: var(--pixe--color--primary); }
.pixe-filter-bar{ position: absolute; display: flex; }
.pixe-filter-bar span{ display: block; width: 100%; max-width: 100%; height: 2px; background: var(--pixe--color--primary); }

/* button */
.pixe-item.pixe-type-flex{ display: flex; }
.pixe-item.pixe-type-button{ display: flex; justify-content: center; }
.pixe-text-link{ display: flex; align-items: center; gap: 10px; }
.pixe-button{ display: flex; justify-content: center; align-items: center; text-align: center; font-size: 16px; font-weight: 600; padding: 7px 16px; gap: 10px; 
    text-decoration: none; color: #fff; transition: color 300ms, background 300ms, border 300ms, box-shadow 300ms; cursor: pointer; border-radius: 5px; }
.pixe-paypal-button{ padding: 13px 23px 13px 23px; border: 0; outline: none; }
.pixe-editor button,
.pixe-editor input[type="button"],
.pixe-editor input[type="submit"]{ font-size: 16px; font-weight: 600; padding: 13px 23px 13px 23px; border: 0px; cursor: pointer; border-radius: 5px; outline: none; }
.pixe-editor button,
.pixe-editor .pixe-button,
.pixe-editor input[type="button"],
.pixe-editor input[type="submit"],
.woocommerce button.button,
.woocommerce button.button.alt{ background: var(--pixe--color--button-background, #0487ff); color: var(--pixe--color--button-text, #ffffff); transition: color 300ms, background 300ms, border 300ms, opacity 300ms; }
.woocommerce button.button.alt{ -webkit-font-smoothing: auto; }
.pixe-editor button:hover,
.pixe-editor .pixe-button:hover,
.pixe-editor input[type="button"]:hover,
.pixe-editor input[type="submit"]:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover{ background: var(--pixe--color--button-hover-background, var(--pixe--color--button-background, #0487ff)); color: var(--pixe--color--button-hover-text, var(--pixe--color--button-text, #ffffff)); }
.woocommerce button.button:disabled[disabled],
.woocommerce button.button:disabled[disabled]:hover{ background: var(--pixe--color--button-background, #0487ff); color: var(--pixe--color--button-text, #ffffff); }
.pixe-button .pixe-icon{ color: var(--pixe--color--button-text, #ffffff); fill: var(--pixe--color--button-text, #ffffff); }
.pixe-button:hover .pixe-icon{ color: var(--pixe--color--button-hover-text, var(--pixe--color--button-text, #ffffff)); fill: var(--pixe--color--button-hover-text, var(--pixe--color--button-text, #ffffff)); }
.pixe-editor [data-button-preset],
.pixe-editor [data-button-preset] .button{ padding: 7px 16px; line-height: inherit; }
/* template part */
.pixe-header-tablet, 
.pixe-header-mobile{ display: none; }
.pixe-footer-tablet, 
.pixe-footer-mobile{ display: none; }
.pixe-side-header{ min-height: 100%; }
.pixe-item-icon a{ color: inherit; }
.pixe-item-icon .pixe-icon{ color: var(--pixe--color--primary); fill: var(--pixe--color--primary); }
.pixe-close-popup{ display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1;
    position: absolute; top: 0; right: 0; margin: 10px; border-style: solid; border-width: 0px; transition: color 300ms, fill 300ms, border 300ms; }

/* custom item */
.pixe-notice-box{ display: flex; align-items: center; font-size: 14px; padding: 12px 20px; gap: 12px; background: #f8f8f8; }
.pixe-detail .pixe-icon{ color: var(--pixe--color--primary); fill: var(--pixe--color--primary); }
.pixe-heading .pixe-text{ margin-bottom: 0; color: var(--pixe--color--heading); }
.pixe-heading .pixe-text a{ color: var(--pixe--color--heading); }
.pixe-item-title .pixe-inline{ color: var(--pixe--color--heading); }
.pixe-item-counter{ white-space: nowrap; }
.pixe-item-counter span{ font-size: 35px; color: var(--pixe--color--primary); }
.pixe-item-video{ min-width: 150px; }
.pixe-item-synced-block{ display: flex; flex-wrap: wrap; align-items: flex-start; }
.pixe-item-table table{ width: 100%; margin-bottom: 0; }
.pixe-item-image .pixe-image{ max-width: none; }

/* woocommerce */
.woocommerce span.onsale{ padding: 0; }
.woocommerce div.product p.stock{ color: var(--pixe--color--text); }

/* extend bg */
.pixe-column.pixe-bgext-left > .pixe-column-content > .pixe-bg-style,
.pixe-column.pixe-bgext-both > .pixe-column-content > .pixe-bg-style{ margin-left: -500px; }
.pixe-column.pixe-bgext-right > .pixe-column-content > .pixe-bg-style,
.pixe-column.pixe-bgext-both > .pixe-column-content > .pixe-bg-style{ margin-right: -500px; }
@media only screen and (min-width: 2000px){
.pixe-column.pixe-bgext-left > .pixe-column-content > .pixe-bg-style,
.pixe-column.pixe-bgext-both > .pixe-column-content > .pixe-bg-style{ margin-left: -800px; }
.pixe-column.pixe-bgext-right > .pixe-column-content > .pixe-bg-style,
.pixe-column.pixe-bgext-both > .pixe-column-content > .pixe-bg-style{ margin-right: -800px; }
}
@media only screen and (max-width: 1400px){
.pixe-column.pixe-bgext-left > .pixe-column-content > .pixe-bg-style,
.pixe-column.pixe-bgext-both > .pixe-column-content > .pixe-bg-style{ margin-left: -200px; }
.pixe-column.pixe-bgext-right > .pixe-column-content > .pixe-bg-style,
.pixe-column.pixe-bgext-both > .pixe-column-content > .pixe-bg-style{ margin-right: -200px; }
}

body .pixe-display-block.pixe-hide-desktop{ display: none; }
body .pixe-display-flex.pixe-hide-desktop{ display: none; }
<?php
        // layout css
        $layout = pixe_get_main_settings('layout');
        if( !empty($layout['style']) ){
            pixe_print_esc_css($layout['style']);
        }
    }
    function pixe_main_tablet_styles(){
        pixe_device_css('tablet', 'media-tag', true); 
?>
.pixe-bg-style.pixe-has-tablet .pixe-bg.pixe-desktop{ display: none; } 
.pixe-bg-style.pixe-has-tablet .pixe-bg.pixe-tablet{ display: block; }
.pixe-column.pixe-bgext-none > .pixe-column-content > .pixe-bg-style{ margin-left: 0px; margin-right: 0px; }
.pixe-column.pixe-bgext-left > .pixe-column-content > .pixe-bg-style{ margin-left: -100px; }
.pixe-column.pixe-bgext-right > .pixe-column-content > .pixe-bg-style{ margin-right: -100px; }
.pixe-column.pixe-tbgext-none > .pixe-column-content > .pixe-bg-style{ margin-left: 0px; margin-right: 0px; }
.pixe-column.pixe-tbgext-left > .pixe-column-content > .pixe-bg-style{ margin-left: -100px; }
.pixe-column.pixe-tbgext-right > .pixe-column-content > .pixe-bg-style{ margin-right: -100px; }

body .pixe-display-flex.pixe-hide-desktop{ display: flex; }
body .pixe-display-flex.pixe-hide-tablet{ display: none; }
body .pixe-display-block.pixe-hide-desktop{ display: block; }
body .pixe-display-block.pixe-hide-tablet{ display: none; }
<?php   
        echo '}';
    }
    function pixe_main_mobile_styles(){
        pixe_device_css('mobile', 'media-tag', true); 
?>
.pixe-bg-style.pixe-has-mobile .pixe-bg.pixe-desktop{ display: none; } 
.pixe-bg-style.pixe-has-mobile .pixe-bg.pixe-tablet{ display: none; } 
.pixe-bg-style.pixe-has-mobile .pixe-bg.pixe-mobile{ display: block; } 
.pixe-column[data-id]{ width: 100%; }
.pixe-column.pixe-bgext-none > .pixe-column-content > .pixe-bg-style{ margin-left: 0px; margin-right: 0px; }
.pixe-column.pixe-bgext-left > .pixe-column-content > .pixe-bg-style{ margin-left: -50px; }
.pixe-column.pixe-bgext-right > .pixe-column-content > .pixe-bg-style{ margin-right: -50px; }
.pixe-column.pixe-mbgext-none > .pixe-column-content > .pixe-bg-style{ margin-left: 0px; margin-right: 0px; }
.pixe-column.pixe-mbgext-left > .pixe-column-content > .pixe-bg-style{ margin-left: -50px; }
.pixe-column.pixe-mbgext-right > .pixe-column-content > .pixe-bg-style{ margin-right: -50px; }
.pixe-column-no-content.pixe-has-bg{ min-height: 300px; }

body .pixe-display-flex.pixe-hide-tablet{ display: flex; }
body .pixe-display-flex.pixe-hide-mobile{ display: none; }
body .pixe-display-block.pixe-hide-tablet{ display: block; }
body .pixe-display-block.pixe-hide-mobile{ display: none; }
<?php
        echo '}';
    }

    // register layout style
    function pixe_justified_style(){
?>
[data-layout="justified"] > .pixe-grid-item{ width: auto; position: absolute; opacity: 0; }
[data-layout="justified"] .pixe-image img{ width: 100%; height: 100%; object-fit: cover; }
.pixe-justified-row{ display: flex; gap: var(--pixe--gap, 10px); width: 100%; }
.pixe-justified-row .pixe-grid-item{ height: 100%; width: auto; opacity: 0; transition: opacity 300ms;  }
.pixe-justified-row .pixe-grid-item.pixe-init{ opacity: 1; }
.pixe-justified-row.pixe-stretch .pixe-grid-item{ flex-grow: 1; }
<?php
    }
    Pixe_Dependency::get()->register_style('justified', 'pixe_justified_style');

    // register layout style
    function pixe_masonry_style(){
?>
[data-layout="masonry"] > .pixe-grid-item{ position: absolute; opacity: 0; }
.pixe-masonry{ align-items: flex-start; }
.pixe-masonry-column{ display: flex; flex-direction: column; gap: var(--pixe--gap, 10px); width: var(--pixe--width); }
.pixe-masonry-column .pixe-masonry-item{ width: 100%; opacity: 0; transition: opacity 300ms; }
.pixe-masonry-column .pixe-masonry-item.pixe-init{ opacity: 1; }
<?php
    }
    Pixe_Dependency::get()->register_style('masonry', 'pixe_masonry_style');

    // register carousel style
    function pixe_carousel_style(){
?>
.pixe-slides{ width: 100%; position: relative; display: flex; flex-wrap: nowrap; gap: var(--pixe--gap, 10px); 
    -webkit-user-select: none; -ms-user-select: none; user-select: none; }
.pixe-slides .pixe-image{ flex-shrink: 0;  }
<?php
    }
    Pixe_Dependency::get()->register_style('carousel', 'pixe_carousel_style');

    // register collection slider style
    function pixe_collection_slider_style(){
?>
.pixe-collection-slider{ padding-top: 0; padding-bottom: 0; }
.pixe-collection-slider .pixe-collection-content{ position: relative; height: 100%; width: 100%; max-width: 100%; overflow: hidden; }
.pixe-collection-slider .pixe-wrapper{ display: none; transition: transform 500ms, opacity 500ms; }
.pixe-collection-slider .pixe-wrapper.pixe-active-slide{ display: block; }
.pixe-collection-slider .pixe-wrapper.pixe-is-overlay{ display: block; position: absolute; top: 0; left: 0; right: 0px; }
.pixe-collection-slider .pixe-wrapper.pixe-anim-out{ position: absolute; top: 0; left: 0; width: 100%; }
.pixe-collection-slider > .pixe-navigation[data-position="outer"]{ width: 100%; top: 0px; bottom: 0; }
<?php
    }
    Pixe_Dependency::get()->register_style('collection_slider', 'pixe_collection_slider_style');

    // register collection carousel style
    function pixe_collection_carousel_style(){
?>
.pixe-collection-carousel .pixe-collection-content{ --pixe--gap: 20px; --pixe--col: 3;
    position: relative; width: var(--pixe--content--width); max-width: 100%; margin-left: auto; margin-right: auto; display: flex; gap: var(--pixe--gap, 10px); 
    --pixe--width: calc((100% - (var(--pixe--gap, 10px) * (var(--pixe--col, 4) - 1))) / var(--pixe--col, 4)); }
.pixe-collection-carousel .pixe-collection-content > .pixe-column{ width: var(--pixe--width); flex-shrink: 0; }
<?php
    }
    Pixe_Dependency::get()->register_style('collection_carousel', 'pixe_collection_carousel_style');

    // register slider controls style
    function pixe_button_controls_style(){
?>
.pixe-bullet{ position: relative; display: none; gap: 10px; justify-content: center; margin-top: 30px; pointer-events: none; }
.pixe-bullet.pixe-init{ display: flex; width: 100%; }
.pixe-bullet span{ cursor: pointer; background: #e7e7e7; width: 12px; height: 12px; border-width: 0; border-style: solid; transition: background 300ms, border 300ms, border-radius 300ms; pointer-events: auto; border-radius: 12px; }
.pixe-bullet span.pixe-active{ background: #a0a0a0; }
.pixe-bullet-thumbnail{ --pixe--col: 6; margin-top: var(--pixe--gap, 10px); overflow: hidden; opacity: 0; transition: opacity 300ms; }
.pixe-bullet-thumbnail.pixe-init{ opacity: 1; }
.pixe-bullet-thumbnail .pixe-slides.pixe-static{ justify-content: center; }
.pixe-bullet-thumbnail .pixe-image{ cursor: pointer; opacity: 0.6; transition: opacity 300ms; }
.pixe-bullet-thumbnail .pixe-image.pixe-active{ opacity: 1; }
body.pixe-front .pixe-bullet{ z-index: 1; }
.pixe-navigation{ display: none; justify-content: center; gap: 10px; pointer-events: none; }
.pixe-navigation.pixe-init{ display: flex; }
.pixe-navigation[data-position="top"]{ margin-bottom: 30px; }
.pixe-navigation[data-position="bottom"]{ margin-top: 30px; }
.pixe-navigation[data-position="inner"]{ position: absolute; align-items: center; justify-content: space-between; pointer-events: none; }
.pixe-navigation[data-position="outer"]{ position: absolute; width: 100vw; align-items: center; justify-content: space-between; pointer-events: none; }
.pixe-navigation span{ display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-width: 0px; border-style: solid;
    pointer-events: auto; cursor: pointer; color: #c3c3c3; fill: #c3c3c3; background: #f5f5f5; transition: color 300ms, background 300ms, border 300ms, border-radius 300ms, fill 300ms; pointer-events: auto; }
.pixe-navigation span:hover{ color: #7d7d7d; fill: #7d7d7d; }
.pixe-navigation span svg{ width: 8px; }
body.pixe-front .pixe-navigation{ z-index: 1; }
.pixe-pagination{ display: flex; justify-content: center; align-items: center; gap: 5px; font-size: 13px; border-width: 0px; border-style: solid; 
    width: 100%; margin-top: 20px; }
.pixe-pagination a{ cursor: pointer; }
.pixe-pagination .pixe-number,
.pixe-pagination .pixe-nav{ width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-style: solid; border-width: 0px; 
    color: #ababab; fill: #ababab; transition: color 300ms, background 300ms, border 300ms; }
.pixe-pagination .pixe-icon svg{ display: block; width: 100%; height: auto; fill: inherit; }
.pixe-pagination .pixe-number{ color: #b4b4b4; background: #f5f5f5; }
.pixe-pagination .pixe-number.pixe-active,
.pixe-pagination .pixe-number:hover{ color: #ffffff; background-color: #2e2e2e; }
.pixe-pagination .pixe-sep{ width: 1px; height: 15px; background-color: #cfcfcf; }
.pixe-pagination .pixe-sep:last-child{ display: none; }
.pixe-pagination .pixe-dot{ width: 38px; text-align: center; }
.pixe-pagination [data-page]{ cursor: pointer; }
.pixe-touch-navigation{ position: fixed; width: 71px; height: 71px; display: flex; align-items: center; justify-content: center; 
    gap: 12px;  background: #2e2e2e; cursor: none; border-style: solid; opacity: 0; pointer-events: none; 
    transform: translate(-50%, -50%); transition: opacity 300ms; border-radius: 50%; }
.pixe-touch-navigation .pixe-icon{ display: inline-block; line-height: 1; color: #fff; fill: #fff; }
.pixe-touch-navigation .pixe-next{ transform: scaleX(-1); }
.pixe-touch-navigation .pixe-icon.pixe-type-svg,
.pixe-touch-navigation .pixe-icon.pixe-type-image{ width: 10px; }
.pixe-touch-navigation .pixe-icon svg{ width: 100%; height: auto; }
.pixe-touch-navigation.pixe-active{ opacity: 1; }
<?php
    }
    Pixe_Dependency::get()->register_style('button_controls', 'pixe_button_controls_style');

    // register input number
    function pixe_input_number_style (){
?>
.pixe-input-number{ position: relative; display: inline-block; width: 100px; }
.pixe-input-number input[type="number"]{ text-align: center; width: 100%; padding: 11px 20px; margin: 0; -moz-appearance: textfield; }
.pixe-input-number input[type="number"]::-webkit-inner-spin-button,
.pixe-input-number input[type="number"]::-webkit-outer-spin-button{ -webkit-appearance: none; }
.pixe-input-number svg{ display: block; width: 12px; fill: #1c1b1f; }
.pixe-input-number .pixe-plus{ position: absolute; top: 50%; right: 12px; transform: translateY(-50%); cursor: pointer; }
.pixe-input-number .pixe-minus{ position: absolute; top: 50%; left: 12px; transform: translateY(-50%); padding: 5px 0; cursor: pointer; }
<?php
    }
    Pixe_Dependency::get()->register_style('input-number', 'pixe_input_number_style');

    // register combobox
    function pixe_select_box_style (){
?>
.pixe-select-box{ position: relative; width: 100%; }
.pixe-select-box select{ padding-right: 25px; appearance: none; -webkit-appearance: none; -moz-appearance: none; }
.pixe-select-box select.pixe-empty{ color: var(--pixe--color--placeholder); }
.pixe-select-box .pixe-icon{ position: absolute; top: 50%; right: 5px; transform: translate(-50%, -50%); }
<?php
    }
    Pixe_Dependency::get()->register_style('select-box', 'pixe_select_box_style');

    // register sticky header
    function pixe_sticky_header_style (){
?>
.pixe-header .pixe-sticky-only{ display: none; }
.pixe-float-header{ position: fixed; top: 0; left: 0; right: 0; z-index: 100; margin-left: auto; margin-right: auto; }
.pixe-float-header .pixe-transparent-header{ position: relative; }
.pixe-float-header .pixe-sticky-hidden{ display: none; }
.pixe-float-header .pixe-sticky-only{ display: flex; }
.pixe-float-header.pixe-style-sticky{ max-width: var(--pixe--boxed--width); }
body.admin-bar .pixe-float-header{ top: 32px; }
body.admin-bar .pixe-float-header .pixe-transparent-header{ top: 0; }
@media screen and (max-width: 782px){
    body.admin-bar .pixe-float-header{ top: 0px; }
    body.admin-bar .pixe-popup-lb{ top: 0px; }
}
<?php
    }
    Pixe_Dependency::get()->register_style('sticky-header', 'pixe_sticky_header_style');