#integration {margin: 0; padding: 160px 0 100px 0; background: #f2f2f2;}
#integration label {font-size: 26px; font-weight: 700; color: #393939; padding-bottom: 30px;}
#integration h2 {background: linear-gradient(90deg, blue, purple, cyan); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: gradientText 5s ease infinite; font-size: 54px; font-weight: 800; margin: 0; padding: 10px 0 20px 0;}
#integration h2 span {text-transform: uppercase; width: 100%; display: flex; align-items: center; flex-wrap: wrap;}
#integration h3 {margin: 0; padding: 0 0 20px 0; font-weight: 800; font-size: 34px; line-height: 44px; text-align: left; color: #393939;}
#integration p {margin: 0; padding: 0 80px 0 0; font-weight: 500; font-size: 20px; line-height: 30px; text-align: left; color: #393939;}
#integration ul.integrationLogoWrapper {margin: 0; padding: 0; list-style: none; display: flex; align-items: center; flex-wrap: wrap;}
#integration h4 {margin: 0; padding: 30px 0 20px 0; display: flex; align-items: center; flex-wrap: wrap; width: 100%; font-size: 22px; font-weight: 600; color: #393939;}
#integration ul.integrationLogoWrapper li {margin: 0 30px 0 0; padding: 10px; border-radius: 8px; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1); background: #fff; display: inline-flex; align-items: center; flex-wrap: wrap;}
#integration ul.integrationLogoWrapper li img {max-height: 40px;}
#animationWapper {margin: 0; padding: 0; position: relative; width: 100%; max-width: 610px; height: 560px; margin:0 auto; display: flex; align-items: center; flex-wrap: wrap; justify-content: center;}
#animationWapper .box.centerBox {width: 320px; height: 320px;}
#animationWapper .box.centerBox span {position: absolute; width: 100%; height: 100%; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; border-radius: 10px; background: #d3d9e7; padding: 0 !important; z-index: 2; border: none; box-sizing: border-box;}
#animationWapper .box.centerBox span img {max-width: 220px !important;}
#animationWapper .box {position: absolute; width: 90px; height: 90px; z-index: 2;}
#animationWapper .box span {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; font-size: 18px; font-weight: normal; color: #000; background: #fff; border-radius: 10px; padding: 10px; z-index: 2; box-shadow: 6px 6px 11px rgba(0, 0, 0, 0.1); border: 2px solid rgba(0, 0, 0, 0.05); border-bottom: none; border-right: none; box-sizing: border-box;}
#animationWapper .box.one {left: 50%; top: 10px; transform: translateX(-50%); width: 150px; height: 60px;}
#animationWapper .box.one span {background: none; box-shadow: none; border: none; padding: 0; border-radius: 0;}
#animationWapper .box.one span img {max-width: 150px;}
#animationWapper .box.two {left: 120px; top: -75px; width: 150px; height: 60px;}
#animationWapper .box.two span {padding: 10px;}
#animationWapper .box.two span img {max-width: 100%;}
#animationWapper .box.three {right: 120px; top: -75px; width: 150px; height: 60px;}
#animationWapper .box.three span {padding: 10px;}
#animationWapper .box.three span img {max-width: 80%;}
#animationWapper .box span img {max-width: 60px;}
#animationWapper .box.four {right: 0; top: 235px;}
#animationWapper .box.five {right: 0; bottom: 120px;}
#animationWapper .box.six {right: 140px; bottom: -25px;}
#animationWapper .box.seven {left: 50%; bottom: -25px; transform: translateX(-50%);}
#animationWapper .box.eight {left: 140px; bottom: -25px;}
#animationWapper .box.nine {left: 0; bottom: 120px;}
#animationWapper .box.ten {left: 0; top: 235px;}
#animationWapper .box.eleven {right: 0; top: 120px;}
#animationWapper .box.twelve {left: 0; top: 120px;}
#animationWapper .box.two:after, #animationWapper .box.three:after {width: 4px; height: 135px; left: calc(50% - 2px); top: 60px; border-left: 4px dashed rgba(0, 0, 0, 0.15); content: ""; position: absolute; z-index: -1;}
#animationWapper .box.one:after {width: 4px; height: 50px; left: calc(50% - 2px); top: 60px; border-left: 4px dashed rgba(0, 0, 0, 0.15); content: ""; position: absolute; z-index: -1;}
#animationWapper .box.six:after, #animationWapper .box.seven:after, #animationWapper .box.eight:after {width: 4px; height: 55px; left: 45px; bottom: 90px; border-left: 4px dashed rgba(0, 0, 0, 0.15); content: ""; position: absolute; z-index: -1;}
#animationWapper .box.four:after, #animationWapper .box.five:after, #animationWapper .box.eleven:after {width: 55px; height: 4px; left: -55px; top: 45px; border-top: 4px dashed rgba(0, 0, 0, 0.15); content: ""; position: absolute; z-index: -1;}
#animationWapper .box.nine:after, #animationWapper .box.ten:after, #animationWapper .box.twelve:after {width: 55px; height: 4px; right: -55px; top: 45px; border-top: 4px dashed rgba(0, 0, 0, 0.15); content: ""; position: absolute; z-index: -1;}
#animationWapper .box.two:before, #animationWapper .box.three:before {border-radius: 100%; width: 16px; height: 16px; top: 48px; left: calc(50% - 8px); z-index: 3; content: ""; position: absolute; z-index: 1; background: #f00; animation: boxOneBall 2s linear infinite;}
#animationWapper .box.one:before {border-radius: 100%; width: 16px; height: 16px; top: 34px; left: calc(50% - 8px); z-index: 3;  content: ""; position: absolute; z-index: 1; background: #f00; animation: boxTwoBall 2s linear infinite;}
#animationWapper .box.four:before, #animationWapper .box.five:before, #animationWapper .box.eleven:before {border-radius: 100%; width: 16px; height: 16px; right: 63px; top: 38px; z-index: 3;  content: ""; position: absolute; z-index: 1; background: #f00; animation: boxRightBall 2s linear infinite;}
#animationWapper .box.six:before, #animationWapper .box.seven:before, #animationWapper .box.eight:before {border-radius: 100%; width: 16px; height: 16px; bottom: 63px; left: 40px; z-index: 3; content: ""; position: absolute; z-index: 1; background: #f00; animation: boxBottomBall 2s linear infinite;}
#animationWapper .box.nine:before, #animationWapper .box.ten:before, #animationWapper .box.twelve:before {border-radius: 100%; width: 16px; height: 16px; top: 39px; left: 63px; z-index: 3; content: ""; position: absolute; z-index: 1; background: #f00; animation: boxLeftBall 2s linear infinite;}
#integration .ripple {text-decoration: none; color: #fff; width: 12px; height: 12px; background-color: #00E7FF; margin: 0 auto; border-radius: 100px; -webkit-animation: integrationRipple 0.7s linear infinite; animation: integrationRipple 0.7s linear infinite;}
#integration .video_container_one {margin-bottom: -5px; position: relative; height: 100%; width: 100%; left: 0; top: 0; z-index: 2; overflow: hidden; border-radius: 10px; background-color: #000;}
#integration .video_container_one video {width: 100%; height: 100%;}
#integration #video_caro_content {position: absolute; bottom: 210px; width: 100%; left: 0; background: linear-gradient(to right,  rgba(30,87,153,0) 0%,rgba(0,0,0,0.0) 14%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.0) 86%,rgba(125,185,232,0) 100%); transform: translateY(0); top: auto; height: auto; z-index: 2; padding: 30px 0; backdrop-filter: blur(4px);}

@keyframes gradientText {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}

@-webkit-keyframes integrationRipple {
	0% {box-shadow: 0 0 0 0 rgba(44, 82, 180, 0.05), 0 0 0 10px rgba(44, 82, 180, 0.05), 0 0 0 30px rgba(44, 82, 180, 0.05), 0 0 0 60px rgba(44, 82, 180, 0.05);}
	100% {box-shadow: 0 0 0 10px rgba(44, 82, 180, 0.05), 0 0 0 30px rgba(44, 82, 180, 0.05), 0 0 0 60px rgba(44, 82, 180, 0.05), 0 0 0 90px rgba(44, 82, 180, 0);}
}

@keyframes integrationRipple {
	0% {box-shadow: 0 0 0 0 rgba(44, 82, 180, 0.05), 0 0 0 10px rgba(44, 82, 180, 0.05), 0 0 0 30px rgba(44, 82, 180, 0.05), 0 0 0 60px rgba(44, 82, 180, 0.05);}
	100% {box-shadow: 0 0 0 10px rgba(44, 82, 180, 0.05), 0 0 0 30px rgba(44, 82, 180, 0.05), 0 0 0 60px rgba(44, 82, 180, 0.05), 0 0 0 90px rgba(44, 82, 180, 0);}
}

@keyframes boxOneBall {
	0% {top: 34px;}
	50% {top: 205px;}
	100% {top: 34px;}
}

@keyframes boxTwoBall {
	0% {top: 48px;}
	50% {top: 105px;}
	100% {top: 48px;}
}

@keyframes boxRightBall {
	0% {right: 64px;}
	50% {right: 155px;}
	100% {right: 64px;}
}

@keyframes boxLeftBall {
	0% {left: 64px;}
	50% {left: 155px;}
	100% {left: 64px;}
}

@keyframes boxBottomBall {
	0% {bottom: 64px;}
	50% {bottom: 155px;}
	100% {bottom: 64px;}
}

/**** media queries ****/
@media only screen and (min-width: 0px) and (max-width: 575px) {
	#integration {padding: 0 0 100px 0;}
	#integration #animationWapper {width: 300px; height: 300px;}
	#integration #animationWapper .box.centerBox {width: 150px; height: 150px;}
	#integration #animationWapper .box.centerBox span img {max-width: 80% !important;}
	#integration #animationWapper .box {width: 60px; height: 60px;}
	#integration #animationWapper .box span {padding: 5px;}
	#integration #animationWapper .box img {max-width: 100% !important; max-height: 45px;}
	#integration #animationWapper .box.one {width: 100px; top: -10px;}
	#integration #animationWapper .box.two {width: 100px; left: 30px;}
	#integration #animationWapper .box.three {width: 100px; right: 30px;}
	#integration #animationWapper .box.twelve {left: -20px; top: 50px;}
	#integration #animationWapper .box.ten {left: -20px; top: 195px;}
	#integration #animationWapper .box.nine {left: -20px; bottom: 117px;}
	#integration #animationWapper .box.four {right: -20px; top: 50px;}
	#integration #animationWapper .box.eleven {right: -20px; bottom: 117px; top: inherit;}
	#integration #animationWapper .box.five {right: -20px; top: 195px;}
	#integration #animationWapper .box.six {right: 44px; bottom: -20px;}
	#integration #animationWapper .box.eight {left: 44px; bottom: -20px;}
	#integration #animationWapper .box.seven {bottom: -20px;}
	#integration #animationWapper .box:before {width: 14px !important; height: 14px !important;}
	#integration #animationWapper .box.two:after {left: 56px; height: 95px;}
	#integration #animationWapper .box.three:after {left: 40px; height: 95px;}
	#integration #animationWapper .box.four:after {top: 42px;}
	#integration #animationWapper .box.five:after {top: 18px;}
	#integration #animationWapper .box.six:after {left: 18px; bottom: 51px;}
	#integration #animationWapper .box.seven:after {left: 28px; bottom: 51px;}
	#integration #animationWapper .box.eight:after {height: 50px; bottom: 51px;}
	#integration #animationWapper .box.nine:after {top: 30px;}
	#integration #animationWapper .box.ten:after {top: 18px;}
	#integration #animationWapper .box.eleven:after {top: 30px;}
	#integration #animationWapper .box.twelve:after {top: 42px;}
	#integration #animationWapper .box.two:before {left: 51px;}
	#integration #animationWapper .box.three:before {left: 34px;}
	#integration #animationWapper .box.four:before {top: 37px;}
	#integration #animationWapper .box.five:before {top: 13px;}
	#integration #animationWapper .box.six:before {left: 13px;}
	#integration #animationWapper .box.seven:before {left: 23px;}
	#integration #animationWapper .box.eight:before {bottom: 36px;}
	#integration #animationWapper .box.nine:before {top: 24px;}
	#integration #animationWapper .box.ten:before {top: 13px;}
	#integration #animationWapper .box.eleven:before {top: 24px;}
	#integration #animationWapper .box.twelve:before {top: 37px;}
	#integration h2 {font-size: 37px; padding: 70px 0 20px 0; text-align: center;}
	#integration label {font-size: 21px; padding-bottom: 20px; text-align: center;}
	#integration p {font-size: 16px; line-height: 26px; padding: 0; text-align: center;}
	#integration h4 {font-size: 20px; justify-content: center;}
	#integration ul.integrationLogoWrapper  {justify-content: center; margin-bottom: 140px;}
	#integration ul.integrationLogoWrapper li {padding: 8px; margin: 0 15px 15px 0;}
	#integration ul.integrationLogoWrapper li img {max-height: 30px;}

	@keyframes boxOneBall {
		0% {top: 36px;}
		50% {top: 160px;}
		100% {top: 36px;}
	}

	@keyframes boxTwoBall {
		0% {top: 28px;}
		50% {top: 95px;}
		100% {top: 28px;}
	}

	@keyframes boxRightBall {
		0% {right: 36px;}
		50% {right: 105px;}
		100% {right: 36px;}
	}

	@keyframes boxLeftBall {
		0% {left: 36px;}
		50% {left: 105px;}
		100% {left: 36px;}
	}

	@keyframes boxBottomBall {
		0% {bottom: 36px;}
		50% {bottom: 105px;}
		100% {bottom: 36px;}
	}
}

@media only screen and (min-width: 576px) and (max-width: 991px) {
	#integration {padding: 80px 0 40px 0;}
	#integration #animationWapper {width: 350px; height: 350px; margin-bottom: 120px;}
	#integration #animationWapper .box.centerBox {width: 230px; height: 230px;}
	#integration #animationWapper .box.centerBox span img {max-width: 80% !important;}
	#integration #animationWapper .box {width: 70px; height: 70px;}
	#integration #animationWapper .box span {padding: 5px;}
	#integration #animationWapper .box img {max-width: 100% !important; max-height: 45px;}
	#integration #animationWapper .box.one {width: 150px; top: -35px;}
	#integration #animationWapper .box.one span img {max-height: 60px;}
	#integration #animationWapper .box.two {width: 150px; left: -10px; top: -120px;}
	#integration #animationWapper .box.three {width: 150px; top: -120px; right: -10px;}
	#integration #animationWapper .box.twelve {left: -70px; top: 50px;}
	#integration #animationWapper .box.ten {left: -70px; bottom: 54px; top: inherit;}
	#integration #animationWapper .box.nine {left: -70px; bottom: 142px;}
	#integration #animationWapper .box.four {right: -70px; top: 50px;}
	#integration #animationWapper .box.eleven {right: -70px; bottom: 142x; top: inherit;}
	#integration #animationWapper .box.five {right: -70px; bottom: 54px; top: inherit;}
	#integration #animationWapper .box.six {right: 50px; bottom: -70px;}
	#integration #animationWapper .box.eight {left: 50px; bottom: -70px;}
	#integration #animationWapper .box.seven {bottom: -70px;}
	#integration #animationWapper .box:before {width: 14px !important; height: 14px !important;}
	#integration #animationWapper .box.two:after {left: 80px; height: 115px;}
	#integration #animationWapper .box.three:after {left: 65px; height: 115px;}
	#integration #animationWapper .box.four:after {top: 50%; transform: translateY(-50%);}
	#integration #animationWapper .box.five:after {top: 50%; transform: translateY(-50%);}
	#integration #animationWapper .box.six:after {left: 18px; height: 80px; bottom: 51px;}
	#integration #animationWapper .box.seven:after {left: 28px; height: 80px; bottom: 51px;}
	#integration #animationWapper .box.eight:after {height: 50px; height: 80px; bottom: 51px;}
	#integration #animationWapper .box.nine:after {top: 50%; transform: translateY(-50%);}
	#integration #animationWapper .box.ten:after {top: 50%; transform: translateY(-50%);}
	#integration #animationWapper .box.eleven:after {top: 50%; transform: translateY(-50%);}
	#integration #animationWapper .box.twelve:after {top: 50%; transform: translateY(-50%);}
	#integration #animationWapper .box.two:before {left: 75px;}
	#integration #animationWapper .box.three:before {left: 60px;}
	#integration #animationWapper .box.four:before {top: 50%; transform: translateY(-50%);}
	#integration #animationWapper .box.five:before {top: 50%; transform: translateY(-50%);}
	#integration #animationWapper .box.six:before {left: 13px;}
	#integration #animationWapper .box.seven:before {left: 23px;}
	#integration #animationWapper .box.eight:before {bottom: 36px;}
	#integration #animationWapper .box.nine:before {top: 50%; transform: translateY(-50%);}
	#integration #animationWapper .box.ten:before {top: 50%; transform: translateY(-50%);}
	#integration #animationWapper .box.eleven:before {top: 50%; transform: translateY(-50%);}
	#integration #animationWapper .box.twelve:before {top: 50%; transform: translateY(-50%);}
	#integration h2 {text-align: center; font-size: 42px;}
	#integration h2 span {justify-content: center;}
	#integration label {text-align: center; width: 100%; font-size: 22px;}
	#integration p {padding: 0; text-align: center; font-size: 16px; line-height: 28px;}
	#integration h4 {justify-content: center;}
	#integration ul.integrationLogoWrapper {justify-content: center; margin-bottom: 200px;}
	#integration ul.integrationLogoWrapper li {margin: 0 20px 0 0;}
	#integration ul.integrationLogoWrapper li:last-child {margin: 0;}
	#integration ul.integrationLogoWrapper li img {max-height: 30px;}

	@keyframes boxOneBall {
		0% {top: 46px;}
		50% {top: 190px;}
		100% {top: 46px;}
	}

	@keyframes boxTwoBall {
		0% {top: 28px;}
		50% {top: 95px;}
		100% {top: 28px;}
	}

	@keyframes boxRightBall {
		0% {right: 46px;}
		50% {right: 140px;}
		100% {right: 46px;}
	}

	@keyframes boxLeftBall {
		0% {left: 46px;}
		50% {left: 140px;}
		100% {left: 46px;}
	}

	@keyframes boxBottomBall {
		0% {bottom: 46px;}
		50% {bottom: 140px;}
		100% {bottom: 46px;}
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	#integration #animationWapper {width: 300px; height: 300px; margin-top: 80px;}
	#integration #animationWapper .box.centerBox {width: 150px; height: 150px;}
	#integration #animationWapper .box.centerBox span img {max-width: 80% !important;}
	#integration #animationWapper .box {width: 60px; height: 60px;}
	#integration #animationWapper .box span {padding: 5px;}
	#integration #animationWapper .box img {max-width: 100% !important; max-height: 45px;}
	#integration #animationWapper .box.one {width: 100px; top: -10px;}
	#integration #animationWapper .box.two {width: 100px; left: 30px;}
	#integration #animationWapper .box.three {width: 100px; right: 30px;}
	#integration #animationWapper .box.twelve {left: -20px; top: 50px;}
	#integration #animationWapper .box.ten {left: -20px; top: 195px;}
	#integration #animationWapper .box.nine {left: -20px; bottom: 117px;}
	#integration #animationWapper .box.four {right: -20px; top: 50px;}
	#integration #animationWapper .box.eleven {right: -20px; bottom: 117px; top: inherit;}
	#integration #animationWapper .box.five {right: -20px; top: 195px;}
	#integration #animationWapper .box.six {right: 44px; bottom: -20px;}
	#integration #animationWapper .box.eight {left: 44px; bottom: -20px;}
	#integration #animationWapper .box.seven {bottom: -20px;}
	#integration #animationWapper .box:before {width: 14px !important; height: 14px !important;}
	#integration #animationWapper .box.two:after {left: 56px; height: 95px;}
	#integration #animationWapper .box.three:after {left: 40px; height: 95px;}
	#integration #animationWapper .box.four:after {top: 42px;}
	#integration #animationWapper .box.five:after {top: 18px;}
	#integration #animationWapper .box.six:after {left: 18px; bottom: 51px;}
	#integration #animationWapper .box.seven:after {left: 28px; bottom: 51px;}
	#integration #animationWapper .box.eight:after {height: 50px; bottom: 51px;}
	#integration #animationWapper .box.nine:after {top: 30px;}
	#integration #animationWapper .box.ten:after {top: 18px;}
	#integration #animationWapper .box.eleven:after {top: 30px;}
	#integration #animationWapper .box.twelve:after {top: 42px;}
	#integration #animationWapper .box.two:before {left: 51px;}
	#integration #animationWapper .box.three:before {left: 34px;}
	#integration #animationWapper .box.four:before {top: 37px;}
	#integration #animationWapper .box.five:before {top: 13px;}
	#integration #animationWapper .box.six:before {left: 13px;}
	#integration #animationWapper .box.seven:before {left: 23px;}
	#integration #animationWapper .box.eight:before {bottom: 36px;}
	#integration #animationWapper .box.nine:before {top: 24px;}
	#integration #animationWapper .box.ten:before {top: 13px;}
	#integration #animationWapper .box.eleven:before {top: 24px;}
	#integration #animationWapper .box.twelve:before {top: 37px;}
	#integration {padding: 100px 0;}
	#integration h2 {font-size: 37px; padding: 0 0 20px 0;}
	#integration label {font-size: 21px; padding-bottom: 20px;}
	#integration p {font-size: 16px; line-height: 26px; padding: 0;}
	#integration h4 {font-size: 20px;}
	#integration ul.integrationLogoWrapper li {padding: 8px; margin: 0 15px 15px 0;}
	#integration ul.integrationLogoWrapper li img {max-height: 25px;}

	@keyframes boxOneBall {
		0% {top: 36px;}
		50% {top: 160px;}
		100% {top: 36px;}
	}

	@keyframes boxTwoBall {
		0% {top: 28px;}
		50% {top: 95px;}
		100% {top: 28px;}
	}

	@keyframes boxRightBall {
		0% {right: 36px;}
		50% {right: 105px;}
		100% {right: 36px;}
	}

	@keyframes boxLeftBall {
		0% {left: 36px;}
		50% {left: 105px;}
		100% {left: 36px;}
	}

	@keyframes boxBottomBall {
		0% {bottom: 36px;}
		50% {bottom: 105px;}
		100% {bottom: 36px;}
	}
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	#integration {padding: 60px 0;}
	#integration #animationWapper {width: 300px; height: 300px; margin-top: 80px;}
	#integration #animationWapper .box.centerBox {width: 150px; height: 150px;}
	#integration #animationWapper .box.centerBox span img {max-width: 80% !important;}
	#integration #animationWapper .box {width: 60px; height: 60px;}
	#integration #animationWapper .box span {padding: 5px;}
	#integration #animationWapper .box img {max-width: 100% !important; max-height: 45px;}
	#integration #animationWapper .box.one {width: 100px; top: -10px;}
	#integration #animationWapper .box.two {width: 100px; left: 30px;}
	#integration #animationWapper .box.three {width: 100px; right: 30px;}
	#integration #animationWapper .box.twelve {left: -20px; top: 50px;}
	#integration #animationWapper .box.ten {left: -20px; top: 195px;}
	#integration #animationWapper .box.nine {left: -20px; bottom: 117px;}
	#integration #animationWapper .box.four {right: -20px; top: 50px;}
	#integration #animationWapper .box.eleven {right: -20px; bottom: 117px; top: inherit;}
	#integration #animationWapper .box.five {right: -20px; top: 195px;}
	#integration #animationWapper .box.six {right: 44px; bottom: -20px;}
	#integration #animationWapper .box.eight {left: 44px; bottom: -20px;}
	#integration #animationWapper .box.seven {bottom: -20px;}
	#integration #animationWapper .box:before {width: 14px !important; height: 14px !important;}
	#integration #animationWapper .box.two:after {left: 56px; height: 95px;}
	#integration #animationWapper .box.three:after {left: 40px; height: 95px;}
	#integration #animationWapper .box.four:after {top: 42px;}
	#integration #animationWapper .box.five:after {top: 18px;}
	#integration #animationWapper .box.six:after {left: 18px; bottom: 51px;}
	#integration #animationWapper .box.seven:after {left: 28px; bottom: 51px;}
	#integration #animationWapper .box.eight:after {height: 50px; bottom: 51px;}
	#integration #animationWapper .box.nine:after {top: 30px;}
	#integration #animationWapper .box.ten:after {top: 18px;}
	#integration #animationWapper .box.eleven:after {top: 30px;}
	#integration #animationWapper .box.twelve:after {top: 42px;}
	#integration #animationWapper .box.two:before {left: 51px;}
	#integration #animationWapper .box.three:before {left: 34px;}
	#integration #animationWapper .box.four:before {top: 37px;}
	#integration #animationWapper .box.five:before {top: 13px;}
	#integration #animationWapper .box.six:before {left: 13px;}
	#integration #animationWapper .box.seven:before {left: 23px;}
	#integration #animationWapper .box.eight:before {bottom: 36px;}
	#integration #animationWapper .box.nine:before {top: 24px;}
	#integration #animationWapper .box.ten:before {top: 13px;}
	#integration #animationWapper .box.eleven:before {top: 24px;}
	#integration #animationWapper .box.twelve:before {top: 37px;}
	#integration {padding: 100px 0;}
	#integration h2 {font-size: 30px; padding: 0 0 10px 0;}
	#integration label {font-size: 18px; padding-bottom: 15px;}
	#integration p {font-size: 13px; line-height: 23px; padding: 0;}
	#integration h4 {font-size: 20px;}
	#integration ul.integrationLogoWrapper li {padding: 8px; margin: 0 15px 15px 0;}
	#integration ul.integrationLogoWrapper li img {max-height: 25px;}

	@keyframes boxOneBall {
		0% {top: 36px;}
		50% {top: 160px;}
		100% {top: 36px;}
	}

	@keyframes boxTwoBall {
		0% {top: 28px;}
		50% {top: 95px;}
		100% {top: 28px;}
	}

	@keyframes boxRightBall {
		0% {right: 36px;}
		50% {right: 105px;}
		100% {right: 36px;}
	}

	@keyframes boxLeftBall {
		0% {left: 36px;}
		50% {left: 105px;}
		100% {left: 36px;}
	}

	@keyframes boxBottomBall {
		0% {bottom: 36px;}
		50% {bottom: 105px;}
		100% {bottom: 36px;}
	}
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
	#integration h2 {font-size: 40px; padding: 10px 0;}
	#integration label {padding-bottom: 20px;}
	#integration p {font-size: 16px; line-height: 26px;}

	#integration ul.integrationLogoWrapper li img {max-height: 35px;}

	#integration #animationWapper {width: 350px; height: 350px; margin-top: 120px;}
	#integration #animationWapper .box.centerBox {width: 230px; height: 230px;}
	#integration #animationWapper .box.centerBox span img {max-width: 80% !important;}
	#integration #animationWapper .box {width: 70px; height: 70px;}
	#integration #animationWapper .box span {padding: 5px;}
	#integration #animationWapper .box img {max-width: 100% !important; max-height: 45px;}
	#integration #animationWapper .box.one {width: 150px; top: -35px;}
	#integration #animationWapper .box.one span img {max-height: 60px;}
	#integration #animationWapper .box.two {width: 150px; left: -10px; top: -120px;}
	#integration #animationWapper .box.three {width: 150px; top: -120px; right: -10px;}
	#integration #animationWapper .box.twelve {left: -70px; top: 50px;}
	#integration #animationWapper .box.ten {left: -70px; bottom: 54px; top: inherit;}
	#integration #animationWapper .box.nine {left: -70px; bottom: 142px;}
	#integration #animationWapper .box.four {right: -70px; top: 50px;}
	#integration #animationWapper .box.eleven {right: -70px; bottom: 142x; top: inherit;}
	#integration #animationWapper .box.five {right: -70px; bottom: 54px; top: inherit;}
	#integration #animationWapper .box.six {right: 50px; bottom: -70px;}
	#integration #animationWapper .box.eight {left: 50px; bottom: -70px;}
	#integration #animationWapper .box.seven {bottom: -70px;}
	#integration #animationWapper .box:before {width: 14px !important; height: 14px !important;}
	#integration #animationWapper .box.two:after {left: 80px; height: 115px;}
	#integration #animationWapper .box.three:after {left: 65px; height: 115px;}
	#integration #animationWapper .box.four:after {top: 50%; transform: translateY(-50%);}
	#integration #animationWapper .box.five:after {top: 50%; transform: translateY(-50%);}
	#integration #animationWapper .box.six:after {left: 18px; height: 80px; bottom: 51px;}
	#integration #animationWapper .box.seven:after {left: 28px; height: 80px; bottom: 51px;}
	#integration #animationWapper .box.eight:after {height: 50px; height: 80px; bottom: 51px;}
	#integration #animationWapper .box.nine:after {top: 50%; transform: translateY(-50%);}
	#integration #animationWapper .box.ten:after {top: 50%; transform: translateY(-50%);}
	#integration #animationWapper .box.eleven:after {top: 50%; transform: translateY(-50%);}
	#integration #animationWapper .box.twelve:after {top: 50%; transform: translateY(-50%);}
	#integration #animationWapper .box.two:before {left: 75px;}
	#integration #animationWapper .box.three:before {left: 60px;}
	#integration #animationWapper .box.four:before {top: 50%; transform: translateY(-50%);}
	#integration #animationWapper .box.five:before {top: 50%; transform: translateY(-50%);}
	#integration #animationWapper .box.six:before {left: 13px;}
	#integration #animationWapper .box.seven:before {left: 23px;}
	#integration #animationWapper .box.eight:before {bottom: 36px;}
	#integration #animationWapper .box.nine:before {top: 50%; transform: translateY(-50%);}
	#integration #animationWapper .box.ten:before {top: 50%; transform: translateY(-50%);}
	#integration #animationWapper .box.eleven:before {top: 50%; transform: translateY(-50%);}
	#integration #animationWapper .box.twelve:before {top: 50%; transform: translateY(-50%);}
	#integration h2 {font-size: 37px; padding: 0 0 20px 0;}
	#integration label {font-size: 21px; padding-bottom: 20px;}
	#integration p {font-size: 16px; line-height: 26px; padding: 0;}
	#integration h4 {font-size: 20px;}
	#integration ul.integrationLogoWrapper li {padding: 8px; margin: 0 15px 15px 0;}
	#integration ul.integrationLogoWrapper li img {max-height: 25px;}

	@keyframes boxOneBall {
		0% {top: 46px;}
		50% {top: 190px;}
		100% {top: 46px;}
	}

	@keyframes boxTwoBall {
		0% {top: 28px;}
		50% {top: 95px;}
		100% {top: 28px;}
	}

	@keyframes boxRightBall {
		0% {right: 46px;}
		50% {right: 140px;}
		100% {right: 46px;}
	}

	@keyframes boxLeftBall {
		0% {left: 46px;}
		50% {left: 140px;}
		100% {left: 46px;}
	}

	@keyframes boxBottomBall {
		0% {bottom: 46px;}
		50% {bottom: 140px;}
		100% {bottom: 46px;}
	}
}