@font-face
{
	font-family: "Source Sans Pro";
	font-weight: 300;
	src: local("Source Sans Pro Light"), local("SourceSansPro-Light"), url(schriften/SourceSansPro-Light.woff) format("woff");
}
@font-face
{
	font-family: "Source Sans Pro";
	font-weight: 400;
	src: local("Source Sans Pro"), local("SourceSansPro-Regular"), url(schriften/SourceSansPro-Regular.woff) format("woff");
}
@font-face
{
	font-family: "Source Sans Pro";
	font-weight: 700;
	src: local("Source Sans Pro Bold"), local("SourceSansPro-Bold"), url(schriften/SourceSansPro-Bold.woff) format("woff");
}

html,body
{
	height: 100%;
	min-height: 100%;
}

body,h1,p { margin: 0; }
h1,div+p,div.box div.boxInner,div.box div.boxInner div.titleBox { padding: 6pt; }
body,a,a:visited { color: maroon; }
body,span { font-family: "Source Sans Pro"; font-weight: 300;}

body
{
	font-size: 12pt;
	text-align: center;
/*	background: url(background.svg) no-repeat center center fixed rgba(255,128,128,.25);
	background-size: 90% auto; */
}

h1,p#galerie img { border-bottom: rgba(255,255,255,.75) 6pt solid; }

h1
{
	color: #fff;
	text-shadow: red 0 0 2pt;
	border-top: rgba(255,255,255,.75) 6pt solid;
	background: linear-gradient(to right,rgba(255,0,0,1),rgba(255,255,255,.75));
	font: 18pt "Source Sans Pro"; font-weight: 700;
}

a
{
	font-family: "Source Sans Pro";
	font-weight: 400;
	text-decoration: none;
}

a:hover { text-decoration: underline; }

img
{
	image-rendering: auto;
	-ms-interpolation-mode: bicubic;
}

span { font-size: 10pt; }

p#galerie,p#galerie img,div.box div.boxInner img
{
	width: 100%;
	max-width: 100%;
}

p#galerie { line-height: 0; }

div.box div.boxInner
{
	border: rgba(128,0,0,.5) 1px solid;
	margin: 6pt;
	top: 0;
}

div.wrap,div.box div.boxInner { overflow: hidden; }

div.box
{
	float: left;
	position: relative;
	width: 20%;
	padding-bottom: 20%;
}

div.box div.boxInner,div.box div.boxInner div.titleBox
{
	bottom: 0;
	position: absolute;
	background: #fff;
}

div.box div.boxInner div.titleBox
{
	right: 0;
	left: 0;
	/*	margin-bottom:0;*/
}

/* Smartphone view:1 tile */
@media only screen and (max-width :480px)
{
	div.box
	{
		width: 100%;
		padding-bottom: 100%;
	}
}

/* Tablet view:2 tiles */
@media only screen and (max-width :650px) and (min-width :481px)
{
	div.box
	{
		width: 50%;
		padding-bottom: 50%;
	}
}

/* Small desktop / ipad view:3 tiles */
@media only screen and (max-width :1050px) and (min-width :651px)
{
	div.box
	{
		width: 33.33%;
		padding-bottom: 33.33%;
	}
}

/* Medium desktop:4 tiles */
@media only screen and (max-width :1290px) and (min-width :1051px)
{
	div.box
	{
		width: 25%;
		padding-bottom: 25%;
	}
}