File: //proc/self/root/home/parhudrw/ve.anqa.it/wp-content/themes/vibrance/css/components/_elements.scss
/* ----------------------------------------------------------
#Animations
----------------------------------------------------------*/
html:not(.no-cssanimations) .animate_on_visible {
&:not(.reveal-right):not(.reveal-left):not(.reveal-top):not(.reveal-bottom):not(.start_animation) {
opacity: 0;
-webkit-animation-duration: 0.6s;
-moz-animation-duration: 0.6s;
-o-animation-duration: 0.6s;
animation-duration: 0.6s;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
&.start_animation:not(.zoom-reverse) {
&.top-t-bottom {
-webkit-animation-name: anim_ttb;
-moz-animation-name: anim_ttb;
-o-animation-name: anim_ttb;
animation-name: anim_ttb;
opacity: 1;
}
&.bottom-t-top {
-webkit-animation-name: anim_btt;
-moz-animation-name: anim_btt;
-o-animation-name: anim_btt;
animation-name: anim_btt;
opacity: 1;
}
&.left-t-right {
-webkit-animation-name: anim_ltr;
-moz-animation-name: anim_ltr;
-o-animation-name: anim_ltr;
animation-name: anim_ltr;
opacity: 1;
}
&.right-t-left {
-webkit-animation-name: anim_rtl;
-moz-animation-name: anim_rtl;
-o-animation-name: anim_rtl;
animation-name: anim_rtl;
opacity: 1;
}
&.zoom-in {
-webkit-animation-name: zoom-in;
-moz-animation-name: zoom-in;
-o-animation-name: zoom-in;
animation-name: zoom-in;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
&.zoom-out {
-webkit-animation-name: zoom-out;
-moz-animation-name: zoom-out;
-o-animation-name: zoom-out;
animation-name: zoom-out;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
&.zoom-reverse {
-webkit-animation-name: zoom-reverse;
-moz-animation-name: zoom-reverse;
-o-animation-name: zoom-reverse;
animation-name: zoom-reverse;
-webkit-animation-duration: 0.3s;
-moz-animation-duration: 0.3s;
-o-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-o-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
opacity: 0;
}
&.start_animation:not(.zoom-reverse) {
&.alpha-anim {
-webkit-animation-name: alpha-in;
-moz-animation-name: alpha-in;
-o-animation-name: alpha-in;
animation-name: alpha-in;
opacity: 1;
}
&.flip-in {
-webkit-animation-name: flip-in;
-moz-animation-name: flip-in;
-o-animation-name: flip-in;
animation-name: flip-in;
opacity: 1;
}
}
&.reveal-left {
overflow: hidden;
-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
opacity: 0;
transition: opacity 1.3s ease 167ms, -webkit-clip-path 1.1s cubic-bezier(0.778, 0.128, 0.15, 0.84);
transition: clip-path 1.1s cubic-bezier(0.778, 0.128, 0.15, 0.84), opacity 1.3s ease 167ms;
transition: clip-path 1.1s cubic-bezier(0.778, 0.128, 0.15, 0.84), opacity 1.3s ease 167ms, -webkit-clip-path 1.1s cubic-bezier(0.778, 0.128, 0.15, 0.84);
&.start_animation {
opacity: 1;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}
&.reveal-right {
overflow: hidden;
-webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
opacity: 0;
transition: opacity 1.1s ease 167ms, -webkit-clip-path 1.1s cubic-bezier(0.778, 0.128, 0.15, 0.84);
transition: clip-path 1.1s cubic-bezier(0.778, 0.128, 0.15, 0.84), opacity 1.1s ease 167ms;
transition: clip-path 1.1s cubic-bezier(0.778, 0.128, 0.15, 0.84), opacity 1.1s ease 167ms, -webkit-clip-path 1.1s cubic-bezier(0.778, 0.128, 0.15, 0.84);
}
&.start_animation.reveal-right {
opacity: 1;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
&.reveal-top {
overflow: hidden;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
opacity: 0;
transition: opacity 1.1s ease 167ms, -webkit-clip-path 1.1s cubic-bezier(0.778, 0.128, 0.15, 0.84);
transition: clip-path 1.1s cubic-bezier(0.778, 0.128, 0.15, 0.84), opacity 1.1s ease 167ms;
transition: clip-path 1.1s cubic-bezier(0.778, 0.128, 0.15, 0.84), opacity 1.1s ease 167ms, -webkit-clip-path 1.1s cubic-bezier(0.778, 0.128, 0.15, 0.84);
}
&.start_animation.reveal-top {
opacity: 1;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
&.reveal-bottom {
overflow: hidden;
-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
opacity: 0;
transition: opacity 1.1s ease 167ms, -webkit-clip-path 1.1s cubic-bezier(.165,.84,.44,1);
transition: clip-path 1.1s cubic-bezier(.165,.84,.44,1), opacity 1.1s ease 167ms;
transition: clip-path 1.1s cubic-bezier(.165,.84,.44,1), opacity 1.1s ease 167ms, -webkit-clip-path 1.1s cubic-bezier(.165,.84,.44,1);
}
&.start_animation.reveal-bottom {
opacity: 1;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}
.cl_row-flex {
-webkit-perspective: 2000px;
perspective: 2000px;
}
html:not(.no-cssanimations) .animate_on_visible {
&[data-speed="100"] {
-webkit-animation-duration: 0.1s;
-moz-animation-duration: 0.1s;
-o-animation-duration: 0.1s;
animation-duration: 0.1s;
}
&[data-speed="200"] {
-webkit-animation-duration: 0.2s;
-moz-animation-duration: 0.2s;
-o-animation-duration: 0.2s;
animation-duration: 0.2s;
}
&[data-speed="300"], &[data-speed="400"] {
-webkit-animation-duration: 0.3s;
-moz-animation-duration: 0.3s;
-o-animation-duration: 0.3s;
animation-duration: 0.3s;
}
&[data-speed="500"] {
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
animation-duration: 0.5s;
}
&[data-speed="600"] {
-webkit-animation-duration: 0.6s;
-moz-animation-duration: 0.6s;
-o-animation-duration: 0.6s;
animation-duration: 0.6s;
}
&[data-speed="700"] {
-webkit-animation-duration: 0.7s;
-moz-animation-duration: 0.7s;
-o-animation-duration: 0.7s;
animation-duration: 0.7s;
}
&[data-speed="800"] {
-webkit-animation-duration: 0.8s;
-moz-animation-duration: 0.8s;
-o-animation-duration: 0.8s;
animation-duration: 0.8s;
}
&[data-speed="900"] {
-webkit-animation-duration: 0.9s;
-moz-animation-duration: 0.9s;
-o-animation-duration: 0.9s;
animation-duration: 0.9s;
}
&[data-speed="1000"] {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}
}
/* Top to bottom keyframes */
@-webkit-keyframes anim_ttb {
0% {
-webkit-transform: translate3d(0, -100px, 0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@-moz-keyframes anim_ttb {
0% {
-moz-transform: translate3d(0, -100px, 0);
opacity: 0;
}
100% {
-moz-transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@-o-keyframes anim_ttb {
0% {
-o-transform: translate3d(0, -100px, 0);
opacity: 0;
}
100% {
-o-transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes anim_ttb {
0% {
transform: translate3d(0, -100px, 0);
opacity: 0;
}
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
/* Bottom to top keyframes */
@-webkit-keyframes anim_btt {
0% {
-webkit-transform: translate3d(0, 100px, 0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@-moz-keyframes anim_btt {
0% {
-moz-transform: translate3d(0, 100px, 0);
opacity: 0;
}
100% {
-moz-transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@-o-keyframes anim_btt {
0% {
-o-transform: translate3d(0, 100px, 0);
opacity: 0;
}
100% {
-o-transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes anim_btt {
0% {
transform: translate3d(0, 100px, 0);
opacity: 0;
}
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
/* Left to right keyframes */
@-webkit-keyframes anim_ltr {
0% {
-webkit-transform: translate3d(-100px, 0, 0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@-moz-keyframes anim_ltr {
0% {
-moz-transform: translate3d(-100px, 0, 0);
opacity: 0;
}
100% {
-moz-transform: translate3d(0, 0);
opacity: 1;
}
}
@-o-keyframes anim_ltr {
0% {
-o-transform: translate3d(-100px, 0);
opacity: 0;
}
100% {
-o-transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes anim_ltr {
0% {
transform: translate3d(-100px, 0, 0);
opacity: 0;
}
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
/* Right to left keyframes */
@-webkit-keyframes anim_rtl {
0% {
-webkit-transform: translate3d(100px, 0, 0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@-moz-keyframes anim_rtl {
0% {
-moz-transform: translate3d(100px, 0, 0);
opacity: 0;
}
100% {
-moz-transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@-o-keyframes anim_rtl {
0% {
-o-transform: translate3d(100px, 0, 0);
opacity: 0;
}
100% {
-o-transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes anim_rtl {
0% {
transform: translate3d(100px, 0, 0);
opacity: 0;
}
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
/* Appear from center in keyframes */
@-webkit-keyframes zoom-in {
0% {
-webkit-transform: scale(0.5);
opacity: 0.1;
}
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}
@-moz-keyframes zoom-in {
0% {
-moz-transform: scale(0.5);
opacity: 0.1;
}
100% {
-moz-transform: scale(1);
opacity: 1;
}
}
@-o-keyframes zoom-in {
0% {
-o-transform: scale(0.5);
opacity: 0.1;
}
100% {
-o-transform: scale(1);
opacity: 1;
}
}
@keyframes zoom-in {
0% {
transform: scale(0.5);
opacity: 0.1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* Appear from center out keyframes */
@-webkit-keyframes zoom-out {
0% {
-webkit-transform: scale(1.5);
opacity: 0.1;
}
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}
@-moz-keyframes zoom-out {
0% {
-moz-transform: scale(1.5);
opacity: 0.1;
}
100% {
-moz-transform: scale(1);
opacity: 1;
}
}
@-o-keyframes zoom-out {
0% {
-o-transform: scale(1.5);
opacity: 0.1;
}
100% {
-o-transform: scale(1);
opacity: 1;
}
}
@keyframes zoom-out {
0% {
transform: scale(1.5);
opacity: 0.1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* Disappear from center keyframes */
@-webkit-keyframes zoom-reverse {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0.5);
opacity: 0;
}
}
@-moz-keyframes zoom-reverse {
0% {
-moz-transform: scale(1);
opacity: 1;
}
100% {
-moz-transform: scale(0.5);
opacity: 0;
}
}
@-o-keyframes zoom-reverse {
0% {
-o-transform: scale(1);
opacity: 1;
}
100% {
-o-transform: scale(0.5);
opacity: 0;
}
}
@keyframes zoom-reverse {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.5);
opacity: 0;
}
}
/* Alpha keyframes */
@-webkit-keyframes alpha-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes alpha-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes alpha-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes alpha-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Flip-in keyframes */
@-webkit-keyframes flip-in {
0% {
opacity: 0;
-webkit-transform: rotateX(-45deg) translateY(120px);
}
100% {
-webkit-transform: rotateX(0deg) translate(0px, 0px);
opacity: 1;
}
}
@-moz-keyframes flip-in {
0% {
opacity: 0;
-moz-webkit-transform: rotateX(-45deg) translateY(120px);
}
100% {
-moz-transform: rotateX(0deg) translate(0px, 0px);
opacity: 1;
}
}
@-o-keyframes flip-in {
0% {
opacity: 0;
-o-transform: rotateX(-45deg) translateY(120px);
}
100% {
-o-transform: rotateX(0deg) translate(0px, 0px);
opacity: 1;
}
}
@keyframes flip-in {
0% {
opacity: 0;
transform: rotateX(-45deg) translateY(120px);
}
100% {
transform: rotateX(0deg) translate(0px, 0px);
opacity: 1;
}
}
/* reveal Right */
@-webkit-keyframes reveal-right {
0% {
-webkit-transform: translateX(-90%);
}
100% {
-webkit-transform: translate(0px, 0px);
}
}
@-moz-keyframes reveal-right {
0% {
-moz-transform: translateX(-90%);
}
100% {
-moz-transform: translate(0px, 0px);
}
}
@-o-keyframes reveal-right {
0% {
-o-transform: translateX(-90%);
}
100% {
-o-transform: translate(0px, 0px);
}
}
@keyframes reveal-right {
0% {
transform: translateX(-90%);
}
100% {
transform: translate(0px, 0px);
}
}
/* End Animations */
/* CL preset Gradients */
.cl-gradient-azure_pop {
background: #ef32d9;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #ef32d9, #89fffd);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #ef32d9, #89fffd);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.cl-gradient-love_couple {
background: #3a6186;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #3a6186, #89253e);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #3a6186, #89253e);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.cl-gradient-disco {
background: #4ECDC4;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #4ECDC4, #556270);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #4ECDC4, #556270);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.cl-gradient-limeade {
background: #A1FFCE;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #A1FFCE, #FAFFD1);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #A1FFCE, #FAFFD1);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.cl-gradient-dania {
background: #BE93C5;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #BE93C5, #7BC6CC);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #BE93C5, #7BC6CC);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.cl-gradient-shades_of_grey {
background: #bdc3c7;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #bdc3c7, #2c3e50);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #bdc3c7, #2c3e50);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.cl-gradient-dusk {
background: #ffd89b;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #ffd89b, #19547b);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #ffd89b, #19547b);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.cl-gradient-delhi {
background: #808080;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #808080, #3fada8);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #808080, #3fada8);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.cl-gradient-sun_horizon {
background: #fceabb;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #fceabb, #f8b500);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #fceabb, #f8b500);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.cl-gradient-blood_red {
background: #f85032;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #f85032, #e73827);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #f85032, #e73827);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.cl-gradient-sherbert {
background: #f79d00;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #f79d00, #64f38c);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #f79d00, #64f38c);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.cl-gradient-firewatch {
background: #cb2d3e;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #cb2d3e, #ef473a);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #cb2d3e, #ef473a);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.cl-gradient-frost {
background: #000428;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #000428, #004e92);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #000428, #004e92);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.cl-gradient-mauve {
background: #42275a;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #42275a, #734b6d);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #42275a, #734b6d);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.cl-gradient-deep_sea {
background: #2C3E50;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #2C3E50, #4CA1AF);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #2C3E50, #4CA1AF);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.cl-gradient-solid_vault {
background: #3a7bd5;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #3a7bd5, #3a6073);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #3a7bd5, #3a6073);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.cl-gradient-deep_space {
background: #000000;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #000000, #434343);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #000000, #434343);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.cl-gradient-suzy {
background: #834d9b;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #834d9b, #d04ed6);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #834d9b, #d04ed6);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.services_toggles{
@include lg{
.elementor-widget-wrap{
.elementor-widget{
@include transition(all 0.3s);
opacity:0;
&:nth-child(1){
opacity:1;
}
&:nth-child(2){
opacity:1;
}
}
}
.elementor-column{
@include transition(all 0.3s);
.elementor-widget{
&:nth-child(1){
&:after{
content:"";
position:absolute;
width: 70px;
height: 70px;
top:-24px;
left:-24px;
background: #FEF1F1;
opacity:0;
border-radius:50%;
z-index:-1;
}
}
}
}
.elementor-column:nth-child(1){
top:30px;
}
.elementor-column:nth-child(2){
top:46px;
}
.elementor-column:nth-child(3){
top:30px;
}
.elementor-column:nth-child(4){
top:36px;
}
.elementor-column.service_toggle_active{
top:0px;
.elementor-widget-wrap >{
.elementor-widget{
opacity:1;
&:nth-child(1){
&:after{
opacity:1;
@include transition(all 0.3s);
}
}
}
}
}
}
}
.cl-service-image{
.wrapper{
@include transition(all 0.3s);
box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.00);
box-sizing:border-box;
position:relative;
.overlay_link{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
}
.img-wrapper{
position:relative;
img{
border-radius: 10px 10px 0px 0px;
}
h2{
position:absolute;
bottom:-10px;
left:50px;
font-size: 60px;
line-height: 60px;
/* identical to box height, or 100% */
letter-spacing: -0.04em;
}
}
.content{
padding:40px 50px;
@include transition(all 0.3s);
border: 2px solid #E5E5E5;
border-radius: 0px 0px 10px 10px;
border-top:none;
a{
margin-top:32px;
display:block;
font-weight: 500;
i{
opacity:0;
position:relative;
padding-left:8px;
@include transform(translateX(-10px));
@include transition(all 0.3s);
}
span{
position:relative;
&:after{
content:"";
position:absolute;
bottom:0;
left:0;
height:1px;
width:0px;
background:#000;
@include transition(all 0.3s);
}
}
}
}
&:hover{
.wrapper{
box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.03);
}
.content{
border-color:rgba(255,255,255,0);
a{
span:after{
width:100%;
}
i{
opacity:1;
@include transform(translateX(0px));
}
}
}
}
}
.cl-service-small-icon{
.wrapper{
display:flex;
}
i{
font-size:16px;
line-height:16px;
padding-top:3px;
}
.content{
font-size:14px;
line-height:24px;
padding-left:16px;
}
p{
margin-top:4px;
color:rgba(0,0,0,0.5);
margin-bottom:0px;
}
}
.cl-service-small-box{
.wrapper{
border: 1px solid #EEEEEE;
border-radius: 10px;
padding:20px;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.00);
@include transform(translateY(0px));
@include transition(all 0.3s);
cursor:pointer;
position:relative;
display:flex;
}
&:hover{
.wrapper{
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
@include transform(translateY(-5px));
}
}
.icon-wrapper{
width:40px;
height:40px;
line-height:40px;
margin-top:3px;
font-size:16px;
display:flex;
align-items:center;
justify-content: center;
border-radius:20px;
}
.content{
padding-left:20px;
font-size:14px;
line-height:24px;
span{
line-height:24px;
}
}
a{
position:absolute;
left:0;
width:100%;
height:100%;
top:0;
}
p{
margin-top:0px;
margin-bottom:0px;
color:rgba(0,0,0,0.5);
}
}
.cl-service-medium-box{
display:flex;
text-align:center;
justify-content:center;
border: 1px solid #EEEEEE;
border-radius: 10px;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.00);
@include transform(translateY(0px));
@include transition(all 0.3s);
cursor:pointer;
.wrapper{
padding:24px;
position:relative;
}
&:hover{
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
@include transform(translateY(-5px));
}
.icon-wrapper{
width:70px;
height:70px;
line-height:70px;
font-size:24px;
display:flex;
align-items:center;
justify-content: center;
border-radius:35px;
margin:0 auto;
}
.content{
padding-top:24px;
font-size:14px;
line-height:24px;
span{
line-height:24px;
font-weight:500;
}
}
a{
font-size: 14px;
line-height: 24px;
margin-top:16px;
display:block;
text-decoration-line: underline;
}
p{
margin-top:16px;
margin-bottom:0px;
color:rgba(0,0,0,0.5);
}
}
.button_stretched{
.elementor-button{
position:relative;
.elementor-button-content-wrapper{
left: calc(-100% + 15px);
position: relative;
@include transition(all 0.3s);
}
.elementor-button-text{
@include transition(all 0.3s);
opacity:0;
}
.elementor-button-icon{
}
}
&:hover{
.elementor-button{
.elementor-button-content-wrapper{
left: 0px;
position: relative;
}
.elementor-button-text{
opacity:1
}
.elementor-button-icon{
}
}
}
}
.underline_link_icon{
a{
i{
opacity:0;
@include transform(translateX(-20px));
@include transition(all 0.3s);
margin-left:8px;
position:relative;
}
span{
position:relative;
&:before{
content:"";
left:0;
bottom:0;
width:0;
height:1px;
background:#000;
position:absolute;
@include transition(all 0.4s);
}
}
&:hover{
span:before{
width:100%;
}
i{
opacity:1;
@include transform(translateX(0));
}
}
}
}
.carousel_controls_2{
.ce-posts-carousel-controls{
width:102px;
height:36px;
position:absolute;
right:0px;
top:-68px;
a{
background:#fff;
color:#000;
width:36px;
height:36px;
line-height:36px;
font-size:16px;
&.ce-next{
right:0;
left:auto;
}
&.ce-prev{
left:0px;
right:auto;
}
}
}
}
.ce-page-header{
background:#eee;
.page-data{
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding-top:80px;
padding-bottom:80px;
flex-direction: column;
h1{
font-size:48px;
line-height:60px;
margin-bottom:16px;
color:inherit;
}
ul{
padding: 0;
margin: 0;
text-align: left;
list-style: none;
color:inherit;
li{
display:inline-block;
.delimiter{
padding:0 4px;
margin-top:16px;
}
}
}
}
}
.content-col{
.select2-container--default .select2-selection--single{
background: #FFFFFF;
border: 1px solid #E5E5E5;
box-sizing: border-box;
border-radius: 4px;
height:54px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
color:#000;
padding:15px 20px;
font-size:14px;
line-height:24px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
color:#000;
right:20px;
top:0;
line-height:54px;
height:54px;
b{
border-color:#000 transparent transparent transparent
}
}
}
.select2-dropdown{
border-color:#e5e5e5 !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field{
border-color:#e5e5e5;
}
.btn_show_icon_hover{
.elementor-button-content-wrapper{
position:relative;
}
.elementor-button-icon{
position: absolute;
right: 0;
opacity:0;
@include transition(all 0.3s);
}
.elementor-button-text{
padding-right:0px;
@include transition(all 0.3s);
}
.elementor-button-link:hover{
.elementor-button-icon{
opacity:1;
}
.elementor-button-text{
padding-right:24px;
}
}
}
.btn_show_border_hover{
.elementor-button-text{
position:relative;
&:before{
content:"";
position:absolute;
bottom:-2px;
left:0;
width:0;
border-bottom-width: 1px;
border-bottom-style:solid;
border-color:inherit;
height:1px;
@include transition(all 0.3s);
}
}
.elementor-button-link:hover{
.elementor-button-text{
&:before{
width:100%;
}
}
}
}
.cl-scroll-indicator{
position:absolute;
width:20px;
opacity:1;
z-index:999;
@include transition( all 0.3s );
bottom:130px;
font-size:14px;
text-transform: lowercase;
&.hide-scroll{
opacity:0;
}
span{
position:absolute;
text-align:center;
}
.cl-scroll-indicator__wrapper{
position:relative;
&:before{
content:"";
width: 1px;
position:absolute;
left: 20px;
top: 35px;
height: 40px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
animation: scroll-line 2s infinite;
animation-timing-function: ease-out;
}
}
&.style-left_side_light{
left:10px;
@include lg{
left:67px;
}
span{
color:#fff;
@include transform( rotate(-90deg) );
}
}
&.style-left_side_dark{
left:10px;
@include lg{
left:67px;
}
span{
color:#000;
@include transform( rotate(-90deg) );
}
svg path{
fill:#000;
}
.cl-scroll-indicator__wrapper{
&:before{
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
}
}
}
&.style-right_side_light{
right:10px;
@include lg{
right:25px;
}
span{
color:#fff;
@include transform( rotate(90deg) );
}
svg path{
fill:#fff;
}
}
&.style-right_side_dark{
right:10px;
@include lg{
right:25px;
}
span{
color:#fff;
@include transform( rotate(90deg) );
}
svg path{
fill:#fff;
}
}
}
.ce-hudson-slider .all-works, .underline_effect_1.elementor-widget-button .elementor-button-text{
display:inline-block;
text-decoration:none;
position:relative;
text-decoration-line:none;
overflow:hidden;
&:before{
content:"";
background:#000;
position:absolute;
left:0;
bottom:0;
width:100%;
height:1px;
transform: translate(-100%, 0px);
transform-origin: 0% 50%;
.ce-animation-start &{
transform:translate(0px, 0px);
}
}
&:hover{
&:before{
animation: under_one 1s ;
}
}
}
span.underline_effect_1_light{
text-decoration:none;
position:relative;
text-decoration-line:none;
overflow:hidden;
&:before{
content:"";
background:#fff;
position:absolute;
left:0;
bottom:-1px;
width:100%;
height:3px;
transform: translate(-100%, 0px);
transform-origin: 0% 50%;
.ce-animation-start &{
transform:translate(0px, 0px);
}
}
&:hover{
&:before{
animation: under_one 1s ;
}
}
}
span.underline_effect_1_dark{
text-decoration:none;
position:relative;
text-decoration-line:none;
overflow:hidden;
&:before{
content:"";
background:#000;
position:absolute;
left:0;
bottom:-1px;
width:100%;
height:3px;
transform: translate(-100%, 0px);
transform-origin: 0% 50%;
.ce-animation-start &{
transform:translate(0px, 0px);
}
}
&:hover{
&:before{
animation: under_one 1s ;
}
}
}
.underline_effect_2 .elementor-button-text, {
display:inline-block;
text-decoration:none;
position:relative;
text-decoration-line:none;
&:before{
content:"";
background:#000;
position:absolute;
left:0;
bottom:-4px;
width:100%;
height:4px;
transform: translate(-100%, 0px);
transform-origin: 0% 50%;
.ce-animation-start &{
transform:translate(0px, 0px);
}
}
&:hover{
&:before{
animation: under_one 1s ;
}
}
}
.underline_effect_1 .elementor-heading-title{
display:inline-block;
text-decoration:none;
position:relative;
text-decoration-line:none;
&:before{
content:"";
background:#000;
position:absolute;
left:0;
bottom:2px;
width:100%;
height:3px;
transform: translate(-100%, 0px);
transform-origin: 0% 50%;
.ce-animation-start &{
transform:translate(0px, 0px);
}
}
&:hover{
&:before{
animation: under_one 1s ;
}
}
}
.underline_effect_3 .elementor-button-text{
display:inline-block;
text-decoration:none;
position:relative;
text-decoration-line:none;
&:before{
content:"";
background:#FF6422;
position:absolute;
left:0;
bottom:-1px;
width:100%;
height:1px;
transform: translate(-100%, 0px);
transform-origin: 0% 50%;
.ce-animation-start &{
transform:translate(0px, 0px);
}
}
&:hover{
&:before{
animation: under_one 1s ;
}
}
}
@keyframes under_one {
0% {
transform: translate(0px, 0px) scale(1 ,1);
transform-origin: 100% 50%;
}
49% {
transform: translate(0px, 0px) scale(0 ,1);
transform-origin: 100% 50%;
}
50% {
transform: translate(0px, 0px) scale(0 ,1);
transform-origin: 0% 50%;
}
51% {
transform: translate(0px, 0px) scale(0 ,1);
transform-origin: 0% 50%;
}
99% {
transform: translate(0px, 0px) scale(1 ,1);
transform-origin: 0% 50%;
}
100% {
transform: translate(0px, 0px) scale(1, 1);
transform-origin: 100% 50%;
}
}
.ce-portfolio-style-beas .ce-portfolio-item,
.ce-post-style-birk .ce-post-item,
.ce-post-style-lark .ce-post-item,
.ce-post-style-drake .ce-post-item,
.ce-post-style-adair .ce-post-item,
.ce-post-style-colm .ce-post-item{
.entry-media{
position:relative;
}
.entry-media:before{
content:"";
position:absolute;
left:0;
width:100%;
height:100%;
top:0;
z-index:99;
background:rgba(0,0,0,0);
transition:all 0.3s;
}
}
.ce-portfolio-style-beas .ce-portfolio-item:hover,
.ce-post-style-birk .ce-post-item:hover,
.ce-post-style-lark .ce-post-item:hover,
.ce-post-style-drake .ce-post-item:hover,
.ce-post-style-adair .ce-post-item:hover,
.ce-post-style-colm .ce-post-item:hover{
.entry-media:before{
background:rgba(0,0,0,0.2);
}
}
.ce-portfolio-style-jasper .ce-portfolio-item{
.post-thumbnail{
position:relative;
}
.post-thumbnail:before{
content:"";
position:absolute;
left:0;
width:100%;
height:calc(100% - 37px);
top:0;
z-index:99;
background:rgba(0,0,0,0);
transition:all 0.3s;
}
}
.ce-portfolio-style-jasper .ce-portfolio-item:hover{
.post-thumbnail:before{
background:rgba(0,0,0,0.2);
}
}
.tns-inner{
cursor:grab;
}
.hover_color:hover{
color:var(--codeless-primary-color);
}
@keyframes scroll-line {
0% {
height:0px;
}
100% {
height:40px;
}
}