/*
Theme Name: OceanWP Child Theme
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme. Sample child theme.
Author: OceanWP
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */

body {
	overflow-x: hidden;
}

.elementor-widget-testimonial-carousel .swiper-wrapper {
    align-items: center!important;
}

.elementor-widget-testimonial-carousel .elementor-swiper-button {
    margin-top: -40px;
    padding: 10px;
    background-color: #1a1a1a;
    transform: scale(1);
    transition: transform 0.5s, background-color 0.5s;
}

.elementor-widget-testimonial-carousel .elementor-swiper-button:hover {
    background-color: #18609B;
    transform: scale(1.1);
}

header.sticky-header.e-flex.elementor-element .elementor-nav-menu .elementor-nav-menu--dropdown {
	margin-top: 10px!important;
}
header.sticky-header.e-flex.elementor-element .elementor-nav-menu .elementor-nav-menu--dropdown, header.sticky-header.e-flex.elementor-element .elementor-nav-menu .elementor-nav-menu--dropdown a:hover, header.sticky-header.e-flex.elementor-element .elementor-nav-menu .elementor-nav-menu--dropdown a.elementor-item-active {
    background: transparent!important;
}
header.sticky-header.e-flex.elementor-element.elementor-sticky--effects .elementor-nav-menu .elementor-nav-menu--dropdown, header.sticky-header.e-flex.elementor-element.elementor-sticky--effects .elementor-nav-menu .elementor-nav-menu--dropdown a.elementor-item-active {
    background: #fff!important;
}
header.sticky-header.e-flex.elementor-element.elementor-sticky--effects .elementor-nav-menu .elementor-nav-menu--dropdown a {
	color: #18609B;
}

header.sticky-header.e-flex.elementor-element .elementor-nav-menu .elementor-item .sub-arrow svg {
	transition: transform 0.3s;
}
header.sticky-header.e-flex.elementor-element .elementor-nav-menu .elementor-item.highlighted .sub-arrow svg {
	transform: rotate(180deg);
}

.grecaptcha-badge { 
    visibility: hidden !important;
}





.credits {
	padding-top: 5px;
}
.credits p {
    line-height: 20px;
}

.credits p a {
    color: #fff!important;
}

.credits p a:hover {
    color: #18609B !important;
}

.credits a .plum {
    background-image: url(./assets/images/plum-logo-sm.png);
    background-repeat: no-repeat;
    background-size: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    height: 20px;
    margin: 1px 3px 0;
    width: 20px;
    display: inline-block;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition: color .3s;
    transition: color .3s;
    position: absolute;

}

.credits a:hover .plum {
    animation-name: plumbounce;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: 1;

    -moz-animation-name: plumbounce;
    -moz-animation-duration: 0.5s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 1;

    -webkit-animation-name: plumbounce;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes plumbounce {
    45% {
        height: 15px;
        margin-top: 6px;
    }

    55% {
        height: 15px;
        margin-top: 6px;
    }

    75% {
        height: 25px;
        margin-top: -7px;
    }
}

@-moz-keyframes plumbounce {
    45% {
        height: 15px;
        margin-top: 6px;
    }

    55% {
        height: 15px;
        margin-top: 6px;
    }

    75% {
        height: 25px;
        margin-top: -7px;
    }
}

@keyframes plumbounce {
    45% {
        height: 15px;
        margin-top: 6px;
    }

    55% {
        height: 15px;
        margin-top: 6px;
    }

    75% {
        height: 25px;
        margin-top: -7px;
    }
}


/* Media queries */

/* Desktop only */
@media (min-width:1025px) {
	.elementor-nav-menu--layout-horizontal .elementor-nav-menu>li.hide-desktop {
		display: none;
	}
	header.sticky-header.e-flex.elementor-element .elementor-nav-menu .elementor-nav-menu--dropdown {
		margin-left: -28px!important;
	}
	header.sticky-header.e-flex.elementor-element .elementor-nav-menu .elementor-nav-menu--dropdown a  {
		color: #fff;
	}
}

/* Mobile only */
@media (max-width:768px) {
	
}

/* Custom Animating Icons */

#difference-customer .difference {
	opacity: 0;
}

.animate-start #difference-customer .face {
	stroke-dasharray: 440;
	animation: face .3s ease-out 0s 1 forwards;
}

@keyframes face {
	0% {
		stroke-dashoffset: 440;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-customer .hair1 {
	stroke-dasharray: 1220;
	animation: hair1 .4s ease-out .2s 1 forwards;
}

@keyframes hair1 {
	0% {
		stroke-dashoffset: 1220;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-customer .hair2 {
	stroke-dasharray: 100;
	animation: hair2 .2s ease-out .4s 1 forwards;
}

@keyframes hair2 {
	0% {
		stroke-dashoffset: 100;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-customer .hair3 {
	stroke-dasharray: 270;
	animation: hair3 .2s ease-out .4s 1 forwards;
}

@keyframes hair3 {
	0% {
		stroke-dashoffset: 270;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-customer .shoulder1 {
	stroke-dasharray: 340;
	animation: shoulder1 .3s ease-out .6s 1 forwards;
}

@keyframes shoulder1 {
	0% {
		stroke-dashoffset: 340;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-customer .shoulder2 {
	stroke-dasharray: 306;
	animation: shoulder2 .3s ease-out .6s 1 forwards;
}

@keyframes shoulder2 {
	0% {
		stroke-dashoffset: 306;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-customer .laptop1 {
	stroke-dasharray: 126;
	animation: laptop1 .1s ease-out .8s 1 forwards;
}

@keyframes laptop1 {
	0% {
		stroke-dashoffset: 126;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-customer .laptop2 {
	stroke-dasharray: 550;
	animation: laptop2 .4s ease-out .9s 1 forwards;
}

@keyframes laptop2 {
	0% {
		stroke-dashoffset: 550;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-customer .desk {
	stroke-dasharray: 656;
	animation: desk .5s ease-out 1s 1 forwards;
}

@keyframes desk {
	0% {
		stroke-dashoffset: 656;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-customer .shirt1 {
	stroke-dasharray: 70;
	animation: shirt1 .1s ease-out .8s 1 forwards;
}

@keyframes shirt1 {
	0% {
		stroke-dashoffset: 70;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-customer .shirt2 {
	stroke-dasharray: 70;
	animation: shirt2 .1s ease-out .8s 1 forwards;
}

@keyframes shirt2 {
	0% {
		stroke-dashoffset: 70;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-customer .neckline {
	stroke-dasharray: 210;
	animation: neckline .2s ease-out .8s 1 forwards;
}

@keyframes neckline {
	0% {
		stroke-dashoffset: 210;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-customer .mic {
	stroke-dasharray: 236;
	animation: mic .3s ease-out .9s 1 forwards;
}

@keyframes mic {
	0% {
		stroke-dashoffset: 236;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-customer .logo {
	stroke-dasharray: 174;
	animation: logo .2s ease-out 1s 1 forwards;
}

@keyframes logo {
	0% {
		stroke-dashoffset: 174;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-customer .chat {
	stroke-dasharray: 690;
	animation: chat .5s ease-out 1.5s 1 forwards;
}

@keyframes chat {
	0% {
		stroke-dashoffset: 690;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}


#difference-expertise .difference {
	opacity: 0;
}

.animate-start #difference-expertise .circle1 {
	stroke-dasharray: 1172;
	animation: circle1 .6s ease-out 0s 1 forwards;
}

@keyframes circle1 {
	0% {
		stroke-dashoffset: 1172;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-expertise .circle2 {
	stroke-dasharray: 690;
	animation: circle2 .4s ease-out .3s 1 forwards;
}

@keyframes circle2 {
	0% {
		stroke-dashoffset: 690;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-expertise .ribbon1 {
	stroke-dasharray: 345;
	animation: ribbon1 .3s ease-out .5s 1 forwards;
}

@keyframes ribbon1 {
	0% {
		stroke-dashoffset: 345;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-expertise .ribbon2 {
	stroke-dasharray: 345;
	animation: ribbon2 .3s ease-out .6s 1 forwards;
}

@keyframes ribbon2 {
	0% {
		stroke-dashoffset: 345;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-expertise .star1 {
	stroke-dasharray: 585;
	animation: star1 .3s ease-out .8s 1 forwards;
}

@keyframes star1 {
	0% {
		stroke-dashoffset: 585;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-expertise .star2 {
	stroke-dasharray: 585;
	animation: star2 .3s ease-out 1s 1 forwards;
}

@keyframes star2 {
	0% {
		stroke-dashoffset: 585;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-expertise .star3 {
	stroke-dasharray: 585;
	animation: star3 .3s ease-out 1.2s 1 forwards;
}

@keyframes star3 {
	0% {
		stroke-dashoffset: 585;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-expertise .check {
	stroke-dasharray: 155;
	animation: check .3s ease-out 1.3s 1 forwards;
}

@keyframes check {
	0% {
		stroke-dashoffset: 155;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}


#difference-integrity .difference {
	opacity: 0;
}

.animate-start #difference-integrity .hand1 {
	stroke-dasharray: 100;
	animation: hand1 .1s ease-out 0s 1 forwards;
}

@keyframes hand1 {
	0% {
		stroke-dashoffset: 100;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-integrity .thumb1 {
	stroke-dasharray: 711;
	animation: thumb1 .4s ease-out .1s 1 forwards;
}

@keyframes thumb1 {
	0% {
		stroke-dashoffset: 100;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-integrity .cuff1 {
	stroke-dasharray: 555;
	animation: cuff1 .3s ease-out .3s 1 forwards;
}

@keyframes cuff1 {
	0% {
		stroke-dashoffset: 555;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-integrity .fingers1 {
	stroke-dasharray: 662;
	animation: fingers1 .3s ease-out .4s 1 forwards;
}

@keyframes fingers1 {
	0% {
		stroke-dashoffset: 662;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-integrity .fingers2 {
	stroke-dasharray: 250;
	animation: fingers2 .2s ease-out .6s 1 forwards;
}

@keyframes fingers2 {
	0% {
		stroke-dashoffset: 250;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-integrity .fingers3 {
	stroke-dasharray: 193;
	animation: fingers3 .1s ease-out .7s 1 forwards;
}

@keyframes fingers3 {
	0% {
		stroke-dashoffset: 193;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-integrity .fingers4 {
	stroke-dasharray: 200;
	animation: fingers4 .1s ease-out .8s 1 forwards;
}

@keyframes fingers4 {
	0% {
		stroke-dashoffset: 200;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-integrity .fingers5 {
	stroke-dasharray: 194;
	animation: fingers5 .1s ease-out .9s 1 forwards;
}

@keyframes fingers5 {
	0% {
		stroke-dashoffset: 194;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-integrity .cuff2 {
	stroke-dasharray: 290;
	animation: cuff2 .2s ease-out 1s 1 forwards;
}

@keyframes cuff2 {
	0% {
		stroke-dashoffset: 290;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-integrity .cuff3 {
	stroke-dasharray: 345;
	animation: cuff3 .2s ease-out 1.1s 1 forwards;
}

@keyframes cuff3 {
	0% {
		stroke-dashoffset: 345;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-integrity .thumb2 {
	stroke-dasharray: 150;
	animation: thumb2 .1s ease-out 1.2s 1 forwards;
}

@keyframes thumb2 {
	0% {
		stroke-dashoffset: 150;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

#difference-quality .difference {
	opacity: 0;
}

.animate-start #difference-quality .board1 {
	stroke-dasharray: 858;
	animation: board1 .5s ease-out 0s 1 forwards;
}

@keyframes board1 {
	0% {
		stroke-dashoffset: 858;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-quality .clip {
	stroke-dasharray: 232;
	animation: clip .2s ease-out .3s 1 forwards;
}

@keyframes clip {
	0% {
		stroke-dashoffset: 232;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-quality .board2 {
	stroke-dasharray: 1226;
	animation: board2 .8s ease-out .4s 1 forwards;
}

@keyframes board2 {
	0% {
		stroke-dashoffset: 1226;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-quality .mag1 {
	stroke-dasharray: 636;
	animation: mag1 .4s ease-out .7s 1 forwards;
}

@keyframes mag1 {
	0% {
		stroke-dashoffset: 636;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-quality .mag2 {
	stroke-dasharray: 978;
	animation: mag2 .5s ease-out .8s 1 forwards;
}

@keyframes mag2 {
	0% {
		stroke-dashoffset: 978;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-quality .mag3 {
	stroke-dasharray: 394;
	animation: mag3 .2s ease-out 1s 1 forwards;
}

@keyframes mag3 {
	0% {
		stroke-dashoffset: 394;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-quality .notes1 {
	stroke-dasharray: 556;
	animation: notes1 .3s ease-out 1.1s 1 forwards;
}

@keyframes notes1 {
	0% {
		stroke-dashoffset: 556;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-quality .notes2 {
	stroke-dasharray: 317;
	animation: notes2 .2s ease-out 1.2s 1 forwards;
}

@keyframes notes2 {
	0% {
		stroke-dashoffset: 317;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-quality .notes3 {
	stroke-dasharray: 317;
	animation: notes3 .2s ease-out 1.3s 1 forwards;
}

@keyframes notes3 {
	0% {
		stroke-dashoffset: 317;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-quality .notes4 {
	stroke-dasharray: 210;
	animation: notes4 .2s ease-out 1.4s 1 forwards;
}

@keyframes notes4 {
	0% {
		stroke-dashoffset: 210;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-quality .notes5 {
	stroke-dasharray: 150;
	animation: notes5 .1s ease-out 1.5s 1 forwards;
}

@keyframes notes5 {
	0% {
		stroke-dashoffset: 150;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-quality .notes6 {
	stroke-dasharray: 60;
	animation: notes6 .1s ease-out 1.6s 1 forwards;
}

@keyframes notes6 {
	0% {
		stroke-dashoffset: 60;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-quality .notes7 {
	stroke-dasharray: 43;
	animation: notes7 .1s ease-out 1.7s 1 forwards;
}

@keyframes notes7 {
	0% {
		stroke-dashoffset: 43;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-quality .check1 {
	stroke-dasharray: 40;
	animation: check1 .1s ease-out 1.8s 1 forwards;
}

@keyframes check1 {
	0% {
		stroke-dashoffset: 40;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-quality .check2 {
	stroke-dasharray: 40;
	animation: check2 .1s ease-out 1.9s 1 forwards;
}

@keyframes check2 {
	0% {
		stroke-dashoffset: 40;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-quality .check3 {
	stroke-dasharray: 330;
	animation: check3 .3s ease-out 2s 1 forwards;
}

@keyframes check3 {
	0% {
		stroke-dashoffset: 330;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}


#difference-technology .difference {
	opacity: 0;
}

.animate-start #difference-technology .phone1 {
	stroke-dasharray: 1634;
	animation: phone1 .8s ease-out 0s 1 forwards;
}

@keyframes phone1 {
	0% {
		stroke-dashoffset: 1634;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-technology .phone2 {
	stroke-dasharray: 268;
	animation: phone2 .2s ease-out .2s 1 forwards;
}

@keyframes phone2 {
	0% {
		stroke-dashoffset: 268;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-technology .phone3 {
	stroke-dasharray: 170;
	animation: phone3 .1s ease-out .6s 1 forwards;
}

@keyframes phone3 {
	0% {
		stroke-dashoffset: 170;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-technology .pool1 {
	stroke-dasharray: 510;
	animation: pool1 .5s ease-out .5s 1 forwards;
}

@keyframes pool1 {
	0% {
		stroke-dashoffset: 510;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-technology .pool2 {
	stroke-dasharray: 332;
	animation: pool2 .3s ease-out .7s 1 forwards;
}

@keyframes pool2 {
	0% {
		stroke-dashoffset: 332;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-technology .water1 {
	stroke-dasharray: 122;
	animation: water1 .1s ease-out .9s 1 forwards;
}

@keyframes water1 {
	0% {
		stroke-dashoffset: 122;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-technology .water2 {
	stroke-dasharray: 122;
	animation: water2 .1s ease-out 1s 1 forwards;
}

@keyframes water2 {
	0% {
		stroke-dashoffset: 122;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-technology .ladder1 {
	stroke-dasharray: 150;
	animation: ladder1 .1s ease-out 1s 1 forwards;
}

@keyframes ladder1 {
	0% {
		stroke-dashoffset: 150;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-technology .ladder2 {
	stroke-dasharray: 150;
	animation: ladder2 .1s ease-out 1s 1 forwards;
}

@keyframes ladder2 {
	0% {
		stroke-dashoffset: 150;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-technology .ladder3 {
	stroke-dasharray: 50;
	animation: ladder3 .1s ease-out 1.1s 1 forwards;
}

@keyframes ladder3 {
	0% {
		stroke-dashoffset: 50;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-technology .touch1 {
	stroke-dasharray: 328;
	animation: touch1 .3s ease-out .7s 1 forwards;
}

@keyframes touch1 {
	0% {
		stroke-dashoffset: 328;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-technology .touch2 {
	stroke-dasharray: 150;
	animation: touch2 .1s ease-out .8s 1 forwards;
}

@keyframes touch2 {
	0% {
		stroke-dashoffset: 150;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-technology .touch3 {
	stroke-dasharray: 86;
	animation: touch3 .1s ease-out .9s 1 forwards;
}

@keyframes touch3 {
	0% {
		stroke-dashoffset: 86;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-technology .touch4 {
	stroke-dasharray: 954;
	animation: touch4 .7s ease-out 1.1s 1 forwards;
}

@keyframes touch4 {
	0% {
		stroke-dashoffset: 954;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}


#difference-value .difference {
	opacity: 0;
}

.animate-start #difference-value .valuehand1 {
	stroke-dasharray: 1060;
	animation: valuehand1 .6s ease-out 0s 1 forwards;
}

@keyframes valuehand1 {
	0% {
		stroke-dashoffset: 1060;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-value .valuehand2 {
	stroke-dasharray: 1010;
	animation: valuehand2 .6s ease-out .3s 1 forwards;
}

@keyframes valuehand2 {
	0% {
		stroke-dashoffset: 1010;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-value .bar1 {
	stroke-dasharray: 490;
	animation: bar1 .3s ease-out .6s 1 forwards;
}

@keyframes bar1 {
	0% {
		stroke-dashoffset: 490;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-value .bar2 {
	stroke-dasharray: 665;
	animation: bar2 .4s ease-out .7s 1 forwards;
}

@keyframes bar2 {
	0% {
		stroke-dashoffset: 665;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-value .bar3 {
	stroke-dasharray: 560;
	animation: bar3 .3s ease-out .8s 1 forwards;
}

@keyframes bar3 {
	0% {
		stroke-dashoffset: 560;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-value .shield {
	stroke-dasharray: 720;
	animation: shield .5s ease-out 1s 1 forwards;
}

@keyframes shield {
	0% {
		stroke-dashoffset: 720;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

.animate-start #difference-value .shieldcheck {
	stroke-dasharray: 156;
	animation: shieldcheck .1s ease-out 1.2s 1 forwards;
}

@keyframes shieldcheck {
	0% {
		stroke-dashoffset: 156;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}