.position-fixed{
	position:fixed;
	top:0px;
	left:0px;
}


#container {
width:100%;
height: 100%;
position:relative;
display:flex;
flex-direction: row;
flex-wrap: wrap;
top:0;
left:0;
justify-content: center;

}

#container-1 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}




.square-transparent {

	width: 177px;
	height: 177px;
	margin:2px;
	background-image:
    linear-gradient(
      to right, 
     #ffc6a6, #ffbfef);
    opacity: 0.6;
    

}

.square-transparent2 {

	width: 177px;
	height: 177px;
	margin:2px;
	
	background-image:
    linear-gradient(
      to right, 
     #ffc6a6, #ffbfef);
    

}


.circle1{
  width:40px;
  height:40px;
  margin-top:20px;
  margin-left: 50px;
  margin-right: 50px;
  margin-bottom: 20px;
  background-color: #c195f480;
  border-radius: 50%;
  box-shadow: 5px 5px 15px #4a494963;
  animation: bounceInRight 1s;

}

.circle1:hover{
  width:40px;
  height:40px;
  margin-top:20px;
  margin-left: 50px;
  margin-right: 50px;
  margin-bottom: 20px;
  background-color: #fff9a2;

  border-radius: 50%;
  box-shadow: 5px 5px 15px #4a494963;
  transform: skew(-20deg);
  transition:all 0.2s;
  animation: bounceOutLeft 1.5s;


}

@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}