.tm-sc-working-steps.working-steps-horizontal {
position: relative;
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-bg-holder {
position: absolute;
top: 20px;
left: -5%;
width: 120%;
height: 100%;
z-index: -1;
opacity: 1;
margin: 0 -100px;
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-bg-holder:after {
content: "";
transform-origin: right;
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transition: -webkit-transform 1s linear 0.2s;
-moz-transition: -moz-transform 1s linear 0.2s;
transition: transform 1s linear 0.2s;
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-bg-holder.working-steps-bg-appeared:after {
-webkit-transform: scale(0, 1);
-moz-transform: scale(0, 1);
transform: scale(0, 1);
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner:after, .tm-sc-working-steps.working-steps-horizontal .working-steps-inner:before {
content: "";
display: table;
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner:after {
clear: both;
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item {
text-align: center;
float: left;
display: flex;
justify-content: center;
width: 25%;
padding: 10px;
position: relative;
z-index: 0;
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item .arrow-symbol-img {
position: absolute;
z-index: -1;
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item .arrow-symbol-img img {
max-width: initial;
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item .working-steps-item-inner {
width: 80%;
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item .image-holder-wrapper {
position: relative;
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item .image-holder-wrapper .image-holder {
background-color: #fff;
display: flex;
width: 200px;
height: 200px;
border: 8px solid rgba(238, 238, 238, 0.5);
padding: 0;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
border-radius: 50%;
box-sizing: border-box;
position: relative;
transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item .image-holder-wrapper .image-holder {
transition: none;
}
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item .image-holder-wrapper .image-holder .image-holder-inner {
border-radius: 50%;
width: 100%;
-ms-flex-item-align: center !important;
align-self: center !important;
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item .image-holder-wrapper .image-holder .image-holder-inner img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: transform 0.5s cubic-bezier(0.57, 0.04, 0.06, 0.84), opacity 0s;
transition: transform 0.5s cubic-bezier(0.57, 0.04, 0.06, 0.84), opacity 0s;
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item .image-holder-wrapper .image-holder .text-img {
color: var(--theme-color1);
font-size: 64px;
transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item .image-holder-wrapper .image-holder .text-img {
transition: none;
}
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item .image-holder-wrapper .image-holder .text-flaticon {
color: var(--theme-color1);
font-size: 64px;
transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item .image-holder-wrapper .image-holder .text-flaticon {
transition: none;
}
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item .image-holder-wrapper .image-holder .text-flaticon svg {
fill: var(--theme-color1);
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item .image-holder-wrapper .image-holder .tag {
background-color: #222013;
color: #fff;
height: 56px;
width: 56px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
border-radius: 50%;
position: absolute;
bottom: 5px;
right: -5px;
transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item .image-holder-wrapper .image-holder .tag {
transition: none;
}
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item.image-full-bg .image-holder-wrapper .image-holder .image-holder-inner {
overflow: hidden;
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item.image-full-bg .image-holder-wrapper .image-holder .image-holder-inner img {
width: 100%;
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item.working-steps-item-highlighted .image-holder {
width: 90%;
height: 90%;
max-width: 250px;
margin-top: -40px;
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item.working-steps-item-highlighted .working-steps-item-inner {
width: 95%;
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item.working-steps-push-right .working-steps-item-inner {
float: right;
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item:hover .image-holder-wrapper .image-holder .image-holder-inner img {
transform: rotateY(180deg);
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item:hover .image-holder-wrapper .image-holder .image-holder-inner .text-flaticon {
transform: rotateY(180deg);
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item:hover .image-holder-wrapper .image-holder .text-img {
color: var(--theme-color2);
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item:hover .image-holder-wrapper .image-holder .tag {
transform: rotate(360deg);
}
.tm-sc-working-steps.working-steps-horizontal.working-steps-items-1 .tm-sc-working-steps-item {
width: 100%;
}
.tm-sc-working-steps.working-steps-horizontal.working-steps-items-2 .tm-sc-working-steps-item {
width: 50%;
}
.tm-sc-working-steps.working-steps-horizontal.working-steps-items-3 .tm-sc-working-steps-item {
width: 33.33%;
}
.tm-sc-working-steps.working-steps-horizontal.working-steps-items-4 .tm-sc-working-steps-item {
width: 25%;
}
.tm-sc-working-steps.working-steps-horizontal .title-holder {
margin-bottom: 15px;
}
.tm-sc-working-steps.working-steps-horizontal .text-holder p {
color: #888;
}
.tm-sc-working-steps.working-steps-horizontal .text-holder,
.tm-sc-working-steps.working-steps-horizontal .text-holder p,
.tm-sc-working-steps.working-steps-horizontal .title {
margin: 0;
transition: all 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
.tm-sc-working-steps.working-steps-horizontal .text-holder,
.tm-sc-working-steps.working-steps-horizontal .text-holder p,
.tm-sc-working-steps.working-steps-horizontal .title {
transition: none;
}
}
@media only screen and (max-width: 1440px) {
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item .working-steps-item-inner {
width: 100%;
}
}
@media only screen and (max-width: 1366px) {
.tm-sc-working-steps.working-steps-horizontal .working-steps-bg-holder {
background-size: contain;
margin: 0 -100px;
}
}
@media (max-width: 1199.98px) {
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item .working-steps-item-inner {
width: 80%;
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item .image-holder {
width: 85%;
height: 85%;
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item.working-steps-item-highlighted .image-holder {
width: 90%;
height: 90%;
margin-top: -40px;
}
}
@media (max-width: 991.98px) {
.tm-sc-working-steps.working-steps-horizontal {
margin-top: 0;
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-bg-holder {
display: none;
}
.tm-sc-working-steps.working-steps-horizontal.working-steps-items-4 .working-steps-inner .tm-sc-working-steps-item {
width: 50%;
margin-bottom: 30px;
}
.tm-sc-working-steps.working-steps-horizontal.working-steps-items-4 .working-steps-inner .tm-sc-working-steps-item .working-steps-item-inner {
width: 100%;
}
.tm-sc-working-steps.working-steps-horizontal.working-steps-items-4 .working-steps-inner .tm-sc-working-steps-item .image-holder {
width: 65%;
height: 65%;
max-width: 200px;
}
.tm-sc-working-steps.working-steps-horizontal.working-steps-items-4 .working-steps-inner .tm-sc-working-steps-item .content-holder {
padding: 0 20px;
}
.tm-sc-working-steps.working-steps-horizontal.working-steps-items-4 .working-steps-inner .tm-sc-working-steps-item.working-steps-item-highlighted .image-holder {
width: 80%;
height: 80%;
margin-top: 0;
}
}
@media (max-width: 767.98px) {
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item {
width: 100% !important;
margin-bottom: 30px;
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item .working-steps-item-inner {
width: 100%;
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item .image-holder {
width: 65%;
height: 65%;
max-width: 200px;
}
.tm-sc-working-steps.working-steps-horizontal .working-steps-inner .tm-sc-working-steps-item.working-steps-item-highlighted .image-holder {
width: 70%;
height: 70%;
margin-top: 0;
}
}