/*BOTON*/
#chat{
	display:scroll;
	position:fixed;
	bottom: 30px;
	right: 30px;
	cursor:pointer;
	background: transparent;
	z-index:99000;
}

#chat img:hover {
	-webkit-animation-name: wobble-to-top-right;
	animation-name: wobble-to-top-right;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
}

@-webkit-keyframes wobble-to-top-right {
	 	16.65% {
  	    -ms-transform: translate(2.5px, -2.5px);
	    -webkit-transform: translate(2.5px, -2.5px);
	    transform: translate(2.5px, -2.5px);
  	}
  	33.3% {
  		-ms-transform: translate(-2px, 2px);
	    -webkit-transform: translate(-2px, 2px);
	    transform: translate(-2px, 2px);
  	}
  	49.95% {
  		-ms-transform: translate(1.5px, -1.5px);
	    -webkit-transform: translate(1.5px, -1.5px);
	    transform: translate(1.5px, -1.5px);
  	}
  	66.6% {
  		-ms-transform: translate(-1px, 1px);
	    -webkit-transform: translate(-1px, 1px);
	    transform: translate(-1px, 1px);
  	}
  	83.25% {
  		-ms-transform: translate(0.5px, -0.5px);
	    -webkit-transform: translate(0.5px, -0.5px);
	    transform: translate(0.5px, -0.5px);
  	}
  	100% {
  		-ms-transform: translate(0, 0);
	    -webkit-transform: translate(0, 0);
	    transform: translate(0, 0);
  	}
}
@keyframes wobble-to-top-right {
  	16.65% {
  	    -ms-transform: translate(2.5px, -2.5px);
	    -webkit-transform: translate(2.5px, -2.5px);
	    transform: translate(2.5px, -2.5px);
  	}
  	33.3% {
  		-ms-transform: translate(-2px, 2px);
	    -webkit-transform: translate(-2px, 2px);
	    transform: translate(-2px, 2px);
  	}
  	49.95% {
  		-ms-transform: translate(1.5px, -1.5px);
	    -webkit-transform: translate(1.5px, -1.5px);
	    transform: translate(1.5px, -1.5px);
  	}
  	66.6% {
  		-ms-transform: translate(-1px, 1px);
	    -webkit-transform: translate(-1px, 1px);
	    transform: translate(-1px, 1px);
  	}
  	83.25% {
  		-ms-transform: translate(0.5px, -0.5px);
	    -webkit-transform: translate(0.5px, -0.5px);
	    transform: translate(0.5px, -0.5px);
  	}
  	100% {
  		-ms-transform: translate(0, 0);
	    -webkit-transform: translate(0, 0);
	    transform: translate(0, 0);
  	}
}

#chatMobile{
	display:none;
	position:fixed;
	bottom: 80px;
	right: 50px;
	padding: 7px;
	border-radius: 50%;
	box-shadow: 0 .1em 1em rgba(0, 0, 0, 0.3);
	cursor:pointer;
	background: #ffffff;
	z-index:99000;
	-webkit-transition: all 0.35s ease;
	-moz-transition: all 0.35s ease;
	-o-transition: all 0.35s ease;
	transition: all 0.35s ease;
}

#chatMobile:hover {
  -webkit-animation: bounce .4s infinite alternate;
  -moz-animation: bounce .4s infinite alternate;
  animation: bounce .4s infinite alternate;
  
  -webkit-box-shadow: 3px 4px 25px 3px;
  -moz-box-shadow: 3px 4px 25px 3px;
  -o-box-shadow: 3px 4px 25px 3px;
  box-shadow: 3px 4px 25px 3px rgba(0, 121, 200, 0.3);
}

@-webkit-keyframes bounce {
  to { -webkit-transform: scale(1.2); }
}
@-moz-keyframes bounce {
  to { -moz-transform: scale(1.2); }
}
@keyframes bounce {
  to { transform: scale(1.2); }
}



/*CAPA WEBCHAT*/
.chatbox{
	position:fixed;
	bottom:0;
	right:30px;
	margin:0 0 -1500px;
	background:#fff;	
	box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);	
	padding:0px;
	z-index:16000001;	
	max-height:600px;
	height: 100%;
	transition:all .9s ease-in-out;
}


/*BOTON CERRAR*/
#close-chat{
	position:absolute;
	top:-8px;
	right:17px;
	font-size:48px;
	background:transparent;
	z-index:2;	
	cursor:pointer;
	font-family:Century Gothic,Arial,sans-serif;
	text-align:center;
	color:#00335b;
}

/* IFRAME SANIA */
#iframeSanIA {
	width: 480px;
	max-height: 600px;
	height: 100%;
	border:0;
	margin:0;
	padding: 0;
}


/* MEDIA QUERIES */
@media (max-width: 992px) {

	/*CAPA WEBCHAT*/
	.chatbox{
		position:fixed;
		bottom:0;
		right:20px;
		margin:0 0 -1500px;
		background:#fff;		
		box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);	
		padding:0px;
		z-index:16000001;
		max-height: 600px;
		height: 100%;
		transition:all .9s ease-in-out;
	}

	#chat{
		display:none;
	}

	#chatMobile{
		display:block;
	}
}

@media (max-device-width: 992px) and (orientation: landscape){

	.chatbox{
		width: 100%;
		height: 100%;		
		right:0;
		box-shadow:0;
	}

	#iframeSanIA {
		width: 100%;
		height: 100%;
	}
}


@media (max-device-width: 896px) and (orientation: landscape){

	.chatbox{
		width: 100%;
		height: 100%;		
		right:0;
		box-shadow:0;
	}

	#iframeSanIA {
		width: 100%;
		height: 100%;
	}
}


@media (max-width: 600px) {

	#chatMobile{
		right: 23px;
	}

	.chatbox{
		width: 100%;
		height: 100%;		
		right:0;
		box-shadow:0;
	}

	#iframeSanIA {
		width: 100%;
		height: 100%;
	}
}