@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 */



#pakete > h2 {

    font: italic 600 2.2rem/1 'Open Sans', sans-serif;

    color: #222;  

    font-size: 62.5%;  

}



#pakete > p {

    font: 400 1.4rem 'Open Sans', sans-serif; 

    color: #222;    

    font-size: 62.5%;

}

#pakete > h1 {

    font: italic 300 3.4rem 'Source Sans Pro', serif;

    color: #222;

    text-align: center;

    text-transform: uppercase;

    font-size: 62.5%;

}   

#pakete > .section-text {

    text-align: center;

    padding: 0 25%;

    font-size: 62.5%;

}



#pakete section {

    width: 100%;

    background: #fff;

    /* padding-top: 70px; */

}



#pakete 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;

  font-size: small;

}



#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.0rem 'Open Sans', sans-serif;

}









/* The surrounding box */

#pakete .box {

  position: relative;

  margin: 3% auto 0;

  width: 70%;

  height: 800px;

  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: 800px; */

  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: 600px; */

  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;

}





} /* Handys Media Query Ende */