/* ========================================================================== */ /* FONT-MIXINS */ /* ========================================================================== */ /*------------------------------------*\ MAIN \*------------------------------------*/ /* global box-sizing */ *, *:after, *:before { -moz-box-sizing: border-box; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* html element 62.5% font-size for REM use */ html { font-size: 62.5%; } body { font: 300 18px/1.8 "Westeinde Caption", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #000; } /* clear */ .clear:before, .clear:after { content: " "; display: table; } .clear:after { clear: both; } .clear { *zoom: 1; } img { max-width: 100%; vertical-align: bottom; } a { color: #000; text-decoration: none; cursor: pointer; } a:hover { color: #000; } a:focus, a:hover, a:active { outline: 0; } input:focus { outline: 0; border: 1px solid #888; } input::selection { color: #888; background-color: #aaa; } button { background: transparent; appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 0; border: 0; } button:focus { outline: none; } object { pointer-events: none; } /* -------------------------------------------------------------------------- */ /* MEDIA QUERIES */ /* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */ /* GLOBAL VARIABLES */ /* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */ /* other mixins */ /* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */ /* STRUCTURE */ /* -------------------------------------------------------------------------- */ /* wrapper */ .wrapper { margin: 0 auto; position: relative; width: 100vw; height: 100vh; /* -------------------------------------------------------------------------- */ /* header */ /* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */ /* STRUCTURE ALL PAGE */ /* -------------------------------------------------------------------------- */ } .wrapper .header { position: fixed; top: 0; width: 100vw; display: flex; flex-direction: row; justify-content: space-between; align-items: center; z-index: 3000; /* -------------------------------------------------------------------------- */ /* header elements */ /* -------------------------------------------------------------------------- */ /* ========================================================================== */ /* SEARCH */ /* ========================================================================== */ /* ------------------------------ search mobile ----------------------------- */ /* ----------------------------- search desktop ----------------------------- */ /* -------------------- header scroll: scroll with click -------------------- */ /* ========================================================================== */ /* MENUS */ /* ========================================================================== */ /* ------------------------------- bedo circle ------------------------------ */ } @media (min-width: 769px) { .wrapper .header { height: 0; position: relative; width: 0; } .wrapper .header::before { display: none; } } .wrapper .header .header-1, .wrapper .header .header-2 { display: flex; flex-direction: row; align-items: center; } @media (min-width: 769px) { .wrapper .header .header-1, .wrapper .header .header-2 { width: 10rem; position: fixed; top: 0; height: 100vh; flex-direction: column; flex: 0 0 auto !important; padding: 2rem !important; justify-content: space-between !important; align-content: space-between; z-index: 3100; background: #fff; } .wrapper .header .header-1 .logo, .wrapper .header .header-1 .social-link, .wrapper .header .header-1 .menubutton, .wrapper .header .header-1 .events-link, .wrapper .header .header-2 .logo, .wrapper .header .header-2 .social-link, .wrapper .header .header-2 .menubutton, .wrapper .header .header-2 .events-link { filter: invert(100); } } .wrapper .header .header-1 div, .wrapper .header .header-2 div { z-index: 3500; } .wrapper .header .header-1 a, .wrapper .header .header-2 a { display: inline-block; } .wrapper .header .header-1 { justify-content: space-between; flex: 1 1 auto; padding: 2rem 0 2rem 2rem; } @media (min-width: 769px) { .wrapper .header .header-1 { border-right: #000 1px solid; } } .wrapper .header .header-2 { justify-content: flex-end; flex: 0 1 auto; padding: 2rem 2rem 2rem 0; } @media (min-width: 769px) { .wrapper .header .header-2 { order: 99; border-left: #000 1px solid; right: 0; } } .wrapper .header .totop { position: fixed; bottom: 1rem; right: 1rem; z-index: 2; } @media (min-width: 769px) { .wrapper .header .totop { display: none; } } .wrapper .header .totop a { display: inline-block; } .wrapper .header .totop a object { height: 2rem; filter: invert(100%); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } .wrapper .header object { height: 3rem; } @media (min-width: 769px) { .wrapper .header .header-1 > div, .wrapper .header .header-2 > div { flex: 0 0 5rem !important; } } .wrapper .header .logo object { height: 5rem; } .wrapper .header .menubutton { order: 99; z-index: 3001; } .wrapper .header .menubutton button { transform-origin: center; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -o-transition: 0.5s linear; transition: 0.5s linear; } .wrapper .header .menubutton button.rotated { -moz-transform: rotate(225deg); -o-transform: rotate(225deg); -ms-transform: rotate(225deg); -webkit-transform: rotate(225deg); transform: rotate(225deg); } @media (min-width: 769px) { .wrapper .header .menubutton button.rotated { filter: invert(100); } } @media (min-width: 769px) { .wrapper .header .menubutton { order: unset; } } .wrapper .header .social-link, .wrapper .header .events-link { margin: 0 2rem 0 0; } .wrapper .header .social-link.hidden, .wrapper .header .events-link.hidden { display: none !important; } @media (min-width: 769px) { .wrapper .header .social-link, .wrapper .header .events-link { margin: 0; } } .wrapper .header .search-box { display: none; } .wrapper .header .search-bar form.search { display: flex; flex-direction: row; border-bottom: #fff 1px solid; background-color: #000; } .wrapper .header .search-bar form.search input { font: 900 4rem "Westeinde Caption"; color: #000; -webkit-text-stroke: #fff 1px; background-color: #000; padding: 0; border: none; caret-color: #fff; flex: 1 1 auto; width: 1rem; } @media (min-width: 769px) { .wrapper .header .search-bar form.search input { font-size: 4rem; color: #000 !important; } } .wrapper .header .search-bar form.search button { flex: 0 0 auto; } @media (max-width: 768px) { .wrapper .header .search-bar form.search button { filter: invert(100); } } @media (min-width: 769px) { .wrapper .header .search-box { display: block; flex: 1 1 0 !important; } .wrapper .header .search-bar { display: none; position: fixed; width: 0; left: 10rem; bottom: 0; height: 10rem; } .wrapper .header .search-bar form.search { border-bottom: none; height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; } .wrapper .header .search-bar form.search input { padding: 0 5rem; } .wrapper .header .search-bar form.search button { display: none; } } .wrapper .header .header-scroll { display: none; } .wrapper .header #sidebar { padding-top: 9rem !important; background-color: #000; } @media (min-width: 769px) { .wrapper .header #sidebar { padding: 0 !important; } } .wrapper .header #sidebar .sidebar-wrapper { position: relative; height: 100%; overflow: auto; padding: 0 4rem; padding-bottom: 4rem; } @media (min-width: 769px) { .wrapper .header #sidebar .sidebar-wrapper { padding: 4rem; display: flex; flex-direction: row; align-items: center; } } .wrapper .header #sidebar .sidebar-wrapper .menuseparator { display: none; } @media (min-width: 769px) { .wrapper .header #sidebar .sidebar-wrapper .menuseparator { display: block; width: 1px; height: 70%; background-color: #fff; flex: 0 0 auto; margin: 4rem; } } .wrapper .header #sidebar .sidebar-wrapper ul { margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0px; padding-inline-start: 0; } @media (min-width: 769px) { .wrapper .header #sidebar .sidebar-wrapper ul { flex: 1 1 50%; display: flex; flex-direction: column; flex-wrap: nowrap; height: 100%; justify-content: space-evenly; } } .wrapper .header #sidebar .sidebar-wrapper ul li { display: block; padding-top: 2rem; } @media (min-width: 769px) { .wrapper .header #sidebar .sidebar-wrapper ul li { padding: 2rem 0; } } .wrapper .header #sidebar .sidebar-wrapper ul li a { font: 900 4rem "Westeinde Caption"; color: #000; -webkit-text-stroke: #fff 1px; } .wrapper .header #sidebar .sidebar-wrapper ul li a:hover { color: #fff; } @media (min-width: 769px) { .wrapper .header #sidebar .sidebar-wrapper ul li a { font-size: 2.5rem; } } .wrapper .header #tag-nav { display: none; position: fixed; right: calc(20rem + 4px); top: calc(4rem/ 2); z-index: 1000; } @media (min-width: 769px) { .wrapper .header #tag-nav { top: 1rem; } } @media (min-width: 1279px) { .wrapper .header #tag-nav { top: 0.5rem; } } @media (min-width: 769px) { .wrapper .header #tag-nav { display: block; } } .wrapper .header #tag-nav ul { padding: 0; margin: 0; font: 900 1rem "Westeinde Caption"; color: transparent; -webkit-text-stroke: #000 1px; text-transform: uppercase; } .wrapper .header #tag-nav ul.current { color: #000 !important; } @media (min-width: 769px) { .wrapper .header #tag-nav ul { font-size: 1.2rem; } } @media (min-width: 1279px) { .wrapper .header #tag-nav ul { font-size: 1.2rem; } } .wrapper .header #tag-nav ul li { display: inline; } .wrapper .header #tag-nav ul li a span { height: calc(4rem/ 2); width: 1rem; margin: auto; display: block; text-align: center; position: absolute; transform-origin: 50% 100%; font: 900 1rem "Westeinde Caption"; color: transparent; -webkit-text-stroke: #000 1px; text-transform: uppercase; } @media (min-width: 769px) { .wrapper .header #tag-nav ul li a span { height: 3rem; } } @media (min-width: 1279px) { .wrapper .header #tag-nav ul li a span { height: 3.5rem; } } .wrapper .header #tag-nav ul li a span.current { color: #000 !important; } @media (min-width: 769px) { .wrapper .header #tag-nav ul li a span { font-size: 1.2rem; } } @media (min-width: 1279px) { .wrapper .header #tag-nav ul li a span { font-size: 1.2rem; } } .wrapper .header #tag-nav ul li a span.char1 { -moz-transform: rotate(21.17647deg); -o-transform: rotate(21.17647deg); -ms-transform: rotate(21.17647deg); -webkit-transform: rotate(21.17647deg); transform: rotate(21.17647deg); -webkit-animation: spin1 10s linear infinite; -moz-animation: spin1 10s linear infinite; animation: spin1 10s linear infinite; } @-moz-keyframes spin1 { 100% { -moz-transform: rotate(381.17647deg); } } @-webkit-keyframes spin1 { 100% { -webkit-transform: rotate(381.17647deg); } } @keyframes spin1 { 100% { -webkit-transform: rotate(381.17647deg); transform: rotate(381.17647deg); } } .wrapper .header #tag-nav ul li a span.char2 { -moz-transform: rotate(42.35294deg); -o-transform: rotate(42.35294deg); -ms-transform: rotate(42.35294deg); -webkit-transform: rotate(42.35294deg); transform: rotate(42.35294deg); -webkit-animation: spin2 10s linear infinite; -moz-animation: spin2 10s linear infinite; animation: spin2 10s linear infinite; } @-moz-keyframes spin2 { 100% { -moz-transform: rotate(402.35294deg); } } @-webkit-keyframes spin2 { 100% { -webkit-transform: rotate(402.35294deg); } } @keyframes spin2 { 100% { -webkit-transform: rotate(402.35294deg); transform: rotate(402.35294deg); } } .wrapper .header #tag-nav ul li a span.char3 { -moz-transform: rotate(63.52941deg); -o-transform: rotate(63.52941deg); -ms-transform: rotate(63.52941deg); -webkit-transform: rotate(63.52941deg); transform: rotate(63.52941deg); -webkit-animation: spin3 10s linear infinite; -moz-animation: spin3 10s linear infinite; animation: spin3 10s linear infinite; } @-moz-keyframes spin3 { 100% { -moz-transform: rotate(423.52941deg); } } @-webkit-keyframes spin3 { 100% { -webkit-transform: rotate(423.52941deg); } } @keyframes spin3 { 100% { -webkit-transform: rotate(423.52941deg); transform: rotate(423.52941deg); } } .wrapper .header #tag-nav ul li a span.char4 { -moz-transform: rotate(84.70588deg); -o-transform: rotate(84.70588deg); -ms-transform: rotate(84.70588deg); -webkit-transform: rotate(84.70588deg); transform: rotate(84.70588deg); -webkit-animation: spin4 10s linear infinite; -moz-animation: spin4 10s linear infinite; animation: spin4 10s linear infinite; } @-moz-keyframes spin4 { 100% { -moz-transform: rotate(444.70588deg); } } @-webkit-keyframes spin4 { 100% { -webkit-transform: rotate(444.70588deg); } } @keyframes spin4 { 100% { -webkit-transform: rotate(444.70588deg); transform: rotate(444.70588deg); } } .wrapper .header #tag-nav ul li a span.char5 { -moz-transform: rotate(105.88235deg); -o-transform: rotate(105.88235deg); -ms-transform: rotate(105.88235deg); -webkit-transform: rotate(105.88235deg); transform: rotate(105.88235deg); -webkit-animation: spin5 10s linear infinite; -moz-animation: spin5 10s linear infinite; animation: spin5 10s linear infinite; } @-moz-keyframes spin5 { 100% { -moz-transform: rotate(465.88235deg); } } @-webkit-keyframes spin5 { 100% { -webkit-transform: rotate(465.88235deg); } } @keyframes spin5 { 100% { -webkit-transform: rotate(465.88235deg); transform: rotate(465.88235deg); } } .wrapper .header #tag-nav ul li a span.char6 { -moz-transform: rotate(127.05882deg); -o-transform: rotate(127.05882deg); -ms-transform: rotate(127.05882deg); -webkit-transform: rotate(127.05882deg); transform: rotate(127.05882deg); -webkit-animation: spin6 10s linear infinite; -moz-animation: spin6 10s linear infinite; animation: spin6 10s linear infinite; } @-moz-keyframes spin6 { 100% { -moz-transform: rotate(487.05882deg); } } @-webkit-keyframes spin6 { 100% { -webkit-transform: rotate(487.05882deg); } } @keyframes spin6 { 100% { -webkit-transform: rotate(487.05882deg); transform: rotate(487.05882deg); } } .wrapper .header #tag-nav ul li a span.char7 { -moz-transform: rotate(148.23529deg); -o-transform: rotate(148.23529deg); -ms-transform: rotate(148.23529deg); -webkit-transform: rotate(148.23529deg); transform: rotate(148.23529deg); -webkit-animation: spin7 10s linear infinite; -moz-animation: spin7 10s linear infinite; animation: spin7 10s linear infinite; } @-moz-keyframes spin7 { 100% { -moz-transform: rotate(508.23529deg); } } @-webkit-keyframes spin7 { 100% { -webkit-transform: rotate(508.23529deg); } } @keyframes spin7 { 100% { -webkit-transform: rotate(508.23529deg); transform: rotate(508.23529deg); } } .wrapper .header #tag-nav ul li a span.char8 { -moz-transform: rotate(169.41176deg); -o-transform: rotate(169.41176deg); -ms-transform: rotate(169.41176deg); -webkit-transform: rotate(169.41176deg); transform: rotate(169.41176deg); -webkit-animation: spin8 10s linear infinite; -moz-animation: spin8 10s linear infinite; animation: spin8 10s linear infinite; } @-moz-keyframes spin8 { 100% { -moz-transform: rotate(529.41176deg); } } @-webkit-keyframes spin8 { 100% { -webkit-transform: rotate(529.41176deg); } } @keyframes spin8 { 100% { -webkit-transform: rotate(529.41176deg); transform: rotate(529.41176deg); } } .wrapper .header #tag-nav ul li a span.char9 { -moz-transform: rotate(190.58824deg); -o-transform: rotate(190.58824deg); -ms-transform: rotate(190.58824deg); -webkit-transform: rotate(190.58824deg); transform: rotate(190.58824deg); -webkit-animation: spin9 10s linear infinite; -moz-animation: spin9 10s linear infinite; animation: spin9 10s linear infinite; } @-moz-keyframes spin9 { 100% { -moz-transform: rotate(550.58824deg); } } @-webkit-keyframes spin9 { 100% { -webkit-transform: rotate(550.58824deg); } } @keyframes spin9 { 100% { -webkit-transform: rotate(550.58824deg); transform: rotate(550.58824deg); } } .wrapper .header #tag-nav ul li a span.char10 { -moz-transform: rotate(211.76471deg); -o-transform: rotate(211.76471deg); -ms-transform: rotate(211.76471deg); -webkit-transform: rotate(211.76471deg); transform: rotate(211.76471deg); -webkit-animation: spin10 10s linear infinite; -moz-animation: spin10 10s linear infinite; animation: spin10 10s linear infinite; } @-moz-keyframes spin10 { 100% { -moz-transform: rotate(571.76471deg); } } @-webkit-keyframes spin10 { 100% { -webkit-transform: rotate(571.76471deg); } } @keyframes spin10 { 100% { -webkit-transform: rotate(571.76471deg); transform: rotate(571.76471deg); } } .wrapper .header #tag-nav ul li a span.char11 { -moz-transform: rotate(232.94118deg); -o-transform: rotate(232.94118deg); -ms-transform: rotate(232.94118deg); -webkit-transform: rotate(232.94118deg); transform: rotate(232.94118deg); -webkit-animation: spin11 10s linear infinite; -moz-animation: spin11 10s linear infinite; animation: spin11 10s linear infinite; } @-moz-keyframes spin11 { 100% { -moz-transform: rotate(592.94118deg); } } @-webkit-keyframes spin11 { 100% { -webkit-transform: rotate(592.94118deg); } } @keyframes spin11 { 100% { -webkit-transform: rotate(592.94118deg); transform: rotate(592.94118deg); } } .wrapper .header #tag-nav ul li a span.char12 { -moz-transform: rotate(254.11765deg); -o-transform: rotate(254.11765deg); -ms-transform: rotate(254.11765deg); -webkit-transform: rotate(254.11765deg); transform: rotate(254.11765deg); -webkit-animation: spin12 10s linear infinite; -moz-animation: spin12 10s linear infinite; animation: spin12 10s linear infinite; } @-moz-keyframes spin12 { 100% { -moz-transform: rotate(614.11765deg); } } @-webkit-keyframes spin12 { 100% { -webkit-transform: rotate(614.11765deg); } } @keyframes spin12 { 100% { -webkit-transform: rotate(614.11765deg); transform: rotate(614.11765deg); } } .wrapper .header #tag-nav ul li a span.char13 { -moz-transform: rotate(275.29412deg); -o-transform: rotate(275.29412deg); -ms-transform: rotate(275.29412deg); -webkit-transform: rotate(275.29412deg); transform: rotate(275.29412deg); -webkit-animation: spin13 10s linear infinite; -moz-animation: spin13 10s linear infinite; animation: spin13 10s linear infinite; } @-moz-keyframes spin13 { 100% { -moz-transform: rotate(635.29412deg); } } @-webkit-keyframes spin13 { 100% { -webkit-transform: rotate(635.29412deg); } } @keyframes spin13 { 100% { -webkit-transform: rotate(635.29412deg); transform: rotate(635.29412deg); } } .wrapper .header #tag-nav ul li a span.char14 { -moz-transform: rotate(296.47059deg); -o-transform: rotate(296.47059deg); -ms-transform: rotate(296.47059deg); -webkit-transform: rotate(296.47059deg); transform: rotate(296.47059deg); -webkit-animation: spin14 10s linear infinite; -moz-animation: spin14 10s linear infinite; animation: spin14 10s linear infinite; } @-moz-keyframes spin14 { 100% { -moz-transform: rotate(656.47059deg); } } @-webkit-keyframes spin14 { 100% { -webkit-transform: rotate(656.47059deg); } } @keyframes spin14 { 100% { -webkit-transform: rotate(656.47059deg); transform: rotate(656.47059deg); } } .wrapper .header #tag-nav ul li a span.char15 { -moz-transform: rotate(317.64706deg); -o-transform: rotate(317.64706deg); -ms-transform: rotate(317.64706deg); -webkit-transform: rotate(317.64706deg); transform: rotate(317.64706deg); -webkit-animation: spin15 10s linear infinite; -moz-animation: spin15 10s linear infinite; animation: spin15 10s linear infinite; } @-moz-keyframes spin15 { 100% { -moz-transform: rotate(677.64706deg); } } @-webkit-keyframes spin15 { 100% { -webkit-transform: rotate(677.64706deg); } } @keyframes spin15 { 100% { -webkit-transform: rotate(677.64706deg); transform: rotate(677.64706deg); } } .wrapper .header #tag-nav ul li a span.char16 { -moz-transform: rotate(338.82353deg); -o-transform: rotate(338.82353deg); -ms-transform: rotate(338.82353deg); -webkit-transform: rotate(338.82353deg); transform: rotate(338.82353deg); -webkit-animation: spin16 10s linear infinite; -moz-animation: spin16 10s linear infinite; animation: spin16 10s linear infinite; } @-moz-keyframes spin16 { 100% { -moz-transform: rotate(698.82353deg); } } @-webkit-keyframes spin16 { 100% { -webkit-transform: rotate(698.82353deg); } } @keyframes spin16 { 100% { -webkit-transform: rotate(698.82353deg); transform: rotate(698.82353deg); } } .wrapper .header #tag-nav ul li a span.char17 { -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); -webkit-animation: spin17 10s linear infinite; -moz-animation: spin17 10s linear infinite; animation: spin17 10s linear infinite; } @-moz-keyframes spin17 { 100% { -moz-transform: rotate(720deg); } } @-webkit-keyframes spin17 { 100% { -webkit-transform: rotate(720deg); } } @keyframes spin17 { 100% { -webkit-transform: rotate(720deg); transform: rotate(720deg); } } .wrapper .header #tag-nav ul li a span.pause { animation-play-state: paused; } .wrapper main { z-index: 1; } .wrapper main section { /* -------------------------------- load more ------------------------------- */ } .wrapper main section article { position: relative; } .wrapper main section article .metadata { position: absolute; background-color: #fff; padding: 2rem; right: 0; min-width: 50vw; text-align: center; font: bold 1rem "Westeinde Caption"; color: #000; z-index: 1; } @media (min-width: 769px) { .wrapper main section article .metadata { font-size: 1.2rem; } } @media (max-width: 768px) { .wrapper main section article .metadata::after { content: ""; display: block; position: absolute; background-color: transparent; width: 0; height: 0; left: -5rem; top: -5rem; border-top: 5rem solid transparent; border-left: 5rem solid transparent; border-right: 5rem solid transparent; border-bottom: 5rem solid #fff; position: absolute; z-index: -1; } } @media (min-width: 769px) { .wrapper main section .misha_loadmore { min-width: 10rem; width: calc(100vw - ((100vh - 8rem) / 2 * 3) - 20rem); margin-right: 10rem; align-self: stretch; display: flex; flex-direction: row; justify-content: center; align-items: center; height: 100%; } } .wrapper main section .misha_loadmore a, .wrapper main section .misha_loadmore p { font: bold 3rem "Westeinde Caption"; color: transparent; -webkit-text-stroke: #000 1px; } @media (-webkit-min-device-pixel-ratio: 2.1) { .wrapper main section .misha_loadmore a, .wrapper main section .misha_loadmore p { font-size: 2rem !important; } } @media (min-width: 769px) { .wrapper main section .misha_loadmore a, .wrapper main section .misha_loadmore p { font-size: 3rem; } } @media (min-width: 769px) { .wrapper main section .misha_loadmore a, .wrapper main section .misha_loadmore p { transform-origin: center; white-space: nowrap; width: 100vh; -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); text-align: center; } } .touchevents .header-scroll { display: none !important; } @media (min-width: 769px) { .touchevents .archive, .touchevents .home, .touchevents .search-results { overflow-y: hidden; } } /* -------------------------------------------------------------------------- */ /* ARCHIVE AND HOMEPAGE */ /* -------------------------------------------------------------------------- */ .archive .wrapper, .home .wrapper, .search-results .wrapper { /* ----------------------------- header on home ----------------------------- */ } @media (min-width: 769px) { .archive .wrapper, .home .wrapper, .search-results .wrapper { overflow-y: hidden; width: -moz-max-content; width: max-content; width: -moz-fit-content; width: fit-content; min-width: 100vw; } } @media (min-width: 769px) { .archive .wrapper .header .header-scroll, .home .wrapper .header .header-scroll, .search-results .wrapper .header .header-scroll { display: block; position: fixed; height: 100vh; width: 10rem; flex: 1 0 auto !important; top: 0; } } .archive .wrapper .header .header-scroll.header-scroll-left, .home .wrapper .header .header-scroll.header-scroll-left, .search-results .wrapper .header .header-scroll.header-scroll-left { left: 10rem; } .archive .wrapper .header .header-scroll.header-scroll-left button, .home .wrapper .header .header-scroll.header-scroll-left button, .search-results .wrapper .header .header-scroll.header-scroll-left button { cursor: url("../img/arrow-black-left.png"), w-resize; } .archive .wrapper .header .header-scroll.header-scroll-right, .home .wrapper .header .header-scroll.header-scroll-right, .search-results .wrapper .header .header-scroll.header-scroll-right { right: 10rem; } .archive .wrapper .header .header-scroll.header-scroll-right button, .home .wrapper .header .header-scroll.header-scroll-right button, .search-results .wrapper .header .header-scroll.header-scroll-right button { cursor: url("../img/arrow-black-right.png"), e-resize; } .archive .wrapper .header .header-scroll button, .home .wrapper .header .header-scroll button, .search-results .wrapper .header .header-scroll button { height: 100vh; width: 10rem; } @media (min-width: 769px) { .archive main, .home main, .search-results main { height: 100vh; width: -moz-max-content; width: max-content; width: -moz-fit-content; width: fit-content; position: relative; } } .archive main section, .home main section, .search-results main section { /* --------------------------- home article mobile/default -------------------------- */ /* ------------------------ home article desktop big ------------------------ */ /* ------------------------------------ - ----------------------------------- */ /* ----------------------- articles desktop small ----------------------- */ } @media (min-width: 769px) { .archive main section, .home main section, .search-results main section { display: flex; flex-direction: row; margin: 0; height: 100vh; width: -moz-max-content; width: max-content; width: -moz-fit-content; width: fit-content; } } .archive main section article, .home main section article, .search-results main section article { height: 100vh; } .archive main section article > a, .home main section article > a, .search-results main section article > a { margin: 0; padding: 0; border: none; display: inline-block; } .archive main section article .thumbnailwrapper img, .home main section article .thumbnailwrapper img, .search-results main section article .thumbnailwrapper img { height: 50vh; width: 100vw; object-fit: cover; } .archive main section article h2, .home main section article h2, .search-results main section article h2 { width: 100%; height: 50vh; padding: 2rem; padding-top: 3rem; margin: 0; } .archive main section article h2 a, .home main section article h2 a, .search-results main section article h2 a { font: bold 3rem "Westeinde Caption"; color: #000; } @media (-webkit-min-device-pixel-ratio: 2.1) { .archive main section article h2 a, .home main section article h2 a, .search-results main section article h2 a { font-size: 2.5rem !important; } } @media (min-width: 769px) { .archive main section article h2 a, .home main section article h2 a, .search-results main section article h2 a { font-size: 6rem; } } @media (min-width: 1279px) { .archive main section article h2 a, .home main section article h2 a, .search-results main section article h2 a { font-size: 7.5rem; } } @media (min-width: 1919px) { .archive main section article h2 a, .home main section article h2 a, .search-results main section article h2 a { font-size: 11rem; } } .archive main section article .metadata, .home main section article .metadata, .search-results main section article .metadata { bottom: 50%; height: 5rem; display: flex; width: -moz-max-content; width: max-content; width: -moz-fit-content; width: fit-content; justify-content: space-around; flex-wrap: nowrap; align-items: center; padding: 0; } .archive main section article .metadata .vr, .home main section article .metadata .vr, .search-results main section article .metadata .vr { height: 100%; width: 1px; background-color: #000; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; } .archive main section article .metadata .bevezeto, .archive main section article .metadata .alcim, .archive main section article .metadata .curvyArrow, .home main section article .metadata .bevezeto, .home main section article .metadata .alcim, .home main section article .metadata .curvyArrow, .search-results main section article .metadata .bevezeto, .search-results main section article .metadata .alcim, .search-results main section article .metadata .curvyArrow { display: none; } @media (min-width: 769px) { .archive main section .home_wrapper-big, .home main section .home_wrapper-big, .search-results main section .home_wrapper-big { flex: 0 0 auto; border-right: #000 1px solid; } .archive main section .home_wrapper-big article, .home main section .home_wrapper-big article, .search-results main section .home_wrapper-big article { position: relative; width: calc(100vw - (10rem * 3)); height: calc(100vh - 4rem); margin: 0; padding: 0; margin-left: 10rem; margin-top: 4rem; border-top: 1px #000 solid; /* ------------- home article desktop big - thumbnail and title ------------- */ /* -------------------------- home article metadata big------------------------- */ /* ------------------------- home article big hover ------------------------- */ } .archive main section .home_wrapper-big article .thumbnailwrapper, .home main section .home_wrapper-big article .thumbnailwrapper, .search-results main section .home_wrapper-big article .thumbnailwrapper { width: 60%; height: calc(100% - 4rem); display: flex; flex-direction: row; justify-content: flex-start; } .archive main section .home_wrapper-big article .thumbnailwrapper img.attachment-home-big-thumbnail, .home main section .home_wrapper-big article .thumbnailwrapper img.attachment-home-big-thumbnail, .search-results main section .home_wrapper-big article .thumbnailwrapper img.attachment-home-big-thumbnail { object-fit: cover; width: 100%; height: 100%; } .archive main section .home_wrapper-big article h2, .home main section .home_wrapper-big article h2, .search-results main section .home_wrapper-big article h2 { height: unset; position: absolute; top: 4rem; padding: 4rem; padding-right: 2rem; width: calc(100vw - 25rem); } .archive main section .home_wrapper-big article .metadata, .home main section .home_wrapper-big article .metadata, .search-results main section .home_wrapper-big article .metadata { bottom: 0; background: transparent; width: 100%; height: 10rem; display: flex; flex-direction: row; padding: 0; justify-content: flex-start; align-items: center; overflow: visible !important; } } @media (min-width: 769px) and (min-width: 769px) { .archive main section .home_wrapper-big article .metadata, .home main section .home_wrapper-big article .metadata, .search-results main section .home_wrapper-big article .metadata { font-size: 2rem; } } @media (min-width: 769px) and (-webkit-min-device-pixel-ratio: 2.1) { .archive main section .home_wrapper-big article .metadata, .home main section .home_wrapper-big article .metadata, .search-results main section .home_wrapper-big article .metadata { height: calc(10rem / 2); } } @media (min-width: 769px) { .archive main section .home_wrapper-big article .metadata.noBottomScrollbar, .home main section .home_wrapper-big article .metadata.noBottomScrollbar, .search-results main section .home_wrapper-big article .metadata.noBottomScrollbar { height: 11.5rem; } .archive main section .home_wrapper-big article .metadata > div, .home main section .home_wrapper-big article .metadata > div, .search-results main section .home_wrapper-big article .metadata > div { flex: 1 1 auto; } .archive main section .home_wrapper-big article .metadata .categories, .home main section .home_wrapper-big article .metadata .categories, .search-results main section .home_wrapper-big article .metadata .categories { display: block; padding: 0; } .archive main section .home_wrapper-big article .metadata .postedon, .home main section .home_wrapper-big article .metadata .postedon, .search-results main section .home_wrapper-big article .metadata .postedon { padding: 0; } .archive main section .home_wrapper-big article .metadata .bevezeto, .archive main section .home_wrapper-big article .metadata .alcim, .home main section .home_wrapper-big article .metadata .bevezeto, .home main section .home_wrapper-big article .metadata .alcim, .search-results main section .home_wrapper-big article .metadata .bevezeto, .search-results main section .home_wrapper-big article .metadata .alcim { color: #000 !important; display: none; } .archive main section .home_wrapper-big article .metadata .alcim, .home main section .home_wrapper-big article .metadata .alcim, .search-results main section .home_wrapper-big article .metadata .alcim { -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg); -webkit-transform: rotate(270deg); transform: rotate(270deg); transform-origin: top bottom; text-align: left; flex: 0 0 auto; height: 5rem; width: 20rem; margin: 0 -3rem; } .archive main section .home_wrapper-big article .metadata .bevezeto, .home main section .home_wrapper-big article .metadata .bevezeto, .search-results main section .home_wrapper-big article .metadata .bevezeto { width: 50%; flex: 0 1 auto; text-align: left; padding: 5rem; font: bold 1rem "Butler"; } } @media (min-width: 769px) and (min-width: 769px) { .archive main section .home_wrapper-big article .metadata .bevezeto, .home main section .home_wrapper-big article .metadata .bevezeto, .search-results main section .home_wrapper-big article .metadata .bevezeto { font-size: 2rem; } } @media (min-width: 769px) { .archive main section .home_wrapper-big article .metadata .transparent, .archive main section .home_wrapper-big article .metadata .transparent a, .home main section .home_wrapper-big article .metadata .transparent, .home main section .home_wrapper-big article .metadata .transparent a, .search-results main section .home_wrapper-big article .metadata .transparent, .search-results main section .home_wrapper-big article .metadata .transparent a { color: transparent !important; } .archive main section .home_wrapper-big article .metadata .filler, .home main section .home_wrapper-big article .metadata .filler, .search-results main section .home_wrapper-big article .metadata .filler { flex: 0 0 auto; width: 60%; height: 1px; align-self: flex-start; } .archive main section .home_wrapper-big article .metadata .curvyArrow, .home main section .home_wrapper-big article .metadata .curvyArrow, .search-results main section .home_wrapper-big article .metadata .curvyArrow { position: absolute; display: block; right: 0; top: 0; height: 15rem; width: 7.5rem; } .archive main section .home_wrapper-big article .metadata .curvyArrow object, .home main section .home_wrapper-big article .metadata .curvyArrow object, .search-results main section .home_wrapper-big article .metadata .curvyArrow object { height: 15rem; position: absolute; right: 0; top: calc(-50% + 0.5px); } .archive main section .home_wrapper-big article.hovered h2 > a, .home main section .home_wrapper-big article.hovered h2 > a, .search-results main section .home_wrapper-big article.hovered h2 > a { color: #000; } .archive main section .home_wrapper-big.home_wrapper-1 article .metadata::after, .home main section .home_wrapper-big.home_wrapper-1 article .metadata::after, .search-results main section .home_wrapper-big.home_wrapper-1 article .metadata::after { position: absolute; content: ""; display: block; top: 0; border: none; width: calc(100% - 4rem); border-top: #000 1px solid; background-color: transparent; left: calc(4rem); margin-left: -0; } .archive main section .home_wrapper-big.home_wrapper-1 article .metadata::before, .home main section .home_wrapper-big.home_wrapper-1 article .metadata::before, .search-results main section .home_wrapper-big.home_wrapper-1 article .metadata::before { display: block; content: ""; position: absolute; width: calc(4rem); height: calc(4rem); top: 0; background-color: transparent; z-index: 9; left: -0; border-left: #000 solid 1px; -moz-transform: skewX(-45deg); -o-transform: skewX(-45deg); -ms-transform: skewX(-45deg); -webkit-transform: skewX(-45deg); transform: skewX(-45deg); transform-origin: left bottom; border-top: #000 solid 1px; } .archive main section .home_wrapper-big.home_wrapper-1 article .metadata .filler, .home main section .home_wrapper-big.home_wrapper-1 article .metadata .filler, .search-results main section .home_wrapper-big.home_wrapper-1 article .metadata .filler { position: relative; } .archive main section .home_wrapper-big.home_wrapper-1 article a.thumbnailwrapper, .home main section .home_wrapper-big.home_wrapper-1 article a.thumbnailwrapper, .search-results main section .home_wrapper-big.home_wrapper-1 article a.thumbnailwrapper { float: right; } .archive main section .home_wrapper-big.home_wrapper-2 article, .home main section .home_wrapper-big.home_wrapper-2 article, .search-results main section .home_wrapper-big.home_wrapper-2 article { border-left: #000 1px solid; } .archive main section .home_wrapper-big.home_wrapper-2 article .metadata, .home main section .home_wrapper-big.home_wrapper-2 article .metadata, .search-results main section .home_wrapper-big.home_wrapper-2 article .metadata { justify-content: flex-end; } .archive main section .home_wrapper-big.home_wrapper-2 article .metadata::after, .home main section .home_wrapper-big.home_wrapper-2 article .metadata::after, .search-results main section .home_wrapper-big.home_wrapper-2 article .metadata::after { position: absolute; content: ""; display: block; top: 0; border: none; width: calc(100% - 4rem); border-top: #000 1px solid; background-color: transparent; right: calc(4rem); margin-right: -0; } .archive main section .home_wrapper-big.home_wrapper-2 article .metadata::before, .home main section .home_wrapper-big.home_wrapper-2 article .metadata::before, .search-results main section .home_wrapper-big.home_wrapper-2 article .metadata::before { display: block; content: ""; position: absolute; width: calc(4rem); height: calc(4rem); top: 0; background-color: transparent; z-index: 9; right: -0; border-right: #000 solid 1px; -moz-transform: skewX(45deg); -o-transform: skewX(45deg); -ms-transform: skewX(45deg); -webkit-transform: skewX(45deg); transform: skewX(45deg); transform-origin: right bottom; } .archive main section .home_wrapper-big.home_wrapper-2 article .metadata .filler, .home main section .home_wrapper-big.home_wrapper-2 article .metadata .filler, .search-results main section .home_wrapper-big.home_wrapper-2 article .metadata .filler { order: -1; } .archive main section .home_wrapper-big.home_wrapper-2 article .thumbnailwrapper, .home main section .home_wrapper-big.home_wrapper-2 article .thumbnailwrapper, .search-results main section .home_wrapper-big.home_wrapper-2 article .thumbnailwrapper { width: calc(60% + 5rem); } .archive main section .home_wrapper-big.home_wrapper-2 article .thumbnailwrapper img, .home main section .home_wrapper-big.home_wrapper-2 article .thumbnailwrapper img, .search-results main section .home_wrapper-big.home_wrapper-2 article .thumbnailwrapper img { left: -5rem; position: relative; } } @media (min-width: 769px) { .archive main section .home_wrapper-small, .home main section .home_wrapper-small, .search-results main section .home_wrapper-small { max-width: calc(100vw - (10rem * 3)); max-height: calc((100vw - (10rem * 3)) / 3 * 2); height: calc(100vh - 8rem); width: calc((100vh - 8rem) / 2 * 3); flex-shrink: 0; display: flex; flex-direction: row; flex-wrap: wrap; margin: auto 0; } .archive main section .home_wrapper-small.home_wrapper-s1:not(.home_wrapper-1), .home main section .home_wrapper-small.home_wrapper-s1:not(.home_wrapper-1), .search-results main section .home_wrapper-small.home_wrapper-s1:not(.home_wrapper-1) { margin-left: 5rem; } .archive main section .home_wrapper-small.home_wrapper-s1.home_wrapper-small.home_wrapper-1, .home main section .home_wrapper-small.home_wrapper-s1.home_wrapper-small.home_wrapper-1, .search-results main section .home_wrapper-small.home_wrapper-s1.home_wrapper-small.home_wrapper-1 { margin-left: 10rem; } .archive main section .home_wrapper-small article, .archive main section .home_wrapper-small .archivetitle, .archive main section .home_wrapper-small .archivedescription, .home main section .home_wrapper-small article, .home main section .home_wrapper-small .archivetitle, .home main section .home_wrapper-small .archivedescription, .search-results main section .home_wrapper-small article, .search-results main section .home_wrapper-small .archivetitle, .search-results main section .home_wrapper-small .archivedescription { flex: 0 0 calc(100% / 3); height: 50%; position: relative; } .archive main section .home_wrapper-small article .thumbnailwrapper, .archive main section .home_wrapper-small .archivetitle .thumbnailwrapper, .archive main section .home_wrapper-small .archivedescription .thumbnailwrapper, .home main section .home_wrapper-small article .thumbnailwrapper, .home main section .home_wrapper-small .archivetitle .thumbnailwrapper, .home main section .home_wrapper-small .archivedescription .thumbnailwrapper, .search-results main section .home_wrapper-small article .thumbnailwrapper, .search-results main section .home_wrapper-small .archivetitle .thumbnailwrapper, .search-results main section .home_wrapper-small .archivedescription .thumbnailwrapper { width: 100%; height: 100%; } .archive main section .home_wrapper-small article .thumbnailwrapper img, .archive main section .home_wrapper-small .archivetitle .thumbnailwrapper img, .archive main section .home_wrapper-small .archivedescription .thumbnailwrapper img, .home main section .home_wrapper-small article .thumbnailwrapper img, .home main section .home_wrapper-small .archivetitle .thumbnailwrapper img, .home main section .home_wrapper-small .archivedescription .thumbnailwrapper img, .search-results main section .home_wrapper-small article .thumbnailwrapper img, .search-results main section .home_wrapper-small .archivetitle .thumbnailwrapper img, .search-results main section .home_wrapper-small .archivedescription .thumbnailwrapper img { width: 100%; height: 100%; object-fit: cover; } .archive main section .home_wrapper-small article .metadata, .archive main section .home_wrapper-small .archivetitle .metadata, .archive main section .home_wrapper-small .archivedescription .metadata, .home main section .home_wrapper-small article .metadata, .home main section .home_wrapper-small .archivetitle .metadata, .home main section .home_wrapper-small .archivedescription .metadata, .search-results main section .home_wrapper-small article .metadata, .search-results main section .home_wrapper-small .archivetitle .metadata, .search-results main section .home_wrapper-small .archivedescription .metadata { width: 100%; min-width: unset; height: 5rem; position: absolute; bottom: 0; right: 0; background: transparent; display: flex; flex-direction: row; padding: 0; justify-content: space-between; align-items: stretch; display: none; } .archive main section .home_wrapper-small article .metadata::after, .archive main section .home_wrapper-small .archivetitle .metadata::after, .archive main section .home_wrapper-small .archivedescription .metadata::after, .home main section .home_wrapper-small article .metadata::after, .home main section .home_wrapper-small .archivetitle .metadata::after, .home main section .home_wrapper-small .archivedescription .metadata::after, .search-results main section .home_wrapper-small article .metadata::after, .search-results main section .home_wrapper-small .archivetitle .metadata::after, .search-results main section .home_wrapper-small .archivedescription .metadata::after { position: absolute; content: ""; display: block; top: 0; border: none; width: calc(100% - 5rem); border-top: #000 1px solid; background-color: transparent; left: calc(5rem); margin-left: -0; } .archive main section .home_wrapper-small article .metadata::before, .archive main section .home_wrapper-small .archivetitle .metadata::before, .archive main section .home_wrapper-small .archivedescription .metadata::before, .home main section .home_wrapper-small article .metadata::before, .home main section .home_wrapper-small .archivetitle .metadata::before, .home main section .home_wrapper-small .archivedescription .metadata::before, .search-results main section .home_wrapper-small article .metadata::before, .search-results main section .home_wrapper-small .archivetitle .metadata::before, .search-results main section .home_wrapper-small .archivedescription .metadata::before { display: block; content: ""; position: absolute; width: calc(5rem); height: calc(5rem); top: 0; background-color: transparent; z-index: 9; left: -0; border-left: #000 solid 1px; -moz-transform: skewX(-45deg); -o-transform: skewX(-45deg); -ms-transform: skewX(-45deg); -webkit-transform: skewX(-45deg); transform: skewX(-45deg); transform-origin: left bottom; border-top: #000 solid 1px; } .archive main section .home_wrapper-small article .metadata.vis, .archive main section .home_wrapper-small .archivetitle .metadata.vis, .archive main section .home_wrapper-small .archivedescription .metadata.vis, .home main section .home_wrapper-small article .metadata.vis, .home main section .home_wrapper-small .archivetitle .metadata.vis, .home main section .home_wrapper-small .archivedescription .metadata.vis, .search-results main section .home_wrapper-small article .metadata.vis, .search-results main section .home_wrapper-small .archivetitle .metadata.vis, .search-results main section .home_wrapper-small .archivedescription .metadata.vis { display: flex; } .archive main section .home_wrapper-small article .metadata .categories, .archive main section .home_wrapper-small article .metadata .postedon, .archive main section .home_wrapper-small .archivetitle .metadata .categories, .archive main section .home_wrapper-small .archivetitle .metadata .postedon, .archive main section .home_wrapper-small .archivedescription .metadata .categories, .archive main section .home_wrapper-small .archivedescription .metadata .postedon, .home main section .home_wrapper-small article .metadata .categories, .home main section .home_wrapper-small article .metadata .postedon, .home main section .home_wrapper-small .archivetitle .metadata .categories, .home main section .home_wrapper-small .archivetitle .metadata .postedon, .home main section .home_wrapper-small .archivedescription .metadata .categories, .home main section .home_wrapper-small .archivedescription .metadata .postedon, .search-results main section .home_wrapper-small article .metadata .categories, .search-results main section .home_wrapper-small article .metadata .postedon, .search-results main section .home_wrapper-small .archivetitle .metadata .categories, .search-results main section .home_wrapper-small .archivetitle .metadata .postedon, .search-results main section .home_wrapper-small .archivedescription .metadata .categories, .search-results main section .home_wrapper-small .archivedescription .metadata .postedon { font: bold 1rem "Westeinde Caption"; color: #000; } } @media (min-width: 769px) and (min-width: 769px) { .archive main section .home_wrapper-small article .metadata .categories, .archive main section .home_wrapper-small article .metadata .postedon, .archive main section .home_wrapper-small .archivetitle .metadata .categories, .archive main section .home_wrapper-small .archivetitle .metadata .postedon, .archive main section .home_wrapper-small .archivedescription .metadata .categories, .archive main section .home_wrapper-small .archivedescription .metadata .postedon, .home main section .home_wrapper-small article .metadata .categories, .home main section .home_wrapper-small article .metadata .postedon, .home main section .home_wrapper-small .archivetitle .metadata .categories, .home main section .home_wrapper-small .archivetitle .metadata .postedon, .home main section .home_wrapper-small .archivedescription .metadata .categories, .home main section .home_wrapper-small .archivedescription .metadata .postedon, .search-results main section .home_wrapper-small article .metadata .categories, .search-results main section .home_wrapper-small article .metadata .postedon, .search-results main section .home_wrapper-small .archivetitle .metadata .categories, .search-results main section .home_wrapper-small .archivetitle .metadata .postedon, .search-results main section .home_wrapper-small .archivedescription .metadata .categories, .search-results main section .home_wrapper-small .archivedescription .metadata .postedon { font-size: 1.2rem; } } @media (min-width: 769px) { .archive main section .home_wrapper-small article .metadata .categories, .archive main section .home_wrapper-small .archivetitle .metadata .categories, .archive main section .home_wrapper-small .archivedescription .metadata .categories, .home main section .home_wrapper-small article .metadata .categories, .home main section .home_wrapper-small .archivetitle .metadata .categories, .home main section .home_wrapper-small .archivedescription .metadata .categories, .search-results main section .home_wrapper-small article .metadata .categories, .search-results main section .home_wrapper-small .archivetitle .metadata .categories, .search-results main section .home_wrapper-small .archivedescription .metadata .categories { margin-left: 6rem; padding: 1.33333rem 0; flex: 1 1 auto; } .archive main section .home_wrapper-small article .metadata .postedon, .archive main section .home_wrapper-small .archivetitle .metadata .postedon, .archive main section .home_wrapper-small .archivedescription .metadata .postedon, .home main section .home_wrapper-small article .metadata .postedon, .home main section .home_wrapper-small .archivetitle .metadata .postedon, .home main section .home_wrapper-small .archivedescription .metadata .postedon, .search-results main section .home_wrapper-small article .metadata .postedon, .search-results main section .home_wrapper-small .archivetitle .metadata .postedon, .search-results main section .home_wrapper-small .archivedescription .metadata .postedon { padding: 1.33333rem 1rem; flex: 1 0 auto; } } @media (min-width: 769px) and (min-width: 769px) { .archive main section .home_wrapper-small article h2, .archive main section .home_wrapper-small article h2 a, .archive main section .home_wrapper-small .archivetitle h2, .archive main section .home_wrapper-small .archivetitle h2 a, .archive main section .home_wrapper-small .archivedescription h2, .archive main section .home_wrapper-small .archivedescription h2 a, .home main section .home_wrapper-small article h2, .home main section .home_wrapper-small article h2 a, .home main section .home_wrapper-small .archivetitle h2, .home main section .home_wrapper-small .archivetitle h2 a, .home main section .home_wrapper-small .archivedescription h2, .home main section .home_wrapper-small .archivedescription h2 a, .search-results main section .home_wrapper-small article h2, .search-results main section .home_wrapper-small article h2 a, .search-results main section .home_wrapper-small .archivetitle h2, .search-results main section .home_wrapper-small .archivetitle h2 a, .search-results main section .home_wrapper-small .archivedescription h2, .search-results main section .home_wrapper-small .archivedescription h2 a { font-size: 1.5rem; color: #000; } } @media (min-width: 769px) and (min-width: 1279px) { .archive main section .home_wrapper-small article h2, .archive main section .home_wrapper-small article h2 a, .archive main section .home_wrapper-small .archivetitle h2, .archive main section .home_wrapper-small .archivetitle h2 a, .archive main section .home_wrapper-small .archivedescription h2, .archive main section .home_wrapper-small .archivedescription h2 a, .home main section .home_wrapper-small article h2, .home main section .home_wrapper-small article h2 a, .home main section .home_wrapper-small .archivetitle h2, .home main section .home_wrapper-small .archivetitle h2 a, .home main section .home_wrapper-small .archivedescription h2, .home main section .home_wrapper-small .archivedescription h2 a, .search-results main section .home_wrapper-small article h2, .search-results main section .home_wrapper-small article h2 a, .search-results main section .home_wrapper-small .archivetitle h2, .search-results main section .home_wrapper-small .archivetitle h2 a, .search-results main section .home_wrapper-small .archivedescription h2, .search-results main section .home_wrapper-small .archivedescription h2 a { font-size: 2.2rem; } } @media (min-width: 769px) { .archive main section .home_wrapper-small article h2, .archive main section .home_wrapper-small .archivetitle h2, .archive main section .home_wrapper-small .archivedescription h2, .home main section .home_wrapper-small article h2, .home main section .home_wrapper-small .archivetitle h2, .home main section .home_wrapper-small .archivedescription h2, .search-results main section .home_wrapper-small article h2, .search-results main section .home_wrapper-small .archivetitle h2, .search-results main section .home_wrapper-small .archivedescription h2 { display: none; position: absolute; top: 0; background-color: #fff; height: 100%; padding-left: 4rem; } } @media (min-width: 769px) and (min-width: 1279px) { .archive main section .home_wrapper-small article h2, .archive main section .home_wrapper-small .archivetitle h2, .archive main section .home_wrapper-small .archivedescription h2, .home main section .home_wrapper-small article h2, .home main section .home_wrapper-small .archivetitle h2, .home main section .home_wrapper-small .archivedescription h2, .search-results main section .home_wrapper-small article h2, .search-results main section .home_wrapper-small .archivetitle h2, .search-results main section .home_wrapper-small .archivedescription h2 { padding: 5rem; } } @media (min-width: 769px) { .archive main section .home_wrapper-small article h2 a, .archive main section .home_wrapper-small .archivetitle h2 a, .archive main section .home_wrapper-small .archivedescription h2 a, .home main section .home_wrapper-small article h2 a, .home main section .home_wrapper-small .archivetitle h2 a, .home main section .home_wrapper-small .archivedescription h2 a, .search-results main section .home_wrapper-small article h2 a, .search-results main section .home_wrapper-small .archivetitle h2 a, .search-results main section .home_wrapper-small .archivedescription h2 a { bottom: 7rem; width: calc(100% - 8rem); height: -moz-max-content; height: max-content; height: -moz-fit-content; height: fit-content; position: absolute; } } @media (min-width: 769px) and (min-width: 1279px) { .archive main section .home_wrapper-small article h2 a, .archive main section .home_wrapper-small .archivetitle h2 a, .archive main section .home_wrapper-small .archivedescription h2 a, .home main section .home_wrapper-small article h2 a, .home main section .home_wrapper-small .archivetitle h2 a, .home main section .home_wrapper-small .archivedescription h2 a, .search-results main section .home_wrapper-small article h2 a, .search-results main section .home_wrapper-small .archivetitle h2 a, .search-results main section .home_wrapper-small .archivedescription h2 a { width: calc(100% - 10rem); } } @media (min-width: 769px) { .archive main section .home_wrapper-small article, .home main section .home_wrapper-small article, .search-results main section .home_wrapper-small article { cursor: pointer; } .archive main section .home_wrapper-small .archivetitle, .home main section .home_wrapper-small .archivetitle, .search-results main section .home_wrapper-small .archivetitle { margin: 0 auto; width: 100%; position: relative; bottom: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 2rem 0; text-align: center; border-right: #000 1px solid; } .archive main section .home_wrapper-small .archivetitle::after, .home main section .home_wrapper-small .archivetitle::after, .search-results main section .home_wrapper-small .archivetitle::after { position: absolute; content: ""; display: block; top: 0; border: none; width: calc(100% - 5rem); border-top: #000 1px solid; background-color: transparent; left: calc(5rem); margin-left: -0; } .archive main section .home_wrapper-small .archivetitle::before, .home main section .home_wrapper-small .archivetitle::before, .search-results main section .home_wrapper-small .archivetitle::before { display: block; content: ""; position: absolute; width: calc(5rem); height: calc(5rem); top: 0; background-color: transparent; z-index: 9; left: -0; border-left: #000 solid 1px; -moz-transform: skewX(-45deg); -o-transform: skewX(-45deg); -ms-transform: skewX(-45deg); -webkit-transform: skewX(-45deg); transform: skewX(-45deg); transform-origin: left bottom; border-top: #000 solid 1px; } .archive main section .home_wrapper-small .archivetitle h1, .home main section .home_wrapper-small .archivetitle h1, .search-results main section .home_wrapper-small .archivetitle h1 { font: bold 3rem "Westeinde Caption"; color: #000; margin: 0 auto; } } @media (min-width: 769px) and (-webkit-min-device-pixel-ratio: 2.1) { .archive main section .home_wrapper-small .archivetitle h1, .home main section .home_wrapper-small .archivetitle h1, .search-results main section .home_wrapper-small .archivetitle h1 { font-size: 2.5rem !important; } } @media (min-width: 769px) and (min-width: 769px) { .archive main section .home_wrapper-small .archivetitle h1, .home main section .home_wrapper-small .archivetitle h1, .search-results main section .home_wrapper-small .archivetitle h1 { font-size: 6rem; } } @media (min-width: 769px) and (min-width: 1279px) { .archive main section .home_wrapper-small .archivetitle h1, .home main section .home_wrapper-small .archivetitle h1, .search-results main section .home_wrapper-small .archivetitle h1 { font-size: 7.5rem; } } @media (min-width: 769px) and (min-width: 1919px) { .archive main section .home_wrapper-small .archivetitle h1, .home main section .home_wrapper-small .archivetitle h1, .search-results main section .home_wrapper-small .archivetitle h1 { font-size: 11rem; } } @media (min-width: 769px) { .archive main section .home_wrapper-small .archivetitle.tag, .home main section .home_wrapper-small .archivetitle.tag, .search-results main section .home_wrapper-small .archivetitle.tag { order: 1; } .archive main section .home_wrapper-small .archivetitle.tag h1, .home main section .home_wrapper-small .archivetitle.tag h1, .search-results main section .home_wrapper-small .archivetitle.tag h1 { text-transform: uppercase; } .archive main section .home_wrapper-small .archivetitle > object, .home main section .home_wrapper-small .archivetitle > object, .search-results main section .home_wrapper-small .archivetitle > object { position: absolute; top: 2rem; right: 2rem; width: 5rem; height: 5rem; } .archive main section .home_wrapper-small .archivedescription, .home main section .home_wrapper-small .archivedescription, .search-results main section .home_wrapper-small .archivedescription { order: 4; border-top: #000 1px solid; border-right: #000 1px solid; border-bottom: #000 1px solid; margin: 0; width: 100%; position: relative; bottom: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 2rem; } .archive main section .home_wrapper-small .archivedescription p, .home main section .home_wrapper-small .archivedescription p, .search-results main section .home_wrapper-small .archivedescription p { margin: 0; font: bold 1rem "Butler"; color: #000; } } @media (min-width: 769px) and (min-width: 769px) { .archive main section .home_wrapper-small .archivedescription p, .home main section .home_wrapper-small .archivedescription p, .search-results main section .home_wrapper-small .archivedescription p { font-size: 1.2rem; } } /* -------------------------------------------------------------------------- */ /* Search results */ /* -------------------------------------------------------------------------- */ .search-results #content .archivetitle { word-wrap: break-word; } /* -------------------------------------------------------------------------- */ /* Events */ /* -------------------------------------------------------------------------- */ body.category.category-esemeny header { background-color: #000; } body.category.category-esemeny main { padding-top: 9rem; } body.category.category-esemeny main article { height: 50vh; } body.category.category-esemeny main article .thumbnailwrapper { height: 50vw; } body.category.category-esemeny main article .thumbnailwrapper img { width: 100%; height: 100%; } body.category.category-esemeny main article .event-metadata { display: flex; flex-direction: column; padding: 2rem; } body.category.category-esemeny main article .event-metadata .top-row, body.category.category-esemeny main article .event-metadata .bottom-row { display: flex; flex-direction: row; justify-content: space-between; height: 50%; flex: 0 0 auto; } body.category.category-esemeny main article .event-metadata .top-row h2, body.category.category-esemeny main article .event-metadata .bottom-row h2 { height: unset; } body.category.category-esemeny main article .event-metadata .hr { flex: 0 0 auto; height: 1px; width: 100%; background-color: #000; } /* -------------------------------------------------------------------------- */ /* single */ /* -------------------------------------------------------------------------- */ .single, .page { /* ---------------------------- single on mobile ---------------------------- */ /* -------------------------------- lightbox -------------------------------- */ /* ------------------------------ related posts ----------------------------- */ } @media (min-width: 769px) { .single .wrapper, .page .wrapper { height: unset; width: 100%; } .single .wrapper .header .header-1, .single .wrapper .header .header-2, .page .wrapper .header .header-1, .page .wrapper .header .header-2 { background: transparent; border: none; } .single .wrapper .header .header-1 .social-link, .single .wrapper .header .header-1 .search-box, .single .wrapper .header .header-1 .events-link, .single .wrapper .header .header-2 .social-link, .single .wrapper .header .header-2 .search-box, .single .wrapper .header .header-2 .events-link, .page .wrapper .header .header-1 .social-link, .page .wrapper .header .header-1 .search-box, .page .wrapper .header .header-1 .events-link, .page .wrapper .header .header-2 .social-link, .page .wrapper .header .header-2 .search-box, .page .wrapper .header .header-2 .events-link { display: none; } } .single article, .page article { padding-bottom: 5rem; /* ---------------------------- single header on desktop --------------------------- */ /* ----------------------------- single content ----------------------------- */ } .single article .thumbnailwrapper, .page article .thumbnailwrapper { padding: 0; } .single article .thumbnailwrapper img.attachment-post-thumbnail, .page article .thumbnailwrapper img.attachment-post-thumbnail { height: 75vh; width: 100vw; object-fit: cover; padding: 0; } .single article .titlewrapper, .page article .titlewrapper { position: relative; top: 0; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-content: flex-start; padding: 0; padding-top: 10rem; } .single article .titlewrapper .metadata, .page article .titlewrapper .metadata { width: calc(100vw - 5rem); bottom: unset !important; height: 5rem; position: relative; align-self: flex-end; display: flex; flex-direction: row; justify-content: space-between; font: bold 1rem "Westeinde Caption"; } @media (min-width: 769px) { .single article .titlewrapper .metadata, .page article .titlewrapper .metadata { font: 900 2rem "Westeinde Caption"; color: #fff; -webkit-text-stroke: #000 1px; } } .single article .titlewrapper .metadata .time-cat, .page article .titlewrapper .metadata .time-cat { z-index: 10; } .single article .titlewrapper h1.single-title, .page article .titlewrapper h1.single-title { margin: 0; font: 800 3rem "Butler"; color: #000; padding: 2rem; background-color: #fff; } @media (min-width: 769px) { .single article .titlewrapper h1.single-title, .page article .titlewrapper h1.single-title { font-size: 5rem; } } @media (max-width: 768px) { .single article.has-post-thumbnail .titlewrapper, .page article.has-post-thumbnail .titlewrapper { position: absolute; height: 100vh; justify-content: flex-end; padding: 0; } .single article.has-post-thumbnail .titlewrapper h1.single-title, .page article.has-post-thumbnail .titlewrapper h1.single-title { min-height: 25vh; } } @media (min-width: 769px) { .single article, .page article { min-height: calc(100vh - 10rem); margin-top: 100vh; margin-left: 5rem; background-color: #fff; border-left: #000 solid 1px; padding-left: 5rem; /* ---------------------- title and metadata on desktop --------------------- */ } .single article .thumbnailwrapper, .page article .thumbnailwrapper { position: fixed; top: 0; left: 0; z-index: -1; bottom: 0; width: 100%; } .single article .thumbnailwrapper img.attachment-post-thumbnail, .page article .thumbnailwrapper img.attachment-post-thumbnail { object-fit: cover; padding: 0; width: 100%; height: 100%; } .single article .titlewrapper, .page article .titlewrapper { position: relative; justify-content: flex-start; height: unset; padding-top: 0; } .single article .titlewrapper .metadata, .page article .titlewrapper .metadata { top: -5rem; width: 100%; padding-left: 0; padding-right: 10rem; } .single article .titlewrapper .metadata::after, .page article .titlewrapper .metadata::after { position: absolute; content: ""; display: block; top: 0; border: none; width: calc(100% - 5rem + 5rem); border-top: #000 1px solid; background-color: white; left: calc(5rem); margin-left: -5rem; } .single article .titlewrapper .metadata::before, .page article .titlewrapper .metadata::before { display: block; content: ""; position: absolute; width: calc(5rem); height: calc(5rem); top: 0; background-color: white; z-index: 9; left: -5rem; border-left: #000 solid 1px; -moz-transform: skewX(-45deg); -o-transform: skewX(-45deg); -ms-transform: skewX(-45deg); -webkit-transform: skewX(-45deg); transform: skewX(-45deg); transform-origin: left bottom; border-top: #000 solid 1px; } .single article .titlewrapper h1.single-title, .page article .titlewrapper h1.single-title { background-color: transparent; min-height: unset; top: -5rem; position: relative; padding-right: 10rem; padding-left: 0; } } .single article hr, .page article hr { height: 1px; background-color: #ff5f5f; padding: 0; margin: 0 auto; border: none; width: 20%; } .single article hr.content-wrap, .page article hr.content-wrap { width: 40%; } .single article hr.content-begin, .page article hr.content-begin { margin-top: 2rem; } @media (min-width: 769px) { .single article hr.content-begin, .page article hr.content-begin { margin-top: 0 !important; } } .single article hr.content-end, .page article hr.content-end { margin-top: 2rem; margin-bottom: 2rem; } .single article.has-post-thumbnail hr.content-begin, .page article.has-post-thumbnail hr.content-begin { margin-top: calc(25vh + 2rem); } .single article .single-content, .page article .single-content { position: relative; padding: 2rem; } @media (min-width: 769px) { .single article .single-content, .page article .single-content { top: -5rem; padding-left: 0; padding-right: 10rem; } } .single article .single-content h2, .page article .single-content h2 { font: 800 3rem "Butler"; } .single article .single-content h3, .page article .single-content h3 { font: 800 2rem "Butler"; color: #000; margin: 2rem 0; display: inline-block; background: #ff5f5f; -moz-box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f; -webkit-box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f; box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f; } .single article .single-content h4, .page article .single-content h4 { font-weight: 500; font-size: 2.4rem; line-height: 1.6; } .single article .single-content a:hover, .page article .single-content a:hover { text-decoration: underline; } .single article .single-content strong, .page article .single-content strong { font-weight: 900; } .single article .single-content blockquote, .page article .single-content blockquote { font: 800 2rem "Butler"; color: #000; margin: 3rem 0; } .single article .single-content blockquote p, .page article .single-content blockquote p { background: #ff5f5f; display: inline; padding: 3px 0; -moz-box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f; -webkit-box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f; box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f; } .single article .single-content blockquote cite, .page article .single-content blockquote cite { display: block; position: relative; font-size: 80%; top: 0.5rem; left: 2rem; } .single article .single-content .wp-block-pullquote, .page article .single-content .wp-block-pullquote { text-align: unset; } .single article .single-content .wp-block-image, .page article .single-content .wp-block-image { margin: 2rem 0; position: relative !important; } @media (min-width: 769px) { .single article .single-content .wp-block-image, .page article .single-content .wp-block-image { padding: 2rem 0; } } .single article .single-content .wp-block-image figcaption, .page article .single-content .wp-block-image figcaption { bottom: 0 !important; } .single article .single-content .wp-block-image figcaption::after, .page article .single-content .wp-block-image figcaption::after { content: ""; display: block; position: absolute; background-color: transparent; width: 0; height: 0; right: -5rem; top: -5rem; border-top: 5rem solid transparent; border-left: 5rem solid transparent; border-right: 5rem solid transparent; border-bottom: 5rem solid #fff; position: absolute; z-index: -1; } .single article .single-content .wp-block-gallery, .page article .single-content .wp-block-gallery { padding: 0; margin: 2rem 0; } .single article .single-content .wp-block-gallery li, .page article .single-content .wp-block-gallery li { margin-right: 0; } @media (min-width: 769px) { .single article .single-content .wp-block-gallery li, .page article .single-content .wp-block-gallery li { margin-bottom: 4rem; } } .single article .single-content .wp-block-gallery li:nth-child(odd) figcaption::after, .page article .single-content .wp-block-gallery li:nth-child(odd) figcaption::after { content: ""; display: block; position: absolute; background-color: transparent; width: 0; height: 0; right: -5rem; top: -5rem; border-top: 5rem solid transparent; border-left: 5rem solid transparent; border-right: 5rem solid transparent; border-bottom: 5rem solid #fff; position: absolute; z-index: -1; } .single article .single-content .wp-block-gallery li:nth-child(even) figcaption, .page article .single-content .wp-block-gallery li:nth-child(even) figcaption { right: 0; top: 0; } .single article .single-content .wp-block-gallery li:nth-child(even) figcaption::after, .page article .single-content .wp-block-gallery li:nth-child(even) figcaption::after { content: ""; display: block; position: absolute; background-color: transparent; width: 0; height: 0; left: -5rem; bottom: -5rem; border-bottom: 5rem solid transparent; border-left: 5rem solid transparent; border-right: 5rem solid transparent; border-top: 5rem solid #fff; position: absolute; z-index: -1; } .single article .single-content .wp-block-image figcaption, .single article .single-content .wp-block-gallery .blocks-gallery-image figcaption, .single article .single-content .wp-block-gallery .blocks-gallery-item figcaption, .page article .single-content .wp-block-image figcaption, .page article .single-content .wp-block-gallery .blocks-gallery-image figcaption, .page article .single-content .wp-block-gallery .blocks-gallery-item figcaption { background: #fff; position: absolute; width: calc(100% - 5rem); height: 5rem; padding: 1rem 2rem; margin: 0; bottom: unset; font: 900 1rem "Westeinde Caption"; color: #000; line-height: 1; text-align: left; overflow: unset; display: flex; flex-direction: column; justify-content: center; z-index: 1; } @media (min-width: 769px) { .single article .single-content .wp-block-image figcaption, .single article .single-content .wp-block-gallery .blocks-gallery-image figcaption, .single article .single-content .wp-block-gallery .blocks-gallery-item figcaption, .page article .single-content .wp-block-image figcaption, .page article .single-content .wp-block-gallery .blocks-gallery-image figcaption, .page article .single-content .wp-block-gallery .blocks-gallery-item figcaption { display: none; } .single article .single-content .wp-block-image figcaption.vis, .single article .single-content .wp-block-gallery .blocks-gallery-image figcaption.vis, .single article .single-content .wp-block-gallery .blocks-gallery-item figcaption.vis, .page article .single-content .wp-block-image figcaption.vis, .page article .single-content .wp-block-gallery .blocks-gallery-image figcaption.vis, .page article .single-content .wp-block-gallery .blocks-gallery-item figcaption.vis { display: block; } } .single article .single-content .wp-block-gallery .alignleft, .single article .single-content .wp-block-gallery .alignright, .single article .single-content .wp-block-image .alignleft, .single article .single-content .wp-block-image .alignright, .page article .single-content .wp-block-gallery .alignleft, .page article .single-content .wp-block-gallery .alignright, .page article .single-content .wp-block-image .alignleft, .page article .single-content .wp-block-image .alignright { float: unset; margin: 0; } @media (min-width: 769px) { .single article .single-content .wp-block-gallery .alignleft, .single article .single-content .wp-block-gallery .alignright, .single article .single-content .wp-block-image .alignleft, .single article .single-content .wp-block-image .alignright, .page article .single-content .wp-block-gallery .alignleft, .page article .single-content .wp-block-gallery .alignright, .page article .single-content .wp-block-image .alignleft, .page article .single-content .wp-block-image .alignright { width: 100%; } } .single article .single-content .wp-block-gallery .alignright, .single article .single-content .wp-block-image .alignright, .page article .single-content .wp-block-gallery .alignright, .page article .single-content .wp-block-image .alignright { text-align: right; } .single article .single-content .authors, .page article .single-content .authors { font-weight: 500; font-size: 2.4rem; line-height: 1.6; } .single article .single-content .authors a, .page article .single-content .authors a { font: bold 1rem "Westeinde Caption"; } @media (min-width: 769px) { .single article .single-content .authors a, .page article .single-content .authors a { font: 900 2rem "Westeinde Caption"; color: #fff; -webkit-text-stroke: #000 1px; } } .single #cboxOverlay, .page #cboxOverlay { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: #000; z-index: 10; } .single #colorbox, .page #colorbox { z-index: 12; } .single #colorbox:focus, .page #colorbox:focus { border: none; outline: none; } .single #colorbox #cboxContent #cboxTitle, .page #colorbox #cboxContent #cboxTitle { padding: 1rem; font: 900 1rem "Westeinde Caption"; color: #000; color: #fff; width: 100%; text-align: center; } .single #colorbox #cboxContent #cboxCurrent, .page #colorbox #cboxContent #cboxCurrent { display: none !important; } .single #colorbox #cboxContent button, .page #colorbox #cboxContent button { position: absolute; background-repeat: no-repeat; background-position: center; background-size: 100%; } .single #colorbox #cboxContent button#cboxPrevious, .single #colorbox #cboxContent button#cboxNext, .page #colorbox #cboxContent button#cboxPrevious, .page #colorbox #cboxContent button#cboxNext { background-image: url(../img/solid_arrow_right.svg); width: 2rem; height: 4rem; bottom: -5rem; filter: invert(100); z-index: 14; } .single #colorbox #cboxContent button#cboxPrevious, .page #colorbox #cboxContent button#cboxPrevious { left: 1rem; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -ms-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); } .single #colorbox #cboxContent button#cboxNext, .page #colorbox #cboxContent button#cboxNext { right: 1rem; } .single #colorbox #cboxContent button#cboxClose, .page #colorbox #cboxContent button#cboxClose { background-image: url(../img/dis-plus.svg); width: 2rem; height: 2rem; -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); top: -3rem; right: 1rem; } .single .toHome, .single #related_posts > h3, .page .toHome, .page #related_posts > h3 { padding-bottom: 4rem; margin: 0 auto; text-align: center; font: bold 1rem "Westeinde Caption"; } @media (min-width: 769px) { .single .toHome, .single #related_posts > h3, .page .toHome, .page #related_posts > h3 { font: 900 2rem "Westeinde Caption"; color: #fff; -webkit-text-stroke: #000 1px; } } .single .toHome a, .single #related_posts > h3 a, .page .toHome a, .page #related_posts > h3 a { font: bold 1rem "Westeinde Caption"; } @media (min-width: 769px) { .single .toHome a, .single #related_posts > h3 a, .page .toHome a, .page #related_posts > h3 a { font: 900 2rem "Westeinde Caption"; color: #fff; -webkit-text-stroke: #000 1px; } } .single .toHome a:hover, .single #related_posts > h3 a:hover, .page .toHome a:hover, .page #related_posts > h3 a:hover { color: #000; -webkit-text-stroke-color: transparent; } @media (min-width: 769px) { .single .toHome, .page .toHome { position: relative; padding-top: 4rem; top: -5rem; padding-right: 10rem; } .single .toHome a, .page .toHome a { margin-bottom: 4rem; display: block; } } .single #related_posts, .page #related_posts { /* ------------------------ related posts on desktop ------------------------ */ } .single #related_posts > h3, .page #related_posts > h3 { display: none; } .single #related_posts ul, .page #related_posts ul { padding: 0; } .single #related_posts ul li, .page #related_posts ul li { display: block; position: relative; cursor: pointer; } .single #related_posts ul li > a, .page #related_posts ul li > a { margin: 0; padding: 0; border: none; display: inline-block; } .single #related_posts ul li .related_thumbnailwrapper img, .page #related_posts ul li .related_thumbnailwrapper img { height: 50vw; width: 100vw; object-fit: cover; } .single #related_posts ul li h2, .page #related_posts ul li h2 { width: 100%; height: 50vw; padding: 2rem; padding-top: 3rem; margin: 0; } .single #related_posts ul li h2 a, .page #related_posts ul li h2 a { font: 500 2rem "Westeinde Caption"; } .single #related_posts ul li .metadata, .page #related_posts ul li .metadata { bottom: 50%; height: 5rem; display: flex; width: -moz-max-content; width: max-content; width: -moz-fit-content; width: fit-content; justify-content: space-around; flex-wrap: nowrap; align-items: center; padding: 0; } .single #related_posts ul li .metadata .vr, .page #related_posts ul li .metadata .vr { height: 100%; width: 1px; background-color: #000; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; } @media (min-width: 769px) { .single #related_posts, .page #related_posts { padding-right: 10rem; top: -5rem; position: relative; padding-top: 2rem; } .single #related_posts > h3, .page #related_posts > h3 { display: block; } .single #related_posts ul, .page #related_posts ul { display: flex; flex-direction: row; flex-wrap: nowrap; } .single #related_posts ul li, .page #related_posts ul li { flex: 1 1 33%; flex: 0 0 calc(100% / 3); height: calc((100vw - 16rem) / 3); position: relative; } .single #related_posts ul li .related_thumbnailwrapper, .page #related_posts ul li .related_thumbnailwrapper { width: 100%; height: 100%; } .single #related_posts ul li .related_thumbnailwrapper img, .page #related_posts ul li .related_thumbnailwrapper img { width: 100%; height: 100%; object-fit: cover; } .single #related_posts ul li .metadata, .page #related_posts ul li .metadata { width: 100%; min-width: unset; height: 5rem; position: absolute; bottom: 0; right: 0; background: transparent; display: flex; flex-direction: row; padding: 0; justify-content: space-between; align-items: stretch; display: none; } .single #related_posts ul li .metadata::after, .page #related_posts ul li .metadata::after { position: absolute; content: ""; display: block; top: 0; border: none; width: calc(100% - 5rem); border-top: #000 1px solid; background-color: transparent; left: calc(5rem); margin-left: -0; } .single #related_posts ul li .metadata::before, .page #related_posts ul li .metadata::before { display: block; content: ""; position: absolute; width: calc(5rem); height: calc(5rem); top: 0; background-color: transparent; z-index: 9; left: -0; border-left: #000 solid 1px; -moz-transform: skewX(-45deg); -o-transform: skewX(-45deg); -ms-transform: skewX(-45deg); -webkit-transform: skewX(-45deg); transform: skewX(-45deg); transform-origin: left bottom; border-top: #000 solid 1px; } .single #related_posts ul li .metadata.vis, .page #related_posts ul li .metadata.vis { display: flex; } .single #related_posts ul li .metadata .categories, .single #related_posts ul li .metadata .postedon, .page #related_posts ul li .metadata .categories, .page #related_posts ul li .metadata .postedon { font: bold 1rem "Westeinde Caption"; color: #000; } } @media (min-width: 769px) and (min-width: 769px) { .single #related_posts ul li .metadata .categories, .single #related_posts ul li .metadata .postedon, .page #related_posts ul li .metadata .categories, .page #related_posts ul li .metadata .postedon { font-size: 1.2rem; } } @media (min-width: 769px) { .single #related_posts ul li .metadata .categories, .page #related_posts ul li .metadata .categories { margin-left: 6rem; padding: 1.33333rem 0; flex: 1 1 auto; } .single #related_posts ul li .metadata .postedon, .page #related_posts ul li .metadata .postedon { padding: 1.33333rem 1rem; flex: 1 0 auto; } } @media (min-width: 769px) and (min-width: 769px) { .single #related_posts ul li h2, .single #related_posts ul li h2 a, .page #related_posts ul li h2, .page #related_posts ul li h2 a { font-size: 1.5rem; color: #000; } } @media (min-width: 769px) and (min-width: 1279px) { .single #related_posts ul li h2, .single #related_posts ul li h2 a, .page #related_posts ul li h2, .page #related_posts ul li h2 a { font-size: 2.2rem; } } @media (min-width: 769px) { .single #related_posts ul li h2, .page #related_posts ul li h2 { display: none; position: absolute; top: 0; background-color: #fff; height: 100%; padding-left: 4rem; } } @media (min-width: 769px) and (min-width: 1279px) { .single #related_posts ul li h2, .page #related_posts ul li h2 { padding: 5rem; } } @media (min-width: 769px) { .single #related_posts ul li h2 a, .page #related_posts ul li h2 a { bottom: 7rem; width: calc(100% - 8rem); height: -moz-max-content; height: max-content; height: -moz-fit-content; height: fit-content; position: absolute; } } @media (min-width: 769px) and (min-width: 1279px) { .single #related_posts ul li h2 a, .page #related_posts ul li h2 a { width: calc(100% - 10rem); } } /* -------------------------------- page only------------------------------- */ @media (min-width: 769px) { body.page article { margin-top: 10rem; } } /* -------------------------------------------------------------------------- */ /* TAG COLORS */ /* -------------------------------------------------------------------------- */ @media (max-width: 768px) { .tag-be .metadata { color: #fdff00 !important; } .tag-be .metadata .vr { background-color: #fdff00 !important; } } .tag-be .metadata a { color: #fdff00 !important; } .tag-be hr { background-color: #fdff00 !important; } .tag-be figcaption { color: #fdff00 !important; } @media (min-width: 769px) { .tag-be.home-big h2 a { color: #fdff00; } .tag-be.home-big.hovered { background-color: #fdff00 !important; } .tag-be.home-small .metadata, .tag-be.home-small .metadata a { color: #000 !important; } } .tag-be.bedo-sub-wrapper > a { -webkit-text-stroke: #fdff00 1px !important; } .tag-be.bedo-sub-wrapper span { color: #fdff00 !important; } .tag-be.bedo-sub-wrapper .circle { background-color: #fdff00 !important; } .tag-be.archive.tag { background-color: #fdff00 !important; } .tag-be.archive.tag .header-1, .tag-be.archive.tag .header-2 { background-color: #fdff00 !important; } .tag-be.archive.tag article *:not(.vr) { background-color: #fdff00 !important; } .tag-be ::selection { color: #000; background-color: #3c00ff; } @media (min-width: 769px) { .tag-be.random .thumbnailwrapper > img { -webkit-mask: url(../img/clip/be_desktop.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100%; mask: url(../img/clip/be_desktop.svg); mask-repeat: no-repeat; mask-size: 100%; } } @media (max-width: 768px) { .tag-do .metadata { color: #3c00ff !important; } .tag-do .metadata .vr { background-color: #3c00ff !important; } } .tag-do .metadata a { color: #3c00ff !important; } .tag-do hr { background-color: #3c00ff !important; } .tag-do figcaption { color: #3c00ff !important; } @media (min-width: 769px) { .tag-do.home-big h2 a { color: #3c00ff; } .tag-do.home-big.hovered { background-color: #3c00ff !important; } .tag-do.home-small .metadata, .tag-do.home-small .metadata a { color: #000 !important; } } .tag-do.bedo-sub-wrapper > a { -webkit-text-stroke: #3c00ff 1px !important; } .tag-do.bedo-sub-wrapper span { color: #3c00ff !important; } .tag-do.bedo-sub-wrapper .circle { background-color: #3c00ff !important; } .tag-do.archive.tag { background-color: #3c00ff !important; } .tag-do.archive.tag .header-1, .tag-do.archive.tag .header-2 { background-color: #3c00ff !important; } .tag-do.archive.tag article *:not(.vr) { background-color: #3c00ff !important; } .tag-do ::selection { color: #000; background-color: #fdff00; } @media (min-width: 769px) { .tag-do.random .thumbnailwrapper > img { -webkit-mask: url(../img/clip/do_desktop.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100%; mask: url(../img/clip/do_desktop.svg); mask-repeat: no-repeat; mask-size: 100%; } } @media (max-width: 768px) { .tag-think .metadata { color: #00ffb8 !important; } .tag-think .metadata .vr { background-color: #00ffb8 !important; } } .tag-think .metadata a { color: #00ffb8 !important; } .tag-think hr { background-color: #00ffb8 !important; } .tag-think figcaption { color: #00ffb8 !important; } @media (min-width: 769px) { .tag-think.home-big h2 a { color: #00ffb8; } .tag-think.home-big.hovered { background-color: #00ffb8 !important; } .tag-think.home-small .metadata, .tag-think.home-small .metadata a { color: #000 !important; } } .tag-think.bedo-sub-wrapper > a { -webkit-text-stroke: #00ffb8 1px !important; } .tag-think.bedo-sub-wrapper span { color: #00ffb8 !important; } .tag-think.bedo-sub-wrapper .circle { background-color: #00ffb8 !important; } .tag-think.archive.tag { background-color: #00ffb8 !important; } .tag-think.archive.tag .header-1, .tag-think.archive.tag .header-2 { background-color: #00ffb8 !important; } .tag-think.archive.tag article *:not(.vr) { background-color: #00ffb8 !important; } .tag-think ::selection { color: #000; background-color: #ff5f5f; } @media (min-width: 769px) { .tag-think.random .thumbnailwrapper > img { -webkit-mask: url(../img/clip/think_desktop.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100%; mask: url(../img/clip/think_desktop.svg); mask-repeat: no-repeat; mask-size: 100%; } } @media (max-width: 768px) { .tag-love .metadata { color: #ff5f5f !important; } .tag-love .metadata .vr { background-color: #ff5f5f !important; } } .tag-love .metadata a { color: #ff5f5f !important; } .tag-love hr { background-color: #ff5f5f !important; } .tag-love figcaption { color: #ff5f5f !important; } @media (min-width: 769px) { .tag-love.home-big h2 a { color: #ff5f5f; } .tag-love.home-big.hovered { background-color: #ff5f5f !important; } .tag-love.home-small .metadata, .tag-love.home-small .metadata a { color: #000 !important; } } .tag-love.bedo-sub-wrapper > a { -webkit-text-stroke: #ff5f5f 1px !important; } .tag-love.bedo-sub-wrapper span { color: #ff5f5f !important; } .tag-love.bedo-sub-wrapper .circle { background-color: #ff5f5f !important; } .tag-love.archive.tag { background-color: #ff5f5f !important; } .tag-love.archive.tag .header-1, .tag-love.archive.tag .header-2 { background-color: #ff5f5f !important; } .tag-love.archive.tag article *:not(.vr) { background-color: #ff5f5f !important; } .tag-love ::selection { color: #000; background-color: #00ffb8; } @media (min-width: 769px) { .tag-love.random .thumbnailwrapper > img { -webkit-mask: url(../img/clip/love_desktop.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100%; mask: url(../img/clip/love_desktop.svg); mask-repeat: no-repeat; mask-size: 100%; } } @media (min-width: 769px) { .single .tag-be .titlewrapper .metadata { -webkit-text-stroke: #fdff00 1px !important; } } @media (min-width: 769px) { .single .tag-be .titlewrapper .metadata a { color: #fff !important; -webkit-text-stroke: #fdff00 1px !important; } .single .tag-be .titlewrapper .metadata a:hover { color: #fdff00 !important; } } .single .tag-be .single-content blockquote p, .single .tag-be .single-content h3 { background: #fdff00 !important; -moz-box-shadow: 10px 0 #fdff00, -5px 0 #fdff00 !important; -webkit-box-shadow: 10px 0 #fdff00, -5px 0 #fdff00 !important; box-shadow: 10px 0 #fdff00, -5px 0 #fdff00 !important; } .single .tag-be .single-content a { color: #fdff00; } .single .tag-be .single-content .authors a { -webkit-text-stroke: #fdff00 1px !important; } .single .tag-be .single-content .authors a:hover { color: #fdff00 !important; text-decoration: none; } @media (min-width: 769px) { .single .tag-do .titlewrapper .metadata { -webkit-text-stroke: #3c00ff 1px !important; } } @media (min-width: 769px) { .single .tag-do .titlewrapper .metadata a { color: #fff !important; -webkit-text-stroke: #3c00ff 1px !important; } .single .tag-do .titlewrapper .metadata a:hover { color: #3c00ff !important; } } .single .tag-do .single-content blockquote p, .single .tag-do .single-content h3 { background: #3c00ff !important; -moz-box-shadow: 10px 0 #3c00ff, -5px 0 #3c00ff !important; -webkit-box-shadow: 10px 0 #3c00ff, -5px 0 #3c00ff !important; box-shadow: 10px 0 #3c00ff, -5px 0 #3c00ff !important; } .single .tag-do .single-content a { color: #3c00ff; } .single .tag-do .single-content .authors a { -webkit-text-stroke: #3c00ff 1px !important; } .single .tag-do .single-content .authors a:hover { color: #3c00ff !important; text-decoration: none; } @media (min-width: 769px) { .single .tag-think .titlewrapper .metadata { -webkit-text-stroke: #00ffb8 1px !important; } } @media (min-width: 769px) { .single .tag-think .titlewrapper .metadata a { color: #fff !important; -webkit-text-stroke: #00ffb8 1px !important; } .single .tag-think .titlewrapper .metadata a:hover { color: #00ffb8 !important; } } .single .tag-think .single-content blockquote p, .single .tag-think .single-content h3 { background: #00ffb8 !important; -moz-box-shadow: 10px 0 #00ffb8, -5px 0 #00ffb8 !important; -webkit-box-shadow: 10px 0 #00ffb8, -5px 0 #00ffb8 !important; box-shadow: 10px 0 #00ffb8, -5px 0 #00ffb8 !important; } .single .tag-think .single-content a { color: #00ffb8; } .single .tag-think .single-content .authors a { -webkit-text-stroke: #00ffb8 1px !important; } .single .tag-think .single-content .authors a:hover { color: #00ffb8 !important; text-decoration: none; } @media (min-width: 769px) { .single .tag-love .titlewrapper .metadata { -webkit-text-stroke: #ff5f5f 1px !important; } } @media (min-width: 769px) { .single .tag-love .titlewrapper .metadata a { color: #fff !important; -webkit-text-stroke: #ff5f5f 1px !important; } .single .tag-love .titlewrapper .metadata a:hover { color: #ff5f5f !important; } } .single .tag-love .single-content blockquote p, .single .tag-love .single-content h3 { background: #ff5f5f !important; -moz-box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f !important; -webkit-box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f !important; box-shadow: 10px 0 #ff5f5f, -5px 0 #ff5f5f !important; } .single .tag-love .single-content a { color: #ff5f5f; } .single .tag-love .single-content .authors a { -webkit-text-stroke: #ff5f5f 1px !important; } .single .tag-love .single-content .authors a:hover { color: #ff5f5f !important; text-decoration: none; } body.hover-tag-be, .header-1.hover-tag-be, .header-2.hover-tag-be { background-color: #fdff00 !important; } body.hover-tag-do, .header-1.hover-tag-do, .header-2.hover-tag-do { background-color: #3c00ff !important; } body.hover-tag-think, .header-1.hover-tag-think, .header-2.hover-tag-think { background-color: #00ffb8 !important; } body.hover-tag-love, .header-1.hover-tag-love, .header-2.hover-tag-love { background-color: #ff5f5f !important; } /* -------------------------------------------------------------------------- */ /* imports */ /* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */ /* BUTLER */ /* -------------------------------------------------------------------------- */ @font-face { font-family: "Butler"; src: url("../fonts/Butler-UltraLight.woff2") format("woff2"), url("../fonts/Butler-UltraLight.woff") format("woff"); font-weight: 200; font-style: normal; } @font-face { font-family: "Butler"; src: url("../fonts/Butler-Light.woff2") format("woff2"), url("../fonts/Butler-Light.woff") format("woff"); font-weight: 300; font-style: normal; } @font-face { font-family: "Butler"; src: url("../fonts/Butler.woff2") format("woff2"), url("../fonts/Butler.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "Butler"; src: url("../fonts/Butler-Medium.woff2") format("woff2"), url("../fonts/Butler-Medium.woff") format("woff"); font-weight: 500; font-style: normal; } @font-face { font-family: "Butler"; src: url("../fonts/Butler-Bold.woff2") format("woff2"), url("../fonts/Butler-Bold.woff") format("woff"); font-weight: bold; font-style: normal; } @font-face { font-family: "Butler"; src: url("../fonts/Butler-ExtraBold.woff2") format("woff2"), url("../fonts/Butler-ExtraBold.woff") format("woff"); font-weight: 800; font-style: normal; } @font-face { font-family: "Butler"; src: url("../fonts/Butler-Black.woff2") format("woff2"), url("../fonts/Butler-Black.woff") format("woff"); font-weight: 900; font-style: normal; } /* -------------------------------------------------------------------------- */ /* westeinde */ /* -------------------------------------------------------------------------- */ @font-face { font-family: "Westeinde Caption"; src: url("../fonts/WesteindeCaption-Thin.woff2") format("woff2"), url("../fonts/WesteindeCaption-Thin.woff") format("woff"); font-weight: 100; font-style: normal; } @font-face { font-family: "Westeinde Caption"; src: url("../fonts/WesteindeCaption-ThinItalic.woff2") format("woff2"), url("../fonts/WesteindeCaption-ThinItalic.woff") format("woff"); font-weight: 100; font-style: italic; } @font-face { font-family: "Westeinde Caption"; src: url("../fonts/WesteindeCaption-Light.woff2") format("woff2"), url("../fonts/WesteindeCaption-Light.woff") format("woff"); font-weight: 300; font-style: normal; } @font-face { font-family: "Westeinde Caption"; src: url("../fonts/WesteindeCaption-LightItalic.woff2") format("woff2"), url("../fonts/WesteindeCaption-LightItalic.woff") format("woff"); font-weight: 300; font-style: italic; } @font-face { font-family: "Westeinde Caption"; src: url("../fonts/WesteindeCaption-Regular.woff2") format("woff2"), url("../fonts/WesteindeCaption-Regular.woff") format("woff"); font-weight: 500; font-style: normal; } @font-face { font-family: "Westeinde Caption"; src: url("../fonts/WesteindeCaption-Bold.woff2") format("woff2"), url("../fonts/WesteindeCaption-Bold.woff") format("woff"); font-weight: bold; font-style: normal; } @font-face { font-family: "Westeinde Caption"; src: url("../fonts/WesteindeCaption-BoldItalic.woff2") format("woff2"), url("../fonts/WesteindeCaption-BoldItalic.woff") format("woff"); font-weight: bold; font-style: italic; } @font-face { font-family: "Westeinde Caption"; src: url("../fonts/WesteindeCaption-Heavy.woff2") format("woff2"), url("../fonts/WesteindeCaption-Heavy.woff") format("woff"); font-weight: 900; font-style: normal; } @font-face { font-family: "Westeinde Caption"; src: url("../fonts/WesteindeCaption-HeavyItalic.woff2") format("woff2"), url("../fonts/WesteindeCaption-HeavyItalic.woff") format("woff"); font-weight: 900; font-style: italic; } /*------------------------------------*\ MISC \*------------------------------------*/ ::selection { background: #04A4CC; color: #FFF; text-shadow: none; } ::-webkit-selection { background: #04A4CC; color: #FFF; text-shadow: none; } ::-moz-selection { background: #04A4CC; color: #FFF; text-shadow: none; } /*------------------------------------*\ WORDPRESS CORE \*------------------------------------*/ .alignnone { margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; } .alignright { float: right; margin: 5px 0 20px 20px; } .alignleft { float: left; margin: 5px 20px 20px 0; } a img.alignright { float: right; margin: 5px 0 20px 20px; } a img.alignnone { margin: 5px 20px 20px 0; } a img.alignleft { float: left; margin: 5px 20px 20px 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption { background: #FFF; border: 1px solid #F0F0F0; max-width: 96%; padding: 5px 3px 10px; text-align: center; } .wp-caption.alignnone { margin: 5px 20px 20px 0; } .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; } .wp-caption .wp-caption-text, .gallery-caption { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; } /*------------------------------------*\ PRINT \*------------------------------------*/ @media print { * { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }