html {
        scroll-behavior: smooth;
   }

   body {
        color: #000000;
        font-family: 'Kreon', serif;
        /*font-size: 1.6em;*/
    }
	
	.modal-body {
		color: #000000;
		text-align: left;
	}
	
	.modal-title {
		color: #000000;
	}
		
	.modal-body  a {
		color: #000000;
		text-align: left;
	}
	
	.modal-body  a:focus {
		color: #000000;
		text-align: left;
	}
	
	.modal-body  a:visited {
		color: #000000;
		text-align: left;
	}
	
	.modal-body  a:hover {
		color: #ff0000;
		text-decoration: none;
	}
	
	.modal-body h4 {
		margin-top: 35px;
	}

    h1 {
        font-size: 60px;
    }

    h1, h3, h5 {
        font-family: 'Rock Salt', cursive;
    }

    h2, h4 {
        font-family: 'Kreon', serif;
    }

    footer {
        width: 100%;
        background-color: #000000;
        color: #ffffff;
        padding: 3%;
    }

    footer a {
        color: #ffffff;
		text-decoration: none;
    }
	
	footer a:visited {
        color: #ffffff;
		text-decoration: none;
    }
	
	footer a:focus {
        color: #ffffff;
		text-decoration: none;
    }

    a {
        color: #000000;
    }
	
	a:focus {
        color: #000000;
    }
	
	a:visited {
        color: #000000;
    }
    
    a:hover {
        color: #ff0000;
        text-decoration: none;
    }
	

    .fa {
        color: #000000;
        font-size: 1.6em;
    }

    .fa:hover {
        color: #ff0000;
        text-decoration: none;
    }

    .blackbox {
        color: #ffffff;
        background-color: #000000;
        padding: 3%;
     }

    .blackbox a {
        color: #ffffff;
    }

    .blackbox a:hover {
        color: #ff0000;
    }

    .borderless { 
        border: 0 none;
    }
	
    
    .full-width {
      width: 100%;
      height: auto;
    }


    .links {
        font-size: 1.5rem;
    }


    .link-tab:hover {
        color: #212121 !important;
        background-color: #e8e8e8 !important;
    }


    .navbar {
        margin-bottom: 0;
        border-radius: 0;
        background-color: #000000;
        color: #ffffff;
        font-size: 1.2em;
        border: 0;
    }
	
	.navbar a {
		color: #ffffff;
	}
	
	.navbar-dark .nav-item.active .nav-link,
	.navbar-dark .nav-item:focus .nav-link,
	.navbar-dark .nav-item:hover .nav-link {
		color: #ff0000;
	}
	
	.nav-item .active {
		color: #ff0000;
	}

    .navbar-brand {
        float: left;
        font-family: 'Rock Salt', cursive;
		color: #9d9d9d;
    }
	
	
/*
    .navbar-inverse .navbar-nav .active a, .navbar-inverse .navbar-nav .active a:focus, .navbar-inverse .navbar-nav .active a:hover {
        color: #ff0000;
        background-color: #000000;
    }
*/
    .navbar-inverse .navbar-nav  li a {
        color: #d5d5d5;
    }
	
	.active {
		color: #ff0000;
	}

    .carousel-caption {
        top: 50%;
        transform: translateY(-50%);
        text-transform: uppercase;
        text-shadow: 0 0 5px black;
        font-family: 'Rock Salt', cursive;
        font-weight: bold;
    }
	

    .band-portrait {
      position: relative;
    }


    .band-portrait:hover .portrait {
      opacity: 0.3;
    }


    .band-portrait:hover .portrait-caption {
      opacity: 1;
    }

    .portrait-caption {
      font-size: 2.5em;
      transition: .5 ease;
      opacity: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      text-align: center;
    }


    .streaming-links {
        margin-top: 5rem;
    }

    .supporters {
        color: #999999;
    }
	
	.klein {
		font-size: 0.7em;
	}
	
	.lyrics {
		font-size: 1.8em;
	}

    .btn {
        font-family: 'Kreon', serif;
        font-size: 18px;
        color: #ffffff;
        padding: 12px 22px;
        background: #000000;
        border: 2px solid #ffffff;
    }

    .container {
        margin: 4% auto;
    }

	.badge {
		font-family: 'Kreon', serif;
		/*font-size: 1.7rem;*/
		/* width: 160px; */
	}
	
	.merch {
		position:relative;
		padding-top:20px;
		display:inline-block;
	}
	
	.preis-badge{
		position: absolute;
		right:60px;
		top:270px;
		background:red;
		text-align: center;
		border-radius: 50px 50px 50px 50px;
		color:white;
		padding:5px 10px;
		font-size:40px;
	}
	

    @media (max-width: 600px) {
        .carousel-indicators {
            display: none;
        }
        h1 {
            font-size: 25px;
        }
        h2 {
            font-size: 1.9em;
        }
        #portrait {
            max-width: 150px;
        }
        .ha {
            font-size: 20px;
        }
    }

    #portrait {
        max-width: 200px;
        margin: 1% auto;
    }

    #myBTTBtn {
        font-family: 'Kreon', serif;
        display: none;
        position: fixed;
        bottom: 20px;
        right: 30px;
        z-index: 99;
        font-size: 18px;
        border: 1px solid black;
        outline: none;
        background-color: white;
        color: black;
        cursor: pointer;
        padding: 15px;
        border-radius: 4px;
    }

    #myBTTBtn:hover {
        background-color: #aaaaaa;
    }
	
	
/* latin */
@font-face {
  font-family: 'Kreon';
  font-style: normal;
  font-weight: 400;
  src: local('Kreon Regular'), local('Kreon-Regular'), url('google-fonts/Kreon-Regular.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Rock Salt';
  font-style: normal;
  font-weight: 400;
  src: local('Rock Salt Regular'), local('RockSalt-Regular'), url('google-fonts/RockSalt-Regular.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}