body {}



#theArt {
 overflow: hidden;
  width: 75%;
 
  margin-left: 32%;
}

.artGroup {
  display: block;
  width: 200px;
  height: 200px;
  position: relative;
  margin: 0 10px 10px 10px;
  float: left;
}

.artwork {
  display: block;
  width: 100%;
  height: 100%;
}

.artGroup img {
  width: 148%;
  height: 100%;
  position: absolute;
  display: block;
 
  left: -22%;
}

.artGroup .detail {
 display: block;
 
  position: absolute;
  right: 52%;
}

.artGroup .detail h3 {
 text-align: center;
  color: #afdefa;
  font-family: sans-serif;
  font-size: 155%;
  font-weight: 500;
}

.artGroup .detail p {
 text-align: center;
  font-size: 128%;
  line-height: 2;
  font-weight: 500;
}

article {
  clear: both;
  font: 300 15px/1.2 'roboto', sans-serif;
  margin: 2em auto;
  max-width: 600px;
}


/*colon.html*/
#theArt_colon {
 overflow: hidden;
  width: 75%;
 margin-top: 196%;
  margin-left: 32%;
   backface-visibility: hidden;
}


/*colon.html Ende*/

/*partner*/
#theArt_partner {
 overflow: hidden;
  width: 75%;
 margin-top: -112%;
  margin-left: 32%;
}

/*partner ende*/

#theArt_physio{
				overflow: hidden;
			  width: 75%;
			 margin-top: -112%;
			  margin-left: 32%;
			   backface-visibility: hidden;
}
#theArt_akupunktur{
					overflow: hidden;
			  width: 75%;
			 margin-top: -114%;
			  margin-left: 32%;
			   
}
#theArt_index{
			 overflow: hidden;
			  width: 75%;
			 margin-top: -70%;
			  margin-left: 32%;
}
#theArt_ablauf{
				 overflow: hidden;
			  width: 75%;
			 margin-top: -36%;
			  margin-left: 32%;
}
#theArt_impressum {
 overflow: hidden;
  width: 75%;
 margin-top: -70%;
  margin-left: 32%;
   backface-visibility: hidden;
}
#theArt_agb{
	overflow: hidden;
  width: 75%;
 margin-top: -113%;
  margin-left: 32%;
   backface-visibility: hidden;
}

#theArt_ueber{
			overflow: hidden;
			  width: 75%;
			     margin-top: -45%;
			  margin-left: 32%;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {


#theArt_kosten{
			overflow: hidden;
			  width: 75%;
			 margin-top: 75%;
			  margin-left: 32%;
			   backface-visibility: hidden;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
#theArt_kosten {margin-top:175%;}
}

#theArt_gutschein{
				overflow: hidden;
			  width: 75%;
			 margin-top: -48%;
			  margin-left: 32%;
}

/* Older Browsers */

.artGroup.slide { overflow: hidden; }

.artGroup.slide .detail { bottom: -364px; }

/* Newer Browsers */

.artGroup.flip {
  -webkit-perspective: 800px;
  perspective: 800px;
  margin-top: 175%;
}

.artGroup.flip .artwork {
  -webkit-transition: -webkit-transform 1s ease;
  transition: transform 1s ease;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.artGroup.flip .detail,
.artGroup.flip .theFlip {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.artGroup.flip img,
.artGroup.flip .detail {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  width: 272%;
  height: 179%;
  margin-left: 19%;
  margin-top: -96%;

}


@media screen and (max-width: 43em) { 


#theArt_index {
				overflow: hidden;
				width: 115%;
				margin-top: 183%;
				margin-left: -24%;
}

#theArt_akupunktur{
					overflow: hidden;
					margin-top: -388%;
  					width: 236%;
  					margin-left: 18%;
}
.artGroup.flip {
  -webkit-perspective: 800px;
  perspective: 729px;
  margin-top: 195%;
  margin-left: -35%;
  font-size: 85%;
}	
.artGroup.flip img, .artGroup.flip .detail {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  width: 272%;
  height: 179%;
  margin-left: 83%;
  margin-top: -107%;
}
.artGroup img {
  width: 148%;
  height: 100%;
  position: absolute;
  display: block;
  left: -22%;
}
#cheetah{
  max-width: 75%;
  border-radius: 2%;
}
#wart {
  max-width: 75%;
  border-radius: 2%;
}
#pferd1 {
  max-width: 75%;
  border-radius: 2%;
}
#lion {
  max-width: 75%;
  border-radius: 2%;
}
.cbp-fwslider nav span {
  position: absolute;
  top: 50%;
  width: 8%;
  height: 100px;
  background: #567A96;
  color: #fff;
  font-size: 50px;
  text-align: center;
  margin-top: -50px;
  line-height: 100px;
  cursor: pointer;
  font-weight: normal;
}
#theArt_gutschein {
  overflow: hidden;
  width: 187%;
  margin-top: -126%;
  margin-left: 2%;
}

#theArt_ueber{
				overflow: hidden;
				width: 115%;
				margin-top: 492%;
				margin-left: -24%;
				backface-visibility: hidden;
				 
}
#theArt_ablauf{
				overflow: hidden;
			  width: 117%;
			  margin-top: 183%;
			  margin-left: -23%;
			   backface-visibility: hidden;
}

#ablauf{
		font-size: 78%;
}

#akupunktur {
  text-align: justify;
  width: 83%;
  padding-left: 5%;
  padding-right: 5%;
}
#akupunktur p{
				font-size: 78%;
}
#akupunktur ul li{
				font-size: 78%;
}
#theArt_physio{
				width: 233%;
				  margin-top: -385%;
				  margin-left: 18%;
}
#theArt_colon{
			width: 235%;
			  margin-top: 778%;
			  margin-left: 19%;
}

#behandlung_pferd{
				margin-top: 340%;
  padding-right: 3%;
  padding-left: 1%;
  padding-top: 3%;
  padding-bottom: 5%;
  font-size: 72%;
  font-weight: 100;
  line-height: 2;

}

#kosten{
		font-size: 78%;
		text-align: justify;
	
}
#theArt_kosten{
				width: 235%;
  margin-top: 130%;
  margin-left: 20%;
}
#behandlung_pferd span{
					padding-right:5%;
					left: 81%;
					  position: absolute;
					  font-size: 78%;
					  margin-top: 3%;
}
#behandlung_hund span{
					padding-right:5%;
					left: 81%;
					  position: absolute;
					  font-size: 78%;
					  margin-top: 3%;
}
#behandlung_hund{
				margin-top: 145%;
  padding-right: 3%;
  padding-left: 1%;
  padding-top: 3%;
  padding-bottom: 5%;
  font-size: 72%;
  font-weight: 100;
  line-height: 2;
}

#impressum{
			font-size: 78%;
}

#theArt_impressum {
  
  width: 181%;
  margin-top: -40%;
  margin-left: 0%;
}
#agb{
	font-size: 78%;
}
#theArt_agb {
 
  width: 113%;
  margin-top: -162%;
  margin-left: -23%;
}
#theArt_partner{
				width: 113%;
  margin-top: -158%;
  margin-left: -23%;
}
}




@media screen and (min-width: 565px)
and (max-width : 590px) { 
	
#theArt_gutschein {
  
  width: 127%;
  margin-top: -119%;
  margin-left: 29%;
}
#theArt_index{
				margin-top: -54%;
 			    margin-left: 26%;
}
#theArt_ueber{
			margin-top: 35%;
  margin-left: 25%;
}
#theArt_ablauf{
				margin-top: -57%;
  margin-left: 26%;
}

#theArt_kosten {
  width: 127%;
  margin-top: 63%;
  margin-left: 29%;
}
#theArt_akupunktur {
  margin-top: -219%;
  width: 130%;
  margin-left: 31%;
}
#theArt_physio {
  width: 129%;
  margin-top: -212%;
  margin-left: 32%;
}
#theArt_colon {
  width: 106%;
  margin-top: 337%;
  margin-left: 21%;
}
#colon {
  margin-top: 181%;
}
#lymphdrainage{
				margin-top: 303%;
}
#theArt_impressum {
  width: 116%;
  margin-top: -92%;
  margin-left: 24%;
}
#theArt_agb {
  width: 64%;
  margin-top: -85%;
  margin-left: 7%;
}

#behandlung_hund {
  margin-top: 65%;
}
#behandlung_pferd {
  margin-top: 171%;
  
}
#theArt_partner {
  
  margin-top: -178%;
  margin-left: 25%;
}
}


@media screen and (min-width: 600px)
and (max-width : 700px) { 


#theArt_index {
  overflow: hidden;
  width: 64%;
  margin-top: 30%;
  margin-left: 15%;
}

#theArt_ueber{
				overflow: hidden;
  width: 64%;
  margin-top: 119%;
  margin-left: 15%;
}
#theArt_ablauf{
			overflow: hidden;
		  width: 116%;
		  margin-top: -72%;
  margin-left: 31%;}
#behandlung_pferd{
				
			  margin-top: 159%;
			  
}
#behandlung_hund{
				margin-top: 59%;
}
#theArt_kosten {
  width: 62%;
  margin-top: 166%;
  margin-left: 13%;
}
#theArt_akupunktur{
				margin-top: -207%;
				  width: 123%;
				  margin-left: 34%;
}
#theArt_physio{
				width: 123%;
			  margin-top: -203%;
			  margin-left: 36%;
}
#theArt_colon{
			width: 122%;
		  margin-top: 270%;
		  margin-left: 35%;
}
#theArt_impressum {
 
  width: 63%;
  margin-top: 7%;
  margin-left: 10%;
}
#theArt_agb {
 
  width: 63%;
  margin-top: -87%;
  margin-left: 10%;
}
#theArt_gutschein {
  
  width: 124%;
  margin-top: -120%;
  margin-left: 31%;
}
#theArt_partner{
				margin-top: -183%;
				margin-left: 29%;
}
}


@media screen and (min-width: 768px)
and (max-width : 1024px) { 


#theArt_index {
  width: 57%;
  margin-top: -25%;
  margin-left: 25%;
}
.artGroup .detail {
  display: block;
  position: absolute;
  right: -3%;
}
#theArt_ueber {
  overflow: hidden;
  width: 75%;
  margin-top: -24%;
  margin-left: 26%;
}
#theArt_colon {
  overflow: hidden;
  width: 75%;
  margin-top: 278%;
  margin-left: 26%;
}

#colon{
margin-top: 143%;
}
#lymphdrainage{
margin-top: 244%;
}
#theArt_ablauf{
				margin-top: -17%;
 				 margin-left: 26%;
}
#behandlung_hund{
				margin-top: 52%;
}
#behandlung_pferd{
				margin-top: 138%;
}
#theArt_kosten{
				margin-top: 107%;
}
#theArt_impressum{
					margin-top: -58%;
  					margin-left: 26%;

}
#theArt_agb{
			margin-left: 26%;
}
#theArt_physio{
				margin-left: 26%;
}


}

@media screen and (min-width: 767px)
and (max-width : 1000px) { 


#theArt_index {
  overflow: hidden;
  width: 31%;
  margin-top: 44%;
  margin-left: 36%;
}
.artGroup.flip {
  -webkit-perspective: 800px;
  perspective: 800px;
  margin-top: 181%;
  margin-left:-52%;
}

.artGroup .detail {
  display: block;
  position: absolute;
  right: -18%;
  top: 50%;
  font-size: 79%;
  padding-right: 5%;
  padding-left: 5%;
  
}

#theArt_ueber{
			overflow: hidden;
  width: 31%;
  margin-top: 99%;
  margin-left: 36%;
}
#theArt_ablauf{
width: 31%;
  margin-top: 124%;
  margin-left: 37%;
}

#behandlung_pferd{
				
			  margin-top: 187%;
			  
}
#behandlung_hund{
				margin-top: 70%;
}
#theArt_kosten {
  overflow: hidden;
  width: 31%;
  margin-top: 267%;
  margin-left: 37%;
}
#theArt_akupunktur{
					width: 31%;
					  margin-top: -30%;
					  margin-left: 35%;
}
#theArt_physio{
				width: 33%;
			  margin-top: -36%;
			  margin-left: 36%;
}
#theArt_colon{
			width: 33%;
		 margin-top: 522%;
		  margin-left: 36%;
}
#colon{
		margin-top: 201%;
}
#lymphdrainage{
				margin-top:332%;
}
#theArt_impressum {
  overflow: hidden;
  width: 32%;
  margin-top: 44%;
  margin-left: 36%;
}
#theArt_agb {
 
  width: 31%;
  margin-top: -37%;
  margin-left: 35%;


}
#theArt_gutschein {
  
  width: 31%;
  margin-top: 51%;
  margin-left: 37%;
}
#theArt_partner{
				
  width: 31%;
  margin-top: -35%;
  margin-left: 36%;
}
}