@charset "utf-8";
@import url("latolatinfonts.css");

/*=:project
    tickets.orchesterabon.ch
	
  =:site content
    Copyright: Snfonisches Orchester Arbon

  =:graphic design, scripting and programming
    Copyright: Rimensberger Graphic Services, CH-2503 Biel/Bienne, Switzerland
    Author: Christof Rimensberger, <http://www.rimensberger.net/>
*/


* {
	margin: 0; 
	padding: 0; 
	outline: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

html, body {
    height: 100%;
}

body {
	font-family: 'LatoLatinWebMedium', sans-serif;
	letter-spacing: 0.01em;
	color: #212121;
	background-color: #f9f9f9;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: #1a1a1a;
}
	
a img {
	border:none;
}

a:hover img {
	border:none;
}


h1, h2, h3, h4, h5, h6 {
	font-family: 'LatoLatinWebMedium', sans-serif;
}

strong, b {
	font-family: 'LatoLatinWebBold', sans-serif;
}

.clear {
	clear: both;
}

.hide {
	display: none;
}

.left {
	float: left;
	left: 0;
}

.right {
	float: right;
	right: 0;
}

.center {
	margin: 0 auto;
}

.fade {
	opacity: 1;
	transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-webkit-transition: opacity .25s ease-in-out;
}

.fade:hover {
	opacity: 0.2;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=20);
}

.fade-default {
	opacity: 0.2;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	filter: alpha(opacity=20);
}

.fade-half {
	opacity: 0.5;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
}

.rote {
	-moz-transform: rotate(45deg);  /* FF3.5/3.6 */
	-o-transform: rotate(45deg);  /* Opera 10.5 */
	-webkit-transform: rotate(45deg);  /* Saf3.1+ */
	transform: rotate(45deg);  /* Newer browsers (incl IE9) */
}
.rote-l {
	-moz-transform: rotate(315deg);  /* FF3.5/3.6 */
	-o-transform: rotate(315deg);  /* Opera 10.5 */
	-webkit-transform: rotate(315deg);  /* Saf3.1+ */
	transform: rotate(315deg);  /* Newer browsers (incl IE9) */
}
.rote-15 {
	-moz-transform: rotate(345deg);  /* FF3.5/3.6 */
	-o-transform: rotate(345deg);  /* Opera 10.5 */
	-webkit-transform: rotate(345deg);  /* Saf3.1+ */
	transform: rotate(345deg);  /* Newer browsers (incl IE9) */
}

.rounded-corner-all {
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
	border-radius: 6px;
}

.circle {
	border-radius: 50%;
}

.w-36 {
	width: 36px;
}

.w-60 {
	width: 60px;
}

.w-100 {
	width: 100px;
}

.w-120 {
	width: 120px;
}

.w-140 {
	width: 140px;
}

.w-160 {
	width: 160px;
}

.w-180 {
	width: 180px;
}

.w-240 {
	width: 240px;
}

.w-300 {
	width: 300px;
}

.w-340 {
	width: 340px;
}

.w-360 {
	width: 360px;
}

.text-link {
	color: #4f9f00;
}

.text-link:hover {
	color: #000000;
}

.button-rounded-corner-all {
	border-radius: 3px;
}

.button-rounded-corner-all-15 {
	border-radius: 15px;
}

.border-bottom-red {
	border-bottom-style: solid;
	border-bottom-width: 3px;
	border-bottom-color: #923640;
}

.border-top-red {
	border-top-style: solid;
	border-top-width: 3px;
	border-top-color: #923640;
}

.border-red {
	border-style: solid;
	border-width: 3px;
	border-color: #923640;
}

.border-bottom-red-dots {
	border-bottom-style: dotted;
	border-bottom-width: 3px;
	border-bottom-color: #923640;
}

.border-top-red-dots {
	border-top-style: dotted;
	border-top-width: 3px;
	border-top-color: #923640;
}


.border-bottom-green {
	border-bottom-style: solid;
	border-bottom-width: 3px;
	border-bottom-color: #9cca6c;
}

.border-top-green {
	border-top-style: solid;
	border-top-width: 3px;
	border-top-color: #9cca6c;
}

.border-green {
	border-style: solid;
	border-width: 3px;
	border-color: #9cca6c;
}

.border-bottom-green-dots {
	border-bottom-style: dotted;
	border-bottom-width: 3px;
	border-bottom-color: #9cca6c;
}

.border-top-green-dots {
	border-top-style: dotted;
	border-top-width: 3px;
	border-top-color: #9cca6c;
}

.red-note {
	color: #e00000;
}

.addr-select {
    height: 31px;
    border-color: #cccccc;
    margin-bottom: 8px;
    float: left;
}

.line-20 {
	line-height: 20px !important;
}

.line-29 {
	line-height: 29px;
}

.pad-top-0 {
	padding-top: 0 !important;
}

.pad-top-5 {
	padding-top: 5px;
}

.pad-top-15 {
	padding-top: 15px;
}

.pad-top-30 {
	padding-top: 30px;
}

.pad-top-60 {
	padding-top: 60px;
}

.pad-rght-20 {
	padding-right: 20px;
}

.pad-bottom-0 {
	padding-bottom: 0 !important;
}

.pad-10-15 {
	padding: 10px 15px;
}

.pad_lr15 {
    padding-left: 15px;
    padding-right: 15px;
}
    
.margin-top-15 {
	margin-top: 15px;
}

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

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

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

.margin-rght-15 {
	margin-right: 15px;
}

.margin-rght-20 {
	margin-right: 20px;
}

.margin-rght-45 {
	margin-right: 45px;
}

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

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

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

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

.margin-left-15 {
	margin-left: 15px;
}

.button-green {
	background-color: #9cca6c;
}
.button-green-hollow {
	background-color: #ffffff;
	border-style: solid;
	border-width: 2px;
	border-color: #9cca6c;
    height: 31px;
}
.button-green-hollow span {
	line-height: 30px;
	color: #9cca6c !important;
	font-family: 'LatoLatinWeb', sans-serif;
}

.button-orange {
	background-color: #ff984a;
}

.button-short {
	max-width: 140px;
}

.button-medium {
	max-width: 190px;
}

/* text elements */

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

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

.text-foot {
	font-family: 'LatoLatinWebLight', sans-serif;
	font-size: 11px;
	color: #7f7f7f;
}

.text-intro {
	font-family: 'LatoLatinWebLight', sans-serif;
    font-size: 24px;
}

.text-item-header {
	font-family: 'LatoLatinWebLight', sans-serif;
	font-size: 24px;
	line-height: 40px;
}

.text-item-bubble {
	font-family: 'LatoLatinWebMedium', sans-serif;
	font-size: 20px;
	line-height: 40px;
	color: #ffffff;
	text-align: center;	
}

.text-cell-row-xtrabold {
	font-family: 'LatoLatinWebBold', sans-serif;
	font-size: 20px;
	line-height: 33px;
}

.text-cell-row-bold {
	font-family: 'LatoLatinWebMedium', sans-serif;
	font-size: 20px;
	line-height: 33px;
}

.text-cell-row-norm {
	font-family: 'LatoLatinWebLight', sans-serif;
	font-size: 20px;
	line-height: 33px;
}

.text-cell-row-smll {
	font-family: 'LatoLatinWebLight', sans-serif;
	font-size: 14px;
}

.text-cell-row-medm {
	font-family: 'LatoLatinWebLight', sans-serif;
	font-size: 18px;
}

.text-cell-row-desc,
.text-cell-row-bttn {
	font-family: 'LatoLatinWebLight', sans-serif;
	font-size: 20px;
	line-height: 34px;
}

.text-smll-block,
.text-norm-block {
    padding-bottom: 16px;
}

.text-error {
	font-family: 'LatoLatinWebLight', sans-serif;
    font-size: 18px;
    padding: 8px;
    background-color: #d94322;
    color: #ffffff;
}

.text-30 {
	font-size: 30px;
}

.text-48 {
	font-size: 48px;
	line-height: 52px;
}

.text-bolder {
	font-family: 'LatoLatinWebBold', sans-serif;
}

/* page elements */

.page-wrap {
	width: 100%;
    min-height: 80%;
	position: absolute;
}

.page-head {
	width: 100%;
	min-height: 160px;
}

.page-body {
	width: 100%;
	min-height: 120px;
	position: relative;
}

.page-foot {
	width: 100%;
	height: 80px;
	position: absolute;
	bottom: 0;
}

.page-sponsors {
	width: 100%;
	min-height: 80px;
	position: absolute;
	/*padding-bottom: 30px;*/
	bottom: 40px;
}

.sponsor-box {
	display: inline-block;
	height: 40px;
	max-width: 160px;
	position: relative;
	margin: 10px;
}

.sponsor-box img {
	max-height: 40px;
	max-width: 160px;
}

.sponsor-tile,
.sponsor-tile-9 {
	width: 100%;
}

.dashboard {
	width: 100%;
	/*max-width: 1060px;*/
    /*max-width: 1290px;*/
    max-width: 1380px;
	min-height: 60px;
    position: relative;
}
.dashboard.schlosshof {
	max-width: 1290px;
}
.dashboard.wide {
	max-width: 1550px;
}

.dashboard-foot {
	margin-top: 80px;
}

.ticket-bubble {
    width: 180px;
    height: 180px;
    background-color: #ffaa00;
    border-radius: 50%;
    position: absolute;
    top: -70px;
    right: 50px;
    z-index: 10;
    text-align: center;
}

.ticket-bubble-inner {
    font-family: 'LatoLatinWebMedium', 'Arial', sans-serif;
	font-size: 14px;
	line-height: 18px;
	color: #ffffff;
    width: 90%;
    margin: 80px auto 0 auto;
    /*rotate: 340deg;*/
}

.ticket-bubble-icon {
    width: 180px;
    height: 180px;
    position: absolute;
    left: 0;
    top: 0;
}

.ticket-bubble-icon img {
    width: 180px;
}

.box-logo {
	margin: 40px 0 20px 0;
}
.box-logo img {
	width: 320px;
}

.box-intro,
.box-item-header,
.box-item-description,
.box-item-location,
.box-buttons,
.box-item-xtras {
	width: 94%;
    margin: 24px 3%;
	position: relative;
}

.box-item-location {
	overflow: hidden;
}
.box-item-location.dangit {
	padding: 24px 3%;
    margin: 0;
}
.box-item-location.dangit.locn22 {
    width: 1360px;
}
.box-item-location.dangit.locn22 .seat-layout-wrap img {
    width: 100%;
}
.box-item-location.dangit.locn22 {
	padding: 24px 0;
    margin: 0;
}

.box-item-frame {
	width: 100%;
	position: relative;
}

.box-events-wrap {
	position: relative;
	width: 100%;
    padding: 24px 0 300px 0;
}

.box-events {
	width: 90%;
    padding: 24px 3%;
    margin: 0 2%;
}

.box-item-location-nav-trigger {
	position: absolute;
}

.box-item-location-nav {
	width: 60px;
	height: 60px;
	position: fixed;
	bottom: 240px;
	z-index: 9999;
	display: none;
}

.box-item-location-nav-inactive {
	width: 60px;
	height: 60px;
	position: fixed;
	bottom: 240px;
	z-index: 8888;
	display: none;
}

.tile-events {
	width: 100%;
    padding: 6px 0;
}

.tile-events.spec-info {
	border-style: solid;
    border-color: #C40E05;
    border-radius: 3px;
    padding-left: 1%;
    padding-right: 1%;
    width: 98%;
	position: relative;
}

.tile-events.spec-info span {
    color: #C40E05;
}
.tile-events.spec-info .cell-button span {
    color: #000000;
}
.tile-events.spec-info .cell-button {
	max-width: 180px;
    float: left;
    margin-right: 30px;
}
.tile-events.spec-info .spec-button-row {
	margin-top: 15px;
}

.item-header-bubble {
	display: inline-block;
	width: 40px;
    height: 40px;
    margin: 0 15px 0 0;
    /*background-color: #9cca6c;*/
    background-color: #923640;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
}

.item-header-cell {
	display: inline-block;
}

.item-description-cell {
	display: inline-block;
	width: 100%;
}

.box-item-description .high-box {
    position: relative;
    width: 100%;
    min-height: 90px;
    color: #ffffff;
    margin-bottom: 20px;
}

.box-item-description .high-box .icon-box {
    width: 90px;
    height: 90px;
    position: absolute;
    top: -78px;
    right: 60px;
}

.box-item-description .high-box .icon-box img {
    width: 90px;
}

.box-item-description .high-box .logo-box,
.box-item-description .high-box .info-box {
    height: 90px;
    width: 360px;
}

.box-item-description .high-box .info-box .sqre-box {
    width: 45px;
    height: 45px;
}
.box-item-description .high-box .info-box .sqre-box img {
    width: 45px;
}
.box-item-description .high-box .info-box .xtra-box {
    width: 100%;
    height: 45px;
    line-height: 45px;
    font-family: 'LatoLatinWebLight', sans-serif;
    font-size: 20px;
}
.box-item-description .high-box .info-box .xtra-box.xtra-link {
    color: #212121;
    cursor: pointer;
}

.box-item-description .high-box .logo-box img {
    height: 90px;
}

.box-item-description .actn-box {
    position: relative;
    width: 100%;
    min-height: 60px;
}
.box-item-description .actn-box .cell-box {
    position: relative;
    height: 60px;
    line-height: 60px;
}

.box-item-description .actn-box .dntn-sel label {
    padding-left: 35px;
    cursor: pointer;
}

.actn-box .dntn-sel input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.actn-box .dntn-sel .checkmark {
  position: absolute;
  top: 15px;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #CCCCCC;
  border-radius: 50%;
}

.actn-box .dntn-sel input:checked ~ .checkmark {
  background-color: #9cca6c;
}


.box-item-description .actn-box .dntn-sel {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.box-item-description .desc-box {
    position: relative;
    width: 100%;
    min-height: 60px;
}

.item-icon-cell {
	display: inline-block;
	width: 35px;
	height: 35px;
	overflow: hidden;
}

.cell-wrap {
	display: inline-block;
	min-height: 140px;
	width: 263px;
    margin: 0 6px 6px 0;    
}

.cell-wrap .stack {
	margin-top: 10px;
}
.cell-wrap .stack .button-green {
	max-width: 197px;
}
.cell-wrap .stack .button-green-hollow {
	max-width: 193px;
}

.cell-featured-image {
	display: inline-block;
	height: 140px;
	width: 100px;
	background-color: #cccccc;
	margin: 0 12px 6px 0;
	overflow: hidden;
}

.cell-featured-image img {
	max-width: 100%;
}

.cell-row {
	min-height: 33px;
	width: 100%;
	line-height: 20px;
}

.cell-row-spaced {
	min-height: 20px;
	width: 99%;
}

.cell-row-spaced .twint-box {
    position: relative;
	height: 210px;
}
.cell-row-spaced .twint-box img {
	height: 210px;
    width: 460px;
}
.cell-row-spaced .twint-box .twint-box-qr {
    position: absolute;
	height: 160px;
    width: 160px;
    top: 24px;
    right: 24px;
}
.cell-row-spaced .twint-box .twint-box-qr img {
    height: 160px;
    width: 160px;
}

.cell-row-border-top {
	margin-top: 5px;
	border-top-style: solid;
    border-top-width: 1px;
    border-top-color: #212121;
}

.cell-row-border-bottom {
	border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-color: #212121;
}

.cell-two {
	padding: 0 40px 0 0;
    width: 223px;
}

.cell-button {
	display: block;
    line-height: 33px;
    width: 75%;
    text-align: center;
}

.cell-button-icon {
	display: block;
	width: 33px;
	height: 33px;
}

.step-five-wait.cell-button-icon img {
    width: 29px;
    height: 29px;
    margin: 4px 0 0 4px;
}

.cell-box {
	min-height: 20px;
	line-height: 34px
}

.cell-box.celldotb {
    border-bottom-style: dotted;
    border-bottom-width: 1px;
    border-bottom-color: #000000;
}

.cell-box-smll,
.cell-box-when-narrow {
	display: none;
}

.seat-layout-wrap {
	display: block;
	position: relative;
	height: auto;
	background-repeat: no-repeat;
}

.seat-layout-wrap-mover {
	margin-left: 60px;
	margin-right: 60px;
	overflow: hidden;
}

.seat-outer-box {
	width: 34px;
	height: 34px;
	display: block;
	position: absolute;	
}

.seat-inner-box {
	width: 30px;
	height: 30px;
	display: block;
	margin: 2px auto;
	text-align: center;
	background-color: #d7d7d7;
}

.seat-inner-box-small {
	width: 24px;
	height: 24px;
	display: block;
	margin: 5px auto;
	text-align: center;
	background-color: #d7d7d7;
}

.seat-text-small {
	line-height: 24px !important;
}

.seat-text {
	font-family: 'LatoLatinWebMedium', 'Arial', sans-serif;
	font-size: 12px;
	line-height: 30px;
	color: #000000;
}

.seat-desc {
	display: inline-block;
	position: relative;
}

.squared-box {
	width: 34px;
	height: 34px;
	position: relative;
	float: left;
}

.squared-box label {
    cursor: pointer;
    position: absolute;
    width: 24px;
    height: 24px;
    left: 0;
    top: 0;
    background-color: #ffffff;
    border-radius: 3px;
    border-width: 5px;
    border-color: #9cca6c;
    border-style: solid;
}

.squared-box label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	content: '';
	position: absolute;
	width: 7px;
    height: 12px;
    background: #FFFFFF;
    top: 1px;
    left: 6px;
	border-right-color:#000000;
	border-right-width:5px;
	border-right-style:solid;
	border-bottom-color:#000000;
	border-bottom-width:5px;
	border-bottom-style:solid;
	-ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.squared-box label:hover::after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.3;
}

.squared-box input[type=checkbox]:checked + label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}

.squared-box input[type=radio]:checked + label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}


.white-select {
	background-color: #ffffff;
    border-style: solid;
    border-width: 1px;
    border-color: #cccccc;
    font-size: 13px;
    height: 26px;
}

.styled-select {
   background: url(../styling/styling-img/select-arrow.png) no-repeat 96% 0;
   height: 29px;
   overflow: hidden;
}

.styled-select select {
   background: transparent;
   border: none;
   height: 29px;
   padding: 5px; /* If you add too much padding here, the options won't show in IE */
   width: 380px;
   float: left;
   font-family: 'LatoLatinWebLight', sans-serif;
   font-size: 14px;
}

.styled-input {
    height: 29px;
    padding: 0 5px;
    font-size: 13px;
    border-style:solid;
    border-width: 1px;
    border-color: #cccccc;
    float: left;
}

.styled-input.green-input {
    height: 40px;
    font-size: 18px;
    border-width: 3px;
    border-color: #9cca6c;
    border-radius: 5px;
    width: 80px;
    margin-top: 7px;
    text-align: right;
}

.evnt-bubble {
    width: 200px;
    height: 200px;
    position: absolute;
    z-index: 100;
    top: 0;
    left: 10px;
}

.evnt-bubble img {
    width: 200px;
    height: auto;
}




@media all and (min-width: 900px) {
	
	.sponsor-tile {
		width: 60%;
		max-width: 960px;
	}
	.sponsor-tile-9 {
		width: 100%;
    	max-width: 1024px;
	}
    
    .evnt-bubble {
        right: 10px;
        left: unset;
    }
}


@media all and (max-width: 359px) {
	
	.box-events-wrap {
    	padding-bottom: 500px;
	}

}


@media all and (max-width: 539px) {
	
	.page-body {
    	padding-bottom: 140px;
	}

}


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

		.cell-one {
			min-height: 140px;
		}

}

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

		.cell-box {
   			width: 90%;
		}
	
		.cell-box-smll {
			display: block;
			min-height: 18px;
    		line-height: 18px;
    		margin-top: 10px;
		}
	
		.cell-box-when-narrow {
			display: block;
		}
	
		.cell-row-spaced {
			margin-bottom: 15px;
		}
	
		.seat-list-headers,
		.seat-list-summaries {
			display: none;
		}
	
		.addr-label {
			display: none;
		}
	
		.right-text-overwrite {
			text-align: left !important;
		}
	
		.checkbox-text-overwrite {
			width: 240px;
    		line-height: 20px;
		}
	
		.item-block-overwrite {
		    padding: 0 3%;
   			width: 94%;
			background-color: #d7e9c4;
		}
    
        .border-top-red-dots-overwrite {
			border-top-style: dotted;
			border-top-width: 3px;
			border-top-color: #923640;
		}
	
		.border-top-green-dots-overwrite {
			border-top-style: dotted;
			border-top-width: 3px;
			border-top-color: #9cca6c;
		}
	
		.box-item-frame {
			width: 93%;
			position: relative;
    		margin: 0 3%;
		}
	
		.button-tight-wrap {
			display: block;
			width: 300px;
			min-height: 35px;
			margin: 0 auto;
		}	
	
}

@media all and (max-width: 299px) {
    
    body {
        display: none;
    }    

}

@media all and (max-width: 420px) {
    
    .ticket-bubble {
        top: -90px;
        right: 10px;
    }    

}

@media all and (max-width: 1600px) {
    
    .box-logo {
        margin: 40px 0 20px 3%;
    }    

}