html, body{
		background-image: url(salon.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center, top;
		background-attachment: fixed;
		background-color: black;
	}		
	a{
		text-decoration: none;
		color: black;
	}
	div{
		text-align: center;
		flex-direction: column;	
		width: 850px;
	}
	p{
		text-align: center;
		padding: 0px 40px 0px 40px;
	}
	td{
		text-align: left;
	}
	h2{
		font-size: 1.8em;
	}
	nav{
		display: flex;
		flex-direction: row;
		text-align: center;
		background-color: grey;
		font-family: 'Tiranti Solid LET Plain:1.0';
		font-size: 1.6em;
	}	
	footer{
		text-align: center;
		background-color: black;
		color: rgb(155,155,155);
		margin: auto auto;
	}
	.title{
		text-align:  center;
		font-family:  'Tiranti Solid LET Plain:1.0';
		font-size: 5em;
		border-top: 2px solid black;
		border-bottom: 2px solid black;
		background-color: rgba(155,155,155,0.4);
		text-shadow: 3px -2px rgba(155,155,155,0.5);
		margin: 35px auto;
	}
	.title2{
		margin-top: 0px;
		font-size: 2em;
		text-decoration: underline;
		text-align: center;
	}
	.button{
		height: 45px;
		padding-top: 15px;
	}
	.button:hover {
		color: white;
		background-color: rgb(155,155,155);
	}
	.kontakt{
		text-align: center;
		font-family: 'Codystar';
		font-weight: bold;
		font-size: 1.8em;
	}
	#main{
		display: flex;
		margin: 50px auto;
	}
	#textfield{
		background-color: white;
		color: grey;
		font-family: Arial;
		font-size: 1em;
		align-items: center;
		justify-content: center;
		padding: 60px 0px 60px 0px;
	}
	#row{
		display: flex;
		flex-direction: row;
		margin: 0px 0px 50px 0px;
		text-align: center;
	}
	#fbimg{
		width: 25px;
		height: 25px;
	}
	#facebook{
		padding-top: 12px;
		width: 500px;
	}

	#i1, #i2, #i3, #i4, #i5, #i6, #i7, #i8, #i9{display: none;}

	.container{
		margin: 0 auto;
		margin-top: 20px;
		position: relative;
		width: 60%;
		height: 360px;
		padding-bottom: 40%;
	  	user-select: none;
		background-color: #1c1c1c;
		border: solid 10px #616161;
		border-radius: 8px; 
	}
	.container .slide_img{
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.container .slide_img img{
		width: inherit;
		height: inherit;
	}
	.prev, .next{
		width: 10%;
		height: inherit;
		position: absolute;
		top:0; 
		background-color: rgba(88,88,88,0.2);
		color:rgba(244,244,244,0.9);
		z-index: 99;
		transition: .45s;
		cursor: pointer;
		text-align: center;
	}

	.next{right:0;}
	.prev{left:0;}

	.prev:hover, .next:hover{
		transition: .3s;
		background-color: rgba(155,155,155,0.3);
		color: #ffffff; 
	}

	.container #nav_slide{
		width: 100%;
		bottom: 12%;
		height: 11px;
		position: absolute;
		z-index: 99;
		cursor: default;
	}

	#nav_slide .dots{
		top: 15px;
		width: 18px;
		height: 18px;
		margin: 0 4px;
		position: relative;
		border-radius: 100%;
		display: inline-block;
		background-color: rgba(0,0,0,0.6);
		transition: .4s;
	}

	#nav_slide .dots:hover {
		cursor: pointer;
		background-color: rgba(255,255,255,0.9);
		transition: .25s
	}

	.slide_img{z-index: -1;}

		#i1:checked ~ #one  ,
		#i2:checked ~ #two  ,
		#i3:checked ~ #three,
		#i4:checked ~ #four ,
		#i5:checked ~ #five ,
		#i6:checked ~ #six  ,
		#i7:checked ~ #seven,
		#i8:checked ~ #eight,
		#i9:checked ~ #nine 
		{z-index: 10; animation: scroll 1s ease-in-out;}

		#i1:checked  ~  #nav_slide #dot1,
		#i2:checked  ~  #nav_slide #dot2,
		#i3:checked  ~  #nav_slide #dot3,
		#i4:checked  ~  #nav_slide #dot4,
		#i5:checked  ~  #nav_slide #dot5,
		#i6:checked  ~  #nav_slide #dot6,
		#i7:checked  ~  #nav_slide #dot7,
		#i8:checked  ~  #nav_slide #dot8,
		#i9:checked  ~  #nav_slide #dot9
		{background-color: rgba(255,255,255,0.9);}