@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;
}
} /* Handys Media Query Ende */
!
