@font-face {
    font-family: 'worldc'; 
    src: url(res/Worldchalk\ Regular.ttf);
}

@font-face {
    font-family: 'firma'; 
    src: url(res/Autography.otf);
}

.custom-font{
    font-family: 'worldc';
    font-size: 26px;
    color: rgb(13, 13, 129);
}

.custom-font2{
    font-family: 'firma';
    font-size: 26px;
}

#postal{
    margin-top: 20px;
    margin: 0 auto;
    height:540px;
    width:990px;
    border-style: solid;
    border-width: 1px;
    background-image: url(img/fondo.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    border-radius: 5px;
    box-shadow: 10px 10px 25px;
    transition: 800ms;
    cursor: pointer;
}
#postal:hover{
transform: rotate(1deg);
transition: 800ms;
}

#postal:active{
    margin-top: 60px;
    margin: 60 auto;
    height:550px;
    width:990px;
    border-style: solid;
    border-width: 1px;
    background-image: url(img/backside.jpg);
    background-color: rgb(247, 240, 232);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    border-radius: 5px;
    box-shadow: 10px 10px 80px;
    transform: rotateY(180deg);
    transition: 800ms;
}

#cuadro-izquierdo p{
    margin-top: 10px;
}
#cuadro-izquierdo h3{
    font-family: firma;
    font-size: 40px;
    margin:0px;
    color: rgb(12, 12, 129);
}

#cuadro-izquierdo{
    margin-top: 25px;
    padding-left: 30px;
    padding-right: 30px;
    float:left;
    height:440px;
    width:40%;
    border-right: #a08676;
    border-right-width: 2px;
    border-right-style: solid;
    opacity: 1;
}

#contenedor:active{
    opacity: 1;
    transition: 600ms;
}

#contenedor{
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: rotateY(180deg);
}

#sello{
    background-image: url(img/sello.png);
    background-size: 100%;
    height:106px;
    width:90px;
    margin-right: 20px;
    margin-top: 20px;
    float:right;
    transform: rotate(8deg);
}

#cuadro-derecho{
    padding-left: 20px;
    margin-top: 70px;
    float:right;
    font-size: 22px;   
}

#to-from{
    font-family: firma;
    float:right;
    color:rgb(20, 0, 109);
    margin-top: 5px;
    margin-right: 30px;
    transform: rotate(-12deg);
    font-size: 42px;
}