/*
Theme Name: Tscheulin Apotheken
Author: eloq GmbH
Author URI: https://eloq.swiss/
Description: Die eloq GmbH macht nicht einfach Internetseiten. Wir bieten Ihnen durchdachte Konzepte, mischen Designkompetenz mit technischem Können und streben so nach der perfekten Internet-Präsenz unseres Kunden. Das vorliegende Theme wurde von uns mit Passion und Freude handgefertigt. Wir hoffen, Ihnen gefällt unsere Arbeit!
Version: 1.5.7
*/

/* Imports */

@import url("css/typo.css");
@import url("css/utilities.css");
@import url("css/header.css");
@import url("css/footer.css");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined");

/*
COLOR DEFINITIONS - GOES BELOW:
*/

/* === Theme Specific === */

/* ----- GENERAL ----- */

body {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    min-height: 100vh;
}

body>main {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

section, a {
    position: relative;
}

/* END GENERAL */

/* ----- WP ADMIN BAR ----- */

/*#wpadminbar {
    display: none;
  }*/

/* END WP ADMIN BAR */

/* ----- BUTTONS ----- */

/* Button classes:
        - btn_xyz_primary
        - btn_xyz_secondary 
*/

h2.button, h3.button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0px;
}

h2.button {
    gap: 30px;
    padding-right: 15px;
}

h2.button:hover {
    color: #88CA7D !important;
    gap: 45px;
    padding-right: 0px;
}

h2.button .material-symbols-outlined {
    font-size: inherit;
}

h3.button {
    gap: 10px;
    padding-right: 10px;
}

h3.button:hover {
    color: #88CA7D !important;
    gap: 20px;
    padding-right: 0px;
}

/* Button Reset */

button {
    border: none;
    margin: 0;
    padding: 0;
    width: auto;
    overflow: visible;
    background: transparent;
    /* inherit font & color from ancestor */
    color: inherit;
    font: inherit;
    /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
    line-height: normal;
    /* Corrects font smoothing for webkit */
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;
    /* Corrects inability to style clickable `input` types in iOS */
    -webkit-appearance: none;
}

.btn-primary {
    margin-top: 10px;
    margin-bottom: 30px;
    background: #fff;
    color: #004077;
    border-radius: 5px;
    font-family: "Saira", sans-serif;
    text-transform: uppercase;
    border: 1px solid #81cef3;
}

.btn-secondary {
    border-radius: 0;
    border-width: 5px;
    border-color: #ddd;
    min-width: 200px;
    background: transparent;
    text-transform: uppercase;
    color: #df1c1c;
}

/* END BUTTONS */

/* ----- LAZYLOAD EFFECT ----- */

img.bg_static_cover {
    -webkit-filter: blur(3px);
    filter: blur(3px);
    transition: filter 500ms, -webkit-filter 500ms;
}

img.bg_static_cover.lazyloaded {
    -webkit-filter: blur(0);
    filter: blur(0);
}

/* END LAZYLOAD EFFECT */

/* ----- Archive ----- */
section.archive {
    padding-top: 160px;
    padding-bottom: 100px;
}

section.archive .teaser_card {
    padding: 30px;
    position: relative;
}

section.archive .teaser_card.img_icon {
    background: -o-linear-gradient(190.84deg, rgba(255, 255, 255, 0.6) 0%, #FFFFFF 100%);
    background: linear-gradient(259.16deg, rgba(255, 255, 255, 0.6) 0%, #FFFFFF 100%);
}

section.archive .teaser_card.img_bg {
    padding-top: 0px;
}

section.archive .teaser_card.img_icon .img_wrapper {
    height: 200px;
    margin-top: 150px;
    margin-bottom: 30px;
    width: 100%;
}

section.archive .teaser_card.img_icon .img_wrapper img {
    object-position: left bottom;
    -o-object-position: left bottom;
    font-family: "object-fit: contain; object-position: left bottom;";
}

section.archive .teaser_card.img_bg .img_wrapper {
    height: 300px;
    margin-bottom: 30px;
    margin-left: -30px;
    margin-right: -30px;
}

section.archive .teaser_card .img_wrapper .is_svg {
    height: 100%;
}

section.archive .teaser_card .img_wrapper .is_svg svg {
    height: 100%;
    width: auto;
    max-width: 100%;
}

section.archive h3.button {
    color: #1B2918;
}

section.archive p.lead {
    color: #485446;
}

section.archive .teaser_card:hover .lead {
    color: #1B2918;
}

section.archive a.teaser_card {
    background-color: transparent;
    -webkit-transition: 0.4s ease;
    -o-transition: 0.4s ease;
    transition: 0.4s ease;
}

section.archive a.teaser_card:hover {
    background-color: #FFFFFF;
    -webkit-transition: 0.4s ease;
    -o-transition: 0.4s ease;
    transition: 0.4s ease;
}

section.archive a.teaser_card.img_bg .img_wrapper img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: -webkit-filter 0.3s;
    transition: -webkit-filter 0.3s;
    -o-transition: filter 0.3s;
    transition: filter 0.3s;
    transition: filter 0.3s, -webkit-filter 0.3s;
}

section.archive a.teaser_card.img_bg:hover .img_wrapper img {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}