/* 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: 80px;
    padding-top: 60px	;
    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;
}

.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 
{
    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;
    }
}

/* --- Eigene Ergänzungen für Collage und Abschnitte --- */

.animated-section {
  position: relative;
  height: 600px;
  overflow: hidden;
}

/* Hintergrund-Ebene */
.animated-section .background {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url("../img/wave.svg"); /* oder Collage.jpg */
  background-size: cover;
  background-position: center;
  animation: rotate 6s ease-in-out infinite;
  z-index: 0;
}

/* Text-Ebene */
.animated-section .content {
  position: relative;
  z-index: 1;
  color: #000; /* normale Textfarbe */
  text-align: center;
  padding: 2em;
}

/* Keyframes nur für Hintergrund */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


.section-white {
    background-color: #ffffff;
    padding: 3em;
}

.section-gray {
    background-color: #f0f0f0;
    padding: 3em;
}