/*--------------------------------------*/
/*
 * Café Claro	CAFE	#f1c678
 * Café Oscuro	MARRON	#a63f21
 * Azul Oscuro		#2c2c82
 * Blanco		#ffffff
 */
/*--------------------------------------*/
/*--------------------------------------*/
@media print {
	body { font-size: 5pt; line-height: 1.0 }
}
@media print {
	body { font-size: 5pt; line-height: 1.0 }
}
/*--------------------------------------*/
@font-face {
	font-family:		fuente_delgada;
	font-style:			normal;
	font-weight:			normal;
	src:				url('../ttf/Antonio-Regular.ttf');
}
@font-face {
	font-family:		fuente_local;
	font-style:			normal;
	font-weight:			normal;
	src:				local('Trebuchet MS');
}
@font-face {
	font-family:		fuente_regular;
	font-style:			normal;
	font-weight:			normal;
	/*src:				url('../ttf/Aaargh.ttf');*/
	src:				local('Trebuchet MS');
}
@font-face {
	font-family:		fuente_decorativa;
	font-style:			normal;
	font-weight:			normal;
	/*src:				url('../ttf/Archistico_Simple.ttf');*/
	/*src:				url('../ttf/Redressed.ttf');*/
	/*src:				url('../ttf/Santana-RegularCondensed.ttf');*/
	src:				url('../ttf/dreamporp.ttf');
}
@font-face {
	font-family:		fuente_pequenha;
	font-style:			normal;
	font-weight:			normal;
	/*src:				url('../ttf/UbuntuMono-R.ttf');*/
	src:				local('Tahoma');
}
/*--------------------------------------*/
body {
	background-image:		url('../img/fondo.png');
	margin:				0px;
	padding:			0px;
	font-family:			'Trebuchet MS';
}
header {
	height:				300px;
	overflow:			hidden;
}
h1 {
	font-family:			fuente_delgada;
	color:				white;
	text-shadow:			 1px  1px 3px #555
	,				-1px -1px 3px #555
	,				 1px -1px 3px #555
	,				-1px  1px 3px #555;
	text-align:			center;
	margin-top:			30px;
}
h2 {
	text-align:			center;
}
h2, h3, h4, h5 {
	font-family:			fuente_delgada;
	color:				black;
	margin:				5px;
	text-shadow:			 1px  1px 3px #fff
	,				-1px -1px 3px #fff
	,				 1px -1px 3px #fff
	,				-1px  1px 3px #fff;
}
a {
	color:			inherit;
	text-decoration:	none;
}
p, ul, ol, li {
	text-align:			justify;
}
#MODULO .RECUADRO {
    float:              right;
    width:              50%;
    min-width:          250px;
    max-width:          350px;
    background:         #f1c678;
    text-align:         center;
    padding:            20px;
    font-style:         italic;
    font-size:          1.2em;
    border-radius:      5px;
    margin:             40px;
}
/*--------------------------------------*/
main, header, footer {
	display:				block;
}
#BANNER_PPAL {
	margin: 0px auto;
	font-family:			fuente_decorativa;
}
header div {
	font-family:			fuente_decorativa;
	font-size:			1.05em;
	vertical-align:			middle;
}
#slider .BANNER {
	position:			relative;
	width:				100%;
	height:				300px;
}
#slider .BANNER div.TEXTOBANNER {
	position:			absolute;
	display:			inline-block;
	background:			rgba(255,255,255,.6);
	color:				#2c2c82;
	top:				0;
	bottom:				0;
	left:				0;
	right:				0;
	width:				330px;
	height:				70%;
	margin:				auto;
	margin-left:			auto;
	margin-right:			50px;
	border-radius:			15px;
	padding:			10px;
	font-size:			1.5em;
	text-align:			center;
	text-shadow:			 1px  1px 3px #fff
	,				-1px -1px 3px #fff
	,				 1px -1px 3px #fff
	,				-1px  1px 3px #fff;
	vertical-align:			bottom;
	cursor:				pointer;
}
#slider .BANNER div.TEXTOBANNER p {
	margin:				0px;
	text-align:			center;
}
#slider .BANNER div.LOGOXBANNER {
	display:			inline-block;
	margin-right:			50px;
	margin-left:			auto;
	vertical-align:			middle;
	padding:			25px;
}
#slider .BANNER div.LOGOXBANNER img {
	display:			inline;
}
#slider .SLOGAN {
	background-image:		url('../clientes/skina/img/fachada.jpg');
	background-size:		100% 100%;
}
#slider .PACTUM {
	background-image:		url('../clientes/skina/img/contratos.jpg');
	background-size:		100%;
	background-position:		center center;
}
#slider .SFWMED {
	background-image:		url('../clientes/skina/img/a-la-medida.jpg');
	background-size:		100%;
}
#slider .OPENIT {
	background-image:		url('../clientes/skina/img/open-IT.jpg');
	background-size:		100%;
	background-position:		center center;
}
#slider .CAPLNX {
	background-image:		url('../clientes/skina/img/IT-training.jpg');
	background-size:		100%;
	background-position:		center center;
}
/*--------------------------------------
<div id="slider">
<div class='BANNER SLOGAN'><div class="TEXTOBANNER" onClick="window.open('principal/cms/'                            , '_top');"><p>SOLUCIONES INFORM&Aacute;TICAS<br /><font style='color: #a63f21;'>optimizando el uso de</font><br /> INTERNET y SOFTWARE LIBRE</p></div><div class="LOGOXBANNER"><img src="clientes/skina/img/logo.png" /></div></div>
<div class='BANNER PACTUM'><div class="TEXTOBANNER" onClick="window.open('https://www.pactumweb.co'                  , 'AUXILIAR');"><p>Sistema de informaci&oacute;n para la gesti&oacute;n de contratos</p></div><div class="LOGOXBANNER"><img src="clientes/skina/img/logo.png" /></div></div>
<div class='BANNER OPENIT'><div class="TEXTOBANNER" onClick="window.open('soporte-consultoria-en-software-libre/cms/', '_top');"><p>Soporte y consultor&iacute;a en Linux y software libre</p></div><div class="LOGOXBANNER"><img src="clientes/skina/img/logo.png" /></div></div>
<div class='BANNER SFWMED'><div class="TEXTOBANNER" onClick="window.open('software-a-la-medida/cms/'                 , '_top');"><p>Desarrollamos software ajustado a sus necesidades</p></div><div class="LOGOXBANNER"><img src="clientes/skina/img/logo.png" /></div></div>
<div class='BANNER CAPLNX'><div class="TEXTOBANNER" onClick="window.open('capacitacion-en-software-libre/cms/'       , '_top');"><p>Capacitaci&oacute;n en Linux y Software Libre</p></div><div class="LOGOXBANNER"><img src="clientes/skina/img/logo.png" /></div></div>
</div>
<div id="slider">
<div><img alt="Desarrollo de software y programas a la medida ajustados a las necesidades de nuestros clientes" src="clientes/skina/img/es/software-a-la-medida.png" title=""></div>
<div><img alt="Asesor&iacute;a y acompa&ntilde;amiento en la implementaci&oacute;n de software libre, soporte y consultor&iacute;a en Linux, moodle, drupal, wordpress, openOffice" src="clientes/skina/img/es/Soporte-Consultoria-en-Software-Libre.png" title=""></div>
<div><img alt="GROUPs: Workflow + BPM + CRM, gobernabilidad, trazabilidad y control al flujo de trabajo; ViVO Marketplace: Sistema de informaci&oacute;n para compras" src="clientes/skina/img/es/GROUPs-WorkFlow.png" title=""></div>
<div><img alt="Cursos de Linux y Software libre; programaci&oacute;n PHP, Python, XML y WebServices; openOffice y eMarketing" src="clientes/skina/img/es/Capacitacion-en-Software-Libre.png" title=""></div>
<div><img alt="Nuestros clientes tienen sitios web que sirven como plataforma de eMarketing y ventas, bien posicionados en buscadores como google, yahoo y bing." src="clientes/skina/img/es/eMarketing.png" title=""></div>
</div>
--------------------------------------*/
.DINAMICA {
	max-width:			800px;
	margin:				auto;
}
.DINAMICA a {
	color:				#2c2c82;
	text-decoration:		underline;
	cursor:				pointer;
}
.DINAMICA img.ENMARCADA {
	margin:				10px;
	border-radius:			10px;
}
.DINAMICA .TABLADIN {
	text-align:			center;
}
.DINAMICA .TABLADIN div {
	background:			rgba(255,255,255,.6);
	margin-bottom:			15px;
	border-radius:			15px;
	padding:			15px;
	box-shadow:			2px 2px 7px #000;
}
.DINAMICA .TABLADIN div div {
	background:			none;
	margin-bottom:			0px;
	border-radius:			0px;
	padding:			0px;
	box-shadow:			none;
}
.ENCTABLADIN button {
	width:				150px;
	overflow:			hidden;
}
.DINCONTENIDO {
	padding:			15px;
	text-align:			justify;
}
.DINCONTENIDO video {
    width:              300px;
    margin:             auto;
}
/*--------------------------------------*/
.DATOWYS_PRE {
	background:			wheat;
	border:				4px solid #999;
	border-radius:		10px;
	padding:			5px;
    max-width:          800px;
    margin:             auto;
}
/*--------------------------------------*/
#MODULO .DINAMICA .ENCTABLADIN button {
	background:			#f1c678;
	font-family:			fuente_delgada;
	font-size:			1.1em;
	border:				0px;
	padding-top:			5px;
	padding-bottom:			5px;
	border-radius:			10px;
	margin-bottom:			5px;
}
#MODULO .DINAMICA .DINBOTONES {
	float:				left;
	padding:			25px;
}
#MODULO .DINAMICA .DINDATOS {
	background:			rgba(255,255,255,.6);
	border-radius:			15px;
	padding:			15px;
	box-shadow:			3px 3px 7px #000;
	margin-bottom:			25px;
}
#MODULO .DINAMICA .DINDATOS p  {
	background:			none;
}
#MODULO .TEMARIO th p ,
#MODULO .TEMARIO td p {
	background:			none;
	padding:			1px;
}
#MODULO .DINAMICA .ENCTABLADIN .ACTIVO button ,
#MODULO .DINAMICA .ENCTABLADIN .PRESIONADO {
	background:			#2c2c82;
	color:				white;
	text-shadow:			 1px  1px 3px #000
	,				-1px -1px 3px #000
	,				 1px -1px 3px #000
	,				-1px  1px 3px #000;
}
#MODULO .DINAMICA .ENCTABLADIN button {
	margin:				2px;
	box-shadow:			3px 3px 7px #000;
}
/*--------------------------------------*/
.TEMARIO table {
	box-shadow:			0px 0px 7px #000;
}
.TEMARIO th {
	background:			black;
	color:				white;
	padding:			5px;
	font-weight:			bold;
	font-family:			fuente_decorativa;
	font-size:			1.2em;
	text-align:			center;
}
.TEMARIO td {
	text-align:			left;
	font-family:			fuente_pequenha;
	font-size:			.8em;
}
.TEMARIO td.BLANCO {
	text-align:			center;
}
.TEMARIO p {
	margin:				0px;
}
.TEMARIO b {
	display:			block;
	text-align:			center;
}
/*--------------------------------------*/
.CAFE {
	background:			#f1c678;
}
.MARRON {
	background:			#a63f21;
	color:				white;
}
.AZUL {
	background:			#2c2c82;
}
.BLANCO {
	background:			#ffffff;
}
/*----------------------------------------*/
#CONT_VENTA {
    display:            none;
    background:         #eee;
    position:           fixed;
    top:                10%;
    left:               10%;
    width:              80%;
    max-width:          80%;
    height:             80%;
    max-height:         80%;
    overflow:           auto;
    border:             2px solid #01375b;
    border-radius:      25px;
    padding:            20px;
    text-align:         right;
}
#VENTANELLA {
    width:              100%;
    text-align:         justify;
    padding:            5px;
}
/*----------------------------------------*/
#CONT_PIE {
	background:		#a63f21;
	padding:		10px 0px 130px 0px;
	color:			white;
	margin-top:		250px;
	font-size:		.8em;
}
#PIE {
	width:			80%;
	margin:			auto;
	text-align:		center;
}
#PIE p {
	display:		inline-block;
	text-align:		center;
	padding:		0px 10px;
}
#PIE a {
	display:		block;
	text-align:		center;
}
#PIE a {
	border-radius:		10px;
	padding:		5px;
}
#PIE a:hover {
	background:		#f1c678;
	color:			#a63f21;
}
#PIE .UBICACION {
	display:		inline-block;
	vertical-align:		middle;
}
#PIE .LEGALES {
	border:			2px solid white;
	border-radius:		10px;
	padding:		5px;
	vertical-align:		middle;
}
/*----------------------------------------*/
#SKINA {
	position:		fixed;
	right:			0px;
	bottom:			0px;
	font-size:		.7em;
	background:		rgba(255,255,255,.5);
	border-radius:		10px;
	padding:		5px;
	margin:			10px;
}
/*============================================================*/
@media screen and (max-width: 1200px) {
	header {
		height:				200px;
	}
	#slider .BANNER {
		height:				200px;
	}
}
@media screen and (max-width: 767px) {
	header {
		display:			none;
	}
	header * {
		display:			none;
	}
	.DINAMICA .DINBOTONES {
		padding:			5px;
	}
	.ENCTABLADIN button {
		width:				100px;
	}
	p, li,
	.DINAMICA .TABLADIN div {
		font-size:			1.2em;
		padding:			5px;
	}
	li p {
		font-size:			1em;
		margin:				2px;
		padding:			0px;
	}
	.TEMARIO table {
		width:				calc( 100% - 100px );
		margin:				auto;
	}
	.TEMARIO td {
		font-size:			.4em;
	}
	.TEMARIO td li {
		margin:				0px;
		padding:			0px;
	}
    .DINCONTENIDO video {
        width:              200px;
        margin:             auto;
        min-width:          50%;
        max-width:          50%;
    }
    #slider .BANNER div.TEXTOBANNER {
        display:            none;
    }
}