@font-face { font-family: 'Raleway'; url(/fonts/Raleway-Regular.ttf) format('truetype'); }
	
	html {
    	margin-right: 0;
    	overflow: visible;
		scroll-behavior: smooth;
	}
	
	body{
		font-family: 'Raleway', Helvetica, Arial, sans-serif;
	
		-webkit-transition: margin-top 0.4s ease;
	       -moz-transition: margin-top 0.4s ease;
	         -o-transition: margin-top 0.4s ease;
	            transition: margin-top 0.4s ease;
				
		background-color: #000000;
	}

	h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
		font-family: 'Raleway', Helvetica, Arial, sans-serif;
		font-weight: 500;
		color: #FFFFFF;
	}

	::selection {
	    background: #e54e53;
	    color: #fff;
	}
	
	p, ul li {
		margin: 0 0 20px;
		color: #FFFFFF;
	}

/* ====================================================================== *
      [1] vCARD SECTION
 * ====================================================================== */

	.header {
		min-height: 100vh;
	}
	.header .content-wrap {
		width: 100%;
		max-width: 725px;
		margin: 0;
		position: absolute;
		top: 45%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: block;
		color: #FFFFFF;
	}
	.logo {
		float: left;
		width: 50%;
	}
	
	.logo img {
		width: 100%;
		height: auto;
	}

	.text {
		float: left;
		width: 50%;
		padding-top: 30px;
		padding-left: 30px;
	}
	
	.impressionen-notice {
		position: absolute;
		bottom: 20px;
		display: block;
		text-align: center;
		left: 50%;
		transform: translate(-50%, -20%);
	}
	.impressionen-notice h2 {
		color: #FFFFFF;
		margin-bottom: 15px;
	}
	.impressionen-notice img {
		width: 40px;
	}
	

/* ====================================================================== *
      [2] IMPRESSUM / DATENSCHUTZ
 * ====================================================================== */
 
	.link-back {
		text-align: center;
		padding-bottom: 20px;
		border-bottom: 1px solid #FFFFFF;
	}
	
	.content_rights {
		width: 100%;
		max-width: 1200px;
		padding: 40px 3%;
		margin: 0 auto;
	}
	
	
	

/* ====================================================================== *
      [5] IMPRESSIONEN
 * ====================================================================== */

	.impressionen {
		width: 100%;
		padding-top: 20px;
	}
	.impressionen h2 {
		background-color: #008edb;
		color: #FFFFFF;
		text-align: center;
		padding: 20px 0;
		margin: 0;
	}
	.impressionen .content-grid {
		width: 98%;
		margin: 0 1%;
	}
		
	/* Set the style of the thumbnail overlay items */

	.media-box-title{
		color: #fff;
		font-size: 13px;
		margin-bottom: 5px;
		text-transform: uppercase;
	    letter-spacing: 1px;
	    line-height: 28px;
	}
	.media-box-date{
		color: #F2F2F2;
	}

       /* Remove box shadow and border-radius from the media boxes */

	.media-box-container{
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;

		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		-o-box-shadow: none;
		-ms-box-shadow: none;
		box-shadow: none;
	}

	/* hide no more entries button */

	.media-boxes-no-more-entries{
		display: none;
	}

	/* make your own style of the filter */

	.auto-grid-filters-container{
		margin-bottom: 10px;
	}
	.auto-grid-filters-container{
		padding: 0;
		text-align: center;
	}
	.media-boxes-filter li{
		list-style: none;
		display: inline-block;
		margin: 0 9px;
	}
	.media-boxes-filter li a{
		color: #999;
		text-decoration: none;
		background: transparent !important;
		padding: 0;
		border: 0 !important;
		font-size: 12px;
	}
	.media-boxes-filter li a:hover{
		color: #333;
	}
	.media-boxes-filter li a.selected{
		color: #D1474C !important;
		background: transparent !important;
		box-shadow: none !important;
	}

	/* thumbnail overlay background */

	.thumbnail-overlay{
		background-color: rgba(0,0,0, .10);
	}

	.thumbnail-overlay>div.aligment>div.aligment{
		vertical-align: bottom;
		padding-bottom: 20px;
		padding-left: 20px;
		text-align: left;
	}

	.thumbnail-overlay .media-box-title{
		font-size: 16px;
		margin-bottom: 0 !important;
	}

	.thumbnail-overlay .media-box-date{
		font-style: italic;
		font-size: 12px;
		margin-top: 0 !important;
	}

	/* Background color for image */

	.media-box-image div[data-width][data-height] {
		background-color: #333;
	}

/* ====================================================================== *
      [7] FOOTER
 * ====================================================================== */
	
	.footer{
		padding-top: 20px !important;
		padding-bottom: 20px !important;
		border: none !important;
		color: #777777;
		background-color: rgb(22, 22, 22);
		font-weight: 300;
		text-align: center;
	}

	.footer a{
		color: #999;
		text-decoration: none !important;
	}

/* ====================================================================== *
      [8] TO TOP
 * ====================================================================== */
	
	.fixed{
		position: fixed;
		right: 24px;
		bottom: 0px;
		display: none;
		z-index: 999;
	}

	.to-top{
		height: 36px;
		line-height: 36px;
		width: 42px;
		background-color: rgba(0,0,0,.8);
		color: #fff;
		cursor: pointer;
		text-align: center;
		font-size: 12px;

		-webkit-border-radius: 3px 3px 0 0;
		   -moz-border-radius: 3px 3px 0 0;
		     -o-border-radius: 3px 3px 0 0;
		        border-radius: 3px 3px 0 0;

		-webkit-transition: all 0.2s;
		   -moz-transition: all 0.2s;
		    -ms-transition: all 0.2s;
		     -o-transition: all 0.2s;
		        transition: all 0.2s;        
	}

	.to-top i{
		margin-top: 10px;
	}

	.to-top:hover{
		background-color: #e54e53 !important;
	}

/* ====================================================================== *
      [9] RESPONSIVE DESIGN
 * ====================================================================== */

	@media all and (max-width: 500px) {
		
		.header .content-wrap {
			position: relative;
			top: auto;
			left: auto;
			transform: none;
		}
	
		.logo {
			float: none; 
			width: 100%;
			max-width: 200px;
			margin: 0 auto 20px;
		}
		.text {
			float: none;
			width: 100%;
			text-align: center;
			padding: 0;
		}

		.impressionen-notice {
			position: relative;
			text-align: center;
			left: auto;
			transform: none;
		}
	
	}
	

/* ====================================================================== *
      AUTO GRID COLORS
 * ====================================================================== */

	.features-container i {
	    color: #333 !important;
	    font-size: 25px;
	}
	
	.to-top:hover {
	    background-color: #717171 !important;
	}

	.content .navbar-nav>li.active>a,
	.content .navbar-nav>li>a:hover, 
	.nav>li.open>a, 
	.nav>li.open>a:hover, 
	.nav>li.open>a:focus,
	.nav>li.dropdown>a.selected, 
	.nav>li.dropdown>a.selected:hover, 
	.nav>li.dropdown>a.selected:focus {
		background: none !important;
		color: #333 !important;
	}

	::selection {
	    background: #333;
	    color: #fff;
	}

	.navbar-nav>li>.dropdown-menu {
	  	width: 250px !important;
	}

	ul.dropdown-menu-column:first-child{
	  	width: 100% !important;
	  	float: none;
	  	border-right: none !important;
	}