/* Global Varables -----------------------------------------------------------------------------*/
:root
{
    /* Brand Colors */
    --clr-base: #5BCAE6;
    --clr-base-dark-1: #0F7E9A;
    --clr-base-dark-2: #084959;
    --clr-base-light-1: #E5EEF0;
    --clr-base-light-2: #dae3e5;
    --clr-base-additional: #493471;
    --clr-bkg-outside: #f5f1eb;
    --clr-bkg: #faf9f8;
    --clr-text-light: #FEFBF6;
    --clr-text: #272b2d;
    --clr-text-light-1: #545454;
    --clr-text-light-2: #c1c1c1;
    --clr-text-light-3: #bfbab6;
    --clr-accent: #E68D39;
    --clr-accent-light-2: #F7EAD2;
    --clr-accent-light-3: #f1dcb5;
    --clr-accent-light-3-a: #f1dcb596;
    --clr-neutral-light-2: #F3F3F3;
    --clr-neutral-light-3: #e8e8e8;
    --clr-white: #ffffff;

    /* Paddings */
    --padding-btn-left: 2.5rem;
    --padding-btn-right: 2.5rem;
    --padding-btn-top: 1.0rem;
    --padding-btn-bottom: 1.1rem;

    /* Borders */
    --border-btn-contact: 0.2rem;
    --border-navigation: 0.2rem;
    --border-radius: 0.8rem;
    --border-radius-thumbs: 0.5rem;

    /* Fonts */
    --body-font-size: 1.6rem;
    --h1-body-ratio: 2.5;
    --h2-body-ratio: 2.0;
    --h3-body-ratio: 1.5;
    --h4-body-ratio: 1.1;
    --headers-font-weight: 600;
}


/* HTML Tags-----------------------------------------------------------------------------------------*/

*
{
    box-sizing: border-box;
}

footer
{
    background-color: var(--clr-base-light-2);
    padding-top: 1.0rem;
    padding-bottom: 1.0rem;
    margin-top: 3.0rem;
}

html
{
    font-size: 50%;
}

body
{
    font-size: var(--body-font-size);
    font-family: 'Sarabun', sans-serif;
    font-weight: 300;
    line-height: 2.0rem;
    background-color: var(--clr-bkg-outside);
    color: var(--clr-text);
}

header
{
    position: fixed;
    width: 100%;
    background-color: var(--clr-base-dark-1);
    padding: 0;
    z-index: 100;
}


b
{
    font-weight: var(--headers-font-weight);
}

h1,
h2,
h3,
h4
{
    line-height: 1.2;
    font-weight: var(--headers-font-weight);
    color: var(--clr-text);
}

h1
{
    font-size: calc(var(--body-font-size)*var(--h1-body-ratio));

}

h2
{
    font-size: calc(var(--body-font-size)*var(--h2-body-ratio));
}

h3
{
    font-size: calc(var(--body-font-size)*var(--h3-body-ratio));
}

h4
{
    font-size: calc(var(--body-font-size)*var(--h4-body-ratio));
}

img
{
    width: 100%;
}

ul
{
    margin-block-start: 0;
    padding-inline-start: 0;
    list-style: outside;
    padding: 0 2.0rem;
}

ul li::marker
{
    color: var(--clr-base-dark-1);
}

p>a:link
{
    color: var(--clr-base-dark-1);
    text-decoration: none;
    font-weight: 500;
}

p>a:visited
{
    color: var(--clr-base-dark-1);
    text-decoration: none;
    font-weight: 500;
}

p>a:hover
{
    color: var(--clr-base-dark-1);
    text-decoration: underline;
    font-weight: 500;
}

/* Classes -------------------------------------------------------------------------------------*/

/* textlink */
.css-box-shadow
{
    width: [object Object]px;
    height: [object Object]px;
    box-shadow: 0 0.1875rem 0.4375rem 0 rgba(0, 0, 0, .23),
        0 0.0625rem 0.125rem 0 rgba(0, 0, 0, .18);
    -webkit-box-shadow: 0 0.1875rem 0.4375rem 0 rgba(0, 0, 0, .23),
        0 0.0625rem 0.125rem 0 rgba(0, 0, 0, .18);
    -moz-box-shadow: 0 0.1875rem 0.4375rem 0 rgba(0, 0, 0, .23),
        0 0.0625rem 0.125rem 0 rgba(0, 0, 0, .18);
}

.icon-header>*
{
    /* vertical-align: middle; */
    display: block;
    margin: 0;
}

.icon-header img
{
    width: 6.4rem;
}

.container,
.header-container
{
    padding: 0 2.5rem;
    max-width: 110rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 6.5rem;
}

.footer-container
{
    padding: 0rem 2.5rem 0rem 2.5rem;
    max-width: 110rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0rem;
}

.header-container
{
    margin-bottom: 0;
}

.frame-container
{
    /* padding: 1.8rem 1.8rem 2.0rem 1.8rem; */
    padding: 0 0.8rem 0.8rem 0.8rem;
    background-color: var(--clr-base-light-1);
    border-radius: var(--border-radius);

    width: [object Object]px;
    height: [object Object]px;
    box-shadow: 0 0.1875rem 0.4375rem 0 rgba(0, 0, 0, .13),
        0 0.0625rem 0.125rem 0 rgba(0, 0, 0, .11);
    -webkit-box-shadow: 0 0.1875rem 0.4375rem 0 rgba(0, 0, 0, .13),
        0 0.0625rem 0.125rem 0 rgba(0, 0, 0, .11);
    -moz-box-shadow: 0 0.1875rem 0.4375rem 0 rgba(0, 0, 0, .13),
        0 0.0625rem 0.125rem 0 rgba(0, 0, 0, .11);
}

.row
{
    margin: 2.5rem 0;
}

.row::after
{
    content: "";
    clear: both;
    display: table;
}

#work .row
{
    padding-bottom: 2.5rem;
    border-bottom: 0.1rem solid #4a4a4a;
}

#hero h1
{
    text-align: left;
    padding-left: 4.0rem;
}

.textlink
{
    color: var(--clr-base-dark-1);
    text-decoration: none;
}

.textlink:visited
{
    color: var(--clr-base-additional);
}

.textlink:hover,
.textlink:focus
{
    color: var(--clr-base-dark-1);
    text-decoration: underline;
}

.textlink:active
{
    color: var(--clr-base);
    text-decoration: underline;
}



.upper-menu
{
    display: flex;
    padding: 0;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    column-gap: 1.5rem;
    flex-wrap: wrap;
}

.logo
{
    padding-left: 0rem;
    padding-top: 1.8rem;
    padding-bottom: 1.0rem;
    height: 5.6rem;
    margin-right: auto;
    width: auto;
    flex-shrink: 0;
}

.navigation
{
    display: flex;
    margin: 0;
    padding: 0;
    align-items: center;
    flex-shrink: 0;
}

.navigation>a
{
    height: 100%;
    font-size: 1.9rem;
    /* padding: 0.2rem 1.0rem 0.6rem 1.0rem; */
    padding: 0.7rem 1.3rem 0.7rem 1.3rem;
    text-decoration: none;
    text-transform: lowercase;
    font-weight: 300;

    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    align-self: stretch;


    color: var(--clr-text-light);
    background-color: var(--clr-base-dark-1);
    border: var(--border-navigation) solid var(--clr-base-dark-1);
    border-style: none none solid none;
    transition: background-color 0.5s;
    transition-timing-function: ease-out;

}

.navigation>a:hover
{
    background-color: rgba(0, 0, 0, 0.3);
    border: var(--border-navigation) solid var(--clr-base-light-1);
    border-radius: 0.5rem 0.5rem 0 0;
    border-style: none none solid none;
}


/* buttons */

.button
{
    display: inline-block;
    background-color: var(--clr-base-dark-2);
    color: var(--clr-bkg);
    font-weight: 400;
    text-decoration: none;
    padding-left: var(--padding-btn-left);
    padding-right: var(--padding-btn-right);
    padding-top: var(--padding-btn-top);
    padding-bottom: var(--padding-btn-bottom);
    border-radius: 1.2rem;
    transition: background-color 0.35s;
}

.button:hover
{
    background-color: var(--clr-base-dark-1);
}

.button:focus
{
    background-color: var(--clr-base-dark-1);
}

.button:active
{
    background-color: var(--clr-base-dark-1);
}

.button.contact
{
    /*compensate for the increase in button size due to the border stroke*/
    padding-left: calc(var(--padding-btn-left) - var(--border-btn-contact));
    padding-right: calc(var(--padding-btn-right) - var(--border-btn-contact));
    padding-top: calc(var(--padding-btn-top) - var(--border-btn-contact));
    padding-bottom: calc(var(--padding-btn-bottom) - var(--border-btn-contact));
    background-color: transparent;
    color: var(--clr-accent);
    border: var(--border-btn-contact) solid var(--clr-accent);
}

.button.contact:hover
{
    background-color: var(--clr-accent);
    color: var(--clr-text-light);
}

.flex-columns
{
    display: flex;
    gap: 2rem;
    padding: 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.col-w-header-5
{
    padding: 0 1.8rem 2.0rem 1.8rem;
    max-width: 20rem;
    flex-basis: 16rem;
    flex-grow: 1;
    flex-shrink: 1;
    background-color: var(--clr-base-light-1);
    border-radius: 0.8rem;

    width: [object Object]px;
    height: [object Object]px;
    box-shadow: 0 0.1875rem 0.4375rem 0 rgba(0, 0, 0, .13),
        0 0.0625rem 0.125rem 0 rgba(0, 0, 0, .11);
    -webkit-box-shadow: 0 0.1875rem 0.4375rem 0 rgba(0, 0, 0, .13),
        0 0.0625rem 0.125rem 0 rgba(0, 0, 0, .11);
    -moz-box-shadow: 0 0.1875rem 0.4375rem 0 rgba(0, 0, 0, .13),
        0 0.0625rem 0.125rem 0 rgba(0, 0, 0, .11);
}

.col-w-header-5 h4
{
    margin: 1.0rem 0rem 1.0rem 0rem;
}

.col-w-header-5 p
{
    margin: 0rem;
}

.col-w-header-3
{
    /* padding: 0 1.8rem 2.0rem 1.8rem; */
    /* max-width: 33rem; */
    flex-basis: 26rem;
    flex-grow: 1;
    flex-shrink: 1;
    background-color: var(--clr-bkg);
}

.col-w-header-2
{
    /* padding: 0 1.8rem 2.0rem 1.8rem; */
    /* max-width: 33rem; */
    flex-basis: 30rem;
    flex-grow: 1;
    flex-shrink: 1;
    background-color: var(--clr-bkg);
}

.contact-frame
{
    display: flex;
    gap: 3.2rem;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 3.2rem;
}



.svg-image-munich
{
    flex-basis: 13.5rem;
    margin: 0;
    align-self: stretch;
    cursor: pointer;
}

.contact-text
{
    display: flex;
    flex-direction: column;
}


.contact-text>h3
{
    margin: 0 0 2.0rem 0;

}

.contact-text>p
{
    margin: 0 0 1.6rem 0;
}

.social-nets
{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 3.2rem;
    padding-top: 1.6rem;
}

.social-nets>a
{

    flex-shrink: 1;
    width: fit-content;
}

.icon-paragraph
{
    display: flex;
    align-items: flex-start;
    gap: 1.0rem;
}

.icon-paragraph-left-field
{
    display: flex;
    padding: 0;
    align-items: flex-start;
    align-self: stretch;
}

.icon-paragraph-left-field img
{
    width: 4.8rem;
    padding: 0.7rem 0 0 0;
    margin: 0;
}

.icon-paragraph-left-field-small
{
    display: flex;
    padding: 0;
    align-items: flex-start;
    align-self: stretch;
}

.icon-paragraph-left-field-small img
{
    width: 2.4rem;
    padding: 1.3rem 0 0 0.3rem;
    margin: 0;
}

.icon-paragraph-text
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.3rem 0 0.8rem 0;
    gap: 1.0rem;
    flex: 1 0 0;
}

.icon-paragraph-text h3
{
    margin: 0.5rem 0 0 0;
}

.icon-paragraph-text h4
{
    margin: 0.9rem 0 0.5rem 0;
}

.icon-paragraph-text p
{
    margin: 0;
}


.icon-paragraph-text-footer
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.3rem 0 0.8rem 0;
    gap: 0.0rem;
    flex: 1 0 0;
}

.icon-paragraph-text-footer h3
{
    margin: 1.5rem 0 0 0;
}

.icon-paragraph-text-footer h4
{
    margin: 0.9rem 0 0.5rem 0;
}

.icon-paragraph-text-footer p
{
    margin: 0;
}

.card-text-picture
{
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;

    margin-bottom: 1.6rem;

    width: 100%;

    padding: 1.8rem 1.8rem 2.0rem 1.8rem;
    background-color: var(--clr-accent-light-2);
    border-radius: 0.8rem;

    width: [object Object]px;
    height: [object Object]px;
    box-shadow: 0 0.1875rem 0.4375rem 0 rgba(0, 0, 0, .13),
        0 0.0625rem 0.125rem 0 rgba(0, 0, 0, .11);
    -webkit-box-shadow: 0 0.1875rem 0.4375rem 0 rgba(0, 0, 0, .13),
        0 0.0625rem 0.125rem 0 rgba(0, 0, 0, .11);
    -moz-box-shadow: 0 0.1875rem 0.4375rem 0 rgba(0, 0, 0, .13),
        0 0.0625rem 0.125rem 0 rgba(0, 0, 0, .11);
}

.card-text
{
    flex-basis: 60%;
    flex-shrink: 3;
}

.card-text h4
{
    margin: 0 0 0.8rem 0;
}

.card-picture
{
    flex-basis: 40%;
    flex-shrink: 1;
    padding-top: 3.5rem;
}

.card-picture picture img
{
    border-radius: 0.8rem;
}

.about-container-form
{
    display: flex;
    padding: 0;
    flex-direction: column;
    margin: 3.4rem 0 0 0;
    background-color: var(--clr-bkg);
    border-color: var(--clr-base-light-1);
    border-width: 0.1rem;
    border-style: solid;
}

.about-container
{
    display: flex;
    flex-wrap: wrap;
    padding: 5rem 4.5rem 0 4.5rem;
}

.about-container-photo
{
    flex-basis: 30rem;
    max-width: 35rem;
    flex-grow: 1;
    flex-shrink: 0;
    padding: 0 4.0rem 4.0rem 0;
}

.about-container-text
{
    flex-basis: 60rem;
    flex-shrink: 2;
    flex-grow: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 0 2.0rem 0;
}

.about-container-text>h2
{
    margin: 0;

}

.resume-button
{
    flex-grow: 0;
    align-self: flex-end;
}


.cellar
{
    display: flex;
    justify-content: flex-end;
    background: var(--clr-base-light-1);
    padding: 2.4rem 5.4rem 2.4rem 0;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.cellar2
{
    display: flex;
    justify-content: flex-end;
    background: var(--clr-base-light-1);
    padding: 2.4rem 3.2rem 2.4rem 0;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.skills-tools-container
{
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
}

.skills-tools-container>ul
{
    margin-block-start: 0;
    padding-inline-start: 0;
    list-style: inside;
    padding: 0;
}

.skills-tools-card
{
    flex-basis: 35rem;
    flex-grow: 1;
    flex-shrink: 1;
    padding: 3.2rem;
    background-color: var(--clr-bkg);
    border-style: solid;
    border-color: var(--clr-base-light-1);
    border-width: 0.1rem;
}

.olive-splash
{
    background-image: url("../img/olive-app/olive-splash-background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0.8rem;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 2.0rem;
    gap: 0.1rem;
    margin: 3.2rem 0 3.2rem 0;
}

.olive-splash p
{
    color: var(--clr-bkg);
    flex-basis: 40rem;
    flex-shrink: 1;
    flex-grow: 1;
    margin: 0;
}

.project-logo
{
    flex-basis: 20rem;
    flex-shrink: 1;
    margin: auto;
}

.project-logo img
{
    width: 15rem;
    padding: 0 0 0 0;
}

.inline-image
{
    display: flex;
    gap: 0.5rem;
    align-items: center;
    text-decoration: none;
    color: var(--clr-text);
    margin: 0.4rem 0;
    color: var(--clr-base-dark-2);
    flex-wrap: nowrap;
}


.images-row
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: space-between;
}

.images-row>div
{
    /* width: 100%; */
    margin-bottom: 1rem;
    flex-basis: 33rem;
    flex-shrink: 2;
    flex-grow: 1;
}

.images-row img
{
    width: 100%;
    height: 100%;
}

.inline-image:hover
{
    text-decoration: underline;
}

.inline-image img
{
    width: calc(1.5 * var(--body-font-size));
}

.inline-image>span
{
    width: max-content;
}

.copyright-container
{
    background-color: var(--clr-base-light-2);
}

.copyright
{
    max-width: 110rem;
    margin-left: 0;
    font-size: calc(0.8 * var(--body-font-size));
    color: var(--clr-text-light-1);
    margin-top: 2.0rem;
}

#hero h1
{
    margin: 0;
}

#hero
{
    background-color: var(--clr-base-light-1);
    display: inline-block;
    width: 100%;
    margin-bottom: 2.5rem;
}

#hero span
{
    display: block;
}

.hero-container
{
    display: flex;
    gap: 3.2rem;
    margin-top: 3.2rem;
    margin-bottom: 3.2rem;
    flex-wrap: wrap;
}

.hero-text
{
    flex-basis: 34rem;
    flex-grow: 1;
    flex-shrink: 1;
}

.hero-text>h3
{
    margin-top: 0;
}

.skills-tools-card h3
{
    margin-top: 0;
}

.work-container-form
{
    display: flex;
    padding: 0;
    flex-direction: column;
    margin: 3.4rem 0 0 0;
    background-color: var(--clr-bkg);
    border-color: var(--clr-base-light-1);
    border-width: 0.1rem;
    border-style: solid;
}


.work-container
{
    display: flex;
    gap: 3.2rem;
    flex-wrap: wrap;
    padding: 3.2rem;
}

.work-picture
{
    flex-basis: 32rem;
}

.work-text
{
    flex-basis: 34rem;
    flex-grow: 1;
    flex-shrink: 1;
}

.work-text>h3
{
    margin-top: 0;
}

.picture-caption
{
    padding-bottom: 0.8rem;
    text-align: center;
}

.picture-caption-no-pg
{
    padding-top: 2.0rem;
    padding-bottom: 0.2rem;
    text-align: left;
}

.picture-caption-line
{
    background-color: var(--clr-text-light-2);
    height: 0.1rem;
    margin-top: 0.1rem;
    margin-bottom: 2.4rem;
    border-style: none;
}

.card-line
{
    background-color: var(--clr-text-light-2);
    height: 0.2rem;
    border-style: none;
}

.sgThumbLine
{
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 1.0rem;
    background-color: var(--clr-text-light-3);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    padding: 1.0rem;
    padding-bottom: 1.2rem;
}



.sgThumb
{
    flex-basis: 10%;
    padding: 1%;
    padding-left: 1%;
    padding-right: 1%;
    cursor: pointer;
    border-radius: var(--border-radius-thumbs);
    background-color: var(--clr-bkg);
    filter: grayscale(100%);

    width: [object Object]px;
    height: [object Object]px;
    box-shadow: 0 0.1875rem 0.4375rem 0 rgba(0, 0, 0, .13),
        0 0.0625rem 0.125rem 0 rgba(0, 0, 0, .11);
    -webkit-box-shadow: 0 0.1875rem 0.4375rem 0 rgba(0, 0, 0, .13),
        0 0.0625rem 0.125rem 0 rgba(0, 0, 0, .11);
    -moz-box-shadow: 0 0.1875rem 0.4375rem 0 rgba(0, 0, 0, .13),
        0 0.0625rem 0.125rem 0 rgba(0, 0, 0, .11);

}

.sgThumb:hover
{
    background: radial-gradient(closest-side, var(--clr-bkg) 50%, var(--clr-accent-light-3) 120%);
    filter: grayscale(60%);
    box-shadow: 0 0.3875rem 0.6375rem 0 rgba(0, 0, 0, .13),
        0 0.0625rem 0.125rem 0 rgba(0, 0, 0, .11);
    -webkit-box-shadow: 0 0.3875rem 0.6375rem 0 rgba(0, 0, 0, .13),
        0 0.0625rem 0.125rem 0 rgba(0, 0, 0, .11);
    -moz-box-shadow: 0 0.3875rem 0.6375rem 0 rgba(0, 0, 0, .13),
        0 0.0625rem 0.125rem 0 rgba(0, 0, 0, .11);
}

.sgThumbSelected
{
    flex-basis: 10%;
    padding-top: 1.4%;
    padding-bottom: 0.6%;
    padding-left: 1%;
    padding-right: 1%;
    cursor: auto;
    border-radius: var(--border-radius-thumbs);
    background-color: var(--clr-bkg);
    background: radial-gradient(closest-side, var(--clr-bkg) 80%, var(--clr-accent-light-3) 150%);

    box-shadow: inset 0 0.3875rem 0.2rem 0 rgba(0, 0, 0, .28),
        inset 0 -0.38rem 0.4rem 0 rgba(255, 255, 255, .53);

    -webkit-box-shadow: inset 0 0.3875rem 0.2rem 0 rgba(0, 0, 0, .28),
        inset 0 -0.38rem 0.4rem 0 rgba(255, 255, 255, .53);
    -moz-box-shadow: inset 0 0.3875rem 0.2rem 0 rgba(0, 0, 0, .28),
        inset 0 -0.38rem 0.4rem 0 rgba(255, 255, 255, .53);
}

.sgHeader
{
    padding-top: 2.0rem;
}

.sgThumbSelected:hover
{
    background: radial-gradient(closest-side, var(--clr-bkg) 50%, var(--clr-accent-light-3) 120%);
}

.sgFullView
{
    position: relative;
    padding: 0 1.5% 1.5% 1.5%;
    background-color: var(--clr-white);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    border: 0.5rem solid var(--clr-text-light-3);
}

#imgFullViewContainer
{
    position: fixed;
    background: rgba(0, 0, 0, 0.75);
    min-height: 100vh;
    min-width: 100vw;
    margin: 0rem;
    cursor: zoom-out;

    background-origin: content-box;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    visibility: hidden;
    z-index: -100;
    cursor: zoom-out;
    padding: 0.5%;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    row-gap: 0.1rem;

    backdrop-filter: blur(10px);
}

.zoomedImageTopBar
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: var(--border-radius);
    column-gap: 0em;
    margin-bottom: 1.0rem;
}

.closebtn
{
    color: white;
    font-size: 3.5rem;
    cursor: pointer;
    padding: 0.4rem 2.0rem 1.6rem 2.0rem;
    margin: 1.0rem;
    text-align: center;
    text-justify: auto;
    border-radius: var(--border-radius);
}

.closebtn:hover
{
    background-color: rgba(149, 62, 62, 0.5);
}


.arrowContainerLeft
{
    position: absolute;
    left: 0.3rem;
    top: 10%;

    display: flex;
    width: 2.5%;
    height: 80%;
    padding: 0px 2.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius);
}

.arrowContainerLeft:hover
{
    background-color: rgba(226, 226, 226, 0.5);
}

.arrowContainerRight
{
    position: absolute;
    right: 0.3rem;
    top: 10%;

    display: flex;
    width: 2.5%;
    height: 80%;
    padding: 0px 2.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius);
}

.arrowContainerRight:hover
{
    background-color: rgba(226, 226, 226, 0.5);
}


.arrow
{
    text-align: center;
    font-size: 3.5rem;
    color: white;
    text-shadow: 0.0rem 0.0rem 1.0rem rgba(0, 0, 0, 0.781);
}



.zoomedImageTitle
{
    top: 0.02rem;
    left: 10%;
    width: 80%;
    padding-left: 1%;
    padding-right: 1%;
    text-align: center;
    color: white;
    font-size: 2.1rem;
    flex-grow: 2;
}

.zoomedImage
{
    flex-basis: auto;
    flex-grow: 2;
    background-origin: content-box;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}


.zoomable
{
    cursor: zoom-in;
}

.contact-cell-inline-image
{
    flex-basis: 2.0rem;
    display: flex;
    gap: 1.0rem;
    align-items: center;
    text-decoration: none;
    color: var(--clr-text);
    margin: 0.4rem 0;
    color: var(--clr-base-dark-2);
    flex-wrap: nowrap;
}

.contact-cell-inline-image>img
{
    flex-basis: 2.0rem;
    max-width: 5.0rem;
}

.contact-cell-inline-image:hover
{
    text-decoration: underline;
}

.contact-cell
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    gap: 3.0rem;

}

.qr
{
    flex-basis: 3.0rem;
    max-width: 20.0rem;
}

.social-logo
{
    flex-basis: 2.0rem;
    max-width: 10.0rem;
}

.contact-cell>img
{
    flex-basis: 5rem;
    max-width: 10rem;
    flex-grow: 1;
    flex-shrink: 1;
}

.contact-container-text
{
    flex-basis: 30rem;
    font-size: 2.0rem;
    flex-shrink: 2;
    flex-grow: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 0 2.0rem 0;
}

.contact-container-text>h2
{
    margin: 0;

}

.contact-container-photo
{
    flex-basis: 20rem;
    max-width: 12.8rem;
    flex-grow: 1;
    flex-shrink: 0;
    padding: 0 4.0rem 4.0rem 0;
}

.contact-container
{
    display: flex;
    flex-wrap: wrap;
    padding: 5rem 4.5rem 3.0rem 4.5rem;
}

.contact-form
{
    display: flex;
    padding: 0;
    flex-direction: column;
    margin: 3.4rem 0 0 0;
    background-color: var(--clr-bkg);
    border-color: var(--clr-base-light-1);
    border-width: 0.1rem;
    border-style: solid;
}

.contact-social-nets
{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 4.0rem;
    padding-top: 4.0rem;
}

.contact-social-nets>a
{

    flex-shrink: 1;
    width: fit-content;
}

.tooltip
{
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext
{
    width: 25rem;
    bottom: 190%;
    left: 30%;
    margin-left: -20.5rem;

    font-size: calc(var(--body-font-size)*0.8);
    font-weight: 300;
    line-height: 110%;

    visibility: hidden;
    background-color: var(--clr-accent-light-3-a);
    color: var(--clr-text);
    text-align: left;
    padding: 1.0rem 2.0rem 1.2rem 2.0rem;
    border-radius: var(--border-radius);
    position: absolute;
    z-index: 1;

    opacity: 0;
    transition: opacity 0.5s;
}

.tooltip:hover .tooltiptext
{
    visibility: visible;
    opacity: 1;
}

.tooltip .tooltiptext::after
{
    content: " ";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: 7.7rem;
    border-width: 1.4rem;
    border-style: solid;
    border-color: var(--clr-accent-light-3-a) transparent transparent transparent;
}

.opacity0 *
{
    opacity: 0%;
}

/* Media Queries--------------------------------------------------------------------------------------*/
/* ==============================
Medium devices (640px and larger)
================================= */
@media only screen and (min-width: 640px)
{


    html
    {
        font-size: 62.5%;
    }


    .icon-paragraph-left-field
    {
        padding: 0.8rem 0 0 0;
        gap: 1.0rem;
    }

    .icon-paragraph-left-field img
    {
        width: 6.4rem;
    }

    .icon-paragraph-left-field-small
    {
        gap: 1.0rem;
    }

    .icon-paragraph-left-field-small img
    {
        width: 3.0rem;
        padding: 1.4rem 0 0 0.5rem;
    }

    .icon-paragraph-text h3
    {
        margin: 1.6rem 0 0 0;
    }

    .icon-paragraph-text h4
    {
        margin: 1.2rem 0 0.8rem 0;
    }
}

/* ==============================
Large devices (1024px or larger)
================================= */
@media only screen and (min-width: 1024px)
{}

/* ==============================
X-large devices (1440px or larger)
================================= */
@media only screen and (min-width: 1440px)
{
    .col-lg-5
    {
        width: 41%;
    }

    .col-lg-7
    {
        width: 59%;
    }

}

/* ==============================
Extra-large devices (1920px or larger)
================================= */
@media only screen and (min-width: 1920px)
{}

/* Animation ----------------------------------------------------------------------------------------------------------*/
@keyframes small-arm-rotate
{
    0%
    {
        transform-origin: 460px 825px;
        transform: rotate(0deg);
    }

    100%
    {
        transform-origin: 460px 825px;
        transform: rotate(360deg);
    }
}

@keyframes small-arm-2-rotate
{
    0%
    {
        transform-origin: 852px 825px;
        transform: rotate(0deg);
    }

    100%
    {
        transform-origin: 852px 825px;
        transform: rotate(360deg);
    }
}

@keyframes big-arm-rotate
{
    0%
    {
        transform-origin: 460px 825px;
        transform: rotate(0deg);
    }

    100%
    {
        transform-origin: 460px 825px;
        transform: rotate(360deg);
    }
}

@keyframes big-arm-2-rotate
{
    0%
    {
        transform-origin: 852px 825px;
        transform: rotate(0deg);
    }

    100%
    {
        transform-origin: 852px 825px;
        transform: rotate(360deg);
    }
}

@keyframes fill-himmel
{
    0%
    {
        fill-opacity: 1;
    }

    10%
    {
        fill-opacity: 0.9;
    }

    30%
    {
        fill-opacity: 0.3;
    }

    50%
    {
        fill-opacity: 0.1;
    }

    70%
    {
        fill-opacity: 0.3;
    }

    90%
    {
        fill-opacity: 0.9;
    }

    100%
    {
        fill-opacity: 1;
    }
}

@keyframes fill-kirche
{
    0%
    {
        fill-opacity: 100%;
        stroke-opacity: 100%;
    }

    10%
    {
        fill-opacity: 90%;
        stroke-opacity: 90%;
    }

    30%
    {
        fill-opacity: 50%;
        stroke-opacity: 50%;
    }

    40%
    {
        fill-opacity: 20%;
        stroke-opacity: 20%;
    }



    60%
    {
        fill-opacity: 20%;
        stroke-opacity: 20%;
    }


    70%
    {
        fill-opacity: 50%;
        stroke-opacity: 50%;
    }

    90%
    {
        fill-opacity: 90%;
        stroke-opacity: 90%;
    }

    100%
    {
        fill-opacity: 100%;
        stroke-opacity: 100%;
    }

}

@keyframes fill-gebirge
{
    0%
    {
        fill-opacity: 100%;
    }

    10%
    {
        fill-opacity: 30%;
    }

    30%
    {
        fill-opacity: 23%;
    }

    50%
    {
        fill-opacity: 15%;
    }

    70%
    {
        fill-opacity: 23%;
    }

    90%
    {
        fill-opacity: 30%;
    }

    100%
    {
        fill-opacity: 100%;
    }

}

@keyframes fill-nacht
{
    0%
    {
        fill-opacity: 0%;
    }

    30%
    {
        fill-opacity: 0%;
    }

    50%
    {
        fill-opacity: 100%;
    }

    70%
    {
        fill-opacity: 0%;
    }

    100%
    {
        fill-opacity: 0%;
    }

}

@keyframes cloud-move-1
{
    0%
    {
        transform: translate(-1067px, 0);
        fill-opacity: 100%;
    }

    50%
    {
        fill-opacity: 60%;
    }

    100%
    {
        transform: translate(0, 0);
        fill-opacity: 100%;
    }
}

svg [class*="anim-"] {
    animation-play-state: paused;
    animation-fill-mode: both;
    transition: animation-play-state 2.0s ease;
  }
  
  svg:hover [class*="anim-"] {
    animation-play-state: running;
  }



.anim-arm-small
{
    animation: 2.5s small-arm-rotate infinite linear;
}

.anim-arm-small-2
{
    animation: 2.5s small-arm-2-rotate infinite linear;
}

.anim-arm-big
{
    animation: 30s small-arm-rotate infinite linear;
}

.anim-arm-big-2
{
    animation: 30s small-arm-2-rotate infinite linear;
}

.anim-himmel
{
    animation: fill-himmel 60s infinite linear;
}

.anim-frauenkirche
{
    animation: fill-kirche 60s infinite linear;
}

.anim-gebirge
{
    animation: fill-gebirge 60s infinite linear;
}

.anim-nacht-background
{
    animation: fill-nacht 60s infinite linear;
}

.anim-cloud-1
{
    opacity: 0.3;
    animation: cloud-move-1 7s infinite linear;
}

.anim-cloud-2
{
    opacity: 0.1;
    animation: cloud-move-1 13s infinite linear;
}

.anim-cloud-3
{
    opacity: 0.5;
    animation: cloud-move-1 11s infinite linear;
}