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


/*********************************************************************************/
/* Basic                                                                         */
/*********************************************************************************/
html{
	/* Hintergrundbild Vollbild */
	background:url('../images/Hintergrund-Beck.jpg') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	min-height:100%;
	background-size:cover;
}

body{
  /* Vollbild bei mobilen Endgeräten */
	min-height:100%;
  font-family: 'Roboto', sans-serif;
}


.maincontent{
    /*Abstand nach oben */
    padding-top: 5%;
		padding-bottom: 40px;
    position: absolute;
    width: 100%;
}

/*********************************************************************************/
/* Überschrift                                                                   */
/*********************************************************************************/

.headline{
    /* Um nicht aufeinander zu liegen bei mobiler Version */
    padding-bottom: 100px;
		font-family: 'Pragati Narrow', sans-serif;
}

#heading_left{
    font-size: 36pt;
    background-color: white;
    color: black;
    float: left;
    margin-top: 0px;
    padding-right: 8px;
    padding-left: 8px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#heading_right{
    /*Keine Fontsize für unterschiedliche Höhen */
    background-color: black;
    color: white;
    float: left;
    margin-top: 0px;
    padding-right: 8px;
    padding-left: 8px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/*********************************************************************************/
/* Projekte                                                                      */
/*********************************************************************************/

.projects{
    background: rgba(255, 255, 255, 0.6);
		color: black;
    border-radius: 25px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		padding-bottom: 10px;
}

.projects h1{
    font-variant: small-caps;
		font-weight: bold;
}
.projects p{
	font-size: 20px;
}

.projects li {
    font-size: 18pt;
    line-height: 2;
}

.projects ul a:link{
    color: black;
}
.projects ul a:visited{
    color: grey;
}
.projects ul a:active{
    color: white;
}

/*********************************************************************************/
/* Footer                                                                        */
/*********************************************************************************/
footer{
	position: fixed;
	bottom: 0;
	width: 100%;
	height: auto;
	color: white;
	background-color: rgba(40, 40, 40, 0.75);
	text-align: center;
	transition-duration: 1000ms;
	transform: translate(0, 30px);
}
footer ul{
	list-style-type: none;
	margin-top: 10px;
	padding-left: 0;
}
.extended-impressum{
	transform: translate(0px, 0px);
}
.standard-impressum{
	color:white;
}
footer ul:first-child li:hover{
	cursor: pointer;
}


/*********************************************************************************/
/* Media Queries                                                                 */
/*********************************************************************************/
@media screen and (max-width: 767px) {
	footer{
		transform: translate(0, 50px);
	}
	.projects p {
    font-size: 16px;
	}
}
@media screen and (max-width: 404px) {
	footer{
		transform: translate(0, 70px);
	}
}
@media screen and (max-width: 371px) {
	footer{
		transform: translate(0, 90px);
	}
}

@media screen and (max-width: 991px) {
		.projects{
			margin-right: 20px;
			margin-left: 20px;
		}
		.projects h1{
			padding-top: 10px;
		}
}
@media screen and (max-width: 362px) {
		.projects{
			margin-top: 100px;
		}
}