/**
 * Website Responsive CSS
 * ----------------------
 */


/* large screen */
@media all and (max-width: 1279px) {

}

/* large screen */
@media all and (max-width: 1200px) {

	#galleries-block ul#gallery-list {
		margin-left: 0.5%;
		}
	#galleries-block ul#gallery-list li {
		width: 49%;
		margin: 0 0.5% 1% 0.5%;
		display: block;
		float: left;
		text-align: center;
		position: relative;
		overflow: hidden;
		}
	
}

/* desktop to tablet */
@media all and (max-width: 1152px) {

	#events-list li {
		width: 32%;
		height: 24%;
		margin: 0 2% 2% 2%;
		display: block;
		float: left;
		}
	#events-list li:nth-child(3n+1) {
		margin: 0 0 2% 0;
		}
	#events-list li:nth-child(3n+3) {
		margin: 0 0 2% 0;
		}

}


/* desktop to tablet */
@media all and (max-width: 1024px) {

	#header-content-left #logo {
		padding: 14px 0 0 0;
		font-size: 2em;
		}
	.page-wall-of-fame {
	 	background-color: #dcdbdb;
	 	}

}


@media all and (max-width: 1020px) {

	#next-event-block #event-info,
	#next-event-block #event-calender {
		width: 100% !important;
		float: none;
		display: block;
		}
	#next-event-block #event-calender {
		width: 100%;
		padding-bottom: 30px;
		}	

	#next-event-block #event-info {
		height: 480px;
		min-height: 480px;
		display: table;
		border-collapse: collapse;
		}
	#next-event-block #event-info .overlay-filter {
		height: 480px;
		}
	#next-event-block #event-info .td {
		width: 100%;
		display: table-cell;
		border-collapse: collapse;
		}
	#next-event-block #event-calender #datepicker {
		margin: 0 auto 50px auto;
		}

	#next-event-block #event-info .event-title {
		font-size: 3.5em;
		}
}


/* tablet to smartphone */
@media all and (max-width: 896px) {


	h1 { font-size: 2.5em;}
	h2 { font-size: 2.25em; }
	h3 { font-size: 1.5em; }
	h4 { font-size: 1.25em; }

	#header-content {
		background-color: transparent;
		}

	#header-content-left #logo {
		display: none;
		}
	#header-content-center #mainmenu {
		display: none;
		}
	#header-content-left .icon {
		padding: 18px 0 0 0;
		display: block;
		}
	#header-content-center #logo {
		display: block;
		}

	#header-content-right a.icon {
		display: none;
		}

	.pages.view #header-content-left a,
	.page-club #header-content-left a,
	.pages.view #logo .icon,
	.page-club #logo .icon,
	.pages.view #mainmenu-icon,
	.page-club #mainmenu-icon {
		color: #3e3e3e;
		}


	#content-header-featured {
	 	margin: -160px 0 0 -160px;
	 	left: 50%;
	 	right: auto;
	 	bottom: 150px;
	 	}

	#block-wall-of-fame h1 {
		margin: 30px 0;
		font-size: 8em;
		line-height: 96px;
		}


	#galleries-block ul#gallery-list li,
	#galleries-block ul#gallery-list li:nth-child(3n) {
		/* 
		width: 49.75%;
		margin: 0.5% 0.5% 0 0;
		*/
		}
	#galleries-block ul#gallery-list li:nth-child(2n) {
		/* margin: 0.5% 0 0 0; */
		}


	#old-galleries-block {
		margin: 0;
		}
	#old-galleries-list {
		width: 460px;
		max-width: 80%;
		}
	#old-galleries-list li .old-gallery-date {
		width: 100%;
		display: block;
		color: #fff;
		background-color: #3e3e3e;
		}
	#old-galleries-list li .old-gallery-date span {
		line-height: 12px;
		}
	#old-galleries-list li .old-gallery-event {
		width: 100%;
		}
	#old-galleries-list li .old-gallery-event .event-title {
		padding: 10px 20px 10px 40px;
		}


	.highlights-block a {
		padding: 19% 10% 0 10%;
		font-size: 1em !important;
		}


	#content .entry-content {
		padding: 100px 5%;
		}
	#content .entry-content h1,
	#content .entry-content h2,
	#content .entry-content h3,
	#content .entry-content h4 {
		/*padding: 0 10%;*/
		}
	#content .entry-content p {
		/*margin: 0 10% 10px 10%;*/
		text-align: left;
		}
	#content .entry-content form {
		margin: 0 5%;
		}

	#reservations-header h2 {
		font-size: 4.5em;
		}

	#block-wall-of-fame .icon {
		padding: 25% 0 3% 0;
		}


}


/* tablet to smartphone */
@media all and (max-width: 624px) {


	#header-content-right #userinfo {
		display: none;
		}

	body.pages.index #header {
		background: url(../../img/header_startseite.jpg) no-repeat center top;
		}
	.galleries.index #content-header {
		height: 500px;
		min-height: 550px !important;
		margin: 0 0 10px 0;
		padding: 0;
		background: none;
		overflow: hidden;
		}
	#top-images-block .icon {
		font-size: 2.5em;
		}

	#mainmenu-container.active {
		padding: 80px 0 0 0;
		}

	.block-stretched p {
		padding: 0 10%;
		}
	#block-adagio {
		background-position: center 20%;
		}
	#block-adagio .block-content {
		position: relative;
		top: -20px;
		}
	#block-adagio .icon {
		font-size: 2em;
		}
	#block-adagio img {
		max-width: 170px;
		height: auto;
		}
	#block-adagio h2 {
		padding: 20px 10%;
		font-size: 2em;
		}

	#block-events {
		background: none;
		}
	#block-events .next-event,
	#block-events .past-event {
		width: 100%;
		padding: 50px 0;
		display: block;
		text-align: center;
		position: relative;
		left: auto;
		top: auto;
		bottom: auto;
		right: auto;
		}
	#block-events .next-event {
		min-height: 220px;
		background: url(../../img/bg-next-event.jpg) no-repeat center top;
		background-size: cover !important;
		}
	#block-events .past-event {
		min-height: 220px;
		background: url(../../img/bg-past-event.jpg) no-repeat center top;
		background-size: cover !important;
		}
	#block-events h3 {
		font-size: 1.5em;
		}
	#block-events .event-description {
		padding: 15px 10%;
		font-size: 2em;
		}
	#block-events #image-versus {
		margin: -50px 0 0 -65px;
		display: block;
		position: absolute;
		left: 50%;
		top: 0;
		z-index: 2;
		}
	#block-events .next-event .block-events-content,
	#block-events .past-event .block-events-content {
		width: auto;
		float: none;
		text-align: center;
		}

	#block-events .skip-btn {
		display: none;
		}

	#block-app .block-content-left {
		display: none;
		}
	#block-app .block-content-right {
		width: 100%;
		float: none;
		background: none;
		position: relative;
		top: -20px;
		}
	#block-app .block-content-right .uppercase {
		padding: 0 0 20px 0;
		}
	#block-app .block-content-right img {
		max-width: 155px;
		height: auto !important;
		}
	#block-app .block-content-right a.smartphone-link {
		width: 150px;
		height: 153px;
		margin: 0 auto;
		background-size: 100%;
		}	
	#block-app .block-content-right a.smartphone-link span {
		line-height: 153px; 
		}	


	#block-wall-of-fame .uppercase,
	#block-wall-of-fame p {
		display: none;
		}
	#block-wall-of-fame {
		background: url(../../img/bg-wall-of-fame-gradient.jpg) no-repeat center top;
		background-size: cover !important;
		}
	#block-wall-of-fame .block-content {
		padding: 80px 0 0 0;
		}
	#block-wall-of-fame .responsive-text {
		display: block !important;
		}
	#block-wall-of-fame .uppercase {
		padding: 0;
		letter-spacing: 0;
		}
	#block-wall-of-fame h1 {
		font-size: 8em;
		line-height: 96px;
		}
	#block-wall-of-fame .icon {
		padding: 0 0 15px 0;
		}
	#block-wall-of-fame a.skip-link {
		display: block;
		}



	#block-newsletter .newsletters {
		width: auto !important;
		height: auto;
		margin: 0 auto !important;
		padding: 0;
		text-align: center;
		background: none;
		position: relative !important;
		position: relative;
		left: auto;
		top: auto;
		}
	#block-newsletter .newsletters form {
		width: 80%;
		margin: 0 auto 50px auto;
		padding: 25px 0;
		background-color: #f1f1f1;
		}
	#block-newsletter .newsletters p {
		padding: 0 10%;
		}
	#content #block-newsletter form div.input {
		width: auto !important;
		}
	#content #block-newsletter form div.input input {
		width: 80% !important;
		}
	#block-newsletter input[type=submit] {
		background-color: #ffcc00 !important;
		}
	#block-newsletter .skip-btn {
		color: #3e3e3e;
		}


	#content .entry-content h2 {
		font-size: 1.75em;
		}
	#content .entry-content p.image {
		margin: 0;
		border: 0;
		}

	#galleries-block {
		padding: 0 0 1% 0;
		}
	#galleries-block ul#gallery-list {
		margin: 0;
		}
	#galleries-block ul#gallery-list li {
		width: 100%;
		margin: 0 0 10px 0;
		}
	#galleries-block ul#gallery-list li,
	#galleries-block ul#gallery-list li:nth-child(2n) {
		width: 100%;
		margin: 0 0 10px 0;
		}
	#galleries-block ul#gallery-list li .gallery-list-item-footer {
		height: 65px;
		border: 0;
		}
	#galleries-block ul#gallery-list li .gallery-event-name,
	#galleries-block ul#gallery-list li .gallery-date {
		line-height: 65px;
		}

	#galleries-block ul#gallery-list li .gallery-event-name {
		width: 50%;
		font-size: 1.1em;
		}

	#top-images-block {
		padding: 50px 0 25px 0;
		}
	#top-images-block #top-image-list {
		border: 0;
		}
	#top-images-block #top-image-list li {
		width: 49%;
		margin: 0 0% 1% 1%;
		}
	#top-images-block #top-image-list li:first-child {
		width: 100%;
		margin: 0 0 1% 0;
		}
	#top-images-block #top-image-list li:first-child .image-likes {
		width: 140px;
		height: 140px;
		margin: -70px 0 0 -70px;
		line-height: 140px;
		font-size: 3.5em; 
		}
	#top-images-block #top-image-list li:first-child .image-likes span {
		font-size: 0.65em; 
		}
	#top-images-block #top-image-list li:nth-child(2n) {
		margin: 0 1% 1% 0;
		}
	#top-images-block #top-image-list li img {
		width: 100%;
		display: block;
		}


	#old-galleries-block-content .gallery-block {
		border-top: 3px solid #000;
		}
	.gallery-block-info {
		border-bottom: 3px solid #000;
		}
	.gallery-block-left,
	.gallery-block-right {
		width: 100%;
		display: block;
		}	
	.gallery-block-left span {
		padding: 0 20px;
		color: #000;
		font-size: 1.25em;
		line-height: 62px;
		}
	.gallery-block-right .event-title,
	.gallery-block-right .event-date {
		padding: 0;
		display: block;
		border: 0;
		line-height: normal;
		}
	.gallery-block-right .event-title {
		width: 100%;
		}
	.gallery-block-right .event-title a {
		max-width: 70%;
		padding: 20px 20px 0 20px;
		font-size: 1em;
		}
	.gallery-block-right .event-title .icon {
		font-size: 2em;
		}
	.gallery-block-right .event-date {
		width: auto;
		padding: 0 20px 20px 20px;
		float: left;
		}
	.gallery-block-right .event-images {
		display: none;
		}


	ul#next-events-list {
		}
	ul#next-events-list li.list-item {
		width: 100%;
		float: none;
		}
	ul#next-events-list li.list-item.centered {
		margin: 0 0 2% 0;
		}


	#event-data .event-image {
		display: none;
		}
	#event-data .event-info {
		width: 100%;
		min-height: 0;
		/*height: 440px;*/
		}
	#event-data .event-info .event-text {
		width: auto;
		max-width: 100%;
		min-height: 0;
		}
	#event-data .event-info .event-text h3 {
		width: 75%;
		}


	#event-header .event-bullet,
	#event-info .event-bullet {
		margin: 0 0 0 -82px;
		left: 50%;
		}	
	#event-info .event-bullet {
		bottom: -50px;
		}	
	#event-info-left,
	#event-info-right {
		width: auto;
		float: none;
		}
	#event-info-right {
		max-width: 70%;
		margin: 0 auto;
		text-align: center;
		}
	#event-info-right a.btn {
		margin: 0 0 10px 0;
		display: block;
		}
	#event-info #event-social-media {
		padding: 0 0 25px 0;
		}

	.like-block {
		top: 20px;
		}

	#event-header .skip-btn {
		display: none;
		}

	#event-info #event-title {
		font-size: 3.5em;
		}
	#event-info #event-description {
		padding: 0 10%;
		}
	#event-info #event-gallery {
		height: 400px;
		}
	#events-archive-block a.feature-link {
		font-size: 4em;
		}

	#next-event-block #event-info .event-title,
	.highlights-block a span {
		font-size: 2em;
		}
	.highlights-block a span {
		font-size: 2.5em;
		}
	.highlights-block .event-description {
		padding:  0 10%;
		}


	.reservations #content p {
		width: 80%;
		}




	/**
	 * App
	 * ---
	 */
	#app .content-block-left {
		display: none;
		}	
	#app .content-block-right {
		width: 100%;
		padding: 0;
		text-align: center;
		background: none;
		}	
	#app .content-block-right .app-text {
		display: block;
		}	
	#app .content-block-right h3.headline {
		display: none;
		}	
	#app .form.ajax-form {
		margin: 25px auto;
		}



	#content form div.input, 
	#lightbox form div.input {
		width: 100% !important;
		}
	#reservations-header {
		padding: 0;
		height: 292px;
		min-height: 292px;
		}
	#reservations-header h2 {
		font-size: 3.5em;
		}
	#reservations-header-content {
		}
	#reservations-content {
		padding: 50px 0 30px 0;
		}
	#reservations-content p,
	#reservations-event-featured p {
		width: 90%;
		}
	#reservation-steps {
		padding: 0;
		}
	#reservation-steps .reservation-step {
		width: 100%;
		margin: 0;
		padding: 0 0 45px 0;
		}
	#reservations-steps h4 {
		font-size: 1.25em;
		}
	#reservation-event {
		height: 175px;
		}

	.reservations .skip-btn {
		width: 100px;
		height: auto;
		margin: 20px 0 0 -50px;
		display: block;
		font-size: 3em;
		text-align: center;
		position: relative;
		bottom: 0;
		background: none;
		}


	#content-header #content-header-text h1 {
		font-size: 3em;
		}

	/**
	 * Page Wall of Fame
	 */
	.page-wall-of-fame .page-content-header {
		padding: 80px 0 100px 0;
		background: none;
		}
	.page-wall-of-fame .page-content-header h1 {
		padding: 0 10%;
		font-size: 6em;
		line-height: 82px;
		}

	.page-wall-of-fame .page-content {
		background: #fff;
		}
	.page-wall-of-fame .page-content .image-container {
		width: 100%;
		margin: 0;
		}
	.page-wall-of-fame .border-flat-outside {
		border: 18px solid #f5f5f5;
		}
	.page-wall-of-fame .border-flat,
	.page-wall-of-fame .border-inside,
	.page-wall-of-fame .border-shadow,
	.page-wall-of-fame .border-image-outside,
	.page-wall-of-fame .border-image,
	.page-wall-of-fame .border-image-inside {
		border: none;
		box-shadow: none;
		}
	.page-wall-of-fame .border-image-inside {
		text-align: center;
		background: #f5f5f5;
		}
	.page-wall-of-fame .page-content .image-container img {
		margin: 0 auto;
		text-align: center;
		}
	.page-wall-of-fame .page-content .image-container p {
		margin: 0 auto;
		padding: 10px 10% 40px 10%;
		background: #fff;
		}

	#stars-list-container {
		padding: 60px 0 0 0;
		}
	ul#stars-list li {
		padding: 5px 1%;
		}


	#content h3 span {
		font-size: 0.5em;
		vertical-align: middle;
		}

	.entry-content h1 {
		font-size: 2em;
		}

	#ts-shop iframe {
		width: auto;
		max-width: 100%;
		height: 200px;
		display: block;
		}


	#footer-content-left {
		width: 100%;
		clear: both;
		text-align: center;
		}
	#footer-content-left iframe {
		width: 140px;
		text-align: center;
		}

	#footer-content-center {
		width: 100%;
		clear: both;
		}
	#footer-content-center p {
		padding: 10px 0 25px 0;
		line-height: 40px;
		}

	#reservation-steps-container h3 {
		padding: 50px 0 !important;
		}

	.highlights-block a {
		padding: 180px 0 150px 0;
		}

	.bookmarked .gallery-block-right .bookmark-icon {
		margin: -10px 0 0 0;
		}

} 


/* smartphone */
@media all and (max-width: 400px) {

	#header-content #logo {
		margin: 12px 0 0 0;
		font-size: 2em;
		}
	#header .subtitle {
		margin: 20px auto;
		}

	#header-location img {
		width: 100px;
		height: 100px;
		margin: 20px auto 12px auto;
		}
	#header-location .location-map {
		margin: 0;
		}
	#header-location .icon-circle {
		display: none;
		}

	#block-wall-of-fame h1 {
		font-size: 6em;
		line-height: 78px;
		}

	#content-header #content-header-text h1 {
		font-size: 2em;
		}


	#event-info #event-title {
		font-size: 2.25em;
		}
	#event-info #event-description {
		padding: 0 10%;
		font-size: 1em;
		}

	#block-events .event-description {
		font-size: 1.5em;
		}

	#reservations-header h2 {
		margin: 20px 0 0 0;
		font-size: 2em;
		}

	#mainmenu li a {
		font-size: 1.25em;
		}

	#lightbox.compact { 
		width: 90%;
		height: 80%;
		max-height: none;
		margin: 0;
		top: 10% !important;
		left: 5%;
		}
	#lightbox.compact #lightbox-content > div {
		vertical-align: middle;
		}

	#reservations-header-content {
		background: url(../../img/reservations-header-bg-responsive.jpg) no-repeat center bottom;
		background-size: cover !important;
		}

	#top-images-block #top-image-list li .image-likes {
		width: 48px;
		height: 48px;
		margin: -24px 0 0 -24px;
		font-size: 1.25em;
		line-height: 48px;
		}
	#top-images-block #top-image-list li:first-child .image-likes span {
		top: 38px;
		}
	#top-images-block #top-image-list li .image-likes span {
		top: 12px;
		right: 2px;
		}

	.highlights-block .event-bullet {
		display: none;
		}
	.highlights-block .tr {
		padding: 125px 0 0 0;
		}
	.highlights-block .highlight-header {
		position: relative;
		left: auto;
		}
	.highlights-block a {
		padding: 100px 0;
		font-size: 0.60em !important;
		}

	ul#stars-list li {
		width: 46%;
		text-align: center;
		}


	#mainmenu-container.active {
		min-height: 560px !important;
		}

	.entry-content h1 {
		padding: 20px 0 40px 0;
		}


	.contacts-list .contact-image {
		width: 72px;
		height: 140px;
		}

}


/* small smartphone */
@media all and (max-width: 320px) {

	#content h3 {
		margin: 0 0 20px 0;
		padding: 0 !important;
		}
	#content h3 span {
		font-size: 0.25em;
		vertical-align: middle;
		}

	.pages.index .block-events-content h3 {
		margin: 0 !important;
		}

	#event-info-footer a {
		padding: 60px 0 0 0;
		background-position: center top !important;
	 	}

	.contacts-list li {
		text-align: center;
		}
	.contacts-list .contact-image {
		height: auto;
		margin: 0 auto;
		float: none;
		display: block;
		text-align: center;
		}

}


/* wide horizontal smartphone */
@media all and (max-height: 440px) {

	#lightbox.compact { 
		width: 90%;
		max-width: 90%;
		height: 80%;
		max-height: none;
		margin: 0;
		top: 10% !important;
		left: 5%;
		}
}