@import url('https://fonts.googleapis.com/css2?family=Donegal+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Palanquin:wght@100;200;300;400;500;600;700&display=swap');
/* --------------------------------------------------------
Allgemein
-------------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

#overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
}

canvas {
    filter: blur(1px);
    position: absolute;
}

.background-medium-dark {
    background: rgba(0, 0, 0, 0.5);
}

.background-shadow-dark {
    background: rgba(0, 0, 0, 0.8);
    padding: 40px 30px;
}

.background-shadow-dark.block {
    width: 80%;
    height: auto;
    margin: 40px auto 0px;
}


.row-video {
    width: 100%;
}

img {
    width: 100%;
    height: auto;
}

iframe {
    width: 100%;
    height: 200px;
}

.hidden{
    display: none !important;
}
/* -------------------
COLORS 
schwarz: #000000;
weiss: #FFFFFF;
gold: #FFD341;
hellblau: #6EB2FF;
dunkelblau: #4C83C2;
hellgrau: #E5E5E5;
------------------- */

/* --------------------------------------------------------
BODY
-------------------------------------------------------- */
/* home */
.body-home {
    display: flex;
    margin: 0px;
    padding: 0px;
    background-size: cover;
    background-image: url('../img/startseite/background.jpg');
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    background-position: -250px 0px;
}

/* site */
.body-site {
    display: flex;
    margin: 0px;
    padding: 0px;
    background-size: cover;
    background-image: url('../img/home/00_home_hg_mobile.jpg');
    background-repeat: no-repeat;
}

.body-site-glyphen {
    display: flex;
    margin: 0px;
    padding: 0px;
    background-size: cover;
    background-image: url('../img/glyphen/00_glyphen_hg_mobile.jpg');
    background-repeat: no-repeat;
}

/* --------------------------------------------------------
TYPOGRAFIE 
-------------------------------------------------------- */
h1 {
    font: normal normal normal 24px/30px Donegal One;
    color: #FFFFFF;
}

h2 {
    font: normal normal normal 18px/23px Donegal One;
    color: #FFFFFF;
}

h3 {
    font: normal normal normal 18px/33px Palanquin;
    color: #FFFFFF;
}

p {
    font: normal normal normal 15px/30px Palanquin;
    color: #FFFFFF;
}

h3 .gold {
    font: normal normal normal 15px/30px Palanquin;
    color: #FFD341;
}

p .blue {
    font: normal normal normal 15px/30px Palanquin;
    color: #6EB2FF;
}

/* --------------------------------------------------------
HEADER
-------------------------------------------------------- */
/* startsite */
.nav-home{
    z-index: 9999;
    position: relative;
}
.nav-home > ul{
    text-align: center;
}
.nav-home > ul > li{
    list-style: none;
    padding: 25px 0;
}
.nav-home > ul > li a{
    text-decoration: none;
}
.nav-home > ul > li a.active{
    text-decoration: underline !important;
    text-decoration-color: #EAEBEB !important;
    text-decoration-thickness: 2px !important;
}
.nav-home > ul > li h2{
    font-size: 25px;
    color:#EAEBEB;
}

/* sites */
header {
    padding: 20px 30px;
}

.row-nav {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}

.col-logo {
    flex-basis: 50%;
}
.col-nav{
    flex-basis: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
header .row {
    padding: 15px 0;
}

.nav-desktop{
    display:none;
    width:100%;
}
.nav-desktop ul{
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
}
.nav-desktop ul li{
    list-style: none;
    padding:0px 20px;
}
.nav-desktop ul li:last-child{
    padding-right: 0px !important;
}
.nav-desktop ul li a{
    text-decoration: none;
}
.nav-desktop > ul > li a.active{
    text-decoration: underline !important;
    text-decoration-color: #EAEBEB !important;
    text-decoration-thickness: 2px !important;
}
.menu-mobile{
    padding:0px 25px;
    position:fixed;
    background-image: url('../img/startseite/background.jpg');
    width:100%;
    height:100vh;
    z-index: 999;
    transition: all 300ms;
    transform: translateX(150%);
    top:0;
    left:0;
    background-position: -250px 0px;
    background-repeat: no-repeat;
    background-size: cover;
}
.menu-mobile-overlay{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: pointer;
}
.logo-mobile{
    padding-top: 75px;
    z-index: 9999;
    position: relative;
}
.nav-mobile{
    z-index: 9999;
    position: relative;
}
.nav-mobile > ul{
    text-align: center;
}
.nav-mobile > ul > li{
    list-style: none;
    padding: 25px 0;
}
.nav-mobile > ul > li a{
    text-decoration: none;
}
.nav-mobile > ul > li a.active{
    text-decoration: underline !important;
    text-decoration-color: #EAEBEB !important;
    text-decoration-thickness: 2px !important;
}
.nav-mobile > ul > li h2{
    font-size: 25px;
    color:#EAEBEB;
}
.nav-burger{
    width: 40px;
    height: 40px;
    z-index: 9999;
    position: relative;
}
.close{
    position: fixed !important;
}
/* --------------------------------------------------------
MAIN
-------------------------------------------------------- */
/* Allgemein */
main {
    width: 100%;
}

.icon>img {
    width: 50px;
    height: 50px;
    border: 2px solid #FFFFFF;
}

.row-beforemain {
    display: flex;
}

.site-title {
    display: flex;
    align-items: center;
    padding-left: 35px;
}

/* Home */

.main-home {
    display: flex;
    position: fixed;
}

.logo-home>img {
    width: 85% !important;
}

/* Sites */
.title {
    display: flex;
    align-items: center;
}

/* Glyphen-Site */
.row-text {
    padding: 40px 0px;
}

.container-glyph-img {
    padding-bottom: 20px;
}

.container-glyph-img:last-child {
    padding-bottom: 0px;
}

/* Finesse-Site */

.finesse .block{
    padding: 0px !important;
}

.finesse .block > .row-title{
    padding: 40px 30px 12.5px 30px;
}
.finesse .block > .row-icon{
    padding: 0px 30px 0 30px;
}
.finesse .block > .row-finesse-text{
    padding: 0px 30px 40px 30px;
}
.row-text.abstand-0 {
    padding-bottom: 0px;
}


.row-icon {
    padding: 15px 0;
}

.finesse-icon {
    display: flex;
    justify-content: flex-end;
}

.finesse-icon img {
    width: 50px;
    height: 50px;
    border: 2px solid #FFFFFF;
}

hr {
    border: 1px solid #FFFFFF;
    width: 100%;
    margin:-25px 0 37.5px 0px;
}

/* EL-Site */
.row-el {
    display: flex;
    padding-bottom: 30px;
}

.row-el:last-child {
    padding-bottom: 0px;
}

.el-pic {
    width: 45%;
    padding-right: 20px;
}

.el-pic>img {
    height: 135px;
    width: auto;
}

.el-description {
    max-width: 160px;
}

/* Kontakt-Site */
form {
    display: flex;
    flex-flow: column;
}

.name,
.email,
.message {
    margin-bottom: 20px;
}

input {
    width: 100%;
    padding: 10px;
    background: #E5E5E5;
    border: 2px solid #FFFFFF;
}

textarea {
    width: 100%;
    height: 120px;
    padding: 10px;
    background: #E5E5E5;
    border: 2px solid #FFFFFF;
}

button {
    font: normal normal normal 18px/20px Donegal One;
    width: 150px;
    height: 45px;
    background: #6EB2FF;
    border-radius: 23px;
    color: #FFFFFF;
}

button:hover {
    background: #4c83c2;
}
/* Impressum */
.row-title,
.row-icons,
.row-fireflies {
    margin-top: 20px;
}

.row-title a,
.row-icons a,
.row-fireflies a {
    text-decoration: none;
}

.container-impressum{
    height:100vh;
}
/* --------------------------------------------------------
FOOTER
-------------------------------------------------------- */
footer {
    padding: 20px 30px;
}



/* --------------------------------------------------------
GRID
-------------------------------------------------------- */
/* Allgemein */
.container {
    margin: 0 auto;
}

.container-inner {
    padding: 75px 100px;
}

.center {
    display: flex;
    justify-content: center;
    width: 100%;
}


/* Home */
.container-home {
    display: flex;
    flex-flow: row wrap;
    z-index: 999;
    padding-top: 75px;
}
.container-home > div {
    flex-basis: 100%;
}

.container-home>div.row:first-child {
    padding-bottom: 20px;
}



/* ------------------- MEDIA SCREEN ------------------- */
@media (min-width: 768px) {

    .container {
        width: 750px;
    }

    /* Header */
    .col-tablet-6 {
        flex-basis: 50%;
    }

}

@media (min-width: 1200px) {
    /* Allgemein */
    .icon > img {
        width: 64px;
        height: 64px;
    }
    iframe{
        height: 450px;
    }
    hr{
        margin: -32.5px 0px 37.5px 0px;
    }
    button{
        font-size: 20px;
    }
    .body-site-glyphen{
        background: url('../img/glyphen/00_glyphen_hg_desktop.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    .body-site{
        background: url('../img/home/00_home_hg_desktop.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .container {
        width: 1170px;
    }

    /* --------------------------------------------------------
TYPOGRAFIE
-------------------------------------------------------- */
    h1 {
        font: normal normal normal 30px/37px Donegal One;
        color: #FFFFFF;
    }

    h2 {
        font: normal normal normal 20px/25px Donegal One;
        color: #FFFFFF;
    }

    h3 {
        font: normal normal normal 20px/36px Palanquin;
        color: #FFFFFF;
    }

    p {
        font: normal normal normal 18px/33px Palanquin;
        color: #FFFFFF;
    }

    h3 .gold {
        font: normal normal normal 20px/36px Palanquin;
        color: #FFD341;
    }

    p .blue {
        font: normal normal normal 18px/33px Palanquin;
        color: #6EB2FF;
    }

    /* Header */
    .col-desktop-6 {
        flex-basis: 50%;
    }
    .nav-desktop{
        display:flex;
    }
    .nav-burger{
        display:none;
    }
    .col-logo{
        flex-basis:20%;
    }
    .col-nav{
        flex-basis: 80%;
    }
    .logo{
        width:200px;
    }
    .row-nav{
        padding: 0px 40px;
    }
    /*Body */
    .background-shadow-dark{
        padding: 65px 100px;
        margin: 30px auto;
        width: 90%;
    }
    /* Index-Site */
    .main-home {
        display: flex;
        position: unset;
        align-items: center;
    }
    .container-home{
        padding-top: 0px;
    }
    .body-home {
        display: flex;
        margin: 0px;
        padding: 0px;
        position: unset;
        background-size: cover;
        background-image: url('../img/startseite/background.jpg');
        background-repeat: no-repeat;
        width: 100vw;
        height: 100vh;
        background-position: 0px 0px;
    }
    .logo-home > img{
        width: 50% !important;
    }
    .nav-home {
        width: 100%;
    }

    .nav-home>ul {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
    }

    .nav-home>ul>li {
        list-style: none;
        padding: 0px 20px;
    }
    .nav-home>ul>li h2 {
        font-size: 20px;
    }
    .nav-home>ul>li>a {
        text-decoration: none;
    }
    /* Glyphen-Site */
    .row-glyphen{
        display: flex;
    }
    /* Finesse-Site */
    .finesse-desktop-grid{
        display: flex;
        flex-flow:row wrap;
        width: 90%;
        margin: 0 auto;
    }
    .finesse-desktop-grid > div{
        flex-basis:45%;
    }
    .finesse-icon img{
        width: 64px;
        height:64px;
    }
    /* EL-Site */
    .el-desktop-grid{
        display: flex;
        flex-flow:row wrap;
    }
    .el-desktop-grid > div{
        flex-basis:50%;
    }
    .el-pic{
      width:35%;
    }
    .el-pic > img{
        height:166px;
    }

}