/* Mobil Device  iframe */
@media only screen and (min-width: 320px) and (max-width: 480px) {
    iframe {
        width: 100%;
        height: auto;
    }
    .blog{
        padding: 20px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    iframe {
        width: 100%;
        height: 350px;
    }
}

@media only screen and (max-width : 620px) {
    iframe {
        width: 100%;
        height: 350px;
    }
    .blog{
        padding: 20px;
    }
}

@media only screen and (max-width : 680px) and (orientation:landscape) {
    iframe {
        width: 100%;
        height: 350px;
    }
}

@media only screen and (max-width: 770px){
    iframe {
        width: 100%;
        height: 350px;
    }
    .blog{
        padding: 20px;
    }
}

/* Estilos cambio de imagen */
.flip3D{width:32%; height:400px; margin:7px; float:left; }
.flip3D > .front{
    position:absolute;
    -webkit-transform: perspective( 600px ) rotateY( 0deg );
    transform: perspective( 600px ) rotateY( 0deg );
    width:100%; height:400px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: -webkit-transform .5s linear 0s;
    transition: transform .5s linear 0s;
}
.flip3D > .back{
    position:absolute;
    -webkit-transform: perspective( 600px ) rotateY( 180deg );
    transform: perspective( 600px ) rotateY( 180deg );
    width:100%; height:400px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: -webkit-transform .5s linear 0s;
    transition: transform .5s linear 0s;
}
.flip3D:hover > .front{
    -webkit-transform: perspective( 600px ) rotateY( -180deg );
    transform: perspective( 600px ) rotateY( -180deg );
}
.flip3D:hover > .back{
    -webkit-transform: perspective( 600px ) rotateY( 0deg );
    transform: perspective( 600px ) rotateY( 0deg );
}