.ct-fancy-box-layout1 {
display: flex;
flex-wrap: nowrap;
.item--shape {
display: none;
}
.item--link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
}
&.style1, &.style6 {
.item--icon {
font-size: 24px;
color: #fff;
height: 63px;
width: 63px;
min-width: 63px;
line-height: 63px;
@include background-horizontal($gradient_color_from, $gradient_color_to);
text-align: center;
@include border-radius(63px);
margin-right: 38px;
position: relative;
overflow: hidden;
i {
display: inline-block;
}
@media #{$max-lg} {
margin-right: 20px;
}
}
.item--title {
margin-top: 4px;
margin-bottom: 7px;
font-size: 24px;
font-weight: 600;
@media #{$max-lg} {
font-size: 22px;
}
}
.item--description {
font-size: 16px;
line-height: 1.625;
a {
color: inherit;
&:hover {
color: inherit;
text-decoration: underline;
}
}
}
&:hover .item--icon i {
-webkit-animation: toRightFromLeft 0.3s forwards;
-moz-animation: toRightFromLeft 0.3s forwards;
animation: toRightFromLeft 0.3s forwards;
}
}
&.style2 {
.item--icon {
background-color: transparent !important;
background-image: none !important;
line-height: 1;
margin-right: 20px;
margin-top: 6px;
i {
font-size: 58px;
color: $primary_color;
}
}
.item--title {
font-size: 20px;
color: #383838;
margin-bottom: 10px;
}
}
&.style3 {
.item--icon {
background-color: transparent !important;
background-image: none !important;
line-height: 1;
margin-right: 35px;
margin-top: 6px;
i {
font-size: 65px;
@extend .text-gradient;
@include background-horizontal($gradient_color_from, $gradient_color_to);
}
}
.item--title {
font-size: 24px;
margin-top: 9px;
margin-bottom: 7px;
}
}
&.style4 {
padding: 35px 13px 25px 28px;
position: relative;
height: auto !important;
&:before {
content: '';
height: 5px;
width: 0;
@include transition(all 300ms linear 0ms);
@include background-horizontal($gradient_color_from, $gradient_color_to);
position: absolute;
bottom: 0;
left: 0;
}
.item--icon {
background-color: transparent !important;
background-image: none !important;
line-height: 1;
margin-right: 17px;
margin-top: 0px;
i {
font-size: 38px;
@extend .text-gradient;
}
}
.item--title {
font-size: 18px;
margin-top: 0px;
margin-bottom: 0px;
}
.item--description {
font-size: 15px;
}
&:hover:before {
width: 100%;
}
}
&.style5 {
.item--icon {
margin-top: -4px;
height: 40px;
width: 42px;
line-height: 42px;
position: relative;
@include border-radius(42px);
background-color: $primary_color;
margin-right: 22px;
min-width: 42px;
* {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
color: #fff;
}
i {
font-size: 22px;
&.fa-question-circle {
&:before {
content: '?';
@include font-family-default($body_default_font);
font-weight: 700;
}
}
}
}
.item--title {
margin-bottom: 26px;
font-size: 24px;
line-height: 32px;
font-weight: 600;
}
.item--description {
font-size: 17px;
line-height: 28px;
color: #000000;
ul {
margin-top: 28px;
margin-bottom: 0;
}
}
}
&.style6 {
.item--icon {
@include border-radius(0px);
margin-right: 22px;
min-width: 60px;
width: 60px;
height: 60px;
margin-top: 6px;
}
.item--title {
margin-top: 0;
}
.item--description {
color: #000000;
}
}
&.style7 {
.item--icon {
font-size: 24px;
color: #fff;
height: 66px;
width: 66px;
min-width: 66px;
line-height: 66px;
background-color: $primary_color;
text-align: center;
@include border-radius(10px);
margin-right: 23px;
position: relative;
overflow: hidden;
@include box-shadow(0 6px 16px rgba($primary_color, 0.36));
* {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
}
i {
font-size: 44px;
color: #fff;
}
img {
max-height: 44px;
}
@media #{$max-md} {
height: 46px;
width: 46px;
min-width: 46px;
line-height: 46px;
@include border-radius(7px);
margin-right: 18px;
i {
font-size: 30px;
}
img {
max-height: 30px;
}
}
}
.item--title {
margin-bottom: 10px;
font-size: 20px;
}
.item--description {
font-size: 16px;
line-height: 26px;
color: #000000;
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
&:hover .item--icon {
i, img, svg {
-webkit-animation: toRightFromLeft 0.3s forwards;
-moz-animation: toRightFromLeft 0.3s forwards;
animation: toRightFromLeft 0.3s forwards;
}
}
}
&.style8 {
.item--icon {
line-height: 1;
margin-right: 30px;
i {
font-size: 58px;
@extend .text-gradient;
display: inline-block;
}
}
.item--title {
font-size: 22px;
}
.item--description {
font-size: 16px;
line-height: 26px;
}
&:hover .item--icon i {
animation: icon-bounce 600ms ease-out infinite;
-webkit-animation: icon-bounce 600ms ease-out infinite;
}
}
&.style9 {
display: block;
text-align: center;
@include transition(all 200ms linear 0ms);
.item--icon {
margin-bottom: 30px;
display: inline-block;
i {
font-size: 75px;
color: $primary_color;
}
img {
max-height: 75px;
}
i, img {
@include transition(all 300ms linear 0ms);
}
}
.item--title {
margin-bottom: 12px;
font-size: 20px;
color: #161b39;
}
.item--description {
line-height: 1.625;
padding: 0 20px;
@media #{$max-lg} {
padding: 0;
}
}
&:hover {
@include transform(translateY(-36px));
.item--icon {
i, img {
@include transform(rotateY(360deg));
}
}
}
}
&.style13 {
.item--icon {
margin-right: 18px;
line-height: 1;
i {
font-size: 30px;
color: $primary_color;
}
}
.item--title {
font-size: 16px;
color: #000;
margin-bottom: 2px;
}
.item--description {
font-size: 14px;
line-height: 22px;
color: #454545;
}
}
}
.line-gap .ct-fancy-box-layout1.style4 {
&:after {
content: '';
width: 1px;
height: 54px;
background-color: #e4eaee;
position: absolute;
right: 0;
top: 50%;
@include transform(translate(0, -50%));
@media #{$max-md} {
display: none;
}
}
}
.ct-fancy-box-layout2 {
position: relative;
z-index: 1;
padding: 35px 60px;
display: flex;
flex-wrap: nowrap;
@media #{$max-md} {
padding-left: 30px;
padding-right: 20px;
}
@media #{$max-sm} {
padding-left: 20px;
}
&:before, &:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
@include border-radius(7px);
z-index: -1;
@include transition(all 300ms linear 0ms);
}
&:before {
background-color: #222222;
@include box-shadow(0 6px 21px rgba(#000000, 0.32));
}
&:after {
@include background-horizontal($gradient_color_from, $gradient_color_to);
opacity: 0;
}
.item--title {
font-size: 20px;
margin-bottom: 8px;
color: #fff;
}
.item--description {
font-size: 15px;
line-height: 26px;
color: #f7f7f7;
a {
color: inherit;
&:hover {
color: inherit;
text-decoration: underline;
}
}
}
.item--icon {
margin-right: 22px;
line-height: 1;
i {
@extend .text-gradient;
font-size: 65px;
}
}
&:hover {
&:before {
opacity: 0;
}
&:after {
opacity: 1;
}
.item--icon i {
background-image: none;
background-color: transparent;
text-fill-color: transparent;
-o-text-fill-color: #fff;
-ms-text-fill-color: #fff;
-moz-text-fill-color: #fff;
-webkit-text-fill-color: #fff;
}
}
}
.ct-fancy-box-layout3 {
display: flex;
flex-wrap: nowrap;
.item--icon {
font-size: 24px;
color: #fff;
height: 63px;
width: 61px;
min-width: 61px;
line-height: 61px;
text-align: center;
@include border-radius(0px);
margin-top: 10px;
margin-right: 38px;
position: relative;
overflow: hidden;
border: 1px solid rgba(#fff, 0.25);
background-color: rgba(#707274, 0.25);
}
.item--title {
margin-top: 4px;
margin-bottom: 7px;
font-size: 24px;
font-weight: 600;
color: #fff;
}
.item--description {
line-height: 1.625;
color: #b7b7b7;
}
&:hover .item--icon i {
-webkit-animation: toTopFromBottom 0.3s forwards;
-moz-animation: toTopFromBottom 0.3s forwards;
animation: toTopFromBottom 0.3s forwards;
}
&.style2 {
.item--icon {
width: 60px;
height: 60px;
border: none;
background-color: #0e0e0e;
min-width: 60px;
margin-right: 23px;
}
.item--title {
color: #0e0e0e;
margin-top: 0;
}
.item--description {
color: #383838;
a {
color: inherit;
&:hover {
color: inherit;
text-decoration: underline;
}
}
}
}
}
.ct-fancy-box-layout4 {
@include box-shadow(0 1px 18px rgba(#000000, 0.11));
background-color: #fff;
padding: 44px 20px;
text-align: center;
@include transition(all 300ms linear 0ms);
&:hover {
@include transform(translateY(-10px));
}
.item--icon {
line-height: 1;
margin-bottom: 20px;
i {
font-size: 56px;
color: $primary_color;
}
}
.item--title {
margin-bottom: 17px;
font-size: 20px;
}
.item--description {
font-size: 15px;
line-height: 26px;
a {
color: inherit;
&:hover {
color: inherit;
text-decoration: underline;
}
}
}
}
.ct-fancy-box-layout5 {
position: relative;
z-index: 1;
&:before {
content: '';
z-index: -1;
position: absolute;
top: 59px;
right: 40px;
bottom: 0;
left: 0px;
@include background-gradient-top($gradient_color_from, $gradient_color_to);
@include border-radius(0 171px 171px 0);
@include box-shadow(0 6px 8px rgba(#000000, 0.23) inset);
@include transition(all 200ms linear 0ms);
opacity: 0;
}
&:hover::before {
opacity: 1;
bottom: -33px;
left: -30px;
}
.ct-fancy-box-inner {
background-color: #000000;
color: #e9e9e9;
padding: 50px 30px 76px 40px;
@media #{$max-lg} {
padding-left: 30px;
padding-bottom: 96px;
}
@media #{$max-md} {
padding-left: 20px;
padding-right: 15px;
}
@media #{$max-sm} {
height: auto !important;
}
}
.item--icon {
line-height: 1;
margin-bottom: 30px;
i {
font-size: 60px;
@extend .text-gradient;
@include background-gradient-top($gradient_color_from, $gradient_color_to);
}
}
.item--title {
font-size: 22px;
color: #ffffff;
margin-bottom: 20px;
@media #{$max-md} {
font-size: 18px;
}
}
.item--description {
line-height: 28px;
font-size: 16px;
margin-bottom: 18px;
@media #{$max-md} {
font-size: 15px;
line-height: 26px;
}
a {
color: inherit;
&:hover {
color: inherit;
text-decoration: underline;
}
}
}
.item--list {
list-style: none;
margin-bottom: 0;
font-weight: 700;
@media #{$max-md} {
font-size: 14px;
}
i {
margin-right: 12px;
font-weight: 400;
@extend .text-gradient;
@include background-gradient-top($gradient_color_from, $gradient_color_to);
}
li + li {
margin-top: 6px;
}
}
.item--link {
height: 45px;
width: 45px;
position: absolute;
bottom: 27px;
right: 24px;
background-color: #535353;
line-height: 45px;
text-align: center;
border-radius: 45px;
color: #ffffff;
font-size: 30px;
z-index: 1;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
@include border-radius(100%);
width: 100%;
height: 100%;
@include background-gradient-top($gradient_color_from, $gradient_color_to);
z-index: -1;
@include transition(all 300ms linear 0ms);
opacity: 0;
}
&:hover:before {
opacity: 1;
}
}
}
.ct-fancy-box-layout6 {
background-color: #fff;
text-align: center;
@include box-shadow(0 1px 15px rgba(#000000, 0.11));
padding: 80px 50px 50px 50px;
position: relative;
@include transition(all 300ms linear 0ms);
margin-top: 66px;
@media #{$max-lg} {
padding-left: 30px;
padding-right: 30px;
}
&:before {
content: '';
height: 6px;
width: 0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
@include background-horizontal($gradient_color_from, $gradient_color_to);
@include transition(all 260ms linear 0ms);
}
&:hover {
@include transform(translateY(20px));
&:before {
width: 100%;
}
}
.item--icon {
width: 112px;
height: 112px;
position: absolute;
top: -66px;
left: 0;
right: 0;
margin: auto;
background-color: $gradient_color_from;
@include border-radius(100%);
i {
font-size: 45px;
color: #fff;
}
* {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
}
}
.item--title {
font-size: 20px;
}
.item--description {
font-size: 16px;
line-height: 26px;
}
.item--link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9;
}
}
.ct-fancy-box-layout7 {
position: relative;
z-index: 1;
padding: 50px 50px 40px;
text-align: center;
@media #{$max-lg} {
padding-left: 30px;
padding-right: 30px;
}
&:before {
content: '';
background-color: #fff;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
}
.item--icon {
line-height: 1;
margin-bottom: 15px;
i {
font-size: 60px;
color: $primary_color;
}
}
.item--title {
font-size: 22px;
@include transition(all 300ms linear 0ms);
}
.item--description {
@include transition(all 300ms linear 0ms);
color: #000000;
font-size: 16px;
color: 26px;
margin-bottom: 18px;
@media #{$max-md} {
font-size: 14px;
line-height: 24px;
}
}
.item--button {
a {
font-size: 15px;
color: #000000;
font-weight: 700;
@include font-family-heading($heading_default_font);
display: inline-block;
padding-right: 32px;
position: relative;
i {
margin-left: 16px;
font-size: 19px;
position: absolute;
right: 0;
top: 50%;
@include transform(translate(0, -50%));
@include transition(all 300ms linear 0ms);
}
}
}
.item--overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
@include transition(all 300ms linear 0ms);
opacity: 0;
&:before {
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(#000, 0.7);
position: absolute;
}
}
&:hover {
.item--overlay {
opacity: 1;
}
.item--title, .item--description {
color: #fff;
}
.item--button a {
color: $primary_color;
i {
right: -15px;
color: #fff;
}
}
}
}
.ct-fancy-box-layout8 {
padding: 62px 40px 52px;
background-color: $primary_color;
@media #{$max-lg} {
padding-left: 30px;
padding-right: 30px;
}
@media #{$max-sm} {
height: auto !important;
}
.item--icon {
line-height: 1;
margin-bottom: 18px;
img {
max-height: 48px;
}
i {
font-size: 48px;
color: #fff;
}
img, i {
@include transition(all 300ms linear 0ms);
}
}
.item--title {
font-size: 20px;
line-height: 28px;
color: #fff;
margin-bottom: 10px;
}
.item--description {
font-size: 17px;
line-height: 28px;
color: #fff;
}
&:hover {
img, i {
@include transform(rotateY(360deg));
}
}
}
.ct-fancy-box-layout9 {
display: flex;
flex-wrap: nowrap;
padding: 32px 16px 32px 34px;
position: relative;
z-index: 1;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
@media #{$max-lg} {
padding-left: 20px;
}
&:before {
content: '';
z-index: -1;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 5px;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
background-color: $primary_color;
}
.item--icon {
line-height: 1;
margin-right: 20px;
color: $primary_color;
i {
font-size: 42px;
@include transition(all 300ms linear 0ms);
@media #{$max-md} {
font-size: 32px;
}
}
}
.item--title {
font-size: 20px;
margin-bottom: 7px;
@include transition(all 300ms linear 0ms);
@media #{$max-lg} {
font-size: 18px;
}
}
.item--description {
line-height: 1.625;
@include transition(all 300ms linear 0ms);
@media #{$max-lg} {
font-size: 14px;
}
}
.item--holder {
position: relative;
}
.item--button {
position: absolute;
bottom: -28px;
left: 0;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
opacity: 0;
visibility: hidden;
.btn-line {
color: #fff;
span:before {
background-color: #fff;
}
i {
color: inherit;
}
}
}
&:hover, &.active {
&:before {
height: 100%;
}
.item--icon i, .item--title, .item--description {
color: #fff;
}
.item--button {
opacity: 1;
visibility: visible;
}
}
&.btn-active {
.item--description {
margin-bottom: 6px;
}
&:hover, &.active {
padding-bottom: 46px;
}
}
&.style2 {
padding-left: 15px;
.item--icon {
margin-right: 28px;
width: 83px;
min-width: 83px;
height: 83px;
@include border-radius(83px);
background-color: $primary_color;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
color: #fff;
@include box-shadow(0 7px 10px rgba($primary_color, 0.19));
position: relative;
i {
font-size: 48px;
}
* {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
}
@media #{$max-md} {
width: 60px;
min-width: 60px;
height: 60px;
margin-right: 15px;
i {
font-size: 36px;
}
}
}
.item--title {
color: #1d0031;
@media #{$max-md} {
font-size: 18px;
}
}
.item--description {
color: #383838;
}
&:hover, &.active {
.item--icon {
background-color: #fff;
color: $primary_color;
i {
color: inherit;
}
}
.item--title {
color: #fff;
}
.item--description {
color: #ffffff;
}
}
}
}
.ct-fancy-box-layout3-wrap.style2 {
min-height: 167px;
}
.ct-fancy-box-layout10 {
.item--icon {
line-height: 1;
margin-bottom: 17px;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
i {
font-size: 60px;
color: $primary_color;
}
img {
max-height: 61px;
}
}
.item--title {
font-size: 22px;
@media #{$max-md} {
font-size: 18px;
}
}
.item--description {
line-height: 1.625;
color: #000;
margin-bottom: 28px;
}
&:hover {
.item--icon {
animation-name: icon-bounce;
-moz-animation-name: icon-bounce;
}
}
}
.ct-fancy-box-layout11 {
display: flex;
flex-wrap: nowrap;
align-items: center;
@media #{$min-xl} {
justify-content: center;
padding: 0 30px 0 10px;
}
@media #{$max-md} {
display: block;
text-align: center;
}
.item--icon {
width: 67px;
height: 67px;
min-width: 67px;
line-height: 1;
position: relative;
@include border-radius(67px);
margin-right: 25px;
border: 3px solid $primary_color;
z-index: 1;
@media #{$max-lg} {
margin-right: 15px;
}
@media #{$max-md} {
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
i {
font-size: 30px;
color: #fff;
@include transition(.2s cubic-bezier(.24,.74,.58,1));
}
* {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
}
&:before {
z-index: -1;
content: '';
position: absolute;
top: -1px;
left: -1px;
bottom: -1px;
right: -1px;
background-color: $primary_color;
@include border-radius(100%);
@include transition(.2s cubic-bezier(.24,.74,.58,1));
}
}
.item--title {
margin-bottom: 5px;
font-size: 15px;
font-family: inherit;
}
.item--description {
font-size: 15px;
}
.item-readmore {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9;
}
.item--holder {
position: relative;
}
&:hover .item--icon {
background-color: transparent;
i {
color: $primary_color;
}
&:before {
@include transform(scale(1.5));
opacity: 0;
}
}
}
.ct-fancy-box-layout12 {
background-color: #ffffff;
padding: 40px 30px 43px;
@include box-shadow(0 0 59px rgba(#000000, 0.05));
@include transition(.3s cubic-bezier(.24,.74,.58,1));
text-align: center;
position: relative;
.item--icon {
line-height: 1;
margin-bottom: 21px;
i {
font-size: 65px;
color: $primary_color;
}
img {
max-width: 132px;
}
}
.item--title {
font-size: 22px;
margin-bottom: 18px;
color: #1d0031;
}
.item--description {
color: #0e0e0e;
line-height: 1.625;
}
.item-readmore {
position: absolute;
font-size: 24px;
color: #fff;
bottom: -45px;
left: 0;
right: 0;
margin: auto;
font-weight: 500;
@include font-family-heading($heading_default_font);
background-color: $primary_color;
@include box-shadow(0 5px 16px rgba($primary_color, 0.17));
width: 50px;
height: 50px;
line-height: 50px;
@include border-radius(100%);
opacity: 0;
visibility: hidden;
&:hover {
@include transform(rotate(90deg));
}
}
&:hover {
@include box-shadow(0 0 29px rgba(#000000, 0.1));
@include transform(translateY(-11px));
.item-readmore {
bottom: -25px;
opacity: 1;
visibility: visible;
}
}
}
.col-line-left {
z-index: 1;
&:before {
z-index: -1;
content: '';
width: 0;
height: 48px;
border-left: 1px dashed #bababa;
position: absolute;
left: 0;
top: 50%;
@include transform(translate(0, -50%));
@media #{$max-lg} {
display: none;
}
}
}
.col-line {
@media #{$min-xl} {
.ct-fancy-box-layout10 .item--description {
max-width: 300px;
}
> .elementor-column-wrap:before {
width: 0;
height: 140px;
content: '';
border-left: 1px dashed #bfbfbf;
position: absolute;
top: 50%;
left: 0;
@include transform(translate(0, -50%));
}
}
}
@media #{$min-xl} {
.col-line-style1 {
z-index: 1;
&:before {
z-index: -1;
content: '';
width: 0;
height: 105px;
border-left: 2px dashed #d3ddf2;
position: absolute;
left: -15px;
top: 50%;
@include transform(translate(0, -50%));
}
}
.col-dot-style1 {
z-index: 1;
&:before {
z-index: -1;
content: '';
width: 12px;
height: 12px;
@include border-radius(12px);
position: absolute;
left: -6px;
top: 50%;
@include transform(translate(0, -50%));
@include background-gradient-rotate(120deg, $third_color, $four_color);
}
}
.ct-inner-white:before {
content: '';
width: 3000px;
height: 100%;
background-color: inherit;
position: absolute;
top: 0;
right: 100%;
}
}
.col-line-counter {
&:before {
z-index: 1;
content: '';
width: 0;
height: 70px;
border-left: 2px dashed #dfdfdf;
position: absolute;
left: 1px;
top: 50%;
@include transform(translate(0, -50%));
@media #{$max-lg} {
display: none;
}
}
}
.col-line-mega {
@media #{$min-xl} {
> .elementor-column-wrap:before {
width: 0;
height: 82%;
content: '';
border-left: 1px solid #f1f0f0;
position: absolute;
top: 50%;
left: 0;
@include transform(translate(0, -50%));
}
}
}
@media #{$min-xl} {
.col-line-sm {
> .elementor-column-wrap:before {
width: 0;
height: 100px;
content: '';
border-left: 1px dashed #bfbfbf;
position: absolute;
top: 50%;
left: 0;
@include transform(translate(0, -50%));
}
}
}
@media #{$min-md} {
.line-gap2 {
&:after {
content: '';
width: 0;
border-right: 1px dashed #9f9f9f;
height: 190px;
position: absolute;
top: 50%;
right: 0;
@include transform(translate(0, -50%));
z-index: 1;
}
}
.fancybox-line-right {
.ct-fancy-box-layout15 {
border-right: 1px solid #e9ebee;
@include transition(all 200ms linear 0ms);
&:hover {
border-color: transparent;
}
}
}
}
.ct-fancy-box-layout17 {
.item--holder {
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
@include border-radius(8px);
overflow: hidden;
padding: 40px;
position: relative;
z-index: 1;
.item--overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
&:before {
content: '';
background-color: rgba(#000000, 0.8);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.item--icon {
line-height: 1;
margin-bottom: 18px;
i {
font-size: 58px;
color: $primary_color;
}
}
.item--title {
margin-bottom: 0;
font-size: 22px;
line-height: 24px;
color: #fff;
font-family: inherit;
}
.item--number {
line-height: 1;
font-size: 46px;
color: $primary_color;
font-weight: 700;
position: absolute;
bottom: 18px;
right: 16px;
}
}
.item--holder-hover {
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f4f4f4;
@include border-radius(8px);
z-index: 99;
padding: 36px 32px;
@include transform(translateY(40px));
.item--title {
margin-bottom: 13px;
font-size: 22px;
line-height: 24px;
color: #0d0d0d;
padding-bottom: 14px;
position: relative;
&:before {
content: '';
width: 28px;
height: 3px;
background-color: $primary_color;
position: absolute;
bottom: 0;
left: 0;
}
}
.item--description {
color: #6e6e6e;
font-size: 16px;
line-height: 24px;
}
.item--link {
height: 54px;
line-height: 54px;
text-align: center;
font-size: 20px;
width: 54px;
background-color: $primary_color;
position: absolute;
bottom: -29px;
left: 50%;
@include transform(translate(-50%, 0));
@include border-radius(54px);
color: #fff;
overflow: hidden;
i {
display: inline-block;
}
&:hover i {
-o-animation: toRightFromLeft 0.3s forwards;
-ms-animation: toRightFromLeft 0.3s forwards;
-webkit-animation: toRightFromLeft 0.3s forwards;
animation: toRightFromLeft 0.3s forwards;
}
}
}
&:hover {
.item--holder {
opacity: 0;
}
.item--holder-hover {
opacity: 1;
@include transform(translateY(-8px));
visibility: visible;
}
}
}
.digital-col1 {
&:before {
content: '';
width: 1px;
height: 54px;
background: #e9e9e9;
position: absolute;
top: 50%;
left: 0;
@include transform(translate(0, -50%));
@media #{$max-lg} {
display: none;
}
}
}
.ct-fancy-box-layout18 {
background-color: #f4f4f4;
padding: 30px 24px;
position: relative;
z-index: 1;
display: flex;
flex-wrap: nowrap;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
@media #{$max-md} {
display: block;
}
&:before {
content: '';
height: 7px;
width: 103px;
background-color: $primary_color;
position: absolute;
top: 0;
left: 24px;
}
.item--icon {
width: 103px;
min-width: 103px;
height: 105px;
background-color: #fff;
@include border-radius(5px);
position: relative;
margin-right: 24px;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
@media #{$max-md} {
margin-bottom: 24px;
margin-right: 0;
}
* {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
}
i {
font-size: 50px;
color: #000000;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
}
}
.item--title {
font-size: 22px;
color: #000000;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
}
.item--description {
font-size: 17px;
line-height: 24px;
color: #6e6e6e;
}
.item--button {
display: none;
a {
font-size: 16px;
color: #fff;
i {
margin-left: 8px;
color: $primary_color;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
}
&:hover i {
margin-left: 12px;
}
}
}
.icon-abs {
position: absolute;
bottom: 10px;
right: 15px;
line-height: 1;
z-index: -1;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
opacity: 0;
i {
font-size: 68px;
color: #333333;
}
}
&:hover {
background-color: #000;
.item--title {
color: #fff;
}
.item--icon {
background-color: #373737;
i {
color: $primary_color;
}
}
.icon-abs {
opacity: 1;
}
}
}
.ct-fancy-box-layout19 {
position: relative;
z-index: 1;
padding-right: 80px;
@media #{$max-md} {
padding-right: 30px;
}
.item--icon {
width: 69px;
height: 71px;
background-color: #fff;
@include border-radius(8px);
@include box-shadow(0 15px 29px rgba(#0045ac, 0.10));
position: relative;
margin-bottom: 32px;
img {
max-height: 42px;
}
i {
color: $primary_color;
font-size: 42px;
}
* {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
}
}
.item--title {
font-size: 22px;
color: #1a2428;
margin-bottom: 18px;
@media #{$max-md} {
font-size: 20px;
}
}
.item--description {
font-size: 16px;
line-height: 1.625;
color: #666;
@media #{$max-md} {
font-size: 14px;
}
}
.item--number {
line-height: 1;
font-size: 146px;
@extend .text-gradient;
position: absolute;
bottom: -37px;
right: 0;
@include background-gradient-bottom(#f9f9f9 13%, #bedbf6);
font-weight: 700;
z-index: -1;
@media #{$max-md} {
font-size: 100px;
bottom: -15px;
}
}
}
.ct-fancy-box-layout20 {
text-align: center;
position: relative;
z-index: 99;
.item--icon {
width: 86px;
height: 86px;
margin: 0 auto 31px auto;
@include border-radius(86px 0 86px 86px);
color: #fff;
font-size: 32px;
position: relative;
@include background-gradient-rotate(-90deg, $gradient_color_from, $gradient_color_to);
@include box-shadow(0 9px 18px rgba($gradient_color_from, 0.34));
* {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
}
&:before {
content: '';
height: 130px;
width: 5px;
@include background-gradient-bottom($gradient_color_to, $gradient_color_from);
position: absolute;
bottom: -17px;
left: 46px;
z-index: -1;
@include transform(rotate(45deg) scaleY(1.4));
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
opacity: 0;
}
}
.item--title {
font-size: 24px;
margin-bottom: 22px;
color: #1b1b1b;
}
.item--description {
line-height: 1.5;
color: #666666;
}
&:hover .item--icon:before {
opacity: 1;
@include transform(rotate(45deg) scaleY(1));
}
} |