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

@font-face {
  font-family: 'Myriad Pro';
  src: local('MyriadPro'),
       local('MyriadPro-Regular'),
       url('MyriadPro-Regular.otf') format('opentype');
}

body 
{
	margin:0;
	 font-family: 'Myriad Pro';
}

header 
{
	width:100%;
	 font-family: 'Myriad Pro';
}

#logo 
{
	width:100%;
	background-color:#FFF;
	text-align:center;
}

.menu 
{
	padding-bottom:7px;
	padding-top:7px;
	background-image:url(imagenes/sis-barra-inferior-2.jpg);
	background-size:100% 100%;
	width:100%;
	text-align:center;
	font-family: 'Myriad Pro';
}

.botones
{
	color:#FFF;
	 font-family: 'Myriad Pro';
	font-size:16px;
	text-decoration:none;
}

.botones:hover
{
	color: #333;
}

.texto 
{
	width:100%;
	background:rgba(0,0,0,0.7);
	margin:auto;
	 font-family: 'Myriad Pro';
}

.tabla-productos-texto td
{
	font-family: 'Myriad Pro';
	font-size: larger;
}

.bg-clientes
{
	background-image:url(imagenes/bg-clientes.jpg);
	background-size:100% 100%;
	width:100%;
}

.tabla-contacto-texto 
{
	font-family: 'Myriad Pro';
	color:#BE1B2B;
	font-size: larger;
	display:inline;
}

.tabla_contacto 
{
	background-image:url(imagenes/contacto-fondo-forma.png);
	display:inline-table;
	vertical-align:top;
}

.tabla_imagen_contacto 
{
	display:inline-table;
	vertical-align:top;
}

.tabla-imagen-contacto-texto 
{
	font-family: 'Myriad Pro';
	color: #BE1B2B;
	font-size: 18px;
	display:inline;
}

.tabla_contacto input[type=text]
{
	color: #B91122;
	border-radius:0px;
	width:100%;
	height:30px;
	border: solid 0px #FFF;
 	background-color: #C6C6C6; 
	box-shadow: -2px -2px 1px rgba(0,0,0,0.3); 
}
.tabla_contacto textarea
{
	color:#B91122;
	border-radius:0px;
	width:100%;
	height:100px;
	border: solid 0px #FFF;
	background-color: #C6C6C6; 
	box-shadow: -2px -2px 1px rgba(0,0,0,0.3); 
}

.texto-contacto
{
	width:40%;
}

.transparencia
{
	background:rgba(0, 0, 0, 0.1);
}

.slider{
	width: 640px; /*Same as width of the large image*/
	position: relative;
	/*Instead of height we will use padding*/
	padding-top: 320px; /*That helps bring the labels down*/
	
	margin: 50px auto;
	
	/*Lets add a shadow*/
	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}


/*Last thing remaining is to add transitions*/
.slider>img{
	position: absolute;
	left: 0; top: 0;
	transition: all 0.5s;
}

.slider input[name='slide_switch'] {
	display: none;
}

.slider label {
	/*Lets add some spacing for the thumbnails*/
	margin: 18px 0 0 18px;
	border: 3px solid #999;
	
	float: left;
	cursor: pointer;
	transition: all 0.5s;
	
	/*Default style = low opacity*/
	opacity: 0.6;
}

.slider label img{
	display: block;
}

/*Time to add the click effects*/
.slider input[name='slide_switch']:checked+label {
	border-color: #666;
	opacity: 1;
}
/*Clicking any thumbnail now should change its opacity(style)*/
/*Time to work on the main images*/
.slider input[name='slide_switch'] ~ img {
	opacity: 0;
	transform: scale(1.1);
}
/*That hides all main images at a 110% size
On click the images will be displayed at normal size to complete the effect
*/
.slider input[name='slide_switch']:checked+label+img {
	opacity: 1;
	transform: scale(1);
}
/*Clicking on any thumbnail now should activate the image related to it*/

/*We are done :)*/

.tarjeta
{
	-webkit-box-shadow: 9px 12px 24px 8px rgba(0,0,0,0.53);
	-moz-box-shadow: 9px 12px 24px 8px rgba(0,0,0,0.53);
	box-shadow: 9px 12px 24px 8px rgba(0,0,0,0.53);
}