/* =Responsive (Mobile) Design
-------------------------------------------------------------- */

@media screen and (min-width: 1100px) {
  .fixed{background-attachment: fixed;}  .myContainer.myMenu{width: 700px!important;} .section .border{width: 35%; margin: 0 auto; padding: 110px 100px;}  
    .section.small .border{text-align: center;} 
    .section{padding: 15% 0;}
.myContainer.singleEvent{width: 50%!important; margin: 0 auto; border: 2px solid #683c11;}



.colorBg{padding: 0px 10% 50px 10%;}
.colorBg h3 	{ font-size: 25px; line-height: 30px; padding: 30px 0; margin: 0; }

.pngBg												{background-position: 43% 30%;}
.myContainer.intro									{text-align: center; padding: 100px 0;}
.mySingle:nth-child(4n+2),
.mySingle:nth-child(4n+3)							{border: 1px solid #ffffff; color: #ffffff;}
       
.mySingle .colorBg					{background: none;}
.mySingle:nth-child(4n+2) h1,
.mySingle:nth-child(4n+3) h1 						{color: #ffffff;}

.mySingle											{ float: left; position: relative; width: 48%; margin: 20px 1%; background-position: center;  background-size: cover; height: 650px; text-align: center;}

.pngBg												{ height: 300px; background-size: 250%; transition: all 0.5s; }
 .myBanner h1										{ font-size: 40px; }    
.page-template-TextTemplate 
.categ .myContainer table 							{ width: 100%; height: 100%; margin: 100px auto!important; text-align: center;}
.mySingle:nth-child(odd){float: right;}
.mySingle:nth-child(3){margin-top: 300px;}
    
}

@media screen and (min-width: 900px) {
    .resp{display: none!important;}   
    .book .gutschein{display: block!important; height: 110px;}
    .categBanner{min-height: 300px;}
    
}
    


@media screen and (max-width: 900px) {
    .book .gutschein.resp{display: block; position: static; transform: none;  width: 50%; float: left; height: 100px;}
    .openForm.resp{width: 50%; float: left;}
    .book .gutschein.resp:hover{background-color: transparent;}
    .respContainer{width: 30%; margin: 0 auto;}
}
  
    
@media screen and (max-width: 1150px) {
    .myContainer.single{padding: 50px 20px;}
    #header											{ background: #2a190f; }
    .menu .current_page_item a, .menu .current-menu-item a { background-color: #343434;}
    
    .sub-header-menu								{ display: none; }
    
	.js .main-nav 									{ position: relative;	clear: both;	 margin: 0 auto; 	}
	.js .main-nav .menu 							{ display: none; position: absolute; width: 100%; top: 0px; z-index: 1000; margin: 0; }
	.js .main-nav .menu ul 							{ margin-top: 1px; }
    .js .main-nav .menu li:firtst-child 			{ display: none; }
	.js .main-nav .menu li 							{ float: none; background-color: #2a190f; border: none; display: block; text-align: center; border-bottom: 1px solid #4f3323; }
	.js .main-nav .menu li a 						{ color: #e0ae00; font-size: 13px; font-weight: normal; height: 45px; line-height: 45px; padding: 0 15px; border: none; text-shadow: none; text-align: left; cursor: pointer; }
	.js .main-nav .menu li.current_page_item,
	.js .menu .current_page_item a,
	.js .menu .current-menu-item a 					{ background-color: #e0ae00; color: #4f3323; }
    .js .main-nav .menu li.current_page_item a 		{ color: #2a190f; }
	.js .main-nav .menu li li a 					{ position: relative; }
	.js .main-nav .menu li li li a 					{ position: relative; 	padding: 0 10px 0 40px;	}
	.js .main-nav .menu li ul 						{ position: static; visibility: visible; }
	.js .main-nav .menu ul 							{ min-width: 0;	}
	.menu-right-menu-container{display: none;}
    .page-template-EventTemplate-php .myContainer td{width: 100%; display: block; padding: 0px;}
}

@media screen and (min-width: 1150px) {
    #responsive_menu_button 							{display: none;}
    .main-nav											{display: none;}
    .hideMenu											{display: none!important;}
    
    .page-template-EventTemplate-php .myContainer td 	{width: 50%; padding: 10px;}
    .sub-header-menu ul 								{width: 150px!important;}
    .categ h6{width: 60%; margin:0 auto;}
}

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

    .js .sub-header-menu {
		display: none;
	}
    
    #fbe_sidebar{margin: 0;}

	.grid,
	.grid-right {
		display: block;
		float: none;
		width: 100%;
		margin-right: 0;
	}

	.copyright,
	.scroll-top,
	.powered {
		float: left;
	}

	#featured-image .fluid-width-video-wrapper {
		margin: 20px 0 0 0;
	}

	.front-page  #widgets {
		margin-top: 40px;
	}

	.top-widget,
	.front-page  .top-widget {
		margin-top: 0 !important;
	}

	.hide-desktop {
		display: block;
	}

	.show-desktop {
		display: none;
	}

	.hide-980 {
		display: none;
	}

	.show-980 {
		display: block;
	}

}


@media screen and (max-width: 800px) {
    
    .colorBg h1, .myBanner h1{font-size: 30px;}
    .colorBg { padding: 20px; text-align: center;}
    .categBanner{padding: 0!important;}
    .single .post h1{font-size: 20px;}
   
}

@media screen and (max-width: 700px) {
    .list ul li a p{ margin: 2px 0;}
    .myBanner ul.links{width: 100%!important; padding: 0!important; transform: translate(-50%, -30%);}
    .myBanner ul.links li div .line{display: none;}
    .myBanner ul.links li a.fancy{font-size: 20px;}
    .home .myBanner{height: 100vh;}
    .respContainer{width: 70%;}
}


@media screen and (min-width: 650px) {
    .wpcf7 input[type="text"], .wpcf7 input[type="email"], textarea{width: 600px; height: 50px; padding: 10px 30px;}
     textarea{height: 400px; }
    input[type='submit']{width: 600px; height: 50px;}
        .myContainer.intro{width: 75%!important;}
    
    .content-highlight 						{ margin: 20px auto;padding: 30px; background: #2a190f; color: #fff;  width: 55%; position: relative; border: 1px solid #ffffff; margin-top: 100px;}
    .Voll td{padding: 50px;}
    .content-highlight:before{content: ''; position: absolute; top: -50px; left: -50px; right: -50px; bottom: -50px; background: #2a190f; z-index: -1; display: block;}
}


@media screen and (max-width: 650px) {
    .single .post-entry ul li{font-weight: bold;}
    .myContainer.singleEvent{width: 100%; padding: 20px;}
    .myContainer.singleEvent{margin: 0!important;}

	body {
	}

	#logo {
		float: none;
		text-align: center;
        right: 100%;
        width: 30%;
        top: 5px;
        left: 5px;
	}

	.grid,
	.grid-right {
		float: none;
	}

	#featured-image .fluid-width-video-wrapper {
		margin: 20px 0 0 0;
	}

	.top-widget {
		float: none;
		margin: 0 auto 10px auto;
		position: relative;
		text-align: center;
		width: auto;
	}

	.top-widget .widget-title h3 {
		text-align: center;
	}
    
    .js .main-nav a#responsive_menu_button{top: 40px; right: 30px;}
    
    

}





@media screen and (min-width: 1100px){
    .menuBg{background-size: 20%;}
    .menuBg{background-position: -10% 10%, 105% 100%;} 
    .myContainer.events{padding: 100px 0;}
    .myContainer.events h2 {width: 98%; margin-left: auto; margin-right: auto;}
    .myContainer.events p { width: 98%; margin: 0 auto; } 
    .page-template-EventTemplate .myBanner h1{width: 50%; margin: 0 auto;}
}

@media screen and (min-width: 400px){
    .haet-cleverreach-form { width: auto; margin: 0 auto;  display: inline-block;}
    .js .main-nav a#responsive_menu_button{}
}

@media screen and (max-width: 1200px){
    .section .border{width: 90%!important; margin: 0 auto!important; padding: 30px!important;}
    .section1 .overBorder{display: none;}
    .section3 .underBorder, .section4 .underBorder, .section3 .overBoard{display: none;}
}

@media screen and (max-width: 1100px){
    .section{padding: 100px 0!important; background-attachment: scroll;}
    .myBanner ul.bgs li{background-attachment: scroll;}
    .myBanner{background-attachment: scroll;}
    .openForm.resp:hover{background: #2a190f;}
    .menuBg{background: none;} 
    .eat{padding: 100px 50px!important;}
}

@media screen and (max-width: 1000px){
    #menu-item-37 a:first-child{display: none!important;}
    #menu-item-37 .sub-menu a:first-child{display: inline!important;}
    #menu-item-35 a:first-child{display: none!important;}
    #menu-item-35 .sub-menu a:first-child{display: inline!important;}
    .menuBg2 {background-image: none!important;}
}

@media screen and (max-width: 900px){
    .book .text{width: 100%; float: none; text-align: center!important; margin-bottom: 10px;}
    .openForm:not(.resp){display: none;}
    .openForm.resp{display: block; height: 100px;}
    .text.right{margin: 10px 0;}
    .underBorder, .overBorder{display: none!important;}
    .ssba.ssba-wrap div{text-align: center!important;}
    #footer .openForm{display: none;}
    #footer .text{width: 50%; float: left;}
    #footer .text.right{margin: 0;}
    .book .myContainer{padding: 0!important;}
    .openForm.resp:hover{background:url(../images/book.svg) no-repeat center;}
    .OT_wrapper{border: none!important; padding-top: 0!important; margin-top: 20px!important;}
}

@media screen and (max-width: 800px){
    .page-template-TextTemplate .categ table td{display: block; padding: 0!important;}
}




@media screen and (max-width: 600px){
    .section2 .border{display: none;}
    .section2 table td{display: block; width: 100%; padding: 20px!important; text-align: center; box-sizing: border-box;}
    .section{padding: 50px 0;}
    #footer{padding: 50px 0;}
    .categBanner{padding: 50px 0;}
    .myMenu table tr td{display: block; width: 100%; border: none;}
    .myMenu table {border-bottom: 1px dashed #d2d2d2;}
    .myMenu table tr td{text-align: left!important;}
    .myMenu table tr:last-child td{padding-bottom: 0!important;}
    .myMenu table tr:last-child td:last-child{padding-bottom: 20px!important;}
    .myMenu table tr td.aPrice:empty{display: none!important;}
    .eat {padding: 20px!important;}
    .page-template-TextTemplate .myContainer ul{background: #2a190f; color: #ffffff; padding: 12px;}
}


@media screen and (max-width: 500px){
    #logo{width: 30%;}
    .section4 .overBoard{display: none!important}
    .section2 table{margin: 0;}
    #footer .text{width: 100%; float: none; margin-bottom: 10px;}
    #menu-footer-menu{margin-top: 50px;}
    .js .main-nav a#responsive_menu_button { right: 30px;}
    .OT_list li{display: block!important; margin: 0 auto!important; border: 1px solid #ffffff;}
    .OT_wrapper{border: none!important;}
    .menuPart{height: 100px;}
    #footer .book { padding: 5px 0; height: auto; margin-bottom: 20px;}
    h2{font-size: 20px; line-height: 25px;}
}

@media screen and (max-width: 400px) {
	.mySingle{padding: 0; background-size: cover;}
    .section.small .border{border: none!important; padding: 0!important;}
    .section .border{border: none!important; padding: 0!important;}
    .myBanner ul.links{width: 100%;}
    .js .main-nav a#responsive_menu_button{right: 40px; top: 30px;}
    #logo{top: 0;}
    .haet-cleverreach .label-left input{width: 150px!important;}
    #header .myContainer{padding: 0;}
    .myBanner h1{width: auto!important; font-size: 18px;}

}

@media screen and (max-width: 480px) {
.content-highlight{width: 100%; padding: 5px;}
	.content-highlight ul li{ line-height: 20px; padding-bottom: 10px; }
.line{display: none!important;}


	
#logo {
		float: none;
		text-align: center;
	}

	.grid,
	.grid-right {
		float: none;
	}

	#featured-image .fluid-width-video-wrapper {
		margin: 20px 0 0 0;
	}

	.featured-title {
		font-size: 40px;
		padding: 40px 20px 0 20px
	}

	.featured-subtitle {
		font-size: 24px;
	}

	.navigation .next,
	.navigation .previous {
		display: block;
		margin: 0 auto;
		text-align: center;
	}

	.menu ul,
	.menu li,
	.top-menu,
	.footer-menu li,
	.sub-header-menu li {
		float: none;
		text-align: center;
	}

	#wrapper .gallery .gallery-item {
		float: none;
	}

	.hide-480 {
		display: none;
	}

	.show-480 {
		display: block;
	}

	#footer {
		text-align: center;
	}

	#footer .social-icons {
		text-align: center;
	}
}

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

	body {
	}

	#featured p {
		font-size: 12px;
		line-height: 1.5em;
	}

	.featured-title {
		font-size: 35px;
	}

	.featured-subtitle {
		font-size: 15px;
	}

	.call-to-action a.button {
		font-size: 14px;
		padding: 7px 17px;
	}

	.hide-320 {
		display: none;
	}

	.show-320 {
		display: block;
	}
}

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

	body {
	}

	#featured p {
		font-size: 11px;
		line-height: 1.5em;
	}

	.featured-title {
		font-size: 20px;
	}

	.featured-subtitle {
		font-size: 11px;
	}

	.call-to-action a.button {
		font-size: 12px;
		padding: 5px 15px;
	}

	.top-widget area,
	.top-widget select,
	.top-widget textarea,
	.top-widget input[type="text"],
	.top-widget input[type="password"],
	.top-widget input[type="email"] {
		width: 75%;
	}

	.widget-title h3,
	.widget-title-home h3 {
		font-size: 14px;
		height: 13px;
		line-height: 13px;
		text-align: left;
	}

	.hide-240 {
		display: none;
	}

	.show-240 {
		display: block;
	}
}