@charset "UTF-8";
/* CSS Document */

  *{
	margin: 0;
	padding: 0;
	box-sizing: content-box; 
	max-width: 100%;
	text-decoration: none;
	color: rgba(40,40,40,1);
	font-family: 'Titillium Web', sans-serif;
  }

/*######################### BODY #########################*/

body{
	
}

/*++++++++++++++++++++ HEADER ++++++++++++++++++++*/
header{
	background-color: grey ;
	width: 100%;
	height: 800px;
	background-image: url("../../Bilder/MRCSHL_7808_verlauf.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}


/*-----+++++ NAVIGATION +++++-----*/

header nav{
	background-color: white;
	width: 100%;
	height: 100px;
	display: flex;
	align-items: center;
	text-transform: uppercase;
	font-weight: 600;
	justify-content: space-between;
}

/*----- Logo -----*/
.logo{
	height: 60px;
	width: auto;
	margin-left: 12%;
}

/*----- Links -----*/
.links{
	margin-right: 10%;
}

header nav .links a{
	margin-left: 40px;
	font-size: 1.2em;
	
}	

/*----- Titel -----*/

.titel{
	text-transform: uppercase;
	font-size: 4.5em;
	line-height: 1.2em;
	margin-left: 12%;
	margin-top: 150px;
	width: 40%;
	height: auto;	
}


/*++++++++++++++++++++ MAIN ++++++++++++++++++++*/

.main{

}

/*----- Description -----*/

.description{
	margin-top: 150px;
	margin-bottom: 150px;
	margin-left: 12%;
	margin-right: 12%;
}

.description h2{
	font-size: 2em;
	line-height: 2em;
	color: #9E2986;
}

.description p{
	margin-top: 50px;
	font-size: 1.5em;
	padding-right: 200px;
}


/*----- Galerie -----*/

.pictures{
	display: flex;
	justify-content: space-between;
	margin-left: 12%;
	margin-right: 12%;
	margin-bottom: 150px;
	height: auto;
}


.image{
	width: 48%;
	height: auto;
}



/*++++++++++++++++++++ FOOTER ++++++++++++++++++++*/

.footerinfo{
	background-color:#131313;
	height: auto;
	padding-top: 50px;
	padding-bottom: 50px;
	padding-left: 12%;
	padding-right: 12%
}

.footerlogo{
	width: 280px;
	height: auto;
}

.footercontent{
	display: flex;
	justify-content: flex-start;
	
}

.footercontent p{
	color: white;
	margin-right: auto;
}

.footercontent p b {
	color:white;
}

.footercontent p b a{
	color:white;
}


/*######################### HOVER #########################*/

.links a:hover{
	transition: 0.2s;
	color: rgba(158,41,134,1.00);
}

.footercontent p b a:hover{
	transition: 0.2s;
	color:rgba(158,41,134);
}


/*##########################################
############################################
############################################
############################################
############################################
########### R E S P O N S I V E ############
############################################
############################################
############################################
############################################
############################################*/


/*++++++++++ TABLET ++++++++++*/

@media screen and (max-width: 1024px){
	body{
		text-decoration: none;
	}
	
	header{
		background-color: grey ;
		width: 100%;
		height: 600px;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: left 20px;
	}
	
	header nav{
		background-color: white;
		width: 100%;
		height: 100px;
		display: flex;
		align-items: center;
		text-transform: uppercase;
		justify-content: space-around;
	}
	
	header nav .links a{
		margin-left: 35px;
		font-size: 0.8em;
	}	
	
	.logo{
		height: 30px;
		width: auto;
		margin-left: 12%;
	}
	
	.titel{
		text-transform: uppercase;
		font-size: 3em;
		line-height: 1em;
		margin-left: 12%;
		margin-top: 100px;
		width: 40%;
		height: auto;	
	}
	
	
/*--------MAIN----------*/	
	
.main{
	height: auto;
	margin-top: 50px;
	margin-bottom: 50px;
	margin-left: 12%;
	margin-right: 12%;
}

.main h2{
	font-size: 2em;
	line-height: 2em;
}

.main p{
	margin-top: 50px;
	font-size: 1.5em;
	padding-right: 0px;
}	
	
	
	.pictures{
	margin-top: -100px;
	margin-left: 12%;
	margin-right: 12%;
	margin-bottom: 150px;
		display: block;
	}
	
	
	.image{
		width: 100%;
	}	
	
	
/*--------FOOTER----------*/
	.footercontent{
		display: block;
		font-size: 1em;
	}
	
	
	
}

/*++++++++++ MOBILE ++++++++++*/

@media screen and (max-width: 480px){
	body{
		text-decoration: none;
	}
	
	/*----- Header -----*/
	header{
		background-color: grey ;
		width: 100%;
		height: 300px;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: left 30px;
	}
	
	header nav{
		background-color: white;
		width: 100%;
		height: 100px;
		display: flex;
		align-items: center;
		text-transform: uppercase;
		justify-content: space-around;
	}
	
	header nav .links a{
		margin-left: 35px;
		font-size: 0.6em;
	}	
	
	.logo{
		height: 15px;
		width: auto;
		margin-left: 12%;
	}
	
	/*----- Titel -----*/
	
	.titel{
		text-transform: uppercase;
		font-size: 1.5em;
		line-height: 1em;
		margin-left: 12%;
		margin-top: 50px;
		width: 40%;
		height: auto;	
	}
	

	
	
		
/*--------MAIN----------*/	
	
.main{
	height: auto;
	margin-top: -100px;
	margin-bottom: -100px;
	margin-left: 12%;
	margin-right: 12%;
}

.main h2{
	font-size: 1em;
	line-height: 2em;
}

.main p{
	margin-top: 50px;
	font-size: 0.8em;
	padding-right: 0px;
}	
	
	
	.pictures{
	margin-top: -100px;
	margin-left: 12%;
	margin-right: 12%;
	margin-bottom: 150px;
		display: block;
	}
	
	
	.image{
		width: 100%;
	}
	
	
	
	
	
	
	
/*--------FOOTER----------*/
	.footercontent{
		display: block;
		font-size: 1em;
	}
	
	.footercontent p{
		color: white;
	}


	
	
	
	
	
	
}























/*@media (min-width: 801px) and (max-width: 1024px)*/