/* rgb braun            206,101,51
       rgb helleres Grau    70,75,78
       rgb dunkel grau      55,57,67
       */
       
        @font-face{
            font-family: "BeVietnamPro-Light";
            src: url(font/BeVietnamPro-main/fonts/webfonts/BeVietnamPro-Light.woff2) format("woff2");
        }

        @font-face{
            font-family: "BeVietnamPro-Thin";
            src: url(font/BeVietnamPro-main/fonts/webfonts/BeVietnamPro-Thin.woff2) format("woff2");
        }

        @font-face{
            font-family: "BeVietnamPro-Bold";
            src: url(font/BeVietnamPro-main/fonts/webfonts/BeVietnamPro-Bold.woff2) format("woff2");
        }
        *{
            box-sizing: border-box;
            color: white;
        }
        
        p{
            line-height: 23px;
        }

        
        .toTop {
            display: none;
            position: fixed;
            padding-top: 5px;
            bottom: 150px;
            right: 1%;
            z-index: 99;
            font-size: 18px;
            border: none;
            outline: none;
            background-color: rgba(206,101,51,0.00000001);
            color: white;
            cursor: pointer;
            text-align: center;
            border-radius: 500px;
            }
    
            .toTop:hover {
            background-color: #555;
            }

        

        .nav,.nav-footer {
            color: white;
            text-decoration: none;
            margin-left: 16px;
            font-weight: 700;
        }

        a:hover {
            text-decoration: underline;
        }
            
        body {
            background-color: rgb(55,57,67);
            margin: 0px 0px 0px 0px;
            font-family: "BeVietnamPro-Light";
            font-weight: 300;
        }
        
        .site{
            max-width: 1920px;
        }
        .header{
            background-color: rgb(55,57,67);
            display: flex;
            justify-content:space-between;
            align-items: center;
            padding-left: 3%;
        }

        .img-logo {
            max-width: 350px;
            margin-top: 10%;    
        }
        
            
        .navi-container {
            background-color: rgb(55,57,67);
            display: flex;
            justify-content:flex-end;
            align-self: flex-end;
            padding-right: 3%;
            padding-bottom: 1%;
            }

        .img-head{
            width: 100%;
            height: auto;

        }

        .main{
            background-color: rgb(55,57,67);
        }
    
        /* Container Text und Bild Start */

        .parent,.parent2 {
            margin: 5% 2%;
            display: grid;
            grid-template-columns: repeat(2, 50%);
            grid-template-rows: 100%;
            grid-column-gap: 0px;
            grid-row-gap: 0px;
            }
        
        .div1 { 
            grid-area: 1 / 1 / 2 / 2; 
            margin: 0% 5% 0% 0%;
        }
        .div2 { 
            grid-area: 1 / 2 / 2 / 3;  
        }

        .div3{
            grid-area: 1 / 1 / 2 / 2;
            margin-right: 5%;
            width: 80%;
        }

        .div3-text{
            line-height: 200%;
        }

        .div4 {
            grid-area: 1 / 2 / 2 / 3;
        }

        .div1,.div2,.div3,.div4 {
            text-align: center;
            align-self: center;
        }
        .img1{
            width: 100%;
            height: auto;
            display: flex;
            border-radius: 5px;
            /*box-shadow:13.5px 14px 151.5px -15px  greenyellow*/
        }
        
        .header-list{
            font-size: 30px;
            margin:0% 0% 4% 0%;
        }
        .p-list{
            margin: 1%;
        }

        /*  Container Text und Bild Start */

        .first-text{
            width: 80%;
            text-align: center;
            margin: 0 auto;
        }
        .conatiner-row2{
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        .container-list{
            text-align: center;
            display: flex;
            flex-direction: column;
            background-color: #717171;
            width: 30%;
            justify-content: center;
        }

        .first-h1{
            margin-top: 4%;
            margin-bottom: 3%;  
            font-size: 30px;
        }


        .mainheader,.slide-header{
            margin-bottom: 3%;
            font-size: 30px;
            text-align: center;
        }


        /* Slider */

        .mySlides {
            display: none;}
        .img-slide {
            margin-top: 2%;
            border-radius: 5px;
            vertical-align: middle; 
            width: 70%; 
            height: auto;
        }
        .slide-header{
            margin-top: 5%;  
        }
        /* Slideshow container */
        .slide{
        text-align:center;
        }



        /* The dots/bullets/indicators */
        .dot {
        cursor: pointer;
        height: 20px;
        width: 20px;
        margin: 0 2px;
        background-color: #717171;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
        }

        .active, .dot:hover {
        background-color: #bbb;
        }

        /* Fading animation */
        .fade {
        -webkit-animation-name: fade;
        -webkit-animation-duration: 1.5s;
        animation-name: fade;
        animation-duration: 1.5s;
        }

        @-webkit-keyframes fade {
        from {opacity: .4} 
        to {opacity: 1}
        }

        @keyframes fade {
        from {opacity: .4} 
        to {opacity: 1}
        }

    

            /*Slider*/

        .company-contact{
            margin-top: 5%;
            text-align: center;
        }

        .number{
            font-family: "BeVietnamPro-Bold";
            font-weight: 500 !important;
            margin-left: 0px !important;
            color: white;
            text-decoration: none;
            margin-left: 16px;
            font-weight: 700;
        } 

        /* Style Kontakt*/

        .form-container{
            margin-top: 3%;
            flex-direction: column;
            display: flex;
        }

        .form-column,.form-textarea,.form-button{
            flex-direction: column;
            align-content: center;
            margin-bottom: 1%;
        }

        input[type="text"]{
            font-family: "BeVietnamPro-Thin";
            font-size: small;
            background-color:#717171;
            border: 1px solid rgb(111, 110, 111);
            border-radius: 5px;
            height: 2rem;
            width: 40%;
        }

        .field{
            width: 40%;
            display: flex;
            flex-direction: column;
            align-self: center;
        }
        label{
            text-align: start;
        }
        input[type="text"]:focus{
            outline: none;
            font-size: large;
  	        border: 1px solid greenyellow;
        }

        #nachricht:focus{
            outline: none;
            font-size: large;
            border: 1px solid greenyellow;
            
        }

        #nachricht{
            font-family: "BeVietnamPro-Thin";
            font-size: small;
            background-color:#717171;
            width: 40%;
            height: 7.5rem;
            border: 1px solid rgb(111, 110, 111);
            border-radius: 5px;
            resize: vertical;
        }

        .form-button{
            margin-bottom: 0px;
        }
        .subbtn {
            font-family: "BeVietnamPro-Bold";
            font-weight: 500 !important;
            width: auto;
            height: 2rem;
            background-color: white;
            color: rgb(70,75,78);
            border-radius: 5px;
            border: white;
        }
        .subbtn:hover {
            width: auto;
            cursor: pointer;
            height: 2rem;
            background-color: rgb(70,75,78);
            color: white;
            border-radius: 5px;
            border: rgb(70,75,78);
        }
        .footer {
            background-color: rgb(55,57,67);
            display: flex;
            justify-content:space-between;
            align-self: flex-end;
            margin-top: 2%;
            padding-right: 3%;
            padding-bottom: 1%;
            }
        .copyright {
            align-self: center;
            margin-left: 4%;
        }

        .legal-site{
            align-self: center;
        }

        /* On smaller screens, decrease text size */
        
        @media only screen and (max-width: 900px) {

            .toTop{
                right: 0.5%;
                bottom: 10%;
            }
            .img-slide {width: 100%; height: auto;}
        
            input[type="text"]{
                height: 2rem;
                width: 50%;
            }

            .field{
                width: 40%;
            }
            #nachricht{
                width: 50%;
            }

            .parent {
                display: flex;
                flex-direction: column;
                }
            
            .parent2{
                display: flex;
                flex-direction: column-reverse;
            }
                
            .first-text{
                margin-bottom: 10%;
                text-align: center;
            }
                
            .div3,.div2{
                margin-top: 10%;
                margin-bottom: 5%;
            }
               
            }

        @media only screen and (max-width: 440px) {
            .img-head{
                height: 20vh;
                width: 100vw;
            }

            .img-slide {width: 100%; height: auto;}
        
            input[type="text"]{
                color: white;
                height: 2rem;
                width: 80%;
                margin-bottom: 2%;
            }
            .field{
                width: 80%;
            }

            #nachricht{
                width: 80%;
            }

            .first-text{
                margin-bottom: 10%;
                text-align: center;
            }
            .parent2 {
                display: flex;
                flex-direction: column-reverse;
            }
                
            .div3,.div2{
                margin-top: 10%;
                margin-bottom: 5%;
            }
        
            .copyright{
                display: flex;
                flex-direction: column;
            }

            .legal-site{
                display: flex;
                flex-direction: column;
            }
        }

        /* Button nach oben*/