/*
Theme Name: Lunchmeat festival 2024
Version: 1.0.0
*/
/*we have this html structure for intro
*/
/*we have this html structure
*/
/*we use this numbers*/
/*19.1%, 30.9%...*/
/*z-index
0-intro video
1-intro headline
2-intro content
5-bottom image, video
8-bottom headline
7-image artist
10-footer
11-mobilemenu
12-menu
*/
html{
height: 100%;
padding: 0px;
margin: 0px;
}
body{
padding: 0px;
margin: 0px;
background: rgb(161,170,191);
}
.gradient{
/*background: linear-gradient(90deg, rgba(161,170,191,1) 0%, rgba(155,161,179,1) 9%, rgba(149,151,167,1) 17%, rgba(144,141,154,1) 27%, rgba(138,131,142,1) 38%, rgba(133,121,129,1) 49%, rgba(127,112,117,1) 59%, rgba(122,102,104,1) 70%, rgba(116,92,91,1) 96%, rgba(144,154,175,1) 100%) !important;*/
/*background: linear-gradient(90deg, rgba(170,180,200,1) 0%, rgba(116,87,85,1) 98%, rgba(144,154,174,1) 100%); */
background: linear-gradient(90deg, rgba(168,180,201,1) 0%, rgba(149,146,160,1) 46%, rgba(123,100,101,1) 69%, rgba(111,81,80,1) 81%, rgba(105,76,72,1) 95%, rgba(141,152,172,1) 100%);
}
/*typo------------------------------------------*/
/*------------------------------------------*/
body{
font-family: 'abcwalterneue',serif;
color: black;
font-size: 14px;
line-height: 16px;
/*most simple global solution, tune for big or small ones*/
letter-spacing: -0.03em;
}
p {
font-size: 14px;
line-height: 16px;
}
@media screen and (max-width: 1000px){
body, footer{
font-size: 12px;
line-height: 13px;
}
}
h1{
font-size: 23px;
line-height: 24px;
font-weight: 800;
}
a{
color: black;
text-decoration: none;
}
a:hover{
color: white;
}
a[href=""] {
opacity: 0.1;
}
.big-type p{
font-size: 23px;
font-weight: 800;
line-height: 23px;
}
@media screen and (max-width: 1000px) {
.big-type p{font-size: 21px;font-weight: 800;line-height: 21px;}
}
/*header-------------------------------------*/
.festival-head-row{
font-weight: 800;
display: flex;
padding-top: 20px;
box-sizing: border-box;
position: relative;
z-index: 12;
}
.festival-head-row p{
margin: 0px;
}
.festival-head-flex-1 {
width: 19.1%;
padding-left: 20px;
box-sizing: border-box;
}
.festival-head-flex-2{
width: 61.8%;
}
.festival-head-flex-3{
width: 19.1%;
text-align: right;
padding-right: 20px;
box-sizing: border-box;
}
.festival-head-row .getticket{
padding: 4px 10px;
background-color: white;
margin-right: 30px;
}
header .getticket a:hover{
color: rgb(161,170,191);
}
/*-----------------------------------------*/
/*---mobile header-------------------------*/
header.mobile{
/*font-size: 12px;*/
font-weight: 800;
line-height: 13px;
max-width: 100%;
}
header.mobile .getticket{
padding: 4px 18px;
background-color: white;
margin: 20px 0px;
}
header.mobile .logo img{
max-width: 80vw;
}
.festival-head-row-mobile{
display: flex;
/*margin-top: 10px;*/
box-sizing: border-box;
position: relative;
z-index: 11;
justify-content: space-between;
padding: 10px;
}
.festival-head-row-mobile p{
margin: 0px;
}
.festival-head-row-2-mobile{
display: flex;
flex-direction: column;
align-items: center;
}
/*-------------------------------------------------*/
/*override styles for index variant*/
.festival-head-flex-1-fixed {
width: 19.1%;
padding-left: 20px;
box-sizing: border-box;
position: fixed;
}
.festival-head-flex-2-fixed{
width: 61.8%;
margin-left: 19.1%;
}
.festival-head-flex-3-fixed{
width: 19.1%;
text-align: right;
padding-right: 20px;
box-sizing: border-box;
position: fixed;
margin-left: 80.9%;
}
/*--------------------------------------------------*/
.mobile-menu{
display: flex !important;
flex-direction: column;
justify-content: space-between;
z-index: 11;
background-color: #858FA3;
position: fixed;
height: 100vh;
width: 100vw;
top: 100vh;
left: 0vw;
border-radius: 20px 20px 0 0;
}
.mobile-menu .getticket{
margin: 20px auto !important;
}
.mobile-menu .social{
padding: 10px;
max-width: 200px;
}
.mobile-menu nav{
font-size: 35px;
line-height: 35px;
padding: 0px 10px;
}
.mobile-menu .social span{
margin-right: 10px; margin-bottom: 0px;
display: inline-block;
}
.btn-open, .btn-close{cursor: pointer;}
/*navigation------------------------------------------*/
/*------------------------------------------*/
nav{
font-weight: 800;
/*font-size: 14px;*/
line-height: 14px;
}
nav ul{
padding: 0px;
margin: 0px;
}
nav ul li{
display: block;
}
.current_page_item a{
color: white !important;
}
/*footer------------------------------------------*/
/*------------------------------------------*/
footer{
position: absolute;
bottom: 0px;
width: 100%;
font-weight: 800;
margin-bottom: 20px;
}
.footer-social{
margin-left: 20px;
max-width: 280px;
}
.footer-social span{
margin-right: 10px; margin-bottom: 5px;
display: inline-block;
}
.festival-footer-row{
display: flex;
justify-content: space-between; /* Aligns items with space between groups */
align-items: end;
width: 100%;
padding: 15px 20px 0px 20px;
box-sizing: border-box;
}
.festival-footer-row p{
margin: 0px;
}
.festival-footer-row .getticket{
font-size: 65px;
line-height: 55px;
letter-spacing: -1.95px;
}
.festival-footer-row .newsletter{
padding-left: 180px;
}
/*mobile footer------------------------------*/
/*------------------------------------------*/
footer .mobile{
font-size: 12px;
font-weight: 800;
line-height: 13px;
padding: 10px;
}
.footer-social-mobile{
margin-left: 0px;
max-width: 280px;
margin-top: 10px;
}
.footer-social-mobile span{
margin-right: 10px; margin-bottom: 0px;
display: inline-block;
}
footer .mobile .getticket{
margin-top: 10px;
font-size: 40px;
line-height: 41px;
text-align: center;
}
@media screen and (max-width: 1000px) {
footer{
margin-bottom: 0px;
}
}
/*footer fixed override---------------------*/
/*------------------------------------------*/
.footer-fixed{
position: fixed;
z-index: 10;
bottom: 0px;
width: 100%;
color: white;
mix-blend-mode:exclusion;
}
.footer-fixed a{
color: white;
}
/*------------------------------------------*/
/*custom body parts*/
/*------------------------------------------*/
#content{
display: block;
/*display: flex;
flex-direction: column;
justify-content: space-between;*/
z-index: 2;
position: relative;
min-height: 100vh;
border-radius: 20px 20px 0 0;
/*background: linear-gradient(90deg, rgba(161,170,191,1) 0%, rgba(155,161,179,1) 9%, rgba(149,151,167,1) 17%, rgba(144,141,154,1) 27%, rgba(138,131,142,1) 38%, rgba(133,121,129,1) 49%, rgba(127,112,117,1) 59%, rgba(122,102,104,1) 70%, rgba(116,92,91,1) 96%, rgba(144,154,175,1) 100%);*/
/*background: linear-gradient(90deg, rgba(170,180,200,1) 0%, rgba(116,87,85,1) 98%, rgba(144,154,174,1) 100%); */
background: linear-gradient(90deg, rgba(168,180,201,1) 0%, rgba(149,146,160,1) 46%, rgba(123,100,101,1) 69%, rgba(111,81,80,1) 81%, rgba(105,76,72,1) 95%, rgba(141,152,172,1) 100%);
}
.column-309{
width: 30.9%;
margin-left: 19.1%;
padding-right: 30px;
box-sizing: border-box;
}
.column-45{
width: 45%;
margin-left: 19.1%;
box-sizing: border-box;
}
.column-30{
width: 30%;
margin-left: 19.1%;
box-sizing: border-box;
}
.column-50{
width: 50%;
margin-left: 19.1%;
}
.column-618-full{
width: 61.8%;
margin-left: 19.1%;
}
.column-618-full-tickets{
width: 61.8%;
margin-left: 19.1%;
}
.column-program-dyn{
width: 61.8%;
margin-left: 19.1%;
}
.column-sym-dyn{
width: 50%;
margin-left: 19.1%;
}
@media screen and (max-width: 1000px) {
.column-program-dyn{
width: auto;
margin: 0px 10px;
}
.column-sym-dyn{
width: auto;
margin: 0px 10px;
}
}
@media screen and (max-width: 1000px) {
.column-618-full-tickets{
width: 100%;
margin: 0px auto;
padding: 0px 8px;
box-sizing: border-box;
}
}
.column-618-full-padding{
width: 61.8%;
margin-left: 19.1%;
}
/*initialy for symposium*/
.column-618-full-padding p, .column-618-full-padding h1{
padding: 0px 8px;
}
.column-500-right-fixed{
position: fixed;
width: 50%;
margin-left: 50%;
/*top: -136px;
height: calc(100% + 136px);*/
top: 0px;
height: 100%;
overflow: hidden;
}
.column-500-right-fixed img{
width: 100%;
height: 100%;
object-fit: cover;
}
.column-mobile-full{
margin: 0px 10px;
}
.column-mobile-full p{
max-width: 700px;
margin: inherit auto;
}
.column-mobile-full-img{
padding: 0px;
line-height: 0px;
width: 100%;
height: auto;
}
.column-mobile-full-img img{
width: 100%;
height: auto;
}
/*---------------------------------------------------------*/
/*symposium*/
.p-highlighted {
background-color: #909AAD;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
/*---------------------------------------------------------*/
/*symposium+program*/
/*---------------------------------------------------------*/
/*second navigation*/
.filterDiv {display: none;}
.show {display: block;}
nav.second{
font-size: 23px;
font-weight: 800;
margin-top: 50px;
margin-bottom: 30px;
}
nav.second .button{
display: inline-block;
width: 33.33%;
border-left: 1px solid black;
border-top: 1px solid black;
box-sizing: border-box;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 8px;
}
.br{border-right: 1px solid black;}
.bd{border-bottom: 1px solid black;}
.brd{border-right: 1px solid black;border-bottom: 1px solid black;}
nav.second .button.active{
background-color: #909AAD;
}
@media screen and (max-width: 600px) {
nav.second .button{
font-size: /*20px;*/18px;
display: inline-block;
width: 50%;
border-left: 1px solid black;
border-top: 1px solid black;
}
nav.second a:last-child > .button{
border-bottom: 1px solid black;
}
.br{border-right: 0px}
.bd{border-bottom: 0px}
.brd{border-right: 0px;border-bottom: 0px}
.m-br{border-right: 1px solid black;}
.m-bd{border-bottom: 1px solid black;}
}
/*--------------------------------------------------------*/
/*newsletter*/
.newsletter-row {
display: flex;
flex-direction: row;
margin-top: 150px;
}
.newsletter-row button{
font-family: 'abcwalterneue' !important;
font-weight: 500;
}
.newsletter-row .flex-item {
width: 100%; /* Takes up the rest of the horizontal space in the container */
display: flex;
justify-content: center; /* Centers the content within this div */
}
@media screen and (max-width: 1000px) {
.newsletter-row {
margin-top: 60px;
padding: 10px;
max-width: 100%;
}
}
/*--------------------------------------------------------*/
/*timetable*/
/*timetable-------------------------------------*/
#gridContainer {
box-sizing: border-box;
margin-top: 30px;
font-size: 18px;
line-height: 1.2;
font-weight: 400;
display: grid;
grid-auto-flow: row;
position: relative;
/*simple trick how to avoid double borders*/
/*https://phuoc.ng/collection/css-layout/grid-without-double-borders/*/
border-right:1px solid black;
border-bottom:1px solid black;
/*grid-gap: 1px;*/
}
#gridContainer>div{
justify-content:left;
align-items:start;
display: flex;
padding: 10px;
/*outline: 1px solid black;*/
border-left:1px solid black;
border-top:1px solid black;
}
.grid-item {
position: absolute;
width: 100%;
height: 100%;
background-color:#909AAD;
box-sizing:border-box;
z-index: 1;
}
.venue{
background-color: #909AAD !important;
align-items:center !important;
justify-content: center !important;
font-weight: 700;
}
@media screen and (max-width: 800px) {
#gridContainer{
font-size: /*13*/15px;
}
#gridContainer>div{
padding: 15px;
}
}
@media screen and (max-width: 400px) {
#gridContainer{
font-size: 12px;
}
#gridContainer>div{
padding: 15px;
}
}
sup{
text-transform: uppercase;
vertical-align: super;
font-size: smaller;
}
/*--------------------------------------------------------*/
/*artists*/
.artist{display: block;}
.artist-title{
font-size: 38px;
line-height: 39px;
font-weight: 700;
background-color: white;
padding: 5px 8px;
display: inline-block;
}
.artist-title-m{
font-size: 21px;
line-height: 22px;
padding: 3px 5px;
margin-top:4px;
}
.artist-title-post{
font-size: 23px;
line-height: 24px;
padding: 3px 5px;
margin-top:4px;
}
.artist-intro{
display: inline-block;
text-transform: uppercase;
font-size: 23px;
line-height: 24px;
margin-right: 10px;
position: relative;
bottom: 19px;
}
.artist-intro-m{
font-size: 14px;
line-height: 16px;
margin-right: 5px;
bottom: 0px;
vertical-align: top;
}
.artist-intro-post{
font-size: 14px;
line-height: 16px;
bottom: 0px;
margin-right: 5px;
vertical-align: top;
}
.artist-project{
display: inline-block;
font-size: 38px;
line-height: 39px;
margin-right: 20px;
}
.artist-project-m{
font-size: 21px;
line-height: 22px;
}
.artist-project-post{
font-size: 23px;
line-height: 24px;
}
.artist-day{
display: inline-block;
font-size: 10px;
line-height: 11px;
font-weight: 800;
background-color: #7A8599;
text-transform: capitalize;
padding: 3px 5px;
margin-right: 15px;
}
.artist-day-m{
margin-top: 4px;
}
.artist-day-post{
margin-top: 15px;
}
a:hover .artist-title{background-color: black;}
a:hover img{filter: brightness(0) invert(1);}
.x-ico{
position: relative;
top: 0px;
margin-top: 4px;
}
.x-ico:nth-of-type(1){margin-right: 5px;}
.x-ico:nth-of-type(2){margin-right: 110px;}
.x-ico-m{
width: 50px;
}
.x-wrap:nth-of-type(1)::before {
content: "\A";
white-space: pre;
}
/*--------------------------------------------------------*/
/*atomic*/
.mt-15{margin-top: 15px;}
.mt-25{margin-top: 25px;}
.mt-30{margin-top: 30px;}
.mt-60{margin-top: 60px;}
.mt-65{margin-top: 65px;}
.mt-70{margin-top: 70px;}
.mt-77{margin-top: 77px;}
.mt-80{margin-top: 80px;}
.mt-100{margin-top: 100px;}
.mt-170{margin-top: 170px;}
.mt--107{margin-top: -107px;}
.mt--390{margin-top: -390px;}
.mb-340{margin-bottom: 340px;}
.mb-170{margin-bottom: 170px;}
.pb-60{padding-bottom: 60px;}
.pb-120{padding-bottom: 120px;}
.pb-180{padding-bottom: 180px;}
.pb-170{padding-bottom: 170px;}
.pb-340{padding-bottom: 340px;}
.mh100{min-height: 100vh;}
.z-index-7{z-index: 7;}
.invert{
color: white;
mix-blend-mode:exclusion;
}
/*responzivity----------------------------------------------*/
@media screen and (max-width: 1000px) {
.desktop{display: none;}
.mobile{display: block;}
}
@media screen and (min-width: 1000px) {
.desktop{display: block;}
.mobile{display: none;}
}
/*theme--------------------------*/
/*------------------------------------------*/
.theme-images{
display: flex;
justify-content: center; /* Horizontally centers the child elements */
align-items: center; /* Vertically centers the child elements if needed */
height: 100vh; /*here is defined size*/
}
@media screen and (max-width: 1000px) {
.theme-images{
height: 100vh; /*here is defined size*/
}
}
.theme-split {
height: 100%;
width: 50%;
position: fixed;
top: 0; bottom: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
overflow: hidden;
}
.left-half {left: 0;}
.right-half {right: 0;}
.theme-video{width: 100%;height: 100%;object-fit: cover;}
.theme-title{
z-index: 1;
color: black;
background-color: white;
padding: 4px 8px;
font-size: 15px;
font-weight: 800;
mix-blend-mode:exclusion;
position: fixed;
text-align: center;
}
@media screen and (max-width: 1000px) {
.theme-title{
font-size: 12px;
line-height: 13px;
}
}
/*------------------------------------------*/
/*theme-bottom------------------------------------*/
.theme-images-bottom{
display: flex;
justify-content: center; /* Horizontally centers the child elements */
align-items: center; /* Vertically centers the child elements if needed */
height: 100vh; /*here is defined size*/
margin-top: 800px;
}
.theme-title-bottom{
position: absolute;
z-index: 8;
color: black;
background-color: white;
padding: 4px 8px;
font-size: 15px;
font-weight: 800;
mix-blend-mode:exclusion;
}
.theme-split-bottom {
height: 100%;
width: 50%;
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 5;
overflow: hidden;
}
.left-half-bottom {left: 0;border-radius: 20px 0px 0 0;}
.right-half-bottom {right: 0;border-radius: 0px 20px 0 0;}
.theme-video-bottom{width: 100%;height: 100%;object-fit: cover;}
/*---------------------------------------------------------------*/
/*partners*/
.logos {
width: 100%;
}
.logos img{
max-width: 130px;
max-height: 55px;
margin-top: 30px;
margin-right: 30px;
margin-bottom: 30px;
vertical-align: middle;
}
/*-------------------------------------*/
.bckcolortext{
background-color: white;
padding: 5px;
line-height: 2;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}