@import url(genericons/genericons.css);

*
{
    padding:0;
    margin:0;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    transition: all 1s linear;
    font-size:1rem;
}

body 
{
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;

    height: 100vh;
    width: 100%;

    font-family: 'Noto Sans', sans-serif;
    text-align:center;    
}

header {
    flex-shrink: 0;
    font-size: 12px;
    background-color: #E8CEBF;
    padding: 8px;
    padding-top: 12px;
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
}

main
{
    /*flex: 1 0 auto;*/
    flex-grow:1;
    flex-shrink:0;
    flex-basis:auto;
    
    display:flex;    
    flex-direction:column;
    justify-content:center;
    align-content:space-around;
    align-items:center;    
}

footer {
    flex-shrink: 0;
    flex-grow: 0;
    background-color: #E8CEBF;
    padding: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

    footer a {
        background: transparent;
        border-right: 1px solid black;
        padding-left: 5px;
        padding-right: 5px;
        color: black;
    }

    footer button:nth-child(1) /*Strich links*/ {
        border-left: 1px solid black;
    }

button
{
    border:0;
    cursor:pointer;/*forces the cursor to change to a hand when the button is hovered*/
    outline:none;/*avoid the dotted line in Firefox*/    
}

button::-moz-focus-inner/*avoid the dotted line in Firefox*/
{
  border: 0;
}

nav
{
    margin-top:10px;
}

    nav button {
        padding: 8px;
        padding-left: 14px;
        padding-right: 14px;
        margin: 5px;
        margin-bottom: 0;
        background-color: #266150;
        color: #fff;
        font-size: 1.2rem;
    }

        nav button.active {
            opacity: 1;
        }

        nav button.noactive {
            opacity: 0.8;
        }

#nav_button_01 {
    animation-duration: 8s;
    animation-iteration-count: 1;
    animation-name: key_nav_01;
}

@keyframes key_nav_01 {
    0% {
        transform: scaleX(0);
    }

    20% {
        transform: scaleX(1);
    }
}

#nav_button_02 {
    animation-duration: 8s;
    animation-iteration-count: 1;
    animation-name: key_nav_02;
}

@keyframes key_nav_02 {
    0% {
        transform: scaleX(0);
    }

    10% {
        transform: scaleX(0);
    }

    20% {
        transform: scaleX(1);
    }
}

#nav_button_03 {
    animation-duration: 8s;
    animation-iteration-count: 1;
    animation-name: key_nav_03;
}

@keyframes key_nav_03 {
    0% {
        transform: scaleX(0);
    }

    20% {
        transform: scaleX(0);
    }

    30% {
        transform: scaleX(1);
    }
}

#nav_button_04 {
    animation-duration: 8s;
    animation-iteration-count: 1;
    animation-name: key_nav_04;
}

@keyframes key_nav_04 {
    0% {
        transform: scaleX(0);
    }

    30% {
        transform: scaleX(0);
    }

    40% {
        transform: scaleX(1);
    }
}

#nav_button_05 {
    animation-duration: 8s;
    animation-iteration-count: 1;
    animation-name: key_nav_05;
}

@keyframes key_nav_05 {
    0% {
        transform: scaleX(0);
    }

    40% {
        transform: scaleX(0);
    }

    50% {
        transform: scaleX(1);
    }
}

#nav_button_06 {
    animation-duration: 8s;
    animation-iteration-count: 1;
    animation-name: key_nav_06;
}

@keyframes key_nav_06 {
    0% {
        transform: scaleX(0);
    }

    50% {
        transform: scaleX(0);
    }

    60% {
        transform: scaleX(1);
    }
}

#nav_button_07 {
    animation-duration: 8s;
    animation-iteration-count: 1;
    animation-name: key_nav_07;
}

@keyframes key_nav_07 {
    0% {
        transform: scaleX(0);
    }

    60% {
        transform: scaleX(0);
    }

    70% {
        transform: scaleX(1);
    }
}

h1, h2
{
    color:#00d0d0;
    display: inline;    
    position:relative;    
    
    animation-duration:3s;
    animation-timing-function:linear;    
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-play-state:running;  
}

/*Überschrift "Ihr modernes Fotolabor in Dresden<"*/
h2
{
    color:#fff;    
    font-size: 1.4rem;    
    animation-duration:4s;    
}

h3
{    
    margin-top:20px;
    margin-bottom:7px;
    color:#333;
    font-size: 1.1rem;
    font-weight:bold;    
}

h4
{    
    margin-bottom: 7px;
    color:#333;
    font-size: 1.0rem;
    font-weight:bold;    
}

/*Animation der Überschrift*/
#slideshow {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 5px;
    border-width: 0;
    border-bottom-width: 4px;
    border-style: solid;
    border-image: linear-gradient(to right, red, orange, yellow, green, blue) 4;
}

    #slideshow img {
        width: 160px;
    }

    #slideshow h2 {
        color: #266150;
        margin-left: 20px;
        animation-name: my_title_animation02;
    }

@keyframes my_title_animation01
{
    0%   {left:300px;}
    80%  {left:0px;}
    100%  {left:0px;}
}

@keyframes my_title_animation02
{
    0%    {opacity:0;}
    80%   {opacity:0;}    
    100%  {opacity:1;}
}

/*Bilder*/
img.zoom
{
    margin: 10px;    
    width:100%;
}

img.with_border
{
    margin: 5px;
    width:100%;
    border-width:2px;
    border-style:solid;
    border-color:#555;
}

.flex_h_startpage
{
    margin-top:20px;
    margin-bottom:10px;
    display:flex; 
    flex-direction:row;
    justify-content:space-around;
    flex-wrap:wrap;
    width:100%;

    font-family: 'Orbitron', sans-serif;    
    font-weight:bold;
    letter-spacing:3px;
    color:#fff;    
    text-shadow: 0 -1px #000, 1px 0 #000, 0 1px #000, -1px 0 #000, 2px 2px 3px #000;
}

.flex_h_startpage p
{
    font-size:2rem;
}

#flex_h_startpage_sub
{    
    display:flex; 
    flex-direction:row;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    width:100%;    
}

#flex_h_startpage_sub img
{
    width:600px;
}

#flex_h_startpage_sub ul
{    
    list-style: none;
    list-style-type: none;
    margin-left:5%;

    font-family: 'Orbitron', sans-serif;
    font-size:1.2em;
    font-weight:bold;
    letter-spacing:3px;
    color:#444;
}

#flex_h_startpage_sub li
{    
    margin-top:20px;
}

.flex_h_header
{ 
    display:flex; 
    flex-direction:row;    
    justify-content:space-between;    
    align-items:center;
    align-content:center;
    flex-wrap:wrap;
}

.flex_v
{    
    margin-top:20px;
    margin-bottom:20px;
    padding-left:5%;
    padding-right:5%;
    line-height:1.5rem;
    
    display:none;
    
    -webkit-flex-direction:column;
    flex-direction:column;

    -webkit-justify-content:flex-start;
    justify-content:flex-start;
    
    -webkit-align-items:center;
    align-items:center;

    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;    
    width:100%;
}

.flex_v p
{
    width:100%;    
}

.flex_v div
{
    text-align:left;
    line-height:2rem;
    width:100%;
}

.flex_h 
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

figcaption 
{
    font-size: 0.8rem;
    margin-top:-10px;
}

/*die Text-Blöcke*/
.flex_h div
{
    max-width:400px;
    margin-left:1%;
    margin-right:1%;
    margin-top:5px;
    margin-bottom:5px;
    padding:16px;
    border-style:solid;
    border-width:1px;
    border-color:#aaa;
}

.flex_v_center
{    
    margin-top:20px;
    margin-bottom:20px;
    padding-left:5%;
    padding-right:5%;

    display:none;

    -webkit-flex-direction:column;
    flex-direction:column;

    -webkit-justify-content:center;
    justify-content:center;
    
    -webkit-align-items:center;
    align-items:center;

    -webkit-align-content:center;
    align-content:center;

    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;

    width:100%;
    color:#333;    
}

.flex_h_center
{    
    display:flex; 
    flex-direction:row;
    justify-content:center;    
    align-items:center;    
    flex-wrap:wrap;
    max-width:100%;
    margin:20px;
}

.flex_h_center img
{    
    max-width: 100%; 
}

.flex_h_kontakt
{    
    display:flex;
    flex-direction:row;    
    justify-content:flex-start;    
    align-items:center;
    border:solid;
    border-width:3px;
    border-color:#aaa;
    border-radius:10px;
    margin:5px;
    padding:3px;
    width:350px;
}

.flex_h_kontakt span
{
    font-size:6rem;
    margin-left:2px;
    margin-right:2px;
    color:#aaa;
}

.flex_h_kontakt p
{
    text-align:left;    
    color:#333;
    font-size:1rem;
}

.flex_h_kontakt a
{
    text-decoration:none;
}

ul
{
    text-align:left;
    margin-left:10px;
    line-height:1.6rem;
}

ul li
{    
    list-style:outside;
    list-style-type:square;
    list-style-position:outside;
}

li.gross
{
    color:#555;
    font-size:1.4rem;
    margin:5px;
}

.bullet03 li
{
    list-style-type:none;
}

/*Bullet*/
.bullet03 li:before 
{
    content:'\2714';/* ballot box with check */
    color:#00ff21;
}

#link_demo
{
    text-decoration:underline;
    font-family: 'Orbitron', sans-serif;
    font-size:1.6em;
    font-weight:bold;
    letter-spacing:3px;
    color:#fff;
    text-shadow: 0 -1px #000, 1px 0 #000, 0 1px #000, -1px 0 #000, 2px 2px 3px #000;
    border-width:0;

    animation-name: keys_subtitle_02;
    animation-duration: 10s;
    animation-iteration-count:infinite;
    
    -webkit-animation-name: keys_subtitle_02;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count:infinite;
}

#container_home
{    
    display:flex;
    flex-direction:column;
    justify-content:space-around;    
    align-items:center;
    flex-wrap:wrap;
    width:100%;
    height:100%;    
}

#info_features
{
    background:url('images/HTML5_Logo.png');
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
}

#container_howto
{
    display:none;
    margin-top:20px;
    flex-direction:column;
    justify-content:flex-start;
    font-size:1em;
    align-items:center;
    flex-wrap:wrap;
    padding-left:4%;
    padding-right:4%;

    width:100%;
}

#container_howto .div_h_center
{
    width:100%;
    display: flex; 
    flex-direction: row;
    justify-content:space-around;
    margin-top:20px;
}

#container_howto .div_v
{    
    width:100%;
    display:flex; 
    flex-direction:column;
    justify-content:flex-start;
    margin-top:20px;
}

#info_advanced
{    
    width:100%;
    display:none;  
    flex-direction:column;
    justify-content:flex-start;    
    align-items:center;
    flex-wrap:wrap;   
}

#container_howto p
{
    text-align:left;
}

#container_howto img
{ 
    float:left;
    margin-right:10px;
}

#container_howto button
{ 
    background:transparent;
    padding:3px;
}

#container_howto button:hover
{ 
    color:#b00;
}

#container_howto h4
{
    font-variant:small-caps;
    font-size: 1.2em;
    margin-top: 30px;
}

/*Titel auf Startseite*/
#p_title_large
{
    display:block;
    font-family: 'Orbitron', sans-serif;
    font-size:3rem;
    font-weight:bold;
    letter-spacing:3px;
    color:#fff;    
    text-shadow: 0 -1px #000, 1px 0 #000, 0 1px #000, -1px 0 #000, 3px 3px 4px #000;

    animation-duration: 3s;
    animation-timing-function:linear;
    animation-iteration-count:1;
    animation-name: change_title;
    
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count:1;
    -webkit-animation-name: change_title;
}

/* The animation code */
@keyframes change_title 
{
    0%   {transform: scale(0.5);}
    100% {transform: scale(1);}
}

@-webkit-keyframes change_title 
{
    0%   {transform: scale(0.5);}
    100% {transform: scale(1);}
}

#p_subtitle_01
{
    animation-delay:3s;
    animation-name: keys_subtitle_01;
    animation-duration: 10s;
    animation-iteration-count:infinite;

    -webkit-animation-delay:3s;
    -webkit-animation-name: keys_subtitle_01;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count:infinite;
}

@keyframes keys_subtitle_01 
{
    0%   {color: white;}
    10%  {color: red;}
    50%  {color: white;}
    100% {color: white;}
}

@-webkit-keyframes keys_subtitle_01 
{
    0%   {color: white;}
    10%  {color: red;}
    50%  {color: white;}
    100% {color: white;}
}

#p_subtitle_02
{
    animation-delay:3s;
    animation-name: keys_subtitle_02;
    animation-duration: 10s;
    animation-iteration-count:infinite;

    -webkit-animation-delay:3s;
    -webkit-animation-name: keys_subtitle_02;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count:infinite;
}

@keyframes keys_subtitle_02
{
    0%   {color: white;}
    10%  {color: white;}
    50%  {color: red;}
    100% {color: white;}
}

@-webkit-keyframes keys_subtitle_02
{
    0%   {color: white;}
    10%  {color: white;}
    50%  {color: red;}
    100% {color: white;}
}

#p_subtitle_03
{
    animation-delay:3s;
    animation-name: keys_subtitle_03;
    animation-duration: 10s;
    animation-iteration-count:infinite;

    -webkit-animation-delay:3s;
    -webkit-animation-name: keys_subtitle_03;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count:infinite;
}

@keyframes keys_subtitle_03
{
    0%   {color: white;}
    50%  {color: white;}
    90%  {color: red;}
    100% {color: white;}
}

@-webkit-keyframes keys_subtitle_03
{
    0%   {color: white;}
    50%  {color: white;}
    90%  {color: red;}
    100% {color: white;}
}

#div_img_dsc img {
    height: 200px;
    margin: 5px;
}

legend 
{
    font-weight: bold;
}