html {
    height:100%;
}
body {
    margin:0;
    padding:0;
    background-color: #000000;
    position: relative;
    height:100%;
}

.par {
    width:90%;
    max-width:1024px;
    overflow: hidden;
    position: absolute;
    background-color: #000;
}
.esq, .dir {
    width:50%;
    padding-top:50%;
    display: block;
    float: left;
    position: relative;
}
.par img, .par .separador {
    position: absolute;
    display: block;
}
.par .logo {
    top: 10%;
    left:50%;
    margin-left:-30%;
    width:60%;
}
.par .simbolo {
    top:50%;
    left:50%;
    margin-left:-15%;
    margin-top:-7%;
    width:30%;
}
.facebook {
    top:50%;
    left:50%;
    width:50%;
    margin-left:-25%;
    margin-top:-5%;
}
.barra {
    width:92%;
    left:0;
    bottom:10%;
    pointer-events: none;
}
.separador {
    left:50%;
    border-left:1px dotted #696969;
    top:0;
    bottom:0;
    z-index: 10;
}


body {
    perspective: 1000px;
}
.par .azul {
    display: none;
}
.par {
    opacity: 0;
}
.par.off {
    transform: rotateY(93deg);
    transition: transform 0.8s ease-out;
}
.par.on {
    opacity: 1;
    transform: none;
}
.par.pisca .azul {
    display: block;
}
.par.pisca .normal {
    display: none;
}
.par.pisca .dir, .dir:hover {
    background-color: #FFF;
}
.dir:hover .azul {
    display: block;
}
.par.dirhover .azul {
    display: block;
}