/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */
	/* great-vibes-regular - latin */
@font-face {
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/great-vibes-v5-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Great Vibes'), local('GreatVibes-Regular'),
       url('../fonts/great-vibes-v5-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/great-vibes-v5-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/great-vibes-v5-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/great-vibes-v5-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/great-vibes-v5-latin-regular.svg#GreatVibes') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/roboto-v18-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Roboto Italic'), local('Roboto-Italic'),
       url('../fonts/roboto-v18-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* #Site Styles
================================================== */

/* #Page Styles
================================================== */

body {
	background-color: #2293CF;
}
#header {
	height: 200px;
}
#header1 {
	font: 50px "Roboto", "Arial", sans-serif;
	font-weight: bold;
	font-style: italic;
	color: #AC3614;
	position: absolute;
	left: 10%;
	top: 66px;
}
#header2 {
	font: 100px "Great Vibes", cursive;
	color: #FE9878;
	position: absolute;
	left: 15%;
	top: 92px;
}
#header-hinten {
	background-image: url(../images/header-img.jpg);
	background-repeat: repeat-x;
	width: 100%;
	height: 100%;
}
.nav {
	margin-top: 10px;
}
.nav ul {
	font: 14px/18px "Roboto", "Arial", sans-serif;
	font-weight: bold;
	margin: 0 0 5px 0;
}
.nav ul li {
	display: inline;
	margin-right: 3px;
	height: 30px;
}
.nav li:last-child {
	margin: 0;
}
.nav li a:link {
	text-decoration: none;
	display: inline-block;
	width: 23.9%;
	height: 30px;
	text-align: center;
	line-height: 30px;
}
#left li a:link {
	width: 90%;
}
#right li a:link {
	width: 100%;
}
.nav li a {
	color: #A82F00;
	background-color: #FC9778;
}
.nav a:hover {
	text-decoration: underline;
	color: #C00;
}
#nav_mitte {
	text-align: right;
}
#nav_mitte ul {
	font: 14px/18px "Roboto", "Arial", sans-serif;
	font-weight: bold;
	list-style: none;
}
#nav_mitte a {
	text-decoration: none;
	color: #784A00;
}
#nav_mitte a:hover {
	color: #C00;
}
#content {
	clear:both;
}

#kontakt1 {
	font: 12px/14px "Roboto", "Arial", sans-serif;
}
#kontaktformular {
	width: 100%;
}
.sp3 {
	width: 110px;
	vertical-align: middle;
}
.sp4 {
	width: 100%;
	vertical-align: middle;
}
#name, #telefon, #email, #betreff {
	margin: 0;
	padding: 3px;
	height: 30px;
	width: 100%;
}
#nachricht {
	margin: 0;
	height: 100px;
	padding: 3px;
	width: 100%;
}
#absenden {
}
#antwort {
	color: #F00;
	margin-left: 10px !important;
}
#video1 video {
	width: 100%;
	height: auto;
}
#anfahrt img {
	width: 100%;
	height: auto;
}
#ticker {
	background-color: #FC9778;
	margin-top: 2px;
	min-height: 20px;
	font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace; 
}
/* Nur Internet Explorer 10 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#ticker iframe {
	height: 25px;
}
}
#footer {
	margin-top: 5px;
	text-align: right;
}
#footer-hinten {
	background-image: url(../images/footer-img.jpg);
	background-repeat: repeat-x;
	width: 100%;
	height: 40px;
}
#footer a {
	padding: 20px;
	text-decoration: none;
	color: #784A00;
}
#footer a:hover {
	color: #C00;
}

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 280px) {
#header1 {
	font: 24px "Roboto", "Arial", sans-serif;
	font-weight: bold;
	font-style: italic;
	color: #AC3614;
	position: absolute;
	left: 10%;
	top: 84px;
}
#header2 {
	font: 50px "Great Vibes", cursive;
	color: #FE9878;
	position: absolute;
	left: 15%;
	top: 100px;
}
h1 {
	font-size: 3rem;
}
#header-bild {
	display:none;
	height: 128px;
	width: 197px;
	position: absolute;
	z-index: 1000;
	top: 67px;
	left: 70%;
}
.nav li a:link {
	width: 48%;
	margin-bottom: 6px;
}
#left {
	display: none;
}
#video1 {
	display: none;
}
#footer a {
	padding: 12px;
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
#header1 {
 font: 30px "Roboto", "Arial", sans-serif;
 font-weight: bold;
 font-style: italic;
 color: #AC3614;
 position: absolute;
 left: 10%;
 top: 84px;
}
#header2 {
 font: 70px "Great Vibes", cursive;
 color: #FE9878;
 position: absolute;
 left: 15%;
 top: 100px;
}
.nav li a:link {
 width: 200%;
 margin-bottom: 6px;
}
#left {
 display: none;
}
#video1 {
 display: inline-block;
}

#footer a {
 padding: 12px;
}
}

/* Larger than tablet */
@media (min-width: 750px) {
#header-bild {
	display:inline;
	left: 63%;
}
#header1 {
	font: 30px "Roboto", "Arial", sans-serif;
	font-weight: bold;
	font-style: italic;
	color: #AC3614;
	position: absolute;
	left: 5%;
	top: 84px;
}
#header2 {
	font: 70px "Great Vibes", cursive;
	color: #FE9878;
	position: absolute;
	left: 10%;
	top: 100px;
}
.nav li a:link {
	width: 23.2%;
}
#left {
	display: inline-block;
}

h1 {
	font-size: 4rem;
}
}

/* Larger than desktop */
@media (min-width: 1170px) {
.nav li a:link {
	width: 23.9%;
}
#header-bild {
	left: 70%;
}
#header1 {
	font: 50px "Roboto", "Arial", sans-serif;
	font-weight: bold;
	font-style: italic;
	color: #AC3614;
	position: absolute;
	left: 10%;
	top: 68px;
}
#header2 {
	font: 100px "Great Vibes", cursive;
	color: #FE9878;
	position: absolute;
	left: 15%;
	top: 100px;
}
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
}