/* Theme Name: Department UK Theme URI: https://www.dowo.digital/ Description: Department UK is a theme for Elementor, created by DOWO Digital Author: DOWO Digital Author URI: https://www.dowo.digital/ Template: hello-elementor Version: 1.0.0 Text Domain: dowo License: GNU General Public License v3 or later. License URI: https://www.gnu.org/licenses/gpl-3.0.html Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready */ .dowo-display-none, button[data-filter="featured-post"] {display:none !important;} .dowo-hero-random-text .elementor-heading-title { display: inline-block; transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); will-change: opacity, transform, filter; } /* Fade Out (go slightly up + blur) */ .dowo-hero-random-text .elementor-heading-title.fade-out { opacity: 0; transform: translateY(-5px); filter: blur(6px); } /* Fade In (come from bottom) */ .dowo-hero-random-text .elementor-heading-title.fade-in { opacity: 1; transform: translateY(0); filter: blur(0); } /********************************************* Dowo common loop slider *************************************************/ .dowo-loop-slider .elementor-swiper-button{background:#e1a134; padding:10px; border-radius:100%; } .dowo-loop-slider .elementor-swiper-button:hover, .dowo-loop-slider .elementor-swiper-button:active{background:#000;} .dowo-loop-slider .elementor-swiper-button svg {fill:#000 !important;} .dowo-loop-slider .elementor-swiper-button:hover svg, .dowo-loop-slider .elementor-swiper-button:active svg{fill:#e1a134 !important;} .dowo-loop-slider .dowo-inner-min-height{min-height:250px !important;} .dowo-custom-slider .elementor-swiper-button-prev, .dowo-custom-slider .elementor-swiper-button-next{ background: #e1a134; padding: 10px; border-radius: 100%;} @media (min-width: 1336px) { .dowo-custom-slider .elementor-swiper-button-prev{left: -439px !important;} .dowo-custom-slider .elementor-swiper-button-next{left: -360px !important; right:auto !important;} } @media (min-width: 1025px) and (max-width: 1336px) { .dowo-custom-slider .elementor-swiper-button-prev, .dowo-custom-slider .elementor-swiper-button-next{top: 40% !important;} .dowo-custom-slider .elementor-swiper-button-prev{left: -50% !important; } .dowo-custom-slider .elementor-swiper-button-next{left: -40% !important; right:auto !important; top: 40%;} } @media (min-width: 768px) and (max-width: 1024px) { .dowo-custom-slider .elementor-swiper-button-prev, .dowo-custom-slider .elementor-swiper-button-next{top: 43% !important;} .dowo-custom-slider .elementor-swiper-button-prev{left: -46% !important; } .dowo-custom-slider .elementor-swiper-button-next{left: -35% !important; right:auto !important; top: 43%;} } @media (max-width: 767px) { .dowo-custom-slider .elementor-swiper-button-prev{left: -50% !important; } .dowo-custom-slider .elementor-swiper-button-next{left: -40% !important; right:auto !important; top: 40%;} } /****************************************************************************************************************** Dowo common loop slider where we can not change the arrow icon from Elementor (Still hove animation is missing) ********************************************************************************************************************/ .dowo-simple-image-slider > .e-con-inner .elementor-element{position:relative;} .dowo-simple-image-slider .elementor-swiper-button, #map-area #expand-btn, #map-area #close-btn{ background-color: #e1a134;padding:10px; width:45px; height:45px; border-radius:100%; border-color:transparent;} .dowo-simple-image-slider .elementor-swiper-button svg{display:none;} .dowo-simple-image-slider .elementor-swiper-button.elementor-swiper-button-prev, #map-area #expand-btn{ background-image:url("img/Icon_large_arrow_black_left.svg"); background-repeat:no-repeat; background-size:25px; background-position:center; left:50px; } .dowo-simple-image-slider .elementor-swiper-button.elementor-swiper-button-next, #map-area #close-btn{background-image:url("img/Icon_large_arrow_black_right.svg"); background-repeat:no-repeat; background-size:25px; background-position:center; right:50px; } .dowo-simple-image-slider .elementor-swiper-button.elementor-swiper-button-prev:hover, #map-area #expand-btn:hover{ background-color: #000; background-image:url("img/Icon_large_arrow_white_left.svg"); background-repeat:no-repeat; background-size:25px; background-position:center; box-shadow: none;} .dowo-simple-image-slider .elementor-swiper-button.elementor-swiper-button-next:hover, #map-area #close-btn:hover{ background-color: #000;background-image:url("img/Icon_large_arrow_white_right.svg"); background-repeat:no-repeat; background-size:25px; background-position:center; box-shadow: none;} .dowo-button-bg-dark .elementor-swiper-button:hover{background-color:transparent; border:2px solid #e0a034} .dowo-button-bottom .elementor-swiper-button{top: auto !important; bottom:0px;} .dowo-button-bottom .elementor-swiper-button-prev{left: -440px !important;} .dowo-button-bottom .elementor-swiper-button-next { left: -367px !important; right: auto !important;} .dowo-simple-image-slider .dowo-simple-slider-inner .swiper .elementor-swiper-button{top:auto; bottom:55%;} /* Dowo custom linking bold */ h2.elementor-heading-title a{text-transform:uppercase !important; font-weight:500 !important;} h3.elementor-heading-title a{text-transform:uppercase !important; font-weight:500 !important;} h4.elementor-heading-title a{text-transform:uppercase !important; font-weight:600 !important;} .dowo-regular-font h4.elementor-heading-title a{text-transform:uppercase !important; font-weight:400 !important;} h5.elementor-heading-title a{text-transform:uppercase !important; font-weight:500 !important;} h6.elementor-heading-title a{text-transform:uppercase !important; font-weight:600 !important;} /****************************************************************************************************************** MAP CSS ********************************************************************************************************************/ #main-layout{position:relative;} #map-area #expand-btn, #map-area #close-btn{position:absolute; top:20px;} #map-area #close-btn{left:20px;} .fc-itemcontent-padding {font-family:"akzidenz-grotesk-next-pro" !important; background-color:#000 !important; } .fc-itemcontent-padding .fc-item-meta{display:none !important;} .fc-itemcontent-padding div{ color:#fff !important;} /****************************************************************************************************************** Dowo Hover effect with zoom image and heading color change) ********************************************************************************************************************/ .dowo-hover-zoom .elementor-widget-image, .dowo-hover-zoom.elementor-widget-image{overflow:hidden} .dowo-hover-zoom img {transition: transform 0.4s ease;} .dowo-hover-zoom:hover img {transform: scale(1.1);} .dowo-hover-zoom:hover h3.elementor-heading-title a, .dowo-no-zoom:hover h3.elementor-heading-title a{color:#e1a134} /****************************************************************************************************************** Dowo link where hover animation given and black arrow used ********************************************************************************************************************/ .dowo-link-icon .elementor-heading-title a, .dowo-link-icon h2.elementor-heading-title a, .dowo-link-icon a.elementor-button .elementor-button-text{display: inline; position: relative; text-decoration: none; background-image: linear-gradient(#818181, #818181); background-repeat: no-repeat; background-position:0% 85%; background-size: 0% 1px; /* transition: background-size 0.5s ease-out; */ padding-bottom: 2px!important; box-shadow: none;} .dowo-link-icon .elementor-heading-title a::after, .dowo-link-icon a.elementor-button .elementor-button-text::after {content: ''; display: inline-block; width: 17px; height: 17px; margin-left: 10px;background: url("img/Icon_medium-arrow-black.svg") no-repeat center;background-size: contain; transition: transform 0.3s ease; position: relative; top: 1px; box-shadow: none; } /* Dowo link where icon size is 27px*/ .dowo-link-icon .elementor-heading-title a:hover { background-size: calc(100% - 27px) 1px;} /* Dowo link where icon size is 43px*/ .dowo-link-icon h2.elementor-heading-title a{ background-position:0% 80%; padding-bottom: 10px !important;} .dowo-link-icon h2.elementor-heading-title a:hover {background-size: calc(100% - 43px) 1px;} .dowo-link-icon h2.elementor-heading-title a::after{ width: 33px; height: 33px;} .dowo-link-icon h2.elementor-heading-title a{ font-weight:400 !important;} /****************************************************************************************************************** Dowo link where hover animation given and white arrow used ********************************************************************************************************************/ .dowo-link-icon a.elementor-button .elementor-button-text{ background-position:0% 80%; background-image: linear-gradient(#fff, #fff); } .dowo-link-icon a.elementor-button .elementor-button-text{padding-bottom: 5px !important; display:inline !important; } .dowo-link-icon a.elementor-button .elementor-button-text:hover {background-size: calc(100% - 22px) 1px; box-shadow: none; } .dowo-link-icon a.elementor-button .elementor-button-text::after {width: 12px; height: 12px;background: url("img/Icon_small-arrow-white.svg") no-repeat center;} /********************************************** Dowo Mega menu animation, css and mobile ************************************************/ .dowo-maga-menu .elementor-widget-n-menu .e-n-menu-title.e-current a{color:#000 !important; } .dowo-maga-menu .elementor-widget-n-menu .e-n-menu-title.e-current a span.e-n-menu-title-text{font-weight:500 !important;} .dowo-maga-menu h3.elementor-heading-title a, .dowo-maga-menu h2.elementor-heading-title a{text-transform:uppercase !important; font-weight:500 !important;} .dowo-maga-menu h3.elementor-heading-title a{border-bottom:1px solid #000; display:block; padding-bottom:5px;} .dowo-maga-menu h3.elementor-heading-title a:hover, .dowo-maga-menu h3.elementor-heading-title a:focus{border-color: #e1a134;} .dowo-maga-menu svg polygon{fill:#000 !important; } .dowo-maga-menu div.elementor-heading-title a:hover{text-decoration:none; text-decoration-color:#e1a134; text-underline-offset: 2px;} .dowo-workspace-megamenu .dowo-workspace-text {display:none;} .dowo-maga-menu h2.elementor-heading-title a, .dowo-maga-menu-mobile h2.elementor-heading-title a{position:relative;} .dowo-maga-menu h2.elementor-heading-title a::after, .dowo-maga-menu-mobile h2.elementor-heading-title a::after{content: ''; display: inline-block; width: 22px; height: 22px; margin-left: 10px;background: url("img/Icon_medium-arrow-black.svg") no-repeat center;background-size: contain; transition: transform 0.3s ease; position: relative; top: 1px; box-shadow: none;} .dowo-maga-menu h2.elementor-heading-title a:hover, .dowo-maga-menu-mobile h2.elementor-heading-title a:hover{color:#E1A134;} /****************************************************************************************************************** Dowo mobile menu css ********************************************************************************************************************/ .dowo-mobile-menu{padding-top:20px; padding-bottom:20px; } #dowo-mobile-toggle {width: 40px;height: 40px;cursor: pointer;background-image: url('img/menu_open.png');background-size: contain; background-repeat: no-repeat; background-position: center;} #dowo-mobile-toggle.active {background-image: url('img/menu_close.png');} /* HIDE ALL MENUS BY DEFAULT */ .dowo-mobile-menu {display: none;} /* SHOW WHEN ACTIVE */ .dowo-mobile-menu.active {display: block;} /* CLICKABLE */ [id^="Link"] {cursor: pointer;} /* Taken care where single menu level having a tag or not */ .dowo-mobile-menu-landing .elementor-heading-title a, .dowo-mobile-menu-landing .dowo-sub-menu-loop .elementor-heading-title{padding:15px 0 !important; font-size:12px !important; line-height:14px !important; font-weight:300 !important; text-transform:uppercase !important; display:inline-block !important;} /* Taken care where back button and link added */ .dowo-link-icon.dowo-link-icon-menu-back a.elementor-button .elementor-button-text{font-size:12px !important; line-height:14px !important; font-weight:400 !important; text-transform:uppercase !important; display:inline-block; color:#000 !important;} .dowo-link-icon.dowo-link-icon-menu-back a.elementor-button {margin-bottom:30px;} .dowo-link-icon.dowo-link-icon-menu-back a.elementor-button .elementor-button-text:hover, .dowo-link-icon.dowo-link-icon-menu-back a.elementor-button .elementor-button-text:focus, .dowo-link-icon.dowo-link-icon-menu-back a.elementor-button .elementor-button-text:visited{color:#000 !important;} .dowo-link-icon.dowo-link-icon-menu-back a.elementor-button .elementor-button-text::before {width: 13px; height: 13px; content: ""; display: inline-block;background: url("img/Icon_mobile_left.svg") no-repeat center; background-size: contain; margin-right: 3px; position:relative; top:2px; left:-3px} /* Taken care after */ .dowo-link-icon.dowo-link-icon-menu-back a.elementor-button .elementor-button-text::after {content: none !important; } /* Taken care where right icon added after the text */ .dowo-sub-menu-loop .elementor-heading-title::after{width: 13px; height: 13px; content: ""; display: inline-block; background: url("img/Icon_mobile_right.svg") no-repeat center; background-size: contain; margin-left: 6px; position:relative; top:2px;} .mobile-menu-loop .mobile-menu-loop-text{display:none;} .mobile-menu-loop h3.elementor-heading-title a{text-transform: uppercase !important;font-weight: 500 !important;} /****************************************************************************************************************** Dowo link where hover small arrow used in loop Post ********************************************************************************************************************/ .dowo-link-icon.dowo-link-icon-black .elementor-button-content-wrapper{display: inline !important; text-align: left;} .dowo-link-icon.dowo-link-icon-black a.elementor-button{text-align: left !important;} .dowo-link-icon.dowo-link-icon-black a.elementor-button .elementor-button-text::after {width: 12px; height: 12px;background: url("img/Icon_medium-arrow-black.svg") no-repeat center; } .dowo-link-icon.dowo-link-icon-black a.elementor-button .elementor-button-text{background-image: linear-gradient(#000, #000); box-shadow: none; text-align:left !important; display:inline !important;} .dowo-link-icon.dowo-link-icon-black a.elementor-button .elementor-button-text:hover, .dowo-link-icon.dowo-link-icon-black a.elementor-button-link:hover{box-shadow: none !important;} /****************************************************************************************************************** Dowo Journal single page text rotete ********************************************************************************************************************/ .dowo-position{position:relative; overflow:hidden;} .dowo-rotate-heading {writing-mode: vertical-rl; transform: rotate(180deg);text-align: center;} /****************************************************************************************************************** Dowo garvity form ********************************************************************************************************************/ .dowo-garvity-form .gfield_label, .dowo-garvity-form .gform_required_legend, .dowo-garvity-form-news .gfield_label, .dowo-garvity-form-news .gform_required_legend, .dowo-garvity-form-news #field_2_2 {display:none;} .dowo-garvity-form-news input[type="email"]:focus, .dowo-garvity-form-news input[type="email"]:active { outline: none !important; box-shadow: none !important; } .dowo-garvity-form-news .gform-footer .gform_button{font-family:"akzidenz-grotesk-next-pro" !important; background:#e0a034 !important; color:#000 !important; padding:10px 20px !important; font-size:20px !important; border-radius:10px !important; font-weight:400 !important; text-transform:uppercase !important;} .dowo-garvity-form-news input[type="email"]{background:#000 !important; padding:20px 10px !important; font-size:18px !important; color:#fff !important; font-family:"akzidenz-grotesk-next-pro" !important;} .dowo-garvity-form-news .gform-footer .gform_button:hover{background:#000 !important; color:#fff !important;} /* Inner class added dowo-enquire-right-wrap to -garvity-form*/ .dowo-garvity-form input[type="text"], .dowo-garvity-form input[type="email"], .dowo-garvity-form input[type="number"], .dowo-garvity-form select, .dowo-garvity-form textarea{box-shadow:none !important; background-color:transparent !important; font-family:"akzidenz-grotesk-next-pro" !important; font-size:16px !important; font-weight:300; height:auto !important; line-height:24px !important; padding:10px !important; border-bottom:2px solid #000 !important;; border-top:0px !important; border-right:0px !important; border-left:0px !important; border-radius:0px !important; } .gform-body{font-family:"akzidenz-grotesk-next-pro";} .dowo-garvity-form input:focus, .dowo-garvity-form select:focus, .dowo-garvity-form textarea:focus, .dowo-garvity-form input:active, .dowo-garvity-form select:active, .dowo-garvity-form textarea:active { outline: none !important; box-shadow: none !important; } .gform-theme--framework .gfield--input-type-datepicker .ginput_container_date input{--gf-local-width: 100%;} .gform-footer{margin-block-start: 0x;} .dowo-garvity-form .gform_button{font-family:"akzidenz-grotesk-next-pro"; font-size:24px !important; border-radius:5px !important; font-weight:400 !important; height:auto !important; line-height:28px !important; background-color:transparent !important; color:#000 !important; border:2px solid #000 !important; box-shadow:none !important;} .dowo-garvity-form .gform-footer{margin-top:0px !important;} .dowo-garvity-form .gform-footer .gform_button:hover, .dowo-garvity-form .gform-footer .gform_button:active .dowo-garvity-form .gform-footer .gform_button:focus{background:#000 !important; color:#fff !important;} /****************************************************************************************************************** Dowo FAQ Iocn ********************************************************************************************************************/ .dowo-faq svg polygon, .dowo-list-items svg path, .dowo-list-items svg polygon{fill:#fff !important; } .dowo-faq a, .dowo-journal-single-page a, .elementor-widget-text-editor a{color:#E0A034;} .dowo-faq a:hover, .dowo-journal-single-page a:hover, .elementor-widget-text-editor a:hover{color:#F4BC5D;} /****************************************************************************************************************** dowo-social-icon Iocn ********************************************************************************************************************/ .dowo-elementor-footer-button{padding: 0px !important; margin-left: 30px !important; } .dowo-elementor-footer-button a.elementor-item {padding: 5px 10px 5px 10px !important; border:2px solid #e0a034; color:#000 !important; font-size:14px !important; border-radius: 10px 10px 10px 10px !important;} .dowo-elementor-footer-button a.elementor-item:hover{background:#000; border:2px solid #e0a034; font-size:14px !important; color:#fff !important;} .dowo-social-icon a.elementor-social-icon:hover, .dowo-social-icon a.elementor-social-icon:hover svg path{font-size:33px !important; opacity: 1; color:#e0a034; fill:#e0a034 !important;} /****************************************************************************************************************** Wiggle animation for the external SVG ********************************************************************************************************************/ .dowo-link-icon .elementor-heading-title a:hover::after, .dowo-maga-menu h2.elementor-heading-title a:hover::after, .dowo-link-icon a.elementor-button .elementor-button-text:hover::after { animation: wiggle 0.8s ease-in-out infinite;} @keyframes wiggle { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } } .display-none{display:none !important} /****************************************************************************************************************** End ********************************************************************************************************************/ @media (max-width: 1024px) { .elementor-nav-menu--dropdown{background-color:transparent !important; font-size:inherit !important} .elementor-nav-menu--dropdown a.elementor-item, .elementor-nav-menu--dropdown a.elementor-item:focus, .elementor-nav-menu--dropdown a.elementor-item:hover, .elementor-nav-menu--dropdown a.elementor-item:active{color:#fff !important; background-color:transparent !important; font-size:inherit !important} .elementor-nav-menu--dropdown .elementor-item{padding-left:0px; padding-right:0px;} .elementor-nav-menu--dropdown.elementor-nav-menu__container{margin-top:#fff !important; } .elementor-nav-menu__text-align-center .elementor-nav-menu--dropdown .elementor-nav-menu a{justify-content: right; padding-left:0px !important; padding-right:0px !important} .dowo-elementor-footer-button a.elementor-item{justify-content: center !important;} .dowo-button-res .elementor-element .swiper .elementor-swiper-button{top: -16%;} .dowo-button-resp .elementor-swiper-button-prev{left: -269px !important;} .dowo-button-resp .elementor-swiper-button-next{left: -202px !important} } /****************************************************************************************************************** workspace image hack ********************************************************************************************************************/ @media (min-width: 767px) { .dowo-loop-slider-image, .dowo-loop-slider-image .elementor-widget-image{height:100%;} /****************************************************************************************************************** dowo-right-stretch ********************************************************************************************************************/ /****************************************************************************************************************** dowo-right-stretch ********************************************************************************************************************/ .dowo-right-stretch{overflow:hidden; } .dowo-right-stretch .dowo-custom-slider-wrap-left{flex-shrink: 0;} .dowo-right-stretch .dowo-custom-slider-wrap-right{width: calc(66.6666% + max(0px, (100vw - var(--container-max-width)) / 2)); flex-shrink: 0;} .dowo-right-stretch .dowo-custom-slider-wrap-right.dowo-custom-slider-wrap-right50{width: calc(50% + max(0px, (100vw - var(--container-max-width)) / 2));} .dowo-right-stretch .dowo-custom-slider-wrap-right.dowo-custom-slider-wrap-right33 {width: calc(33.3333% + max(0px, (100vw - var(--container-max-width)) / 2));} .dowo-right-stretch .dowo-custom-slider-wrap-right.dowo-custom-slider-wrap-right33 .elementor-widget-image{height:100%;} .dowo-right-stretch .dowo-custom-slider-wrap-right.dowo-custom-slider-wrap-right50, .dowo-right-stretch .dowo-custom-slider-wrap-right.dowo-custom-slider-wrap-right33 img{width:100%} .custom-font-size .elementor-heading-title{font-size:30px !important; line-height:30px !important} /********************************************** Hero CSS, css and mobile ************************************************/ .dowo-top-hero-text{max-width:500px !important;} .dowo-bottom-hero-text{max-width:800px !important;} } @media (max-width: 640px) { .dowo-button-bottom.dowo-button-resp .elementor-swiper-button{top: -50px !important; bottom: auto !important;} .dowo-button-resp .elementor-swiper-button-prev{left: 0px !important;} .dowo-button-resp .elementor-swiper-button-next{left: 70px !important} } @media (max-width: 767px) { .dowo-no-responsive{ overflow-x: auto; white-space: nowrap;} .dowo-no-responsive > .e-con-inner{flex-direction: row !important;flex-wrap: nowrap !important;max-width: none; width: 1320px;} .dowo-no-responsive-left{white-space: normal; width:33.333%} .dowo-no-responsive-top > .e-con, .dowo-no-responsive-bottom > .e-con {flex-direction: row; flex-wrap: nowrap; gap: 15px;} .dowo-no-responsive-top-image-top, .dowo-no-responsive-top-image-bottom{width:33.333%} .dowo-no-responsive-col{ overflow-x: auto; white-space: nowrap;} .dowo-no-responsive-col > .e-con-inner{flex-direction: row !important;flex-wrap: nowrap !important;max-width: none; width: 1320px;} .dowo-no-responsive-col > .e-con-inner > .e-con{flex-direction: row; flex-wrap: nowrap; gap: 15px;} .dowo-no-responsive-col .dowo-col-nowrap{width:33.333%; white-space: normal; margin-bottom:0px !important} #map-area #expand-btn, #map-area #close-btn{display:none !important;} .dowo-simple-image-slider .elementor-swiper-button-prev{left: 20px !important;} .dowo-simple-image-slider .elementor-swiper-button-next { left:90px !important; right: auto !important;} .dowo-simple-image-slider .elementor-element .swiper .elementor-swiper-button{top: -48px; bottom:auto;} .dowo-elementor-footer-button{margin-left:0px !important;} } @media (max-width: 460px) { .dowo-mobile .elementor-mobile-align-right{text-align:left; margin-bottom:70px !important;} } /* Left Column map slide animation */ .main-layout { display: flex;transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); width: 100%;overflow: hidden;} #left-column { transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); flex-shrink: 0; } .pushed-left #left-column { margin-left: -50%; opacity: 0; filter: blur(4px); } #map-container {transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); flex-grow: 1; } .pushed-left #map-container {width: 100% !important; } #close-btn { display: none; opacity: 0; transition: opacity 0.3s ease-in;} .pushed-left #close-btn { display: flex; opacity: 1; } .pushed-left #expand-btn {display: none; } .fade-transition { transition: opacity 0.8s ease-in-out; } .fade-out { opacity: 0;} .fade-in {opacity: 1; } @media (min-width: 1026px) and (max-width: 1340px) { .dowo-loop-slider .elementor-swiper-button-prev{left: -33% !important;} .dowo-loop-slider .elementor-swiper-button-next{right: auto !important; left: -30% !important;} }