/************************************************************************************
ancho de pagina menor que 1080px
*************************************************************************************/
        .isResizable {
            background: rgba(255, 0, 0, 0.2);
            font-size: 2em;
            border: 1px solid black;
            overflow: hidden;
            resize: both;
            width: 1300px;
            height: auto;
            min-width: 600px;
            min-height: auto;
            max-width: 1300px;
     	     max-height: auto;
	}
#body{
	width:1300px; /* ancho de pagina */
	margin:0 auto; 
}

#wrapper{ 
	width:1300px; /* ancho de pagina */
	margin:0 auto; 
}

@media screen and (max-width: 1300px) {
        /* color de borde rojo solo de ejemplo*/

        /* envoltura principal */
        #page_wrap {
                width: 100%;
        }
        /* contenido de la izquierda */
        #main_content_right_side {
                width: 100%;
                border:1px solid white;
        }

        /* contenido de la derecha */
        #right_sidebar { 
                width: 100%;
                border:1px solid white;
        }
        
        /* incrustar videos */
        .video embed,
        .video object,
        .video iframe {
                width: 100%;
                height: auto;
        }
}
/************************************************************************************
ancho de pagina menor que 650px
*************************************************************************************/
@media screen and (max-width: 650px) {
        /* borde de color verde solo de ejemplo*/
        
        /* cabecera */
        #header {
                height: auto; /* alto automatica para menu */
        }
        /* menu navegacion */
        #main-nav {
                position: static; /* posicion estatica */
        }
        /* la idea es que se puede aplicar estilo a otros elementos segun tamaño */
        
        /* contenido de izquierda */
        #main_content_right_side { 
                width: auto;
                float: none;
                margin: 20px 0;
                border:1px solid green;
        }
        
        /* contenido de derecha */
        #right_sidebar {
                width: 100%;
                margin: 0;
                float: none;
                border:1px solid green;
        }
        
        /* incrustar videos */
        .video embed,
        .video object,
        .video iframe {
                min-height: 250px;
        }
}

/************************************************************************************
ancho pagina menor que 560px
*************************************************************************************/
@media screen and (max-width: 560px) {
        
        /* disable webkit text size adjust (for iPhone) */
        html {
                -webkit-text-size-adjust: none;
        }
        
        /* menu navegacion */
        #main-nav a { /* en este caso el tamaño del texto */
                font-size: 90%;
                padding: 10px 8px;
        }
        
        /* contenido de izquierda */
        #main_content_right_side { 
                border:2px solid yellow;
        }
        
        /* contenido de derecha */
        #right_sidebar {
                border:2px solid yellow;
        }
        
        /* se puede aplicar otros estilos para no mostrar ciertos elementos 
        en pantallas de tamaño pequeño */
}