/*
Theme Name: PP Info-Monitor Domzentrum
Author: verowa
Author URI: http://verowa.ch/
Description:
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: display
Auflösung fix Full HD

History:	19.01.2022/PMe: Neuer Aufbau gem. HTML-Struktur
*			14.01.2022/PMe: CSS umbau auf vw anstelle px
*			15.01.2022/PMe: CSS optimieren
*			25.03.2022/P+C: Schriften einbinden
*/


/* --------------------------------------------------------
 Fonts
-------------------------------------------------------- */

/* GeneoPro Book Italic */
@font-face {
    font-family: 'GeneoPro';
    src: url('https://domzentrum.verowa-infodisplays.ch/theme/fonts/GeneoPro-BookItalic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
}

/* Avenir Medium */
@font-face {
    font-family: 'Avenir-medium';
    src: url('https://domzentrum.verowa-infodisplays.ch/theme/fonts/AvenirMedium.woff2') format('woff2'),
     url('https://domzentrum.verowa-infodisplays.ch/theme/fonts/AvenirMedium.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

/* Avenir Black */
@font-face {
    font-family: 'Avenir-black';
    src: url('https://domzentrum.verowa-infodisplays.ch/theme/fonts/AvenirBlack.woff2') format('woff2'),
     url('https://domzentrum.verowa-infodisplays.ch/theme/fonts/AvenirBlack.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

/* --------------------------------------------------------
 General
-------------------------------------------------------- */
:root {
    /* Fonts */
    --font-title: 'GeneoPro', serif;
    --font-body-black: 'Avenir-black', sans-serif;
    --font-body-medium: 'Avenir-medium', sans-serif;

    /* Colors */
    --color-base: #c5ccdb;
    --color-title: #f37032;
    --color-body: #003661;

    /* Space / Margins / Paddings */
    --space-big: 2vw;
    --space-normal: 1vw;
    --space-small: 0.5vw;
    --space-mini: 0.25vw;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
    margin: 0 !important;

}

body {
    color: var(--color-body);
    font-family: var(--font-body-medium);
    font-weight: 400;
    height: 100%;
    line-height: 1.3;
    overflow: hidden;
    width: 100%;
}

ul,
li {
    list-style-type: none;
    margin: 0;
}

/* Font headings */
h1,
h2,
h3,
h4 {
    font-weight: 600;
}

h2 {
    font-size: 2vw;
    line-height: 1.2;
    margin-bottom: 0.166666vw;
}

h3 {
    font-size: 1.5vw;
    margin: 0.166666vw 0;
}

img {
    width: auto;
}

.txt-intro {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    font-size: 8vw;
    text-align: left;
    color: var(--color-title);
    font-family: var(--font-title);
    font-style: italic;
    /* display: none; */
}


/* --------------------------------------------------------
 Main Wrapper
-------------------------------------------------------- */
.wrapper {
    background: var(--color-base);
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center;
    width: 100vw;
}

.hd-container {
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    width: 100vw;
    width: 200vw;
}

/* Content Wrapper */
.content-wrapper {
    background: var(--color-base);
    display: flex;
    flex-direction: row;
    flex-grow: 2;
    flex-wrap: nowrap;
    font-size: 1.4583vw;
    justify-content: flex-start;
    overflow: hidden;
}


/* --------------------------------------------------------
 Header
-------------------------------------------------------- */
.logo-wrapper {
    display: flex;
    align-items: center;
    height: fit-content;
    width: 95vw;
    flex-direction: row;
    justify-content: space-between;
}

.header h1 {
    color: #b4b4b4;
}

/* Logo */
.logo-wrapper img {
    height: auto;
    margin-left: 1vw;
}

.logo-wrapper .logo-img {
    max-width: 12vw;
}

.logo-wrapper .logo-txt {
    width: 28.125vw;
}

/* Date & Time */
.cur_date_time {
    display: flex;
    flex-direction: column;
    text-align: right;
    font-family: var(--font-title);
    font-style: italic;
    font-size: 2.5vw;
}

.clock {
    font-size: 2.5vw;
    height: 3.8125vw;
    line-height: 1;
}

/* --------------------------------------------------------
 Event List
-------------------------------------------------------- */
.event-list {
    width: 70vw;
    height: 37.7604vw;
    margin: auto;
}

.date-row {
    display: none;
    /* font-weight: 600;
    font-size: 1.40625vw;
    align-items: center;
    background-color: #f3f3f3;
    display: flex;
    height: 2.4vw !important;
    margin: 1.54166vw 0 0.520833vw;
    padding: 0 0 0 0.5208333333333333vw; */
}

.date-row:first-child {
    margin: 0 0 0.520833vw;
}

.event-row {
    display: flex;
    align-items: end;
    gap: 3vw;
    min-height: 5vh;
    padding: var(--space-big) 0 var(--space-small) 0;
    border-bottom: solid 1px var(--color-body);
}

.event-time {
    width: max-content;
    min-width: 10vw;
    font-size: 1.458vw;
    text-align: right;
}

.event-title {
    width: min-content;
    max-width: 41vw;
    flex-grow: 1;
    font-size: 2.2vw;
    line-height: 1em;
    text-align: left;
    font-family: var(--font-body-black);
    font-weight: 900;
}

.event-location {
    width: min-content;
    min-width: 13vw;
    font-size: 1.4vw;
    font-weight: 400;
    text-align: right;
}

.event-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-big);
    width: 100vw !important;
    padding: var(--space-big) !important;
    font-size: 1.1vw;
}

.event-container h2 {
    background-color: #F3F3F3;
    font-size: 1.8em;
    font-weight: 500;
}

/* --------------------------------------------------------
 Image
-------------------------------------------------------- */
.container-image {
    background-image: url(images/Aarau-Slide-F2021-2.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 50%;
}

/* --------------------------------------------------------
 Footer
-------------------------------------------------------- */
footer {
    width: 100vw;
    display: flex;
    justify-content: space-between;
}

.footer-1 {
    align-items: baseline;
    background: #F3F3F3;
    color: #000;
    display: flex;
    font-size: 1vw;
    padding: 1.35417vw 2.4vw 1.35417vw 1.77vw;
    width: 50vw;
}

.footer-1 h3 {
    font-weight: bold;
    font-size: 1.40625vw;
}

.footer-1 p {
    /*     padding: 0.625vw 18.22916666666667vw 0 0;  */
    margin-left: 2vw;
}

.footer-2 {
    font-size: 1.25vw;
    background: #BE80BF;
    text-align: right;
    color: white;
    padding: 1.35417vw 2.4vw 1.66666vw;
    width: 50vw;
    justify-content: flex-end;
}

.footer-2 h3 {
    font-size: 2.604166666666667vw;
    /*     font-weight: bolder; */
}

.footer .lbl-legend {
    display: inline-block;
    width: 2.865vw;
}


/* Fehlerbox
*************************************************************/
.verowa-down {
    background-color: #8fb810;
    border-radius: 0.520833vw;
    color: #fff;
    font-size: 1.666666666666667vw;
    font-weight: 600;
    left: 7.8125vw;
    line-height: 3.020833333333333vw;
    padding: 1.822916666666667vw 1.822916666666667vw 2.083333333333333vw;
    position: absolute;
    text-align: center;
    top: 22.5vw;
    width: 43.75vw;
}