/* *******************************************************************************
UNIVERSIDAD SURCOLOMBIANA
Centro de Tecnologías de Información y Comunicaciones (CTIC)
2017
******************************************************************************** */

/******************************************************************************************************************
ANCHOS
/******************************************************************************************************************/

@media all and (max-width: 1300px){
	#cuerpo_4 #medico{
    	margin-left: -20px;
	}
	#cuerpo_4 .salud .texto {
		margin-right: 40px;
	}

	#cuerpo_8 .back{
		width: 200px;
	}
	#cuerpo_8 .back.deporte{
		left: 200px;
	}
	#cuerpo_8 .back.biblioteca{
		right: 200px;
	}
	#cuerpo_8 .back h2{
		width: 180px;
		font-size: 100%;
	}
	#cuerpo_8 .back h2 span{
		width: 180px;
	}
}

/******************************************************************************************************************/

@media all and (max-width: 1100px){
	.centro{
		padding-left: 20px;
		padding-right: 20px;
		width: 100%;
		max-width: inherit;
	
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	#cuerpo_3 .logo {
		left: 6%;
	}

	#cuerpo_7 .derecho .con-justicia{
		margin-left: -25px;
	}

	#cuerpo_8 .back{
		width: 140px;
	}
	#cuerpo_8 .back.deporte{
		left: 140px;
	}
	#cuerpo_8 .back.biblioteca{
		right: 140px;
	}
	#cuerpo_8 .back h2{
		margin-left: 5px;
		width: 130px;
		font-size: 70%;
	}
	#cuerpo_8 .back h2 span{
		width: 130px;
	}
}

/******************************************************************************************************************/

@media all and (max-width: 1000px){
/*
	.header, #cuerpo_2, #cuerpo_3, #cuerpo_4, #cuerpo_5, #cuerpo_6, #cuerpo_7{
		display: none;
	}
	*/
	.header figure{ margin-top: -50px; }

	#cuerpo_6 .texto{
	    top: 60px;
	}

	#cuerpo_7 .texto{
		top: 74% !important;
	}
	
	#cuerpo_7 .texto > div{
		margin: 0 10px !important;
		text-shadow: 0px 0px 6px #000, 0px 0px 6px #000;
	}
}

/******************************************************************************************************************/

@media all and (max-width: 900px){
	#cuerpo_3 .logo{
		left: 20px;
		padding-top: 50px;
		width: 450px;
	}
	
	#cuerpo_4 .salud .texto{ margin-right: 10px; }	

	#cuerpo_6 .texto{ top: 40px; }
	#cuerpo_6 .texto > div{ margin: 0 15px !important; }
}

/******************************************************************************************************************/

@media all and (max-width: 850px){
	.header .conte_saludo{
		top: inherit;
		bottom: 347px;
		height: 347px;
	}
	.conte_saludo img{
		top: inherit;
		bottom: 0;
		width: 400px;
		height: 347px;
	}

	#cuerpo_8 .back{
		width: 100px;
	}
	#cuerpo_8 .back.deporte{
		left: 100px;
	}
	#cuerpo_8 .back.biblioteca{
		right: 100px;
	}
	#cuerpo_8 .back h2{
		-ms-transform:rotate(-90deg);
		-webkit-transform:rotate(-90deg);
		transform: rotate(-90deg);	
	}
	#cuerpo_8 .back h2 span{
		width: 130px;
		text-shadow: 0px 0px 6px #000, 0px 0px 6px #000;
	}

	#cuerpo_8 .back{
		width: 140px;
	}
	#cuerpo_8 .back.deporte{
		left: 140px;
	}
	#cuerpo_8 .back.biblioteca{
		right: 140px;
	}
	#cuerpo_8 .back h2{
		margin-left: 5px;
		width: 130px;
		font-size: 70%;
	}
	#cuerpo_8 .back h2 span{
		width: 130px;
	}

}

/******************************************************************************************************************/

@media all and (max-width: 750px){
	.conte_saludo{ display: none; }
}

/******************************************************************************************************************/

@media all and (max-width: 700px){
	#cuerpo_3 .logo{
		left: 20px;
		padding-top: 10px;
		width: 580px;
	}

	#cuerpo_4 .salud .texto{
		top: 52%;
		text-shadow: 0px 0px 4px #FFF, 0px 0px 4px #FFF;
	}

	#cuerpo_8 .back{ width: 50px; }
	#cuerpo_8 .back.deporte{ left: 50px; }
	#cuerpo_8 .back.biblioteca{ right: 50px; }
	#cuerpo_8 .back h2{ display: none; }
}

/******************************************************************************************************************/

@media all and (max-width: 600px){
	.contenedor h2, .texto div p:before{ display: none !important; }
	
	.texto p{ font-weight: 700; }

	#cuerpo_2 .texto{
		margin-left: 1%;
		width: 98%;
	}

	#cuerpo_3 .logo{
		left: 2%;
		width: 96%;
		text-align: center;
	}
	#cuerpo_3 .mapa{ top: 50px; }
}


/******************************************************************************************************************
ALTOS
/******************************************************************************************************************/

@media all and (min-height: 800px){
	#cuerpo_7 .back{
		top: 120px;
	}
}

@media all and (min-height: 700px){
	#cuerpo_8 .back h2{
		position: absolute;
		bottom: 52%;
	}
}

@media all and (max-height: 610px){
	#cuerpo_2 .texto{
		top: inherit;
		bottom: 10px;
	}

	#cuerpo_6 .texto{ top: 30px; }
	
	#cuerpo_7 .economia #grafico{
		margin-top: -140px;
	}
	#cuerpo_7 .economia #grafico, #cuerpo_7 .economia .barras{
		width: 280px;
	}
	#cuerpo_7 .economia .barras, #cuerpo_7 .economia #grafico div{
		height: 281px;
	}
	#cuerpo_7 .economia .texto > div{
		margin-left: 260px;
	}
}

@media all and (max-height: 600px){
	#cuerpo_2 .texto{
		top: 30px;
		bottom: inherit;
		color: #FFF;
	}
}

/******************************************************************************************************************/

@media all and (max-height: 610px){
	.contenedor h2, .texto div p:before{ display: none !important; }
	#cuerpo_6 .texto div p, #cuerpo_7 .texto div p{ width: 100%; text-align: center; }
}

/******************************************************************************************************************/

@media all and (max-height: 500px){
	#cuerpo_2 .texto{
		top: 20px;
		bottom: inherit;
		color: #FFF;
	}

	#cuerpo_3 .geo{ display: none; }

	#cuerpo_4 .salud .texto {
		top: 30%;
		text-shadow: none;
	}

	#cuerpo_4 .educacion .texto{ top: 10px; }
	
	#cuerpo_6 .tablet, #cuerpo_6 .tablet2{ bottom: -30px; }
	#cuerpo_6 .tablet2{ bottom: 141px; }
	#cuerpo_6 .slider{ bottom: 117px; }

	#cuerpo_7 .texto{ top: 10px !important; }
	#cuerpo_7 .economia .diag{ top: -40px; }
	#cuerpo_7 .economia .diag.dw{ top: 50px; }
}

/******************************************************************************************************************
CEL
/******************************************************************************************************************/

@media all and (max-width: 500px) and (max-height: 330px){
	.header h1{
		margin-top: -20px;
		font-size: 200%;
	}
	#cuerpo_2 .logo, #cuerpo_3 .con-usquito, #cuerpo_3 .geo, #cuerpo_4 #usquito-arriba, #cuerpo_8 .back{ display: none; }
	#cuerpo_2 .texto {
		top: 20px;
		bottom: inherit;
	}
	#cuerpo_2 .entrada{ top: 200px; }

	#cuerpo_3 .logo {
		font-weight: 700;
		text-shadow: 0px 0px 4px #FFF, 0px 0px 4px #FFF;
	}
	#cuerpo_3 .mapa{ top: 0; }
	
	#cuerpo_4 .texto{
		left: inherit !important;
		right: inherit !important;
		margin: 0 10px !important;
		width: 50% !important;
	}
	#cuerpo_4 #medico, #cuerpo_7 .derecho #justicia{ background-position: 0 0 !important; }
	#cuerpo_4 .educacion .texto{
		top: 10px;
		left: 0 !important;
		margin: 0 !important;
		width: 100% !important;
	}
	#cuerpo_4 .educacion .bombillo{ margin-top: -98px; }
	#cuerpo_4 .educacion .base{ margin-top: 82px; }
	
	#cuerpo_5 .texto{ width: 58%; }
	#cuerpo_5 .texto div{ padding-left: 20px; }

	#cuerpo_6 .tablet{ bottom: -90px; }
	#cuerpo_6 .tablet2{ bottom: 90px; }
	#cuerpo_6 .slider{ bottom: 57px; }
	#cuerpo_6 .texto{
		z-index: 6;
		top: inherit;
		bottom: 34px;
		padding: 0;
		margin-left: 0.5%;
		width: 99%;
	}
	#cuerpo_6 .texto > div{
		margin: 0 !important;
		width: 100%;
	}
	#cuerpo_6 .texto > div p{
		display: block;
		width: 100%;
		text-align: center;
	}
	#cuerpo_6 .texto.dr{
		top: inherit;
		bottom: 10px;
		left: 0;
	}


	#cuerpo_7 .texto{ top: 49% !important; }
	#cuerpo_7 .economia #grafico, #cuerpo_7 .economia #grafico div, #cuerpo_7 .economia .barras{
		width: 180px;
		height: 181px;
	}
	#cuerpo_7 .economia #grafico{ margin-top: -150px; }
	
}

/******************************************************************************************************************/

@media all and (max-width: 350px) and (max-height: 500px){
	.header figure img, #cuerpo_3 .logo img{ width: 90%; }
	.header h1{ font-size: 240%; }

	.wheel, #cuerpo_2 .logo, #cuerpo_3 .con-usquito, #cuerpo_3 .geo, #cuerpo_4 #usquito-arriba, #cuerpo_8 .back{ display: none; }

	#cuerpo_2 .texto {
		top: 20px;
		bottom: inherit;
		color: #FFF;
	}

	#cuerpo_4 #medico, #cuerpo_7 .derecho #justicia{ background-position: 0 0 !important; }
	#cuerpo_4 .educacion .texto{
		top: 10px;
		left: 0 !important;
		margin: 0 !important;
		width: 100% !important;
	}
	#cuerpo_4 .texto{
		left: inherit !important;
		right: inherit !important;
		margin: 0 10px !important;
		width: 50% !important;
	}
	#cuerpo_4 .educacion .bombillo{ margin-top: -98px; }
	#cuerpo_4 .educacion .base{ margin-top: 82px; }

	#cuerpo_5 .texto{ width: 70%; }
	#cuerpo_5 .texto div{ padding-left: 10px; }
	
	#cuerpo_6 .texto{ top: 5px; text-align: center; }

	#cuerpo_6 .tablet{ bottom: -90px;  margin-left: -200px; }
	#cuerpo_6 .tablet2{ bottom: 90px;  margin-left: -150px; }
	#cuerpo_6 .slider{ bottom: 57px; margin-left: -93px; }

	#cuerpo_7 .texto{ top: 54% !important; text-align: center; }
	#cuerpo_7 .derecho #justicia{ background-position: -70px 0 !important; }
	#cuerpo_7 .economia #grafico{ margin-left: 10px; }

	#cuerpo_8{ background-position: 50% 40px; }
	#cuerpo_8 .usquito{ background-position: 50% 220px !important; }
}