.navbar {
    margin-bottom: 0;
    background-color: #ffffff;
    z-index: 9999;
    border: 0;
    font-size: 15px !important;
    line-height: 1.42857143 !important;
    letter-spacing: 4px;
    border-radius: 0;
}


.navbar li a, .navbar .navbar-brand {
    color: #000000 !important;
}

.navbar-nav li a:hover, .navbar-nav li.active a {
    color: #fff !important;
    background-color: #000000 !important;
}

.navbar-nav li a {
    line-height: 67px;
}

.navbar-default .navbar-toggle {
    border-color: transparent;
    color: #fff !important;
}


.container-fluid{
    padding: 60px 50px;
}

.bg-grey{
    background-color: #e0e0e0;
}

.glyphicon{
    transition-duration: 1s;
}

.zoom:hover span{
    transform: scale(1.25);
    transition-duration: 1s;
}

.zoom:hover h4{
    transform: scale(1.25);
    transition-duration: 1s;
}

a:active, a:focus {
    outline: 0;
    border: none;
    -moz-outline-style: none;
}

@media screen and (max-width: 768px) {
    .col-md-4{
        text-align: center;
        margin: 25px 0;
        font-size: 20px;
    }
}


footer .glyphicon {
    font-size: 20px;
    margin-bottom: 20px;
    color: #000000;
}

body {
    font: 400 15px Lato, sans-serif;
    line-height: 1.8;
    color: #818181;
}

.jumbotron {
    font-family: Montserrat, sans-serif;
    padding-top: 60px;
    padding-bottom: 0px;
    background-color: #ffffff;
    color: #000000;
    padding-right: 1em;
    padding-left: 1em;
}

.navbar {
    font-family: Montserrat, sans-serif;
}


h2 {
    font-size: 3em;
    font-family: Montserrat, sans-serif;
    /*text-transform: uppercase;*/
    color: #303030;
    /*font-weight: 600;*/
    margin-bottom: 30px;
}

h4 {
    font-family: Montserrat, sans-serif;
    line-height: 1.375em;
    color: #303030;
    font-weight: 400;

}

.featurette-divider {
    margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
    font-weight: 300;
    line-height: 1;
    letter-spacing: -1px;
}

.middle-style{
    margin-top: 50px;

}


.slideanim {
    visibility:hidden;
}

.row a:hover{
    text-decoration: none;
}

.welcomer{
    font-family: Montserrat, sans-serif;
    letter-spacing: 0.2em;
    font-size: 30px;
}

.logo-medium{
    color: grey;
    font-size: 2.5em;
}

.slide {
    animation-name: slide;
    -webkit-animation-name: slide;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    visibility: visible;
}

.item-padding{
    padding-bottom: 20px;
    padding-top: 20px;
}

div.myCard{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
    margin: 20px;
    background-color: #ffffff;
    padding: 10px;
}



div.myCard:hover {
    transition-duration:1s;
    width: auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 30px 0 rgba(0, 0, 0, 0.7);
    text-align: center;
}

div.myHeader {
    transition-duration: 1s;
    color: white;
}

div.myContainer {
    padding: 10px;
}

.download-container{
    padding-top: 20px;
    padding-bottom: 20px;
    border: 1px solid;
    border-radius: 10px;
}

.carousel-control.left, .carousel-control.right {
    background-image: none
}

.headings{

}


.bg-beton{
    background-color: #818181;
}

.thumbnail {
    padding: 0 0 15px 0;
    border: none;
    border-radius: 0;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
}

.vertical-alignment {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none;
}
.vertical-align-center {
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {

    width:inherit;
    max-width:inherit;
    height:inherit;
    margin: 0 auto;
    pointer-events: all;
}

.finger-logo{
/*    height: 36px;*/
    height: 75px;
}

.img-container{
    position: relative;
}

.img-container img {vertical-align: middle;

}

.img-container .content {
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    height: 100%;
    padding: 20px;
    display: table;
}



blockquote {
    border-style: solid;
    border-left: none;
    border-right: none;
    font-family: Lato, sans-serif;
    font-size: 2.5vw;
    color: white;
    position: relative;
    padding: 0.5em 3em 0.5em 3em;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

blockquote:before {
    font-family: Georgia, serif;
    position: absolute;
    font-size: 6em;
    line-height: 1;
    left: -5px;
    color: #ffffff;
    content: "\201C";
}
blockquote:after {
    font-family: Georgia, serif;
    position: absolute;
    /* display: block; don't use this, it raised the quote too high from the bottom - defeated line-height? */
    float:right;
    font-size:6em;
    line-height: 1;
    right:0;
    color: #ffffff;
    content: "\201D";
}

.liefer-container{

}

@keyframes slide {
    0% {
        opacity: 0;
        transform: translateY(70%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}
@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}

#left{
    stroke-dasharray: 723.5;
    stroke-dashoffset: 723.5;
    animation: left 3s ease-in-out forwards;

}

@keyframes left {
    from{
        stroke-dashoffset: 723.5;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@-moz-keyframes left {
    from{
        stroke-dashoffset: 723.5;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes left {
    from{
        stroke-dashoffset: 723.5;
    }
    to {
        stroke-dashoffset: 0;
    }
}

#right{
    stroke-dasharray: 723.5;
    stroke-dashoffset: -723.5;
    animation: right 3s ease-in-out forwards;

}

@keyframes right {
    from{
        stroke-dashoffset: -723.5;
    }
    to{
        stroke-dashoffset: 0;
    }
}

@-moz-keyframes right {
    from{
        stroke-dashoffset: -723.5;
    }
    to{
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes right {
    from{
        stroke-dashoffset: 723.5;
    }
    to{
        stroke-dashoffset: 0;
    }
}

#middle{
    animation: middle 3s ease-in-out forwards;
    visibility: visible;!important;

}

@keyframes middle {
    0%{
        transform: translateY(-100%);
    }
    50%{
        transform: translateY(8%);
    }
    65%{
        transform: translateY(-4%);
    }
    80%{
        transform: translateY(4%);
    }
    95%{
        transform: translateY(-2%);
    }
    100%{
        transform: translateY(0%);
    }
}

@-moz-keyframes middle {
    0%{
        transform: translateY(-100%);
    }
    50%{
        transform: translateY(8%);
    }
    65%{
        transform: translateY(-4%);
    }
    80%{
        transform: translateY(4%);
    }
    95%{
        transform: translateY(-2%);
    }
    100%{
        transform: translateY(0%);
    }
}

@-webkit-keyframes middle {
    0%{
        transform: translateY(-100%);
    }
    50%{
        transform: translateY(8%);
    }
    65%{
        transform: translateY(-4%);
    }
    80%{
        transform: translateY(4%);
    }
    95%{
        transform: translateY(-2%);
    }
    100%{
        transform: translateY(0%);
    }
}


.baustelle-1{
    background: url("../resources/IMG_7254_b.jpg") no-repeat fixed bottom;
    height: 60vh;
    background-size: cover;
}
.baustelle-2{
    background: url("../resources/IMG_7254_b.jpg") no-repeat fixed bottom;
    height: 60vh;
    background-size: cover;
}
.baustelle-3{
    background: url("../resources/IMG_7254_b.jpg") no-repeat fixed bottom;
    height: 60vh;
    background-size: cover;
}
.baustelle-4{
    background: url("../resources/IMG_7254_b.jpg") no-repeat fixed bottom;
    height: 60vh;
    background-size: cover;
}

.baustelle-5{
    background: url("../resources/IMG_7254_b.jpg") no-repeat fixed bottom;
    height: 60vh;
    background-size: cover;
}

.nav-pills > li{
    font: 400 20px Montserrat, sans-serif;
    background-color: white;
}

.nav-pills > li > a{
    color: black;
    background-color: white;
}

.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
    background-color: #00c437;
}

.overlay {
    background: rgba(0, 0, 0, 0.75);
    text-align: center;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transition: opacity 0.25s ease;
    -moz-transition: opacity 0.25s ease;
}

.overlay-out .overlay {
    opacity: 1;
}