@media only screen and (max-device-width: 480px) {
.body
{
zoom: 250%;
}
}

.body
{
/*zoom: 250%;*/
margin: 0px;
margin-top: 10%;
background: #008080;
/*background: url(/emergence_blurred.jpg);*/
background-size:cover;
background-position:center center;
background-attachment:fixed;
background-repeat:no-repeat;
}

.conteinerz
{
width:364px;
height:auto;
margin:auto;
}

.conteiner0
{
/*background: #333333;*/
background: rgba(51, 51, 51, 0.95);
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
padding: 0;
width: 100%;
height: 75px;
margin-top: 0px;
margin-left: 0;
margin-right: 0;
font-family: Arial;
font-size: 22px;
text-align: left;
padding-left: 75px;
line-height: 75px;
color: #fafafa;
/*text-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
animation: loadingin ease 2s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards;
animation-delay: 1s;
-webkit-animation: loadingin ease 2s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards;
-webkit-animation-delay: 1s;
-moz-animation: loadingin ease 2s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode:forwards;
-moz-animation-delay: 1s;
-ms-animation: loadingin ease 2s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode:forwards;
-ms-animation-delay: 1s;
-o-animation: loadingin ease 2s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode:forwards;
-o-animation-delay: 1s;
opacity: 0.0}


.conteiner
{background: #e9eaea;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
border-radius: 2px;
padding: 0px;
width: 180px;
height: 350px;
margin-top: 25px;
float:left;
margin-left: auto;
margin-right: auto;
animation: loadingin ease 2s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards;
animation-delay: 1s;
-webkit-animation: loadingin ease 2s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards;
-webkit-animation-delay: 1s;
-moz-animation: loadingin ease 2s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode:forwards;
-moz-animation-delay: 1s;
-ms-animation: loadingin ease 2s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode:forwards;
-ms-animation-delay: 1s;
-o-animation: loadingin ease 2s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode:forwards;
-o-animation-delay: 1s;
opacity: 0.0}


.conteiner2
{background: #e9eaea;
/*display:none;*/
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
border-radius: 2px;
padding: 0px;
width: 180px;
height: 400px;
margin-top: 0px;
float:left;
margin-left: 4px;
margin-right: auto;
animation: loadingin ease 2s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards;
animation-delay: 0.7s;
-webkit-animation: loadingin ease 2s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards;
-webkit-animation-delay: 0.7s;
-moz-animation: loadingin ease 2s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode:forwards;
-moz-animation-delay: 0.7s;
-ms-animation: loadingin ease 2s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode:forwards;
-ms-animation-delay: 0.7s;
-o-animation: loadingin ease 2s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode:forwards;
-o-animation-delay: 0.7s;
opacity: 0.0}


.conteiner3
{background: #e9eaea;
display:none;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
border-radius: 2px;
padding: 10px;
width: 640px;
height: 25px;
margin-top: 4px;
margin-left: auto;
margin-right: auto;
animation: loadingin ease 1.5s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards;
animation-delay: 0.7s;
-webkit-animation: loadingin ease 1.5s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards;
-webkit-animation-delay: 0.7s;
-moz-animation: loadingin ease 1.5s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode:forwards;
-moz-animation-delay: 0.7s;
-ms-animation: loadingin ease 1.5s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode:forwards;
-ms-animation-delay: 0.7s;
-o-animation: loadingin ease 1.5s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode:forwards;
-o-animation-delay: 0.7s;
opacity: 0.0}


.title
{display: none;
font-family: Arial; 
font-size: 18px;
/*font-weight: lighter;*/
letter-spacing: 1px;
text-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
background: #607D8B;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
border-radius: 2px;
color: #f2f2f2;
height: 45px;
line-height: 45px;
cursor: default;
margin-top: 0px;
text-align: center;
animation: loadingin ease 0.5s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards;
animation-delay: 1s;
-webkit-animation: loadingin ease 0.5s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards;
-webkit-animation-delay: 1s;
-moz-animation: loadingin ease 0.5s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode:forwards;
-moz-animation-delay: 1s;
-ms-animation: loadingin ease 0.5s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode:forwards;
-ms-animation-delay: 1s;
-o-animation: loadingin ease 0.5s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode:forwards;
-o-animation-delay: 1s;
-webkit-animation-delay: 1s}

.avatar3
{background-image: url('http://xxfedericoxx.altervista.org/ot/av/shi5-2014.png');
width: 180px; 
height: 350px;
-webkit-animation: minimout ease 0.5s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards;  
animation: minimout ease 0.1s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards;
-moz-animation: minimout ease 0.5s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode:forwards;
-ms-animation: minimout ease 0.5s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode:forwards;
-o-animation: minimout ease 0.5s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode:forwards;}

.avatar3:hover
{-webkit-animation: minimin ease 0.1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards;  
animation: minimin ease 0.1s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards;
-moz-animation: minimin ease 0.1s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode:forwards;
-ms-animation: minimin ease 0.1s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode:forwards;
-o-animation: minimin ease 0.1s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode:forwards;}


.minim
{font-family: Helvetica; 
font-size: 18px; 
/*font-weight: lighter;*/
text-shadow: 0 2px 1px rgba(255,255,255,0.9);
letter-spacing: 1px;
text-decoration: none;
text-transform: UPPERCASE;
line-height: 45px;
display: block;
margin-top: 0px;
width: 100%;
height: 45px;
text-align: center;
/*
background-color: #72608b;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
*/
border-radius: 2px;
border-top: 1px solid #f3f3f3;
border-bottom: 1px solid #c5c8c8;
color:#4d4d4d;
float: right;
-webkit-animation: minimout ease 0.1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards;  
animation: minimout ease 0.1s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards;
-moz-animation: minimout ease 0.1s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode:forwards;
-ms-animation: minimout ease 0.1s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode:forwards;
-o-animation: minimout ease 0.1s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode:forwards;}



.minim:hover
{background: #efefef;

-webkit-animation: minimin ease 0.1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards;  
animation: minimin ease 0.1s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards;
-moz-animation: minimin ease 0.1s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode:forwards;
-ms-animation: minimin ease 0.1s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode:forwards;
-o-animation: minimin ease 0.1s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode:forwards;

}


@keyframes minimin {
0% {transform: scale(1);}
100% {transform: scale(0.95);}
}
@-webkit-keyframes minimin {
0% {-webkit-transform: scale(1);}
100% {-webkit-transform: scale(0.95);}
}
@-moz-keyframes minimin {
0% {-moz-transform: scale(1);}
100% {-moz-transform: scale(0.95);}
}
@-ms-keyframes minimin {
0% {-ms-transform: scale(1);}
100% {-ms-transform: scale(0.95);}
}
@-o-keyframes minimin {
0% {-o-transform: scale(1);}
100% {-o-transform: scale(0.95);}
}



@keyframes minimout {
0% {transform: scale(0.95);}
100% {transform: scale(1);}
}
@-webkit-keyframes minimout {
0% {-webkit-transform: scale(0.95);}
100% {-webkit-transform: scale(1);}
}
@-moz-keyframes minimout {
0% {-moz-transform: scale(0.95);}
100% {-moz-transform: scale(1);}
}
@-ms-keyframes minimout {
0% {-ms-transform: scale(0.95);}
100% {-ms-transform: scale(1);}
}
@-o-keyframes minimout {
0% {-o-transform: scale(0.95);}
100% {-o-transform: scale(1);}
}



@keyframes titlein {
0% {transform: scale(1.00);}
20% {transform: scale(0.9);}
80% {transform: scale(1.05);}
100% {transform: scale(1.00);}
}
@-webkit-keyframes titlein {
0% {-webkit-transform: scale(1.00);}
20% {-webkit-transform: scale(0.9);}
80% {-webkit-transform: scale(1.05);}
100% {-webkit-transform: scale(1.00);}
}
@-moz-keyframes titlein {
0% {-moz-transform: scale(1.00);}
20% {-moz-transform: scale(0.9);}
80% {-moz-transform: scale(1.05);}
100% {-moz-transform: scale(1.00);}
}
@-ms-keyframes titlein {
0% {-ms-transform: scale(1.00);}
20% {-ms-transform: scale(0.9);}
80% {-ms-transform: scale(1.05);}
100% {-ms-transform: scale(1.00);}
}
@-o-keyframes titlein {
0% {-o-transform: scale(1.00);}
20% {-o-transform: scale(0.9);}
80% {-o-transform: scale(1.05);}
100% {-o-transform: scale(1.00);}
}



@keyframes loadingin {
0% {transform: scale(1.10);
    opacity:0;}
100% {transform: scale(1.00);
    opacity:100;}}
@-webkit-keyframes loadingin {
0% {-webkit-transform: scale(1.10);
    opacity:0;}
100% {-webkit-transform: scale(1.00);
    opacity:100;}}
@-moz-keyframes loadingin {
0% {-moz-transform: scale(1.10);
    opacity:0;}
100% {-moz-transform: scale(1.00);
    opacity:100;}}
@-ms-keyframes loadingin {
0% {-ms-transform: scale(1.10);
    opacity:0;}
100% {-ms-transform: scale(1.00);
    opacity:100;}}
@-o-keyframes loadingin {
0% {-o-transform: scale(1.10);
    opacity:0;}
100% {-o-transform: scale(1.00);