* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

html,
body {
  background-color: #fff;
  color: #555;
  font-weight: 300;
  font-size: 35px;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; }

.w8p {
  display: inline-block;
  width: 7%; }

.w10p {
  display: inline-block;
  width: 9%; }

.w25p {
  display: inline-block;
  width: 24%; }

.w33p {
  display: inline-block;
  width: 32%; }

.w50p {
  display: inline-block;
  width: 49%; }

.w75p {
  display: inline-block;
  width: 74%; }

.w80p {
  display: inline-block;
  width: 79%; }

.w90p {
  display: inline-block;
  width: 89%; }

.w100p {
  display: inline-block;
  width: 100%; }

.t-left {
  text-align: left; }

.t-center {
  text-align: center; }

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

.t-money {
  color: #51ac30; }

.to-money-neg {
  color: #FF3528; }

.t-small {
  color: #888888; }

.trend {
  padding: 29px 5px;
  border-bottom: 1px solid #d2d2fa;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 115%; }
  .trend .w90p .w50p {
    margin: 5px 0; }
  .trend .w10p {
    text-align: center;
    line-height: 10px;
    margin-right: -50px; }
  .trend img {
    height: 43px; }

.trend:nth-child(5) {
  border-top: 1px solid #d2d2fa; }

.pad-app {
  padding: 145px 55px 20px 55px;
  z-index: 300;
  background-color: white; }

.view-title {
  position: fixed;
  top: 0px;
  right: 0;
  width: 100%;
  height: 105px;
  z-index: 100;
  vertical-align: bottom;
  padding-top: 25px;
  text-align: center;
  background-color: #6149E9;
  color: white;
  font-size: 50px;
  overflow: hidden; }
  .view-title .float-left-title {
    padding: 12px 0 0 55px !important;
    float: left;
    text-align: left;
    font-size: 38px; }
  .view-title .float-right-title {
    padding: 12px 55px 0 0 !important;
    float: right;
    text-align: right;
    font-size: 38px; }
  .view-title i {
    font-size: 46px !important; }
  .view-title b {
    text-align: center; }
  .view-title p {
    font-size: 70%;
    padding-top: 10px;
    padding-right: 50px; }

.main-btn {
  display: block;
  width: 100%;
  font-size: 110%;
  font-weight: 600;
  color: white;
  background-color: #6149E9;
  border-radius: 18px;
  border: none;
  padding: 45px 0px; }

.btn-white, .btn-green {
  padding: 20px 36px;
  border: 2px solid #9c9c9c;
  border-radius: 10px;
  margin-right: 10px;
  font-size: 85%;
  font-weight: 600; }

.btn-white {
  background-color: white;
  margin-right: 5px; }

.btn-green {
  color: #FFF;
  background-color: #008880;
  padding: 20px 40px; }

.only-ul-input {
  display: block;
  font-size: 160%;
  background-color: rgba(0, 0, 0, 0);
  color: white;
  border: none;
  border-bottom: 2px solid white;
  width: 100%; }
  .only-ul-input:focus {
    border: none;
    border-bottom: 3px solid white;
    outline: none;
    box-shadow: none; }

::-webkit-scrollbar {
  width: 8px; }

::-webkit-scrollbar-track {
  background: #f1f1f1; }

::-webkit-scrollbar-thumb {
  background: #888; }

::-webkit-scrollbar-thumb:hover {
  background: #555; }

#trends > .overlay-modal,
#geld > .overlay-modal {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999; }
  #trends > .overlay-modal .inside,
  #geld > .overlay-modal .inside {
    height: 58vh;
    width: 94vw;
    margin: 17.5vh 3vw;
    border-radius: 15px;
    background-color: white;
    padding: 25px 35px; }
    #trends > .overlay-modal .inside i,
    #geld > .overlay-modal .inside i {
      font-size: 160%;
      display: block;
      text-align: right; }
    #trends > .overlay-modal .inside img,
    #geld > .overlay-modal .inside img {
      display: block;
      margin: 0 auto 30px auto;
      width: 55vw;
      height: auto;
      float: none; }
    #trends > .overlay-modal .inside h2, #trends > .overlay-modal .inside p, #trends > .overlay-modal .inside a,
    #geld > .overlay-modal .inside h2,
    #geld > .overlay-modal .inside p,
    #geld > .overlay-modal .inside a {
      text-align: center; }
    #trends > .overlay-modal .inside h2,
    #geld > .overlay-modal .inside h2 {
      font-size: 160%;
      margin-bottom: 35px; }
    #trends > .overlay-modal .inside p,
    #geld > .overlay-modal .inside p {
      font-size: 115%;
      width: 85%;
      line-height: 130%;
      margin: 0 auto; }
    #trends > .overlay-modal .inside a,
    #geld > .overlay-modal .inside a {
      display: block;
      text-align: center;
      padding-top: 4.6vh;
      color: #008880;
      text-decoration: none;
      font-size: 120%;
      font-weight: 600; }

.slideToLeft-enter-active {
  position: fixed;
  height: 100vh; }

.slideToLeft-leave-active {
  position: fixed;
  height: 100vh;
  animation-duration: 1s;
  animation-name: slideToLeft; }

@keyframes slideToLeft {
  from {
    position: fixed;
    left: 0vw;
    width: 100vw;
    height: 100vh; }
  100% {
    position: fixed;
    left: -100vw;
    width: 100vw;
    height: 100vh; } }
.slideToRight-enter-active {
  position: fixed;
  height: 100vh; }

.slideToRight-leave-active {
  position: fixed;
  height: 100vh;
  animation-duration: 1s;
  animation-name: slideToRight; }

@keyframes slideToRight {
  from {
    position: fixed;
    right: 0vw;
    width: 100vw;
    height: 100vh; }
  100% {
    position: fixed;
    right: -100vw;
    width: 100vw;
    height: 100vh; } }
.slideFromLeft-enter-active {
  position: fixed;
  animation-duration: 1s;
  animation-name: slideFromLeft;
  height: 100vh; }

.slideFromLeft-leave-active {
  display: none; }

@keyframes slideFromLeft {
  from {
    position: fixed;
    top: 0;
    left: -100vw;
    width: 100vw;
    height: 100vh; }
  to {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh; } }
.slideFromRight-enter-active {
  position: fixed;
  animation-duration: 1s;
  animation-name: slideFromRight;
  height: 100vh; }

.slideFromRight-leave-active {
  display: none; }

@keyframes slideFromRight {
  from {
    position: fixed;
    top: 0;
    right: -100vw;
    width: 100vw;
    height: 100vh; }
  to {
    position: fixed;
    top: 0;
    right: 0vw;
    width: 100vw;
    height: 100vh; } }
.slideUp-enter-active {
  animation-duration: 0.6s;
  /*animation-fill-mode: both;*/
  animation-name: slideUp;
  position: fixed; }

.slideUp-leave-active {
  position: fixed;
  display: none; }

@keyframes slideUp {
  from {
    position: fixed;
    top: 100vh;
    width: 100vw; }
  100% {
    position: fixed;
    top: 0;
    width: 100vw; } }
.slideDown-enter-active {
  display: none; }

.slideDown-leave-active {
  animation-duration: 0.6s;
  animation-fill-mode: both;
  animation-name: slideDown; }

@keyframes slideDown {
  from {
    position: fixed;
    top: 0;
    width: 100vw; }
  to {
    position: fixed;
    top: 100vh;
    width: 100vw; } }
.fadeOut-leave-active {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeOut;
  height: 100vh; }

@keyframes fadeOut {
  from {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    opacity: 1; }
  to {
    position: fixed;
    width: 100vw;
    height: 100vh;
    opacity: 0; } }
#button-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 1px solid #9e9e9e;
  background-color: white;
  height: 147px; }
  #button-bar .button {
    color: black;
    display: inline-block;
    width: 19vw;
    text-align: center; }
  #button-bar .activeButton {
    color: #6149E9; }
  #button-bar img {
    margin: 20px auto 10px auto;
    width: 63px;
    display: block; }
  #button-bar img.bigger {
    width: 73px; }
  #button-bar p {
    font-size: 65%;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 20px; }

#load-screen {
  background-color: #6149E9;
  height: 100vh;
  color: white; }
  #load-screen .logo {
    display: inline-block;
    text-align: center;
    width: 100%;
    margin: 42vh auto; }
    #load-screen .logo img {
      display: inline-block;
      height: 8vh; }

#login-screen, #password-reset {
  width: 100%;
  height: 100vh;
  background-blend-mode: multiply;
  padding: 18% 10% 10% 10%;
  color: white; }
  #login-screen img, #password-reset img {
    display: inline-block;
    width: 155px; }
  #login-screen > *, #password-reset > * {
    margin-bottom: 115px; }
  #login-screen h2, #password-reset h2 {
    font-size: 240%; }
  #login-screen .login > *, #password-reset .login > * {
    margin-bottom: 20px; }
  #login-screen .login label, #password-reset .login label {
    font-size: 90%;
    margin-bottom: 10px; }
  #login-screen .login input, #password-reset .login input {
    display: block;
    font-size: 120%;
    background-color: rgba(0, 0, 0, 0);
    color: white;
    border: none;
    border-bottom: 2px solid white;
    width: 100%;
    margin-bottom: 60px;
    padding: 20px 0; }
    #login-screen .login input:focus, #password-reset .login input:focus {
      border: none;
      border-bottom: 2px solid white;
      outline: none;
      box-shadow: none; }
  #login-screen .login ::placeholder, #password-reset .login ::placeholder {
    color: white;
    opacity: 1; }
  #login-screen button, #password-reset button {
    margin-bottom: 140px; }
  #login-screen a, #password-reset a {
    width: 100%;
    display: block;
    text-align: center;
    color: white;
    font-size: 105%; }
    #login-screen a:visited, #login-screen a:link, #login-screen a:hover, #login-screen a:active, #password-reset a:visited, #password-reset a:link, #password-reset a:hover, #password-reset a:active {
      text-decoration: none;
      color: white; }

#login-screen {
  background: url("../img/background.png"), linear-gradient(rgba(155, 155, 155, 0.7), #000);
  background-size: cover; }
  #login-screen .login {
    margin-bottom: 145px; }
    #login-screen .login input:nth-child(3) {
      margin-bottom: 30px; }
  #login-screen .neupw {
    text-align: right;
    display: block;
    font-size: 20px; }

#password-reset {
  background: url("../img/background.png"), linear-gradient(rgba(155, 155, 155, 0.7), #000);
  background-size: cover; }
  #password-reset img {
    margin-bottom: 145px; }
  #password-reset h2 {
    font-size: 143%;
    margin-bottom: 25px; }
  #password-reset p {
    font-size: 118%;
    margin-bottom: 100px; }

#trends {
  padding-bottom: 153px;
  height: 100vh;
  width: 100vw; }
  #trends .trend .w50p {
    padding: 2px 0; }
    #trends .trend .w50p.t-money {
      font-size: 77%; }
    #trends .trend .w50p.t-small {
      font-size: 81%; }
  #trends .w10p {
    margin-top: -45px; }
  #trends .view-body .stat {
    box-shadow: 0px 8px 50px 5px rgba(0, 0, 0, 0.15);
    margin: 68px 0 60px 0;
    font-size: 185%;
    border-radius: 15px;
    letter-spacing: -3px; }
    #trends .view-body .stat .row-1, #trends .view-body .stat .row-2 {
      font-size: 85%; }
    #trends .view-body .stat .row-1 {
      padding: 40px 40px 0; }
    #trends .view-body .stat .row-2 {
      padding: 0px 40px 0;
      margin-top: -12px;
      margin-bottom: 12px; }
    #trends .view-body .stat .row:nth-child(2) {
      padding-top: 0; }
    #trends .view-body .stat .t-small, #trends .view-body .stat .t-money {
      font-size: 68%; }
    #trends .view-body .stat .container {
      height: auto;
      display: block;
      margin-top: 15px;
      margin-bottom: 55px; }
  #trends .view-body .trend {
    padding: 33px 5px; }

#releases-wahlen {
  height: 100vh;
  width: 100vw;
  padding: 140px 45px; }
  #releases-wahlen .hover {
    height: 89vh;
    box-shadow: 0px 6px 21px 5px #a8a8a8;
    border-radius: 15px; }
    #releases-wahlen .hover .albums {
      height: 81vh;
      overflow-y: scroll; }
      #releases-wahlen .hover .albums .album {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 50px 0; }
        #releases-wahlen .hover .albums .album .w10p {
          text-align: center;
          font-size: 190%;
          margin-left: -50px; }
        #releases-wahlen .hover .albums .album img {
          width: 195px;
          height: 195px;
          display: inline-block;
          margin: 0px 40px 0px 30px;
          border-radius: 10px; }
        #releases-wahlen .hover .albums .album .w50p {
          display: inline-block; }
          #releases-wahlen .hover .albums .album .w50p > * {
            margin: 15px 0; }
          #releases-wahlen .hover .albums .album .w50p .title {
            font-size: 120%;
            color: black;
            margin-bottom: 0px; }
          #releases-wahlen .hover .albums .album .w50p .album-title {
            font-size: 110%; }
          #releases-wahlen .hover .albums .album .w50p .about {
            font-size: 95%; }
    #releases-wahlen .hover a {
      display: block;
      text-align: center;
      padding: 3vh 0;
      color: #008880;
      text-decoration: none;
      font-size: 115%;
      border-top: 1px solid #bfbfbf;
      letter-spacing: 0px;
      font-weight: 500; }
  #releases-wahlen .fa-check-circle {
    color: #008880; }
  #releases-wahlen .fa-circle {
    color: lightgrey; }

#calendar-wahlen {
  padding: 125px 45px;
  height: 100vh;
  width: 100vw; }
  #calendar-wahlen .hover {
    height: 72vh;
    box-shadow: 0px 6px 21px 5px #a8a8a8;
    border-radius: 15px; }
    #calendar-wahlen .hover .calendar {
      height: 64vh;
      overflow-y: scroll; }
      #calendar-wahlen .hover .calendar table {
        width: 96%;
        margin: 0 2%; }
        #calendar-wahlen .hover .calendar table td {
          width: 14.2857142857%;
          padding: 45px 0;
          text-align: center; }
      #calendar-wahlen .hover .calendar .day-names {
        border-bottom: 1px solid #9e9e9e;
        border-collapse: collapse; }
        #calendar-wahlen .hover .calendar .day-names tr td {
          font-weight: 600; }
      #calendar-wahlen .hover .calendar p {
        text-align: center;
        padding: 50px;
        font-size: 38px; }
      #calendar-wahlen .hover .calendar .month {
        border-collapse: collapse; }
        #calendar-wahlen .hover .calendar .month tr td {
          font-weight: 600;
          padding: 40px 0; }
        #calendar-wahlen .hover .calendar .month tr td.notActMonth {
          color: lightgrey; }
        #calendar-wahlen .hover .calendar .month tr > td.selected {
          color: white;
          background-color: #008880; }
  #calendar-wahlen a {
    display: block;
    text-align: center;
    padding: 3vh 0;
    color: #008880;
    text-decoration: none;
    font-size: 115%;
    font-weight: 600;
    border-top: 1px solid #bfbfbf; }
  #calendar-wahlen .firstSelected {
    border-bottom-left-radius: 100px;
    border-top-left-radius: 100px; }
  #calendar-wahlen .lastSelected {
    border-bottom-right-radius: 100px;
    border-top-right-radius: 100px; }

#filter-wahlen {
  height: 100vh;
  width: 100vw; }
  #filter-wahlen .view-body {
    padding-top: 191px; }
    #filter-wahlen .view-body h2 {
      font-size: 189%;
      margin-bottom: 31px;
      letter-spacing: 0;
      color: black; }
    #filter-wahlen .view-body p {
      font-size: 108%;
      line-height: 52px;
      margin-bottom: 36px; }
    #filter-wahlen .view-body .filter {
      padding: 33px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid #d2d2fa; }
      #filter-wahlen .view-body .filter .w10p {
        font-size: 185%;
        text-align: left;
        margin-left: -10px; }
      #filter-wahlen .view-body .filter .w90p {
        padding-left: 5px;
        font-size: 109%; }
    #filter-wahlen .view-body .btn-green {
      margin: 88px auto 0 auto;
      display: block;
      text-align: center;
      font-size: 110%;
      border: none;
      padding: 38px 92px; }
  #filter-wahlen .fa-check-circle {
    color: #008880; }
  #filter-wahlen .fa-circle {
    color: lightgrey; }

#konto .vert-line {
  height: 50vh; }
#konto b, #konto p {
  white-space: nowrap; }

#konto, #konto-det {
  padding-top: 50px;
  padding-bottom: 153px;
  height: 100vh;
  width: 100vw; }
  #konto h2, #konto h3, #konto p, #konto-det h2, #konto-det h3, #konto-det p {
    margin-bottom: 15px;
    color: black;
    font-size: 132%; }
  #konto h2, #konto-det h2 {
    font-weight: 300; }
  #konto p, #konto-det p {
    font-size: 71%; }
  #konto .trend img, #konto-det .trend img {
    margin-top: -50px; }
  #konto .exit-div, #konto-det .exit-div {
    display: block;
    padding: 57px 29px 57px 50px;
    border-top: 2px solid lightgray;
    border-bottom: 2px solid lightgray;
    margin: 30px -45px 0 -45px;
    text-align: left; }
    #konto .exit-div a, #konto-det .exit-div a {
      color: #008880;
      text-decoration: none;
      font-size: 103%;
      font-weight: 600; }
    #konto .exit-div i, #konto-det .exit-div i {
      float: right;
      line-height: 60px;
      font-size: 60px;
      color: #9e9e9e; }
    #konto .exit-div img, #konto-det .exit-div img {
      float: right;
      height: 43px; }
  #konto .trans-title, #konto-det .trans-title {
    margin: 78px 0 20px 0;
    font-size: 83%;
    color: black; }
    #konto .trans-title img, #konto-det .trans-title img {
      margin-left: 0;
      margin-right: 15px;
      width: 3.5vw; }
  #konto .trends, #konto-det .trends {
    vertical-align: top;
    display: inline-block;
    width: 92%;
    margin: 11px 0 0 auto;
    font-size: 90%; }
    #konto .trends .trend, #konto-det .trends .trend {
      margin-right: -62px;
      font-size: 114%;
      padding: 32px 0; }
      #konto .trends .trend .t-small, #konto .trends .trend .t-money, #konto .trends .trend .to-money-neg, #konto-det .trends .trend .t-small, #konto-det .trends .trend .t-money, #konto-det .trends .trend .to-money-neg {
        font-size: 80%; }
      #konto .trends .trend .w10p i, #konto-det .trends .trend .w10p i {
        float: right;
        margin-right: 21px;
        margin-top: -45px; }

#konto, #kont-det, #geld {
  font-size: 107%;
  padding-top: 16px; }
  #konto img.profpic, #kont-det img.profpic, #geld img.profpic {
    display: inline-block;
    width: 19%;
    height: auto;
    border-radius: 50%;
    float: right; }

#konto-det {
  background-color: white;
  height: 100vh; }
  #konto-det .view-body {
    padding-top: 101px; }
    #konto-det .view-body .trans-title {
      margin-top: 0; }
      #konto-det .view-body .trans-title img {
        margin-right: 28px; }
    #konto-det .view-body .trends .trend {
      font-size: 124%;
      width: 100%;
      margin-right: -40px;
      padding: 37px 0;
      float: right; }
      #konto-det .view-body .trends .trend .w50p {
        padding: 1px 0; }
    #konto-det .view-body .vert-line {
      height: 85vh; }

#geld h2, #geld h3, #geld p {
  margin-bottom: 15px;
  font-size: 135%; }
#geld h2 {
  font-weight: 300; }
#geld img {
  display: inline-block;
  width: 18%;
  height: auto;
  border-radius: 50%;
  float: right; }
#geld p {
  font-size: 75%; }
#geld .info-bar {
  border-bottom: 1px solid #9c9c9c;
  margin: 42px 0 42px 0; }
  #geld .info-bar .info-type {
    font-size: 86%;
    color: #a9a9a9;
    margin: 25px 0; }
  #geld .info-bar .info-value {
    font-size: 110%;
    color: black;
    margin: 25px 0; }
#geld .type-chooser {
  display: block;
  text-align: center;
  margin: 80px -45px 40px -45px;
  border-bottom: 2px solid #888888;
  overflow: auto;
  font-size: 110%;
  font-weight: 600; }
  #geld .type-chooser .option1, #geld .type-chooser .option2 {
    width: 50%;
    padding-bottom: 34px;
    display: inline-block; }
  #geld .type-chooser .option1 {
    float: left; }
  #geld .type-chooser .option2 {
    float: right; }
  #geld .type-chooser .active-o {
    border-bottom: 6px solid #008880;
    color: #008880; }
#geld button {
  display: block;
  width: 100%;
  font-size: 100%;
  margin-top: 70px;
  padding: 45px 0; }

.vert-line {
  display: inline-block;
  width: 5px;
  background-color: #6149E9;
  margin: 0;
  margin-right: 5px;
  margin-left: 15px; }

#deals {
  padding: 105px 50px 150px 50px;
  height: 100vh;
  width: 100vw; }
  #deals .view-body {
    padding-bottom: 150px; }
  #deals .album {
    vertical-align: middle;
    padding: 37px 0;
    border-bottom: 1px solid #d2d2fa; }
    #deals .album img.cover {
      display: inline-block;
      width: 20vw;
      height: 20vw;
      border-radius: 8%; }
    #deals .album img.arrow {
      float: right;
      height: 43px;
      margin-right: -10px;
      margin-top: 25px; }
    #deals .album .details {
      vertical-align: top;
      margin: 1.5vw 3vw;
      display: inline-block;
      font-size: 117%; }
      #deals .album .details .title {
        font-weight: 600;
        padding-bottom: 12px; }
      #deals .album .details .artist {
        font-size: 95%;
        padding-bottom: 20px; }
      #deals .album .details .no {
        font-size: 77%; }
    #deals .album .annehmen {
      float: right;
      background-color: #f0f0f0;
      color: #008880;
      border-radius: 50px;
      font-weight: 600;
      font-size: 70%;
      padding: 15px 40px; }
    #deals .album .fa-angle-right {
      color: #b4b6c0;
      font-size: 150%; }
  #deals table {
    margin-top: 50px; }
    #deals table tr td {
      vertical-align: top;
      padding: 30px 0;
      border-top: 1px solid #c3c2c2; }
    #deals table tr td.index {
      font-size: 120%;
      font-weight: 600;
      color: #9d9d9d; }
    #deals table tr td.duration {
      font-size: 120%; }
    #deals table tr td:first-child {
      width: 7.5%; }
    #deals table tr p.title {
      font-size: 110%;
      margin-bottom: 15px;
      font-weight: 600; }
  #deals .fa-volume-up {
    font-size: 130%;
    color: #6149E9;
    margin-left: -15px; }

#produkte {
  padding: 155px 26px 140px 26px;
  height: 100vh;
  width: 100vw; }
  #produkte .view-body {
    padding-bottom: 140px; }
  #produkte .album {
    width: 44%;
    margin: 0 3%;
    display: inline-block; }
    #produkte .album img {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 3%;
      margin-bottom: 20px; }
    #produkte .album p.title {
      font-weight: 600;
      margin-bottom: 4px; }
    #produkte .album p.artist {
      font-size: 98%;
      margin-bottom: 45px; }

#produkte-detail {
  padding: 140px 50px 150px 50px;
  height: 100vh;
  width: 100vw; }
  #produkte-detail .album {
    vertical-align: middle; }
    #produkte-detail .album img {
      display: inline-block;
      width: 30vw;
      height: 30vw; }
    #produkte-detail .album .details {
      vertical-align: top;
      margin: 6vw 3vw;
      display: inline-block;
      font-size: 117%; }
      #produkte-detail .album .details .title {
        font-weight: 600;
        padding-bottom: 12px; }
      #produkte-detail .album .details .artist {
        font-size: 95%;
        padding-bottom: 20px; }
      #produkte-detail .album .details .no {
        font-size: 77%; }
  #produkte-detail table {
    margin-top: 50px; }
    #produkte-detail table tr td {
      vertical-align: top;
      padding: 30px 0;
      border-top: 1px solid #c3c2c2; }
    #produkte-detail table tr td.index {
      font-size: 120%;
      font-weight: 600;
      color: #9d9d9d; }
    #produkte-detail table tr td.duration {
      font-size: 120%; }
    #produkte-detail table tr td:first-child {
      width: 7.5%; }
    #produkte-detail table tr p.title {
      font-size: 110%;
      margin-bottom: 15px;
      font-weight: 600; }
  #produkte-detail .fa-volume-up {
    font-size: 130%;
    color: #6149E9;
    margin-left: -15px; }

#produktev2 {
  height: 100vh;
  width: 100vw; }
  #produktev2 .view-body {
    padding-top: 135px; }
    #produktev2 .view-body * {
      text-align: center; }
    #produktev2 .view-body h2 {
      font-size: 43px;
      width: 85%;
      margin: 0 7.5% 120px 7.5%; }
    #produktev2 .view-body .service {
      border: 1px solid #e0eaf0;
      width: 90vw;
      border-radius: 20px;
      margin: 0 5vw 65px 5vw;
      padding: 85px 25px 70px 25px;
      box-shadow: 0 0 35px 15px rgba(74, 74, 74, 0.38); }
      #produktev2 .view-body .service h3 {
        color: #6149E9;
        font-size: 28px;
        text-transform: uppercase;
        margin-bottom: 66px; }
      #produktev2 .view-body .service img {
        width: 29vw;
        height: auto;
        margin-bottom: 32px; }
      #produktev2 .view-body .service h2 {
        font-size: 39px;
        margin-bottom: 10px; }
      #produktev2 .view-body .service p {
        font-size: 38px; }
    #produktev2 .view-body .dots {
      font-size: 22px;
      margin-bottom: 120px; }
      #produktev2 .view-body .dots .fas {
        padding: 0 18px;
        margin: 2px 0; }
      #produktev2 .view-body .dots .far {
        padding: 0 18px;
        font-size: 25px; }
    #produktev2 .view-body .main-btn {
      font-size: 112%;
      width: 90%;
      margin: 0 auto;
      padding: 42px 0; }

#produkte-hinzufugen {
  height: 100vh;
  width: 100vw;
  padding-top: 18vh;
  color: black;
  background-color: white;
  height: 100vh; }
  #produkte-hinzufugen * {
    text-align: center; }
  #produkte-hinzufugen img {
    width: 47vw;
    height: auto;
    margin-bottom: 45px; }
  #produkte-hinzufugen h3 {
    width: 75%;
    margin: 0 auto 52px auto;
    font-size: 117%;
    line-height: 140%; }
  #produkte-hinzufugen a {
    color: #008880;
    text-decoration: none;
    font-size: 120%; }

#profile {
  padding-top: 104px;
  padding-bottom: 153px;
  height: 100vh;
  width: 100vw; }
  #profile .imgHolder {
    text-align: center;
    background: linear-gradient(#f7f7f7, #cecece);
    height: 23.5vh; }
    #profile .imgHolder img {
      width: auto;
      height: 23.5vh;
      margin-left: -40px; }
  #profile .view-body {
    padding-bottom: 150px; }
  #profile .blueoption {
    text-align: center;
    font-size: 140%;
    padding: 41px 0px;
    margin: 0 5px;
    color: #318d86;
    text-decoration: none;
    border-bottom: 1px solid #d2d2fa; }
    #profile .blueoption img {
      display: inline-block;
      float: left;
      margin-bottom: 30px;
      width: auto; }
    #profile .blueoption img.arrow {
      float: right;
      height: 43px; }
    #profile .blueoption img.exit {
      height: 44px;
      margin-top: 9px; }
    #profile .blueoption img.star {
      height: 53px; }
    #profile .blueoption i {
      display: inline-block;
      width: 8%;
      text-align: left;
      float: left; }
    #profile .blueoption i.fa-rotate-180 {
      text-align: right; }
    #profile .blueoption i.fa-angle-right {
      color: #b4b6c0;
      float: right;
      margin-right: -50px;
      margin-top: 15px; }
    #profile .blueoption a {
      font-size: 81%;
      font-weight: 600;
      display: inline-block;
      text-align: left;
      width: 83%;
      text-decoration: none;
      color: #318d86; }
    #profile .blueoption a:visited, #profile .blueoption a:active {
      text-decoration: none;
      color: #318d86; }
  #profile .pad-app {
    padding-top: 0;
    padding-bottom: 0; }
  #profile .divider {
    background-color: #f7f7f7;
    padding: 70px 0 30px;
    font-size: 90%; }
    #profile .divider .pad-app {
      background-color: #f7f7f7; }
  #profile .setting {
    padding: 39px 8px;
    border-bottom: 1px solid #d2d2fa;
    font-size: 85%; }
    #profile .setting .input-box {
      display: inline-block;
      width: 85%; }
      #profile .setting .input-box p {
        margin-bottom: 20px; }
      #profile .setting .input-box input {
        font-size: 135%;
        border: none; }
      #profile .setting .input-box input:focus {
        outline: none; }
    #profile .setting img {
      display: inline-block;
      height: 60px;
      width: auto;
      float: right;
      margin-right: -8px;
      margin-top: 30px; }
    #profile .setting input[type="password"] {
      letter-spacing: 1px;
      font-size: 69px;
      margin-top: -20px;
      width: 80%; }

#beitellung {
  background-color: white;
  height: 100vh;
  width: 100vw;
  color: black; }
  #beitellung .view-body {
    padding: 177px 53px; }
    #beitellung .view-body h2 {
      font-size: 66px;
      margin-bottom: 38px; }
    #beitellung .view-body p {
      font-size: 41px;
      margin-bottom: 30px; }
    #beitellung .view-body textarea {
      height: 23vh;
      margin-bottom: 2vh;
      width: 100%;
      padding: 20px 20px;
      font-size: 120%;
      outline: none;
      border: none !important;
      -moz-appearance: none; }
    #beitellung .view-body textarea:focus {
      background-color: #f3f3f3;
      border: 3px solid #9a9a9a;
      border-radius: 20px; }
    #beitellung .view-body .main-btn {
      padding: 42px 0;
      font-size: 39px; }

/*# sourceMappingURL=masterstyle.css.map */