/* START */
html, body { background-color:#e8f0f1; margin:0; height:100%; }
/* FONT */
/* LEGAL DISCLAIMER
*
* These Fonts are licensed only for use on these domains and their subdomains:
* literaturfestival.ch
*
* It is illegal to download or use them on other websites.
*
* While the @font-face statements below may be modified by the client, this
* disclaimer may not be removed.
*
* Optimo webfonts are protected by copyright law and provided under license. To modify, alter, translate, convert, decode or reverse engineer in any manner whatsoever, including converting the Font Software into a different format is strictly prohibited. The webfont files are not to be used for anything other than web font use.
*
* optimo.ch
*/
@font-face {
font-family: 'Plain';
src: url('font/Plain-Bold.eot');
src: url('font/Plain-Bold.eot?#iefix') format('embedded-opentype'),
url('font/Plain-Bold.woff2') format('woff2'),
url('font/Plain-Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Plain';
src: url('font/Plain-Bold-Italic.eot');
src: url('font/Plain-Bold-Italic.eot?#iefix') format('embedded-opentype'),
url('font/Plain-Bold-Italic.woff2') format('woff2'),
url('font/Plain-Bold-Italic.woff') format('woff');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: 'Plain';
src: url('font/Plain-Regular.eot');
src: url('font/Plain-Regular.eot?#iefix') format('embedded-opentype'),
url('font/Plain-Regular.woff2') format('woff2'),
url('font/Plain-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Plain';
src: url('font/Plain-Italic.eot');
src: url('font/Plain-Italic.eot?#iefix') format('embedded-opentype'),
url('font/Plain-Italic.woff2') format('woff2'),
url('font/Plain-Italic.woff') format('woff');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Plain';
src: url('font/Plain-Thin.eot');
src: url('font/Plain-Thin.eot?#iefix') format('embedded-opentype'),
url('font/Plain-Thin.woff2') format('woff2'),
url('font/Plain-Thin.woff') format('woff');
font-weight: 250;
font-style: normal;
}
@font-face {
font-family: 'Plain';
src: url('font/Plain-Thin-Italic.eot');
src: url('font/Plain-Thin-Italic.eot?#iefix') format('embedded-opentype'),
url('font/Plain-Thin-Italic.woff2') format('woff2'),
url('font/Plain-Thin-Italic.woff') format('woff');
font-weight: 250;
font-style: italic;
}
/* TEXT */
sup, sub { line-height:0px; }
buch { color:rgb(147,146,146,1); font-weight:700; }
h1 { font-family:'Plain'; font-weight:700; color:black; font-size:3.8em; line-height:1em; margin-top:0; margin-bottom:30px; }
h2 { font-family:'Plain'; font-weight:700; color:white; font-size:3.8em; line-height:1em; margin-top:0; margin-bottom:30px; }
h3 { font-family:'Plain'; font-weight:700; color:black; font-size:1.5em; line-height:1.4em; margin-top:0; margin-bottom:0; }
h4 { font-family:'Plain'; font-weight:700; color:black; font-size:3.8em; line-height:1em; margin-top:0; margin-bottom:0; }
h5 { font-family:'Plain'; font-weight:700; color:black; font-size:2.65em; line-height:1em; margin-top:0; margin-bottom:30px; }
#inhaltsbox h2 { color:black; margin-top:60px; margin-bottom:20px; border-top:4px solid black; padding-top:10px; }
#inhaltsbox h3 { margin-top:30px; }
#inhaltsbox h4 { color:rgb(147,146,146); margin-top:-20px; margin-bottom:20px; }
#kopfzeile h1 { font-size:2.5em; margin-bottom:17px; }
#kopfzeile h4 { font-family:'Plain'; font-weight:250; color:black; font-size:1em; line-height:1em; margin-top:31px; margin-bottom:5px; }
#kopfzeile h4 a:link { color:black; text-decoration:none; }
#kopfzeile h4 a:visited { color:black; text-decoration:none; }
#kopfzeile h4 a:hover { color:black; text-decoration:none; }
#kopfzeile h4 a:active { color:black; text-decoration:none; }
p { font-family:'Plain'; font-weight:250; color:black; font-size:1.5em; line-height:1.4em; margin-top:0; margin-bottom:0; }
p a:link { color:black; text-decoration:underline; }
p a:visited { color:black; text-decoration:underline; }
p a:hover { color:black; text-decoration:none; }
p a:active { color:black; text-decoration:none; }
.weiss { color:white; }
.weissschatten { color:white; text-shadow: 2px 2px 6px black; }
.lauftext { font-weight:250; font-size:0.395em; }
.klein { font-size:1em; }
.tellink a:link { color:black; text-decoration:none; }
.tellink a:visited { color:black; text-decoration:none; }
.tellink a:hover { color:black; text-decoration:underline; }
.tellink a:active { color:black; text-decoration:underline; }
.button { font-weight:700; color:white; margin-top:50px; margin-left:auto; margin-right:auto; width:222px; text-align:center; border:2px solid white; }
.button a:link { color:white; text-decoration:none; display:block; padding:15px; }
.button a:visited { color:white; text-decoration:none; display:block; padding:15px; }
.button a:hover { color:black; text-decoration:none; display:block; padding:15px; background:rgb(255,255,255,0.9); transition:background-color 0.5s ease; }
.button a:active { color:black; text-decoration:none; display:block; padding:15px; background:rgb(255,255,255,0.9); transition:background-color 0.5s ease; }
.button2 { font-weight:700; color:black; margin-top:-98px; margin-left:auto; margin-right:0; width:180px; text-align:center; border:2px solid black; }
.button2 a:link { color:black; text-decoration:none; display:block; padding:15px; }
.button2 a:visited { color:black; text-decoration:none; display:block; padding:15px; }
.button2 a:hover { color:black; text-decoration:none; display:block; padding:15px; background:rgb(255,255,255,0.9); transition:background-color 0.5s ease; }
.button2 a:active { color:black; text-decoration:none; display:block; padding:15px; background:rgb(255,255,255,0.9); transition:background-color 0.5s ease; }
.button3 { font-weight:700; color:black; margin-top:60px; margin-left:auto; margin-left:0; width:200px; text-align:center; border:2px solid black; }
.button3 a:link { color:black; text-decoration:none; display:block; padding:15px; }
.button3 a:visited { color:black; text-decoration:none; display:block; padding:15px; }
.button3 a:hover { color:black; text-decoration:none; display:block; padding:15px; background:rgb(255,255,255,0.9); transition:background-color 0.5s ease; }
.button3 a:active { color:black; text-decoration:none; display:block; padding:15px; background:rgb(255,255,255,0.9); transition:background-color 0.5s ease; }
.fotobutton { font-weight:700; color:black; margin-left:auto; margin-right:auto; width:100%; text-align:center; }
.fotobutton a:link { color:black; text-decoration:none; }
.fotobutton a:visited { color:black; text-decoration:none; }
.fotobutton a:hover { color:black; text-decoration:underline; }
.fotobutton a:active { color:black; text-decoration:underline; }
.buttonformular { font-family:'Plain'; font-size:1.5em; font-weight:700; color:black; margin-left:auto; margin-right:auto; width:100%; text-align:center; border:2px solid black; display:block; padding:15px; background:rgb(255,255,255,0.01); transition:background-color 0.5s ease; cursor: pointer; }
.buttonformular:focus { background:rgb(255,255,255,0.01); transition:background-color 0.5s ease; }
.buttonformular:hover { background:rgb(255,255,255,0.9); transition:background-color 0.5s ease; }
.buttonformular:active { background:rgb(255,255,255,0.9); transition:background-color 0.5s ease; }
#footer p { font-family:'Plain'; font-weight:250; font-size:1em; line-height:1.4em; margin-top:0; margin-bottom:0; }
#footer p a:link { color:white; text-decoration:none; }
#footer p a:visited { color:white; text-decoration:none; }
#footer p a:hover { color:#e5f5f5; text-decoration:underline; }
#footer p a:active { color:#e5f5f5; text-decoration:underline; }
#footer1 p a:hover { color:#e5f5f5; text-decoration:none; }
#footer1 p a:active { color:#e5f5f5; text-decoration:none; }
#navigation p { font-family:'Plain'; font-weight:700; font-size:1.8em; line-height:1em; margin-top:0; margin-bottom:0; }
#navigation p a:link { color:rgb(147,146,146,0.5); mix-blend-mode:multiply; text-decoration:none; }
#navigation p a:visited { color:rgb(147,146,146,0.5); mix-blend-mode:multiply; text-decoration:none; }
#navigation p a:hover { color:rgb(147,146,146,1); mix-blend-mode:multiply; text-decoration:none; transition:color 0.5s ease; }
#navigation p a:active { color:rgb(147,146,146,1); mix-blend-mode:multiply; text-decoration:none; transition:color 0.5s ease; }
#navigation p.navtitel a:link { color:black; text-decoration:none; }
#navigation p.navtitel a:visited { color:black; text-decoration:none; }
#navigation p.navtitel a:hover { color:rgb(147,146,146); mix-blend-mode:multiply; text-decoration:none; transition:color 0.5s ease; }
#navigation p.navtitel a:active { color:rgb(147,146,146); mix-blend-mode:multiply; text-decoration:none; transition:color 0.5s ease; }
#navigation p.navsprache { font-family:'Plain'; font-weight:700; font-size:1em; line-height:1em; margin-top:0; margin-bottom:0; }
#navigation p.navsprache a:link { color:black; text-decoration:none; }
#navigation p.navsprache a:visited { color:black; text-decoration:none; }
#navigation p.navsprache a:hover { color:rgb(147,146,146); mix-blend-mode:multiply; text-decoration:none; transition:color 0.5s ease; }
#navigation p.navsprache a:active { color:rgb(147,146,146); mix-blend-mode:multiply; text-decoration:none; transition:color 0.5s ease; }
#navigation p a#navon { color:rgb(147,146,146,1); }
strong { font-weight:700; }
#inhaltsbox ul { font-family:'Plain'; font-weight:250; color:black; font-size:1.5em; line-height:1.4em; margin-top:0; margin-bottom:0;
margin-top:0px; margin-left:1.2em; list-style-type:square; list-style-position:outside; padding-left:0; text-indent:0; margin-bottom:0px; }
/* DIV */
#inhalt { width:100%; height:100%; position:absolute; }
#kopfzeile { position:fixed; z-index:200; width:100%; display:flex; justify-content:center; background:#e5f5f5; border-bottom:1px solid black; }
#kopfbild { position:fixed; z-index:100; width:100%; height:70%; }
#inhaltabstand { position:relative; top:110px; z-index:110; height:70%; }
#inhaltsbox { position:relative; z-index:111; display:flex; justify-content:center; flex-flow:column; align-items:center; padding-top:40px; padding-bottom:80px; background:#e5f5f5; }
#autoreninfobox { padding:1.5% 1.5% 1.5% 2%; margin-top:30px; margin-bottom:40px; background:white; width:96.5%; }
#autoreninfobox p { font-size:1.1em; }
.autorenfoto { margin-top:55px; margin-bottom:60px; display: block; margin-left:auto; margin-right:auto; }
.portraitfoto { margin-top:55px; margin-bottom:40px; display: block; margin-left:auto; margin-right:auto; }
#startbild { position:fixed; z-index:100; width:100%; height:100%; background:url("bilder/literaturfestival-leukerbad_cover_start_bg.webp"); background-size:cover; background-position:top center; }
.startlogo { height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); mix-blend-mode:multiply; opacity:0.85; }
.startlogonegativ { height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
#startabstand { position:relative; z-index:110; height:100%; }
#starttitel { position:relative; z-index:111; display:flex; justify-content:center; text-align:center; padding-top:40px; padding-bottom:40px; background:#e5f5f5; }
#startbox { position:relative; z-index:112; width:100%; height:600px; display:flex; align-items:center; justify-content:center; text-align:center; margin-top:0px; border-bottom:4px solid #e5f5f5; }
#startgalerie { position:relative; z-index:115; padding-top:60px; padding-bottom:60px; background:#e5f5f5; }
#schwerpunktegalerie { position:relative; z-index:115; padding-top:0; padding-bottom:0; background:#e5f5f5; }
#fotobuttonbox { position:relative; z-index:116; width:100%; display:flex; align-items:center; justify-content:center; padding-bottom:60px; background:#e5f5f5; }
#impressionen { float:left; margin-right:29px; margin-bottom:29px; }
#impressionen:last-child { margin-bottom:0; }
.impressionenfoto { width:439px; height:280px; border:0px; }
#rueblickprogrammheft { float:left; margin-right:29px; margin-bottom:29px; }
#rueblickprogrammheft:last-child { margin-bottom:0; }
.rueblickprogrammheftcover { width:205px; height:280px; border:0px; }
#navigation { position:fixed; left:0; top:0; height:auto; width:100%; max-height:0; overflow:hidden; transition:all 0.8s; background:#e5f5f5; display:flex; align-items:center; justify-content:center; z-index:200; }
#navigation1 { clear:both; width:66%; margin-top:62px; margin-bottom:60px; }
#navigation2 { float:left; width:33%; margin-bottom:60px; }
#navigation3 { float:left; width:33%; margin-bottom:60px; }
#navigation4 { float:left; width:33%; margin-bottom:120px; }
#navigation5 { float:left; width:33%; margin-bottom:60px; }
#navigation6 { float:left; width:33%; margin-bottom:155px; }
#navigation7 { float:left; width:33%; margin-bottom:155px; }
#navigation8 { float:left; width:14%; }
#navigation9 { float:left; width:19%; }
#navigation10 { float:left; width:33%; font-size: 1.5em; margin-top:-12px; }
#navigation10 a:link { color:black; text-decoration:underline; margin-right:25px; }
#navigation10 a:visited { color:black; text-decoration:underline; }
#navigation10 a:hover { color:rgb(147,146,146); mix-blend-mode:multiply; text-decoration:none; transition:color 0.5s ease; }
#navigation10 a:active { color:rgb(147,146,146); mix-blend-mode:multiply; text-decoration:none; transition:color 0.5s ease; background-color:inherit; }
#footer { position:relative; z-index:117; width:100%; height:auto; padding:40px 0 0 0; background:black; display:flex; align-items:center; justify-content:center; }
#footer1 { float:left; width:18%; margin-right:2%; }
#footer2 { float:left; width:16%; margin-right:2%; }
#footer3 { float:left; width:14%; margin-right:2%; }
#footer4 { float:left; width:13%; margin-right:0%; }
#footer5 { float:left; width:16%; margin-right:2%; margin-top:-30px; }
.footerlogo { width:100%; filter: invert(100%); -webkit-filter:invert(100%); max-width:250px; margin-top:8px; }
#footer6 { float:left; width:15%; margin-bottom:40px; }
#footer7 { float:left; width:30%; margin-top:-71px; font-size: 1.5em; }
#footer7 a:link { color:white; text-decoration:underline; margin-right:25px; }
#footer7 a:visited { color:white; text-decoration:underline; }
#footer7 a:hover { color:#e5f5f5; text-decoration:none; }
#footer7 a:active { color:#e5f5f5; text-decoration:none; background-color:inherit; }
#previewnichtaktiv { display:none; }
#preview { position:relative; z-index:118; width:100%; height:auto; padding:10px 0 10px 0; background:#009e9d; text-align:center; }
#previewstartnichtaktiv { display:none; }
#previewstart { position:relative; left:0; bottom:0; z-index:118; width:100%; height:auto; padding:10px 0 10px 0; background:#009e9d; text-align:center; }
.innenbreite1 { width:936px; }
.innenbreite2 { max-width:1400px; }
.innenbreite3 { width:90%; padding-left:5%; padding-right:5%; display:flex; justify-content:center; flex-wrap:wrap; align-items:center; }
#clear { clear:both; }
.back-to-top-img { width:47px; height:26px; }
.back-to-top { position:fixed; bottom:37px; right:37px; text-decoration:none; background-color:rgb(0,0,0,0.2); padding:22px 12px 19px 12px; display:none; z-index:999; border-radius:50%; }
.back-to-top:hover { background-color:rgb(0,0,0,1); transition:background-color 0.5s ease; }
/* Hamburger */
#navigationburger { position:fixed; top:47px; right:50px; }
.hamburg { display:block; width:45px; height:35px; position:relative; margin-left:auto; margin-right:auto; }
.line { position:absolute; left:0; height:3px; width:45px; background:#000; display: block; transition:0.4s; transform-origin:center; cursor:pointer; }
.line:nth-child(1) { top: 12px; }
.line:nth-child(2) { top: 24px; }
.line:nth-child(3) { top: 36px; }
.hamburg.checked .line:nth-child(1){ transform: translateY(12px) rotate(-45deg); }
.hamburg.checked .line:nth-child(2){ opacity:0; }
.hamburg.checked .line:nth-child(3){ transform: translateY(-12px) rotate(45deg); }
.hamburg.checked #navigation{ max-height:1080px; }
#navigationburger2 { position:fixed; top:47px; right:50px; z-index:201; }
.hamburg2 { display:block; width:45px; height:35px; position:relative; margin-left:auto; margin-right:auto; }
/* Flickity */
.carousel-cell { width:800px; height:auto; margin-right: 10px; }
.carousel-cell2 { width:400px; height:auto; margin-right: 10px; }
@media screen and (orientation: portrait){
#kopfbild { height:50%; }
#inhaltabstand { height:50%; }
}
.ausblendengross { display:none; }
@media screen and (max-width:1440px) {
.innenbreite2 { width:95%; padding-left:2.5%; padding-right:2.5%; }
}
@media screen and (max-width:1200px) {
#footer1 { clear:both; width:auto; margin-right:0; margin-bottom:20px; }
#footer2 { clear:both; width:auto; margin-right:4%; }
#footer3 { width:15%; margin-right:3%; }
#footer4 { margin-right:4%; max-width:145px; }
#footer5 { margin-right:2.5%; margin-top:-20px; }
.footerlogo { margin-top:5px; }
#navigation2 { width:36%; }
#navigation4 { width:30%; }
#navigation5 { width:36%; }
#navigation7 { width:30%; }
#navigation10 { width:30%; }
#navigation10 a:link { margin-right:15px; }
}
@media screen and (max-width:950px) {
body { font-size:85%; }
#kopfbild { height:50%; }
#inhaltabstand { height:50%; }
#kopfzeile h1 { margin-bottom:15px; }
#kopfzeile h4 { margin-top:26px; }
#navigationburger { top:35px; right:35px; }
#navigationburger2 { top:35px; right:35px; }
#navigation6 { margin-bottom:131px; }
#navigation7 { margin-bottom:131px; }
#navigation10 { margin-top:-10px; }
.startlogo { height:85%; }
.startlogonegativ { height:85%; top:40%; }
.innenbreite1 { width:94%; padding-left:3%; padding-right:3%; }
.innenbreite2 { width:94%; padding-left:3%; padding-right:3%; }
.innenbreite3 { width:94%; padding-left:3%; padding-right:3%; }
#startbox { height:auto; padding-top:5%; padding-bottom:5%; background-position:right bottom; }
#fotobuttonbox { width:86%; padding-left:7%; padding-right:7%; }
.button2 { margin-top:-90px; width:160px; }
.button3 { margin-top:50px; width:180px; }
#footer3 { width:auto; margin-right:4%; }
#footer4 { width:auto; margin-right:2%; max-width:none; }
#footer5 { width:150px; margin-right:3%; margin-top:-15px; }
.footerlogo { margin-top:3px; }
#footer6 { width:auto; max-width:100px; }
#footer7 { width:auto; margin-top:-66px; }
#footer7 a:link { margin-right:20px; }
.back-to-top { bottom:10px; }
#rueblickprogrammheft { margin-right:27px; margin-bottom:27px; }
.rueblickprogrammheftcover { width:185px; height:252px; }
#impressionen { width:45%; margin-right:5%; margin-bottom:25px; }
.impressionenfoto { width:100%; height:auto; }
}
@media screen and (max-width:840px){
body { font-size:80%; }
h1 { font-size:3em; }
h2 { font-size:3em; }
h4 { font-size:3em; }
#kopfbild { height:45%; }
#inhaltabstand { height:45%; }
#kopfzeile h1 { margin-bottom:15px; font-size:2.5em; }
#kopfzeile h4 { margin-top:24px; }
#navigationburger { top:30px; right:30px; }
#navigationburger2 { top:30px; right:30px; }
.startlogo { height:80%; }
.startlogonegativ { height:80%; }
#startbox { padding-top:10%; padding-bottom:10%; }
.carousel-cell { width:100%; height:auto; margin-right:0; }
.carousel-cell img { width:100%; }
.button2 { margin-top:-85px; width:140px; }
.button3 { margin-top:40px; width:160px; }
#footer4 { margin-right:4%; max-width:120px; }
#footer5 { display:none; }
#footer6 { max-width:none; }
#footer7 { margin-right:10px; margin-top:-65px; }
.hamburg.checked #navigation{ max-height:2000px; }
#navigation1 { width:95%; margin-top:15px; margin-bottom:12px; }
#navigation2 { clear:both; width:95%; margin-bottom:11px; }
#navigation3 { clear:both; width:95%; margin-bottom:11px; }
#navigation4 { clear:both; width:95%; margin-bottom:11px; }
#navigation5 { clear:both; width:67%; margin-bottom:20px; }
#navigation6 { float:left; width:33%; margin-bottom:0px; }
#navigation7 { float:left; width:33%; margin-bottom:27px; }
#navigation8 { float:left; width:33%; margin-bottom:11px; }
#navigation9 { float:left; width:33%; margin-bottom:38px; }
#navigation10 { float:left; width:33%; margin-bottom:15px; }
#navigation10 a:link { margin-right:15px; }
#navigation10 a:link:nth-child(4) { margin-right:0px; }
.line { width:30px; }
.line:nth-child(1) { top: 12px; }
.line:nth-child(2) { top: 20px; }
.line:nth-child(3) { top: 28px; }
.hamburg.checked .line:nth-child(1){ transform: translateY(8px) rotate(-45deg); }
.hamburg.checked .line:nth-child(3){ transform: translateY(-8px) rotate(45deg); }
.back-to-top-img { width:32px; height:18px; }
.back-to-top { bottom:8px; right:8px; padding:17px 11px 15px 11px; }
}
@media screen and (max-width:650px){
#kopfbild { height:40%; }
#inhaltabstand { height:40%; }
#kopfzeile h1 { margin-bottom:15px; }
#kopfzeile h4 { margin-top:14px; }
#navigationburger { top:28px; right:5px; }
#navigationburger2 { top:28px; right:5px; }
.startlogo { height:75%; }
.startlogonegativ { height:75%; }
.button2 { margin-top:-86px; width:120px; }
.button3 { margin-top:30px; width:140px; }
#footer2 { width:45%; margin-right:0%; }
#footer3 { margin-bottom:20px; }
#footer4 { clear:both; width:45%; margin-right:0%; max-width:none; }
#footer7 { clear:both; margin-top:-65px; margin-bottom:20px; margin-right:0; }
#footer7 a:link { margin-right:13px; }
#rueblickprogrammheft { margin-right:25px; margin-bottom:25px; }
.rueblickprogrammheftcover { width:164px; height:224px; }
#impressionen { width:100%; margin-right:0; margin-bottom:25px; }
.innenbreite3 { width:96%; padding-left:2%; padding-right:2%; }
.autorenfoto { max-width:100%; }
}
@media screen and (max-width:575px){
.startlogo { height:70%; }
.startlogonegativ { height:70%; }
.flickity-page-dots { display:none; }
#startgalerie { padding-bottom:20px; }
.button2 { width:105px; }
.button2 a:link { padding:15px 0 15px 0; }
.button2 a:visited { padding:15px 0 15px 0; }
.button2 a:hover { padding:15px 0 15px 0; }
.button2 a:active { padding:15px 0 15px 0; }
.button3 { width:125px; }
.button3 a:link { padding:15px 0 15px 0; }
.button3 a:visited { padding:15px 0 15px 0; }
.button3 a:hover { padding:15px 0 15px 0; }
.button3 a:active { padding:15px 0 15px 0; }
.ausblendengross { display:block; }
.ausblenden { display:none; }
}