/*-----------------------------------------------------------------------------
	Name	    : Icons
	Description	: icons settings
	Author		: abcreativity
	Author URL	: https://abcreativity.pl/
	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%;*/
    -webkit-transition: 0.3s ease-out;
    -o-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
            background: #0db8ca;

}
.icon-bg-xss:before {
    font-size: 1.25rem;
}


.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 *, .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-bg-mini:hover, .icon-bg-xxs:hover, .icon-bg-xs:hover, .icon-bg-xss:hover, .icon-bg-sm:hover, .icon-bg-md:hover, .icon-bg-lg:hover, .icon-bg-xl:hover, .icon-bg-xxl:hover {
background: #069FAF;
/*        -webkit-transform: scale(1.125);*/
/*    -ms-transform: scale(1.125);*/
/*    transform: scale(1.125);*/
}



/*
====================================
Icon border
====================================
*/

i.icon-border-lg {
    border: 2px solid #0db8ca;
    border-radius: 100%;
    width: 4rem;
    height: 4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    
}
i.icon-border-lg, i.icon-border-lg:before {
    font-size: 2rem;
    display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;

}
.icon-border-lg svg {
    height: 2rem;
}



/*
====================================
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;
}