/* Grundeinstellungen für alle Screens */
@media only screen and (min-width: 0px) {
    body { 
		background-color: #1a171b;
		color: rgb(255,255,255);
		font-size: 18px;
		font-family: 'Istok Web', sans-serif;
	}

	a:link {
		color: #1a171b;
		text-decoration: underline;
	}

	a:visited {
		color: rgb(16,18,18);
		text-decoration: none;
	}

	a:hover {
		color: rgb(132,152,152);
		text-decoration: underline;
	}

	a:active {
		color: rgb(72,86,86);
		text-decoration: underline;
	} 

	.login-area {
		background-color: #1a171b;
	}

	.login-container {
		display: table;
		width: 100%;
	}

	.login-box {
		display: table-cell;
		vertical-align: middle;
	}

	.login-heading {
		text-transform: uppercase;
		margin-bottom: 20px;
	}

	.text-vr-private {
		color: #d6b469;
	}
	.login-pw {
		position: relative;
		width: 50%;
		max-width: 250px;
		margin: auto;
	}

	.login-pw input[type=text] {
		border: 3px solid black;
		background-color: #1a171b;
		color: white;
		text-align: center;
	}

	.login-pw input[type=text]:focus {
		border: 3px solid rgba(149,128,97,0.5);
		background-color: #1a171b;
		color: white;
		text-align: center;
		outline: none;
		-webkit-box-shadow: none !important;
		-moz-box-shadow: none !important;
		box-shadow: none !important;
	}

	.btn-vr-private{
		color: #d6b469;
		background-color:#1a171b;
		border-color: #d6b469;
	}
	.btn-vr-private:hover{
		color:#fff;
		background-color: #d6b469;
		border-color: #d6b469;
	}
	.btn-vr-private.focus,.btn-vr-private:focus{
		color:#fff;
		background-color: #d6b469;
		border-color: #d6b469;
		box-shadow:0 0 0 .2rem rgba(214,180,105,.5);
	}

	.header-image {
		border-bottom: 3px solid white;
		margin-bottom: 30px;
		width: 100%;
	}

	.header-logo {
		max-width: 160px;
		position: relative;
		top: -40px;
	}

	.jumbotron {
		padding: 30px 0;
		border-top: 3px solid white;
		border-bottom: 3px solid white;
	}

	.bg-gold {
		background-color: #d6b469;
	}

	.themen-titel {
		font-size: 28px;
		text-transform: uppercase;
		text-align: center;
		border: 3px solid white;
		padding: 15px;
	}

	.themen-bild {
		margin-top: 30px;
		margin-bottom: 30px;
	}

	.vr-private-liste {
		padding-left: 0px;
		list-style: none;
	}

	.vr-private-liste li:before {
		content: '';
		display: inline-block;
		height: 14px;
		width: 14px;
		background-image: url('/img/liste-zeichen.jpg');
		background-size: 14px;
		margin-right: 10px;
	}
	
	.vr-private-liste-black {
		padding-left: 0px;
		list-style: none;
	}

	.vr-private-liste-black li:before {
		content: '';
		display: inline-block;
		height: 14px;
		width: 14px;
		background-image: url('/img/liste-zeichen-schwarz.jpg');
		background-size: 14px;
		margin-right: 10px;
	}
	
	code .code-gold {
		color: #d6b469;
	}

	.footer {
		font-size: 14px;
		padding-bottom: 30px;
		padding-top: 30px;
		border-top: 3px solid white;
	}
	
	.footer-logo {
		margin: auto;
		max-width: 123px;
		padding: 10px;
		border: 1px solid white;
		margin-bottom: 30px;
	}

	.footer a:link {
		color: #fff;
		text-decoration: underline;
	}

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

	.footer a:hover {
		color: #fff;
		text-decoration: underline;
	}

	.footer a:active {
		color: #fff;
		text-decoration: underline;
	}
	
	.jumbotron-footer {
		color: #1a171b;
		font-size: 12px;
		margin: 0;
		padding: 5px;
		border-bottom: none;
	}

	.jumbotron-footer p {
		margin: 0;
	}
}


/* Einstellungen für Bildschirme ab 576px Breite */
@media only screen and (min-width: 576px) {
    .header-logo {
		top: -100px;
		max-width: 200px;
	}
	
	.container-content{
		padding-right: 40px;
		padding-left: 40px;
	}
	
	.themen-titel {
		font-size: 36px;
	}
	
	.footer-logo{
		margin-bottom: 0;
	}
}

/*Einstellungen für Bildschirme ab 768px Breite */
@media only screen and (min-width: 768px) {	
	.header-logo {
		top: -140px;
		max-width: 250px;
	}
	
	.footer-logo {
		margin-left: 50px;
	}
}