/******************************************************************
***			Ing. Juan Pablo Ballesteros Quintero				***
***			Ingeniero de Sistemas								***
***			Universidad Industrial de Santander					***
******************************************************************/

/* ********************************************************************************************** HTML5 */

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, mark {
	display: block;
}

mark {
	background: none;border: none;
}

/* ---------------------------------------------------------------------------------------------- FONT FACE */ 

@font-face {
	font-family: 'sansationregular';
    src: url('../../fonts/sansation_regular-webfont.eot');
    src: url('../../fonts/sansation_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/sansation_regular-webfont.woff') format('woff'),
         url('../../fonts/sansation_regular-webfont.ttf') format('truetype'),
         url('../../fonts/sansation_regular-webfont.svg#sansationregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*@font-face {
	font-family: "Fh_Lentil";
	src: url("../../fonts/Fh_Lentil.eot?") format("eot"),
		url("../../fonts/Fh_Lentil.woff") format("woff"),
		url("../../fonts/Fh_Lentil.ttf") format("truetype"),
		url("../../fonts/Fh_Lentil.svg#Fh_Lentil") format("svg");
	font-weight: normal;
	font-style: normal;
}*/
	
@font-face {
	font-family: "Vegur-Light";
	src: url("../../fonts/Vegur-L_0600.eot?") format("eot"),
		url("../../fonts/Vegur-L_0600.woff") format("woff"),
		url("../../fonts/Vegur-L_0600.ttf") format("truetype"),
		url("../../fonts/Vegur-L_0600.svg#Vegur-Light") format("svg");
	font-weight: normal;
	font-style: normal;
}

/* ---------------------------------------------------------------------------------------------- GENERAL */ 

html, body {
	margin: 0;
	padding: 0;
	background: #fff;
}

* {
	outline: none;
	line-height: 20px;
  	font-family: "sansationregular", Arial, Helvetica, sans-serif;
	font-weight: 100 !important;
}

a {
	font-size: 14px;
	color: #666;
	text-decoration: none;
	outline: none;
}
 
a:hover {
	color: #888;
}
  
h1 {
    font-size-adjust: 0;
    font-weight: 100 !important; 
	font-style: normal;
}

div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form,fieldset, input, textarea, a, p,blockquote, th, td { 
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
    
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal; 
	font-weight: normal;
} 
  
ol, ul {
	list-style: none;
}


/* ********************************************************************************************** INDEX */

/* ---------------------------------------------------------------------------------------------- HEADER WEB */

#header {
	top: 60px;
	width: 100%;
	height: 74px;
}
	
.cambiar_estructura {
	font: 22px "sansationregular";
	border-right: 1px dashed #999999;
	padding: 0 10px;
}	

a.cambiar_estructura:hover {
	color: #ccc !important;
} 

#headerWeb {
	z-index: 1000;
	width: 100%;
	margin: 0 auto;
	height: 40px;
	overflow: hidden;
	position: fixed;
	background: #000;
	-moz-box-shadow: 0px 3px 15px 0px #333;
	-webkit-box-shadow: 0px 3px 15px 0px #333;
	box-shadow: 0px 3px 15px 0px #333;
}

#headerWeb p {
	position:absolute;
}

/* ---------------------------------------------------------------------------------------------- FOOTER */

#footer {
	width: 990px;
	height: 410px;
	margin: 0 auto;	
}

.contadorIdeas {
	z-index: 1000;
	float: right;
	margin-right: 25px;
}

.contadorIdeas mark {
	color: #fff;
    font: 30px "sansationregular",Arial,Helvetica,sans-serif;
	float: right;
	padding-left: 15px;
}
	
.contadorIdeas h2 strong{
	font-size: 25px;
	font-weight: bold;
	color: #fff;
}

.contadorIdeas h2 {
	float: right;
	color: #ccc;
	font-size: 15px;
	line-height: 12px;
	padding-left: 5px;
	padding-top: 3px;
}

/* ---------------------------------------------------------------------------------------------- WRAPPER */

div#wrapper {
  	width: 100%;
  	max-width: 1920px;
  	min-width: 100px;
  	padding: 0;
  	margin: 0 auto;
  	position:relative;
}

/* ---------------------------------------------------------------------------------------------- NAV */

nav#menuv {
	position: fixed;
  	left: 20px;
  	top: 50%;
  	z-index: 999999;
}

nav#menuv li {
	height: 20px;
	position: relative;
}

nav#menuv a {
	display: block;
	width: 20px;
	height: 20px;
	background: url(../../images/dotnav.png) 0 100% no-repeat;
	text-indent: -9000px;
	overflow: hidden;
	opacity:0.7;
}

nav#menuv a:hover {
	opacity: 1;
}

nav#menuv li.active a {
	background-position: 0 0;
}
  
nav#menuv h1 {
	display: none;
	opacity: 0;
	position: absolute;
	left: 25px;    
	top: -4px;
	white-space: nowrap;
	font: 13px "sansationregular", Arial, Helvetica, sans-serif;
	padding: 0 6px 0 0;
	background: url(../../krafft-lubrifiants-de-maintenance/img/arrow_right.png) 100% 50% no-repeat;
}

nav#menuv span {
	display: block;
	background: #000;
	color: #fff;
	padding: 4px 8px;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------------------------- CONTENIDO */

.contenido {
	min-height: 900px;
  	position: relative;
 	width: 100% !important;
  	min-width: 1000px;
  	margin: 0;
 	padding: 0;
}

.contenido article {
	width: 990px;
    margin: 0 auto;
    min-height: 100%;
	position: relative;
}

.contenido header {
	position: absolute;
	height: auto;
   	/*left: 0;*/
   	top: 0;
   	width: 550px;
   	z-index: 99999;
}
  
.contenido .article-content {
	z-index: 1;
}
  
.contenido header p {
    color: black;
	font-size: 15px;
}
  
.contenido header p a {
	color: #222;
}
    
.contenido header a {
	font-size: 12px;
    color: #999 !important;
}
    
.contenido header a:hover { 
    border-bottom: 0;
	text-decoration:underline; 
}
  
.contenido header h1 {
    font:39px/45px "Vegur-Light";
    color: #F09B08;
    margin: 0 0 2px 0;
}
 
.contenido article {
	z-index: 999
}

/* ---------------------------------------------------------------------------------------------- CODA SLIDER */

.panel h2.title { margin-bottom: 10px; font-size:20px;font-family:"Fh_Lentil"; }
.coda-slider-no-js .coda-slider { height: 200px; overflow: auto !important; padding-right: 20px }
.coda-slider, .coda-slider .panel { width: 400px } 
.coda-slider-wrapper.arrows .coda-slider { margin: 0 10px }
.coda-slider-wrapper {margin-top:50px;}
.coda-nav-left a, .coda-nav-right a { color: #fff; padding: 5px; width: 100px }
.coda-slider p.loading { padding: 20px; text-align: center }
.coda-nav ul li { display: inline }
.coda-slider { float: left; overflow: hidden; position: relative }
.coda-slider .panel { display: block; float: left }
.coda-slider .panel-container { position: relative }
header .coda-nav-left a{ background:url(../../images/arrows.png) 0 0 no-repeat; width:54px;height:54px;display: block;text-indent:-9999px;border:none;opacity:0.5; }
header .coda-nav-left a:hover{background-position:0 -64px;}
header .coda-nav-right a{ background:url(../../images/arrows.png) -64px 0 no-repeat; width:54px;height:54px;display: block;text-indent:-9999px;border:none;opacity:0.5; }
header .coda-nav-right a:hover{background-position:-64px -64px;}
.coda-nav-left {float:left;}
.coda-nav-right {float:left;}
.panel-wrapper {padding:0 15px;}
.coda-slider-wrapper .panel-wrapper p {font-size:14px;line-height:18px;text-align:justify;}
.coda-slider-wrapper .panel-wrapper p em {font-size:11px;font-weight:bold;}

/* ---------------------------------------------------------------------------------------------- FOOTER */

#creditos {
	width: 100%;
  	background: url(../../images/slides/img_creditos.jpg) center 0 no-repeat fixed;	
  	margin: 0;
  	overflow: hidden;
  	text-align: center;
  	font-size: 11px;
}

footer {
	width: 900px;
  	margin: 0 auto 0 auto;
  	padding: 0px;
}

footer a {
	color: #222;
	border-bottom: 1px dotted #222;
	padding: 0 !important;
	margin: 0 !important;
	text-indent: -9999px !important;
}
  
footer a:hover {
	border-bottom: 0;
}
  
#creditos * {
    font-size: 11px;
}

/* ---------------------------------------------------------------------------------------------- REDES SOCIALES */
#redes_soc {
	position: fixed;
  	bottom: 25px;
  	right: 25px;
}

.icon-fb{
	display: block;
	margin: 0 4px 0 0 !important;
	line-height: 60px;
	width: 50px;
	height: 50px;
	overflow: hidden;
	text-indent: -9000px;
	background: url(../../images/icon_share.png) -50px 0 no-repeat;
	float: left;
	border: 0 !important;
	text-decoration: none !important;
}
  
.icon-fb:hover {
	background-position: -50px -50px;
}
 
.icon-twitter{
	display: block;
	margin: 0 0 0 0 !important;
	line-height: 60px;
	width: 49px;
	height: 50px;
	overflow: hidden;
	text-indent: -9000px;
	background: url(../../images/icon_share.png) 0 0 no-repeat;
	float: left;
	border: 0 !important;
	text-decoration: none !important;
}
.icon-twitter:hover {
	background-position: 0 -50px;
}

/* ---------------------------------------------------------------------------------------------- CONTENT */

/* ---------------------------------------------------------------------------------------------- NOSOTROS */

#introWeb {
	width: 100%;
  	background: url(../../images/slides/img_portada.jpg) 50% 0 no-repeat fixed;
  	margin: 0 0 0 0;
  	height: 1200px;
  	overflow: hidden;
}

#nosotros {
	width: 100%;
	background: url(../../images/slides/img_nosotros.jpg) 0 0 no-repeat fixed;
  	margin: 0;
  	height: 1600px;
  	overflow: hidden;
}

#nosotros header {    
	top: 180px;
}

#nosotros .bg { 
  	position: absolute;
  	width: 1600px;
  	height: 1600px;
  	top: 0;
  	left: 300px;
	background: url(../../images/slides/img_puzzle.png) 0 0 no-repeat fixed;
}
   
#nosotros p {
	color: #333;
}
  
#nosotros .panel-wrapper p {
  	color: #999;
}  

/* ---------------------------------------------------------------------------------------------- SERVICIOS */

#servicios {
	width: 100%;
  	background: url(../../images/slides/img_servicios.jpg) 0 0 no-repeat fixed;
  	margin: 0;
  	height: 1600px;
  	overflow: hidden;
}

#servicios header {
  	top: 200px;
}


#servicios .bg { 
  	position: absolute;
  	width: 1600px;
  	height: 1600px;
  	top: 0;
  	left: 300px;
  	background: url(../../images/slides/img_moviles.png) 0 0 no-repeat fixed;
}

#servicios .bg2 { 
  	position: absolute;
  	width: 1600px;
  	height: 1600px;
  	top: 0;
  	left: 300px;
  	background: url(../../images/slides/img_redes.png) 0 0 no-repeat fixed;
}
   
/*#servicios .bg {
	position: absolute;
	width: 100%;
	height: 1600px;
	top: 0;
	left: 0%;
  }*/
  
#servicios p {
  	color: #333;
}
  
#servicios .panel-wrapper p {
  	color: #999;
}