@import url(http://fonts.googleapis.com/css?family=Chango);
@import url(http://fonts.googleapis.com/css?family=Lato:100);

/*PRELOADER ITEMS GO HERE*/

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    /*display: table;*/
}


body{
  background:#fff;/*url(../img/003.jpg) no-repeat center;
  -webkit-animation: bodyPreloader 5s ease-in;
  -moz-animation: bodyPreloader 5s ease-in;
  -o-animation: bodyPreloader 5s ease-in;
   animation: bodyPreloader 5s ease-in;*/

}

small {
font-size:80% !important;font-style:italic;color:#6699ee /*blau*/;}

.cont {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.content {
    background-color: rgba(255,255,255,0.3);
    display: inline-block;
    text-align: center;
    width:90%;
    height:700px;
}



.scene {
   
   /* Positioning and dimensions */
   display: block;
   position: relative;
    margin:auto;
   width: 650px;
   height: 692px;
   overflow: hidden;
   background:url(../img/002.png) no-repeat center;}
   


.opening1 img{
    position: relative;
    /*top: 150px;
    top:50%;*/
    z-index: 200;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    /*opacity: 0;*/
webkit-animation: emblemPreload 15s 1 ease;
-moz-animation: emblemPreload 15s 1 ease;
-o-animation: emblemPreload 15s 1 ease;
animation: emblemPreload 15s 1 ease

   
}

.opening2{
    position: relative;
    /*top: 150px;
    top:50%;*/
    z-index: 21;
    display: block;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    width:650px;
    height:692px;
    /*background:url(img/002.png) no-repeat;*/
  -webkit-animation: emblemPreload2 5s ease-in;
  -moz-animation: emblemPreload2 5s ease-in;
  -o-animation: emblemPreload2 5s ease-in;
 animation: emblemPreload2 5s ease-in;
   
}

/*WEBSITE CSS ELEMENTS GO HERE*/
#description{
  z-index: 10;
  margin: auto;
 /* width: 120px;
  height: 40px;
  font-size: 30px;
  text-align: center;
  text-indent: 10px;*/
  -webkit-animation: content 4s ease-in;
   -moz-animation: content 4s ease-in;
   -o-animation: content 4s ease-in;
   animation: content 4s ease-in;
  
}
a {color:white;text-decoration:none;}
a:hover {color:rgb(248,246,205);}

.link1 {color:rgb(202,131,54);text-decoration:none;}
.link1:hover {color:#333;text-decoration:none;}


/*ANIMATION FOR YOUR EMBLEM (WHETHER TEXT OR IMAGE)*/

 @-webkit-keyframes emblemPreload {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes emblemPreload {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-o-keyframes emblemPreload {
from { -o-transform: rotate(0deg); }
to { -o-transform: rotate(360deg); }
}
/*@-webkit-keyframes emblemPreload{
  0%{opacity: 1;}
  50%{opacity: 0;}
  100%{opacity: 0;}
}

@-moz-keyframes emblemPreload{
  0%{opacity: 1;}
  50%{opacity: 0;}
  100%{opacity: 0;}
}
@-o-keyframes emblemPreload{
  0%{opacity: 1;}
  50%{opacity: 0;}
  100%{opacity: 0;}
}
@keyframes emblemPreload{
  0%{opacity: 1;}
  50%{opacity: 0;}
  100%{opacity: 0;}
}*/
 


@-webkit-keyframes emblemPreload2{
  0%{opacity: 0;}
  50%{opacity: 0;}
  100%{opacity: 1;}
}

@-moz-keyframes emblemPreload2{
  0%{opacity: 0;}
  50%{opacity: 0;}
  100%{opacity: 1;}
}
@-o-keyframes emblemPreload2{
  0%{opacity: 0;}
  50%{opacity: 0;}
  100%{opacity: 1;}
}
@keyframes emblemPreload2{
  0%{opacity: 0;}
  50%{opacity: 0;}
  100%{opacity: 1;}
}

/*ANIMATION FOR HIDING CONTENT (WHICH WILL THEN APPEAR LATER)*/
@-webkit-keyframes content{
  0%   { opacity: 0; }
}
@-moz-keyframes content {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes content {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes content {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/*BODY ANIMATION (THE ANIMATION THAT MADE THE BODY ELEMENT BLACK)*/
@-webkit-keyframes bodyPreloader{
  0%   { opacity: 0; }
 
}
@-moz-keyframes bodyPreloader{
  0%   { opacity: 0; }
  100% { opacity: 1; }
 
}
@-o-keyframes bodyPreloader{
  0%   { opacity: 0; }
  100% { opacity: 1; }
 
}
@keyframes bodyPreloader{
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/*desktop*/
@media (min-width: 768px) and (max-width: 991px) {
    .opening2{
    position: relative;
    /*top: 150px;
    top:50%;*/
    z-index: 21;
    display: block;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    width:650px;
    height:692px;
    /*background:url(img/002.png) no-repeat;*/
  -webkit-animation: emblemPreload2 5s ease-in;
  -moz-animation: emblemPreload2 5s ease-in;
  -o-animation: emblemPreload2 5s ease-in;
 animation: emblemPreload2 5s ease-in;
   
}
    
    }





/*smart landscape*/
@media (max-width: 768px) {
.content {
    background-color: rgba(255,255,255,0.3);
    display: inline-block;
    text-align: center;
    width:100%;
    height:auto;
}



.scene {
   
   /* Positioning and dimensions */
   display: block;
   position: relative;
   top:0;
    margin:auto;
   width: 250px;
   height: 250px;
   overflow: hidden;
   background:url(../img/002-170.png) no-repeat center;}

.opening1 img
{width:90%
}

.opening2
{width:70%
}
}