/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 
 /* Animations */

@keyframes bouncing2 {

	0% {
		transform: translateX(170%);
	}
	
	16% {
		transform: translateX(-10%);
	}

	28% {
		transform: translateX(10%);
	}

	44% {
		transform: translateX(-6%);
	}

	59% {
		transform: translateX(6%);
	}

	73% {
		transform: translateX(-2%);
	}

	88% {
		transform: translateX(2%);
	}

	100% {
		transform: translateX(0%)!important;
	}

}

@keyframes bouncing3 {

	0% {
		transform: translateX(300%);
	}
	
	16% {
		transform: translateX(-10%);
	}

	28% {
		transform: translateX(10%);
	}

	44% {
		transform: translateX(-6%);
	}

	59% {
		transform: translateX(6%);
	}

	73% {
		transform: translateX(-2%);
	}

	88% {
		transform: translateX(2%);
	}

	100% {
		transform: translateX(0%)!important;
	}

}

@keyframes bouncing4 {

	0% {
		transform: translateX(450%);
	}
	
	16% {
		transform: translateX(-10%);
	}

	28% {
		transform: translateX(10%);
	}

	44% {
		transform: translateX(-6%);
	}

	59% {
		transform: translateX(6%);
	}

	73% {
		transform: translateX(-2%);
	}

	88% {
		transform: translateX(2%);
	}

	100% {
		transform: translateX(0%)!important;
	}

}

@keyframes bouncing5 {

	0% {
		transform: translateX(590%);
	}
	
	16% {
		transform: translateX(-10%);
	}

	28% {
		transform: translateX(10%);
	}

	44% {
		transform: translateX(-6%);
	}

	59% {
		transform: translateX(6%);
	}

	73% {
		transform: translateX(-2%);
	}

	88% {
		transform: translateX(2%);
	}

	100% {
		transform: translateX(0%)!important;
	}

}

@keyframes close2 {

	0% {
		transform: translateX(0%)!important;
	}
	
	100% {
		transform: translateX(170%);
	}

}

@keyframes close3 {

	0% {
		transform: translateX(0%)!important;
	}
	
	100% {
		transform: translateX(300%);
	}

}

@keyframes close4 {

	0% {
		transform: translateX(0%)!important;
	}
	
	100% {
		transform: translateX(450%);
	}

}

@keyframes close5 {

	0% {
		transform: translateX(0%)!important;
	}
	
	100% {
		transform: translateX(590%);
	}

}
/* Initial */
 
#nixi1-main-container{
	position: fixed;
	bottom: 20px;
	right: 20px;
	padding-right:80px;
	z-index: 99999999;
	direction:rtl;
 }

#nixi1-main-button {
	position: absolute;
	bottom: 0px;
	right: 0px;
	z-index: 9;
	width: 64px;
	height: 64px;
	background: #6411db;
	border-radius: 100%;
	cursor:pointer;
}
 
 #nixi1-main-button img{
   opacity:1;
   transition: opacity 300ms;
 }

 a.nixi1-chat-button{
	 width:50px;
	 height:50px;
	display: inline-block;
	margin: 0 10px;
	top:-5px;
	position:relative;
	vertical-align: bottom;
	border-radius: 100%;
	box-shadow: 0 3px 7px 0 rgba(0,0,0,0.15);
	transition: all 200ms;
}

a.nixi1-chat-button:nth-child(5){
  animation: 200ms linear 0s 1 normal both running close5;
}

a.nixi1-chat-button:nth-child(4){
  animation: 200ms linear 0s 1 normal both running close4;
}

a.nixi1-chat-button:nth-child(3){
  animation: 200ms linear 0s 1 normal both running close3;
}

a.nixi1-chat-button:nth-child(2){
  animation: 200ms linear 0s 1 normal both running close2;
}

 a.nixi1-chat-button img{
   width:50px;
   transition:all 200ms;
 }

 a.nixi1-chat-button:hover{
   width:60px;
   height:60px;
 }
 
 a.nixi1-chat-button:hover img{
   width:60px;
 }
 
/* Opened */

#nixi1-main-container #nixi1-main-button::before, 
#nixi1-main-container #nixi1-main-button::after {
	content: '';
	display: block;
	position: absolute;
	top: 31px;
	left: 20px;
	height: 3px;
	width: 25px;
	background: #fff;
	border-radius: 57px;
	opacity: 0;
	transition: all 400ms;
}

#nixi1-main-container.opened #nixi1-main-button::before {
	transform: rotate(-45deg);
	opacity:1;
}

#nixi1-main-container.opened #nixi1-main-button::after {
	transform: rotate(45deg);
	opacity:1;
}
 
#nixi1-main-container.opened #nixi1-main-button img{
  opacity:0;
}
 
 /**/
 
 #nixi1-main-container.opened  a.nixi1-chat-button{
	display: inline-block;
	margin: 0 10px;
	position:relative;
	transform: translateX(0%);
 }

#nixi1-main-container.opened  a.nixi1-chat-button:nth-child(5){
	animation: 1500ms linear 0s 1 normal both running bouncing5;
	animation-delay:300ms;
}

#nixi1-main-container.opened  a.nixi1-chat-button:nth-child(4){
	animation: 1500ms linear 0s 1 normal both running bouncing4;
	animation-delay:200ms;
}

#nixi1-main-container.opened  a.nixi1-chat-button:nth-child(3){
	animation: 1500ms linear 0s 1 normal both running bouncing3;
	animation-delay:100ms;
}

#nixi1-main-container.opened  a.nixi1-chat-button:nth-child(2){
	animation: 1500ms linear 0s 1 normal both running bouncing2;
	animation-delay:0ms;
}

/* RESPONSIVENESS */

@media all and (max-width:400px){
	
	a.nixi1-chat-button{
		margin: 0 8px;
	}
	
	#nixi1-main-container.opened  a.nixi1-chat-button{
		margin: 0 8px;
	}

	 a.nixi1-chat-button img,
	 a.nixi1-chat-button:hover img{
	   width:45px;
	 }
	 
	 a.nixi1-chat-button {
		width: 45px;
		height: 45px;
	}
	
	
}