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

*{ 
	margin: 0px;
	padding: 0px;
}

html, body{
	margin: 0;
	padding: 0;
}

body{
	font: 100% 'Open Sans', Arial, Helvetica, sans-serif;
	color: #1E262B;
	background: #FFF;
}

strong{
	font-weight: 700 !important;
}

a, a span, a img, li, img, label, input, textarea, button, .button{
	text-decoration:none;
	outline: none;

	transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	-webkit-transition: all 0.3s linear;
}

p{
	margin-bottom: 15px;
}

hr{
	float: left;
	width: 100%;
	height: 1px;
	color: #4D626C;
	background-color: #4D626C;
	border: none;
}

.cl{ clear: both; }

.all{
	clear: both;
	float: left;
	width: 100% !important;
}

.centro{
	position: relative;
	z-index: 10;
    margin: 0 auto;
	padding: 70px 0 40px 0;
	width: 100%;
	max-width: 1100px;
}

.nopadding{	padding: 0 !important; }
.no-margin{ margin: 0 !important; }

.nopaddingAlto{
	padding-top: 0;
	padding-bottom: 0;
}

.nopaddingAncho{
	padding-left: 0;
	padding-right: 0;
}

.fl-r {	float: right;}
.fl-l{ float: left; }	

.tx-c{ text-align: center;}	
.tx-l{ text-align: left;}	
.tx-r{ text-align: right;}	


.separa{
	height: 20px;
	clear: both;
}
.separa.sp-40{ height: 40px; }
.separa.sp-60{ height: 60px; }
.separa.sp-80{ height: 80px; }

.pos_absolute{ position: absolute; }
.pos_relative{ position: relative; }

.btnav{
	position: absolute;
	right: 20px;
	z-index: 10000;
	width: 50px;
	height: 50px;
	background: #DFD4A6 url(../images/flup.png) center center no-repeat;
	border: none;
}

.btnav.ante{
	top: 20px;
}
.btnav.ante:hover{
	background-position: center 20%;
}

.btnav.sgte{
	bottom: 0;
	background: #DFD4A6 url(../images/fldw.png) center center no-repeat;
}
.btnav.sgte:hover{
	background-position: center 80%;
}

.wheel{
	right: 40px;
	bottom: 40%;
}

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

.contenedor{
    position: relative;
    width: 100% !important;
	/*
    min-width: 1000px;
    min-height: 500px;
	*/
	max-height: 1800px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.parallax{
    position: absolute;
    top: 0;
    left: 0;
	width: 100%;
}

.contenedor h2{
	margin: 0 0 15px 0;
	font-size: 70%;
	font-weight: 700;
	color: #000;
}
.contenedor h2 span{
	clear: both;
	width: 400px;
	font-size: 200%;
	border-bottom: 2px solid #000;
}
.contenedor h2:after{
	content: '';
	display: block;
	width: 80px;
	border-bottom: 5px solid #000;
}



.header{
	background-color: #8F141B;
}

.header h1{
	position: absolute;
	z-index: 1;
	width: 550px;
	font-size: 340%;
	font-weight: 700;
	line-height: 100px;
	color: #DFD2A5;
}
.header h1 span{
	clear: both;
	margin: -15px 0 0 0;
	padding: 0 20px 0 0;
	width: 400px;
	font-size: 220%;
/*	border-bottom: 2px solid #DFD2A5;*/
}
/*
.header h1:after{
	content: '';
	display: block;
	width: 80px;
	border-bottom: 5px solid #DFD2A5;
}
*/
.header .conte_saludo{
	position: absolute;
/*	bottom: 0;*/
    right: 0;
	height: 593px;
}

#saludo, #saludo_ojos, #saludo_mano{
	top: 0;
	right: 0;
}


#cuerpo_2{
	background-color: #86C859;
}
#cuerpo_2 .all{
	position: relative;
	z-index: 0;
	height: 50%;
}
#cuerpo_2 .all.cielo{
	background-color: #0099FF;
}

#cuerpo_2 .city1{
    z-index: 2;
	height: 420px;
	background: url(../images/city1.png) 50% 0 repeat-x fixed;
}
#cuerpo_2 .city2{
    z-index: 0;
	height: 420px;
	background: #0099FF url(../images/city2.png) 50% 0 repeat-x fixed;
}
#cuerpo_2 .logo{
    z-index: 5;
	height: 600px;
	background: url(../images/universidad-surcolombiana4.png) 50% 0 no-repeat;
}

#cuerpo_2 .entrada{
	position: absolute;
    z-index: 6;
	top: 300px;
	width: 100%;
	height: 3000px;
	background: url(../images/entrada.png) 50% 0 no-repeat;
}
#cuerpo_2 .suelo{
	position: absolute;
    z-index: 3;
	top: 420px;
	width: 100%;
	height: 100%;
	background-color: #86C859;
}
#cuerpo_2 .texto{
	position: absolute;
    z-index: 4;
	top: 500px;
	margin-left: 15%;
	width: 70%;
	height: 100px;
}


#cuerpo_3{
	background-color: #DFD4A6;
}
#cuerpo_3 .haz{
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -1000px 0 0 -1000px;
	width: 2000px;
	height: 2000px;
	background: url(../images/haz.png) center center no-repeat;
}

#cuerpo_3 .mapa{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
	width: 100%;
	height: 100%;
	background: url(../images/mapa.png) 50% 50% no-repeat;
}

#cuerpo_3 .geo{
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 50%;
	margin: -90px 0 0 30px;
}
#cuerpo_3 .geo.garzon{ margin: -0px 0 0 -15px; }
#cuerpo_3 .geo.plata{ margin: 40px 0 0 -87px; }
#cuerpo_3 .geo.pitalito{ margin: 106px 0 0 -100px; }

#cuerpo_3 .geo:hover:after{
    content: attr(nombre);
    position: absolute;
	top: -30px;
	left: -26px;
    padding: 4px 8px;
    width: 70px;
    color: #FFF;
    font-size: 80%;
	text-align: center;
    background-color: #7D1419;
    border-radius: 4px;
}

#cuerpo_3 .logo{
	z-index: 3;
	left: 16%;
	padding-top: 60px;
	width: 348px;
	height: 250px;
/*	background: url(../images/universidad-surcolombiana2.png) 50% 0 no-repeat;*/
}
#cuerpo_3 .logo img{ margin-bottom: 15px; }

#cuerpo_3 .aro{
	position: absolute;
    z-index: 1;
	top: 50%;
	left: 50%;
	margin: -485px 0 0 -485px;
	width: 970px;
	height: 970px;
	background: url(../images/aro.png) center center no-repeat;
}

#cuerpo_3 .con-usquito{
	position: absolute;
	z-index: 4;
	top: 50%;
    left: 50%;
	padding: 140px 0 0 140px;
}

#cuerpo_3 .con-usquito img#usquito2ojos{
	z-index: 1;
}


#cuerpo_4{
	background: #B3DADA;
}

#cuerpo_4 .salud .texto{
	position: absolute;
	z-index: 3;
	top: 42%;
	right: 50%;
	margin-right: 80px;
	color: #285555;
}

#cuerpo_4 .salud h2{ color: #285555; }
#cuerpo_4 .salud h2 span, #cuerpo_4 .salud h2:after{ border-color: #285555; }

#cuerpo_4 .con-oficina{
	position: absolute;
	z-index: 2;
	top: 0;
    left: 20%;
	left: 0%;
	width: 200px;
	height: 100%;
	padding: 0;
}

#cuerpo_4 #oficina{
	position: absolute;
	top: 50%;
	margin: -250px 0 0 -30px;
}

#cuerpo_4 #medico{
    z-index: 2;
	left: auto;
	margin-left: 30%;
	width: 260px;
	height: 100%;
	background: url(../images/medico.png) 50% 0 no-repeat;
}

#cuerpo_4 .piso{
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 500px;
	background-color: #89C7C7;
}

#cuerpo_4 .educacion{
	position: absolute;
	z-index: 20;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	overflow: hidden;
	background: #7C0B69 url(../images/onda1.png) 0 100% repeat-x;
}

#cuerpo_4 .educacion .texto{
	position: absolute;
	z-index: 3;
	top: 30px;
	left: 50%;
	margin-left: -150px;
	width: 300px;
	color: #FFF;
	text-align: center;
}

#cuerpo_4 .educacion h2{ color: #FFF; }
#cuerpo_4 .educacion h2 span, #cuerpo_4 .educacion h2:after{ border-color: #FFF; }

#cuerpo_4 .educacion .bombillo, #cuerpo_4 .educacion .base{
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 50%;
}
#cuerpo_4 .educacion .bombillo{
	margin: -198px 0 0 -76px;
}
#cuerpo_4 .educacion .base{
	margin: -22px 0 0 -32px;
}
#cuerpo_4 #usquito-arriba{
	position: absolute;
    z-index: 2;
	top: 50%;
	width: 100%;
	height: 50%;
	background: url(../images/usquito-003.png) 50% 30px no-repeat;
}

#cuerpo_4 .fondo{
	position: absolute;
	z-index: 1;
	top: 15%;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/onda1.png) 0 100% repeat-x;
}
#cuerpo_4 .fondo.seg{ top: 30%; }



#cuerpo_5{
	background: #07275B url(../images/ingenieria.png) center center no-repeat;
}

#cuerpo_5 .texto{
	position: absolute;
    z-index: 1;
	display: table;
	width: 50%;
	height: 100%;
	color: #FFF;
	background-color: rgba(7,39,97,0.4);
}
#cuerpo_5 .texto div{
/*
	position: absolute;
	margin: 30% 0 0 30%;
	*/
	display: table-cell;
	vertical-align: middle;
	padding-left: 10%;
}
#cuerpo_5 h2{ margin-top:-45px; color: #FFF; }
#cuerpo_5 h2 span, #cuerpo_5 h2:after{ border-color: #FFF; }

#cuerpo_5 img{
	position: absolute;
	top: 50%;
	left: 50%;
}
#cuerpo_5 .inge_hexa{
	margin: -175px 0 0 56px;
}
#cuerpo_5 .inge_pinon{
	margin: -102px 0 0 129px;
}
#cuerpo_5 .inge_arco{
	margin: -69px 0 0 159px;
}
#cuerpo_5 .barra{
	margin: -190px 0 0 41px;
}

#cuerpo_5 .diagh{
	position: absolute;
    z-index: 2;
	top: 24%;
	left: 0;
	width: 100%;
	height: 32px;
	background: url(../images/diagh.png) -10% 0 no-repeat;
}
#cuerpo_5 .diagh.dos{ top: 64%; }
#cuerpo_5 .diagh.tres{ top: 81%; }
#cuerpo_5 .diagh.cuatro{ top: 12%; }



#cuerpo_6{
	background-color: #613CC4;
}

#cuerpo_6 .texto, #cuerpo_7 .texto{
	position: absolute;
	z-index: 4;
	top: 16%;
	width: 50%;
	color: #FFF;
}

#cuerpo_6 .texto > div, #cuerpo_7 .texto > div{
	float: right;
	margin: 0 100px 0 40px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#cuerpo_6 h2, #cuerpo_7 h2{ margin: 0; color: #FFF; }
#cuerpo_6 h2 span, #cuerpo_6 h2:after, #cuerpo_7 h2 span, #cuerpo_7 h2:after{ border-color: #FFF; }

#cuerpo_6 div div h2 span, #cuerpo_7 div div h2 span{ color: #FFF; border: none; }
#cuerpo_6 div div h2:after, #cuerpo_7 div div h2:after{ border-color: transparent; }

#cuerpo_6 .texto.dr, #cuerpo_7 .economia .texto{
	left: 50%;
}
#cuerpo_6 .texto.dr > div{
	float: right;
	margin: 0 40px 0 100px;
}

#cuerpo_6 .texto div div, #cuerpo_7 .texto div div{
	float: left;
	width: auto;
	border-bottom: 2px solid #FFF;
}

#cuerpo_6 .texto div p, #cuerpo_7 .texto div p{
	clear: both;
	float: left;
	padding-top: 15px;
}
#cuerpo_6 .texto div p:before, #cuerpo_7 .texto div p:before{
	content: '';
	position: absolute;
	display: block;
	width: 80px;
	margin-top: -15px;
	border-bottom: 5px solid #FFF;
}

#cuerpo_6 .back, #cuerpo_7 .back{
	position: absolute;
	z-index: 1;
	top: 6%;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/onda3.png) 50% 0 no-repeat;
}
#cuerpo_6 .back.b2{
	background-image: url(../images/onda2.png);
}
#cuerpo_6 .back.b3{
	background-image: url(../images/onda1.png);
}

#cuerpo_6 .tablet, #cuerpo_6 .tablet2{
	position: absolute;
	z-index: 3;
	bottom: 0;
	left: 50%;
	margin-left: -266px;
}
#cuerpo_6 .tablet2{
	z-index: 5;
	bottom: 171px;
	margin-left: -220px;
}

#cuerpo_6 .slider{
	position: absolute;
	z-index: 4;
	bottom: 147px;
	left: 50%;
	margin-left: -158px;
	width: 316px;
	height: 233px;
	background: url(../images/slider.png) 0 0 no-repeat;
}

#cuerpo_6 .mano-slider{
	position: absolute;
	z-index: 5;
	bottom: 0;
	left: 50%;
	margin-left: 10px;
}



#cuerpo_7{
	background-color: #495B0B;
}

#cuerpo_7 .texto{
	z-index: 10;
	top: 16%;
	width: 100%;
}

#cuerpo_7 .derecho, #cuerpo_7 .economia{
	position: absolute;
    z-index: 1;
	width: 50%;
	height: 100%;
	overflow: hidden;
}

#cuerpo_7 .derecho{}

#cuerpo_7 .derecho .texto > div{
	margin: 0 20px 0 290px;
}

#cuerpo_7 .degra{
	position: absolute;
	z-index: 1;
	margin-left: -35%;
	width: 170%;
	height: 100%;
	background: url(../images/degra.png) 110% 0 repeat-y;
}
#cuerpo_7 .derecho .degra{
	opacity: 0.4;
	alpha(opacity=40);
	filter: alpha(opacity=40);
}

#cuerpo_7 .derecho .con-justicia{
	position: absolute;
	z-index: 2;
	top: 0;
    left: 0;
	margin-left: -5px;
	width: 200px;
	height: 100%;
	padding: 0;
}
#cuerpo_7 .derecho .justicia{
    z-index: 5;
	left: auto;
	width: 408px;
	height: 100%;
	background: url(../images/justicia.png) 50% 0 no-repeat;
}

#cuerpo_7 .economia{
	right: 0;
	background-color: #7D9C10;
}

#cuerpo_7 .economia .texto{
	top: 46%;
	left: inherit;
	right: 0;
	width: 100%;
}

#cuerpo_7 .economia .texto > div{
	margin: 0 20px 0 330px;
}

#cuerpo_7 .diag{
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: url(../images/diag1.png) 110% 0 no-repeat;
}

#cuerpo_7 .economia #grafico{
/*#cuerpo_7 .economia .barras{*/
	position: absolute;
	z-index: 3;
	top: 50%;
	margin: -165px 0 0 30px;
	width: 359px;
	height: 360px;
}
#cuerpo_7 .economia .barras{
	position: absolute;
	z-index: 1;
}
#cuerpo_7 .economia .barras.flecha{
	z-index: 2;
}

#cuerpo_7 .economia #grafico div{
	position: absolute;
	z-index: 2;
	width: 100%;
	width: 0;
	height: 360px;
	overflow: hidden;
	background: url(../images/barras-flecha.png) 0 0 no-repeat;

	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#cuerpo_7 .economia .degra{
	background-position: -40% 0 repeat-y;
}

#cuerpo_7 .economia .diag{
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: url(../images/diag1.png) 0 0 no-repeat;
}
#cuerpo_7 .economia .diag.dw{
	background: url(../images/diag2.png) 0 100% no-repeat;
}



#cuerpo_8{
	background: #8F141B url(../images/universidad-surcolombiana3.png) 50% 60px no-repeat;
}

#cuerpo_8 .usquito{
	position: absolute;
	z-index: 2;
	top: 0;
    left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/usquito-004.png) 50% 0 no-repeat;
}

#cuerpo_8 .back{
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 250px;
	height: 100%;
	background: url(../images/fin_ambiental.jpg) 50% 0 no-repeat;
}
#cuerpo_8 .back.deporte{
	left: 250px;
	background-image: url(../images/fin_deporte.jpg);
}
#cuerpo_8 .back.biblioteca{
	left: inherit;
	right: 250px;
	background-image: url(../images/fin_biblioteca.jpg);
}
#cuerpo_8 .back.arte{
	left: inherit;
	right: 0;
	background-image: url(../images/fin_arte.jpg);
}

#cuerpo_8 .back h2{
	position: absolute;
	bottom: 20%;
	margin: 0 0 0 10px;
	width: 230px;
	font-size: 120%;
	color: #DFD4A6;
}
#cuerpo_8 .back h2 span{ display: block; width: 230px; }
#cuerpo_8 .back h2 span, #cuerpo_8 .back h2:after{
	border-color: #DFD4A6;
}