/*glob.css*/
*{
	margin: 0px; padding: 0px;

	}
body{
	margin: 0;
}

p {font: 12px Verdana;
    color: #555555;
	text-decoration: none;
	line-height: 18px;
	}
h1{font: 80px Verdana ;
    color: #222222;
	text-decoration: none;
	}
h2{font:24px Verdana ;
    color: #333333;
	text-decoration: none;
	}
h3{font: 24px Verdana ;
    color: #222222;
	text-decoration: none;
	}
h4{font: 17px Verdana ;
    color: #333333;
	text-decoration: none;
	line-height: 24px;
	}	
	
a{text-decoration: none;
color: #000000;}	
a:hover {color: #0174DF;}	

/*LAYOUT*/


.main{
	display: grid;
	grid-template:
	"header header"
	"content sidebar"
	"footer footer";
	grid-template-columns: 1fr ;
	max-width: 1000px;
	margin: auto;
	border:0px solid red;
}
.header{
	grid-area: header;
}
.content{
	grid-area: content;
}
.sidebar{
	grid-area: sidebar;
}
.footer{
	grid-area: footer;
}

/* MOBILE */
/* https://www.w3schools.com/css/css_rwd_mediaqueries.asp */
@media only screen and (max-width: 670px) {
 .main{
	display: grid;
	grid-template:
	"header"
	/* "sidebar"*/
	"content"
	"footer";
	margin: auto;
	}
}

/*Text Align*/
.header-title {
   text-align: center;
	border:0px solid grey;
	
}


.header-sub-title{
	text-align: center;
	border:0px solid grey;
	height: auto;
}
.content-title{
	text-align: center;
	border:0px solid grey;
	height: auto;
	color: #222222;
}

.content-content{
	text-align:center;
	border:0px solid grey;
	height: auto;
}
.content-daten{
	text-align:center;
	border:0px solid grey;
	height: auto;
}
.footer-info{
	
text-align: center;
border:0px solid grey;
height: auto;
}

/*IMAGE*/
img{
	width: 100%;
	height: auto;
	display: block;
	margin: auto;
	border:1px solid grey;
}

.sidebar-imgage{
	max-width: 600px;
	height: auto;
	border:0px solid grey;
}

/*GALLERY*/
/*GRID: https://www.w3schools.com/CSS/css_grid.asp */
.gallery{
	display: grid;
	grid-column-gap: 18px;
	grid-row-gap: 19px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	justify-items: center;
	align-items: center;
	border:0px solid grey;
}

.box{
	width: 100%;
	height: auto;
	border:1px solid grey;
}
/*.box:hover{
	opacity: 0.3;
}*/

@media only screen and (max-width: 870px) {
	.gallery{
		grid-template-columns: 1fr 1fr;
	}
}
@media only screen and (max-width: 670px) {
	.gallery{
		grid-template-columns: 1fr;
	}
}
.navi a { text-decoration: none;
	font: 13px Verdana regular;
    color: #555555;
}
.navi ul {
    list-style:none;
}
.navi ul li  a:hover{
	color:#0174DF;  ;
}

.navi{font: 13px Verdana regular;
    color: #555555;
	text-align: right;
	border:0px solid grey;
	height: auto;
	color: #222222;
	text-decoration: none;
}

.navi ul li{
	text-decoration: none;
	text-align: right;
	border:0px solid grey;
	height: auto;
	
}