#mac-os{overflow-x:hidden;position:relative}#mac-os div#root{position:relative;overflow-x:hidden}@-webkit-keyframes gradient{0%{background-position:0% 52%}50%{background-position:100% 49%}100%{background-position:0% 52%}}@keyframes gradient{0%{background-position:0% 52%}50%{background-position:100% 49%}100%{background-position:0% 52%}}#mac-os .dark-bg{color:#fff;background-color:#111}#mac-os h1,#mac-os h2{line-height:1.14}#mac-os .section{padding:150px 0}#mac-os .section.one{padding-top:250px;padding-bottom:150px}#mac-os .section.one .diagonal-bar{position:absolute;top:125px;height:700px;width:200px;transform:rotate(300deg);border-radius:20px;z-index:9999}#mac-os .section.one .diagonal-bar.one{top:0;left:-200px;background-image:linear-gradient(265deg,#12FFF0 0%,#00B6FF 61%)}#mac-os .section.one .diagonal-bar.three{top:250px;right:-300px;background-image:linear-gradient(64deg,#4450EC 0%,#9F35EB 92%)}#mac-os .section.one .text h1{text-align:center;max-width:530px;margin:0 auto;padding:50px 0 40px;position:relative}#mac-os .section.one .text a{display:block;cursor:pointer;margin:0 auto;width:250px}#mac-os .section.one .text .bar{height:15px;width:90px;margin:0 auto;border-radius:3px;background:linear-gradient(269deg,#4450ec,#9f35eb);background-size:400% 400%;-webkit-animation:gradient 2.5s ease infinite;-moz-animation:gradient 2.5s ease infinite;animation:gradient 2.5s ease infinite}#mac-os .section.one .image .macbook-header{max-width:1150px;width:100%;display:block;margin:0 auto 80px}#mac-os .section.two{position:relative}#mac-os .section.two .text{display:inline-block;width:49%;vertical-align:top;padding-right:100px}#mac-os .section.two .text h2,#mac-os .section.two .text p{color:#fff}#mac-os .section.two .image{position:absolute;top:75px;right:-40px;display:inline-block;width:49%}#mac-os .section.two .image .rect-bg{position:absolute;width:260px;height:530px;opacity:.87;background-image:linear-gradient(-90deg,#4450EC 0%,#9F35EB 96%);border-radius:20px;left:95px;top:220px;z-index:1}#mac-os .section.two .image:before{content:'';position:absolute;top:-41px;left:47px;width:255.8px;height:407px;-webkit-transform:rotate(-48deg);transform:rotate(-48deg);opacity:.15;border-radius:20px;background-image:linear-gradient(97deg,#4450ec,#9f35eb)}#mac-os .section.two .image:after{content:'';position:absolute;right:58px;bottom:-64px;width:255px;height:392px;-webkit-transform:rotate(-48deg);transform:rotate(-48deg);opacity:.17;border-radius:20px;background-image:linear-gradient(to right,#4450ec,#9f35eb)}#mac-os .section.two .image img{max-width:430px;box-shadow:0 4px 10px 0 rgba(0,0,0,.2);position:relative;z-index:2}#mac-os .section.two .image img:first-of-type{margin-bottom:25px}#mac-os .section.three{position:relative;padding:100px 0 200px}#mac-os .section.three .text{display:inline-block;width:49%;margin-left:auto;margin-top:100px;padding-left:100px;position:relative;vertical-align:top}#mac-os .section.three .text .bar{content:'';position:absolute;left:0;top:84px;transform:rotate(90deg);height:15px;width:90px;margin:0 auto;border-radius:3px;background-image:linear-gradient(90deg,#4450ec,#9f35eb);-webkit-animation:gradient 2.5s ease infinite;-moz-animation:gradient 2.5s ease infinite;animation:gradient 2.5s ease infinite;background-size:400% 400%}#mac-os .section.three .image{display:inline-block;width:49%;margin-left:auto;margin-top:100px;position:relative}#mac-os .section.three .macbook-native{position:absolute;left:-350px;top:-40px;max-width:800px;z-index:9999}#mac-os .section.four{padding:250px 0;background-image:linear-gradient(180deg,#222,#111);z-index:0}#mac-os .section.four .diagonal-bar{position:relative;z-index:9999}#mac-os .section.four .diagonal-bar:after{content:'';position:absolute;height:700px;width:250px;border-radius:10px}#mac-os .section.four .diagonal-bar.one:after{top:350px;left:-258px;transform:rotate(49deg);background-image:linear-gradient(191deg,#00ff75,#26d878)}#mac-os .section.four .diagonal-bar.two:after{top:350px;right:-300px;transform:rotate(-49deg);background-image:linear-gradient(60deg,#4450ec,#9f35eb)}#mac-os .section.four .text{display:inline-block;width:49%;vertical-align:top}#mac-os .section.four .text h2{margin-top:100px;color:#fff;line-height:1.4}#mac-os .section.four .text p{margin-bottom:80px;color:#fff;max-width:350px}#mac-os .section.four .text a img{cursor:pointer}#mac-os .section.four .image{display:inline-block;width:49%;position:relative;right:-24px}#mac-os .section.four .image .rect-bg{position:absolute;top:500px;right:84px;width:275px;height:529px;opacity:.87;border-radius:20px;background-image:linear-gradient(115deg,#2bd7e7,#4946ed);z-index:1}#mac-os .section.four .image:before{content:'';position:absolute;width:281px;height:407px;right:35px;top:-39px;-webkit-transform:rotate(48deg);transform:rotate(48deg);opacity:.15;border-radius:20px;background-image:linear-gradient(124deg,#2bd7e7,#4946ed)}#mac-os .section.four .image:after{content:'';position:absolute;right:135px;bottom:-115px;width:280px;height:392px;-webkit-transform:rotate(48deg);transform:rotate(48deg);opacity:.17;border-radius:20px;background-image:linear-gradient(118deg,#2bd7e7,#4946ed)}#mac-os .section.four .image img{max-width:430px;display:block;margin-left:auto;box-shadow:0 3px 7px 0 rgba(0,0,0,.2);position:relative;z-index:2}@media all and (max-width:1680px){#mac-os .section.one{padding-top:175px;padding-bottom:75px}#mac-os .section.three .macbook-native{left:-400px;top:0}#mac-os .section.one .diagonal-bar.one{left:-300px;top:-40px;width:200px}#mac-os .section.one .diagonal-bar.three{right:-300px;top:200px;width:200px}#mac-os .section.one .image .macbook-header{max-width:750px;margin:0 auto 50px}#mac-os .section.four .diagonal-bar:after{height:700px;width:200px}#mac-os .section.four .diagonal-bar.one:after{top:350px;left:-298px;transform:rotate(49deg);background-image:linear-gradient(191deg,#00ff75,#26d878)}#mac-os .section.four .diagonal-bar.two:after{top:350px;right:-322px;transform:rotate(-49deg);background-image:linear-gradient(60deg,#4450ec,#9f35eb)}}@media all and (max-width:1020px){#mac-os h1{font-size:47px}#mac-os h2{font-size:34px}#mac-os .section{padding:150px 0}#mac-os .section.one{padding-top:200px;padding-bottom:100px}#mac-os .section.one .diagonal-bar.one{top:-50px;left:-375px;background-image:linear-gradient(-95deg,#12FFF0 0%,#00B6FF 61%)}#mac-os .section.one .diagonal-bar.three{top:150px;right:-360px;background-image:linear-gradient(90deg,#4450EC 0%,#9F35EB 92%)}#mac-os .section.one .image .macbook-header{max-width:700px}#mac-os .section.one .text .bar{height:10px;width:70px}#mac-os .section.two{padding-top:50px;padding-bottom:0;height:450px}#mac-os .section.two .image{right:30px;margin-top:30px}#mac-os .section.two .image .rect-bg{width:195px;height:450px;left:101px;top:164px}#mac-os .section.two .image:before{width:189px;height:280px;top:-35px;left:41px}#mac-os .section.two .image:after{width:189px;height:280px;right:15px;bottom:-64px}#mac-os .section.two .image img{max-width:350px;width:100%;margin:0 auto;display:block}#mac-os .section.two .image img:first-of-type{margin-bottom:18px}#mac-os .section.three{height:550px;padding:100px 0}#mac-os .section.three .macbook-native{max-width:650px;top:-5px;left:-289px}#mac-os .section.three .text .bar{height:10px;width:70px}#mac-os .section.four{padding:150px 0}#mac-os .section.four .diagonal-bar.one:after{top:300px;left:-350px;transform:rotate(45deg)}#mac-os .section.four .diagonal-bar.two:after{top:320px;right:-375px;transform:rotate(-45deg)}#mac-os .section.four .text h2{margin-top:0}#mac-os .section.four .text p{margin:30px auto 50px 0;font-size:16px;max-width:350px}#mac-os .section.four .image{padding-top:125px;padding-right:50px}#mac-os .section.four .image .rect-bg{width:225px;height:402px;top:467px;right:104px}#mac-os .section.four .image:before{width:210px;height:305px;right:76px;top:11px}#mac-os .section.four .image:after{width:210px;height:305px;right:149px;bottom:-44px}#mac-os .section.four .image img{max-width:300px}}@media all and (max-width:700px){#mac-os h1{font-size:34px}#mac-os h2{font-size:28px}#mac-os .section{padding:150px 0}#mac-os .section.one{padding-top:125px;padding-bottom:150px}#mac-os .section.one .diagonal-bar{height:230px;width:72px;border-radius:10px;transform:rotate(312deg)}#mac-os .section.one .diagonal-bar.one{display:none}#mac-os .section.one .diagonal-bar.three{display:none}#mac-os .section.one .text h1{text-align:left;padding:30px 0}#mac-os .section.one .text a{margin-left:0}#mac-os .section.one .text .bar{margin-left:0}#mac-os .section.one .image{position:relative;height:300px}#mac-os .section.one .image .macbook-header{max-width:450px;width:100%;margin:0 auto 50px}#mac-os .section.two{height:700px;padding-top:50px}#mac-os .section.two .text{width:100%;padding-right:0}#mac-os .section.two .image{width:90%;display:block;text-align:center;top:325px}#mac-os .section.two .image:before{left:77px;top:-25px}#mac-os .section.two .image:after{right:21px;bottom:-42px}#mac-os .section.two .image .rect-bg{width:176px;height:368px;top:146px;left:118px}#mac-os .section.two .image img{max-width:350px;margin:0 auto;display:block;width:auto}#mac-os .section.three{height:600px;padding:100px 0}#mac-os .section.three .text{width:100%;max-width:350px;display:block;margin-top:0;margin-left:0;padding-left:0}#mac-os .section.three .text .bar{transform:rotate(0deg);left:0;right:auto;top:55px;height:7px;width:47px;border-radius:2px}#mac-os .section.three .text p{padding-top:20px}#mac-os .section.three .macbook-native{max-width:475px;top:200px;left:-200px}#mac-os .section.four{height:1100px;padding:150px 0}#mac-os .section.four .diagonal-bar.one:after{top:750px;left:-350px;transform:rotate(45deg)}#mac-os .section.four .diagonal-bar.two:after{top:700px;right:-375px;transform:rotate(-45deg)}#mac-os .section.four .text{width:100%}#mac-os .section.four .text h2{margin-top:0}#mac-os .section.four .text p{color:#fff;max-width:350px;margin-bottom:30px}#mac-os .section.four .text a{position:relative;top:545px;display:block;text-align:center}#mac-os .section.four .image{display:inline-block;width:100%;margin:0 auto;padding-top:0;padding-right:0;right:0}#mac-os .section.four .image .rect-bg{width:200px;height:376px;top:433px;right:80px}#mac-os .section.four .image:before{height:290px;right:43px;top:-16px}#mac-os .section.four .image:after{height:250px;width:225px;right:127px;bottom:-56px}#mac-os .section.four .image img{max-width:350px;width:100%;margin:0 auto}}