/* roboto-300 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/roboto-v29-latin-300.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/roboto-v29-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/roboto-v29-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/roboto-v29-latin-300.woff') format('woff'), /* Modern Browsers */
         url('../fonts/roboto-v29-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/roboto-v29-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
  }
  /* roboto-500 - latin */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/roboto-v29-latin-500.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/roboto-v29-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/roboto-v29-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/roboto-v29-latin-500.woff') format('woff'), /* Modern Browsers */
         url('../fonts/roboto-v29-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/roboto-v29-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
  }
/* General elements*/
body{
    background-color: #21251F;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    margin-bottom: 20px;
    overflow-x: hidden;
}
.anav{
    color:white;
}

a:hover{
    color: goldenrod;
}

a{
    color: #fff;
    text-decoration: none;
}

.picto{
    width: 100px;
    padding-bottom: 10%;
    text-align: center;
}
.bg-dark{
    background-color: #21251F !important;
}

.navbar-collapse{
    display: flex;
    flex-direction: row;
}

.nav-flex{
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
}

.nav-text{
    display: flex;
    justify-content: end;
    margin-right: 2%;
}

/*Leistungen table*/
table{
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
tr td:nth-child(2){
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
}

table tr:nth-child(2){
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

td{
    text-align: center;
    width: 33%;
}

tr{
    vertical-align: top;
}

h5{
    height: 50px;
}

.table{
    color: #fff;
    margin: 0 auto;
}

.text-right{
    text-align: right;
}


/*Vorteile*/
.haken{
    margin-top: 10%;
    margin-bottom: 5%;
	padding-left: 5%;
    width: 30%;
}

.vorteile{
    display: flex;
    justify-content: flex-start;
    gap: 2%;
}

.vorteile>*{
    flex: 1 1 10%;
}

/*Footer*/
.fusszeile{
    font-size: 13px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}


/*Media queries*/
@media only screen and (max-width: 991px) {
    /* Force table to not be like tables anymore */
    #no-more-tables table,
    #no-more-tables thead,
    #no-more-tables tbody,
    #no-more-tables th,
    #no-more-tables td,
    #no-more-tables tr {
    display: block;
    }
     
    /* Hide table headers (but not display: none;, for accessibility) */
    #no-more-tables thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
    }
     
    #no-more-tables tr { border: 1px solid #ccc; }
      
    #no-more-tables td {
    /* Behave like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    white-space: normal;
    text-align:center;
    width: 100%;
    }
     
    #no-more-tables td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align:left;
    font-weight: bold;
    }
    
    .vorteile{
        flex-wrap: wrap;
        
        justify-content: space-between;
        align-items: center;
    }

    .vorteile>*{
        flex: 1 1 30%;
        height: 150px;
    }

    h3,h5,h6{
        text-align: center;
    }
   
    }


    @media only screen and (max-width: 577px) {
        .vorteile>*{
            flex: 1 1 45%;
        }

        h6{
            font-size: 12px;
        }
    }