.toc a {
text-decoration: none;
color: #c0c0c0;
outline: none;
}
.toc a:hover,
.toc a:focus {
color: #000;
}
button:focus,
.toc a:focus {
outline: none;
}
svg.hidden {
position: absolute;
overflow: hidden;
width: 0;
height: 0;
pointer-events: none;
}
.flip-nav{
display:none!important;
}
.arrow-nav__item {
max-width: 32px;
cursor:pointer;
}
.arrow-nav__item svg{
max-width: 100%;
}
.arrow-nav,
.nav {
display: none;
}
.slide__figure-title {
font-weight: normal;
margin: 0.5rem 0 0 0;
font-size: inherit;
}
.slide__figure-title::before {
content: '\2015';
display: inline-block;
margin: 0 0.5rem 0 0;
}
.slide__figure-description {
margin: 0;
font-style: italic;
color: #c0c0c0;
margin-bottom: 0;
}
.slide__figure {
position: relative;
display: flex;
height: 250px;
width: calc(100vw - 3rem);
max-width: 500px;
margin: 0 auto 2rem auto;
flex-direction: column;
}
.slide__figure-inner {
position: relative;
flex: 1;
}
.slide__figure-img {
position: relative;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
.slide__number {
display: none;
}
@media screen and (min-width: 53em) {
.slideshow {
height: 100vh;
position: relative;
}
.slideshow__indicator {
width: 10px;
background: #334bf7;
height: 100%;
left: 0;
top: 0;
position: absolute;
transform-origin: 0% 50%;
z-index: 6000;
display:none;
}
.slideshow__indicator:last-child {
left: auto;
right: 0;
transform-origin: 100% 50%;
}
.slide {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
display: grid;
grid-area: 2 / 1 / 3 / 2;
padding: 4vh calc(3vw + 20px);
--gridgap: 1vw;
--gridwidth: 100%;
--gridheight: 100%;
display: grid;
width: var(--gridwidth);
height: var(--gridheight);
grid-template-rows: repeat(20,calc(var(--gridheight) / 20 - var(--gridgap)));
grid-template-columns: repeat(20,calc(var(--gridwidth) / 20 - var(--gridgap)));
grid-gap: var(--gridgap);
align-content: center;
justify-content: center;
background-color: #fff;
}
.slide--layout-1 .slide__figure:first-child {grid-area: 2 / 2 / 14 / 10;}
.slide--layout-1 .slide__figure:nth-child(2) {grid-area: 2 / 17 / 9 / 21;}
.slide--layout-1 .slide__figure:nth-child(3) {grid-area: 14 / 6 / 21 / 9; }
.slide--layout-1 .slide__figure:nth-child(4) {grid-area: 11 / 12 / 21 / 18; }
.slide--layout-2 .slide__figure:first-child {grid-area: 4 / 1 / 18 / 10;}
.slide--layout-2 .slide__figure:nth-child(2) {grid-area: 2 / 12 / 9 / 18;}
.slide--layout-2 .slide__figure:nth-child(3) {grid-area: 10 / 16 / 21 / 21; }
.slide--layout-3 .slide__figure:first-child {grid-area: 3 / 6 / 8 / 10;}
.slide--layout-3 .slide__figure:nth-child(2) {grid-area: 2 / 14 / 9 / 21;}
.slide--layout-3 .slide__figure:nth-child(3) {grid-area: 10 / 2 / 18 / 10; }
.slide--layout-3 .slide__figure:nth-child(4) {grid-area: 11 / 12 / 21 / 18; }
.slide--layout-4 .slide__figure:first-child {grid-area: 1 / 6 / 8 / 10;}
.slide--layout-4 .slide__figure:nth-child(2) {grid-area: 3 / 12 / 10 / 18;}
.slide--layout-4 .slide__figure:nth-child(3) {grid-area: 11 / 4 / 21 / 9; }
.slide--layout-4 .slide__figure:nth-child(4) {grid-area: 13 / 12 / 21 / 18; }
.slide--layout-5 .slide__figure:first-child {grid-area: 5 / 1 / 18 / 10;}
.slide--layout-5 .slide__figure:nth-child(2) {grid-area: 5 / 12 / 18 / 21;}
.slide--current {
pointer-events: auto;
z-index: 100;
}
.slide__figure {
width: auto;
height: auto;
max-width: none;
margin: 0;
will-change: transform;
perspective: 1000px;
}
.slide__figure-inner {
overflow: hidden;
transform: rotate3d(0,1,0,0.1deg);
will-change: transform;
}
.slide__figure-img {
z-index: 10;
opacity: 1;
will-change: transform;
}
.slide__figure-reveal {
position: absolute;
top: -1px;
left: -1px;
width: calc(100% + 2px);
height: calc(100% + 2px);
background: #fff;
z-index: 20;
will-change: transform;
}
.slide__figure-reveal {
transform: translate3d(0,0,0);
}
.slide--current .slide__figure-reveal {
transform: translate3d(100%,0,0);
}
.slide__figure-title {
opacity: 0;
}
.slide--current .slide__figure-title {
opacity: 1;
}
.slide__figure-description {
opacity: 0;
}
.slide--current .slide__figure-description {
opacity: 1;
}
.slide__deco {
position: absolute;
font-size: 10vw;
font-weight: bold;
line-height: 1;
overflow: hidden;
perspective: 1000px;
will-change: transform;
}
.slide__deco-inner {
position: relative;
display: block;
will-change: transform;
transform: rotate3d(0,1,0,0.1deg);
}
.slide__deco--2 .slide__deco-inner {
left: -50%;
}
.slide__deco--3 .slide__deco-inner {
right: -50%;
}
.slide__deco--1 {
bottom: 10vh;
left: -2.65vw;
}
.slide__deco--2 {
left: 50%;
top: 7vh;
font-size: 17vw;
}
.slide__deco--3 {
right: 0;
bottom: 10vh;
font-size: 17vw;
}
.slide__number {
display: block;
position: absolute;
bottom: 1rem;
}
.slide__number--left {
left: calc(1rem + 10px);
}
.slide__number--right {
right: calc(1rem + 10px);
}
.slideshow .flip-revealer {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
top: 0;
left: 0;
display: flex;
z-index: 5000;
}
.slideshow .revealer__item {
width: 50%;
height: 100%;
position: relative;
overflow: hidden;
}
.slideshow .revealer__item--left {
border-right: 1px solid #f0f0f0;
}
.slideshow .revealer__item-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
transform: translate3d(100%,0,0);
}
.slideshow .nav {
display: block;
position: absolute;
top: 1rem;
left: calc(1rem + 10px);
z-index: 4000;
}
.nav__button {
border: 0;
margin: 0 1rem 0.5rem 0;
padding: 0;
line-height: 1;
background: none;
color: #0b44fb;
}
.nav__button:focus {
outline: none;
}
.nav__button:hover {
color: #000;
}
.nav__button-text {
position: relative;
padding-right: 0.75rem;
display: block;
}
.nav__button-text::after,
.nav__button-text::before {
content: '';
position: absolute;
height: 1px;
top: 50%;
width: 7px;
right: 0;
background: currentColor;
}
.nav__button-text::after {
transition: opacity 0.2s, transform 0.2s;
}
.nav--open .nav__button-text::after {
transform: rotate(90deg);
opacity: 0;
}
.nav__button-text::before {
transform: rotate(90deg);
transition: transform 0.2s;
}
.nav--open .nav__button-text::before {
transform: rotate(0deg);
}
.toc__item {
pointer-events: none;
opacity: 0;
display: block;
margin: 0.35rem 0;
opacity: 0;
}
.nav--open .toc__item {
pointer-events: auto;
}
.toc__item-page {
display: inline-block;
width: 1.5rem;
pointer-events: none;
color: #c0c0c0;
}
.toc__item-title {
pointer-events: none;
color: #878787;
}
.toc__item:hover .toc__item-title,
.toc__item--current .toc__item-title {
color: #000;
}
.arrow-nav {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 4000;
padding: 1.25rem;
}
.arrow-nav__item {
pointer-events: auto;
border: 0;
padding: 0;
margin: 0;
background: none;
color: #0b44fb;
}
.arrow-nav__item:hover {
color: #000;
}
.arrow-nav__item--prev {
visibility: hidden;
}
.arrow-nav__item--prev .icon {
transform: rotate(180deg);
}
.icon--nav {
pointer-events: none;
transition: transform 0.2s;
}
.arrow-nav__item--next:hover .icon--nav {
transform: translate3d(-2px,0,0);
}
.arrow-nav__item--prev:hover .icon--nav {
transform: rotate(180deg) translate3d(-2px,0,0);
}
.nav__chapter {
font-size: inherit;
font-weight: normal;
margin: 0;
display: inline-block;
line-height: 1;
}
}
@media(max-width:768px){
.slide__figure {
height: 450px;
width: 100%;
max-width: 100%;
margin: 0 auto 2rem auto!important;
padding-right: 15px;
}
}
@media(min-width:768px){
.head-bottom-area.top-nav-collapse {
top: 0;
}
}