body {width : 100%; max-width : 1920px; color : #413e2e; margin : 0 auto; padding : 0; font-size : 100%; font-style: normal; font-weight: normal;
font-family: 'RobotoSlab-Regular', Georgia, 'Times New Roman', Times, serif; background: #eae8db; background-image: url(images/bg3.gif);}

@font-face {font-family: 'RobotoSlab-Regular';font-display:swap;src: local('RobotoSlab-Regular'), local('Nunito-SemiBold'), url('RobotoSlab-Regular.woff2') format('woff2'), url('RobotoSlab-Regular.woff') format('woff');}
@font-face {font-family: 'RobotoSlab-Bold'; font-display: swap;src: local('RobotoSlab-Bold'), url('RobotoSlab-Bold.woff2') format('woff2'), url('RobotoSlab-Bold.woff') format('woff');}


html {scroll-behavior : smooth;}
header {display : block;text-align : center;}
* {box-sizing : border-box;}

*::before,
*::after {box-sizing: border-box;}

img {width:96%; height:auto; max-width: 100%; border: none; text-decoration: none;margin: 0 auto;text-align:center;}

a {text-decoration : none;border : none; transition : 0.2s ease; cursor : pointer; color : #b13d40;}
a:hover {color : #ff8f08;}

br {padding : 0;margin : 0;}
ul{margin: 0; padding: 0;list-style: none;}

h1, h3 {color: #b13d40; font-family: 'RobotoSlab-Bold'; font-size: calc(22px + 0.8vw); line-height: 1.3em; margin: 1em auto 0 auto;}
h2, h4, h5 {color: black; font-family: 'RobotoSlab-Bold'; font-size: 1.3em; line-height: 1.3em; margin: 0.3em auto 1em auto;}
h4 {margin: 1em auto;}
h5 {margin: 0.3em auto;}
h6 {color: #b13d40; font-family: 'RobotoSlab-Bold'; font-size: 1.4em; line-height: 1.2em; text-align: left; margin: 1em auto 0 auto;}

p {font-size : 1.1em;line-height : 1.4em;margin : 0 0 1em 0;text-align: justify;hyphens: auto;transition : 0.3s ease-in-out;}
strong {color: black; text-shadow: 0 0 1px #5e4d1e;}
.rot {color: #b13d40;}

.hp {color: #b13d40; font-family: 'RobotoSlab-Bold'; font-size: 1.4em; line-height: 1.3em; margin: 1em auto 0 auto;}
.hp-2 {color: black; font-size: 1.2em; line-height: 1.2em; margin: 1em auto 0 auto;}
.mittig {text-align: center;}
.klein{font-size: 90%; color: #777; font-style: italic;}
.eingerueckt {display : block;text-align : left;margin : 0.3em 0;padding-left : 2em;}
k { color: black; font-style: italic; text-shadow: 0 0 1px #5e4d1e;}

.schrift {color:#8f7819; margin: 0 auto; font-size: 1.4em; text-align:center; text-transform: uppercase;
text-shadow: 0 0 1px #5e4d1e;}
.schrift-klein, .schrift-klein-bibel {display: table; border-radius:8px; text-align:center; margin: 0 auto 1em auto; padding: 3px 8px; font-size: 80%; background: #f1f0eb; color: #413e2e;}
.schrift-klein-bibel {background: transparent;}

.widerruf {border-radius: 8px; padding: 1em; margin: 1em auto; text-align: center; background: #f3dedf;}
.triangle{margin : 1em auto;width : 20%;height : 3px;background : #ff8f08;border-radius : 8px;}
.rahmen {border-radius: 8px; padding: 1em; margin: 1em auto; background: #fffaf7; border: solid 3px #ff8f08;}

#main {display: flex; flex-wrap: wrap; width:100%; max-width: 880px; margin: 2em auto; background: #f1f0eb; box-shadow:1px 0 15px #888, -1px 0 15px #888;border-radius: 8px;}
#main article {display:inline-block; width:70%;vertical-align:top; text-align:center; margin: 0 auto; padding: 2em 0.8em;}

#main aside {display:inline-block; width:30%; padding: 2em 0.8em 2em 0em; vertical-align:top;}
#main aside section {font-size: 90%; color : #413e2e; margin-bottom: 0.8em; padding: 5px; border-radius: 8px; box-shadow: 0 10px 10px -5px #aaa; transition: all 0.2s ease;}
#main aside section p {text-align: left;margin-bottom:0.5em;}
#main aside section p.kurz {overflow: hidden;text-overflow:ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;}
#main aside section:hover {color : black; background: #f1f0eb;}
#main aside section span {display: block; font-size : 1em; line-height : 1.2em;margin : 3px 0;text-align: left;}
#main aside section h5 {font-size : 1.2em; line-height : 1.2em;}

#main aside section.verse {background: #f5e8d3;text-shadow: 0 0 1px #5e4d1e;}
#main aside section.gold {border-left: solid 3px #8f7819;background: #fcf8ec;}
#main aside section.gold h5 {color: #8f7819;}

#main aside section.normal {border-left: solid 3px #ff8f08; background: #d8d1bc; box-shadow: none;}
#main aside section.normal:hover {border-left: solid 8px #b13d40; background: white; box-shadow: 0 0 5px #aaa;}
#main aside section.normal:hover h5 {color: #b13d40;}

#main aside section.red {border-left: solid 5px #c4000f;}
#main aside section.red h5 {color: #c4000f;}
#main aside section.orange {border-left: solid 5px #ff5108;}
#main aside section.orange h5 {color: #ff5108;}
#main aside section.sonne {border-left: solid 5px #ffc411;}
#main aside section.sonne h5 {color: #ffc411;}
#main aside section.green {border-left: solid 5px #359800;}
#main aside section.green h5 {color: #359800;}
#main aside section.blue {border-left: solid 5px #0099cb;}
#main aside section.blue h5 {color: #0099cb;}
#main aside section.dblue {border-left: solid 5px #151ab7;}
#main aside section.dblue h5 {color: #151ab7;}
#main aside section.lila {border-left: solid 5px #65018b;}
#main aside section.lila h5 {color: #65018b;}

#main aside section.rgba {padding-left: 10px;}
.border-gradient:before {content: ""; position: absolute; inset: 0; padding: 0 0 0 5px; background: linear-gradient(#c4000f, #ff5108, #ffc411, #359800, #0099cb, #151ab7, #65018b); border-radius: inherit; mask: conic-gradient(#000 0 0) content-box exclude,conic-gradient(#000 0 0);}
.border-gradient {position: relative;}



@media screen and (max-width:550px){
#main {width:92%;}
#main aside, #main article {width:100%; display:block; margin: 0.5em auto; padding: 1em 0.8em;}
#main aside section {font-size: 100%;}
}



.he {display: block;width : 100%;max-width: 880px;height: 100vh;max-height : 130px;margin: 0 auto;background: #383838;border-radius: 8px 8px 0 0;}
.he img {object-fit : cover;width : 100%;height : 100%;border-radius: 8px 8px 0 0;border-bottom: 3px solid #ff8f08;}


.posts {margin: 0 auto; width: 100%;background: white;border-radius: 8px;}



nav {display: flex; flex-wrap: nowrap; align-items: center;  justify-content: center; width: 100%; background: #d8d1bc; border-radius: 8px 8px 0 0;border-bottom: 3px solid #ff8f08;}
nav .inner {font-family: 'RobotoSlab-Bold'; background: white; font-size: 1.1em; color: #413e2e; border-radius:8px; padding: 5px 10px; margin: 5px; transition : 0.2s linear;}
nav .inner:hover, nav .inner.active, nav .inner.passiv:hover {background: #b13d40; color: white;}
nav .inner.passiv {color: #b13d40;}
@media screen and (max-width:550px){
nav .inner{font-size: 98%;}
}

/*Menu*/
.dropdown {position: relative; display: inline-block; }
.dropbtn {font-size: 1.2em; color: black; padding: 5px 10px; margin: 5px; background: white; border: none; border-radius: 8px; transition : 0.2s linear; cursor: pointer; }
.dropbtn:hover {box-shadow: 0 0 0 3px #b13d40;}

.dropdown-content {display: none; position: absolute; right: 5px; margin-top: 8px;background: #f1f0eb; min-width: 280px; box-shadow: 0 20px 20px -1px rgba(0,0,0,0.7); z-index: 10;}
.dropdown-content a {display: block; color: black; padding: 10px; text-decoration: none; border-bottom: solid 1px #d8d1bc;border-top: solid 1px white;}
.dropdown-content a:hover {background: #d8d1bc;}

.show {display:block;}



/*** menu ***/
.open {opacity : 0;width: 0;height: 0;}

@media only screen and (min-width: 300px) and (max-width: 550px) {
.open {opacity : 1;display: block;position: fixed;top: 5px;left:94%;transform: translate(-94%, 0%);width: 50px;height: 50px;border-radius: 50%;background-color: #383838;cursor: pointer;transition: opacity 0.2s linear; z-index: 500;transition: all 0.4s ease-in-out;}
.open span {display: block;position: absolute;height: 7px;width: 31px;border-radius: 8px;background-color: white;left: 9px;top: 0;overflow: hidden;
transition: all 0.4s ease-in-out; }
.open span:nth-child(1) {top: 11px;z-index: 9;}
.open span:nth-child(2) { top: 21px; }
.open span:nth-child(3) { top: 31px; }

.sub-menu {position: absolute; height: 0; width: 0; left: 0; top: 5px;transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);border-radius: 8px;overflow: hidden; box-shadow : 0 5px 15px -5px rgb(0, 0, 0, 0.8);z-index: 10;}
.sub-menu li {width: 100%;text-align: center; margin: 0 auto;border-bottom: solid 1px #d8d1bc;border-top: solid 1px white;}
.sub-menu li a {display: block;width: 100%;height: auto;transition: all 0.4s ease-in-out;color: black;font-size: 1.1em;line-height: 1.2em; padding: 10px;
background-color: #f1f0eb;}
.sub-menu li a:hover {background:#d8d1bc;}

.oppenned .sub-menu {opacity: 1;width: 100%; height: auto;}
.oppenned span:nth-child(2) { overflow: visible;}
.oppenned span:nth-child(1),
.oppenned span:nth-child(3) {z-index: 100;transform: rotate(45deg);background-color: #ff8f08;}
.oppenned span:nth-child(1) { transform: rotate(45deg) translateY(7px) translateX(7px);}
.oppenned span:nth-child(2) {width: 80vw;height: auto;left: 30%;transform: translate(-94%, 0%);top: 50px;border-radius: 50%;}
.oppenned span:nth-child(3) { transform: rotate(-45deg) translateY(-7px) translateX(7px);}
}



.textblock {display: block; width: 100%; margin: 0 auto; padding: 1px 0.8em;}
.color-bg {border-top: 3px solid #d8d1bc; border-bottom: 3px solid #d8d1bc; padding: 0 0.8em 1em 0.8em; background: linear-gradient(115deg, #fff4e7 20%, white 50%, #fff4e7 80%); margin-bottom: 1em;}

.bibel-bg {background-image: url(images/bg.png);}


.contain {margin : 0 auto;min-height : 1px;padding : 1em 0 0.2em 0; position : relative;}
.themenlinie {margin : 0 auto;list-style : none;position : relative;}
.themenlinie:before {content : '';position : absolute;top : 0;bottom : 0;width : 0;border-left: 2px solid #d8d1bc; left : 43px;margin-top: 20px; margin-bottom: 20px;z-index: 0;}
.themenlinie li {position : relative;margin-bottom: 1.5em;width : 100%;}
.themenlinie li .pic{position : absolute;top : 0; left : 0;width : 85px;height: 85px;border-radius: 50%;outline: solid 2px #d8d1bc; background: white;transition : 0.2s linear;z-index: 1;}
.themenlinie li:hover .pic{box-shadow: 0 0px 15px -4px rgba(0, 0, 0, 1);}
.themenlinie li .pic img {width : 100%;max-width : 85px;border-radius : 50%;padding: 3px;}

.themenlinie li .tl-textblock{margin-left: 98px;position : relative;min-height: 85px;box-shadow : 0 15px 15px -15px rgb(0, 0, 0, 0.3);transition : 0.2s linear; background-color : #f1f0eb; border-left : solid 2px #d8d1bc; border-radius: 8px;}
.themenlinie li:hover .tl-textblock{box-shadow : 0 20px 20px -20px rgb(0, 0, 0, 0.8);}

.themenlinie li .tl-titel {display:flex; flex-direction: flex-start;align-items: center;max-width:100%;position:relative;overflow:hidden;}

.themenlinie .tl-text-left, .themenlinie .tl-text-left {position:relative;overflow:hidden;flex:1 2 auto;padding: 10px;}
.themenlinie .tl-text-1 {font-family : 'RobotoSlab-Bold';color : black;font-size : 1.2em;line-height: 1.2;margin-bottom : 5px;text-align : left;}
.themenlinie li:hover .tl-text-1 {color: #b13d40;}
.themenlinie .tl-text-2 {color : #413e2e;font-size : 1.1em;margin-bottom : 5px;text-align : left;overflow: hidden;text-overflow:ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}

.themenlinie .tl-right {position: relative; right: 0;flex: right;margin: 7px;}
.more {display:flex;width: 35px; height: 35px;align-items: center;justify-content: center;font-size: 2em;color : black;margin : 0 auto;padding: 0 0 8px 0; border-radius : 50%;background : transparent;transition: 0.2s linear;}
.themenlinie li:hover .more {text-decoration : none;background : #b13d40;color : white;}

.themenlinie li .tmlabel:after { left: -21px; top : 33px; border : transparent solid; content : " "; height : 0; width : 0; position : absolute; pointer-events : none; border-width : 10px; border-right-color : #d8d1bc; transition : all 0.3s ease-in-out;}
.themenlinie li:hover .tmlabel:after {border-right-color : #b13d40;}

@media screen and (max-width: 550px) {
.themenlinie {margin-top : 7em;}
.themenlinie:before {display: none;}
.themenlinie li {margin-bottom: 8em;}
.themenlinie li .pic{top: -98px;left:2em;}
.themenlinie li .tl-textblock {margin : 0 auto;  border-left : none; border-top : solid 2px #d8d1bc;}
.themenlinie li.last {margin-bottom: 1em;}
.themenlinie li .tmlabel:after {left : 64px; border-right-color : transparent; top : -21px; border-bottom-color : #d8d1bc;}
.themenlinie li:hover .tmlabel:after {border-right-color : transparent;border-bottom-color : #b13d40;}
}


blockquote.bibel {position: relative;margin: 2em auto 1em auto; padding: 20px 10px 10px 10px; font-style: italic; border-radius: 5px; text-shadow: 0 0 1px #5e4d1e; background : #fcf8ec;border: solid 1px #cbbd8d;}
blockquote.bibel p{margin: 0; text-align: left;color : black;}
blockquote.bibel p:before{position : absolute;width : 34px;height: 34px;border-radius: 50%; text-align: center;line-height: 0;padding-top: 3px;background : #fcf8ec;color: #8f7819;font-size: 2.3em;content: '\201e'; top : -17px;left : 0;outline: solid 1px #cbbd8d;z-index: 2;}
blockquote cite {display: table; position: absolute; left: 30px; top: -15px; text-align: left;font-style: italic; font-size: 90%; color: #8f7819;margin: 0;padding: 5px 10px 5px 10px;border-radius: 5px;border: solid 1px #cbbd8d;background: #fcf8ec;z-index: 1;}



.gebet-rahmen {width : 100%;padding: 2em 1.5em 1em 1.5em; margin : 1em auto; background-color: #f1f0eb; border-radius : 8px;}
.gebet-text {text-align : center; hyphens: none; color : black;}
q::before, q::after {quotes : "\0022" "\0022" "\0027" "\0027";position : relative;font-family : serif;font-size : 2em;color : #a38432;font-style : italic;vertical-align : middle;font-weight : 700;}
q::before {top : 7px;right : 20px;}
q::after {top : 7px;left : 13px;}



.seitennavi {display: flex; flex-flow: wrap; align-items: center; justify-content: start; width: 100%;}
.seitennavi a {text-align:left; color : #413e2e; background-color: #f1f0eb;padding: 2px 5px; margin: 0.3rem; border-radius: 5px; transition : all 0.2s ease-in-out;box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 1);}
.seitennavi a:hover {background: #b13d40; color: white;}


.sidebox {display: block; text-align: center; width: 100%; margin : 0 auto; margin-bottom: 0.8em; padding: 15px 10px; border-radius: 8px; transition : all 0.2s; box-shadow: 0 0 3px #aaa; background: linear-gradient(135deg, #ffffff 20%, #e4e2da 50%, #ffffff 80%);}

.box-container {display: flex; width: 100%; margin: 1em auto;}
.boxen {display: inline-flex; align-items: stretch; justify-content: center; width: 49%; margin : 0 1%; padding: 15px 10px; position : relative; overflow : hidden; border-radius: 8px; transition : all 0.2s; box-shadow: 0 0 3px #aaa; background: linear-gradient(45deg, #f1f0eb 0%, #ffffff 50%, #f1f0eb 100%);}
.first {margin-left : 0;}
.last {margin-right : 0;}
.sidebox:hover, .boxen:hover {box-shadow: 0 0 7px #888;}
.boxen-img {display : block; width: 100px; height: 100px; border-radius: 50%; margin: 0 auto; overflow : hidden; transition : all 0.2s ease-in-out; outline: 2px solid white;}
.boxen-img img {width : 100px; height: 100px; border-radius:50%; transition : all 0.2s ease-in-out;}
.sidebox:hover .boxen-img, .boxen:hover .boxen-img {box-shadow: 0 1px 10px 2px rgba(0, 0, 0, 0.5);}
.sidebox:hover .boxen-img img, .boxen:hover .boxen-img img {transform: scale(1.08);}
.boxen-text {margin: 0 auto;padding: 15px 5px 0 5px;}
.boxen-text h4 {margin: 0 auto; transition : all 0.2s ease-in-out;}
.suptitel {color : #413e2e; margin: 0 auto 0.5em auto;overflow: hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;}
.sidebox:hover .boxen-text h4, .boxen:hover .boxen-text h4 {color: #b13d40;}
.boxen:hover .suptitel {color: black;}

@media (max-width: 550px) {
.box-container {display : block;}
.first, .last {display : block;width : 100%;max-width : 500px;margin : 2em auto;}
}


.post {display: inline-flex; flex-flow: column; align-items: center; justify-content: start; width: 49%; margin : 0 1%; padding:  10px; position : relative; overflow : hidden; border-bottom: solid 5px #d8d1bc; border-radius: 8px; background: #f1f0eb; transition : all 0.4s ease-in-out;}
.post:hover {border-bottom: solid 5px #b13d40; box-shadow : 0 11px 11px -11px rgb(0, 0, 0, 1);}
.post-link {display: flex; justify-content: center; position : relative; overflow : hidden;  border-radius: 8px;}
.post-link img {display:block;width: 100%;max-width: 500px; border-radius: 8px;}
.post-link .s {width: 0;height: 100%;background: rgba(0,0,0,0.5);position: absolute;top: 0;display: flex;justify-content: center;align-items: center;overflow: hidden; transition : all 0.4s ease-in-out;}
.post-link .s p {color:white; font-size: calc(15px + 0.5vw); opacity: 0; margin: 0 auto;transition : all 0.7s ease-in-out;}
.post:hover .s {width: 100%;}
.post:hover .s p {opacity: 1;}
.post h4 {font-size: 108%; margin: 0.7em auto 0.3em auto;}

@media (max-width: 550px) {
.post {display : block; width : 100%;max-width : 500px; margin : 2em auto;}
}





.circled {shape-outside: circle(); clip-path: circle(); width: 45%; height: 45%; float: left; margin: 2em 1em 2em 0; transition : 0.1s linear;}
.circled:hover {transform: scale(1.05);}
.float-ende {display: flow-root; /** display:flow-root – float am Ende des Blocks beenden **/}
@media (max-width: 550px) {
.circled {width: 60%; height: 60%;}
}


.weiter {display: inline-block;margin: 1em auto;padding: 8px 30px 13px 20px;font-family: 'RobotoSlab-Bold';color: #413e2e; text-align: center;text-decoration: none;border-left: #b13d40 solid 4px;border-radius: 0 2em 2em 0;cursor: pointer; background: #f1f0eb; box-shadow: inset 0 0 0 0 #b13d40;transition: linear 0.3s;}
.weiter:hover {color: white;box-shadow: inset 400px 0 0 0 #b13d40;}


#dailyVersesWrapper{font-size: 1.1em;text-shadow: 0 0 1px #5e4d1e; font-style: italic;}
#dailyVersesWrapper a{color:#413e2e; margin: 0.5em auto 0 auto;font-size: 80%;padding:0;font-style: italic;}



.list-type1 {width: 100%; margin: 2em auto;}
.list-type1 ol {counter-reset: li; list-style: none; font-size: 1.1em; padding: 0;}
.list-type1 a {position: relative; display: block; text-align: left; padding: 0.4em 0.4em 0.4em 3em; margin: .5em 0; background: #f1f0eb; color: #000; border-radius: 8px; transition: all .2s ease-in-out;}
.list-type1 a:hover {background: #d8d1bc;}
.list-type1 a:before {content: counter(li); counter-increment: li; position: absolute; left: -0.3em; top: 50%; margin-top: -1.3em; background:#FF8F08; height: 2.6em; width: 2.6em; line-height: 2em; border: 5px solid white; text-align: center; color: white; font-weight: bold; border-radius: 2em; transition: all .2s ease-in-out;}
.list-type1 a:hover:before {background: #B13D40;}





.bibelbox {margin: 1.5em auto; border-radius:8px; padding:15px 5px; background: #f5e8d3; box-shadow: 0 0 5px #aaa;}
.bibelbox-innen {background:interit; padding:0.3em; margin: 0 auto; text-align: center; border-radius:8px;}
.bibelbox-innen li {display: inline-table; margin:3px auto;}
.bibelbox-innen li a {display:block; font-size:1em; color:#000; padding: 0.2em 0.4em 0.4em 0.4em; text-align: center; background: white; border-radius:8px; outline:1px solid #e0d1b0;}
.bibelbox-innen li a:hover{color:white; background:#ff8f08; border-radius:8px;}
.bibelbox-innen span.verweis{font-size: 70%; color: #8f7819;}
.bibelbox-innen li:hover span.verweis{color: black;}
.bibelbox-innen li a.aktiv2{color:white; background:#ff8f08; border-radius:8px;}


.kaptop {border-radius:8px; padding:5px; box-shadow: 0 0 3px #aaa; background: #f5e8d3;}
.kaptop {margin: 1em 0;}
.zahl {display:inline-block; font-size: 1em; line-height:2em; color:#000; width:2.2em; height:2.2em; background:white; margin:0.1em auto; border-radius:50%; text-align:center;}
.zahl:hover, .zahl.an {color:white; background:#ff8f08;}
.kap {font-style:italic; padding: 0 0.5em;}

span.verse {display: table-inline; margin-right: 3px; padding: 3px 7px 3px 5px; font-size: 0.7em; font-style:italic; background: #b13d40; border-radius:4px; color: white;}
span.verse:target {position: relative; border: 1px solid #ff8f08; background: #ff8f08; color: white; text-align: center; font-size: 0.8em; font-weight: bold;}
*[id] {scroll-margin-top: 120px;}


.audio {position: sticky; position: -webkit-sticky; top: 0; display: block; margin-bottom:1em; border-radius:8px; padding:5px; background: #f5e8d3; box-shadow: 0 0 3px #aaa; z-index: 1;}
.audio p {padding:0; margin-bottom:0.2em; color:black; font-size:1.1em; text-align: center;}
.audio audio {width:100%; height:2em; border-radius: 8px; transition: 0.2s linear; filter: hue-rotate(180deg) contrast(200%); border: solid 3px black;}
.audio:hover audio, .audio audio:focus, .audio audio:active{box-shadow: 0 0 0 2px #338eff, 0 0 0 3px #338eff;}

.controls{margin: 0 auto; display:block; width:100%;}
.controls audio {margin: 10px 0 0 0; border: 3px solid red;}

.nextprev {display:flex; align-items:center; justify-content: center; margin:3em auto; padding:0;}
a.prev, a.next {width: 45px; height: 45px; background-color:#ff8f08; color:white; font-size: 2.5em; line-height: 0.9em; margin: auto 0.5em; border-radius: 50%;text-align: center;}
a:hover.prev, a:hover.next {background-color: #b13d40;}




.con {width : 100%; margin : 1em auto;}
.traktat {display:-ms-flexbox; display:flex; width:100%; position:relative; overflow:hidden; border-radius:8px; background: #f1f0eb; margin:0 auto 1.2em auto;padding: 10px; border-bottom: solid 5px #d8d1bc; transition : all 0.3s ease-in-out;}
.traktat:hover {border-bottom: solid 5px #b13d40; box-shadow : 0 11px 11px -11px rgb(0, 0, 0, 1);}
.traktat, .artwork {position:relative;overflow:hidden;}
.artwork {-ms-flex-negative:0;flex-shrink:0;height:80px!important;width:80px;border-radius:50%;box-shadow: 0 0px 15px -4px rgba(0, 0, 0, .3);transition : 0.2s linear;}
.artwork img {display:block;width:100%;height:auto; min-height: 80px;border-radius:50%;background: white; padding: 2px;}
.traktat:hover .artwork {transform: scale(1.05); box-shadow: 0 1px 10px 2px rgba(0, 0, 0, 0.5);}
.t-body {overflow:hidden;position:relative;display:flex; -ms-flex:1; flex:1; display:-ms-flexbox; -ms-flex-direction:column; flex-direction:column; padding:10px 0 0 17px;}
.t-body span {max-width:100%;margin:0;overflow:hidden;text-overflow:ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;text-align: left;line-height: 1.3em;transition : all 0.3s ease-in-out;}
.t-body span.track-name {font-family: 'RobotoSlab-Bold';font-size:1.2em;margin-bottom: 3px;color: black;}
.traktat:hover span.track-name {color: #b13d40;}
	.t-body span.track-artist {font-size:1.1em;color: #575757;}


.k-form  {background: #f1f0eb; margin-top: 1em; padding-top: 1em; border-top: 3px double #d6cfbb;}



footer {display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; background: #f1f0eb; margin: 0 auto; border-top: 3px solid #ff8f08;border-radius: 0 0 8px 8px;}
.wrapper a {color: #413e2e; font-size: 0.7em; padding: 0 10px; transition : all 0.4s ease-in-out;}
.wrapper a:hover {color: #ff8f08;}
.bz {width : 10%;display:none;opacity:0;}


.top-btn { width : 50px; height : 50px; right : 30px; bottom : 20px; background : url(images/top.webp) 15px 11px no-repeat scroll #383838; border-radius : 8px; cursor : pointer; position : fixed; z-index : 2000; transition : all 0.4s ease-in-out; box-sizing : border-box; display : flex; justify-content : center; align-items : center; transform : scale(1); }
.top-btn:hover { background-position : 15px -49px; background-color : #ff8f08; }
.top-btn.top-btn__hide { opacity : 0; transform : scale(0); transition : all 0.4s ease-in-out; }
.top-btn__img { width : 0%; max-width : 0%; }