@charset "utf-8";
/* CSS Document */
/*
480px y 320px: Estas resoluciones son comunes en dispositivos móviles, especialmente en teléfonos más antiguos o con pantallas más pequeñas.
768px: Esta es la resolución típica para tablets en modo paisaje y dispositivos más pequeños. Es importante tener un diseño responsive que se vea bien en esta resolución.
1024px: Esta resolución es importante ya que es la utilizada en muchas tablets y dispositivos más antiguos. Asegurarse de que tu diseño se vea bien en esta resolución es crucial para una experiencia de usuario óptima.
1280px: Esta es una resolución común para pantallas de computadoras portátiles y algunos monitores de escritorio más antiguos.
1440px: Esta es una resolución comúnmente utilizada para monitores de computadora de escritorio estándar.
1600px: Aunque menos común, algunas pantallas más grandes o monitores de alta resolución pueden tener una resolución de 1600px de ancho.
1920px: Esta es una resolución muy común para monitores de escritorio y portátiles de tamaño estándar. Es la resolución "full HD".
2560px y superiores: Monitores de alta gama, monitores 2K y 4K, y pantallas de alta resolución pueden tener resoluciones de 2560px o incluso 3840px de ancho.
*/
@media screen and (max-width:2560px){
	
}

@media screen and (max-width:1920px){
	
}

@media screen and (max-width:1600px){
	
}

@media screen and (max-width:1440px){
	/*AJUSTE AL MENUSYS*/
	.mainmenu{
		width: 100%;
		padding: 0px;
		height: 100%;
		margin: 0px;
		position: relative;
		left: 0%; /*POSICION DEL MENU DENTRO DE LA TABLA*/
		top: 25%;
		right: 0px;
		bottom: 0px;
		z-index: 1;
		box-sizing: border-box;
	}
	/*AJUSTE AL MENUSYS*/
	
	#content1 #boxContent1{
		position: absolute;
		height: 300px;
		width: 50%;
		left: 30%;
		top: 23%;
		right: 0px;
		bottom: 0px;
		box-sizing:border-box;
		display:block;
		overflow: auto;
	}
	
	.content2 .contentBox2 {
		position: absolute;
		height: 550px;
		width: 40%;
		left: 77%;
		top: 3%;
		right: 0px;
		bottom: 0px;
		box-sizing: border-box;
		display: block;
		overflow: auto;
	}
	
	.content3 .contentBox3 {
		position: absolute;
		height: 300px;
		width: 40%;
		left: 35%;
		top: 23%;
		right: 0px;
		bottom: 0px;
		box-sizing:border-box;
		display:block;
		overflow: auto;
	}
}


@media screen and (max-width:1280px){
	
}

@media screen and (max-width:1024px){
	
}

@media screen and (max-width:950px){
	.tableHiden{
		display:none;
	}
	
	/*MUEVE EL CONTENIDO DEL BODY*/
	.content-after-table {
    	margin-top: 200px; /* Ajusta este valor según sea necesario */
  	}
	
	#content1 img{
		width: 100%;
		height:600px;
		position: absolute;
		left: 0%;
		top: 0%;
		right: 0px;
		bottom: 0px;
		box-sizing:border-box;
		display:block;
		box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
	}
	
	#content1 #boxContent1{
		position: absolute;
		height: 400px;
		width: 90%;
		left: 50%;
		top: 10%;
		right: 0px;
		bottom: 0px;
		box-sizing:border-box;
		display:block;
		overflow: auto;
	}
	
	.content2 .contentBox2 {
		position: absolute;
		height: 400px;
		width: 90%;
		left: 50%;
		top: 10%;
		right: 0px;
		bottom: 0px;
		box-sizing: border-box;
		display: block;
		overflow: auto;
	}
	
	.content3 img{
		position: absolute;
		height: 600px;
		width: 100%;
		left: 0px;
		top: 0px;
		right: 0px;
		bottom: 0px;
		box-sizing:border-box;
		display:block;
		box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
	}
	
	.content3 .contentBox3 {
		position: absolute;
		height: 400px;
		width: 90%;
		left: 50%;
		top: 10%;
		right: 0px;
		bottom: 0px;
		box-sizing:border-box;
		display:block;
		overflow: auto;
	}
}

@media screen and (max-width:800px){
	.content2 .contentBox2 {
		position: absolute;
		height: 500px;
		width: 80%;
		left: 50%;
		top: 5%;
		right: 0px;
		bottom: 0px;
		box-sizing: border-box;
		display: block;
		overflow: auto;
	}
}

@media screen and (max-width:768px){
    body{
        overflow-x:hidden;
    }
	
	.tableHiden{
		display:none;
	}

    table{
        padding: 0px;
        height: auto;
        width: 100%;
        border: thin none #000;
        box-sizing: border-box;
        display: inline-table;
        margin: 0px;
    }

    tr{
        text-align: center;
        margin: 0px;
        padding: 0px;
        height: auto;
        width: 100%;
        border: thin none #000;
        box-sizing:border-box;
        display:block;
    }

    td{
        text-align: center;
        padding: 0px;
        height: auto;
        width: 100%;
        border: thin none #000;
        box-sizing: border-box;
        display: block;
        margin-top: 10px;
        margin-right: 0px;
        margin-bottom: 10px;
        margin-left: 0px;
    }
	
	.mainmenu{
		display:none;	
	}
	
	.span4{
		font-family: Verdana, Geneva, sans-serif;
		font-size: 14px;
		font-style: normal;
		line-height: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		color: #333;
		text-decoration: none;
		text-align: justify;
		margin-top: 0px;
		margin-right: 10%;
		margin-bottom: 0px;
		margin-left: 10%;
	}
	
	#content1 img{
		width: 100%;
		height:600px;
		position: absolute;
		left: 0%;
		top: 0%;
		right: 0px;
		bottom: 0px;
		box-sizing:border-box;
		display:block;
		box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
	}
	
	#content1 #boxContent1{
		position: absolute;
		height: 400px;
		width: 100%;
		left: 50%;
		top: 10%;
		right: 0px;
		bottom: 0px;
		box-sizing:border-box;
		display:block;
		overflow: auto;
	}
	
	.content2 .contentBox2 {
		position: absolute;
		height: auto;
		width: 100%;
		left: 50%;
		top: 1%;
		right: 0px;
		bottom: 0px;
		box-sizing: border-box;
		display: block;
		overflow: auto;
	}
	
	.content3 img{
		position: absolute;
		height: 600px;
		width: 100%;
		left: 0px;
		top: 0px;
		right: 0px;
		bottom: 0px;
		box-sizing:border-box;
		display:block;
		box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
	}
	
	.content3 .contentBox3 {
		position: absolute;
		height: 400px;
		width: 100%;
		left: 50%;
		top: 10%;
		right: 0px;
		bottom: 0px;
		box-sizing:border-box;
		display:block;
		overflow: auto;
	}
}

@media screen and (max-width:480px){
	
}