@font-face {
    font-family: 'pacifica-condensed-regular';
    src: url('../fonts/pacifica-condensed-regular.ttf') format('truetype');
}

@font-face {
    font-family: 'palatino-linotype-bold';
    src: url('../fonts/palatino-linotype-bold.ttf') format('truetype');
}

body {
    background: url("../images/piano-background.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: #fff;
    font-size: 14px;
    font-family: "Open Sans",sans-serif;
}

.brown {
    color: #7a5a24;
}
.row.space-between {
    margin: 30px 0;
}

/************************ HEADER BEGIN ************************/

#header{
    margin-top: 20px;
}
#header .navigation-bar .nav-element {
    color: #fff;
    font-size: 16px;
    text-align: center;
}

#header .navigation-bar .nav-element.selected,
#header .navigation-bar .nav-element:hover,
#header .navigation-bar .nav-element:focus{
    color: #7a5a24;
    text-decoration: none;
}

/************************ HEADER END ************************/


/************************ MAIN BEGIN ************************/

#main-content{
    margin-top: 20px;
}

#main-content .box-shadow-container {
    background-color: rgba(0,0,0,0.6);
}

#main-content .title {
    text-align: center;
    margin-top: 20px;
    font-family: 'pacifica-condensed-regular',fantasy;
}

#main-content .border-separator {
    border-bottom: 3px solid #424242;
}

#main-content .content {
    min-height: 769px;
}

/************************ MAIN END ************************/







/************************ FOOTER BEGIN ************************/
#footer{
    border-top: 3px solid #424242;
}

#footer .icon {
    width: 20px;
    height: 20px;
    margin: 5px 15px;
    cursor: pointer;
    text-decoration: none;
}

#footer #facebook-icon {
    background: url("../images/icon/facebook.webp") no-repeat center center;
    float: right;
}
#footer #instagram-icon {
    background: url("../images/icon/instagram.webp") no-repeat center center;
    float: right;
}
#footer #youtube-icon {
    background: url("../images/icon/youtube.webp") no-repeat center center;
    float: right;
}

/************************ FOOTER END ************************/

@media (max-width: 564px) {
    #header .nav-element {
        padding-left: 0px;
        padding-right: 0px;
    }
}