/* CSS Styles */

/*
Primär       #3a2072
Sekundär     #553b8c
Hintergr.    #d6cb82
*/

/* roboto-300 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/roboto-v30-latin-300.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('fonts/roboto-v30-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/roboto-v30-latin-300.woff') format('woff'), /* Modern Browsers */
         url('fonts/roboto-v30-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/roboto-v30-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
  }
  /* roboto-regular - latin */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
  }
  /* roboto-500 - latin */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/roboto-v30-latin-500.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('fonts/roboto-v30-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/roboto-v30-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/roboto-v30-latin-500.woff') format('woff'), /* Modern Browsers */
         url('fonts/roboto-v30-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/roboto-v30-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
  }
  /* roboto-700 - latin */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/roboto-v30-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('fonts/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/roboto-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/roboto-v30-latin-700.woff') format('woff'), /* Modern Browsers */
         url('fonts/roboto-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/roboto-v30-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
  }


body {
    background-color:#d6cb82;
    margin:0 auto;
    font-family:'Roboto', sans-serif;
    color: #3a2072;
}

hr {
    border: none;
    outline: none;
    height: 1px;
    background-color: #3a2072;
    margin: 25px 0;
}

p {
    margin: 0 0 15px;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 20px;
    margin-bottom: 5px;
}

a {
    color:#3a2072;
    text-decoration: underline;
    transition: all .2s ease-in-out;
}

a:hover, .current-page {
    color:#553b8c;
    text-decoration:none;
    transition: all .2s ease-in-out;
}

.main-container {
    position:relative;
    padding: 50px 20px;
    width:70%;
    max-width:70%;
    margin:0 auto;
}

.logo-container {
    margin: 0 auto;
    width: 300px;
    height: auto;
    display: block;
}

.logo {
    margin: 20px auto;
    width:300px;
    height: 300px;
    -webkit-filter:drop-shadow( 0px 0px 20px rgba(255, 255, 255, .9));
    filter:drop-shadow( 0px 0px 20px rgba(255, 255, 255, .9));
}

.subsite .logo-container {
    position: absolute;
    right: 10%;
    top: 0;
    width:auto;
}

.subsite .logo {
    display:block;
    width:200px;
    height:auto;
}

.flex {
    width:700px;
    margin:0 auto;
    display:flex;
    flex:0 1 100%;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.foto {
    width:36%;
}

.foto img {
    border-radius: 50%;
}

.adresse {
    width:29%;
}

.sprechzeiten {
    width:100%;
}

.sprechzeiten h4 {
    text-align:center;
}

.kontakt {
    width:34%;
}

.foto div, .adresse div, .kontakt div {
    padding:10px;
}

.infotext h1 {
    text-align: center;
}

.subsite .text-content {
    width:80%;
    margin:0 auto;
    margin-top: 5%;
}

.table-blank td {
    padding: 1px 20px;
}

.table-blank td:first-child {
    padding-left:0;
}

.footer {
    position:fixed;
    bottom:0;
    background-color:#3a2072;
    width:100%;
    margin-top: 50px;
}

.footer-menu {
    margin-bottom:16px;
}


.footer-menu {
    list-style-type: none;
    text-align:center;
    padding-left:0;
}

.footer-menu li {
    display:inline-block;
    padding:5px 15px;
}

.footer-menu li:first-child {
    padding-left:0;
}
.footer-menu li:last-child {
    padding-right:0;
}

.footer-menu li a {
    color:#d6cb82;
    text-decoration:none;
    transition: color .2s ease-in-out;
}

.footer-menu li a:hover, .footer-menu li .current-page {
    color:#afa567;
    text-decoration:underline;
    transition:color .2s ease-in-out;
}

@media (max-width:989px) {
    .flex div {
        width:100%!important;
    }

    .adresse, .kontakt {
        padding-left: 0;
    }

    .table-blank {
        width:100%;
    }

    .table-blank td {
        padding:2px!important;
    }

    .table-blank .days, .table-blank .hours {
        display:inline-block;
        width:48%;
    }

    .table-blank .full {
        width:100%;
        display:block;
    }

    .subsite .logo-container {
        position: relative;
        width: 100%;
        right: auto;
    }

}

@media (max-width:767px) {
    body {
        width:100%;
        max-width: 100%;
    }
    .logo {
        width:auto;
    }

    .flex {
        width:100%;
    }

    .subsite .text-content {
        width:85%;
    }

    .mainpage .infotext {
        margin: 0 5%;
        text-align: center;
    }
    .mainpage h4 {
        text-align: center;
    }

    .main-container {
        padding:0;
        width:100%;
        max-width:100%;
        padding-bottom:60px;
    }
}