html, body 
{
    background-color:#000;
    color:#fff;
    font-size: 1vw;
    font-family:"Questrial", sans-serif;
    margin:0;
    padding:0;
}

a
{  
    text-decoration: none;
    color:#fff;
}

h1
{
    color:#f0000f;
}
h2
{
  padding-top:2vw;  
}

#intro 
{  
    width: 100%;
    height: 100%;
    background-image: url(logo.jpg);
    background-attachment: fixed;
    background-size: auto 200%;
    background-position: center 100%;
    position:absolute;
    background-repeat: no-repeat;
    animation: switch 5s linear;
}

#impressum
{
    width: 100%;
    height: 100%;
    margin:0;
    padding-left:2vw;
   
}

#datenschutz 
{
    width: 100%;
    height: 100%;
    margin:0;
    padding-left:2vw;
    
}

#visible
{
    opacity:0;
    
}

.footer 
{  
    width: 100%;
    position: absolute;
    bottom: 5%;
    left: 1%;
    text-align: center;
    color: #f0000f;
    opacity: 1;
}

#contact 
{  
  
    animation: contact 3s linear ;

}



#comingsoon 
{  
    width: 20vw;
    height: 20vw;
    background-image: url(comingsoon.png);
    background-size: 100% 100%;
    background-position: 0% 0%;
    position: absolute;
    top: 2%;
    left:2%;
    background-repeat: no-repeat;
    animation: comingsoon 1s linear ;
}


#guarantee 
{  
    width: 10vw;
    height: 10vw;
    background-image: url(guarantee.png);
    background-size: 100% 100%;
    background-position: 0% 0%;
    position: relative;
    top: 0%;
    left:85%;
    background-repeat: no-repeat;
    animation: contact 3s linear ;
}

@keyframes switch 
{
    0% { background-position: center 0%; background-color:#fff;}
    35% { background-position: center 0% }
    38% { background-color:#fff;}
    39% { background-color:#000;}
	40% { background-position: center 100% ;}
    42% { background-position: center 97% ; }
	43% { background-position: center 100% }
	45% { background-position: center 96% }
    47% { background-position: center 100% }
    48% { background-position: center 98%}
    49% { background-position: center 97%}
    52% { background-position: center 100%}
    100% { background-position: center 100% }
}

@-moz-keyframes switch /* Firefox */
{
    0% { background-position: center 0%; background-color:#fff;}
    35% { background-position: center 0% }
	38% { background-color:#fff;}
    39% { background-color:#000;}
	40% { background-position: center 100% ;}
    42% { background-position: center 97% ; background-color:#000; }
	43% { background-position: center 100% }
	45% { background-position: center 96% }
    47% { background-position: center 100% }
    48% { background-position: center 98%}
    49% { background-position: center 97%}
    52% { background-position: center 100%}
    100% { background-position: center 100% }
}

@-webkit-keyframes switch /* Safari and Chrome */
{
    0% { background-position: center 0%; background-color:#fff;}
    35% { background-position: center 0% }
	38% { background-color:#fff;}
    39% { background-color:#000;}
	40% { background-position: center 100% ;}
    42% { background-position: center 97% ; background-color:#000; }
	43% { background-position: center 100% }
	45% { background-position: center 96% }
    47% { background-position: center 100% }
    48% { background-position: center 98%}
    49% { background-position: center 97%}
    52% { background-position: center 100%}
    100% { background-position: center 100% }
}

@keyframes contact 
{
    0% { opacity:0;}
    99% { opacity:0; }
    100% { opacity:1; }
}

@-moz-keyframes contact /* Firefox */
{
    0% { opacity:0;}
    99% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes contact /* Safari and Chrome */
{
    0% { opacity:0;}
    99% { opacity:0; }
    100% { opacity:1; }
}


@keyframes comingsoon 
{
    0% { opacity:0;}
    99% { opacity:0; }
    100% { opacity:1; }
}

@-moz-keyframes comingsoon /* Firefox */
{
    0% { opacity:0;}
    99% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes comingsoon /* Safari and Chrome */
{
    0% { opacity:0;}
    99% { opacity:0; }
    100% { opacity:1; }
}





@media screen and (max-width: 600px) {
    body {
        font-size: 2vw;
    }
    #comingsoon  
    {
        min-width: 50vw;
        min-height: 50vw;
    }
    #guarantee
    {
        left:60%;
        min-width: 30vw;
        min-height: 30vw;
    }
    #intro 
    {
        background-image: url(logo_sm.jpg);
    }
}


/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {

}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
#comingsoon
    {
    min-width: 200px;
    min-height: 20px;
        opacity:0;
    }
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
#comingsoon
    {
    min-width: 200px;
    min-height: 20px;
        opacity:0;
    }
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}