@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500&display=swap');
*{
    margin: 0;
    padding:0;
    color: #ebebeb;
}
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}
.background{
    background-color: #f2f2f2;
    /* background-image: url("../img/pianobackground.png"); */
    background-image: url("../img/Orgelfront.png");
    /* background-image: url("../img/pianoleeg.png"); */
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    /* opacity: .5; */
    /* background-position: left;
    background-size: 7% 80%; */
}
img{
    box-shadow: 4px 4px 14px 2px rgba(0,0,0,0.84);
}
html, body{
    height: 100%;  
    font-size: 18px; 
}
ul{
    margin-left: 10%;
}
li{
    padding-left: 25px;
    padding-right: 25px;
}

/* Header */
header{
    width: 100%;
}
header p{
    margin-bottom: 0px;
}
header h1{
    margin-bottom: 0px;
}
.titel{
    padding-top: 30px;
    color: #ebebeb;
}
td a{
	text-decoration: none;
    color: #ebebeb;
}
td a:hover{
	text-decoration: none;
    color: #ebebeb;
}
#link{
    text-decoration: none;
    color: #ebebeb;
}
.link{
    text-decoration: none;
    color: #ebebeb;
}
.link:hover{
    text-decoration: none;
    color: #343A40;
}
#header{
    background-color: #343A40;
    text-align: center;
    height: 135px;
    font-size: 20px;
    font-family: 'Cormorant Garamond', serif;
}
/* Header */
/* Home */
/* .sliderbackground{
    position: absolute;
    width: 100%;
    height: 406px;
    margin: 0;
    padding: 0;
    background-color: #976f31;
    z-index: 2;
} */

#navbarSupportedContent{
     padding-left: 10%;
     font-family: 'Lora', serif;
}
#navbarSupportedContent li{
    padding-left: 15px;
}
#carousel{
    width: 100%;
    height: 100%;
    z-index: 2;
}
#slider{
    position: relative;
    margin-top: -12.5%;
    z-index: 2;
}
#welcome-title{
    padding-top: 2%;
    padding-left: 13%;
    padding-right: 15%;
    padding-bottom: 2%;
}
#welcome-content{
    width: 100%;
    padding-left: 15%;
    padding-right: 40%;
}
/* home */
/* CV */
#cv-title{
    padding-top: 0%;
    padding-left: 13%;
    padding-right: 15%;
    padding-bottom: 5%;
}
#cv-title-home{
    padding-top: 0%;
    padding-left: 13%;
    padding-right: 15%;
    text-align: center;
}
#cv-content{
    padding-left: 15%;
    padding-right: 15%;
}
#cv-wrap{
    padding-top: 10%;
    padding-left: 10%;
    padding-right: 10%;
    font-family: 'Lora', serif;
}
/* CV */

footer{
    position: relative;
    height: 100px;
    width: 100%;
    margin-top: -50px;
    padding-top: 20px;
    clear: both;
    background-color: #343A40;
    color:white;
    text-align: center;
}
footer div{
    width: 100%;
}
.home.content{
    padding-left: 15%;
    padding-right: 15%;
    padding-bottom: 100px;
    overflow: auto;
    min-height: 100%;
    background-color: rgba(151, 111, 49,0.811);
}
#wrapper{
    padding-bottom: 100px;
    overflow: auto;
    min-height: 100%;
    background-color: rgba(151, 111, 49, 0.811);
    z-index: 1;
}  

/* Login */
#login-form{
    padding-top: 5%;
    padding-left: 25%;
    padding-right: 25%;
}
#login-title{
    padding-top: 10%;
    padding-left: 43%;
    padding-bottom: 0%;
}
#login-form input, label{
    margin-top: 4%;
}
.form-group input[type=text], input[type=email], input[type=password], .form-group textarea{
    border: none;
    background: rgba(255, 255, 255, .5);
}

/* login */

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

  /* Contact */
.contact-form{
    width: 100%;
}
.contact-form form{
    padding: 0%;
}
.contact-form .form-control{
    border-radius: 5px;
    width: 100%;
}

.contact-form form .row{
    margin-bottom: -7%;
}
.contact-form h3{
    margin-bottom: 8%;
    margin-top: -10%;
    text-align: center;
    color: #0062cc;
}
.btnContact {
    width: 100%;
    border: none; 
    border-radius: 10px;
    padding: 5px;
    background: #343A40;
    color: #fff;
}

.contact_info{
    padding-bottom: 5%;
    text-align: center;
}
    /* contact */

@media screen and (max-width: 900px) and (min-width: 20px) {
    .background{
        background-color: #f2f2f2;
        background-image: none;
    }
    .contact_info{
        padding-bottom: 5%;
    }
    #header{
        background-color: #343A40;
        text-align: center;
        height: 135px;
        font-size: 20px;
        font-family: 'Cormorant Garamond', serif;
    }
    footer{
        position: relative;
        width: 100%;
        
        height: 100px;

        /* margin-top: -50px; */
        padding-top: 20px;
        clear: both;
        background-color: #343A40;
        color:white;
        text-align: center;
        bottom: 0;
    }
    footer div{
        width: 100%;
        margin: 0%;
    }
    .agenda{
        padding: 0%;
    }
    header{
        width: 100%;
    }
    #slider{
        position: relative;
        padding: 0%;
        height: 100%;
    }
    #carousel{
        width: 100%;
    }
    #navbarSupportedContent li{
        padding-left: 0px;
    }

    #cv-wrap{
        padding-top: 10%;
        padding-left: 0%;
        padding-right: 0%;
    }
    #cv-title{
        padding-top: 0%;
        padding-left: 7%;
        padding-right: 7%;
        padding-bottom: 5%;
    }
    #cv-content{
        padding-left: 0%;
        padding-right: 0%;
    }

    #login-form{
        padding-top: 10%;
        padding-left: 0%;
        padding-right: 0%;
    }
    #login-title{
        padding-top: 10%;
        padding-left: 30%;
        padding-bottom: 0%;
    }
    #welcome-title{
        padding-bottom: 0%;
    }
    #welcome-content{
        padding-left: 10%;
        padding-right: 10%;
        padding-bottom: 0%;
        height: 100%;
    }
    .home_wrap{
        padding-top: 0%;
        padding-left: 0%;
        padding-right: 0%; 
        padding-bottom: 0%;
        width: 100%;
    }
    .contact-form form{
        padding: 10%;
    }
}