@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 200;
  src: local('Source Sans Pro ExtraLight'), local('SourceSansPro-ExtraLight'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wlxdr.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlxdr.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7g.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlxdr.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdr.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 900;
  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwlxdr.ttf) format('truetype');
}
body {
  background: -webkit-gradient(linear, left top, right top, color-stop(10%, #E6DADA), color-stop(90%, #274046));
  background: linear-gradient(90deg, #E6DADA 10%, #274046 90%);
  /* W3C */
  font-family: 'Source Sans Pro', sans-serif;
  text-rendering: optimizeLegibility;
}
div.holder {
  height: 600px;
  left: 50%;
  opacity: 0.8;
  -webkit-perspective: 1500;
          perspective: 1500;
  position: absolute;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.6);
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, -200px);
          transform: translate3d(-50%, -50%, -200px);
  width: 400px;
}
div.holder > div {
  color: #7a7a7a;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: all 1.5s ease-in;
  transition: all 1.5s ease-in;
  width: 100%;
}
div.holder > div p {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.075em;
  line-height: 2em;
  text-transform: uppercase;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: all 1.5s ease-in;
  transition: all 1.5s ease-in;
}
div.holder div.left {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background: #e5e5e5;
  text-align: right;
  z-index: 10;
}
div.holder div.left p {
  right: 20px;
}
div.holder div.right {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background: #e5e5e5;
  -webkit-transform: rotateY(90deg) translate3d(200px, 0, 200px);
          transform: rotateY(90deg) translate3d(200px, 0, 200px);
  z-index: 5;
}
div.holder div.right p {
  left: 20px;
}
div.change div.left {
  background: #bfbfbf;
  -webkit-transform: rotateY(-45deg) translateX(-200px);
          transform: rotateY(-45deg) translateX(-200px);
}
div.change div.left p {
  color: #676767;
}
div.change div.right {
  background: #ffffff;
  -webkit-transform: rotateY(45deg) translateX(200px);
          transform: rotateY(45deg) translateX(200px);
}
div.change div.right p {
  color: #8d8d8d;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 #ffffff;
}
div.toggle {
  bottom: 60px;
  left: 50%;
  opacity: 0.8;
  position: absolute;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
div.toggle a {
  background: #545454;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  font-weight: 200;
  font-size: 18px;
  padding: 6px 40px 7px;
  text-decoration: none;
  letter-spacing: 0.025em;
}
div.toggle a:hover {
  background: #141414;
}