* {box-sizing:border-box}
.strips {min-height:100vh;text-align:center;overflow:hidden}
.strips__strip {
  will-change: width, left, z-index, height;
  position: absolute;
  width: 25%;
  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:25vw}
.strips__strip:nth-child(3) {left:50vw}
.strips__strip:nth-child(4) {left:75vw}

.strips__strip:nth-child(1) .strip__content {
  background-color: #39c;
  background-image:url(./bj.jpg) ;
  background-repeat: no-repeat;
  background-position:50% 50%;
  background-size:cover;
  -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-color: #125;
  background-image:url(./bg-af.png);
  background-repeat: no-repeat;
  background-position:50% 50%;
  background-size:100%;
  -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-color: #fa0;
  background-image:url(./bg-cy.png);
  background-repeat: no-repeat;
  background-position:50% 50%;
  background-size:100%;
  -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-color: #e24;
  background-image:url(./bg-yl.png);
  background-repeat: no-repeat;
  background-position:50% 50%;
  background-size:100%;
  -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;
}

@media screen and (orientation: portrait) {
.strips__strip {min-height:25vh}
  .strips__strip:nth-child(1) {top:0;left:0;width:100%}
  .strips__strip:nth-child(2) {top:25vh;left:0;width:100%}
  .strips__strip:nth-child(3) {top:50vh;left:0;width:100%}
  .strips__strip:nth-child(4) {top:75vh;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;
}
.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--expanded.strips__strip .strip__content:before{
	  -webkit-transform: skew(0deg) scaleY(1) translate(0, 0);
      -ms-transform: skew(0deg) scaleY(1) translate(0, 0);
          transform: skew(0deg) scaleY(1) translate(0, 0);
}

.strips .strip__inner-text {
 visibility: hidden;
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: 80%;
  -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}

.strips__strip--expanded:nth-child(2) .strip__content,
.strips__strip--expanded:nth-child(3) .strip__content,
.strips__strip--expanded:nth-child(4) .strip__content{
	background-image:-webkit-radial-gradient(50% 0%, ellipse cover, rgba(255,255,255,.3) 0, transparent 100%) !important;
	background-image:radial-gradient(50% 0%, ellipse cover, rgba(255,255,255,.3) 0, transparent 100%) !important;}

@media screen and (orientation: portrait) {
  .strips__strip--expanded {min-height:100vh}
  .strips .strip__inner-text {width:84%}
  
  .strips__strip:nth-child(2) .strip__content,
  .strips__strip:nth-child(3) .strip__content,
  .strips__strip:nth-child(4) .strip__content{background-size:auto 100%;}
  
}

.strips__strip--expanded .strip__content:before,
.strips__strip--expanded .strip__content:hover:before {opacity:0}

.strips__strip--expanded.strips__strip:nth-child(1) .strip__content:before{
	  -webkit-transform: skew(0deg) scaleY(1) translate(0, 0);
      -ms-transform: skew(0deg) scaleY(1) translate(0, 0);
          transform: skew(0deg) scaleY(1) translate(0, 0);
	background-color:rgba(0,50,150,.8);
	opacity:1
}
.strips__strip--expanded .strip__title {opacity: 0}
.strips__strip--expanded .strip__inner-text {
	visibility: visible !important;
  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%;
  color:rgb(255,255,255);
  text-align: center;
  -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);
}
.strip__inner-text h2>big,
.strip__title big{font-size:24px;display:block;text-shadow:0 5px 5px rgba(0,0,0,.1);letter-spacing:.1em;}
.strip__inner-text h2>small,
.strip__title small{font-size:12px;font-weight:400;display:block;opacity:.5;letter-spacing:1px;}
.strip__close {
	outline: none;
  position: absolute;
  width:30px;height:30px;line-height:30px;
  font-size:16px;
  text-align: center;
  background-color:rgba(255,255,255,.5);
  box-shadow:0 0 8px rgba(0,0,0,.1);
  color:rgba(255,0,0,.5);
  border-radius:50%;
  left:  calc(50% - 15px);
  bottom: 3%;
  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:before{content:'\2716';}
.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);}}
/* Demo purposes */
html{background-color:rgb(0,10,20);margin:0;padding:0;}
body {margin:0;padding:0;font-family:Verdana,\5fae\8f6f\96c5\9ed1,\5B8B\4F53;-webkit-font-smoothing:antialiased;text-rendering: geometricPrecision;line-height:1.5;font-size:14px;color:rgb(255,255,255)}
#svglogo{width:80px;height:auto;}
#biglogo{font-size:36px;display: none;}
#smalllogo{font-size:14px;margin-top:-8px;}
img.QRcode-png{width:128px;}
img.QRcode-png+small{display: block;font-size:10px;opacity:.5;}
a{color: rgb(255,255,255); text-decoration:none;border-bottom:1px solid currentcolor;}
a.website{font-weight:700;}
h1,h2,h3,h4,h5,p{margin: 0 0 14px;}
h1{font-size: 24px;}
h2{font-size: 24px;}
h3{font-size: 20px;}
h4,p{font-size:16px;letter-spacing:2px;}
p.wxQRcode{margin-top:6em;}
@media screen and (orientation: portrait) {
p.wxQRcode{display: none;}
h4,p{font-size:14px;letter-spacing:0;}
}