.grid-wrap {
clear: both;
margin: 0 auto;
padding: 0;
max-width: 1260px;
}
.grid {
margin: 30px auto;
padding: 0;
list-style: none;
min-height: 500px;
}
.grid.swipe-down{
margin: 0 auto;
}
.js .grid {
background: url(//xoraql.com/wp-content/plugins/portfolio-x-pro//themes//template-06/img/loading.gif) no-repeat 50% 100px;
}
.js .grid.loaded {
background: none;
}
.grid li {
display: inline-block;
overflow: hidden;
width: 314px;
text-align: left;
vertical-align: top;
margin-left: 0 !important;
}
.js .grid li {
display: none;
float: left;
}
.js .grid.loaded li {
display: block;
} .title-box h2 {
display: block;
margin: 7px;
padding: 20px;
background: #2E3444;
color: #D3EEE2;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 300;
}
.title-box h2 a {
display: block;
font-weight: 900;
}
.title-box h2 a:hover {
color: #D3EEE2;
} .grid li > a, .grid li > .grid-content,
.grid li img {
display: block;
outline: none;
border: none;
}
.grid li > .grid-content{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.grid li > .grid-content, .grid li > a {
position: relative;
overflow: hidden;
margin: 14px 7px;
} .grid .curtain {
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100%;
height: 100%;
background: #96cdc8;
display: none;
}
.grid.swipe-right .curtain {
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
}
.grid.swipe-down .curtain {
-webkit-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);
}
.grid.swipe-rotate .curtain {
width: 200%;
height: 200%;
-webkit-transform: rotate3d(0,0,1,90deg);
transform: rotate3d(0,0,1,90deg);
-webkit-transform-origin: top left;
transform-origin: top left;
} .grid .curtain::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,1);
content: '';
}
.grid.swipe-right .curtain::after,
.grid.swipe-rotate .curtain::after {
left: -100%;
}
.grid.swipe-down .curtain::after {
top: -100%;
} .grid li h3 {
position: absolute;
bottom: 0;
left: 0;
margin: 0;
padding: 20px;
width: 100%;
background: #2E3444;
color: #D3EEE2;
text-align: right;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 800;
font-size: 1em;
-webkit-transition: -webkit-transform 0.2s, color 0.2s;
transition: transform 0.2s, color 0.2s;
box-sizing: border-box;
} .grid li > a::before {
position: absolute;
top: 0;
left: 0;
border: 0px solid transparent;
background: rgba(0,0,0,0);
content: '';
-webkit-transition: border-width 0.2s, border-color 0.2s;
transition: border-width 0.2s, border-color 0.2s;
right: 0;
bottom: 0;
} .grid li.shown:hover h3 {
color: #fff;
-webkit-transform: translate3d(0,-30px,0);
transform: translate3d(0,-30px,0);
}
.grid li.shown:hover > a::before, .grid li:hover > .grid-content {
border: 14px solid #2E3444;
cursor: pointer;
}
.qc-grid-hover-effect-button-area.bare-buttons {
bottom: 200px;
margin: 0 auto;
position: relative;
text-align: center;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
transition: all 0.8s ease;
display: none;
}
.grid li:hover .qc-grid-hover-effect-button-area.bare-buttons{
display: block;
}  .grid.swipe-right li.animate .curtain {
-webkit-animation: swipeRight 1.5s cubic-bezier(0.6,0,0.4,1) forwards;
animation: swipeRight 1.5s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes swipeRight {
0% {} 50%, 60% { -webkit-transform: translate3d(0,0,0); }
100% { -webkit-transform: translate3d(100%,0,0); }
}
@keyframes swipeRight {
0% {}
50%, 60% { -webkit-transform: translate3d(0,0,0); transform: translate(0); }
100% { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); }
} .grid.swipe-down li.animate .curtain {
-webkit-animation: swipeDown 1.5s cubic-bezier(0.6,0,0.4,1) forwards;
animation: swipeDown 1.5s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes swipeDown {
0% {} 50%, 60% { -webkit-transform: translate3d(0,0,0); }
100% { -webkit-transform: translate3d(0,100%,0); }
}
@keyframes swipeDown {
0% {}
50%, 60% { -webkit-transform: translate(0); transform: translate(0); }
100% { transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); }
} .grid.swipe-rotate li.animate .curtain {
-webkit-animation: swipeRotate 1.5s ease forwards;
animation: swipeRotate 1.5s ease forwards;
}
@-webkit-keyframes swipeRotate {
0% {} 50%, 60% { -webkit-transform: rotate3d(0,0,1,0deg); }
100% { -webkit-transform: rotate3d(0,0,1,-90deg); }
}
@keyframes swipeRotate {
0% {}
50%, 60% { -webkit-transform: rotate3d(0,0,1,0deg); transform: rotate3d(0,0,1,0deg); }
100% { -webkit-transform: rotate3d(0,0,1,-90deg); transform: rotate3d(0,0,1,-90deg); }
} .grid li.animate .curtain::after {
-webkit-animation: fadeOut 1.5s ease forwards;
animation: fadeOut 1.5s ease forwards;
-webkit-animation-delay: inherit;
animation-delay: inherit;
}
@-webkit-keyframes fadeOut {
0% {} 50%, 60% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes fadeOut {
0% {}
50%, 60% { opacity: 1; }
100% { opacity: 0; }
} .js .grid li img,
.js .grid li h3 {
visibility: hidden;
}
.grid li.animate img,
.grid li.animate h3 {
-webkit-animation: showMe 1.5s step-end forwards;
animation: showMe 1.5s step-end forwards;
}
@-webkit-keyframes showMe {
from { visibility: hidden; }
60%, 100% { visibility: visible; }
}
@keyframes showMe {
from { visibility: hidden; }
60%, 100% { visibility: visible; }
}
.grid li.shown img,
.grid li.shown h3 {
visibility: visible;
}