*,*:focus,*:hover{
	outline:none;
}

/* ---- button ---- */

.button {
  display: inline-block;
  padding: 0.5em 1.0em;
  background: #EEE;
  border: none;
  border-radius: 7px;
  background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
  color: #222;
  font-family: sans-serif;
  font-size: 16px;
  /*text-shadow: 0 1px white;*/
  cursor: pointer;
}

.button:hover {
  background-color: #8CF;
  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
  color: #222;
}

.button:active,
.button.is-checked {
  background-color: #28F;
}

.button.is-checked {
  color: white;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}

.button:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

/* ---- button-group ---- */

.button-group {
	padding-right: 12px;
}

.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .button {
  float: right;
  border-radius: 0;
}

#quicksearch{
	line-height: 18px;
	padding: 10px 10px 10px 10px;
	width: 165px;
	font-size: 15px;
	border: 1px solid #DDDDDD;
	border-bottom: 2px solid #DDDDDD;
	color: #000000;
}

/*.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
.button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }*/

/* ---- isotope ---- */

.grid {
  border: 1px solid #333;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .element-item ---- */

.element-item {
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
 
  padding: 10px;
  background: #888;
  color: #262524;
}

.element-item > * {
 
  padding: 0;
}

.element-item .name {
  position: absolute;

  left: 10px;
  top: 60px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: normal;
}

.element-item .symbol {
  position: absolute;
  left: 10px;
  top: 0px;
  font-size: 42px;
  font-weight: bold;
  color: white;
}

.element-item .number {
  position: absolute;
  right: 8px;
  top: 5px;
}

.element-item .weight {
  position: absolute;
  left: 10px;
  top: 76px;
  font-size: 12px;
}

/* T I C K E T   ( I S O T O P E ) */

#tickettype{
	padding-bottom: 25px;
}

.element-item2{
	width: 339px;
	padding: 0px 0px 0px 0px;
	margin-right: 10px;
}

.contentkacheln.product .element-item2{
	width: 380px;
	padding: 0px 15px 0px 15px;
	margin-right: 0px;
}

.element-item2:nth-child(3n){
	/*margin-right: 0px;*/
}

.element-item2 .ticketitem{
	/* border: 1px solid #DDDDDD; */
	padding: 10px 0px 10px 0px;	
	background-color: #FFFFFF;
	background-color: #F7F7F7;
	display: inline-block;
	width: 100%;
	min-height: 185px;
	border-bottom: 3px solid #DDD;
	/*border-bottom: 3px solid #e3001b;*/
	text-align: center;
}

.element-item2 .tickettitle{
	/*border-bottom: 1px solid #EFEFEF;
	padding: 0px 0px 5px 0px;*/
	color:  #279d2f;
	font-size: 20px;
	margin-top: 15px;
}

.element-item2 .tickettitle a{
	color: #279d2f;
	display: block;
	text-decoration: none !important;
}

.element-item2 .tickettitle a:hover{
	color: #666666 !important;
}

.element-item2 a .tickettitle{
	color: #279d2f;
	transition: color 0.5s;
}

.element-item2 a:hover .tickettitle{
	color: #e3001b;
	transition: color 0.5s;
}

.element-item2 .ticketsubtitle{
	padding: 5px 10px 0px 10px;
	min-height: 25px;
	font-size: 15px;
}

.element-item2 .ticketclass{
	color: #BBBBBB;
	display: inline-block;
	min-height: 33px;
	font-size: 15px;
}

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

.element-item2 .imagetitle{
	display: none;
}

.element-item2 .ticketlink{
    position: absolute;
    width: 100%;
    bottom: 5px;
}

.element-item2 .ticketlink a{
    padding: 5px 15px 5px 15px;
    background: #F7F7F7; 
    color: #666666;
    float: right;
    margin: 0px 2px 5px 0px;
    transition: padding 0.5s, background 0.5s;
}

.element-item2 .ticketlink a:hover{
	padding: 5px 25px 5px 25px;
	background: #EFEFEF;
    transition: padding 0.5s, background 0.5s;

}

#filters2 .typetitle{
	float:left;
	width: 150px;
	clear: both;
}

#filters2{
	display: inline-block;
	width: 100%;
	background: #FFFFFF;
}

#filter2-inner{
	padding: 0px;
}

#filters2 .button-group .button{
	background: #F7F7F7;
	padding: 10px 22px 10px 22px;
	margin: 0px 2px 0px 0px;
	border-bottom: 2px solid #DDDDDD;
	font-size: 15px;
}
#filters2 .button-group .button:focus{
	border: 0px;
}


#filters2 .button-group button:hover.button{
	background: #279d2f;
	color: #FFFFFF;
	text-shadow: none;
	border-bottom: 2px solid #279d2f;
}

#filters2 .button-group .button.is-checked{
	border-bottom: 2px solid #279d2f;
	color: #FFFFFF;
	text-shadow: none;
	background: #279d2f;
}

#filters2 .button-group .button:last-child {
    border-radius: 0;
}

/* I T E M   F O R M A T */
.ucfirst{
	float: left;
	font-size: 25px;
	padding: 8px 15px 8px 15px;
	line-height: 25px;
	border: 1px solid #DDDDDD;
	border-radius: 50% 50%;
	margin-top: 5px;
}

.ticketcontent{
	float:left;
	padding: 0px 20px 2px 20px;
	width: 100%;
}

.ticketitem:hover{
	/*background: #F7F7F7;
	transition: background 0.5s;*/
}

.ticketitem:hover .tickettitle{
	color: #e3001b;
	transition: color 0.5s;
}

.ticketitem .net{
	width: 50px;
	height: 50px;
	float: right;
	margin-right: 3px;
}

.ticketitem .net-eb{
	background: url("../images/eb-tarife.png") center center no-repeat;
	background-size: 100%;
}

.ticketitem .net-vmt{
	background: url("../images/vmt-tarife.png") center center no-repeat;
	background-size: 100%;
}

.ticketitem .net-eb{
	background: url("../images/eb-tarife.png") center center no-repeat;
	background-size: 100%;
}

.ticketitem .net-db{
	background: url("../images/db-tarife.png") center center no-repeat;
	background-size: 100%;
}

.ticketitem .net-mdv{
	background: url("../images/mdv-tarife.png") center center no-repeat;
	background-size: 100%;
}

.ticket-icon{
    height: 30px;
    width: 30px;
    position: absolute;
    left: calc(50% - 15px);
    top: -15px;
    background: #279d2f;
    border-top-left-radius: 50% 50%;
	border-top-right-radius: 50% 50%;
	border-bottom-right-radius: 50% 50%;
	border-bottom-left-radius: 50% 50%;
	color: #FFF;
	font-size: 20px;
	padding-top: 5px;
}

.ticketprice{
	margin-top: 10px;
}

/* I S O T O P E   P A G E R */

.isotope-pager .pager{
	float: left;
	padding: 2px 10px 2px 10px;
	background-color: #DDDDDD;
	color: #FFFFFF;
	margin: 10px 2px 0px 0px;
}

.isotope-pager .pager.checked{
	background: #0069b4;
}



/* M E D I U M   D E S K T O P */

@media (min-width: 801px) and (max-width: 1199px) {

	.element-item2 {
		width: 328px;
	}

	.contentkacheln.product .element-item2{
		width: 320px;
	}

	#quicksearch {
		width: calc(100% - 3px);
	}
	.button-group .button {
		float: left;
	}

	#filters2 .button-group .button {
		padding: 10px 25px 10px 25px;
		margin: 5px 2px 0px 0px;
	}

	button[data-filter=".leisuredaytickets"] {
		width: calc(33% - 0px);
	}

	button[data-filter=".pendlerazubischueler"] {
		width: calc(33% - 0px);
	}

	button[data-filter=".fahrradhund"] {
		width: calc(33% - 0px);
	}

	button[data-filter=".associationtickets"] {
		width: calc(50% - 3px);
	}

	button[data-filter=".singletickets"] {
		width: calc(50% - 2px);
	}
}

@media (min-width: 801px) and (max-width: 991px) {

	.contentkacheln.product .element-item2{
		width: 360px;
	}

}

@media (max-width: 800px) {

	.element-item2 {
		width: calc(50% - 14px);
	}

	#quicksearch {
		max-width: 100%;
		width: calc(100% - 3px);
	}
	.button-group .button {
		float: left;
	}

	#filters2 .button-group .button {
		padding: 10px 20px 10px 20px;
		margin: 5px 2px 0px 0px;
	}

	button[data-filter=".leisuredaytickets"] {
		width: calc(50% - 3px);
	}

	button[data-filter=".pendlerazubischueler"] {
		width: calc(50% - 2px);
	}

	button[data-filter=".fahrradhund"] {
		width: calc(50% - 3px);
	}

	button[data-filter=".associationtickets"] {
		width: calc(50% - 2px);
	}

	button[data-filter=".singletickets"] {
		width: calc(100% - 2px);
	}

	.contentkacheln.product .element-item2{
		width: 360px;
	}

}

@media (max-width: 767px) {

	.contentkacheln.product .element-item2{
		width: inherit;
	}

}

@media (max-width: 719px) {
	.element-item2 {
		width: calc(100% - 14px);
	}
}

@media (max-width: 602px) {
	.element-item2 {
		width: calc(100% - 14px);
	}

	button[data-filter=".leisuredaytickets"] {
		width: calc(100% - 3px);
	}

	button[data-filter=".pendlerazubischueler"] {
		width: calc(100% - 2px);
	}

	button[data-filter=".fahrradhund"] {
		width: calc(100% - 3px);
	}

	button[data-filter=".associationtickets"] {
		width: calc(100% - 2px);
	}

	button[data-filter=".singletickets"] {
		width: calc(100% - 2px);
	}

	.element-item2 .ticketitem {
		min-height: 200px;
	}

	.isotope-pager .pager {
		margin: 0px 5px 5px 0px;
	}

	.table-columnone{
		font-weight: bold;
		border-left: 1px solid #EFEFEF;
	}

	.table-row .table-columnone.w3366 {
		width: 100%;
	}

	.ticket-datails-back-button a {
		width: 100%;
		padding: 10px 10px 10px 10px;
		text-align: center;
	}
}