@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300|Open+Sans:400italic,600italic,400,300,600);
@import url(http://weloveiconfonts.com/api/?family=entypo);
/*

font-family: 'Source Sans Pro', serif;

font-family: 'Open Sans', sans-serif;

font-family: 'entypo', sans-serif;

*/
/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

* {
    box-sizing: border-box;
}
html, body {
    height: 100%;
    font-size: 62.5%;
}



/* Generelles */

h2 {
    font: italic 600 2.2rem/1 'Open Sans', sans-serif;
    color: #222;    
}

p {
    font: 400 1.4rem 'Open Sans', sans-serif; 
    color: #222;    
}
h1 {
    font: italic 300 3.4rem 'Source Sans Pro', serif;
    color: #222;
    text-align: center;
    text-transform: uppercase;
}   
.section-text {
    text-align: center;
    padding: 0 25%;
}

section {
    width: 100%;
    background: #fff;
    padding-top: 70px;
}

section button.regular-bt {
  margin: 20px;
  border: none;
  display: block;
  background: #D33536;
  color: #fff;
  text-transform: uppercase;
  font: 300 1.2rem 'Open Sans', sans-serif;
  padding: 7px 15px;
  border-radius: 5px;
  transition: 0.1s;
}
section button:focus {
  box-shadow: none;
  outline: none;
}
section button:active {
  box-shadow: 0px 3px 6px 0px #bc1414 inset;
}
section button:hover {
  border-radius: 10px;
}


/* Section Pakete */

#pakete em {
    color: #000;
  font-weight: bold;
  background: #7dc160;
  border-bottom: 2px solid #3ca02a;
  padding: 0px 7px;
  line-height: 1.8;
}

#pakete .entypo-check {
  color: #36ac3e;
}
#pakete .entypo-cancel {
  color: #d33536;
}
#pakete table {
  border-radius: 5px; 
  width: 100%;
  height: 100%;
  border: 1px solid #ddd;
  border-spacing: 0;
  font: 400 1.4rem 'Open Sans', sans-serif;
  transition: width 0.2s height 0.2s;
}


#pakete tr:first-child th {
  font: 400 1.4rem 'Open Sans', sans-serif !important;
  text-transform: uppercase;
}

#pakete th, #pakete td {
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  text-align: center;
}

#pakete th:last-child, #pakete td:last-child {
  border-right: none;
}
#pakete tr:last-child td, #pakete tr:last-child th {
  border-bottom:none;
} 

#pakete th {
  background: #efefef;
  font: 600 1.4rem 'Open Sans', sans-serif;
}




/* The surrounding box */
#pakete .box {
  position: relative;
  margin: 3% auto 0;
  width: 70%;
  height: 600px;
  perspective: 10000;
  transform-style: preserve-3d;
  min-width: 950px;
  overflow: visible; 
  transition: width 0.2s height 0.2s;
}

/* The front and the backside and the little tables */
#pakete .box .front, #pakete .box .back, #pakete .box .responsive-tables [class*="little"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform 0.7s; /* How long should the flipping be? */
  transform-origin: 50% 50%;
  
  background: #fff;
  border-radius: 5px;
}
#pakete .box .responsive-tables [class*="little"] {
  width: 48%;
}



#pakete .box .responsive-tables {
  display: none;
  width: 100%;
  height: 100%;
}





/* 3states of the little tables  */

#pakete .box .responsive-tables [class*="little"] {
  transform: rotateY(0deg) translateX(250%);
  transform-origin: 0 0;
  transition: transform 0.6s, opacity 0.0s 0.4s;
  opacity: 0.0;
}

#pakete .box [class*="little"].active {
  transform: rotateY(0) translateX(0);
  transition: transform 0.6s;
  opacity: 1;
}
#pakete .box [class*="little"].activetwo {
  transform: rotateY(0) translateX(106%);
  transition: transform 0.6s;
  opacity: 1;
}
#pakete .box [class*="little"].last {
  transform: rotateY(0) translateX(-110%);
  transition: transform 0.6s opacity 0.0s 0.4s;
  opacity: 0.0;
}





/* The flipping system */
#pakete .front { /* große tabelle zu anfang nicht gedreht */
  transform: rotateY(0deg);
}
#pakete .back { /* alle backsites gedreht, nicht sichtbar zu anfang */
  transform: rotateY(180deg);
  padding: 5%;
  border: 1px solid #ddd;
  box-sizing: border-box;
}
/*----- Drehung nach 1 ---------*/
#pakete .box.flip1 .front { /* große tabelle drehen */
  transform: rotateY(-180deg);
}
#pakete .box.flip1 .little1 { /* bei mobile auch kleine tabelle drehen */
  transform: rotateY(-180deg);
}
#pakete .box.flip1 .back.first { /* backsite sichtbar machen */
  transform: rotateY(0deg);    
}
/*----- Drehung nach 2 ---------*/
#pakete .box.flip2 .front {
  transform: rotateY(-180deg);
}
#pakete .box.flip2 .little2 {
  transform: rotateY(-180deg) translateX(0);
}
#pakete .box.flip2 .back.second {
  transform: rotateY(0deg);    
}
/*----- Drehung nach 3 ---------*/
#pakete .box.flip3 .front {
  transform: rotateY(-180deg);
}
#pakete .box.flip3 .little3 { 
  transform: rotateY(-180deg) translateX(0);
}
#pakete .box.flip3 .back.third {
  transform: rotateY(0deg);    
}
/*----- Drehung nach 4 ---------*/
#pakete .box.flip4 .front {
  transform: rotateY(-180deg);
}
#pakete .box.flip4 .little4 { 
  transform: rotateY(-180deg) translateX(0);
}
#pakete .box.flip4 .back.fourth {
  transform: rotateY(0deg);    
}
/*----- Drehung nach 5 ---------*/
#pakete .box.flip5 .front {
  transform: rotateY(-180deg);
}
#pakete .box.flip5 .little5 { 
  transform: rotateY(-180deg) translateX(0);
}
#pakete .box.flip5 .back.fifth{
  transform: rotateY(0deg);    
}
/*----- Drehung nach 6 ---------*/
#pakete .box.flip6 .front {
  transform: rotateY(-180deg);
}
#pakete .box.flip6 .little6 { 
  transform: rotateY(-180deg) translateX(0);
}
#pakete .box.flip6 .back.sixth{
  transform: rotateY(0deg);    
}
/*----- Drehung nach 5 ---------*/
#pakete .box.flip7 .front {
  transform: rotateY(-180deg);
}
#pakete .box.flip7 .little7 { 
  transform: rotateY(-180deg) translateX(0);
}
#pakete .box.flip7 .back.seventh{
  transform: rotateY(0deg);    
}
/*----- Drehung nach 5 ---------*/
#pakete .box.flip8 .front {
  transform: rotateY(-180deg);
}
#pakete .box.flip8 .little8 { 
  transform: rotateY(-180deg) translateX(0);
}
#pakete .box.flip8 .back.eigth{
  transform: rotateY(0deg);    
}
/*----- Drehung nach 5 ---------*/
#pakete .box.flip9 .front {
  transform: rotateY(-180deg);
}
#pakete .box.flip9 .little9 { 
  transform: rotateY(-180deg) translateX(0);
}
#pakete .box.flip9 .back.ninth{
  transform: rotateY(0deg);    
}


#pakete .back img {
  float: left;
  width: 120px;
  margin-top: 80px;
}

#pakete .back p {
    padding-left: 40px;
    margin-left: 120px;
}

#pakete .price {
    font: 600 1.4rem 'Open Sans', sans-serif; 
    padding-left: 40px;
}

#pakete h2 {
    margin-top: 40px;
}

/* The buttons */
#pakete .responsive-tables button.next-table {
  position: absolute;
  right: -3%;
  top: 50%;
  width: 60px;
  height: 80px;
  margin-top: -25px;
  background: #D43536;
  border: none;
  color: #fff;
  font-size: 2.5rem;
  padding: 0;
  z-index: 99;
  border-radius: 50% 0 0 50%;
}
#pakete .responsive-tables button.prev-table {
  position: absolute;
  left: -3%;
  top: 50%;
  width: 60px;
  height: 80px;
  margin-top: -25px;
  background: #D43536;
  border: none;
  color: #fff;
  font-size: 2.5rem;
  padding: 0;
  z-index: 99;
  border-radius: 0 50% 50% 0;
}
#pakete .box[class*="flip"] .responsive-tables button.next-table, #pakete .box[class*="flip"] .responsive-tables button.prev-table {
  background: #d6b8b8;
  pointer-events: none;
}

#pakete button {
  border: none;
  border-radius: 5px;
  background: #D43536;
  padding: 10px 25px;
  color: #fff;
  transition: box-shadow 0.1s, border-radius 0.3s;
  font: 300 1.2rem 'Open Sans', sans-serif;
  cursor: pointer;
}
#pakete button:focus {
  box-shadow: none;
  outline: none;
}
#pakete button:active {
  box-shadow: 0px 3px 6px 0px #bc1414 inset;
}
#pakete button:hover {
  border-radius: 10px;
}

#pakete [class*='hide-me_'] {
  width: 0px !important;
  height: 0px !important;
  padding: 0px !important;
  background: transparent !important;
  border-radius: 100% !important;
  border-top: 40px solid transparent !important;
  border-bottom: 40px solid transparent !important;
  border-left: 40px solid #f66f6f !important;
  border-right: 40px solid transparent !important;
  display: block;
  position: absolute;
  right: -41px;
  top: -41px;
  transform: rotate(315deg);
  cursor: pointer;
}

#pakete [class*='hide-me_']:before {
  content: "\232b";
  font: 1.4rem 'entypo', sans-serif;
  position: absolute;
  top: -8px;
  left: -32px;
  color: #ffd8d8;
  display: block;
  transition: 0.3s;
}

#pakete [class*='hide-me_']:hover:before {
  color: #fff;
}



@media only screen and (max-width : 1024px) {
/* The surrounding box */
#pakete .box {
  position: relative;
  margin: 3% auto 0;
  width: 70%;
  height: 500px;
  perspective: 10000;
  transform-style: preserve-3d;
  min-width: 0px;
  overflow: hidden; 
  transition: width 0.2s height 0.2s;
}

/* The front and the backside and the little tables */
#pakete .box .front, #pakete .box .back, #pakete .box .responsive-tables [class*="little"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform 0.7s; /* How long should the flipping be? */
  transform-origin: 50% 50%;
  
  background: #fff;
  border-radius: 5px;
}
#pakete .box .responsive-tables [class*="little"] {
  width: 47%;
}

#pakete .box .responsive-tables {
  display: block;
  width: 100%;
  height: 100%;
}
#pakete .front {
  display: none;
}



/* 3states of the little tables  */

#pakete .box .responsive-tables [class*="little"] {
  transform: rotateY(0deg) translateX(250%);
  transform-origin: 0 0;
  transition: transform 0.6s, opacity 0.0s 0.4s;
  opacity: 0.0;
}

#pakete .box [class*="little"].active {
  transform: rotateY(0) translateX(0);
  transition: transform 0.6s;
  opacity: 1;
}
#pakete .box [class*="little"].activetwo {
  transform: rotateY(0) translateX(112.7659574%);
  transition: transform 0.6s;
  opacity: 1;
}
#pakete .box [class*="little"].last {
  transform: rotateY(0) translateX(-110%);
  transition: transform 0.6s opacity 0.0s 0.4s;
  opacity: 0.0;
}

} /* Ipad 1-3 und große Tablets  Media Query Ende */ 


@media only screen and (max-width : 768px) {
#pakete .box {
  width: 90%;
  min-width: 0px;
} /* Kindle Fire und kleine Tablets Media Query ende*/



@media only screen and (max-width : 533px) {

/* Section Pakete */

#pakete .box {
  position: relative;
  margin: 3% auto 0;
  width: 80%;
  height: 400px;
  perspective: 10000;
  transform-style: preserve-3d;
  min-width: 0px;
  overflow: hidden; 
  transition: width 0.2s height 0.2s;
}


/* The front and the backside and the little tables */
#pakete .box .front, #pakete .box .back, #pakete .box .responsive-tables [class*="little"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform 0.7s; /* How long should the flipping be? */
  transform-origin: 50% 50%;  
  background: #fff;
  border-radius: 5px;
}
#pakete .box .responsive-tables {
  display: block;
}
#pakete .front {
  display: none;
}



/* 3states of the little tables  */

#pakete .box .responsive-tables [class*="little"] {
  transform: rotateY(0deg) translateX(150%);
  transform-origin: 0 0;
  transition: transform 0.6s, opacity 0.0s 0.4s;
  opacity: 0.0;
}

#pakete .box [class*="little"].active {
  transform: rotateY(0) translateX(0);
  transition: transform 0.6s;
  opacity: 1;
}
#pakete .box [class*="little"].activetwo {
  transform: rotateY(0) translateX(110%);
  transition: transform 0.6s;
  opacity: 1;
}
#pakete .box [class*="little"].last {
  transform: rotateY(0) translateX(-110%);
  transition: transform 0.6s opacity 0.0s 0.4s;
  opacity: 0.0;
}

}}