#maisy {margin: 0; padding: 200px 0 180px 0; overflow: hidden; background: url(../images/maisy-background.jpg) repeat; position: relative;}
#maisy:before {content: ""; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.3); z-index: 1; left: 0; top: 0; position: absolute;}
#maisy::after {content: ""; position: absolute; top: 0px; left: 0; width: 100%; height: 130px; background: url(https://front-end-noobs.com/jecko/img/wave-mid.png) no-repeat; transform: rotate(180deg);}
#maisy .maisyAnimationWrapper {position: relative; min-height: 200px; z-index: 2;}
.maisyImageWrapper {position: relative; z-index: 999;}
.maisyWrapper {margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: nowrap; justify-content: center;}
.maisyWrapper .leftPart, .maisyWrapper .centerPart, .maisyWrapper .rightPart {display: inline-flex; align-items: center; flex-wrap: wrap; position: relative; z-index: 3;}
.maisyWrapper .leftPart {justify-content: flex-end; margin-right: -20px;}
.maisyWrapper .rightPart {justify-content: flex-start;}
.maisyWrapper .centerPart {padding: 0 0; position: relative; z-index: 2;}
.maisyWrapper .leftPart h2, .maisyWrapper .rightPart h2 {margin: 0; padding: 10px 0 30px 0; font-weight: 800; font-size: 60px; line-height: 70px; color: #494949; width: 100%; min-height: 182px; display: flex; align-items: center; flex-wrap: wrap;}
.maisyWrapper .leftPart h2 {justify-content: flex-end;}
.maisyWrapper .rightPart h2 img {max-width: 270px; margin-left: 20px;}
.maisyWrapper .leftPart h2 {text-align: right;}
.maisyWrapper .leftPart ul.maisyPoints {margin: 0; padding: 0 40px 0 0; list-style: none; width: 100%; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end;}
.maisyWrapper .rightPart ul.maisyPoints {margin: 0; padding: 0 0 0 40px; list-style: none; width: 100%; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-start;}
.maisyWrapper .leftPart ul.maisyPoints li {margin-bottom: 40px; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; width: 100%;}
.maisyWrapper .rightPart ul.maisyPoints li {margin-bottom: 40px; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-start; width: 100%;}
.maisyWrapper .leftPart ul.maisyPoints li .pointsCard, .maisyWrapper .rightPart ul.maisyPoints li .pointsCard {width: 280px; position: relative;}
.maisyWrapper .leftPart ul.maisyPoints li .pointsCard.animate .innerPointCard,
.maisyWrapper .rightPart ul.maisyPoints li .pointsCard.animate .innerPointCard {background: linear-gradient(90deg, #544aec 0%, #1308AD 100%);}
.maisyWrapper .leftPart ul.maisyPoints li .pointsCard.animate .innerPointCard .icon img, 
.maisyWrapper .rightPart ul.maisyPoints li .pointsCard.animate .innerPointCard .icon img {filter: brightness(0) invert(1);}
.maisyWrapper .leftPart ul.maisyPoints li .pointsCard.animate .innerPointCard h6, 
.maisyWrapper .rightPart ul.maisyPoints li .pointsCard.animate .innerPointCard h6 {color: #fff;}
.maisyWrapper .leftPart ul.maisyPoints li .pointsCard .innerPointCard, .maisyWrapper .rightPart ul.maisyPoints li .pointsCard .innerPointCard {width: 280px; background: #fff; box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.15); border-radius: 8px; padding: 10px 15px; display: flex; align-items: center; flex-wrap: nowrap; position: relative; z-index: 2; box-sizing: border-box; transform-origin: right;}
.maisyWrapper .leftPart ul.maisyPoints li .pointsCard.animate .innerPointCard,
.maisyWrapper .rightPart ul.maisyPoints li .pointsCard.animate .innerPointCard {animation: fadeIn 0.2s ease-in forwards; animation-delay: 1s;}
.maisyWrapper .leftPart ul.maisyPoints li .pointsCard.one:after {content: ""; bottom: -110px; right: -140px; height: 4px; width: 0; position: absolute; background: #3206B4; transform: rotate(43deg); transform-origin: bottom right; z-index: 1;}
.maisyWrapper .leftPart ul.maisyPoints li .pointsCard.two:after {content: ""; bottom: -6px; right: -184px; height: 4px; width: 0; position: absolute; background: #3206B4; transform: rotate(10deg); transform-origin: bottom right; z-index: 1;}
.maisyWrapper .leftPart ul.maisyPoints li .pointsCard.three:after {content: ""; top: -43px; right: -227px; width: 0; height: 4px; position: absolute; background: #3206B4; transform: rotate(-17deg); transform-origin: bottom right; z-index: 1;}
.maisyWrapper .leftPart ul.maisyPoints li .pointsCard.four:after {content: ""; top: -146px; right: -265px; width: 0; height: 4px; position: absolute; background: #3206B4; transform: rotate(-33deg); transform-origin: bottom right; z-index: 1;}
.maisyWrapper .leftPart ul.maisyPoints li .pointsCard.five:after {content: ""; bottom: 300px; right: -304px; width: 0; height: 4px; position: absolute; background: #3206B4; transform: rotate(-41deg); transform-origin: bottom right; z-index: 1;}
.maisyWrapper .rightPart ul.maisyPoints li .pointsCard.six:after {content: ""; top: 166px; left: -139px; height: 4px; width: 0; position: absolute; background: #3206B4; transform: rotate(-43deg); transform-origin: bottom left; z-index: 1;}
.maisyWrapper .rightPart ul.maisyPoints li .pointsCard.seven:after {content: ""; bottom: -6px; left: -184px; height: 4px; width: 0; position: absolute; background: #3206B4; transform: rotate(-10deg); transform-origin: bottom left; z-index: 1;}
.maisyWrapper .rightPart ul.maisyPoints li .pointsCard.eight:after {content: ""; top: -43px; left: -227px; width: 0; height: 4px; position: absolute; background: #3206B4; transform: rotate(17deg); transform-origin: bottom left; z-index: 1;}
.maisyWrapper .rightPart ul.maisyPoints li .pointsCard.nine:after {content: ""; top: -146px; left: -265px; width: 0; height: 4px; position: absolute; background: #3206B4; transform: rotate(33deg); transform-origin: bottom left; z-index: 1;}
.maisyWrapper .rightPart ul.maisyPoints li .pointsCard.ten:after {content: ""; bottom: 300px; left: -304px; width: 0; height: 4px; position: absolute; background: #3206B4; transform: rotate(41deg); transform-origin: bottom left; z-index: 1;}
.maisyWrapper .leftPart ul.maisyPoints li .pointsCard.two {margin-right: 40px;}
.maisyWrapper .leftPart ul.maisyPoints li .pointsCard.three {margin-right: 80px;}
.maisyWrapper .leftPart ul.maisyPoints li .pointsCard.four {margin-right: 120px;}
.maisyWrapper .leftPart ul.maisyPoints li .pointsCard.five {margin-right: 160px;}
.maisyWrapper .rightPart ul.maisyPoints li .pointsCard.seven {margin-left: 40px;}
.maisyWrapper .rightPart ul.maisyPoints li .pointsCard.eight {margin-left: 80px;}
.maisyWrapper .rightPart ul.maisyPoints li .pointsCard.nine {margin-left: 120px;}
.maisyWrapper .rightPart ul.maisyPoints li .pointsCard.ten {margin-left: 160px;}
.maisyWrapper .leftPart ul.maisyPoints li .icon, .maisyWrapper .rightPart ul.maisyPoints li .icon {display: inline-flex; align-items: center; flex-wrap: wrap;}
.maisyWrapper .leftPart ul.maisyPoints li .icon img, .maisyWrapper .rightPart ul.maisyPoints li .icon img {max-width: 40px;}
.maisyWrapper .leftPart ul.maisyPoints li h6, .maisyWrapper .rightPart ul.maisyPoints li h6 {margin: 0; padding: 0 0 0 20px; font-weight: 800; font-size: 24px; line-height: 33px; color: #393939; display: inline-flex; align-items: center; flex-wrap: wrap;}
.maisyWrapper .centerPart img {max-height: 650px; margin-top: -70px; position: relative; z-index: 1;}
#typewriter-prefix {text-align: left; color: #E8175D;}
#typewriter-suffix {color: #000; width: 10px; margin-left: 20px;}
#typewriter-text {text-transform: uppercase; background: linear-gradient(to right,  rgba(0,122,252,1) 0%,rgba(50,6,180,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;}
#typewriter-prefix, #typewriter-text{font-weight: 800;}
.flexboxcontainer {display: flex; justify-content: center; padding-top: 40px; position: relative; z-index: 2;}
.flexboxcontainer h5 {font-size: 80px; font-weight: 800; color: #393939; margin-top: -50px;}
.flexboxcontainer h5:first-child {padding-right: 30px;}
#maisy .ripple {text-decoration: none; color: #fff; width: 110px; height: 110px; background-color: #00E7FF; margin: 0 auto; border-radius: 100%; animation: ripple 2s linear infinite; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0;}
.mobileMaisyWrapper {position: relative; z-index: 1; align-items: center; flex-wrap: wrap; width: 100%; display: none; padding-bottom: 30px;}
.mobileMaisyWrapper .maisyContent {width: calc(100% - 120px); display: inline-flex; justify-content: center; flex-wrap: wrap;}
.mobileMaisyWrapper .maisyContent label, .mobileMaisyWrapper .maisyContent p {font-size: 36px; font-weight: 800; color: #494949; width: 100%; text-align: center;}
.mobileMaisyWrapper .maisyContent span {width: 100%; display: flex; justify-content: center;}
.mobileMaisyWrapper .maisyContent span img {max-width: 180px;}
.mobileMaisyWrapper .maisyImage {width: 100px;}
.mobileMaisyWrapper .maisyImage img {max-height: 300px;}

@keyframes fadeIn {
    to {width: 280px; opacity: 1;}
}

@keyframes pointOnePath {
	0% {width: 0px;}
    100% {width: 200px;}
}

@keyframes pointThreePath {
	0% {width: 0px;}
    100% {width: 245px;}
}

@keyframes pointFourPath {
	0% {width: 0px;}
    100% {width: 322px;}
}

@keyframes pointFivePath {
	0% {width: 0px;}
    100% {width: 415px;}
}

@keyframes ripple {
	0% {box-shadow: 0 0 0 0 rgba(44, 82, 180, 0.4), 0 0 0 10px rgba(44, 82, 180, 0.4), 0 0 0 30px rgba(44, 82, 180, 0.4), 0 0 0 60px rgba(44, 82, 180, 0.4);}
	100% {box-shadow: 0 0 0 10px rgba(44, 82, 180, 0.4), 0 0 0 120px rgba(44, 82, 180, 0.4), 0 0 0 180px rgba(44, 82, 180, 0.4), 0 0 0 240px rgba(44, 82, 180, 0);}
}

/**** media queries ****/
@media only screen and (min-width: 0px) and (max-width: 767px) {
	#maisy {padding: 120px 0 110px 0;}
	.maisyWrapper {flex-wrap: wrap;}
	.maisyWrapper .centerPart {display: none !important;}
	.maisyWrapper .leftPart h2 {display: none;}
	.maisyWrapper .rightPart h2 {display: none;}
	.maisyWrapper .leftPart, .maisyWrapper .rightPart {width: 50%; margin: 0;}
	.maisyWrapper .leftPart ul.maisyPoints {padding-right: 8px;}
	.maisyWrapper .rightPart ul.maisyPoints {padding-left: 8px;}
	.maisyWrapper .leftPart ul.maisyPoints li, .maisyWrapper .rightPart ul.maisyPoints li {margin-bottom: 16px;}
	.maisyWrapper .leftPart ul.maisyPoints li .pointsCard {margin-right: 0 !important; width: 100%;}
	.maisyWrapper .rightPart ul.maisyPoints li .pointsCard {margin-left: 0 !important; width: 100%;}
	.maisyWrapper .leftPart ul.maisyPoints li .pointsCard .innerPointCard, .maisyWrapper .rightPart ul.maisyPoints li .pointsCard .innerPointCard {width: 100% !important; padding: 10px;}
	.maisyWrapper .leftPart ul.maisyPoints li .pointsCard.animate .innerPointCard, .maisyWrapper .rightPart ul.maisyPoints li .pointsCard.animate .innerPointCard {width: 100% !important; padding: 10px;}
	.maisyWrapper .leftPart ul.maisyPoints li .icon img, .maisyWrapper .rightPart ul.maisyPoints li .icon img {max-width: 26px;}
	.maisyWrapper .leftPart ul.maisyPoints li h6, .maisyWrapper .rightPart ul.maisyPoints li h6 {font-weight: 600; padding: 0 0 0 10px; font-size: 16px; line-height: 26px;}
	.mobileMaisyWrapper {display: flex;}
	.flexboxcontainer {flex-wrap: wrap; padding-top: 70px;}
	.flexboxcontainer h5 {padding: 0; font-size: 42px; width: 100%; text-align: center;}
	.flexboxcontainer h5:first-child {padding-right: 0;}
	#typewriter-text {margin-top: 48px; display: inline-flex;}
	#typewriter-suffix {margin-left: 10px;}
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
	.maisyWrapper {max-width: 450px; margin: 0 auto;}
	.maisyWrapper .leftPart ul.maisyPoints li h6, .maisyWrapper .rightPart ul.maisyPoints li h6 {font-size: 18px; line-height: 26px;}
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
	#maisy {padding: 150px 0 80px 0;}
	.maisyWrapper .centerPart img {max-height: 420px;}
	.maisyWrapper .leftPart h2, .maisyWrapper .rightPart h2 {font-size: 40px; min-height: 50px;}
	.maisyWrapper .rightPart h2 img {max-width: 180px;}
	#maisy .ripple {width: 70px; height: 70px;}
	.maisyWrapper .leftPart ul.maisyPoints li .pointsCard .innerPointCard, .maisyWrapper .rightPart ul.maisyPoints li .pointsCard .innerPointCard {padding: 8px 12px;}
	.maisyWrapper .leftPart ul.maisyPoints li .icon img, .maisyWrapper .rightPart ul.maisyPoints li .icon img {max-width: 34px;}
	.maisyWrapper .leftPart ul.maisyPoints li h6, .maisyWrapper .rightPart ul.maisyPoints li h6 {font-weight: 600; font-size: 20px; line-height: 26px;}
	.maisyWrapper .leftPart ul.maisyPoints li .pointsCard, .maisyWrapper .rightPart ul.maisyPoints li .pointsCard {width: 225px;}
	.maisyWrapper .leftPart ul.maisyPoints li .pointsCard .innerPointCard, .maisyWrapper .rightPart ul.maisyPoints li .pointsCard .innerPointCard, .maisyWrapper .leftPart ul.maisyPoints li .pointsCard.animate .innerPointCard, .maisyWrapper .rightPart ul.maisyPoints li .pointsCard.animate .innerPointCard {width: 225px !important;}
	.maisyWrapper .leftPart ul.maisyPoints {padding-right: 20px;}
	.maisyWrapper .rightPart ul.maisyPoints {padding-left: 20px;}
	.maisyWrapper .leftPart ul.maisyPoints li, .maisyWrapper .rightPart ul.maisyPoints li {margin-bottom: 20px;}
	.maisyWrapper .leftPart ul.maisyPoints li .pointsCard.two {margin-right: 20px;}
	.maisyWrapper .leftPart ul.maisyPoints li .pointsCard.three {margin-right: 40px;}
	.maisyWrapper .leftPart ul.maisyPoints li .pointsCard.four {margin-right: 60px;}
	.maisyWrapper .leftPart ul.maisyPoints li .pointsCard.five {margin-right: 80px;}
	.maisyWrapper .rightPart ul.maisyPoints li .pointsCard.seven {margin-left: 20px;}
	.maisyWrapper .rightPart ul.maisyPoints li .pointsCard.eight {margin-left: 40px;}
	.maisyWrapper .rightPart ul.maisyPoints li .pointsCard.nine {margin-left: 60px;}
	.maisyWrapper .rightPart ul.maisyPoints li .pointsCard.ten {margin-left: 80px;}
	.flexboxcontainer h5 {font-size: 60px;}
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	/* #maisy {padding: 140px 0 100px 0;} */
	#maisy .ripple {width: 70px; height: 70px;}
	.maisyWrapper .centerPart img {max-height: 500px; margin-top: -30px;}
	.maisyWrapper .leftPart h2, .maisyWrapper .rightPart h2 {font-size: 45px; min-height: 132px;}
	.maisyWrapper .rightPart h2 img {max-width: 205px; margin-left: 15px;}
	.maisyWrapper .leftPart ul.maisyPoints li .pointsCard, .maisyWrapper .rightPart ul.maisyPoints li .pointsCard {width: 260px;}
	.maisyWrapper .leftPart ul.maisyPoints li .pointsCard .innerPointCard, .maisyWrapper .rightPart ul.maisyPoints li .pointsCard .innerPointCard, .maisyWrapper .leftPart ul.maisyPoints li .pointsCard.animate .innerPointCard, .maisyWrapper .rightPart ul.maisyPoints li .pointsCard.animate .innerPointCard {width: 220px !important;}
	.maisyWrapper .leftPart ul.maisyPoints li, .maisyWrapper .rightPart ul.maisyPoints li {margin-bottom: 25px;}
	.maisyWrapper .leftPart ul.maisyPoints li .icon img, .maisyWrapper .rightPart ul.maisyPoints li .icon img {max-width: 34px;}
	.maisyWrapper .leftPart ul.maisyPoints li h6, .maisyWrapper .rightPart ul.maisyPoints li h6 {padding: 0 0 0 15px; font-weight: 600; font-size: 20px; line-height: 30px;}
	.maisyWrapper .leftPart ul.maisyPoints li .pointsCard.two {margin-right: 35px;}
	.maisyWrapper .leftPart ul.maisyPoints li .pointsCard.three {margin-right: 70px;}
	.maisyWrapper .leftPart ul.maisyPoints li .pointsCard.four {margin-right: 105px;}
	.maisyWrapper .leftPart ul.maisyPoints li .pointsCard.five {margin-right: 140px;}
	.maisyWrapper .rightPart ul.maisyPoints li .pointsCard.seven {margin-left: 35px;}
	.maisyWrapper .rightPart ul.maisyPoints li .pointsCard.eight {margin-left: 70px;}
	.maisyWrapper .rightPart ul.maisyPoints li .pointsCard.nine {margin-left: 105px;}
	.maisyWrapper .rightPart ul.maisyPoints li .pointsCard.ten {margin-left: 140px;}
	/* .flexboxcontainer h5 {font-size: 60px; margin-top: -20px;} */

	#maisy {padding: 60px 0 110px 0;}
	#maisy::after {height: 95px; background-size: cover;}
	.maisyWrapper .leftPart h2, .maisyWrapper .rightPart h2 {font-size: 30px; min-height: 80px; padding: 10px 0;}
	.maisyWrapper .rightPart h2 img {max-width: 140px;}
	.maisyWrapper .leftPart ul.maisyPoints {padding: 0 10px 0 0;}
	.maisyWrapper .leftPart ul.maisyPoints li, .maisyWrapper .rightPart ul.maisyPoints li {margin-bottom: 10px;}
	.maisyWrapper .leftPart ul.maisyPoints li .pointsCard .innerPointCard, .maisyWrapper .rightPart ul.maisyPoints li .pointsCard .innerPointCard {padding: 8px 12px;}
	.maisyWrapper .leftPart ul.maisyPoints li .icon img, .maisyWrapper .rightPart ul.maisyPoints li .icon img {max-width: 20px;}
	.maisyWrapper .leftPart ul.maisyPoints li h6, .maisyWrapper .rightPart ul.maisyPoints li h6 {font-weight: 600; font-size: 13px; padding: 0 0 0 10px;}
	.maisyWrapper .centerPart img {max-height: 410px; margin-top: -10px;}
	.flexboxcontainer h5 {font-size: 40px; margin-top: -20px;}
	.flexboxcontainer h5:first-child {padding-right: 20px;}
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
	#maisy {padding: 120px 0 140px 0;}
	#maisy::after {height: 95px; background-size: cover;}
	.maisyWrapper .leftPart h2, .maisyWrapper .rightPart h2 {font-size: 40px; min-height: 135px; padding: 10px 0;}
	.maisyWrapper .rightPart h2 img {max-width: 180px;}
	.maisyWrapper .leftPart ul.maisyPoints li, .maisyWrapper .rightPart ul.maisyPoints li {margin-bottom: 18px;}
	.maisyWrapper .leftPart ul.maisyPoints li .pointsCard .innerPointCard, .maisyWrapper .rightPart ul.maisyPoints li .pointsCard .innerPointCard {padding: 8px 12px;}
	.maisyWrapper .leftPart ul.maisyPoints li .icon img, .maisyWrapper .rightPart ul.maisyPoints li .icon img {max-width: 25px;}
	.maisyWrapper .leftPart ul.maisyPoints li h6, .maisyWrapper .rightPart ul.maisyPoints li h6 {font-weight: 600; font-size: 16px; padding: 0 0 0 10px;}
	.maisyWrapper .centerPart img {max-height: 500px; margin-top: -10px;}
	.flexboxcontainer h5 {font-size: 40px; margin-top: -20px;}
	.flexboxcontainer h5:first-child {padding-right: 20px;}
}

@media only screen and (min-width: 1600px) and (max-width: 1799px) {
	#maisy {padding: 160px 0 100px 0;}
}