daily pastebin goal
77%
SHARE
TWEET

Untitled

a guest Feb 14th, 2018 78 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. .slides-nav {
  2.   z-index: 99;
  3.   position: fixed;
  4.   right: -5%;
  5.   display: -webkit-box;
  6.   display: -ms-flexbox;
  7.   display: flex;
  8.   -webkit-box-align: center;
  9.       -ms-flex-align: center;
  10.           align-items: center;
  11.   height: 100%;
  12.   color: #111;
  13. }
  14. @media (min-width: 54em) {
  15.   .slides-nav {
  16.     right: 2%;
  17.   }
  18. }
  19. .slides-nav__nav {
  20.   position: relative;
  21.   right: 0;
  22.   display: block;
  23.   font-size: 1em;
  24.   -webkit-transform: rotate(90deg);
  25.           transform: rotate(90deg);
  26.   -webkit-transform-origin: center;
  27.           transform-origin: center;
  28. }
  29. .slides-nav button {
  30.   position: relative;
  31.   display: inline-block;
  32.   padding: 0.35em;
  33.   margin: 0;
  34.   font-family: "Space Mono", monospace;
  35.   -webkit-appearance: none;
  36.      -moz-appearance: none;
  37.           appearance: none;
  38.   background: transparent;
  39.   border: 0;
  40.   overflow-x: hidden;
  41.   -webkit-transition: color 0.5s ease;
  42.   transition: color 0.5s ease;
  43. }
  44. .slides-nav button:after {
  45.   content: '';
  46.   position: absolute;
  47.   top: 50%;
  48.   left: 0;
  49.   height: 1px;
  50.   width: 0;
  51.   background: #111;
  52.   -webkit-transition: width 0.4s ease;
  53.   transition: width 0.4s ease;
  54. }
  55. .slides-nav button:hover {
  56.   cursor: pointer;
  57.   color: rgba(17, 17, 17, 0.75);
  58.   -webkit-transition: color 0.5s ease;
  59.   transition: color 0.5s ease;
  60. }
  61. .slides-nav button:hover:after {
  62.   width: 100%;
  63.   -webkit-transition: width 0.4s ease;
  64.   transition: width 0.4s ease;
  65. }
  66. .slides-nav button:focus {
  67.   outline: 0;
  68. }
  69. .is-sliding .slides-nav {
  70.   pointer-events: none;
  71. }
  72.  
  73. .slides {
  74.   position: relative;
  75.   display: block;
  76.   height: 100vh;
  77.   width: 100%;
  78.   background: #fff;
  79.   -webkit-transition: background 1s cubic-bezier(0.99, 1, 0.92, 1);
  80.   transition: background 1s cubic-bezier(0.99, 1, 0.92, 1);
  81. }
  82. .is-sliding .slides {
  83.   background: #ededed;
  84.   -webkit-transition: background 0.3s cubic-bezier(0.99, 1, 0.92, 1);
  85.   transition: background 0.3s cubic-bezier(0.99, 1, 0.92, 1);
  86. }
  87.  
  88. .slide {
  89.   z-index: -1;
  90.   padding: 0;
  91.   position: absolute;
  92.   width: 100%;
  93.   height: 100vh;
  94.   -webkit-transition: z-index 1s ease;
  95.   transition: z-index 1s ease;
  96. }
  97. .slide.is-active {
  98.   z-index: 19;
  99.   -webkit-transition: z-index 1s ease;
  100.   transition: z-index 1s ease;
  101. }
  102. .slide__content {
  103.   position: relative;
  104.   margin: 0 auto;
  105.   height: 95%;
  106.   width: 95%;
  107.   top: 2.5%;
  108. }
  109. @media (min-width: 54em) {
  110.   .slide__content {
  111.     height: 80%;
  112.     width: 80%;
  113.     top: 10%;
  114.   }
  115. }
  116. .slide__header {
  117.   z-index: 9;
  118.   position: relative;
  119.   height: 100%;
  120.   display: -webkit-box;
  121.   display: -ms-flexbox;
  122.   display: flex;
  123.   -webkit-box-align: center;
  124.       -ms-flex-align: center;
  125.           align-items: center;
  126.   overflow-y: hidden;
  127.   -webkit-transform: translateX(5%);
  128.           transform: translateX(5%);
  129. }
  130. @media (min-width: 54em) {
  131.   .slide__header {
  132.     -webkit-transform: translateX(-5%);
  133.             transform: translateX(-5%);
  134.   }
  135. }
  136. .slide__title {
  137.   font-family: Montserrat, helvetica;
  138.   font-size: 2.5em;
  139.   font-weight: 700;
  140.   color: #111;
  141.   overflow-y: hidden;
  142. }
  143. @media (min-width: 54em) {
  144.   .slide__title {
  145.     font-size: 5em;
  146.   }
  147. }
  148. .slide__title .title-line {
  149.   display: block;
  150.   overflow-y: hidden;
  151. }
  152. .slide__title .title-line span {
  153.   display: inline-block;
  154.   -webkit-transform: translate3d(0, 140%, 0);
  155.           transform: translate3d(0, 140%, 0);
  156.   opacity: 0;
  157.   -webkit-transition: opacity 0.8s ease, -webkit-transform 0.4s ease;
  158.   transition: opacity 0.8s ease, -webkit-transform 0.4s ease;
  159.   transition: transform 0.4s ease, opacity 0.8s ease;
  160.   transition: transform 0.4s ease, opacity 0.8s ease, -webkit-transform 0.4s ease;
  161. }
  162. .slide__title .title-line span:nth-child(1) {
  163.   -webkit-transition-delay: 0.15s;
  164.           transition-delay: 0.15s;
  165. }
  166. .slide__title .title-line span:nth-child(2) {
  167.   -webkit-transition-delay: 0.3s;
  168.           transition-delay: 0.3s;
  169. }
  170. .is-active .slide__title .title-line span {
  171.   -webkit-transform: translate3d(0, 0%, 0);
  172.           transform: translate3d(0, 0%, 0);
  173.   opacity: 1;
  174.   -webkit-transition: opacity 0.1s ease, -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  175.   transition: opacity 0.1s ease, -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  176.   transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s ease;
  177.   transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s ease, -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  178. }
  179. .is-active .slide__title .title-line:nth-of-type(2n) span {
  180.   -webkit-transition-delay: 0.2s;
  181.           transition-delay: 0.2s;
  182. }
  183. .slide__figure {
  184.   z-index: 7;
  185.   position: absolute;
  186.   left: 0;
  187.   right: 0;
  188.   margin: 0 auto;
  189.   height: 100%;
  190.   width: 100%;
  191.   -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  192.   transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  193.   transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  194.   transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  195. }
  196. .is-sliding .slide__figure {
  197.   -webkit-transform: scale(0.8);
  198.           transform: scale(0.8);
  199.   -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  200.   transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  201.   transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  202.   transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  203. }
  204. .slide__img {
  205.   position: relative;
  206.   display: block;
  207.   background-size: cover;
  208.   background-attachment: fixed;
  209.   background-position: 50%;
  210.   -webkit-backface-visibility: hidden;
  211.   height: 0%;
  212.   width: 100%;
  213.   -webkit-filter: grayscale(0%);
  214.           filter: grayscale(0%);
  215.   -webkit-transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), -webkit-filter 0.4s 0.1s ease;
  216.   transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), -webkit-filter 0.4s 0.1s ease;
  217.   transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), filter 0.4s 0.1s ease;
  218.   transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), filter 0.4s 0.1s ease, -webkit-filter 0.4s 0.1s ease;
  219. }
  220. .is-active .slide__img {
  221.   height: 100%;
  222.   opacity: 1;
  223.   -webkit-transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), -webkit-filter 0.4s 0.1s ease;
  224.   transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), -webkit-filter 0.4s 0.1s ease;
  225.   transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), filter 0.4s 0.1s ease;
  226.   transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), filter 0.4s 0.1s ease, -webkit-filter 0.4s 0.1s ease;
  227. }
  228. .is-sliding .slide__img {
  229.   -webkit-filter: grayscale(100%);
  230.           filter: grayscale(100%);
  231. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top