.ct-icon-hidden-sidebar {
.icon-hidden-sidebar {
font-weight: 400;
font-size: 18px;
cursor: pointer;
@include transition(all 300ms linear 0ms);
}
&.style2 {
height: 18px;
display: flex;
.item--inner {
width: 31px;
height: 18px;
position: relative;
display: inline-block;
cursor: pointer;
.icon-line, &:before, &:after {
content: '';
position: absolute;
left: 0;
background-color: #030303;
width: 100%;
height: 2px;
@include border-radius(2px);
@include transition(all 300ms linear 0ms);
}
&:before, &:after {
width: 16px;
}
&:before {
top: 8px;
}
&:after {
bottom: 0;
}
&:hover {
&:before, &:after {
width: 100%;
}
}
}
.icon-hidden-sidebar {
display: none;
}
}
}
.ct-contact-info1.style3 {
text-align: center;
li {
display: block;
}
.ct-contact-icon {
margin: 0 0 42px;
width: 44px;
height: 44px;
line-height: 44px;
position: relative;
z-index: 1;
i {
color: #fff;
}
&:before {
content: '';
z-index: -1;
width: 100%;
height: 100%;
@include background-gradient-rotate(40deg, $gradient_color_from, $gradient_color_to);
position: absolute;
top: 0;
left: 0;
@include transform(rotate(45deg));
}
}
.ct-contact-content {
display: block;
font-size: 16px;
line-height: 1.625;
color: #000c3f;
@media #{$max-md} {
font-size: 13px;
line-height: 24px;
}
}
}
.ct-blog-carousel-layout1.style5 {
.entry-featured {
img {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
}
.entry-meta i {
color: $third_color;
}
.entry-title {
color: #000c3f;
}
.entry-holder {
position: relative;
z-index: 1;
&:before {
content: '';
position: relative;
@include border-radius(5px);
@include background-horizontal($gradient_color_from, $gradient_color_to);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
@include transition(all 300ms linear 0ms);
opacity: 0;
}
}
.entry-readmore a {
@include background-horizontal(#fff, #fff);
}
.grid-item-inner:hover {
.entry-holder {
@include box-shadow(none);
&:before {
opacity: 1;
}
}
.entry-title {
color: #fff;
}
}
}
.ct-blog-carousel-layout1.style6 {
.slick-dots {
margin-top: 0;
}
.entry-featured img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.entry-meta {
font-family: inherit;
color: #666;
i {
color: $primary_color;
}
}
.entry-title {
font-family: inherit;
color: #000;
}
.grid-item-inner:hover {
.entry-featured img {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
.entry-holder {
background-color: #000;
}
.entry-title {
color: #fff;
}
}
}
.ct-service-carousel12 {
.item--meta {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 16px 30px 16px 40px;
@include background-gradient-bottom(rgba($gradient_color_from, 0.95), rgba($gradient_color_to, 0.95));
display: flex;
flex-wrap: nowrap;
align-items: center;
@include transition(all .35s cubic-bezier(.645,.045,.355,1));
@media #{$max-lg} {
padding-left: 30px;
padding-right: 30px;
}
@media #{$max-sm} {
padding-left: 20px;
padding-right: 20px;
}
.item--icon {
margin-right: 20px;
line-height: 1;
i {
font-size: 48px;
color: #fff;
@media #{$max-sm} {
font-size: 42px;
}
}
}
.item--title {
margin-bottom: 0;
font-size: 22px;
color: #fff;
@media #{$max-sm} {
font-size: 20px;
}
}
}
.item--holder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(#000e1b, 0.83);
padding: 45px 40px;
@include transition(all .35s cubic-bezier(.645,.045,.355,1));
@include transform(translateY(100%));
@media #{$max-lg} {
padding: 40px 30px;
}
@media #{$max-sm} {
padding-left: 20px;
padding-right: 20px;
}
.item--head {
display: flex;
flex-wrap: nowrap;
align-items: center;
margin-bottom: 20px;
}
.item--icon {
line-height: 1;
margin-right: 20px;
i {
font-size: 46px;
@media #{$max-sm} {
font-size: 42px;
}
}
}
.item--title {
margin-bottom: 0;
font-size: 22px;
@media #{$max-sm} {
font-size: 20px;
}
a {
color: #fff;
&:hover {
color: #fff;
}
}
}
.item--content {
color: #d6d6d6;
margin-bottom: 35px;
@media #{$max-lg} {
font-size: 15px;
line-height: 24px;
margin-bottom: 28px;
}
@media #{$max-sm} {
height: 47px;
overflow: hidden;
}
}
.item-readmore a {
line-height: 47px;
border-radius: 2px;
padding: 0 23px;
}
}
.grid-item-inner {
position: relative;
overflow: hidden;
@include border-radius(20px 20px 0 0);
&:hover {
.item--holder {
@include transform(translateY(0%));
opacity: 1;
}
.item--meta {
@include transform(translateY(100%));
opacity: 0;
}
}
}
}
.ct-video-player {
> img {
width: 100%;
}
.ct-video-button {
&.style11 {
height: 92px;
width: 92px;
background-image: none;
color: #000a93;
background-color: rgba(#fff, 0.9);
font-size: 15px;
z-index: 1;
i {
@extend .text-gradient;
@include background-horizontal(#fc1964, #ecd038);
font-size: 24px;
}
.line-video-animation {
display: none;
}
&:before {
content: "";
position: absolute;
z-index: 0;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: rgba(#fff, 0.76);
border-radius: 50%;
animation: pulse-border2 1500ms ease-out infinite;
z-index: -1;
}
&:hover, &:focus {
&:before {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
}
}
}
}
.ct-counter .ct-counter-inner .icon-color-gradient i {
@extend .text-gradient;
}
.ct-portfolio-carousel3 {
.item--featured {
img {
width: 100%;
@include transition(all 300ms linear 0ms);
}
}
.item--title {
font-size: 18px;
margin-bottom: 0;
color: #0e0e0e;
background-color: #fff;
position: relative;
padding: 26px 20px;
text-align: center;
z-index: 1;
&:before {
content: '';
z-index: -1;
@include background-horizontal($gradient_color_from, $gradient_color_to);
position: absolute;
opacity: 0;
top: 0;
left: 0;
width: 0;
height: 100%;
@include transition(all 300ms linear 0ms);
}
a {
color: inherit;
}
}
.grid-item-inner:hover {
.item--featured img {
-webkit-filter: grayscale(90%);
filter: grayscale(90%);
}
.item--title {
&:before {
width: 100%;
opacity: 1;
}
a {
color: #fff;
}
}
}
}
@media #{$min-xl} {
.portfolio-offset-right1 {
.ct-carousel-inner {
margin-right: -160px;
}
}
}
@media #{$max-lg} {
.portfolio-offset-right1 {
.ct-carousel-inner {
margin-right: -120px;
}
}
}
@media #{$max-sm} {
.portfolio-offset-right1 {
.ct-carousel-inner {
margin-right: 0px;
}
}
}
.slider-social {
position: relative;
padding-top: 45px;
width: 42px;
&:before {
content: '';
height: 34px;
width: 2px;
background-color: #4b4b4b;
position: absolute;
top: 0;
left: 50%;
@include transform(translate(-50%, 0));
}
br {
display: none;
}
a {
display: block;
width: 28px;
height: 28px;
line-height: 28px;
color: #767676 !important;
text-align: center;
margin: 10px 7px;
@include transform(rotate(-90deg));
&:hover {
color: $primary_color !important;
}
}
}
.line-text-slider {
padding-right: 53px;
position: relative;
font-size: 16px;
font-weight: 700;
color: #fff;
@include transform(rotate(-90deg));
transform-origin: left center;
-webkit-transform-origin: left center;
display: inline-block;
&:before {
content: '';
height: 2px;
width: 34px;
position: absolute;
top: 50%;
right: 0;
@include transform(translate(0, -50%));
background-color: $primary_color;
}
}
.ct-fancy-box-layout1.style10 {
.item--icon {
width: 52px;
height: 56px;
line-height: 56px;
min-width: 52px;
background-color: #fff;
margin-right: 13px;
text-align: center;
@include box-shadow(0 9px 18px rgba(#0c0c0c, 0.19));
i {
font-size: 28px;
color: #000;
}
}
.item--title {
font-size: 24px;
line-height: 26px;
color: #000;
margin-top: 4px;
font-family: inherit;
margin-bottom: 12px;
}
}
.ct-fancy-box-layout1.style11 {
display: block;
.item--title {
font-size: 24px;
color: #000;
}
.item--icon {
background-color: #000000;
width: 62px;
height: 62px;
position: relative;
font-size: 34px;
color: $primary_color;
margin-bottom: 13px;
i {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
}
svg {
height: 35px;
}
img {
max-height: 40px;
}
&:before {
content: '';
height: 26px;
width: 5px;
background-color: $primary_color;
position: absolute;
top: 18px;
left: 0;
}
.item--shape {
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: $primary_color;
display: block;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
}
}
.item--description {
color: #575757;
line-height: 1.625;
@media #{$max-md} {
font-size: 15px;
}
}
&:hover {
.item--icon .item--shape {
@include transform(rotate(9deg));
transform-origin: bottom left;
-webkit-transform-origin: bottom left;
}
}
}
.ct-portfolio-carousel4 {
padding-left: 89px;
padding-bottom: 70px;
padding-right: 30px;
position: relative;
z-index: 1;
@media #{$max-xl} {
padding-right: 30px;
padding-left: 30px;
}
@media #{$max-lg} {
padding-right: 15px;
padding-left: 15px;
}
&:before {
content: '';
background-color: #000;
position: absolute;
top: 60px;
left: 0;
width: 100%;
bottom: 0;
z-index: -1;
}
.item--featured {
img {
width: 100%;
-webkit-filter: grayscale(95%);
filter: grayscale(95%);
}
}
.item--title {
margin-bottom: 0;
font-size: 18px;
font-family: inherit;
color: #fff;
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.item--category {
font-size: 14px;
color: $primary_color;
font-family: "Nunito Sans";
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.item--meta {
position: absolute;
bottom: 48px;
left: 48px;
right: 48px;
background-color: rgba(#000, 0.82);
padding: 12px 22px;
opacity: 0;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
@include transform(translateY(-40px));
@media #{$max-xl} {
left: 40px;
right: 40px;
}
@media #{$max-sm} {
left: 30px;
right: 30px;
}
}
.grid-item-inner {
position: relative;
padding: 18px;
background-color: #fff;
@include box-shadow(0 2px 32px rgba(#0c0c0c, 0.08));
margin: 20px 0 30px;
&:hover {
.item--meta {
opacity: 1;
@include transform(translateY(0px));
}
}
}
.ct-slick-carousel[data-arrows="true"] {
padding-bottom: 0;
.slick-arrow {
margin: 0;
padding: 0;
width: 30px;
height: 20px;
line-height: 20px;
background-color: transparent;
@include box-shadow(none);
bottom: -16px;
top: auto;
right: auto;
left: 200px;
color: #383838;
&:hover {
color: $primary_color;
}
&:before {
content: "\f116";
font-family: Flaticon-v6;
font-size: 20px;
}
&:after {
display: none;
}
&.slick-prev {
@include transform(scaleX(-1));
}
&.slick-next {
left: 250px;
}
}
}
.slick-dots {
margin: 0;
position: absolute;
width: 150px;
height: 2px;
background-color: #383838;
left: 15px;
bottom: -7px;
li {
margin: 0;
width: 100%;
display: flex;
flex-wrap: nowrap;
button {
height: 2px;
width: 100%;
padding: 0;
background: $primary_color;
@include border-radius(0px);
opacity: 0;
@include transform(scale(1));
}
&.slick-active button {
opacity: 1;
}
}
}
}
.ct-tabs--layout2.type-vertical2 {
display: flex;
flex-wrap: nowrap;
@media #{$max-sm} {
flex-wrap: wrap;
}
.ct-tabs-title {
min-width: 236px;
max-width: 300px;
@media #{$max-sm} {
min-width: 100%;
max-width: 100%;
width: 100%;
}
.ct-tab-title {
cursor: pointer;
display: block;
font-size: 24px;
font-weight: 700;
color: #000000;
background-color: #f4f4f4;
padding: 12px;
@include border-radius(80px 0 0 80px);
display: flex;
flex-wrap: nowrap;
align-items: center;
margin-bottom: 35px;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
@media #{$max-sm} {
@include border-radius(80px);
font-size: 20px;
}
&:last-child {
margin-bottom: 0;
}
i {
height: 56px;
width: 56px;
min-width: 56px;
background-color: #fff;
font-size: 32px;
color: $primary_color;
position: relative;
@include border-radius(56px);
margin-right: 12px;
@include box-shadow(0 6px 9px rgba(#000, 0.06));
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
&:before {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
}
}
&.active, &:hover {
background-color: #000;
color: #fff;
i {
background-color: $primary_color;
color: #000;
}
}
}
}
.ct-tab-content {
display: none;
padding: 37px 45px 37px 45px;
background-color: #fff;
@include box-shadow(0 25px 43px rgba(#0c0c0c, 0.05));
margin-left: 30px;
line-height: 2.1;
color: #000000;
@media #{$max-sm} {
margin-left: 0;
margin-top: 30px;
padding-left: 30px;
padding-right: 30px;
@include box-shadow(0 5px 43px rgba(#0c0c0c, 0.09));
}
}
}
.ct-user {
.ct-user-inner {
max-width: 430px;
margin: auto;
}
.ct-user-holder {
background-color: #fff;
@include border-radius(5px);
position: relative;
overflow: hidden;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
}
.ct-user-meta {
padding: 30px;
}
.ct-user-title {
text-align: center;
margin-bottom: 32px;
font-size: 22px;
text-transform: capitalize;
}
.ct-user-bottom {
border-top: 1px solid #efefef;
padding: 18px 30px;
background-color: #f8f8f8;
text-align: center;
font-size: 15px;
@include border-radius(0 0 5px 5px);
a {
text-decoration: underline;
}
}
.ct-user-form {
.field-group {
position: relative;
margin-bottom: 15px;
&:last-child {
margin-bottom: 0;
}
}
.button {
width: 100%;
line-height: 54px;
}
input {
border-radius: 0;
padding-left: 75px;
}
i {
width: 55px;
height: 32px;
font-size: 24px;
color: $primary_color;
text-align: center;
line-height: 32px;
position: absolute;
top: 50%;
left: 0;
border-right: 1px solid #efefef;
@include transform(translate(0, -50%));
}
span {
color: #fff;
background-color: rgba(255, 0, 0, 0.8);
display: inline-block;
@include border-radius(3px);
font-size: 10px;
line-height: 18px;
padding: 0 8px;
position: absolute;
top: 50%;
@include transform(translate(0, -50%));
right: 10px;
}
}
.ct-user-footer {
padding: 25px 15px 0 15px;
text-align: center;
a {
color: rgba(255, 255, 255, 0.66);
text-decoration: underline;
}
}
.ct-user-form-profile {
text-align: center;
.user-avatar {
max-width: 150px;
margin: auto;
img {
border: 1px solid #ebebeb;
padding: 5px;
}
}
.user-name {
font-size: 15px;
font-weight: 700;
margin-top: 8px;
margin-bottom: 18px;
}
}
}
.logged-in .ct-user {
.ct-user-bottom, .ct-user-title {
display: none;
}
}
.ct-service-carousel13 {
.item--icon {
width: 102px;
height: 102px;
position: absolute;
font-size: 55px;;
color: #fff;
background-color: $primary_color;
top: -34px;
left: 0;
right: 0;
margin: auto;
@include border-radius(1px);
}
.item--holder {
background-color: #f4f4f4;
padding: 100px 30px 38px;
position: relative;
background-image: url(../images/bg-service.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
text-align: center;
z-index: 1;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
@media #{$max-lg} {
padding-left: 20px;
padding-right: 20px;
}
&:before, &:after {
content: '';
position: absolute;
border-style: solid;
z-index: -1;
}
&:before {
top: 11px;
right: 11px;
border-width: 12px;
border-color: $four_color $four_color transparent transparent;
}
&:after {
top: 28px;
right: 28px;
border-width: 7px;
border-color: $primary_color $primary_color transparent transparent;
}
.item--title {
font-size: 24px;
color: #191919;
}
.item--content {
font-size: 16px;
line-height: 1.75;
color: #383838;
}
}
.item--holder-hover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
@include transform(scaleY(0));
transform-origin: bottom center;
-webkit-transform-origin: bottom center;
.item--featured {
position: absolute;
bottom: 34px;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.item--title {
position: absolute;
margin: 0;
padding: 23px 20px 61px;
bottom: 0;
left: 0;
right: 0;
background-color: $primary_color;
text-align: center;
color: #fff;
font-size: 24px;
background-image: url(../images/bg-service-title.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.item-readmore {
position: absolute;
left: 50%;
bottom: -27px;
@include transform(translate(-50%, 0));
a {
display: block;
background-color: #fff;
width: 62px;
height: 62px;
line-height: 62px;
text-align: center;
@include border-radius(62px);
@include box-shadow(0 18px 32px rgba($primary_color, 0.1));
color: $primary_color;
font-size: 24px;
&:hover {
@include box-shadow(0 18px 30px rgba($primary_color, 0.32));
}
}
}
}
.grid-item-inner {
position: relative;
margin-top: 34px;
margin-bottom: 70px;
&:hover {
.item--holder {
opacity: 0;
}
.item--holder-hover {
@include transform(scaleY(1));
}
}
}
&.dot-style-u8 .slick-dots {
margin-top: 0px;
}
}
.ct-list.style6 {
margin-left: 0;
font-size: 15px;
color: #333333;
padding: 10px 0;
position: relative;
&:before {
content: '';
height: 100%;
width: 1px;
background-color: #e6e6e6;
position: absolute;
top: 0;
left: 3px;
}
.ct-list-icon {
display: none;
}
.ct-list-item {
padding-left: 28px;
position: relative;
&:before {
content: '';
width: 7px;
height: 7px;
@include border-radius(6px);
background-color: $four_color;
position: absolute;
top: 11px;
left: 0;
}
+ .ct-list-item {
margin-top: 5px;
}
}
}
.ct-banner4 {
padding-left: 82px;
position: relative;
@media #{$max-lg} {
padding-left: 40px;
}
.ct-banner-imge {
padding-right: 113px;
padding-bottom: 56px;
position: relative;
z-index: 1;
@media #{$max-lg} {
padding-right: 40px;
padding-bottom: 40px;
}
img {
width: 100%;
}
&:before {
content: '';
position: absolute;
top: 35px;
left: 85px;
right: 0;
bottom: 0;
background-color: #e7e7e7;
z-index: -2;
}
&:after {
content: '';
background-image: url(../images/dots-banner.png);
background-position: center;
background-repeat: no-repeat;
position: absolute;
width: 123px;
height: 125px;
bottom: 30px;
right: 88px;
z-index: -1;
@media #{$max-lg} {
right: 20px;
bottom: 20px;
}
}
}
.ct-banner-desc {
font-size: 15px;
line-height: 22px;
}
.ct-banner-title {
margin-bottom: 10px;
font-size: 25px;
line-height: 30px;
color: #fff;
}
.ct-banner-holder {
background-color: $four_color;
position: absolute;
bottom: 56px;
left: 0;
z-index: 99;
max-width: 255px;
padding: 23px 20px 23px 30px;
color: #c6d3e6;
@media #{$max-lg} {
bottom: 40px;
}
@media #{$max-sm} {
padding-left: 20px;
padding-right: 20px;
}
}
.ct-banner-arrow {
span, &:before, &:after {
content: '';
position: absolute;
border-style: solid;
z-index: -1;
width: 0;
height: 0;
}
span {
top: 15px;
right: 15px;
border-width: 12px;
border-color: $primary_color $primary_color transparent transparent;
opacity: 0.5;
}
&:before {
top: 32px;
right: 32px;
border-width: 7px;
border-color: $primary_color $primary_color transparent transparent;
}
&:after {
top: 42px;
right: 42px;
border-width: 5px;
border-color: $third_color $third_color transparent transparent;
}
}
}
.ct-menu-item {
a {
position: relative;
img {
position: absolute;
top: 30px;
left: 100%;
max-width: 170px;
z-index: 9;
@include border-radius(3px);
@include box-shadow(0 12px 32px rgba(0,0,0,0.12));
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
margin-left: 20px;
opacity: 0;
visibility: hidden;
border: 3px solid #fff;
@media #{$max-lg} {
display: none;
}
}
&:hover img {
opacity: 1;
visibility: visible;
top: 10px;
}
}
}
.ct-box-info1 {
width: 430px;
height: 430px;
text-align: center;
margin: auto;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
@media #{$max-xs} {
width: 290px;
height: 290px;
margin-top: 60px;
margin-bottom: 60px;
}
&:before, &:after {
content: '';
position: absolute;
@include transform(rotate(45deg));
@media #{$max-xs} {
@include transform(rotate(0deg));
}
}
&:before {
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -2;
background-color: $four_color;
}
&:after {
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
border: 2px dashed rgba(#fff, 0.2);
z-index: -1;
}
.ct-box-title {
font-size: 24px;
line-height: 1.5;
color: #fff;
margin-top: 28px;
@media #{$max-xs} {
font-size: 16px;
margin-top: 0;
}
cite {
color: $third_color;
font-style: normal;
font-weight: 700;
display: block;
}
}
.ct-box-subtitle {
font-size: 18px;
color: rgba(#fff, 0.8);
margin-bottom: 7px;
@media #{$max-xs} {
font-size: 16px;
}
}
.ct-box-phonenumber {
font-size: 48px;
line-height: 1;
font-weight: 700;
margin-bottom: 35px;
@media #{$max-xs} {
font-size: 24px;
margin-bottom: 15px;
}
a {
color: $third_color;
&:hover {
color: $third_color;
}
}
}
.ct-box-button {
margin-bottom: 7px;
a {
border: 2px solid #fff;
@include border-radius(55px);
padding: 5px;
display: inline-block;
@media #{$max-xs} {
padding: 2px;
border-width: 1px;
}
span {
position: relative;
z-index: 1;
height: 54px;
padding: 0 35px;
font-size: 18px;
color: #0e0e0e;
background-color: #fff;
@include border-radius(55px);
display: inline-flex;
align-items: center;
@media #{$max-xs} {
font-size: 38px;
height: 38px;
font-size: 14px;
padding: 0 14px;
}
}
i {
margin-right: 12px;
font-size: 24px;
color: $primary_color;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
@media #{$max-xs} {
font-size: 18px;
margin-right: 6px;
}
}
b {
color: $primary_color;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
margin: 0 4px;
}
&:hover {
@include box-shadow(0 0 0 10px rgba(#fff, 0.2));
}
}
}
.ct-box-footer {
font-size: 18px;
color: rgba(#fff, 0.8);
@media #{$max-xs} {
font-size: 16px;
}
}
}
.ct-case-study-carousel-layout5 {
padding-left: 220px;
position: relative;
z-index: 1;
@media #{$max-xxx} {
padding-left: 100px;
}
@media #{$max-lg} {
padding-left: 0;
}
.item--featured a {
display: block;
min-height: 673px;
@media #{$max-lg} {
min-height: 340px;
}
}
.ct-case-study-bg {
position: absolute;
top: 0;
left: 0;
bottom: 40px;
width: 220px;
@media #{$max-xxx} {
width: 100px;
}
@media #{$max-lg} {
display: none;
}
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(#00255e, 0.85);
}
}
.item--logo {
margin-bottom: 26px;
}
.item--title {
margin-bottom: 13px;
font-size: 24px;
line-height: 1.25;
color: #0e0e0e;
@media #{$max-lg} {
font-size: 20px;
}
a {
color: inherit;
&:hover {
color: $primary_color;
}
}
}
.item--desc {
font-size: 16px;
line-height: 24px;
color: #757575;
margin-bottom: 25px;
}
.item--readmore {
a {
display: inline-flex;
align-items: center;
@include box-shadow(none !important);
line-height: 46px;
padding: 0 21px;
}
i {
font-size: 20px;
margin-right: 12px;
margin-left: 0;
}
}
.item--holder {
background-color: #fff;
position: absolute;
bottom: 0;
right: 40px;
padding: 42px 35px 30px;
@include box-shadow(0 0 40px rgba(#060a09, 0.06));
max-width: 420px;
width: 100%;
@media #{$max-lg} {
position: static;
max-width: 100%;
}
}
.grid-item-inner {
padding-right: 314px;
position: relative;
margin-bottom: 40px;
@media #{$max-xxx} {
padding-right: 285px;
}
@media #{$max-lg} {
padding-right: 0;
}
}
.ct-carousel-inner {
position: relative;
z-index: 99;
margin: 0;
.carousel-item {
padding: 0;
}
}
.ct-slick-carousel[data-arrows="true"] {
padding-bottom: 0;
@media #{$max-lg} {
padding-bottom: 90px;
}
.slick-arrow {
margin: 0;
width: 90px;
height: 86px;
@include border-radius(0px);
bottom: 40px;
@include transform(translate(0, 0));
@include box-shadow(none);
z-index: 99;
@media #{$max-lg} {
width: 50px;
height: 50px;
background: $primary_color;
}
&:before {
font-size: 18px;
@media #{$max-lg} {
font-size: 16px;
color: #fff;
}
}
&:after {
@include border-radius(0px);
width: 2px;
height: 64px;
left: 0;
top: 11px;
right: auto;
background: #f6f7f8;
opacity: 1;
@media #{$max-lg} {
display: none;
}
}
&:hover, &:focus {
background-color: $primary_color;
&:after {
background-color: $primary_color;
}
}
&.slick-prev {
left: -86px;
right: auto;
@media #{$max-lg} {
left: 30px;
}
&:after {
display: none;
}
}
&.slick-next {
left: 0px;
right: auto;
@media #{$max-lg} {
left: 90px;
}
}
}
}
@media #{$max-lg} {
.ct-slick-carousel {
margin: 0 -30px 0 -30px;
padding-left: 30px;
padding-right: 30px;
overflow: hidden;
.slick-list {
overflow: visible;
}
}
.slick-slide {
@include transition(all 200ms linear 0ms);
opacity: 0;
&.slick-active {
opacity: 1;
}
}
}
}
.ct-fancy-box-layout1.style12 {
.item--icon {
width: 44px;
height: 46px;
line-height: 46px;
text-align: center;
background-color: #fff;
@include border-radius(6px);
@include box-shadow(0 5px 13px rgba(#0045ac, 0.1));
margin-right: 12px;
i {
font-size: 24px;
color: $primary_color;
}
svg {
height: 24px;
}
img {
max-height: 26px;
}
}
.item--title {
margin-bottom: 0;
font-size: 18px;
line-height: 24px;
font-weight: 500;
color: #0e0e0e;
font-family: inherit;
}
.item--description {
padding-top: 8px;
}
}
.ct-mailchimp1 {
&.style5 {
max-width: 540px;
input:not([type="submit"]) {
background-color: rgba(#fff, 0.32);
color: #fff;
font-size: 15px;
font-style: italic;
border: none;
@include border-radius(0px);
height: 52px;
padding-left: 28px;
padding-right: 28px;
}
input[type="submit"] {
font-size: 15px;
font-weight: 700;
line-height: 52px;
padding: 0 28px;
@include border-radius(0px);
&:hover {
background-color: darken($primary_color, 0.08);
}
}
.mc4wp-response {
margin-top: 12px;
.mc4wp-notice {
font-size: 13px;
line-height: 22px;
color: #999;
}
}
.field-group {
display: flex;
flex-wrap: nowrap;
.field-input:first-child {
flex-grow: 1;
}
.field-input + .field-input {
margin-left: 14px;
@media #{$max-xs} {
margin: 0;
margin-top: 10px;
}
}
@media #{$max-xs} {
display: block;
}
}
.mc4wp-alert {
color: rgba(#fff, 0.67);
font-size: 15px;
line-height: 24px;
}
}
}
.ct-accordion-wrap {
padding: 40px 40px 10px;
background-color: #fff;
@include box-shadow(0 0 43px rgba(#313131, 0.15));
@media #{$max-xs} {
padding-left: 20px;
padding-right: 20px;
}
.ct-accordion-meta {
background-color: $primary_color;
display: flex;
flex-wrap: nowrap;
align-items: center;
padding: 4px 30px 4px 40px;
margin-bottom: 7px;
i {
margin-right: 9px;
font-size: 34px;
color: #fff;
display: flex;
}
h5 {
margin-bottom: 0px;
font-size: 18px;
font-family: inherit;
color: #fff;
}
}
.ct-accordion-desc {
font-size: 16px;
color: #666666;
margin-bottom: 11px;
@media #{$max-xs} {
font-size: 14px;
}
}
}
.ct-accordion.layout3 {
.ct-ac-title-text {
font-size: 18px;
font-weight: 700;
cursor: pointer;
color: #161616;
padding: 11px 0;
display: block;
position: relative;
&:before {
content: '+';
position: absolute;
top: 50%;
right: 0;
@include transform(translate(0, -50%));
}
&:hover {
color: $primary_color;
}
}
.item--info {
list-style: none;
margin-bottom: 20px;
font-size: 14px;
line-height: 24px;
color: #838383;
i {
color: $primary_color;
min-width: 18px;
margin-right: 6px;
&.fa-phone {
@include transform(scaleX(-1));
}
&.fa-map-marker:before {
content: "\f3c5";
}
}
li + li {
margin-top: 6px;
}
}
.ct-accordion-item {
border-top: 1px solid #e7e7e7;
&.active .ct-ac-title-text:before {
content: '-';
}
}
}
.ct-countdown-layout1 {
text-align: center;
.ct-countdown {
max-width: 830px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
> div {
padding: 0 15px;
width: 25%;
@media #{$max-md} {
width: 50%;
margin-bottom: 42px;
}
@media #{$max-xs} {
width: 100%;
}
}
.countdown-amount {
font-weight: 600;
color: $dark_color;
font-size: 48px;
@include font-family-heading($heading_default_font);
line-height: 1;
margin-bottom: 10px;
@media #{$max-xs} {
font-size: 80px;
}
}
.countdown-period {
font-size: 18px;
text-transform: uppercase;
font-weight: 600;
@include font-family-heading($heading_default_font);
color: #999;
}
}
}
.ct-countdown-layout2 {
max-width: 800px;
background-color: #001078;
padding: 34px 0 56px;
@include border-radius(10px);
text-align: center;
.ct-countdown {
max-width: 830px;
margin: 0 auto;
display: flex;
flex-wrap: nowrap;
justify-content: center;
.countdown-amount {
font-weight: 600;
font-size: 65px;
line-height: 1;
margin-bottom: 0px;
color: #f8fafd;
@include font-family-heading($heading_default_font);
@media #{$max-md} {
font-size: 42px;
}
@media #{$max-sm} {
font-size: 20px;
}
&:after {
content: ':';
position: absolute;
top: -5px;
right: -11px;
@media #{$max-sm} {
top: 0px;
right: -7px;
}
}
}
.countdown-period {
font-size: 16px;
color: $primary_color;
}
> div {
padding: 0 20px;
position: relative;
@media #{$max-sm} {
padding: 0 10px;
}
&:last-child .countdown-amount:after {
display: none;
}
}
}
.wg-title {
font-size: 20px;
color: #f8fafd;
font-weight: 600;
margin-bottom: 18px;
}
}
.ct-newsletter-hide .ct-newsletter {
display: none;
}
.ct-banner5 {
padding-left: 148px;
position: relative;
z-index: 1;
@media #{$max-md} {
padding-left: 70px;
}
@media #{$max-xs} {
padding-left: 0;
}
.ct-banner-imge {
position: relative;
img {
width: 100%;
@include box-shadow(0 13px 24px rgba(#0c0c0c, 0.35));
}
}
.ct-banner-title {
position: absolute;
font-size: 26px;
line-height: 1.2;
margin-bottom: 0;
padding: 22px 45px;
background-color: $secondary_color;
color: #fff;
transform-origin: 0 50%;
-webkit-transform-origin: 0 50%;
@include transform(translateX(45px) rotate(-90deg));
bottom: 30px;
left: -83px;
@media #{$max-md} {
padding: 22px 25px;
font-size: 18px;
}
@media #{$max-md} {
bottom: 0;
left: -78px;
}
@media #{$max-xs} {
bottom: -32px;
left: -12px;
}
}
.ct-banner-video-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.34;
}
.ct-banner-video {
width: 220px;
height: 205px;
border: 15px solid #fff;
position: absolute;
top: -10px;
left: 0;
background-color: #000000;
@media #{$max-md} {
top: -40px;
}
@media #{$max-xs} {
width: 160px;
height: 145px;
border-width: 10px;
}
.ct-video-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 70px;
width: 70px;
font-size: 18px;
background: #fff;
color: $primary_color;
&:hover {
background-color: $primary_color;
color: #fff;
}
}
}
}
.col-bg-fulwidth-right {
z-index: 1;
&:before {
content: '';
position: absolute;
z-index: -1;
background-color: #fafafa;
@include border-radius(0 0 0 5px);
top: 0;
left: 0;
width: 10000px;
height: 100%;
}
}
.btn-loadmore-round .ct-load-more .btn {
@include border-radius(55px);
}
.ct-link1 {
&.style1 {
a {
font-size: 15px;
color: #fff;
&:hover {
color: $primary_color;
}
}
.ct-link-items {
margin: 0;
list-style: none;
display: inline-block;
li {
display: inline-block;
position: relative;
+ li {
margin-left: 36px;
@media #{$max-md} {
margin-left: 14px;
}
&:before {
content: '';
height: 18px;
width: 1px;
background-color: rgba(#fff, 0.57);
position: absolute;
top: 50%;
@include transform(translate(0, -50%));
left: -20px;
@media #{$max-md} {
display: none;
}
}
}
}
}
}
&.style2 {
a {
color: #080808;
font-weight: 500;
position: relative;
&:before {
content: '-';
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
opacity: 0;
position: absolute;
top: 50%;
left: -4px;
@include transform(translate(0, -50%));
}
&:hover {
color: $primary_color;
padding-left: 16px;
&:before {
left: 4px;
opacity: 1;
}
}
}
li {
line-height: normal;
+ li {
margin-top: 7px;
}
}
.ct-link-items {
margin: 0;
list-style: none;
}
}
}
.ct-wg-backtotop {
display: flex;
flex-wrap: wrap;
svg {
height: 14px;
fill: #fff;
margin-bottom: 3px;
}
span {
display: block;
}
.ct-wg-backtotop-inner {
width: 87px;
height: 85px;
background: #2e2e2e;
font-size: 14px;
line-height: 18px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
padding: 20px 15px;
color: #fff;
text-align: center;
&:hover svg {
animation: icon-bounce 800ms ease-out infinite;
-webkit-animation: icon-bounce 800ms ease-out infinite;
}
}
}
@media #{$min-xl} {
.h2-col-line1 {
&:before {
content: '';
position: absolute;
width: 1px;
height: 85%;
background-color: #f2f2f2;
position: absolute;
top: 50%;
@include transform(translate(0, -50%));
right: 0;
}
}
}
@media #{$max-lg} {
.ct-hidden-lg {
display: none !important;
}
}
.ct-search-popup {
width: 30px;
height: 30px;
line-height: 30px;
cursor: pointer;
color: #000;
text-align: center;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
}
.cryptoboxes {
.mcw-card.mcw-card-1.mcw-white-theme {
padding: 30px 35px;
margin-bottom: 0;
@include box-shadow(0 0 18px rgba(#001fa5, 0.06) !important);
@include border-radius(20px);
font-family: 'Barlow', sans-serif;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
@media #{$max-lg} {
padding-left: 20px;
padding-right: 20px;
}
.mcw-card-head {
font-size: 22px;
font-weight: 700;
color: #0e0e0e;
@media #{$max-lg} {
font-size: 18px;
img {
max-width: 36px;
}
}
p {
font-weight: inherit;
}
}
.mcw-pricelabel {
font-size: 16px;
font-weight: 700;
color: #777;
}
.mcw-price {
padding: 0;
background-color: transparent !important;
margin: 0;
font-size: 48px;
font-weight: 700;
color: #0e0e0e;
display: flex;
@media #{$max-lg} {
font-size: 32px;
}
.fiat-symbol {
font-weight: inherit !important;
font-size: 24px;
margin-top: 12px;
margin-right: 4px;
}
}
&:hover {
@include box-shadow(0 22px 18px rgba(#001fa5, 0.05) !important);
}
}
}
#ct-particles-js {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.14;
} |