.slider__warpper { height: 100vh; /*min-height: 750px;*/ } .slider__navi { position: absolute; top: 310px; left: 78%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); z-index: 99; } .slider__navi hr { position: relative; width: 100%; /*width: 480px;*/ } .slider__navi a { display: block; /*height: 15px; width: 15px; border-radius: 15px; margin: 20px 0;*/ /*text-indent: -9999px;*/ /*text-indent: -200px;*/ box-shadow: none; border: none; /*background: rgba(0,0,0,0.2);*/ /*color: rgba(0, 0, 0, 0.50);*/ color: #365548; /*text-align: right;*/ padding-bottom: 16px; font-size: 44px; /*font-family: 'Cardo', serif;*/ /*font-family: 'Anonymous Pro', monospace;*/ } .slider__navi a:hover { /*background: rgba(255,255,255,1);*/ color: #c19252; /*color: #777778;*/ } .slider__navi a.active { /*background: rgba(244, 18, 19, 1);*/ color: #c19252; } .slider__navi i { margin-right: 20px; } .flex__container { position: absolute; top: 0; left: 0; display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; -o-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start; height: 100vh; /*min-height: 750px;*/ width: 100%; z-index: 1; /*padding: 20px;*/ } .flex__container.flex--active { z-index: 2; } .text--sub { font-size: 18px; letter-spacing: 0.5rem; /*text-transform: uppercase;*/ margin-bottom: 20px; opacity: 0.75; } .text--big { /*font-family: 'Poppins', sans-serif;*/ font-size: 2.2em; font-weight: 300; line-height: 75px; margin-left: -8px; color: #454346; /*font-family: 'Cardo', serif;*/ } .text--normal { font-size: 20px; color: #000; line-height: 28px; /*margin-top: 25px;*/ } .text--normal2 { font-size: 17px; color: #000; line-height: 23px; /*margin-top: 25px;*/ } .text--normal3 { font-size: 16px; color: #777778; line-height: 22px; /*margin: 20px;*/ } .text__background { /*font-family: 'Poppins', sans-serif;*/ position: absolute; right: 30px; bottom: 0; color: rgba(193, 146, 82, 0.30); font-size: 25px; font-weight: 500; } .flex__item { height: auto; /*color: #777778;*/ transition: transform 0.1s linear; padding: 30px 0; } .flex__item--left { display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; /*align-items: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center;*/ padding-top: 70px; width: 75%; transform-origin: left bottom; transition: transform 0.1s linear 0.4s; opacity: 0; position: relative; overflow: hidden; } .flex__item--right { width: 25%; transform-origin: right center; transition: transform 0.1s linear 0s; opacity: 0; } .flex--preStart .flex__item--left, .flex--preStart .flex__item--right, .flex--active .flex__item--left, .flex--active .flex__item--right { opacity: 1; } /* 1 */ .flex--0 .flex__item--left { background: #ffffff; } .flex--0 .flex__item--right { background: #e8e8e8; } .flex--1 .flex__item--left { background: #e8e8e8; } .flex--1 .flex__item--right { background: #ffffff; } /*.flex--1 .flex__item--left { background: #f76450; } .flex--1 .flex__item--right { background: #d74017; }*/ .flex--2 .flex__item--left { background: #4ea7e9; } .flex--2 .flex__item--right { background: #1380dc; } .flex--4 .flex__item--left { background: #39b7d9; } .flex--4 .flex__item--right { background: #008fb3; } .flex--5 .flex__item--left { background: #6fae4d; } .flex--5 .flex__item--right { background: #238004; } .flex--7 .flex__item--left { background: #e5a82b; } .flex--7 .flex__item--right { background: #de8f00; } .flex--6 .flex__item--left { background: #9c9f5d; } .flex--6 .flex__item--right { background: #7b7c3b; } .flex--3 .flex__item--left { background: #9496bd; } .flex--3 .flex__item--right { background: #7b7ebd; } .flex--8 .flex__item--left { background: #bfa985; } .flex--8 .flex__item--right { background: #aa936c; } .flex--9 .flex__item--left { background: #999999; } .flex--9 .flex__item--right { background: #676767; } .flex__content { margin-left: 180px; width: 75%; opacity: 1; transform: translate3d(0,0,0); transition: transform 0.2s linear 0.1s, opacity 0.1s linear 0.2s; } .pokemon__img { position: absolute; bottom: 20px; right: 15%; max-height: 40vw; opacity: 1; transform: translate3d(0,0,0); transition: opacity 0.43s 0.6s, transform 0.4s 0.65s cubic-bezier(0, 0.88, 0.4, 0.93); } /* Animate-START point */ .flex__container.animate--start .flex__content { transform: translate3d(0,-200%,0); opacity: 0; } .flex__container.animate--start .pokemon__img { transform: translate3d(-200px,0,0); opacity: 0; } /* Animate-END point */ .flex__container.animate--end .flex__item--left { transform: scaleY(0); } .flex__container.animate--end .flex__item--right { transform: scaleX(0); } .flex__container.animate--end .flex__content { transform: translate3d(0,200%,0); opacity: 0; } .flex__container.animate--end .pokemon__img { transform: translate3d(200px,0,0); opacity: 0; } /************************************************/ @media only screen and (max-width: 1198px) { .flex__content { margin-left: 70px; width: 80%; opacity: 1; transform: translate3d(0,0,0); transition: transform 0.2s linear 0.1s, opacity 0.1s linear 0.2s; } .slider__navi { position: absolute; top: 380px; right: 10px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); z-index: 9; } .slider__navi a { display: block; /*height: 15px; width: 15px; border-radius: 15px; margin: 20px 0;*/ /*text-indent: -9999px;*/ /*text-indent: -200px;*/ box-shadow: none; border: none; /*background: rgba(0,0,0,0.2);*/ /*color: rgba(0, 0, 0, 0.50);*/ /*color: rgba(255, 255, 255, 0.6);*/ text-align: left; padding-bottom: 15px; font-size: 34px; } .slider__navi i { margin-right: 10px!important; } } @media only screen and (max-width: 998px) { .slider__warpper { height: 780px !important; } .flex__container { height: 780px!important; } .flex__item--left { display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; align-items: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; width: 70%; transform-origin: left bottom; transition: transform 0.1s linear 0.4s; opacity: 0; position: relative; overflow: hidden; } .flex__item--right { width: 30%; transform-origin: right center; transition: transform 0.1s linear 0s; opacity: 0; } .text--sub { font-size: 14px; letter-spacing: 0.5rem; /*text-transform: uppercase;*/ margin-bottom: 20px; opacity: 0.75; } .text--big { /*font-family: 'Poppins', sans-serif;*/ font-size: 20px; font-weight: 700; line-height: 24px; margin-left: 0; /*color: #ffffff;*/ } .text--normal { font-size: 16px; /*color: rgba(255, 255, 255, 0.9);*/ line-height: 24px; margin-top: 20px; } .text--normal2 { font-size: 15px; /*color: rgba(255, 255, 255, 0.9);*/ line-height: 20px; margin-top: 20px; } .text--normal3 { font-size: 14px; color: #777778; line-height: 18px; margin-top: 20px; } .text__background { /*font-family: 'Poppins', sans-serif;*/ position: absolute; right: 10px; bottom: 10px; /*color: rgba(0,0,0,0.05);*/ font-size: 15px; font-weight: 500; } .flex__item { height: auto; /*color: #fff;*/ transition: transform 0.1s linear; padding-bottom: 20px; } .flex__item--left { display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; align-items: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; width: 75%; transform-origin: left bottom; transition: transform 0.1s linear 0.4s; opacity: 0; position: relative; overflow: hidden; } .flex__item--right { width: 25%; transform-origin: right center; transition: transform 0.1s linear 0s; opacity: 0; } .flex__content { margin-left: 20px; width: 90%; opacity: 1; transform: translate3d(0,0,0); transition: transform 0.2s linear 0.1s, opacity 0.1s linear 0.2s; } .slider__navi { position: absolute; top: 340px; right: 12px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); z-index: 9; } .slider__navi a { display: block; /*height: 15px; width: 15px; border-radius: 15px; margin: 20px 0;*/ /*text-indent: -9999px;*/ /*text-indent: -200px;*/ box-shadow: none; border: none; /*background: rgba(0,0,0,0.2);*/ /*color: rgba(0, 0, 0, 0.50);*/ /*color: rgba(255, 255, 255, 0.6);*/ text-align: right; padding-bottom: 15px; font-size: 24px; } .slider__navi i { margin-right: 10px; } } @media only screen and (max-width: 768px) { .flex__container { height: 1000px !important; } .text--sub { font-size: 14px; letter-spacing: 0.5rem; /*text-transform: uppercase;*/ margin-bottom: 20px; opacity: 0.75; } .text--big { /*font-family: 'Poppins', sans-serif;*/ font-size: 20px; font-weight: 700; line-height: 24px; margin-left: 0; /*color: #ffffff;*/ } .text--normal { font-size: 16px; /*color: rgba(255, 255, 255, 0.9);*/ line-height: 24px; margin-top: 20px; } .text--normal2 { font-size: 15px; /*color: rgba(255, 255, 255, 0.9);*/ line-height: 20px; margin-top: 20px; } .text--normal3 { font-size: 14px; color: #777778; line-height: 18px; margin-top: 20px; } .text__background { /*font-family: 'Poppins', sans-serif;*/ position: absolute; right: 10px; bottom: 10px; /*color: rgba(0,0,0,0.05);*/ font-size: 30px; font-weight: 700; } .flex__item { height: auto; /*color: #fff;*/ transition: transform 0.1s linear; padding-bottom: 20px; } .flex__item--left { display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; align-items: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; width: 85%; transform-origin: left bottom; transition: transform 0.1s linear 0.4s; opacity: 0; position: relative; overflow: hidden; } .flex__item--right { width: 15%; transform-origin: right center; transition: transform 0.1s linear 0s; opacity: 0; } .flex__content { margin-left: 20px; width: 90%; opacity: 1; transform: translate3d(0,0,0); transition: transform 0.2s linear 0.1s, opacity 0.1s linear 0.2s; } .slider__navi { position: absolute; top: 190px; right: 12px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); z-index: 9; } .slider__navi a { display: block; /*height: 15px; width: 15px; border-radius: 15px; margin: 20px 0;*/ /*text-indent: -9999px;*/ /*text-indent: -200px;*/ box-shadow: none; border: none; /*background: rgba(0,0,0,0.2);*/ /*color: rgba(0, 0, 0, 0.50);*/ /*color: rgba(255, 255, 255, 0.6);*/ text-align: right; padding-bottom: 15px; font-size: 24px; } .slider__navi i { margin-right: 10px; } } .lh1 { line-height: 1em !important; }