body{
	position: relative;
	margin: 0;
}
#todo{
	transition: -webkit-filter .1s;
}
.blur{
	-webkit-filter: blur(10px);
}
.error{
	float: right;
	margin-top: -35px;
	margin-right: 7px;
	display: none;
	color: rgb(224, 137, 137) !important;
}

a, button{
	text-decoration: none !important;
	outline: none !important;
}



/*/////////////////////////  INICIO  //////////////////////////////////*/

#temas_responsivos, #planes, #clientes, #faq{padding-top: 20px;}

#navbar{
	background-color: #FFF;
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s;
}

.navbar-toggle{
	margin-right: 10px;
	padding: 5px;
}
.navbar-toggle .icon-bar{
	background-color: #625F5E;
	height: 4px;
	border-radius: 5px;
	width: 25px;
}

#navbar.affix{border-color: #ddd;}

#navbar .navbar-nav > li > a{
	color: #625F5E;
	font-weight: 500;
}
#navbar .navbar-nav > li > a:hover{background: linear-gradient(transparent 95%, #D42328 5%);}
#navbar .navbar-nav > li.active > a{background: linear-gradient(transparent 95%, #D42328 5%);}

#inicio{margin-top: 70px;}

#inicio .page-header > a{margin-top: 10px;}

#inicio .page-header{border: none;}

#logo{width: 140px;}

#bg1{
	text-align: center;
	width: 100%;
}
#bg1 img{
	width: 100%;
	max-width: 800px;
}
#que_si{
	margin-top: 70px;
}
#que_si > div{
	padding: 0 !important;
}
#que_si > div > .text{
	height: 60px;
	overflow: hidden;
	padding: 0 40px;
	text-align: justify;
	transition: all .5s;
}
.imac{
	margin: auto;
	width: 200px;
	height: 180px;
	padding: 10px 16px;
	background: url(img/imac.png) no-repeat;
	background-size: contain; 
}
#screen-video{
	width: 300px;
	height: 260px;
	padding: 14px 24px;
	background-size: 314px 260px !important;
}
#screen-slider > div{
	width: 167px;
	height: 100px;
	position: absolute;
	overflow: hidden; 
	opacity: 0;
	transition: opacity 1s;
	-webkit-animation: slide-tour 40s linear infinite;
}
#screen-slider > :nth-child(1){
	background: url(img/pano.jpg) repeat-x;
	background-size: 900px 100px;
}
#screen-slider > :nth-child(2){
	background: url(img/pano1.jpg) repeat-x;
}
#screen-slider > :nth-child(3){
	background: url(img/pano2.jpg) repeat-x;
}
.ver{
	opacity: 1 !important;
}
/*@-webkit-keyframes slide-tour{
	from{ background-position-x: 0; }
	to{ background-position-x: -900px; }
}
@-moz-keyframes slide-tour{
	from{ background-position-x: 0; }
	to{ background-position-x: -900px }
}

#screen-dominio > div > div{
	-webkit-animation: slide-dominio 60s linear infinite;
}

@-webkit-keyframes slide-dominio{
	from{ margin-top: 0; }
	to{ margin-top: -1600px; }
}
@-moz-keyframes slide-dominio{
	from{ margin-top: 0; }
	to{ margin-top: -1600px; }
}*/
#screen-video > video{
	width: 266px;
}

#screen-slider > div > img{
	height: 100%;
	width: 250%;
}
#screen-dominio > div{
	width: 167px;
	height: 100px;
	overflow: hidden;
}

#screen-dominio > div > div > img{
	width: 100%;
}
#que_si .glyphicon-chevron-down, #que_si .glyphicon-chevron-up{
	width: 50px;
	border-radius: 3px;
	cursor: pointer;
	transition: all .2s;
}
#que_si .glyphicon-chevron-down:hover, #que_si .glyphicon-chevron-up:hover{
	background: rgb(100,100,100);
	color: white;
}
.drop{height: 260px !important;}




/*//////////////  ACTIVAR SISTEMA Y REGISTRARSE  //////////////////////*/
#registrarModal table td.text-right{
	width: 220px !important;
}

#lada{width: 40px;}

#reg-tel > input{
	background-color: transparent;
	outline: none;
	border: none;
}

/*///////////////////////  PLANTILLAS  ////////////////////////////////*/
#rowPlan{
	overflow: hidden;
    padding-left: 10px;
    padding-right: 10px;
}
#rowCli{
	overflow: hidden;
}

#rowPlan.masPlant + #masPlan, #rowCli.masPlant + #masCli{display: none;}

.planti{padding: 10px;}


.planti_info{
	width: 100%;
	position: relative;
	margin-bottom: -28px;
	color: white;
	text-align: center;
	height: 28px;
	font-size: medium;
}
.planti_info > p{
	background: rgba(68, 68, 68, 0.59);
	overflow: hidden;
	height: 0;
	margin: 0;
	border-radius: 5px 5px 0 0;
	transition: all .2s;
}
.planti img{
	width: 100%;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.17);
	border-radius: 5px;
	transition: all .2s;
}
.planti div:hover .planti_info > p, .planti div:hover  .planti_ver > p{
	height: 28px;
	padding: 3px 0;
}
.planti > div:hover img{box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.3), 0 4px 15px 0 rgba(0, 0, 0, 0.25);}

#masPlan, #masCli{
	font-size: 50px;
	display: block;
	text-align: center;
}

/*/////////////////////////  PLANES  //////////////////////////////////*/
.paquete{
	border-radius: 4px;
	margin-bottom: 20px;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.paquete:hover{background-color: #F9F9F9;}
.paquete > h4{
	margin: 0;
	padding:10px;
}
.paquete > p{
	margin-bottom: 10px;
	padding: 10px;
}

.paquete > div{
	border-top: 1px solid #ddd;
	padding: 10px;
}
.paquete > div > label > a{color: #5CB85C;}
#tabla-planes{
	margin: 20px auto;
}
#tabla-planes .text-center{
	width: 100px;
}
#tabla-planes tr > td:first-child{
	padding: 5px;
	width: 430px;
}
#tabla-planes tr:first-child > td{
	font-weight: bold;
	font-size: large;
}


/*////////////////////////  CLIENTES  /////////////////////////////////*/
#slider-clientes{
	/*background: url(img/clientes.jpg);
	-webkit-animation: slide-cliente 40s linear infinite;*/
}
#slider-clientes > div{
	text-align: center;
}
#slider-clientes > div img{
	max-width: 100%;
	max-height: 100%;
}

/*@-webkit-keyframes slide-cliente{
	from{ background-position-x: 0; }
	to{ background-position-x: -1819px; }
}
@-moz-keyframes slide-cliente{
	from{ background-position-x: 0; }
	to{ background-position-x: -1819px; }
}*/

.positionX2{
	background-position-x: -1819px !important; 
}
div[class^="difu"]{
	height: 100%;
	width: 50px !important;
}
.difu-left{
	float: left;
	background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}
.difu-right{
	float: right;
	background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
}

/*////////////////////////  CONTACTO  /////////////////////////////////*/
/*#reg-tel{
	height: 30px;
	width: 100%;
	outline: none;
	padding: 0 10px;
	font-size: 17px;
	border-radius: 5px;
	background: #fff;
	border: 1px solid #ccc;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	color: #666;
	transition: box-shadow .2s;
}*/
#contactModal .form_modal textarea{
	resize: none !important;
	height: 150px;
	transition: background .2s;
}

.modal{color: #444;}



.modal ::-webkit-input-placeholder {
		color: rgb(224, 137, 137);
}
.form_modal td > input:focus, .form_modal textarea:focus{
	box-shadow: 0 0 5px rgb(20,20,20);
}
.form_modal table{
	margin: auto;
	max-width: 510px;
	width: 100%;
}
.form_modal table td.text-right{
	padding: 0 10px;
	font-family: sans-serif;
	font-size: large;
	color: #444;
	width: 110px;
}
.verde{
	color: #AED3AE;
}
.verde:hover{
	text-decoration: none !important;
	color: #8BD28B;
}



/*/////////////////////////  FOOTER  //////////////////////////////////*/
#footer{
	width: 100%;
	background-color: #F3F3F3;
	padding: 20px 0;
}
#footer > div > span{cursor: pointer;}

#footer > div > a{color: #777;}

/*////////////////////////  TOOLBOX  //////////////////////////////////*/
#toolbox{
	width: 250px;
	height: 345px;
	border-radius: 5px 5px 0 0;
	position: fixed;
	bottom: 0;
	right: 0;
	background-color: #DC6C6E;
	box-shadow: 0 0 5px #B7ADA6;
	z-index: 1040;
}

#toolbox a, #toolbox-ctn1 > ul > span{
	color: #FFF;
}
#toolbox .tab-content{
	background-color: #FFF;
	height: 320px;
}

#toolbox .tab-content > div{
	height: 100%;
	overflow: scroll;
}

#toolbox.oculto #tool-toggle{display: none;}

#toolbox .nav>li>a{
	padding: 2px 10px;
}
#toolbox .nav .glyphicon{
	padding: 5px 10px;
}

#toolbox .nav > li > a:hover{
	background-color: rgba(255,255,255,0);
	border-color: rgba(0,0,0,0);
	color: white;
}
.height100{height: 100%;}

/*/  Inmuebles recientes  /*/
.inmueble{
	width: 100%;
	padding: 5px;
    border-bottom: 1px solid #ddd;
	display: -webkit-inline-box;
	display: -moz-inline-box;
	display: inline-box;
}

.inmueble > img{
	width: 70px;
}
.inmueble p{
	margin: 0;
	max-width: 170px;
	height: 18px;
	white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis;
}
.inmueble > div > p > img{
	height: 19px;
}
.inmueble > div{
	font-size: small;
}
.foto-inm{
	width: 70px;
	height: 55px;
	border-radius: 3px;
	margin-right: 5px;
	background-size: cover !important;
}

#toolbox-ctn2 > p{
	display: none;
}


/*/  Juego  /*/

#juego > div{padding: 5px;}

.digito{
	width: 40px;
	height: 40px;
	background: url(img/numerosw.jpg) repeat-y; 
	background-position-y: -360px; 
	background-size: 40px;
	display: -webkit-inline-box;
	display: -moz-inline-box;
	display: inline-box;
	border-radius: 5px;
	margin: 5px 0;
}
.digito > img{
	border-radius: 5px;
	width: 40px;
}
.roller{
	-webkit-animation: roller .4s linear infinite;
}
@-webkit-keyframes roller{
	from{ background-position-y: -360px; }
	to{ background-position-y: 0; }
}
#pregunta, .respuesta{
	padding: 5px;
	border-radius: 5px;
	font-size: small;
	font-weight: bold;
	line-height: 1;
	color: rgb(50,50,50);
}


#pregunta{
	background-color: #D0853A;
	margin: 0 auto 4px;
	text-align: center;
	transition: opacity .3s;
}
#pregunta:after{
	content: '';
	background: url(img/speak.png) no-repeat;
	background-size: cover;
	display: block;
	position: relative;
	margin-bottom: -17px;
	margin-left: 130px;
	width: 24px;
	height: 17px;
}

.respuesta{
	background-color: #E7E7E7;
	text-align: left;
	margin: 7px auto;
	cursor: pointer;
	transition: background-color .3s;
}
#r1{ transition: opacity .5s .6s; }
#r2{ transition: opacity .5s .9s; }
#r3{ transition: opacity .5s 1.2s; }
.respuesta:hover{
	background-color: #C8C8C8;
}
#numerador{
	width: 130px;
	height: 50px;
}
#numerador > img{
	width: 70px;
	position: relative;
	margin-top: -50px;
	margin-left: 140px;
}
.opacity{
	opacity: 0 !important;
	cursor: default !important;
}

.bien{background-color: #6FCB6F!important;}
.mal{background-color: #D75855!important;}

#preguntar{
	outline: none !important;
	margin-left: 34px;
}


/*//////////////////////////  TIPS  /////////////////////////////////*/

#tips{
	width: 370px;
	position: fixed;
	bottom: 50px;
	left: 50px;
	display: none;
}
#tips > .alert{
	font-size: smaller;
	margin-bottom: 0;
}

#tips div p{
	display: none;	
}

/*//////////////////////  Modal sin Bootstrap  /////////////////////////////////*/

.modalDialog {
	overflow: auto;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.4);
	z-index: 1200;
	opacity:0;
	-webkit-transition: opacity 0.2s ease-in;
	   -moz-transition: opacity 0.2s ease-in;
	        transition: opacity 0.2s ease-in;
	pointer-events: none;

}.modalDialog:target {
	opacity:1;
	pointer-events: auto;

}	.modalDialog > div {
		position: relative;
		margin: -100px auto 0;
		border-radius: 5px;
		max-width: 600px;
		height: 94%;
    	background-color: #fff;
    	box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    	padding: 10px;
    	-webkit-transition: margin-top 0.2s ease-in;
	       -moz-transition: margin-top 0.2s ease-in;
	            transition: margin-top 0.2s ease-in;
	}
	.modalDialog:target > div{
		margin-top: 25px;

}	.close {
		float: right;
		font-size: 18px;
		font-weight: bold;
		line-height: 1;
		color: #000000;
		text-shadow: 0 1px 0 #ffffff;
		opacity: 0.2;
		filter: alpha(opacity=20);
	}.close:hover {opacity: 0.5}

	.modalDialog > div > form{
		width: 100%;
	}


#Mregistrar > div > iframe, #activarModal > div > iframe{
	width: 100%;
    border: none;
    height: calc(100% - 30px);
}

#chatWin > .chat > .btn{
	background-color: #fff;
	color: #8E4142;				
}
#chatWin > .chat > .btn:hover{
	background-color: aliceblue;
}
.chat > div{
	background-color: #E5F0F9 !important;
	border: 1px solid #D8E9F9 !important;
}
.chat > div.pull-right{
	background-color: #F5FAFF !important;
	border: 1px solid #E8F4FF !important;
}

/*//////////////////////  Media Query  //////////////////////////////*/
#movilChat{
	position: fixed;
	bottom: 0;
	right: 5px;
	padding: 6px 10px;
	border-radius: 4px 4px 0 0;
	background-color: #5cb85c;
	color: #fff;
}

#rowCli > div{
	height: 100px;	
	padding: 15px !important;	
}

@media (max-width: 768px){

	#rowPlan > :not(:nth-child(-n+14)), #rowCli > :not(:nth-child(-n+6)) {display: none;}
	.opa1{display: block !important;}
}

@media (min-width: 768px){
	#lada{width: 26px;}
	.col-5-sm{width: 20%}
	#tips.mostrar{display: block;}
	#rowPlan{
		max-height: 650px;
		padding: 0;
		transition: max-height 10s linear;
	}
	#rowCli{
		max-height: 150px;
		transition: max-height 10s linear;	
	}

	#rowPlan.masPlant, #rowCli.masPlant{max-height: 10000px !important;}
	.planti, #rowCli > div{
		padding: 25px;
		opacity: 0;
		transform: scale(0.5);
		transition: all 1s cubic-bezier(.71,1.7,.76,1.12);

	}

	.opa1, #rowPlan > :nth-child(-n+15), #rowCli > :nth-child(-n+5){
		opacity: 1 !important;
		transform: scale(1) !important;
	}
	#toolbox.oculto{margin-bottom: -320px;}

	#movilChat{display: none;}
}

@media (min-width: 992px){
	#rowCli > div{
		height: 150px;
		padding: 25px !important;
	}
	#rowPlan{max-height: 680px}
	.col-5{width: 20%;}
}

@media (min-width: 1200px){
	#rowPlan{max-height: 810px;}
}



@media (min-width: 1400px){/* and (min-height: 700px)*/
	#toolbox.oculto{margin-bottom: 0;}
	#navbar{
		width: calc(100% - 250px);
	}

	#toolbox{
		height: 100%;
		padding-top: 0;
		border-radius: 0;
	}
	#todo{
		width: calc(100% - 250px);
		float: left;
	}
	#toolbox-ctn1{
		height: 100%;
	}
	#toolbox-ctn1 > ul{
		display: none;
		visibility: hidden;
	}

	#inm-rec{
		height: calc(50% - 160px) !important;
		overflow: scroll;
	}
	#juego{
		height: calc(50% - 160px) !important;
	}
	#chatWin{
		height: 320px !important;
	}
	#toolbox-ctn2{
		height: 100% !important;
	}
	#toolbox-ctn2 > div{
		width: 100%;
		background-color: #FFF;
		display: block;
		visibility: visible;
		padding-top: 26px;
	}
	/*#toolbox-ctn2 > p {
		margin: 0;
		padding: 3px 5px;
		background: #B7ADA6;
		color: #FFF;
		display: block;
	}*/
	#inm-rec:before{content: 'Inmuebles recientes';}
	#juego:before{content: 'Juego';}
	#chatWin:before{content: 'Chat ayuda';}
	#toolbox-ctn2 > div:before{
		padding: 3px 5px;
		width: 100%;
		background: #DC6C6E;
		color: #FFF;
		margin-top: -26px;
		display: block;
		position: absolute;
		z-index: 1;
	}
	
}