/* copyright (c) 2013-2014 Jürgen Keil

No part of this software may be reproduced transmitted
transcribed by any means without prior written permission of
Jürgen Keil.
For more information please contact kontakt@juergenkeil.de.

*/ 
/* 
    Created on : 12.07.2014, 17:43:59
    Author     : jjk
*/
@-ms-viewport       { width: device-width; }


body {
    color:#222 ;
    background-color: white;
    padding-bottom: 50px;
    padding-top: 50px	;
    font-size: 20px;
    font-family: 'Text', Arial, Helvetica, sans-serif;
}
row.a
{
    color: #fab20b;
}
h1
{
    color:#ff9414;
    text-align: center;
    padding: 1em 0 1em 0;
}
h2
{
    text-align: center;
    padding: 0.7em 0 0.7em 0;
}

.bs-callout
{
    border-top-color: #444 ;
    border-right-color: #444 ;
    border-bottom-color: #444 ;

}


/*
Navigation dropdown menu
*/
.navbar
{
    font-family: 'Menue', Arial, Helvetica, sans-serif;
    font-size: 16px;
    background-color: white;
}
/*remove border of navbar*/
.navbar.navbar-default {
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.navbar.navbar-default .navbar-collapse {
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
/* set height of navbar */
.navbar-nav > li > a, .navbar-brand {
/*    height:60px !important;*/
}
.dropdown-menu
{
    /*    color:whitesmoke ;
	background-color: #444  ;*/

}
.dropdown-menu li a
{
    /*    color:whitesmoke ;
	background-color: #444;*/

}
/* aufklapbare Panels */
.panel-body
{
    /*    color: black;*/
}
.navbar-nav>li>a
{
    /*    padding-top: 5px;
	padding-bottom: 5px;*/
}
/*
 texthintergrund durchscheinend
keine runden Ecken und Textschatten
*/
.thumbnail
{
    background-color: transparent;
    border: none;
    border-radius: 0px;
    text-shadow: 2px 0px 2px white;
}
/* aber text bleibt weiss */
.thumbnail .caption
{
    color: black;

}
.fixed-top 
{
    position:absolute;
    top:0px;
    left:0px;
    padding-right: 0px;
    padding-left: 0px;
    margin-right: 0px;
    margin-left: 0px;
}
#topcarousel{
    /*    position: absolute;
	top:50px;
	left:0px;
	z-index: 0;*/
    margin: 0 0 0 0;
    padding: 0 -15 0 -15;
}
.container-fluid
{
    opacity:1;
    -webkit-animation-duration: 0.11s;
    -webkit-animation-name: blendin;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0.11s;
    -webkit-animation-fill-mode:backwards; /* start with from */
    -moz-animation-duration: 0.11s;
    -moz-animation-name: blendin;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-delay: 0.11s;
    -moz-animation-fill-mode:backwards;
    -ms-animation-duration: 0.11s;
    -ms-animation-name: blendin;
    -ms-animation-timing-function: ease-in-out;
    -ms-animation-delay: 0.11s;
    -ms-animation-fill-mode:backwards;
    -o-animation-duration: 0.11s;
    -o-animation-name: blendin;
    -o-animation-timing-function: ease-in-out;
    -o-animation-delay: 0.11s;
    -o-animation-fill-mode:backwards;
    animation-duration: 0.11s;
    animation-name: blendin;
    animation-timing-function: ease-in-out;
    animation-delay: 0.11s;
    animation-fill-mode:backwards;
}
.centerbox 
{
    text-shadow:0px 0px 20px white;
    position:absolute;
    top:0px;
    color:#821031;
    font-weight:bold;
    width:100%;
    height: 100%;
    font-size: 8vw;

} 
.centerbox .centertext{
    position:absolute;
    bottom:3vw;
    left:0px;
    width:100%;
    text-align:center;
}
.centerbox:hover{
    color:#821031;
    text-decoration:none;

}

/*
Animation rotate and scale for background
*/
img.backg
{
    position:fixed;
    z-index:-10;
    /*	vertical-align: middle;*/
    top:0px; 
    right:0px;
    width:100%;
    opacity:0.1;
    -webkit-animation-duration: 6s;
    -webkit-animation-name: rotate;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-duration: 6s;
    -moz-animation-name: rotate;
    -moz-animation-timing-function: ease-in-out;
    -ms-animation-duration: 6s;
    -ms-animation-name: rotate;
    -ms-animation-timing-function: ease-in-out;
    -o-animation-duration: 6s;
    -o-animation-name: rotate;
    -o-animation-timing-function: ease-in-out;
    animation-duration: 6s;
    animation-name: rotate;
    animation-timing-function: ease-in-out;
}
@-webkit-keyframes rotate {
    from {
	opacity:0;
	-webkit-transform:rotate(-90deg) scale(8);
	-webkit-transform-origin:center center;
    }


    to {
	opacity:0.1;
	-webkit-transform:rotate(0deg) scale (1);
	-webkit-transform-origin:center center;
    }
}

@-moz-keyframes rotate {
    from {
	opacity:0;
	-moz-transform:rotate(-90deg) scale(8);
	-moz-transform-origin:center center;
    }


    to {
	opacity:0.1;
	-moz-transform:rotate(0deg) scale (1);
	-moz-transform-origin:center center;
    }
}
@-ms-keyframes rotate {
    from {
	opacity:0;
	-ms-transform:rotate(-90deg) scale(8);
	-ms-transform-origin:center center;
    }


    to {
	opacity:0.1;
	-ms-transform:rotate(0deg) scale (1);
	-ms-transform-origin:center center;
    }
}

@-o-keyframes rotate {
    from {
	opacity:0;
	-o-transform:rotate(-90deg) scale(8);
	-o-transform-origin:center center;
    }


    to {
	opacity:0.1;
	-o-transform:rotate(0deg) scale(1);
	-o-transform-origin:center center;
    }
}

@keyframes rotate {
    from {
	opacity:0.05;
	transform:rotate(-90deg) scale(8);
	transform-origin:center center;
    }


    to {
	opacity:0.1;
	transform:rotate(0deg) scale (1);
	transform-origin:center center;
    }
}

/*
Animation text einblenden
*/
@-webkit-keyframes blendin {
    from {
	opacity:0;
    }


    to {
	opacity:1;
    }
}

@-moz-keyframes blendin {
    from {
	opacity:0;
    }


    to {
	opacity:1;
    }
}
@-ms-keyframes blendin {
    from {
	opacity:0;
    }


    to {
	opacity:1;
    }
}

@-o-keyframes blendin {
    from {
	opacity:0.0;
    }


    to {
	opacity:1;
    }
}

@keyframes blendin {
    from {
	opacity:0;
    }


    to {
	opacity:1;
    }
}
img.backgroundImg{
    position:fixed;
    top: 40px;
    left:0px;
    width:100%;
    height:100%;
    z-index:-10;
    object-fit: cover;
    filter: blur(5px) grayscale(30%);
    opacity:0.8;
}

div.textblock{
    background-color:white;
    margin-top: 50vh;
    margin-bottom: 0px;
    padding-top: 0;
    padding-bottom: 5vh;
}
div.block{
    background-color:white;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 5vh;
}
div.imgblock{
    background-color:white;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.boxx{
    height: 320px !important;
    line-height: 120%;
}
div.fullwidth{
    padding-left: 0px !important;
    padding-right: 0px !important;
}
div.form-group, 
div.form-check{
    padding-left: 0;
}

/*
  Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
  CSS from:       http://codepen.io/transportedman/pen/NPWRGq
  and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
  Inspired from:  http://codepen.io/Rowno/pen/Afykb 
*/
.carousel-fade .carousel-inner .item {
    opacity: 0;
    transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
    opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}

.carousel-fade .carousel-control {
    z-index: 2;
}

/*
  WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
  Need to override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
	opacity: 0;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
	opacity: 0;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition-duration: 2.5s;
	transition-duration: 2.5s;
    }
}