@charset "utf-8";
/*首页*/
/**slide-首页**/
.bannerSwiper{width:100%;height:1080px; }
.swiper-home {width: 100%;height: 100%; background: #fff;}
.swiper-home .swiper-photo{position: absolute;z-index: 9;width:46.8%;left:0;top:0;bottom: 0;-webkit-transition: all .5s cubic-bezier(0.285, -0.450, 0.935, 0.110); -moz-transition: all .5s cubic-bezier(0.285, -0.450, 0.935, 0.110); transition: all .5s cubic-bezier(0.285, -0.450, 0.935, 0.110);background-repeat: no-repeat;background-position: right top;background-size: cover;}
.swiper-home .swiper-photo a{display: block;height: 1080px;}
.swiper-home .swiper-slide {-webkit-box-sizing: border-box;box-sizing: border-box;background-color: #f7f8f8;}
.swiper-home .swiper-slide img{width:100%;}
.swiper-home .caseSlidePhoto{visibility: hidden;}
.swiper-home .caseSlideInfo{width:53.2%;height:1080px;float: right;color:#000;background-color: #f7f8f8;position: relative;}
.swiper-home .caseSlideInfo h4{margin-top: 280px;font-size:40px;margin-left: 60px;font-weight: lighter;margin-bottom: 15px;}
.swiper-home .caseSlideInfo h4 a{color:#000;}
.swiper-home .caseSlideInfo h4 a:hover{color:#000;}
.swiper-home .caseSlideInfo .serviceContent{font-size:20px;margin-left: 60px;}


.swiper-home .caseDescript{width:53.2%;height: 280px;position: absolute;bottom: 0;right:0;z-index: 1;background-color: #fff;}
.swiper-home .caseDescript dt,.swiper-home .caseDescript dd{margin-left:60px;width: calc(90% - 60px);}
.swiper-home .caseDescript dt{font-size: 30px; color: #231815; margin: 60px 0 20px 60px; font-weight: lighter;}
.swiper-home .caseDescript dd{font-size: 14px;color:#595757;line-height: 38px;text-align:justify}
.swiper-container-horizontal>.swiper-pagination-line.swiper-pagination-bullets{bottom:340px;left: 46.8%;margin-left: 60px;width:auto;}
.swiper-container-horizontal>.swiper-pagination-line.swiper-pagination-bullets .swiper-pagination-bullet{margin:0;width:40px;height: 3px;border-radius:0;background-color: #fff;opacity: 1;}
.swiper-container-horizontal>.swiper-pagination-line.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active{background-color: #000;}
.serviceSection{width: 88.54%;margin:0 auto;padding-top:142px;}
.serviceSection:after{content:"";display:block;clear:both;height: 0; visibility: hidden; }
.serviceSection .brand{width:50%;float: left;}
.serviceSection .dev {width:50%;float: right;}
.serviceSection .tIco{font-size: 65px;color:#f3c91f;}
.serviceSection h3{line-height: 18px;margin:25px 0 10px;}
.serviceSection h3,.serviceSection .more,.serviceSection h3 .iconfont{color:#231815;font-size:16px;}
.serviceSection h3 .iconfont{margin-left:5px;font-size: 18px;line-height: 1;vertical-align: middle;margin-top: -2px;display: inline-block;}
.serviceSection.hover .tIco,.serviceSection.hover h3{color:#231b00;}
.serviceSection .brand ul,.serviceSection .dev ul{overflow: hidden;margin:20px 0 140px;}
.serviceSection .brand ul li{width:25%;float: left;height: 36px;line-height: 36px;color:#595757}
.serviceSection .dev ul li{width:33.33%;float: left;height: 36px;line-height: 36px;color:#595757}
.serviceSection  ul li a{color:#333;font-size: 14px;}
.serviceSection  ul li a:hover{color:#f3c91f;}
.wrapStyle1{width: 88.54%;margin:0 auto;}

.wrapStyle2{width: 100%;margin:0 auto;}
.wrapStyle1,.wrapStyle2{background-position: center top;background-repeat: no-repeat;}
/**案例-首页**/
.caseSection{width: 88.54%;margin:140px auto 0;position: relative;}
.caseSection h3 {font-size: 14px;color:#231815;line-height: 28px;}
.caseSection h3 .iconfont{font-size:28px;color:#f3c91f;margin-right: 12px;vertical-align: middle;}
.caseSection .favLink{line-height: 28px;position: absolute;right:0;top:0;}
.caseSection .favLink .t{font-size: 14px;color:#555555;}
.caseSection .favLink .t .iconfont{font-size:28px;color:#f3c91f;margin-right: 10px;vertical-align: middle;}
.caseSection .favLink a{font-size: 14px;color:#595757;display: inline-block;margin:0 13px;}
.caseSection .favLink a:hover{text-decoration:underline;color:#231815}
.caseSection .caseList{margin-top:70px;}
.caseSection .caseList:after{content:"";display:block;clear:both;height: 0; visibility: hidden; }
.caseSection .caseList li {width: 33.333333%;float: left;position: relative;overflow: hidden;display: block}
.caseSection .caseList li img {width: 100%;height: auto;display: block;transition: all .3s ease;position: relative;z-index: 1;}
.caseSection .caseList li:hover img {transform: scale(1.1);-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1)}
.caseSection .caseList li dl{width: 100%;height: 100%;background:url(../images/black.png);top: 0; left: 0; position: absolute; color:#fff;z-index: 0;opacity: 0;}
.caseSection .caseList li dl dt{position: absolute;top: -30px;left: 0;font-size: 22px;padding:25px;transition: all 0.3s ease;}
.caseSection .caseList li dl dd{position: absolute;bottom: -50px;left: 0;right: 0;transition: all 0.3s ease;}
.caseSection .caseList li dl dd h5{font-size: 24px;padding:0 0 0 25px;}
.caseSection .caseList li dl dd p{font-size: 12px;padding:12px 0 25px 25px;}
.caseSection .caseList li:hover dl{z-index: 2;opacity: 1;}
.caseSection .caseList li:hover dl dt{top:0;}
.caseSection .caseList li:hover dl dd{bottom:0;}
.caseSection .moreCase{border:1px solid #9fa0a0;color:#9fa0a0;font-size: 14px;display: block;margin:96px auto 0;width:148px;height:43px;line-height: 43px;text-align: center;}
.caseSection .moreCase:hover{color:#535353;border-color:#535353;}
/*news-首页*/
.newsSection{width: 88.54%;margin:140px auto 0;}
.newsSection:after{content:"";display:block;clear:both;height: 0; visibility: hidden; }
.newsSection .leftSection,.newsSection .middleSection{float: left;width:23%;}
.newsSection .leftSection{margin-left: 8%;margin-right:7.5%;}
.newsSection .rightSection{width:23%;margin-right: 8%;float: right;}
.newsSection .tIco{font-size: 65px;color:#f3c91f;}
.newsSection h3{font-size: 18px;color:#231815;margin:20px 0 40px;}
.newsSection h3 a{color:#231815;}
.newsSection h3 a:hover span{text-decoration:underline;}
.newsSection ul li{height: 40px;line-height: 40px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.newsSection ul li a{color:#595757;font-size: 14px;}
.newsSection ul li a:hover{color:#231815;text-decoration:underline;}
.newsSection .more{height: 40px;line-height: 40px;color:#898989;font-style: italic;font-size:12px;}
.newsSection .more a{color:#898989;font-style: italic;font-size:13px;}

/*合作客户*/
.customersSection{width: 88.54%;margin:140px auto 0;}
.customersBox{margin:0 8%;}
.customersSection .tIco{font-size: 65px;color:#f3c91f;}
.customersSection h3{font-size: 18px;color:#231815;margin:25px 0 10px;}
.customersSection h3:after{content:">";display: inline-block;margin-left:5px;}
.customersSection ul{margin:40px 0 190px;}
.customersSection ul:after{content:"";display:block;clear:both;height: 0; visibility: hidden; }
.customersSection ul li {width: 19%;float: left;height: 40px;line-height: 40px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;margin-right:8%;transition: all 0.3s;color:#595757;}
.customersSection ul li:nth-child(4n+4){margin-right: 0;}
.customersSection .iconfont.iconarrow-right{display:none;}

.serviceCates {width:88.54%;margin:0 auto;}
.serviceCates ul{margin-top:200px;}
.serviceCates ul:after{content:"";display:block;clear:both;height: 0; visibility: hidden; }
.serviceCates ul li{width:16.66%;height:92px;float: left;text-align: center;margin-bottom: 100px;}
.serviceCates ul li .iconfont{font-size: 38px;color:#b5b5b6;transition: all 0.3s}
.serviceCates ul li span{color:#898989;font-size: 14px;display: block;line-height: 34px;margin-top:15px;transition: all 0.3s}

/*关于*/
.aboutContainer{width:88.54%;margin:200px auto 0;text-align:justify;}
.aboutContainer .halfBox{width:50%;margin-left: 50%;margin-top:140px;color:#000;}
.aboutContainer .halfBox h4{font-size: 30px;margin-bottom: 30px;font-weight: lighter;color:#231815}
.aboutContainer .halfBox p{font-size: 14px;line-height: 30px;color:#595757;}
.aboutContainer .shubInfo{margin-bottom: 100px;color:#231815;}
.aboutContainer .shubInfo:after{content:"";display:block;clear:both;height: 0; visibility: hidden; }
.aboutContainer .shubInfo dt{width:25%;margin-left: 25%;float:left;font-size:20px;line-height: 36px;}
.aboutContainer .shubInfo dt span{display: block;}
.aboutContainer .shubInfo dd{width:50%;float: right;font-size:16px;line-height: 36px;color:#595757;text-align: justify;}
.swiper-company {margin-top:100px;}
.swiper-company .swiper-slide {-webkit-box-sizing: border-box;box-sizing: border-box;}
.swiper-company .swiper-button-next,.swiper-company .swiper-button-prev{color:#f3c91f;}
.cultureSection{width: 88.54%;margin:200px auto 0;overflow: hidden;}
.cultureSection ul{margin:40px 8% 0px;width:110%;}
.cultureSection ul:after{content:"";display:block;clear:both;height: 0; visibility: hidden; }
.cultureSection ul li {width: 18%;float: left;height: 250px;margin-bottom:95px;margin-right:4%;}
.cultureSection ul li:nth-child(4n+4){margin-right: 0;}
.cultureSection ul li .t{color:#231815;font-size:20px;line-height:36px;margin:15px 0 30px; }
.cultureSection ul li .t:after{content:">";display: inline-block;margin-left:8px;}
.cultureSection ul li p{color:#595757;font-size:14px;line-height:30px;}
.cultureSection ul li .tico{font-size: 45px;color:#f3c91f;}

/*案例*/
.caseMenu{width: 88.54%;margin:0 auto;text-align: center;padding-top: 150px;}
.caseMenu .m{display: inline-block;width:215px;text-align: center;}
.caseMenu .m .iconfont{color:#e3e3e3;font-size:50px;transition: all 0.3s;}
.caseMenu .m a{color:#595757;font-size: 20px;display: block;height: 24px;line-height:24px;margin-top:30px; }
.caseMenu .m a.icolink{font-size:50px;height:50px;line-height:50px;margin:0;}
.caseMenu .m.on .iconfont{color:#f3c91f;}
.caseMenu .m:hover .iconfont{color:#f3c91f;}
.caseMenu .m:hover a{color:#231815;}
.itemsLink{width: 88.54%;margin:80px auto 60px;text-align: center;}
.itemsLink a{color:#898989;font-size: 16px;display: inline-block;padding:0 15px;margin:0 15px;}
.itemsLink a:hover,.itemsLink a.on{color:#231815;text-decoration:underline}
.caseMainInfo{width:1270px;margin:200px auto 150px;}
.caseContent{width: 88.54%;margin:0 auto;}
.caseContent .caseMainInfo:after{content:"";display:block;clear:both;height: 0; visibility: hidden; }
.caseContent .articleHead{width:260px;float:left;}
.caseContent .articleHead h1{font-size: 20px;line-height: 36px;color:#231815;margin-bottom: 20px;}
.caseContent .articleHead h1:after{content: "\e603";display: block;font-family: "iconfont"}
.caseContent .articleHead .cate{font-size: 14px;color:#898989;line-height: 1.2;}
.caseContent .caseSummary{width:845px;float: right;font-size: 16px;line-height: 36px;color:#595757;text-align:justify;}
.caseContent .pageSwitch{width:620px;height:40px;margin:180px auto 140px;overflow: hidden;}
.caseContent .pageSwitch .prevCasePage,.caseContent .pageSwitch .nextCasePage{width:27px;height:36px;background: url("../images/arrow-group.png") 0 -47px no-repeat;}
.caseContent .pageSwitch .prevCasePage{background-position: 0 -47px;float: left;}
.caseContent .pageSwitch .nextCasePage{background-position: -29px -47px;float: right;}
.caseContent .pageSwitch .prevCasePage:hover{background-position: 0 -87px;}
.caseContent .pageSwitch .nextCasePage:hover{background-position: -29px -87px;}
.caseContent .moreCase,.caseContent .relatedCase{border:1px solid #9fa0a0;color:#9fa0a0;font-size: 14px;display: block;margin:96px auto 0;width:148px;height:43px;line-height: 43px;text-align: center;}
.caseContent .moreCase:hover{color:#f3c91f;border-color:#f3c91f;}
.caseContent .relatedCase .iconfont{font-size: 18px;display: inline-block;vertical-align: middle;margin-bottom: -2px;}

/*新闻*/
.newsContent{width: 88.54%;margin:0 auto;}
.newsContent .newsMainInfo:after{content:"";display:block;clear:both;height: 0; visibility: hidden; }
.newsContent .articleHead{margin-top:190px;text-align:left;}
.newsContent .articleHead h1{font-size: 20px;line-height: 1.5;color:#231815;margin-bottom: 20px;}
.newsContent .articleHead .cate{font-size: 14px;color:#888;line-height: 1.2;}
.newsContent .newsSummary{font-size: 16px;line-height: 36px;color:#595757;margin-top: 150px;text-align:justify;}
.newsContent .pageSwitch{width:620px;height:40px;margin:180px auto 140px;overflow: hidden;}
.newsContent .pageSwitch .prevCasePage,.newsContent .pageSwitch .nextCasePage{width:27px;height:36px;background: url("../images/arrow-group.png") 0 -47px no-repeat;}
.newsContent .pageSwitch .prevCasePage{background-position: 0 -47px;float: left;}
.newsContent .pageSwitch .nextCasePage{background-position: -29px -47px;float: right;}
.newsContent .pageSwitch .prevCasePage:hover{background-position: 0 -87px;}
.newsContent .pageSwitch .nextCasePage:hover{background-position: -29px -87px;}
.newsAnimation{width: 88.54%;margin: 130px auto 0;}

.newsAnimation ul{margin:0;position: relative;height: 125px;}
.newsAnimation ul li{position: absolute;left: 0;top:0;}
.newsAnimation ul li.transition{-webkit-transition: all .5s cubic-bezier(0.285, -0.450, 0.935, 0.110); -moz-transition: all .5s cubic-bezier(0.285, -0.450, 0.935, 0.110); transition: all .5s cubic-bezier(0.285, -0.450, 0.935, 0.110); }
.newsAnimation ul li .tIco{font-size: 65px;color:#f3c91f;}
.newsAnimation ul li h3{font-size: 18px;color:#231815;margin:20px 0 0px;}
.newsAnimation ul li h3 a:hover span{text-decoration:underline;}
.newsAnimation ul li:nth-child(1){left:8%;}
.newsAnimation ul li:nth-child(2){left:38.5%;}
.newsAnimation ul li:nth-child(3){left:69%;}
.newsSection .newsListBox{margin:-80px 0 0;}
.newsSection .newsListBox ul:after{content:"";display:block;clear:both;height: 0; visibility: hidden; }
.newsSection .newsListBox li{float: left;width: 23%;margin-right: 7.5%;}
.newsSection .newsListBox li:nth-child(3n+1){margin-left: 8%;}
.newsSection .newsListBox li:nth-child(3n+3){margin-right: 0;}
.newsMainInfo{width:50%;margin-left:50%;}
.newsFlag{width: 25%; margin-left: 25%;float: left; font-size: 20px; line-height: 36px;color:#231815}
.newsFlag span{display: block;}
/*联系*/
.cooperationNotes{width:66.14%;margin:205px auto 0;min-width: 1200px;}
.cooperationNotes .tit{font-size: 20px;color:#231815;line-height: 36px;}
.cooperationNotes .tit span{display: block;}
.cooperationNotes .content{font-size: 16px;color:#595757;line-height: 36px;text-align:justify;}
.cooperationNotes .content .str{font-size: 18px;color:#231815;margin-bottom: 20px;margin-top: 70px;}
.leaveMsg{font-size: 16px;color:#231815;line-height: 36px;text-align: center;padding:200px 0 ; }
.map{margin:80px auto 50px;}
.msgForm{width:990px;margin:0 auto;}
.msgForm .msgTb li{padding-bottom:40px;overflow:hidden}
.msgForm .msgTb li .msgTxt{border:0;border-bottom:1px solid #dfdfdf; width:465px;height:38px;line-height:38px;font-size:18px;padding-left:5px}
.msgForm .msgTb li .msgTxt2{border:0;border-bottom:1px solid #dfdfdf;width:980px;height:140px;resize:none;padding:5px;font-size:18px; }
.msgForm .msgTb li .msgTxt3{border:0;border-bottom:1px solid #dfdfdf;width:980px;height:38px;resize:none;padding:5px;font-size:18px; }
.msgForm .msgTb li .tdl{float:left;}
.msgForm .msgTb li .tdr{float:right;}
.msgForm .msgTb li input,.msgForm .msgTb li textarea{outline: none}
.msgForm .msgTb li .subBtn{width:148px;height:43px;border:1px solid #dfdfdf;font-size: 14px;color:#9fa0a0;background-color: #fff;display: block;margin:60px auto 0;transition: all 0.3s;}
.msgForm .msgTb li .subBtn:hover{border-color:#f3c91f;color:#f3c91f;}
.msgList{width:1200px;border-left:solid 1px #E9E9E9;border-top:solid 1px #E9E9E9; height:100%; position:relative; margin:150px auto 0;}
.msgList dl:after{content:"";display:block;clear:both;height: 0; visibility: hidden; }
.msgList dd{ width:33.333%; float:left; overflow:hidden; box-sizing:border-box; background:#E9E9E9; position:relative; height:auto; border-right:solid 1px #E9E9E9; border-bottom:solid 1px #E9E9E9; -webkit-perspective:200; perspective-origin:center; }
.msgList dd > div.content{ cursor:pointer; position:relative; backface-visibility:hidden; box-sizing:border-box; -webkit-transform-origin:center center; padding:11.8% 9.4% 12.5% 12.5%; background:#fff; }
.msgList dd > div.content > div{ height:64px; overflow:hidden; padding-left:84px; margin-bottom:18px; }
.msgList dd > div.content > div.head0{ background:url(../images/avatar/head0.png) left top no-repeat; }
.msgList dd > div.content > div.head1{ background:url(../images/avatar/head1.png) left top no-repeat; }
.msgList dd > div.content > div.head2{ background:url(../images/avatar/head2.png) left top no-repeat; }
.msgList dd > div.content > div.head3{ background:url(../images/avatar/head3.png) left top no-repeat; }
.msgList dd > div.content > div.head4{ background:url(../images/avatar/head4.png) left top no-repeat; }
.msgList dd > div.content > div.head5{ background:url(../images/avatar/head5.png) left top no-repeat; }
.msgList dd > div.content > div.head6{ background:url(../images/avatar/head6.png) left top no-repeat; }
.msgList dd > div.content > div > span{ font-size:14px; color:#3f3f3f; line-height:34px; }
.msgList dd > div.content > div > time{ font-size:13px; color:#3f3f3f; }
.msgList dd > div.content > p{ height:72px; line-height:24px; overflow:hidden; font-size:12px; color:#3f3f3f; opacity:0.8; }
.msgList dd > div.replay{ position:absolute; backface-visibility:hidden; -webkit-transform-origin:center top; cursor:pointer; left:0; top:0; opacity:0; filter:alpha(opacity=0)\9; pointer-events:none; background:#FED30D; height:100%; width:100%; z-index:3; padding:0; }
.msgList dd > div.replay > div{ box-sizing:border-box; padding:11.875% 9.375% 12.5% 12.5%; color:#3f3f3f; }
.msgList dd > div.replay > div > div{ height:64px; overflow:hidden; padding-left:84px; background:url(../images/avatar/messageHeader.png) left top no-repeat; margin-bottom:18px; }
.msgList dd > div.replay > div > div > span{ font-size:14px;line-height:34px; }
.msgList dd > div.replay > div > div > time{ font-size:11px; }
.msgList dd > div.replay > div > p{ height:72px; line-height:24px; overflow:hidden; font-size:12px; opacity:0.8; }
.msgList .more{display: block; margin:4% auto; width: 358px; border: solid 3px #CACACA; height: 47px; line-height: 47px; text-align: center; font-size: 1em; color: #7A7A7A; transition:all 477ms;}
.msgList .more:hover{background:#7A7A7A; color:#fff; }
.msgList dd.hover > div.replay{ opacity:1; top:0; }
.msgList dd.hover > div.content{ opacity:0; }
.msgList .moreLeaveMsg{border:1px solid #9fa0a0;color:#9fa0a0;font-size: 14px;display: block;margin:96px auto 0;width:148px;height:43px;line-height: 43px;text-align: center;}
.msgList .moreLeaveMsg:hover{color:#f3c91f;border-color:#f3c91f;}
.moveFromBottomFade { animation: moveFromBottomFade .7s ease-in-out both;}
.rotateFoldTop { animation: rotateFoldTop .7s both ease-in-out;}
.rotateFoldBottom { animation: rotateFoldBottom .7s both ease-in-out;}
.moveFromTopFade {animation: moveFromTopFade .7s ease-in-out both;}

@keyframes moveFromTopFade{from{opacity:1; transform: translateY(-100%)} to{opacity:1; ransform: translateY(0%)}}
@keyframes moveFromBottomFade{from{opacity:1; transform: translateY(100%)} to{opacity:1; transform: translateY(0%)}}
@keyframes rotateFoldTop{to{opacity: 0; transform: translateY(-50%) rotateX(90deg)}}
@keyframes rotateFoldBottom{from{opacity:1; transform: translateY(0%);} to{opacity: 0; transform: translateY(100%) rotateX(-90deg)}}
.supports .grid{/*background: url(../img/loading.gif) no-repeat 50% 100px;*/}
.supports .grid.loaded{background: none;}
.grid li{display: inline-block;overflow: hidden;text-align: left;vertical-align: top;}
.supports .grid li{display: none;float: left;}
.supports .grid.loaded li{display: block;}
/* Anchor and image */
.grid li > a,
.grid li img{display: block;outline: none;border: none;}
.grid li > a{position: relative;overflow: hidden;}
/* Curtain element */
.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;}
/* Shadow */
.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%;}
/* Pseudo element for hover effect */
.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;}
/* Animations */
/* Swipe right */
.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);}}
/* Swipe down */
.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);}}
/* Swipe rotate */
.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);}}
/* Shadow */
.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;}}
/* Hide image and title and show at half time */
.supports .grid li img,
.supports .grid li h3{visibility: hidden;}
.grid li.animate img{-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{visibility: visible;}

.hackBody footer{width:50%;}