/*
.grid-wrap {clear: both;margin: 0 auto;padding: 0;max-width: 1920px;}
.grid {margin: 30px auto;padding: 0;list-style: none;min-height: 500px;}
.js .grid {background: url(../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;}
.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 img {display: block;outline: none;border: none; cursor:pointer;}
.grid li > a {position: relative;overflow: hidden; }
.grid .curtain {position: absolute;top: 0;left: 0;z-index: 100;width: 100%;height: 100%;background: #96cdc8;}
.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
{
width:100%; position: absolute; bottom:0px; ; margin: 0 auto;  
color: #fff; text-align: center; text-transform: uppercase; letter-spacing:-0.5px; font-weight: normal; font-size:16px;
-webkit-transition: -webkit-transform 0.2s, color 0.2s; transition: transform 0.2s, color 0.2s;
 font-weight:bold;padding:15px 0; margin:15px 0; background:#000; opacity:0.6
/*height:50px; line-height:50px; background: rgba(0,0,0,0.7); */
}


.grid li > a::before {position: absolute; top: 0;left: 0;width: 100.5%;height: 100.5%; 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;}
.grid li.shown:hover h3 {color: #fff; -webkit-transform: translate3d(0,-30px,0); transform: translate3d(0,-30px,0);}
.grid li.shown:hover > a::before {border-width: 14px;border-color: #2E3444;}


.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% {} /* fixes Chrome 35.0.1916.114 issue (easing breaks) */ 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% {} /* fixes Chrome 35.0.1916.114 issue (easing breaks) */	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% {} /* fixes Chrome 35.0.1916.114 issue (easing breaks) */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% {} /* fixes Chrome 35.0.1916.114 issue (easing breaks) */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;}