/* Theme Name: GameMart Text Domain: hexwp Description: Gaming Shop WordPress Theme Author: Hex-WP Version: 1.2 Tested up to: 6.1.1 Requires at least: 5.6.0 Requires PHP: 7.4 Tags: three-columns, Threaded-comments, Review, Games License: GNU General Public License v3.0 or later License URI: https://www.gnu.org/licenses/gpl-3.0.html /* /* /*1 - Body 1.1 - Body 1.2 - Html Tags 1.3 - Form 1.4 - Content 1.5 - Column Warp 1.6 - Responsvie 1.7 - Breadcrumbs 1.8 - Footer 2 - Header 2.1 - Header Content 2.2 - Header Sticky 2.2 - Header Nav 2.3 - Logo 2.4 - Menu 2.5 - Category Menu 2.6 - Mobile Menu 2.7 - Search 2.8 - Social 2.9 - Header Element 2.10 - Mobile bar 3 - Post 3.1 - Ajax 3.1 Title Box 3.2 Thumb 3.3 Thumb Hover 3.4 Details 3.5 Meta 3.6 Hover Icon 3.7 Load More 3.8 Pagenavi 4 - Module 4.1 - Slider 4.2 - Module 4.3 - Module 1 4.4 - Module 2 4.5 - Glider 4.6 - Post Layout 4.7 - facaption 4.8 - 404 4.9 - Macy 4.10 - Widgets 5 - Element 5.1 - Element 5.2 - Menu 5.3 - Contactform 6 - Single 6.1 - Single 6.2 - Head Single 6.3 - Video 6.4 - Single Content 6.5 - Author 6.6 - Tags 6.7 - Lightbox 6.8 - Comments 6.9 - wp-block */ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 1 - Body ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 1.1 - Body ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Body //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ @font-face { font-family: 'fontsite'; font-weight:normal; font-weight:400; src: url('fonts/fontsite.woff2') format('woff2'); } :root{ --hw-btn-bg:var(--hw-primary-bg); --hw-btn-txt:var(--hw-primary-txt); --hw-btn-hv-bg:var(--hw-primary-hv-bg); --hw-drp-hv-lk:var(--hw-main-hv-lk); --hw-fot-hv-lk:var(--hw-main-hv-lk); --hw-btn-hv-lk:var(--hw-primary-cr); --hw-tr:transform 1s,background .3s ,color .3s ,border .3s ,box-shadow .3s ,opacity .3s; --sao-aw-bg:var(--hw-aw-bg,rgba(0,0,0,0.75)); --sao-aw-cr:var(--hw-aw-txt,#ffffff); --hw-rand-txt-1: #ffffff ; --hw-rand-txt-2: #ffffff ; --hw-rand-txt-3: #ffffff ; --hw-rand-txt-4: #ffffff ; } html.no-js, html.no-js > body{ float:left;width: 100%; } body { direction: ltr; font-family: var(--hw-fn-fm), arial,roboto, sans-serif; line-height: 2.2em; color: var(--hw-main-txt,#666); background-color: var(--hw-body-bg-cr,#ffffff); background-image: var(--hw-body-bg-img,none); background-size:var(--hw-body-bg-sz,auto); background-position:center center; background-repeat:var(--hw-body-bg-rp,no-repeat); width: 100%; left:0px; } body * { border-color: inherit; transition: var(--hw-tr); } body * { box-sizing: border-box } .hw-body-boxed .hw-wrapper-middle { margin: auto; } .hw-wrapper-container { float: left; width: 100%; } .hw-body-warp{ overflow:hidden; width:100%; float:left; } .hw-body-boxed .hw-body-warp{ text-align: left; overflow: hidden; max-width: var(--hw-body-wt); float: none; margin: auto; background:var(--hw-body-bx-bg,transparent); box-shadow:var(--hw-body-bx-sd-sz,0 0 0) var(--hw-body-bx-sd-cr,rgba(0,10,20,.05)); } .elementor-editor-active .hw-wrapper { z-index:9999!important; overflow: visible; } .hw-rand-1 { --hw-primary-bg: var(--hw-rand-bg-1,#1c95f2) ; --hw-primary-txt: var(--hw-rand-txt-2,#ffffff) ; } .hw-rand-2 { --hw-primary-bg: var(--hw-rand-bg-2,#f31c4a); --hw-primary-txt: var(--hw-rand-txt-2,#ffffff); } .hw-rand-3 { --hw-primary-bg: var(--hw-rand-bg-3,#ffb401); --hw-primary-txt: var(--hw-rand-txt-3,#ffffff); }.hw-rand-4 { --hw-primary-bg: var(--hw-rand-bg-4 ,#1a9e7a) ; --hw-primary-txt: var(--hw-rand-txt-4,#ffffff) ; } .hw-dark, body.hw-dark .hw-body-warp [class*="hw-el-"] *, body.hw-dark .hw-body-warp [class*="hw-el-"], body.hw-dark .hw-body-warp .elementor-element [class*="hw-el-"]{ --hw-body-bg-cr:var(--hw-dark-body-bg-cr); --hw-brmb-bg:var(--hw-dark-main-gry); --hw-brmb-txt:var(--hw-dark-main-txt); --hw-body-bx-bg:var(--hw-dark-body-bg-cr); --hw-body-bx-sd-cr:#00080f; --hw-head-sd-cr:#00080f; --hw-head-bg:var(--hw-dark-head-bg); --hw-head-lk:var(--hw-dark-head-lk); --hw-mast-bg:var(--hw-dark-mast-bg); --hw-mast-lk:var(--hw-dark-mast-lk); --hw-plus-bg:var(--hw-dark-plus-bg); --hw-plus-lk:var(--hw-dark-plus-lk); --hw-mobbar-bg:var(--hw-dark-body-bg-cr); --hw-mobbar-lk:var(--hw-dark-main-lk); --hw-logo-bg:var(--hw-dark-logo-bg,none); --hw-logo-tl-txt:#ffffff; --hw-logo-des-txt:var(--hw-primary-bg); --hw-nav-srh-txt-bg:var(--hw-dark-main-gry); --hw-nav-srh-txt-txt:var(--hw-dark-main-txt); --hw-nav-srh-cat-bg:var(--hw-dark-main-gry); --hw-nav-srh-cat-txt:var(--hw-dark-main-txt); --hw-nav-srh-br-cr:var(--hw-dark-main-br-cr); --hw-cat-menu-bg:var(--hw-primary-bg); --hw-cat-menu-txt:var(--hw-primary-txt); --hw-cat-sub-bg:var(--hw-dark-body-bg-cr); --hw-cat-sub-txt:var(--hw-dark-main-lk); --hw-cat-sub-br-cr:var(--hw-dark-main-br-cr); --hw-drp-bx-bg:var(--hw-dark-body-bg-cr); --hw-drp-tbox:var(--hw-dark-main-lk); --hw-drp-lk:var(--hw-dark-main-lk); --hw-drp-txt:var(--hw-dark-main-txt); --hw-drp-meta:var(--hw-dark-main-meta); --hw-drp-sd:var(--hw-dark-main-br-cr); --hw-drp-hv-sd:var(--hw-dark-main-br-cr); --hw-drp-br-cr:var(--hw-dark-main-br-cr); --hw-drp-gry:var(--hw-dark-main-gry); --hw-drp-bx-sd-cr:#00080f; --hw-drp-bx-br-cr:#00080f; --hw-drp-bx-sd-cr:var(--hw-dark-main-br-cr); --hw-post-bg:var(--hw-dark-post-bg); --hw-main-lk:var(--hw-dark-main-lk); --hw-main-txt:var(--hw-dark-main-txt); --hw-main-gry:var(--hw-dark-main-gry); --hw-main-br-cr:var(--hw-dark-main-br-cr); --hw-post-bg:var(--hw-dark-post-bg); --hw-post-tl-lk:var(--hw-dark-main-lk); --hw-e-tl-lk:var(--hw-dark-main-lk); --hw-expt-txt:var(--hw-dark-main-txt); --hw-meta-txt:var(--hw-dark-main-meta); --hw-post-sd:var(--hw-dark-main-br-cr); --hw-post-hv-sd:var(--hw-dark-main-br-cr); --hw-post-img-bg:var(--hw-dark-main-gry); --hw-tbox-main-txt:var(--hw-dark-main-lk); --hw-tbox-tab-txt:var(--hw-dark-main-txt); --hw-form-bg:var(--hw-dark-main-gry); --hw-form-txt:var(--hw-dark-main-txt); --hw-scl-txt:var(--hw-dark-main-txt); --hw-scl-bg:var(--hw-dark-main-gry); --hw-scl-br-cr:var(--hw-dark-main-br-cr); --hw-fot-bg:var(--hw-dark-fot-bg); --hw-fot-lk:var(--hw-dark-fot-lk); --hw-fot-tbox:var(--hw-dark-fot-lk); --hw-fot-lk:var(--hw-dark-fot-lk); --hw-fot-txt:var(--hw-dark-fot-txt); --hw-fot-meta:var(--hw-dark-fot-meta); --hw-fot-sd:var(--hw-dark-fot-br-cr); --hw-fot-hv-sd:var(--hw-dark-fot-br-cr); --hw-fot-br-cr:var(--hw-dark-fot-br-cr); --hw-fot-gry:var(--hw-dark-fot-gry); --sao-lk-cr:var(--hw-dark-main-lk); --sao-txt-cr:var(--hw-dark-main-txt); } html { margin-top:0px !important; } body.admin-bar { margin-top: 32px !important; } @media (max-width: 782px) { #wpadminbar { position: absolute !important; top: 0px !important; } html { margin-top: 0px !important; } body.admin-bar { margin-top: 46px !important; } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 1.2 - Html Tags ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Html Tags //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ :root{ --hw-btn-bg:var(--hw-primary-bg); --hw-btn-txt:var(--hw-primary-txt); --hw-btn-hv-bg:var(--hw-primary-hv-bg); --hw-btn-hv-txt:var(--hw-primary-txt); --hw-tr:transform .3s,background .3s ,color .3s ,border .3s ,box-shadow .3s ,opacity .3s; --sao-aw-bg:var(--hw-aw-bg,rgba(0,0,0,0.75)); --sao-aw-cr:var(--hw-aw-txt,#ffffff); } a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,excerpt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{ margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline } article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block } blockquote,q { quotes: none } blockquote:before,blockquote:after,q:before,q:after { content: ''; content: none } table { border-collapse: collapse; border-spacing: 0 } html { margin-top: 0!important } a { text-decoration: none; color: var(--hw-main-lk,#111); transition: var(--hw-tr); } a:hover { text-decoration: none; color: var(--hw-main-hv-lk,#111); } hr { opacity: .2 } h1,h2,h3,h4,h5,h6 { line-height: 1.45em; color: var(--hw-main-lk,#111); } pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; wohw-wrap: break-word; background: rgba(150, 150, 150, .05); padding: 20px; opacity: .8; margin-bottom: 20px; } sub { bottom: -0.25em; } sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } dl { padding: 0 20px; } p { margin-bottom: 20px } /* latin-ext */ br { margin-bottom: 1px; } p,hr,dd { margin-bottom: 25px; } p { wohw-wrap: break-word } dt { font-weight: 700 } dd { margin-bottom: 20px } address { font-style: italic; margin-bottom: 20px } h1 { font-size: 2.8179em; line-height: 1.4em } h2 { font-size: 2.2581em; line-height: 1.45em } h3 { font-size: 1.818em; line-height: 1.5em } h4 { font-size: 1.572em; } h5 { font-size: 1.3em; } h6 { font-size: 1.062em; } table,th,td { border: 1px solid var(--hw-main-br-cr); } table { border-collapse: collapse; border-spacing: 0; border-width: 1px 0 0 1px; width: 100%; margin-bottom: 20px } strong { font-weight: 700 } table,th,td { border: 1px solid var(--hw-main-br-cr); } caption,th,td { font-weight: 400; text-align: left } th { border-width: 1px; font-weight: 700 } td { border-width: 1px } th,td { vertical-align:top; padding: .4375em } .reset-list-style,.reset-list-style ul,.reset-list-style ol { list-style: none; margin: 0; } .reset-list-style li { margin: 0; } img{ max-width:100%; height:auto; } body tr,body td,body th,body tbody,body table{ border-color:var(--hw-main-br-cr) !important; } /* Quotes ------------------------------------ */ cite { color: var(--hw-main-txt); font-size: 16px; font-style: normal; font-weight: 600; line-height: 1.25; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 1.3 - Form ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Body //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ button,.button,.faux-button,.wp-block-button__link,.wp-block-file .wp-block-file__button,input[type="button"],input[type="reset"],input[type="submit"],#submit,table.cart .add_to_cart_button,.add_to_cart_button{ font-family:inherit; display: inline-block; padding:0.65em 1.3em ; vertical-align: middle; box-shadow: none; overflow: hidden; font-size: var(--hw-btn-fn-sz,15px); font-weight: var(--hw-btn-fn-wt,500); text-transform:var(--hw-btn-fn-tr,none); text-decoration: none; border:none ; color:var(--hw-primary-txt) ; background:var(--hw-primary-bg) ; text-align: center; cursor: pointer; line-height: 1.5em; height:auto; border-radius:var(--hw-main-btn-rd,var(--hw-btn-rd)); white-space: nowrap; min-height:var(--hw-input-ht,42px); transition: all 300ms linear; } button:hover,.button:hover,.faux-button:hover,body button.button:hover,.wp-block-button__link:hover,.wp-block-file .wp-block-file__button:hover,input[type="button"]:hover,input[type="reset"]:hover,input[type="submit"]:hover,#submit:hover,.add_to_cart_button{ background-color:var(--hw-primary-hv-bg) !important; } .is-style-outline .wp-block-button__link:not(.has-text-color) { color: var(--hw-main-hl) !important; } .is-style-outline > .wp-block-button__link:not(.has-background), .wp-block-button__link.is-style-outline:not(.has-background) { background-color: transparent !important; } .wp-block-button { margin: 20px 0; } input[type="email"],input[type="password"],input[type="search"],input[type="text"],input[type="url"],textarea { padding:0 1.214em ; width: 100%; border-radius:var(--hw-btn-rd); line-height: 1.336em; } label{ font-size: var(--hw-form-fn-sz,15px); font-weight: var(--hw-form-fn-wt,400); text-transform:var(--hw-form-fn-tr,none); color: var(--hw-main-lk,#626568); line-height: 1.5em; display: inline-block; vertical-align:middle; margin-bottom: 0px; } input { border: 0 none; font-family: inherit; color:var(--hw-form-txt,var(--hw-main-txt,inherit)); font-size: var(--hw-form-fn-sz,15px); font-weight: var(--hw-form-fn-wt,400); text-transform:var(--hw-form-fn-tr,none); padding: 0 10px; font-family:inherit; display: block; text-align:left; line-height: var(--hw-input-ht,42px); height: var(--hw-input-ht,42px); min-height: var(--hw-input-ht,42px); border-radius:var(--hw-main-btn-rd,var(--hw-btn-rd)); border:none !important; box-shadow: 0 0 0 2px var(--hw-main-br-cr) inset; background: var(--hw-form-bg,var(--hw-post-bg)); } input[type="checkbox"], input[type="radio"]{ width: auto; margin-right: 10px; box-shadow: none !important; display: block; height: auto; display: inline; min-height: auto; padding: 0px; margin-top: auto; margin-bottom: auto; vertical-align: middle; height: 1.5em; } textarea { padding: 10px; border-radius: 0px; height:var(--hw-textarea-ht,200px); border-radius:var(--hw-main-rd); background: var(--hw-form-bg,var(--hw-post-bg)); font-family: inherit; border:none !important; box-shadow: 0 0 0 2px var(--hw-main-br-cr) inset !important; max-width: 100%; color:var(--hw-form-txt,var(--hw-main-txt,inherit)); font-size: var(--hw-form-fn-sz,15px); line-height:2em; font-weight: var(--hw-form-fn-wt,400); text-transform:var(--hw-form-fn-tr,none); display: block; } select { padding: 0px 25px 0 10px; line-height: 40px; overflow:hidden; font-size: var(--hw-form-fn-sz,15px); font-weight: var(--hw-form-fn-wt,400); text-transform:var(--hw-form-fn-tr,none); -webkit-appearance: none; max-width: 100%; cursor: pointer; text-align:left; -moz-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23788898%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-color: var(--hw-form-bg,var(--hw-post-bg)); background-size:10px; height: var(--hw-input-ht,42px); min-height: var(--hw-input-ht,42px); border-radius:var(--hw-btn-rd); line-height: var(--hw-input-ht,42px); color:var(--hw-form-txt,var(--hw-main-txt,inherit)); background-position: right 10px center; border:none !important; box-shadow: 0 0 0 2px var(--hw-main-br-cr,rgba(118, 128, 138, 0.15)) inset; font-family: inherit; } textarea:focus-visible,select:focus-visible,input:focus-visible{ outline:none !important; border:none !important; box-shadow:0 0 0 2px var(--hw-main-hl) inset !important; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 1.4 - Content ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-wrapper{ width:100%; float:left; overflow:hidden; text-align:center; margin-top: calc(var(--hw-overlab-ht,0px) * -1); } .single-visualheader .hw-wrapper{ height:700px; } .hw-wrapper > *{ text-align:left } .hw-content-warp{ width:100%; float:left; text-align:center } .hw-middle-content{ text-align:left; position:relative; max-width:var(--hw-body-wt); float:none; margin:auto; padding:20px 0; width:100%; display:inline-block } .hw-content{ display:inline-grid; width:100%; float:left; grid-template-columns:100%; position:relative } .hw-column-sidebar{ height:100%; float:left } .hw-sidebar{ float:left; height:auto; width:100% } body .elementor-section.elementor-section-boxed > .elementor-container{ max-width:var(--hw-body-wt) } .hw-main_right{ grid-template-columns:calc(100% - var(--hw-side-rt)) var(--hw-side-rt); } .hw-left_main{ grid-template-columns:calc(100% - var(--hw-side-lt)) var(--hw-side-lt); direction:rtl } .hw-main_left_right{ grid-template-columns:calc(100% - var(--hw-side-lt) - var(--hw-side-rt)) var(--hw-side-lt) var(--hw-side-rt); } .hw-left_main_right{ grid-template-columns:var(--hw-side-lt) calc(100% - var(--hw-side-lt) - var(--hw-side-rt)) var(--hw-side-rt); } .hw-left_right_main{ grid-template-columns:calc(100% - var(--hw-side-lt) - var(--hw-side-rt)) var(--hw-side-rt) var(--hw-side-lt); direction:rtl } .hw-content > *{ direction:ltr } @media (max-width: 1024px) and (min-width: 768px) { :root{ --hw-side-rt:33.331%; --hw-side-lt:33.331% } } @media (max-width: 1024px) { .hw-hide-sidebar .hw-content{ --hw-side-rt:0!important; --hw-side-lt:0!important; grid-template-columns:100%!important } .hw-main_left_right,.hw-left_main_right,.hw-left_right_main{ --hw-side-rt:0!important; grid-template-columns:calc(100% - var(--hw-side-lt)) var(--hw-side-lt)!important } .hw-main_left_right .hw-sidebar-right,.hw-left_main_right .hw-sidebar-right,.hw-left_right_main .hw-sidebar-right,.hw-hide-sidebar .hw-column-sidebar{ display:none!important } } @media (max-width: 767px) { .hw-content{ grid-template-columns:100%!important } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 1.5 - Column Warp ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Column Warp ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ :root{ --hw-col:100%; --hw-tab:100%; --hw-mob:100%; --hw-flx:1; --hw-flx-tab:1; --hw-flx-mob:1 } .hw-list-warp{ width:100%; float:left } .hw-item-list{ float:left; width:100%; position:relative } .hw-flex{ display:grid; width:100%; grid-template-columns:repeat(var(--hw-flx,1),1fr); position:relative } .hw-flex > .hw-column{ width:100%!important } .hw-not-mobile-list > .hw-item:nth-child(n + 2){ padding:0px !important; } .hw_row_2 .hw-item-list > .hw-item, .hw_row_3 .hw-item-list > .hw-item{ padding:0px !important; display:grid !important; } .hw-group > .hw-item,.hw-column,.hw-masonry > .hw-item{ width:var(--hw-col,100%); float:left } .hw-gap-content, .hw-gap-slider{ width:100%; float:left; position:relative; } .hw-item{ padding:calc(var(--hw-gp,0px) / 2); --hw-it-col:1; width:100%; display:flex } .hw_col_1_1{ --hw-col:100%; --hw-flx:1; --hw-flx-col:100% } .hw_col_1_2{ --hw-col:50%; --hw-flx:2; --hw-flx-col:50% 50% } .hw_col_1_3{ --hw-col:33.331%; --hw-flx:3; --hw-flx-col:33.331% 33.331% 33.331% } .hw_col_1_3_2_3{ --hw-flx-col:33.331% 66.661% } .hw_col_2_3{ --hw-flx:1.5; --hw-flx-col:66.661% 33.331% } .hw_col_1_4{ --hw-col:25%; --hw-flx:4; --hw-flx-col:25% 25% 25% 25% } .hw_col_3_4{ --hw-flx:1.331; --hw-flx-col:75% 25% } .hw_col_1_4_3_4{ --hw-flx-col:25% 75% } .hw_col_1_5{ --hw-it-col:.2; --hw-col:20%; --hw-flx:5; --hw-flx-col:20% 20% 20% 20% 20% } .hw_col_1_5_4_5{ --hw-flx-col:20% 80% } .hw_col_4_5{ --hw-flx-col:80% 20% } .hw_col_2_5{ --hw-it-col:.4; --hw-flx:2.5; --hw-col:40%; }.hw_col_3_5{ --hw-it-col:.6; --hw-col:60%; --hw-flx:1.66; --hw-flx-col:60% 40% } .hw_col_2_5_3_5{ --hw-flx-col:40% 60% } .hw_col_1_6{ --hw-col:16.661%; --hw-flx:6; --hw-flx-col:16.661% 16.661% 16.661% 16.661% 16.661% 16.661% } .hw_col_1_6_5_6{ --hw-flx-col:16.661% 83.339% } .hw_col_5_6{ --hw-flx-col:83.331% 16.661% } .hw_col_1_7{ --hw-col:14.281%; --hw-flx:7 } .hw_col_1_8{ --hw-col:12.5%; --hw-flx:8 } .hw_col_1_9{ --hw-col:11.11%; --hw-flx:9 } .hw_col_1_10{ --hw-col:10%; --hw-flx:10 } .hw_col_1_11{ --hw-col:9.09%; --hw-flx:9 } .hw_col_1_12{ --hw-col:8.33%; --hw-flx:12 } .hw_col_400{ --hw-drg-col:400px } .hw_col_350{ --hw-drg-col:350px } .hw_col_300{ --hw-drg-col:300px } .hw_col_250{ --hw-drg-col:250px } .hw_col_200{ --hw-drg-col:200px } .hw_col_150{ --hw-drg-col:150px } @media (min-width: 1024px) { .hw_col_hide{ display:none!important } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Tablet //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ @media (max-width: 1024px) and (min-width: 768px) { .hw-flex,.hw-pricetable .hw-flex.hw-item-list { display:grid!important; grid-template-columns:repeat(var(--hw-flx-tab,1),1fr)!important } .hw-flex > .hw-column{ width:100%!important } .hw-group > .hw-item, .hw-column,.hw-flex.hw-item-list > .hw-item, .hw-masonry > .hw-item, .hw-not-mobile-list > .hw-item > .hw-item{ width:var(--hw-tab,100%)!important } .hw-not-mobile-list.hw-item-list > .hw-item{ width:100% !important; } .hw-not-mobile-list > .hw-item:nth-child(n + 2), .hw-flex.hw-item-list{ display:flex!important; justify-content:center!important; flex-flow:wrap!important } .hw_tab_1_1{ --hw-tab:100%; --hw-flx-tab:1 } .hw_tab_1_2{ --hw-tab:50%; --hw-flx-tab:2 } .hw_tab_1_3{ --hw-tab:33.331%; --hw-flx-tab:3 } .hw_tab_1_4{ --hw-tab:25%; --hw-flx-tab:4 } .hw_tab_hide{ display:none!important } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Tablet //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ @media (max-width: 767px) { .hw-flex,.hw-pricetable .hw-flex.hw-item-list { display:grid!important; grid-template-columns:repeat(var(--hw-flx-mob,1),1fr)!important } .hw-flex > .hw-column{ width:100%!important } .hw-group > .hw-item,.hw-column,.hw-flex.hw-item-list > .hw-item,.hw-masonry > .hw-item, .hw-not-mobile-list > .hw-item > .hw-item{ width:var(--hw-mob,100%)!important } .hw-not-mobile-list.hw-item-list > .hw-item{ width:100% !important; } .hw-not-mobile-list > .hw-item:nth-child(n + 2), .hw-flex.hw-item-list{ display:flex!important; justify-content:center!important; flex-flow:wrap!important } .hw_mob_1_1{ --hw-mob:100%; --hw-flx-mob:1 } .hw_mob_1_2{ --hw-mob:50%; --hw-flx-mob:2 } .hw_mob_1_3{ --hw-mob:33.331%; --hw-flx-mob:3 } .hw_mob_1_4{ --hw-mob:25%; --hw-flx-mob:4 } .hw_mob_hide{ display:none!important } } @media (max-width: 359px) { .hw-flex,.hw-pricetable .hw-flex.hw-item-list{ display:grid!important; grid-template-columns:repeat(1,1fr)!important } .hw-group > .hw-item,.hw-column,.hw-flex.hw-item-list > .hw-item,.hw-masonry > .hw-item{ width:100%!important } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Gap Warp //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ [class*="hw-el"]{ --hw-gp:var(--hw-between-gap,40px); } [class*="hw-bw-border"]{ --hw-gp:calc(var(--hw-between-gap,40px) * 2); } .hw-gap-warp{ width:calc(100% + var(--hw-gp,0px))!important; margin:calc(var(--hw-gp,0px) / -2); float:left; position:relative } .hw-gap-0px{ --hw-between-gap:0px !important; } .hw-gap-2px{ --hw-between-gap:2px!important; } .hw-gap-5px{ --hw-between-gap:5px!important; } .hw-gap-10px{ --hw-between-gap:10px!important; } .hw-gap-15px{ --hw-between-gap:15px!important; } .hw-gap-20px{ --hw-between-gap:20px!important; } .hw-gap-30px{ --hw-between-gap:30px!important; --hw-gp-sp:0 } .hw-gap-40px{ --hw-between-gap:40px!important; } .hw-gap-60px{ hw-between-gap:60px!important; } @media (max-width: 1024px) { .hw-gap-20px,.hw-gap-30px{ --hw-between-gap:10px!important; } .hw-gap-40px,.hw-gap-60px{ hw-between-gap:20px!important; } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 1.6 - Responsvie ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Repsonsive //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-aw{ visibility:hidden!important } .hw-150{ visibility:visible!important; --hw-fn-icn:35px; --hw-fn-lg:12px; --hw-fn-md:11px; --hw-fn-sm:11px; --hw-fn-lg-li-ht:4px; --hw-fn-md-li-ht:1.65em; --hw-mg-tp:7px; --hw-pd:13px; --hw-tm-img:70px; --hw-dp:none; --hw-dp-2:none; --hw-dp-3:none; --hw-dp-4:inline-block; --hw-meta-icn:25px; } .hw-200{ visibility:visible!important; --hw-fn-icn:40px; --hw-fn-lg:13px; --hw-fn-md:11px; --hw-fn-sm:11px; --hw-fn-lg-li-ht:6px; --hw-fn-md-li-ht:1.65em; --hw-mg-tp:7px; --hw-pd:13px; --hw-tm-img:70px; --hw-dp:none; --hw-dp-2:none; --hw-dp-3:none; --hw-dp-4:inline-block; --hw-meta-icn:25px; } .hw-250{ visibility:visible!important; --hw-fn-icn:45px; --hw-fn-lg:14px; --hw-fn-md:12px; --hw-fn-sm:11px; --hw-fn-lg-li-ht:7px; --hw-fn-md-li-ht:1.7em; --hw-mg-tp:8px; --hw-pd:14px; --hw-dp:none; --hw-dp-2:none; --hw-dp-3:inline-block; --hw-dp-4:inline-block; --hw-meta-icn:30px; } .hw-300{ visibility:visible!important; --hw-fn-icn:55px; --hw-fn-lg:16px; --hw-fn-md:12px; --hw-fn-sm:11px; --hw-fn-lg-li-ht:8px; --hw-fn-md-li-ht:1.7em; --hw-mg-tp:8px; --hw-tm-img:80px; --hw-pd:15px; --hw-dp:none; --hw-dp-2:inline-block; --hw-dp-3:inline-block; --hw-meta-icn:35px; } .hw-400{ visibility:visible!important; --hw-fn-icn:65px; --hw-fn-lg:18px; --hw-fn-md:13px; --hw-fn-sm:12px; --hw-fn-lg-li-ht:8px; --hw-fn-md-li-ht:1.7em; --hw-mg-tp:9px; --hw-tm-img:90px; --hw-pd:18px; --hw-dp:inline-block; --hw-dp-2:inline-block; --hw-dp-3:inline-block; --hw-dp-4:inline-block; --hw-meta-icn:45px; } .hw-500{ visibility:visible!important; --hw-fn-icn:75px; --hw-fn-lg:20px; --hw-fn-md:14px; --hw-fn-sm:12px; --hw-tm-img:100px; --hw-fn-lg-li-ht:8px; --hw-fn-md-li-ht:1.7em; --hw-mg-tp:10px; --hw-pd:20px; --hw-dp:inline-block; --hw-dp-4:inline-block; --hw-dp-2:inline-block; --hw-dp-3:inline-block; --hw-meta-icn:55px; } .hw-700{ visibility:visible!important; --hw-fn-icn:85px; --hw-fn-lg:24px; --hw-fn-md:15px; --hw-img-icn:72; --hw-fn-sm:13px; --hw-tm-img:100px; --hw-fn-lg-li-ht:9px; --hw-fn-md-li-ht:1.75em; --hw-mg-tp:10px; --hw-pd:20px; --hw-dp:inline-block; --hw-dp-2:inline-block; --hw-dp-3:inline-block; --hw-dp-4:inline-block; --hw-meta-icn:70px; } .hw-900{ visibility:visible!important; --hw-fn-icn:95px; --hw-fn-lg:27px; --hw-fn-md:16px; --hw-fn-sm:14px; --hw-fn-lg-li-ht:10px; --hw-fn-md-li-ht:1.8em; --hw-mg-tp:10px; --hw-pd:25px; --hw-tm-img:100px; --hw-dp:inline-block; --hw-dp-2:inline-block; --hw-dp-3:inline-block; --hw-dp-4:inline-block; --hw-meta-icn:85px; } .hw-1200{ visibility:visible!important; --hw-fn-icn:105px; --hw-fn-lg:32px; --hw-mg-tp:10px; --hw-fn-md:18px; --hw-tm-img:120px; --hw-fn-sm:15px; --hw-fn-lg-li-ht:12px; --hw-fn-md-li-ht:1.85em; --hw-pd:30px; --hw-dp:inline-block; --hw-dp-2:inline-block; --hw-dp-3:inline-block; --hw-dp-4:inline-block; --hw-meta-icn:105px; } :root{ visibility:visible!important; --hw-fn-icn:75px; --hw-fn-lg:20px; --hw-fn-md:14px; --hw-fn-sm:12px; --hw-tm-img:100px; --hw-fn-lg-li-ht:12px; --hw-fn-md-li-ht:1.8em; --hw-mg-tp:14px; --hw-pd:22px; --hw-dp:inline-block; --hw-dp-4:inline-block; --hw-dp-2:inline-block; --hw-dp-3:inline-block; } @media (max-width: 1024px) and (min-width: 768px) { :root{ visibility:visible!important; --hw-fn-icn:65px; --hw-fn-lg:18px; --hw-fn-md:13px; --hw-fn-sm:12px; --hw-fn-md-li-ht:1.8em; --hw-mg-tp:13px; --hw-tm-img:90px; --hw-pd:20px; --hw-dp:none; --hw-dp-2:inline-block; --hw-dp-3:inline-block; --hw-fn-lg-li-ht:12px; } } @media (max-width: 767px) and (min-width: 500px) { :root{ visibility:visible!important; --hw-fn-icn:55px; --hw-fn-lg:16px; --hw-fn-md:13px; --hw-fn-sm:11px; --hw-fn-md-li-ht:2em; --hw-mg-tp:12px; --hw-tm-img:80px; --hw-pd:15px; --hw-cd:3; --hw-dp:none; --hw-dp-2:none; --hw-dp-3:inline-block; --hw-fn-lg-li-ht:12px; } } @media (max-width: 500px){ :root{ visibility:visible!important; --hw-fn-icn:45px; --hw-fn-lg:13px; --hw-fn-md:12px; --hw-fn-sm:11px; --hw-fn-md-li-ht:2em; --hw-mg-tp:10px; --hw-pd:12px; --hw-cd:2.7; --hw-tm-img:70px; --hw-dp:none; --hw-dp-2:none; --hw-dp-3:none; --hw-dp-4:inline-block; --hw-fn-lg-li-ht:12px; } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 1.7 - Breadcrumbs ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Breadcrumbs ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-breadcrumbs { width: 100%; float:left; background:var(--hw-brmb-bg); margin-bottom: 0px; text-align:center; position:relative; padding: 0 ; } .hw-breadcrumbs > ul{ max-width:var(--hw-body-wt); display:inline-block; text-align:left; width: 100%; margin:auto; padding:var(--hw-default-pd); vertical-align: top; } .hw-breadcrumbs li { float: left; margin: 0px; color:var(--hw-brmb-txt); display: inline-block; padding-right: 10px } .hw-breadcrumbs li a{ color:inherit; } .hw-breadcrumbs li strong { font-weight: 400; opacity: .75; color:inherit; } .hw-breadcrumbs li a:hover{ color:var(--hw-main-hv-lk); } .hw-single-template-7 .hw-breadcrumbs{ background: var(--hw-body-bg-cr); } .hw-single-template-7 .hw-breadcrumbs::before{ content:""; position:absolute; width:100%; height:100%; left:0px; background:var(--hw-brmb-bg); top:0px; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 1.8 - Footer ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Footer ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ #hw-footer { z-index: 0 !important; float: left; width: 100%; position: relative; color:var(--hw-main-txt); background:var(--hw-fot-bg); text-align:center; --hw-main-lk:var(--hw-fot-lk); --hw-main-txt:var(--hw-fot-txt); --hw-main-hl:var(--hw-main-hl); --hw-main-gry:var(--hw-fot-gry); --hw-main-br-cr:var(--hw-fot-br-cr); --hw-tbox-main-bg:var(--hw-fot-gry); --hw-tbox-main-txt:var(--hw-fot-tbox); --hw-tbox-tab-bg:var(--hw-fot-gry); --hw-tbox-tab-txt:var(--hw-fot-txt); --hw-tbox-atv-bg:var(--hw-fot-gry); --hw-tbox-atv-txt:var(--hw-main-hl); --hw-tbox-br-cr:var(--hw-fot-br-cr); --hw-post-bg:var(--hw-fot-bg); --hw-post-tl-lk:var(--hw-fot-lk); --hw-post-tl-hv-lk:var(--hw-main-hv-lk); --hw-expt-txt:var(--hw-fot-txt); --hw-meta-txt:var(--hw-fot-meta); --hw-post-sd:var(--hw-fot-sd); --hw-post-hv-sd:var(--hw-fot-hv-sd); --sao-lk-cr:var(--hw-fot-lk); --sao-hv-lk-cr:var(--hw-main-hv-lk); --sao-txt-cr:var(--hw-fot-txt); --sao-ex-cr:var(--hw-fot-txt); --sao-hl:var(--hw-main-hl); --sao-br-cr:var(--hw-fot-br-cr); background-image:var(--hw-fot-bg-img); background-position:center; background-repeat: no-repeat; z-index:0; background-size:cover; background-attachment:fixed; } #hw-footer::before{ content:""; background:var(--hw-fot-bg); position:absolute; top:0px; left:0px; height:100%; width:100%; } .hw-middle-footer{ margin:auto; z-index:1; position:relative; padding:20px 0px; max-width:var(--hw-body-wt); width:100%; text-align:left; } .hw-footer-bottom{ text-align: center; width: 100%; position:relative; float: left; border-top: solid 1px var(--hw-main-br-cr); background: rgba(118, 128, 138, 0.1); } .hw-footer-bottom .hw-middle-footer{ text-align:center; padding:20px; } .hw-footer-not-center .hw-middle-footer{ grid-template-columns: auto auto; display:grid; text-align:left; } .hw-footer-not-center .hw-footer-social{ --hw-ag:right; margin-top: auto; margin-bottom: auto; } .hw-footer-social.hw-social-icon-style-1{ --hw-scl-sz:20px; } .hw-footer-social.hw-social-icon-style-3,.hw-footer-social.hw-social-icon-style-2{ --hw-scl-sz:30px; --hw-scl-br-cr:var(--hw-main-br-cr); } #hw-footer .hw-tbox-style-6 [class*="hw-tab-"], #hw-footer .hw-tbox-style-7 [class*="hw-tab-"]{ padding:0.3em 0px !important; border:none !important; } #hw-footer .hw-tbox-style-8 h4{ padding:0px !important; } #hw-footer .hw-tbox-style-6 [class*="hw-tab-"]::before, #hw-footer .hw-tbox-style-7 [class*="hw-tab-"]::before, #hw-footer .hw-tbox-style-8 h4::before{ border:none !important; background:none !important; }.hw-page-top-builder, .hw-footer-page-builder{ float: left; width: 100%; position: relative; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 2 - Header ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 2.1 - Header Content ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Header Content ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ header[class*="hw-bar"] { z-index: 100; float: left; width: 100%; margin:0px !important; box-shadow: var(--hw-head-sd-sz,0 0 15px 0px) var(--hw-head-sd-cr,rgba(0,20,40,0.1)); position: relative; min-height: var(--hw-header-ht,auto); align-items: end; --rd-tr:none!important; display: grid; grid-template-columns: 100%; } header[class*="hw-bar-logo-"]{ display:flex; } [class*="hw-toolbar-"] { border-left: 0; border-radius: 0; z-index: 1; float: left; position:relative; box-shadow: 0px -1px 0px 0px rgba(128, 128, 128, 0.1) inset; width: 100%; min-height:var(--hw-nav-ht,80px); background:var(--hw-nav-bg,#ffffff); z-index:var(--hw-nav-z,999999); } .hw-header-full-width,.hw-flex-bar{ width:100%; --hw-body-wt:100%; } .hw-middle-toolbar{ max-width:var(--hw-body-wt,1200px); display:block; margin:auto; min-height:var(--hw-nav-ht,#ffffff); vertical-align:top; } .hw-toolbar-header{ --hw-nav-bg:var(--hw-head-bg); --hw-nav-ht:var(--hw-head-ht); --hw-nav-z:var(--hw-head-z); --hw-nav-md-ht:60px; --hw-nav-menu-pd:var(--hw-head-menu-pd); --hw-nav-pd:20px; --hw-nav-lk:var(--hw-head-lk); --hw-nav-fn-sz:var(--hw-head-fn-sz); --hw-nav-fn-wt:var(--hw-head-fn-wt); --hw-nav-fn-tr:var(--hw-head-fn-tr); --hw-nav-hv-lk:var(--hw-head-hv-lk); --hw-nav-icn-sz:var(--hw-head-icn-sz,2.25em); --hw-nav-icn-mr:10px; } .hw-toolbar-masthead{ --hw-nav-bg:var(--hw-mast-bg); --hw-nav-ht:var(--hw-mast-ht); --hw-nav-z:var(--hw-mast-z); --hw-nav-md-ht:var(--hw-mast-ht); --hw-nav-menu-pd:var(--hw-main-menu-pd); --hw-nav-pd:20px; --hw-nav-lk:var(--hw-mast-lk); --hw-nav-hv-lk:var(--hw-mast-hv-lk); --hw-nav-fn-sz:var(--hw-mast-fn-sz); --hw-nav-fn-wt:var(--hw-mast-fn-wt); --hw-nav-fn-tr:var(--hw-mast-fn-tr); --hw-nav-icn-sz:var(--hw-mast-icn-sz,1.5em); --hw-nav-icn-mr:10px; } .hw-toolbar-navplus{ --hw-nav-bg:var(--hw-plus-bg); --hw-nav-ht:var(--hw-plus-ht); --hw-nav-z:var(--hw-plus-z); --hw-nav-md-ht:var(--hw-plus-ht); --hw-nav-menu-pd:var(--hw-plus-menu-pd); --hw-nav-pd:20px; --hw-nav-lk:var(--hw-plus-lk); --hw-nav-hv-lk:var(--hw-plus-hv-lk); --hw-nav-fn-sz:var(--hw-plus-fn-sz); --hw-nav-fn-wt:var(--hw-plus-fn-wt); --hw-nav-fn-tr:var(--hw-plus-fn-tr); --hw-nav-icn-sz:var(--hw-plus-icn-sz,1.5em); --hw-nav-icn-mr:10px; } .hw-toolbar-mobile{ --hw-nav-ht:55px !important; --hw-nav-md-ht:55px !important; --hw-nav-pd:20px!important; position:relative ; width:100%; float:left; left:0px; --hw-nav-fn-sz:15px !important; --hw-nav-icn-sz:2em; } .hw-toolbar-mobile{ display:none !important; } @media (min-width: 1025px) { header[class*="hw-bar"].hw-header-transparent{ position:absolute; top:0px; } header[class*="hw-bar"].hw-header-transparent:not(.hw-sticky-enable) [class*="hw-toolbar-"]:not(.hw-sticky-enable){ --hw-nav-bg:var(--hw-tr-bg) !important; --hw-nav-lk:var(--hw-tr-lk) !important; --hw-nav-hv-lk:var(--hw-tr-hv-lk) !important; } } @media (max-width: 1024px) { header[class*="hw-bar"]{ --hw-header-ht:55px; } [class*="hw-toolbar-"],header[class*="hw-bar-logo-"] > .hw-nav-logo,header[class*="hw-bar-logo-"] > .hw-flex-bar{ display: none !important; } .hw-toolbar-mobile[class*="hw-toolbar-"]{ display:inline-block !important; overflow:hidden !important; } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 2.2 - Header Sticky ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Header Sticky ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ body .hw-sticky-start{ top:calc(var(--hw-sticky-ht,80px) * -1) !important; transition:top 350ms linear; } .hw-sticky-parant{ height:calc(var(--hw-plus-ht,0px) + var(--hw-mast-ht,0px) + var(--hw-head-ht,0px)); float:left; width:100% !important; } body .hw-sticky-enable { --hw-nav-ht:var(--hw-sticky-ht,80px); --hw-nav-md-ht:var(--hw-sticky-ht,80px); --hw-tbar-bg: var(--hw-sticky-ht,80px); --hw-tbar-ht:var(--hw-sticky-ht,80px); position: fixed; width: 100%; display:inline-block; top: 0px !important; right: 0; left:0px; margin-top:var(--hw-sticky-mg,0px) !important; z-index: 9999999; align-items: normal; box-shadow: var(--hw-head-sd-sz,0 0 15px 0px) var(--hw-head-sd-cr,rgba(0,20,40,0.1)); } header.hw-sticky-enable{ display:flex; margin: var(--hw-sticky-mg,0px) 0px 0px 0px!important; align-items: end !important; --hw-head-sticky-ht:var(--hw-sticky-ht,80px) !important; } header.hw-sticky-enable .hw-toolbar-masthead { --hw-nav-ht:var(--hw-sticky-ht,80px) !important; --hw-nav-md-ht:var(--hw-sticky-ht,80px)!important; } header.hw-sticky-enable[class*="hw-bar-logo-"]{ min-height:var(--hw-sticky-ht,80px) !important; } .hw-sticky-enable.hw-toolbar-masthead { height:var(--hw-sticky-ht,80px) !important; } header.hw-sticky-enable .hw-toolbar-navplus{ display:none !important; } @media (max-width:1024px) { body .hw-sticky{ --hw-sticky-ht:55px!important; } .hw-sticky-parant{ height:55px!important; } } @media (max-width: 782px) { body .hw-sticky-enable { margin-top: 0px !important; } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 2.2 - Header Nav ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Header Nav ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ body [class*='hw-nav']{ display:flex !important; } [class*='hw-nav'] { height:var(--hw-nav-ht); float: left; margin: 0px !important; font-size:var(--hw-nav-fn-sz,16px); width: auto!important; top: 0!important; display: flex; align-items: center; } [class*='hw-nav']:hover { z-index: 999999999 !important; } [class*='hw-nav'].hw-nav-right { float: right } [class*='hw-nav'].hw-nav-left { float: left; } [class*='hw-nav'].hw-nav-center{ margin:auto !important; float:none !important; align-content: stretch; justify-content: center; flex-grow: 1; float:none !important; flex-flow: row wrap; } [class*='hw-nav'] > *{ float:left; list-style:none; position:relative; height:var(--hw-nav-md-ht); margin:0px !important; padding:0px !important; } [class*='hw-nav'] > * > a,[class*='hw-nav'] > * > span { font-style: normal; display: inline-block; padding:0 var(--hw-nav-pd,20px); line-height:var(--hw-nav-md-ht); float: left; cursor: pointer; position: relative; font-size:var(--hw-nav-fn-sz); font-weight:var(--hw-nav-fn-wt,700); color:var(--hw-nav-lk,#000000) ; text-align: left; text-transform: var(--hw-nav-fn-tr); height:100%; } [class*='hw-nav'] > * > span{ cursor:text; } [class*='hw-nav'] > *:hover > a { color:var(--hw-nav-hv-lk) ; } [class*='hw-nav'] > * > a::before,[class*='hw-nav'] > * > span::before,.hw-drop > li > a::before{ vertical-align: top; color:inherit ; font-style:normal; float:left; font-size:var(--hw-nav-icn-sz,1.5em) ; font-weight:400 ; } [class*='hw-nav'] .hw-twoline{ display: grid; grid-template-columns: 100%; height:calc(2.2em + 8px); } [class*='hw-nav'] .hw-twoline > span{ line-height: 1.1em; } [class*='hw-nav'] .hw-twoline > span:first-child{ opacity:0.7; font-size:0.9em !important; font-weight:400 !important; margin-bottom:8px; } .hw-nav-login-text-2 > li > a, .hw-nav-call-title > li > span, .hw-nav-contact-title > li > span, .hw-nav-cart-show-price-cart .widget_shopping_cart_content > a, .hw-nav-wish-text-2 > li > a { display:grid; grid-template-columns: auto auto; align-items: center; } .hw-nav-login-text-2 > li > a::before, .hw-nav-call-title > li > span::before, .hw-nav-contact-title > li > span::before, .hw-nav-cart-show-price-cart .widget_shopping_cart_content > a::before , .hw-nav-wish-text-2 > li > a::before{ opacity:.5; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Drop ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-drop { background-color:var(--hw-drp-bx-bg); border-style:solid; border-width:var(--hw-drp-bx-br-wt); border-color:var(--hw-drp-bx-br-cr); box-shadow:var(--hw-drp-bx-sd-sz,0 0) var(--hw-drp-bx-sd-cr,none); border-radius:var(--hw-drp-bx-rd,0px); margin:calc(var(--hw-nav-md-ht) + 10px) 0 0 !important; height: auto ; float: left; position: absolute; width: var(--hw-drp-wt,250px); z-index: 9999999999; left: 00px; opacity:0; transition:margin 350ms,opacity 350ms,transform 0ms ease 350ms; transform: rotateX(-90deg); padding:var(--hw-drp-pd,10px 0px); --hw-main-lk:var(--hw-drp-lk); --hw-main-hv-lk:var(--hw-drp-hv-lk); --hw-main-txt:var(--hw-drp-txt); --hw-main-hl:var(--hw-drp-hl); --hw-main-gry:var(--hw-drp-gry); --hw-main-br-txt:var(--hw-drp-br-cr); --hw-tbox-main-bg:var(--hw-drp-gry); --hw-tbox-main-txt:var(--hw-drp-tbox); --hw-tbox-tab-bg:var(--hw-drp-gry); --hw-tbox-tab-txt:var(--hw-drp-txt); --hw-tbox-atv-bg:var(--hw-drp-gry); --hw-tbox-atv-txt:var(--hw-drp-hl); --hw-tbox-br-cr:var(--hw-drp-br-cr); --hw-post-bg:var(--hw-drp-bg); --hw-post-tl-lk:var(--hw-drp-lk); --hw-post-tl-hv-lk:var(--hw-drp-hv-lk); --hw-price-ma-txt:var(--hw-drp-lk); --hw-price-sa-txt:var(--hw-drp-hl); --hw-price-re-txt:var(--hw-drp-meta); --hw-expt-txt:var(--hw-drp-txt); --hw-meta-txt:var(--hw-drp-meta); --hw-rat-no-cr:rgba(118,128,138,0.1); --hw-post-sd:var(--hw-drp-sd); --hw-post-hv-sd:var(--hw-drp-hv-sd); --sao-lk-cr:var(--hw-drp-lk); --sao-hv-lk-cr:var(--hw-drp-hv-lk); --sao-txt-cr:var(--hw-drp-txt); --sao-ex-cr:var(--hw-drp-txt); --sao-hl:var(--hw-drp-hl); --sao-br-cr:var(--hw-drp-br-cr); } .hw-drop.hw-not-pointer *, .hw-drop.hw-not-pointer{ pointer-events: none !important; } [class*='hw-nav'].hw-nav-right:not(.menu) .hw-drop{ right: 0px; left:auto; } [class*='hw-nav'] .hw-drop.hw-menu-inverse{ right: 0px; left:var(--hw-menu-rt,auto); } [class*='hw-nav'] *:hover > .hw-drop{ transition:margin 350ms,opacity 350ms,transform 0ms; transform: rotateX(0deg); opacity:1!important; margin-top:var(--hw-nav-md-ht) !important; } [class*='hw-nav'] .hw-drop > li { padding: 0px !important; margin: 0px !important; width: 100%; list-style:none ; position:relative; float: left; } .hw-drop > li > a { width: 100%; float: left; text-align: left; position: relative; font-size:var(--hw-drp-fn-sz,14px); font-weight:var(--hw-drp-fn-wt,400); text-transform:var(--hw-drp-fn-tr,none); line-height: 1.5em; color:var(--hw-drp-lk); padding:10px 20px; } *:not(.hw-menu-section) .hw-drop > li:hover > a { color:var(--hw-drp-hv-lk) ; } body ul.hw-drop > li > ul.hw-drop{ right: 0 !important; left: 100% !important; top: 0 !important; transform: rotateX(-90deg); margin:0px 50px 0 0 !important; z-index: 99999 !important; } body ul.hw-drop > *:hover > ul.hw-drop{ right: 0!important; left: 100% !important; transform: rotateX(0deg); top: 0!important; margin:0px !important; z-index: 99999 !important; } body ul.hw-drop ul.hw-drop.hw-menu-inverse{ right: 0 !important; left: -100% !important; } @media (max-width: 1024px) { .hw-bar-logo-left .hw-none-toolbar [class*='hw-nav'], .hw-bar-logo-center .hw-none-toolbar [class*='hw-nav'] { float:right; } .hw-bar-logo-right .hw-none-toolbar [class*='hw-nav']{ float:left; } } @media (max-width: 768px) { .hw-toolbar-mobile { --hw-nav-pd:15px !important; } } @media (max-width: 500px) { .hw-toolbar-mobile { --hw-nav-pd:12px !important; --hw-nav-fn-sz:13px !important; } } @media (max-width: 400px) { header [class*="hw-nav"]{ --hw-nav-pd:10px !important; --hw-nav-fn-sz:12px !important; } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 2.3 - Logo ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Logo ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ header[class*="hw-bar-logo-"] > .hw-nav-logo{ --hw-nav-ht: calc(var(--hw-mast-ht) + var(--hw-plus-ht)); box-shadow:-1px 0px 0px 0px rgba(118, 128, 138, 0.1) inset; } header[class*="hw-bar-logo-"].hw-sticky-enable > .hw-nav-logo{ --hw-nav-ht:var(--hw-sticky-ht); } header.hw-bar-logo-right{ direction:rtl; } header.hw-bar-logo-right * { direction:ltr; } body .hw-sticky-enable .hw-logo-main { display:inline-block ; } .hw-nav-logo{ background:var(--hw-logo-bg,none) ; } .hw-logo-type-image a{ line-height: 0px ; font-size:0px; } .hw-logo-warp{ height:auto !important; display: grid; grid-template-columns: 100%; } .hw-logo-warp img{ max-height:var(--hw-nav-ht) !important; max-width:var(--hw-logo-wt) !important; height:auto;width: auto; } .hw-logo-warp a:hover{ opacity:0.8; } .hw-nav-logo.hw-nav-right a{ float: right; text-align:right; } .hw-nav-logo.hw-nav-left a{ float: left; text-align:left; } .hw-nav-logo.hw-nav-center a{ float: none; text-align:center; } a.hw-logo-title { font-size: var(--hw-logo-tl-fn-sz,30px); text-align: left; line-height: 1em; display: block; vertical-align:top; width:100%; color:var(--hw-logo-tl-txt,#111111) !important; } a.hw-logo-description { font-size: var(--hw-logo-des-fn-sz,13px); text-align: left; line-height: 1em; display: block; width:100%; vertical-align:top; margin-top:10px !important; color:var(--hw-logo-des-txt,#666666) !important; } .hw-light .hw-logo-dark{ display:none !important; } .hw-dark .hw-logo-main{ display:none !important; } .hw-dark .hw-logo-dark{ display:inline-block !important; } @media (min-width: 1025px) { .hw-header-transparent:not(.hw-sticky-enable) .hw-nav-logo{ --hw-logo-bg:none !important; } header[class*="hw-bar-logo-"].hw-header-transparent:not(.hw-sticky-enable) > .hw-nav-logo{ --hw-logo-bg:var(--hw-tr-bg) !important; } body .hw-sticky-enable .hw-logo-transparent { display:none !important; } .hw-light .hw-sticky-enable .hw-logo-main{ display:inline-block !important; } .hw-dark .hw-sticky-enable .hw-logo-main{ display:none !important; } .hw-dark .hw-sticky-enable .hw-logo-dark{ display:inline-block !important; } .hw-header-transparent .hw-nav-logo img{ display:none; } .hw-header-transparent .hw-nav-logo img:last-child{ display:inline-block; } } @media (max-width: 1024px) { .hw-nav-logo .hw-logo-title{ --hw-logo-tl-fn-sz:30px; } } @media (max-width: 500px) { .hw-nav-logo .hw-logo-warp img{ max-width:150px !important; } .hw-nav-logo .hw-logo-title{ --hw-logo-tl-fn-sz:25px; } } @media (max-width: 400px) { .hw-nav-logo .hw-logo-warp img{ max-width:100px !important; } .hw-nav-logo .hw-logo-title{ --hw-logo-tl-fn-sz:20px; } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 2.4 - Menu ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Nav Menu ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ :root{ --hw-menu-tags-bg:var(--hw-primary-bg); --hw-menu-tags-txt:var(--hw-primary-txt); --hw-menu-tags-rd:15px; --hw-menu-crt:#e03800; } .hw-nav-menu .menu{ margin:0px !important; } .hw-nav-menu > li > a i::before { content: "\F019"; font-family: 'fontsite' !important; margin-left: .35em; color: inherit !important; font-style: normal; font-size: 1.5em !important; vertical-align: middle; font-weight: 400; display: inline-block; transition: var(--hw-tr) ; } .hw-nav-menu > li > a::before{ margin-right:var(--hw-nav-icn-mr,0.4em); } .hw-nav-menu > li > a{ display:flex; padding:0 var(--hw-nav-menu-pd) !important; } .hw-nav-menu > li > a > i{ float:right; } .menu.hw-cat-drop > li:hover > a > i::before,.hw-cat-active > li > a > i::before,.menu .hw-drop > li:hover > a > i::before,.hw-nav-menu > li:hover > a > i::before{ transform:rotate(180deg) !important; transition: all 300ms; } .hw-nav-menu > li.hw-menu-current > a{ color:var(--hw-nav-hv-lk) !important; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Menu Sub Menu ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .menu.hw-cat-drop > li > a > i,.menu .hw-drop > li > a > i{ float:right; } .menu.hw-cat-drop > li > a::before,.menu .hw-drop > li > a::before{ margin-right:var(--hw-nav-icn-mr); display:inline-block; float:left; vertical-align: top; color: inherit; font-style: normal; font-weight: 400; font-size: var(--hw-nav-icn-sz,1.5em); } .menu.hw-cat-drop > li > a > i::before,.menu .hw-drop > li > a > i::before { content: "\F024"; font-family: 'fontsite' !important; float:right; font-size:1.5em !important; color:inherit !important; font-style: normal; vertical-align: middle } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Menu Tags ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ [class*='hw-menu-tags']{ font-size: 10px !important; background: var(--hw-menu-tags-bg)!important; position: absolute; color: var(--hw-menu-tags-txt) !important; border-radius:var(--hw-menu-tags-rd) !important; line-height: 1.1em; padding:2px 8px; display:inline-block; font-weight:400 !important; vertical-align:middle; right: 0px; top: 5px; } .hw-cat-drop [class*='hw-menu-tags'],.hw-drop [class*='hw-menu-tags']{ position:relative; top: 0px; right: 0px; line-height: 1.8em; margin-left: 10px; } .hw-menu-full-width > .hw-drop { left:0px !important; } .hw-drop > li.hw-menu-current > a{ color:var(--hw-drp-hv-lk) !important; } .hw-menu-full-width{ position:inherit !important; } .menu > li > .hw-drop::before{ content:""; width:100% !important; position:absolute; height:100% !important; background-image:var(--hw-menu-bg-img,none); background-position:var(--hw-menu-bg-pos,center); background-size:var(--hw-menu-bg-sz,auto); opacity:var(--hw-menu-bg-op,1); left: 0px; background-repeat: no-repeat; top: 0px; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Menu Section ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .menu .hw-menu-section { float: left; width: 100%; display: inline-block !important; padding:var(--hw-menu-sc-pd,0px) !important; max-width: var(--hw-body-wt,1200px); display: flex !important; float: none !important; margin:auto !important; pointer-events: all; --hw-menu-sc-pd:0px; } body .menu div.hw-menu-section ul.hw-drop { width: 100% !important; position: relative !important; box-shadow: none !important; border: none !important; left:0px !important; border-radius:0px !important; background:none !important; right:0px !important; top:0px !important; margin:0px !important; opacity:1 !important; transform: none !important; display: grid !important; padding:0px !important; } .menu .hw-menu-section > .hw-drop { grid-template-columns:var(--hw-flx-col,100%) !important; width:calc(100% + var(--hw-menu-sc-gap,00px)) !important; margin:calc(var(--hw-menu-sc-gap,00px) / -2) !important; } .menu .hw-menu-section .hw-drop > li:hover a{ color:var(--hw-drp-lk) ; } .menu .hw-menu-section .hw-drop > li > a:hover{ color:var(--hw-drp-hv-lk) !important; } .menu .hw-menu-section > .hw-drop > li{ margin:calc(var(--hw-menu-sc-gap,00px) / 2) !important; width:calc(100% - var(--hw-menu-sc-gap,00px)) !important; padding:20px !important; pointer-events: all; } .menu .hw-menu-section > .hw-drop > li > a{ font-size:calc(var(--hw-drp-fn-sz,14px)* 1.2) !important; font-weight:var(--hw-drp-fn-wt,700) !important; text-transform:var(--hw-drp-fn-tr,none) !important; padding: 0em 00px !important; margin:0px 0px 10px !important; opacity:1 !important; } .menu .hw-menu-section .hw-drop > li > a > i{ display:none !important; } .menu .hw-menu-section > .hw-drop > li > a:only-child{ font-size:16px !important; font-weight:400 !important; margin-bottom:0px !important; padding:0px !important; } .menu .hw-menu-section .hw-drop > li > ul > li > a{ padding: 0.65em 00px !important; opacity:0.85 !important; border:none !important; } .menu .hw-menu-section .hw-drop > li > a::after { display:none !important; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Menu Image ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-menu-image,.hw-menu-image a { text-align:center !important; overflow:hidden; } .hw-menu-image.hw-menu-image-full-width img{ width: 100% !important; height:auto; } .hw-menu-image.hw-menu-image-full-height img { height: 100% !important; width:auto; } .hw-menu-image.hw-menu-image-full-height.hw-menu-image-full-width img { width: auto !important; position: absolute; top: 50%; right: 50%; min-height: 100.1% !important; max-height: inherit !important; max-width: inherit !important; height: auto !important; transform: translate(50%, -50%); display: block; margin-left: auto; margin-right: auto } .hw-menu-image.hw-menu-image-full-height.hw-menu-image-full-width a{ float: left; overflow: hidden; width: 100%; position: relative; height: 100%; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Menu Image Text ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-menu-image-text { text-align:center; } .hw-menu-image-text.hw-menu-image-left { text-align:left; } .hw-menu-image-text.hw-menu-image-right { text-align:right; } .hw-menu-image-text img{ vertical-align:top; } .hw-menu-image-text span{ width:100%; font-size:16px; margin-top:1em; display: inline-block; transition:all 350ms; line-height: 1.5em; vertical-align: top; font-weight:700; color:var(--hw-drp-lk) !important; } .hw-menu-image-text a:hover span{ transition:all 350ms; color:var(--hw-drp-hv-lk,var(--hw-drp-lk)) !important; } .hw-menu-image-text a:hover img{ opacity:0.7; transition:all 350ms; } .hw-menu-widget { padding:0px !important; } .hw-menu-builder{ padding:0px !important; --sao-lk-cr:var(--hw-drp-lk); --sao-hv-lk-cr:var(--hw-drp-hv-lk); --sao-txt-cr:var(--hw-drp-txt-cr); --sao-ex-cr:var(--hw-drp-txt-cr); --sao-hl:var(--hw-drp-hl); --sao-br-cr:var(--hw-drp-br-cr); } [class*='hw-nav'] *:hover > .hw-drop .hw-el-menu_blog_grid{ display:inline-block !important; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 2.5 - Category Menu ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Category Menu ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-nav-cat-menu{ width:var(--hw-col,100%) !important; padding:0 var(--hw-nav-pd,20px) !important; --hw-menu-pd:13.6px; --hw-menu-fn-sz:14px; --hw-cat-drop:var(--hw-main-rd); --hw-cat-menu:var(--hw-main-rd); --hw-box-layout-sd:0 0 7px 0px var(--hw-post-sd); } .hw-nav-cat-menu > li > a,.hw-nav-cat-menu > li{ width:100%; } .hw-nav-cat-menu > li > a{ background-color:var(--hw-cat-menu-bg) !important; color:var(--hw-cat-menu-txt) !important; border-radius:var(--hw-cat-menu,0px); } .hw-sticky .hw-nav-cat-menu > li > a:hover,.hw-nav-cat-menu:not(.hw-cat-sub.hw-cat-active) > li > a:hover{ background:var(--hw-primary-hv-bg) !important; color:var(--hw-primary-txt)!important; } .hw-nav-cat-menu > li > a:before{ content: "\F021"; font-family: 'fontsite' !important; margin-right:var(--hw-nav-icn-mr); } .hw-nav-cat-menu > li > a i{ float:right; } .hw-nav-cat-menu > li > a i::before { content: "\F019"; font-family: 'fontsite' !important; margin-left: .35em; color: inherit !important; font-style: normal; font-size: 1.5em !important; vertical-align: middle; font-weight: 400; display: inline-block; transition: all 300ms; } .hw-cat-drop > .hw-menu-full-width{ --hw-drp-wt:calc(var(--hw-body-wt) - 100%) !important; } .hw-cat-drop { background-color:var(--hw-cat-sub-bg); border-style:solid; margin:calc(var(--hw-nav-md-ht) + 10px) 0 0 !important; height: auto ; float: left; border-radius:var(--hw-cat-drop,0px); position: absolute; z-index: 9999999999; width:100%; box-shadow: var(--hw-box-layout-sd); margin:calc(var(--hw-nav-md-ht) + 10px) 0 0 !important; opacity:0; transform: rotateX(-90deg); transition:margin 300ms,opacity 300ms,transform 0ms ease 300ms; padding:0px !important; border: solid 0px var(--hw-cat-sub-br-cr,transparent); } .hw-cat-active .hw-cat-drop, [class*="hw-toolbar-"]:not(.hw-sticky-enable) .hw-cat-sub .hw-cat-drop { transition:margin 300ms,opacity 300ms,transform 0ms; transform: rotateX(0deg); opacity:1!important; margin-top:var(--hw-nav-md-ht) !important; } .hw-cat-drop > li{ width:100%; list-style:none; float:left; position:relative !important; } .hw-nav-cat-menu .hw-cat-drop > li > a { padding:calc(var(--hw-menu-pd) + 0.7px) 20px; } .hw-cat-drop > li > a { width:100%; padding:var(--hw-menu-pd) 20px; float:left; font-size:var(--hw-menu-fn-sz); line-height:1.5em; color:var(--hw-cat-sub-txt); } .hw-cat-drop > li > a:hover{ color:var(--hw-main-hv-lk); } .hw-cat-drop > li > a::after{ width: calc(100% - 40px); position: absolute; content: ""; left: 20px; border-bottom: solid 1px var(--hw-cat-sub-br-cr,transparent); bottom: 0; } .hw-cat-drop > li:last-child a::after{ display:none !important; } body ul.hw-cat-drop li > ul.hw-drop { margin-top: 0px !important; margin-left: 100px !important; top: 0px !important; left: 100% !important; } .hw-cat-drop *:hover > .hw-drop { transition: margin 300ms,opacity 300ms,transform 0ms; transform: rotateX(0deg); opacity: 1 !important; margin-top:0px !important; margin-left:0px !important; } @media (max-width: 991px) { .hw-nav-cat-menu{ display:none; } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 2.6 - Mobile Menu ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Mobile Menu ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ @media (max-width: 1024px) { .hw-nav-mobile-menu > li > a::before{ content:'\F021'; font-family:'fontsite'; } .hw-nav-mobile-menu .hw-nav-menu{ display:none !important; } .hw-nav-mobbar-menu li > a{ width: calc(100% - 60px) !important; } .hw-nav-mobbar-menu i{ padding: 1em 0px !important; font-style: normal; float: left; text-align: center; position: relative; border-left: solid 1px rgba(118,128,138,0.15) !important; width: 60px; cursor:pointer; color: var(--hw-nav-lk); font-size: var(--hw-nav-fn-sz,16px); line-height: 1.5em; } .hw-nav-mobbar-menu i::before{ content: "\F019"; font-family: 'fontsite' !important; font-size:2.5em; float:left; color:inherit !important; width: 100%; font-style:normal; } .hw-nav-mobbar-menu i:hover,.hw-nav-mobbar-menu .hw-menu-current > a,.hw-nav-mobbar-menu a:hover{ color: var(--hw-nav-hv-lk) !important; } .hw-mob-drop-active > i::after,.hw-mob-drop-active > ul::before{ content: ""; width: 100%; position: absolute; z-index: auto; pointer-events: none; height: 100%; left: 0px; top: 0px; background: rgba(118,128,138,0.08); } .hw-mob-drop > .hw-mob-drop::before { content:none !important; } .hw-nav-mobbar-menu .hw-mob-drop-active > i::before{ transform:rotate(180deg) !important; transition: all 300ms; } .hw-mob-drop{ width:100%; float:left; margin:0px; position: relative; overflow:hidden; } .hw-nav-mobbar-menu .hw-mob-drop li { float:left; position:relative; list-style:none; margin:0px; width:100%; box-shadow: 0 1px 0px 0px rgba(118,128,138,0.15) inset; } .hw-mob-drop a,.hw-mob-drop i{ height:0px; transition:height 350ms , color 300ms; float: left; overflow: hidden; font-size:15px !important; padding:0px !important; } .hw-mob-drop > li > a{ padding:0px 20px !important; } .hw-mob-drop-active > .hw-mob-drop > li > i,.hw-mob-drop-active > .hw-mob-drop > li > a{ float:left; height:45px; line-height:45px; opacity:0.8; transition:height 350ms ; position:relative; color: var(--hw-nav-lk,rgb(0, 0, 0)); } .hw-mob-drop-active > .hw-mob-drop > li > a:before{ margin-right:10px; font-style:normal; } .hw-mob-drop-active > a,.hw-mob-drop-active > i{ color: var(--hw-nav-hv-lk) !important; opacity:1 !important; } .hw-nav-mobbar-menu [class*="hw-menu-tags"]{ left: 5px !important; top: -5px !important; position: relative; } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 2.7 - Search ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Search ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-nav-mobile-search .hw-nav-search{ display:none !important; } .hw-nav-search{ --hw-icn-mr:0px; --hw-drp-wt:600px; --hw-srh-ht:var(--hw-nav-srh-ht); --hw-srh-txt-bg:var(--hw-nav-srh-txt-bg); --hw-srh-txt-txt:var(--hw-nav-srh-txt-txt); --hw-srh-cat-bg:var(--hw-nav-srh-cat-bg); --hw-srh-cat-txt:var(--hw-nav-srh-cat-txt); --hw-srh-br-cr:var(--hw-nav-srh-br-cr); --hw-srh-rd:var(--hw-btn-rd); --hw-srh-btn-bg: var(--hw-primary-bg); --hw-srh-btn-txt: var(--hw-primary-txt); --hw-srh-btn-hv-bg: var(--hw-primary-hv-bg); } .hw-search { height: var(--hw-srh-ht); line-height: var(--hw-srh-ht); position: relative; float: var(--hw-srh-ft,left); display: inline-grid; width: var(--hw-srh-wt,100%); font-size:var(--hw-srh-fn-sz,14px); font-weight:var(--hw-srh-fn-wt,400); text-transform:var(--hw-srh-fn-tr,none); box-shadow: 0 0 0 1px var(--hw-srh-br-cr,transparent); border-radius:var(--hw-srh-rd,00px) !important; overflow: hidden; } .hw-search select{ font-size:inherit !important; height: var(--hw-srh-ht); box-shadow:none !important; line-height:var(--hw-srh-ht); border: none !important; background-color:var(--hw-srh-cat-bg,#f2f6f9) !important; box-shadow: 0px 0 0 0px #8c8b8b33 !important; position: relative; color:var(--hw-srh-cat-txt) !important; border-radius:var(--hw-srh-cat-rd,0px) !important; } .hw-search-woo .hw-search::before{ content:""; box-shadow:3px 0px 0px 0px rgba(128,128,128,0.2) inset !important; position:absolute; left:11em; width:1px; height:100%; top:100%; } .hw-search select:hover{ opacity:.8; transition: all 300ms; } .hw-search input { width: 100%; box-shadow:none !important; border:none !important; padding: 0 1em !important; background-color:var(--hw-srh-txt-bg,#f2f6f9) !important; color:var(--hw-srh-txt-txt,#20282f) !important; line-height:inherit !important; font-weight: inherit; height:100% !important; font-size:inherit !important; border-radius:var(--hw-srh-txt-rd,0px) !important; } .hw-search > input::placeholder { opacity:0.75 !important; } .hw-search button { cursor: pointer; float: right; padding: 0px !important; color: #fff; background: #000000; font-weight: inherit !important; text-transform:inherit !important; line-height:inherit !important; font-size:inherit !important; padding:0 1em !important; border-radius: 0px; border: none !important; padding: 0px !important; background-color:var(--hw-srh-btn-bg) !important; color:var(--hw-srh-btn-txt,#ffffff) !important; height: 100%; border-radius: 0px !important; border: 0; width: 100%; border-radius:var(--hw-srh-btn-rd,0px) !important; } .hw-search button:hover{ background-color:var(--hw-srh-btn-hv-bg) !important; } /*-------------------------------------------------------------- Fexid----------------------------------------------------------------*/ [class*='-search-fixed-']{ --hw-nav-md-ht:50px; width:calc(var(--hw-body-wt) * calc(1 / var(--hw-flx,2)) - var(--hw-srh-dv,0px) ) !important; min-width: 250px; } [class*='-search-fixed-'].hw-search-woo{ min-width: 420px; } [class*='-search-fixed-'] > li { width:100%; height: var(--hw-srh-ht); padding: 0 var(--hw-nav-pd,20px) !important; } .hw-nav-search.hw-nav-right[class*='-search-fixed-'] { margin-right: calc(var(--hw-nav-srh-mr,0px) * 1%) !important; } .hw-nav-search.hw-nav-left[class*='-search-fixed-'] { margin-left: calc(var(--hw-nav-srh-mr,0px) * 1%) !important; } /*-------------------------------------------------------------- Dropdown----------------------------------------------------------------*/ .hw-nav-search[class*='-dropdown-'] > li > a::before, .hw-nav-mobile-search > li > a::before{ font-family: 'fontsite' ; content: '\F003' ; transform: scaleX(-1); } .hw-nav-search.hw-nav-active[class*='-dropdown-'] > li > a::before{ content: '\F005'; } .hw-nav-search[class*='-dropdown-'] li:hover > .hw-drop { transform: rotateX(90deg) !important; opacity:0!important; margin:calc(var(--hw-nav-md-ht) + 10px) 0 0 !important; } .hw-nav-search.hw-nav-active[class*='-dropdown-'] li > .hw-drop { transition:margin 300ms,opacity 300ms,transform 0ms !important; transform: rotateX(0deg) !important; opacity:1!important; padding:20px; --hw-nav-fn-sz:14px; pointer-events: all; margin-top:var(--hw-nav-md-ht) !important; } [class*='search'][class*='-text'] .hw-search { grid-template-columns: auto 6em; } [class*='search'][class*='-text'].hw-search-woo .hw-search{ grid-template-columns:11em auto 6em; } [class*='search'][class*='-icon'] .hw-search { grid-template-columns: auto var(--hw-srh-ht); } [class*='search'][class*='-icon'].hw-search-woo .hw-search{ grid-template-columns:11em auto var(--hw-srh-ht); } /** Icon ************/ [class*='search'][class*='-icon'] .hw-search button::before { font-family: 'fontsite'; content: '\F003'; display: inherit; transform: scaleX(-1); color: inherit !important; width: calc(var(--hw-srh-ht)) !important; position: absolute; padding: 0px; height: var(--hw-srh-ht) !important; font-size: calc(var(--hw-srh-ht)/2.2); font-style: normal; top: 0; line-height: var(--hw-srh-ht); } .hw-mobbar .hw-nav-search{ padding: 20px ; } .hw-search-ajax{ position: absolute; display:none; width: calc(100% - (var(--hw-nav-pd,20px)*2)) !important; top:var(--hw-srh-ht); left: var(--hw-nav-pd,20px); background-color:var(--hw-drp-bx-bg); border-style:solid; border-width:var(--hw-drp-bx-br-wt); border-color:var(--hw-drp-bx-br-cr); box-shadow:var(--hw-drp-bx-sd); border-radius:var(--hw-drp-bx-rd,0px); height: auto ; float: left; z-index: 9999999999; padding:0px; --hw-post-tl-lk:var(--hw-drp-lk); --hw-post-tl-hv-lk:var(--hw-drp-hv-lk); --hw-meta-txt:var(--hw-drp-meta); --hw-post-tl-fn-sz: 13px; --hw-post-sd:var(--hw-drp-sd); --hw-post-hv-sd:var(--hw-drp-hv-sd); pointer-events: all; } .hw-search-warp .hw-search-ajax{ width:100% !important; left:0; } .hw-search-ajax-show .hw-search-ajax { display:inline-block !important; } .hw-search-ajax .hw-item { border-bottom:solid 1px var(--hw-drp-br-cr); } .hw-search-ajax .hw-module-1 .hw-thumb{ width:50px; } .hw-search-ajax .hw-module-1 .hw-details{ width: calc(100% - 50px); } .hw-el-search-ajax { padding:10px; text-align:center; box-shadow:none !important; border:none !important; } .hw-ajax-loading.hw-search-ajax::before{ padding: 00px 0px; height: 40px !important; content: "\F045"; -webkit-animation: hexwp_rotate 1.4s infinite linear; animation: hexwp_rotate 1.4s infinite linear; font-family: 'fontsite'; position: relative !important; font-size: 40px; vertical-align: top; line-height: 40px; margin: 10px auto; color: var(--hw-drp-lk) !important; float: left; text-align: center; } .hw-noresults{ width:100%; text-align:center; float:left; display:none !important; } .hw-el-search-ajax .hw-product-category{ margin: 7px 0px 0px !important; } .hw-search-ajax-close{ position: absolute; right: calc(6em + 10px); font-size: inherit; cursor: pointer; display:none; } [class*='search'][class*='-icon'] .hw-search-ajax-close { right: calc(var(--hw-srh-ht) + 10px); } .hw-search-ajax-close::before{ content: '\F005' ; font-family: 'fontsite'; color: var(--hw-srh-txt-txt,#20282f) !important; } .hw-search-ajax-show .hw-search-ajax-close{ display:inline-block !important; } .hw-search-warp{ position:relative; float:left; width:100%; } .hw-el-search-ajax .hw-no-results{ line-height: 40px; float: left; width: 100%; color: var(--hw-drp-lk); margin: 10px 0px !important; padding: 0px !important; } .hw-el-search-ajax .hw-outofstock{ display:none !important; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** searchfield ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-searchfield{ --hw-srh-ft:var(--hw-ag,center); --hw-srh-ht:50px; padding:2px; --hw-srh-txt-bg:var(--hw-post-bg); --hw-srh-txt-txt:var(--hw-main-txt); --hw-srh-br-cr:var(--hw-main-br-cr); --hw-srh-btn-bg: var(--hw-primary-bg); --hw-srh-btn-txt: var(--hw-primary-txt); --hw-srh-btn-hv-bg: var(--hw-primary-hv-bg); --hw-srh-btn-hv-txt: var(--hw-primary-txt); text-align:var(--hw-ag,center); --hw-srh-rd:var(--hw-btn-rd); } @media (max-width: 1199px) { .hw-600.hw-searchfield .hw-search,.hw-400.hw-searchfield .hw-search,.hw-300.hw-searchfield .hw-search,.hw-200.hw-searchfield .hw-search,.hw-100.hw-searchfield .hw-search{ width: 100% !important; font-size:14px !important; } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 2.8 - Social ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Nav Social ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-nav-social { --hw-icn-mr:0px; --hw-drp-pd:20px; --hw-drp-wt:350px; --hw-scl-txt:var(--hw-nav-lk); --hw-scl-hv-txt:var(--hw-nav-hv-lk); --hw-scl-sz:var(--hw-nav-scl-sz,var(--hw-icn-sz)); --hw-scl-br-cr:rgba(118,128,138,0.2); } /* Fixed**/ .hw-nav-social-fixed [class*='hw-social-icon']{ padding:0px var(--hw-nav-pd,0 20px); --hw-scl-sz:var(--hw-nav-scl-sz,2em); margin-top:auto !important; margin-bottom:auto !important; } .hw-nav-social-fixed .hw-social-icon-style-1{ --hw-scl-sz:var(--hw-nav-scl-sz,1.5em); } .hw-nav-social-fixed [class*='hw-social-icon']{ align-items: center; float: left; display: inline-flex; vertical-align: middle; height: 100%; } .hw-nav-social-dropdown > li > a::before{ font-family: 'fontsite' ; content: '\F006'; } .hw-nav-social-dropdown [class*='hw-social-icon']{ --hw-scl-mr:10px; --hw-scl-sz:var(--hw-nav-scl-sz,30px); --hw-scl-txt:var(--hw-drp-lk); --hw-scl-hv-txt:var(--hw-drp-hv-lk); --hw-scl-br-cr:var(--hw-drp-br-cr); } .hw-nav-social-dropdown .hw-social-icon-style-1{ --hw-scl-mr:15px; --hw-scl-sz:var(--hw-nav-scl-sz,25px); } .hw-nav-social-dropdown .hw-drop{ line-height: 1em; text-align: center; } [class*='hw-social-icon'] { text-align:var(--hw-ag,center); margin: calc(var(--hw-scl-mr,10px) / -2); } [class*='hw-social-icon'] > a{ font-size:var(--hw-scl-sz,1.5em); height:1em; line-height:1em; margin:calc(var(--hw-scl-mr,10px)/2); float: none!important; vertical-align: top; cursor:pointer; text-align:center; display: inline-block; pointer-events: all; } .hw-social-icon-style-1{ --hw-scl-mr:15px; } [class*='hw-social-icon'] > a::before{ content:var(--hw-scl); font-size:1em; font-family:'fontsite'; transition: all 300ms; font-style:normal; color:var(--hw-scl-txt); } [class*='hw-social-icon'] > a:hover::before{ color:var(--hw-scl-hv-txt,var(--hw-scl-txt,var(--hw-main-hv-lk))); } .hw-social-icon-style-2 > a:before{ background: var(--hw-scl-bg,transparent); width: 2em; border-radius:var(--hw-scl-rd,0px); font-size: 0.5em !important; height: 2em; float: left; box-shadow: 0 0 0 1px var(--hw-scl-br-cr,var(--hw-scl-txt,var(--hw-main-lk))) inset; color:var(--hw-scl-txt,var(--hw-main-lk)); } .hw-social-icon-style-3 > a:before{ background:var(--hw-scl-bg,none); width: 2em; border-radius:var(--hw-scl-rd,0px); font-size: 0.5em !important; height: 2em; float: left; color:#ffffff !important; } .hw-social-icon-style-2 > a:hover::before,.hw-social-icon-style-3 > a:hover::before{ background:var(--hw-primary-bg) !important; color:var(--hw-primary-txt) !important; box-shadow:none !important; } .hw-nav-mobbar-social li{ text-align:center; } .hw-mobbar [class*='hw-social-icon']{ --hw-scl-sz:2em; --hw-scl-mr:10px; --hw-scl-txt:var(--hw-mobbar-lk); --hw-scl-hv-txt:var(--hw-mobbar-hv-lk); padding:20px 0px 10px !important; } .hw-mobbar .hw-social-icon-style-1{ --hw-scl-sz:1.5em; --hw-scl-mr:15px; } .hw-el-share,.hw-el-social{ --hw-scl-sz: calc(var(--hw-fn-md) * 1.5); --hw-scl-txt:var(--hw-main-txt); --hw-scl-hv-txt:var(--hw-main-hv-lk); --hw-scl-br-cr:var(--hw-main-br-cr); } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 2.9 - Header Element ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Contact ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-nav-contact-us > li > span::before{ font-family: 'fontsite' ; content: '\F042' ; margin-right:var(--hw-nav-icn-mr); } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Call ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-nav-call > li > span::before{ font-family: 'fontsite' ; content: '\F043' ; margin-right:var(--se-nav-icn-mr,0.4em); } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Text Header ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-nav-text-header > li,.hw-nav-date-header > li{ --hw-nav-fn-wt:400; --hw-nav-md-ht:auto; } .hw-nav-text-header > li > span{ line-height:1.5em; } .hw-nav-date-header > li > span{ opacity:0.8; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Login ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-nav-mobile-login > li > a::before,.hw-nav-login > li > a::before{ content:'\F049'; font-family:'fontsite'; } .hw-nav-login-text > li > a::before, .hw-nav-login-text-2 > li > a::before{ margin-right:var(--hw-nav-icn-mr,0px); } body li.hw-user-name{ border-bottom:solid 1px var(--hw-drp-br-cr); } body li.hw-user-name a{ font-size:calc(var(--hw-drp-fn-sz,14px)* 1.2); width:100%; font-weight:700 !important; text-align:center; } body li.hw-user-name a::before { font-size: 2.5em !important; font-family: "fontsite"; content: "\F049"; float: left; display: inline-block; margin-bottom: 5px; margin-top:0px !important; font-style: normal; width: 100%; text-align: center; font-weight: 400 !important; opacity: .5 !important; line-height: 1em; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Banner ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-nav-banner-header > *{ height:auto !important; max-height: var(--hw-head-ht); } .hw-nav-banner-header > * img{ max-height: var(--hw-head-ht); } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Dark Mode ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-nav-dark-mode > li > .hw-dark-mode-warp::before{ content:'\f056'; font-family:'fontsite'; } .hw-dark-mode-warp.hw-dark-mode{ --hw-nav-lk:#FFBE00 !important; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 2.10 - Mobile bar ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Mobbar ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ [class*="hw-nav-mobile"] [class*="hw-nav"], .hw-toolbar-mobile .hw-nav-call, .hw-toolbar-mobile .hw-nav-contact-us, .hw-toolbar-mobile .hw-nav-social, .hw-toolbar-mobile .hw-nav-text-header, .hw-toolbar-mobile .hw-nav-wish{ display:none !important; } .hw-mobbar{ display:none; } @media (max-width: 1024px) { .hw-mobbar { position: fixed; width: 100%; background: rgba(0, 5, 10, 0.7); height: 100%; left: 0px; top: 0px; overflow: scroll; left: -100%; transition:all 0.0s; transition-delay: 300ms; z-index: 999999999; --hw-mobbar-wt:500px; --hw-nav-ht:auto; --hw-nav-md-ht:auto; --hw-nav-fn-sz:16px !important; --hw-nav-fn-wt:500; --hw-drp-bx-bg:none !important; --hw-drp-lk:var(--hw-mobbar-lk) !important; --hw-drp-hv-lk:var(--hw-mobbar-hv-lk) !important; --hw-drp-meta:var(--hw-mobbar-lk) !important; --hw-drp-fn-sz:16px !important; --hw-drp-fn-wt:700; --hw-nav-lk:var(--hw-mobbar-lk); --hw-nav-hv-lk:var(--hw-mobbar-hv-lk); --hw-drp-br-cr: rgba(118,128,138,0.15); display: grid; } .hw-mobbar.hw-mobbar-active { left: 00%; transition-delay: 0ms; transition:all 0.0s; } .hw-mobbar-warp { width: var(--hw-mobbar-wt); height: 100%; position:relative; padding:00px; z-index:0; margin-left:calc(var(--hw-mobbar-wt)* -1); margin-top:50px; left: 0; background-image: var(--hw-mobbar-bg-img,none); background-size:cover; background-repeat:no-repeat; background-position:center center; transition:all 0.3s; } .hw-mobbar-warp::before{ content:""; position:absolute; top:0px; left:0px; z-index:-1; width:100%; height:100%; background-color:var(--hw-mobbar-bg); } .hw-mobbar-close{ margin-left:calc(var(--hw-mobbar-wt)* -1); position:fixed; z-index:9999; left: 0; cursor: pointer; transition:all 0.3s; height:50px; background: var(--hw-primary-bg); color:var(--hw-primary-txt) ; left: 0; cursor: pointer; width: var(--hw-mobbar-wt) ; float: left; } .hw-mobbar-close:hover{ background:var(--hw-primary-hv-bg) ; } .hw-mobbar-close::before{ font-family: 'fontsite' ; content: '\F005'; line-height:50px; font-size: 25px; text-align: center; color:inherit; width: 100% !important; float: left; } .hw-mobbar.hw-mobbar-active .hw-mobbar-close,.hw-mobbar.hw-mobbar-active .hw-mobbar-warp{ margin-left: 0px !important; transition:all 0.3s; } .hw-mobbar [class*="hw-nav"]{ width:100% !important; display:inline-block !important; } .hw-mobbar [class*="hw-nav"] > li{ width:100%; border-bottom: solid 1px rgba(118,128,138,0.15) !important; } .hw-mobbar [class*="hw-nav"] > * > a,.hw-mobbar [class*="hw-nav"] > * > span{ padding:1em 20px !important; line-height:1.5em; width:100%; } .hw-mobbar [class*="hw-nav"] > * > span{ text-align:center; padding:0.4em 20px !important; } .hw-mobbar [class*="hw-nav"] > * > span::before,.hw-mobbar [class*="hw-nav"] > * > a::before{ display:inline-block; margin-right:10px; float:none; } .hw-mobbar .hw-nav-contact-us li,.hw-mobbar .hw-nav-text-header li,.hw-mobbar .hw-nav-call li,.hw-mobbar .hw-nav-mobbar-social li{ border-bottom:0px !important; } .hw-nav-content-warp{ padding:20px 0px; float:left; width:100%; } .hw-mobbar .hw-nav-search.hw-nav-left[class*="-search-"], .hw-mobbar .hw-nav-search.hw-nav-right[class*="-search-"]{ width:100% !important; margin-left:0px !important; } .hw-mobbar .hw-search-ajax { position: relative !important; display: none; margin-top: 20px !important; box-shadow:none !important; width: 100% !important; top: 0px !important; left: 0px !important; border:none !important; border-radius:0px !important; } .hw-mobbar .hw-product-category{ opacity:0.6; } } @media (max-width: 499px) { .hw-mobbar { --hw-mobbar-wt:calc(100% - 40px); } } @media (max-width: 400px){ .hw-mobbar { --hw-mobbar-wt:100%; } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 3 - Post ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 3.1 - Ajax ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Ajax ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ [class*="hw-post-"]{ transition:transform 350ms,background 350ms,box-shadow 350ms,border-color 350ms; } .hw-new-post{ transform: scale(0); } .hw-ajax-tab [class*="hw-post"]:not(.hw-new-post){ transform: scale(1) !important; } .hw-ajax-loading:before { z-index: 2; content: ""; position: absolute; height: 100%; top: 0; left: 0; width: 100% } .hw-ajax-loading .hw-gap-warp{ opacity: .5 !important; } .hw-ajax-loading .hw-gap-warp::before{ content: "\F045"; -webkit-animation: hexwp_rotate 1.4s infinite linear; animation: hexwp_rotate 1.4s infinite linear; font-family: 'fontsite'; font-size: 60px; z-index: 9999999; float: left; color: var(--hw-main-lk); position: absolute; top: calc(50% - 30px) !important; left: calc(50% - 30px) !important; } .hw-data-json { display: none; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 3.1 Title Box ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Title Box ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-gap-0px [class*="hw-tbox"], .hw-gap-2px [class*="hw-tbox"], .hw-gap-10px [class*="hw-tbox"], .hw-gap-15px [class*="hw-tbox"]{ --hw-gp:20px; } [class*="hw-tbox"] { float: left; width: 100%; position: relative; z-index: 1; padding: 1px 0 0; margin-bottom: var(--hw-gp,0px) ; --hw-tbox-pd:.6em 1.2em; } [class*="hw-bw-border"] [class*="hw-tbox"]{ margin-bottom: calc(var(--hw-gp,0px) / 2) ; } [class*="hw-tbox"] > .hw-title-box{ width: 100%; float: left; margin: 0; line-height: 1em; border-color: inherit !important; font-size:var(--hw-tbox-main-fn-sz,20px); border-radius: 0px; position: relative; } .hw-main-center > .hw-title-box, .hw-tabs-center > .hw-title-box { text-align: center; } .hw-tab-main { padding-top: .3em; padding-bottom: .3em; margin-right: 1.2em; float: left; position: relative; color: var(--hw-tbox-main-txt); list-style: none; } .hw-tab-main span { font-size: inherit !important; font-weight:var(--hw-tbox-main-fn-wt,700); font-size:var(--hw-tbox-main-fn-sz,20px); text-transform:var(--hw-tbox-main-fn-tr,none); float: left; color:inherit !important; position: relative; } .hw-tab-main span > *{ display:inline-block !important; font-size:inherit !important; line-height:inherit !important; font-weight:400 !important; margin-left:5px !important; color:inherit !important; float: none !important; } .hw-tab-main span > span{ font-weight:inherit !important; color:var(--hw-main-hl) !important; } .hw-main-center .hw-tab-main { float: none; text-align: center; text-align: center; margin-left: 1.2em !important; display: inline-block; vertical-align: top; } .hw-tabs { float: left; margin: 0px; } .hw-tab-item { margin-right: 1.2em; float: left; padding-top: .3em; padding-bottom: .3em; cursor: pointer; position: relative; color: var(--hw-tbox-tab-txt); width: max-content; list-style: none; } .hw-tab-item:hover,.hw-tab-active{ color: var(--hw-tbox-atv-txt,var(--hw-tbox-tab-txt)) !important; } body .hw-tab-active{ pointer-events: none !important; } .hw-tabs > li:first-child { margin-left: 1.2em !important; } .hw-tab-item a { line-height: inherit !important; margin: 0px ; font-weight:var(--hw-tbox-tab-fn-wt,400); font-size: var(--hw-tbox-tab-fn-sz,17px); text-transform:var(--hw-tbox-tab-fn-tr,none); cursor: pointer; float: left; z-index: 1; color:inherit !important; cursor: pointer; position: relative; } [class*="hw-tborder"] ,[class*="hw-tbox"] > .hw-title-box::before ,[class*="hw-tab"]::before { content: ''; border-style: solid; border-color: inherit; border-width: 0 0px 0px 0; width:100%; height:100%; position: absolute; bottom: 0px;box-sizing: border-box !important; left: 0; } [class*="hw-tborder"] ,[class*="hw-tbox"] > .hw-title-box::before ,.hw-tab-main::before { border-color: var(--hw-tbox-br-cr,transparent) !important; } .hw-tab-item::before{ border-color: initial !important; } .hw-tabs-center .hw-tabs { margin-right: 0px; float: none; vertical-align: top; width: auto !important; display: inline-block; } .hw-main-tabs .hw-tabs, .hw-main-right .hw-tabs{ float: right; } .hw-main-right li.hw-tab-item:last-child, .hw-main-tabs li.hw-tab-item:last-child { margin-right: 0px !important; } .hw-tabs-center .hw-tab-item { float: none; display: inline-block; vertical-align: top; } .hw-tabs-center li.hw-tab-item:first-child { margin-left: 1.2em !important; } .hw-tbox-full-width .hw-title-box, .hw-tbox-full-width .hw-title-box .hw-tabs { width:100% !important; text-align:center; } .hw-tbox-full-width .hw-title-box [class*="hw-tab-"] { float:none !important; display:inline-block !important; margin:0 7px 10px !important; } .hw-tab-item.hw-view-all a::after{ content: "\F024"; margin-left: 10px; float: right; font-family: 'fontsite'; font-style: normal; font-size: 1em; font-weight: 400; vertical-align: top; color: inherit; opacity: .7; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Style 2 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-tbox-style-2 [class*="hw-tab-"]{ padding-bottom: .8em !important; } .hw-tbox-style-2 .hw-tab-main::before,.hw-tbox-style-2.hw-tabs-center [class*="hw-tab-"]::before { border-width: 0 0px 3px 0; width:100%; max-width: 40px; } .hw-tbox-style-2.hw-tabs-center .hw-tab-item::before{ transform:scaleX(0) translateX(-50%); transition: all 350ms; left: 50% ; } .hw-tbox-style-2.hw-main-center .hw-tab-main::before,.hw-tbox-style-2.hw-tabs-center .hw-tab-active::before,.hw-tbox-style-2.hw-tabs-center [class*="hw-tab-"]:hover::before{ transform:scaleX(1) translateX(-50%); max-width: 40px; left: 50%; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Style 3 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-tbox-style-3 > .hw-title-box::before { border-width: 0px 0 3px; } .hw-tbox-style-3 .hw-tab-main { border-width: 0px 0px 3px; border-color: var(--hw-primary-bg); border-style: solid; } .hw-tbox-style-3 [class*="hw-tab-"] { padding-bottom: .6em !important; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Style 4 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-tbox-style-4 > .hw-title-box::before { border-width: 2px 0 2px; } .hw-tbox-style-4 [class*="hw-tab-"] { padding-top: .6em !important; padding-bottom: .6em !important; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Style 5 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-tbox-style-5 [class*="hw-tborder"] { border-width: 1px 0 0px; top: calc(50% - 1px) !important; } .hw-tbox-style-5 .hw-tborder-before { left: 0px; right: auto; } .hw-tbox-style-5 .hw-tborder-after { right: 0px; left: auto; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Style 6 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-tbox-style-6 [class*="hw-tab-"]{ padding: var(--hw-tbox-pd) !important; margin-right: .8em !important; } .hw-tbox-style-6 [class*="hw-tab-"]::before { border-width: 3px; border-color: initial !important; border-radius:var(--hw-tbox-rd,0px); } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Style 7 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-tbox-style-7 [class*="hw-tab-"] { padding: var(--hw-tbox-pd) !important; margin-right: .8em !important; } .hw-tbox-style-7 [class*="hw-tab-"]::before{ border-radius:var(--hw-tbox-rd,0px); transition:all 350ms; } .hw-tbox-style-7 .hw-tab-main::before{ background:var(--hw-tbox-main-bg,none); } .hw-tbox-style-7 .hw-tab-item::before{ background:var(--hw-tbox-tab-bg,none); } .hw-tbox-style-7 .hw-tab-item:hover::before,.hw-tbox-style-7 .hw-tab-active::before{ background:var(--hw-tbox-atv-bg,none); } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Style 7 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-tbox-style-8 > .hw-title-box::before { background:var(--hw-tbox-main-bg,none); border-radius:var(--hw-main-rd,0px); } .hw-boxed-content:not(.hw-el-featured-second) > [class*="hw-tbox"]{ margin-bottom:0px !important; } .hw-boxed-content > div.hw-tbox-style-8:first-child .hw-title-box::before, .hw-boxed-content > div.hw-gap-slider:first-child .hw-gap-warp, .hw-boxed-content > div.hw-gap-content:first-child .hw-gap-warp{ border-top-left-radius:var(--hw-main-rd,0px)!important; border-top-right-radius:var(--hw-main-rd,0px)!important; } .hw-boxed-content:not(.hw-el-featured-second) > div.hw-tbox-style-8:first-child .hw-title-box::before{ border-bottom-left-radius:0px!important; border-bottom-right-radius:0px!important; } .hw-boxed-content > div.hw-gap-slider:nth-child(2) div.hw-gap-content, .hw-boxed-content > div.hw-gap-content:nth-child(2) { border-top-left-radius:0px !important; border-top-right-radius:0px !important; } .hw-tbox-style-8 > .hw-title-box{ padding: 0.3em 1em !important; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Responsive ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ @media (max-width:1199px) { .hw-tbox-style-6 [class*="hw-tab-"],.hw-tbox-style-7 [class*="hw-tab-"] { padding: 0.6em 1em !important; } [class*="hw-tbox-"] { --hw-tbox-main-fn-sz:18px ; --hw-tbox-tab-fn-sz: 14px ; } .hw-tbox-full-width.hw-tbox-style-2 [class*="hw-tab-"]::before{ transform:scaleX(1) translateX(-50%); left: 50%; } } @media (max-width:499px) { [class*="hw-tbox-"] { --hw-tbox-main-fn-sz:16px ; --hw-tbox-tab-fn-sz: 13px ; } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 3 - Arrow ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-carousel-action{ float:right; padding-top: .2em; padding-bottom: .2em; margin-left: 1em; } .hw-carousel-action a{ opacity:1;cursor: pointer; float:left; margin-left:0px; } .hw-tab-prev::before{ float: right; margin-right:1em; text-align: center; font-size:1.2em; font-family:'fontsite'; content: "\F024" !important; } .hw-tab-next::before{ font-family:'fontsite'; float: right; content: "\F023" !important; text-align: center; font-size:1.2em; } .sao-lSAction > a.lSPrev::before{ font-family:'fontsite' !important; content: "\F024" !important; } .sao-lSAction > a.lSNext::before { font-family:'fontsite' !important; content: "\F023" !important; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 3.2 Thumb ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Thumb ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-thumb{ width:100%; float: left; overflow: hidden; position: relative; } .hw-not-thumb { --hw-img-wt:0px !important; } .hw-thumb > a{ padding-bottom:var(--hw-ratio,0px); width: 100%; height: var(--hw-ratio-ht,auto); float: left; position:relative; overflow:hidden; } .hw-thumb > a > img{ width:100%; font-size:0; transition:all 350ms; float:left; visibility:var(--hw-ratio-img,visible); height: var(--hw-ratio-ht-img,auto); position:var(--hw-ratio-po,relative); } .hw-thumb > a > figure{ background-position: center center !important; background-repeat: no-repeat !important; background-size: cover !important; float: left; height: 100%; transition: all 350ms; left:0; top:0; position: absolute; width: 100%; display:var(--hw-ratio-figure,none); } .hw-ratio-auto,.hw-ratio-auto-second .hw-second { --hw-ratio:0; --hw-ratio-auto:0; --hw-ratio-ht:fit-content; --hw-ratio-ht-img:auto; --hw-ratio-po:relative; --hw-ratio-ob:none; --hw-ratio-img:visible; --hw-ratio-figure:none; } .hw-ratio40,.hw-ratio40-second .hw-second { --hw-ratio:40%; } .hw-ratio50,.hw-ratio50-second .hw-second{ --hw-ratio:50%; } .hw-ratio55,.hw-ratio55-second .hw-second{ --hw-ratio:55%; } .hw-ratio60,.hw-ratio60-second .hw-second{ --hw-ratio:60%; } .hw-ratio75,.hw-ratio75-second .hw-second{ --hw-ratio:75%; } .hw-ratio100,.hw-ratio100-second .hw-second{ --hw-ratio:100%; } .hw-ratio135,.hw-ratio135-second .hw-second{ --hw-ratio:135%; } .hw-ratio-h50{ --hw-ratio:50px; } .hw-ratio-h100{ --hw-ratio:100px; } .hw-ratio-h150{ --hw-ratio:150px; } .hw-ratio-h200{ --hw-ratio:200px; } .hw-ratio-h300{ --hw-ratio:300px; } .hw-ratio-h400{ --hw-ratio:400px; } .hw-ratio-h500{ --hw-ratio:500px; } .hw-ratio-h600{ --hw-ratio:600px; } .hw-ratio-h700{ --hw-ratio:700px; } .hw-ratio-h800{ --hw-ratio:800px; } .hw-ratio-h900{ --hw-ratio:900px; } .hw-ratio-h1000{ --hw-ratio:1000px; } .hw-ratio-h50, .hw-ratio-h100, .hw-ratio-h150, .hw-ratio-h200, .hw-ratio-h300, .hw-ratio-h400, .hw-ratio-h500, .hw-ratio-h600, .hw-ratio-h700, .hw-ratio-h800, .hw-ratio-h900, .hw-ratio-h1000, .hw-ratio40,.hw-ratio50,.hw-ratio55,.hw-ratio60,.hw-ratio75,.hw-ratio100,.hw-ratio135,.hw-ratio40-second .hw-second,.hw-ratio50-second .hw-second,.hw-ratio60-second .hw-second,.hw-ratio55-second .hw-second,.hw-ratio75-second .hw-second,.hw-ratio100-second .hw-second,.hw-ratio135-second .hw-second{ --hw-ratio-ht:0px; --hw-ratio-ht-img:100%; --hw-ratio-po:absolute; --hw-ratio-auto:1; --hw-ratio-img:hidden; --hw-ratio-figure:inline-block; } @media (min-width: 1025px) { .hw-ratio1-2x > [class*="hw-post-"]{ padding-bottom:calc(calc(var(--hw-ratio,0px) / 2) - var(--hw-gp,0px)) !important; } .hw-ratio2x > [class*="hw-post-"]{ padding-bottom:calc(calc(var(--hw-ratio,0px) * 2) - var(--hw-gp,0px)) !important; } } @media (max-width: 1024px) { [class*="hw-el-"]:not(.hw-el-second) .hw-second{ --hw-ratio:inherit!important; --hw-ratio:inherit!important; --hw-img-wt:inherit !important; --hw-ratio-ht:inherit!important; --hw-ratio-ht-img:inherit!important; --hw-ratio-po:inherit!important; --hw-ratio-ob:inherit !important; --hw-ratio-img:inherit !important; --hw-ratio-figure:inherit !important; } } @media (max-width: 1024px) and (min-width: 768px) { .hw-ratio-h400, .hw-ratio-h500, .hw-ratio-h600{ --hw-ratio:300px; } .hw-ratio-h700, .hw-ratio-h800, .hw-ratio-h900, .hw-ratio-h1000{ --hw-ratio:500px; } } @media (max-width: 767px) { .hw-ratio-h400, .hw-ratio-h500, .hw-ratio-h600, .hw-ratio-h700, .hw-ratio-h800, .hw-ratio-h900, .hw-ratio-h1000{ --hw-ratio:300px; } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 3.3 Thumb Hover ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Thumb Hover ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-hover-reduce-opacity .hw-thumb img, .hw-hover-reduce-opacity .hw-thumb figure, .hw-hover-remove-opacity [class*="hw-post"]:hover .hw-thumb img, .hw-hover-remove-opacity [class*="hw-post"]:hover .hw-thumb figure { opacity:1; } .hw-hover-reduce-opacity [class*="hw-post"]:hover .hw-thumb img, .hw-hover-reduce-opacity [class*="hw-post"]:hover .hw-thumb figure, .hw-hover-remove-opacity .hw-thumb img, .hw-hover-remove-opacity .hw-thumb figure { opacity:0.7; } .hw-hover-grow [class*="hw-post"]:hover .hw-thumb img, .hw-hover-grow [class*="hw-post"]:hover .hw-thumb figure { transform:scale(1.1,1.1); } .hw-hover-add-color .hw-thumb img, .hw-hover-add-color .hw-thumb figure, .hw-hover-remove-color [class*="hw-post"]:hover .hw-thumb img, .hw-hover-remove-color [class*="hw-post"]:hover .hw-thumb figure { filter: grayscale(100%); } .hw-hover-add-color [class*="hw-post"]:hover .hw-thumb img, .hw-hover-add-color [class*="hw-post"]:hover .hw-thumb figure, .hw-hover-remove-color .hw-thumb img, .hw-hover-remove-color .hw-thumb figure { filter: grayscale(00%); } .hw-hover-add-blur .hw-thumb img, .hw-hover-add-blur .hw-thumb figure, .hw-hover-remove-blur [class*="hw-post"]:hover .hw-thumb img, .hw-hover-remove-blur [class*="hw-post"]:hover .hw-thumb figure{ filter: blur(0px); } .hw-hover-add-blur [class*="hw-post"]:hover .hw-thumb img, .hw-hover-add-blur [class*="hw-post"]:hover .hw-thumb figure, .hw-hover-remove-blur .hw-thumb img, .hw-hover-remove-blur .hw-thumb figure { filter: blur(1px); } .hw-hover-shrink .hw-thumb img, .hw-hover-shrink .hw-thumb figure{ transform:scale(1.1); } .hw-hover-shrink [class*="hw-post"]:hover .hw-thumb img, .hw-hover-shrink [class*="hw-post"]:hover .hw-thumb figure { transform:scale(1.0); } .hw-hover-rotate .hw-thumb img, .hw-hover-rotate .hw-thumb figure{ transform: rotate(0); } .hw-hover-rotate [class*="hw-post"]:hover .hw-thumb img, .hw-hover-rotate [class*="hw-post"]:hover .hw-thumb figure { transform: rotate(-7deg) scale(1.2); } .hw-hover-add-bleften .hw-thumb img, .hw-hover-add-bleften .hw-thumb figure, .hw-hover-remove-bleften [class*="hw-post"]:hover .hw-thumb img, .hw-hover-remove-bleften [class*="hw-post"]:hover .hw-thumb figure, .hw-hover-add-darkness .hw-thumb img, .hw-hover-add-darkness .hw-thumb figure, .hw-hover-remove-darkness [class*="hw-post"]:hover .hw-thumb img, .hw-hover-remove-darkness [class*="hw-post"]:hover .hw-thumb figure { filter: bleftness(100%); } .hw-hover-add-bleften [class*="hw-post"]:hover .hw-thumb img, .hw-hover-add-bleften [class*="hw-post"]:hover .hw-thumb figure, .hw-hover-remove-bleften .hw-thumb img, .hw-hover-remove-bleften .hw-thumb figure{ filter: bleftness(125%); } .hw-hover-add-darkness [class*="hw-post"]:hover .hw-thumb img, .hw-hover-add-darkness [class*="hw-post"]:hover .hw-thumb figure, .hw-hover-remove-darkness .hw-thumb img, .hw-hover-remove-darkness .hw-thumb figure { filter: bleftness(60%); } .hw-hover-sidepan .hw-thumb img, .hw-hover-sidepan .hw-thumb figure{ background-position-x: 100% !important; background-size: auto 100% !important; background-repeat: no-repeat !important; width: 100% !important; transition: 1.5s linear !important; } .hw-hover-sidepan [class*="hw-post"]:hover .hw-thumb img, .hw-hover-sidepan [class*="hw-post"]:hover .hw-thumb figure{ background-position-x: 00% !important; transition: 1.5s linear !important; } .hw-hover-verticalpan .hw-thumb img, .hw-hover-verticalpan .hw-thumb figure{ transition: 1.5s linear !important; background-position-y: 00% !important; background-size: 100% !important } .hw-hover-verticalpan [class*="hw-post"]:hover .hw-thumb img, .hw-hover-verticalpan [class*="hw-post"]:hover .hw-thumb figure{ background-position-y: 100% !important; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 3.4 Details ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Details ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-details{ transition: var(--hw-tr); float:left; position:relative; width: 100%; } /*------------------------------------------------------------------ Title --------------------------------------------------------------*/ .hw-title{ float:left; position:relative; z-index:1; margin:0!important; width:100%; transition:var(--hw-tr); color:var(--hw-post-tl-lk); --hw-post-tl-hv-lk:var(--hw-primary-bg); font-size:var(--hw-post-tl-fn-sz,var(--hw-fn-lg)); font-weight:var(--hw-post-tl-fn-wt,700); text-transform:var(--hw-post-tl-fn-tr,none); line-height:calc(1em + var(--hw-fn-lg-li-ht,12px)); text-align: var(--hw-ag,left); } .hw-title a{ width:100%; transition:var(--hw-tr); color:inherit!important; font-weight:inherit!important; display:inline-block; float:left; overflow:hidden; line-height:inherit!important } .hw-title:hover{ color:var(--hw-post-tl-hv-lk,var(--hw-post-tl-lk))!important; } .sticky .hw-title a::before { content: "\F046"; font-family: 'fontsite'; font-style: normal; vertical-align: middle; margin-right: 5px; display: inline-block; } /*------------------------------------------------------------------ excerpt --------------------------------------------------------------*/ .hw-excerpt{ margin-top: var(--hw-mg-tp); margin-bottom:0!important; position:relative; z-index:1; width:100%; float:left; transition:var(--hw-tr); color:var(--hw-expt-txt); font-size:var(--hw-expt-fn-sz,var(--hw-fn-md)); font-weight:var(--hw-expt-fn-wt,400); text-transform:var(--hw-expt-fn-tr,none); line-height:var(--hw-fn-md-li-ht); text-align: var(--hw-ag-justify,var(--hw-ag,left)); } .hw-excerpt p:last-child{ margin-bottom:0px !important; } .hw-el-image-list .hw-title { font-size: var(--hw-post-tl-fn-sz,calc(var(--hw-fn-lg) * 1.1)); } .hw-el-image-list .hw-excerpt { margin-top: calc(var(--hw-mg-tp) + 5px); font-size: var(--hw-expt-fn-sz,calc(var(--hw-fn-md) * 1.1)); } .hw-excerpt p:last-child{ margin-bottom:0px !important; } .hw-excerpt p:last-child{ margin-bottom:0px !important; } .hw-excerpt li{ margin-left:0px!important; } .hw-excerpt li::before { display: inline-block; vertical-align: middle; content: ''; width: 4px; height: 4px; border: 2px solid; border-radius: 50%; margin: 0px 10px 0px 2px; color: inherit !important; } /*------------------------------------------------------------------ Readmore --------------------------------------------------------------*/ .hw-readmore { margin-top: var(--hw-mg-tp); text-align:var(--hw-ag,left); float:left; width:100%; } .hw-readmore a{ box-shadow:0 0 0 0px var(--hw-main-br-cr) inset !important; color:var(--hw-primary-txt); text-transform: uppercase; font-size: var(--hw-fn-md,15px); line-height: 2.5em; background:var(--hw-primary-bg); padding: 0 1.3em; pointer-events: all; font-weight:var(--hw-read-fn-wt,500); text-transform:var(--hw-read-fn-tr,none); display:inline-block; border-radius: var(--hw-btn-rd,0px); } .hw-readmore a:hover{ color:var(--hw-primary-txt); background:var(--hw-primary-hv-bg); box-shadow:0 0 0 1px transparent inset; } /*------------------------------------------------------------------ Align --------------------------------------------------------------*/ .hw-align-right{ --hw-ag:right; } .hw-align-left{ --hw-ag:left; } .hw-align-center{ --hw-ag:center; } .hw-align-justify{ --hw-ag:left; --hw-ag-justify:justify; } .hw-direction{ direction:rtl; } .hw-direction *{ direction:ltr; } @media (max-width: 1199px) { .hw-title{ font-size:var(--hw-fn-lg) !important; } .hw-excerpt{ font-size:var(--hw-fn-md) !important; } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 3.5 Meta ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Meta ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-meta { width: 100%; float: left; overflow: hidden; margin:var(--hw-meta-loc,var(--hw-mg-tp) 0 0) !important; color:var(--hw-meta-txt); font-size:var(--hw-meta-fn-sz,var(--hw-fn-sm)); height: var(--hw-meta-ht,1.5em); font-weight:var(--hw-meta-fn-wt,400); text-transform:var(--hw-meta-fn-tr,none); position: relative; line-height: var(--hw-meta-ht,1.5em); text-align: var(--hw-ag,left); } .hw-meta li { display:inline-block; margin: 0 0px 0 0 !important; font-size: inherit !important; overflow: hidden; list-style: none; color: inherit !important; vertical-align: middle; line-height: inherit !important; max-height: inherit !important; } .hw-meta li,.hw-meta li a,.hw-meta li span { line-height: inherit; color: inherit; font-size: inherit !important; } .hw-meta li:last-child:after { display: none; content: inherit; } .hw-meta li:after { content:var(--hw-meta-bet); margin-right: var(--hw-meta-bet-mg,7px); margin-left: var(--hw-meta-bet-mg,7px); } .hw-author a{ pointer-events: all; } .hw-author a:hover{ color:var(--hw-post-tl-hv-lk)!important; } .hw-author img { float: none; margin-right: 5px; width: 1.75em !important; vertical-align: text-bottom; height: 1.75em !important; border-radius: 50% !important; } .hw-meta li::before { color: inherit !important; vertical-align: revert; font-family: "fontsite"; text-decoration: inherit; font-weight: 400; font-style: normal; margin-right: 5px; display: var(--hw-meta-dis,inline-block) !important; opacity: .5; font-size: .9em !important; line-height: inherit !important; } .hw-meta .hw-author::before { content: "\F027" ; display: var(--hw-meta-aut,var(--hw-meta-dis,inline-block)) !important; } .hw-meta .hw-author a{ font-weight: var(--hw-post-tl-fn-wt,700) !important; color:var(--hw-primary-bg) !important; } .hw-meta .hw-date::before { content: "\F029" } .hw-meta .hw-view::before { content: "\F031" } .hw-meta .hw-comment::before { content: "\F030" } .hw-meta .hw-cats::before { content: "\F028" } @media (max-width: 1199px) { .hw-meta { font-size:var(--hw-fn-sm) !important; } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Category ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-meta [class*="hw-all-category"]{ width: auto; float: none ; line-height: inherit ; font-size: inherit ; color: inherit ; display: inline-block ; } .hw-meta [class*="hw-all-category"] a { float: none ; line-height: inherit ; font-size: inherit ; color: inherit ; pointer-events: all; display: inline-block ; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Icon Video ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-details .hw-circular, .hw-details .hw-icon-video { position:relative !important; text-align: var(--hw-ag,left); margin: auto auto var(--hw-mg-tp) !important; } .hw-icon-center .hw-icon-video, .hw-icon-center .hw-circular{ top: 50% !important; right: 50% !important; transform: translate(50%,-50%) !important; left: auto !important; bottom: auto !important; margin: 0px !important; } body .hw-icon-center .hw-all-category-blog{ display:none !important; } .hw-icon-video, .hw-post-blog .hw-circular{ position: absolute; --hw-clr-fn-sz:calc(var(--hw-icn-sz) / 2.5); margin: var(--hw-pd);; top: 0px; z-index:1; right: 0px; text-transform: none; } .hw-module-1 { --hw-clr-fn-sz:calc(var(--hw-icn-sz) / 2.5); } .hw-icon-video::before { font-size: var(--hw-icn-sz,50px); background: rgba(0, 0, 0, 0.25); line-height: 1em; height: 1em; font-family: "fontsite"; content: "\F035"; border-radius: 50%; font-style: normal; color: rgb(255, 255, 255) !important; vertical-align:top; display:inline-block; text-shadow: 0 0 8px rgb(0, 0, 0) !important; } .hw-all-category-blog a { background: var(--hw-primary-bg); color: var(--hw-primary-txt); font-size: var(--hw-fn-sm,11px); margin-right: 10px; float: left; padding: 4px 8px; line-height: 1.3em; border-radius: var(--hw-btn-rd); display: inline-block; vertical-align: bottom; } .hw-all-category-blog a:hover{ background: var(--hw-primary-hv-bg) !important; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 3.6 Hover Icon ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Hover Icon ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ [class*="hw-post-"] figcaption { background:var(--hw-cap-bg-img); position: absolute; opacity:0; height: 100%; width: 100%; display: flex ; transition: all 350ms; pointer-events: none; } [class*="hw-post-"] figcaption::before,[class*="hw-post-"] figcaption::after{ transition: all 350ms; } [class*='hw-post-']:hover figcaption{ opacity:1; } [class*="hw-el-"][class*="hw-cap-hover"] [class*="hw-post-"] figcaption, [class*="hw-el-"] [class*="hw-module-2"] [class*="hw-post-"] figcaption{ z-index:2; } .hw-thumb figcaption{ align-items:center; } .hw-hover-icon{ position: relative; width: auto; opacity:0; float:left; transition: all 350ms; margin-right: auto; font-size:0px; height:0px; width:100%; text-align:center; margin-left: auto; } .hw-hover-icon a{ text-align:center; font-size:inherit; display: var(--hw-dp-4,none); margin:0 5px; pointer-events: all; } .hw-hover-icon a::before { font-family: 'fontsite'; display: inline-block; vertical-align: top; height:0px; transition: all 350ms; box-shadow:0 0 0 1px var(--hw-cap-br-cr) inset; font-size:1.25em; line-height:calc(var(--hw-fn-md) * 3); width:calc(var(--hw-fn-md) * 3); height: calc(var(--hw-fn-md) * 3); border-radius:50%; cursor:pointer; color: var(--hw-cap-lk,#ffffff); } .hw-hover-img::before{ content:'\F004'; transform: scaleX(-1); } .hw-hover-post::before{ content:'\F026'; } .hw-hover-icon a:hover::before { background:var(--hw-primary-bg); color:var(--hw-primary-txt); box-shadow:0 0 0 1px transparent inset; } [class*="hw-post"]:hover .hw-hover-icon{ opacity:1; z-index: 1; font-size:var(--hw-fn-md); margin-top: 0px; height:calc(var(--hw-fn-md) * 3); } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 3.7 Load More ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-load-more { width: 100%; text-align: center; padding-top: 00px !important; padding-bottom: 00px !important; margin-bottom: calc(var(--hw-gp,0px) / 2); float: left; } .hw-load-more a { position: relative; margin: auto; margin-top: 20px; cursor: pointer; font-size: 15px; text-transform: uppercase; width: auto; color:var(--hw-post-tl-lk)!important; border-color: var(--hw-post-sd)!important; border-radius: var(--hw-btn-rd,0px); font-weight:var(--hw-more-fn-wt,500); text-transform:var(--hw-more-fn-tr,none); display: inline-block; line-height: 2.5em; padding: 0.0em 1.5em; border-width: 1px; border-style: solid; transition: var(--hw-tr); } [class*="hw-boxed-item"] .hw-load-more a,[class*="hw-boxed-details"] .hw-load-more a{ background:var(--hw-post-bg,#ffffff); } .hw-load-more a::before { content: "+"; font-family: 'fontsite'; margin-right: 5px; font-size: 1.5em; display: inline-block; vertical-align: sub; font-weight: inherit !important; line-height: 1.5em; } .hw-load-more.hw-loading a { width: 100px; font-size:0px; pointer-events: none; border: none!important; background-position: center; box-shadow: none !important; background:none !important; height: 40px; } .hw-load-more.hw-loading a::before{ content: "\F045"; -webkit-animation: hexwp_rotate 1.4s infinite linear; animation: hexwp_rotate 1.4s infinite linear; font-family: 'fontsite'; font-size:40px; } [class*="hw-boxed-item"] .hw-load-more.hw-loading a,[class*="hw-boxed-details"] .hw-load-more.hw-loading a{ color:var(--hw-main-lk) !important; } .hw-load-more.hw-load-more-hide{ display:none !important; } @keyframes hexwp_rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 3.8 Pagenavi ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** PageNavi ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-pagenavi,.hw-post-pagination{ float: left; margin: calc(var(--hw-gp,0px) / 2) 0px; width: calc(100% - var(--hw-gp)); text-align:center; } .hw-pagenavi a,.hw-pagenavi span,.hw-post-pagination a,.hw-post-pagination span,.dokan-pagination-container .dokan-pagination li a { border-radius: 0px; display: inline-block; border-width: 1px; border-style: solid; background-color: var(--hw-post-bg,transparent); padding: 5px 10px!important; float: none; margin: 2px!important; font-size: 12px; color:var(--hw-post-tl-lk)!important; border-color: var(--hw-post-sd)!important; border-radius: var(--hw-btn-rd,0px); color: inherit; font-weight:var(--hw-more-fn-wt,500); text-transform:var(--hw-more-fn-tr,none); line-height: 18px; width: auto!important; cursor: pointer } .hw-post-pagination .current-post-page,.hw-post-pagination a:hover,.hw-pagenavi span.current,.hw-pagenavi a:hover,.hw-load-more a:not(.hw-loading):hover,.dokan-pagination-container .dokan-pagination li.active a,.dokan-pagination-container .dokan-pagination li a:hover { border-color: transparent !important; background-color: var(--hw-primary-bg)!important; color: var(--hw-primary-txt) !important; } .woocommerce-pagination .next.page-numbers ,.woocommerce-pagination .prev.page-numbers{ font-size:0px; vertical-align: top; } .woocommerce-pagination .next.page-numbers::before { content:">"; vertical-align: top; font-size:12px; } .woocommerce-pagination .prev.page-numbers::before{ content:"<"; vertical-align: top; font-size:12px; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 4 - Module ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 4.1 - Slider ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Slider ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-slider-list-warp .lSSlideOuter { overflow: hidden !important; } .hw-slider .hw-item-list { vertical-align: top; height:auto !important; overflow: hidden !important; grid-template-columns: repeat(var(--hw-flx,1), 1fr); display: grid !important; } .hw-slider .lightSlider.hw-item-list{ height:auto !important; overflow:visible !important; visibility:visible !important; display: inline-flex !important; } .hw-slider-list-warp{ width:100%; float: left; overflow:visible !important; } .lSSlideWrapper .lSFade { padding-bottom:var(--hw-ratio,500px) !important; width:100%; position: relative; } .hw-slider .lSSlideWrapper .lSFade > * { position: absolute !important; top: 0; right: 0; z-index: 9; margin-left: 0; width: 100%; } .hw-slider .lSSlideWrapper.usingCss .lSFade > * { opacity: 0; transition-delay: 0s; transition-duration: inherit !important; transition-property: opacity; transition-timing-function: inherit !important; } .hw-slider .lSSlideWrapper .lSFade > *.active { z-index: 10; } .hw-slider .lSSlideWrapper.usingCss .lSFade > *.active { opacity: 1; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Arrow ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-arrow-warp { width: calc(100% - var(--hw-gp,0px)) !important; left: calc(var(--hw-gp,0px) / 2) !important; z-index:9999; position: absolute; height: 100%; top: 0; pointer-events: none; } .hw-page-list{ display:none !important; } .hw-arrow-warp{ transition:var(--hw-tr); opacity: var(--hw-aw-ly,0); } [class*="hw-slider"]:hover .hw-arrow-warp { opacity: 1; transition:var(--hw-tr); } .noPager .hw-item-list{ transform:none !important; } /* slider actions */ .sao-hide-arrow .hw-arrow-warp{ display:none !important; } .hw-arrow-warp a { opacity:1; background:#444; top: calc(50% - (var(--hw-aw-sz,45px) / 2 + var(--hw-has-pager,0px)) ); position: absolute; height: var(--hw-aw-sz,45px); width: var(--hw-aw-sz,45px); font-size:var(--hw-aw-sz,45px); pointer-events: all; box-shadow:0 0 5px 3px rgba(118,128,138,0.2) !important; color:var(--hw-aw-txt,var(--hw-cap-lk,#ffffff)); background:var(--hw-aw-bg,var(--hw-cap-bg,rgba(0,5,10,0.50))); border-radius:var(--hw-main-rd,0px); cursor: pointer; } .hw-arrow-warp a::before{ width: var(--hw-aw-sz,45px); text-align: center; position: relative; height: var(--hw-aw-sz,45px); float: left; line-height: var(--hw-aw-sz,45px); font-size:0.8em; color:inherit !important; font-family: 'fontsite'; text-align: center; } .hw-arrow-warp a:hover{ --hw-aw-txt:var(--hw-primary-txt); --hw-aw-bg:var(--hw-primary-hv-bg); } .hw-arrow-warp .hw-arrow-prev { left: calc(var(--hw-aw-lc,0px) + calc(var(--hw-gp,0px) / -2 )); } .hw-arrow-warp .hw-arrow-next { right: calc(var(--hw-aw-lc,0px) + calc(var(--hw-gp,0px) / -2 )); } .hw-boxed-all .hw-arrow-warp .hw-arrow-prev{ left:calc(var(--hw-aw-lc,0px) + calc(var(--hw-gp,0px) / -2 ) - var(--hw-pd)); } .hw-boxed-all .hw-arrow-warp .hw-arrow-next{ right: calc(var(--hw-aw-lc,0px) + calc(var(--hw-gp,0px) / -2 ) - var(--hw-pd)); } .hw-arrow-warp .hw-arrow-prev::before { content: "\F023"; margin-left: -2px; } .hw-arrow-warp .hw-arrow-next::before { content: "\F024"; margin-left: 2px; } .hw-hide-next .hw-arrow-next,.hw-hide-prev .hw-arrow-prev{ display:none !important; opacity:.0 !important; pointer-events: none !important; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Pager ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-slider-list-warp .lSPager{ display:none; } .hw-pager{ --hw-has-pager:30px; } .hw-pager .lSSlideOuter .lSPager.lSpg{ display:inline-block !important; opacity:1; position:relative; padding: 0; padding-left: 0px; text-align: center; margin:20px auto 0; height:10px; width: 100%; } .hw-pager .lSSlideOuter .lSPager.lSpg > li { cursor: pointer; display: inline-block; padding: 0 5px; height:10px; margin: 0; } .hw-pager .lSSlideOuter .lSPager.lSpg > li a { background-color: var(--hw-pg-txt,var(--hw-post-tl-lk)) ; border-radius: 30px; display: inline-block; height: 10px; overflow: hidden; text-indent: -999em; width: 10px; vertical-align: top; position: relative; z-index: 99; transition: all 0.5s linear 0s; } .hw-pager .lSSlideOuter .lSPager.lSpg > li:hover a,.hw-pager .lSSlideOuter .lSPager.lSpg > li.active a { background-color: var(--hw-pg-atv,var(--hw-primary-bg)) !important; } .hw-pager .lSSlideOuter .media { opacity: 0.8; } .hw-pager .lSSlideOuter .media.active { opacity: 1; } .hw-el-slider.hw-pager{ --hw-has-pager:0px; } .hw-el-slider.hw-pager .lSSlideOuter .lSPager{ position:absolute; left:0px; z-index: 100; top:0px; opacity:0 !important; } .hw-el-slider.hw-pager:hover .lSSlideOuter .lSPager{ opacity:1 !important; } .sao-hide-prev .hw-arrow-prev{ opacity:.5 !important; } .sao-hide-next .hw-arrow-next{ opacity:.5 !important; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Dragscroll ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ @media (max-width:1024px) { body .hw-slider .dragscroll{ overflow-x: scroll !important; overflow-y:hidden!important; } body .hw-slider .dragscroll .hw-item-list { overflow-x: visible !important; overflow-y: auto !important; transition:none !important; } body .hw-slider .dragscroll .lSSlideOuter{ width:100% !important; overflow:visible !important; } .dragscroll .lSSlideWrapper{ width:auto !important; } .dragscroll .hw-item-list{ transform: none !important; display: inline-flex !important; visibility: visible !important; opacity: 1; width: auto !important; height: auto !important; } .dragscroll .hw-item { width:var(--hw-drg-col) !important; } body .hw-slider .dragscroll .lSSlideOuter .lSPager.lSpg,body .hw-slider .dragscroll .hw-arrow-warp{ display:none !important; } } .hw-slider-options{ display:none !important; } .lSSlideWrapper .lSSlide { transform: translate(0px, 0px); transition-property: transform,height; transition-duration: inherit !important; transition-timing-function: inherit !important; } .lSSlideWrapper .lightSlider.lsGrab > * { cursor: grab !important; } .lSSlideWrapper .lightSlider.lsGrabbing > * { cursor: move !important; cursor: grabbing !important; } body .hw-slider .sao-hide-arrow .lSSlideWrapper .lightSlider > *,.lSSlideWrapper .lightSlider.lsGrabbing a{ cursor:inherit !important; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 4.2 - Module ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Module ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ [class*="hw-el-"].hw-none .hw-item-list, [class*="hw-el-"].hw-boxed-all .hw-item-list{ overflow:hidden; } [class*="hw-el-"].hw-none .hw-gap-content, [class*="hw-el-"].hw-boxed-all .hw-gap-content{ overflow:hidden; } .hw-boxed-content .hw-gap-warp{ width:100% !important; margin:0px !important; } .hw-boxed-content .hw-gap-content{ background:var(--hw-post-bg,#ffffff); border-radius:var(--hw-main-rd,0px); box-shadow:var(--hw-box-layout-sd); overflow: hidden; } body [class*="hw-module-"] [class*="hw-post-"]{ position:relative; float:left; margin: 0; width:100%; transition: var(--hw-tr) ; } [class*="hw-module-"] .hw-thumb{ padding:var(--hw-post-img-pd,0px); background-color:var(--hw-post-img-bg,transparent); border-radius:var(--hw-post-img-rd,var(--hw-main-rd)); border:var(--hw-post-img-br,none); box-shadow:0 0 var(--hw-post-img-sd,0px) var(--hw-post-img-sd,0px) var(--hw-post-sd); } .hw-boxed-all,[class*="hw-boxed-item"] [class*="hw-module-"] [class*="hw-post-"], [class*="hw-boxed-details"] [class*="hw-module-"] .hw-details{ padding: var(--hw-pd); background:var(--hw-post-bg,#ffffff); border-radius:var(--hw-main-rd,0px); box-shadow:var(--hw-box-layout-sd); } body .hw-boxed-all.hw-has-tbox{ padding:calc(var(--hw-pd) /2) var(--hw-pd) var(--hw-pd); } [class*="hw-boxed-item"] [class*="hw-module-"] [class*="hw-post-"]:hover, [class*="hw-boxed-details"] [class*="hw-module-"] [class*="hw-post-"]:hover .hw-details{ --hw-box-layout-sd:var(--hw-box-layout-hv-sd); } .hw-boxed-item-2 [class*="hw-module-"] [class*="hw-post-"]{ padding:0px !important; } .hw-boxed-item-2 [class*="hw-module-"] .hw-details, [class*="hw-boxed-details"] [class*="hw-module-"] .hw-details{ padding: var(--hw-pd) ; z-index:2; margin-top:0px ; } [class*="hw-el-"][class*="hw-bw-border"].hw-none [class*="hw-module-"] [class*="hw-post-"]::before, [class*="hw-el-"][class*="hw-bw-border"].hw-none [class*="hw-module-"] [class*="hw-post-"]::after, [class*="hw-el-"][class*="hw-bw-border"].hw-boxed-all [class*="hw-module-"] [class*="hw-post-"]::before, [class*="hw-el-"][class*="hw-bw-border"].hw-boxed-all [class*="hw-module-"] [class*="hw-post-"]::after, [class*="hw-el-"][class*="hw-bw-border"].hw-boxed-content [class*="hw-module-"] [class*="hw-post-"]::before, [class*="hw-el-"][class*="hw-bw-border"].hw-boxed-content [class*="hw-module-"] [class*="hw-post-"]::after { content: ""; position: absolute; border-style:var(--hw-bw-border,solid) !important; border-color:var(--hw-post-sd,var(--hw-main-br-cr)) !important; } .hw-bw-border-2{ --hw-bw-border:dashed; } [class*="hw-module-"] [class*="hw-post-"]::before{ border-width: 1px 0 0 0 ; height: 1px; width:100% ; left: 0; bottom:calc(calc(var(--hw-gp) / -2 ) - 2px); } [class*="hw-module-"] [class*="hw-post-"]::after{ position: absolute; width:1px; height: 100% ; border-width: 0px 1px 0 0 ; top: 0px; right:calc(calc(var(--hw-gp) / -2 ) - 2px) } [class*="hw-el-"].hw-boxed-item.hw-gap-0px .lSSlideWrapper::before, [class*="hw-el-"].hw-boxed-item-2.hw-gap-0px .lSSlideWrapper::before { box-shadow:-1px 1px 0 0px var(--hw-post-sd) inset; content:""; position:absolute; top:0px;z-index: 102; pointer-events: none; right:0px; width:100%; height:100%; } [class*="hw-module-"] .hw-all-category-blog { position: absolute; top: 0px; left: 0px; margin:var(--hw-pd); } .hw-boxed-details-2 .hw-module-2 .hw-all-category-blog{ padding-bottom: 40px; padding-left: 20px; margin-left: 0px !important; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 4.3 - Module 1 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Module 1 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-module-1{ --hw-ag:left; --hw-post-dis:inline-block; } .hw-module-1 .hw-thumb{ width: calc(var(--hw-img-wt) - (var(--hw-post-img-sd,0px) * 4)); margin:calc(var(--hw-post-img-sd,0px) * 2); } [class*="hw-el-"].hw-none .hw-not-thumb.hw-module-1,[class*="hw-el-"].hw-boxed-all .hw-not-thumb.hw-module-1,[class*="hw-el-"].hw-boxed-item .hw-not-thumb.hw-module-1{ --hw-dt-pd-rt:0px !important; } .hw-module-1 .hw-details { padding-left:var(--hw-dt-pd-rt,var(--hw-pd)) !important; z-index:1; margin:var(--hw--dt-ver,0 auto auto); text-align:var(--hw-ag,left); width:calc(100% - var(--hw-img-wt)); } .hw-boxed-details-2 .hw-module-1 .hw-details { margin-top: 20px; position: relative; margin-left: -40px !important; margin-bottom: 20px; height: calc(100% - 40px) !important; width: calc(calc(100% - var(--hw-img-wt)) + 40px); } [class*="hw-boxed-details"] .hw-module-2.hw-not-thumb { display:flex; } .hw-boxed-details .hw-module-1.hw-not-thumb .hw-details{ margin:0px !important; } .hw-boxed-details-2 .hw-module-1.hw-not-thumb .hw-details{ margin: 20px 0 !important; width: calc(calc(100% - var(--hw-img-wt)) ); } .hw_img_width_auto,.hw_img_width_auto-second .hw-second{ --hw-img-wt:auto ; --hw-img-wt-number:30 ; }.hw_img_width_5,.hw_img_width_5-second .hw-second{ --hw-img-wt:5% ; --hw-img-wt-number:0.5 ; }.hw_img_width_10,.hw_img_width_10-second .hw-second{ --hw-img-wt:10% ; --hw-img-wt-number:0.10 ; } .hw_img_width_15,.hw_img_width_15-second .hw-second { --hw-img-wt:15% ; --hw-img-wt-number:0.15 ; } .hw_img_width_20,.hw_img_width_20-second .hw-second{ --hw-img-wt:20% ; --hw-img-wt-number:0.2 ; } .hw_img_width_25,.hw_img_width_25-second .hw-second{ --hw-img-wt:25% ; --hw-img-wt-number:0.25 ; } .hw_img_width_27,.hw_img_width_27-second .hw-second{ --hw-img-wt:27.5% ; --hw-img-wt-number:0.275 ; } .hw_img_width_30,.hw_img_width_30-second .hw-second{ --hw-img-wt:30% ; --hw-img-wt-number:0.30 ; } .hw_img_width_32,.hw_img_width_32-second .hw-second{ --hw-img-wt:32.5% ; --hw-img-wt-number:0.325 ; }.hw_img_width_35,.hw_img_width_35-second .hw-second{ --hw-img-wt:35% ; --hw-img-wt-number:0.35 ; } .hw_img_width_37,.hw_img_width_37-second .hw-second{ --hw-img-wt:37.5% ; --hw-img-wt-number:0.375 ; } .hw_img_width_40,.hw_img_width_40-second .hw-second{ --hw-img-wt:40% ; --hw-img-wt-number:0.40 ; } .hw_img_width_45,.hw_img_width_45-second .hw-second{ --hw-img-wt:45% ; --hw-img-wt-number:0.45 ; } .hw_img_width_50,.hw_img_width_50-second .hw-second{ --hw-img-wt:50%; --hw-img-wt-number:0.5 ; } .hw_img_width_55,.hw_img_width_55-second .hw-second{ --hw-img-wt:55%; --hw-img-wt-number:0.55 ; } .hw_img_width_60,.hw_img_width_60-second .hw-second{ --hw-img-wt:60%; --hw-img-wt-number:0.6 ; } .hw_img_width_65,.hw_img_width_65-second .hw-second{ --hw-img-wt:65%; --hw-img-wt-number:0.65 ; } .hw_img_width_70,.hw_img_width_70-second .hw-second{ --hw-img-wt:70%; --hw-img-wt-number:0.70 ; } .hw_img_width_auto .hw-module-1 .hw-post-blog{ display: inline-grid!important; grid-template-columns: auto auto!important; } .hw_img_width_auto .hw-module-1 .hw-details{ width:100% !important; } body .hw-el-image-list .hw-excerpt{ display:inline-block !important; } .hw-module-1 .hw-product-tags { width: calc(var(--hw-img-wt) - 20px); } .woocommerce.hw-boxed-item .hw-module-1 .hw-product-tags{ width: calc(var(--hw-img-wt) - ((var(--hw-pd) * 2) * var(--hw-img-wt-number) ) + (var(--hw-pd)*2) - 20px); } .woocommerce.hw-boxed-item-2 .hw-module-1 .hw-product-tags{ width: calc(var(--hw-img-wt) - 20px); } .hw-module-1 .hw-product-tag-hide{ display:none !important; } body .hw-el-image-list .hw-thumb{ border-radius: var(--hw-post-img-rd,0px); } @media (max-width: 1199px) { .hw-module-1 .hw-excerpt,.hw-module-1 .hw-readmore { display: var(--hw-dp,inline-block) !important; } } @media (max-width: 1024px) { [class*="hw_img_width"] .hw-post-blog{ --hw-img-wt:35%; } [class*="hw_img_width"] .hw-post-product{ --hw-img-wt:25% !important; --hw-img-wt-number:0.25 ; } .hw_img_width_auto .hw-post-blog{ --hw-img-wt:auto !important; } } body .hw-el-image-list .hw-title::before,body .hw-el-image-list .hw-excerpt::before { content:'- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -'; width:100%; visibility:hidden; float:right; position:relative; font-size:18px!important; height:0 } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 4.4 - Module 2 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Module 2 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-module-2{ --hw-post-dis:grid; direction:rtl; } .hw-module-2 [class*="hw-post-"]{ direction:ltr; } [class*="hw-el-"].hw-none .hw-not-thumb.hw-module-2,[class*="hw-el-"].hw-boxed-all .hw-not-thumb.hw-module-2,[class*="hw-el-"].hw-boxed-item .hw-not-thumb.hw-module-2{ --hw-dt-mg-tp:0px !important; } .hw-module-2 .hw-details { margin-top:var(--hw-dt-mg-tp,var(--hw-pd)) ; } .hw-item-hover .hw-post-product{ height: calc(100% + calc(var(--hw-product-lg) * 3) + var(--hw-pd) ); } .hw-module-4 .hw-title{ font-size:calc(var(--hw-fn-md) * 1.1); } [class*="hw-el-"] .hw-item-list:hover{ z-index:100; } .hw-module-2 .hw-details > *:last-child{ margin-bottom:5px; } [class*="hw-boxed-details"] .hw-module-2 [class*="hw-post-"]{ grid-template-rows: min-content; display: grid; } .hw-boxed-details-2 .hw-module-2 .hw-details{ margin: -40px 20px 0 !important ; width:auto; } .hw-module-2 .hw-thumb{ margin:calc(var(--hw-post-img-sd,0px) * 2); width: calc(100% - (var(--hw-post-img-sd,0px) * 4)); } [class*="hw-boxed-details"] .hw-module-2.hw-not-thumb { display:flex; } .hw-boxed-details .hw-module-2.hw-not-thumb .hw-details{ margin:0px !important; } .hw-boxed-details-2 .hw-module-2.hw-not-thumb .hw-details{ margin:0px 20px !important; } .hw-module-2 .hw-icon-video{ display: var(--hw-dp-3,inline-block) !important; } .hw-module-2 .hw-all-category-blog{ display: var(--hw-dp-4,inline-block) !important; } @media (max-width: 1199px) { .hw-module-2 .hw-excerpt { display: var(--hw-dp-3,inline-block) !important; } .hw-module-2 .hw-readmore { display: var(--hw-dp,inline-block) !important; } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 4.5 - Glider ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Glider ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ body .vs-glider{ --vs-glo-sd:var(--hw-post-sd-sz) var(--hw-post-sd); } .hw-el-slider.hw-parallax .hw-thumb > a > figure, .hw-el-slider.hw-parallax .hw-thumb > a > figure:hover { background-attachment: fixed !important; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important; -webkit-transform:none !important; -moz-transform: none !important; transform: none !important; -o-transform: none !important; -ms-transform: none !important; position: absolute !important; } .hw-el-slider.hw-parallax .hw-glider .hw-post-blog{ transform:none !important; } .hw-glider{ --hw-post-tl-lk:var(--hw-cap-lk) ; --hw-expt-txt:var(--hw-cap-txt) ; --hw-meta-txt:var(--hw-cap-meta) ; --hw-main-br-cr:var(--hw-cap-br-cr) ; padding:0px ; } .hw-glider [class*="hw-post-"]{ padding-bottom: calc((var(--hw-ratio,0px) - var(--hw-gp,0px)) - (var(--hw-post-img-sd,0px) * 4)); width: calc(100% - (var(--hw-post-img-sd,0px) * 4)); float: left; position: relative; overflow: hidden; border-radius: var(--hw-main-rd,0px); border:var(--hw-post-img-br,none); box-shadow:0 0 var(--hw-post-img-sd,0px) var(--hw-post-img-sd,0px) var(--hw-post-sd); margin: calc((var(--hw-gp,0px) / 2) + (var(--hw-post-img-sd,0px) * 2)); } .hw-boxed-content .hw-glider [class*="hw-post-"]{ margin:calc(var(--hw-post-img-sd,0px) * 2) !important; } .hw-boxed-content .hw-ratio-full .hw-glider [class*="hw-post-"]{ height: 100% !important; } .hw-glider [class*="hw-post-"] .hw-inner { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; } .hw-glider .hw-thumb{ height: var(--hw-ratio-ht-img,auto)!important; position: var(--hw-ratio-po,absolute); width: 100%; } .hw-glider .hw-thumb a{ padding-bottom: 0px !important; height: var(--hw-ratio-ht-img,auto)!important; } .hw-glider .hw-thumb a::before{ position:absolute; top:0px; bottom:0px; content:""; width:100%; height:100%; z-index:1; background:var(--sao-sl-cr-bg,none); } .hw-glider .hw-details{ max-width: var(--hw-body-wt); margin: 0 auto; } .hw-glider.hw-not-thumb{ background: var(--hw-cap-bg) ; } .hw-glider .hw-hover-icon{ display:var(--hw-dp-2,inline-block); } [class*="hw-el-"]:not(.hw-cap-hover-middle) .hw-glider figcaption{ opacity:1 !important; transform:none !important; padding:0px !important; } [class*="hw-el-"]:not(.hw-cap-hover-middle) .hw-glider figcaption::before, [class*="hw-el-"]:not(.hw-cap-hover-middle) .hw-glider figcaption::after{ display:none !important; } .hw-cap-hide .hw-glider figcaption{ display:none !important; } .hw-cap-middle .hw-glider figcaption, .hw-cap-hover-middle .hw-glider figcaption { align-items: center; } .hw-cap-hover-bottom .hw-glider figcaption, .hw-cap-bottom figcaption,.hw-cap-gradient-bottom .hw-glider figcaption{ align-items: end; } .hw-cap-bottom .hw-glider figcaption{ height:auto; bottom:0px; } .hw-glider .hw-details .hw-title a { text-shadow: 0 2px 3px var(--hw-cap-bg) !important; } .hw-glider .hw-details .hw-excerpt { text-shadow: 0 2px 2px var(--hw-cap-bg) !important; } .hw-glider .hw-details .hw-meta, .hw-glider .hw-details .hw-meta a, .hw-glider .hw-details .hw-meta span { text-shadow: 0 2px 2px var(--hw-cap-bg) !important; } .hw-cap-middle .hw-glider .hw-icon-video { position: relative; margin: 0 0 var(--hw-mg-tp); display: inline-block; width: 100%; vertical-align: top; text-align: var(--hw-ag,center); height: var(--hw-icn-sz); float: var(--hw-ag,center); } .hw-hide-cap .hw-glider figcaption{ background:none !important; } .hw-cap-gradient-bottom .hw-glider figcaption{ background: linear-gradient(to bottom, var(--hw-cap-bg-2) 0%,var(--hw-cap-bg) 125%) !important; } .hw-cap-hover-bottom .hw-glider figcaption{ bottom:-100%; height:auto !important; transition: bottom 350ms; } .hw-cap-hover-bottom .hw-glider [class*="hw-post-"]:hover figcaption{ bottom:0px; transition: bottom 350ms; } .hw-glider [class*="hw-post-"]:hover .hw-hover-icon{ margin-bottom:var(--hw-mg-tp); } .hw-glider .hw-details{ position:relative; padding:var(--hw-pd); } .hw-glider .hw-excerpt,.hw-glider .hw-readmore{ display: var(--hw-dp,inline-block) !important; } .hw-glider .hw-meta, .hw-glider .hw-all-category-blog, .hw-glider .hw-icon-video { display: var(--hw-dp-2,inline-block) !important; } .hw-glider.hw-aw .hw-meta, .hw-glider.hw-aw .hw-all-category-blog, .hw-glider.hw-aw .hw-icon-video { display: var(--hw-dp-3,inline-block) !important; } .hw_featured_1 .hw-glider .hw-meta, .hw_featured_2 .hw-glider .hw-meta, .hw_featured_3 .hw-glider .hw-meta, .hw_featured_4 .hw-glider .hw-meta, .hw_featured_5 .hw-glider .hw-meta, .hw_featured_6 .hw-glider .hw-meta, .hw_featured_7 .hw-glider .hw-meta, .hw_featured_8 .hw-glider .hw-meta{ display: var(--hw-dp-3,inline-block) !important; } .hw-cap-gradient-bottom .hw-glider .hw-post-blog.hw-icon-center .hw-icon-video , .hw-cap-gradient-bottom .hw-glider .hw-post-blog.hw-icon-center .hw-circular{ display:none !important; } .hw-glider .hw-all-category-blog { position: absolute; top: 0px;z-index: 2; left: 0px; margin:var(--hw-pd); } .hw-glider .hw-all-category-blog { text-align:var(--hw-ag,left); } .hw-glider .hw-post-slider .hw-thumb a{ background-image: var(--hw-bg-2,var(--hw-bg,none)); background-position: center center !important; background-repeat: no-repeat !important; background-size: cover !important; } .hw-image-featured { grid-template-columns: var(--hw-flx-col); display: grid; } .hw-image-featured .hw-post-slider{ padding-bottom: 0 !important; width: 100%!important; float: left !important; --hw-ratio-ht:100%; position: relative !important; overflow: hidden !important; box-shadow: var(--hw-box-layout-sd) !important; border-radius: var(--hw-main-rd,0px) !important; margin: calc(var(--hw-gp,0px) / 2) !important; height: calc(100% - var(--hw-gp,0px)) !important; } .hw-image-featured .hw-post-slider .hw-inner{ position:relative; } @media (max-width: 1024px) { .hw-image-featured > .hw-glider{ display:none !important; } .hw-image-featured { grid-template-columns: 100%!important; display: grid; } } @media (min-width: 1025px) { [class*="hw-bw-border"] [class*="hw_featured_mg"] .hw-glider [class*="hw-post-"]{ margin-bottom:0px !important; } [class*="hw-bw-border"] .hw_featured_mg_c > *:nth-child(2) [class*="hw-post-"]::after, [class*="hw-bw-border"] .hw_featured_mg_c > *:nth-child(4) [class*="hw-post-"]::after{ display:none !important; } [class*="hw-bw-border"] .hw_featured_mg_c .hw-glider [class*="hw-post-"]{ margin-right:0px !important; margin-left:0px !important; } [class*="hw-bw-border"] .hw_featured_mg_l .hw-glider [class*="hw-post-"]{ margin-right:0px !important; } [class*="hw-bw-border"] .hw_featured_mg_3c > *:first-child [class*="hw-post-"]{ margin-right:calc(var(--hw-gp,0px)/6); } [class*="hw-bw-border"] .hw_featured_mg_3c > *:nth-child(3) [class*="hw-post-"] { margin-left:calc(var(--hw-gp,0px)/6); } [class*="hw-bw-border"] .hw_featured_mg_3c > .hw-glider:nth-child(2) [class*="hw-post-"]{ margin-left:calc(var(--hw-gp,0px)/3); margin-right:calc(var(--hw-gp,0px)/3); } [class*="hw-bw-border"] .hw_featured_mg_2c > .hw-glider:first-child [class*="hw-post-"]{ margin-right:calc(var(--hw-gp,0px)/4); } [class*="hw-bw-border"] .hw_featured_mg_2c > .hw-glider:nth-child(2) [class*="hw-post-"] { margin-left:calc(var(--hw-gp,0px)/4); } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 4.6 - Post Layout ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Post Layout ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ @media (min-width: 1025px) { .hw-ratio-full > *:first-child [class*="hw-post-"]{ padding-bottom:0px !important; height: calc(100% - var(--hw-gp,0px))!important; } .hw_grid_14, .hw_featured_18, .hw_featured_grid_10 { --hw-flx:6; } .hw_grid_15, .hw_featured_21, .hw_featured_grid_17 { --hw-flx:12; } .hw_featured_20, .hw_featured_grid_16 { --hw-flx:10; } .hw_featured_22, .hw_featured_grid_18{ --hw-flx:15; } .hw_grid_list_6, .hw_grid_text_6{ --hw-flx:3; } .hw_list_5 > *:first-child, .hw_grid_14 > *:nth-child(n + 3), .hw_featured_14 > *:first-child, .hw_featured_18 > *:nth-child(n + 3), .hw_featured_grid_10 > *:nth-child(n + 3), .hw_featured_19 > *:first-child, .hw_featured_grid_15 > *:first-child, .hw_featured_19 > *:nth-child(2), .hw_featured_grid_15 > *:nth-child(2), .hw_featured_20 > *, .hw_featured_grid_16 > *, .hw_grid_list_2 > *:first-child, .hw_grid_list_3 > *:nth-child(n + 3), .hw_grid_list_7 > *:first-child, .hw_grid_text_2 > *:first-child, .hw_grid_text_3 > *:nth-child(n + 3), .hw_grid_text_7 > *:first-child, .hw_featured_list_2 > *:first-child, .hw_featured_list_3 > *:nth-child(n + 3), .hw_featured_list_7 > *:first-child, .hw_featured_text_2 > *:first-child, .hw_featured_text_3 > *:nth-child(n + 3), .hw_featured_text_7 > *:first-child, .hw_featured_grid_2 > *:first-child { grid-column-end: span 2; } .hw_list_6 > *:first-child, .hw_grid_14 > *, .hw_grid_15 > *:nth-child(n + 4), .hw_featured_15 > *:first-child, .hw_featured_18 > *, .hw_featured_grid_10 > *, .hw_featured_21 > *:nth-child(n + 4), .hw_featured_22 > *:nth-child(n + 4), .hw_featured_grid_17 > *:nth-child(n + 4), .hw_featured_grid_18 > *:nth-child(n + 4), .hw_featured_grid_3 > *:first-child, .hw_grid_list_8 > *:first-child, .hw_featured_list_8 > *:first-child, .hw_grid_text_8 > *:first-child, .hw_featured_text_8 > *:first-child{ grid-column-end: span 3; } .hw_grid_15 > *,.hw_featured_16 > *:first-child, .hw_featured_21 > *, .hw_featured_grid_17 > *, .hw_featured_grid_4 > *:first-child { grid-column-end: span 4; } .hw_featured_17 > *:first-child, .hw_featured_20 > *:first-child, .hw_featured_20 > *:nth-child(2), .hw_featured_grid_16 > *:first-child, .hw_featured_grid_16 > *:nth-child(2), .hw_featured_22 > *, .hw_featured_grid_18 > *, .hw_featured_grid_5 > *:first-child { grid-column-end: span 5; } .hw_featured_grid_6 > *:first-child { grid-column-end: span 6; } .hw_list_7 > *:first-child, .hw_list_8 > *:first-child, .hw_grid_9 > *:first-child, .hw_grid_10 > *:first-child, .hw_grid_11 > *:first-child, .hw_grid_12 > *:first-child, .hw_featured_9 > *:first-child, .hw_featured_10 > *:first-child, .hw_featured_11 > *:first-child, .hw_featured_12 > *:first-child, .hw_featured_24 > *:first-child, .hw_featured_25 > *:first-child, .hw_featured_26 > *:first-child, .hw_featured_grid_7 > *:first-child, .hw_featured_grid_8 > *:first-child{ grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; } .hw_list_9 > *:first-child, .hw_grid_13 > *:first-child, .hw_featured_13 > *:first-child, .hw_featured_grid_9 > *:first-child { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .hw_featured_23 > *:first-child{ grid-column-end: 4; grid-row-end: 4; grid-column-start: 1; grid-row-start: 1; } .hw_featured_24 > *:nth-child(2), .hw_featured_26 > *:nth-child(2){ grid-column-end: span 2; } .hw_featured_25 > *:nth-child(2), .hw_featured_29 > *:first-child, .hw_featured_grid_11 > *:first-child, .hw_featured_grid_13 > *:first-child, .hw_featured_grid_12 > *:first-child { grid-row-start: 1; grid-row-end: 3; } .hw_featured_grid_13 > *:first-child{ grid-column-end: 3; grid-column-start: 2; } .hw_featured_grid_14 > *:first-child{ grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .hw_grid_list_5 > *:nth-child(2), .hw_grid_list_6 > *:nth-child(2), .hw_grid_list_7 > *:nth-child(2), .hw_grid_list_8 > *:nth-child(2), .hw_featured_list_5 > *:nth-child(2), .hw_featured_list_6 > *:nth-child(2), .hw_featured_list_7 > *:nth-child(2), .hw_featured_list_8 > *:nth-child(2), .hw_grid_text_5 > *:nth-child(2), .hw_grid_text_6 > *:nth-child(2), .hw_grid_text_7 > *:nth-child(2), .hw_grid_text_8 > *:nth-child(2), .hw_featured_text_5 > *:nth-child(2), .hw_featured_text_6 > *:nth-child(2), .hw_featured_text_7 > *:nth-child(2), .hw_featured_text_8 > *:nth-child(2) { display:grid; padding:0px !important; } .hw_grid_list_6 > *:nth-child(2), .hw_featured_list_6 > *:nth-child(2), .hw_grid_text_6 > *:nth-child(2), .hw_featured_text_6 > *:nth-child(2){ grid-column-start:2; grid-column-end: 4; grid-template-columns: 50% 50%; } .hw_featured_26 > *:nth-child(7){ grid-row-end: 4; grid-row-start: 2; grid-column-start: 4; grid-column-end: 5; } .hw_featured_27 > *:first-child{ grid-row-start: 1; grid-row-end: 3; } .hw_featured_27 > *:nth-child(7){ grid-row-start: 2; grid-row-end: 4; grid-column-start: 3; grid-column-end: 4; } .hw_featured_28 > *:first-child, .hw_featured_28 > *:nth-child(3){ grid-row-start: 1; grid-row-end: 3; } .hw_featured_28 > *:nth-child(3){ grid-column-start: 3; grid-column-end: 4; } .hw_featured_28 > *:nth-child(6), .hw_featured_28 > *:nth-child(8){ grid-row-start: 2; grid-row-end: 4; } .hw_featured_28 > *:nth-child(6){ grid-column-start: 2; grid-column-end: 3; } .hw_featured_28 > *:nth-child(8){ grid-column-start: 4; grid-column-end: 5; } .hw_featured_30 > *:first-child{ grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; } .hw_featured_31 > *:nth-child(5){ grid-column-start: 3; grid-column-end:5; grid-row-start: 1; grid-row-end: 3; } .hw_featured_32 > *:nth-child(3){ grid-column-start: 2; grid-column-end:3; grid-row-start: 1; grid-row-end: 3; } } @media (max-width: 1024px) { .hw_first_full.hw-item-list > *:first-child{ width:100% !important; } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 4.7 - facaption ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Facaption ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ [class*="hw-imghvr-slide"] figcaption,.hw-imghvr-flip-vert figcaption,.hw-imghvr-flip-horiz figcaption{ opacity:1 !important; } [class*="hw-imghvr-"] [class*='hw-post-']:hover figcaption { transform: translate(0,0) rotate3d(0, 0, 0, 0deg) rotateX(0deg) scale(1); opacity:1; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Slide ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-imghvr-slide-up figcaption { transform: translateY(100%); } .hw-imghvr-slide-down figcaption { transform: translateY(-100%); } .hw-imghvr-slide-right figcaption { transform: translateX(100%); } .hw-imghvr-slide-left figcaption { transform: translateX(-100%); } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Flip ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-imghvr-flip-horiz figcaption { transform: rotateX(90deg); transform-origin: 0% 50%; } .hw-imghvr-flip-vert figcaption { transform: rotateY(90deg); transform-origin: 50% 0%; } .hw-imghvr-flip-diag-1 figcaption { opacity:0; transform: rotate3d(1, -1, 0, 100deg); } .hw-imghvr-flip-diag-2 figcaption { opacity:0; transform: rotate3d(1, 1, 0, 100deg); } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Zoom ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-imghvr-zoom-in figcaption { transform: scale(0.5); opacity: 0; } .hw-imghvr-zoom-out figcaption { transform: scale(2.0); transform-origin: 50% 50%; opacity: 0; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Layla ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-imghvr-layla figcaption{ opacity:0; padding:40px; } .hw-imghvr-layla figcaption::before,.hw-imghvr-layla figcaption::after { position: absolute; content: ''; opacity: 0; } .hw-imghvr-layla figcaption::before { top: 40px; left: 20px; bottom: 40px; right: 20px; border-top: 1px solid var(--hw-cap-lk); border-bottom: 1px solid var(--hw-cap-lk); transform: scale(0,1); transform-origin: 0 0; } .hw-imghvr-layla figcaption::after { top: 20px; left: 40px; bottom: 20px; right: 40px; border-left: 1px solid var(--hw-cap-lk); border-right: 1px solid var(--hw-cap-lk); -webkit-transform: scale(1,0); transform: scale(1,0); transform-origin: 100% 0; } .hw-imghvr-layla [class*='hw-post-']:hover figcaption::before,.hw-imghvr-layla [class*='hw-post-']:hover figcaption::after { opacity: 1; transform: scale(1); } .hw-imghvr-layla[class*='hw-post-']:hover figcaption::after { transition-delay: 0.15s; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** oscar ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-imghvr-oscar figcaption{ padding: var(--hw-pd); } .hw-imghvr-oscar figcaption::before { position: absolute; right:0px; left:0px; top:0px; bottom:0px; border: 1px solid var(--hw-cap-lk); content: ''; opacity: 0; transform: scale(0.0); z-index:1; pointer-events: none; border-radius: var(--hw-post-img-rd,var(--hw-main-rd,0px)); transition: 0.5s ; } .hw-imghvr-oscar [class*='hw-post-']:hover figcaption::before { opacity: 1; border: 1px solid var(--hw-cap-lk); right: var(--hw-pd); bottom: var(--hw-pd); top: var(--hw-pd); transform: scale(1.0); left: var(--hw-pd); } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** bubba ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-imghvr-bubba figcaption{ opacity:0; padding:var(--hw-pd) } .hw-imghvr-bubba [class*='hw-post-']:hover figcaption{ opacity:1; } .hw-imghvr-bubba figcaption::before,.hw-imghvr-bubba figcaption::after { position: absolute; top: var(--hw-pd); left: var(--hw-pd); bottom: var(--hw-pd); right: var(--hw-pd); content: ''; opacity: 0; transition: opacity 0.35s, transform 0.35s; } .hw-imghvr-bubba figcaption::before { border-top: 1px solid var(--hw-cap-lk); border-bottom: 1px solid var(--hw-cap-lk); transform: scale(0,1); } .hw-imghvr-bubba figcaption::after { border-left: 1px solid var(--hw-cap-lk); border-right: 1px solid var(--hw-cap-lk); transform: scale(1,0); } .hw-imghvr-bubba [class*='hw-post-']:hover figcaption::before,.hw-imghvr-bubba [class*='hw-post-']:hover figcaption::after { opacity: 1; transform: scale(1); } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** chico ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-imghvr-chico figcaption{ opacity:0; padding: var(--hw-pd); -webkit-transition: 0.5s; transition: 0.5s; } .hw-imghvr-chico figcaption::before { position: absolute; right:0px; left:0px; top:0px; bottom:0px; border: 1px solid var(--hw-cap-lk); content: ''; opacity: 0; transform: scale(1.1); z-index:1; border-radius: var(--hw-post-img-rd,var(--hw-main-rd,0px)); pointer-events: none; -webkit-transition: 0.5s ; transition: 0.5s ; } .hw-imghvr-chico [class*='hw-post-']:hover figcaption::before { opacity: 1; border: 1px solid var(--hw-cap-lk); right: var(--hw-pd); bottom: var(--hw-pd); top: var(--hw-pd); transform: scale(1.0); left: var(--hw-pd); } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** selena ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-imghvr-selena figcaption{ opacity:0; padding: var(--hw-pd); transition: 0.5s; } .hw-imghvr-selena figcaption::before { position: absolute; right:0px; left:0px; top:0px; bottom:0px; border: 0px solid var(--hw-cap-lk); content: ''; opacity: 0; transform: scale(1.1); border-radius: var(--hw-post-img-rd,var(--hw-main-rd,0px)); z-index:1; pointer-events: none; transition: 0.5s ; } .hw-imghvr-selena [class*='hw-post-']:hover figcaption::before { opacity: 1; border: var(--hw-pd) solid var(--hw-cap-lk); right: 0; bottom: 0; top: 0; transform: scale(1.0); left: 0; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** ming ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-imghvr-ming figcaption{ opacity:0; padding: var(--hw-pd); transition: 0.5s; } .hw-imghvr-ming figcaption::before { position: absolute; right:0px; left:0px; top:0px; bottom:0px; border: 0px solid #fff; content: ''; opacity: 0; transform: scale(1.1); z-index:1; pointer-events: none; border-radius: var(--hw-post-img-rd,var(--hw-main-rd,0px)); transition: 0.5s ; } .hw-imghvr-ming [class*='hw-post-']:hover figcaption::before { opacity: 1; border: var(--hw-pd) solid var(--hw-cap-br-cr); right: 0; bottom: 0; top: 0; box-shadow: 0 0 0 2px var(--hw-cap-lk) inset; transform: scale(1.0); left: 0; } figcaption .hw-hover-icon{ display:var(--hw-dp-3,inline-block) !important; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 4.8 - 404 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 404 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-sorry { padding: 0 10px; } .hw-sorry .widget_search { width: 100% !important; margin-top: 10px !important; } .hw-single-post .hw-excerpt { margin-bottom: 20px; } body .hw-404 { width:100% !important; font-size:150px; line-height:1em; float:left; width:100%; color:var(--hw-main-hl); } .hw-404-page .hw-opps{ font-size:30px; line-height:1.5em; margin-bottom: 20px; color:var(--hw-main-lk); } .hw-404-page .hw-opps-dese{ margin-bottom: 35px; line-height: 1.5em; color: var(--hw-main-txt); } .hw-404-page .hw-column-main{ text-align:center; padding:50px 20px; } .hw-404-page .widget_search { margin: auto !important; float: none !important; display: block !important; width: 600px !important; } @media (max-width: 767px){ body .hw-404 { font-size: 50px; margin-bottom:15px; } .hw-404-page .hw-opps{ font-size:18px; margin-bottom:15px; } .hw-404-page .widget_search { width: 100% !important; } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 4.9 - Macy ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Macy ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-append{ position:absolute; width:100%; left:0px; top:0px; opacity:0; } body .rez-all-transition-active{ transform:none !important; transition:none !important; } .rez-has-hide{ display:none } .rez-transition-active .hw-gap-warp > .hw-item-list{ height:var(--hw-old-list-ht) !important; transition:height 350ms linear !important; } .rez-transition-active .hw-gap-warp > .hw-item-list .hw-item.rez-to-hide,.rez-transition-active .hw-gap-warp > .hw-item-list .hw-item{ position:fixed; width:var(--hw-old-wt) !important; height:var(--hw-old-ht) !important; right:var(--hw-old-hor) !important; left:auto !important; top:var(--hw-old-ver) !important; } .rez-animte .hw-gap-warp > .hw-item-list .hw-item { position:fixed; width:var(--hw-wt) !important; height:var(--hw-ht) !important; right:var(--hw-hor) !important; left:auto !important; top:var(--hw-ver) !important; } .rez-transition-active.rez-animte .hw-gap-warp > .hw-item-list{ height:var(--hw-list-ht) !important; transition:height 200ms linear !important; } .rez-transition-active.hw-old-list-height.rez-animte .hw-gap-warp > .hw-item-list{ transition:height 200ms linear 150ms !important; } .rez-animte .hw-item.rez-to-move { transition:right 350ms linear,top 350ms linear !important; } .rez-transition-active .hw-gap-warp > .hw-not-move.hw-item-list{ } .rez-transition-active .hw-item.rez-to-show{ transform: scale(0) ; transition:transform 350ms linear!important; } .rez-transition-active.rez-animte .hw-item.rez-to-show{ transform: scale(1) ; transition:transform 350ms linear !important; } .rez-transition-active.rez-animte .hw-item.rez-to-hide{ transform: scale(0); transition:transform 350ms linear !important; } [id*="macy-"] .hw-item{ position:absolute !important; left: var(--macy-hor); top: var(--macy-ver); transform: scale(1); position: absolute; transition:none ; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 4.10 - Widgets ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Widget ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ body .widget { line-height: 1.8em; font-size: 13px; --hw-pd:20px; --hw-el-pd:var(--hw-default-pd); } body [class*="hw-el-widget"]{ --hw-el-pd:var(--hw-default-pd); } .widget-warp { float: left; border-radius: 0px; width: 100%; } .hw-el-widget_social [class*="hw-tbox"],.widget [class*="hw-tbox"] { margin-bottom: 20px; } .widget .widget-container { float: left; width:100%; } .hw-sidebar-boxed-all .widget, .hw-sidebar-boxed-item .widget .widget-container, .hw-sidebar-boxed-content .widget .widget-container{ padding: var(--hw-pd); background: var(--hw-post-bg,rgb(255, 255, 255)); border-radius: var(--hw-main-rd,0px); box-shadow: var(--hw-box-layout-sd); } .hw-sidebar-boxed-all .widget{ padding: calc(var(--hw-pd) / 1.5) var(--hw-pd) var(--hw-pd); } .hw-sidebar-boxed-content .widget [class*="hw-tbox"]{ margin-bottom:0px; } .widget .screen-reader-text { display: none } .widget a { font-size: 15px; line-height: 1.8em } .widget li { list-style: none; color:inherit; margin:0px; } .widget ul { margin-left: 0px; margin-bottom: 0px; margin-right: 0px; } .widget ul ul,.widget ol ol { margin: 0 0 0 15px } .widget ul li { padding: 5px 0 } .widget ul li ul li { padding: 5px 0 5px 0px } .widget ul li:before { font-family: 'fontsite'; content: "\F024"; font-style: normal; vertical-align: top; font-size: 1.5em; margin-right: 10px; margin-top: 0px; float: left; } .widget.widget_rss [class*="hw-tbox"] h4 a:not(.rsswidget) { display: none; } .widget_rss span { padding: 0px !important; } .widget_rss a { background: none !important; } .widget.widget_rss [class*="hw-tbox"] h4 a:nth-child(1) { padding: 5px 5px 5px 0px; font-size: inherit !important; } .widget.widget_rss [class*="hw-tbox"] h4 a:nth-child(2) { padding: 5px 0px 5px 0px; font-size: inherit !important; } .widget select { width: 100% } /******* Calender *****/ .widget #wp-calendar { width: 100%; margin: 0 !important; } .widget #wp-calendar caption { text-align: center; padding: 5px 10px; background:var(--hw-primary-bg) !important; color:var(--hw-primary-txt) !important; } .wp-calendar-nav{ display:none; } .widget .searchform input#s { width: 100% } .widget .searchform #searchsubmit { cursor: pointer } .widget_text img { max-width: 100%; height: auto } .widget.widget_nav_menu li a::before { content: inherit; display: none; } .widget p { line-height: 1.7em; margin: 0 0 1.6em; } .widget_text .wp-caption-text { padding: 5px } .hw-el-widget_social .hw-item-list { display:grid; grid-template-columns: 20% 20% 20% 20% 20% !important; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Ads ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-ads { text-align: center; float: left; display: inline-block; width: 100% } .hw-ads img { display: inline-block; float: left; top: 0; border-radius:var(--hw-main-rd); left: 50%; max-width: 100%; height: auto; position: relative; transform: translate(-50%, 0); font-size: 0; } .hw-resize.hw-ads img { width: 100%; float: left } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Widget Tags ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-tags-box { float: left; width: 100%; } .tag-cloud-link,.hw-tags-box a { font-weight: 400; padding: 3px 7px; margin: 3px; float: left; background:var(--hw-main-gry); color:var(--hw-main-txt); font-size: 13px !important; position: relative; border-radius: var(--hw-btn-rd); } .tag-cloud-link:hover,.hw-tags-box a:hover{ background:var(--hw-primary-hv-bg); color:var(--hw-primary-txt); box-shadow: 0 0 0 1px transparent inset; } .hw-sidebar div.widget:nth-child(1), .hw-sidebar div.widget:nth-child(5), .hw-sidebar div.widget:nth-child(9){ --hw-primary-bg: var(--hw-rand-bg-1 ,#1a9e7a); --hw-primary-txt: var(--hw-rand-txt-1,#ffffff); } .hw-sidebar div.widget:nth-child(2), .hw-sidebar div.widget:nth-child(6), .hw-sidebar div.widget:nth-child(10){ --hw-primary-bg: var(--hw-rand-bg-2 ,#1a9e7a); --hw-primary-txt: var(--hw-rand-txt-2,#ffffff); } .hw-sidebar div.widget:nth-child(3), .hw-sidebar div.widget:nth-child(7), .hw-sidebar div.widget:nth-child(11){ --hw-primary-bg: var(--hw-rand-bg-3 ,#1a9e7a); --hw-primary-txt: var(--hw-rand-txt-3,#ffffff); } .hw-sidebar div.widget:nth-child(4), .hw-sidebar div.widget:nth-child(8), .hw-sidebar div.widget:nth-child(12){ --hw-primary-bg: var(--hw-rand-bg-3 ,#1a9e7a); --hw-primary-txt: var(--hw-rand-txt-3,#ffffff); } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 5 - Element ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 5.1 - Element ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Elements ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ [class*="hw-el-"],.widget{ display:inline-block; float:left; transition:var(--hw-tr)!important; z-index:0; position:relative; --hw-el-pd:0px; margin:var(--hw-el-pd); width:-webkit-fill-available; width:-moz-available; width:fill-available; --hw-box-layout-sd:var(--hw-post-sd-sz) var(--hw-post-sd); --hw-box-layout-hv-sd:var(--hw-post-sd-sz) var(--hw-post-sd); } [class*="hw-el-"] .hw-item-list{ --hw-box-layout-sd:var(--hw-post-sd-sz) var(--hw-post-sd); --hw-box-layout-hv-sd:var(--hw-post-sd-sz) var(--hw-post-sd); } [class*="hw-elementor"]{ display:grid; z-index:0; grid-template-columns: 100%; position:relative; width:100%; } [class="hw-element-"]:hover { z-index: 999999999; position: relative; } body .elementor-element .elementor-widget-container{ z-index:1; position:relative; } .hw-el-archive, .hw-el-game-image, .hw-el-menu_blog_grid{ --hw-el-pd:var(--hw-default-pd); } body .elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated, body .elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated > .elementor-widget-wrap{ padding:0px; } body .elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated{ padding:0px; } body .elementor-column-gap-default > .elementor-column > .elementor-element-populated { padding: 0px; } body .elementor-widget:not(:last-child){ margin-bottom:0px; } body .elementor-grid{ visibility:visible !important; } @media (max-width: 1024px) and (min-width: 768px) { body [class*='hw-el-']{ margin:var(--hw-el-tab-pd,var(--hw-el-pd)) } } @media (max-width: 767px) { body [class*='hw-el-']{ margin:var(--hw-el-mob-pd,var(--hw-el-pd)) } } .elementor-section [class*="elementor-widget-gamemart"] .elementor-widget-container, .elementor-section .e-child [class*="elementor-widget-gamemart"] .elementor-widget-container, .elementor-section [class*="elementor-widget-reza"] .elementor-widget-container, .elementor-section .e-child [class*="elementor-widget-reza"] .elementor-widget-container, .elementor-section [class*="elementor-widget-hexwp"] .elementor-widget-container, .elementor-section .e-child [class*="elementor-widget-hexwp"] .elementor-widget-container { padding:20px; } .elementor-section [class*="elementor-widget-visualslider_slider"] .elementor-widget-container, .elementor-section .e-child [class*="elementor-widget-visualslider_slider"] .elementor-widget-container { padding:0px; } [class*="elementor-widget-reza"] .elementor-widget-container, [class*="elementor-widget-gamemart"] .elementor-widget-container, [class*="elementor-widget-hexwp"] .elementor-widget-container, [class*="elementor-widget-visualslider_slider"] .elementor-widget-container { padding:10px 20px; } body .e-child [class*="elementor-widget-gamemart"] .elementor-widget-container, body .e-child [class*="elementor-widget-reza"] .elementor-widget-container, body .e-child [class*="elementor-widget-hexwp"] .elementor-widget-container, body .e-child [class*="elementor-widget-visualslider_slider"] .elementor-widget-container{ padding:10px; } body .elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--hw-body-wt); } body .elementor-element { --content-width: var(--hw-body-wt); --container-max-width: var(--hw-body-wt); } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 5.2 - Menu ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 9 - Category Menu ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 9 - Category Menu ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .z-index, .hw-el-menu{ z-index:99; --hw-menu-rd:var(--hw-main-rd,0px); --hw-menu-tl-txt:var(--hw-primary-txt); --hw-menu-tl-bg:var(--hw-primary-bg); --hw-menu-bg:var(--hw-post-bg); --hw-menu-lk:var(--hw-post-tl-lk); --hw-menu-hv-lk:var(--hw-post-tl-hv-lk); --hw-menu-br-cr:var(--hw-main-br-cr); --hw-menu-more-txt:var(--hw-main-txt); --hw-menu-more-bg:var(--hw-main-gry); --hw-menu-pd:14.3px; --hw-nav-icn-mr:10px; } body .hw-element-menu.hw-nav{ position:relative !important; width:100% !important; margin:0px !important; box-shadow:var(--hw-box-layout-sd); border-radius: var(--hw-main-rd); display:inline-block !important; } body .hw-element-menu.hw-element-menu-more-active .hw-cat-drop, body .hw-element-menu.hw-element-menu-more-active .hw-element-menu-more{ box-shadow:var(--hw-box-layout-sd)!important; } .hw-element-menu-title { height: 50px !important; padding: 0px 20px !important; font-size: var(--hw-menu-tl-fn-sz,15px) !important; font-weight: var(--hw-menu-tl-fn-wt,700) !important; text-transform: var(--hw-menu-tl-fn-tr,none)!important; line-height: 50px !important; float: left !important; border-radius: 00px!important; width: 100%!important; margin: 0px !important; color:var(--hw-menu-tl-txt) !important; background: var(--hw-menu-tl-bg) !important; border-top-left-radius: var(--hw-menu-rd) !important; border-top-right-radius: var(--hw-menu-rd) !important; } .hw-element-menu-title::before { color: inherit !important; content: "\F021"; font-family: 'fontsite' !important; margin-right: 10px; font-size: 1.5em; transition: color 0.3s linear; float: left; font-style: normal; position: relative; } .hw-element-menu-warp{ position:relative; float:left; width:100%; } .hw-element-menu .hw-cat-drop { border-style:solid; height: auto ; float: left; box-shadow:none !important; border-radius:0px; position:relative; z-index: 9999999999; width:100%; margin:0 0 !important; opacity:1 !important; transform:none; transition:none !important; padding:0px !important; border:0px !important; } .hw-element-menu .hw-cat-drop > li { display:var(--hw-menu-display,inline-block); } .hw-element-menu .hw-cat-drop > li > a::after{ width: calc(100% - 40px); position: absolute; content: ""; left: 20px; border-bottom: solid 1px var(--hw-cat-sub-br-cr,transparent); bottom: 0; } .hw-element-menu .hw-cat-drop{ background: var(--hw-menu-bg) !important; --hw-cat-sub-txt:var(--hw-menu-lk); --hw-main-hv-lk:var(--hw-menu-hv-lk); --hw-cat-sub-br-cr:var(--hw-menu-br-cr); } .hw-element-menu:not(.hw-element-menu-has-title) .hw-cat-drop{ border-top-left-radius: var(--hw-menu-rd,0px) !important; border-top-right-radius: var(--hw-menu-rd,0px) !important; } .hw-element-menu:not(.hw-element-menu-has-more) .hw-cat-drop{ border-bottom-left-radius: var(--hw-menu-rd,0px) !important; border-bottom-right-radius: var(--hw-menu-rd,0px) !important; } .hw-element-menu .hw-cat-drop > li > a { padding: var(--hw-menu-pd) 20px; font-size: var(--hw-menu-fn-sz,14px) !important; font-weight: var(--hw-menu-fn-wt,400) !important; text-transform: var(--hw-menu-fn-tr,none)!important; } .hw-element-menu-more{ transition: all 300ms linear; background: var(--hw-menu-more-bg,var(--hw-main-gry)) !important; color:var(--hw-menu-more-txt,var(--hw-main-txt))!important; float: left; width: 100%; border-style: solid; border-bottom-style: solid; font-weight:700 !important; border-top-width: 1px; position: relative; font-size: var(--hw-menu-more-fn-sz,14px) !important; font-weight: var(--hw-menu-more-fn-wt,400) !important; text-transform: var(--hw-menu-more-fn-tr,none)!important; line-height: 1.5em; border-bottom-left-radius: var(--hw-menu-rd,0px) !important; border-bottom-right-radius: var(--hw-menu-rd,0px) !important; border-color: var(--hw-main-br-cr); } .hw-element-menu-more a{ font-weight:700 !important; color:inherit !important; cursor: pointer; font-size:inherit; float:left; width:100% !important; padding:var(--hw-menu-pd) 20px; } .hw-element-menu-more:hover{ --hw-menu-more-txt:var(--hw-primary-txt); --hw-menu-more-bg:var(--hw-primary-hv-bg); } .hw-element-menu-more-active .hw-element-menu-more-text, .hw-element-menu-more-close{ display:none !important; } .hw-element-menu-more-active .hw-element-menu-more-close, .hw-element-menu-more-text{ display:inline-block !important; } .hw-element-menu-more-text::before { content: "+"; float: right; font-weight: 400 !important; font-size: 2em !important; text-align: right; } .hw-element-menu-more-close::before { content: "-"; float: right; font-weight: 400 !important; font-size: 2em !important; text-align: right; } @media (max-width: 1199px) and (min-width: 1025px) { .hw-element-menu-title { line-height:35px!important; height:35px!important; font-size:13px !important; } } @media (max-width: 1024px){ .hw-el-menu{ display:none !important; } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 5.3 - Contactform ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Contact Form ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .wpcf7-form > *,.wpcf7-form [class*="col-1"]{ position:relative; float:left; margin: calc(var(--hw-gp,0px) / 2); width: calc(var(--hw-form-wt,100%) - var(--hw-gp)); } .wpcf7-form p > label{ width:100%; } .wpcf7-form .col-1-1 { --hw-form-wt: 100% ; } .wpcf7-form .col-1-2 { --hw-form-wt: 50% ; } .wpcf7-form .col-1-3 { --hw-form-wt: 33.331%; } .wpcf7-form .col-1-4 { --hw-form-wt: 25% ; } .wpcf7-form .col-1-5 { --hw-form-wt: 20%; } .wpcf7-form .col-1-6 { --hw-form-wt: 16.661%; } .wpcf7-form .col-1-7 { --hw-form-wt: 14.281%; } .wpcf7-form .col-1-8 { --hw-form-wt: 12.5%; } @media (max-width: 1024px) { .wpcf7-form .col-1-1,.wpcf7-form .col-1-2,.wpcf7-form .col-1-3,.wpcf7-form .col-1-4,.wpcf7-form .col-1-5,.wpcf7-form .col-1-6,.wpcf7-form .col-1-7,.wpcf7-form .col-1-8{ --hw-form-wt:100% ; } } .wpcf7-submit.full{ width:100% !important; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 6 - Single ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 6.1 - Single ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Single ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-el-single{ --hw-el-pd:var(--hw-default-pd); } .hw-single-boxed{ padding: var(--hw-pd); background: var(--hw-post-bg,rgb(255, 255, 255)); border-radius: var(--hw-main-rd,0px); box-shadow: var(--hw-box-layout-sd); } .hw-el-single.hw-single-boxed{ padding:calc(var(--hw-pd) / 1.5) var(--hw-pd) var(--hw-pd) } .hw-single-details { float: left; width: var(--hw-col,100%); margin-bottom: 20px; padding-bottom: 10px; border-bottom:solid 1px var(--hw-main-br-cr); } .hw-single-thumb { width: 100% ; min-height: inherit ; height: auto ; float: left; margin-bottom:20px; text-align: center; } .hw-single-thumb img{ vertical-align: top; max-width: 100%; float: none; height: auto; } .hw-single-template-1 .hw-el-single .hw-single-details { width:60%; } .hw-single-template-1 .hw-el-single .hw-single-thumb,.hw-single-template-2 .hw-el-single .hw-single-thumb{ width:40% ; margin-bottom:0px !important; float:right; padding-bottom:var(--hw-pd); padding-left: var(--hw-pd); } .hw-single-template-1 .hw-el-single .hw-single-content,.hw-single-template-2 .hw-el-single .hw-single-content { float:none; width:auto; } /************************ Singe Share *************/ .hw-el-single .hw-el-share-single { margin-top:var(--hw-mg-tp) !important; --hw-scl-sz: calc(var(--hw-fn-md) * 1.75); --hw-ag:left; } .hw-el-single .hw-el-share-single .hw-social-icon-style-1 > a{ --hw-scl-sz: calc(var(--hw-fn-md) * 1.5); } .hw-el-related{ --hw-el-pd:var(--hw-default-pd); } .hw-el-line{ --hw-el-pd:var(--hw-default-pd); border-bottom: solid 1px var(--hw-main-br-cr); } .hw-el-portfolio-gallery{ padding-bottom:20px; text-align:center; } .hw-el-portfolio-gallery:not(.hw-slider) .hw-slider-list-warp{ float:none; display:inline-block; } .post-edit-link{ width:100%; float:left; } @media (max-width:767px) { .hw-single-template-1 .hw-el-single .hw-single-thumb,.hw-single-template-2 .hw-el-single .hw-single-thumb,.hw-single-template-1 .hw-el-single .hw-single-details{ width:100% ; float:left; padding-bottom:var(--hw-pd); padding-left: 0; } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 6.2 - Head Single ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Head Single ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-el-head-single{ --hw-hd-sg-ht:450px; height:var(--hw-hd-sg-ht); float: left; position: relative; --hw-post-tl-lk:#ffffff ; --hw-main-lk:#ffffff; --hw-post-tl-hv-lk:#ffffff ; --hw-expt-txt:rgba(255,255,255,0.75) ; --hw-meta-txt:rgba(255,255,255,0.60) ; --hw-ag:center; } .hw-el-head-single::before, .hw-el-head-single::after{ position:absolute; width:100%; height:100%; content:""; left:0px; top:0px; z-index:1; } .hw-el-head-single::before{ background-position:center center ; background-repeat:no-repeat ; text-align: center; background-size:cover; background-image:var(--hw-bg,none); } .hw-el-head-single::after{ background: var(--hw-hd-sg-bg,linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,5,10,0.75) 100%)); } .hw-el-head-single.hw-post-video::after{ background: var(--hw-hd-sg-bg,rgba(0,5,10,0.75) 100%); } .hw-single-template-5 .hw-el-head-single > .hw-inner{ padding: var(--hw-pd) 20px; } .hw-el-head-single > .hw-inner{ padding:calc(var(--hw-pd) * 2) 20px; z-index:2; margin: auto; display:block; height:100%; position:relative; display: grid; max-width:var(--hw-hd-sg-wt,100%); } .hw-el-head-single .hw-single-details{ position:relative; bottom: 0px; z-index:2; margin:auto; width:100%; padding:var(--hw-hd-sg-dt-pd,0px) ; border:none !important; margin-bottom:0px !important; } .hw-el-head-single > .hw-inner > img { position:absolute; height:100%; width:100%; left:0px; top:0px; object-position:-99999px 99999px; } .hw-single-template-5 .hw-el-head-single{ border-radius:var(--hw-main-rd); overflow:hidden; --hw-el-pd:var(--hw-default-pd); pointer-events: all; } .hw-single-template-6 .hw-el-head-single,.hw-single-template-7 .hw-el-head-single{ --hw-hd-sg-wt: var(--hw-body-wt,1200px); } .hw-single-template-6 .hw-el-head-single::before{ background-attachment: fixed; } .hw-single-template-7 .hw-el-head-single{ --hw-hd-sg-bg: rgba(0, 0, 0, 0.50); } .hw-single-template-7 .hw-el-head-single::before,.hw-single-template-7 .hw-el-head-single::after{ position: fixed; } .hw-single-template-7 .hw-el-head-single{ z-index: 0; } .hw-single-template-7 .hw-middle-content{ background:var(--hw-body-bg-cr,#ffffff); padding:20px; max-width: calc(var(--hw-body-wt) - 40px); } .hw-single-template-7.hw-body-boxed .hw-breadcrumbs,.hw-single-template-7.hw-body-boxed .hw-middle-content{ max-width: var(--hw-body-wt) ; } .hw-single-template-7 .hw-breadcrumbs { max-width: calc(var(--hw-body-wt) - 40px); float:none; display: flex; margin: auto; } .hw-el-head-single .hw-el-share-single { margin-top: calc(var(--hw-mg-tp) + 0.5em) !important; --hw-scl-br-cr: rgba(255,255,255,0.30); --hw-scl-txt: rgba(255,255,255,0.80); --hw-scl-sz: calc(var(--hw-fn-md) * 1.75); } .hw-el-head-single .hw-social-icon-style-1 > a{ --hw-scl-sz: calc(var(--hw-fn-md) * 1.25); } @media(max-width: 1199px) { .hw-single-template-7 .hw-middle-content{ padding: 20px 0; max-width:var(--hw-body-wt) !important; } } @media (min-width: 1025px) and (max-width: 1199px) { .hw-el-head-single{ --hw-hd-sg-ht:400px; } } @media (min-width: 768px) and (max-width: 1024px) { .hw-el-head-single{ --hw-hd-sg-ht:350px; } } @media (max-width: 767px) { .hw-el-head-single{ --hw-hd-sg-ht:300px; } .hw-single-template-6 .hw-el-head-single::before{ background-attachment:inherit; } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 6.3 - Video ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Video ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-video { width:100%; float:left; } .hw-video-warp{ padding-bottom:var(--hw-vid-ht,60%); width: 100%; border-radius: var(--hw-main-rd); height: 0; overflow: hidden; position: relative; } .hw-video iframe,.hw-video video { width: 100%; height: 100%; right: 0; top: 0; position: absolute; background: rgb(0, 0, 0); } .hw-el-single .hw-video{ margin-bottom:20px; } .hw-single-template-1 .hw-post-video .hw-single-details{ width:100% !important; } .hw-el-head-single.hw-post-video { --hw-ag:left; --hw-vid-ht:calc(var(--hw-hd-sg-ht) - (var(--hw-pd)*4) ); --hw-hd-sg-dt-pd: 0 0 0 var(--hw-pd); --hw-hd-sg-bg:rgba(0,5,10,0.5); } .hw-el-head-single.hw-post-video .hw-inner{ grid-template-columns:repeat(var(--hw-flx,1), 1fr); } .hw-el-head-single.hw-post-video .hw-single-details{ margin:0px !important; } @media (max-width: 767px) { .hw-el-head-single.hw-post-video{ --hw-flx:100%; --hw-hd-sg-ht:auto; --hw-vid-ht:60%; --hw-hd-sg-dt-pd:0 0 var(--hw-pd); } } .hw-post-video .hw-single-content{ float:left; width:100%; } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 6.4 - Single Content ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Single Content ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .sao_text_block { line-height:2.2em } .hw-single-content{ position:relative; width:100%; float:left; line-height:var(--hw-article-li-ht,2.2em); font-size:var(--hw-article-fn-sz,16px); } .hw-single-content .hw-youtube-video { width: 100%; text-align: center } .hw-single-content img,.sao_text_block img{ vertical-align: top; max-width: 100%; float: none; height: auto; } .wp-block-group.has-background { padding: 20px; margin-top: 0; margin-bottom: 0; } .hw-single-content > * { margin-left: auto; margin-right: auto; } [class*="wp-block-embed"]{ text-align:center; } .has-drop-cap:first-letter{ color:var(--hw-main-hl); font-weight:900 !important; } .gallery { margin-bottom: 20px!important } .gallery .gallery-item { display: inline-block; padding: 5px; text-align: center; vertical-align: top; width: 100%; margin-top: 0!important } .gallery-columns-2 .gallery-item { width: 50%!important } .gallery-columns-3 .gallery-item { width: 33.331%!important } .gallery-columns-4 .gallery-item { width: 25%!important } .gallery-columns-5 .gallery-item { width: 20%!important } .gallery-columns-6 .gallery-item { width: 16.66%!important } .gallery-columns-7 .gallery-item { width: 14.28%!important } .gallery-columns-8 .gallery-item { width: 12.5%!important } .gallery-columns-9 .gallery-item { width: 11.11%!important } .gallery .gallery-item img { height: auto; display: block; margin: 0 auto } .gallery-caption { color: #888; margin: 0 } .gallery-columns-6 .gallery-caption,.gallery-columns-7 .gallery-caption,.gallery-columns-8 .gallery-caption,.gallery-columns-9 .gallery-caption { display: none } .gallery br+br { display: none } .gallery .gallery-item img { border: none!important; height: auto; display: block; margin: 0 auto; height: auto; max-width: 100% } body .attachment img { display: block; margin: 0 auto } body .wp-caption { max-width: 100%!important; padding-bottom: 15px!important; margin: 0px !important; } body .wp-caption p { margin-left: 0px !important; margin-right: 0px !important; } .wp-caption img { width: auto; margin: 0!important } .hw-single-content p,.hw-post-tabs-container p, .sao_text_block p{ line-height: 2.2em !important; text-align:justify; } body .wp-caption-text { color: gray!important; font-style: italic; text-align: center; line-height: 1.7em !important; width: 100%; padding: 10px 0 20px!important; width: 100%; margin-bottom: 0!important; box-sizing: border-box; display: inline-block; padding-top: 0; margin-top: -8px!important; float: left } body .alignright { float: right; margin-left: 15px!important } body .alignleft { float: left; margin-right: 15px!important } body .alignleft a { float: none!important; margin: auto!important; display: block } body .aligncenter { position: relative; text-align: center; margin: auto!important; display: block; width:100% !important; } body img.aligncenter { width:auto !important; } body .aligncenter img { position: relative; display: block; margin: auto!important; float: none!important; text-align: center } body .wp-video { margin: auto } .hw-single-content h1 { margin: 15px 0; } .hw-single-content h2 { margin: 15px 0; } .hw-single-content h3 { margin: 15px 0; } .hw-single-content h4 { margin: 15px 0 } .hw-single-content h5 { margin: 15px 0 } .hw-single-content h6 { margin: 15px 0 } .hw-single-content header { margin-bottom: 20px } .hw-single-content ol { margin-bottom: 20px; margin-left: 40px } .hw-single-content ol { list-style: decimal; } .hw-single-content ol ol { list-style: lower-alpha; } .hw-single-content ol ol ol { list-style: lower-roman; } .hw-single-content ul ul, .hw-single-content ol ol, .hw-single-content ul ol, .hw-single-content ol ul { margin: 0 40px 0 0px ; padding: 0; margin-bottom: 0; font-size: 92% } .hw-single-content ul ul,.hw-single-content ol ol { margin: 0 0 0 40px } .hw-single-content ul { list-style: outside; margin-bottom: 20px; margin-left: 40px } .hw-single-content ul ul { list-style: circle; } .hw-single-content ul ul ul { list-style: square; } .hw-single-content li > ul,.hw-single-content li > ol { margin: 10px 20px 0 0; } .hw-single-content ul li { margin: 10px 20px 0 0; } blockquote { padding: 0 30px } blockquote p { color: rgba(118, 128, 138, 1.00); padding: 0 15px; font-style: italic; font-size: 1.2em; border: 1px solid var(--hw-main-hl); border-width: 0 5px } blockquote h1,blockquote h2,blockquote h3,blockquote h4,blockquote h5,blockquote h6 { color: rgba(118, 128, 138, 1.00)!important; padding: 0 15px; font-style: italic; border: 1px solid rgba(118, 128, 138, .50); border-width: 0 0 0 5px } @media (max-width: 500px) { .alignright { position: relative; text-align: center; margin: auto!important; display: block; float: none; } .alignleft { position: relative; text-align: center; margin: auto!important; display: block; float: none; } } body .su-service-title{ color: var(--hw-main-lk); } body #wpdcom .wpd-sbs-toggle, body #wpdcom .wpd-thread-head .wpd-thread-info, body .YN.yn-article-display a{ color: var(--hw-main-lk); } body #wpdcom .wpd-comment-text, body #wpdcom .wpd-comment-date{ color: var(--hw-main-txt); } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 6.5 - Author ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Author ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-el-author{ --hw-el-pd:var(--hw-default-pd); --hw-author-img:var(--hw-tm-img); } .hw-author-name { font-size: var(--hw-fn-md); width: 100%!important; float: left } .hw-author-name a { font-size: 18px; width: 100% } .avater { float: left; position: relative; width: 100%; padding-bottom: 100% } .hw-author-thumb { display: inline-block; float: left; position: relative; width: var(--hw-author-img); height:var(--hw-author-img); border-radius: 0; } .hw-author-thumb img { width: 100%; height: 100%; outline: solid 1px rgba(118, 128, 138, 0.25); border: 4px solid transparent; border-radius: var(--hw-btn-rd); position: absolute; } .hw-author-details { position: relative; display: inline-block; width: calc(100% - var(--hw-author-img)); float: left; padding-left: var(--hw-mg-tp); font-size: var(--hw-fn-sm); } .hw-author-name { margin: 0; font-size: 20px; display: inline-block; font-weight: 700; width: 100% } .hw-author-description { margin-top:calc(var(--hw-mg-tp) / 2.5); font-size: 13px; display: inline-block; font-weight: 400; width: 100%; margin-bottom:0px !important; padding-bottom: 0; line-height: 2em } .hw-el-author [class*="hw-social-icon"]{ --hw-ag:left; --hw-scl-sz:1.5em; --hw-scl-mr: 0.5em; margin-top: calc(var(--hw-mg-tp) / 2.5); --hw-scl-txt: var(--hw-main-txt); } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 6.6 - Tags ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Tags ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-tags { float:left; text-align:center; width:100%; padding:0!important; margin:var(--hw-mg-tp) -5px 0 0 !important } .hw-tags a { font-weight:400; line-height:1.1em; border-radius:0; padding:10px 15px; margin:5px; opacity:1; display:inline-block; float:left; background:var(--hw-main-gry); color:var(--hw-main-txt); font-size:11px!important; position:relative; display:inline-block; box-shadow:0 0 0 1px var(--hw-main-br-cr) inset; border-radius:var(--hw-btn-rd) } .hw-tags a:hover { background:var(--hw-primary-hv-bg); color:var(--hw-primary-txt); box-shadow:0 0 0 1px transparent inset } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 6.7 - Lightbox ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Lightbox ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-lightbox { top: 0; z-index: 9999999; position: fixed; background-color: rgba(0, 0, 0, .75); margin: 0!important; text-align: center; width: 100%; height: 100%; display: none; color: #fff } .hw-lightbox-img { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; display: flex; } .hw-lightbox-targetimg { max-width: 900px; max-height: 500px; height: auto; margin:auto; display: block; line-height: 0 } .hw-lightbox i { pointer-events: all; z-index:99999999; font-style: normal; position: absolute; cursor: pointer } .hw-lightbox i::before{ font-family: 'fontsite'; font-style:normal; text-shadow: 0 0 10px #000; } .hw-lightbox i:hover { cursor: pointer; opacity:0.5; } .hw-lightbox-close{ top: 20px; font-size: 40px; right: 20px; } .hw-lightbox-close::before { content: "\F005"; } .hw-lightbox-prevbig,.hw-lightbox-nextbig{ font-size:80px; top: calc(50% - 40px); left: auto; } .hw-lightbox-nextbig { right: 20px } .hw-lightbox-prevbig { left: 20px } .hw-lightbox-prevbig::before { content: "\F023"; } .hw-lightbox-nextbig::before { content: "\F024"; } .hw-lightbox-targetimg { z-index: 1; cursor: pointer; position: relative } .hw-lightbox-loading{ left: calc(50% - 12.5px); top: calc(50% - 12.5px); z-index: 9999999; height: 60px; width: 60px; position: fixed; } .hw-lightbox-loading::before { content: "\F045"; caption-side:#fffff !important; font-family: 'fontsite'; font-size:60px; animation: hexwp_rotate 1.4s infinite linear; float: left; } .hw-lightbox h3 { line-height: calc(1em + 8px); position: absolute; width: 100%; color:#ffffff; font-size: 30px; text-shadow:0 0 10px #000; bottom: 60px; z-index:999999999; margin-bottom: 20px; z-index: 99; } .hw-lightbox span { line-height: calc(1em + 8px); position: absolute; width: 100%; color: rgb(255, 255, 255); font-size: 30px; bottom: 20px; text-shadow:0 0 10px #000; width: 100%; z-index:999999999; text-align: center; left: 0; } .hw-lightbox-outer{ position:absolute; width:100%; height:100%; cursor:pointer; left:0px; top:0px; z-index:1; } @media (max-width: 900px) { .hw-lightbox-targetimg { max-width: 90%; max-height: 50%; } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 6.8 - Comments ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Comments ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .hw-el-comments{ --hw-el-pd: var(--hw-default-pd); } .hw-comment-status-closed{ display:none !important; } #comments { float: left; width: 100%; margin: 0; color:var(--hw-main-txt); } .comments-title { font-size: 20px; margin: 0px; color:var(--hw-main-lk); } .hw-comments.hw-list .comments-title { margin-bottom: 10px; } .comment-list { list-style: none; float: left; margin-bottom: 20px; width: 100%; margin-left: 0px !important; margin-right: 0px !important; } .comments-area .children { margin: 0px; } .hw-comments.hw-thread .comment-list li { position: relative; clear: both; border-width: 1px; border-style: solid; float: left; background: var(--hw-post-bg); padding: 20px; list-style: none; margin: 20px 0 0; border-color: var(--hw-main-br-cr); border-radius: var(--hw-main-rd); width: 100%; box-sizing: border-box } .hw-comments.hw-thread .comment-list li ul li { background: rgba(118, 128, 138, 0.03); padding: 20px; margin-top: 20px } .hw-comments.hw-thread .comment-wrap { padding: 0 } .hw-comments.hw-list .comment-list .comment-wrap { border-width: 1px 0px 0px; border-style: solid !important; padding: 20px 0; list-style: none; border-color: var(--hw-main-br-cr) !important; float: left; width: 100%!important } .hw-comments.hw-list .comment-list li:first-child .depth-1.comment-wrap { border-width: 0px; } .hw-comments.hw-list .comment-list .children { list-style: none; margin-left: 7.5% } .hw-comments.hw-list .comment-list li ul li .comment-wrap { list-style: none } #comments .clear { clear: inherit!important } .comment-avatar { float: left; width: 45px; position:relative; height:45px; padding-bottom: 0; margin-right: 15px; margin-bottom: 5px } .comment-avatar img { font-size: 0; float: left; width: 100%; height: 100%; position: absolute; border-radius: var(--hw-btn-rd) !important; box-shadow: 0 0 0 3px var(--hw-post-bg),0 0 0 4px var(--hw-main-br-cr) !important; } .author-comment cite { font-weight: 400; position: relative; display: block; float: left; padding-right: 5px; font-style: normal } .comment-content p:last-child { margin-bottom: 0px; } .author-link { float: left; line-height:25px; } .author-link ol { float: left; padding-right: 5px } .author-link a { float: left; font-size: var(--hw-at-fn-sz,17px); font-weight: var(--hw-at-fn-wt,400); text-transform:var(--hw-at-fn-tr,none); color: var(--hw-main-hl); } .author-link-reply a { font-size: 14px; color: var(--hw-main-txt); } .author-link-reply { float: left } .commentmetadata { font-size: 11px; line-height:25px; text-align: right; } .comment-wrap { position: relative } .comment-content { position: relative; overflow: hidden; margin-top: 10px; width:auto; float:none; } .comment-content p{ font-size: var(--hw-cm-fn-sz,14px); line-height:2em; font-weight: var(--hw-cm-fn-wt,400); text-transform:var(--hw-cm-fn-tr,none); } .comment-content li { border: none !important; margin: 0 0 0 00px !important; list-style: inherit !important; background: none !important; clear: inherit !important; float: none !important; padding: 0px !important; } .comment-content h1,.comment-content h2,.comment-content h3,.comment-content h4,.comment-content h5,.comment-content h6 { margin: 15px 0 !important; } .nocomments { text-align: center } .comment-list li.pingback { padding: 5px 10px; border-bottom: 1px solid #ddd } .comment-list .reply { text-align: right; float: left; line-height: 1.1em; margin-top: 2px; width: 100% } .comment-list .reply a { padding: 0; position: relative; text-align: right; float: none; display: inline-block; font-size: 13px } .comment-list .reply a:hover { text-shadow: 0 1px 1px #000 } #respond { width: 100%; position: relative; font-size: 13px; float: left; margin-top: 00px; font-weight: 700; } .comment-list li #respond { margin: 20px 0 20px!important } .comment-reply-title { margin: 0px; color:var(--hw-main-lk); } .comment-reply-title small{ float:right; font-size:14px !important; font-weight:400 !important; } #commentform { padding: 0; margin-top: 6px; overflow: hidden } .required { font-weight: 700; display:inline-block; color: red; } #commentform p { width: 100%; float: left; font-weight: 400; padding: 0; } #commentform .form-submit { margin-top: 5px; } #commentform textarea { height:var(--hw-textarea-ht,100px); } .comment-notes { margin-bottom: 10px } .commentmetadata a,.author-link-reply a { display: inline-block; opacity: .5 } .form-submit #submit:active,#login-form .login-button:active,.widget-feedburner .feedburner-subscribe:active { top: 2px } input.error,textarea.error { border: 1px solid red!important } .hw-comment-navi { padding-bottom: 20px; width: 100%; float: left } .hw-comment-navi .page-numbers { padding: 5px 10px; background: rgba(150, 150, 150, 0.10) } @media (max-width: 499px) { .comment-list.hw-thread li { padding: 12px } .comment-list.hw-thread li { padding: 12px !important; } .comment-content { display: inline-block; width: 100%; float: left; overflow: hidden; margin-top: 5px; float: none } } /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** 6.9 - wp-block ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /****************************************************************************************************************************************************** ****************************************************************************************************************************************************** Wp-block ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper { padding:0px !important; border:none !important; } .wp-block-search .wp-block-search__button{ width:120px; } .wp-social-link{ padding:0px !important; } .wp-social-link a{ line-height:2em !important; width:2em; height:2em; font-size:20px; text-align:center; } .wp-block-social-links .wp-social-link a svg{ line-height:1.5em !important; width:1.5em!important; font-size:inherit!important; height:1.5em!important; } .wp-social-link::before{ display:none !important; } .wp-block-search .wp-block-search__button svg { fill:var(--hw-primary-txt) ; } .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input { border-radius: 0; border: none; padding: 0 1em; }