@charset "utf-8";
/* 
    Document    : screen
    Created on  : 01.07.2013, 16:17:10
    @author     : Fuback
    @mail       : axelritter@pelZONE.com
    @company    : [pel*] ZONE
    @url        : http://www.stifblow.de/
*/

@font-face {
    font-family: 'hungry_ghostsregular';
    src: url('../_font/hungry_ghosts-webfont.eot');
    src: url('../_font/hungry_ghosts-webfont.eot?#iefix') format('embedded-opentype'),
         url('../_font/hungry_ghosts-webfont.woff') format('woff'),
         url('../_font/hungry_ghosts-webfont.ttf') format('truetype'),
         url('../_font/hungry_ghosts-webfont.svg#hungry_ghostsregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'fedserviceexp';
    src: url('../_font/fedserviceexp-webfont.eot');
    src: url('../_font/fedserviceexp-webfont.eot?#iefix') format('embedded-opentype'),
         url('../_font/fedserviceexp-webfont.woff') format('woff'),
         url('../_font/fedserviceexp-webfont.ttf') format('truetype'),
         url('../_font/fedserviceexp-webfont.svg#babelsansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
}
root, header, section, footer, aside, nav, article, hgroup { 
    display: block;
}
html {
    font-size: 87%;
    line-height: 1.5;
    height: 100%;
}
a {
    text-decoration: none;
    color: #cccccc;
}
a:link, a:visited {
    
}
a:hover, a:active {
    
}
body{
    overflow: hidden;
    font-family: 'fedserviceexp';
}
div#clearer {
    clear: both;
}

/*
    ###### Header ######
*/



/*
    ###### Navi ######
*/



/*
    ###### footer ######
*/

/*
    ###### BasicCont ######
*/

div.wrapper {
    position: relative;
    left: 0;
    top: 0;
    text-align: center;
    width: 100%;
    min-height: 100vh; /* Mindesthöhe für moderne Browser */
    height: 100vh !important; /* Important Regel für moderne Browser */
    /* height: 100%;  Mindesthöhe für den IE */ 
    background: rgb(155,155,155); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(155,155,155,1) 0%, rgba(109,109,109,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(155,155,155,1)), color-stop(100%,rgba(109,109,109,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(155,155,155,1) 0%,rgba(109,109,109,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(155,155,155,1) 0%,rgba(109,109,109,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(155,155,155,1) 0%,rgba(109,109,109,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(155,155,155,1) 0%,rgba(109,109,109,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9b9b9b', endColorstr='#6d6d6d',GradientType=0 ); /* IE6-9 */
}
div.wrapper div#logo {
    position: absolute;
    text-align: center;
    right: 10%;
    top: 12%;
    width: 20%;
    max-width: 400px;
    margin-right: -100px;
    height: auto;
    z-index: 100;
}
div#logo img {
    position: absolute;
    display: block;
    width: 100%;
    max-width: 400px;
}
div#logo img.initialState {
    -moz-transform: scale(0);
    opacity: 0;
}
div#logo img.showFoot {
    -moz-animation-name: footAni;
    -moz-animation-duration: 1000ms;
    -moz-animation-iteration-count: 1;
}
div#logo img.showText {
    -moz-animation-name: txtAni;
    -moz-animation-duration: 1500ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-delay: 2s;
}
/*
    ###### Content ######
*/
div#content {
    width: 100%;
    min-height: 100%;
}
div#content p {
    font-family: 'hungry_ghostsregular';
    font-size: 700%;    
    line-height: 180px;
    padding: 11% 8%;
    color: #CCCCCC;
    text-shadow: 0 -1px 1px #666666, 0 1px 1px #FFFFFF;
}
div#content div.bgTxt {
    opacity: 0.5;
    position: relative;
    text-align: left;
    width: 50%;
    min-width: 480px;
}
.mainFooter {
    bottom: 0;
    left: 0;
    height: 50px;
    position: absolute;
    text-align: center;
    width: 100%;
}
.mainFooter p {
    color: #222222;
    text-shadow: 0px 1px 1px #666666;
}

/*
    ### smaller screens ###
*/

@media screen and (max-width: 1100px) {
    div.wrapper div#logo {
        top: 12%;
        margin-left: -170px;
        margin-top: 0px;
        max-width: 340px;
    }
}
@media screen and (max-width: 768px) {
    body {
        overflow-y: visible;        
    }
    div.wrapper {
        width: 100%;
        min-width: 768px;
    }
    div.wrapper div#logo {
        top:12%;
        width: 30%;
        margin-left: -130px;
        max-width:340px;
    }
    div#content p {
        text-align: center;
        font-size: 600%;
        line-height: 140px;
    }
    div#content div.bgTxt {
        width: 100%;
    }
    .mainFooter {
        width: 100%;
        border-top: 2px solid #666666;
        padding: 10px 0;
        background: rgb(125,126,125); /* Old browsers */
        background: -moz-linear-gradient(top,  rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* IE10+ */
        background: linear-gradient(to bottom,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
    }
}
@media screen and (max-width: 400px) {
    body {
        overflow-y: visible;        
    }
    div.wrapper {
        height: 100%;
        min-width: 400px;
    }
    div.wrapper div#logo {
        top:2%;
        margin-left: -100px;
        max-width:200px;
    }
    div#logo img {
        width:200px;
    }
    div#content p {
        position: relative;
        text-align: center;
        font-size: 400%;
        line-height: 60px;
        top: 20%;
        padding: 50% 0 10% 0;
        width: 400px;
    }
    .mainFooter {
        height: 70px;
        padding: 12px 0;
    }
}

/*
    ### animations ###
*/
@-moz-keyframes footAni {
    from {
        -moz-transform scale(0);
    } 25% {
        opacity: 0;
        -moz-transform: scale(0.1);
        animation-timing-function: ease-in;
    } 50% {
        -moz-transform: scale(1.1);
        animation-timing-function: ease-out;
    } 75% {
        -moz-transform: scale(0.9);
        animation-timing-function: ease-in;
    } to {
        -moz-transform: scale(1);
        opacity: 1;
        animation-timing-function: ease-out;
    }
}
@-moz-keyframes txtAni {
    from {
        -moz-transform: rotate(0deg);        
        -moz-transform: scale(0);
    } 25% {
        -moz-transform: rotate(0deg);        
        animation-timing-function: ease-in;
    } 75% {
        -moz-transform: rotate(0deg);        
        animation-timing-function: ease-out;
    } to {
        opacity: 1;
        -moz-transform: rotate(360deg);        
        animation-timing-function: ease-in;
    }
}