/****************************** Readme ********************************
Project: Project Management Brunner

Color Gray light: #706f6f;
Color Gray dark: #1f1f1f;
Color Blue: #00a9e7;
Color Green: #6daf2d;

Media Queries
Small: any screen.
Medium: any screen 640 pixels or wider.
Large: any screen 1024 pixels or wider

@media screen and (min-width: 1024px) {}
@media screen and (min-width: 640px) {}
/****************************** Font *********************************/
@font-face {
    font-family: 'GubiaAlternate';
    src: url('../fonts/GubiaAlternate-Regular2.woff2') format('woff2'),
        url('../fonts/GubiaAlternate-Regular2.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/****************************** General ******************************/
body {
    font-family: 'Roboto', sans-serif;
    background: url('../images/bg-site.gif'); 
    font-size: 1.5rem;
    color: #57575f;
}

body.page-home,
.off-canvas {
    background: url('../images/bg-menu.gif');
    color: #aaa;
}

@media screen and (max-width: 639px) {
    body {
        font-size: 1.25rem;
    }
}


h1, h2, h3, h4, h5, h6 {
    font-family: 'GubiaAlternate';
}

footer {
    font-family: 'GubiaAlternate';
}

h1 {
	font-size: 3.125rem;
}

h2 {
	font-size: 3.125rem;
    color: #00a9e7;
    margin-bottom: 0;
}

h3 {
    font-size: 2.5rem;
}

h4 {
    font-size: 1.75rem;
}

h4 a {
    color: #1f1f1f;
}

h4 a:hover {
    color: #706f6f;
}

h3 small {
    color: #57575f;
}
/****************************** Styles *******************************/
.shadow {
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
}

.nav-container {
    background: #706f6f;
    padding: 1rem 0 0.5rem;
    position: relative;
}

.header {
    position: absolute;
    width: 100%;
}

.header-page {
    background: url('../images/bg-nav-page.jpg') center top;
    background-size: cover;
}

.top-bar, .top-bar ul, .top-bar ul li, .top-bar ul li a {
    background: none;
    font-family: 'GubiaAlternate';
    color: #fff;
    font-size: 1.25rem;
}

.top-bar {
    margin-top: 1.15rem;
}

.menu .active > a {
    background: transparent;
    text-decoration: underline; 
}

@media screen and (max-width: 640px) {
    .top-bar {
        margin-top: 0;
    }
    #main-menu { 
        background: url('../images/bg-menu.gif'); 
    }
}

#main-menu a.active {
    border-bottom: 1px solid #999;
}

img.mask {
    margin-top: -55px;
}

@media screen and (max-width: 1100px) {
    img.mask {
        display: none;
    }
}

@media screen and (max-width: 1024px) {
    .header {
        position: relative;
    }
}

.title-bar {
    margin-top: 1.5rem;
    background: none;
    padding-left: 0;
    font-family: 'GubiaAlternate';
}

.title-bar .menu-icon {
    margin-left: 0;
    margin-top: -3px;
}

.title-bar-title {
    cursor: pointer;
}

h1.front-page {
    padding: 1.75rem 3.125rem;
    background-color: #1f1f1f;
    color: #fff;
    display: inline-block;
    position: relative;
    font-size: 2.5rem;
}

@media screen and (max-width: 1400px ) {
    h1.front-page {
        font-size: 2.5rem;
        top: -80px;
    }
}

@media screen and (max-width: 1024px ) {
    h1.front-page {
        font-size: 1.8rem;
        padding: 1.25rem 2.125rem;
        top: -40px;
    }
    #main-menu {
        padding: 0.5rem 0;
    }
}

@media screen and (max-width: 500px ) {
    h1.front-page {
        font-size: 1.8rem;
        padding: 0.8rem 1.25rem;
        top: 0px;
        margin-top: 1rem;
    }
}

.main-content,
.extra-content,
.about-content {
    margin-bottom: 5rem;
}

.extra-content,
.profile-lead,
.project-description {
    font-size: 18px;
}

.extra-content-heading {
    border-bottom: 1px solid #00a9e7;
    margin-bottom: 2rem;
}
@media screen and (min-width: 1024px) {
    .profile-lead h3 {
        margin-top: -0.65rem;
    }
}

a.button {
    display: block;
    margin-bottom: 1rem;
    color: #fff;
    background-color: #00a9e7;
    font-family: 'GubiaAlternate';
    font-size: 1.75rem;
    padding: 0.5rem;
}

a.button.alt {
    margin-bottom: 0;
    background-color: #6daf2d;
}

a.button.alt:hover {
    background-color: #518221;
}

.p1,
.p2 {
    height: 380px;
    margin-bottom: 2rem;
}

.p1 {
    background: url('../images/p1.jpg');
    background-size: cover;
    background-position: center center;
}

.p2 {
    background: url('../images/p2.jpg');
    background-size: cover;
}

.project-lead .text {
    margin-bottom: 3rem;
}

footer.main {
    padding: 3rem 0 1rem;
    background-color: #706f6f;
    color: #fff;
    font-family: 'GubiaAlternate';
    font-size: 1.125rem;
}

footer.main img {
    margin-bottom: 2rem;
}

@media screen and (max-width: 640px) {
    footer.main .logo-footer {
        text-align: center;
    }
    footer.main .contact-footer {
        text-align: center;
    }
}

footer.main a {
    color: #fff;
}

footer.main a:hover {
    color: #aaa;
}

ul.footer-icons li {
    list-style: none;
    display: inline-block;
    margin-left: 1rem;
}

@media screen and (min-width: 640px) {
    ul.footer-icons li {
        list-style: none;
        display: inline-block;
        margin-left: 3rem;
    }
    footer.main .contact-footer {
        text-align: right;
    }
}

.sub-page-heading h1,
.project-page-heading h1 {
    color: #fff;
    background-color: #6daf2d;
    padding-top: 0.35rem;
}

.sub-page-heading {
    margin: 8.75rem 0 5.5rem;
}

.project-page-heading {
    margin: 8.75rem 0 2rem;
}

.profile-heading {
    padding-top: 1.5rem;
    border-top: 1px solid #00a9e7;
}

.profile-heading h2 {
    margin-bottom: 1rem;
}

@media screen and (max-width: 639px ) {
    .profile-lead,
    .profile-heading {
        text-align: center;
    }
    .profile-lead {
        margin-top: 2rem;
    }
}

.gallery-content {
    margin-bottom: 1.875rem;
}

ul.project-data li {
    list-style: none;
    font-family: 'GubiaAlternate';
    font-size: 1.875rem;
    line-height: 1.5;
}

ul.project-data {
    margin: 0;
}

.project-description h2 {
    border-bottom: 1px solid #575757;
    font-size: 1.875rem;
    color: #575757;
    margin-bottom: 1rem;
}

.project-description {
    font-size: 1.25rem;
}

ul.sprachteiler {
    position: absolute;
    right: -39px;
    margin: 0.35rem 0 0;
}

@media screen and (max-width: 1300px) {
    ul.sprachteiler {
        right: 0;
    }
}

@media screen and (max-width: 1023px) {
    ul.sprachteiler {
        margin: 0;
    }
}

ul.sprachteiler li {
    list-style: none;
    background-color: #6daf2d;
    font-size: 1.25rem;
    color: #fff;
    font-family: 'GubiaAlternate';
    text-align: center;
    padding: 0.25rem 0.65rem;
}

ul.sprachteiler li a {
    color: #fff;
}

ul.sprachteiler li.it {
    background-color: #00a9e7;
}

img.logo-top {
    max-width: 180px;
}

.logo-footer img {
    max-width: 230px;
}

.slider-nav-projekt .projekt-img {
    padding: 0 .9375rem .9375rem;
}

.slider-for-projekt {
    max-width: 100%;
}

.slick-next {
    right: 45px !important;
    width: 45px !important;
}

.slick-prev {
    z-index: 990;
    left: 45px !important;
}

.slick-prev::before, .slick-next::before {
    font-size: 45px !important;
    opacity: 0.4 !important;
}

.thumb-content {
    margin-bottom: 2rem;
}

.slick-slide img {
    width: 100%;
}

.img-uebersicht {
    margin-bottom: 1rem;
}

.wpcf7 {
    margin: 1rem 0 4rem 0;
}

.wpcf7 label {
    font-size: 1rem;
    color: #706f6f;
}

input.wpcf7-submit {
    padding: 0.875rem 3rem;
    color: #706f6f;
    background-color: #fff;
    border: 1px solid #999;
}

.main-content h3 {
    margin-top: 2rem;
}

.project-description ul li {
    list-style: none;
    font-family: 'GubiaAlternate';
    font-size: 1.5rem;
}

.project-description ul {
    margin: 0;
}

button.menu-home {
    position: absolute;
    left: -50px;
    font-size: 2rem;
    color: #fff;
    background-color: #1f1f1f;
    padding: 0.5rem;
}

.off-canvas.is-closed {
    visibility: visible;
}

.position-right {
    overflow-y: visible;
}

ul.sprachteiler-home {
    text-align: right;
    margin-top: 2rem;
}

ul.sprachteiler-home li.lang-item {
    list-style: none;
    display: inline-block;
    padding: .7rem 1rem .7rem 0;
    font-size: 1rem;
}

ul.sprachteiler-home li.lang-item a {
    color: #bbb;
}

section.page-heading {
    padding: 9.5rem 0 3rem;
}

img.logo-home {
    display: block;
    margin: 0 auto 4rem;
}

.off-canvas a {
    color: #fff;
}

.off-canvas a:hover {
    color: #ddd;
}

.project-lead h3 {
    line-height: 1;
    margin-top: -0.5rem;
}