* {
  box-sizing: border-box;
}

.strips {
  min-height: 100vh;
  text-align: center;
  overflow: hidden;
  color: white;
}
.strips__strip {
  will-change: width, left, z-index, height;
  position: absolute;
  width: 10%;
  min-height: 100vh;
  overflow: hidden;
  cursor: pointer;
  -webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
          transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.strips__strip:nth-child(1) {
  left: 0;
}
.strips__strip:nth-child(2) {
  left: 10vw;
}
.strips__strip:nth-child(3) {
  left: 20vw;
}
.strips__strip:nth-child(4) {
  left: 30vw;
}
.strips__strip:nth-child(5) {
  left: 40vw;
}
.strips__strip:nth-child(6) {
  left: 50vw;
}
.strips__strip:nth-child(7) {
  left: 60vw;
}
.strips__strip:nth-child(8) {
  left: 70vw;
}
.strips__strip:nth-child(9) {
  left: 80vw;
}
.strips__strip:nth-child(10) {
  left: 90vw;
}
.strips__strip:nth-child(1) .strip__content {
     background: -moz-linear-gradient(top, #666, #333 100%);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#666), to(#333));

  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
  -webkit-animation-name: strip1;
          animation-name: strip1;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.strips__strip:nth-child(2) .strip__content {
    background: -moz-linear-gradient(top, #31D583, #01a85f 100%);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#31D583), to(#01a85f));

  -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
  -webkit-animation-name: strip2;
          animation-name: strip2;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.strips__strip:nth-child(3) .strip__content {
  background: -moz-linear-gradient(top, #FFC600, #eaa000 100%);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#FFC600), to(#eaa000));

  -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
  -webkit-animation-name: strip3;
          animation-name: strip3;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.strips__strip:nth-child(4) .strip__content {
  background: -moz-linear-gradient(top, #cacaca, #fff 100%);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#cacaca), to(#fff));
  -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
  -webkit-animation-name: strip4;
          animation-name: strip4;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.strips__strip:nth-child(5) .strip__content {
    background: -moz-linear-gradient(top, #E23E3E, #c90000 100%);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#E23E3E), to(#c90000));

  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
  -webkit-animation-name: strip5;
          animation-name: strip5;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.strips__strip:nth-child(6) .strip__content {
  background: -moz-linear-gradient(top, #FFE793, #CDAA31 100%);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#FFE793), to(#CDAA31));
  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
  -webkit-animation-name: strip5;
          animation-name: strip5;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.strips__strip:nth-child(7) .strip__content {
	background: -moz-linear-gradient(top, #9058C8, #7825cc 100%);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#9058C8), to(#7825cc));

  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
  -webkit-animation-name: strip5;
          animation-name: strip5;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.strips__strip:nth-child(8) .strip__content {
	 background: -moz-linear-gradient(top, #EE5CCA, #e618b3 100%);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#EE5CCA), to(#e618b3));

  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
  -webkit-animation-name: strip5;
          animation-name: strip5;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.strips__strip:nth-child(9) .strip__content {
	 background: -moz-linear-gradient(top, #FFC600, #E23E3E 100%);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#FFC600), to(#E23E3E));

  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
  -webkit-animation-name: strip5;
          animation-name: strip5;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.strips__strip:nth-child(10) .strip__content {
  background: -moz-linear-gradient(top, #2c2c2c, #000 100%);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#2c2c2c), to(#000));

  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
  -webkit-animation-name: strip5;
          animation-name: strip5;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
@media screen and (max-width: 760px) {
  .strips__strip {
    min-height: 10vh;
  }
  .strips__strip:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
  }
  .strips__strip:nth-child(2) {
    top: 10vh;
    left: 0;
    width: 100%;
  }
  .strips__strip:nth-child(3) {
    top: 20vh;
    left: 0;
    width: 100%;
  }
  .strips__strip:nth-child(4) {
    top: 30vh;
    left: 0;
    width: 100%;
  }
  .strips__strip:nth-child(5) {
    top: 40vh;
    left: 0;
    width: 100%;
  }
   .strips__strip:nth-child(6) {
    top: 50vh;
    left: 0;
    width: 100%;
  }
    .strips__strip:nth-child(7) {
    top: 60vh;
    left: 0;
    width: 100%;
  }
     .strips__strip:nth-child(8) {
    top: 70vh;
    left: 0;
    width: 100%;
  }
      .strips__strip:nth-child(9) {
    top: 80vh;
    left: 0;
    width: 100%;
  }
        .strips__strip:nth-child(10) {
    top: 90vh;
    left: 0;
    width: 100%;
  }
}
.strips .strip__content {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
          animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.strips .strip__content:hover:before {
  -webkit-transform: skew(-30deg) scale(3) translate(0, 0);
      -ms-transform: skew(-30deg) scale(3) translate(0, 0);
          transform: skew(-30deg) scale(3) translate(0, 0);
  opacity: 0.1;
}
.strips .strip__content:before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  opacity: 0.05;
  -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
          transform-origin: center center;
  -webkit-transform: skew(-30deg) scaleY(1) translate(0, 0);
      -ms-transform: skew(-30deg) scaleY(1) translate(0, 0);
          transform: skew(-30deg) scaleY(1) translate(0, 0);
  -webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
          transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.strips .strip__inner-text {
  will-change: transform, opacity;
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: 80%;
  overflow:hidden;
  -webkit-transform: translate(-50%, -50%) scale(0.5);
      -ms-transform: translate(-50%, -50%) scale(0.5);
          transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  -webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
          transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.strips__strip--expanded {
  width: 100%;
  top: 0 !important;
  left: 0 !important;
  z-index: 3;
  cursor: default;
}
/*每个内容*/
.te-l{
	margin:0px;
	padding:0px;
	float:left;
	width:25%;
	text-align:right;
	}
.te-2{
	margin:0px 0px 0px 0px;
	padding:0px;
	float:right;
	width:65%;
	text-align:left;
	}
.huo {
margin: 20px 0px 0px 0px;
padding: 7px 0px 0px 0px;
height: 51px;
font-size: 27px;
font-family: "微软雅黑";
color: #fff;
overflow:hidden;
}
.huo span.fang{
	margin:0px;
	padding:0px 30px 10px 0px;
	background: url(../images/p-13.png) no-repeat 0px 5px;
	}
.huo span.fang2{
	margin:0px 0px 0px 10px;
	padding:0px 0px 10px 30px;
	background: url(../images/p-13.png) no-repeat 0px 5px;
	}
.ren {
margin: 30px 0px 0px 0px;
padding: 0px;
font-size: 18px;
font-family: "微软雅黑";
color: #fff;
height:57px;
background: url(../images/p-14.png) no-repeat 0px 0px;
}
.ren h3.huojiang{
	margin:0px 0px 0px 0px;
	padding:2px 0px 10px 70px;
	float:left;
	font-weight:normal;
	}
.ren h3.xiaoshi{
	margin:0px 0px 0px 0px;
	padding:2px 0px 10px 40px;
	float:left;
	font-weight:normal;
	}
.ren h3.xiaoshi a:link,.ren h3.xiaoshi a:visited{
	text-decoration:none;
	color:#fff;
	}
.ren h3.xiaoshi a:hover{
	text-decoration:underline;
	}
.you {
margin: 30px 0px 0px 0px;
padding: 0px 0px 0px 70px;
background: url(../images/p-15.png) no-repeat;
height:40px;
font-size:20px;
font-family: "微软雅黑";
color: #fff;
}
.rong {
margin: 5px 0px 0px 0px;
padding: 0px 0px 20px 0px;
font-size: 16px;
font-family: "微软雅黑";
color: #fff;
line-height: 30px;
border-bottom:1px dashed #fff;
}
.diandian{
	margin:15px 0px 0px 0px;
	padding:0px;
	background: url(../images/p-16.png) no-repeat;
	}
.huigu {
margin: 30px 0px 0px 0px;
padding: 5px 0px 0px 70px;
background: url(../images/p-17.png) no-repeat;
height: 40px;
font-size: 20px;
font-family: "微软雅黑";
color: #fff;
}
.gu-rong {
margin: 10px 0px 0px 0px;
padding: 0px;
font-size: 16px;
font-family: "微软雅黑";
color: #fff;
line-height: 30px;
}
.gu-rong a:link,.gu-rong a:visited{
	text-decoration:none;
	color:#fff;
	}
.gu-rong a:hover{
	text-decoration:underline;
	}
/*每个内容2*/
.te-l{
	margin:0px;
	padding:0px;
	float:left;
	width:25%;
	text-align:right;
	}
.te-2{
	margin:0px 0px 0px 0px;
	padding:0px;
	float:right;
	width:65%;
	text-align:left;
	}
.huo2 {
margin: 20px 0px 0px 0px;
padding: 7px 0px 0px 0px;
height: 51px;
font-size: 27px;
font-family: "微软雅黑";
color: #000;
overflow:hidden;
}
.huo2 span.fang2{
	margin:0px;
	padding:0px 30px 10px 0px;
	background: url(../images/p-13.png) no-repeat 0px 5px;
	}
.huo2 span.fang22{
	margin:0px 0px 0px 10px;
	padding:0px 0px 10px 30px;
	background: url(../images/p-13.png) no-repeat 0px 5px;
	}
.ren2 {
margin: 30px 0px 0px 0px;
padding: 0px;
font-size: 18px;
font-family: "微软雅黑";
color: #000;
height:57px;
background: url(../images/p-14.png) no-repeat 0px 0px;
}
.ren2 h3.huojiang{
	margin:0px 0px 0px 0px;
	padding:2px 0px 10px 70px;
	float:left;
	font-weight:normal;
	}
.ren2 h3.xiaoshi{
	margin:0px 0px 0px 0px;
	padding:2px 0px 10px 40px;
	float:left;
	font-weight:normal;
	}
.ren2 h3.xiaoshi a:link,.ren2 h3.xiaoshi a:visited{
	text-decoration:none;
	color:#000;
	}
.ren h3.xiaoshi a:hover{
	text-decoration:underline;
	}
.you2 {
margin: 30px 0px 0px 0px;
padding: 0px 0px 0px 70px;
background: url(../images/p-15.png) no-repeat;
height:40px;
font-size:20px;
font-family: "微软雅黑";
color: #000;
}
.rong2 {
margin: 5px 0px 0px 0px;
padding: 0px 0px 20px 0px;
font-size: 16px;
font-family: "微软雅黑";
color: #000;
line-height: 30px;
border-bottom:1px dashed #fff;

}
.diandian{
	margin:15px 0px 0px 0px;
	padding:0px;
	background: url(../images/p-16.png) no-repeat;

	}
.huigu2 {
margin: 30px 0px 0px 0px;
padding: 5px 0px 0px 70px;
background: url(../images/p-17.png) no-repeat;
height: 40px;
font-size: 20px;
font-family: "微软雅黑";
color: #000;
}
.gu-rong2 {
margin: 10px 0px 0px 0px;
padding: 0px;
font-size: 16px;
font-family: "微软雅黑";
color: #000;
line-height: 30px;
}
.gu-rong2 a:link,.gu-rong2 a:visited{
	text-decoration:none;
	color:#000;
	}
.gu-rong2 a:hover{
	text-decoration:underline;
	}
@media screen and (max-width: 760px) {
.strips .strip__inner-text {
  will-change: transform, opacity;
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: 90%;
}


.strip__inner-text p.ti{
	margin:0px 0px 0px 0px;
	padding:0px;
}
.strip__inner-text p.ti2{
	margin:30px 0px 0px 0px;
	padding:0px;
	text-align:left;
	}
  .strips__strip--expanded {
    min-height: 100vh;
  }
  
 /*每个内容*/
.te-l{
	margin:0px auto;
	padding:0px;
	float:none;
	width:100%;
	}
.te-l h2{
	margin:0px;
	padding:0px;
	width:100%;
	height:100%;
	text-align:center;
	}
.te-l h2 img{
	width:40%;
	text-align:center;
	}
.te-2{
	margin:0px 0px 0px 0px;
	padding:0px;
	float:none;
	width:100%;
	text-align:left;
	}
.huo {
margin:10px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background:none;
height:auto;
font-size:1.5rem;
font-family: "微软雅黑";
color: #fff;
overflow:hidden;
font-weight:bold;
}
.huo span.fang{
	margin:0px;
	padding:0px 0px 0px 0px;
	background:none;
	}
.huo span.fang2{
	margin:0px 0px 0px 0px;
	padding:0px 0px 10px 0px;
	background:none;
	}

.ren {
margin:10px 0px 0px 8px;
padding: 0px;
font-size: 0.5rem;
font-family: "微软雅黑";
color: #fff;
background:none;
height:auto;

}

.ren h3.huojiang{
	margin:0px 0px 0px 0px;
	padding:2px 0px 0px 0px;
	float:none;
	font-weight:normal;
	font-size:1rem;
	}
.ren h3.xiaoshi{
	margin:2px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	float:none;
	font-weight:normal;
	font-size:0.8rem;
	}
.ren h3.xiaoshi a:link,.ren h3.xiaoshi a:visited{
	text-decoration:none;
	color:#fff;
	}
.ren h3.xiaoshi a:hover{
	text-decoration:underline;
	}

.you {
margin:15px 0px 0px 8px;
padding: 0px 0px 0px 0px;
background:none;
height:18px;
font-size:1rem;
font-family: "微软雅黑";
color: #fff;
clear:both;
}
.diandian{
	margin:0px 0px 0px 0px;
	padding:0px;
	background:none;
	}


.rong {
margin:5px 0px 0px 8px;
padding: 0px;
font-size: 0.8rem;
font-family: "微软雅黑";
color: #fff;
line-height: 20px;
border-bottom:none;
}
.huigu {
margin: 15px 0px 0px 8px;
padding: 0px 0px 0px 0px;
background:none;
height:18px;
font-size:1rem;
font-family: "微软雅黑";
color: #fff;
}
.gu-rong {
margin: 5px 0px 0px 8px;
padding: 0px;
font-size: 0.8rem;
font-family: "微软雅黑";
color: #fff;
line-height: 20px;
} 
 /*每个内容2*/
.te-l{
	margin:0px auto;
	padding:0px;
	float:none;
	width:100%;
	}
.te-l h2{
	margin:0px;
	padding:0px;
	width:100%;
	height:100%;
	text-align:center;
	}
.te-l h2 img{
	width:40%;
	text-align:center;
	}
.te-2{
	margin:0px 0px 0px 0px;
	padding:0px;
	float:none;
	width:100%;
	text-align:left;
	}
.huo2 {
margin:10px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background:none;
height:auto;
font-size:1.5rem;
font-family: "微软雅黑";
color: #000;
overflow:hidden;
}
.huo2 span.fang2{
	margin:0px;
	padding:0px 0px 0px 0px;
	background:none;
	}
.huo2 span.fang22{
	margin:0px 0px 0px 0px;
	padding:0px 0px 10px 0px;
	background:none;
	}

.ren2 {
margin:10px 0px 0px 10px;
padding: 0px;
font-size: 0.5rem;
font-family: "微软雅黑";
color: #000;
background:none;
height:auto;

}

.ren2 h3.huojiang{
	margin:0px 0px 0px 0px;
	padding:2px 0px 0px 0px;
	float:none;
	font-weight:normal;
	font-size:1rem;
	}
.ren2 h3.xiaoshi{
	margin:2px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	float:none;
	font-weight:normal;
	font-size:0.8rem;
	}
.ren2 h3.xiaoshi a:link,.ren2 h3.xiaoshi a:visited{
	text-decoration:none;
	color:#000;
	}
.ren2 h3.xiaoshi a:hover{
	text-decoration:underline;
	}

.you2 {
margin:15px 0px 0px 10px;
padding: 0px 0px 0px 0px;
background:none;
height:18px;
font-size:1rem;
font-family: "微软雅黑";
color: #000;
clear:both;
}
.diandian{
	margin:0px 0px 0px 0px;
	padding:0px;
	background:none;
	}


.rong2 {
margin:5px 0px 0px 10px;
padding: 0px;
font-size: 0.8rem;
font-family: "微软雅黑";
color: #000;
line-height: 20px;
border-bottom:none;
}
.huigu2 {
margin: 15px 0px 0px 10px;
padding: 0px 0px 0px 0px;
background:none;
height:18px;
font-size:1rem;
font-family: "微软雅黑";
color: #000;
}
.gu-rong2 {
margin: 5px 0px 0px 10px;
padding: 0px;
font-size: 0.8rem;
font-family: "微软雅黑";
color: #000;
line-height: 20px;
} 
  
}
.strips__strip--expanded .strip__content:hover:before {
  -webkit-transform: skew(-30deg) scale(1) translate(0, 0);
      -ms-transform: skew(-30deg) scale(1) translate(0, 0);
          transform: skew(-30deg) scale(1) translate(0, 0);
  opacity: 0.05;
}
.strips__strip--expanded .strip__title {
  opacity: 0;
}
.strips__strip--expanded .strip__inner-text {
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) scale(1);
      -ms-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}

.strip__title {
  display: block;
  margin: 0;
  position: relative;
  z-index: 2;
  width: 100%;
  font-size: 2vw;
  color: white;
  -webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
          transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
@media screen and (max-width: 760px) {

.strips .strip__inner-text {
  will-change: transform, opacity;
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: 90%;
}


.strip__inner-text p.ti{
	margin:0px 0px 0px 0px;
	padding:0px;
}
.strip__inner-text p.ti2{
	margin:30px 0px 0px 0px;
	padding:0px;
	text-align:left;
	}
  .strip__title {
    font-size: 28px;
  }
}

.strip__close {
  position: absolute;
  right: 1vw;
  top: 3vw;
  line-height:3rem;
  width:50px;
  height:50px;
  opacity: 0;
  z-index: 10;
  -webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
          transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.strip__close--show {
  opacity: 1;
}

@-webkit-keyframes strip1 {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes strip1 {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes strip2 {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes strip2 {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes strip3 {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes strip3 {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes strip4 {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes strip4 {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes strip5 {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes strip5 {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
/**/ 
@-webkit-keyframes strip6 {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes strip6 {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes strip7 {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes strip7 {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes strip8 {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes strip8 {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes strip9 {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes strip9 {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes strip10 {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes strip10 {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
/* Demo purposes */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  line-height: 1.5;
}

h1, h2 {
  font-weight: 300;
}

.fa {
  font-size: 30px;
  color: white;
}

h2 {
  font-size: 36px;
  margin: 0 0 16px;
}

p {
  margin: 0 0 16px;
}