Files
dis-2019/css/base.css
2019-07-03 23:20:48 +02:00

2385 lines
88 KiB
CSS

/* ========================================================================== */
/* 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 14px/1.4 "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 .events-link {
display: none; }
@media (min-width: 769px) {
.wrapper .header .events-link {
display: block; } }
.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 {
margin: 0 2rem 0 0; }
.wrapper .header .social-link.hidden {
display: none !important; }
@media (min-width: 769px) {
.wrapper .header .social-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: wrap;
height: 100%;
justify-content: space-evenly; } }
.wrapper .header #sidebar .sidebar-wrapper li {
display: block;
padding-top: 2rem; }
@media (min-width: 769px) {
.wrapper .header #sidebar .sidebar-wrapper li {
padding: 3rem 0; } }
.wrapper .header #sidebar .sidebar-wrapper li a {
font: 900 4rem "Westeinde Caption";
color: #000;
-webkit-text-stroke: #fff 1px; }
.wrapper .header #sidebar .sidebar-wrapper li a:hover {
color: #fff; }
@media (min-width: 769px) {
.wrapper .header #sidebar .sidebar-wrapper 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.4rem; } }
.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.4rem; } }
.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 {
overflow-y: hidden; } }
/* -------------------------------------------------------------------------- */
/* ARCHIVE AND HOMEPAGE */
/* -------------------------------------------------------------------------- */
.archive .wrapper,
.home .wrapper {
/* ----------------------------- header on home ----------------------------- */ }
@media (min-width: 769px) {
.archive .wrapper,
.home .wrapper {
overflow-y: hidden;
width: -moz-max-content;
width: max-content;
width: -moz-fit-content;
width: fit-content; } }
@media (min-width: 769px) {
.archive .wrapper .header .header-scroll,
.home .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 {
left: 10rem; }
.archive .wrapper .header .header-scroll.header-scroll-left button,
.home .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 {
right: 10rem; }
.archive .wrapper .header .header-scroll.header-scroll-right button,
.home .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 {
height: 100vh;
width: 10rem; }
@media (min-width: 769px) {
.archive main,
.home 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 {
/* --------------------------- home article mobile/default -------------------------- */
/* ------------------------ home article desktop big ------------------------ */
/* ------------------------------------ - ----------------------------------- */
/* ----------------------- articles desktop small ----------------------- */ }
@media (min-width: 769px) {
.archive main section,
.home 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 {
height: 100vh; }
.archive main section article > a,
.home 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 {
height: 50vh;
width: 100vw;
object-fit: cover; }
.archive main section article h2,
.home 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 {
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 {
font-size: 2.5rem !important; } }
@media (min-width: 769px) {
.archive main section article h2 a,
.home main section article h2 a {
font-size: 6rem; } }
@media (min-width: 1279px) {
.archive main section article h2 a,
.home 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 {
font-size: 11rem; } }
.archive main section article .metadata,
.home 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 {
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 {
display: none; }
@media (min-width: 769px) {
.archive main section .home-wrapper-big,
.home 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 {
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 {
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 {
object-fit: cover;
width: 100%;
height: 100%; }
.archive main section .home-wrapper-big article h2,
.home main section .home-wrapper-big article h2 {
height: unset;
position: absolute;
top: 6rem;
padding: 4rem;
width: calc(100vw - 20rem); }
.archive main section .home-wrapper-big article .metadata,
.home 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 {
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 {
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 {
height: 11.5rem; }
.archive main section .home-wrapper-big article .metadata > div,
.home 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 {
display: block;
padding: 0; }
.archive main section .home-wrapper-big article .metadata .postedon,
.home 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 {
color: #000 !important;
display: none; }
.archive main section .home-wrapper-big article .metadata .alcim,
.home 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 {
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 {
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 {
color: transparent !important; }
.archive main section .home-wrapper-big article .metadata .filler,
.home 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 {
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 {
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 {
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 {
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 {
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 {
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 {
float: right; }
.archive main section .home-wrapper-big.home-wrapper-2 article,
.home 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 {
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 {
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 {
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 {
order: -1; }
.archive main section .home-wrapper-big.home-wrapper-2 article .thumbnailwrapper,
.home 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 {
left: -5rem;
position: relative; } }
@media (min-width: 769px) {
.archive main section .home-wrapper-small,
.home 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-small),
.home main section .home-wrapper-small.home-wrapper-s1:not(.home-wrapper-small) {
margin-left: 5rem !important; }
.archive main section .home-wrapper-small.home-wrapper-s1.home-wrapper-small,
.home main section .home-wrapper-small.home-wrapper-s1.home-wrapper-small {
margin-left: 10rem !important; }
.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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
font-size: 1.5rem;
-webkit-text-stroke: #000 1px;
color: transparent; } }
@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 {
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 {
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 {
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 {
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 {
width: calc(100% - 10rem); } }
@media (min-width: 769px) {
.archive main section .home-wrapper-small .archivetitle,
.home main section .home-wrapper-small .archivetitle {
margin: 0;
width: 100%;
position: relative;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
padding: 2rem;
border-right: #000 1px solid; }
.archive main section .home-wrapper-small .archivetitle::after,
.home 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 {
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 {
font: bold 3rem "Westeinde Caption";
color: #000;
margin: 0; } }
@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 {
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 {
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 {
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 {
font-size: 11rem; } }
@media (min-width: 769px) {
.archive main section .home-wrapper-small .archivetitle.tag,
.home 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 {
text-transform: uppercase; }
.archive main section .home-wrapper-small .archivetitle > object,
.home 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 {
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 {
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 {
font-size: 1.2rem; } }
/* -------------------------------------------------------------------------- */
/* 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 {
/* ---------------------------- single on mobile ---------------------------- */
/* -------------------------------- lightbox -------------------------------- */ }
@media (min-width: 769px) {
.single .wrapper {
height: unset;
width: 100%; }
.single .wrapper .header .header-1,
.single .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 {
display: none; } }
.single article {
/* ---------------------------- single on desktop --------------------------- */
/* ----------------------------- single content ----------------------------- */ }
.single article .thumbnailwrapper {
padding: 0; }
.single article .thumbnailwrapper img.attachment-post-thumbnail {
height: 75vh;
width: 100vw;
object-fit: cover;
padding: 0; }
.single article .titlewrapper {
position: absolute;
top: 0;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-content: flex-start;
padding: 0; }
.single 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 {
font: 900 2rem "Westeinde Caption";
color: #fff;
-webkit-text-stroke: #000 1px; } }
.single article .titlewrapper .metadata .time-cat {
z-index: 10; }
.single article .titlewrapper h1.single-title {
margin: 0;
font: 800 3rem "Butler";
color: #000;
min-height: 25vh;
padding: 2rem;
background-color: #fff; }
@media (min-width: 769px) {
.single article .titlewrapper h1.single-title {
font-size: 5rem; } }
@media (min-width: 769px) {
.single article {
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 {
position: fixed;
top: 0;
left: 0;
z-index: -1;
bottom: 0;
width: 100%; }
.single article .thumbnailwrapper img.attachment-post-thumbnail {
object-fit: cover;
padding: 0;
width: 100%;
height: 100%; }
.single article .titlewrapper {
position: relative;
justify-content: flex-start;
height: unset; }
.single article .titlewrapper .metadata {
top: -5rem;
width: 100%;
padding-left: 0; }
.single 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 {
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 {
background-color: transparent;
min-height: unset;
top: -5rem;
position: relative; } }
.single article .single-content {
position: relative;
padding: 2rem; }
@media (min-width: 769px) {
.single article .single-content {
top: -5rem; } }
.single article .single-content hr {
height: 1px;
background-color: #ff5f5f;
padding: 0;
margin: 0 auto;
border: none;
width: 20%; }
.single article .single-content hr.content-wrap {
width: 40%; }
.single article .single-content hr.content-begin {
margin-top: calc(25vh + 2rem); }
@media (min-width: 769px) {
.single article .single-content hr.content-begin {
margin-top: 0; } }
.single article .single-content strong {
font-weight: 900; }
.single article .single-content blockquote {
font: bold 1.8rem "Butler";
color: #000; }
.single article .single-content blockquote p {
background: #ff5f5f;
display: inline;
padding: 2px 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 .wp-block-image {
padding: 2rem 0; }
@media (min-width: 769px) {
.single article .single-content .wp-block-image {
padding: 2rem 5rem; } }
.single article .single-content .wp-block-image figure {
position: relative; }
.single article .single-content .wp-block-image figure figcaption {
bottom: 0 !important; }
.single article .single-content .wp-block-image figure 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-image figcaption,
.single article .single-content .wp-block-gallery .blocks-gallery-image figcaption,
.single 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: #fff;
-webkit-text-stroke-width: 1px;
line-height: 1;
text-align: left;
overflow: unset;
display: flex;
flex-direction: column;
justify-content: center;
z-index: 1; }
.single article .single-content .wp-block-gallery {
padding: 2rem 0; }
.single article .single-content .wp-block-gallery li {
margin-right: 0; }
.single 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 {
right: 0;
top: 0; }
.single 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 #cboxOverlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #000;
z-index: 10; }
.single #colorbox {
z-index: 12; }
.single #colorbox:focus {
border: none;
outline: none; }
.single #colorbox #cboxContent #cboxTitle {
padding: 1rem;
font: 900 1rem "Westeinde Caption";
color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke: #fff 1px;
color: transparent;
width: 100%;
text-align: center; }
.single #colorbox #cboxContent #cboxCurrent {
display: none !important; }
.single #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 {
background-image: url(../img/curvy_arrow.svg);
width: 2rem;
height: 4rem;
bottom: -5rem;
filter: invert(100);
z-index: 14; }
.single #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 {
right: 1rem; }
.single #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; }
/* -------------------------------------------------------------------------- */
/* 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 blockquote p {
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; }
.tag-be hr {
background-color: #fdff00 !important; }
.tag-be figcaption {
-webkit-text-stroke-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; }
@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 blockquote p {
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; }
.tag-do hr {
background-color: #3c00ff !important; }
.tag-do figcaption {
-webkit-text-stroke-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; }
@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 blockquote p {
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; }
.tag-think hr {
background-color: #00ffb8 !important; }
.tag-think figcaption {
-webkit-text-stroke-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; }
@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 blockquote p {
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; }
.tag-love hr {
background-color: #ff5f5f !important; }
.tag-love figcaption {
-webkit-text-stroke-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; }
@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 .metadata {
color: #fff !important;
-webkit-text-stroke: #fdff00 1px !important; } }
@media (min-width: 769px) {
.single .tag-be .metadata a {
color: #fff !important;
-webkit-text-stroke: #fdff00 1px !important; } }
@media (min-width: 769px) {
.single .tag-do .metadata {
color: #fff !important;
-webkit-text-stroke: #3c00ff 1px !important; } }
@media (min-width: 769px) {
.single .tag-do .metadata a {
color: #fff !important;
-webkit-text-stroke: #3c00ff 1px !important; } }
@media (min-width: 769px) {
.single .tag-think .metadata {
color: #fff !important;
-webkit-text-stroke: #00ffb8 1px !important; } }
@media (min-width: 769px) {
.single .tag-think .metadata a {
color: #fff !important;
-webkit-text-stroke: #00ffb8 1px !important; } }
@media (min-width: 769px) {
.single .tag-love .metadata {
color: #fff !important;
-webkit-text-stroke: #ff5f5f 1px !important; } }
@media (min-width: 769px) {
.single .tag-love .metadata a {
color: #fff !important;
-webkit-text-stroke: #ff5f5f 1px !important; } }
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; } }