@charset "utf-8";
/* CSS Document */

/* * {
  font-family: Arial, sans;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
h1, h2 {
  margin: 1em 0 0 0;
  text-align: center;
}
h2 {
  margin: 0 0 1em 0;
}*/
#container {
  margin: 0 auto;
  width: 90%;
/*  padding-top:15px;*/
  padding-bottom:15px;
}
#accordion input {
  display: none;
}
#accordion label {
  background: #555 url('../css/ico-acordeon-inf.png') no-repeat;
  background-position: right;
  border-radius: .25em;
  cursor: pointer;
  display: block;
  margin-bottom: .125em;
  padding: .55em 1em;
  z-index: 20;
  color: #fff;
  font-size:16px;
}
#accordion label:hover {
  background: #777 url('../css/ico-acordeon-inf.png') no-repeat;
  background-position: right;
  }
#accordion input:checked + label {
  background: #EE1C25 url('../css/ico-acordeon-sup.png') no-repeat;
  background-position: right;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  color: #FFFFFF;
  margin-bottom: 0;
}
#accordion article {
  background: #f7f7f7;
  height:0px;
  overflow:hidden;
  padding-left: 1em;
  padding-right: 1em;
  z-index:10;
  background-color:#FFF;
  font-size:14px;
}
#accordion article p {
  padding: 0em;
}
#accordion input:checked ~ article {
  border-bottom-left-radius: .25em;
  border-bottom-right-radius: .25em;
  height: auto;
  margin-bottom: .125em;
}


.video-container {
    position: relative;
    padding-bottom: 45%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
	padding-left:10%;
	padding-right:10%;
    top: 3%;
    left: 0;
    width: 80%;
    height: 90%;
}

/*--------------------------------------- TABLAS-------------------------*/

table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Esto es para el estilo zebra. Una fila gris, la siguiente blanca, luego gris, etc. */
tr:nth-of-type(odd) { 
  background: #eee; 
  font-size:14px;
  height:35px;
}
th { 
  background: #555; 
  color: #FFFFFF; 
/*  font-weight: bold; */
  height:25px;
  font-size:18px;
  font-weight:normal;
  
}
td, th { 
  padding: 10px; 
  border: 1px solid #DDD; 
  text-align: left; 
  }

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Hacer que la tabla ya no se vea como una tabla */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Se ocultan los títulos de las columnas ( nombre, apelllido y edad en este caso ) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #DDD; }
	
	td { 
		/* hacer que los campos se comporten como filas */
		border: none;
		border-bottom: 1px solid #dddddd; 
		position: relative;
		padding-left: 50%;
		 
	}
	
	td:before { 
		/* Se le agregan los títulos */
		position: absolute;
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		color:#D52B1E; /* COLOR NARANJA */
		font-style:italic;
	}
	
	/* Se ponen los nuevos titulares. En este caso solo serían: nombre, apellido y edad.
           Pero se le pueden agregar todos los necesarios */
	td:nth-of-type(1):before { content: "NEOTIME"; }
	td:nth-of-type(2):before { content: "LEDI"; }
/*	td:nth-of-type(3):before { content: "Temp. Alta"; }*/

}