/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300|Open+Sans:400italic,600italic,400,300,600);
@charset "UTF-8";
@font-face {
  font-family: 'entypo';
  font-style: normal;
  font-weight: normal;
  src: url('https://cdnjs.cloudflare.com/ajax/libs/entypo/2.0/entypo.eot');
  src: url('https://cdnjs.cloudflare.com/ajax/libs/entypo/2.0/entypo.eot?#iefix') format('eot'), 
  url('https://cdnjs.cloudflare.com/ajax/libs/entypo/2.0/entypo.woff') format('woff'), 
  url('https://cdnjs.cloudflare.com/ajax/libs/entypo/2.0/entypo/entypo.ttf') format('truetype'), 
  url('https://cdnjs.cloudflare.com/ajax/libs/entypo/2.0/entypo.svg#entypo') format('svg');
}
.entypo-note:before{content:"\266a"}.entypo-note-beamed:before{content:"\266b"}.entypo-music:before{content:"\1f3b5"}.entypo-search:before{content:"\1f50d"}.entypo-flashlight:before{content:"\1f526"}.entypo-mail:before{content:"\2709"}.entypo-heart:before{content:"\2665"}.entypo-heart-empty:before{content:"\2661"}.entypo-star:before{content:"\2605"}.entypo-star-empty:before{content:"\2606"}.entypo-user:before{content:"\1f464"}.entypo-users:before{content:"\1f465"}.entypo-user-add:before{content:"\e700"}.entypo-video:before{content:"\1f3ac"}.entypo-picture:before{content:"\1f304"}.entypo-camera:before{content:"\1f4f7"}.entypo-layout:before{content:"\268f"}.entypo-menu:before{content:"\2630"}.entypo-check:before{content:"\2713"}.entypo-cancel:before{content:"\2715"}.entypo-cancel-circled:before{content:"\2716"}.entypo-cancel-squared:before{content:"\274e"}.entypo-plus:before{content:"\2b"}.entypo-plus-circled:before{content:"\2795"}.entypo-plus-squared:before{content:"\229e"}.entypo-minus:before{content:"\2d"}.entypo-minus-circled:before{content:"\2796"}.entypo-minus-squared:before{content:"\229f"}.entypo-help:before{content:"\2753"}.entypo-help-circled:before{content:"\e704"}.entypo-info:before{content:"\2139"}.entypo-info-circled:before{content:"\e705"}.entypo-back:before{content:"\1f519"}.entypo-home:before{content:"\2302"}.entypo-link:before{content:"\1f517"}.entypo-attach:before{content:"\1f4ce"}.entypo-lock:before{content:"\1f512"}.entypo-lock-open:before{content:"\1f513"}.entypo-eye:before{content:"\e70a"}.entypo-tag:before{content:"\e70c"}.entypo-bookmark:before{content:"\1f516"}.entypo-bookmarks:before{content:"\1f4d1"}.entypo-flag:before{content:"\2691"}.entypo-thumbs-up:before{content:"\1f44d"}.entypo-thumbs-down:before{content:"\1f44e"}.entypo-download:before{content:"\1f4e5"}.entypo-upload:before{content:"\1f4e4"}.entypo-upload-cloud:before{content:"\e711"}.entypo-reply:before{content:"\e712"}.entypo-reply-all:before{content:"\e713"}.entypo-forward:before{content:"\27a6"}.entypo-quote:before{content:"\275e"}.entypo-code:before{content:"\e714"}.entypo-export:before{content:"\e715"}.entypo-pencil:before{content:"\270e"}.entypo-feather:before{content:"\2712"}.entypo-print:before{content:"\e716"}.entypo-retweet:before{content:"\e717"}.entypo-keyboard:before{content:"\2328"}.entypo-comment:before{content:"\e718"}.entypo-chat:before{content:"\e720"}.entypo-bell:before{content:"\1f514"}.entypo-attention:before{content:"\26a0"}.entypo-alert:before{content:"\1f4a5'"}.entypo-vcard:before{content:"\e722"}.entypo-address:before{content:"\e723"}.entypo-location:before{content:"\e724"}.entypo-map:before{content:"\e727"}.entypo-direction:before{content:"\27a2"}.entypo-compass:before{content:"\e728"}.entypo-cup:before{content:"\2615"}.entypo-trash:before{content:"\e729"}.entypo-doc:before{content:"\e730"}.entypo-docs:before{content:"\e736"}.entypo-doc-landscape:before{content:"\e737"}.entypo-doc-text:before{content:"\1f4c4"}.entypo-doc-text-inv:before{content:"\e731"}.entypo-newspaper:before{content:"\1f4f0"}.entypo-book-open:before{content:"\1f4d6"}.entypo-book:before{content:"\1f4d5"}.entypo-folder:before{content:"\1f4c1"}.entypo-archive:before{content:"\e738"}.entypo-box:before{content:"\1f4e6"}.entypo-rss:before{content:"\e73a"}.entypo-phone:before{content:"\1f4dE"}.entypo-cog:before{content:"\2699"}.entypo-tools:before{content:"\2692"}.entypo-share:before{content:"\e73c"}.entypo-shareable:before{content:"\e73e"}.entypo-basket:before{content:"\e73d"}.entypo-bag:before{content:"\1f45c'"}.entypo-calendar:before{content:"\1f4c5"}.entypo-login:before{content:"\e740"}.entypo-logout:before{content:"\e741"}.entypo-mic:before{content:"\1f3a4"}.entypo-mute:before{content:"\1f507"}.entypo-sound:before{content:"\1f50a"}.entypo-volume:before{content:"\e742"}.entypo-clock:before{content:"\1f554"}.entypo-hourglass:before{content:"\23f3"}.entypo-lamp:before{content:"\1f4a1"}.entypo-light-down:before{content:"\1f505"}.entypo-light-up:before{content:"\1f506"}.entypo-adjust:before{content:"\25d1"}.entypo-block:before{content:"\1f6ab"}.entypo-resize-full:before{content:"\e744"}.entypo-resize-small:before{content:"\e746"}.entypo-popup:before{content:"\e74c"}.entypo-publish:before{content:"\e74d"}.entypo-window:before{content:"\e74e"}.entypo-arrow-combo:before{content:"\e74f"}.entypo-down-circled:before{content:"\e758"}.entypo-left-circled:before{content:"\e759"}.entypo-right-circled:before{content:"\e75a"}.entypo-up-circled:before{content:"\e75b"}.entypo-down-open:before{content:"\e75c"}.entypo-left-open:before{content:"\e75d"}.entypo-right-open:before{content:"\e75e"}.entypo-up-open:before{content:"\e75f"}.entypo-down-open-mini:before{content:"\e760"}.entypo-left-open-mini:before{content:"\e761"}.entypo-right-open-mini:before{content:"\e762"}.entypo-up-open-mini:before{content:"\e763"}.entypo-down-open-big:before{content:"\e764"}.entypo-left-open-big:before{content:"\e765"}.entypo-right-open-big:before{content:"\e766"}.entypo-up-open-big:before{content:"\e767"}.entypo-down:before{content:"\2b07"}.entypo-left:before{content:"\2b05"}.entypo-right:before{content:"\27a1"}.entypo-up:before{content:"\2b06"}.entypo-down-dir:before{content:"\25be"}.entypo-left-dir:before{content:"\25c2"}.entypo-right-dir:before{content:"\25b8"}.entypo-up-dir:before{content:"\25b4"}.entypo-down-bold:before{content:"\e4b0"}.entypo-left-bold:before{content:"\e4ad"}.entypo-right-bold:before{content:"\e4ae"}.entypo-up-bold:before{content:"\e4af"}.entypo-down-thin:before{content:"\2193"}.entypo-left-thin:before{content:"\2190"}.entypo-right-thin:before{content:"\2192"}.entypo-up-thin:before{content:"\2191"}.entypo-ccw:before{content:"\27f2"}.entypo-cw:before{content:"\27f3"}.entypo-arrows-ccw:before{content:"\1f504"}.entypo-level-down:before{content:"\21b3"}.entypo-level-up:before{content:"\21b0"}.entypo-shuffle:before{content:"\1f500"}.entypo-loop:before{content:"\1f501"}.entypo-switch:before{content:"\21c6"}.entypo-play:before{content:"\25b6"}.entypo-stop:before{content:"\25a0"}.entypo-pause:before{content:"\2389"}.entypo-record:before{content:"\26ab"}.entypo-to-end:before{content:"\23ed"}.entypo-to-start:before{content:"\23ee"}.entypo-fast-forward:before{content:"\23e9"}.entypo-fast-backward:before{content:"\23ea"}.entypo-progress-0:before{content:"\e768"}.entypo-progress-1:before{content:"\e769"}.entypo-progress-2:before{content:"\e76a"}.entypo-progress-3:before{content:"\e76b"}.entypo-target:before{content:"\1f3af"}.entypo-palette:before{content:"\1f3a8"}.entypo-list:before{content:"\e005"}.entypo-list-add:before{content:"\e003"}.entypo-signal:before{content:"\1f4f6"}.entypo-trophy:before{content:"\1f3c6"}.entypo-battery:before{content:"\1f50b"}.entypo-back-in-time:before{content:"\e771"}.entypo-monitor:before{content:"\1f4bb"}.entypo-mobile:before{content:"\1f4f1"}.entypo-network:before{content:"\e776"}.entypo-cd:before{content:"\1f4bf"}.entypo-inbox:before{content:"\e777"}.entypo-install:before{content:"\e778"}.entypo-globe:before{content:"\1f30e"}.entypo-cloud:before{content:"\2601"}.entypo-cloud-thunder:before{content:"\26c8"}.entypo-flash:before{content:"\26a1"}.entypo-moon:before{content:"\263d"}.entypo-flight:before{content:"\2708"}.entypo-paper-plane:before{content:"\e79b"}.entypo-leaf:before{content:"\1f342"}.entypo-lifebuoy:before{content:"\e788"}.entypo-mouse:before{content:"\e789"}.entypo-briefcase:before{content:"\1f4bc"}.entypo-suitcase:before{content:"\e78e"}.entypo-dot:before{content:"\e78b"}.entypo-dot-2:before{content:"\e78c"}.entypo-dot-3:before{content:"\e78d"}.entypo-brush:before{content:"\e79a"}.entypo-magnet:before{content:"\e7a1"}.entypo-infinity:before{content:"\221e"}.entypo-erase:before{content:"\232b"}.entypo-chart-pie:before{content:"\e751"}.entypo-chart-line:before{content:"\1f4c8"}.entypo-chart-bar:before{content:"\1f4ca"}.entypo-chart-area:before{content:"\1f53e"}.entypo-tape:before{content:"\2707"}.entypo-graduation-cap:before{content:"\1f393"}.entypo-language:before{content:"\e752"}.entypo-ticket:before{content:"\1f3ab"}.entypo-water:before{content:"\1f4a6"}.entypo-droplet:before{content:"\1f4a7"}.entypo-air:before{content:"\e753"}.entypo-credit-card:before{content:"\1f4b3"}.entypo-floppy:before{content:"\1f4be"}.entypo-clipboard:before{content:"\1f4cb"}.entypo-megaphone:before{content:"\1f4e3"}.entypo-database:before{content:"\e754"}.entypo-drive:before{content:"\e755"}.entypo-bucket:before{content:"\e756"}.entypo-thermometer:before{content:"\e757"}.entypo-key:before{content:"\1f511"}.entypo-flow-cascade:before{content:"\e790"}.entypo-flow-branch:before{content:"\e791"}.entypo-flow-tree:before{content:"\e792"}.entypo-flow-line:before{content:"\e793"}.entypo-flow-parallel:before{content:"\e794"}.entypo-rocket:before{content:"\1f680"}.entypo-gauge:before{content:"\e7a2"}.entypo-traffic-cone:before{content:"\e7a3"}.entypo-cc:before{content:"\e7a5"}.entypo-cc-by:before{content:"\e7a6"}.entypo-cc-nc:before{content:"\e7a7"}.entypo-cc-nc-eu:before{content:"\e7a8"}.entypo-cc-nc-jp:before{content:"\e7a9"}.entypo-cc-sa:before{content:"\e7aa"}.entypo-cc-nd:before{content:"\e7ab"}.entypo-cc-pd:before{content:"\e7ac"}.entypo-cc-zero:before{content:"\e7ad"}.entypo-cc-share:before{content:"\e7ae"}.entypo-cc-remix:before{content:"\e7af"}.entypo-github:before{content:"\f300"}.entypo-github-circled:before{content:"\f301"}.entypo-flickr:before{content:"\f303"}.entypo-flickr-circled:before{content:"\f304"}.entypo-vimeo:before{content:"\f306"}.entypo-vimeo-circled:before{content:"\f307"}.entypo-twitter:before{content:"\f309"}.entypo-twitter-circled:before{content:"\f30a"}.entypo-facebook:before{content:"\f30c"}.entypo-facebook-circled:before{content:"\f30d"}.entypo-facebook-squared:before{content:"\f30e"}.entypo-gplus:before{content:"\f30f"}.entypo-gplus-circled:before{content:"\f310"}.entypo-pinterest:before{content:"\f312"}.entypo-pinterest-circled:before{content:"\f313"}.entypo-tumblr:before{content:"\f315"}.entypo-tumblr-circled:before{content:"\f316"}.entypo-linkedin:before{content:"\f318"}.entypo-linkedin-circled:before{content:"\f319"}.entypo-dribbble:before{content:"\f31b"}.entypo-dribbble-circled:before{content:"\f31c"}.entypo-stumbleupon:before{content:"\f31e"}.entypo-stumbleupon-circled:before{content:"\f31f"}.entypo-lastfm:before{content:"\f321"}.entypo-lastfm-circled:before{content:"\f322"}.entypo-rdio:before{content:"\f324"}.entypo-rdio-circled:before{content:"\f325"}.entypo-spotify:before{content:"\f327"}.entypo-spotify-circled:before{content:"\f328"}.entypo-qq:before{content:"\f32a"}.entypo-instagrem:before{content:"\f32d"}.entypo-dropbox:before{content:"\f330"}.entypo-evernote:before{content:"\f333"}.entypo-flattr:before{content:"\f336"}.entypo-skype:before{content:"\f339"}.entypo-skype-circled:before{content:"\f33a"}.entypo-renren:before{content:"\f33c"}.entypo-sina-weibo:before{content:"\f33f"}.entypo-paypal:before{content:"\f342"}.entypo-picasa:before{content:"\f345"}.entypo-soundcloud:before{content:"\f348"}.entypo-mixi:before{content:"\f34b"}.entypo-behance:before{content:"\f34e"}.entypo-google-circles:before{content:"\f351"}.entypo-vkontakte:before{content:"\f354"}.entypo-smashing:before{content:"\f357"}.entypo-sweden:before{content:"\f601"}.entypo-db-shape:before{content:"\f600"}.entypo-logo-db:before{content:"\f603"}
/*

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

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

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

*/
/* entypo */

.tooltip-a {
color: #000;
border-bottom: 1px dotted #ba0000;
}
a.tooltip-a i.fa-info-circle {
opacity: 0.3;
}
span.percent-marker {
font-style: italic;
font-size: 18px; 
text-shadow: 2px 2px #cecece;
}
span.price {
font-size: 19px !important;
}
span.monthly {
 font-size: 14px;
}
th.serviceth {
width: 20%;
background: #EFEFEF !important;
font-weight: 200 !important;
color: #000;
text-shadow: none;
border: 0;
box-shadow: none;
}
th.serviceth2 {
background: #EFEFEF !important;
font-weight: 200 !important;
color: #000;
text-shadow: none;
box-shadow: none;
}
th.netservice {
color: #EFEFEF !important;
font-weight: 200 !important;
}
th.hiddenth {
background-color: #fff !important;
color: #000;
text-shadow: none;
border: 0;
box-shadow: none;
}
th.hiddenth2 {
background-color: #fff !important;
color: #000;
text-shadow: none;
box-shadow: none;
}
tr.title {
height: 70px;
}
tr.title th {
font-size: 15px !important;
color: #fff;
}
tr.price {
height: 50px;
}
tr.percent {
height: 40px;
}
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
  font-size: 20px;
}

* {
    box-sizing: border-box;
}



/* Generelles */

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

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

section {
    width: 100%;
    background: #fff;
}

section button.regular-bt {
  margin: 20px;
  border: none;
  display: block;
  background: #D33536;
  color: #fff;
  text-transform: uppercase;
  font: 300 1.2rem 'Ubuntu', 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 .entypo-option {
  color: #d5b85a;
}

#pakete table {
  border-radius: 5px; 
  width: 100%;
  height: 100%;
  border: 1px solid #ddd;
  border-spacing: 0;
  font: 400 1.4rem 'Ubuntu', sans-serif;
  transition: width 0.2s height 0.2s;
}


#pakete tr:first-child th {
  font-family: 'Ubuntu', 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: #c42026;
  font-family: 'Ubuntu', 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 'Ubuntu', sans-serif; 
}

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

/* The buttons */
#pakete .responsive-tables button.next-table {
  position: absolute;
  right: -3%;
  top: 50%;
  width: 40px;
  height: 60px;
  margin-top: 0px;
  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: 40px;
  height: 60px;
  margin-top: 0px;
  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 'Ubuntu', 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: 560px;
  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) {
	
.short-text {
width: 10em; height: 1.2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Section Pakete */

#pakete .box {
  position: relative;
  margin: 3% auto 0;
  width: 80%;
  height: 560px;
  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 */