.justified-gallery {
width: 100%;
position: relative;
overflow: hidden;
}
.justified-gallery > a,
.justified-gallery > div,
.justified-gallery > figure {
position: absolute;
display: inline-block;
overflow: hidden; filter: "alpha(opacity=10)";
opacity: 0.1;
margin: 0;
padding: 0;
}
.justified-gallery > a > img,
.justified-gallery > div > img,
.justified-gallery > figure > img,
.justified-gallery > a > a > img,
.justified-gallery > div > a > img,
.justified-gallery > figure > a > img,
.justified-gallery > a > svg,
.justified-gallery > div > svg,
.justified-gallery > figure > svg,
.justified-gallery > a > a > svg,
.justified-gallery > div > a > svg,
.justified-gallery > figure > a > svg {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
border: none;
filter: "alpha(opacity=0)";
opacity: 0;
}
.justified-gallery > a > .jg-caption,
.justified-gallery > div > .jg-caption,
.justified-gallery > figure > .jg-caption {
display: none;
position: absolute;
bottom: 0;
padding: 5px;
background-color: #000000;
left: 0;
right: 0;
margin: 0;
color: white;
font-size: 12px;
font-weight: 300;
font-family: sans-serif;
}
.justified-gallery > a > .jg-caption.jg-caption-visible,
.justified-gallery > div > .jg-caption.jg-caption-visible,
.justified-gallery > figure > .jg-caption.jg-caption-visible {
display: initial;
filter: "alpha(opacity=70)";
opacity: 0.7;
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
-o-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
}
.justified-gallery > .jg-entry-visible {
filter: "alpha(opacity=100)";
opacity: 1;
background: none;
}
.justified-gallery > .jg-entry-visible > img,
.justified-gallery > .jg-entry-visible > a > img,
.justified-gallery > .jg-entry-visible > svg,
.justified-gallery > .jg-entry-visible > a > svg {
filter: "alpha(opacity=100)";
opacity: 1;
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
-o-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
}
.justified-gallery > .jg-filtered {
display: none;
}
.justified-gallery > .jg-spinner {
position: absolute;
bottom: 0;
margin-left: -24px;
padding: 10px 0 10px 0;
left: 50%;
filter: "alpha(opacity=100)";
opacity: 1;
overflow: initial;
}
.justified-gallery > .jg-spinner > span {
display: inline-block;
filter: "alpha(opacity=0)";
opacity: 0;
width: 8px;
height: 8px;
margin: 0 4px 0 4px;
background-color: #000;
border-radius: 6px;
}.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(//www.kalkor.co.za/wp-content/plugins/themesflat-core/assets/css/owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
body.rtl .owl-carousel .owl-stage-outer{
direction: ltr;
}.tf-step {
background: #fff;
padding: 40px 80px;
padding-bottom: 23px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.tf-step .number-count {
width: 75px;
height: 75px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 1px 5px 0 var(--theme-primary-color);
background: var(--theme-accent-color);
margin-bottom: 17px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.tf-step .number-count .number {
font-family: 'Nunito';
font-weight: 700;
font-size: 30px;
line-height: 38px;
color: #FFFFFF;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.tf-step h3 {
font-family: 'Nunito';
font-weight: 600;
font-size: 30px;
line-height: 130%;
letter-spacing: -0.02em;
color: var(--theme-primary-color);
} .tf-working-process .group-working {
position: relative;
display: flex;
margin-left: -50px;
}
.tf-working-process .group-working .line {
position: absolute;
top: 35px;
left: 0;
right: 0;
z-index: 1;
}
.tf-working-process .group-working .box {
width: calc(33.3333% - 50px);
margin-left: 50px;
text-align: center;
position: relative;
z-index: 5;
}
.tf-working-process .group-working .box.box2 {
margin-top: 61px;
}
.tf-working-process .group-working .box .features {
width: 80px;
height: 80px;
background: #FFFFFF;
border: 1px solid #00234B;
border-radius: 50%;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
}
.tf-working-process .group-working .box .features img {
width: 36px;
height: 36px;
object-fit: cover;
}
.tf-working-process .group-working .box .content {
position: relative;
background: #FFFFFF;
border-radius: 12px;
padding: 23px 15px 20px 15px;
z-index: 5;
}
.tf-working-process .group-working .box .content::after {
content: '';
position: absolute;
top: -7px;
left: 50%;
transform: translateX(-50%);
right: 0;
width: 90%;
height: 100%;
background: #fff;
clip-path: polygon(50% 0%, 100% 5%, 100% 99%, 0 100%, 0 5%);
z-index: -1;
}
.tf-working-process .group-working .box .content h4 {
font-family: 'Nunito';
font-weight: 500;
font-size: 14px;
line-height: 18px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--theme-accent-color);
margin-bottom: 6px;
}
.tf-working-process .group-working .box .content h3 {
font-family: 'Nunito';
font-weight: 600;
font-size: 18px;
line-height: 23px;
margin: 0 5px;
color: #00234B;
margin-bottom: 6px;
}
.tf-working-process .group-working .box .content p {
font-family: 'Manrope';
font-weight: 400;
font-size: 16px;
line-height: 185%;
color: #617798;
} .tf-button2 {
font-family: 'Poppins';
font-weight: 500;
font-size: 16px;
line-height: 20px;
color: #FFFFFF;
padding: 18px 35px;
border-radius: 5px;
display: inline-flex;
z-index: 1;
overflow: hidden;
position: relative;
line-height: 1;
white-space: nowrap;
background: #297d53;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.tf-button2 i {
margin-left: 6px;
}
.tf-button2:hover {
background: #e6d54f;
color: #3e483c;
} @media only screen and (max-width: 767px) {
.tf-working-process .group-working {
flex-wrap: wrap;
}
.tf-working-process .group-working .box {
width: calc(100% - 50px);
}
.tf-working-process .group-working .box,
.tf-working-process .group-working .box.box2 {
margin-top: 40px;
}
.tf-step {
padding: 40px;
}
}