File: /var/www/html/wptalentcloud/wp-content/themes/salient/css/src/elements/element-fancy-box.css
/*
Theme Name: Salient
Description: Styles for the "Fancy Box" page builder element.
*/
.nectar-fancy-box{
overflow:hidden;
position:relative;
padding:13%
}
.full-width-content >.span_12 >.vc_col-sm-12 >.wpb_wrapper >.nectar-fancy-box,
.full-width-content .vc_col-sm-12 .vc_col-sm-12 >.wpb_wrapper >.nectar-fancy-box{
padding:5%
}
.full-width-content >.span_12 >.vc_col-sm-12 >.wpb_wrapper >.nectar-fancy-box .inner,
.full-width-content .vc_col-sm-12 .vc_col-sm-12 >.wpb_wrapper >.nectar-fancy-box .inner{
padding-bottom:8%
}
.nectar-fancy-box:after{
display:block;
position:absolute;
content:' ';
width:100%;
height:6px;
left:0;
bottom:0;
background:#fff;
z-index:5;
transform:scaleX(0) translateZ(0);
-webkit-transform:scaleX(0) translateZ(0);
transform-origin:0 0;
-webkit-transform-origin:0 0;
-webkit-transition:0.45s cubic-bezier(0.24,1,0.30,1);
transition:0.45s cubic-bezier(0.24,1,0.30,1)
}
.nectar-fancy-box:hover:after{
-webkit-transform:scaleX(1) translateZ(0);
transform:scaleX(1) translateZ(0)
}
.nectar-fancy-box[data-style="default"] .inner *,
.nectar-fancy-box[data-style="parallax_hover"] .inner *,
.nectar-fancy-box[data-style="hover_desc"] .inner * {
color:#fff
}
.nectar-fancy-box .inner{
position:relative;
text-align:left;
color:#fff;
z-index:10;
padding-bottom:15%
}
.nectar-fancy-box .box-link{
position:absolute;
z-index:100;
top:1px;
left:1px;
height:calc(100% - 2px);
width:calc(100% - 2px);
display:block
}
.nectar-fancy-box .box-bg{
position:absolute;
top:0;
left:0;
height:100.2%;
width:100.2%;
background-size:cover;
z-index:1;
background-position:center;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
transition:all .6s cubic-bezier(0.24,1,0.30,1);
-webkit-transition:all .6s cubic-bezier(0.24,1,0.30,1)
}
.nectar-flickity .nectar-fancy-box[data-n-parallax-bg="true"] .box-bg {
width: 130%;
left: -15%;
}
.nectar-fancy-box .box-bg:after{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
content:' ';
background-color:rgba(51,51,51,0.5);
transition:all .6s cubic-bezier(0.24,1,0.30,1);
-webkit-transition:all .6s cubic-bezier(0.24,1,0.30,1)
}
.nectar-fancy-box:hover .box-bg:after{
background-color:rgba(51,51,51,0.2)
}
.nectar-fancy-box:hover .box-bg{
transform:scale(1.13);
-webkit-transform:scale(1.13)
}
.nectar-fancy-box .box-bg[data-nectar-img-src] {
opacity: 0;
}
.nectar-fancy-box .box-bg {
-webkit-transition: transform .6s cubic-bezier(0.24,1,0.30,1), opacity 0.55s ease 0.25s;
transition: transform .6s cubic-bezier(0.24,1,0.30,1), opacity 0.55s ease 0.25s;
opacity: 1;
}
body .nectar-fancy-box .link-text{
font-size:12px;
}
.nectar-fancy-box .link-text{
font-family:'Open Sans';
line-height:14px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
position:relative;
z-index:5;
color:#fff;
text-align:left
}
body .nectar-fancy-box .link-text .arrow,
body .nectar-fancy-box[data-style="parallax_hover"] .inner > .arrow {
font-family:'icomoon';
}
.nectar-fancy-box .link-text .arrow,
.nectar-fancy-box[data-style="parallax_hover"] .inner > .arrow {
line-height:26px;
font-size:14px;
opacity:1;
position:relative;
display:inline-block;
margin-left:16px;
top:2px;
transition:all 0.35s cubic-bezier(0.12,0.75,0.4,1);
-webkit-transition:all 0.35s cubic-bezier(0.12,0.75,0.4,1);
overflow:visible;
height:26px;
width:26px;
border-radius:100px;
text-align:center;
border:2px solid rgba(255,255,255,0.4)
}
.nectar-fancy-box .link-text .arrow:before,
.nectar-fancy-box[data-style="parallax_hover"] .inner > .arrow:before {
content:"\e607";
color:#fff;
top:-2px;
right:-1px;
display:block;
transition:all 0.35s cubic-bezier(0.12,0.75,0.4,1);
-webkit-transition:all 0.35s cubic-bezier(0.12,0.75,0.4,1);
position:relative
}
.nectar-fancy-box .link-text .arrow:after,
.nectar-fancy-box[data-style="parallax_hover"] .inner > .arrow:after{
display:block;
content:' ';
position:absolute;
width:26px;
height:1px;
background-color:#fff;
opacity:0;
left:-6px;
cursor:pointer;
transition:all 0.35s cubic-bezier(0.12,0.75,0.4,1);
-webkit-transition:all 0.35s cubic-bezier(0.12,0.75,0.4,1);
pointer-events:none;
top:11px;
transform:translateX(-27px);
-webkit-transform:translateX(-27px)
}
.nectar-fancy-box:hover .link-text .arrow{
border-color:transparent
}
.nectar-fancy-box:hover .link-text .arrow:after,
.nectar-fancy-box[data-style="parallax_hover"]:hover .inner > .arrow:after {
opacity:1;
transform:translateX(2px);
-webkit-transform:translateX(2px)
}
.nectar-fancy-box:hover .link-text .arrow:before,
.nectar-fancy-box[data-style="parallax_hover"]:hover .inner > .arrow:before {
transform:translateX(9px);
-webkit-transform:translateX(9px)
}
.nectar-fancy-box .inner-wrap > i,
.nectar-fancy-box .inner > i,
.nectar-fancy-box .heading-wrap > i {
height: auto!important;
width: auto!important;
display: block;
text-align: left;
margin-bottom: 20px;
}
.nectar-fancy-box .inner > .im-icon-wrap,
.nectar-fancy-box .heading-wrap > .im-icon-wrap {
margin-bottom: 12px;
display: block;
}
.nectar-fancy-box .fancy-box-custom-icon,
.nectar-flickity:not(.masonry) .flickity-slider .cell .nectar-fancy-box .fancy-box-custom-icon {
margin-bottom: 20px;
}
.nectar-fancy-box[data-style="default"] .im-icon-wrap path {
fill: #fff;
}
.nectar-fancy-box[data-style="hover_desc"][data-alignment="right"] .inner,
.nectar-fancy-box[data-style="hover_desc"][data-alignment="right"] .inner-wrap,
.nectar-fancy-box[data-style="hover_desc"][data-alignment="right"] .inner i {
text-align: right;
}
.nectar-fancy-box[data-style="hover_desc"][data-alignment="center"] .inner,
.nectar-fancy-box[data-style="hover_desc"][data-alignment="center"] .inner-wrap,
.nectar-fancy-box[data-style="hover_desc"][data-alignment="center"] .inner i {
text-align: center;
}
.nectar-fancy-box[data-style="color_box_hover"]:hover .inner-wrap *,
.nectar-fancy-box[data-style="color_box_hover"]:hover .inner-wrap,
.nectar-fancy-box[data-style="color_box_hover"][data-color*="gradient"] .inner i.hover-only,
.nectar-fancy-box[data-style="parallax_hover"] [class^="icon-"].icon-default-style,
.nectar-fancy-box[data-style="default"] .inner > i[data-color*="color"] {
color: #fff!important;
}
.nectar-fancy-box[data-style="color_box_hover"]:after,
.nectar-fancy-box[data-style="color_box_basic"]:after,
.nectar-fancy-box[data-style="hover_desc"]:after {
display: none;
}
.nectar-fancy-box[data-style="color_box_hover"]:before {
box-shadow: 0px 30px 90px #000;
}
.nectar-fancy-box[data-style="color_box_hover"] .im-icon-wrap {
margin-bottom: 20px;
display: block;
}
.nectar-fancy-box[data-style="color_box_hover"]:hover .im-icon-wrap path {
transition: all 0.45s cubic-bezier(0.25, 1, 0.2, 1);
}
.nectar-fancy-box[data-style="color_box_hover"]:hover .im-icon-wrap path {
fill: #fff;
}
.nectar-fancy-box[data-style="hover_desc"] .im-icon-wrap path {
fill: #fff;
}
.nectar-fancy-box[data-style="hover_desc"] .parallax-layer {
width: 100%;
left: 0;
bottom: 0;
height: 100%;
position: absolute;
z-index: 1;
}
.nectar-fancy-box[data-style="hover_desc"] {
display: flex;
flex-wrap: wrap;
padding: 11%;
transition: transform .65s cubic-bezier(.05,0.2,.1,1), box-shadow .65s cubic-bezier(.05,0.2,.1,1);
}
.nectar-fancy-box[data-style="hover_desc"] .box-bg {
transition: transform 1s ease, opacity 0.5s ease 0.25s;
transform: scale(1);
-webkit-transform: scale(1);
}
.nectar-fancy-box[data-style="hover_desc"][data-bg-animation="short_zoom"] .box-bg {
transition: transform .8s cubic-bezier(0.24,1,0.30,1), opacity 0.55s ease 0.25s;
}
.nectar-fancy-box[data-style="hover_desc"][data-bg-animation="short_zoom"].hovered .box-bg {
transform: scale(1.13);
-webkit-transform: scale(1.13);
}
.nectar-fancy-box[data-style="hover_desc"][data-bg-animation="long_zoom"].hovered .box-bg {
transform: scale(1.2);
-webkit-transform: scale(1.2);
transition: transform 9s cubic-bezier(0.1,0.2,.7,1);
}
.nectar-fancy-box[data-style="hover_desc"] .wrap-icon {
width: 100%;
position: relative;
z-index: 100;
align-self: flex-start;
}
.nectar-fancy-box[data-style="hover_desc"] .wrap-icon i:before {
color: #fff;
}
.nectar-fancy-box[data-style="hover_desc"] .box-bg:before,
.nectar-fancy-box[data-style="hover_desc"] .box-bg:after {
position: absolute;
bottom: 0;
top: auto;
left: 0;
width: 100%;
height: 85%;
display: block;
z-index: 10;
content: '';
background: linear-gradient(to bottom,rgba(15,15,15,0),rgba(15,15,15,.75) 100%);
transition: opacity .65s cubic-bezier(.05,0.2,.1,1);
}
#ajax-content-wrap .nectar-fancy-box[data-style="hover_desc"] .box-bg:after {
background-color: transparent!important;
}
.nectar-fancy-box[data-style="hover_desc"].hovered .box-bg:before,
.nectar-fancy-box[data-style="hover_desc"] .box-bg:after {
opacity: 0;
}
.nectar-fancy-box[data-style="hover_desc"].hovered .box-bg:after {
opacity: 1;
}
.nectar-fancy-box[data-style="hover_desc"] .inner {
padding: 0;
width: 100%;
align-self: flex-end;
}
.nectar-fancy-box[data-style="hover_desc"]:not(.disable-hover-movement).hovered {
transform: translateY(-10px);
box-shadow: 0 25px 55px rgba(0,0,0,0.22);
}
.nectar-fancy-box[data-style="hover_desc"] > .inner > .heading-wrap {
transition: opacity .65s cubic-bezier(.05,0.2,.1,1), transform .65s cubic-bezier(.05,0.2,.1,1);
}
.nectar-fancy-box[data-style="hover_desc"] .hover-content {
line-height: 1.5em;
max-width: 80%;
transition: opacity .18s cubic-bezier(.05,0.2,.1,1), transform .18s cubic-bezier(.05,0.2,.1,1);
}
.nectar-fancy-box[data-style="hover_desc"][data-alignment="center"] .hover-content {
text-align: center;
width: 100%;
max-width: 100%;
padding: 0 10%;
}
@media only screen and (max-width: 1300px) {
.vc_col-sm-3 .nectar-fancy-box[data-style="hover_desc"] .hover-content {
max-width: 100%;
}
}
.nectar-fancy-box[data-style="hover_desc"] .heading-wrap > *:last-child {
margin-bottom: 0;
}
.nectar-fancy-box[data-style="hover_desc"] .hover-content {
opacity: 0;
position: absolute;
bottom: 0;
left: 0;
margin-top: 10px;
transform: translateY(20px);
}
.nectar-fancy-box[data-style="hover_desc"].hovered .hover-content {
opacity: 1;
transform: translateY(0%);
transition: opacity .65s cubic-bezier(.05,0.2,.1,1) 0.15s, transform .65s cubic-bezier(.05,0.2,.1,1) 0.15s;
}
.material .nectar-fancy-box[data-style="color_box_hover"] .box-inner-wrap,
.material .nectar-fancy-box[data-style="color_box_hover"]:before,
.material .nectar-fancy-box[data-style="color_box_basic"] {
border-radius: 5px;
}
.material .full-width-content .nectar-fancy-box[data-style="color_box_hover"] .box-inner-wrap,
.material .full-width-content .nectar-fancy-box[data-style="color_box_hover"]:before {
border-radius: 0;
}
/* Border Radius option */
.nectar-fancy-box[data-border-radius="5px"]:not([data-style="parallax_hover"]):not([data-style="color_box_hover"]),
.nectar-fancy-box[data-border-radius="5px"] .image-wrap {
border-radius: 5px;
overflow: hidden;
}
.nectar-fancy-box[data-border-radius="10px"]:not([data-style="parallax_hover"]):not([data-style="color_box_hover"]),
.nectar-fancy-box[data-border-radius="10px"] .image-wrap {
border-radius: 10px;
overflow: hidden;
}
.nectar-fancy-box[data-border-radius="5px"][data-style="parallax_hover"] .parallaxImg-rendered-layer {
border-radius: 5px;
overflow: hidden;
}
.nectar-fancy-box[data-border-radius="10px"][data-style="parallax_hover"] .parallaxImg-rendered-layer {
border-radius: 10px;
overflow: hidden;
}
.nectar-fancy-box[data-border-radius="none"][data-style="color_box_hover"] .box-inner-wrap,
.nectar-fancy-box[data-border-radius="none"][data-style="color_box_basic"] {
border-radius: 0;
}
.nectar-fancy-box[data-style="image_above_text_underline"]:not(.using-img) .image-wrap {
display: none;
}
.nectar-fancy-box[data-style="image_above_text_underline"] .image-wrap {
overflow: hidden;
}
.nectar-fancy-box[data-style="image_above_text_underline"] {
padding: 0;
}
.nectar-fancy-box[data-style="image_above_text_underline"] .text {
padding: 30px 10% 0 0;
}
.nectar-fancy-box[data-style="image_above_text_underline"] .text p,
.nectar-fancy-box[data-style="image_above_text_underline"] .text > *:nth-child(2) {
padding-top: 10px;
}
.nectar-fancy-box[data-style="image_above_text_underline"] .box-bg:after,
.nectar-fancy-box[data-style="image_above_text_underline"]:after {
display: none;
}
.nectar-fancy-box[data-style="image_above_text_underline"] .box-bg {
height: auto;
width: 100.2%;
position: relative;
transition: transform 0.75s cubic-bezier(.2,.75,.5,1), opacity 0.5s ease 0.3s;
}
.nectar-fancy-box[data-style="image_above_text_underline"]:hover .box-bg {
transform: scale(1.1);
}