/**
 * @copyright   Copyright(C) 2017 4Customers UG
 * @author      Markus Bröker<broeker.markus@googlemail.com>
 */

html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom: Footer 150px + 20px Abstand */
    margin-bottom: 170px;

    background-color: #eee;
}

.white-space { white-space: nowrap; }

.navbar-default {
    margin-top: 15px;
}

/* Farbanpassungen für die Knöpfe */
.media .text-warning { color: #f29e30; }
.btn-warning {  background-color: #f29e30; }

.icon {
    width: 32px;
    height: 32px;
    text-align: center;
    padding: 7px 8px;
    border: 2px solid;
    border-radius: 50%
}

.phone {
    display: none;

    position: relative;
    max-width: 276px;
    margin: 80px auto;
    padding: 45px 9px 68px;
    border: 2px solid #ddd;
    border-radius: 20px;
    background-color: #222;
    box-shadow: 20px 20px 40px #887;
}

.pca-hold {
    display: none;

    margin: 150px 0;
}

.pca-hold .pca-main {
  display: block;
  position: relative;
  background-color: #f1f1f1;
  height: 180px;
  border: 10.8px solid #2d2d2d;
  border-top-left-radius: 7.2px;
  border-top-right-radius: 7.2px;
}

.pca-hold .pca-main:after {
  content: '';
  position: absolute;
  top: -8.9px;
  left: 50%;
  -webkit-transform: translate(-50%,0);
  -ms-transform: translate(-50%,0);
  -o-transform: translate(-50%,0);
  transform: translate(-50%,0);
  width: 5.7px;
  height: 5.7px;
  background-color: #959595;
  border-radius: 100%;
}

.pca-hold .pca-main:before {
  content: '';
  opacity: 0;
}

.pca-hold .pca-inner {
  display: block;
}

.pca-hold .pca-sub {
  display: block;
  text-align: center;
}

.pca-hold .pca-sub .pca-top {
  position: relative;
  display: block;
  height: 24px;
  background-color: #e8e8e8;
  border-bottom-left-radius: 7.2px;
  border-bottom-right-radius: 7.2px;
  opacity: 1;
  z-index: 2;
}

.pca-hold .pca-sub .pca-top:after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMzAuMyIgaGVpZ2h0PSIxNjAiIHZpZXdCb3g9IjE5IDUgMTMwLjMgMTYwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDE5IDUgMTMwLjMgMTYwIj48dGl0bGU+TGF5ZXIgMTwvdGl0bGU+PHBhdGggZD0iTTEyNy44IDkwYy4yIDI0LjIgMjEuMiAzMi4zIDIxLjUgMzIuNC0uMi42LTMuNCAxMS41LTExLjEgMjIuOC02LjcgOS43LTEzLjYgMTkuNS0yNC41IDE5LjctMTAuNy4yLTE0LjItNi40LTI2LjQtNi40cy0xNi4xIDYuMi0yNi4yIDYuNmMtMTAuNS40LTE4LjUtMTAuNS0yNS4zLTIwLjMtMTMuNy0xOS45LTI0LjItNTYuMS0xMC4xLTgwLjYgNy0xMi4yIDE5LjUtMTkuOSAzMy4xLTIwLjEgMTAuMy0uMiAyMC4xIDcgMjYuNCA3IDYuMyAwIDE4LjItOC42IDMwLjYtNy4zIDUuMi4yIDE5LjkgMi4xIDI5LjMgMTUuOS0uOC4zLTE3LjUgMTAuMS0xNy4zIDMwLjNtLTIwLjEtNTkuNWM1LjYtNi44IDkuMy0xNi4yIDguMy0yNS41LTguMS4zLTE3LjggNS40LTIzLjYgMTIuMS01LjIgNi05LjcgMTUuNi04LjUgMjQuNyA5IC44IDE4LjItNC41IDIzLjgtMTEuMyIvPjwvc3ZnPg==);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.pca-hold .pca-sub .pca-mid {
  display: block;
  text-align: center;
  height: 24px;
  width: 100%;
  position: relative;
  z-index: 1;
}

.pca-hold .pca-sub .pca-mid .pca-part {
  display: block;
  margin: 0 auto;
  border-bottom: 30px solid #cdcdcd;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  height: 0;
  width: 90px;
}

.pca-hold .pca-sub .pca-bot {
  position: relative;
  display: block;
  width: 120px;
  height: 9px;
  margin: 0 auto;
  background-color: #e8e8e8;
  border-radius: 6px 6px 0 0;
  opacity: 1;
  z-index: 2;
}

.promotion {
    display: none;
    position: relative;       
    
    padding: 0 0 10px 0; 
    margin-top: 25%; 
    margin-bottom: 25%;
    box-shadow: 20px 20px 40px #887;
    border: 2px solid #ccc;
}

.donate {
    padding-bottom: 25px;
}

.donate img {
    max-width: 180px;   
}

.download-button {
    display: none;
    position: absolute;    
    z-index: 1;

    top: 45px;
    left: -280px;
 }

.download-button img {
    width: 256px;
    height: 256px;
}

.social-media {
    display: none;

    position: fixed;
    right: 15px;
    top: 20%;
            
    background-color: green;
}

.social-media ul {
    list-style: none;     
    
    margin: 0;
    padding: 10px 0;
}

.social-media a {
    color: #fff;
}

.big-button a {
    font-size: 2em;
    margin: 10px;
    
    width: 200px;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 150px;

    padding-top: 25px;       
}

#footer .col-xs-4,
#footer .col-md-4,
#footer .col-sm-4 {
    /* Bootstrap mag meinen Footer nicht */
    width: 33.3333333%;
    float: left;
}

@media screen and (max-width: 480px) {
    #footer .footertext { font-size: x-small; }

    .content .page-header { margin: 15px 0; }

    .content h2 { font-size: 23px; }
    .content h3 { font-size: 14px; }    
    .content p { font-size: 11px; }
}

@media screen and (min-width: 780px) {
    .phone, .pca-hold, .promotion { display: block; }    

    .pull-middle {
        display: table-cell;
        vertical-align: middle;
    }    

    #footer {
        background-color: #f8f8f8;
        border-color: #e7e7e7;        
    }
}

@media screen and (min-width: 1366px) {    
    .social-media { display: block; }
    .max-text-with { margin-right: 100px; }
}

@media screen and (min-width: 1680px) {
    .download-button { display: block; }
}

@media print {
    #footer {
        display: none;
        visibilty: hidden;
    }
}