﻿@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:#87cefa;    
    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;
    background:#579eca;
    padding:5px;

    display:-webkit-flex;
    display:flex;

    -webkit-flex-direction:row;
    flex-direction:row;

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

    -webkit-justify-content:center;
    justify-content:center;
}

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*/    
    color:#fff;
}

button.active
{
    color:lightcoral;
}

button.noactive
{
    color:#fff;
}

button:hover
{
    color:lightcoral;
}

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

footer button
{
    background:transparent;
    border-right: 1px solid #fff;
    padding-left:5px;
    padding-right:5px;
    color:#fff;
}

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

nav
{
    margin-top:10px;
}

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

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

    -webkit-animation-duration: 8s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-name: key_nav_01;
}

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

@-webkit-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;

    -webkit-animation-duration: 8s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-name: key_nav_02;
}

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

@-webkit-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;

    -webkit-animation-duration: 8s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-name: key_nav_03;
}

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

@-webkit-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;

    -webkit-animation-duration: 8s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-name: key_nav_04;
}

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

@-webkit-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;

    -webkit-animation-duration: 8s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-name: key_nav_05;
}

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

@-webkit-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;

    -webkit-animation-duration: 8s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-name: key_nav_06;
}

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

@-webkit-keyframes key_nav_06
{
    0%   {transform: scaleX(0);}
    50%   {transform: scaleX(0);}
    60%   {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;    
    
    -moz-animation-duration:3s;
    -moz-animation-timing-function:linear;    
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: alternate;
    -moz-animation-play-state:running;    
    
    -webkit-animation-duration:3s;
    -webkit-animation-timing-function:linear;    
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state:running;    
    
    -o-animation-duration:3s;
    -o-animation-timing-function:linear;    
    -o-animation-iteration-count: 1;
    -o-animation-direction: alternate;
    -o-animation-play-state:running;
}

/*Überschrift "TKexe"*/
h1
{
    color:#0094ff;
    font-family: 'Baloo', cursive;
    font-size:2.6rem;
    font-weight:bold;
    font-stretch: expanded;
    text-shadow: 0 0 0.6rem #fff, 0 0 0.6rem #fff;
}

/*Überschrift "Ihr modernes Fotolabor in Dresden<"*/
h2
{
    color:#fff;    
    font-size: 1.4rem;    
    animation-duration:4s;
    -moz-animation-duration:4s;
    -webkit-animation-duration:4s;
    -o-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*/
hgroup#slideshow
{    
    /*width: 520px;*/
    margin-left: auto;
    margin-right: auto;  
}

    #slideshow h1
    {
        margin-right:10px;
	    animation-name: my_title_animation01;
        -moz-animation-name: my_title_animation01;
        -webkit-animation-name: my_title_animation01;
        -o-animation-name: my_title_animation01;
    }
    #slideshow h2
    {
	    animation-name: my_title_animation02;
        -moz-animation-name: my_title_animation02;
        -webkit-animation-name: my_title_animation02;
        -o-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;}
}

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

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

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

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

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

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

/*Bilder*/
img.zoom
{
    margin: 10px;    
    box-shadow: 5px 5px 7px #aaa;
}

    img.zoom:hover 
    {
        transform: scale(1.1);
    }

img.with_border
{
    margin: 5px;    
    box-shadow: 5px 5px 7px #aaa;
    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;    
    flex-direction:column;    
    justify-content:flex-start;    
    align-items:center;    
    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:flex-start;    
    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;    
    flex-direction:column;    
    justify-content:center;    
    align-items:center;    
    align-content:center;    
    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_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;
}

#container_kontakt h4
{
    font-family:"Arial", sans-serif;
    margin-top:5px;
    margin-bottom:0px;
    font-size:2em;
}

/*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;}
}