/*-----------------------------------------------------------------------------
	Name	    : SVG 
	Description	: svg settings
	Author		: abcreativity
	Author URL	: https://abcreativity.pl/
	Created		: 01 September 2019
	License		: All Rights Reserved. Do Not Copy!
-------------------------------------------------------------------------------*/

svg:not(:root) {
    overflow: visible;
}

/*
====================================
Aniamtions
====================================
*/
@-webkit-keyframes draw-line-svg {
 0% {
 opacity: 1;
}
 100% {
 opacity: 1;
 stroke-dashoffset:0;
}
}
 @keyframes draw-line-svg {
 0% {
 opacity: 1;
}
 100% {
 opacity: 1;
 stroke-dashoffset:0;
}
}
 @-webkit-keyframes enlarge-svg {
 0% {
 -webkit-transform: scale(0);
 transform: scale(0);
}
 100% {
 -webkit-transform: scale(1);
 transform: scale(1);
}
}
 @keyframes enlarge-svg {
 0% {
 -webkit-transform: scale(0);
 transform: scale(0);
}
 100% {
 -webkit-transform: scale(1);
 transform: scale(1);
}
}
 @-webkit-keyframes enlargeX-svg {
 0% {
 -webkit-transform: scaleX(0);
 transform: scaleX(0);
}
 100% {
 -webkit-transform: scaleX(1);
 transform: scaleX(1);
}
}
 @keyframes enlargeX-svg {
 0% {
 -webkit-transform: scaleX(0);
 transform: scaleX(0);
}
 100% {
 -webkit-transform: scaleX(1);
 transform: scaleX(1);
}
}
 @-webkit-keyframes move-pen-svg {
 0% {
 -webkit-transform: translate(1rem, -1rem);
 transform: translate(1rem, -1rem);
 opacity:1;
}
 100% {
 -webkit-transform: translate(0, 0);
 transform: translate(0, 0);
 opacity:1;
}
}
 @keyframes move-pen-svg {
 0% {
 -webkit-transform: translate(1rem, -1rem);
 transform: translate(1rem, -1rem);
 opacity:1;
}
 100% {
 -webkit-transform: translate(0, 0);
 transform: translate(0, 0);
 opacity:1;
}
}
 @-webkit-keyframes pen-show-svg {
 1% {
 opacity:0;
}
 99% {
 opacity:0;
}
 100% {
 opacity:1;
}
}
 @keyframes pen-show-svg {
 1% {
 opacity:0;
}
 99% {
 opacity:0;
}
 100% {
 opacity:1;
}
}
 @-webkit-keyframes move-x-svg {
 0% {
 -webkit-transform: translateX(-2rem);
 transform: translateX(-2rem);
 opacity: 1;
}
 100% {
 -webkit-transform:translateX(0);
 transform:translateX(0);
 opacity: 1;
}
}
@keyframes move-x-svg {
 0% {
 -webkit-transform: translateX(-2rem);
 transform: translateX(-2rem);
 opacity: 1;
}
 100% {
 -webkit-transform:translateX(0);
 transform:translateX(0);
 opacity: 1;
}
}
 @-webkit-keyframes move-y-svg {
 0% {
 -webkit-transform: translateY(-2rem);
 transform: translateY(-2rem);
 opacity: 1;
}
 100% {
 -webkit-transform:translateY(0);
 transform:translateY(0);
 opacity: 1;
}
}
@keyframes move-y-svg {
 0% {
 -webkit-transform: translateY(-2rem);
 transform: translateY(-2rem);
 opacity: 1;
}
 100% {
 -webkit-transform:translateY(0);
 transform:translateY(0);
 opacity: 1;
}
}
 @-webkit-keyframes move-arrow-svg {
 0% {
 -webkit-transform: translate(2rem, -1rem);
 transform: translate(2rem, -1rem);
 opacity:0;
}
 5% {
 opacity:1;
}
 100% {
-webkit-transform: translate(0, 0);
 transform: translate(0, 0);
 opacity:1;
}
}
 @keyframes move-arrow-svg {
 0% {
 -webkit-transform: translate(2rem, -1rem);
 transform: translate(2rem, -1rem);
 opacity:0;
}
 5% {
 opacity:1;
}
 100% {
-webkit-transform: translate(0, 0);
 transform: translate(0, 0);
 opacity:1;
}
}
/*
====================================
Zbieranie informacji - icon
====================================
*/

#zbieranie-informacji-svg .outer-path, #zbieranie-informacji-svg .corner-path, #zbieranie-informacji-svg .oval-path {
    fill: none;
    stroke: #41516a;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#zbieranie-informacji-svg .oval-path {
    stroke: #0fabc2;
}
#zbieranie-informacji-svg .outer-path {
    stroke-dasharray: 305.11236572265625;
    stroke-dashoffset: 305.11236572265625;
}
#zbieranie-informacji-svg .corner-path {
    stroke-dasharray: 160.86038208007812;
    stroke-dashoffset: 160.86038208007812;
}
#zbieranie-informacji-svg .oval-path {
    stroke-dasharray: 131.21109008789062;
    stroke-dashoffset: 131.21109008789062;
}
#zbieranie-informacji-svg .circle, #zbieranie-informacji-svg .line-vertical, #zbieranie-informacji-svg .line-horizontal {
    fill: #0fabc2;
    -webkit-transform-origin: 52px 39px;
    -ms-transform-origin: 52px 39px;
    transform-origin: 52px 39px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}
.animated-svg.animated #zbieranie-informacji-svg .outer-path {
    -webkit-animation: draw-line-svg 0.7s linear 0s normal 1 forwards;
    animation: draw-line-svg 0.7s linear 0s normal 1 forwards;
}
.animated-svg.animated #zbieranie-informacji-svg .corner-path {
    -webkit-animation: draw-line-svg 0.3s linear 0.7s normal 1 forwards;
    animation: draw-line-svg 0.3s linear 0.7s normal 1 forwards;
}
.animated-svg.animated #zbieranie-informacji-svg .circle {
    -webkit-animation: enlarge-svg 0.4s ease-out 0.7s normal 1 forwards;
    animation: enlarge-svg 0.4s ease-out 0.7s normal 1 forwards;
}
.animated-svg.animated #zbieranie-informacji-svg .oval-path {
    -webkit-animation: draw-line-svg 0.4s linear 0.9s normal 1 forwards;
    animation: draw-line-svg 0.4s linear 0.9s normal 1 forwards;
}
.animated-svg.animated #zbieranie-informacji-svg .line-vertical {
    -webkit-animation: enlarge-svg 0.4s ease-out 1s normal 1 forwards;
    animation: enlarge-svg 0.4s ease-out 1s normal 1 forwards;
}
.animated-svg.animated #zbieranie-informacji-svg .line-horizontal {
    -webkit-animation: enlarge-svg 0.4s ease-out 1s normal 1 forwards;
    animation: enlarge-svg 0.4s ease-out 1s normal 1 forwards;
}
/*
====================================
Planowanie układu strony - icon
====================================
*/
#planowanie-strony-svg .bottom-path, #planowanie-strony-svg .outer-path, #planowanie-strony-svg .inner-path {
    fill: none;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#planowanie-strony-svg .bottom-path {
    stroke: #41516a;
    stroke-dasharray: 180.59921264648438;
    stroke-dashoffset: 180.59921264648438;
}
#planowanie-strony-svg .outer-path {
    stroke: #0fabc2;
    stroke-dasharray: 195.72296142578125;
    stroke-dashoffset: 195.72296142578125;
}
#planowanie-strony-svg .inner-path {
    stroke: #41516a;
    stroke-dasharray: 124.07853698730469;
    stroke-dashoffset: 124.07853698730469;
}
.animated-svg.animated #planowanie-strony-svg .bottom-path {
    -webkit-animation: draw-line-svg 0.5s linear 0s normal 1 forwards;
    animation: draw-line-svg 0.5s linear 0s normal 1 forwards;
}
.animated-svg.animated #planowanie-strony-svg .outer-path {
    -webkit-animation: draw-line-svg 0.5s linear 0.5s normal 1 forwards;
    animation: draw-line-svg 0.5s linear 0.5s normal 1 forwards;
}
.animated-svg.animated #planowanie-strony-svg .inner-path {
    -webkit-animation: draw-line-svg 0.3s linear 1s normal 1 forwards;
    animation: draw-line-svg 0.3s linear 1s normal 1 forwards;
}
/*
====================================
Projektowanie grafiki - icon
====================================
*/
#projektowanie-grafiki-svg .bottom-path, #projektowanie-grafiki-svg .square-path {
    fill: none;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#projektowanie-grafiki-svg .bottom-path {
    stroke: #41516a;
}
#projektowanie-grafiki-svg .square-path {
    stroke: #0fabc2;
}
#projektowanie-grafiki-svg .pen {
    -webkit-transform-origin: 52px 60px;
    -ms-transform-origin: 52px 60px;
    transform-origin: 52px 60px;
    opacity: 0;
}
#projektowanie-grafiki-svg .pen .white {
    fill: #FFF;
}
#projektowanie-grafiki-svg .line-1, #projektowanie-grafiki-svg .line-2, #projektowanie-grafiki-svg .line-3, #projektowanie-grafiki-svg .square, #projektowanie-grafiki-svg .pen .color {
    fill: #0fabc2;
}
#projektowanie-grafiki-svg .line-1, #projektowanie-grafiki-svg .line-2, #projektowanie-grafiki-svg .line-3 {
    -webkit-transform-origin: 15px center;
    -ms-transform-origin: 15px center;
    transform-origin: 15px center;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
}
#projektowanie-grafiki-svg .square {
    -webkit-transform-origin: 22px 75px;
    -ms-transform-origin: 22px 75px;
    transform-origin: 22px 75px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}
#projektowanie-grafiki-svg .panel {
    fill: #41516a;
    -webkit-transform-origin: 72px 55px;
    -ms-transform-origin: 72px 55px;
    transform-origin: 72px 55px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}
#projektowanie-grafiki-svg .bottom-path {
    stroke-dasharray: 357.14202880859375;
    stroke-dashoffset: 357.14202880859375;
}
#projektowanie-grafiki-svg .square-path {
    stroke-dasharray: 53.63600158691406;
    stroke-dashoffset: 53.63600158691406;
}
.animated-svg.animated #projektowanie-grafiki-svg .bottom-path {
    -webkit-animation: draw-line-svg 0.7s linear 0s normal 1 forwards;
    animation: draw-line-svg 0.7s linear 0s normal 1 forwards;
}
.animated-svg.animated #projektowanie-grafiki-svg .panel {
    -webkit-animation: enlarge-svg 0.4s ease-out 0.5s normal 1 forwards;
    animation: enlarge-svg 0.4s ease-out 0.5s normal 1 forwards;
}
.animated-svg.animated #projektowanie-grafiki-svg .line-1 {
    -webkit-animation: enlargeX-svg 0.4s ease-out 0.5s normal 1 forwards;
    animation: enlargeX-svg 0.4s ease-out 0.5s normal 1 forwards;
}
.animated-svg.animated #projektowanie-grafiki-svg .line-2 {
    -webkit-animation: enlargeX-svg 0.4s ease-out 0.6s normal 1 forwards;
    animation: enlargeX-svg 0.4s ease-out 0.6s normal 1 forwards;
}
.animated-svg.animated #projektowanie-grafiki-svg .line-3 {
    -webkit-animation: enlargeX-svg 0.4s ease-out 0.7s normal 1 forwards;
    animation: enlargeX-svg 0.4s ease-out 0.7s normal 1 forwards;
}
.animated-svg.animated #projektowanie-grafiki-svg .square {
    -webkit-animation: enlarge-svg 0.4s ease-out 0.8s normal 1 forwards;
    animation: enlarge-svg 0.4s ease-out 0.8s normal 1 forwards;
}
.animated-svg.animated #projektowanie-grafiki-svg .square-path {
    -webkit-animation: draw-line-svg 0.5s linear 0.8s normal 1 forwards;
    animation: draw-line-svg 0.5s linear 0.8s normal 1 forwards;
}
.animated-svg.animated #projektowanie-grafiki-svg .pen {
    -webkit-animation: move-pen-svg 0.4s ease-out 0.8s normal 1 forwards;
    animation: move-pen-svg 0.4s ease-out 0.8s normal 1 forwards;
}
/*
====================================
Kodowanie projektu - icon
====================================
*/

#kodowanie-projektu-svg .bottom-path, #kodowanie-projektu-svg .outer-path, #kodowanie-projektu-svg .inner-path {
    fill: none;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: #41516a;
}
#kodowanie-projektu-svg .circle {
    fill: #41516a;
    -webkit-transform-origin: 49px 71px;
    -ms-transform-origin: 49px 71px;
    transform-origin: 49px 71px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}
#kodowanie-projektu-svg .line-1, #kodowanie-projektu-svg .line-2, #kodowanie-projektu-svg .line-3, #kodowanie-projektu-svg .line-4, #kodowanie-projektu-svg .line-5, #kodowanie-projektu-svg .line-6 {
    fill: #0fabc2;
    -webkit-transform-origin: 19px center;
    -ms-transform-origin: 19px center;
    transform-origin: 19px center;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
}
#kodowanie-projektu-svg .bottom-path {
    stroke-dasharray: 126.03372955322266;
    stroke-dashoffset: 126.03372955322266;
}
#kodowanie-projektu-svg .outer-path {
    stroke-dasharray: 324.81915283203125;
    stroke-dashoffset: 324.81915283203125;
}
#kodowanie-projektu-svg .inner-path {
    stroke-dasharray: 240.21534729003906;
    stroke-dashoffset: 240.21534729003906;
}
.animated-svg.animated #kodowanie-projektu-svg .bottom-path {
    -webkit-animation: draw-line-svg 0.2s linear 0s normal 1 forwards;
    animation: draw-line-svg 0.2s linear 0s normal 1 forwards;
}
.animated-svg.animated #kodowanie-projektu-svg .outer-path {
    -webkit-animation: draw-line-svg 0.5s linear 0.1s normal 1 forwards;
    animation: draw-line-svg 0.5s linear 0.1s normal 1 forwards;
}
.animated-svg.animated #kodowanie-projektu-svg .inner-path {
    -webkit-animation: draw-line-svg 0.3s linear 0.7s normal 1 forwards;
    animation: draw-line-svg 0.3s linear 0.7s normal 1 forwards;
}
.animated-svg.animated #kodowanie-projektu-svg .circle {
    -webkit-animation: enlarge-svg 0.4s ease-out 0.8s normal 1 forwards;
    animation: enlarge-svg 0.4s ease-out 0.8s normal 1 forwards;
}
.animated-svg.animated #kodowanie-projektu-svg .line-1 {
    -webkit-animation: enlargeX-svg 0.2s ease-out 0.8s normal 1 forwards;
    animation: enlargeX-svg 0.2s ease-out 0.8s normal 1 forwards;
}
.animated-svg.animated #kodowanie-projektu-svg .line-2 {
    -webkit-animation: enlargeX-svg 0.2s ease-out 0.9s normal 1 forwards;
    animation: enlargeX-svg 0.2s ease-out 0.9s normal 1 forwards;
}
.animated-svg.animated #kodowanie-projektu-svg .line-3 {
    -webkit-animation: enlargeX-svg 0.2s ease-out 1s normal 1 forwards;
    animation: enlargeX-svg 0.2s ease-out 1s normal 1 forwards;
}
.animated-svg.animated #kodowanie-projektu-svg .line-4 {
    -webkit-animation: enlargeX-svg 0.2s ease-out 1.1s normal 1 forwards;
    animation: enlargeX-svg 0.2s ease-out 1.1s normal 1 forwards;
}
.animated-svg.animated #kodowanie-projektu-svg .line-5 {
    -webkit-animation: enlargeX-svg 0.2s ease-out 1.2s normal 1 forwards;
    animation: enlargeX-svg 0.2s ease-out 1.2s normal 1 forwards;
}
.animated-svg.animated #kodowanie-projektu-svg .line-6 {
    -webkit-animation: enlargeX-svg 0.2s ease-out 1.3s normal 1 forwards;
    animation: enlargeX-svg 0.2s ease-out 1.3s normal 1 forwards;
}


/*
====================================
 Gotowe pliki wektorowe - icon
====================================
*/
#gotowe-pliki-wektorowe-svg .frame-left-path, #gotowe-pliki-wektorowe-svg .frame-right-path, #gotowe-pliki-wektorowe-svg .left-corner-path, #gotowe-pliki-wektorowe-svg .right-corner-path, #gotowe-pliki-wektorowe-svg .pen-trace-path {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: #41516a;
}
#gotowe-pliki-wektorowe-svg .pen-path, #gotowe-pliki-wektorowe-svg .pen-top-path {
/*        stroke: #0fabc2;*/
        fill: #0fabc2;


}
#gotowe-pliki-wektorowe-svg .frame-left-path {
    stroke-dasharray:  118.85624694824219;
    stroke-dashoffset:  118.85624694824219;
}
#gotowe-pliki-wektorowe-svg .frame-right-path {
    stroke-dasharray: 123.20797729492188;
    stroke-dashoffset: 123.20797729492188;
}
#gotowe-pliki-wektorowe-svg .left-corner-path {
    stroke-dasharray: 46.08941650390625;
    stroke-dashoffset: 46.08941650390625;
}
#gotowe-pliki-wektorowe-svg .right-corner-path {
    stroke-dasharray: 108.10492706298828;
    stroke-dashoffset: 108.10492706298828;
}
#gotowe-pliki-wektorowe-svg .pen-path {
    
    opacity: 0;
    
}
#gotowe-pliki-wektorowe-svg .pen-top-path {
        opacity: 0;

}
#gotowe-pliki-wektorowe-svg .pen-trace-path {
    stroke-dasharray:  63.888607025146484;
    stroke-dashoffset:  63.888607025146484;
}

.animated-svg.animated #gotowe-pliki-wektorowe-svg .frame-left-path {
    -webkit-animation: draw-line-svg 0.5s linear 0s normal 1 forwards;
    animation: draw-line-svg 0.5s linear 0s normal 1 forwards;
}
.animated-svg.animated #gotowe-pliki-wektorowe-svg .frame-right-path {
    -webkit-animation: draw-line-svg 0.5s linear 0s normal 1 forwards;
    animation: draw-line-svg 0.5s linear 0s normal 1 forwards;
}
.animated-svg.animated #gotowe-pliki-wektorowe-svg .left-corner-path {
    -webkit-animation: draw-line-svg 0.3s linear 0.3s normal 1 forwards;
    animation: draw-line-svg 0.3s linear 0.3s normal 1 forwards;
}
.animated-svg.animated #gotowe-pliki-wektorowe-svg .right-corner-path {
    -webkit-animation: draw-line-svg 0.5s linear 0.5s normal 1 forwards;
    animation: draw-line-svg 0.5s linear 0.5s normal 1 forwards;
}


.animated-svg.animated #gotowe-pliki-wektorowe-svg .pen-path {
    -webkit-animation: move-pen-svg 0.4s ease-out 0.6s normal 1 forwards;
    animation: move-pen-svg 0.4s ease-out 0.6s normal 1 forwards;
}
.animated-svg.animated #gotowe-pliki-wektorowe-svg .pen-top-path {
    -webkit-animation: move-pen-svg 0.4s ease-out 0.6s normal 1 forwards;
    animation: move-pen-svg 0.4s ease-out 0.6s normal 1 forwards;
}


.animated-svg.animated #gotowe-pliki-wektorowe-svg .pen-trace-path {
    -webkit-animation: draw-line-svg 0.2s linear 0.9s normal 1 forwards;
    animation: draw-line-svg 0.2s linear 0.9s normal 1 forwards;
}


/*
====================================
 Gotowe pliki psd - icon
====================================
*/
#gotowe-pliki-psd-svg .frame-left-path, #gotowe-pliki-psd-svg .frame-right-path, #gotowe-pliki-psd-svg .left-corner-path, #gotowe-pliki-psd-svg .right-corner-path, #gotowe-pliki-psd-svg .pen-trace-path {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: #41516a;
}
#gotowe-pliki-psd-svg .pen-path, #gotowe-pliki-psd-svg .pen-top-path {
        fill: #0fabc2;
}
#gotowe-pliki-psd-svg .frame-left-path {
    stroke-dasharray:  118.85624694824219;
    stroke-dashoffset:  118.85624694824219;
}
#gotowe-pliki-psd-svg .frame-right-path {
    stroke-dasharray: 123.20797729492188;
    stroke-dashoffset: 123.20797729492188;
}
#gotowe-pliki-psd-svg .left-corner-path {
    stroke-dasharray: 46.08941650390625;
    stroke-dashoffset: 46.08941650390625;
}
#gotowe-pliki-psd-svg .right-corner-path {
    stroke-dasharray: 108.10492706298828;
    stroke-dashoffset: 108.10492706298828;
}
#gotowe-pliki-psd-svg .pen-path {
    
    opacity: 0;
    
}
#gotowe-pliki-psd-svg .pen-top-path {
        opacity: 0;

}
#gotowe-pliki-psd-svg .pen-trace-path {
    stroke-dasharray:  69.05628967285156;
    stroke-dashoffset:  69.05628967285156;
}

.animated-svg.animated #gotowe-pliki-psd-svg .frame-left-path {
    -webkit-animation: draw-line-svg 0.5s linear 0s normal 1 forwards;
    animation: draw-line-svg 0.5s linear 0s normal 1 forwards;
}
.animated-svg.animated #gotowe-pliki-psd-svg .frame-right-path {
    -webkit-animation: draw-line-svg 0.5s linear 0s normal 1 forwards;
    animation: draw-line-svg 0.5s linear 0s normal 1 forwards;
}
.animated-svg.animated #gotowe-pliki-psd-svg .left-corner-path {
    -webkit-animation: draw-line-svg 0.3s linear 0.3s normal 1 forwards;
    animation: draw-line-svg 0.3s linear 0.3s normal 1 forwards;
}
.animated-svg.animated #gotowe-pliki-psd-svg .right-corner-path {
    -webkit-animation: draw-line-svg 0.5s linear 0.5s normal 1 forwards;
    animation: draw-line-svg 0.5s linear 0.5s normal 1 forwards;
}


.animated-svg.animated #gotowe-pliki-psd-svg .pen-path {
    -webkit-animation: move-pen-svg 0.4s ease-out 0.6s normal 1 forwards;
    animation: move-pen-svg 0.4s ease-out 0.6s normal 1 forwards;
}
.animated-svg.animated #gotowe-pliki-psd-svg .pen-top-path {
    -webkit-animation: move-pen-svg 0.4s ease-out 0.6s normal 1 forwards;
    animation: move-pen-svg 0.4s ease-out 0.6s normal 1 forwards;
}


.animated-svg.animated #gotowe-pliki-psd-svg .pen-trace-path {
    -webkit-animation: draw-line-svg 0.2s linear 0.9s normal 1 forwards;
    animation: draw-line-svg 0.2s linear 0.9s normal 1 forwards;
}





/*
====================================
 Wysoka jakość wykoanania - icon
====================================
*/

#wysoka-jakosc-wykonania-svg .inner {
    fill: #41516A;
    -webkit-transform-origin: 45px 44px;
    -ms-transform-origin: 45px 44px;
    transform-origin: 45px 44px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}
#wysoka-jakosc-wykonania-svg .outer-path {
    fill: none;
    stroke: #41516A;
    stroke-width: 9;
    stroke-linecap: square;
    stroke-linejoin: square;
    opacity: 0;
    stroke-dasharray: 350.6005554199219;
    stroke-dashoffset: 350.6005554199219;
}
#wysoka-jakosc-wykonania-svg .draft-path {
    fill: none;
    stroke: #FFF;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    stroke-dasharray: 119.816368103027349;
    stroke-dashoffset: 119.81636810302734;
}
#wysoka-jakosc-wykonania-svg .pen-outer {
    fill: #0fabc2;
}
#wysoka-jakosc-wykonania-svg .pen-inner {
    fill: #FFF;
}
#wysoka-jakosc-wykonania-svg .pen-outer, #wysoka-jakosc-wykonania-svg .pen-inner {
    opacity: 0;
}
#wysoka-jakosc-wykonania-svg .pen-group {
    -webkit-transform: translate(-30px, -10px);
    -ms-transform: translate(-30px, -10px);
    transform: translate(-30px, -10px);
}
.animated-svg.animated #wysoka-jakosc-wykonania-svg .inner {
    -webkit-animation: enlarge-svg 0.4s ease-out 0s normal 1 forwards;
    animation: enlarge-svg 0.4s ease-out 0s normal 1 forwards;
}
.animated-svg.animated #wysoka-jakosc-wykonania-svg .outer-path {
    -webkit-animation: draw-line-svg 0.5s linear 0.2s normal 1 forwards;
    animation: draw-line-svg 0.5s linear 0.2s normal 1 forwards;
}
.animated-svg.animated #wysoka-jakosc-wykonania-svg .pen-outer, .animated-svg.animated #wysoka-jakosc-wykonania-svg .pen-inner {
    -webkit-animation: pen-show-svg 0.1s ease-out 0.6s normal 1 forwards;
    animation: pen-show-svg 0.1s ease-out 0.6s normal 1 forwards;
}
.animated-svg.animated #wysoka-jakosc-wykonania-svg .draft-path {
    -webkit-animation: draw-line-svg 0.5s linear 0.6s normal 1 forwards;
    animation: draw-line-svg 0.5s linear 0.6s normal 1 forwards;
}
/*
====================================
Wysoka funkcjonalność icon
====================================
*/

#wysoka-funkcjonalnosc-svg .phone-1, #wysoka-funkcjonalnosc-svg .phone-2 {
    opacity: 0;
}
#wysoka-funkcjonalnosc-svg .phone-1-inner, #wysoka-funkcjonalnosc-svg .phone-2-inner, #wysoka-funkcjonalnosc-svg .phone-1-outer, #wysoka-funkcjonalnosc-svg .phone-2-outer {
    fill: #FFF;
}
#wysoka-funkcjonalnosc-svg .phone-1-shape {
    fill: #41516A;
}
#wysoka-funkcjonalnosc-svg .phone-2-shape {
    fill: #0fabc2;
}
#wysoka-funkcjonalnosc-svg .monitor-ekran-path, #wysoka-funkcjonalnosc-svg .monitor-stopka-path {
    fill: none;
    stroke: #41516A;
    stroke-width: 16;
    stroke-linecap: square;
    stroke-linejoin: square;
}
#wysoka-funkcjonalnosc-svg .monitor-ekran-path {
    stroke-dasharray: 269.7521057128906;
    stroke-dashoffset: 269.7521057128906;
}
#wysoka-funkcjonalnosc-svg .monitor-stopka-path {
    stroke-dasharray: 117.34585571289062;
    stroke-dashoffset: 117.34585571289062;
}
.animated-svg.animated #wysoka-funkcjonalnosc-svg .monitor-ekran-path {
    -webkit-animation: draw-line-svg 0.7s linear 0s normal 1 forwards;
    animation: draw-line-svg 0.7s linear 0s normal 1 forwards;
}
.animated-svg.animated #wysoka-funkcjonalnosc-svg .monitor-stopka-path {
    -webkit-animation: draw-line-svg 0.4s linear 0.7s normal 1 forwards;
    animation: draw-line-svg 0.4s linear 0.7s normal 1 forwards;
}
.animated-svg.animated #wysoka-funkcjonalnosc-svg .phone-1 {
    -webkit-animation: move-x-svg 0.3s ease-out 0.8s normal 1 forwards;
    animation: move-x-svg 0.3s ease-out 0.8s normal 1 forwards;
}
.animated-svg.animated #wysoka-funkcjonalnosc-svg .phone-2 {
    -webkit-animation: move-y-svg 0.3s ease-out 0.8s normal 1 forwards;
    animation: move-y-svg 0.3s ease-out 0.8s normal 1 forwards;
}
/*
====================================
Kreatywne rozwiązania icon
====================================
*/

#kreatywne-rozwiazania-svg .oval-1, #kreatywne-rozwiazania-svg .oval-2 {
    fill: none;
    stroke: #41516A;
    stroke-width: 10;
    stroke-linecap: butt;
    stroke-linejoin: butt;
}
#kreatywne-rozwiazania-svg .oval-1 {
    stroke-dasharray: 261.2310791015625;
    stroke-dashoffset: 261.2310791015625;
}
#kreatywne-rozwiazania-svg .oval-2 {
    stroke-dasharray: 144.7117156982422;
    stroke-dashoffset: 144.7117156982422;
}
#kreatywne-rozwiazania-svg .oval-3 {
    fill: #41516A;
    -webkit-transform-origin: 47px 53px;
    -ms-transform-origin: 47px 53px;
    transform-origin: 47px 53px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}
#kreatywne-rozwiazania-svg .arrow-white {
    fill: #FFF;
}
#kreatywne-rozwiazania-svg .arrow-color, #kreatywne-rozwiazania-svg .wing-left, #kreatywne-rozwiazania-svg .wing-right {
    fill: #0fabc2;
}
#kreatywne-rozwiazania-svg .arrow-group {
    -webkit-transform-origin: 47px 53px;
    -ms-transform-origin: 47px 53px;
    transform-origin: 47px 53px;
    opacity: 0;
}
.animated-svg.animated #kreatywne-rozwiazania-svg .oval-1 {
    -webkit-animation: draw-line-svg 0.5s ease-out 0s normal 1 forwards;
    animation: draw-line-svg 0.5s ease-out 0s normal 1 forwards;
}
.animated-svg.animated #kreatywne-rozwiazania-svg .oval-2 {
    -webkit-animation: draw-line-svg 0.5s ease-out 0.4s normal 1 forwards;
    animation: draw-line-svg 0.5s ease-out 0.4s normal 1 forwards;
}
.animated-svg.animated #kreatywne-rozwiazania-svg .oval-3 {
    -webkit-animation: enlarge-svg 0.2s ease-out 0.6s normal 1 forwards;
    animation: enlarge-svg 0.2s ease-out 0.6s normal 1 forwards;
}
.animated-svg.animated #kreatywne-rozwiazania-svg .arrow-group {
    -webkit-animation: move-arrow-svg 0.2s ease-out 0.8s normal 1 forwards;
    animation: move-arrow-svg 0.2s ease-out 0.8s normal 1 forwards;
}