@font-face {
	font-family: "Alte-DIN-1451-Mittelschrift";
	src: url("../fonts/alte-din-1541-mittelschrift.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

:root {
	--primary-color: #b81207;
}

body {
	accent-color: var(--primary-color);
}

body.vigo{
	font-family: "Alte-DIN-1451-Mittelschrift" !important;
	background-color: #cccccc;
}

body.vigo nav a{
	font-family: "Alte-DIN-1451-Mittelschrift" !important;
	font-weight: 300 !important;
}
body.vigo .bg-flyer {
	top: 0 !important;
}

body.vigo .full-cover {
	height: unset !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-color: #b81918 !important;
	background-position: right !important;
    transform: translateY(-3px);
	min-height: 100px;
}

.vigo .thumbnail {
    border-radius: 0px !important;
}
.vigo .thumbnail .event-pic {
    border-radius: 0px !important;
	margin: -8px 0px !important;
}
.vigo .thumbnail .event-pic img {
    border-radius: 0px !important;
}

.vigo .event-date span[itemprop="startDate"] {
	background: #f3f3f3f2 !important;
	padding: 5px 16px !important;
	margin-top: -22px !important;
    margin-bottom: 10px !important;
}
.vigo .event-date span {
    border-radius: 0px !important;
    letter-spacing: 0.1px;
    font-size: 0.95em !important;
    box-shadow: none !important;
    /* backdrop-filter: blur(16px); */
	background: unset !important;
}
.vigo .thumbnail:hover .event-pic img {
	transform: translateY(-6px) !important;
	opacity: 1;
}
.vigo .thumbnail:not(.inactive).soldout:hover .event-pic img {
	transform: none !important;
	opacity: 1;
}

.vigo .thumbnail .caption {
	height: 130px !important;
	display: flex;
    justify-content: start;
    align-content: baseline;
    flex-direction: column;
    padding: 17px 9px 15px 9px;
}
@media only screen and (max-width: 1200px) {
	.vigo .thumbnail .caption {
		height: 140px !important;
	}
}

.vigo .thumbnail h3 {
	color: black !important;
	font-family: "Alte-DIN-1451-Mittelschrift" !important;
	white-space: normal !important;
    text-align: left !important;
    line-height: 1.1em !important;
    display: flex !important;
    align-items: center;
	/* height: 3em !important; */
    padding: 5px 20px !important;
    margin-top: -14px !important;
    margin-bottom: 0;

	flex-basis: max-content;
    flex-grow: 1;
    align-items: baseline;
}

.vigo .thumbnail h4 {
    margin-bottom: 4px;
    margin-top: 4px;
    width: auto;
    height: auto;
}
.vigo .thumbnail h4 span:last-child {
	margin-left: 4px;
    text-transform: none !important;
    width: auto;
    white-space: normal;
	line-height: 1.2em;
	margin-top: -0.5px;
}

.vigo .thumbnail h4.event-title:first-of-type {
	margin-top: 6px;
}
.vigo .thumbnail div:not(.event-date) span {
	color: #1a1a1a;
}
.vigo .thumbnail svg g {
    fill: #1a1a1a;
}
.vigo .thumbnail svg g:not([stroke="none"]) path, .vigo .thumbnail svg circle, .vigo .thumbnail svg g:not([stroke="none"]) {
    stroke: #1a1a1a;
}
.vigo .navbar-default {
	border: none !important;
}
.vigo .navbar-inverse .navbar-nav>li>a {
	transition: background-color 0.3s;
	color: white !important;
}
.vigo .navbar-inverse .navbar-nav>li>a:hover, .vigo .navbar-inverse .navbar-nav>li>a:focus, .vigo nav .dropdown-menu>li>a:hover {
	background-color: #7c060e;
}
.vigo footer * {
	color: #f6f6f6 !important;
	border-color: #ffffff52 !important;
    border-radius: 3px;
}
.vigo footer .dropdown-menu>.disabled>a, .vigo footer .dropdown-menu>.disabled>a:hover, .vigo footer .dropdown-menu>.disabled>a:focus {
	color: #929292 !important;
}
.vigo footer p {
	font-family: "Alte-DIN-1451-Mittelschrift" !important;
}
.vigo footer a {
	opacity: 0.75 !important;
}
.vigo footer a:hover {
	opacity: 1 !important;
}
.vigo .section-title #dateFilter {
	color: #a10510 !important;
    font-family: "Alte-DIN-1451-Mittelschrift" !important;
    text-transform: uppercase !important;
    letter-spacing: 0.25px;
    font-size: 1.25em !important;
}

.vigo .navbar-header img {
	padding-left: 20px;
}
.vigo .cover-wrapper img {
	border-radius: 2px !important;
	margin-top: 80px !important;
}
.vigo .blurry-flyer {
	top: 0 !important;
}
.vigo .cover-date {
	background: #f4f4f4 !important;
	padding: 4px 0 !important;
    margin-bottom: 20px !important;
	border-radius: 0 !important;
	box-shadow: 0px 5px 13px 2px #13131321 !important;
}
.vigo .cover-date:not(.date-box) .day, .vigo .cover-date a {
	border-radius: 0px !important;
    letter-spacing: 0.1px;
    font-size: 0.95em !important;
    box-shadow: none !important;
	font-family: "Alte-DIN-1451-Mittelschrift" !important;
	line-height: 20px;
}
.vigo .cover-date .btn-next-date {
	padding: 6px 10px 6px 12px;
}
.vigo .cover-date .btn-prev-date {
	padding: 6px 12px 6px 10px;
}
.vigo .cover-date .day {
	background: unset !important;
}
.vigo .cover-date a {
	background-color: #f3f3f3f2 !important;
	border: none !important;
	border-radius: 2px !important;
	transition: background-color 0.1s, color 0.1s;
}
.vigo .cover-date a.disabled {
	background-color: #d5d5d5 !important;
	color: #a7a7a7 !important;
}
.vigo .cover-date a:hover {
	color: white !important;
	background-color: #aaaaaaf2 !important;
}

.vigo .cover-date ~ div h1 {
	color: #262626 !important;
    font-family: "Alte-DIN-1451-Mittelschrift" !important;
    white-space: normal !important;
    text-align: left !important;
    line-height: 1.1em !important;
}
.vigo .cover-date ~ div h4.event-title:first-of-type {
	margin-top: 10px;
}
.vigo .cover-date ~ div span, .vigo .cover-date ~ div a {
	color: #515151 !important;
}
.vigo .cover-date ~ div svg g {
    fill: #515151;
}
.vigo .cover-date ~ div svg g:not([stroke="none"]) path, .vigo .cover-date ~ div svg circle, .vigo .cover-date ~ div g:not([stroke="none"]) {
    stroke: #515151;
}

.vigo .date-box .weekday {
	background-color: #a51010;
	color: white;
	margin-top: -5px;
}
.vigo .date-box .day {
    letter-spacing: 0.1px;
	margin: 4px;
    box-shadow: none !important;
	font-family: "Alte-DIN-1451-Mittelschrift" !important;
}
.vigo .event-address h3 {
	font-family: "Alte-DIN-1451-Mittelschrift" !important;
	white-space: normal !important;
    line-height: 2em !important;
    letter-spacing: -0.5px;
}
.vigo .event-address p:first-of-type {
	text-transform: uppercase;
	margin: 0 !important;
}
.vigo .event-address p {
	color: #5e5e5e;
}

.vigo .navbar-inverse .navbar-toggle .icon-bar {
	background-color: rgba(255, 255, 255, 0.8);
}
.vigo .navbar-default .navbar-toggle:hover, .vigo .navbar-default .navbar-toggle:focus{
	background-color: rgba(255, 255, 255, 0.3);
}
.vigo .navbar-inverse .navbar-toggle{
	background-color: rgba(255, 255, 255, 0.2);
	border-color: transparent;
	border-radius: 2px;
	top: 12px;
    right: 14px;
}

.thumbnail.soldout {
	opacity: 0.8;
}
.thumbnail:not(.soldout) .banner{
	width: calc(100% + 16px);
    height: 200px;
    border-radius: 18px;
    position: relative;
    transform: translate(-10px, -14px);
    margin-bottom: -200px;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.thumbnail:not(.soldout) .banner span{
	position: relative;
    padding-left: 6px;
    color: white;
    transform: rotate(40deg);
    height: 26px;
    width: 170px;
    line-height: 26px;
    left: 34px;
    top: 25px;
    margin-left: auto;
    display: block;
    font-size: 11.5px;
    letter-spacing: -0.1px;
	font-weight: 500 !important;
    z-index: 1;
	border-top-width: 1px;
    border-bottom-width: 1px;
}

.thumbnail:not(.soldout) .banner::before {
	content: '';
    position: absolute;
    display: block;
    width: 28px;
    height: 6px;
	top: 0;
    right: 90px;
    border-radius: 2px 2px 0 0;
	background-color: #000000;
}

.thumbnail:not(.soldout) .banner::after {
	content: '';
    position: absolute;
    display: block;
    width: 6px;
    height: 18px;
    right: 0px;
    top: 81px;
    border-radius: 0 2px 2px 0;
	background-color: #000000;
}

.thumbnail.soldout {
	background-color: transparent !important;
	/* background-image: linear-gradient(to top, #151515, #232323 70%, #4d4d4d 100%) !important; */
	background-image: linear-gradient(to top, #420f0f, #8f1818 70%, #4d4d4d 100%) !important;
	box-shadow: 0px 3px 15px #00000026 !important;
}
.thumbnail.soldout > .event-pic::before {
	content: attr(css-text-soldout);
    /* background-image: linear-gradient(310deg, #232323 -30%, #232323, #4a4a4a 70%); */
    background-image: linear-gradient(310deg, #5f1d1d -30%, #7a2d2d, rgb(207 64 64) 70%);
    font-size: 11.5px;
    letter-spacing: -0.1px;
	padding-right: 4px;
    font-weight: inherit;
    color: #ffffff;
    width: 150px;
    margin-bottom: -30px;
    height: 30px;
    display: block;
    position: relative;
    transform: rotate(45deg);
    z-index: 1;
	margin-left: auto;
    top: 24px;
    right: -36px;
    line-height: 30px;
}
.thumbnail.soldout h3 {
	color: white !important;
}
.thumbnail.soldout div:not(.event-date) span {
	color: #cccccc;
}
.thumbnail.soldout svg g {
    fill: #cccccc;
}
.thumbnail.soldout svg g:not([stroke="none"]) path, .thumbnail.soldout svg circle, .thumbnail.soldout svg g:not([stroke="none"]) {
    stroke: #cccccc;
}



.back-to-top {
  position: fixed;
  bottom: 2em;
  right: 2em;
  text-decoration: none;
  color: #000000;
  background-color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: bold;
  padding: 1em 2em;
  display: none;
  z-index: 10000;
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  -ie-border-radius: 50px;
  -o-border-radius: 50px;
}
.img-cover {
  height: 100%;
  width: 100%;
  object-fit: cover!important;
  object-position: center;
}

/*.box30 {
  padding-bottom: 55px!important;
  height: 280px;
}

.slick-slider {
  height: 100%!important;
}

.slick-list {
  height: 100%!important;
}

.slick-track {
  height: 100%;
}*/

.thumbnail:not(.inactive) .banner{
	width: calc(100% + 16px);
    height: 200px;
    border-radius: 18px;
    position: relative;
    transform: translate(-10px, -14px);
    margin-bottom: -200px;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.thumbnail:not(.inactive) .banner span{
	position: relative;
    padding-left: 6px;
    color: white;
    transform: rotate(40deg);
    height: 26px;
    width: 170px;
    line-height: 26px;
    left: 34px;
    top: 25px;
    margin-left: auto;
    display: block;
    font-size: 11.5px;
    letter-spacing: -0.1px;
	font-weight: 500 !important;
    z-index: 1;
	border-top-width: 1px;
    border-bottom-width: 1px;
}

.thumbnail:not(.inactive) .banner::before {
	content: '';
    position: absolute;
    display: block;
    width: 28px;
    height: 6px;
	top: 0;
    right: 90px;
    border-radius: 2px 2px 0 0;
	background-color: #000000;
}

.thumbnail:not(.inactive) .banner::after {
	content: '';
    position: absolute;
    display: block;
    width: 6px;
    height: 18px;
    right: 0px;
    top: 81px;
    border-radius: 0 2px 2px 0;
	background-color: #000000;
}

.thumbnail.inactive {
	background-color: transparent !important;
	background-image: linear-gradient(to top, #151515, #232323 70%, #4d4d4d 100%) !important;
	box-shadow: 0px 3px 15px #00000026 !important;
}
.thumbnail.inactive > .event-pic::before {
	content: attr(css-text-waitroom);
    background-image: linear-gradient(310deg, #232323 -30%, #232323, #4a4a4a 70%);
    font-size: 11.5px;
    letter-spacing: -0.1px;
	padding-right: 4px;
    font-weight: inherit;
    color: #ffffff;
    width: 150px;
    margin-bottom: -30px;
    height: 30px;
    display: block;
    position: relative;
    transform: rotate(45deg);
    z-index: 1;
	margin-left: auto;
    top: 24px;
    right: -36px;
    line-height: 30px;
}
.thumbnail.inactive h3 {
	color: white !important;
}
.thumbnail.inactive div:not(.event-date) span {
	color: #cccccc;
}
.thumbnail.inactive svg g {
    fill: #cccccc;
}
.thumbnail.inactive svg g:not([stroke="none"]) path, .thumbnail.inactive svg circle, .thumbnail.inactive svg g:not([stroke="none"]), .thumbnail.inactive svg line {
    stroke: #cccccc;
}


#services {
	padding: 0 8px 8px;
    border-radius: 2px;
    background: #eeeeee;
    margin-bottom: 16px;
	box-shadow: 0px 5px 15px #00000008 !important;
}
#services > div {
	background-color: #ffffff;
    padding: 12px 18px 0 !important;
    border-radius: 2px;
    margin: 12px 0;
    border: 1px solid #e3e3e3 !important;
    box-shadow: 0px 2px 0 0px #d6d6d6;
}
#services > div > div:first-child {
	margin-bottom: 14px;
}
#services > div div.text-right small {
    position: absolute;
	width: calc(200% - 130px);
    left: -100%;
    height: 35px;
    display: flex;
    align-items: self-end;
    justify-content: flex-end;
    top: -44px;
}
@media screen and (min-width: 768px) {
	#services > div > div:nth-of-type(2) {
		position: absolute;
		width: calc(100% - 36px);
		top: 16px;
	}
	#services > div div.text-right small {
		top: 2px;
	}
}


#services a ins {
    background-color: #eaeaf0;
    padding: 6px;
    margin: 0 -6px;
    border-radius: 3px;
    text-decoration: none;
    color: #828294;
    border: 1px solid #cdcddb;
    font-size: 11px;
	transition: background-color 0.3s;
}

#services a:hover ins {
    background-color: #d6d6e9;
    color: #7171a4;
}

#services .btn-primary, #paymentBtnsPanel .btn-primary {
	background-color: var(--primary-color);
    border-color: var(--primary-color);
	filter: brightness(100%);
	transition: filter 0.3s;
}
#services .btn-primary:hover, #paymentBtnsPanel .btn-primary:hover {
	filter: brightness(110%);
}

#services form {
	user-select: none;
}
@media screen and (max-width: 992px) {
	#services form > div {
		width: 100%;
		margin: 0;
	}
}
#services form > div > div:nth-of-type(2) {
	text-align: right;
    margin-top: 2.5px;
}
#services input.current_value {
	background-color: #ffffff;
    border: 1px solid #f1f1f1;
	height: 29px;
    line-height: 29px;
	font-size: 17px;
	color: #232323 !important;
}
#services input.current_value:focus-visible {
	border: none !important;
	outline: none !important;
}
#services button.more, #services button.less {
	color: white !important;
    background-color: #B8B8B8;
	border-color: #B8B8B8 !important;
	padding: 0px;
    width: 30px;
    height: 28.5px;
	line-height: 29px;
	font-size: 12px;
	transition: background-color 0.3s, border-color 0.3s;
}
#services button.more:hover, #services button.less:hover {
	background-color: #a0a0a0;
	border-color: #a0a0a0 !important;
}
#services button.more:active, #services button.less:active {
	box-shadow: none !important;
	background-color: #919191;
	border-color: #919191 !important;
}
#services button.more {
	border-radius: 0 3px 3px 0 !important;
    border-width: 1px 1px 1px 2px;
    transform: translate(-16px, -2.5px);
}
#services button.less {
	border-radius: 3px 0 0 3px !important;
    border-width: 1px 2px 1px 1px;
    transform: translate(16px, -2.5px);
}
#services h4{
	font-family: "Alte-DIN-1451-Mittelschrift" !important;
}

.escape-sm-3 {
	position: relative;
    width: 300%;
    margin-left: -250%;
    margin-top: 54px;
    margin-bottom: 1em;
}
@media screen and (max-width: 768px) {
	.escape-sm-3 {
		width: 200%;
    	margin-left: -100%;
		margin-top: 0px;
	}
}

form[name^="sr_form_"] button.detail-booking {
	max-width: 120px;
	float: right;
}

body[class^="banner-"] {
	/* staging
devit*/
	top: 40px;
	
}
body[class^="banner-"]::before{
    content: attr(css-banner);
    display: block;
    position: fixed;
    width: 100%;
    top: 0px;
    height: 40px;
    line-height: 40px;
    color: white;
    font-weight: bold;
    font-family: sans-serif;
    padding: 0;
    text-align: center;
	text-shadow: 0 0 5px #00000036;
	background-image: repeating-linear-gradient(-55deg, #a59a20, #a59a20 15px, #565656 15px, #565656 30px); /* Fallback */
    grid-column: 1 / -1;
	background-size: 100%;
	animation: bg-loop 60s linear infinite;
	z-index: 99999;
}
body.banner-localhost::before {
	background-image: repeating-linear-gradient(-55deg, #dc2323, #dc2323 15px, #331616 15px, #331616 30px);
}
body.banner-staging::before {
	background-image: repeating-linear-gradient(-55deg, #42bd94, #42bd94 15px, #2da07a 15px, #2da07a 30px);
}
body.banner-devit::before {
	background-image: repeating-linear-gradient(-55deg, #4277bd, #4277bd 15px, #2d5e9f 15px, #2d5e9f 30px)
}
body[class^="banner-"] nav.navbar{
	top: 40px;
}

@keyframes bg-loop {
	0% {
		background-size: 100%;
	}
	100% {
		background-size: 200%;
	}
}

.vigopass-off {
    border: 2px solid gray;  margin: 6px; background: white; color: dimgray;     opacity: 0.5;
}

.vigopass-on {
    margin: 6px; border: 2px solid #c4a7a7; background: white; color: #cf3c3c;     opacity: 0.5;
}

.vigo-selector-error {
    border:2px solid red;
    border-radius: 5px;
}

.background-black {
    background-color: black !important;
    padding: 6px 12px !important;
}