@charset "UTF-8";
/* CSS Document */

/* Das CSS für den Hamburger hat eine eigene Datei: hamburger.css /*

/*border box modell*/

* {
	box-sizing:border-box;
}

body {
	margin:0;
	padding:0;
	border:0;
	font-family: 'Ubuntu', sans-serif;
	font-weight:400;
	font-size:1.1em;
	line-height: 1.7em;
	color: rgb(153,153,153);
}

a:link, a:visited, a:active { 
text-decoration:none;
color: rgb(0,0,0);
}

/*full-size Image responsive*/

.fullscreen {
  
  height: 100vh;
  width: 100%;
  /*position: relative;*/
 
}

.fullscreen-90vh-smartphone {
  
  height: 90vh;
  width: 100%;
  position: relative;
 
}

.backgound-image-general {
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

.background-image-url-1 {
	background-image: url(../img/Creativ-Werbetechnik-Hero-Image-480x600px.jpg);
}

.background-image-url-2 {
	background-image: url(../img/Werbetechnik-Ara-480x600px.jpg);
}

.background-color-yellow {
	background-color: rgb(255,204,0);
}

.background-black {
	background: rgb(0,0,0);
}

.scroll-down-button {
  position: absolute;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 10px;
  width: 47px;
  height: 46px;
  background: url("../img/pfeil-nach-unten.svg") no-repeat center center;
  z-index:1;
}

/*.scroll-down-button {
  
  margin-top:90%;
  margin-left: auto;
  margin-right: auto;
  width: 47px;
  height: 46px;
  background: url("../img/pfeil-nach-unten.svg") no-repeat center center;
  z-index:1;
}*/


.img-replace {
  /* replace text with a background-image */
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

/*Overlay-Menue*/

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.5);
	z-index: 10;
	display: none;
}

.content-centered {
	position: relative;
	width: 85%;
	max-width: 680px;
	left: 50%;
	top: 50%;
	right: auto;
	bottom: auto;
	transform: translateX(-50%) translateY(-50%);
}

.menu-background {
	background-color: rgb(255,255,255);
}

.menue-flex-container {
	text-align: center;
}

.menu-item {
	/*cursor: pointer;*/
	/*background: orange;*/
}

.menu-item p {
	/*background: rgb(153,0,0);
	color: rgb(255,255,255);*/
	text-align: left;
	padding-left: 10px;
	border-bottom: solid 1px rgb(0,0,0);
}

.menu-item p::before {
	content: url(../img/menu-link-icon.png);
	width:10px;
	height:auto;
	margin-right: 10px;
}

/*Logo*/

.logo-box {
	position: fixed;
	width: 60vw;
	height: auto;
	/*width: 251px;
	height: 75px;*/
	top: 15px;
	left: 10%;
	/*-webkit-transform: translateX(-50%);
  	-moz-transform: translateX(-50%);
  	-ms-transform: translateX(-50%);
  	-o-transform: translateX(-50%);
	transform: translateX(-50%);*/
	z-index:1;
}



/*@-webkit-keyframes slide {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  } 
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}*/

/*Content-Container nach dem Flex-Modell*/

.flex-container {
	width: 85%;
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

.img-responsive {
	max-width: 100%;
	height: auto;
}

.headline-fullsize-image {
	position: relative;
	display: inline-block;
	/*width: 80%;*/
	width: auto;
	left: 10%;
	top: 70%;
	padding: 0px 20px;
	color: rgb(153,0,0);
	background: rgb(255,255,255);
	box-shadow:0px 0px 5px 5px rgba(0,0,0, 0.5);
	-moz-box-shadow:0px 0px 5px 5px rgba(0,0,0, 0.5);
	-webkit-box-shadow:0px 0px 5px 5px rgba(0,0,0, 0.5);
	/*font-weight: 300;*/
	/*display: none;*/
	/*visibility:hidden;*/
	z-index:1;
	
}


#map {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: orange;
}

/*.no-touch*/ .desktop-only {
	display: none;
}

/* Für die Counter*/

.counter-2-em-width {
	display: inline-block;
	width: 2em;
	/*background: orange;*/
	text-align: center;
}

.counter-3-em-width {
	display: inline-block;
	width: 3em;
	/*background: orange;*/
	text-align: center;
}

#reload-button {
	cursor: pointer;
}

/*Das Scrollen nach oben Element*/

#scrolltop {
	position:fixed;
	right:15px;
	bottom:15px;
	background-color:rgba(102,102,102,0.33);
	width:50px;
	height:50px;
	display:none;
	border-radius:5px;
}

/*Formular Danke und Fehler-Seiten und Overlay Smartphone Landscape*/

.contentbox {
	position: absolute;
	left: 50%;
  	top: 50%;
  	bottom: auto;
  	right: auto;
	margin: auto;
	-webkit-transform: translateX(-50%) translateY(-50%);
  	-moz-transform: translateX(-50%) translateY(-50%);
  	-ms-transform: translateX(-50%) translateY(-50%);
  	-o-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	width: 90%;
	max-width: 768px;
	text-align: center;
}

.back-button {
	clear:both;
	margin: 20px auto 0px;
	padding:5px;
	width:60%;
	background-color: rgb(153,0,0);
	color:rgb(255,255,255);
	-webkit-transition: background-color 0.5s; /* Safari */
    transition: background-color 0.5s;
}

.back-button a {
	color:rgb(255,255,255);
}

.back-button img {
	margin-top: 5px;
	float:left;
}

.no-touch .back-button:hover {
	background: rgb(255,102,0);
}

img.responsive250 {
	max-width:165px;
}

/*Overlay Smartphone Landscape*/

.text-white {
	color: rgb(255,255,255);
}

.overlay-landscape {
	position: fixed;
	left: 0;
	top: 0;
	display: none;
	z-index: 15;
}

.overlay-landscape p {
	position: absolute;
	left: 50%;
  	top: 50%;
  	bottom: auto;
  	right: auto;
	-webkit-transform: translateX(-50%) translateY(-50%);
  	-moz-transform: translateX(-50%) translateY(-50%);
  	-ms-transform: translateX(-50%) translateY(-50%);
  	-o-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	text-align: center; /*falls Umbruch auf kleinen Displays*/
}



/* Abstände*/

.margin-top-150 {
	margin-top: 150px;
}

.margin-bottom-100 {
	margin-bottom: 100px;
}

.margin-bottom-30 {
	margin-bottom: 30px;
}

.margin-bottom-0-30 {
	margin-bottom: 0px;
}

.icon {
	text-align: center;
}

.padding-30 {
	padding: 30px;
}

/*Behebt das Versatzproblem mit den Anchors im firefox */
.anchor {
	display: block;
    position: relative;
    top: 0px;
}

/*Typographie*/

h1, h2 {
	font-weight:700;
	font-size: 1.1em;
}

.head-background-yellow {
	background-color:rgb(255,204,0);
	padding:10px;
}

.text-red {
	color: rgb(153,0,0);
}

.text-align-center {
	text-align: center;
}

.big-font {
	font-size: 3em;
	color: rgb(153,0,0);
}

.date-counter {
	font-size: 1.8em;
	color: rgb(153,0,0);
	line-height: 120%;
}




/*Desktop-Version*/

@media screen and (min-width: 750px) {
	
.fullscreen-90vh-smartphone {
  
  height: 100vh;
  width: 100%;
  /*position: relative;*/
 
}

.background-image-url-1 {
	background-image: url(../img/Creativ-Werbetechnik-Hero-Image-1920x1080px.jpg);
	
}

.background-image-url-2 {
	background-image: url(../img/Werbetechnik-Ara-1920x1080px.jpg);
	
}

.no-touch .backgound-image-general {
	background-attachment:fixed;
}

.menue-flex-container {
	display: flex;
	justify-content: space-between;
}

.menu-item img {
	transition: transform .5s;
}

.no-touch .menu-item img:hover {
	transform: scale(1.25);
}

.menu-item p {
	/*background: rgb(255,255,255);
	color: rgb(153,0,0);*/
	display: inline-block;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
	background: rgb(255,204,0);
	border-bottom: solid 1px rgb(0,0,0);
	transition: transform .5s;
}

.no-touch .menu-item p:hover {
	/*border-bottom: solid 1px rgb(102,102,102);
	background: rgb(230,230,230);*/
	transform: scale(1.25);
}



.menu-item p::before {
	display: none;
}

/*Logo Box Desktop*/

.logo-box {
	left: 50%;
	-webkit-transform: translateX(-50%);
  	-moz-transform: translateX(-50%);
  	-ms-transform: translateX(-50%);
  	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 251px;
	height: auto;
}

/* Fehler und Danke Seiten Formular*/

.back-button {
	width:40%;
}

img.responsive250 {
	max-width:250px;
}

/* Boxen */

.flex-container {
	display:flex;
  	justify-content: space-between;
}

.flex-item-33-percent {
	flex-basis: 33%;
}

/* 49.75% um einen kleinen Rand zwischen den Elementen zu erzeugen*/
.flex-item-50-percent {
	flex-basis: 49.75%;
}

.flex-item-67-percent {
	flex-basis: 67%;
}

.flex-item-100-percent {
	flex-basis: 100%;
}

/*.no-touch*/ .desktop-only {
	display: block;
}

/*Abstände*/

.icon {
	text-align: left;
}

.center-horizontal {
	margin-left: auto;
	margin-right: auto;
}

/*hover effekt für bilder*/

.zoom-1-1 {
	transition: transform .2s; /* Animation */
}

.no-touch .zoom-1-1:hover {
	transform: scale(1.1);
}

/*Skalierung ohne Hover*/
.zoomed-1-5 {
	transform: scale(1.5);
}

.overflow-hidden {
	overflow: hidden;
}

/*Abstände*/

.margin-bottom-0-30 {
	margin-bottom: 30px;
}

}

@media screen and (max-width: 350px) {

.contentbox {
	position: absolute;
	left: 50%;
  	top: 65px;
  	bottom: auto;
  	right: auto;
	/*height:500px;*/
	/*margin: auto;*/
	-webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
  	-ms-transform: translateX(-50%);
  	-o-transform: translateX(-50%);
  	transform: translateX(-50%);
	width: 90%;
	max-width: 768px;
	text-align: center;
}

h1, h2 {
	font-size: 0.9em;
}

}

@media only screen and (min-width: 500px) and (max-width: 750px) and (orientation: landscape) {

.overlay-landscape {
	display:block;
	z-index: 20;
}

}