/* //////////////////  fonts /////////////////////////*/

@font-face {font-family: 'Museo-300';src: url('../webfonts/31087C_0_0.eot');src: url('../webfonts/31087C_0_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/31087C_0_0.woff2') format('woff2'),url('../webfonts/31087C_0_0.woff') format('woff'),url('../webfonts/31087C_0_0.ttf') format('truetype');}
@font-face {font-family: 'Museo-500';src: url('../webfonts/31087C_1_0.eot');src: url('../webfonts/31087C_1_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/31087C_1_0.woff2') format('woff2'),url('../webfonts/31087C_1_0.woff') format('woff'),url('../webfonts/31087C_1_0.ttf') format('truetype');}
@font-face {font-family: 'Museo-700';src: url('../webfonts/31087F_0_0.eot');src: url('../webfonts/31087F_0_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/31087F_0_0.woff2') format('woff2'),url('../webfonts/31087F_0_0.woff') format('woff'),url('../webfonts/31087F_0_0.ttf') format('truetype');}
@font-face {font-family: 'Museo-700Italic';src: url('../webfonts/31087D_0_0.eot');src: url('../webfonts/31087D_0_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/31087D_0_0.woff2') format('woff2'),url('../webfonts/31087D_0_0.woff') format('woff'),url('../webfonts/31087D_0_0.ttf') format('truetype');}


/* //////////////////  end fonts /////////////////////////*/

* {
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
}

html {
	width: 100%;
	height: 100%;
}

body {
	min-height: 600px;
	width: 100%;
	font-family: 'Museo-500';
}

h1 {
	margin: 1em;
}

h1 a {
	position: absolute;
	top: 1em;
	left: 1em;
	height: 2em;
	background:url('/img/hofstetter-logo.svg') no-repeat;
	background-size: contain;
	text-indent: 100%;
	white-space: nowrap;
	width: 6em;
	overflow: hidden;
}


header nav {
	margin-top: 3em;
}

header > nav ul, footer ul {
	display: block;
	margin-left: 30%;
	width: 70%;
	text-align: right;
	white-space: nowrap;
}

header > nav ul li {
	font-size: 1.4em;
	padding: 0 2em;
}

header > nav ul li, footer ul li {
	display: inline-block;
	font-size: 1.4em;
	padding: 0 3em 0 0;
	white-space: nowrap;
}

header nav li a, footer ul li a, section > p a {
	text-decoration: none;
}

header nav li a {
	color: rgb(135,135,135);
}

.act a {
	border-bottom: 2px solid rgb(135,135,135);
}

body > section {
	margin-top: 3em;
}


.slide {
	width: 100%;
	overflow: hidden;
	background:url('/img/header-sample.jpg') no-repeat;
	background-size: cover;
	height: 20em;
}

.home {
	width: 100%;
	overflow: hidden;
	background:url('/img/profilhofstetter.jpg') no-repeat;
	background-size: cover;
	height: 20em;
}

.leistungen {
	width: 100%;
	overflow: hidden;
	background:url('/img/leistungenhofstetter.jpg') no-repeat;
	background-size: cover;
	height: 20em;
}

.ref {
	width: 100%;
	overflow: hidden;
	background:url('/img/referenzenhofstetter.jpg') no-repeat;
	background-size: cover;
	height: 20em;
}

.down {
	width: 100%;
	overflow: hidden;
	background:url('/img/downloadshofstetter.jpg') no-repeat;
	background-size: cover;
	height: 20em;
}

.data {
	width: 100%;
	overflow: hidden;
	background:url('/img/datenschutzhofstetter.jpg') no-repeat;
	background-size: cover;
	height: 20em;
}


.kont {
	width: 100%;
	overflow: hidden;
	background:url('/img/kontakthofstetter.jpg') no-repeat;
	background-size: cover;
	height: 20em;
}


section h2 {
	padding: 4.5em 0 4.5em 45%;
	font-weight: 300;
	font-size: 1.8em;
	color: rgb(230,80,30);
	font-family: 'Museo-700Italic';

	-moz-animation-duration: 3s;
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
	-moz-animation-name: slidein;
	-webkit-animation-name: slidein;
	animation-name: slidein;
}

section h3, section h4 {
	margin: 1em 0;
}

article ul li {
padding-bottom: .3em;
}

article ul li:before {
	content: '- ';
}

article ul li a {
color: white;
}

@-moz-keyframes slidein {
  from {
	margin-left:100%;
	width:100%
  }

  to {
	margin-left:0%;
	width:100%;
  }
}

@-webkit-keyframes slidein {
  from {
	margin-left:100%;
	width:100%
  }

  to {
   margin-left:0%;
   width:100%;
 }
}

@keyframes slidein {
  from {
	margin-left:100%;
	width:100%
  }

  to {
   margin-left:0%;
   width:100%;
 }
}

body > section h2 span {
	display: block;
	padding-left: 1em;
}

body > section h2 span:nth-child(2) {
	padding-left: 2em;
}

body > section {
	width: 100%;
}

body > section > article {
	min-height: 20em;
}

body > section > p {
	font-size: 1.2em;
	margin-top: -1em;
	margin-right: 5%;
	float: right;
	background: url('/img/hh-icon.svg') no-repeat;
	background-size: contain;
	background-position: right center;
	padding: .2em 2em .2em 0;
}

body > section > p a {
	font-size: 1.2em;
	padding: .3em 2em;
	color: white;
	background-color: rgb(240,150,5);
}


body > section > article, #accordion {
	padding: 2em 20%;
	background-color: rgb(240,180,110);
	font-family: 'Museo-300';
	font-size: 1.1em;
	min-height: 20em;
}

body > section article dt {
	margin-top: .8em;
}

body > section article dd {
	color: rgba(1,1,1,.6);
}

body > section > article > p {
	padding: .5em 0;
}

article > form > input {
	font-size: 1.1em;
	padding: .5em;
	margin: 2em 2em 0 0;
}

form input[type=submit] {
	color: white;
	font-family: 'Museo-300';
	background-color: rgb(240,150,5);
	border: none;
	padding: .6em 2em;
	cursor: pointer;
}


.e {
	font-size: 1.2em;
	margin: 1em 0;
	border: 1px dashed white;
	border-radius: .5em;
	background-color: rgba(240,150,5,.5);
	padding: .7em .5em;
}

.e:before {
	content: "Achtung: ";
}

address {
margin: 1em 0;
}

body > footer {
	width: 100%;
	background-color: rgb(135,135,135);
	padding-bottom: .5em;
}

body > footer ul li a {
	color: white;
}

body > footer ul {
	padding: 1em 0 0 0;
}

body > footer p {
	font-size: .5em;
	white-space: nowrap;
	display: block;
	margin-left: 4em;
	color: #bbb;
}

#splash {
	position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgb(240,150,5) url('/img/background-4.jpg') no-repeat; background-size: cover; cursor: pointer; opacity: 1;

	-moz-animation: fadeout .5s ease-in 2s forwards;
	-webkit-animation: fadeout .5s ease-in 2s forwards;
	-o-animation: fadeout .5s ease-in 2s forwards;
	animation: fadeout .5s ease-in 2s forwards;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
@keyframes fadeout {
	to {
		opacity: 0;
		top: 0; right: 100%; bottom: 0; left: -100%;
	}
}
@-webkit-keyframes fadeout {
	to {
		opacity: 0;
		top: 0; right: 100%; bottom: 0; left: -100%;
	}
}

#nosplash {
	position: fixed; top: 0; right: 0; bottom: 0; left: 0;  background: rgb(240,150,5) url('/img/background-4.jpg') no-repeat; background-size: cover; opacity: 1;
	transition: all 0.5s ease-in;
}

#nosplash.out {
	opacity: 0;
	top: 0; right: 100%; bottom: 0; left: -100%;
}

#splash div h4, #splash div p, #nosplash div h4, #nosplash div p {
	opacity: 0;
}

#splash div, #nosplash div {

	/*
	width: 20%;
	height: 150px;
	position: absolute;
	margin-top: -200px;
	top: 50%; transform: translateY(-50%);
	*/
	margin-top: 42%;
	background:url('/img/hofstetter-logo.svg') center center no-repeat;
	background-size: contain;
	height: 3.5em;
}


#accordion h3, #accordion h4 {
	font-family: 'Museo-700';
	font-size: 1.5em;
	color: rgb(230,80,30);
	cursor: pointer;
	display: block;
	margin: .2em 0;
	padding: .25em 0;
	font-weight: normal;
}
#accordion h3:before, #accordion h4:before {
	content: '+';
	border-radius: 1em;
	display: inline-block;
	border: 2px solid rgb(230,80,30);
	padding: 0 .2em 0 .25em;
	margin-right: .5em;
	font-size: smaller;
}
#accordion h4:before {
	margin-left: 2em;
}
#accordion h4 {
	font-size: 1.3em;
}
#accordion h3:hover, #accordion h4:hover {
	color: black;
}

#accordion .checked {
	color: black;
	margin-bottom: 0;
}
#accordion .checked:before {
	content: '-';
	border: 2px solid black;
	padding: 0 .3em 0 .35em;
}

#accordion article {
	opacity: 0;
	max-height:0;
	overflow: hidden;
	z-index:10;
	-webkit-transition: all 0.8s;
	-moz-transition: all 0.8s;
	transition: all 0.8s;
}
#accordion article p {
	margin-bottom: .5em;
}

#accordion article p a {
	font-style: bold;
	color: white;
}

#accordion .checked + article {
	opacity: 1;
	max-height: 200em;
	border-bottom-left-radius: .25em;
	border-bottom-right-radius: .25em;
	margin-bottom: .125em;
	margin-left: 2.2em;
}

#slide figure { position: absolute; top: 12em; left: 25%; width: 50%; }
#slide figure > a { position: absolute; top: 12em; background: rgba(230,80,30,.8); color: transparent; border-radius: 1em; display: block; padding: .1em .45em; cursor: pointer; transition: all 0.5s ease-in; }
#slide figure blockquote, #slide figure footer { opacity: 0; transition: all 0.5s ease-in; }
#slide .front blockquote, #slide .front footer { opacity: 1; }
#slide .front > a {
	background: rgba(0,0,0,.5); color: transparent;
	-moz-box-shadow:    inset 0 0 .5em #000000;
	-webkit-box-shadow: inset 0 0 .5em #000000;
	box-shadow:         inset 0 0 .5em #000000;
}

.voices figure {
	padding-bottom: 1em;
	border-bottom: 2px dashed rgba(255,255,255,.5);
}

.voices figure p {
	padding: 1em 0;
}

.voices figure figcaption {
	font-family: 'Museo-700Italic';
	font-weight: normal;
	font-size: .8em;
}

.voices figure figcaption span {
	display: block;
	color: rgba(0,0,0,.5)
}

blockquote {
	background: rgba(255,255,255,.5);
	padding: 1em;
}

blockquote p {
	font-weight: normal;
	font-size: 1.2em;
	color: rgb(230,80,30);
	font-family: 'Museo-700Italic';
}

blockquote p:before {
	content: '»';	
}

blockquote p:after {
	content: '«';	
}

figure > footer {
	background: rgba(255,255,255,.5);
	padding: 0 1em 1em 0;
	text-align: right;
}

.author span {
	display: block;
	color: #aaa;
}

#imp ul {
	margin-bottom: 2em;
}

@media (max-width: 850px) {

	body {
	min-width: 600px;
	}

	body > section {
	margin-top: .5em;
	}

	.slide {
	height: 12em;
	}

	.slide h2 {
	font-size: 1.2em;
	padding: 3em 0 4.5em 40%;
	}

	header > nav ul {
	margin-left: 70%;
	width: 30%;
	}

	header > nav ul li {
	padding: 0 3em .7em 0;
	}

	header > nav ul, footer ul {
	white-space: normal;
	}
	
	#slide figure { left: 5%; width: 90%; top: 17em; }

}