/* ================================================================ 
Copyright (c) 2014 Telstock, S.A. de C.V. All rights reserved.

Elaboró: Vanessa Alejandra Muñoz Corbalá,  Agosto 29, 2014
=================================================================== */
@charset "UTF-8";
/* CSS Document */
#bg-mobile{ background: url('../../img/app-t-manager/tc-movil.png') no-repeat right bottom;width:100%;min-height:100%;position:absolute;right:0px;top:-250px;overflow:hidden;}
.bg-works{padding:0 25px; z-index:99;}
/* ===== Showcase ===== */
#banner {
	margin-left:0;
	margin-right:0;
	margin-bottom:0;
	display:block;
	height:750px;}
.carousel-inner {
	height:100%;
	position: absolute;
	right: 92px;
    width: 257px;}
.showcase {
    display: block;
    height: 400px;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 92px;
    width: 258px;}
.roundTouch{background:rgba(255,255,255,0.95);opacity:1;filter:alpha(opacity=100);border-radius:30px;width:30px;height:30px;position:absolute;left:110px;top:10%;border:4px solid #AAAAAA;}	
	
	
/*-----------------------------------------------------------------------------------*/
/*	01.	Slide1
/*-----------------------------------------------------------------------------------*/
#slide1 .roundTouch{
    -webkit-animation: roundTouch_s1 6s infinite ease-in-out backwards;
    -moz-animation: roundTouch_s1 6s infinite ease-in-out backwards;
    -ms-animation: roundTouch_s1 6s infinite ease-in-out backwards;
    animation: roundTouch_s1 6s infinite ease-in-out backwards; }
	
@-webkit-keyframes roundTouch_s1{
	0% {left:225px;top:1%; opacity: 1; }
	65% {left:10px;top:48%; opacity: 1; -webkit-transform: scale(1);}
	90% {left:10px;top:48%; opacity:0; -webkit-transform: scale(2); }
	100% {left:10px;top:48%; opacity:0; -webkit-transform: scale(2); }	}
@-moz-keyframes roundTouch_s1{
	0% {left:225px;top:1%; opacity: 1; }
	75% {left:10px;top:48%; opacity: 1; -moz-transform: scale(1);}
	90% {left:10px;top:48%; opacity:0; -moz-transform: scale(2); }
	100% {left:10px;top:48%; opacity:0; -moz-transform: scale(2); }}
@-ms-keyframes roundTouch_s1{
	0% {left:225px;top:1%; opacity: 1; }
	75% {left:10px;top:48%; opacity: 1; -ms-transform: scale(1);}
	90% {left:10px;top:48%; opacity:0; -ms-transform: scale(2); }
	100% {left:10px;top:48%; opacity:0; -ms-transform: scale(2); }}
@keyframes roundTouch_s1{
	0% {left:225px;top:1%; opacity: 1; }
	75% {left:10px;top:48%; opacity: 1; transform: scale(1);}
	100% {left:10px;top:48%; opacity:0; transform: scale(2); }
	90% {left:10px;top:48%; opacity:0; transform: scale(2); }
	100% {left:10px;top:48%; opacity:0; transform: scale(2); }}

/*-----------------------------------------------------------------------------------*/
/*	02.	Slide3
/*-----------------------------------------------------------------------------------*/
#slide3 .roundTouch{
    -webkit-animation: roundTouch_s3 6s infinite ease-in-out backwards;
    -moz-animation: roundTouch_s3 6s infinite ease-in-out backwards;
    -ms-animation: roundTouch_s3 6s infinite ease-in-out backwards;
    animation: roundTouch_s3 6s infinite ease-in-out backwards; }
	
@-webkit-keyframes roundTouch_s3 {
	0% {left:225px;top:20px; opacity: 1; }
	75% {left:190px;top:220px; opacity: 1; -webkit-transform: scale(1);}
	90% {left:190px;top:220px; opacity:0; -webkit-transform: scale(2); }
	100% {left:190px;top:220px; opacity:0; -webkit-transform: scale(2); }}
@-moz-keyframes roundTouch_s3 {
	0% {left:225px;top:20px; opacity: 1; }
	75% {left:190px;top:220px; opacity: 1; -moz-transform: scale(1);}
	90% {left:190px;top:220px; opacity:0; -moz-transform: scale(2); }
	100% {left:190px;top:220px; opacity:0; -moz-transform: scale(2); }}
@-ms-keyframes roundTouch_s3 {
	0% {left:225px;top:20px; opacity: 1; }
	75% {left:190px;top:220px; opacity: 1; -ms-transform: scale(1);}
	90% {left:190px;top:220px; opacity:0; -ms-transform: scale(2); }
	100% {left:190px;top:220px; opacity:0; -ms-transform: scale(2); }}
@keyframes roundTouch_s3 {
	0% {left:225px;top:20px; opacity: 1; }
	75% {left:190px;top:220px; opacity: 1; transform: scale(1);}
	90% {left:190px;top:220px; opacity:0; transform: scale(2); }
	100% {left:190px;top:220px; opacity:0; transform: scale(2); }}

/*-----------------------------------------------------------------------------------*/
/*	03.	Slide4
/*-----------------------------------------------------------------------------------*/
#slide4 .roundTouch{
    -webkit-animation: roundTouch_s4 6s infinite ease-in-out backwards;
    -moz-animation: roundTouch_s4 6s infinite ease-in-out backwards;
    -ms-animation: roundTouch_s4 6s infinite ease-in-out backwards;
    animation: roundTouch_s4 6s infinite ease-in-out backwards; }
	
@-webkit-keyframes roundTouch_s4 {
	0% {left:225px;top:20px; opacity: 1; }
	75% {left:110px;top:205px; opacity: 1; -webkit-transform: scale(1);}
	100% {left:110px;top:205px; opacity:0; -webkit-transform: scale(2); }}
@-moz-keyframes roundTouch_s4 {
	0% {left:225px;top:20px; opacity: 1; }
	75% {left:110px;top:205px; opacity: 1; -moz-transform: scale(1);}
	100% {left:110px;top:205px; opacity:0; -moz-transform: scale(2); }}
@-ms-keyframes roundTouch_s4 {
	0% {left:225px;top:20px; opacity: 1; }
	75% {left:110px;top:205px; opacity: 1; -ms-transform: scale(1);}
	100% {left:110px;top:205px; opacity:0; -ms-transform: scale(2); }}
@keyframes roundTouch_s4 {
	0% {left:225px;top:20px; opacity: 1; }
	75% {left:110px;top:205px; opacity: 1; transform: scale(1);}
	100% {left:110px;top:205px; opacity:0; transform: scale(2); }}
	
/* ====== Indicadores Showcase ====== */
.carousel-indicators{
	position: relative !important;
	display:block !important;
	float:left !important;
	z-index:250;
	width:100% !important;
	padding-left:0;
	margin:0 auto !important;
	left:0 !important;
	text-align: left !important;
	font-size: 21px;
	line-height: 28px;
	font-family: "My-Regular", Arial, sans-serif;
	list-style-type: none;
    list-style: none outside none;}
.carousel-indicators li{
	display:block !important;
	position:relative !important;
	float:left !important;
	width:100%;
	height: auto !important;	
	text-indent:0px !important;
	cursor:pointer;
	background-color: transparent;
	border: 0px none transparent;
	border-radius:0;	
	margin:10px !important;
	color:#454945;
	text-decoration:none;}	
.carousel-indicators .active {
	display:block !important;
	font-size:28px;line-height:32px;letter-spacing:-1px;
	margin:10px !important;
    background-color: transparent;
    height: auto !important;
    width: 100%;
	font-family:"My-SB", Arial, sans-serif; color:#353935;}
.carousel-indicators li span{
	display:block !important;
    position: relative !important;
	float:left !important;
	left:0px !important;
	top:0px;
	height:34px;
	width:34px;
	background:#99CC00;
	border-radius:50%;
	color:#fff;
	font-family:"My-SB", Arial, sans-serif;
	font-size:20px;
	line-height:30px;
	opacity:0.5;
    filter:alpha(opacity=50);
	padding:5px;
	text-align:center;
	text-shadow:2px 2px 1px rgba(0, 0, 0, 0.25);
	margin-right:10px;}
.carousel-indicators .active  span{
	display:block !important;
	position: relative !important;
	float:left !important;
	left:0px;top:0px;
	opacity:1;filter:alpha(opacity=100);width:65px;height:65px;font-size:55px;
	line-height:65px;}
.carousel-indicators li:hover {
	font-family:"My-SB", Arial, sans-serif;
	background-color: transparent !important; color:#353935;}
#banner h1 {
	display:block;
	position:relative;
	float:left;
	margin:220px auto 20px !important;}	

/* ====== Diseño Adaptativo ====== */
@media (max-width:767px){	
.bg-works {
    padding: 0px;}
#bg-mobile{
	background-image: none !important;
    right: 0;
    top: 0;}
.carousel-inner { display:none;}}
@media (max-width:479px){	
.bg-works {
	height: 970px;}
#banner {
	height:1000px;}}
@media (min-width:0px) and  (max-width:767px){	
.c-rutas {
	font-family: "My-Regular",Arial,sans-serif;
    font-size: 21px;
    line-height: 28px;
    list-style: none outside none;
    margin: 0 -25px;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 1), 1px 1px 0 rgba(0, 0, 0, 0.7);}
.c-rutas li {
    position:relative;
	padding:10px 10px 20px 60px;
	color:#454945;
	text-decoration:none;
    text-indent: 0px;
    height: auto;
    border: 0px none transparent;
    border-radius: 0;
    background-color: transparent;
    width: 100%;
    display: inline-block;
	margin-bottom:20px;}	
.c-rutas li span{
	background:#99CC00;
	border-radius:50%;
	color:#fff;
	display:block;
    float: left;
	font-family:"My-SB", Arial, sans-serif;
	font-size:55px;
	line-height:65px;
	width:65px;
	height:65px;
	padding:5px;
    position: absolute;
	text-align:center;
	left:-20px;
	top:-5px;
	text-shadow:2px 2px 1px rgba(0, 0, 0, 0.25);}	}
@media (min-width:768px) and (max-width:825px){	
.carousel-inner { top:66px;}
#bg-mobile{ background-image: none !important;}
.carousel-inner { display:none;}
#banner { height:725px;}	
.bg-works {
	height: 500px;}}
@media (min-width:826px) and (max-width:925px){	
.carousel-inner { top:66px;}
#bg-mobile{ background-image: none !important;}
.carousel-inner { display:none;}
#banner { height:725px;}	
.bg-works {
	height: 500px;}}
@media (min-width:926px) and (max-width:991px){	
.carousel-inner { top:66px;}
#bg-mobile{ background-image: none !important;}
.carousel-inner { display:none;}
#banner { height:725px;}	
.bg-works {
	height: 500px;}}
@media (min-width:992px) and (max-width:1199px){ 
.bg-works {
	height: 550px;}
#banner { height:800px;}	
.carousel-inner { top:50px;}
#bg-mobile{ right:-20px;}}
 @media (min-width:1200px){ 
.bg-works {
	height: 500px;}}
	
#ciudad{ background: url('../../img/productos-telstock/t-manager/t_manager-funcion-01.jpg') no-repeat center -150px  rgba(0, 0, 0, 0);width:100%;min-height:100%;position:absolute;left:0px;top:0px;overflow:hidden;}
.bg-pines{padding:0; z-index:99; height: 460px;}
#pines {
	margin-left:0;
	margin-right:0;
	margin-bottom:0;
	display:block;
	height:350px;}
	
.pin-contacto{position:absolute;left:30%;top:56%;}
img.pin-contacto{width:64px;height:64px;}
	
.pin-prospecto{position:absolute;left:48%;top:32%;}
img.pin-prospecto{width:64px;height:64px;}
	
.pin-cliente{position:absolute;left:86%;top:46%;}
img.pin-cliente{width:64px;height:64px;}

.pin-contacto-detalle {position:absolute;left:28.5%;top:39%;}
	
@media (max-width:767px){
#ciudad{ background: url('../../img/productos-telstock/t-manager/t_manager-funcion-01.jpg') no-repeat scroll center -215px rgba(0, 0, 0, 0);}
.bg-pines{height: 350px;}
#pines {
	height:200px;}	
.pin-contacto{position:absolute;left:20%;top:56%;}	
.pin-prospecto{position:absolute;left:45%;top:22%;}	
.pin-cliente{position:absolute;left:70%;top:40%;}
.pin-contacto-detalle {position:absolute;left:15.5%;top:25%;}
}