*,
 *:before,
 *:after {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
 
 body {
   font-family: "Open Sans", sans-serif;
   background-color: #282828;
 }
 
 .slider-pages {
   overflow: hidden;
   position: relative;
   height: 100vh;
 }
 
 .slider-page {
   position: absolute;
   top: 0;
   width: 50%;
   height: 100vh;
   -webkit-transition: -webkit-transform 1350ms;
   transition: -webkit-transform 1350ms;
   transition: transform 1350ms;
   transition: transform 1350ms, -webkit-transform 1350ms;
 }
 
 .slider-page--skew {
   overflow: hidden;
   position: absolute;
   top: 0;
   width: 140%;
   height: 100%;
   background: #282828;
   -webkit-transform: skewX(-18deg);
           transform: skewX(-18deg);
 }
 
 .slider-page--left {
   left: 0;
   -webkit-transform: translateX(-32.5vh) translateY(100%) translateZ(0);
           transform: translateX(-32.5vh) translateY(100%) translateZ(0);
 }
 
 .slider-page--left .slider-page--skew {
   left: -40%;
 }
 
 .slider-page--left .slider-page__content {
   padding: auto 30% auto 30%;
   -webkit-transform-origin: 100% 0;
           transform-origin: 100% 0;
 }
 
 .slider-page--right {
   left: 50%;
   -webkit-transform: translateX(32.5vh) translateY(-100%) translateZ(0);
           transform: translateX(32.5vh) translateY(-100%) translateZ(0);
 }
 
 .slider-page--right .slider-page--skew {
   right: -40%;
 }
 
 .slider-page--right .slider-page__content {
   padding: auto 30% auto 30%;
   -webkit-transform-origin: 0 100%;
           transform-origin: 0 100%;
 }
 
 .slider-page__content {
   position: absolute;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-flow: column wrap;
           flex-flow: column wrap;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   padding: 0 30% 0 30%;
   color: #e2e2e2;
   background-size: cover;
   -webkit-transform: skewX(18deg);
           transform: skewX(18deg);
   -webkit-transition: -webkit-transform 1350ms;
   transition: -webkit-transform 1350ms;
   transition: transform 1350ms;
   transition: transform 1350ms, -webkit-transform 1350ms;
 }
 
 .slider-page__title {
   margin-bottom: 1em;
   font-size: 1em;
   text-align: center;
   text-transform: uppercase;
 }
 
 .slider-page__title--big {
   font-size: 1.2em;
 }
 
 .slider-page__description {
   font-size: 1em;
   text-align: center;
 }
 
 .slider-page__link {
   color: #80a1c1;
 }
 
 .slider-page__link:hover, .slider-page__link:focus {
   color: #6386a9;
   text-decoration: none;
 }

 .js-scrolling__page {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
 }
 
 .js-scrolling--active .slider-page {
   -webkit-transform: translateX(0) translateY(0) translateZ(0);
           transform: translateX(0) translateY(0) translateZ(0);
 }
 
 .js-scrolling--inactive .slider-page__content {
   -webkit-transform: skewX(18deg) scale(0.9);
           transform: skewX(18deg) scale(0.9);
 }
 
 .js-scrolling__page-1 .slider-page--left .slider-page__content {
   background-image: url("https://w0.peakpx.com/wallpaper/116/459/HD-wallpaper-microchip-neon-lines-black-background-chips-technology-backgrounds.jpg");
 }
 
 .js-scrolling__page-1 .slider-page--right .slider-page__content {
   background-color: #282828;
 }
 
 .js-scrolling__page-2 .slider-page--left .slider-page__content {
   background-color: #e2e2e2;
 }
 
 .js-scrolling__page-2 .slider-page--left .slider-page__title,
 .js-scrolling__page-2 .slider-page--left .slider-page__description {
   color: #282828;
 }
 
 .js-scrolling__page-2 .slider-page--right .slider-page__content {
   background-image: url("https://t4.ftcdn.net/jpg/05/14/82/31/360_F_514823175_31tWpLnkJic8bc97YB3QvT2kMIWmosgA.jpg");
 }
 
 .js-scrolling__page-3 .slider-page--left .slider-page__content {
   background-image: url("https://wallpapers.com/images/hd/coding-background-ffg9v3haqo4xeemj.jpg");
 }
 
 .js-scrolling__page-3 .slider-page--right .slider-page__content {
   background-color: #282828;
 }
 
 .social {
     border:5px solid #fff;
     list-style: none;
     padding: 10px !important;
     padding: 0;
 }
 
 .social ul {
     margin: 0;
     padding: 5px;
 }
 
 .social ul li {
     margin: 5px;
     list-style: none outside none;
     display: inline-block;
 }
 
 .social i {
     width: 40px;
     height: 40px;
     background-color: #FFF;
     color: #909AA0;
     font-size: 28px;
     line-height: 0.5em;
     text-align:center;
     padding-top: 12px;
 
     transition: all ease 0.3s;
     -moz-transition: all ease 0.3s;
     -webkit-transition: all ease 0.3s;
     -o-transition: all ease 0.3s;
     -ms-transition: all ease 0.3s;
 }
 
 .social i:hover {
     color: #FFF;
     text-decoration: none;
     transition: all ease 0.3s;
     -moz-transition: all ease 0.3s;
     -webkit-transition: all ease 0.3s;
     -o-transition: all ease 0.3s;
     -ms-transition: all ease 0.3s;
 }
 
 .social .fa-facebook:hover {
     background: #4060A5;
 }
 
 .social .fa-twitter:hover {
     background: #00ABE3;
 }
 
 .social .fa-google-plus:hover {
     background: #e64522;
 }
 
 .social .fa-github:hover {
     background: #343434;
 }
 
 .social .fa-pinterest:hover {
     background: #cb2027;
 }
 
 .social .fa-linkedin:hover {
     background: #0094BC;
 }
 
 .social .fa-flickr:hover {
     background: #FF57AE;
 }
 
 .social .fa-instagram:hover {
     background: #375989;
 }
 
 .social .fa-stack-overflow:hover {
     background: #FEA501;
 }
 
 .social .fa-codepen:hover {
     background: #3a5876;
 }
 
 .social .fa-youtube:hover {
     background: #FF1F25;
 }