.crust-infobox{
position: relative;
transition: all .5s cubic-bezier(0.4,1,0.3,1);
}
.crust-infobox:hover{
z-index: 3
}
.crust-infobox.crust-infobox-overlay{
display: flex;
flex-direction: column;
}
.crust-infobox.crust-infobox-overlay .infobox-content-inner{
padding: 30px;
}
.crust-infobox-text ul{
margin: 0;
padding: 0;
list-style: none;
}
.crust-infobox-content-align-center{
text-align: center;
}
.crust-infobox-content-align-right{
text-align: right;
}
.crust-infobox .crust-infobox-title{
position: relative;
z-index: 4;
}
.crust-infobox-title-text{
display: inline-block;
position: relative;
left: 0;
transition: all .5s cubic-bezier(0.4,1,0.3,1);
}
.crust-infobox .crust-infobox-tooltip{
display: inline-block;
vertical-align: middle;
transition: all .4s cubic-bezier(0.4,1,0.3,1);
position: relative;
transform-origin: 0 0;
left: 0;
top: -2px;
}
.crust-infobox-title.crust-box-tooltip-right:not(.crust-box-tooltip-hover) .crust-infobox-tooltip{
margin-left: 10px
}
.crust-infobox-title.crust-box-tooltip-left:not(.crust-box-tooltip-hover) .crust-infobox-tooltip{
margin-right: 10px
}
.crust-infobox .crust-infobox-tip-inner{
display: block;
padding: 4px 6px;
border-radius: 3px;
line-height: 1;
position: relative;
font-size: 11px;
margin: 0 0 0 10px;
}
.crust-infobox-tip-inner{
background-color: #ff5b4a;
color: #fff;
}
.crust-infobox .crust-box-tooltip-hover .crust-infobox-tooltip{
opacity: 0;
display: none;
transform: scale(0) translateX(-30px);
transform-origin: 0 50%;
}
.crust-infobox:hover .crust-box-tooltip-hover .crust-infobox-tooltip{
opacity: 1;
left: 0;
display: inline-block;
animation: infotooltip .6s ease forwards .1s;
}
.crust-infobox:hover .crust-box-tooltip-hover .crust-infobox-title-text{ }
.crust-infobox-tip-inner:after{
background-color: inherit;
width: 6px;
height: 6px;
position: absolute;
display: inline-block;
content: "";
transform: rotate(45deg);
top: 50%;
margin-top: -3px;
}
.crust-box-tooltip-right .crust-infobox-tip-inner:after{
left: -3px;
}
.crust-box-tooltip-left .crust-infobox-tip-inner:after{
right: -3px;
}
.crust-box-tooltip-left .crust-infobox-tip-inner{
margin: 0 10px 0 0;
}
.crust-infobox .crust-infobox-title,
.crust-infobox .crust-infobox-title:hover a,
.crust-infobox .crust-infobox-text{
transition: all .5s cubic-bezier(0.4,1,0.3,1);
}
.crust-infobox .crust-infobox-text{
line-height: 1.6;
}
.crust-infobox .crust-infobox-title a{
transition: none;
}
.crust-infobox.crust-infobox-classic .crust-infobox-title a{
display: block;
}
.crust-infobox span.crust-infobox-title{
display: block;
} .crust-infobox.js-tilt{
transform-style: preserve-3d;
backface-visibility: hidden;
transform: perspective(800px);
}
.crust-infobox.js-tilt .crust-infobox-content-wrap{
transform: translateZ(50px);
}
.crust-infobox.js-tilt .infobox-content-inner{
transform: translateZ(50px) scale(.9);
} .crust-infobox-modern-icon{
position: absolute;
z-index: 0;
right: 0;
bottom: 0;
opacity: .5;
max-width: 150px;
max-height: 150px;
min-width: 120px;
min-height: 120px;
transform-origin: right bottom;
transition: all .7s cubic-bezier(0.2,1,0.3,1);
}
.crust-infobox.img-on-right .crust-infobox-modern-icon{
left: 0;
right: auto
}
.crust-infobox-modern-icon img,
.crust-infobox-modern-icon svg{
opacity: .2
}
.crust-infobox.crust-infobox-modern:hover .crust-infobox-modern-icon{
transform: scale(1.2);
}
.crust-infobox-modern-icon i{
font-size: 120px;
color: #e8ecf3;
}
.crust-infobox-creative svg.crust-divider{
position: absolute;
height: 40px;
max-height: 40px;
bottom: 0;
left: 0;
width: 100%;
z-index: 0;
}
.crust-infobox.js-tilt:hover .crust-divider{
opacity: 0;
} .crust-infobox.crust-infobox-overlay .infobox-icon{
position: relative;
z-index: 2;
}
.crust-infobox-overlay .infobox-content-inner{
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
}
.crust-infobox-overlay.crust-box-content-hover:not(.js-tilt){
overflow: hidden
}
.crust-infobox-overlay.crust-box-content-hover .crust-infobox-content-wrap{
opacity: 0;
transition: all .5s cubic-bezier(0.2,1,0.3,1);
}
.crust-infobox-overlay.crust-box-content-hover.crust-to-top .crust-infobox-content-wrap{
transform: translate(0,30px);
}
.crust-infobox-overlay.crust-box-content-hover.crust-to-right .crust-infobox-content-wrap{
transform: translate(-30px, 0);
}
.crust-infobox-overlay.crust-box-content-hover.crust-to-bottom .crust-infobox-content-wrap{
transform: translate(0,-30px);
}
.crust-infobox-overlay.crust-box-content-hover.crust-to-left .crust-infobox-content-wrap{
transform: translate(30px, 0);
}
.crust-infobox-overlay.crust-box-content-hover:hover .crust-infobox-content-wrap{
opacity: 1;
transform: translate(0,0);
transition-delay: .15s;
}
.crust-infobox .crust-overlay-img-wrap .crust-overlay-img{
opacity: 0;
}
.crust-infobox:hover .crust-overlay-img-wrap .crust-overlay-img{
opacity: 1;
}
.crust-infobox .crust-overlay-img-wrap,
.crust-infobox .crust-overlay-img-wrap .crust-overlay-img{
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
left: 0;
top: 0;
display: block;
transition: all .7s cubic-bezier(0.2,1,0.3,1);
overflow: hidden;
}
.crust-infobox.crust-hover-scale-bg:hover .crust-overlay-img-wrap .crust-overlay-img{
transform: scale(1.1);
}
.crust-infobox.crust-animate-icon-scale:hover .infobox-icon:not(.infobox-icon-type-img) .infobox-icon-wrap,
.crust-infobox.crust-animate-icon-scale:hover .infobox-icon.infobox-icon-type-img .infobox-icon-wrap img{
transform: scale(1.2);
}
.crust-infobox.crust-animate-icon-shrink:hover .infobox-icon:not(.infobox-icon-type-img) .infobox-icon-wrap,
.crust-infobox.crust-animate-icon-shrink:hover .infobox-icon.infobox-icon-type-img .infobox-icon-wrap img{
transform: scale(.9);
}
.crust-infobox.crust-animate-icon-rotate .infobox-icon-wrap{
transition-duration: 1.5s !important;
}
.crust-infobox.crust-animate-icon-rotate:hover .infobox-icon-wrap{
transform: rotate(360deg);
}
.crust-infobox.crust-animate-icon-spin:hover .infobox-icon-wrap{
animation: loadingSpin 1.5s linear 0s infinite normal;
}
.crust-infobox.crust-animate-icon-pulse:hover .infobox-icon-wrap{
animation: pulseEffect .7s linear 0s infinite normal;
} .crust-infobox .infobox-icon {
height: auto;
text-align: center;
display: flex;
}
.crust-infobox.crust-shape-over .infobox-icon{
position: relative;
overflow: hidden;
}
.crust-infobox.crust-shape-over .infobox-icon:after{
position: absolute;
background-color: #fff;
content: "";
display: block;
width: 106%;
height: 80px;
bottom: -79px;
left: 0;
z-index: 2;
transform-origin: 0 0;
transform: rotate(-8deg);
}
.crust-infobox:not(.img-on-left):not(.img-on-right) .infobox-icon{
margin-bottom: 30px;
}
.crust-infobox .infobox-icon .infobox-icon-wrap {
display: flex;
transition: all .7s cubic-bezier(0.2,1,0.3,1), border 0s; align-items: center;
justify-content: center;
position: relative;
}
.crust-infobox .infobox-icon .infobox-icon-wrap .crust-infobox-img-wrap{
display: flex;
align-items: center;
justify-content: center;
}
.crust-infobox.crust-animate-icon-pulse .infobox-icon:not(.infobox-icon-type-img) .infobox-icon-wrap,
.crust-infobox.crust-animate-icon-scale .infobox-icon:not(.infobox-icon-type-img) .infobox-icon-wrap{
overflow: visible
}
.crust-infobox .infobox-icon .infobox-icon-wrap:before,
.crust-infobox .infobox-icon .infobox-icon-wrap:after{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: block;
content: "";
transition: all .7s cubic-bezier(0.2,1,0.3,1);
pointer-events: none;
}
.crust-infobox .infobox-icon .infobox-icon-wrap:after{
opacity: 0;
}
.crust-infobox:hover .infobox-icon .infobox-icon-wrap:after{
opacity: 1;
}
.crust-infobox:hover .infobox-icon .infobox-icon-wrap:before{
opacity: 0;
} .crust-infobox:hover .infobox-icon.animate-scale-lg .infobox-icon-wrap:after{
transform: scale(1.1);
transition-delay: .15s;
}
.crust-infobox:hover .infobox-icon.animate-scale-lg .infobox-icon-wrap:before{
transform: scale(1.1);
} .crust-infobox:hover .infobox-icon.animate-scale-sm .infobox-icon-wrap:after{
transform: scale(.8);
}
.crust-infobox:hover .infobox-icon.animate-scale-sm .infobox-icon-wrap:before{
transform: scale(.5);
} .crust-infobox .infobox-icon.animate-scale-fade .infobox-icon-wrap:after{
transition-delay: .15s;
transform: scale(.8);
}
.crust-infobox:hover .infobox-icon.animate-scale-fade .infobox-icon-wrap:after{
transform: scale(1);
}
.crust-infobox:hover .infobox-icon.animate-scale-fade .infobox-icon-wrap:before{
transform: scale(1.5);
}
.crust-infobox .infobox-icon .infobox-icon-wrap i {
transition: all .7s cubic-bezier(0.2,1,0.3,1);
position: relative;
z-index: 2;
font-size: 35px;
} .crust-infobox .infobox-icon-type-img.animate-img .infobox-icon-wrap img{
transition: all .7s cubic-bezier(0.2,1,0.3,1);
}
.infobox-media-wrap{
display: flex;
}
.crust-infobox:hover .infobox-icon-type-img.animate-img .infobox-icon-wrap img{
transform: scale(1.15);
}
.crust-infobox:hover .infobox-icon-type-img.animate-img .infobox-icon-wrap {
transform: scale(.95);
}
.crust-infobox .infobox-button{
margin-top: 30px;
position: relative;
z-index: 3;
font-size: .9rem;
}
.crust-infobox .infobox-button.full-btn .crust-infobox-button{
display: block;
width: 100%;
} .crust-infobox-content-align-left .crust-infobox .infobox-icon,
.crust-infobox-content-align-left .crust-infobox .infobox-content,
.crust-infobox-content-align-left .crust-infobox .infobox-button {
text-align: left;
}
.crust-infobox-content-align-right .crust-infobox .infobox-icon,
.crust-infobox-content-align-right .crust-infobox .infobox-content,
.crust-infobox-content-align-right .crust-infobox .infobox-button {
text-align: right;
}
.crust-infobox-content-align-center .crust-infobox .infobox-icon,
.crust-infobox-content-align-center .crust-infobox .infobox-content,
.crust-infobox-content-align-center .crust-infobox .infobox-button {
text-align: center;
} .crust-infobox .infobox-button:not(.normal-btn):not(.with-line) a.crust-infobox-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 10px;
transition: all .3s ease;
} .crust-infobox-content-align-left.crust-infobox-icon-bg-shape-square .infobox-icon,
.crust-infobox-content-align-left.crust-infobox-icon-bg-shape-radius .infobox-icon,
.crust-infobox-content-align-left.crust-infobox-icon-bg-shape-circle .infobox-icon {
display: flex;
justify-content: flex-start;
}
.crust-infobox-content-align-center.crust-infobox-icon-bg-shape-square .infobox-icon,
.crust-infobox-content-align-center.crust-infobox-icon-bg-shape-radius .infobox-icon,
.crust-infobox-content-align-center.crust-infobox-icon-bg-shape-circle .infobox-icon {
display: flex;
justify-content: center;
}
.crust-infobox-content-align-right.crust-infobox-icon-bg-shape-square .infobox-icon,
.crust-infobox-content-align-right.crust-infobox-icon-bg-shape-radius .infobox-icon,
.crust-infobox-content-align-right.crust-infobox-icon-bg-shape-circle .infobox-icon {
display: flex;
justify-content: flex-end;
} .crust-infobox.img-on-right .crust-infobox-content-wrap,
.crust-infobox.img-on-left .crust-infobox-content-wrap,
.crust-infobox.img-on-right .infobox-content-inner-wrap,
.crust-infobox.img-on-left .infobox-content-inner-wrap{
display: flex;
}
.crust-infobox.img-on-right .infobox-icon {
margin-left: 15px;
flex: none;
max-width: 50%;
}
.crust-infobox.img-on-left .crust-infobox-content,
.crust-infobox.img-on-right .crust-infobox-content{
flex: 1
}
.crust-infobox.img-on-left .infobox-icon {
margin-right: 15px;
flex: none;
max-width: 50%;
}
.crust-infobox.img-on-left .infobox-icon .infobox-icon-wrap {
background: none;
border: 0;
text-align: left;
height: auto;
}
.crust-infobox .infobox-content p {
margin: 0;
}
.crust-infobox.img-on-left .infobox-icon .infobox-icon-wrap i {
margin-top: 0;
transform: translateY(0%);
}
.crust-infobox.img-on-left .infobox-content .crust-infobox-title {
margin: 0 0 10px 0;
}
.crust-infobox-content-wrap{
position: relative;
z-index: 3;
transition: all .7s cubic-bezier(0.2,1,0.3,1);
} .crust-infobox.img-on-right .crust-infobox-content-wrap {
flex-direction: row-reverse;
flex-wrap: nowrap;
}
.crust-infobox .infobox-icon a{
display: block;
}
.crust-infobox .infobox-icon a{
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
} .crust-infobox .infobox-icon img {
transition: all .7s cubic-bezier(0.2,1,0.3,1);
}
.crust-infobox-hover-img-shape-square:hover .crust-infobox .infobox-icon img {
border-radius: 0;
}
.crust-infobox-shape-circle .crust-infobox .infobox-icon img,
.crust-infobox-hover-img-shape-circle:hover .crust-infobox .infobox-icon img {
border-radius: 50%;
}
.crust-infobox-shape-radius .crust-infobox .infobox-icon img,
.crust-infobox-hover-img-shape-radius:hover .crust-infobox .infobox-icon img {
border-radius: 15px;
}
.crust-infobox:hover .crust-btn-icon-wrap.crust-anim-icon i{
animation-name: btnIconAnim;
animation-duration: 1.2s;
animation-timing-function: linear;
animation-delay: .1s;
display: inline-block;
}
.crust-infobox:hover .crust-btn-icon-wrap.crust-anim-icon.infinite i{
animation-iteration-count: infinite;
animation-delay: 0s;
}
.crust-infobox.crust-animate-icon-slide-right:hover .infobox-icon .infobox-icon-wrap{
overflow: hidden;
}
.infobox-button.enlarge-dot a.crust-infobox-button .crust-btn-icon-wrap{
transform: scale(.15);
background-color: #ff5b4a;
border-radius: 50%;
width: 40px;
height: 40px;
color: #fff;
justify-content: center;
align-items: center;
transform-origin: 0 50%;
overflow: hidden;
}
.crust-infobox:hover .infobox-button.enlarge-dot a.crust-infobox-button .crust-btn-icon-wrap{
transform: scale(1);
transform-origin: 50% 50%;
}
.infobox-button.enlarge-dot a.crust-infobox-button .crust-btn-icon-wrap i{
transform: translateX(-200%);
}
.crust-infobox:hover .infobox-button.enlarge-dot a.crust-infobox-button .crust-btn-icon-wrap i{
animation: icon_anim_right_hover .4s forwards, icon_anim_right_hover2 0.4s forwards 0.3s
}
.crust-infobox .infobox-button.enlarge-dot a.crust-infobox-button:hover .crust-btn-icon-wrap i,
.crust-infobox.crust-animate-icon-slide-right:hover .infobox-icon i{
animation: icon_anim_right_hoverz .4s forwards, icon_anim_right_hoverz2 0.4s forwards 0.3s
}
.infobox-button.with-line a.crust-infobox-button{
display: flex;
align-items: center;
padding: 0;
}
.infobox-button.with-line a.crust-infobox-button .crust-btn-icon-wrap{
transition: all .8s cubic-bezier(.165,.84,.44,1);
}
.crust-infobox:hover .infobox-button.with-line a.crust-infobox-button .crust-btn-icon-wrap{
transition-delay: .4s;
transform: rotate(360deg) scale(1.3);
}
.crust-infobox-button .crust-btn-icon-wrap{
margin-right: 10px;
margin-left: 0;
}
.crust-infobox-button .infobox-button-text + .crust-btn-icon-wrap{
margin-left: 10px;
margin-right: 0;
}
.infobox-button.with-line .crust-infobox-button .infobox-button-text{
flex-basis: auto;
white-space: nowrap;
order: 1;
margin-right: 20px;
}
.infobox-button.with-line a.crust-infobox-button .crust-btn-line{
background-color: #eee;
width: 100%;
height: 1px;
content: "";
order: 2;
flex-basis: auto;
position: relative;
overflow: hidden;
transition: all .5s cubic-bezier(0.44, 0.76, 0.32, 1.28);
}
.infobox-button.with-line a.crust-infobox-button .crust-btn-line:before{
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: #eee;
transition: width 2s cubic-bezier(.555,.205,.295,.975);
}
.crust-infobox:hover .infobox-button.with-line a.crust-infobox-button .crust-btn-line:before,
.infobox-button.with-line:hover a.crust-infobox-button .crust-btn-line:before{
animation: underlineHover 2s cubic-bezier(.58,.3,.005,1) 0s 1;
}
.infobox-button.with-line .crust-btn-icon-wrap{
flex-basis: auto;
order: 3;
margin-left: 20px;
margin-top: -3px;
}
.crust-inline-infobox{
display: inline-block;
}
@media (max-width: 767px) {
.crust-section .crust-infobox.img-on-right .infobox-icon,
.crust-section .crust-infobox.img-on-left .infobox-icon{
margin-bottom: 30px;
max-width: fit-content;
}
}