/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Dec 15, 2015, 12:22:50 PM
    Author     : Emko
*/

@font-face {
    font-family: 'MedulaOne';
    src: url('MedulaOne-Regular.ttf');
}

#slider{
    position:fixed;
    padding:0;
    margin:0;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: #f0eff2;
    background: url(../img/waiting.gif) no-repeat center center fixed; 
}

#slider .screen{
    position: absolute;
    
    width: 100%;
    height: 100%;
    background: no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    opacity: 0;
    -webkit-transition: opacity 2s ease-in-out;
    -moz-transition: opacity 2s ease-in-out;
    -o-transition: opacity 2s ease-in-out;
    -ms-transition: opacity 2s ease-in-out;
    transition: opacity 2s ease-in-out;
}

#slider .screen.active{
    opacity: 1;
}

#slider #maintext{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: table;
    text-align: center; 
    
    opacity: 0;
    -webkit-transition: opacity 1.5s ease-in-out;
    -moz-transition: opacity 1.5s ease-in-out;
    -o-transition: opacity 1.5s ease-in-out;
    -ms-transition: opacity 1.5s ease-in-out;
    transition: opacity 1.5s ease-in-out;
}

#slider #maintext.active{
    opacity: 1;
}

#slider #maintext > div{
    display: table-cell;
    vertical-align: middle;
}

#slider #maintext .bigText{
    font-family: "MedulaOne";
    font-size: 6em;
    color: #f1f1f1;
    text-shadow: 2px 2px #000000;
}

#slider #maintext .smallText{
    font-family: "MedulaOne";
    font-size: 2em;
    color: #f1f1f1;
    text-shadow: 2px 2px #000000;
}

#slider .text{
    position: absolute;
    font-family: "MedulaOne";
    font-size: 10em;
    color: #f1f1f1;
    text-shadow: 2px 2px #000000;
}

@media only screen and (max-width: 1000px) {

   #slider .text { font-size: 5em; }
   #slider #maintext .bigText { font-size: 3em; }
   #slider #maintext .smallText { font-size: 1em; }

}

@media only screen and (max-width: 500px) {

    #slider .text { font-size: 2em; }
    
}