/*=================================== */
	/* CSS NAV                            */
	/*=================================== */


       #top-balken {
            height: 9vh;
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            background-color: #F2F2F2;
            padding: 2.5rem;
            -webkit-box-shadow: 1px 1px 2px 2px rgba(33,33,33,0.3);
            box-shadow: 1px 1px 2px 2px rgba(33,33,33,0.3);
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            font-family: 'Montserrat Alternates', sans-serif;
            font-weight: bold;
            font-size: 150%;
            text-align: center;
        }
           
        #nav-desktop a {
            color:#074A59;
            text-decoration: none;
            padding: 1.2rem;
        }

        /*alle links innerhalb der nav-desktop*/
        #nav-desktop a:link {
            }
        #nav-desktop a:hover {
            color: rgba(7,74,89,0.7);
            -webkit-transition: all ease-in-out 0.7s;
            -o-transition: all ease-in-out 0.7s;
            transition: all ease-in-out 0.7s;
            }
        #nav-desktop a:visited {
            }
        #nav-desktop a:active {
            }

        .pfeilmenu {
            height:5rem !important;
            width:5rem !important;
        }

        #gallerypfeil {
            margin-left: 4rem;
        }

        .logo_div {
            position:absolute;
            left:50px;
            top:10px;
            width: 3.5vw;
            height: 3.5vw;
            z-index: 99;
            -webkit-animation:header-load-logo 2.15s ease;
            animation:header-load-logo 2.15s ease;
        }

      .logo_div:hover {
            -webkit-transition: ease 0.4s all;
            -o-transition: ease 0.4s all;
            transition: ease 0.4s all;
            -webkit-transform:scale(1.1);
            -ms-transform:scale(1.1);
            transform:scale(1.1);
         }

        @keyframes header-load-logo{0%{top:-70%}100%{top:40%}}


	/*=================================== */
	/* menu "hamburger" in mobile view    */
	/*=================================== */

        #toggle-button {
            position: fixed;
            visibility: hidden;	
            }

        #nav-mobile a {
            display: none;
            }

	/*=================================== */
	/*             Responsiv              */
	/*=================================== */
    @media screen and (max-width: 1360px){
           .logo_div {
                width: 4vw;
                height: 4vw;
                left:50px;
                top:10px;
                }
    }

    @media screen and (max-width: 1190px){
           .logo_div {
                width:4.5vw;
                height:4.5vw;
                left:50px;
                top:10px;
                }
    } 

    @media screen and (max-width:996px) {
    
            /* top-balken style */
            #top-balken {
                height:16vh;
				display: block;			   
                top:0rem;
                right:0rem;
                padding: 0rem;
                }
    
            /* logo style */
            .logo_div {
                width:8vw;
                height:8vh;
                left:50px;
                top:2vw;
                }
		
            #nav-desktop a {
                display: none;
                }

            #nav-mobile {
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                background-color: rgba(255,255,255,0.9);
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                font-size: 180%;
                height: 100vh;
                width:100vw;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                padding:3rem;
                position: fixed;
                top: 0rem;
                z-index: 100;
                }

            #nav-mobile a {
                border-bottom:2.5px solid rgb(7,74,89);
                color:#074A59;
                display:block;
                font-weight:600;
                padding:1rem;
                text-align:center;
                text-decoration:none;
                }
            #nav-mobile a:hover {
                color: rgba(7,74,89,0.7);
                }

            #toggle-button {
                background-color: rgba(255,255,255,0);
                border: 0px solid black;
                color:#074A59;
                position: absolute;
                visibility: visible;
                top: 2rem;
                right: 2rem;
                padding:1rem 1.3rem;
                z-index: 101;
                }

            #toggle-button .fa {
                font-size:300%;
                } 
            }
    @media screen and (max-width:780px){
            .logo_div {
                width:10vw;
                height:10vh;
                left:50px;
                top:3vw;
            }
    }

    @media screen and (max-width:640px){
            .logo_div {
                width:11vw;
                height:11vh;
                left:50px;
                top:5vw;
            }
    }

    @media screen and (max-width:520px){
            .logo_div {
                width:12vw;
                height:12vh;
                left:50px;
                top:6vw;
            }
            #nav-mobile {
                font-size: 160%;
            }
    }
    @media screen and (max-width: 413px){
            .logo_div {
                width:14vw;
                height:14vh;
                left:50px;
                top:8vw;
            }
             #nav-mobile {
                font-size: 130%;
            }
    }
    @media screen and (max-width: 375px){
            .logo_div {
                width:16vw;
                height:16vh;
                left:50px;
                top:10vw;
            }     
        #nav-mobile {
                font-size: 110%;
            }
    }
    @media screen and (max-width: 300px){
            .logo_div {
                width:17vw;
                height:17vh;
                left:50px;
                top:12vw;
            }  
            #nav-mobile {
                font-size: 90%;
            }
    }