/*-----------------------------------------------------------------------------
	Name	    : Icons
	Description	: icons settings
	Author		: artibaj
	Author URL	: https://www.artibaj.com/
	Created		: 01 September 2019
	License		: All Rights Reserved. Do Not Copy!
-------------------------------------------------------------------------------*/
/*
====================================
Icon sizes
====================================
*/
i.icon-mini, i.icon-mini:before {
  font-size: 0.5rem;
  display: inline-block;
}
.icon-mini svg {
  height: 0.5rem;
}
i.icon-xxs, i.icon-xxs:before {
  font-size: 0.75rem;
  display: inline-block;
}
.icon-xxs svg {
  height: 0.75rem;
}
i.icon-xs, i.icon-xs:before {
  font-size: 1rem;
  display: inline-block;
}
.icon-xs svg {
  height: 1rem;
}
i.icon-xss, i.icon-xss:before {
  font-size: 1.2rem;
  display: inline-block;
}
.icon-xss svg {
  height: 1.2rem;
}
i.icon-sm, i.icon-sm:before {
  font-size: 1.5rem;
  display: inline-block;
}
.icon-sm svg {
  height: 1.5rem;
}
i.icon-md, i.icon-md:before {
  font-size: 2rem;
  display: inline-block;
}
.icon-md svg {
  height: 2rem;
}
i.icon-lg, i.icon-lg:before {
  font-size: 3rem;
  display: inline-block;
}
.icon-lg svg {
  height: 3rem;
}
i.icon-xl, i.icon-xl:before {
  font-size: 4rem;
  display: inline-block;
}
.icon-xl svg {
  height: 4rem;
}
i.icon-xxl, i.icon-xxl:before {
  font-size: 5rem;
  display: inline-block;
}
.icon-xxl svg {
  height: 5rem;
}
/*
====================================
Icon background
====================================
*/
.icon-bg-mini, .icon-bg-xxs, .icon-bg-xs, .icon-bg-xss, .icon-bg-sm, .icon-bg-md, .icon-bg-lg, .icon-bg-xl, .icon-bg-xxl {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 100%;
  background: #00CBFF;
}
.icon-bg-mini *, .icon-bg-xxs *, .icon-bg-xs *, .icon-bg-xss *, .icon-bg-sm *, .icon-bg-md *, .icon-bg-lg *, .icon-bg-xl *, .icon-bg-xxl * {
  color: #FFF;
}
.icon-bg-mini {
  width: 1rem;
  height: 1rem;
}
.icon-bg-xxs {
  width: 1.5rem;
  height: 1.5rem;
}
.icon-bg-xs {
  width: 2rem;
  height: 2rem;
}
.icon-bg-xss {
  width: 3rem;
  height: 3rem;
}
.icon-bg-sm {
  width: 3.5rem;
  height: 3.5rem;
}
.icon-bg-md {
  width: 4rem;
  height: 4rem;
}
.icon-bg-lg {
  width: 5rem;
  height: 5rem;
}
.icon-bg-xl {
  width: 7rem;
  height: 7rem;
}
.icon-bg-xxl {
  width: 9rem;
  height: 9rem;
}
/*
====================================
Icon shapes
====================================
*/
.shape-1-oval-1, .shape-1-oval-2, .shape-2-oval-1, .shape-2-oval-2, .shape-3-oval-1, .shape-3-square-1, .shape-3-triangle-1, .shape-3-heart-1 {
  position: absolute;
  border-radius: 100%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: .4s;
  -o-transition: .4s;
  transition: .4s;
}
.shape-1-oval-1 {
  width: 4rem;
  height: 4rem;
  background: #EDFAFF;
}
.shape-1-oval-2 {
  width: 2rem;
  height: 2rem;
  background: #F7F7F7;
}
.shape-2-oval-1 {
  width: 4rem;
  height: 4rem;
  background: #EDFAFF;
}
.shape-2-oval-2 {
  width: 2rem;
  height: 2rem;
  background: #F7F7F7;
}
.shape-3-oval-1 {
  width: 1rem;
  height: 1rem;
  background: #FFD600;
}
.shape-3-square-1 {
  border-radius: 0;
  width: 1rem;
  height: 1rem;
  background: #FFD600;
}
.shape-3-triangle-1 {
  border-radius: 0;
  width: 0;
  height: 0;
  border-width: 0 0.7rem 1rem;
  border-style: solid;
  border-color: transparent transparent #FFD600 transparent;
}
.shape-3-heart-1:before, .shape-3-heart-1:after {
  position: absolute;
  content: "";
  left: 0.6rem;
  top: 0;
  width: 0.6rem;
  height: 1rem;
  background: #FFD600;
  border-radius: 50px 50px 0 0;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
.shape-3-heart-1:after {
  left: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}
/*
====================================
Icon animation
====================================
*/
/* Shape-2 */
.box-column .shape-2-oval-1.animation1 {
  -webkit-transform: translate(calc(-50% - 1rem), calc(-50% - 1rem));
  -ms-transform: translate(calc(-50% - 1rem), calc(-50% - 1rem));
  transform: translate(calc(-50% - 1rem), calc(-50% - 1rem));
}
.box-column:hover .shape-2-oval-1.animation1 {
  -webkit-transform: translate(calc(-50% + 1rem), calc(-50% + 0.5rem));
  -ms-transform: translate(calc(-50% + 1rem), calc(-50% + 0.5rem));
  transform: translate(calc(-50% + 1rem), calc(-50% + 0.5rem));
}
.box-column .shape-2-oval-1.animation2 {
  -webkit-transform: translate(calc(-50% + 1rem), calc(-50% + 0.5rem));
  -ms-transform: translate(calc(-50% + 1rem), calc(-50% + 0.5rem));
  transform: translate(calc(-50% + 1rem), calc(-50% + 0.5rem));
}
.box-column:hover .shape-2-oval-1.animation2 {
  -webkit-transform: translate(calc(-50% - 1rem), calc(-50% - 0.5rem));
  -ms-transform: translate(calc(-50% - 1rem), calc(-50% - 0.5rem));
  transform: translate(calc(-50% - 1rem), calc(-50% - 0.5rem));
}
.box-column .shape-2-oval-1.animation3 {
  -webkit-transform: translate(calc(-50% - 1rem), calc(-50% + 0.5rem));
  -ms-transform: translate(calc(-50% - 1rem), calc(-50% + 0.5rem));
  transform: translate(calc(-50% - 1rem), calc(-50% + 0.5rem));
}
.box-column:hover .shape-2-oval-1.animation3 {
  -webkit-transform: translate(calc(-50% + 1rem), calc(-50% - 0.5rem));
  -ms-transform: translate(calc(-50% + 1rem), calc(-50% - 0.5rem));
  transform: translate(calc(-50% + 1rem), calc(-50% - 0.5rem));
}
.box-column .shape-2-oval-1.animation4 {
  -webkit-transform: translate(calc(-50% + 1rem), calc(-50% - 0.5rem));
  -ms-transform: translate(calc(-50% + 1rem), calc(-50% - 0.5rem));
  transform: translate(calc(-50% + 1rem), calc(-50% - 0.5rem));
}
.box-column:hover .shape-2-oval-1.animation4 {
  -webkit-transform: translate(calc(-50% - 1rem), calc(-50% + 0.5rem));
  -ms-transform: translate(calc(-50% - 1rem), calc(-50% + 0.5rem));
  transform: translate(calc(-50% - 1rem), calc(-50% + 0.5rem));
}
.box-column .shape-2-oval-2.animation1 {
  -webkit-transform: translate(calc(-50% + 3rem), calc(-50% - 1rem));
  -ms-transform: translate(calc(-50% + 3rem), calc(-50% - 1rem));
  transform: translate(calc(-50% + 3rem), calc(-50% - 1rem));
}
.box-column:hover .shape-2-oval-2.animation1 {
  -webkit-transform: translate(calc(-50% - 3rem), calc(-50% + 1rem));
  -ms-transform: translate(calc(-50% - 3rem), calc(-50% + 1rem));
  transform: translate(calc(-50% - 3rem), calc(-50% + 1rem));
}
.box-column .shape-2-oval-2.animation2 {
  -webkit-transform: translate(calc(-50% - 2rem), calc(-50% + 1rem));
  -ms-transform: translate(calc(-50% - 2rem), calc(-50% + 1rem));
  transform: translate(calc(-50% - 2rem), calc(-50% + 1rem));
}
.box-column:hover .shape-2-oval-2.animation2 {
  -webkit-transform: translate(calc(-50% + 2.5rem), calc(-50% - 1rem));
  -ms-transform: translate(calc(-50% + 2.5rem), calc(-50% - 1rem));
  transform: translate(calc(-50% + 2.5rem), calc(-50% - 1rem));
}
.box-column .shape-2-oval-2.animation3 {
  -webkit-transform: translate(calc(-50% + 2rem), calc(-50% - 1rem));
  -ms-transform: translate(calc(-50% + 2rem), calc(-50% - 1rem));
  transform: translate(calc(-50% + 2rem), calc(-50% - 1rem));
}
.box-column:hover .shape-2-oval-2.animation3 {
  -webkit-transform: translate(calc(-50% - 2rem), calc(-50% + 1rem));
  -ms-transform: translate(calc(-50% - 2rem), calc(-50% + 1rem));
  transform: translate(calc(-50% - 2rem), calc(-50% + 1rem));
}
.box-column .shape-2-oval-2.animation4 {
  -webkit-transform: translate(calc(-50% - 3.5rem), calc(-50% - 0.5rem));
  -ms-transform: translate(calc(-50% - 3.5rem), calc(-50% - 0.5rem));
  transform: translate(calc(-50% - 3.5rem), calc(-50% - 0.5rem));
}
.box-column:hover .shape-2-oval-2.animation4 {
  -webkit-transform: translate(calc(-50% + 2.5rem), calc(-50% + 0.2rem));
  -ms-transform: translate(calc(-50% + 2.5rem), calc(-50% + 0.2rem));
  transform: translate(calc(-50% + 2.5rem), calc(-50% + 0.2rem));
}
/* Shape-3 */
.box-column .shape-3-oval-1.animation1 {
  -webkit-transform: translate(calc(-50% + 1rem), calc(-50%));
  -ms-transform: translate(calc(-50% + 1rem), calc(-50%));
  transform: translate(calc(-50% + 1rem), calc(-50%));
}
.box-column:hover .shape-3-oval-1.animation1 {
  -webkit-transform: translate(calc(-50% - 1.5rem), calc(-50%));
  -ms-transform: translate(calc(-50% - 1.5rem), calc(-50%));
  transform: translate(calc(-50% - 1.5rem), calc(-50%));
}
.box-column .shape-3-square-1.animation1 {
  -webkit-transform: translate(calc(-50% + 1rem), calc(-50%));
  -ms-transform: translate(calc(-50% + 1rem), calc(-50%));
  transform: translate(calc(-50% + 1rem), calc(-50%));
}
.box-column:hover .shape-3-square-1.animation1 {
  -webkit-transform: translate(calc(-50% - 1.5rem), calc(-50%)) rotate(-180deg);
  -ms-transform: translate(calc(-50% - 1.5rem), calc(-50%)) rotate(-180deg);
  transform: translate(calc(-50% - 1.5rem), calc(-50%)) rotate(-180deg);
}
.box-column .shape-3-triangle-1.animation1 {
  -webkit-transform: translate(calc(-50% + 1rem), calc(-50%));
  -ms-transform: translate(calc(-50% + 1rem), calc(-50%));
  transform: translate(calc(-50% + 1rem), calc(-50%));
}
.box-column:hover .shape-3-triangle-1.animation1 {
  -webkit-transform: translate(calc(-50% - 1.5rem), calc(-50% - 1rem)) rotate(-180deg);
  -ms-transform: translate(calc(-50% - 1.5rem), calc(-50% - 1rem)) rotate(-180deg);
  transform: translate(calc(-50% - 1.5rem), calc(-50% - 1rem)) rotate(-180deg);
}
.box-column .shape-3-heart-1.animation1 {
  -webkit-transform: translate(calc(-50% + 1rem), calc(-50%));
  -ms-transform: translate(calc(-50% + 1rem), calc(-50%));
  transform: translate(calc(-50% + 1rem), calc(-50%));
}
.box-column:hover .shape-3-heart-1.animation1 {
  -webkit-transform: translate(calc(-50% - 1.5rem), calc(-50% - 1rem));
  -ms-transform: translate(calc(-50% - 1.5rem), calc(-50% - 1rem));
  transform: translate(calc(-50% - 1.5rem), calc(-50% - 1rem));
}
/*
====================================
Animation with TweenMax
====================================
*/
.icon-tm-1, .icon-tm-2 {
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}
.icon-tm-1.shape-1-oval-1.pos-1 {
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(calc(-50% + 1.5rem)) translateY(calc(-50% - 1rem));
  -ms-transform: translateX(calc(-50% + 1.5rem)) translateY(calc(-50% - 1rem));
  transform: translateX(calc(-50% + 1.5rem)) translateY(calc(-50% - 1rem));
}
.icon-tm-2.shape-1-oval-2.pos-1 {
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(calc(-50% - 3rem)) translateY(calc(-50% + 1rem));
  -ms-transform: translateX(calc(-50% - 3rem)) translateY(calc(-50% + 1rem));
  transform: translateX(calc(-50% - 3rem)) translateY(calc(-50% + 1rem));
}
.icon-tm-1.shape-1-oval-1.pos-2 {
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(calc(-50% - 2rem)) translateY(calc(-50% - 0rem));
  -ms-transform: translateX(calc(-50% - 2rem)) translateY(calc(-50% - 0rem));
  transform: translateX(calc(-50% - 2rem)) translateY(calc(-50% - 0rem));
}
.icon-tm-2.shape-1-oval-2.pos-2 {
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(calc(-50% + 2.5rem)) translateY(calc(-50% - 1rem));
  -ms-transform: translateX(calc(-50% + 2.5rem)) translateY(calc(-50% - 1rem));
  transform: translateX(calc(-50% + 2.5rem)) translateY(calc(-50% - 1rem));
}
.icon-tm-1.shape-1-oval-1.pos-3 {
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(calc(-50% + 1rem)) translateY(calc(-50% + 0.5rem));
  -ms-transform: translateX(calc(-50% + 1rem)) translateY(calc(-50% + 0.5rem));
  transform: translateX(calc(-50% + 1rem)) translateY(calc(-50% + 0.5rem));
}
.icon-tm-2.shape-1-oval-2.pos-3 {
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(calc(-50% - 3.5rem)) translateY(calc(-50% - 1rem));
  -ms-transform: translateX(calc(-50% - 3.5rem)) translateY(calc(-50% - 1rem));
  transform: translateX(calc(-50% - 3.5rem)) translateY(calc(-50% - 1rem));
}
.icon-tm-1.shape-1-oval-1.pos-4 {
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(calc(-50% - 1.5rem)) translateY(calc(-50% + 0.5rem));
  -ms-transform: translateX(calc(-50% - 1.5rem)) translateY(calc(-50% + 0.5rem));
  transform: translateX(calc(-50% - 1.5rem)) translateY(calc(-50% + 0.5rem));
}
.icon-tm-2.shape-1-oval-2.pos-4 {
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(calc(-50% + 3rem)) translateY(calc(-50% - 0.5rem));
  -ms-transform: translateX(calc(-50% + 3rem)) translateY(calc(-50% - 0.5rem));
  transform: translateX(calc(-50% + 3rem)) translateY(calc(-50% - 0.5rem));
}
/* Icon */
.icon-on-top {
  z-index: 2;
  position: relative;
}