.cq-borderhover-overlay{
opacity: 0;
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-transition: opacity 400ms cubic-bezier(0.175, 0.885, 0.320, 1);
-moz-transition: opacity 400ms cubic-bezier(0.175, 0.885, 0.320, 1);
-o-transition: opacity 400ms cubic-bezier(0.175, 0.885, 0.320, 1);
transition: opacity 400ms cubic-bezier(0.175, 0.885, 0.320, 1);
}
.cq-borderhover-item {
position: relative;
text-align: center;
overflow: hidden;
height: 240px;
min-height: 200px;
margin-bottom: 24px;
} .cq-borderhover-item:hover .cq-borderhover-overlay{
opacity: 1;
}
.cq-borderhover-item:hover .cq-borderhover-background {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
.cq-borderhover-item .cq-borderhover-background {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
-webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.320, 1);
-moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.320, 1);
-o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.320, 1);
transition: all 400ms cubic-bezier(0.175, 0.885, 0.320, 1);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1)
}
.cq-borderhover-item a {
text-decoration: none;
color: #fff;
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 20% 20px;
z-index: 2
} .cq-borderhover-item a .cq-borderhover-topborder {
border-top: 2px solid #fff;
content: '';
position: absolute;
width: 0;
height: 90%; top: 5%;
-webkit-transition: all 600ms cubic-bezier(1, 0, 0, 1);
-moz-transition: all 600ms cubic-bezier(1, 0, 0, 1);
-o-transition: all 600ms cubic-bezier(1, 0, 0, 1);
transition: all 600ms cubic-bezier(1, 0, 0, 1);
-webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
-moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
-o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
transition-timing-function: cubic-bezier(1, 0, 0, 1)
}
.cq-borderhover-item a .cq-borderhover-rightborder {
border-right: 2px solid #fff;
content: '';
position: absolute;
width: 90%;
height: 0;
left: 5%; -webkit-transition: all 600ms cubic-bezier(1, 0, 0, 1);
-moz-transition: all 600ms cubic-bezier(1, 0, 0, 1);
-o-transition: all 600ms cubic-bezier(1, 0, 0, 1);
transition: all 600ms cubic-bezier(1, 0, 0, 1);
-webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
-moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
-o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
transition-timing-function: cubic-bezier(1, 0, 0, 1)
}
.cq-borderhover-item a .cq-borderhover-bottomborder {
border-bottom: 2px solid #fff;
content: '';
position: absolute;
width: 0;
height: 90%; top: 5%;
-webkit-transition: all 600ms cubic-bezier(1, 0, 0, 1);
-moz-transition: all 600ms cubic-bezier(1, 0, 0, 1);
-o-transition: all 600ms cubic-bezier(1, 0, 0, 1);
transition: all 600ms cubic-bezier(1, 0, 0, 1);
-webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
-moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
-o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
transition-timing-function: cubic-bezier(1, 0, 0, 1)
}
.cq-borderhover-item a .cq-borderhover-leftborder {
content: '';
position: absolute;
width: 90%;
height: 0;
left: 5%;
bottom: 5%;
-webkit-transition: all 600ms cubic-bezier(1, 0, 0, 1);
-moz-transition: all 600ms cubic-bezier(1, 0, 0, 1);
-o-transition: all 600ms cubic-bezier(1, 0, 0, 1);
transition: all 600ms cubic-bezier(1, 0, 0, 1);
-webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
-moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
-o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
transition-timing-function: cubic-bezier(1, 0, 0, 1)
}
.cq-borderhover.cq-bordertype-solid .cq-borderhover-topborder{
border-top: 2px solid #fff;
}
.cq-borderhover.cq-bordertype-solid .cq-borderhover-rightborder{
border-right: 2px solid #fff;
}
.cq-borderhover.cq-bordertype-solid .cq-borderhover-bottomborder{
border-bottom: 2px solid #fff;
}
.cq-borderhover.cq-bordertype-solid .cq-borderhover-leftborder{
border-left: 2px solid #fff;
}
.cq-borderhover.cq-bordertype-dashed .cq-borderhover-topborder{
border-top: 2px dashed #fff;
}
.cq-borderhover.cq-bordertype-dashed .cq-borderhover-rightborder{
border-right: 2px dashed #fff;
}
.cq-borderhover.cq-bordertype-dashed .cq-borderhover-bottomborder{
border-bottom: 2px dashed #fff;
}
.cq-borderhover.cq-bordertype-dashed .cq-borderhover-leftborder{
border-left: 2px dashed #fff;
}
.cq-borderhover.cq-bordertype-none .cq-borderhover-topborder{
border-top: none;
}
.cq-borderhover.cq-bordertype-none .cq-borderhover-rightborder{
border-right: none;
}
.cq-borderhover.cq-bordertype-none .cq-borderhover-bottomborder{
border-bottom: none;
}
.cq-borderhover.cq-bordertype-none .cq-borderhover-leftborder{
border-left: none;
}
.cq-borderhover.cq-bordertype-dotted .cq-borderhover-topborder{
border-top: 2px dotted #fff;
}
.cq-borderhover.cq-bordertype-dotted .cq-borderhover-rightborder{
border-right: 2px dotted #fff;
}
.cq-borderhover.cq-bordertype-dotted .cq-borderhover-bottomborder{
border-bottom: 2px dotted #fff;
}
.cq-borderhover.cq-bordertype-dotted .cq-borderhover-leftborder{
border-left: 2px dotted #fff;
}
.cq-borderhover-item.cq-crosshand1 a .cq-borderhover-topborder{
left: 5%;
}
.cq-borderhover-item.cq-crosshand1 a .cq-borderhover-rightborder{
bottom: 5%;
}
.cq-borderhover-item.cq-crosshand1 a .cq-borderhover-bottomborder{
right: 5%;
}
.cq-borderhover-item.cq-crosshand1 a .cq-borderhover-leftborder{
top: 5%;
}
.cq-borderhover-item.cq-crosshand2 a .cq-borderhover-topborder{
left: 5%;
}
.cq-borderhover-item.cq-crosshand2 a .cq-borderhover-rightborder{
top: 5%;
left: 5%;
}
.cq-borderhover-item.cq-crosshand2 a .cq-borderhover-bottomborder{
right: 5%;
}
.cq-borderhover-item.cq-crosshand2 a .cq-borderhover-leftborder{
right: 5%;
}
.cq-borderhover-item.cq-crosshand3 a .cq-borderhover-topborder{
right: 5%;
}
.cq-borderhover-item.cq-crosshand3 a .cq-borderhover-rightborder{
top: 5%;
left: 5%;
}
.cq-borderhover-item.cq-crosshand3 a .cq-borderhover-bottomborder{
left: 5%;
}
.cq-borderhover-item.cq-crosshand3 a .cq-borderhover-leftborder{
left: 5%;
}
.cq-borderhover-item.cq-crosshand4 a .cq-borderhover-topborder{
right: 5%;
}
.cq-borderhover-item.cq-crosshand4 a .cq-borderhover-rightborder{
bottom: 5%;
right: 5%;
}
.cq-borderhover-item.cq-crosshand4 a .cq-borderhover-bottomborder{
left: 5%;
}
.cq-borderhover-item.cq-crosshand4 a .cq-borderhover-leftborder{
top: 5%;
left: 5%;
}
.cq-borderhover-item a:hover .cq-borderhover-leftborder {
height: 90%
}
.cq-borderhover-item a:hover .cq-borderhover-topborder {
width: 90%
}
.cq-borderhover-item a:hover .cq-borderhover-rightborder {
height: 90%
}
.cq-borderhover-item a:hover .cq-borderhover-bottomborder {
width: 90%
}
.cq-borderhover-item .cq-borderhover-textcontainer {
width: 80%;
text-align: center;
position: absolute;
left: 10%;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.cq-borderhover.cq-borderhover-hidetexttrue .cq-borderhover-textcontainer{
opacity: 0;
-webkit-transition: opacity 400ms ease;
-moz-transition: opacity 400ms ease;
-o-transition: opacity 400ms ease;
transition: opacity 400ms ease;
}
.cq-borderhover.cq-borderhover-hidetexttrue:hover .cq-borderhover-textcontainer{
opacity: 1;
}
.cq-borderhover-item .cq-borderhover-title {
color: #FFF;
margin: 0;
position: relative;
line-height: 140%; margin-bottom: 12px
}
.cq-borderhover-item .cq-borderhover-label {
margin: 0px 0 0 0;
line-height: 150%;
padding-top: 12px;
} .cq-borderhover-item .cq-borderhover-titleborder {
display: inline-block;
width: 40px;
position: absolute;
left: 50%; margin-left: -20px;
border-bottom: 1px solid #fff
}