/*RESET*/
html, body, div, span, h1, h2, h3, h4, h5, h6, p,
a, img,small, article, aside, canvas, details, embed,
footer, header, nav, section, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, footer, header, nav, section {
        display: block;
}

/* reset.css Ende */

body{text-align:center;}
footer{
        position:fixed;
        bottom:0.1em;
        border-radius: 2em 2em 2em 2em;
        width:90%;
        right:5%;
        font-size:15px;
        color:#E2F8F6;
        background: #0E70A1; /* alte Browser */
        background: -moz-radial-gradient(center, ellipse cover, #011433 0%, #0E70A1 45%, #003333 100%); /* ff3.6+ */
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #011433), color-stop(45%, #0E70A1), color-stop(100%, #003333)); /* safari4+,chrome */
        background: -webkit-radial-gradient(center, ellipse cover, #011433 0%, #0E70A1 45%, #003333 100%); /* safari5.1+,chrome10+ */
        background: -o-radial-gradient(center, ellipse cover, #011433 0%, #0E70A1 45%, #003333 100%); /* opera 11.10+ */
        background: -ms-radial-gradient(center, ellipse cover, #011433 0%, #0E70A1 45%, #003333 100%); /* ie10+ */
        background: radial-gradient(ellipse at center, #011433 0%, #0E70A1 45%, #003333 100%); /* w3c */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#011433', endColorstr='#003333',GradientType=1 ); /* ie6-9 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#011433, endColorstr=#003333)";
}
.wrapper{
    width:100%;
    height:100vh;
    overflow:auto;
    margin-bottom:0;
    border-radius:2em 2em 2em 2em;
    background:#022059; /* alte Browser*/

    background: -moz-linear-gradient(4deg, #011433 0%, #127FA1 50%, #022059 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #011433), color-stop(50%, #127FA1), color-stop(100%, #022059)); /* safari4+,chrome */
    background: -webkit-linear-gradient(4deg, #011433 0%, #127FA1 50%, #022059 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(4deg, #011433 0%, #127FA1 50%, #022059 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(4deg, #011433 0%, #127FA1 50%, #022059 100%); /* ie10+ */
    background: linear-gradient(86deg, #011433 0%, #127FA1 50%, #022059 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#011433', endColorstr='#022059',GradientType=1 ); /* ie6-9 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#011433, endColorstr=#022059)";
}
.boxWrapper{
    width:90%;
    min-width:280px;
    height:auto;
    margin: 2em auto 0 auto;
    border-radius:2em;
    background: #003333; /* alte Browser*/
    background: -moz-radial-gradient(center, ellipse cover, #011433 0%, #0E70A1 45%, #003333 100%); /* ff3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #011433), color-stop(45%, #0E70A1), color-stop(100%, #003333)); /* safari4+,chrome */
    background: -webkit-radial-gradient(center, ellipse cover, #011433 0%, #0E70A1 45%, #003333 100%); /* safari5.1+,chrome10+ */
    background: -o-radial-gradient(center, ellipse cover, #011433 0%, #0E70A1 45%, #003333 100%); /* opera 11.10+ */
    background: -ms-radial-gradient(center, ellipse cover, #011433 0%, #0E70A1 45%, #003333 100%); /* ie10+ */
    background: radial-gradient(ellipse at center, #011433 0%, #0E70A1 45%, #003333 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#011433', endColorstr='#003333',GradientType=1 ); /* ie6-9 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#011433, endColorstr=#003333)";
    -webkit-box-shadow: 0px 0px 73px 4px #011433; /* WebKit */
       -moz-box-shadow: 0px 0px 73px 4px #011433; /* Firefox */
            box-shadow: 0px 0px 73px 4px #011433; /* Standard */
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#011433', Direction=90, Strength=3); /* IE 6-8 */
    }
.box{
    margin:0 0 0 0;
    display:inline-block;
    font-size:60px;
    line-height:60px;
    color:#E2F8F6;
    -webkit-font-smoothing:antialiased;
    -webkit-transform:translateZ(0.1px);
       -moz-transform:translateZ(0.1px);
        -ms-transform:translateZ(0.1px);
         -o-transform:translateZ(0.1px);
            transform:translateZ(0.1px);
}

.animated {
    -webkit-animation-fill-mode: both;
       -moz-animation-fill-mode: both;
        -ms-animation-fill-mode: both;
         -o-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-duration: 1s;
       -moz-animation-duration: 1s;
        -ms-animation-duration: 1s;
         -o-animation-duration: 1s;
            animation-duration: 1s;
}

@-webkit-keyframes introAnimation {
     0%{-webkit-transform:scale(0) rotate(-180deg);opacity:0;}
    50%{-webkit-transform:scale(1) rotate(0deg);opacity:1;}
    70%{-webkit-transform:scale(1) rotate(0deg);}
    100%{-webkit-transform:scale(0.8) rotate(0deg);}
}

@-moz-keyframes introAnimation {
     0%{-moz-transform:scale(0) rotate(-180deg);opacity:0;}
    50%{-moz-transform:scale(1) rotate(0deg);opacity:1;}
    70%{-moz-transform:scale(1) rotate(0deg);}
    100%{-moz-transform:scale(0.8) rotate(0deg);}
}
@-o-keyframes introAnimation {
     0%{-o-transform:scale(0) rotate(-180deg);opacity:0;}
    50%{-o-transform:scale(1) rotate(0deg);opacity:1;}
    70%{-o-transform:scale(1) rotate(0deg);}
    100%{-o-transform:scale(0.8) rotate(0deg);}
}

@keyframes introAnimation {
    0%{transform: scale(0) rotate(-180deg);opacity:0;}
    50%{transform: scale(1) rotate(0deg);opacity:1;}
    70%{transform: scale(1) rotate(0deg);}
    100%{transform: scale(0.8) rotate(0deg);}
}

.introAnimation {
    -webkit-backface-visibility: visible !important;
       -moz-backface-visibility: visible !important;
         -o-backface-visibility: visible !important;
            backface-visibility: visible !important;

    -webkit-animation-name: introAnimation;
       -moz-animation-name: introAnimation;
         -o-animation-name: introAnimation;
            animation-name: introAnimation;
}

.t2 {
    -webkit-animation-delay: 0.3s;
       -moz-animation-delay: 0.3s;
        -ms-animation-delay: 0.3s;
         -o-animation-delay: 0.3s;
            animation-delay: 0.3s;
}

.t3 {
    -webkit-animation-delay: 0.6s;
       -moz-animation-delay: 0.6s;
        -ms-animation-delay: 0.6s;
         -o-animation-delay: 0.6s;
            animation-delay: 0.6s;
}

.t4 {
    -webkit-animation-delay: 0.9s;
       -moz-animation-delay: 0.9s;
        -ms-animation-delay: 0.9s;
         -o-animation-delay: 0.9s;
            animation-delay: 0.9s;
}

.t5 {
    -webkit-animation-delay: 1.2s;
       -moz-animation-delay: 1.2s;
        -ms-animation-delay: 1.2s;
         -o-animation-delay: 1.2s;
            animation-delay: 1.2s;
}

.t6 {
    -webkit-animation-delay: 1.5s;
       -moz-animation-delay: 1.5s;
        -ms-animation-delay: 1.5s;
         -o-animation-delay: 1.5s;
            animation-delay: 1.5s;
}

.t7 {
    -webkit-animation-delay: 1.8s;
       -moz-animation-delay: 1.8s;
        -ms-animation-delay: 1.8s;
         -o-animation-delay: 1.8s;
            animation-delay: 1.8s;
}

.t8 {
    -webkit-animation-delay: 2.1s;
       -moz-animation-delay: 2.1s;
        -ms-animation-delay: 2.1s;
         -o-animation-delay: 2.1s;
            animation-delay: 2.1s;
}

.t9 {
    -webkit-animation-delay: 2.4s;
       -moz-animation-delay: 2.4s;
        -ms-animation-delay: 2.4s;
         -o-animation-delay: 2.4s;
            animation-delay: 2.4s;
}
.t10 {
    -webkit-animation-delay: 2.7s;
       -moz-animation-delay: 2.7s;
        -ms-animation-delay: 2.7s;
         -o-animation-delay: 2.7s;
            animation-delay: 2.7s;
}
.t11 {
    -webkit-animation-delay: 3.0s;
       -moz-animation-delay: 3.0s;
        -ms-animation-delay: 3.0s;
         -o-animation-delay: 3.0s;
            animation-delay: 3.0s;
}
.t12 {
    -webkit-animation-delay: 3.3s;
       -moz-animation-delay: 3.3s;
        -ms-animation-delay: 3.3s;
         -o-animation-delay: 3.3s;
            animation-delay: 3.3s;
}
/* ******* Start Style Slideshow ********** */

.SlideBox{min-height:200px;}

.bilderrahmen{
      position:relative;
 /*     border:5px solid silver; */
      width:28%;
      height: auto;
      border-radius:100%;
      margin-top:0;
      margin-bottom:0;
}
#slides{position:relative;}
.slide{
      margin-left:0;
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:100%;
      opacity:0;
      z-index:1;
      -webkit-transition: opacity 2s;
         -moz-transition: opacity 2s;
           -o-transition: opacity 2s;
              transition: opacity 2s;
}
.showing{
      margin-left:0;
      opacity: 1;
      z-index: 2;
}
/* ******* Ende Style Slideshow ********** */



.weiss{color:#FFFFFF; font-size: 16px }
@media screen and (max-width:728px){
/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
   .box{
        font-size:40px;
        line-height:40px;
    }
    .boxWrapper{margin:2em auto 0 auto;}
    .bilderrahmen{width:50%;}
    footer{
        font-size:20px;
        line-height:20px;
    }
}
@media screen and (max-width:460px){
    .box{
        font-size:20px;
        line-height:20px;
    }
    .boxWrapper{margin:2em 0 0 0;}

    .bilderrahmen{width:70%;}
    footer{
        font-size:14px;
        line-height:14px;
    }
}
/* Landscape */
@media screen and (orientation: landscape)
              and (max-width:800px){
    footer{display:none;}
    .bilderrahmen{
        width:40%;
        border-radius:0;
    }
}