/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block;}
mark, rp, rt, ruby, summary, time {display:inline;}

/* Definicion Variables Globales CSS - Colores */
:root {
    --main-bg-color: #fff;
    --topheader-bg-color: #000;	
    --header-bg-color: #fff;
	--content-bg-color: #fff;
	--section-bg-color: #1e6bcf;
	--contact-bg-color: #112435;
	--footer-bg-color: #000;
}

/********************************Fonts*****************************************/

@font-face {
  font-family: 'Roboto';
  src: url('../css/fonts/Roboto-Bold.otf');
}

/* Global properties ======================================================== */
html, body {width:100%; height:auto; padding:0; margin:0; background-color: var(--main-bg-color);}

body { 
	font-family: 'Droid Sans', sans-serif;
	font-size:1em; 
	line-height:1em;
	color:#000;
	position:relative;	
}

h1 { font-family: 'Roboto', sans-serif; font-size:2.0em; line-height:1.2em; font-weight:normal; margin-top:0px; padding-bottom:0px; margin-left:1px;}
h2 { font-family: 'Roboto', sans-serif; font-size:1.8em; line-height:1.2em; letter-spacing:0px; font-weight:400; margin-top:2px;}
h3 { font-family: 'Roboto', sans-serif; font-size:1.5em; line-height:1.2em; letter-spacing:0px; font-weight:400; }
h4 { font-family: 'Roboto', sans-serif; font-size:1.2em; line-height:1.2em; letter-spacing:0px; font-weight:normal;}

ul, li {	font-family: 'Droid Sans', sans-serif; font-size:1em; line-height:1.2em; letter-spacing:0px; font-weight:lighter; margin-bottom:1.2em;}

i {margin: 5px !important;}

/********************************LINKS***************************************/

a {text-decoration:none; cursor:pointer; color: #fff;}
a:hover {text-decoration:none;}
a:active {color: #fff;}

a.link {cursor:pointer; color:#fff; text-decoration:underline;}
a.link:hover {text-decoration:none;  }

a.link2 {cursor:pointer; color:#0094d9; text-decoration:none; font-size:11px;}
a.link2:hover { text-decoration:underline; }

a.link3 {cursor:pointer; color:#0094d9; text-decoration:none;}
a.link3:hover { text-decoration:underline; }

a.link4 {cursor:pointer; color:#000000; text-decoration:underline;}
a.link4:hover {text-decoration:none; }

/*******************************Animaciones*************************************/



/*****************************************************************************/
.clear {clear:both; margin:0 auto; width:100%;}

.left {float:left;}
.right {float:right;}
.center {margin: 0 auto !important; float:none;}

.hidden { width: 0px; height:0px; margin:0; overflow:hidden;}

.rounded {
	border-radius: 3px;
	-ms-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-khtml-border-radius: 3px;
}

.modal {font-size:0.9em;}

.btn:active, .button:active {color: #fff;} 

/*********************************header*************************************/
header {position: fixed; width:100%; height:150px; top:0; overflow:hidden; background-color: var(--header-bg-color); border-bottom:5px solid #bed52d; z-index: 100;}
.header_wrapper { width:100%; margin:0 auto; position:relative;}

.logo { width:200px; padding:0px 0; margin: 0 30px 10px; text-align:center; clear:both; float:left; overflow:hidden;}
.logo img {height:60px; margin: 0; float:left;}
.logo span {line-height:90px; margin: 0; float:right; font-size: 2em; font-weight:bold;}

/*********************************user_bar*************************************/
.user_bar { line-height:1.4em; width:100%; height:1.8em; overflow: hidden; border-top:1px solid #bed52d;}
.user_bar ul{ float: right;}
.user_bar li{ float: left; margin: 5px 5px; padding: 2px; }

.crm_mainmenu{
	height: 80px;
	margin: 0 10px;
}

.crm_mainmenu ul{
	list-style: none;
}

.crm_mainmenu li{
	max-width: 100px;
	margin: 10px 3px;
	color:#fff;
	text-align: center;
	overflow: hidden;
}

.crm_mainmenu li i{
	max-height: 30px;
	clear: both;
	text-align: center;
	margin: 0 auto;
}

.crm_mainmenu li a{
	color:#fff;
	width: 90px !important;
	min-height: 85px;
}

.crm_mainmenu li span{
	color:#fff;
	clear: both;
	line-height: 14px;
	max-height: 85px;
}


/*********************************content*************************************/	
#content_crm {
	margin: 150px auto 100px;
	position: relative;
	background-color: var(--content-bg-color);
}

/**************************contenido content_main*************************/
#content_main {
	width: 100%;
	position: relative;
	padding: 20px;
	margin: 0 auto;
	overflow:hidden;
	float: left;
	list-style:none !important;
	font-size:0.9em;
}

#content_main  h1 {
	font-weight:bolder;
	color:#222;
	font-size:1.8em;
	text-transform: uppercase;
	text-align: center;
}

#content_main  h2 {
	font-weight:bolder;
	color:#222;
	font-size:1.4em;
	line-height: 1.4em;	
}

#content_main  h3 {
	font-weight:bold;
	color:#222;
	font-size:1.2em;
	text-transform: uppercase;	
	line-height: 1.4em;	
}

#content_main  span { color:#fcbf00; }

#content_main  p, #content_main ul{
	font-size:1em;
	line-height:1.5em;
	color:#222;
	text-align: justify;
	list-style:none;
	margin-bottom: 1em;
}

#content_main img {
	margin: 10px auto;
	width: 800px;
}

#content_main table {
	border: 1px solid #666;
	border-collapse: collapse;
	width: 80%;
	margin: 10px auto;
}

#content_main td, #content_main th{
	border: 1px solid #666;
	padding:3px;
}

#content_main td > ul {list-style: disc outside; padding:0; margin-left:20px;}

#content_main .link_content {font-weight:bold; font-style: italic; color: #990000; line-height:24px; margin-bottom:10px !important;} 
#content_main .link_content > img {width:24px !important; margin:0 !important;}

/****************************STATS************************/
#head_orden {position:fixed; width:98%; z-index:100; padding:10px 0;}
#body_orden {position:absolute; margin:70px auto 100px;}
/****************************STATS************************/
#produccionapp {margin: 10px 10px;}

#tabla_cliente {margin: 20px auto;}

.card_ordpro:before {
      display: block;
      content: " ";
      margin-top: 130px;
      height: 100px;
      visibility: hidden;
} 

/****************************footer************************/

#footer {
	position:fixed;
	width:100%;
	z-index:1005;
	bottom:0px;
	background-color: var(--footer-bg-color);	
}

.footer_wrapper {
}

.credits p{
	font-size: 0.7em;
	color: #ccc;
	text-align:center;
	margin: 10px 20px;
	float: right;
	clear:both;
}

.call { display: none;}

 /* Media quires for a responsive layout */

    /* For smartphones 	*/
    @media (min-width: 320px) and (max-width: 767px) {
		body{ width:100%; font-size:1em; margin:0 auto;}
		.left, .right {float:none;}
		header, .header {width:100%; height:auto; position:fixed; top:0;}
		.logo { width:100%; float:none; margin:10px 0; text-align:center;}
		.logo img { width:auto; height:50px; margin: 0 auto; float:none;}
		.logo span {font-size: 1.6em;}
		
		.head_top { height: auto;}
		.head_top p { display:none; }		
		
		.user_bar { display: none; }
		
		#menu_logout { display: inherit;}

		#content_crm {margin: 140px auto 50px;}
		#content_main, #facturafe { width: 100%; float: none; overflow:hidden;}
		#facturafe { margin: 10px 0; }
		
		footer { height: auto; }
		.credits {}
		.credits p{ font-size:0.6em;}
		.credits img { width: 100px;} 
    }

    /* For smaller displays like laptops */
    @media (min-width: 768px) and (max-width: 979px) {
	/*
		body{ min-width:768px; font-size:0.8em; margin:0 auto;}
		.left, .right {float:none;}
		header {height:280px;}		
		.header_wrapper {width:768px;}
		.menu ul {font-size:0.9em;}
		.menu li { margin: 0 3px; min-width: 40px; }
		.banner_wrapper {width:768px;}
		.banner_slider {width:768px; height:336px;}
		.banner_slider .slides_container {min-height:336px;}
		.banner_slider .slides_container img{width:768px; height:336px;}
		.pagination { right:-80px;}			
		#content-wrapper{width:768px;}
		.content_main { width:768px; padding-top:0; font-size:1.1em;}
		.content_main .col-1 {width:768px;}
		.content_main .col-3 {width:330px;}
		.content_main .col-3 p, .content_main .col-3 ul{margin-top: 0px;}
		.contact {width:768px; clear:both; background:#fff url(../images/banner_spacer.png) center top no-repeat; padding: 2em 0;}
		.contact li {width:50%; float:left;}
		.footer_wrapper {width:768px;}
	*/
    }