/* @override 
	https://schloss-aktiv-kopf.local/assets/css/add.css?*
	https://zum-goldenen-kopf.ch/assets/css/add.css?*
	https://www.zum-goldenen-kopf.ch/assets/css/add.css?*
	 */

	
header#header {
	background-color: #c01b25;
	box-shadow: 0 3px 3px rgba(23, 23, 23, 0.52);
}
body {
	background: #fee9bd;
}
/* Kopf Menu */
#navPanel {
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-transform: translateX(-275px);
	-webkit-transform: translateX(-275px);
	-ms-transform: translateX(-275px);
	transform: translateX(-275px);
	-moz-transition: -moz-transform 0.5s ease;
	-webkit-transition: -webkit-transform 0.5s ease;
	-ms-transition: -ms-transform 0.5s ease;
	transition: transform 0.5s ease;
	display: block;
	height: 100%;
	overflow-y: auto;
	position: fixed;
	top: 0;
	width: 436px;
	z-index: 10002;
	background: #761412;
	color: #e0e0e0;
	text-align: right;
	left: 0;
	padding-top:  0.25em;
	margin-left: -200px;
	box-shadow: 3px 0 20px #272727;
}
div#navPanel nav a.link.depth-0 {
	border-style: none;
	margin-top: 18px;
	margin-right: -30px;
	font-weight: bold;
	color: #b54a50;
	text-transform: capitalize;
	font-variant: small-caps;
}
div#navPanel nav a.link:nth-child(3),
div#navPanel nav a.link:nth-child(10),div#navPanel nav a.link:nth-child(14) {
font-weight: bold;
color: #ffa438;
}
div#navPanel nav a.link:nth-child(1) {
padding-right: 3.5em;
font-weight: normal;
	font-style: normal;
	border-bottom: 1px solid rgb(150, 108, 53);
color: #ffffff;
font-variant: normal;
}

#navPanel .link {
	border-top: 0;
	border-bottom: 1px solid rgb(150, 108, 53);
	color: #eaeaea;
	display: block;
	padding: 0 2.2em 0 0;
	font-size: 1em;
	margin-top: 5px;
	line-height: 1em;
	height: 1.2em;
}
div#navPanel nav a.link:last-child {
	background-color: #9f1d18;
	text-align: right;
	width: 290px;
	margin-left: 125px;
	padding-right: 15px;
	padding-top: 2px;
	color: #ffffff;
	border-radius: 3px;;
}
.dropotron li.active > a, .dropotron li.active > span, .dropotron li:hover > a, .dropotron li:hover > span {
	background: #c01b24;
}

#navButton .toggle.en:before   {
		content: '\f0c9  content';

}
#topButton .toggle.en:before   {
		content: '\f0aa  to the top';

}

h1, h2, h3, h4, h5, h6 {
	color: #8e0008;
	line-height: 1em;
	margin: 0 0 0.5em 0;
}
#main > header h3 {
	border-top: 1px solid #8e0008;
	display: inline-block;
	margin-top: 0.5em;
	margin-right: 0;
	margin-left: 0;
	padding-top: 0.5em;
	padding-right: 0;
	padding-left: 0;
	color: #cd030e;
}


.reservation ul.actions li a.button {
	margin: 0 5%;
	font-size: 61%;
	height: 37px;
	line-height: 35px;
	padding: 0;
	width: 80%;
}
@media screen and (max-width: 840px){
span#stapel section.reservation div.mobileadresse span {
	font-size: 96%;
	
}

div#suiten.datuminfo h3 {
	margin-top: -2em;
	margin-bottom: 1em;
	text-align: center;
	font: 300% "Lucida Grande", Lucida, Verdana, sans-serif;
	text-transform: uppercase;
	color: #ffffff;
	text-shadow: 0 0 5px #494949;
}

div#superior.datuminfo h3,
div#doppelzimmer.datuminfo h3,
div#einzelzimmer.datuminfo h3 {
	margin-top: -3em;
	margin-bottom: 2em;
	text-align: center;
	font: 160% "Lucida Grande", Lucida, Verdana, sans-serif;
	text-transform: uppercase;
	color: #ffffff;
	text-shadow: 0 0 5px #494949;
}
}

	

section#main.container section.box hr {
	clear: both;
}

section.banner.hotel {
	background: url(/assets/images/hotel/banner.jpg) center center;
	background-size: cover;
}
section.banner.reservation {
	background: url(/assets/images/allgemein/banner_11Kopf.jpg) center center;
	background-size: cover;
}

section.banner.geschichte {
	background: url(/assets/images/geschichte/banner.jpg) center center;
	background-size: cover;
}

section.banner.hotel {
	background: url(/assets/images/hotel/banner.jpg) center center;
	background-size: cover;
}
section.banner.standort {
	background: url(/assets/images/Banner/standort.jpg) center center;
	background-size: cover;
}

section.banner.veranstaltungen {
	background: url(/assets/images/Banner/banner_EventsKopf.jpg) center center;
	background-size: cover;
}

section.banner.angebotezimmer {
	background: url(/assets/images/hotel/banner.jpg) center center;
	background-size: cover;
}

section.banner.bankette {
	background: url(/assets/images/banner_Hochzeit.jpg) center center;
	background-size: cover;
}

section.banner.schulung {
	background: url(/assets/images/seminare/banner_seminare_Kopf.jpg) center center;
	background-size: cover;
}

section.banner.raeumlichkeiten {
	background: url(/assets/images/raumlichkeiten/banner_RauemeKopf.jpg) center center;
	background-size: cover;
}

section#main.container header ul.alt.fit.small li {
	color: #4f4f4f;
	line-height: 0.5em;
	border-top-color: #9b9b9b;
	border-top-style: none;
}
section#main.container section.box.geschichte h3 {
	text-align: center;
	padding: 4px 27px 14px 20px;
	line-height: 130%;
}
@media screen and (min-width: 841px) and (max-width: 980px){
	
}

div#navPanel nav a.link:nth-child(1),
div#navPanel nav a.link:nth-child(7) {
padding-right: 2em;
}

#cta {
	background: #d9c193;
	color: #f1efe6;
	padding: 3.5em 0 4em 0;
	text-align: center;
}
input[type="submit"],  input[type="reset"],  input[type="button"],  .button {
	background-color: rgba(142, 0, 8, 0.81);
}

body.navPanel-visible #page-wrapper p {transform: translateX(-10px);}
body.navPanel-visible #page-wrapper h2 {transform: translateX(-15px);}
body.navPanel-visible #page-wrapper section {transform: translateX(20px);}
body.navPanel-visible #page-wrapper img {transform: translateX(0px);}
/* @end */

body.navPanel-visible #page-wrapper p {
	backface-visibility: hidden;
	transition: transform 0.2s ease;
}
body.navPanel-visible #page-wrapper h2 {
	backface-visibility: hidden;
	transition: transform 0.8s ease;
}
body.navPanel-visible #page-wrapper section {
	backface-visibility: hidden;
	transition: transform 1s ease;
}
body.navPanel-visible #page-wrapper img
 {
	backface-visibility: hidden;
	transition: transform 0.5s ease;
}
section#main.container section.box.geschichte hr{
	clear: left;
}
#page-wrapper section.banner img {
	background: url(/assets/images/zumGoldenenKopf-s.png) center center;
	background-size: cover;
}

/* @group Animation Kopf */ 

.schatten {
  perspective: 1000px;
  position: absolute;
  width: 17vw;
  height: 17vw;
  z-index: -5;
  top: 0;
  left: -8px;
}
.schatten img {
  width: 17vw;
  height: 17vw;
}
.wrapperBrand {
  perspective: 1000px;
  left: 22vw;
  top:  60px;
  position: absolute;
  width: 15vw;
  z-index: 2;
}

.logotext {
  left: 39vw;
  top:  80px;
  position: absolute;
  width: 40vw;
	background: url(/assets/images/zumGoldenenKopf-s.png) center center;
	background-size: cover;
  z-index: 2;
}
.rotating, .rotation2, .rotating3, .rotating4 {
  position: absolute;
  top: 0;
  width: 15vw;
 }

@media screen and (max-width: 480px){
.schatten {
  position: absolute;
  width: 22vw;
  height: 22vw;
}
.schatten img {
  width: 21vw;
  height: 21vw;
}


.wrapperBrand {
  left: 7vw;
  top: 50px;
  width: 20vw;
}
.logotext {
  left: 30vw;
  top: 56px;
  width: 62vw;
}
.rotating, .rotation2, .rotating3, .rotating4 {
  top: 0;
  width: 20vw;
 }
	
}

@media screen and (min-width: 841px){
.schatten {
  position: absolute;
  width: 200px;
  height: 200px;
  left: -25px;
  top: -14px;
}
.schatten img {
  width: 200px;
  height: 200px;
}
.wrapperBrand {
  perspective: 1000px;
  width: fit-content;
  left: calc(50vw - 300px);
  position: absolute;
  width: 150px;
  top:  110px;

}
.logotext {
   left: calc(50vw - 130px);
  position: absolute;
  width: 400px;
    top:  110px;

}
.rotating, .rotation2, .rotating3, .rotating4 {
  position: absolute;
  top: 0;
  width: 150px;
 }
}

.rotating {
  animation: rotateY 3s infinite linear;
  transform-style: preserve-3d;
}
.schatten {
  animation: rotateY 3s 0.1s infinite linear;
  transform-style: preserve-3d;
	
}
.rotating4 {
  z-index: -10;
  animation: rotateYDicke 3s infinite linear;
  transform-style: preserve-3d;
}

.rotating2, .rotating3 {
  animation: rotateY 3s 0.1s infinite linear;
  transform-style: preserve-3d;
}

@keyframes rotateY {
  0%   { transform: rotateY(0deg);opacity: 100; }
  20% {opacity: 100;}
  25% {opacity: 0;}  
  30% {opacity: 100;}
  50%  { transform: rotateY(-180deg); }
  70% {opacity: 100;}
  75% {opacity: 0;}
  80% {opacity: 100;}
  100% { transform: rotateY(-360deg);opacity: 100; }
}
@keyframes rotateYDicke {
  20%   { transform: rotateY(0deg); }
  50%  { transform: rotateY(-180deg);; }
  80% { transform: rotateY(-360deg); }
}

div#page-wrapper section.banner {
	background-color: #666;
	background-position: center top, center top;
	background-size: cover, cover;
	background-repeat: no-repeat, no-repeat;
	color: #fff;
	padding: 5em 0 12em;
	text-align: center;
	margin-top: 0;
	height: 507px;
}
span#stapel section.reservation ul.actions {
	position: absolute;
	margin: 0;
	padding: 0;
	width: 100vw;
	bottom: -80px;
}
span#stapel section.reservation div.mobileadresse {
	position: absolute;
	width: 100vw;
	bottom: 0;
	padding-bottom: 3px;
}
span#stapel section.reservation ul.actions li {
	margin: 0;
	padding: 0;
	width: 40%;
}
/* @end */

span#stapel section.reservation {
position: absolute;
margin-top: 0;
width: 100vw;
}
@media screen and (max-width: 840px){
div#page-wrapper section.banner {
	height: 362px;
}
span#stapel section.reservation ul.actions li {
	margin: 0;
	padding: 0;
}
.reservation ul.actions li a.button {
	margin: 0;
	padding: 0;
	width: 100%;
}
.reservation ul.actions li a.button:last-of-type {
	margin-top: 0;
		margin-bottom: 0;
	padding: 0;
	width: 100%;
	margin-left: -2%;
}
span#stapel section.reservation ul.actions {
	bottom: 66px;
}
	span#stapel section.reservation div.mobileadresse {
		bottom: 28px;
		padding-right: 21px;
		padding-left: 21px;
	}
span#stapel section.reservation ul.actions li {
	margin: 0 0 11px;
	padding-top: 0;
	padding-right: 0;
	padding-left: 0;
}
}

@media screen and (max-width: 480px){
span#stapel section.reservation div.mobileadresse {
	bottom: 7px;
	font-size: 16px;
	line-height: 1px;
}
span#stapel section.reservation div.mobileadresse span {
	display: inline;
}
}

body.prov {
	background: url(/bg_prov.png) center top no-repeat #9b0405;
	background-size: cover;
}
body.prov div.tagderoffenentuere img {
	margin-top: 30vw;
}
@media screen and (max-width: 840px){
body.prov div.tagderoffenentuere img {
	margin-top: 40vw;
	width: 100%;
}

}
div#ibelsa-widget-div {
text-align: center;
}
div#ibelsa-widget-div div.ibelsa-widget-box-container.pull-left {
	width: 100%;
	background-color: #f1f1f1;
}
div#ibelsa-widget-div div.ibelsa-widget-box-container.pull-left div.ibelsa-box-header.center-block div.text-center.ibelsa-headings
{
	background-color: #fee8bd;
}

button#ibelsa-check-availability.btn.ibelsa-colored-btn {
	width: 89%;
}