@charset "UTF-8"; /* Themify Ultra 8.1.1 framework 8.2.7 */ /*/css/base.min.css*/ :where(.tf_loader){width:1em;height:1em;overflow:hidden;display:inline-block;vertical-align:middle;position:relative}.tf_loader:before{content:'';width:100%;height:100%;position:absolute;top:0;left:0;text-indent:-9999em;border-radius:50%;box-sizing:border-box;border:.15em solid rgba(149,149,149,.2);border-left-color:rgba(149,149,149,.6);animation:tf_loader 1.1s infinite linear}@keyframes tf_loader{0{transform:rotate(0)}100%{transform:rotate(360deg)}}.tf_clear{clear:both}.tf_left{float:left}.tf_right{float:right}.tf_textl{text-align:left}.tf_textr{text-align:right}.tf_textc{text-align:center}.tf_textj{text-align:justify}.tf_text_dec{text-decoration:none}.tf_hide{display:none}.tf_hidden{visibility:hidden}.tf_block{display:block}.tf_inline_b{display:inline-block}.tf_vmiddle{vertical-align:middle}.tf_mw{max-width:100%}.tf_w{width:100%}.tf_h{height:100%}:where(.tf_overflow){overflow:hidden}.tf_box{box-sizing:border-box}:where(.tf_abs){position:absolute;inset:0}:where(.tf_abs_t){position:absolute;top:0;left:0}:where(.tf_abs_b){position:absolute;bottom:0;left:0}:where(.tf_abs_c){position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tf_rel{position:relative}:where(.tf_opacity){opacity:0}.tf_clearfix:after{content:"";display:table;clear:both}.loops-wrapper>.post,.woocommerce ul.loops-wrapper.products>li.product{float:left;box-sizing:border-box;margin-left:3.2%;margin-right:0;margin-bottom:2.5em;clear:none}.woocommerce .loops-wrapper.no-gutter.products>.product,body .loops-wrapper.no-gutter>.post{margin:0}.woocommerce .loops-wrapper.products.list-post>.product{margin-left:0}.tf_scrollbar{scroll-behavior:smooth;--tf_scroll_color:rgba(137,137,137,.2);--tf_scroll_color_hover:rgba(137,137,137,.4);scrollbar-color:var(--tf_scroll_color) transparent;scrollbar-width:thin}.tf_scrollbar::-webkit-scrollbar{width:var(--tf_scroll_w,10px);height:var(--tf_scroll_h,10px)}.tf_scrollbar::-webkit-scrollbar-thumb{background-color:var(--tf_scroll_color);background-clip:padding-box;border:2px solid transparent;border-radius:5px}.tf_scrollbar:hover{scrollbar-color:var(--tf_scroll_color_hover) transparent}.tf_scrollbar:hover::-webkit-scrollbar-thumb{background-color:var(--tf_scroll_color_hover)}.tf_close{position:relative;transition:transform .3s linear;cursor:pointer}.tf_close:after,.tf_close:before{content:'';height:100%;width:1px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg);background-color:currentColor;transition:transform .25s}.tf_close:after{transform:translate(-50%,-50%) rotate(-45deg)}.tf_close:hover:after{transform:translate(-50%,-50%) rotate(45deg)}.tf_close:hover:before{transform:translate(-50%,-50%) rotate(135deg)}.tf_vd_lazy:fullscreen video{height:100%;object-fit:contain} /*/css/themify-common.css*/ iframe{border:0}a{cursor:pointer}:is(button,a,input,select,textarea,.button):focus{outline:1px dotted hsla(0,0%,59%,.2)}.tf_focus_heavy :is(button,a,input,select,textarea,.button):focus{outline:2px solid rgba(0,176,255,.8)}.tf_focus_none a,.tf_focus_none:is(button,a,input,select,textarea,.button):focus{outline:0}.tf_large_font{font-size:1.1em}.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;color:#21759b;display:block;font-size:.875rem;font-weight:700;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}.skip-to-content:focus{clip-path:none}.post-image .themify_lightbox{display:block;max-width:100%;position:relative}.post-image .themify_lightbox .zoom{background:rgba(0,0,0,.3);border-radius:100%;height:35px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:35px}.post-image .themify_lightbox .zoom .tf_fa{color:#fff;vertical-align:middle;stroke-width:1px;left:50%;line-height:100%;position:absolute;top:50%;transform:translate(-50%,-50%)}.post-image .themify_lightbox:hover .zoom{background:rgba(0,0,0,.6)}.pswp:not(.pswp--open){display:none}:is(.ptb_map,.themify_map) button{border-radius:0;max-width:inherit} /*/wp-content/plugins/themify-builder-pro/public/css/tbp-style.css*/ .tbp_template{clear:both}.tbp_advanced_archive_wrap .module_row>.row_inner{margin:unset;max-width:100%;width:100%}.module-site-logo{line-height:1;word-break:keep-all}.tbp_template .builder-posts-wrap.loops-wrapper .post{margin-top:0}.tbp_post_meta .tbp_post_meta_item time{display:inline-block}.tbp_post_meta>.tbp_post_meta_item{margin-inline-end:.4em}.tbp_post_meta>.tbp_post_meta_item:after{border-left:1px solid hsla(0,0%,71%,.6);content:"";display:inline-block;height:1.3em;margin-inline-start:.4em;transform:skewX(-15deg);vertical-align:middle;white-space:nowrap;width:1px}.tbp_post_meta>.tbp_post_meta_item:last-child:after{display:none}.tbp_author_info_img{margin:0 15px 15px 0}.tbp_author_stack .tbp_author_info_img{float:none;margin:0 0 1em}.module-readtime{margin-bottom:.5em}.tbp_rd_tm_ic{margin-block-end:2px;margin-inline-end:3px;vertical-align:bottom}#tbp_footer .ui.nav ul{inset-block:auto 100%;transform-origin:bottom}#tbp_footer .ui.nav ul ul{inset-block:auto 0}.tbp_cart_icon_style_dropdown .tbp_empty_shopdock{opacity:0;position:absolute} /*/css/modules/search-form.css*/ .tf_s_dropdown input[type=text]{background-color:#fff;box-shadow:none;color:#000;display:inline-block;height:auto;margin:0;max-width:100%;min-height:auto;min-width:auto;width:auto}.tf_search_icon{border-radius:50em;cursor:pointer;line-height:normal;padding:9px 11px 10px}.tf_search_icon:hover{background:hsla(0,0%,59%,.15)}.tf_search_icon .tf-ti-search{stroke-width:1.5}.tf_icon_wrap{font-size:1.2em;left:2px;line-height:1;position:absolute;top:50%;transform:translateY(-50%)}.tf_icon_wrap+.tf_loader+input[type=text],.tf_icon_wrap+input[type=text]{padding-left:2.2em}.tf_s_dropdown .tf_icon_wrap{left:12px} /*/wp-content/themes/themify-ultra/styles/modules/search-form.css*/ #searchform{border-bottom:1px solid;font-size:1.2em;margin:0}#searchform #s{background-color:transparent;border:0;border-radius:0;box-shadow:none;letter-spacing:-.04em;margin:0;max-width:none;padding:.45em .45em .45em 1.75em;width:100%}#headerwrap #searchform-wrap{display:inline-block;margin-left:4px;vertical-align:middle}#headerwrap #searchform{border:0;font-size:1em;height:40px;width:40px}.tf_s_dropdown #searchform .tf_icon_wrap{left:0}#headerwrap #searchform #s{border-radius:5em;height:40px;padding:6px 15px 6px 40px;position:absolute;right:-2px;transition:width .7s,background .7s;width:1px;z-index:2}#headerwrap #searchform #s:focus,#headerwrap #searchform #s:hover,#headerwrap #searchform .icon-search:hover~#s,#headerwrap #searchform .tf_fa:hover+#s{background-color:#eee;width:140px}#headerwrap #searchform .tf_fa{background-color:#eee;border-radius:100%;color:#000;font-size:16px;left:0;line-height:1.2em;margin:0;padding:12px;text-align:center;top:50%;z-index:1;stroke-width:2}#headerwrap .tf_search_result{left:auto;right:0}.fixed-header-on #headerwrap #searchform-wrap{display:none} /*/wp-content/themes/themify-ultra/styles/modules/site-logo.css*/ #site-logo{font-size:1.7em;font-style:normal;font-weight:700;letter-spacing:-.04em;line-height:1.2em;margin:.5em auto;padding:0;transition:.2s ease-in-out;transition-property:color,margin,padding,font-size}#site-logo a{color:inherit;text-decoration:none}#site-logo a:hover{color:var(--theme_accent);text-decoration:none}.header-block .fixed-header #site-logo{margin:5px 0 0}.fixed-header #site-logo .tf_sticky_logo+img,body:not(.fixed-header-on) #site-logo .tf_sticky_logo{display:none} /*/megamenu/css/style.css*/ @media screen and (min-width:1101px){ #main-nav .has-mega-column>.sub-menu{display:grid;grid-template-columns:var(--megaT,repeat(auto-fit,minmax(0,1fr)));grid-column-gap:var(--megaG,2.5%);max-height:80vh;overflow:hidden auto;padding:1.15% 2%}#main-nav .layout-6-3-3{--megaT:50% 25% 25%}#main-nav .layout-3-3-6{--megaT:25% 25% 50%}#main-nav .layout-4-8{--megaT:33% 66%}#main-nav .layout-8-4{--megaT:66% 33%}#main-nav .layout-3-9{--megaT:25% 75%}#main-nav .layout-9-3{--megaT:75% 25%}#main-nav .has-mega{position:static}#main-nav .has-mega>.sub-menu{left:0;padding:20px 25px;top:auto;width:100%}@media (pointer:coarse){#main-nav .has-sub-menu>a{padding-right:50px}#main-nav li .child-arrow{border-radius:100%;display:inline-block;margin-left:7px;margin-top:-17px;padding:0;right:5px;top:50%}#main-nav .toggle-on>a>.child-arrow{background:hsla(0,0%,84%,.4)}#main-nav .has-mega-column li .child-arrow{display:none}}#main-nav .has-mega-column .sub-menu .sub-menu{background:0;border:0;box-shadow:none;display:block;opacity:1;padding:0;position:static;transform:none;transition:none;width:auto}#main-nav .has-sub-menu.has-mega-dropdown>.sub-menu{display:grid;grid-template-columns:var(--megaDT,50% 50%)}#main-nav .dropdown-columns-2>.sub-menu{width:400px}#main-nav .dropdown-columns-3>.sub-menu{width:540px;--megaDT:repeat(3,33.32%)}#main-nav .dropdown-columns-4>.sub-menu{width:680px;--megaDT:repeat(4,25%)}#main-nav .has-mega-column .widget{margin:0 0 .5em;text-align:left}#main-nav .has-mega-column .widget :is(h1,h2,h3,h4,h5,h6){color:inherit}#main-nav .has-mega-column>.sub-menu>.has-sub-menu>a,#main-nav .widgettitle{font-size:1.05em;font-weight:700;letter-spacing:0;line-height:1.6em;margin:0 0 .5em;padding:0;text-decoration:none;text-transform:none}#main-nav .widgettitle:before{display:none;margin:0;padding:0}#main-nav .has-mega-column>.sub-menu li{box-sizing:border-box;display:block;line-height:1.7em}#main-nav .has-mega-column>.sub-menu a{background:0;padding:.5em 0;width:100%}#main-nav .mega-sub-menu{min-height:260px}#main-nav .mega-sub-menu ul{-webkit-overflow-scrolling:touch;float:none;margin:0 0 1em;opacity:1;padding:0 0 2em;position:relative}#main-nav .has-mega-sub-menu .mega-sub-menu>ul li{display:block;float:none;pointer-events:none;position:unset}#main-nav .has-mega-sub-menu .mega-sub-menu>ul .mega-link>a{border-bottom:1px solid hsla(0,0%,71%,.2);margin:0;padding-block:.5em;padding-inline:0 1.4em;pointer-events:auto;width:16%}#main-nav .has-mega-sub-menu .mega-sub-menu>ul .mega-link:first-child>a{display:block}#main-nav .has-mega-sub-menu .mega-sub-menu>ul .tf_mega_selected.mega-link:first-child>a{display:inline-block}#main-nav .mega-menu-posts{display:none;gap:3% 1.3%;grid-template-columns:repeat(auto-fit,minmax(50px,1fr));margin-inline-start:2%;overflow:hidden auto;padding-bottom:2em;pointer-events:auto;position:absolute;right:0;top:0;width:82%}#main-nav .has-mega-sub-menu .mega-sub-menu>ul .mega-link:first-child>.mega-menu-posts{float:right;position:relative}#main-nav .tf_mega_selected .mega-menu-posts{display:grid}#main-nav .themify_mega_menu_category_link{bottom:0;font-size:.85em;padding:0;position:absolute;right:2px}#main-nav .themify_mega_menu_category_link:after{border:solid;border-width:0 1px 1px 0;content:" ";display:inline-block;margin:-3px 0 0 5px;padding:3px;transform:rotate(-45deg);vertical-align:middle}#main-nav .mega-menu-posts .post{margin:0 0 15px;padding:0}#main-nav .mega-menu-posts .post .post-image{margin:0 0 10px}#main-nav .mega-menu-posts .post-title{font-size:.95em;font-weight:400;letter-spacing:0;line-height:1.45em;margin:0;padding:0;text-transform:none}#main-nav .mega-menu-posts .post a{border:0;font-size:unset;padding:0;text-transform:none;width:auto}#main-nav .mega-menu-posts .post del{font-size:.85em;opacity:.5}#main-nav .themify_mega_menu_category_link{border:0;width:auto}#main-nav .tf_post_count{background:hsla(0,0%,78%,.25);border-radius:100%;display:none;font-size:.7em;line-height:1em;margin:auto 3px auto 5px;min-width:11px;padding:.4em;text-align:center;vertical-align:middle}#main-nav .has-mega-column .product-categories .count,#main-nav .has-mega-sub-menu .tf_post_count{display:inline-block}#main-nav .has-mega-column .widget_product_categories .product-categories a{display:inline-block;padding-left:0;padding-right:0;width:auto}#main-nav .mega-sub-menu li a:before{content:"";height:10px;top:50%;inset-inline:auto 4px;margin-top:-6px;width:10px}#main-nav .mega-sub-menu li a:not(.tf_loader):before{border-right:1px solid;border-top:1px solid;display:inline-block;opacity:0;position:absolute;transform:rotate(45deg);transition:opacity .5s ease-in-out}#main-nav .mega-sub-menu li:hover>a:before,#main-nav .tf_mega_selected>a:before{opacity:1}#main-nav .mega-link .tf_loader{height:auto;width:auto}#main-nav .mega-sub-menu li a.tf_loader:before{height:16px;width:16px}@media (hover:none){#main-nav .has-mega-column>.sub-menu,#main-nav .has-sub-menu.has-mega-dropdown>.sub-menu{display:none}#main-nav .has-mega-column.toggle-on>.sub-menu,#main-nav .has-sub-menu.has-mega-dropdown.toggle-on>.sub-menu{display:grid!important}} } /*/css/grids/grid3.css*/ .loops-wrapper.grid3>.post,.loops-wrapper.products.grid3>.product{width:31.2%}.loops-wrapper.grid3>.post:nth-of-type(3n+1){clear:left;margin-left:0}.loops-wrapper.grid3.no-gutter>.post,.loops-wrapper.products.grid3.no-gutter>.product{width:33.33%}@media (max-width:900px){.loops-wrapper.grid3>.post,.loops-wrapper.products.grid3>.product{width:48.4%}.loops-wrapper.grid3.no-gutter>.post,.loops-wrapper.products.grid3.no-gutter>.product{width:50%}.loops-wrapper.grid3>.post:nth-of-type(3n+1){clear:none;margin-left:3.2%}.loops-wrapper.grid3>.post:nth-of-type(odd),.loops-wrapper.products.grid3>.product:nth-of-type(odd){clear:left;margin-left:0}.loops-wrapper.grid3.no-gutter>.post,.loops-wrapper.products.grid3.no-gutter>.product{margin-left:0}}@media (max-width:680px){.loops-wrapper.grid3.no-gutter>.post,.loops-wrapper.grid3>.post,.loops-wrapper.grid3>.post:nth-of-type(3n+1){float:none;margin-left:0;width:100%}.loops-wrapper.grid3>.post:nth-of-type(4n){clear:none;margin-left:0}}@media (min-width:901px){.loops-wrapper.products.grid3>.product:nth-of-type(3n+1){clear:left;margin-left:0}} /*/wp-content/themes/themify-ultra/styles/modules/grids/grid3.css*/ .loops-wrapper.grid3>.post{margin-bottom:2em}.loops-wrapper.grid3 .post-title{font-size:1.5em} /*/wp-content/themes/themify-ultra/styles/modules/back-top.css*/ .back-top{margin:0 auto .6em;width:200px}.back-top:not(.back-top-float) .arrow-up a{bottom:0;color:inherit;display:inline-block;line-height:1;outline:0;padding:.4em;position:relative;text-decoration:none;transition:bottom .5s;z-index:10}.back-top:not(.back-top-float):hover .arrow-up a{bottom:20px}.footer-block .back-top:not(.back-top-float) .arrow-up :is(a,a:hover){background:0}.back-top a:before{border:2px solid transparent;border-left-color:inherit;border-top-color:inherit;content:"";display:inline-block;height:30px;margin-top:4px;transform:rotate(45deg);width:30px}:is(#footer,#pagewrap) .back-top-float{background-color:var(--theme_accent_semi);border-radius:100%;box-shadow:0 1px 8px rgba(0,0,0,.12);color:#fff;cursor:pointer;font-size:16px;height:44px;inset:auto 20px 20px auto;opacity:1;overflow:hidden;position:fixed;text-align:center;text-decoration:none;transition:opacity .2s ease-in-out .2s,transform .2s ease-in-out,background-color .5s;width:44px;z-index:101}:is(#footer,#pagewrap) .back-top-hide{opacity:0;pointer-events:none}#pagewrap .back-top-float .arrow-up a,.back-top-float .arrow-up a{background:0;color:inherit}#pagewrap .back-top-float .arrow-up,.back-top-float .arrow-up{left:50%;position:absolute;top:5px}#pagewrap .back-top-float:hover,.back-top:not(.back-top-float) .arrow-up a:hover{background-color:var(--theme_accent)}#pagewrap .back-top-float:hover .arrow-up,.back-top-float:hover .arrow-up{animation:back-top-arrow-up .25s linear .2s infinite alternate}#pagewrap .back-top-float a:before,.back-top-float a:before{border-width:1px;height:13px;left:50%;margin-left:-7px;margin-top:0;position:absolute;top:14px;width:13px}#pagewrap:has(#tf_sticky_buy.tf_st_show) .back-top.back-top-float{bottom:110px}:is(.footer-horizontal-left,.footer-horizontal-right,.footer-left-col,.footer-right-col) .back-top{margin:0;position:absolute;top:-89px;width:60px}:is(.footer-horizontal-left,.footer-horizontal-right,.footer-left-col,.footer-right-col) .back-top .arrow-up a{background-color:hsla(0,0%,67%,.78);border-radius:var(--theme_rounded_sm) var(--theme_rounded_sm) 0 0;color:#fff;height:25px;line-height:100%;padding:10px 0 0;text-align:center!important;width:60px}:is(.footer-horizontal-left,.footer-horizontal-right,.footer-left-col,.footer-right-col) .back-top a:before{height:14px;width:14px}:is(.footer-horizontal-left,.footer-horizontal-right,.footer-left-col,.footer-right-col) .back-top:hover .arrow-up a{bottom:0}:is(.footer-horizontal-left,.footer-horizontal-right,.footer-left-col,.footer-right-col) .back-top .arrow-up:hover a{background-color:#000}@keyframes back-top-arrow-up{0%{top:0}to{top:-5px}}@media(max-width:680px){:is(.footer-horizontal-left,.footer-horizontal-right,.footer-left-col,.footer-right-col) .back-top{top:-70px}} /*/wp-content/themes/themify-ultra/style.css*/ /*! Theme Name: Themify Ultra Theme URI:https://themify.me/themes/ultra/ Version:8.1.1 Description:Use Ultra theme to create professional sites quickly and easily (landing pages, portfolio, blog, corporate, ecommerce, and more). It includes a bunch of header/footer layout options and pre-built demos that you can import to your site. Read Ultra documentation for more information. Author:Themify Author URI:https://www.themify.me License:GNU General Public License v2.0 License URI:http://www.gnu.org/licenses/gpl-2.0.html Copyright:(c) Themify. Tags:themify,featured-images,translation-ready,custom-menu,sidebar Text Domain:themify Requires PHP:7.2 Changelogs: https://themify.org/changelogs/themify-ultra.txt --------- DO NOT EDIT THIS FILE. If you need to override theme styling,please add custom CSS in Appearance>Customize>Custom CSS or a child theme (https://themify.me/docs/child-theme).*/a,abbr,acronym,address,b,bdo,big,blockquote,body,br,button,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,figure,form,h1,h2,h3,h4,h5,h6,html,i,img,ins,kbd,legend,li,map,ol,p,pre,q,samp,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,tt,ul,var{margin:0;padding:0}a,fieldset,img{border:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}audio,iframe{max-width:100%}:root{--theme_accent:#ed1e24;--theme_accent_semi:rgba(251,9,48,.8);--theme_accent_hover:#000;--theme_rounded:12px;--theme_rounded_sm:10px;--theme_input_rounded:12px;--theme_btn_rounded:30px}html{scroll-behavior:smooth}body{background-color:#fff;color:#666;font:1em/1.65em Public Sans,Arial,sans-serif;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}a{color:var(--theme_accent);text-decoration:none;transition:color .3s ease-in-out}a:hover{color:var(--theme_accent_hover)}p{margin:0 0 1.3em;padding:0}small{font-size:87%}blockquote{border-left:3px solid hsla(0,0%,59%,.3);font-size:1.1em;line-height:1.4em;margin:0 5% 1.2em;padding:.8em 1.4em}ins{text-decoration:none}ol,ul{margin:0 0 1.4em 1.6em}li,ol,ul{padding:0}li{margin:0 0 1em}h1,h2,h3,h4,h5,h6{color:#000;font-weight:700;letter-spacing:-.02em;line-height:1.4em;margin:0 0 .5em;overflow-wrap:normal}h1{font-size:3.4em;line-height:1.2em}h1,h2{letter-spacing:-.03em}h2{font-size:2.3em;line-height:1.3em}h3{font-size:1.7em}h4{font-size:1.4em}h5{font-size:1.3em}h5,h6{line-height:1.7em}h6{font-size:1.2em}button,input,input[type=search],select,textarea{font-family:inherit;font-size:100%;max-width:100%}input:is([type=radio],[type=checkbox]),input:read-only,input:read-write,select,textarea{-webkit-appearance:none;appearance:none;background:#fff;border:1px solid rgba(0,0,0,.25);border-radius:var(--theme_input_rounded);max-width:100%;padding:.6em}input:read-only,input:read-write{margin:0 1em .6em 0;width:17em}input[type=number]{width:7em}textarea{margin:0 0 .6em;min-height:13.5em;width:100%}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='none' stroke='rgba(40,40,40,.8)' stroke-linecap='round' stroke-width='12'%3E%3Cpath d='m2.7 2.3 46.4 54.9L95.5 2.3'/%3E%3C/svg%3E");background-position:calc(100% - .7em) calc(50% + .15em);background-repeat:no-repeat;background-size:.85em;color:inherit;margin:0 0 .6em;padding-right:2em}input:is([type=radio],[type=checkbox]){-webkit-appearance:none;box-sizing:content-box;clear:none;cursor:pointer;display:inline-block;height:1.3em;line-height:1;margin:0 .5em 0 0;min-height:1.3em;min-width:1.3em;padding:0;text-align:center;vertical-align:middle;width:1.3em}input[type=checkbox]{border-radius:calc(var(--theme_input_rounded) - 4px)}input[type=radio]{align-items:center;border-radius:100%!important;display:inline-flex;justify-content:center}input[type=checkbox]:before{border-bottom:.13em solid transparent;border-left:.13em solid transparent;content:"";display:inline-block;height:.32em;margin-bottom:.1em;margin-left:.1em;transform:rotate(-45deg) skewY(-10deg);width:.7em}input[type=checkbox]:checked:before{border-bottom:.13em solid;border-left:.13em solid}input[type=radio]:checked:before{background-color:#222;border-radius:100%;content:"";display:inline-block;height:.7em;vertical-align:middle;width:.7em}:is(select,textarea):focus,input:read-only:focus,input:read-write:focus{border-color:rgba(0,0,0,.5)}button,input[type=reset],input[type=submit]{-webkit-appearance:none;background-color:var(--theme_accent);border:0;border-radius:var(--theme_btn_rounded);color:#fff;cursor:pointer;display:inline-block;font-weight:700;padding:.65em 1.6em;transition:background .3s,color .3s,transform .3s;width:auto}button:hover,input:is([type=reset],[type=submit]):hover{background-color:var(--theme_accent_hover);box-shadow:0 5px 10px rgba(0,0,0,.1);color:#fff;transform:translateY(-1px)}.gm-style-mtc button{border-radius:0}.mce-toolbar .mce-btn button:hover{background-color:inherit;box-shadow:none;color:inherit;transform:none}#main-nav ul a,.author-box,.post,.post-content,.sidemenu,.widget,img,input,textarea{box-sizing:border-box}.col3-1,.col4-1,.col4-2{float:left;margin-left:3.2%}.col4-1{width:22.6%}.col4-2{width:48.4%}.col3-1{width:31.2%}:is(.col4-1,.col4-2,.col3-1).first{clear:left;margin-left:0}#pagewrap{overflow-x:clip}.mobile-menu-visible #pagewrap,.slide-cart-visible #pagewrap{overflow-x:initial}.pagewidth{margin:0 auto;max-width:100%;width:1160px}#layout{display:flex;flex-wrap:wrap}#content{padding:5.75% 0;width:71%}.sidebar-none #content{width:100%}.sidebar-none #layout{display:block}.sidemenu-active{left:0;position:relative;transition:left .2s ease-in-out}.sidemenu-right{left:-300px}.sidemenu-left,.sidemenu-left #headerwrap{left:300px}.full_width #layout{flex-wrap:wrap;max-width:100%;width:100%}.full_width #content{max-width:100%;padding:0;width:100%}#headerwrap{background-color:var(--tf_fixed_header_bg,#fff);border-bottom:var(--tf_fixed_header_border,1px solid rgba(0,0,0,.05));color:var(--tf_fixed_header_color,#000);inset-block:var(--tf_fixed_header_p,0 auto);left:0;margin-inline:var(--tf_fixed_header_m,0);min-height:55px;position:var(--tf_fixed_header,absolute);transition:.3s ease-in-out;transition-property:background-color,color,box-shadow,min-height,left,padding;width:var(--tf_fixed_header_w,100%);z-index:999}.fixed-header-enabled{--tf_fixed_header:sticky}.no-fixed-header{--tf_fixed_header:relative}.fixed-header-on{--tf_fixed_header_bg:hsla(0,0%,100%,.9)}#headerwrap.fixed-header:before{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:"";inset:0;pointer-events:none;position:absolute;z-index:0}#header{overflow:visible;padding:2em 0;position:relative}.fixed-header-enabled #header{transition:padding .3s ease-in-out}.fixed-header #header{padding-block:12px}@supports (-webkit-touch-callout:none){#headerwrap{background-attachment:scroll!important;background-position:50%!important}}.header-widget{font-size:.95em;height:100%}.header-widget .widget{margin:2em 0}.header-widget .widgettitle{color:inherit;font-size:1.05em;margin:0 0 .5em}.fixed-header-on .tf_sticky_logo~*{display:none!important}.search-button{border-radius:100%;box-sizing:border-box;color:inherit;font-size:19px;line-height:1;margin:0 0 0 3px;padding:10px}.search-button:hover{background:hsla(0,0%,78%,.25)}a.search-button{text-decoration:none}.search-button:focus{outline:0}.tf_darkmode_toggle{border-radius:100%;box-sizing:border-box;color:inherit;font-size:19px;line-height:1;margin:0 0 0 7px;padding:9px 10px}.tf_darkmode .tf_darkmode_toggle,.tf_darkmode_toggle:hover{background:hsla(0,0%,78%,.25)}a.tf_darkmode_toggle{text-decoration:none}.tf_darkmode_toggle:focus{outline:0}#main-nav,#main-nav li{margin:0;padding:0}#main-nav li{display:inline-block;list-style:none;position:relative}#main-nav ul li{background:0;display:block;float:none}#main-nav li>.sub-menu{background:#fff;border-radius:var(--theme_rounded);box-shadow:0 0 0 1px rgba(0,0,0,.1),0 3px 12px rgba(0,0,0,.12);box-sizing:border-box;contain:style layout;left:-.3em;margin:0;opacity:0;padding:calc(var(--tb_rounded_corner) - 2px) 0;position:absolute;top:100%;transform:scaleY(0);transform-origin:top;transition:transform .3s ease-in-out,opacity .3s ease-in-out;width:210px;z-index:100}#main-nav small{display:block}#main-nav li .sub-menu .sub-menu{left:100%;top:-.65em}#main-nav .edge>.sub-menu{left:auto;right:0}#main-nav ul .edge>.sub-menu{left:auto;right:100%}@media (hover:hover){#main-nav li:hover>.sub-menu,#main-nav li>.sub-menu:focus-within,#main-nav li>a:focus+.sub-menu{opacity:1;transform:scale(1)}}.menu-item .child-arrow{border-radius:100%;cursor:pointer;display:none;height:36px;position:absolute;right:0;top:4px;transition:transform .3s;width:36px;z-index:12}.child-arrow:after,.child-arrow:before{background:currentColor;border-radius:10px;content:"";height:1px;left:12px;position:absolute;top:50%;transform:rotate(45deg);transition:transform .3s ease-in-out;width:8px;z-index:9999}.child-arrow:after{left:17px;transform:rotate(-45deg)}.toggle-on>a .child-arrow:after,.toggle-on>a .child-arrow:before{left:10px;width:15px}.toggle-on>a .child-arrow{transform:rotate(180deg)}@media (hover:none){#main-nav .menu-item-has-children>a{padding-right:45px}#footer-nav .menu-item-has-children>a{padding-right:30px}.menu-item .child-arrow{border-radius:100%;display:inline-block;margin-left:7px;margin-top:-17px;padding:0;right:5px;top:50%}#main-nav .toggle-on>a>.child-arrow{background:hsla(0,0%,84%,.4)}#main-nav li>.sub-menu{display:none}#main-nav li.toggle-on>.sub-menu{opacity:1;transform:scale(1)}}#main-nav a{color:inherit;display:block;margin:0;padding:.5em .8em;position:relative;text-decoration:none;transition:.4s ease;transition-property:background,font-size,line-height,color,padding,margin,border,border-radius,box-shadow,transform}#main-nav .highlight-link>a{background-color:hsla(0,0%,78%,.25);border:0;border-radius:var(--theme_btn_rounded);margin-left:.6em;margin-right:.6em;padding-left:1.4em;padding-right:1.4em}#main-nav .highlight-link:last-child>a{margin-right:0}#main-nav a>em .tf_fa{margin-right:5px}#main-nav a .tf_lazy{display:none}#main-nav ul a{color:#353535;padding:.4em 1.4em;text-align:left}#main-nav .current-menu-item>a,#main-nav .current_page_item>a,#main-nav a:hover,#main-nav ul a:hover{color:var(--theme_accent)}.header-icons :is(a,a:hover){color:inherit;text-decoration:none}#headerwrap .header-icons>*{vertical-align:middle}.slide-cart .header-icons{min-width:75px;text-align:right}#menu-icon{border-radius:100%;line-height:1em;margin:0 0 0 10px;padding:10px 9px 11px}#menu-icon:hover{background:hsla(0,0%,78%,.25)}.menu-icon-inner{border-bottom:2px solid;box-sizing:border-box;height:18px;position:relative;width:22px}.menu-icon-inner:after,.menu-icon-inner:before{border-top:2px solid;content:"";display:block;left:0;position:absolute;top:0;transition:border .7s ease;transition-property:transform;width:100%}.menu-icon-inner:after{top:50%}#menu-icon-close{transform:rotate(0deg);transition:border .3s ease-in-out,transform .3s ease-in-out}.body-overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:hsla(0,0%,81%,.8);display:none;height:100%;position:fixed;top:0;width:100%}.body-overlay-on{display:block;z-index:998}.fixed-header :is(.tf_darkmode_toggle,.header-bar,.search-button,.header-widget),.mobile-menu-visible #headerwrap:before,.slide-cart-visible #headerwrap:before{display:none}.revealing-header :is(#headerwrap,#tbp_header){transition:transform .5s ease-in-out,opacity .5s ease-in-out}.revealing-header :is(#headerwrap,#tbp_header).header_hidden{opacity:0;transform:translateY(-100%)}.fixed-header-enabled #tbp_header,.revealing-header #tbp_header{position:sticky;top:0;z-index:999}.page-title{margin:0 0 1em;padding:0}.author-bio{margin:0 0 2em;overflow:hidden}.author-bio .author-avatar{float:left;margin:0 1.2em 0 0}.author-bio .author-avatar img{border-radius:var(--theme_rounded);width:100px}.author-bio .author-name{font-size:1.6em;margin:0 0 .5em;padding:0}.author-posts-by{border-top:4px solid hsla(0,0%,46%,.1);font-size:1.4em;margin:0 0 1.5em;padding:1em 0 0;text-transform:uppercase}.post{position:relative}.post-content{min-width:120px}.post-title{font-size:3.1em;letter-spacing:-.03em;line-height:1.2em;margin:0 0 .4em;padding:0;text-transform:none}.post-title a{color:#000;text-decoration:none}.post-title a:hover{color:var(--theme_accent)}.post-image{margin:0 0 1em}.post-image img{border-radius:var(--theme_rounded);vertical-align:bottom}.post-image.left{float:left;margin-right:1em}.post-image.right{float:right;margin-left:1em}.post-meta{font-size:.9em;line-height:1.6em;margin:0 0 .5em;padding:0}.post-meta a{text-decoration:none}.post-meta :is(.post-comment,.post-category,.post-tag):before{border-left:1px solid hsla(0,0%,71%,.6);content:"";display:inline-block;height:1.3em;margin:0 .9em 0 .45em;transform:skewX(-15deg);vertical-align:middle;white-space:nowrap;width:1px}.post-meta .post-category:first-child:before{display:none}.post-meta .post-comment .tf_fa{font-size:.8em;margin-left:8px;opacity:.7;vertical-align:text-top}.more-link,.more-link:after,.more-link:hover{text-decoration:none}.more-link:after{border:1px solid transparent;border-right-color:inherit;border-top-color:inherit;content:"";display:inline-block;margin-left:.5em;min-height:.7em;min-width:.7em;transform:rotate(45deg);vertical-align:middle}.post-date{display:block;font-size:.8em;letter-spacing:.04em;margin:0 0 .4em;text-transform:uppercase}.loops-wrapper .post-image{margin-bottom:1em;position:relative;transition:border .3s ease-in-out,margin .3s ease-in-out,width .3s ease-in-out,transform .3s ease-in-out}.author-box{border:0;margin:5.5em 0}.author-box .author-avatar{float:left;margin:0 2em .3em 0}.author-box .author-name{margin:0 0 .3em}.post-pagination{margin:.5em 0 2em;text-align:right}.post-pagination strong{margin-right:3px}.post-pagination a{margin-left:3px;margin-right:3px}.tf_load_more{padding:2em 0}a.load-more-button{background:hsla(0,0%,72%,.16);border-radius:var(--theme_btn_rounded);box-sizing:border-box;display:none;padding:.7em 1.8em;text-decoration:none;width:auto}.post-video{height:0;margin-bottom:15px;overflow:hidden;padding-bottom:56.25%;position:relative}.post-video iframe{height:100%;left:0;position:absolute;top:0;width:100%}.featured-area img{width:100%}.loops-wrapper.no-gutter .post-image{margin:0}.loops-wrapper.no-gutter .post,.loops-wrapper.no-gutter .post-image img,ul.products.no-gutter li.product .post-image{border-radius:0}.widget{margin:0 0 2.4em}.widgettitle{font-size:1.25em;line-height:1.3em;margin:0 0 1em;padding:0}.widget ul{margin:0;padding:0}.widget li{clear:both;list-style:none;margin:0;padding:.4em 0}.widget ul ul{margin:.6em 0 -.6em;padding:0}.widget ul ul li{margin:0;padding-left:1em}iframe[src*=facebook]{background-color:#fff}#content .twitter-tweet-rendered,#content .twt-border{max-width:100%!important}#content .twt-border{min-width:180px!important}:is(.col4-3,.col4-2,.col4-1,.col3-2,.col3-1,.col2-1) .loops-wrapper.list-post .post-title{font-size:1.4em;margin:0 0 .5em}.shortcode.themify-icon .themify-icon-icon{font-size:1.3em}a.shortcode.button{border-radius:var(--theme_btn_rounded);padding:.65em 1em}.tb_optin_horizontal form>div[class*=tb_optin_]{width:auto}img:is(.alignleft,.aligncenter,.alignright,.alignnone){margin-bottom:1em}.alignleft{float:left;margin-right:1em}.alignright{float:right;margin-left:1em}.aligncenter{display:block;margin-left:auto;margin-right:auto;text-align:center}.wp-caption{margin-bottom:1em;max-width:100%;text-align:center}.wp-caption-text{margin:.5em 0}body.attachment{position:static}.single .attachment.post,body.attachment{float:none;width:auto}.menu:after,.widget li:after{clear:both;content:"";display:table}.module-feature-image,.post-image,.post-img,.slide-image{transition:.3s ease-in-out;transition-property:border,padding,width}.mobile-menu-visible{overflow-y:hidden}@media(max-width:1260px){h1{font-size:2.4em}h2{font-size:2em}.pagewidth{max-width:94%}#pagewrap,.default_width #layout .row_inner{max-width:100%}}@media(max-width:1024px){.header-widget .col4-1{width:48.4%}.header-widget .col4-1:nth-child(odd){clear:left;margin-left:0}}@media(max-width:760px){body .pagewidth{max-width:90%}#layout{flex-wrap:wrap}#content,#sidebar{clear:both;max-width:100%;padding-top:10%;width:100%}}@media(max-width:680px){h1{font-size:1.9em}.post-title,h2{font-size:1.6em}h3{font-size:1.35em}.col4-1{font-size:.95em}.col3-1,.col4-2{margin-left:0;max-width:100%;width:100%}.fixed-header #site-logo img:not(.tf_sticky_logo){max-height:40px;width:auto}#headerwrap .header-icons{right:5%}.loops-wrapper:is(.list-post,.grid4,.grid3,.grid2,.list-large-image) .post-image{float:none;max-width:none;overflow:visible;width:auto}} /*/wp-content/themes/themify-ultra/styles/headers/header-menu-split.css*/ #header{text-align:center}#site-logo{margin:0}#main-nav li{vertical-align:middle}#main-nav .has-mega-sub-menu .mega-sub-menu{top:auto}#main-nav-wrap{align-items:center;display:flex;justify-content:center}.transparent-header #main-nav ul a{color:#484848}.transparent-header #main-nav ul a:hover{color:#000}.fixed-header #site-logo a{display:inline-block;line-height:1em;padding-block:0}#site-logo a,.fixed-header #header{padding-block:0}.fixed-header .cart-icon{display:none}#main-nav .themify-logo-menu-item #site-logo{line-height:0;margin-inline:.2em}#main-nav .themify-logo-menu-item #site-logo a{padding:0}.search-button{margin-right:0} /*/wp-content/themes/themify-ultra-child/style.css*/ //*Themify Ultra Child Theme style.css FINAL 20260223*// /* Theme Name: Drill Tech Child (Ultra) Template: themify-ultra Author: WOWSuccessTeam & Lynn Herkes Description: Consolidated, update-safe CSS — preserves dev submenu/tiles, fluid type (opt-in), row tweaks, services tiles, svc-intro, and heading fixes. Home page preserved. Version: 1.2.2 */ /* Custom CSS starts below… */ /* ========================================= 0) Developer NAV / TILE styling (preserved) ========================================= */ .menuphoto1{ display:inline-block; width:20vw; transform:scale(1.2); transition:transform .3s ease; vertical-align:top; margin-left:-1.5vw; clip-path:inset(0 round 5px); margin-bottom:1vw; } .menuphoto1:hover{ transform:scale(1.3); } .child-arrow{ display:inline-block; vertical-align:middle; text-align:center; } .menutext{ display:inline-block; text-align:left; font-family:Arial,sans-serif; text-transform:uppercase; font-size:clamp(12px, .8vw, 20px); position:absolute; top:-1vw; left:-4.5vw; white-space:nowrap; margin-left:0; } .menutext2{ font-family:Arial,sans-serif; text-transform:uppercase; font-size:clamp(12px, .8vw, 20px); position:absolute; top:-.95vw; left:-5vw; white-space:nowrap; } /* main nav colors */ #main-nav>li>a{ color:#fff !important; } #main-nav>li>a:hover{ color:#ebd131 !important; } /* tile boxes */ .tilebox{ display:flex; align-items:center !important; justify-content:center !important; height:10vw; width:15vw; border-radius:10px; overflow:hidden; } .tilebox img.tile-icon{ width:40% !important; height:auto !important; display:block; } h4.tile-title{ text-align:center; font-size:clamp(12px, 1vw, 20px) !important; margin-top:.5em; } [class^="module"] .tile-front{ background-repeat:no-repeat; background-size:40% auto; background-position:center 80%; } /* ========================================= 1) Fluid Typography (opt-in with .fluid-type) ========================================= */ :root{ --h1-min:2.8rem; --h1-vw:3.8vw; --h1-max:4.2rem; --h2-min:1.9rem; --h2-vw:2.2vw; --h2-max:3.1rem; --h3-min:1.3rem; --h3-vw:1.2vw; --h3-max:2.1rem; --h5-min:.9rem; --h5-vw:.55vw; --h5-max:1.2rem; /* eyebrow/kicker */ --body-min:.92rem; --body-vw:.55vw; --body-max:1.08rem; } .fluid-type .tb_text_wrap h1{ font-size:clamp(var(--h1-min), var(--h1-vw) + .2rem, var(--h1-max)) !important; line-height:1.06 !important; letter-spacing:-.01em; } .fluid-type .tb_text_wrap h2{ font-size:clamp(var(--h2-min), var(--h2-vw) + .2rem, var(--h2-max)) !important; line-height:1.15 !important; } .fluid-type .tb_text_wrap h3{ font-size:clamp(var(--h3-min), var(--h3-vw) + .4rem, var(--h3-max)) !important; line-height:1.2 !important; } /* ALL-CAPS eyebrow/kicker */ .fluid-type .tb_text_wrap h4, .fluid-type .tb_text_wrap h5, .fluid-type .tb_text_wrap h6{ font-size:clamp(var(--h5-min), var(--h5-vw) + .55rem, var(--h5-max)) !important; line-height:1.2 !important; letter-spacing:.08em; text-transform:uppercase; } /* body/lists */ .fluid-type .tb_text_wrap p, .fluid-type .tb_text_wrap li{ font-size:clamp(var(--body-min), var(--body-vw) + .5rem, var(--body-max)) !important; line-height:1.42 !important; } /* keep scope tight */ .fluid-type .tb_text_wrap [style*="line-height"]{ line-height:inherit !important; } .fluid-type .tb_text_wrap [style*="font-size"]{ font-size:inherit !important; } /* never touch menus/tiles when fluid-type is on */ .fluid-type .menuphoto1, .fluid-type .menutext, .fluid-type .menutext2, .fluid-type .tilebox, .fluid-type #main-nav, .fluid-type .tile-icon, .fluid-type .tile-title{ font-size:inherit; line-height:normal; } /* ========================================= 2) Row-level refinements (scoped; no bleed) ========================================= */ .row-hero, .row-hero .tb_text_wrap, .row-hero .module-title{ text-align:left !important; } .row-hero .tb_text_wrap h5{ font-size:clamp(var(--h5-min), .6vw + .55rem, var(--h5-max)) !important; } .row-hero .tb_text_wrap h1, .row-hero .tb_text_wrap .hero-title{ font-size:clamp(2.8rem, 3.8vw + .2rem, 4.2rem) !important; line-height:1.06 !important; letter-spacing:-.015em; } /* OUR SERVICES: center headings for this row only */ .row-services .tb_text_wrap, .row-services .module-title, .row-services .module-title h2{ text-align:center !important; margin-left:auto !important; margin-right:auto !important; display:block; } /* WHY CHOOSE — denser body */ .row-why .tb_text_wrap p, .row-why .tb_text_wrap li{ font-size:clamp(1rem, .65vw + .5rem, 1.25rem); line-height:1.55; } /* JOBS */ .row-jobs .tb_text_wrap h5{ font-size:clamp(var(--h5-min), var(--h5-vw) + .5rem, var(--h5-max)); } .row-jobs .tb_text_wrap h2{ font-size:clamp(2rem, 2.6vw + .2rem, 3.4rem); } .row-jobs .tb_text_wrap p { font-size:clamp(1rem, .65vw + .5rem, 1.25rem); } /* CERTS & ACCREDITATIONS */ .row-certs .tb_text_wrap h2, .row-certs .module-title h2, .row-certs h2{ font-size:clamp(1.15rem, 1.1vw + .5rem, 1.8rem) !important; line-height:1.18 !important; text-align:center !important; margin-inline:auto !important; } /* RESULTS — smaller body cap */ .row-results .tb_text_wrap p{ font-size:clamp(.95rem, .55vw + .5rem, 1.15rem); line-height:1.55; } /* ========================================= NEWS / BLOG — improved responsive post entries ========================================= */ /* Home / Archive list — centered title + tidy cards */ .row-news .tb_text_wrap h2, .row-news .module-title, .row-news .module-title h2{ text-align:center !important; margin-left:auto !important; margin-right:auto !important; display:block !important; } /* Post titles (list view) */ .row-news .module-post .post-title, .row-news .tb_text_wrap .post-title, .post-title a{ font-size:clamp(1.3rem, 1.4vw + .6rem, 2rem) !important; line-height:1.22 !important; margin:.4em 0 .35em !important; font-weight:600 !important; } /* Post meta (date, author, etc.) */ .row-news .module-post .post-meta, .row-news .tb_text_wrap .post-meta{ font-size:clamp(.82rem, .4vw + .5rem, .98rem) !important; opacity:.8; margin-bottom:.8em; } /* Excerpt / content preview */ .row-news .module-post .post-content, .row-news .tb_text_wrap .post-excerpt, .row-news .tb_text_wrap p{ font-size:clamp(1rem, .65vw + .5rem, 1.18rem) !important; line-height:1.55 !important; } /* Card padding & links */ .row-news .module-post .post{ padding: clamp(1rem, 2vw, 1.6rem) clamp(1rem, 1.8vw, 1.4rem) !important; border-radius:8px; transition: box-shadow .25s ease; } .row-news .module-post .post:hover{ box-shadow: 0 8px 25px rgba(0,0,0,0.1); } .row-news .module-post .post a{ text-decoration:none; } .row-news .module-post .post a:hover{ text-decoration:underline; } /* ========================================= 3) Buttons (scale where .fluid-type is active) ========================================= */ .fluid-type .module-buttons .btn, .fluid-type .tb_button a, .fluid-type a.btn, .fluid-type a.button{ font-size:clamp(.92rem, .45vw + .6rem, 1.06rem) !important; line-height:1.2 !important; letter-spacing:.02em; padding:clamp(.55rem, .6vw + .3rem, .85rem) clamp(.9rem, .8vw + .6rem, 1.25rem) !important; border-radius:.6rem !important; } /* ========================================= 4) Footer (compact, matches address line) ========================================= */ .row-footer p, .row-footer li, #footerwrap p, #footerwrap li, .site-footer p, .site-footer li, #footer p, #footer li{ font-size:clamp(12px, .5vw + 10px, 14px) !important; line-height:1.1 !important; margin:.1em 0 !important; } /* tiny copyright */ .row-footer .copyright, #footerwrap .copyright, .site-footer .copyright{ font-size:6px !important; line-height:1.05 !important; margin-top:.2em !important; opacity:.85; } .row-footer .tb_text_wrap{ max-width:none; } /* ========================================= 5) Services submenu (SAFE — preserve dev layout) ========================================= */ /* Parent "Services" item must have CSS class: nav-services */ #main-nav li.nav-services { position: relative !important; } /* REQUIRED */ #main-nav li.nav-services > .sub-menu { display: grid !important; grid-template-columns: repeat(3, minmax(160px, 1fr)); /* ← changed from 4 to 3 */ gap: 18px 22px; padding: 20px 22px !important; max-width: min(90vw, 1200px); width: max-content !important; min-width: 580px; /* ← reduced from 680px */ margin: 0 auto !important; background: rgba(255,255,255,0.98); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.12); position: absolute !important; left: 50% !important; top: 100% !important; transform: translateX(-15%) !important; /* centered better with 3 cols */ z-index: 9999 !important; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } #main-nav li.nav-services:hover > .sub-menu, #main-nav li.nav-services:focus-within > .sub-menu { opacity: 1; visibility: visible; } #main-nav li.nav-services > .sub-menu > li { list-style: none !important; margin: 0 !important; padding: 0 !important; } #main-nav li.nav-services > .sub-menu > li > a { display: block; text-align: center; text-decoration: none; color: #000; line-height: 1.35; padding: 10px 8px 14px; border-radius: 12px; white-space: normal !important; overflow-wrap: break-word; word-break: keep-all; -webkit-hyphens: auto; hyphens: auto; text-transform: uppercase; font-weight: 600; letter-spacing: 0.03em; font-size: clamp(14px, 1.2vw, 16px); transition: background 0.25s ease; } #main-nav li.nav-services > .sub-menu > li > a:hover { background: rgba(0,0,0,0.05); } #main-nav li.nav-services > .sub-menu > li > a::before { content: ""; display: block; width: 100%; aspect-ratio: 16 / 10; margin: 0 0 12px 0; border-radius: 10px; background-color: #ccc; background-position: center; background-size: cover; background-repeat: no-repeat; transition: transform 0.28s ease; } #main-nav li.nav-services > .sub-menu > li > a:hover::before { transform: scale(1.045); } #main-nav li.nav-services > .sub-menu > li > a:focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; } /* ──────────────────────────────────────────────── Responsive adjustments — now starts from 3 cols ──────────────────────────────────────────────── */ @media (max-width: 1100px) { #main-nav li.nav-services > .sub-menu { grid-template-columns: repeat(3, minmax(160px, 1fr)); min-width: 580px; } } @media (max-width: 880px) { #main-nav li.nav-services > .sub-menu { grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 16px; padding: 18px !important; min-width: 380px; } } @media (max-width: 580px) { #main-nav li.nav-services > .sub-menu { grid-template-columns: 1fr; min-width: 300px; max-width: 90vw; gap: 14px; padding: 16px !important; } } /* Image mappings — unchanged */ #main-nav li.nav-services .svc-er > a::before{ background-image: url("https://staging.drilltechdrilling.com/wp-content/uploads/2026/01/Service_EarthRetention3-upscaled.jpg"); } #main-nav li.nav-services .svc-mining > a::before{ background-image: url("https://staging.drilltechdrilling.com/wp-content/uploads/2025/12/Service-Box-Mining-Tunneling.jpg"); } #main-nav li.nav-services .svc-rail > a::before{ background-image: url("https://staging.drilltechdrilling.com/wp-content/uploads/2025/12/Service-Box-Rail.jpg"); } #main-nav li.nav-services .svc-gt > a::before{ background-image: url("https://staging.drilltechdrilling.com/wp-content/uploads/2025/12/Service-Box-Ground-Treatment.jpg"); } #main-nav li.nav-services .svc-found > a::before{ background-image: url("https://staging.drilltechdrilling.com/wp-content/uploads/2025/12/Service-Box-Foundations.jpg"); } #main-nav li.nav-services .svc-more > a::before{ background-image: url("https://staging.drilltechdrilling.com/wp-content/uploads/2025/12/Service-Box-Fabrication-Shop-scaled.png"); } #main-nav li.nav-services .svc-engineer > a::before{ background-image: url("https://staging.drilltechdrilling.com/wp-content/uploads/service-1.png"); } #main-nav li.nav-services .svc-crete > a::before{ background-image: url("https://staging.drilltechdrilling.com/wp-content/uploads/2025/12/Service-Box-Architectural-Shotcrete.png"); } /* ========================================= 6) Utilities (opt-in) ========================================= */ .u-left{ text-align:left !important; } .u-center{ text-align:center !important; } .pad-tight{ padding-inline:clamp(10px, 1.4vw, 20px) !important; } .pad-normal{ padding-inline:clamp(14px, 2.2vw, 28px) !important; } .pad-loose{ padding-inline:clamp(18px, 3vw, 40px) !important; } .max-72ch{ max-width:72ch !important; margin-inline:auto !important; } .max-60ch{ max-width:60ch !important; margin-inline:auto !important; } @media (max-width:480px){ .tb_text_wrap h5, .tb_text_wrap h6{ letter-spacing:.06em; } .tb_text_wrap p, .tb_text_wrap li{ line-height:1.5; } } :target{ scroll-margin-top:100px; } /* ========================================= 7) Services tiles (Pro Image) — rows tagged `svc-tiles` ========================================= */ .svc-tiles .module-pro-image .image-title, .svc-tiles .module-pro-image .pro-image-title, .svc-tiles .module-pro-image .tb_image_title, .svc-tiles .module-pro-image [class*="image-title"]{ font-size: clamp(14px, 1.1vw, 20px) !important; line-height: 1.15 !important; letter-spacing: 0.02em !important; margin: 6px 0 0 0 !important; padding: 6px 10px !important; white-space: normal !important; word-break: keep-all !important; overflow-wrap: break-word !important; -webkit-hyphens: auto; hyphens: auto; } .svc-tiles .module-pro-image .tb_image_wrap:hover .tb_button, .svc-tiles .module-pro-image .tb_button{ left: 0 !important; right: auto !important; transform: none !important; margin-left: 0 !important; } /* ========================================= 8) Services “intro” subtitle under H1 — rows tagged `svc-intro` ========================================= */ /* svc-intro hero H2 — enforce identical styling on pages + posts */ .svc-intro.row-hero h2, .svc-intro.row-hero .tb_text_wrap h2, .svc-intro.row-hero .module-title h2{ font-size: clamp(18px, .9vw + 4px, 24px) !important; line-height: 1.5 !important; margin: .5em 0 .6em !important; letter-spacing: .01em; /* Normalize anything that can make it "look" bigger/bolder on posts */ font-weight: 400 !important; font-style: normal !important; text-transform: none !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Post pages: svc-intro hero H2 — tighten line-height to match Services exactly */ .single .svc-intro.row-hero h2, .single .svc-intro.row-hero .tb_text_wrap h2, .single .svc-intro.row-hero .module-title h2{ line-height: 1.32 !important; /* tighten */ } /* Safety: if Themify wraps text in spans/strong, keep them from changing the leading */ .single .svc-intro.row-hero h2 *, .single .svc-intro.row-hero .tb_text_wrap h2 *, .single .svc-intro.row-hero .module-title h2 *{ line-height: inherit !important; } /* ========================================= 9) Injected service post area ========================================= */ #svc-target{ margin-block:2rem; } #svc-target iframe{ width:100%; border:0; display:block; min-height:800px; } /* ========================================= 10) HERO heading weights/metrics — Services & Posts; Home intact ========================================= */ /* Single Posts: hero H1 not bold; same feel as Services H1 */ .single .row-hero h1, .single .row-hero .module-title h1, .single h1.entry-title, .single .entry-title, .single .page-title h1, .single .tf_heading h1{ font-weight:400 !important; line-height:1.06 !important; letter-spacing:-.015em !important; font-variation-settings:"wght" 400 !important; font-synthesis:none !important; text-shadow:none !important; -webkit-text-stroke:0 !important; } .single .row-hero h1[style*="font-weight"]{ font-weight:400 !important; } .single .row-hero h1 strong, .single .row-hero h1 b{ font-weight:inherit !important; } /* 1) PAGES ONLY (includes Home & Services): make hero H1 a bit smaller */ .page .row-hero .tb_text_wrap h1, .page .row-hero .hero-title{ font-size: clamp(2.4rem, 3.2vw + 0.2rem, 3.8rem) !important; } /* Posts using the Services hero pattern (svc-intro row-hero): match Services H1 sizing, but ~2px smaller across devices */ .single .row-hero.svc-intro h1, .single .row-hero.svc-intro .tb_text_wrap h1, .single .row-hero.svc-intro .hero-title, .single .row-hero.svc-intro .module-title h1{ font-size: calc(clamp(2.4rem, 3.2vw + 0.2rem, 3.8rem) - 2px) !important; } /* 2) SERVICES (Pages, not Home): make hero H2 a touch smaller */ .page:not(.home) .row-hero h2, .page:not(.home) .row-hero .module-title h2{ font-size: clamp(16px, 0.75vw + 9px, 22px) !important; font-weight: 400 !important; line-height: 1.22 !important; } /* 3) POSTS: hero H2 — match Services sizing + don't override svc-intro */ .single .row-hero:not(.svc-intro) h2, .single .row-hero:not(.svc-intro) .module-title h2, .single .row-hero:not(.svc-intro) .tb_text_wrap h2{ font-size: clamp(16px, 0.75vw + 9px, 22px) !important; font-weight: 400 !important; line-height: 1.22 !important; } /* Posts using the Services hero pattern (svc-intro row-hero) should look identical to Services pages */ .single .row-hero.svc-intro h2, .single .row-hero.svc-intro .module-title h2, .single .row-hero.svc-intro .tb_text_wrap h2{ font-size: clamp(18px, .9vw + 4px, 24px) !important; line-height: 1.5 !important; margin: .5em 0 .6em !important; letter-spacing: .01em; font-weight: 400 !important; } /* ========================================= ImagePro tiles: title + description sizing Scoped only to rows: svc-loader / srv-tiles ========================================= */ .svc-loader .module-pro-image .image-pro-title, .srv-tiles .module-pro-image .image-pro-title{ font-size: clamp(20px, 1.4vw, 28px); line-height: 1.2; } .svc-loader .module-pro-image .image-pro-caption, .srv-tiles .module-pro-image .image-pro-caption{ font-size: clamp(14px, 1.0vw, 18px); line-height: 1.4; } /* ========================================================= HOME – Services tiles Force Learn More button LEFT aligned (builder + frontend) Scope: .srv-tiles only ========================================================= */ .srv-tiles .module-pro-image .image-pro-action-button{ display: inline-flex !important; justify-content: flex-start !important; align-items: center; margin-left: 0 !important; margin-right: auto !important; left: 0 !important; right: auto !important; transform: none !important; text-align: left !important; } /* Defensive: kill any centering inherited from overlay containers */ .srv-tiles .image-pro-overlay-inner{ align-items: flex-start !important; text-align: left !important; } /* ========================================================= HOME – Key Projects overlay layout Title at TOP + keep meta/excerpt/button (hover) ========================================================= */ /* Make the overlay content a vertical stack */ .home .dt-home-key-projects .post-content, .home .dt-home-key-projects .post-content-inner, .home .dt-home-key-projects .post-inner, .home .dt-home-key-projects .post { /* don't force anything here unless needed */ } /* This is usually the overlay wrapper in Themify Post modules. We apply flex to the overlay content area so the title can sit at the top. */ .home .dt-home-key-projects .post-image + .post-content, .home .dt-home-key-projects .post-image .post-content, .home .dt-home-key-projects .post-image .post-content-inner { display: flex; flex-direction: column; justify-content: flex-start; /* TOP */ align-items: flex-start; } /* Title styling + keep it top */ .home .dt-home-key-projects .post-title { margin: 0 0 8px 0 !important; padding: 0 !important; order: 1; } .home .dt-home-key-projects .post-title, .home .dt-home-key-projects .post-title a { font-size: 24px; /* try 20px if you want tighter */ line-height: 1.15; letter-spacing: 0.2px; } /* Allow long titles to wrap and not get clipped */ .home .dt-home-key-projects .post-title a { display: block; white-space: normal; } /* Keep the other overlay elements below the title */ .home .dt-home-key-projects .post-meta, .home .dt-home-key-projects .post-excerpt, .home .dt-home-key-projects .entry-content, .home .dt-home-key-projects .builder_button, .home .dt-home-key-projects .post-more-link { order: 2; margin-top: 5px; } /* HOME: Key Projects – force title to top of overlay (keep hover content working) */ .home .dt-home-key-projects .post-title, .home .dt-home-key-projects .post-title a{ font-size: 24px !important; /* try 20px if you want smaller */ line-height: 1.15 !important; } /* These selectors cover the common Themify Post overlay structures */ .home .dt-home-key-projects .post-image .post-title, .home .dt-home-key-projects .post-image + .post-content .post-title, .home .dt-home-key-projects .post-content .post-title{ position: absolute !important; top: var(--kp-title-top) !important; bottom: auto !important; left: 14px !important; right: 14px !important; margin: 0 !important; z-index: 5 !important; } /* Make sure the overlay has enough top padding so the title doesn't collide with hover content */ .home .dt-home-key-projects .post-image .post-content, .home .dt-home-key-projects .post-image + .post-content, .home .dt-home-key-projects .post-content{ padding-top: var(--kp-title-padding) !important; /* adjust 40–60 depending on title height */ } /* Ensure long titles wrap instead of clipping */ .home .dt-home-key-projects .post-title a{ display: block !important; white-space: normal !important; } /* ------------------------------------------------- Key Projects – Responsive title sizing (safe caps) Homepage only -------------------------------------------------- */ /* Laptop / smaller desktop (12"–13") tighten title vertical balance on small laptops*/ @media (max-width: 1366px) { .home .module-post .post-title, .home .module-post .post-title a { font-size: 24px !important; line-height: 1.15; } } /* Tablet & smaller */ @media (max-width: 1024px) { .home .module-post .post-title, .home .module-post .post-title a { font-size: 20px !important; line-height: 1.15; } } :root { --kp-title-top: 3px; /* move title up slightly */ --kp-title-padding: 48px; /* adds space BELOW wrapped title */ } /* ========================================================= DRILL TECH — HISTORY TIMELINE (ROBUST / DUPLICATION-SAFE) Scope: ONLY modules with class: dt-history-timeline Goal: - Restore “perfect state” behavior - Keep it stable even if rows/modules are duplicated - Improve: center the entire (image + date + title) group while keeping text left-aligned to image edge ========================================================= */ /* ---------- FEATURE SLIDE: CENTER THE GROUP, KEEP TEXT LEFT ---------- */ /* Center the whole slide content column */ .dt-history-timeline .tl-slide-content{ display: flex !important; flex-direction: column !important; align-items: center !important; gap: 14px !important; } /* Shared width so image + text align perfectly */ .dt-history-timeline .tl-media, .dt-history-timeline .tl-text{ width: 100% !important; max-width: 980px !important; /* adjust if you want wider/narrower */ margin-left: auto !important; margin-right: auto !important; } /* Keep the text left-aligned *inside* the centered width */ .dt-history-timeline .tl-text, .dt-history-timeline .tl-text-content-container, .dt-history-timeline .tl-text-content{ text-align: left !important; } /* Keep image proportions intact and prevent “shrinking weirdness” */ .dt-history-timeline .tl-media img, .dt-history-timeline .tl-media video, .dt-history-timeline .tl-media iframe{ max-width: 100% !important; height: auto !important; } /* Add comfortable spacing between text and media if Theme/Timeline collapses it */ .dt-history-timeline .tl-text{ margin-top: 0 !important; } .dt-history-timeline .tl-media{ margin-top: 0 !important; } /* ---------- NAV ARROWS: ARROW ONLY (NO TITLE/DATE) ---------- */ .dt-history-timeline .tl-slidenav-title, .dt-history-timeline .tl-slidenav-description, .dt-history-timeline .tl-slidenav-description-date{ display: none !important; } /* ---------- FLAG / MARKER: THUMBNAIL + TITLE UNDER THUMB ---------- */ /* Force the marker content to stack: thumbnail on top, title underneath */ .dt-history-timeline .tl-timemarker-content, .dt-history-timeline .tl-timemarker-content-container{ display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; } /* Thumbnail box sizing (140x140) — shows as actual thumb, not icon */ .dt-history-timeline .tl-timemarker-media-container{ width: 140px !important; height: 140px !important; flex: 0 0 140px !important; overflow: hidden !important; border-radius: 4px !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* If Timeline outputs an inside the thumb */ .dt-history-timeline .tl-timemarker-media-container img{ width: 50px !important; height: 50px !important; object-fit: cover !important; display: block !important; } /* Kill the default “image icon” that replaces/overlays the real thumb */ .dt-history-timeline .tl-timemarker-media-container .tl-icon-image, .dt-history-timeline .tl-timemarker .tl-icon-image, .dt-history-timeline .tl-timenav-item .tl-icon, .dt-history-timeline .tl-timenav-item .tl-icon-image{ display: none !important; } /* Make the flag title wrap cleanly under the thumbnail */ .dt-history-timeline .tl-timemarker-text, .dt-history-timeline .tl-timemarker-text .tl-headline, .dt-history-timeline .tl-timemarker-text h2{ width: 100% !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere !important; word-break: break-word !important; line-height: 1.15 !important; } /* ---------- TIMENAV (BOTTOM STRIP) THUMBNAIL SUPPORT (IF USED) ---------- */ /* Some builds use tl-timenav-thumbnail instead of tl-timemarker-media-container */ .dt-history-timeline .tl-timenav-item{ display: flex !important; align-items: center !important; gap: 8px !important; } .dt-history-timeline .tl-timenav-thumbnail, .dt-history-timeline .tl-timenav-thumbnail img{ width: 50px !important; height: 50px !important; flex: 0 0 50px !important; max-width: 50px !important; max-height: 50px !important; object-fit: cover !important; display: block !important; } .dt-history-timeline .tl-timenav-thumbnail{ background-size: cover !important; background-position: center center !important; } .dt-history-timeline .tl-timenav-title, .dt-history-timeline .tl-timenav-description{ white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; min-width: 0 !important; } /******************************************************* TIMELINE FIXES — DO NOT AFFECT MAIN FEATURED IMAGE SIZE Goals: - Date + Title BELOW the featured image, aligned to image left edge - Thumbnail shows in flag at 100x100 - Do NOT reintroduce icon - Do NOT add title/date under nav arrows *******************************************************/ /* 1) Ensure the slide content stacks: MEDIA first, TEXT second */ .tl-slide .tl-slide-content { display: flex !important; flex-direction: column !important; } /* TimelineJS typically uses these siblings for media + text */ .tl-slide .tl-slide-content .tl-media { order: 1 !important; } .tl-slide .tl-slide-content .tl-text { order: 2 !important; } /* 2) Align the text block with the featured image's left edge We do this by matching the text block's width/margins to the media block, WITHOUT changing the media itself. */ .tl-slide .tl-slide-content .tl-text { /* If media is centered via auto margins, this keeps text centered too */ margin-left: auto !important; margin-right: auto !important; /* Match common TimelineJS media sizing behavior */ width: 100% !important; max-width: 1024px !important; /* Safe cap; does NOT change image size */ text-align: left !important; padding-top: 12px !important; /* puts it visually below the image */ } /* If your featured image container has its own max-width, mirror it here. This does NOT resize the image; it only constrains the text block. */ .tl-slide .tl-slide-content .tl-media { margin-left: auto !important; margin-right: auto !important; max-width: 1024px !important; } /* 3) Flag/marker thumbnail: force it to show + enforce 100x100 */ .tl-timemarker .tl-timemarker-media-container, .tl-timemarker .tl-timemarker-media-container * { /* Stop inherited "display:none" or weird collapsing */ visibility: visible !important; } /* The actual thumbnail image inside the marker */ .tl-timemarker .tl-timemarker-media-container img, .tl-timemarker img.tl-timemarker-media { display: block !important; width: 100px !important; height: 100px !important; object-fit: cover !important; object-position: center center !important; } /* Make sure the marker media container doesn't squash it */ .tl-timemarker .tl-timemarker-media-container { width: 100px !important; height: 100px !important; overflow: hidden !important; } /* 4) Keep the icon gone (belt + suspenders) */ .tl-timemarker .tl-timemarker-icon, .tl-timemarker .tl-icon { display: none !important; } /* ========================================================= DT History Timeline — Marker (flag) thumbnails 100x100 Scope: ONLY .dt-history-timeline ========================================================= */ /* The injected thumbnail */ .dt-history-timeline .dt-tl-marker-thumb{ width: 100px; height: 100px; display: block; background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 4px; } /* Try to make the marker container hold the thumbnail cleanly */ .dt-history-timeline .tl-timemarker .tl-timemarker-media-container, .dt-history-timeline .tl-timemarker .tl-timemarker-content-container{ display: flex; align-items: center; justify-content: center; } /* Hide TimelineJS default media icon so it doesn't collide */ .dt-history-timeline .tl-timemarker .tl-icon-image, .dt-history-timeline .tl-timemarker .tl-icon{ display: none !important; } /* ========================================================= Drill Tech — History Timeline refinements Scope: ONLY .dt-history-timeline ========================================================= */ /* Headline wrapper under the featured image */ .dt-history-timeline .dt-tl-headline-wrap{ display: block; width: 100%; } /* Keep the date + title spacing clean (optional) */ .dt-history-timeline .dt-tl-headline-wrap .tl-headline-date{ display: block; margin: 10px 0 2px 0; } .dt-history-timeline .dt-tl-headline-wrap .tl-headline{ display: block; margin: 0; } /* DT History Timeline — Marker thumbnail size (slightly larger) */ .dt-history-timeline .dt-tl-marker-thumb{ width: 140px; height: 140px; display: block; background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 4px; } /* Ensure the marker media container can show the thumb nicely */ .dt-history-timeline .tl-timemarker .tl-timemarker-media-container{ display: flex; align-items: center; justify-content: center; } /* If TimelineJS inserts an icon in the marker media container, keep it from interfering */ .dt-history-timeline .tl-timemarker .tl-timemarker-media-container .tl-icon-image, .dt-history-timeline .tl-timemarker .tl-timemarker-media-container .tl-icon{ display: none !important; } /* ===== History Timeline: Left-align YYYY + Title under featured image ===== */ .dt-history-timeline .dt-tl-headline-wrap{ width: 100%; margin-left: auto; margin-right: auto; } /* Force the text itself left (Timeline often centers these) */ .dt-history-timeline .dt-tl-headline-wrap .tl-headline-date, .dt-history-timeline .dt-tl-headline-wrap .tl-headline{ text-align: left !important; } /* ========================================================= DT History Timeline — Keep headline block tied to media width Scope: ONLY .dt-history-timeline ========================================================= */ /* Timeline adds big left/right padding to .tl-slide-content; that breaks alignment on wide screens */ .dt-history-timeline .tl-slide .tl-slide-content{ padding-left: 0 !important; padding-right: 0 !important; } /* Center the text container under the media block */ .dt-history-timeline .tl-text-content-container{ margin-left: auto !important; margin-right: auto !important; } /* Keep text left-aligned within that centered block */ .dt-history-timeline .tl-text-content-container .tl-headline-date, .dt-history-timeline .tl-text-content-container .tl-headline{ text-align: left !important; } /* Force left text alignment inside the active slide text area */ .dt-history-timeline .tl-slide.tl-slide-active .tl-text, .dt-history-timeline .tl-slide.tl-slide-active .tl-text-content-container{ text-align: left !important; } /* ========================================================= DT History Timeline — Marker layout: thumb + readable title Scope: ONLY .dt-history-timeline ========================================================= */ /* Make the marker content a reliable 2-column grid */ .dt-history-timeline .tl-timemarker-content{ display: grid !important; grid-template-columns: 70px 1fr !important; column-gap: 10px !important; align-items: start !important; } /* Thumbnail box (keep your current size) */ .dt-history-timeline .tl-timemarker-media-container{ width: 70px !important; height: 70px !important; max-width: 70px !important; max-height: 70px !important; overflow: hidden !important; border-radius: 4px !important; } /* Injected thumb fills the box */ .dt-history-timeline .tl-timemarker-media-container .dt-tl-marker-thumb{ width: 70px !important; height: 70px !important; display: block !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* Hide default icon */ .dt-history-timeline .tl-timemarker-media-container .tl-icon-image{ display: none !important; } /* Make the text area behave normally */ .dt-history-timeline .tl-timemarker-text{ padding: 0 !important; margin: 0 !important; min-width: 0 !important; /* critical: allows wrapping correctly in grid */ } /* Title: allow 2 lines, not 1-letter wrap */ .dt-history-timeline .tl-timemarker-text .tl-headline{ margin: 0 !important; line-height: 1.2 !important; font-size: 12px !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; word-break: normal !important; overflow-wrap: anywhere !important; } /* Keep the overall marker from getting tall */ .dt-history-timeline .tl-timemarker-content-container{ height: auto !important; max-height: 95px !important; overflow: hidden !important; } /* ========================================================= DT History Timeline — widen marker card so title can wrap ========================================================= */ /* Give each marker enough horizontal room for image + text */ .dt-history-timeline .tl-timemarker{ min-width: 180px !important; } /* Ensure inner content is allowed to use that width */ .dt-history-timeline .tl-timemarker-content{ width: 100% !important; } /* ========================================================= DT History Timeline — Force marker card width + readable text ========================================================= */ .dt-history-timeline .tl-timemarker-content-container{ width: 220px !important; min-width: 220px !important; max-width: 220px !important; } .dt-history-timeline .tl-timemarker-content{ display: flex !important; align-items: flex-start !important; gap: 10px !important; width: 100% !important; } .dt-history-timeline .tl-timemarker-media-container{ flex: 0 0 70px !important; width: 70px !important; height: 70px !important; overflow: hidden !important; border-radius: 4px !important; } .dt-history-timeline .dt-tl-marker-thumb{ width: 70px !important; height: 70px !important; display: block !important; background-size: cover !important; background-position: center !important; } .dt-history-timeline .tl-timemarker-text{ flex: 1 1 auto !important; min-width: 0 !important; } .dt-history-timeline .tl-timemarker-text .tl-headline{ margin: 0 !important; line-height: 1.2 !important; font-size: 12px !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; word-break: normal !important; overflow-wrap: anywhere !important; } /* hide the default icon overlay */ .dt-history-timeline .tl-timemarker-media-container .tl-icon-image{ display: none !important; } /* ========================================================= DT History Timeline — Marker layout: thumb LEFT, title RIGHT ========================================================= */ .dt-history-timeline .tl-timemarker-content-container{ width: 260px !important; min-width: 260px !important; max-width: 260px !important; } /* Force side-by-side layout inside the marker card */ .dt-history-timeline .tl-timemarker-content{ display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; width: 100% !important; } /* Thumb container stays fixed */ .dt-history-timeline .tl-timemarker-media-container{ flex: 0 0 70px !important; width: 70px !important; height: 70px !important; overflow: hidden !important; border-radius: 4px !important; } /* Your injected thumb span */ .dt-history-timeline .dt-tl-marker-thumb{ width: 70px !important; height: 70px !important; display: block !important; background-size: cover !important; background-position: center !important; border-radius: 4px !important; } /* Text column takes remaining width and wraps like normal text */ .dt-history-timeline .tl-timemarker-text{ flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; } .dt-history-timeline .tl-timemarker-text .tl-headline{ margin: 0 !important; padding: 0 !important; line-height: 1.25 !important; font-size: 12px !important; /* allow wrapping */ white-space: normal !important; word-break: normal !important; overflow-wrap: anywhere !important; /* remove the “one letter per line” behavior */ -webkit-line-clamp: unset !important; display: block !important; } /* Hide the default image icon overlay if it’s still present */ .dt-history-timeline .tl-timemarker-media-container .tl-icon-image{ display: none !important; } /* ========================================================= DT History Timeline — Left-align YYYY + Title to image edge Scope: ONLY .dt-history-timeline (safe) ========================================================= */ /* 1) Override TimelineJS inline width/padding that breaks alignment */ .dt-history-timeline .tl-slide .tl-slide-content{ width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* 2) Keep the slide stacked: image first, then text */ .dt-history-timeline .tl-slide .tl-slide-content{ display: flex !important; flex-direction: column !important; align-items: center !important; } /* 3) Force media + text to share the exact same centered column width */ .dt-history-timeline .tl-slide .tl-media, .dt-history-timeline .tl-slide .tl-text{ width: 100% !important; max-width: 980px !important; /* adjust if you want wider/narrower */ margin-left: auto !important; margin-right: auto !important; } /* 4) Make sure the image stays centered inside that column (responsive) */ .dt-history-timeline .tl-slide .tl-media-content-container{ display: flex !important; justify-content: center !important; } .dt-history-timeline .tl-slide .tl-media img{ max-width: 100% !important; height: auto !important; } /* 5) Left-align the YYYY + title to the column's left edge */ .dt-history-timeline .tl-slide .tl-text, .dt-history-timeline .tl-slide .tl-text-content-container{ text-align: left !important; } .dt-history-timeline .tl-slide .tl-headline-date, .dt-history-timeline .tl-slide .tl-headline, .dt-history-timeline .tl-slide .tl-headline a{ text-align: left !important; margin-left: 0 !important; } /* Optional: tighten spacing between image and headline block */ .dt-history-timeline .tl-slide .tl-text{ margin-top: 12px !important; } /* ========================================= Mobile-only adjustments for menu / services submenu ========================================= */ @media (max-width: 1024px) { /* 1. green background for the mobile menu panel / dropdown area Targets the common Themify mobile menu container — adjust selector if your mobile menu uses a different class (inspect element on mobile to confirm — often .mobile-menu-active #mobile-menu, .overlay-menu-active .body-overlay, etc.) */ body.mobile-menu-active #main-nav, body.mobile-menu-active .main-nav-dropdown, #mobile-menu, .mobile-menu-panel, .overlay-menu .nav-container { background-color: #2c4e3b !important; /* dark green */ } /* 2. Left-justify the Services submenu items in mobile view Override the centered grid → make it simple left-aligned list */ #main-nav li.nav-services > .sub-menu { /* display: block !important; */ /* change from grid to block */ grid-template-columns: none !important; text-align: left !important; padding: 16px !important; margin: 0 !important; left: 0 !important; right: 0 !important; transform: none !important; /* remove the -20% shift */ width: 100% !important; max-width: 100% !important; min-width: auto !important; } #main-nav li.nav-services > .sub-menu > li > a { text-align: left !important; padding: 14px 18px !important; /* more touch-friendly horizontal padding */ border-bottom: 1px solid rgba(255,255,255,0.08) !important; border-radius: 0 !important; } /* Make font a bit larger/more readable on mobile */ #main-nav li.nav-services > .sub-menu > li > a { font-size: 15px !important; /* or clamp(15px, 3.8vw, 17px) */ padding-left: 24px !important; /* indent a bit for hierarchy */ } /* If submenu items still feel too grid-like at certain widths, force stack earlier */ @media (max-width: 580px) { #main-nav li.nav-services > .sub-menu { padding: 12px !important; } } } /* ========================================================= THEMIFY POST MODULE — consistent gap + bottom-aligned Read More ========================================================= */ /* Each post card becomes a vertical flex stack */ .module-post .builder-posts-wrap .post{ display:flex; flex-direction:column; height:100%; } /* Keep image at top; content should fill remaining height */ .module-post .builder-posts-wrap .post-image{ flex:0 0 auto; } .module-post .builder-posts-wrap .post-content{ display:flex; flex:1 1 auto; } .module-post .builder-posts-wrap .post-content-inner{ display:flex; flex-direction:column; flex:1 1 auto; } /* Entry content should expand to fill space, allowing button to sit at bottom */ .module-post .builder-posts-wrap .entry-content{ display:flex; flex-direction:column; flex:1 1 auto; } /* Smaller, cleaner gap + push button to bottom of the card */ .module-post .builder-posts-wrap .entry-content .more-link-wrap{ margin-top:auto; /* bottom align across cards */ padding-top:6px; /* reduce the gap (tweak 4–10px as desired) */ } /* Make link behave like a button element */ .module-post .builder-posts-wrap .entry-content .more-link{ display:inline-flex; align-items:center; } .module-post .builder-posts-wrap{ align-items:stretch; } /* ========================================================= LEVEL THE CARD HEIGHTS (so Read More aligns across row) Themify post module > loops-wrapper grid4 ========================================================= */ /* Ensure the row stretches items to equal height */ .module-post .builder-posts-wrap.loops-wrapper{ display: flex; /* in case Themify flips modes per breakpoint */ flex-wrap: wrap; align-items: stretch; } /* Make each post card fill the stretched height */ .module-post .builder-posts-wrap.loops-wrapper > .post, .module-post .builder-posts-wrap.loops-wrapper > article.post{ height: 100%; display: flex; flex-direction: column; } /* Make the content area take remaining space so button can sit at bottom */ .module-post .builder-posts-wrap .post-content{ flex: 1 1 auto; display: flex; } .module-post .builder-posts-wrap .post-content-inner{ flex: 1 1 auto; display: flex; flex-direction: column; } .module-post .builder-posts-wrap .entry-content{ flex: 1 1 auto; display: flex; flex-direction: column; } /* Small consistent gap + pin to bottom of the card */ .module-post .builder-posts-wrap .more-link-wrap{ margin-top: auto; padding-top: 6px; /* tweak 4–8px */ } /* ========================================================= HOME: Latest News & Insights (Themify Post Module tb_fpew651) Goal: - Equal-height cards per row - "Read More" aligned to true bottom of each card - Small consistent gap above button ========================================================= */ /* The wrapper that contains the 4 posts */ #themify_builder_content-6579 .module.module-post.tb_fpew651.tb_fullwidth_image .builder-posts-wrap{ display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; } /* Each post card must be a flex column and fill the row height */ #themify_builder_content-6579 .module.module-post.tb_fpew651.tb_fullwidth_image .builder-posts-wrap > article.post, #themify_builder_content-6579 .module.module-post.tb_fpew651.tb_fullwidth_image .builder-posts-wrap > .post{ height: 100% !important; display: flex !important; flex-direction: column !important; } /* Content area stretches so button can be pushed to the bottom */ #themify_builder_content-6579 .module.module-post.tb_fpew651.tb_fullwidth_image .post-content{ flex: 1 1 auto !important; display: flex !important; } #themify_builder_content-6579 .module.module-post.tb_fpew651.tb_fullwidth_image .post-content-inner{ flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; } #themify_builder_content-6579 .module.module-post.tb_fpew651.tb_fullwidth_image .entry-content{ flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; } /* Bottom-align the Read More + tighten spacing */ #themify_builder_content-6579 .module.module-post.tb_fpew651.tb_fullwidth_image .more-link-wrap{ margin-top: auto !important; padding-top: 6px !important; /* adjust to 4–8px */ } #themify_builder_content-6579 .module.module-post.tb_fpew651.tb_fullwidth_image .post-content-inner{ height: 100% !important; } /* ========================================================= FIX: Align Read More buttons to the bottom + normalize spacing Scope: Themify Post module tb_fpew651 (homepage) ========================================================= */ #themify_builder_content-6579 .module.module-post.tb_fpew651 .builder-posts-wrap{ align-items: stretch !important; } /* Make each post card a column that can stretch */ #themify_builder_content-6579 .module.module-post.tb_fpew651 .builder-posts-wrap > article.post{ display: flex !important; flex-direction: column !important; height: 100% !important; } /* Let the content fill remaining height */ #themify_builder_content-6579 .module.module-post.tb_fpew651 .post-content, #themify_builder_content-6579 .module.module-post.tb_fpew651 .post-content-inner, #themify_builder_content-6579 .module.module-post.tb_fpew651 .entry-content{ display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; } /* Pin the wrapper to the bottom of the card */ #themify_builder_content-6579 .module.module-post.tb_fpew651 .entry-content .more-link-wrap{ margin-top: auto !important; padding-top: 6px !important; /* small gap from excerpt */ } /* STOP Themify’s % margins from moving the "button" around */ #themify_builder_content-6579 .module.module-post.tb_fpew651 a.more-link{ margin-top: 0 !important; margin-bottom: 0 !important; } /* ========================================================= FORCE EVEN CARD BODIES + TRUE BOTTOM BUTTON ALIGNMENT Scope: homepage post module tb_fpew651 ========================================================= */ /* Keep your wrapper flex */ #themify_builder_content-6579 .module.module-post.tb_fpew651 .builder-posts-wrap{ display:flex !important; flex-wrap:wrap !important; align-items:stretch !important; } /* Make each card a column */ #themify_builder_content-6579 .module.module-post.tb_fpew651 .builder-posts-wrap > article.post{ display:flex !important; flex-direction:column !important; height:100% !important; } /* KEY: make the content area a consistent "card body" height */ #themify_builder_content-6579 .module.module-post.tb_fpew651 .post-content{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; min-height: 240px; /* tweak this number */ } /* Ensure the inner content can push the button down */ #themify_builder_content-6579 .module.module-post.tb_fpew651 .post-content-inner, #themify_builder_content-6579 .module.module-post.tb_fpew651 .entry-content{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; } /* Pin butt* /* ========================================================= Clamp excerpt to consistent height (line-based), so buttons align Scope: tb_fpew651 (Homepage News & Insights) ========================================================= */ #themify_builder_content-6579 .module.module-post.tb_fpew651 .entry-content{ /* Keep normal flow for text; we’ll clamp only the text node area */ } /* Themify often outputs the excerpt as plain text inside .entry-content. Clamp the .entry-content itself, but allow the button to remain visible. */ #themify_builder_content-6579 .module.module-post.tb_fpew651 .entry-content{ display: block; } /* Clamp the excerpt text by limiting the entry-content height, then keep the Read More visible below it. */ #themify_builder_content-6579 .module.module-post.tb_fpew651 .entry-content{ overflow: hidden; } /* This targets the text portion by clamping and then re-enabling the button. We do it by clamping a wrapper created via a pseudo approach: easiest is to clamp the entry-content but pull the button out of the clamp. */ #themify_builder_content-6579 .module.module-post.tb_fpew651 .more-link-wrap{ position: relative; z-index: 2; } /* Clamp excerpt to a fixed number of lines (responsive) */ #themify_builder_content-6579 .module.module-post.tb_fpew651 .entry-content{ display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; /* desktop lines */ overflow: hidden !important; } /* BUT: don’t clamp the Read More */ #themify_builder_content-6579 .module.module-post.tb_fpew651 .more-link-wrap{ display: block !important; -webkit-line-clamp: unset !important; } /* ========================================================= FORCE POST TITLES TO RESERVE 2 LINES OF SPACE (Even if the title is only 1 line) Scope: tb_fpew651 – Homepage News & Insights ========================================================= */ #themify_builder_content-6579 .module.module-post.tb_fpew651 .post-title{ /* Allow wrapping */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; /* THIS is the key part */ line-height: 1.3; min-height: calc(1.3em * 2); /* always reserve 2 lines */ margin-bottom: 8px; } @media (max-width: 768px){ #themify_builder_content-6579 .module.module-post.tb_fpew651 .post-title{ -webkit-line-clamp: 3; min-height: calc(1.3em * 3); } } /* =========================================    Mobile-only adjustments for menu / services submenu — continued    ========================================= */ @media (max-width: 1024px) {   /* Existing rules you already havehttps://dtds.com/wp-content/themes. */   body.mobile-menu-active #main-nav,   body.mobile-menu-active .main-nav-dropdown,   #mobile-menu,   .mobile-menu-panel,   .overlay-menu .nav-container {     background-color: #2c4e3b !important; /* dark green */   }   #main-nav li.nav-services > .sub-menu {     /* your existing overrides */   }   /* NEW: Make close button ("X") white — targets common Themify close icons */   body.mobile-menu-active .close,   body.mobile-menu-active .menu-close,   .mobile-menu-active .tf_close,   .overlay-close,   .mobile-menu-panel .close-icon,   .mobile-menu-active [class*="close"] {     color: #ffffff !important;   }   /* If the "X" is made with ::before / ::after pseudo-elements (common in Themify) */   body.mobile-menu-active .close::before,   body.mobile-menu-active .close::after,   .mobile-menu-active .close span,   .mobile-menu-active .menu-toggle-inner span {     background-color: #ffffff !important; /* if it's lines/bars */   }   /* NEW: Make ALL mobile menu links & submenu items white for readability on dark bg      (includes top-level items + Services sub-items) */   body.mobile-menu-active #main-nav a,   body.mobile-menu-active #main-nav li a,   #mobile-menu a,   .mobile-menu-panel a,   .mobile-menu-active .sub-menu a {     color: #ffffff !important;   }   /* Optional: hover/active state for better UX (light yellow like desktop hover?) */   body.mobile-menu-active #main-nav a:hover,   body.mobile-menu-active #main-nav li.current-menu-item > a,   #mobile-menu a:hover,   .mobile-menu-active .sub-menu a:hover {     color: #ebd131 !important; /* matches your desktop hover color */   }   /* Ensure submenu items inherit white color and look clean */   #main-nav li.nav-services > .sub-menu > li > a {     /* color: #ffffff !important; /* enforce white */     border-bottom-color: rgba(255,255,255,0.12) !important; /* slightly brighter divider */   } /* Optional: make hover/active state more visible on mobile (light yellow like desktop) */ #main-nav li.nav-services > .sub-menu a:hover, #main-nav li.nav-services > .sub-menu .current-menu-item > a { color: #ebd131 !important; /* your gold hover color */ background: rgba(255,255,255,0.12) !important; /* subtle bg highlight if desired */ } /* Broader fallback — targets almost all submenu links in mobile menu */ body.mobile-menu-active .sub-menu a, .mobile-menu-panel .sub-menu a, #main-nav .sub-menu a { color: #ffffff !important; } /* Or very aggressive (use only if needed — might affect other submenus) */ body[class*="mobile-menu-active"] #main-nav a { color: #ffffff !important; /* default white */ } /* 1. Mobile menu close "X" → white Common Themify selectors — covers most variants (tf_close, close, menu-close, etc.) Adjust if inspector shows a different class (e.g. .nav-close, .tf_mob_close) */ body.mobile-menu-active .tf_close, body.mobile-menu-active .close, body.mobile-menu-active .menu-close, .mobile-menu-active .close-icon, .mobile-menu-panel .close, .overlay-close, body[class*="mobile-menu-active"] [class*="close"] { color: #ffffff !important; } /* If close is built with spans/bars (hamburger → X transform) */ body.mobile-menu-active .tf_close span, body.mobile-menu-active .close span, body.mobile-menu-active .menu-toggle-inner span, .mobile-menu-active .tf_close::before, .mobile-menu-active .tf_close::after { background-color: #ffffff !important; } /* 2. All mobile menu links white by default (top-level + most submenus) */ body.mobile-menu-active #main-nav a, body.mobile-menu-active #main-nav > li > a, body.mobile-menu-active .sub-menu a, #mobile-menu a, .mobile-menu-panel a, .mobile-menu-active .nav-container a { color: #ffffff !important; } /* Hover / current-item states — match your desktop gold hover */ body.mobile-menu-active #main-nav a:hover, body.mobile-menu-active #main-nav li.current-menu-item > a, body.mobile-menu-active .sub-menu a:hover, .mobile-menu-active a:hover { color: #ebd131 !important; } /* 3. EXCEPTION: Services submenu items → keep dark text (or your original color) Assuming Services submenu uses .nav-services in mobile too This overrides the white rule only for Services children */ #main-nav li.nav-services > .sub-menu a, #main-nav li.nav-services .sub-menu > li > a { color: #000000 !important; /* or whatever your preferred dark color was */ } /* Optional: Services submenu hover in mobile (subtle feedback) */ #main-nav li.nav-services > .sub-menu a:hover, #main-nav li.nav-services .sub-menu .current-menu-item > a { color: #2c4e3b !important; /* dark green or your choice */ background: rgba(255,255,255,0.15) !important; } /* If you want Services submenu divider more visible on dark bg */ #main-nav li.nav-services > .sub-menu > li > a { border-bottom-color: rgba(255,255,255,0.10) !important; } } /* ========================================================= LATEST NEWS & INSIGHTS – SAFE CARD ALIGNMENT - Desktop/tablet landscape: equal heights + button aligned - Tablet portrait/phone: revert to native Themify layout (prevents overlap) - Excerpt clamp (3 lines): applies everywhere ========================================================= */ /* Scope EVERYTHING to the News row only (prevents breaking other modules) */ .module_row.row-news .module-post .entry-content{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } /* ----- Small screens (portrait tablet + phones): use Themify defaults ----- */ @media (max-width: 900px){ .module_row.row-news .module-post, .module_row.row-news .module-post .post-content{ display: block !important; height: auto !important; } .module_row.row-news .module-post .more-link-wrap{ margin-top: 0 !important; } .module_row.row-news .module-post .post-title{ min-height: 0 !important; } } /* ----- Larger screens: equal-height cards + button pinned to bottom ----- */ @media (min-width: 901px){ .module_row.row-news .module-post{ display: flex; flex-direction: column; height: 100%; } .module_row.row-news .module-post .post-content{ display: flex; flex-direction: column; flex: 1; } /* Reserve space for up to 2 lines of title so buttons align better */ .module_row.row-news .module-post .post-title{ line-height: 1.3; min-height: calc(2 * 1.3em); } /* Push button to bottom */ .module_row.row-news .module-post .more-link-wrap{ margin-top: auto; } } /* ========================================================= DRILL TECH — GLOBAL TYPOGRAPHY OVERRIDES (SAFE / SCOPED) Goal: - H1 uses Vollkorn everywhere - H2–H6 + body text uses Arial everywhere - Does NOT change sizes/colors/line-heights - High-specificity to beat old/builder/responsive rules ========================================================= */ /* Base body text (scoped to front-end content wrappers) */ body, #pagewrap, .themify_builder_content, .post-content, .page-content { font-family: Arial, Helvetica, sans-serif !important; } /* Force H1 to Vollkorn everywhere in content */ #pagewrap h1, .themify_builder_content h1, .post-content h1, .page-content h1, .single-post .post-title, .page .page-title { font-family: "Vollkorn", Georgia, "Times New Roman", serif !important; } /* Force H2–H6 + paragraphs + common text elements to Arial */ #pagewrap h2, #pagewrap h3, #pagewrap h4, #pagewrap h5, #pagewrap h6, #pagewrap p, .themify_builder_content h2, .themify_builder_content h3, .themify_builder_content h4, .themify_builder_content h5, .themify_builder_content h6, .themify_builder_content p, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6, .post-content p, .page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6, .page-content p { font-family: Arial, Helvetica, sans-serif !important; } /* Lists and blockquotes typically inherit, but this makes it consistent */ #pagewrap li, #pagewrap blockquote, .themify_builder_content li, .themify_builder_content blockquote { font-family: Arial, Helvetica, sans-serif !important; } /* ========================================================= DRILL TECH — Home Services Tiles: remove bold caption text on tablet/mobile Targets: homepage builder content block (6579) + Image Pro captions only ========================================================= */ @media (max-width: 1024px) { body.home .themify_builder_content-6579 .module-pro-image .image-pro-caption, body.home .themify_builder_content-6579 .module-pro-image .image-pro-caption * { font-weight: 400 !important; } } /* Optional: keep the same behavior on phones too (safe redundancy) */ @media (max-width: 768px) { body.home .themify_builder_content-6579 .module-pro-image .image-pro-caption, body.home .themify_builder_content-6579 .module-pro-image .image-pro-caption * { font-weight: 400 !important; } } /* ========================================================= DRILL TECH — Home Hero H1 mobile wrap fix Fixes text running off screen on small phones ONLY ========================================================= */ @media (max-width: 480px) { body.home .themify_builder_content h1, body.home .themify_builder_content .page-title, body.home .themify_builder_content .hero h1 { white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; max-width: 100%; } } /* ========================================================= DRILL TECH — Home Hero H1 mobile word-wrap correction Allows wrapping ONLY at word boundaries (no mid-word breaks) ========================================================= */ @media (max-width: 480px) { body.home .themify_builder_content h1, body.home .themify_builder_content .page-title, body.home .themify_builder_content .hero h1 { white-space: normal !important; word-break: keep-all !important; /* <-- key fix */ overflow-wrap: normal !important; /* <-- key fix */ hyphens: none !important; max-width: 100%; } } @media (max-width: 480px) { body.home .themify_builder_content h1 span { word-break: keep-all !important; overflow-wrap: normal !important; } } /* SEM Videos – subtle left offset for the video title */ .sem-video .video-content .video-title, .sem-video .video-content .video-title a{ text-align: left; display: block; width: 100%; padding-left: 1%; } /* Reduce vertical space around embedded service post */ #svc-target{ margin-block: 1rem !important; /* was effectively ~2rem */ padding-block: 0 !important; } /* ========================================= DrillTech — Service injection placeholder row control Collapses the Themify row that contains #svc-target when empty ========================================= */ /* Always keep the target itself tight */ #svc-target{ margin: 0 !important; padding: 0 !important; } /* When empty, hide the target (helps collapse its container) */ #svc-target:empty{ display: none !important; } /* The JS adds these classes on the parent row wrapper */ .dt-svc-target-empty{ margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: 0 !important; overflow: hidden !important; } /* When it has content, allow normal flow but keep spacing reasonable */ .dt-svc-target-hascontent{ height: auto !important; min-height: 0 !important; overflow: visible !important; padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* ========================================= DRILL TECH — Service Insert Spacing Control Only affects the row that CONTAINS #svc-target ========================================= */ /* The spacer div you placed in HTML */ #test{ height: clamp(18px, 2vh, 36px); } /* When empty: collapse the row so it doesn't create a giant white block */ .dt-svc-target-empty{ padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; min-height: 0 !important; } /* When we have content: controlled breathing room above/below */ .dt-svc-target-hascontent{ padding-top: clamp(16px, 2vh, 32px) !important; padding-bottom: clamp(18px, 3vh, 44px) !important; } /* Ensure the injected frame never shows its own scrollbar */ #svc-target iframe#svc-frame{ overflow: hidden !important; display: block; } /* ========================================================= DTDS — SERVICE TILES → INSERTED SERVICE CONTENT SPACING Duplication-safe: does NOT depend on the next row being immediately adjacent to #svc-target ========================================================= */ body:has(#svc-target){ /* Space between tiles and injected content */ #svc-target{ margin-top: clamp(18px, 2.2vw, 44px) !important; /* Space after injected content (before whatever comes next) */ margin-bottom: clamp(18px, 2.4vw, 52px) !important; /* Optional extra breathing room within the target area */ padding-bottom: clamp(10px, 1.4vw, 24px) !important; } /* Keep tiles rows stable against Themify overlay quirks */ .svc-loader.srv-tiles{ position: relative; } .svc-loader.srv-tiles .builder_row_cover{ pointer-events: none; } /* Ensure injected frame never shows its own scrollbar */ #svc-target iframe#svc-frame{ overflow: hidden !important; display: block; } } @media (max-width: 480px){ body:has(#svc-target){ #svc-target{ margin-top: 18px !important; margin-bottom: 22px !important; padding-bottom: 14px !important; } } } /* ========================================= NORMALIZE INSERTED POST SPACING ========================================= */ /* Base (desktop / large screens) */ #svc-target { margin-top: 4rem !important; margin-bottom: 4rem !important; } /* Small laptops / tablets */ @media (max-width: 1200px) { #svc-target { margin-top: 3rem !important; margin-bottom: 3rem !important; } } /* Tablets / large phones */ @media (max-width: 900px) { #svc-target { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; } } /* Mobile phones */ @media (max-width: 600px) { #svc-target { margin-top: 2rem !important; margin-bottom: 2rem !important; } } /* ========================================================= Drill Tech — Service Injection Styling Stable spacing across all breakpoints ========================================================= */ .svc-target { width: 100%; margin-top: clamp(2rem, 4vw, 4rem); margin-bottom: clamp(2rem, 4vw, 4rem); } .svc-target iframe { width: 100%; border: 0; display: block; } /* Optional loading state */ .svc-target.is-loading { min-height: 300px; } /* Safety: no extra spacing from tile rows */ .svc-loader.srv-tiles { margin-bottom: 0 !important; } /* ========================================================= DrillTech — Injected Post Frame Safety Prevents inner scrollbars & runaway spacing ========================================================= */ #svc-target { width: 100%; overflow: visible; } #dt-service-frame { overflow: hidden !important; display: block; width: 100%; border: 0; } /* ========================================= Drill Tech — Injected service post area (CANONICAL OVERRIDE) Purpose: - Remove runaway whitespace (especially on smaller screens) - Prevent inner scrollbars inside iframe - Override older conflicting #svc-target rules in this stylesheet ========================================= */ #svc-target{ margin: clamp(14px, 2.5vw, 28px) 0 !important; /* responsive but bounded */ padding: 0 !important; width: 100%; overflow: visible; } #svc-target:empty{ display:none !important; } #svc-target iframe{ width: 100% !important; border: 0 !important; display: block !important; /* Critical: kill any inherited min-height:800px */ min-height: 0 !important; /* Critical: ensure no internal scroll */ overflow: hidden !important; } /* ========================================================= CANONICAL FIX — svc-intro row-hero H2 MUST MATCH SERVICES Scope: ONLY hero rows with svc-intro + row-hero Applies to: Pages (services) + Single posts (subsidiaries) Purpose: - Override earlier conflicting rules in sections 8 + 10 - Make font-size + line-height identical everywhere ========================================================= */ /* Force identical hero subtitle styling for svc-intro row-hero (pages + posts) */ .page .svc-intro.row-hero h2, .page .svc-intro.row-hero .tb_text_wrap h2, .page .svc-intro.row-hero .module-title h2, .single .svc-intro.row-hero h2, .single .svc-intro.row-hero .tb_text_wrap h2, .single .svc-intro.row-hero .module-title h2{ /* Match the Services page computed sizing */ font-size: clamp(16px, 0.75vw + 9px, 22px) !important; /* Match the Services hero rhythm */ line-height: 1.22 !important; margin: .5em 0 .6em !important; letter-spacing: .01em !important; /* Prevent “looks bolder/taller” differences */ font-weight: 400 !important; font-style: normal !important; text-transform: none !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; font-synthesis: none !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* If Themify wraps parts of the H2 in spans/strong, don't let them change line-height */ .page .svc-intro.row-hero h2 *, .page .svc-intro.row-hero .tb_text_wrap h2 *, .page .svc-intro.row-hero .module-title h2 *, .single .svc-intro.row-hero h2 *, .single .svc-intro.row-hero .tb_text_wrap h2 *, .single .svc-intro.row-hero .module-title h2 *{ line-height: inherit !important; font-weight: inherit !important; } /* ========================================================= PROJECTS PAGE — Themify Post Module (dt-projects-postgrid) Goal: - Titles can wrap to 2+ lines without being clipped - Excerpt is normal paragraph styling (not bold / not H5-looking) and >= 16px Scope: ONLY the Projects grid module (dt-projects-postgrid) ========================================================= */ /* 1) Remove Themify clamp / fixed box behavior so titles can grow naturally */ .dt-projects-postgrid h2.post-title.entry-title, .dt-projects-postgrid .post-title.entry-title a{ display:block !important; -webkit-line-clamp: unset !important; -webkit-box-orient: unset !important; line-clamp: unset !important; height:auto !important; max-height:none !important; min-height:0 !important; overflow:visible !important; text-overflow:unset !important; white-space:normal !important; word-break:normal !important; overflow-wrap:anywhere !important; /* safer wrap without mid-word clipping */ } /* 2) Ensure the content wrappers don’t clip the title */ .dt-projects-postgrid .post-content, .dt-projects-postgrid .post-content-inner{ overflow:visible !important; } /* 3) Excerpt / description typography */ .dt-projects-postgrid .entry-content{ font-size:16px !important; font-weight:400 !important; line-height:1.4 !important; } /* ========================================================= PROJECTS PAGE — Post tiles overlay layout (dt-projects-postgrid) Goal (match HOME Key Projects behavior): 1) NO extra black title box 2) NO hover image zoom effect 3) Title sits at the TOP of the existing unhovered overlay strip and can wrap to 2+ lines without clipping Scope: ONLY the Projects grid module (dt-projects-postgrid) ========================================================= */ /* Ensure each tile is the positioning context */ .dt-projects-postgrid .post, .dt-projects-postgrid .post-inner{ position: relative !important; } /* --- 2) Remove hover zoom / scale effects (Projects grid only) --- */ .dt-projects-postgrid .post-image img{ transform: none !important; transition: none !important; } .dt-projects-postgrid .post:hover .post-image img, .dt-projects-postgrid .post:focus-within .post-image img{ transform: none !important; } /* --- 3) Overlay strip layout: let it grow so wrapped titles don't clip --- */ /* Themify commonly positions .post-content over the image for overlay layouts. We reinforce that behavior here, then pin the TITLE to the top of that strip. */ .dt-projects-postgrid .post-content{ position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; /* Let the strip expand for wrapped titles */ height: auto !important; min-height: 64px; /* enough for 2 lines comfortably */ box-sizing: border-box; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; /* TOP */ align-items: flex-start !important; padding: 12px 14px 14px !important; } /* If Themify uses an inner wrapper, keep it from re-centering content */ .dt-projects-postgrid .post-content-inner{ display: flex !important; flex-direction: column !important; justify-content: flex-start !important; /* TOP */ align-items: flex-start !important; width: 100%; box-sizing: border-box; } /* Title: remove any added background and keep it at top */ .dt-projects-postgrid .post-title{ margin: 0 !important; padding: 0 !important; order: 1; width: 100%; } .dt-projects-postgrid .post-title a{ background: none !important; /* removes the unwanted black box */ box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; display: block !important; white-space: normal !important; overflow: visible !important; overflow-wrap: anywhere !important; word-break: normal !important; } /* Responsive tightening */ @media (max-width: 768px){ .dt-projects-postgrid .post-content{ min-height: 58px; padding: 10px 12px 12px !important; } } /* ========================================================= DRILL TECH — HISTORY TIMELINE (ROBUST / DUPLICATION-SAFE) Scope: ONLY modules with class: dt-history-timeline Goal: - Restore “perfect state” behavior - Keep it stable even if rows/modules are duplicated - Improve: center the entire (image + date + title) group while preserving left alignment of text within ========================================================= */ /* 1) Ensure module has predictable width + no overflow clipping */ .dt-history-timeline { width: 100%; max-width: 100%; overflow: visible !important; } /* 2) Center the whole slide content group (media + text), keep text left */ .dt-history-timeline .tl-slide-content-container{ display: flex !important; justify-content: center !important; } .dt-history-timeline .tl-slide-content{ margin: 0 auto !important; max-width: 1200px; } /* Keep the internal text alignment left (date/title) */ .dt-history-timeline .tl-text, .dt-history-timeline .tl-text-content, .dt-history-timeline .tl-headline, .dt-history-timeline .tl-headline-date{ text-align: left !important; } /* 3) MEDIA (main image) — preserve size rules you already tuned */ .dt-history-timeline .tl-media .tl-media-content-container{ display: flex !important; justify-content: flex-start !important; } .dt-history-timeline img.tl-media-item.tl-media-image{ max-height: 371px; width: auto; } /* 4) TIMEMARKER THUMB (the 50x50 marker image) — requires an IMG in the container */ .dt-history-timeline .tl-timemarker-media-container{ width: 50px !important; height: 50px !important; overflow: hidden !important; } .dt-history-timeline .tl-timemarker-media-container img{ display: block !important; width: 50px !important; height: 50px !important; object-fit: cover !important; } /* Keep default Timeline icon elements hidden (prevents collisions with the IMG thumb) */ .tl-timemarker .tl-timemarker-icon, .tl-timemarker .tl-icon{ display: none !important; } /* DT Timeline marker thumb — force visible (does NOT affect main slide media) */ .dt-history-timeline img.dt-tl-marker-thumb{ display: block !important; width: 50px !important; height: 50px !important; object-fit: cover !important; } /* ========================================================= DT History Timeline — TRUE CENTERING on wide screens Goal: center the whole (image + date + title) block while keeping text left-aligned within the block. Scope: ONLY .dt-history-timeline ========================================================= */ /* Center the content container itself */ .dt-history-timeline .tl-slide-scrollable-container, .dt-history-timeline .tl-slide-content-container{ display: flex !important; justify-content: center !important; width: 100% !important; } /* Center the fixed-width .tl-slide-content block that TimelineJS sizes inline */ .dt-history-timeline .tl-slide-content{ margin-left: auto !important; margin-right: auto !important; } /* Keep internal text left-aligned (do NOT center the text) */ .dt-history-timeline .tl-text, .dt-history-timeline .tl-text-content, .dt-history-timeline .tl-headline, .dt-history-timeline .tl-headline-date{ text-align: left !important; } /* ========================================================= DT History Timeline — final centering nudge (desktop only) Goal: center (image + YYYY + title) in the visible slide area Safe: does NOT change widths/padding rules, just shifts block ========================================================= */ @media (min-width: 900px){ .dt-history-timeline .tl-slide-content{ transform: translateX(250px) !important; } } /* ===================================================== DTDS – Team Member Cards Portrait Image Container ===================================================== */ .dtds-team-card { border: 1px solid #e5e7eb; border-radius: 10px; background-color: #ffffff; box-shadow: 0 1px 0 rgba(0,0,0,0.03); transition: transform 140ms ease, box-shadow 140ms ease; overflow: hidden; } /* Hover effect */ .dtds-team-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,0.08); } /* Portrait image frame */ .dtds-team-card .module-image { aspect-ratio: 3 / 4; overflow: hidden; } /* Image fills portrait frame */ .dtds-team-card img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Caption container */ .dtds-team-card .image-content { padding: 14px; text-align: left; font-family: Arial, Helvetica, sans-serif; } /* Name */ .dtds-team-card .image-title { font-weight: 700; margin-bottom: 4px; text-align: left; font-family: Arial, Helvetica, sans-serif; } /* Job title */ .dtds-team-card .image-caption { font-weight: 400; color: #6b7280; text-align: left; font-family: Arial, Helvetica, sans-serif; } /*/wp-content/uploads/themify-customizer-8.2.7-8.1.1.css*/ /* Themify Customize Styling */ body { font-family: "Arial", "Helvetica", sans-serif; text-align:left; color: #000000; } a { font-style:normal; font-weight:normal; text-decoration:none; color: #2c4e3b; } a:hover { font-style:normal; font-weight:normal; text-decoration:none; color: #ebd131; } :root { --theme_accent: #2c4e3b; --theme_accent_semi: #2c4e3b; --theme_accent_hover: #ebd131; } a, .post-nav .arrow { color: #2c4e3b; } body,h1,h2,h3,h4,h5,h6 { color: #000000; } .transparent-header #headerwrap a,.transparent-header #headerwrap.fixed-header a,#headerwrap a,#headerwrap.fixed-header a,#footerwrap a { color: #2c4e3b; } .transparent-header #headerwrap,.transparent-header #headerwrap.fixed-header,#headerwrap,#headerwrap.fixed-header,#footerwrap { background: none; background-color: #ffffff; color: #000000; } #pagewrap { background-color: transparent;width: auto;margin: auto; } .pagewidth,.module_row>.row_inner { width: 100%; } h1 { font-family: "Vollkorn"; font-weight:400; text-align:left; color: #ffffff; } h2 { font-family: "Arial", "Helvetica", sans-serif; text-align:left; color: #000000; } h3 { font-family: "Arial", "Helvetica", sans-serif; text-align:left; color: #000000; } h4 { font-family: "Arial", "Helvetica", sans-serif; text-align:left; color: #000000; } h5 { font-family: "Arial", "Helvetica", sans-serif; text-align:left; color: #000000; } h6 { font-family: "Arial", "Helvetica", sans-serif; text-align:left; color: #000000; } input:read-write,input:read-only,select,textarea { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } input[type=reset], input[type=submit], button, button[type=submit] { background: none; background-color: #2c4e3b; color: #ffffff; } input[type=reset]:hover, input[type=submit]:hover, button:hover, button[type=submit]:hover { background: none; background-color: #ebd131; color: #000000; } #headerwrap { background-color: transparent;margin: auto; padding: 0px; } #headerwrap #header { background-color: transparent; } #header { height: auto;margin: auto; font-family: "Arial", "Helvetica", sans-serif; font-weight:400; color: #000000; } #headerwrap a { color: #2c4e3b; } #headerwrap a:hover { color: #ebd131; } #pagewrap #headerwrap.fixed-header, .transparent-header #pagewrap #headerwrap.fixed-header { background: none; background-color: rgba(44,79,60,0.40); } #headerwrap.fixed-header #header, #headerwrap.fixed-header #site-description { font-family: "Arial", "Helvetica", sans-serif; text-align:center; } #headerwrap.fixed-header #header { color: #ffffff; } #headerwrap.fixed-header a { color: #2c4e3b; } #headerwrap.fixed-header a:hover { color: #ebd131; } body #site-logo a img { width: 200px; } #site-logo { top: 15px;margin: auto; } #site-description { display: none;margin: auto; } #main-nav { background-color: transparent;top: auto;right: auto;bottom: auto;left: auto; width: 100%;height: auto;margin: auto; } #main-nav a { margin: auto; color: #ffffff; font-family: "Arial", "Helvetica", sans-serif; font-weight:600; font-size:18px; text-transform:uppercase; text-align:center; } #main-nav a:hover { background: none; background-color: rgba(255,255,255,0.00); color: #ebd131; } #main-nav .current_page_item > a, #main-nav .current-menu-item > a { color: #ebd131; } #main-nav .current_page_item > a:hover, #main-nav .current-menu-item > a:hover { color: #2c4e3b; } #main-nav li > .sub-menu { background: none; background-color: #ffffff; margin-left: 22.7%; padding-right: 0px; } #main-nav ul a { background: none; background-color: #ffffff; color: #2c4e3b; font-family: "Arial", "Helvetica", sans-serif; font-weight:600; text-transform:uppercase; } #main-nav ul a:hover { background: none; background-color: #ffffff; color: #ebd131; } #main-nav .sub-menu > .current_page_item > a, #main-nav .sub-menu > .current-menu-item > a { color: #50763e; } .post-title { font-family: "Vollkorn"; font-weight:400; } .single-post .has-post-title .post-title,.single-post .featured-area .post-title { font-family: "Vollkorn"; font-weight:400; } .loops-wrapper.grid6 .post-title, .loops-wrapper.grid6 .post-title a { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .loops-wrapper.grid5 .post-title, .loops-wrapper.grid5 .post-title a { font-family: "Arial", "Helvetica", sans-serif; } .loops-wrapper.grid4 .post-title, .loops-wrapper.grid4 .post-title a { font-family: "Arial", "Helvetica", sans-serif; } .loops-wrapper.grid3 .post-title, .loops-wrapper.grid3 .post-title a { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .loops-wrapper.grid2 .post-title, .loops-wrapper.grid2 .post-title a { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .loops-wrapper.grid2-thumb .post-title, .loops-wrapper.grid2-thumb .post-title a { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .loops-wrapper.list-thumb-image .post-title, .loops-wrapper.list-thumb-image .post-title a { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .post-meta, .loops-wrapper.list-post .post-meta, .single-post .post-meta, .loops-wrapper.grid6 .post-meta, .loops-wrapper.grid5 .post-meta, .loops-wrapper.grid4 .post-meta, .loops-wrapper.grid3 .post-meta, .loops-wrapper.grid2 .post-meta { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .post-meta a:hover { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .post-date, .post .post-date .day,.post-date .month, .post .post-date .year, .loops-wrapper.list-post .post .post-date, .single #pagewrap .post-content .post-date, .single-post #pagewrap .post-date-inline .post-date .year { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .more-link { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .post-nav a { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .post-nav a:hover { font-family: "Arial", "Helvetica", sans-serif; } .page-title { margin: auto; color: #000000; font-family: "Vollkorn"; font-weight:400; } .module-title { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } #sidebar, #sidebar-alt { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } #sidebar a, #sidebar-alt a { font-family: "Arial", "Helvetica", sans-serif; } #sidebar a:hover, #sidebar-alt a:hover { font-family: "Arial", "Helvetica", sans-serif; } #sidebar .widgettitle, #sidebar-alt .widgettitle { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } #footerwrap { margin: auto; } #footer-logo a { display: none; } #footer-logo a img { width: 250px; } #footer { margin: auto; color: #ffffff; } #footer, #footer-logo, .footer-nav a, .footer-text { font-family: "Arial", "Helvetica", sans-serif; font-style:normal; font-weight:normal; text-decoration:none; font-weight:400; text-align:left; } #footer a { font-family: "Arial", "Helvetica", sans-serif; font-style:normal; font-weight:normal; text-decoration:none; font-weight:400; text-align:left; color: #000000; } #footer a:hover { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; color: #2c4e3b; } #footer-nav a { color: #000000; font-family: "Arial", "Helvetica", sans-serif; font-style:normal; font-weight:normal; text-decoration:none; font-weight:400; text-align:left; } #footer-nav a:hover, #footer-nav li:hover > a { color: #2c4e3b; } #footer-nav .current_page_item a, #footer-nav .current-menu-item a { color: #2c4e3b; } #footer-nav .current_page_item a:hover, #footer-nav .current-menu-item a:hover { color: #2c4e3b; } .footer-widgets { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } #footer .footer-widgets .widgettitle { color: #ffffff; font-family: "Arial", "Helvetica", sans-serif; font-style:normal; font-weight:normal; text-decoration:none; font-weight:400; text-align:left; } #pagewrap .back-top.back-top-float, .full-section-scrolling #footerwrap .back-top .arrow-up a, .footer-horizontal-left #footerwrap .back-top .arrow-up a, .footer-horizontal-right #footerwrap .back-top .arrow-up a, .footer-left-col #footerwrap .back-top .arrow-up a, .footer-right-col #footerwrap .back-top .arrow-up a, #footer .back-top .arrow-up a { background: none; background-color: #2c4e3b; } #footerwrap .back-top a:before, #pagewrap .back-top.back-top-float { color: #ffffff; } @media(max-width: 1024px) { /* Themify Customize Styling */ body { font-family: "Titillium Web"; font-weight:600; color: #000000; } a { color: #2c4e3b; } a:hover { color: #ebd131; } :root { --theme_accent: #2c4e3b; --theme_accent_semi: #2c4e3b; --theme_accent_hover: #ebd131; } a, .post-nav .arrow { color: #2c4e3b; } body,h1,h2,h3,h4,h5,h6 { color: #000000; } .transparent-header #headerwrap a,.transparent-header #headerwrap.fixed-header a,#headerwrap a,#headerwrap.fixed-header a,#footerwrap a { color: #2c4e3b; } .transparent-header #headerwrap,.transparent-header #headerwrap.fixed-header,#headerwrap,#headerwrap.fixed-header,#footerwrap { background: none; background-color: #ffffff; color: #000000; } #pagewrap { width: 100%; } .pagewidth,.module_row>.row_inner { width: 100%; } h1 { font-family: "Titillium Web"; font-weight:600; color: #ffffff; } h2 { font-family: "Titillium Web"; font-weight:600; color: #000000; } h3 { font-family: "Titillium Web"; font-weight:600; color: #000000; } h4 { font-family: "Titillium Web"; font-weight:600; color: #000000; } h5 { font-family: "Titillium Web"; font-weight:600; color: #000000; } h6 { font-family: "Titillium Web"; font-weight:600; color: #000000; } input:read-write,input:read-only,select,textarea { font-family: "Titillium Web"; font-weight:600; } input[type=reset], input[type=submit], button, button[type=submit] { background: none; background-color: #2c4e3b; color: #ffffff; } input[type=reset]:hover, input[type=submit]:hover, button:hover, button[type=submit]:hover { background: none; background-color: #ebd131; color: #000000; } #headerwrap { margin: auto; } #header { font-family: "Titillium Web"; font-weight:600; color: #000000; } #headerwrap a { color: #2c4e3b; } #headerwrap a:hover { color: #ebd131; } #pagewrap #headerwrap.fixed-header, .transparent-header #pagewrap #headerwrap.fixed-header { background: none; background-color: rgba(44,79,60,0.40); } #headerwrap.fixed-header #header, #headerwrap.fixed-header #site-description { font-family: "Titillium Web"; font-weight:600; } #headerwrap.fixed-header #header { color: #ffffff; } #headerwrap.fixed-header a { color: #2c4e3b; } #headerwrap.fixed-header a:hover { color: #ebd131; } #site-logo { top: -100px; } #main-nav { width: 100%;margin: auto; } #main-nav a { color: #ffffff; font-family: "Titillium Web"; font-weight:600; } #main-nav a:hover { background: none; background-color: rgba(255,255,255,0.00); color: #ebd131; } #main-nav .current_page_item > a, #main-nav .current-menu-item > a { color: #ebd131; } #main-nav .current_page_item > a:hover, #main-nav .current-menu-item > a:hover { color: #2c4e3b; } #main-nav li > .sub-menu { background: none; background-color: #ffffff; } #main-nav ul a { background: none; background-color: #ffffff; color: #2c4e3b; font-family: "Titillium Web"; font-weight:600; } #main-nav ul a:hover { background: none; background-color: #ffffff; color: #ebd131; } #main-nav .sub-menu > .current_page_item > a, #main-nav .sub-menu > .current-menu-item > a { color: #50763e; } .post-title { font-family: "Vollkorn"; font-weight:400; } .single-post .has-post-title .post-title,.single-post .featured-area .post-title { font-family: "Vollkorn"; font-weight:400; } .loops-wrapper.grid6 .post-title, .loops-wrapper.grid6 .post-title a { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .loops-wrapper.grid5 .post-title, .loops-wrapper.grid5 .post-title a { font-family: "Arial", "Helvetica", sans-serif; } .loops-wrapper.grid4 .post-title, .loops-wrapper.grid4 .post-title a { font-family: "Arial", "Helvetica", sans-serif; } .loops-wrapper.grid3 .post-title, .loops-wrapper.grid3 .post-title a { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .loops-wrapper.grid2 .post-title, .loops-wrapper.grid2 .post-title a { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .loops-wrapper.grid2-thumb .post-title, .loops-wrapper.grid2-thumb .post-title a { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .loops-wrapper.list-thumb-image .post-title, .loops-wrapper.list-thumb-image .post-title a { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .post-meta, .loops-wrapper.list-post .post-meta, .single-post .post-meta, .loops-wrapper.grid6 .post-meta, .loops-wrapper.grid5 .post-meta, .loops-wrapper.grid4 .post-meta, .loops-wrapper.grid3 .post-meta, .loops-wrapper.grid2 .post-meta { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .post-meta a:hover { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .post-date, .post .post-date .day,.post-date .month, .post .post-date .year, .loops-wrapper.list-post .post .post-date, .single #pagewrap .post-content .post-date, .single-post #pagewrap .post-date-inline .post-date .year { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .more-link { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .post-nav a { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .post-nav a:hover { font-family: "Arial", "Helvetica", sans-serif; } .page-title { color: #000000; font-family: "Titillium Web"; font-weight:600; } .module-title { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } #sidebar, #sidebar-alt { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } #sidebar a, #sidebar-alt a { font-family: "Arial", "Helvetica", sans-serif; } #sidebar a:hover, #sidebar-alt a:hover { font-family: "Arial", "Helvetica", sans-serif; } #sidebar .widgettitle, #sidebar-alt .widgettitle { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } #footer-logo a { display: none; } #footer { color: #ffffff; } #footer, #footer-logo, .footer-nav a, .footer-text { font-family: "Titillium Web"; font-weight:600; } #footer a { font-family: "Titillium Web"; font-weight:600; color: #000000; } #footer a:hover { font-family: "Titillium Web"; font-weight:600; color: #2c4e3b; } #footer-nav a { color: #000000; font-family: "Titillium Web"; font-weight:600; } #footer-nav a:hover, #footer-nav li:hover > a { color: #2c4e3b; } #footer-nav .current_page_item a, #footer-nav .current-menu-item a { color: #2c4e3b; } #footer-nav .current_page_item a:hover, #footer-nav .current-menu-item a:hover { color: #2c4e3b; } .footer-widgets { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } #footer .footer-widgets .widgettitle { color: #ffffff; font-family: "Titillium Web"; font-weight:600; } #pagewrap .back-top.back-top-float, .full-section-scrolling #footerwrap .back-top .arrow-up a, .footer-horizontal-left #footerwrap .back-top .arrow-up a, .footer-horizontal-right #footerwrap .back-top .arrow-up a, .footer-left-col #footerwrap .back-top .arrow-up a, .footer-right-col #footerwrap .back-top .arrow-up a, #footer .back-top .arrow-up a { background: none; background-color: #2c4e3b; } #footerwrap .back-top a:before, #pagewrap .back-top.back-top-float { color: #ffffff; } }@media(max-width: 768px) { /* Themify Customize Styling */ body { font-family: "Titillium Web"; font-weight:600; } #pagewrap { width: 100%; } .pagewidth,.module_row>.row_inner { width: 100%; } h1 { font-family: "Titillium Web"; font-weight:600; } h2 { font-family: "Titillium Web"; font-weight:600; } h3 { font-family: "Titillium Web"; font-weight:600; } h4 { font-family: "Titillium Web"; font-weight:600; } h5 { font-family: "Titillium Web"; font-weight:600; } h6 { font-family: "Titillium Web"; font-weight:600; } input:read-write,input:read-only,select,textarea { font-family: "Titillium Web"; font-weight:600; } #header { font-family: "Titillium Web"; font-weight:600; } #headerwrap.fixed-header #header, #headerwrap.fixed-header #site-description { font-family: "Titillium Web"; font-weight:600; } #site-logo { top: -50px; } #main-nav { width: 100%; } #main-nav a { font-family: "Titillium Web"; font-weight:600; } #main-nav ul a { font-family: "Titillium Web"; font-weight:600; } .post-title { font-family: "Vollkorn"; font-weight:400; } .single-post .has-post-title .post-title,.single-post .featured-area .post-title { font-family: "Vollkorn"; font-weight:400; } .loops-wrapper.grid6 .post-title, .loops-wrapper.grid6 .post-title a { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .loops-wrapper.grid5 .post-title, .loops-wrapper.grid5 .post-title a { font-family: "Arial", "Helvetica", sans-serif; } .loops-wrapper.grid4 .post-title, .loops-wrapper.grid4 .post-title a { font-family: "Arial", "Helvetica", sans-serif; } .loops-wrapper.grid3 .post-title, .loops-wrapper.grid3 .post-title a { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .loops-wrapper.grid2 .post-title, .loops-wrapper.grid2 .post-title a { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .loops-wrapper.grid2-thumb .post-title, .loops-wrapper.grid2-thumb .post-title a { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .loops-wrapper.list-thumb-image .post-title, .loops-wrapper.list-thumb-image .post-title a { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .post-meta, .loops-wrapper.list-post .post-meta, .single-post .post-meta, .loops-wrapper.grid6 .post-meta, .loops-wrapper.grid5 .post-meta, .loops-wrapper.grid4 .post-meta, .loops-wrapper.grid3 .post-meta, .loops-wrapper.grid2 .post-meta { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .post-meta a:hover { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .post-date, .post .post-date .day,.post-date .month, .post .post-date .year, .loops-wrapper.list-post .post .post-date, .single #pagewrap .post-content .post-date, .single-post #pagewrap .post-date-inline .post-date .year { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .more-link { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .post-nav a { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .post-nav a:hover { font-family: "Arial", "Helvetica", sans-serif; } .page-title { font-family: "Titillium Web"; font-weight:600; } .module-title { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } #sidebar, #sidebar-alt { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } #sidebar a, #sidebar-alt a { font-family: "Arial", "Helvetica", sans-serif; } #sidebar a:hover, #sidebar-alt a:hover { font-family: "Arial", "Helvetica", sans-serif; } #sidebar .widgettitle, #sidebar-alt .widgettitle { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } #footer-logo a { display: none; } #footer, #footer-logo, .footer-nav a, .footer-text { font-family: "Titillium Web"; font-weight:600; } #footer a { font-family: "Titillium Web"; font-weight:600; } #footer a:hover { font-family: "Titillium Web"; font-weight:600; } #footer-nav a { font-family: "Titillium Web"; font-weight:600; } .footer-widgets { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } #footer .footer-widgets .widgettitle { font-family: "Titillium Web"; font-weight:600; } }@media(max-width: 600px) { /* Themify Customize Styling */ body { font-family: "Titillium Web"; font-weight:600; color: #000000; } a { color: #2c4e3b; } a:hover { color: #ebd131; } :root { --theme_accent: #2c4e3b; --theme_accent_semi: #2c4e3b; --theme_accent_hover: #ebd131; } a, .post-nav .arrow { color: #2c4e3b; } body,h1,h2,h3,h4,h5,h6 { color: #000000; } .transparent-header #headerwrap a,.transparent-header #headerwrap.fixed-header a,#headerwrap a,#headerwrap.fixed-header a,#footerwrap a { color: #2c4e3b; } .transparent-header #headerwrap,.transparent-header #headerwrap.fixed-header,#headerwrap,#headerwrap.fixed-header,#footerwrap { background: none; background-color: #ffffff; color: #000000; } #pagewrap { width: 100%; } .pagewidth,.module_row>.row_inner { width: 100%; } h1 { font-family: "Titillium Web"; font-weight:600; color: #ffffff; } h2 { font-family: "Titillium Web"; font-weight:600; color: #000000; } h3 { font-family: "Titillium Web"; font-weight:600; color: #000000; } h4 { font-family: "Titillium Web"; font-weight:600; color: #000000; } h5 { font-family: "Titillium Web"; font-weight:600; color: #000000; } h6 { font-family: "Titillium Web"; font-weight:600; color: #000000; } input:read-write,input:read-only,select,textarea { font-family: "Titillium Web"; font-weight:600; } input[type=reset], input[type=submit], button, button[type=submit] { background: none; background-color: #2c4e3b; color: #ffffff; } input[type=reset]:hover, input[type=submit]:hover, button:hover, button[type=submit]:hover { background: none; background-color: #ebd131; color: #000000; } #header { font-family: "Titillium Web"; font-weight:600; color: #000000; } #headerwrap a { color: #2c4e3b; } #headerwrap a:hover { color: #ebd131; } #pagewrap #headerwrap.fixed-header, .transparent-header #pagewrap #headerwrap.fixed-header { background: none; background-color: rgba(44,79,60,0.40); } #headerwrap.fixed-header #header, #headerwrap.fixed-header #site-description { font-family: "Titillium Web"; font-weight:600; } #headerwrap.fixed-header #header { color: #ffffff; } #headerwrap.fixed-header a { color: #2c4e3b; } #headerwrap.fixed-header a:hover { color: #ebd131; } #main-nav { width: 100%; } #main-nav a { color: #ffffff; font-family: "Titillium Web"; font-weight:600; } #main-nav a:hover { background: none; background-color: rgba(255,255,255,0.00); color: #ebd131; } #main-nav .current_page_item > a, #main-nav .current-menu-item > a { color: #ebd131; } #main-nav .current_page_item > a:hover, #main-nav .current-menu-item > a:hover { color: #2c4e3b; } #main-nav li > .sub-menu { background: none; background-color: #ffffff; } #main-nav ul a { background: none; background-color: #ffffff; color: #2c4e3b; font-family: "Titillium Web"; font-weight:600; } #main-nav ul a:hover { background: none; background-color: #ffffff; color: #ebd131; } #main-nav .sub-menu > .current_page_item > a, #main-nav .sub-menu > .current-menu-item > a { color: #50763e; } .post-title { font-family: "Vollkorn"; font-weight:400; } .single-post .has-post-title .post-title,.single-post .featured-area .post-title { font-family: "Vollkorn"; font-weight:400; } .loops-wrapper.grid6 .post-title, .loops-wrapper.grid6 .post-title a { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .loops-wrapper.grid5 .post-title, .loops-wrapper.grid5 .post-title a { font-family: "Arial", "Helvetica", sans-serif; } .loops-wrapper.grid4 .post-title, .loops-wrapper.grid4 .post-title a { font-family: "Arial", "Helvetica", sans-serif; } .loops-wrapper.grid3 .post-title, .loops-wrapper.grid3 .post-title a { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .loops-wrapper.grid2 .post-title, .loops-wrapper.grid2 .post-title a { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .loops-wrapper.grid2-thumb .post-title, .loops-wrapper.grid2-thumb .post-title a { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .loops-wrapper.list-thumb-image .post-title, .loops-wrapper.list-thumb-image .post-title a { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .post-meta, .loops-wrapper.list-post .post-meta, .single-post .post-meta, .loops-wrapper.grid6 .post-meta, .loops-wrapper.grid5 .post-meta, .loops-wrapper.grid4 .post-meta, .loops-wrapper.grid3 .post-meta, .loops-wrapper.grid2 .post-meta { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .post-meta a:hover { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .post-date, .post .post-date .day,.post-date .month, .post .post-date .year, .loops-wrapper.list-post .post .post-date, .single #pagewrap .post-content .post-date, .single-post #pagewrap .post-date-inline .post-date .year { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .more-link { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .post-nav a { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } .post-nav a:hover { font-family: "Arial", "Helvetica", sans-serif; } .page-title { color: #000000; font-family: "Titillium Web"; font-weight:600; } .module-title { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } #sidebar, #sidebar-alt { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } #sidebar a, #sidebar-alt a { font-family: "Arial", "Helvetica", sans-serif; } #sidebar a:hover, #sidebar-alt a:hover { font-family: "Arial", "Helvetica", sans-serif; } #sidebar .widgettitle, #sidebar-alt .widgettitle { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } #footer-logo a { display: none; } #footer { color: #ffffff; } #footer, #footer-logo, .footer-nav a, .footer-text { font-family: "Titillium Web"; font-weight:600; } #footer a { font-family: "Titillium Web"; font-weight:600; color: #000000; } #footer a:hover { font-family: "Titillium Web"; font-weight:600; color: #2c4e3b; } #footer-nav a { color: #000000; font-family: "Titillium Web"; font-weight:600; } #footer-nav a:hover, #footer-nav li:hover > a { color: #2c4e3b; } #footer-nav .current_page_item a, #footer-nav .current-menu-item a { color: #2c4e3b; } #footer-nav .current_page_item a:hover, #footer-nav .current-menu-item a:hover { color: #2c4e3b; } .footer-widgets { font-family: "Arial", "Helvetica", sans-serif; font-weight:400; } #footer .footer-widgets .widgettitle { color: #ffffff; font-family: "Titillium Web"; font-weight:600; } #pagewrap .back-top.back-top-float, .full-section-scrolling #footerwrap .back-top .arrow-up a, .footer-horizontal-left #footerwrap .back-top .arrow-up a, .footer-horizontal-right #footerwrap .back-top .arrow-up a, .footer-left-col #footerwrap .back-top .arrow-up a, .footer-right-col #footerwrap .back-top .arrow-up a, #footer .back-top .arrow-up a { background: none; background-color: #2c4e3b; } #footerwrap .back-top a:before, #pagewrap .back-top.back-top-float { color: #ffffff; } }.mobile-menu-visible.header-slide-out .sidemenu-on, .mobile-menu-visible.header-overlay #headerwrap, .mobile_menu_active.header-leftpane #headerwrap, .mobile_menu_active.header-rightpane #headerwrap, .header-minbar .sidemenu-on, .mobile_menu_active #headerwrap .sidemenu-on { background: none; background-color: #ffffff; }.mobile-menu-visible.header-slide-out .sidemenu-on, .mobile_menu_active.header-leftpane #headerwrap, .mobile_menu_active.header-rightpane #headerwrap, .header-minbar .sidemenu-on, .mobile_menu_active #headerwrap .sidemenu-on { color: #000000; }.mobile-menu-visible.header-slide-out .sidemenu-on a, .mobile_menu_active.header-leftpane #headerwrap a, .mobile_menu_active.header-rightpane #headerwrap a, .header-minbar .sidemenu-on a, .mobile_menu_active #headerwrap .sidemenu.sidemenu-on a { color: #2c4e3b; }.header-minbar #headerwrap #main-nav a, .mobile_menu_active #headerwrap .sidemenu-on #main-nav a { font-family: "Arial", "Helvetica", sans-serif; font-weight:500; }.header-minbar #headerwrap #main-nav a, .mobile_menu_active #headerwrap .sidemenu-on a, .mobile_menu_active #headerwrap #main-nav a, .mobile_menu_active #headerwrap #main-nav ul a { color: #000000; }.header-minbar #headerwrap #main-nav a:hover, .mobile_menu_active #headerwrap .sidemenu-on a:hover, .mobile_menu_active #headerwrap #main-nav a:hover, .mobile_menu_active #headerwrap #main-nav ul a:hover { color: #2c4e3b; }.header-minbar #headerwrap #main-nav .current_page_item > a, .mobile_menu_active #headerwrap #main-nav .current_page_item > a, .mobile_menu_active #headerwrap #main-nav .current-menu-item > a { color: #2c4e3b; }.header-minbar #headerwrap #main-nav .current_page_item > a:hover, .mobile_menu_active #headerwrap #main-nav .current_page_item > a:hover, .mobile_menu_active #headerwrap #main-nav .current-menu-item > a:hover { color: #2c4e3b; }.mobile_menu_active #menu-icon { background: none; background-color: #ffffff; }.mobile_menu_active #menu-icon { color: #2c4e3b; }.body-overlay { background-color: transparent; } /* Themify Custom CSS */ ul.sub-menu.tf_scrollbar { width: 50% !important; } /* START MOBILE MENU CSS */ @media screen and (max-width:1100px){ /*/wp-content/themes/themify-ultra/mobile-menu.css*/ #header{height:auto}#header,.fixed-header #header{text-align:inherit}#site-description,#site-logo{clear:both;float:none;margin:0 0 .5em;padding:0;position:static}#site-logo{font-size:24px;margin:5px 10px 5px 0}.header-widget{clear:both;float:none;margin:0;position:static;text-align:inherit}.header-widget .widget{margin:0 0 1.8em}.header-widget .widgettitle{margin:0 0 .3em}.header-icons{display:block;position:absolute;right:4%;top:27px;transform:translateY(-50%);z-index:1999}.header-icons a{font-size:1em;text-decoration:none!important}.slide-cart .header-icons{align-items:center;display:flex;flex-direction:row-reverse}:is(.mobile-menu-visible,.slide-cart-visible){z-index:1!important}.sidemenu{background-color:#fff;color:#000;display:none;height:100%;overflow-y:auto;padding:60px 25px 25px;position:fixed;text-align:left;top:0;transition:.2s ease-in-out;transition-property:left,right,top,bottom,width,transform,opacity;width:300px;z-index:11111}#mobile-menu{contain:paint;right:-300px}#mobile-menu.sidemenu-on{box-shadow:-6px 0 20px 5px rgba(0,0,0,.1);right:0}.sidemenu-left,.sidemenu-left .fixed-header{left:300px}.sidemenu-left #mobile-menu.sidemenu-on{left:0}#headerwrap #mobile-menu-panel a{color:#fff;text-decoration:none}#headerwrap #menu-icon-close{-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:100%;color:inherit;display:block;font-size:20px;min-height:1em;min-width:1em;padding:9px;position:absolute;right:10px;text-decoration:none;top:10px;transform-origin:center;transition-property:transform}#menu-icon-close:hover{background:hsla(0,0%,78%,.25)}#menu-icon-close:after,#menu-icon-close:before{height:56%}.transparent-header #menu-icon-close{color:inherit}#main-nav-wrap{display:block;margin:1em 0 1.5em;padding:0}#main-nav{background-color:transparent;float:none}#main-nav li{clear:both;display:block;padding:0;width:100%}#main-nav li>.sub-menu{background:0;border:0;box-shadow:none;color:inherit;display:none;height:auto;margin:0 0 0 1em;opacity:1;padding:0;position:static;transform:none;width:auto}#main-nav li.toggle-on>.sub-menu{display:block}#main-nav .child-arrow{display:inline-block}#main-nav .child-arrow:hover{background:hsla(0,0%,78%,.25)}.transparent-header #headerwrap .themify-widget-menu{color:inherit}#main-nav .has-mega-column>.sub-menu,#main-nav .has-mega>.sub-menu{margin:0;padding:0;width:auto}#main-nav .has-mega-column>.sub-menu,#main-nav .has-mega-column>.sub-menu ul,#main-nav .has-mega-sub-menu .mega-sub-menu ul{float:none;margin:0 0 0 1em}#main-nav .has-mega-column>.sub-menu,#main-nav .has-mega-column>.sub-menu ul,#main-nav .has-mega-sub-menu .mega-sub-menu ul,#main-nav li:not(.themify-widget-menu)>ul{background:0}#headerwrap #main-nav a{background:0;border:0;box-shadow:none;color:inherit;display:block;font-weight:400;line-height:1.5em;margin:0;padding:.6em 0;text-decoration:none;width:auto}#headerwrap #main-nav .has-sub-menu>a{padding-right:40px}#main-nav>li:last-child a{border:0}#headerwrap #main-nav .current-menu-item>a,#headerwrap #main-nav .current_page_item>a,#headerwrap #main-nav a:hover{color:var(--theme_accent)}#main-nav .mega-menu-posts,.slide-cart-visible #menu-icon{display:none}#header .social-widget a,#headerwrap .sidemenu .search-button,#headerwrap .sidemenu .tf_darkmode_toggle{color:inherit}#header .social-widget{float:none;margin:0;position:static}.header-widget :is(.col4-1,.col4-2,.col3-1){margin-left:0;max-width:100%;width:100%}.sidemenu .header-widget{height:auto}.fixed-header :is(.cart-wrap,.header-bar,.header-widget){display:block}.fixed-header .search-button,.fixed-header-on #headerwrap :is(.tf_darkmode_toggle,.social-widget){display:inline-block}#headerwrap .sidemenu .search-button{margin:0}#headerwrap #searchform,#headerwrap #searchform #s,#headerwrap #searchform #s:is(:focus,:hover),#headerwrap #searchform .tf_fa:hover+#s{width:100%}#headerwrap #searchform-wrap,.fixed-header-on #headerwrap #searchform-wrap{display:block;margin:1em 0 0}#headerwrap #searchform{clear:both;float:none;inset:auto;margin:0 0 1em;padding:0;position:relative;width:auto}#headerwrap #searchform #s{background-color:#eee;color:#000;float:none;height:auto;margin:auto;padding:11px 15px 10px 35px;position:static;transition:none;width:100%}#headerwrap #searchform .tf_fa:hover+#s{background-color:#eee}#headerwrap #searchform .tf_fa{background:0;color:#000;font-size:18px;height:16px;left:9px;margin:0;padding:3px;position:absolute;top:9px;transform:none;width:16px} /*/wp-content/themes/themify-ultra/styles/headers/media/header-menu-split.css*/ .header-menu-split #headerwrap #main-nav-wrap{position:static}.header-menu-split .fixed-header #header{padding-block:5px}.fixed-header .cart-icon{display:inline-block}.mobile-menu-visible #headerwrap .header-icons{display:none} } /* END MOBILE MENU CSS */