.w-post-elm.post_navigation {
display: flex;
}
.post_navigation-item-img img {
display: block;
}
.post_navigation-item-meta {
display: block;
font-size: 0.8em;
opacity: 0.5;
}
.post_navigation .order_first .post_navigation-item-arrow:before {
content: '\f104';
font-family: fontawesome;
font-weight: 400;
}
.post_navigation .order_second .post_navigation-item-arrow:before {
content: '\f105';
font-family: fontawesome;
font-weight: 400;
} .us_iframe .w-post-elm.post_navigation {
display: none;
} .mfp-wrap ~ .l-canvas .post_navigation.layout_sided .post_navigation-item {
opacity: 0;
} .post_navigation.layout_simple .post_navigation-item {
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1.5;
padding: 0 2.2em;
width: 50%;
position: relative;
color: inherit !important;
transition: none;
}
.post_navigation.layout_simple .order_first {
text-align: left;
}
.post_navigation.layout_simple .order_first .post_navigation-item-arrow {
left: 0;
}
.post_navigation.layout_simple .order_second {
text-align: right;
}
.post_navigation.layout_simple .order_second .post_navigation-item-arrow {
right: 0;
}
.post_navigation.layout_simple .post_navigation-item-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 2.5em;
line-height: 1;
opacity: 0.3;
}
.post_navigation.layout_simple .post_navigation-item-title {
transition: color 0.3s;
}
.no-touch .post_navigation.layout_simple a:hover .post_navigation-item-title {
color: var(--color-content-link-hover);
} .post_navigation.layout_sided .post_navigation-item {
display: flex;
position: fixed;
z-index: 98;
top: 50%;
width: 16em;
margin-top: -4em;
transition: right 0.3s cubic-bezier(.78,.13,.15,.86), left 0.3s cubic-bezier(.78,.13,.15,.86), opacity 0.3s;
color: #fff !important;
}
.post_navigation.layout_sided .order_first {
left: -14em;
text-align: left;
}
.no-touch .post_navigation.layout_sided .order_first:hover {
left: 0;
}
.post_navigation.layout_sided .order_second {
flex-direction: row-reverse;
right: -14em;
text-align: right;
}
.no-touch .post_navigation.layout_sided .order_second:hover {
right: 0;
}
.post_navigation.layout_sided .post_navigation-item-img {
flex-shrink: 0;
height: 8em;
width: 8em;
}
.post_navigation.layout_sided .post_navigation-item-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.post_navigation.layout_sided .post_navigation-item-arrow {
flex-shrink: 0;
text-align: center;
height: 8em;
width: 8em;
background: rgba(0,0,0,0.3);
color: #fff;
position: relative;
transition: background 0.3s cubic-bezier(.78,.13,.15,.86);
}
.no-touch .post_navigation.layout_sided a:hover .post_navigation-item-arrow {
background: var(--color-content-primary-grad);
}
.post_navigation.layout_sided .post_navigation-item-arrow:before {
position: absolute;
top: 50%;
left: 50%;
font-size: 1.8em;
line-height: 1;
transition: transform 0.3s cubic-bezier(.78,.13,.15,.86);
}
.post_navigation.layout_sided .order_first .post_navigation-item-arrow:before {
transform: translate(1.45em,-50%);
}
.post_navigation.layout_sided .order_second .post_navigation-item-arrow:before {
transform: translate(-1.79em,-50%);
}
.no-touch .post_navigation.layout_sided .post_navigation-item:hover .post_navigation-item-arrow:before {
transform: translate(-50%,-50%);
}
.post_navigation.layout_sided .post_navigation-item-title {
font-size: 0.9em;
line-height: 1.4;
position: absolute;
top: 100%;
left: 0;
right: 0;
overflow: hidden;
}
.post_navigation.layout_sided .post_navigation-item-title span {
display: block;
padding: 0.7em 1em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
background: rgba(30,30,30,0.9);
opacity: 0;
transform: translate(0,-100%);
transition: transform 0.3s cubic-bezier(.78,.13,.15,.86), opacity 0.3s cubic-bezier(.78,.13,.15,.86);
}
.no-touch .post_navigation.layout_sided .post_navigation-item:hover .post_navigation-item-title span {
opacity: 1;
transform: translate(0,0);
transition-delay: 0.1s;
} .no-touch .links_underline .post_navigation.layout_simple a:hover .post_navigation-item-title span {
border-bottom: 1px solid;
} @media screen and (max-width: 767px) {
.post_navigation {
font-size: 1rem !important;
}
.post_navigation.layout_sided .post_navigation-item {
display: flex;
align-items: center;
position: relative;
overflow: hidden;
top: auto;
left: auto !important;
right: auto !important;
margin-top: 0;
padding: 0 0.8rem;
width: 50%;
}
.post_navigation.layout_sided .post_navigation-item:only-of-type {
width: 100%;
}
.post_navigation.layout_sided .post_navigation-item-img {
width: auto;
}
.post_navigation.layout_sided .post_navigation-item img {
position: absolute;
top: 50%;
left: 50%;
min-height: 101%;
min-width: 101%;
max-width: none;
width: auto;
transform: translate(-50%,-50%);
}
.post_navigation.layout_sided .post_navigation-item-arrow {
position: relative;
z-index: 1;
padding: 0;
width: auto;
background: none !important;
}
.post_navigation.layout_sided .post_navigation-item-arrow:before {
position: static;
line-height: 8rem;
transform: none !important;
transition: none !important;
width: auto;
}
.post_navigation.layout_sided .post_navigation-item-title {
position: relative;
z-index: 1;
top: auto;
padding: 1rem 0.8rem;
}
.post_navigation.layout_sided .post_navigation-item-title span {
display: inline;
padding: 0;
opacity: 1;
white-space: normal;
transform: none;
transition: none;
background: none;
}
.post_navigation.layout_sided .post_navigation-item:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(30,30,30,0.66);
}
}
@media screen and (max-width: 480px) {
.post_navigation.layout_simple .order_first {
padding: 0.5rem 0.5rem 0.5rem 1.5rem;
}
.post_navigation.layout_simple .order_second {
padding: 0.5rem 1.5rem 0.5rem 0.5rem;
}
.post_navigation.layout_simple .post_navigation-item-title {
display: none;
}
}