/* custom.css */

.lines--title {
    font-size: 16px !important;
    font-weight: normal !important;
}

.lines--subtitle {
    font-size: 12px !important;
}

.color--black .jumbotrons--title {
    color: #434343;
}
.jumbotrons .jumbotrons--banner .jumbotrons--title {
    padding-right: 0%;
}

#redim-cookiehint {
    background-color: #838383 !important;
}

#redim-cookiehint .cookiebuttons .btn {
    background-color: #434343 !important;
}

#redim-cookiehint .cookiebuttons .btn:hover {
    background-color: #f6416c !important;
}

ul.drop li{
    background-image: url(../images/theme/tautropfen_drop.jpg);
    background-repeat: no-repeat;
    background-position: left center;
    padding-top: 35px;
    padding-bottom: 30px;
    padding-left: 40px;
    margin-left: -20px;

}

.custombadge-top {
    position: absolute;
    top: 10px;
    right: 100px;
    background: #434343;
    color: #fff;
    line-height: 20px;
    padding: 0px 20px;
    display: inline-block;
    margin: 0px;
    height: 40px;
    width:410px;
}
.custombadge-top a {
    color: #fff;
}

.jumbotrons--layer.color--blue .jumbotrons--title {
    color: rgba(255, 255, 255, 0)
}

.divTable{
	display: table;
	width: 100%;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border: 1px solid #999999;
	display: table-cell;
	padding: 3px 10px;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}

.footer--information .footer--instagram:before {
    content: "\f16d";
    font: normal normal normal 17px/1 FontAwesome;
    position: absolute;
    top: 3px;
    left: 0;
}
.footer--information .footer--facebook,.footer--information .footer--instagram, .footer--information .footer--fax, .footer--information .footer--mail, .footer--information .footer--phone {
    position: relative;
    margin-top: 10px;
    padding-left: 24px;
}

.matrix,.matrix .titel,.matrix .subtitel {padding:10px}
.matrix {padding:10px 20px 10px 0px}
.matrix {max-width: 450px;}
.matrix .titel { font-size: 22px; color: #fff; text-align: center;}
.matrix .subtitel { font-size: 16px; margin-bottom: 5px; text-align: center; height: 85px;}
.matrix-row {display: flex; flex-direction: row; align-items: stretch; flex-wrap:wrap}
.matrix .content {display: flex; flex-direction: row; align-items: stretch;}
.matrix .content > div {padding:15px 10px; min-height: 100px;}
.matrix .content-left {font-size: 16px; width: 150px;}
.matrix .content-right {width: calc(100% - 150px);}
.matrix .content:nth-of-type(odd) .content-left {background-color:#eef1f5}
.matrix .content:nth-of-type(odd) .content-right {background-color:#f9f9fa}
.matrix .content:nth-of-type(even) .content-left {background-color:#f9f9fa}
    
.matrix.grey .titel { background-color: #434343 ;}
.matrix.grey .subtitel { background-color: #e6e9ec ;}

.matrix.blue .titel { background-color: #4cc3d7 ;}
.matrix.blue .subtitel { background-color: #a0d7e0 ;}
.matrix span.blue {color: #4cc3d7 ;}

.matrix.green .titel { background-color: #99d76a ;}
.matrix.green .subtitel { background-color: #b3da96 ;}
.matrix span.green {color: #99d76a ;}

.matrix.pink .titel { background-color: #f6416c ;}
.matrix.pink .subtitel { background-color: #f57f9a ;}
.matrix span.pink {color: #f6416c ;}

.matrix.orange .titel { background-color: #ff9e19 ;}
.matrix.orange .subtitel { background-color: #f8c072 ;}
.matrix span.orange {color: #ff9e19 ;}

.matrix.yellow .titel { background-color: #e0a014 ;}
.matrix.yellow .subtitel { background-color: #e4c88c ;}
.matrix span.yellow {color: #e0a014 ;}

.matrix.purple .titel { background-color: #6f579c ;}
.matrix.purple.subtitel { background-color: #998cb1 ;}
.matrix span.purple {color: #6f579c ;}

.products--detail.color--grey .products--pacshot,
.products--detail.color--grey .products--tabs,
.products--detail.color--grey .products--subtitle,
.products--detail.color--grey .products {display: none;}
.products--detail.color--grey .products--content {width: 100%;}


.jumbotrons .color--green .jumbotrons--banner .jumbotrons--subtitle {
    font-size: 24px;
    font-weight: bolder;
    padding-right: 10px;
    text-align: right;
}
.jumbotrons .color--green .jumbotrons--banner .jumbotrons--title,
.jumbotrons .color--green .jumbotrons--content .jumbotrons--text {
    text-align: right;
}

.jumbotrons .color--green .jumbotrons--content {
    display: none;
}

.jumbotrons--layer.color--green {
    padding-bottom: 150px;
}