html, body {
	margin:0;
	padding:0;
	font-family: 'Istok Web', sans-serif;
	overflow:visible;
}

header {
	width:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:50;
}

 .placeholder {
 	width:100%;
 	height:115px;

 }

.stdpage {
	/*padding:0 30px;
	max-width:980px;*/
	margin:auto;
	margin-top:60px;
}

header nav {
	/*position:absolute;*/
	width:100%;

}

header nav ul {
	list-style-type: none;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 0;
    text-align:center;

}
header nav ul li {
	width:100%;
	text-align:center;
	color:#e2001a;
	padding:0;
	display:block;
	margin:25px 0;
	box-sizing:border-box;
	font-size:6vw;
	position:relative;
	-webkit-transition:all ease 0.3s;
	transition:all ease 0.3s;
}

header nav ul li:hover {
	background-color:rgba(226,0,26,0.2);
}




header nav ul li:hover:before {

	left:32%;
	font-size:9vw;
	top:-27%;
}


header nav ul li:hover:after {

	right:32%;
	font-size:9vw;
	top:-27%;
}

a {
	color:#e2001a;
	text-decoration:none;
}

#sitelogo {
	text-align:center;
	padding-top:20px;
}

#sitelogo img {
	width:80px;
	height:auto;
}

#hamburger {

	width:100%;
	height:80px;
	position:absolute;
	top:0px;
	left:0px;
	z-index:15;
}

#block-blickfeld-branding {
	text-align: center;
	z-index:10;

	position:relative;
}

.spacer {
	width:100%;
	clear:both;
	float:none;
}

h1 {
	text-align:center;
	font-size:40px;
	margin:.8em 0 1em 0;
	text-transform: uppercase;
	color:rgb(226,0,26);;
}
h2, h3, h4, h5, h6 {
	color:rgb(226,0,26);;
}
/* -------------- Projectview -------------------- */

.pslide {
	width:100%;
	position:relative;
	box-sizing:border-box;
	perspective:800px;
	max-width: 1300px;
	margin:auto;
}

.pslide:before {
	display:block;
	content:"";
	padding-top:45%;
}

.psinner {
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background:#dadada;
}

.psinner.odd {
	background:#fff;
}

.button {
	width:50px;
	height:50px;
	z-index:30;
	background-size:contain;
	-webkit-transition:all ease 0.2s;
	transition:all ease 0.2s;
	cursor: pointer;
}
.button:hover {
	-webkit-transform:scale(1.1);
}

.button.left {
	background-image:url('../img/beleft.png');
	width:30px;
	height:30px;
}
.button.right {
	background-image:url('../img/beright.png');
	width:30px;
	height:30px;
}
.button.down {
	background-image:url('../img/bedown.png');
	position:absolute;
	left:45%;
	left:calc(50% - 25px);
	bottom:35px;
}

.button.up {
	background-image:url('../img/beup.png');
	position:absolute;
	left:45%;
	left:calc(50% - 25px);
	bottom:35px;
}

.button.left:hover {
	background-image:url('../img/bfleft.png');
}
.button.right:hover {
	background-image:url('../img/bfright.png');
}
.button.down:hover {
	background-image:url('../img/bfdown.png');
}
.button.up:hover {
	background-image:url('../img/bfup.png');
}

.button.big {
	position:relative;
	height:70px;
	width:70px;
	top:26px;
	left: -10px;
	display:inline-block;
	background-image:url('../img/bfright.png');
}

.button.small {
	height:30px;
	width:30px;
	display:inline-block;
}
.button.small:hover {
	-webkit-transform:scale(1);
}

a:hover .button.small {
	-webkit-transform:scale(1.1);
}

.fleft, .fright {
	position:absolute;
	top:45%;
	top:calc(50% - 15px);


}

.fleft {
	right:15px;
}

.fright {
	left:15px;
	display:none;
}

.islide {
	overflow:hidden;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	text-align:center;
	transform-style: preserve-3d;
	-webkit-transition:all ease 1s;
	transition:all ease 1s;
	z-index:25;
	opacity:0;
}

.islide.left {
	z-index:1;
	/*-webkit-transform: translate(-30%, 0) scale(0.5) rotateY(90deg);
	transform: translate(-30%, 0) scale(0.5) rotateY(90deg);*/
}

.islide.right {
	z-index:1;
	/*-webkit-transform: translate(30%, 0) scale(0.5) rotateY(-90deg);
	transform: translate(30%, 0) scale(0.5) rotateY(-90deg);*/
}

.islide img {
	width:auto;
	height:100%;
}

.titleimage {
	width:100%;
	height:33%;
	position:relative;	
	background-position:50% 50%;
	background-repeat: no-repeat;
	background-size: contain;
	

}

.titlecontent {
	width:100%;
	height:66%;
	background:#dadada;
	position:relative;


}

.titletext {
	max-width:1050px;
	width:80%;
	font-size: 18px;
	margin:auto;
	left:0;
	right:0;
	position: absolute;
	text-align:center;

}

h2 {
	text-transform: uppercase;
	font-size:38px;
	margin:0;
	text-align:center;
}

.projecttitle {
	position:fixed;
	width:100%;
	background:#fff;
	left:0;
	top:0;
	z-index:30;
	padding-top:100px;
	height:200px;
	box-sizing:border-box;
	overflow:hidden;
	z-index:40;
}

.pcenter {
	position:relative;
	width:100%;
	max-width:1300px;
	margin:auto;
}

.slidergroup {
	padding-top:160px;
}

.wrapper {
	width:100%;
	margin:auto;
}

.wrapper.odd {
	background: #dadada;
	}

	.wrapper.even {
	background: #fff;
	}

.redblock {
	width:200px;
	height:16px;
	background-color:rgba(226,0,26,1);
	position:absolute;
	bottom:0;
	left:45%;
	left:calc(50% - 100px);
	z-index:30;
}

.redblock.map {
	bottom:20px;
}

.titletitle {
	width:100%;
	position:absolute;
	text-align:center;
	padding:20px 0 0 0 ;
	box-sizing:border-box;
}

.prleft {
	position:absolute;
	top:0px;
	right:15px;
}

.prright {
	position:absolute;
	top:0px;
	left:15px;
}

.projectdesc {
	font-size: 18px;
	padding:0 30px 50px 30px;
	text-align:center;
	max-width:900px;
	margin:auto;
	position:relative;
}

.ilink {
	z-index:29;
	position:absolute;
	display:block;
	left:0;
	right:0;
	top:0;
	bottom:0;

}

@media screen and (max-width: 499px) {
 	.prleft, .prright {
 		top:8px;
 	}

	header nav{
		
		z-index:5;
		-webkit-transition:all ease 0.3s;
		transition:all ease 0.3s;
		-webkit-transform:translate(0, -100%);
		transform:translate(0, -100%);
	}
	header nav.open {
		-webkit-transform:translate(0, 0);
		transform:translate(0, 0);
	}

	nav {
		background:rgba(0,0,0,0.8);
		padding:15px 0;
		top:80px;
		position: absolute;
	}

	.placeholder {
		height:0px;
	}

	#sitelogo {
		background:#000;
		z-index:10;
		position: absolute;
		width:100%;
		text-align: center;
		height:80px;
		
		
		box-sizing:border-box;
	}

	.handyspacer {
		height:80px;
		width:100%;
		background:#000;
	}


	.projecttitle {
		padding-top:80px;
		height:180px;
	}

	.slidergroup {
		padding-top:180px;
	}

	.slidergroup h1 {
		font-size:34px;
	}

}

@media screen and (min-width: 500px) {
	header nav ul li {
		
		width:auto;
		text-align:center;
		color:#e2001a;
		padding:0;
		display:inline-block;
		margin:0 0;
		box-sizing:border-box;
		font-size:18px;
		position:relative;
		padding:3px 5px;

	}
	header nav ul {
		list-style-type: none;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 0;
    	text-align:left;

    	padding:5px 10px 10px 10px;
    	text-align:center;

	}

	header nav ul li:first-child {
		float:left;
		padding-left: 15px;
	}

	header nav ul li:last-child {
		float:right;
		padding-right: 15px;
	}

	header nav ul li:before {
		display:none;
	}


	header nav ul li:after {
		display:none;
	}
	header nav ul li:hover {
		background-color:transparent;

	}
	header nav ul li:hover a {
		color:rgba(226,0,26,0.7);
		
	}
	#hamburger {
		display:none;
	}
}

@media screen and (min-width: 1150px) {
	.titletext {
		font-size:22px;
	}
}

/* Übersicht -------------------------------------------------------------- */
.endtext, .endlinks, .ecentertext {
	width:100%;

	background-color:#000;
}
.ecentertext-content {
	color:#fff;
	font-size: 36px;
	position:relative;
	text-align :center;
	box-sizing: border-box;
}

.endtext-content {
	color:#fff;
	font-size: 36px;
	position:relative;
	text-align :center;
	top:100px;
	box-sizing: border-box;
}

.projectlink, .ecentertext-content  {
	display:inline-block;
	text-transform: uppercase;
	font-size: 32px;
	padding: 10px;
	font-weight: 600;
	box-sizing: border-box;
}

.ecentertext-content {
	color:#fff;
	display:block;
	text-align :center;
	box-sizing: border-box;
	font-size: 32px;
}

.projectlink .button.small , .button.small.pl{
	position:relative;
	top:4px;
}

.linkset {
	position:relative;
	width:70%;
	max-width:800px;
	margin:auto;
	text-align:center;
}

@media screen and (max-width: 800px) {
			.endtext-content {
		font-size:4vw;
	}
}

@media screen and (max-width: 500px) {
			.endtext-content {
		font-size:5vw;
	}
	.projectlink, .ecentertext-content {
	font-size: 24px;
	padding: 6px;
	display:block;
	margin-bottom:10px;

	}
	.linkset {
	position:relative;
	width:96%;
	}

}
/* .-----------FROMT----------------------------------------------------------------------------- */



#sky {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:#000;
	z-index:100;
	display:none;
}


#start_page1, #start_page2 {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	-webkit-transition:all linear 0.5s;
	transition:all linear 0.5s;
}

#start_page2 {
   top:100%;
}

#start_page1.off {
	-webkit-transform:translate(0, -100%);
	transform:translate(0, -100%);
}
#start_page2.off {
	-webkit-transform:translate(0, -100%);
	transform:translate(0, -100%);
}

#dog {
	width:70%;
	/*max-width:1000px;*/
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background-position:bottom left;
	background-size:100%;
	background-repeat: no-repeat;
	background-image: url('../img/hund1000.png');
}

#welcome-text {
	position:absolute;
	width:60%;
	left:20%;
	top:35%;
	color:rgba(226,0,26,1);
	font-size:36px;
	text-align: center;
}

#welcome-text .u {
	text-decoration: underline;
}

#front_logo {
	width:300px;
	height:150px;
	position:absolute;
	top:30px;
	left:45%;
	left:calc(50% - 150px);
	background-position:bottom left;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url('../img/blicklogo.png');
	cursor:pointer;
}


#contact_page_1, #contact_page_2 {
	position:relative;
	width:100%;
	height:100vh;
	min-height:550px;
	background:#000;
}

#contact_page_1 {
	background-color:#000;
	background-image:url('../img/foti2.jpg');
	background-position: bottom left;
	background-repeat: no-repeat;
	background-size: contain;
}

.footerrow {
	color:rgba(226,0,26,1);
	
	position:absolute;
	bottom:0;
	width:100%;
	height:30%;
	text-align: center;
}

.fr1 {
	font-size:18px;
	margin-bottom:10px;
}
.fr2 {
	font-size:18px;
}

.fr2 span {
	padding:0 8px;
	white-space:nowrap; 
}

.contentarea {
	top:25vh;
	position:absolute;
	left:25px;
	right:25px;
	bottom:50%;
	color:#fff;
	text-align:center;
	font-size:36px;
}

.mapcontentarea {
	padding-top:120px;
	padding-bottom:20px;
	position:absolute;
	left:25px;
	right:25px;
	top:0px;
	height:70%;
	color:#fff;
	text-align:center;
	font-size:36px;
	box-sizing: border-box;
}

.contentarea  button{
	background:#000;
	border:1px solid #fff;
	padding: 5px 10px;
	color:#fff;
	font-size: 18px;
	min-width:120px;
}
#map {
	background-position: center;
          background-size: cover;
          width:100%;
          height:100%;
}

@media screen and (max-width: 800px) {
			#welcome-text {
		font-size:4vw;
	}
}

@media screen and (max-width: 700px) {
	/*#front_logo {
		bottom:auto;
		top:45%;
		top:calc(50% - 95px);
	}*/
	#dog {
		background-image: url('../img/hund600.png');
	}

}

@media screen and (max-width: 499px) {
	#dog {
		background-image: url('../img/hund300.png');
	}
	#welcome-text {
		font-size:5.5vw;
	}

	#contact_page_1 .contentarea {
		font-size:7vw;
	}
}

@media screen and (max-height: 550px) {
	#contact_page_1, #contact_page_2 {
		width:100%;
		height:auto;
		min-height:auto;
		padding-bottom:30px;
	}
	.contentarea {
		position: relative;
		top:auto;
		bottom:auto;
		left:auto;
		right:auto;
		padding-top:120px;
		padding-bottom:30px;
	}
	.contentarea p {
		margin-bottom:0px;
	}
	.footerrow {
		position:relative;
		top:auto;
		bottom:auto;
		left:auto;
		right:auto;
		padding-bottom:30px;
	}
	#contact_page_1 .button.down , #contact_page_2 .button.up{
		position:relative;
		bottom:0;
	}
	.mapcontentarea {
		position:relative;
		left:auto;
		right:auto;
		top:auto;
		bottom:auto;
		padding-bottom:30px;
		padding-top:20px;
	}
	#map {
		width:90%;
		margin:auto;
		height:400px;
	}
}