/* ----------------------------------------------------------------

	Custom CSS



	Add all your Custom Styled CSS here for New Styles or

	Overwriting Default Theme Styles for Better Handling Updates

-----------------------------------------------------------------*/







.icon-whtsp-container {

  margin-top: 30px;

  width: 60px;

  height: 120px;

  position: fixed;

  z-index:599;

  bottom: 30px;

  left: 0px;

}



.icon-whtsp {

  cursor: pointer;

  position: relative;

  display: inline-block;

  width: 60px;

  height: 60px;

  margin-left: 12px;

  margin-right: 12px;

  border-radius: 30px;

  overflow: hidden;

}

.icon-whtsp::before, .icon-whtsp::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  height: 100%;

  width: 100%;

  transition: all 0.25s ease;

  border-radius: 30px;

}

.icon-whtsp i {

  position: relative;

  font-size: 30px;

  margin: 10px 18px;;

  transition: all 0.25s ease;

}

.icon-whtsp-fill a{color:#fff;position: absolute;width: 100%;height: 100%;left: 0;top: 0;z-index: 2;}

.icon-whtsp-fill a:hover{color:#d2a867;}

.icon-whtsp-fill{color:#fff;}

.icon-whtsp-fill::before {

  transition-duration: 0.5s;

  box-shadow: inset 0 0 0 60px #d2a867;

}

.icon-whtsp-fill:hover{color:#d2a867;}

.icon-whtsp-fill:hover::before {

  box-shadow: inset 0 0 0 1px #d2a867;

}



.icon-whtsp-enter::after {

  box-shadow: inset 0 0 0 1px #eb9532;

}

.icon-whtsp-enter::before {

  border-radius: 0;

  margin-left: -100%;

  box-shadow: inset 0 0 0 60px #eb9532;

}

.icon-whtsp-enter:hover::before {

  margin-left: 0;

}



.icon-whtsp-expand::after {

  box-shadow: inset 0 0 0 1px #c82647;

}

.icon-whtsp-expand::before {

  background: #c82647;

  box-shadow: inset 0 0 0 60px #2d2c3e;

}

.icon-whtsp-expand:hover::before {

  box-shadow: inset 0 0 0 1px #2d2c3e;

}



.icon-whtsp-collapse::before {

  border-radius: 0;

}

.icon-whtsp-collapse:hover::before {

  box-shadow: inset 0 30px 0 0 #8cc63f, inset 0 -30px 0 0 #8cc63f;

}

.icon-whtsp-collapse::after {

  box-shadow: inset 0 0 0 1px #8cc63f;

}



.icon-whtsp-rotate {

  box-shadow: inset 0 0 0 1px #7e3661;

  color: #7e3661;

}

.icon-whtsp-rotate::after, .icon-rotate::before {

  border: 0px solid transparent;

}

.icon-whtsp-rotate:hover{color: #fff;}

.icon-whtsp-rotate:hover::before {

  transition: border-top-width 0.3s ease, border-top-color 0.3s ease;

  border-width: 60px;

  border-top-color: #7e3661;

}

.icon-whtsp-rotate:hover::after {

  transition: border-left-width 0.3s ease, border-left-color 0.3s ease;

  border-width: 60px;

  border-left-color: #7e3661;

}

.icon-whtsp-rotate:hover {

  transition: background 0.001s ease 0.3s;

  background: #7e3661;

}

.icon-whtsp-rotate i {

  z-index: 1;

}