.float{
	position:fixed;
	width:75px;
	height:73px;
	bottom:100px;
	right:20px;
	background-color: #1bd7c7;
	border: 3px solid rgba(158, 161, 212, 0.9);
	color:#FFF;
  border-radius:50px;
	text-align:center;
  font-size:45px;
	  /* box-shadow: 2px 2px 3px #deff58; */
  z-index:100;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
}

 /* .float::before{
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	border-bottom: 5px solid #FFF  ;
	border-left: 5px solid #FFF  ;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	box-sizing: border-box;
	transition: all 0.8s ease;
} */



.float::after{
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	border-right: 5px solid #FFF  ;
	border-top: 5px solid #fff ;
	width: 95%;
	height: 100%;
	border-radius: 50%;
	box-sizing: border-box;
	transition: all 0.8s ease;
}


.float:hover ::before{

border-color: #FFF;
width: 100%;;
height: 100%;
transition: all 0.8s ease;
animation-name: examples;
animation-duration: 2s;
}


 .float:hover ::after,.float::before{

	border-color: #fff;
	width: 96%;;
	height: 96%;
	transition: all 0.8s ease;
	 box-shadow: 2px 2px 2px 2px #FFF;
	 animation-name: example;
	animation-duration: 2s ;
	transform:translate(0.5%, 0.5%);

	}

	.float::after {
		animation-delay: -1.8s;
	  } 

	  @keyframes examples {
		 from {background-color: #1bd7c7;}
		to {background-color: #9EA1D4;}

		 0% { width:250px; height:25px; border:3px solid #9EA1D4; }
  100% { width:60px; height:60px; border:3px solid transparent; }
	  }




	  @keyframes example {
		0%   {background-color: #FD8A8A;}
		25%  {background-color: #9EA1D4;}
		50%  {background-color: #fff;}
		100% {background-color: #A8D1D1;}
	  }


/* .my-float{
	margin-top:13px;
} */

@media(max-width: 394px) {
	.float{
		position:fixed;
		width:75px;
		height:73px;
		bottom:30px;
		right:20px;
		background-color: #1bd7c7;
		border: 3px solid rgba(158, 161, 212, 0.9);
		color:#FFF;
	  border-radius:50px;
		text-align:center;
	  font-size:45px;
		  /* box-shadow: 2px 2px 3px #deff58; */
	  z-index:100;
	  -moz-border-radius: 50px;
	  -webkit-border-radius: 50px;
	}
	
  }

  @media(max-width: 320px) {
	.float{
		position:fixed;
		width:75px;
		height:73px;
		bottom:40px;
		right:40px;
		background-color: #1bd7c7;
		border: 3px solid rgba(158, 161, 212, 0.9);
		color:#FFF;
	  border-radius:50px;
		text-align:center;
	  font-size:45px;
		  /* box-shadow: 2px 2px 3px #deff58; */
	  z-index:100;
	  -moz-border-radius: 50px;
	  -webkit-border-radius: 50px;
	}
	
  }