@charset "utf-8";

/* ==========================================================================
   Base
   ========================================================================== */
	 
	 
body
{
	margin:0 !important;
	padding:0px !important
}

html, html a
{
	-webkit-font-smoothing: antialiased !important;
	-moz-font-smoothing: antialiased !important;
	-o-font-smoothing: antialiased !important;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	transition: 0.5s ease;
	-moz-transition: 0.5s ease;
	-webkit-transition: 0.5s ease;
	-o-transition: 0.5s ease;
}


/* === FIREFOX: Elimina outline (línea de puntos) en elementos de formulario === */  
button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner {
 border: none;
}

/* === Elimina input autofocus webkit === */  
*:focus
{
	outline: none;
}

/* ==========================================================================
   Links
   ========================================================================== */
 
/*
 * Addresses `outline` inconsistencia entre Chrome and otros navegadores.
 */
 
a:focus
{
	outline: thin dotted;
}

/*
 * Mejora la legibilidad cuando el elemento toma el foco o pasamos el ratón sobre el mismo.
 */
 
a:active, a:hover
{
	outline: 0;
	text-decoration:none;
}

/* ==========================================================================
   Contenido embebido
   ========================================================================== */
 
/*
 * 1. Elimina el borde cuando se encuentra en un elemento `a` en IE 6/7/8/9 y Firefox 3.
 * 2. Mejora la calidad de la imagen cuando es reescalada en IE7.
 */
 
img
{
	border: 0; /* 1 */
	-ms-interpolation-mode: bicubic; /* 2 */
}

/*
 * Corrige desbordamiento en IE 9.
 */
 
svg:not(:root)
{
	overflow: hidden;
}

#TarjetaTC *
{
	box-sizing: border-box;
}

/* ==========================================================================
   TOOLTIP / Estilo : Bootstrap
   ========================================================================== */

.qtip-identificacion
{
	background-clip: padding-box !important;
	background-color: #ffffff !important;
	border: 2px solid rgba(0, 0, 0, 0.3) !important;
	border-radius: 4px !important;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2) !important;
	color: #333333 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	padding: 1px !important;
}

.qtip-identificacion .qtip-titlebar
{
	font-family:"Oswald" !important;
	font-weight:lighter !important;
	background-color: #33678b !important;
	border-bottom: 1px solid #33678b !important;
	border-radius: 5px 5px 0 0 !important;
	color: #fff !important;
	font-size: 16px !important;
	font-weight: lighter !important;
	line-height: 18px !important;
	margin: 0 !important;
	padding: 8px 14px !important;
}


.qtip-identificacion .qtip-icon .ui-icon {color: #fff !important; opacity:0.6 !important}
.qtip-identificacion .qtip-icon .ui-icon:hover {color: #fff !important; opacity:1 !important}

/* ==========================================================================
   El HTML
   ========================================================================== */

#TarjetaTC h1
{
	color: #ff7500;
	float: left;
	font-family: "Oswald", sans-serif !important;
	font-size: 2.1em !important;
	font-weight: lighter;
	margin: 5px 0 10px;
	text-align: center;
	width: 100%;
}

#TarjetaTC h2
{
	font-family: "Open Sans", sans-serif !important;
	font-size:13px;
	color:#444444;
	width:100%;
	text-align:justify;
	float:left;
	margin:10px 0px;
}

#TarjetaTC p
{
	color: #232323;
	font-size: 14px !important;
	margin: 10px 0 0 !important;
	text-align: center;
	width: 100%;
}

#TarjetaTC img
{
	max-width:100%;
	width:90%
}

#TarjetaTC:hover img
{
	cursor:pointer;
	-webkit-animation-name:wobble-top;
	-webkit-animation-duration:1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function:ease-in-out;
	-moz-animation-name: wobble-top;
	-moz-animation-duration:1s;
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function:ease-in-out;
	-o-animation-name: wobble-top;
	-o-animation-duration:1s;
	-o-animation-iteration-count: 1;
	-o-animation-timing-function:ease-in-out;
	-ms-animation-name: wobble-top;
	-ms-animation-duration:1s;
	-ms-animation-iteration-count: 1;
	-ms-animation-timing-function:ease-in-out;
}

/* ==========================================================================
   ANIMACIONES
   ========================================================================== */

.om-animation-enabled
{
	opacity: 0;
}

.om-animation-enabled .omsc-animation-start
{
	opacity: 1;
}

.omsc-effect-fade-rtl
{
	animation: 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s normal forwards 1 om-rtl;
}

.omsc-effect-fade-rtl
{
	animation: 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s normal forwards 1 om-rtl;
}
 @keyframes 
om-btt
{
0% {
 opacity: 0;
 transform: translate(0px, 70px);
}
100% {
 opacity: 1;
 transform: translate(0px, 0px);
}
}
 @-webkit-keyframes 
om-btt
{
0% {
 opacity: 0;
 -webkit-transform:translate(0px, 70px);
}
100% {
 opacity: 1;
 -webkit-transform: translate(0px, 0px);
}
}
 @-moz-keyframes 
om-btt
{
0% {
 opacity: 0;
 -moz-transform:translate(0px, 70px);
}
100% {
 opacity: 1;
 -moz-transform: translate(0px, 0px);
}
}
 @-o-keyframes 
om-btt
{
0% {
 opacity: 0;
 -o-transform:translate(0px, 70px);
}
100% {
 opacity: 1;
 -o-transform: translate(0px, 0px);
}
}
 @keyframes 
om-rtl
{
0% {
 opacity: 0;
 transform: translate(70px, 0px);
}
100% {
 opacity: 1;
 transform: translate(0px, 0px);
}
}
 @-o-keyframes 
om-rtl
{
0% {
 opacity: 0;
 -o-transform: translate(70px, 0px);
}
100% {
 opacity: 1;
 -o-transform: translate(0px, 0px);
}
}
 @-webkit-keyframes 
om-rtl
{
0% {
 opacity: 0;
 -webkit-transform: translate(70px, 0px);
}
100% {
 opacity: 1;
 -webkit-transform: translate(0px, 0px);
}
}
 @-moz-keyframes 
om-rtl
{
0% {
 opacity: 0;
 -moz-transform: translate(70px, 0px);
}
100% {
 opacity: 1;
 -moz-transform: translate(0px, 0px);
}
}


/* Wobble Top */
@keyframes 
wobble-top
{
 16.65% {
 transform: skew(-12deg);
}
 33.3% {
 transform: skew(10deg);
}
 49.95% {
 transform: skew(-6deg);
}
 66.6% {
 transform: skew(4deg);
}
 83.25% {
 transform: skew(-2deg);
}
 100% {
 transform: skew(0);
}
}
 @-webkit-keyframes 
wobble-top
{
 16.65% {
 -webkit-transform: skew(-12deg);
}
 33.3% {
 -webkit-transform: skew(10deg);
}
 49.95% {
 -webkit-transform: skew(-6deg);
}
 66.6% {
 -webkit-transform: skew(4deg);
}
 83.25% {
 -webkit-transform: skew(-2deg);
}
 100% {
 -webkit-transform: skew(0);
}
}
 @-moz-keyframes 
wobble-top
{
 16.65% {
 -moz-transform: skew(-12deg);
}
 33.3% {
 -moz-transform: skew(10deg);
}
 49.95% {
 -moz-transform: skew(-6deg);
}
 66.6% {
 -moz-transform: skew(4deg);
}
 83.25% {
 -moz-transform: skew(-2deg);
}
 100% {
 -moz-transform: skew(0);
}
}
 @-o-keyframes 
wobble-top
{
 16.65% {
 -o-transform: skew(-12deg);
}
 33.3% {
 -o-transform: skew(10deg);
}
 49.95% {
 -o-transform: skew(-6deg);
}
 66.6% {
 -o-transform: skew(4deg);
}
 83.25% {
 -o-transform: skew(-2deg);
}
 100% {
-o-transform: skew(0);
}
}
 @-ms-keyframes 
wobble-top
{
 16.65% {
 -ms-transform: skew(-12deg);
}
 33.3% {
 -ms-transform: skew(10deg);
}
 49.95% {
 -ms-transform: skew(-6deg);
}
 66.6% {
 -ms-transform: skew(4deg);
}
 83.25% {
 -ms-transform: skew(-2deg);
}
 100% {
-o-transform: skew(0);
}
}




/*
/*
/* CSS ESPECÍFICOS PARA DISPOSITIVOS PEQUEÑOS  480 px
*/


 @media screen and (max-width: 736px) {

.qtip
{
	max-width: 440px !important;
	width:100%
}

.qtip-identificacion
{
	max-width:440px !important;
	width:100% !important
}

#TarjetaTC h1
{
	font-size: 1.5em !important;
}
}
 @media screen and (max-width: 480px) {

.qtip
{
	max-width: 255px !important;
	width:100%
}

.qtip-identificacion
{
	max-width:255px !important;
	width:100% !important
}

#TarjetaTC h1
{
	font-size: 1.5em !important;
}
}
 @media screen and (max-width: 240px) {

.qtip
{
	max-width: 250px !important;
	width:100%
}

.qtip-identificacion
{
	max-width:250px !important;
	width:100% !important
}

#TarjetaTC h1
{
	font-size: 1.5em !important;
}
}