body {
	background-color: rgba(5, 5, 5, 1);
	font-family: Jost, sans-serif;
	margin: 0px;
	}

	* {
  box-sizing:border-box;
	}

	// <uniquifier>: Use a unique and descriptive class name
	// <weight>: Use a value from 100 to 900

	.jost-<uniquifier> {
	  font-family: "Jost", sans-serif;
	  font-optical-sizing: auto;
	  font-weight: <weight>;
	  font-style: normal;
	}

	.website {
		width: 96%;
		margin: auto;
	}

		.navbar {
			display: flex;
			justify-content: space-between;
			padding: 15px;
			position: fixed;
			width: 96%;
			background-color:rgba(5, 5, 5, 1);
			z-index: 1;
		}

		.navbar-height {
			height: 93.5px;
		}

		.navbar-left {
			display: flex;
		}

		.navbar-right {
			display: flex;
		}

			.brand {
				color: white;
				font-size: 42px;
				font-weight: 450;
				letter-spacing: 10px;
			}

			.navbar-link {
				color: white;
				font-size: 30px;
				font-weight: 400;
				letter-spacing: 2px;
				padding: 10px
			}

			.navbar-link a{
				color: white;
				text-decoration: none;
			}

			.navbar-link a:hover {
				color: grey;
			}

			hr.horizontalline {
			  border-top: 2px solid white;
				position: fixed;
				margin-top: 0px;
				width:96%;
			}

			hr.horizontalline2 {
				border-top: 1px; border-left: 0px; border-right: 0px;
				border-color: grey;
				padding-top: 8%;
				width:100%;
			}

			.slide {
				display: block;
				margin-top: 55px; margin-left: auto; margin-right: auto;
				width: 60%;
			}

			.slidemobile {
				display: block;
				margin-top: 12%; margin-left: auto; margin-right: auto;
				width: 84%;
			}

			.slideshow {
			  margin: auto;
				display: block;
			}

			.slideshowmobile {
			  display: none;
			}

			.prev, .next {
				cursor: pointer;
				position: absolute;
				top: 47%;
				width: auto;
				padding: 18px;
				margin-top: 0px;
				color: white;
				font-weight: bold;
				font-size: 18px;
				transition: 0.6s ease;
				border-radius: 20px 20px 20px 20px;
				z-index: auto;
			}

			.prev {
				left: 15%;
			}

			.next {
				right: 15%;
			}
			/* On hover, add a black background color with a little bit see-through */
			.prev:hover, .next:hover {
				background-color: rgba(100,100,100,0.8);
			}

			.ueberschrifth1 {
				color: white;
				font-size: 22px;
				font-style: normal;
				font-weight: 300;
				text-align: center;
				margin-top: 45px;margin-left: 20%;margin-right: 20%;margin-bottom: 2px;
				text-transform: uppercase;
			}

			.textslideshow {
				color: white;
				font-size: 20px;
				font-style: normal;
				font-weight: 300;
				text-align: left;
				margin-top: 8%;margin-left: 20%;margin-right: 20%;margin-bottom: 8%;
			}

			.apartment {
				width: 86%;
				overflow: auto;
				padding-top: 8%;
				padding-bottom: 8%;
				margin-left: 7%;
			}

			.text {
				color: white;
				font-size: 20px;
				font-style: normal;
				font-weight: 300;
				text-align: left;
				margin-bottom: 20px;
			}

			.textimpressum {
				color: grey;
				font-size: 18px;
				font-style: normal;
				font-weight: 300;
				text-align: center;
				padding-bottom: 8%;
			}

			.textimpressum a{
				text-decoration: none;
				color: grey;
			}

			.textimpressum a:hover {
				color: white;
			}

			.brand a{
				text-decoration: none;
				color: white;
			}

			.brand a:hover {
				color: grey;
			}

			.uberschrift a{
				text-decoration: none;
				color: white;
			}

			.uberschrift a:hover {
				color: grey;
			}

			.uberschrift {
				color: white;
				font-size: 34px;
				font-weight: 500;
				text-decoration: none;
				text-align:left;
				letter-spacing: 2px;
				line-height: 1.3;
			}

			.ueberschrifth2 {
				color: grey;
				font-size: 34px;
				font-weight: 500;
				text-decoration: none;
				text-align:left;
				letter-spacing: 2px;
				line-height: 1.3;
				margin-top: 2px;
				padding-bottom: 8%;
				clear: both;
			}

			.sububerschrift {
				color: white;
				font-size: 24px;
				font-weight: 300;
				text-decoration: none;
				text-align:left;
				letter-spacing: 1.2px;
				margin-bottom: 20px;
				line-height: 1.3;
			}

			.imgright {
				float: right;
				width: 50%;
				margin-left: 4%;
			}

			.imgleft {
				float: left;
				width: 50%;
				margin-right: 4%;
			}

			.img {
				display:block;
				width: 100%;
				padding-top: 2%;
				padding-bottom: 4%;
			}

			.imgs {
				display: none;
			}



		@media only screen and (max-width: 1200px) {
		  /* For mobile phones: */

			.navbar-height {
				height: 59px;
			}

			.slideshow {
				display: none;
			}

			.slideshowmobile {
				margin: auto;
				display: block;
			}

			.brand {
				color: white;
				font-size: 20px;
				font-weight: 450;
				letter-spacing: 2.5px;
			}

			.navbar {
				padding-left: 6px; padding-right: 6px;
			}

			.navbar-link {
				color: white;
				font-size: 12px;
				letter-spacing: 1.5px;
				padding: 5px
			}

			.prev, .next {
				cursor: pointer;
				position: absolute;
				top: 44%;
				width: auto;
				padding: 8px;
				margin-top: 0px;
				color: white;
				font-weight: bold;
				font-size: 12px;
				transition: 0.6s ease;
				border-radius: 20px 20px 20px 20px;
				z-index: auto;
			}

			.prev {
				left: 1%;
			}

			.next {
				right: 1%;
			}
			/* On hover, add a black background color with a little bit see-through */
			.prev:hover, .next:hover {
				background-color: rgba(100,100,100,0.8);
			}

			.ueberschrifth1 {
				color: white;
				font-size: 15px;
				font-style: normal;
				font-weight: 300;
				text-align: center;
				margin-top: 10%;margin-left: 20%;margin-right: 20%;margin-bottom: 2px;
				text-transform: uppercase;
			}

			.textslideshow {
				color: white;
				font-size: 16px;
				font-style: normal;
				font-weight: 300;
				text-align: left;
				margin-top: 8%;margin-left: 8%;margin-right: 8%;margin-bottom: 18%;
			}

			.apartment {
				width: 86%;
				overflow: auto;
				padding-top: 15%;
				padding-bottom: 15%;
				margin-left: 7%;
			}

			.text {
				color: white;
				font-size: 16px;
				font-style: normal;
				font-weight: 300;
				text-align: left;
				margin-bottom: 20px;
			}

			.textimpressum {
				color: grey;
				font-size: 16px;
				font-style: normal;
				font-weight: 300;
				text-align: center;
				padding-bottom: 20%;
			}

			.textimpressum a{
				text-decoration: none;
				color: grey;
			}

			.textimpressum a:hover {
				color: white;
			}

			.uberschrift {
				color: white;
				font-size: 24px;
				font-weight: 500;
				text-decoration: none;
				text-align:left;
				letter-spacing: 2px;
				line-height: 1.3;
			}

			.ueberschrifth2 {
				color: grey;
				font-size: 18px;
				font-weight: 500;
				text-decoration: none;
				text-align:left;
				letter-spacing: 2px;
				line-height: 1.3;
				margin-top: 2px;
				padding-bottom: 8%;
				clear: both;
			}

			.sububerschrift {
				color: white;
				font-size: 18px;
				font-weight: 300;
				text-decoration: none;
				text-align:left;
				letter-spacing: 1.2px;
				margin-bottom: 2%;
				line-height: 1.3;
			}

			.imgright {
				display:none;
			}

			.imgleft {
				display:none;
			}

			.img {
				display: none;
			}

			.imgs {
				display:block;
				width: 100%;
				padding-top: 2%;
				padding-bottom: 4%;
			}

		}
