/* 2013 Equipo NTG */
/*  CSS para MCH*/
/*  media: Screen */

/************************************************************************************
RESET CSS
*************************************************************************************/

* {
    margin: 0;
    padding: 0;
}


/************************************************************************************
ESTILOS GENERALES
*************************************************************************************/

@import url("http://fonts.googleapis.com/css?family=Oxygen");

html {
	height:100%
}

body {
	color:#666;
	font-family: 'Oxygen', Arial, sans-serif;
	font-weight:400;
	font-size: 100%;
	background: url("images/bg_over767px.png") repeat-y center top #E5E5E5;
	height: 100%;
	width: 100%;
}


img {
    border: none;
	max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

img, fieldset {
    border: 0;
}

hr {
    background-color: #999;
    border: 0 none;
    color: #999;
    height: 1px;
    margin: 10px 0;
}
table {
}
td {
}

h1, h2, h3, h4, h5, h6 {
	text-rendering: optimizelegibility;
}

strong, b {
}
a:link {
}
a:visited {
}
a:hover {
}
a:active {
}
:focus {
    border: none;
	outline: none;
}


/************************************************************************************
AREAS COMUNES (
*************************************************************************************/

#container {
	width: 100%; 
	max-width: 960px; 
	min-width: 720px; 
	margin: 0 auto;
    position: relative;
	min-height:90%;
}

#header {
	padding: 30px 0 32px;
	display: table;
	width:100%;
	position: relative;
	z-index: 100
}

#nav {
  display: table;
  width:100%;
  position: relative;
  z-index: 100;
  background-color: #FF8431;
  border-top: 1px #989898 solid;
  border-bottom: 11px solid #F7594F;
  padding: 0;
  height: 39px;
  margin-bottom: 2px
}

#main {
 display: block;
 width:100%;
 position: relative;
 margin-bottom: 1em;
 clear: both;
 min-height: 30em;
}

#footer {
   border-top: 1px solid #D7D7D7;
   background-color: #1A1A1A
}

/************************************************************************************
GRILLA DE DIAGRAMACION
*************************************************************************************/

.col, .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
    display: inline;
    float: left;
    margin-left: 1.04166667%;	
    margin-right: 1.04166667%;
	min-height:1px;
	position: relative;
}


.col, .col1 {
    width: 6.25%
}

.col2 {
    width: 14.5833333%
}

.col3 {
    width: 22.9166667%
}

.col4 {
    width: 31.25%
}

.col5 {
    width: 39.5833333%
}

.col6 {
     width: 47.9166667%
}

.col7 {
     width: 56.25%
}

.col8 {
     width: 64.5833333%
}

.col9 {
     width: 72.9166667%
}

.col10 {
     width: 81.25%
}

.col11 {
     width: 89.5833333%
}

.col12 {
     width: 97.91666665%
}

/*para indentar columnas*/

.push1 {
	margin-left: 9.375000009%	
}

.push2 {
	margin-left: 17.708333317%	
}

.push3 {
	margin-left: 26.04166671%	
}

.push4 {
	margin-left: 34.375%	
}

.push5 {
	margin-left: 42.70833331%	
}

.push6 {
	margin-left: 51.04166671%	
}

.push7 {
	margin-left: 59.375%	
}

.push8 {
	margin-left: 67.70833331%	
}

.push9 {
	margin-left: 76.04166671%	
}

.push10 {
	margin-left: 84.375%	
}

.push11 {
	margin-left: 92.70833331%	
}


/************************************************************************************
ANCHOS PARA COLUMNAS ANIDADAS
*************************************************************************************/
.col8 > .col4 {
     width: 51.04166671%
}


/************************************************************************************
COMODINES
*************************************************************************************/

span.clearfix, .clear {
    clear: both;
    display: block;
    max-height: 0;
    overflow: hidden;
}

.colmargen0, .margenabajo0 {
     margin:0 !important
}

.floatright {
	float: right
}

.invisible {
	display:none	
}



/************************************************************************************
media querys
*************************************************************************************/

/* Mobile */
	
@media only screen and (max-width: 480px) {
	  /* Style adjustments for viewports 480px and under go here */
	}
	
@media only screen and (max-width: 767px) {
		body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; background: none; background-color: #f8f8f8   }
		#container { width: auto; margin-left: 10px; margin-right: 10px; min-width: 0}
		#hedaer  {margin:0}
		.col, .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 { width: auto !important; float: none; margin-left: 0; margin-right: 0; display:block; clear:both}			
		.push1, .push2, .push3, .push4, .push5, .push6, .push7, .push8, .push9, .push10, .push11 { margin-left: 0% !important;}
		.col8 > .col4 { width: auto !important; float: none; margin-left: 0; margin-right: 0; display:block}
		.floatright {float:none}
	}