From ea04b84853fd85e28e19475efe17a5f06b856584 Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Wed, 30 Oct 2024 00:48:18 +0300 Subject: [PATCH] Updates --- assets/index-CgRAm56E.css | 1 + bundle021537dfe33e94ba0cc1.js | 2 - bundle021537dfe33e94ba0cc1.js.map | 1 - bundle49ZK8EAw.js | 9 + index.html | 799 +------------ main.css | 1815 ----------------------------- main.css.map | 1 - 7 files changed, 11 insertions(+), 2617 deletions(-) create mode 100644 assets/index-CgRAm56E.css delete mode 100644 bundle021537dfe33e94ba0cc1.js delete mode 100644 bundle021537dfe33e94ba0cc1.js.map create mode 100644 bundle49ZK8EAw.js delete mode 100644 main.css delete mode 100644 main.css.map diff --git a/assets/index-CgRAm56E.css b/assets/index-CgRAm56E.css new file mode 100644 index 0000000..3230b2f --- /dev/null +++ b/assets/index-CgRAm56E.css @@ -0,0 +1 @@ +*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter;overflow-x:hidden}#images-y{display:none}.cloudimage-360 canvas,#demo-generator canvas,#gurkha-suv canvas{overflow:hidden;border-radius:6px}.container-fluid{max-width:1170px;margin:0 auto}.content-wrapper .header{display:flex;justify-content:space-between;padding:23.5px 24.5px 0}.content-wrapper .header .header-logo{display:flex;align-items:center;column-gap:16px}.content-wrapper .header-logo .cloud-img-title{padding-left:16px;border-left:1px solid #b8c4d0;text-decoration:none;font-size:20px;line-height:32px;font-weight:500;color:#203254}.content-wrapper .header .navbar{display:flex;align-items:center;column-gap:8px}.content-wrapper .header .navbar a{text-decoration:none;font-size:14px;line-height:16.94px;color:#5d6d7e}.content-wrapper .navbar .stars-button{display:flex;align-items:center;border:1px solid #5d6d7e;padding:9.5px 16px;border-radius:4px}.content-wrapper .navbar .github-icons{padding-right:4px}.content-wrapper .navbar .git-button{display:flex;align-items:center;border:1px solid #5d6d7e;padding:11px 14px;border-radius:4px}.content-wrapper .content{display:flex;flex-direction:column;align-items:center;margin-top:57.5px;padding:0 25px;box-sizing:content-box;position:relative}.content-wrapper .content h1{font-size:48px;line-height:58px;font-weight:700;color:#203254;text-align:center;max-width:971px}.content-wrapper .content h1 span{color:#3daba4}.content-wrapper .content .content-text{font-size:20px;line-height:30px;font-weight:400;color:#4d5c74;margin-top:8px;max-width:775px;text-align:center}.content-wrapper .content .github-sandbox-buttons-wrapper{display:flex;flex-wrap:wrap;gap:16px;margin-top:24px}.content-wrapper .github-sandbox-buttons-wrapper .github-button{display:flex;align-items:center;height:48px;padding:8px 24.4px;background-color:#3daba4;border-radius:4px;border:none;text-decoration:none;font-size:16px;line-height:32px;color:#fff;font-weight:700;text-align:center;white-space:nowrap}.content-wrapper .github-sandbox-buttons-wrapper .code-sand-box-button{display:flex;align-items:center;height:48px;padding:8px 23.4px;border-radius:4px;border:1px solid #3daba4;background-color:#fff;cursor:pointer;text-decoration:none;color:#3daba4;font-weight:700;font-size:16px;text-align:center}.content-wrapper .content .car-image{margin-top:32px;width:100%}.content-wrapper .content .car-image .content-text{margin:16px auto 0;text-align:center;font-size:16px;line-height:24px;max-width:715px;color:#4d5c74}.cloudimage-360-modal-more-details{color:#fff7f4;background-color:#db5e2e}.cloudimage-360-modal-more-details:hover{background-color:#a53e16;color:#fff7f4}.cloudimage-360-modal-description{font-size:11px}.popup-link a{font-size:11px;line-height:16px;color:#0c6dc7;font-weight:700}.cloudimage-360-carousel-dot.active-dot{background-color:#db5e2e}.content-wrapper .content .customer-logos{width:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));align-items:center;grid-gap:60px;margin-top:118.27px}.content-wrapper .content .cyan-blur-circle{position:absolute;width:255px;height:255px;right:0;top:30px;background:#aadbff;filter:blur(120px);z-index:-1}.content-wrapper .content .blue-blur-circle{position:absolute;width:418px;height:254px;left:-283px;top:546px;background:#90eee7;filter:blur(150px);z-index:-1}.content-wrapper .customer-logos img{max-width:100%;margin:0 auto}.content-wrapper .customer-logos .vivo-logo{width:152px}.content-wrapper .customer-logos .jawa-logo{width:124.3px}.content-wrapper .customer-logos .sennheiser-logo{width:222.57px}.content-wrapper .customer-logos .geelly-logo{width:111px}.content-wrapper .customer-logos .yamaha-logo{width:183.74px}.content-wrapper .customer-logos .force-logo-wrapper{display:flex;flex-direction:column;row-gap:3.85px;align-items:center}.content-wrapper .customer-logos .force-logo{width:101.16px}.gallery-section{display:flex;flex-direction:column;align-items:center;margin-top:127px}.gallery-section .gallery-title{text-align:center}.gallery-section .gallery-title h2{font-size:40px;line-height:54px;font-weight:600;color:#203254}.gallery-section .gallery-title p{font-size:20px;line-height:30px;font-weight:400;color:#4d5c74}.gallery-section .gallery-content{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));width:100%;align-items:center;margin-top:32px;gap:29px;justify-items:center}.gallery-section .gallery-content p{font-size:20px;line-height:30px;color:#4d5c74;font-weight:500}.gallery-section .gallery-content .motorcycle{display:flex;flex-direction:column;width:447.5px;align-items:center}.gallery-section .gallery-content .vivo-mobile{display:flex;flex-direction:column;align-items:center;width:261.5px}.gallery-section .gallery-content .geely-car{display:flex;flex-direction:column;align-items:center;width:403px}.demo-usage{background-color:#f2f7fa;margin-top:73px;padding:60px 25px 91px}.demo-usage .usage-title{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:773px;margin:0 auto}.demo-usage .usage-title h2{font-size:40px;line-height:54px;font-weight:600;color:#203254}.demo-usage .usage-title p{font-size:20px;line-height:30px;font-weight:400;color:#4d5c74}.demo-usage .demo-usage-wrapper .demo-usage-content{display:grid;grid-template-columns:repeat(2,1fr);justify-content:center;margin-top:32px;column-gap:30px;flex-wrap:wrap}.demo-usage .demo-usage-wrapper .earbuds{margin-top:32px;width:569.89px}.demo-usage .demo-usage-wrapper .control-buttons{visibility:hidden}.demo-usage .earbuds .copy-button-wrapper{position:relative}.demo-usage .earbuds .copy-button{position:absolute;display:flex;column-gap:4px;right:32px;top:59px;align-items:center;cursor:pointer}.demo-usage .earbuds .copy-button p{font-size:14px;line-height:17px;color:#3daba4;font-weight:400}.demo-usage .demo-usage-wrapper .output-code-wrapper{margin-top:30px;background:#fff;box-shadow:0 2px 41px 10px #2d88cb0d;border-radius:4px;padding:32px 93.21px 32px 32px;white-space:nowrap;overflow:scroll;max-height:270px}.demo-usage .demo-usage-wrapper .output-code-wrapper::-webkit-scrollbar{width:8px}.demo-usage .demo-usage-wrapper .output-code-wrapper::-webkit-scrollbar-thumb{background:#dbdddf}.demo-usage .output-code-wrapper .output-code{font-size:14px;line-height:21px;color:#203254;font-weight:500}.demo-usage .output-code-wrapper .code{padding-left:10px}.demo-usage .demo-usage-content .plugin-options-wrapper{display:flex;column-gap:30px}.demo-usage .demo-usage-content .image-source{display:flex;flex-direction:column;padding-top:28px;row-gap:20px}.demo-usage .image-source .image-source-options{display:flex;flex-direction:column;row-gap:20px}.demo-usage .image-source .image-name-option,.x-amount-option,.y-amount-option{display:flex;flex-direction:column;row-gap:6px}.demo-usage .image-source .y-amount-option{display:none}.demo-usage .image-source .image-source-options h3{font-size:16px;line-height:21px;font-weight:700;color:#4d5c74}.demo-usage .image-source .input-title{font-size:14px;line-height:21px;color:#4d5c74;font-weight:400}.demo-usage .image-source .plugin-options{border:1px solid #e2e7f1;border-radius:4px;width:270px;height:44px;padding-left:10px;font-size:16px;line-height:24px;font-weight:500;color:#203254;cursor:pointer;background-color:#fff}.demo-usage .image-source .plugin-options:nth-child(3){display:none}.demo-usage .plugin-selector{background:url(https://scaleflex.cloudimg.io/v7/demo/360-assets/icons/input-arrow.svg);background-repeat:no-repeat;background-position-x:calc(100% - 20px);background-position-y:17.12px}.demo-usage-wrapper .demo-usage-content .customize{display:flex;flex-direction:column;row-gap:20.5px;max-width:270px;max-height:600px;min-width:fit-content}.demo-usage-wrapper .demo-usage-content .customize-wrapper{display:flex;flex-direction:column;row-gap:20.5px;max-width:270px;max-height:600px;overflow-y:scroll;min-width:fit-content}.demo-usage-wrapper .demo-usage-content .customize-wrapper::-webkit-scrollbar{width:8px}.demo-usage-wrapper .demo-usage-content .customize-wrapper::-webkit-scrollbar-thumb{background:#dbdddf}.demo-usage-wrapper .demo-usage-content .customize h3{font-size:16px;line-height:21px;font-weight:700;color:#4d5c74}.demo-usage-wrapper .customize .customize-options{display:flex;flex-direction:column}.demo-usage-wrapper .customize .customize-checkboxs{display:flex;align-items:center;column-gap:8px}.demo-usage-wrapper .customize .customize-inputs{width:20px;height:20px;border:1px solid #dfe1ec}.demo-usage-wrapper .customize .customize-selectors-wrappers{display:flex;flex-direction:column;row-gap:6px}.demo-usage-wrapper .customize .selectors-wrappers-text{font-size:14px;line-height:21px;font-weight:400;color:#4d5c74;margin-top:8.5px}.demo-usage-wrapper .customize .customize-selectors{width:272px;height:44px;border:1px solid #e2e7f1;border-radius:4px;padding-left:12px;font-size:16px;line-height:24px;font-weight:500;background-color:#fff}.demo-usage-wrapper .customize .customize-selectors::-webkit-inner-spin-button{display:none}.demo-usage-wrapper .customize .checkbox-group{display:flex;flex-direction:column;row-gap:9px}.checkbox-container{display:block;position:relative;padding-left:29px;cursor:pointer;font-size:16px;line-height:19.36px;font-weight:500;color:#203254;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pointer-checkbox{margin-bottom:4px}.checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{position:absolute;top:0;left:0;height:20px;width:20px;background-color:#fff;border:1px solid #dfe1ec}.checkbox-container input:checked~.checkmark{background-color:#fff}.checkmark:after{content:"";position:absolute;display:none}.checkbox-container input:checked~.checkmark:after{display:block}.checkbox-container .checkmark:after{left:2px;top:4px;width:19px;height:13px;background-image:url(https://scaleflex.cloudimg.io/v7/demo/360-assets/icons/check-icon.svg);background-repeat:no-repeat}.questions{position:relative;padding:60px 25px;box-sizing:content-box;display:flex;flex-direction:column;align-items:center}.questions h2{margin-bottom:12px;font-weight:600;font-size:40px;line-height:54px;color:#203254}.questions p{position:relative;margin-bottom:32px;font-weight:400;font-size:20px;line-height:30px;color:#203254}.questions span{font-weight:700;font-size:20px;line-height:30px;color:#203254}.questions .issue-button-wrapper{display:flex;justify-content:center;width:100%}.questions .issue-button-wrapper .issue-button{display:flex;align-items:center;padding:8px 39px;height:48px;background-color:#3daba4;border-radius:4px;color:#fff;font-size:16px;line-height:32px;border:none;cursor:pointer;font-weight:700;text-decoration:none}.questions button a{color:#fff;font-size:16px;line-height:32px;text-decoration:none;font-weight:700}.questions .cyan-blur-circle{position:absolute;width:202px;height:202px;left:-149px;top:0;background:#83cbff;filter:blur(150px);z-index:-1}.questions .green-blur-circle{position:absolute;width:255px;height:255px;right:0;top:0;background:#aadbff;filter:blur(150px);z-index:-1}.footer{position:relative;padding:60px 25px;box-sizing:content-box;display:flex;justify-content:space-between}.footer .accordion-wrapper{display:flex;flex-direction:column;row-gap:26px;display:none}.footer button{display:flex;font-size:18px;line-height:24px;width:100%;font-weight:700;border:none;background-color:#fff;color:#000228;height:24px;cursor:pointer}.footer .filerobot-accordion{display:flex;align-items:center;justify-content:start}.footer .accordion-content{margin-bottom:10px;margin-top:10px;display:none}.footer .filerobot-accordion img{width:14px;height:8px;cursor:pointer;margin-left:17px}.footer .input-with-submit-button{position:relative}.footer .navbar{display:flex;align-items:center;margin-bottom:65px;display:none;margin-top:16px}.footer .navbar .stars{border:1px solid #5d6d7e;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:8px 16px;cursor:pointer;height:41px;width:246px}.footer .navbar .stars img{margin-right:4px}.footer .navbar .stars .star{width:16px;height:16px}.footer .navbar .stars span{background-color:#f1f8ff;margin-left:.375em}.footer .navbar .github{border:1px solid #5d6d7e;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:8px 16px;font-size:.875em;margin-left:8px;text-decoration:none;cursor:pointer;color:#5d6d7e;width:246px;height:41px}.footer .navbar .github img{width:14.53px;height:16px;margin-right:4px}.footer .footer-logo{display:flex;flex-direction:column;max-width:550px;width:35.9vw;row-gap:24px;color:#4d5c74;cursor:pointer}.footer .footer-logo img{width:170px;height:42.26px}.footer .footer-logo p{font-size:16px;line-height:24px}.footer .footer-logo a{text-decoration:none;color:#3daba4}.footer .footer-wrapper{display:flex;column-gap:5.22vw}.footer .footer-info{display:flex;flex-direction:column}.footer .footer-info h4{margin-bottom:24px;font-weight:600;font-size:18px;line-height:22px;color:#203254}.footer .footer-info-content{display:flex;flex-direction:column;row-gap:16px;color:#4d5c74;font-size:16px;line-height:19.36px}.footer .footer-info-content a{text-decoration:none;color:#4d5c74;font-size:16px;line-height:19.36px}.footer .footer-filerobot h4{font-weight:600;font-size:18px;line-height:21.78px;color:#203254;margin-bottom:24px}.footer .footer-filerobot-content{display:flex;flex-direction:column;row-gap:16px}.footer .footer-filerobot-content a{text-decoration:none;font-size:16px;line-height:19.36px;color:#4d5c74}.transition-outline-button{transition:all .3s ease-in-out}.transition-outline-button:hover{background-color:#3daba4;color:#fff!important}.transition-filled-button{transition:all .3s ease-in-out}.transition-filled-button:hover{background-color:#35918a!important}@media (max-width: 1224px){.demo-usage .demo-usage-wrapper .demo-usage-content{display:grid;grid-template-columns:repeat(2,.5fr);justify-content:center;margin-top:32px;column-gap:30px;flex-wrap:wrap}.demo-usage .demo-usage-content .plugin-options-wrapper{display:flex;flex-direction:column;row-gap:30px;overflow-y:scroll;min-width:fit-content;max-height:621px}.demo-usage .demo-usage-content .plugin-options-wrapper::-webkit-scrollbar{width:8px}.demo-usage .demo-usage-content .plugin-options-wrapper::-webkit-scrollbar-thumb{background:#dbdddf}.demo-usage-wrapper .demo-usage-content .customize-wrapper{margin-top:0;max-height:unset;min-height:unset;overflow-y:unset;grid-column:2;padding-top:0}}@media (max-width: 930px){.demo-usage .demo-usage-wrapper .earbuds{width:80.5%}.demo-usage .demo-usage-wrapper .earbuds .output-code{width:100%}.demo-usage .demo-usage-wrapper .demo-usage-content{display:flex;justify-content:center;margin-top:32px;column-gap:30px;flex-wrap:wrap}.demo-usage .demo-usage-content .image-source{width:50%;padding-top:0}.demo-usage .image-source .plugin-options{width:100%}.demo-usage .demo-usage-content .plugin-options-wrapper{display:flex;flex-direction:row;width:80.2%;margin-top:30px;overflow-y:unset}.demo-usage-wrapper .demo-usage-content .customize{width:50%;max-width:unset;max-height:600px;padding-top:0}.demo-usage-wrapper .demo-usage-content .customize-wrapper{width:100%;max-width:unset;max-height:600px;overflow-y:scroll}.demo-usage-wrapper .customize .customize-selectors{width:100%}}@media (max-width: 777px){.content-wrapper .header .navbar{display:none}}@media (max-width: 768px){.content-wrapper .header{display:flex;padding:23.5px 16px 0}.content-wrapper .content{align-items:flex-start}.content-wrapper .content h1,.content-wrapper .content .content-text{text-align:left}.content-wrapper .content .customer-logos{justify-content:space-between}.content-wrapper .content{padding:0 16px}.content-wrapper .content .car-image .content-text{text-align:left}.gallery-section{padding:0 16px}.demo-usage{padding:60px 16px 91px}.demo-usage .usage-title{align-items:flex-start;text-align:left}.demo-usage .demo-usage-wrapper .earbuds{width:100%}.content-wrapper .github-sandbox-buttons-wrapper .github-button{padding:8px 11.6px}.content-wrapper .github-sandbox-buttons-wrapper .github-button a{white-space:nowrap}.demo-usage .demo-usage-content .image-source{width:100%}.demo-usage-wrapper .demo-usage-content .customize{width:100%;max-width:unset}.demo-usage .demo-usage-content .plugin-options-wrapper{width:100%}.questions{padding:60px 16px;align-items:flex-start}.questions .issue-button-wrapper{justify-content:flex-start}}@media (max-width: 650px){.content-wrapper .header .navbar{display:none}.demo-usage .demo-usage-content .plugin-options-wrapper{display:flex;flex-direction:column;overflow-y:scroll}.demo-usage-wrapper .demo-usage-content .customize-wrapper{overflow-y:unset}.gallery-section .gallery-content .motorcycle,.gallery-section .gallery-content .geely-car{width:380px}.footer{display:flex;flex-direction:column}.footer .footer-logo{width:fit-content}.footer .footer-wrapper{justify-content:space-between}}@media (max-width: 512px){.content-wrapper .header .navbar{display:none}.content-wrapper .header{display:flex;justify-content:space-between;padding:23.5px 16px 0}.content-wrapper .content h1{font-size:9.4vw;line-height:11.3vw;text-align:left}.content-wrapper .content .content-text{text-align:left}.content-wrapper .header .header-logo{height:40px;font-size:4.4vw;line-height:6.9vw}.content-wrapper .header .header-logo img{height:35px;width:140.79px}.content-wrapper .content .customer-logos{justify-content:space-between}.content-wrapper .content{padding:0 16px}.content-wrapper .content .car-image .content-text{text-align:left}.gallery-section{padding:0 16px}.demo-usage{padding:60px 16px 91px}.demo-usage .usage-title{align-items:flex-start;text-align:left}.demo-usage .demo-usage-wrapper .earbuds{width:100%}.content-wrapper .github-sandbox-buttons-wrapper .github-button{padding:8px 11.6px}.content-wrapper .github-sandbox-buttons-wrapper .github-button a{white-space:nowrap}.demo-usage .demo-usage-content .image-source{width:100%}.demo-usage-wrapper .demo-usage-content .customize{width:100%;max-width:unset}.questions{padding:60px 16px;align-items:flex-start}.footer{display:block;padding:60px 16px}.footer .accordion-wrapper,.footer .email-input-wrapper{display:flex}.footer .footer-logo{width:100%;row-gap:12px}.footer .footer-logo p{font-size:15px;line-height:29px}.footer .footer-filerobot-content{margin-bottom:29px}.footer .footer-wrapper{display:none}.footer .navbar{display:flex}.hide-in-mobile{display:none}}.cloudimage-360 .cloudimage-360-left,.cloudimage-360 .cloudimage-360-right{padding:8px;background:#f4f4f4;border:none;border-radius:4px}.cloudimage-360 .cloudimage-360-left:focus,.cloudimage-360 .cloudimage-360-right:focus{outline:none}.cloudimage-360 .cloudimage-360-left{display:none;position:absolute;z-index:100;top:calc(50% - 15px);left:20px}.cloudimage-360 .cloudimage-360-right{display:none;position:absolute;z-index:100;top:calc(50% - 15px);right:20px}.cloudimage-360 .cloudimage-360-left:before,.cloudimage-360 .cloudimage-360-right:before{content:"";display:block;width:30px;height:30px;background:50% 50% / cover no-repeat}.cloudimage-360 .cloudimage-360-left:before{background-image:url(https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg)}.cloudimage-360 .cloudimage-360-right:before{background-image:url(https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg)}.cloudimage-360 .cloudimage-360-left.not-active,.cloudimage-360 .cloudimage-360-right.not-active{opacity:.4;cursor:default;pointer-events:none}.cloudimage-360 .cloudimage-360-top,.cloudimage-360 .cloudimage-360-bottom{padding:8px;background:#f4f4f4;border:none;border-radius:4px}.cloudimage-360 .cloudimage-360-top:focus,.cloudimage-360 .cloudimage-360-bottom:focus{outline:none}.cloudimage-360 .cloudimage-360-top{display:none;position:absolute;z-index:100;left:calc(50% - 15px);top:20px;transform:rotate(90deg)}.cloudimage-360 .cloudimage-360-bottom{display:none;position:absolute;z-index:100;left:calc(50% - 15px);bottom:20px;transform:rotate(90deg)}.cloudimage-360 .cloudimage-360-top:before,.cloudimage-360 .cloudimage-360-bottom:before{content:"";display:block;width:30px;height:30px;background:50% 50% / cover no-repeat}.cloudimage-360 .cloudimage-360-top:before{background-image:url(https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg)}.cloudimage-360 .cloudimage-360-bottom:before{background-image:url(https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg)}.cloudimage-360 .cloudimage-360-top.not-active,.cloudimage-360 .cloudimage-360-bottom.not-active{opacity:.4;cursor:default}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.cloudimage-360{width:100%;position:relative}.cloudimage-360-inner-box{width:100%;height:100%;position:relative}.cloudimage-360-icons-container{position:absolute;display:flex;top:15px;right:10px;height:100%;flex-direction:column;align-items:center;z-index:100;gap:8px}.cloudimage-360-transition-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff;opacity:0;transition:all 1s ease-out;z-index:10}.cloudimage-360-button{width:30px;height:30px;cursor:pointer;transition:transform .15s ease-out,background-color .15s ease-out;display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:#f0f0f0;color:#4a4a4a;box-shadow:0 2px 4px #0000001a;padding:6px}.cloudimage-360-button:hover{transform:scale(1.05);background-color:#e7e6e6}.cloudimage-360-button svg{width:18px;height:18px;fill:#4a4a4a;transition:fill .15s ease-out}.cloudimage-360-button:hover svg{fill:#2c2c2c}.cloudimage-initial-icon{position:absolute;top:0;bottom:0;left:0;right:0;width:100px;height:100px;margin:auto;background:linear-gradient(135deg,#ffffff80,#c8c8c880);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:50%;border:1px solid rgba(255,255,255,.5);box-shadow:0 8px 12px #0003,0 4px 6px #0000001a;transition:.2s all,transform .2s;color:#4b4b4b;text-align:center;z-index:2;line-height:100px;-webkit-user-select:none;user-select:none}.cloudimage-initial-icon:hover{background-color:#c8c8c833}.cloudimage-loading-spinner{width:30px;height:30px;transform:translate(-50%,-50%);border:3px solid #fff;position:absolute;top:15px;left:15px;border-bottom-color:#a3a3a3;border-radius:50%;display:inline-block;box-sizing:border-box;opacity:0;animation:rotation .7s linear infinite}.cloudimage-360-view-360-circle{position:absolute;left:0;bottom:0;width:100%;height:auto;margin:auto;pointer-events:none;-webkit-user-select:none;user-select:none;transition:.2s all;z-index:2}.cloudimage-360-fullscreen-modal{position:fixed;top:0;bottom:0;left:0;right:0;width:100%;height:100%;z-index:999;background-color:#fff}.cloudimage-360-img-magnifier-glass{background-color:#fff;background-image:radial-gradient(circle at center,#fffc,#f0f0f0e6);background-repeat:no-repeat;position:absolute;border:2px solid rgba(0,0,0,.3);border-radius:50%;line-height:200px;text-align:center;z-index:1000;width:250px;height:250px;top:-75px;right:-85px;box-shadow:0 8px 16px #0006,0 4px 8px #0003;transition:box-shadow .2s ease;overflow:hidden;pointer-events:none}.cloudimage-360-hotspot-container{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:20}.cloudimage-360-popper{opacity:1;transition:opacity .2s ease-in-out}.cloudimage-360-hotspot{display:inline-block;position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-50%,-50%);background:#0af;border:1px solid #fff;border-radius:50%;height:18px;width:18px;box-shadow:0 0 #0af9,0 2px 6px #0003;opacity:0;animation:pulse 2s infinite;transition:transform .2s ease,box-shadow .2s ease}.cloudimage-360-hotspot.visible{opacity:1}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 #0af9,0 0 0 10px #0af6,0 0 0 20px #0af3}50%{transform:scale(1.1);box-shadow:0 0 0 10px #0af0,0 0 0 20px #00aaff1a,0 0 0 30px #0af0}to{transform:scale(1);box-shadow:0 0 #0af0,0 0 0 10px #0af0,0 0 0 20px #0af0}}.cloudimage-360-hotspot:hover{transform:scale(1.2);box-shadow:0 0 0 5px #00aaff80,0 4px 12px #0000004d}.cloudimage-360-popper{background-color:#ffffffe6;color:#333;padding:10px 15px;border-radius:6px;box-shadow:0 4px 16px #0003;font-size:14px;max-width:220px;z-index:9999;text-align:center;transition:opacity .2s ease,translate .2s ease;opacity:0;translate:0 -10px}.cloudimage-360-popper[data-show]{opacity:1;translate:0} diff --git a/bundle021537dfe33e94ba0cc1.js b/bundle021537dfe33e94ba0cc1.js deleted file mode 100644 index d802a05..0000000 --- a/bundle021537dfe33e94ba0cc1.js +++ /dev/null @@ -1,2 +0,0 @@ -!function(e){var t={};function i(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,i),o.l=!0,o.exports}i.m=e,i.c=t,i.d=function(e,t,n){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)i.d(n,o,function(t){return e[t]}.bind(null,o));return n},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="",i(i.s=128)}([function(e,t,i){var n=i(19),o=Function.prototype,r=o.call,a=n&&o.bind.bind(r,r);e.exports=n?a:function(e){return function(){return r.apply(e,arguments)}}},function(e,t){e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,t,i){var n=i(34),o=n.all;e.exports=n.IS_HTMLDDA?function(e){return"function"==typeof e||e===o}:function(e){return"function"==typeof e}},function(e,t,i){(function(t){var i=function(e){return e&&e.Math==Math&&e};e.exports=i("object"==typeof globalThis&&globalThis)||i("object"==typeof window&&window)||i("object"==typeof self&&self)||i("object"==typeof t&&t)||function(){return this}()||Function("return this")()}).call(this,i(69))},function(e,t,i){var n=i(1);e.exports=!n((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]}))},function(e,t,i){var n=i(54);e.exports=function(e,t,i){return(t=n(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e},e.exports.__esModule=!0,e.exports.default=e.exports},function(e,t,i){var n=i(0),o=i(41),r=n({}.hasOwnProperty);e.exports=Object.hasOwn||function(e,t){return r(o(e),t)}},function(e,t){function i(t){return e.exports=i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e.exports.__esModule=!0,e.exports.default=e.exports,i(t)}e.exports=i,e.exports.__esModule=!0,e.exports.default=e.exports},function(e,t,i){var n=i(2),o=i(34),r=o.all;e.exports=o.IS_HTMLDDA?function(e){return"object"==typeof e?null!==e:n(e)||e===r}:function(e){return"object"==typeof e?null!==e:n(e)}},function(e,t,i){var n=i(3),o=i(40),r=i(6),a=i(42),s=i(37),c=i(36),u=n.Symbol,l=o("wks"),d=c?u.for||u:u&&u.withoutSetter||a;e.exports=function(e){return r(l,e)||(l[e]=s&&r(u,e)?u[e]:d("Symbol."+e)),l[e]}},function(e,t,i){var n=i(60),o=i(61),r=i(26),a=i(62);e.exports=function(e,t){return n(e)||o(e,t)||r(e,t)||a()},e.exports.__esModule=!0,e.exports.default=e.exports},function(e,t,i){var n=i(4),o=i(43),r=i(46),a=i(16),s=i(33),c=TypeError,u=Object.defineProperty,l=Object.getOwnPropertyDescriptor;t.f=n?r?function(e,t,i){if(a(e),t=s(t),a(i),"function"==typeof e&&"prototype"===t&&"value"in i&&"writable"in i&&!i.writable){var n=l(e,t);n&&n.writable&&(e[t]=i.value,i={configurable:"configurable"in i?i.configurable:n.configurable,enumerable:"enumerable"in i?i.enumerable:n.enumerable,writable:!1})}return u(e,t,i)}:u:function(e,t,i){if(a(e),t=s(t),a(i),o)try{return u(e,t,i)}catch(e){}if("get"in i||"set"in i)throw c("Accessors not supported");return"value"in i&&(e[t]=i.value),e}},function(e,t,i){var n=i(125)();e.exports=n;try{regeneratorRuntime=n}catch(e){"object"==typeof globalThis?globalThis.regeneratorRuntime=n:Function("r","regeneratorRuntime = r")(n)}},function(e,t,i){var n=i(30),o=i(31);e.exports=function(e){return n(o(e))}},function(e,t,i){var n=i(0),o=n({}.toString),r=n("".slice);e.exports=function(e){return r(o(e),8,-1)}},function(e,t,i){var n=i(3),o=i(2),r=function(e){return o(e)?e:void 0};e.exports=function(e,t){return arguments.length<2?r(n[e]):n[e]&&n[e][t]}},function(e,t,i){var n=i(8),o=String,r=TypeError;e.exports=function(e){if(n(e))return e;throw r(o(e)+" is not an object")}},function(e,t,i){var n=i(3),o=i(28).f,r=i(45),a=i(78),s=i(21),c=i(83),u=i(90);e.exports=function(e,t){var i,l,d,f,h,p=e.target,m=e.global,v=e.stat;if(i=m?n:v?n[p]||s(p,{}):(n[p]||{}).prototype)for(l in t){if(f=t[l],d=e.dontCallGetSet?(h=o(i,l))&&h.value:i[l],!u(m?l:p+(v?".":"#")+l,e.forced)&&void 0!==d){if(typeof f==typeof d)continue;c(f,d)}(e.sham||d&&d.sham)&&r(f,"sham",!0),a(i,l,f,e)}}},function(e,t,i){var n=i(19),o=Function.prototype.call;e.exports=n?o.bind(o):function(){return o.apply(o,arguments)}},function(e,t,i){var n=i(1);e.exports=!n((function(){var e=function(){}.bind();return"function"!=typeof e||e.hasOwnProperty("prototype")}))},function(e,t,i){var n=i(3),o=i(21),r=n["__core-js_shared__"]||o("__core-js_shared__",{});e.exports=r},function(e,t,i){var n=i(3),o=Object.defineProperty;e.exports=function(e,t){try{o(n,e,{value:t,configurable:!0,writable:!0})}catch(i){n[e]=t}return t}},function(e,t){e.exports={}},function(e,t){e.exports=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"]},function(e,t,i){var n=i(3),o=i(0);e.exports=function(e,t){return o(n[e].prototype[t])}},function(e,t){function i(e,t,i,n,o,r,a){try{var s=e[r](a),c=s.value}catch(e){return void i(e)}s.done?t(c):Promise.resolve(c).then(n,o)}e.exports=function(e){return function(){var t=this,n=arguments;return new Promise((function(o,r){var a=e.apply(t,n);function s(e){i(a,o,r,s,c,"next",e)}function c(e){i(a,o,r,s,c,"throw",e)}s(void 0)}))}},e.exports.__esModule=!0,e.exports.default=e.exports},function(e,t,i){var n=i(27);e.exports=function(e,t){if(e){if("string"==typeof e)return n(e,t);var i=Object.prototype.toString.call(e).slice(8,-1);return"Object"===i&&e.constructor&&(i=e.constructor.name),"Map"===i||"Set"===i?Array.from(e):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?n(e,t):void 0}},e.exports.__esModule=!0,e.exports.default=e.exports},function(e,t){e.exports=function(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,n=new Array(t);i0&&n[0]<4?1:+(n[0]+n[1])),!o&&a&&(!(n=a.match(/Edge\/(\d+)/))||n[1]>=74)&&(n=a.match(/Chrome\/(\d+)/))&&(o=+n[1]),e.exports=o},function(e,t,i){var n=i(2),o=i(75),r=TypeError;e.exports=function(e){if(n(e))return e;throw r(o(e)+" is not a function")}},function(e,t,i){var n=i(77),o=i(20);(e.exports=function(e,t){return o[e]||(o[e]=void 0!==t?t:{})})("versions",[]).push({version:"3.30.0",mode:n?"pure":"global",copyright:"© 2014-2023 Denis Pushkarev (zloirock.ru)",license:"https://github.com/zloirock/core-js/blob/v3.30.0/LICENSE",source:"https://github.com/zloirock/core-js"})},function(e,t,i){var n=i(31),o=Object;e.exports=function(e){return o(n(e))}},function(e,t,i){var n=i(0),o=0,r=Math.random(),a=n(1..toString);e.exports=function(e){return"Symbol("+(void 0===e?"":e)+")_"+a(++o+r,36)}},function(e,t,i){var n=i(4),o=i(1),r=i(44);e.exports=!n&&!o((function(){return 7!=Object.defineProperty(r("div"),"a",{get:function(){return 7}}).a}))},function(e,t,i){var n=i(3),o=i(8),r=n.document,a=o(r)&&o(r.createElement);e.exports=function(e){return a?r.createElement(e):{}}},function(e,t,i){var n=i(4),o=i(11),r=i(29);e.exports=n?function(e,t,i){return o.f(e,t,r(1,i))}:function(e,t,i){return e[t]=i,e}},function(e,t,i){var n=i(4),o=i(1);e.exports=n&&o((function(){return 42!=Object.defineProperty((function(){}),"prototype",{value:42,writable:!1}).prototype}))},function(e,t,i){var n=i(0),o=i(2),r=i(20),a=n(Function.toString);o(r.inspectSource)||(r.inspectSource=function(e){return a(e)}),e.exports=r.inspectSource},function(e,t,i){var n=i(40),o=i(42),r=n("keys");e.exports=function(e){return r[e]||(r[e]=o(e))}},function(e,t,i){var n=i(0),o=i(6),r=i(13),a=i(50).indexOf,s=i(22),c=n([].push);e.exports=function(e,t){var i,n=r(e),u=0,l=[];for(i in n)!o(s,i)&&o(n,i)&&c(l,i);for(;t.length>u;)o(n,i=t[u++])&&(~a(l,i)||c(l,i));return l}},function(e,t,i){var n=i(13),o=i(86),r=i(52),a=function(e){return function(t,i,a){var s,c=n(t),u=r(c),l=o(a,u);if(e&&i!=i){for(;u>l;)if((s=c[l++])!=s)return!0}else for(;u>l;l++)if((e||l in c)&&c[l]===i)return e||l||0;return!e&&-1}};e.exports={includes:a(!0),indexOf:a(!1)}},function(e,t,i){var n=i(87);e.exports=function(e){var t=+e;return t!=t||0===t?0:n(t)}},function(e,t,i){var n=i(88);e.exports=function(e){return n(e.length)}},function(e,t,i){var n=i(92),o=i(0),r=i(30),a=i(41),s=i(52),c=i(94),u=o([].push),l=function(e){var t=1==e,i=2==e,o=3==e,l=4==e,d=6==e,f=7==e,h=5==e||d;return function(p,m,v,g){for(var y,x,b=a(p),w=r(b),I=n(m,v),C=s(w),E=0,O=g||c,S=t?O(p,C):i||f?O(p,0):void 0;C>E;E++)if((h||E in w)&&(x=I(y=w[E],E,b),e))if(t)S[E]=x;else if(x)switch(e){case 3:return!0;case 5:return y;case 6:return E;case 2:u(S,y)}else switch(e){case 4:return!1;case 7:u(S,y)}return d?-1:o||l?l:S}};e.exports={forEach:l(0),map:l(1),filter:l(2),some:l(3),every:l(4),find:l(5),findIndex:l(6),filterReject:l(7)}},function(e,t,i){var n=i(7).default,o=i(119);e.exports=function(e){var t=o(e,"string");return"symbol"===n(t)?t:String(t)},e.exports.__esModule=!0,e.exports.default=e.exports},function(e,t){e.exports=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},e.exports.__esModule=!0,e.exports.default=e.exports},function(e,t,i){var n=i(54);function o(e,t){for(var i=0;i0?n:i)(t)}},function(e,t,i){var n=i(51),o=Math.min;e.exports=function(e){return e>0?o(n(e),9007199254740991):0}},function(e,t){t.f=Object.getOwnPropertySymbols},function(e,t,i){var n=i(1),o=i(2),r=/#|\.prototype\./,a=function(e,t){var i=c[s(e)];return i==l||i!=u&&(o(t)?n(t):!!t)},s=a.normalize=function(e){return String(e).replace(r,".").toLowerCase()},c=a.data={},u=a.NATIVE="N",l=a.POLYFILL="P";e.exports=a},function(e,t,i){"use strict";var n=i(53).forEach,o=i(100)("forEach");e.exports=o?[].forEach:function(e){return n(this,e,arguments.length>1?arguments[1]:void 0)}},function(e,t,i){var n=i(93),o=i(39),r=i(19),a=n(n.bind);e.exports=function(e,t){return o(e),void 0===t?e:r?a(e,t):function(){return e.apply(t,arguments)}}},function(e,t,i){var n=i(14),o=i(0);e.exports=function(e){if("Function"===n(e))return o(e)}},function(e,t,i){var n=i(95);e.exports=function(e,t){return new(n(e))(0===t?0:t)}},function(e,t,i){var n=i(96),o=i(97),r=i(8),a=i(9)("species"),s=Array;e.exports=function(e){var t;return n(e)&&(t=e.constructor,(o(t)&&(t===s||n(t.prototype))||r(t)&&null===(t=t[a]))&&(t=void 0)),void 0===t?s:t}},function(e,t,i){var n=i(14);e.exports=Array.isArray||function(e){return"Array"==n(e)}},function(e,t,i){var n=i(0),o=i(1),r=i(2),a=i(98),s=i(15),c=i(47),u=function(){},l=[],d=s("Reflect","construct"),f=/^\s*(?:class|function)\b/,h=n(f.exec),p=!f.exec(u),m=function(e){if(!r(e))return!1;try{return d(u,l,e),!0}catch(e){return!1}},v=function(e){if(!r(e))return!1;switch(a(e)){case"AsyncFunction":case"GeneratorFunction":case"AsyncGeneratorFunction":return!1}try{return p||!!h(f,c(e))}catch(e){return!0}};v.sham=!0,e.exports=!d||o((function(){var e;return m(m.call)||!m(Object)||!m((function(){e=!0}))||e}))?v:m},function(e,t,i){var n=i(99),o=i(2),r=i(14),a=i(9)("toStringTag"),s=Object,c="Arguments"==r(function(){return arguments}());e.exports=n?r:function(e){var t,i,n;return void 0===e?"Undefined":null===e?"Null":"string"==typeof(i=function(e,t){try{return e[t]}catch(e){}}(t=s(e),a))?i:c?r(t):"Object"==(n=r(t))&&o(t.callee)?"Arguments":n}},function(e,t,i){var n={};n[i(9)("toStringTag")]="z",e.exports="[object z]"===String(n)},function(e,t,i){"use strict";var n=i(1);e.exports=function(e,t){var i=[][e];return!!i&&n((function(){i.call(null,t||function(){return 1},1)}))}},function(e,t,i){e.exports=i(102)},function(e,t,i){var n=i(103);e.exports=n},function(e,t,i){var n=i(104);e.exports=n},function(e,t,i){var n=i(105);e.exports=n},function(e,t,i){i(106);var n=i(24);e.exports=n("Array","filter")},function(e,t,i){"use strict";var n=i(17),o=i(53).filter;n({target:"Array",proto:!0,forced:!i(107)("filter")},{filter:function(e){return o(this,e,arguments.length>1?arguments[1]:void 0)}})},function(e,t,i){var n=i(1),o=i(9),r=i(38),a=o("species");e.exports=function(e){return r>=51||!n((function(){var t=[];return(t.constructor={})[a]=function(){return{foo:1}},1!==t[e](Boolean).foo}))}},function(e,t,i){e.exports=i(109)},function(e,t,i){var n=i(110);e.exports=n},function(e,t,i){var n=i(111);e.exports=n},function(e,t,i){var n=i(112);e.exports=n},function(e,t,i){i(113);var n=i(24);e.exports=n("Array","includes")},function(e,t,i){"use strict";var n=i(17),o=i(50).includes,r=i(1),a=i(114);n({target:"Array",proto:!0,forced:r((function(){return!Array(1).includes()}))},{includes:function(e){return o(this,e,arguments.length>1?arguments[1]:void 0)}}),a("includes")},function(e,t,i){var n=i(9),o=i(115),r=i(11).f,a=n("unscopables"),s=Array.prototype;null==s[a]&&r(s,a,{configurable:!0,value:o(null)}),e.exports=function(e){s[a][e]=!0}},function(e,t,i){var n,o=i(16),r=i(116),a=i(23),s=i(22),c=i(118),u=i(44),l=i(48),d=l("IE_PROTO"),f=function(){},h=function(e){return" - - +JS-Cloudimage-360-view
star star-img github-icon GitHub

Display every detail from any angle, on any device

Enhance your customer's experience with stunning 360° views of your products. Create an immersive product experience, every time.

View on GitHub Edit to CodeSandbox

Featuring 36 images, autoplay*, bottom 360° view circle, arrow keys support*, magnifier*, inner box shadow and more!
(*) available only on desktops

Trusted by top brands, worldwide

Explore the brands that use our plugins.

Toyota

Vivo

Geely

Create 360° views, your way

Try out our simple, interactive resource to customize an interactive virtual tour of your product.

copy icon

Copy

<div
></div>

Images source

Images name x

Select amount-x

Select amount-y

Customize

zoom scale

Auto play behavior

Auto play speed(milliseconds)

Drag speed(milliseconds)

Any questions?

Contact us at hello@cloudimage.io, our experts will be happy to help!

Submit GitHub issue
star star-img github-icon

GitHub

Info

View GitHub Current Issues Documentation

Filerobot UI Family

Filerobot Media Asset Widget Filerobot Image Editor Cloudimage Responsive Cloudimage 360 view
\ No newline at end of file diff --git a/main.css b/main.css deleted file mode 100644 index df90e3f..0000000 --- a/main.css +++ /dev/null @@ -1,1815 +0,0 @@ -.cloudimage-360-icons-container { - position: absolute; - display: flex; - top: 5px; - right: 5px; - width: 30px; - height: 95%; - flex-direction: column; - align-items: center; - z-index: 101; -} - -.cloudimage-360-magnifier-icon { - width: 25px; - height: 25px; - margin-bottom: 5px; - cursor: pointer; - background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/loupe.svg') 50% 50% / cover no-repeat; -} - -.cloudimage-360-fullscreen-icon { - width: 25px; - height: 25px; - margin-bottom: 5px; - cursor: pointer; - background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/full_screen.svg') 50% 50% / cover no-repeat; -} - -.cloudimage-360-reset-zoom-icon { - display: none; - width: 30px; - height: 30px; - margin-top: auto; - cursor: pointer; - background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/ic-resize.svg?vh=248986') 50% 50% / cover no-repeat; -} - -.cloudimage-360-close-fullscreen-icon { - width: 25px; - height: 25px; - cursor: pointer; - background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/cross.svg') 50% 50% / cover no-repeat; -} - -.cloudimage-360-loader { - position: absolute; - top: 0; - left: 0; - right: 0; - width: 0%; - height: 8px; - background-color: rgb(165, 175, 184); - z-index: 100; -} - -.cloudimage-360-box-shadow { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 99; -} - -.cloudimage-360-view-360-icon { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - width: 100px; - height: 100px; - margin: auto; - background-color: rgba(255, 255, 255, 0.8); - border-radius: 50%; - box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 4px; - transition: 0.5s all; - color: rgb(80, 80, 80); - text-align: center; - line-height: 100px; - z-index: 2; -} - -.cloudimage-360-view-360-circle { - position: absolute; - left: 0; - right: 0; - width: 80%; - height: auto; - margin: auto; - pointer-events: none; - user-select: none; - transition: 0.5s all; - z-index: 2; -} - -.cloudimage-360-fullscreen-modal { - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - width: 100%; - height: 100%; - z-index: 999; - background-color: #FFF; -} - -.cloudimage-360-img-magnifier-glass { - background-color: #FFF; - background-repeat: no-repeat; - position: absolute; - border: 3px solid #000; - border-radius: 50%; - cursor: wait; - line-height: 200px; - text-align: center; - z-index: 1000; - width: 250px; - height: 250px; - top: -75px; - right: -85px; -} - -.cloudimage-360 .cloudimage-360-left, -.cloudimage-360 .cloudimage-360-right { - padding: 8px; - background: rgb(244, 244, 244); - border: none; - border-radius: 4px; -} - -.cloudimage-360 .cloudimage-360-left:focus, -.cloudimage-360 .cloudimage-360-right:focus { - outline: none; -} - -.cloudimage-360 .cloudimage-360-left { - display: none; - position: absolute; - z-index: 100; - top: calc(50% - 15px); - left: 20px; -} - -.cloudimage-360 .cloudimage-360-right { - display: none; - position: absolute; - z-index: 100; - top: calc(50% - 15px); - right: 20px; -} - -.cloudimage-360 .cloudimage-360-left:before, -.cloudimage-360 .cloudimage-360-right:before { - content: ''; - display: block; - width: 30px; - height: 30px; - background: 50% 50% / cover no-repeat; -} - -.cloudimage-360 .cloudimage-360-left:before { - background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg'); -} - -.cloudimage-360 .cloudimage-360-right:before { - background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg'); -} - -.cloudimage-360 .cloudimage-360-left.not-active, -.cloudimage-360 .cloudimage-360-right.not-active { - opacity: 0.4; - cursor: default; - pointer-events: none; -} - -.cloudimage-360 .cloudimage-360-top, -.cloudimage-360 .cloudimage-360-bottom { - padding: 8px; - background: rgb(244, 244, 244); - border: none; - border-radius: 4px; -} - -.cloudimage-360 .cloudimage-360-top:focus, -.cloudimage-360 .cloudimage-360-bottom:focus { - outline: none; -} - -.cloudimage-360 .cloudimage-360-top { - display: none; - position: absolute; - z-index: 100; - left: calc(50% - 15px); - top: 20px; - transform: rotate(90deg); -} - -.cloudimage-360 .cloudimage-360-bottom { - display: none; - position: absolute; - z-index: 100; - left: calc(50% - 15px); - bottom: 20px; - transform: rotate(90deg); -} - -.cloudimage-360 .cloudimage-360-top:before, -.cloudimage-360 .cloudimage-360-bottom:before { - content: ''; - display: block; - width: 30px; - height: 30px; - background: 50% 50% / cover no-repeat; -} - -.cloudimage-360 .cloudimage-360-top:before { - background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg'); -} - -.cloudimage-360 .cloudimage-360-bottom:before { - background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg'); -} - -.cloudimage-360 .cloudimage-360-top.not-active, -.cloudimage-360 .cloudimage-360-bottom.not-active { - opacity: 0.4; - cursor: default; -} -.cloudimage-360-hotspot-link-icon { - width: 42px; - height: 42px; - background: rgba(12, 109, 199, 0.2); - border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 50%; - box-sizing: border-box; - transition: opacity 600ms ease-in-out; - cursor: auto; -} - -.cloudimage-360-hotspot-link-icon::before { - content: ''; - position: absolute; - width: 16px; - height: 16px; - background-image: url('https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/assets/img/link-hotspot.svg'); - background-color: #0C6DC7; - background-repeat: no-repeat; - background-size: 9px; - background-position: center; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25); - border-radius: 50%; - animation: pulse 2s infinite; - cursor: auto; -} - -.cloudimage-360-hotspot-custom-icon { - width: 42px; - height: 42px; - background: #76AD0133; - border: 1px solid #FFFFFF33; - border-radius: 50%; - box-sizing: border-box; - transition: opacity 300ms ease-in-out; - cursor: auto; -} - -.cloudimage-360-hotspot-custom-icon::before { - content: ''; - position: absolute; - width: 16px; - height: 16px; - background-image: url('https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/assets/img/plus.svg'); - background-color: #76AD01; - background-repeat: no-repeat; - background-size: 9px; - background-position: center; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25); - border-radius: 50%; - animation: pulse 2s infinite; - cursor: auto; -} - -.cloudimage-360-hotspot-popup { - visibility: hidden; - opacity: 0; - background-color: #FFFFFF; - padding: 6px; - border-radius: 2px; - box-shadow: 0px 4px 4px 0px #00000040; - z-index: 999; -} - -.cloudimage-360-hotspot-popup[data-show] { - visibility: visible; - opacity: 1; -} - -.cloudimage-360-popup-arrow, -.cloudimage-360-popup-arrow::before { - position: absolute; - width: 8px; - height: 8px; - background: inherit; - cursor: 'auto'; -} - -.cloudimage-360-popup-arrow { - visibility: hidden; -} - -.cloudimage-360-popup-arrow::before { - visibility: visible; - content: ''; - transform: rotate(45deg); -} - -.cloudimage-360-hotspot-popup[data-popper-placement^='top'] - > .cloudimage-360-popup-arrow { - bottom: -4px; -} - -.cloudimage-360-hotspot-popup[data-popper-placement^='bottom'] - > .cloudimage-360-popup-arrow { - top: -4px; -} - -.cloudimage-360-hotspot-popup[data-popper-placement^='left'] - > .cloudimage-360-popup-arrow { - right: -4px; -} - -.cloudimage-360-hotspot-popup[data-popper-placement^='right'] - > .cloudimage-360-popup-arrow { - left: -4px; -} - -.cloudimage-360-modal-wrapper { - max-width: 222px; -} - -.cloudimage-360-images-carousel-wrapper { - margin: 0 auto; -} - -.cloudimage-360-images-carousel { - background-color: #f5f4f4; - border-radius: 2px; -} - -.cloudimage-360-images-carousel .cloudimage-360-carousel-image { - display: none; - object-fit: contain; - min-height: 187px; - max-width: 100%; - max-height: 100%; -} - -.cloudimage-360-images-carousel .cloudimage-360-carousel-image.active-image { - display: block; - animation-name: fade-active-image; - animation-duration: 1.5s; -} - -.cloudimage-360-carousel-dots { - display: flex; - column-gap: 6px; - justify-content: center; - flex-wrap: wrap; - margin: 5px auto; - row-gap: 3px; - padding: 0 6px; - width: 50%; -} - -.cloudimage-360-carousel-dot { - width: 6px; - height: 6px; - background-color: #C9D0DE; - border-radius: 50%; - cursor: pointer; - transition: background-color 0.6s ease; - border: 0; - padding: 0; -} - -.cloudimage-360-carousel-dot.active-dot { - background-color: #76AD01; -} - -.cloudimage-360-carousel-dot:focus, -.cloudimage-360-carousel-dot:focus-visible { - border: 0; - outline: 0; -} - -.cloudimage-360-modal-title { - font-size: 12px; - font-weight: 700; - line-height: 16px; - margin: 4px 0; -} - -.cloudimage-360-modal-description { - font-size: 10px; - font-weight: 400; - line-height: 16px; - margin: 4px 0; -} - -.cloudimage-360-modal-more-details { - color: #76AD01; - background-color: #ECFAE6; - font-size: 10px; - line-height: 16px; - font-weight: 400; - padding: 4px 8px; - transition: background-color 200ms ease-in-out; - border-radius: 2px; - text-decoration: none; -} - -.cloudimage-360-modal-more-details:hover { - color: #76AD01; - background-color: #e1f5d8; -} - -@keyframes pulse { - 0% { - box-shadow: 0 0 0 0 rgba(99, 99, 99, 0.7); - } - - 70% { - box-shadow: 0 0 0 10px rgba(99, 99, 99, 0); - } - - 100% { - box-shadow: 0 0 0 0 rgba(99, 99, 99, 0); - } -} - -@keyframes fade-active-image { - from { opacity: 0.7 } - to { opacity: 1 } -} -.cloudimage-360 .cloudimage-360-left, -.cloudimage-360 .cloudimage-360-right { - padding: 8px; - background: rgb(244, 244, 244); - border: none; - border-radius: 4px; -} - -.cloudimage-360 .cloudimage-360-left:focus, -.cloudimage-360 .cloudimage-360-right:focus { - outline: none; -} - -.cloudimage-360 .cloudimage-360-left { - display: none; - position: absolute; - z-index: 100; - top: calc(50% - 15px); - left: 20px; -} - -.cloudimage-360 .cloudimage-360-right { - display: none; - position: absolute; - z-index: 100; - top: calc(50% - 15px); - right: 20px; -} - -.cloudimage-360 .cloudimage-360-left:before, -.cloudimage-360 .cloudimage-360-right:before { - content: ''; - display: block; - width: 30px; - height: 30px; - background: 50% 50% / cover no-repeat; -} - -.cloudimage-360 .cloudimage-360-left:before { - background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg'); -} - -.cloudimage-360 .cloudimage-360-right:before { - background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg'); -} - -.cloudimage-360 .cloudimage-360-left.not-active, -.cloudimage-360 .cloudimage-360-right.not-active { - opacity: 0.4; - cursor: default; - pointer-events: none; -} - -.cloudimage-360 .cloudimage-360-top, -.cloudimage-360 .cloudimage-360-bottom { - padding: 8px; - background: rgb(244, 244, 244); - border: none; - border-radius: 4px; -} - -.cloudimage-360 .cloudimage-360-top:focus, -.cloudimage-360 .cloudimage-360-bottom:focus { - outline: none; -} - -.cloudimage-360 .cloudimage-360-top { - display: none; - position: absolute; - z-index: 100; - left: calc(50% - 15px); - top: 20px; - transform: rotate(90deg); -} - -.cloudimage-360 .cloudimage-360-bottom { - display: none; - position: absolute; - z-index: 100; - left: calc(50% - 15px); - bottom: 20px; - transform: rotate(90deg); -} - -.cloudimage-360 .cloudimage-360-top:before, -.cloudimage-360 .cloudimage-360-bottom:before { - content: ''; - display: block; - width: 30px; - height: 30px; - background: 50% 50% / cover no-repeat; -} - -.cloudimage-360 .cloudimage-360-top:before { - background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg'); -} - -.cloudimage-360 .cloudimage-360-bottom:before { - background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg'); -} - -.cloudimage-360 .cloudimage-360-top.not-active, -.cloudimage-360 .cloudimage-360-bottom.not-active { - opacity: 0.4; - cursor: default; -} -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: "Inter"; - overflow-x: hidden; -} - -.container-fluid { - max-width: 1170px; - margin: 0 auto; -} - -.content-wrapper .header { - display: flex; - justify-content: space-between; - padding: 23.5px 24.5px 0 24.5px; -} - -.content-wrapper .header .header-logo { - display: flex; - align-items: center; - column-gap: 16px; -} - -.content-wrapper .header-logo .cloud-img-title { - padding-left: 16px; - border-left: 1px solid #b8c4d0; - text-decoration: none; - font-size: 20px; - line-height: 32px; - font-weight: 500; - color: #203254; -} - -.content-wrapper .header .navbar { - display: flex; - align-items: center; - column-gap: 8px; -} - -.content-wrapper .header .navbar a { - text-decoration: none; - font-size: 14px; - line-height: 16.94px; - color: #5d6d7e; -} - -.content-wrapper .navbar .stars-button { - display: flex; - align-items: center; - border: 1px solid #5d6d7e; - padding: 9.5px 16px; - border-radius: 4px; -} - -.content-wrapper .navbar .github-icons { - padding-right: 4px; -} - -.content-wrapper .navbar .git-button { - display: flex; - align-items: center; - border: 1px solid #5d6d7e; - padding: 11px 14px; - border-radius: 4px; -} - -.content-wrapper .content { - display: flex; - flex-direction: column; - align-items: center; - margin-top: 57.5px; - padding: 0 25px; - box-sizing: content-box; - position: relative; -} - -.content-wrapper .content h1 { - font-size: 48px; - line-height: 58px; - font-weight: 700; - color: #203254; - text-align: center; - max-width: 971px; -} - -.content-wrapper .content h1 span { - color: #3daba4; -} - -.content-wrapper .content .content-text { - font-size: 20px; - line-height: 30px; - font-weight: 400; - color: #4d5c74; - margin-top: 8px; - max-width: 775px; - text-align: center; -} - -.content-wrapper .content .github-sandbox-buttons-wrapper { - display: flex; - flex-wrap: wrap; - gap: 16px; - margin-top: 24px; -} - -.content-wrapper .github-sandbox-buttons-wrapper .github-button { - display: flex; - align-items: center; - height: 48px; - padding: 8px 24.4px; - background-color: #3daba4; - border-radius: 4px; - border: none; - text-decoration: none; - font-size: 16px; - line-height: 32px; - color: #ffff; - font-weight: 700; - text-align: center; - white-space: nowrap; -} - -.content-wrapper .github-sandbox-buttons-wrapper .code-sand-box-button { - display: flex; - align-items: center; - height: 48px; - padding: 8px 23.4px; - border-radius: 4px; - border: 1px solid #3daba4; - background-color: #ffff; - cursor: pointer; - text-decoration: none; - color: #3daba4; - font-weight: 700; - font-size: 16px; - text-align: center; -} - -.content-wrapper .content .car-image { - margin-top: 32px; - width: 100%; -} - -.content-wrapper .content .car-image .content-text { - margin: 16px auto 0 auto; - text-align: center; - font-size: 16px; - line-height: 24px; - max-width: 715px; - color: #4d5c74; -} - -.cloudimage-360-modal-more-details { - color: #fff7f4; - background-color: #db5e2e; -} - -.cloudimage-360-modal-more-details:hover { - background-color: #a53e16; - color: #fff7f4; -} - -.cloudimage-360-modal-description{ - font-size: 11px; -} - -.popup-link a { - font-size: 11px; - line-height: 16px; - color: #0C6DC7; - font-weight: 700; -} - -.cloudimage-360-carousel-dot.active-dot { - background-color: #db5e2e; -} - -.content-wrapper .content .customer-logos { - width: 100%; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); - align-items: center; - grid-gap: 60px; - margin-top: 118.27px; -} - -.content-wrapper .content .cyan-blur-circle { - position: absolute; - width: 255px; - height: 255px; - right: 0; - top: 30px; - background: #aadbff; - filter: blur(120px); - z-index: -1; -} - -.content-wrapper .content .blue-blur-circle { - position: absolute; - width: 418px; - height: 254px; - left: -283px; - top: 546px; - background: #90eee7; - filter: blur(150px); - z-index: -1; -} - -.content-wrapper .customer-logos img { - max-width: 100%; - margin: 0 auto; -} - -.content-wrapper .customer-logos .vivo-logo { - width: 152px; -} - -.content-wrapper .customer-logos .jawa-logo { - width: 124.3px; -} - -.content-wrapper .customer-logos .sennheiser-logo { - width: 222.57px; -} - -.content-wrapper .customer-logos .geelly-logo { - width: 111px; -} - -.content-wrapper .customer-logos .yamaha-logo { - width: 183.74px; -} - -.content-wrapper .customer-logos .force-logo-wrapper { - display: flex; - flex-direction: column; - row-gap: 3.85px; - align-items: center; -} - -.content-wrapper .customer-logos .force-logo { - width: 101.16px; -} - -.gallery-section { - display: flex; - flex-direction: column; - align-items: center; - margin-top: 127px; -} - -.gallery-section .gallery-title { - text-align: center; -} - -.gallery-section .gallery-title h2 { - font-size: 40px; - line-height: 54px; - font-weight: 600; - color: #203254; -} - -.gallery-section .gallery-title p { - font-size: 20px; - line-height: 30px; - font-weight: 400; - color: #4d5c74; -} - -.gallery-section .gallery-content { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); - width: 100%; - align-items: center; - margin-top: 32px; - gap: 29px; - justify-items: center; -} - -.gallery-section .gallery-content p { - font-size: 20px; - line-height: 30px; - color: #4d5c74; - font-weight: 500; -} - -.gallery-section .gallery-content .motorcycle { - display: flex; - flex-direction: column; - width: 447.5px; - align-items: center; -} - -.gallery-section .gallery-content .vivo-mobile { - display: flex; - flex-direction: column; - align-items: center; - width: 261.5px; -} - -.gallery-section .gallery-content .geely-car { - display: flex; - flex-direction: column; - align-items: center; - width: 403px; -} - -.demo-usage { - background-color: #f2f7fa; - margin-top: 73px; - padding: 60px 25px 91px 25px; -} - -.demo-usage .usage-title { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - max-width: 773px; - margin: 0 auto; -} - -.demo-usage .usage-title h2 { - font-size: 40px; - line-height: 54px; - font-weight: 600; - color: #203254; -} - -.demo-usage .usage-title p { - font-size: 20px; - line-height: 30px; - font-weight: 400; - color: #4d5c74; -} - -.demo-usage .demo-usage-wrapper .demo-usage-content { - display: grid; - grid-template-columns: repeat(2, 1fr); - justify-content: center; - margin-top: 32px; - column-gap: 30px; - flex-wrap: wrap; -} - -.demo-usage .demo-usage-wrapper .earbuds { - margin-top: 32px; - width: 569.89px; -} - -.demo-usage .demo-usage-wrapper .control-buttons { - visibility: hidden; -} - -.demo-usage .earbuds .copy-button-wrapper { - position: relative; -} - -.demo-usage .earbuds .copy-button { - position: absolute; - display: flex; - column-gap: 4px; - right: 32px; - top: 59px; - align-items: center; - cursor: pointer; -} - -.demo-usage .earbuds .copy-button p { - font-size: 14px; - line-height: 17px; - color: #3daba4; - font-weight: 400; -} - -.demo-usage .demo-usage-wrapper .output-code-wrapper { - margin-top: 30px; - background: #ffff; - box-shadow: 0px 2px 41px 10px rgba(45, 136, 203, 0.05); - border-radius: 4px; - padding: 32px 93.21px 32px 32px; - white-space: nowrap; - overflow: scroll; - max-height: 270px; -} - -.demo-usage .demo-usage-wrapper .output-code-wrapper::-webkit-scrollbar { - width: 8px; -} - -.demo-usage .demo-usage-wrapper .output-code-wrapper::-webkit-scrollbar-thumb { - background: #dbdddf; -} - -.demo-usage .output-code-wrapper .output-code { - font-size: 14px; - line-height: 21px; - color: #203254; - font-weight: 500; -} - -.demo-usage .output-code-wrapper .code { - padding-left: 10px; -} - -.demo-usage .demo-usage-content .plugin-options-wrapper { - display: flex; - column-gap: 30px; -} - -.demo-usage .demo-usage-content .image-source { - display: flex; - flex-direction: column; - padding-top: 28px; - row-gap: 20px; -} - -.demo-usage .image-source .image-source-options { - display: flex; - flex-direction: column; - row-gap: 20px; -} - -.demo-usage .image-source .image-name-option, -.x-amount-option, -.y-amount-option { - display: flex; - flex-direction: column; - row-gap: 6px; -} - -.demo-usage .image-source .y-amount-option { - display: none; -} - -.demo-usage .image-source .image-source-options h3 { - font-size: 16px; - line-height: 21px; - font-weight: 700; - color: #4d5c74; -} - -.demo-usage .image-source .input-title { - font-size: 14px; - line-height: 21px; - color: #4d5c74; - font-weight: 400; -} - -.demo-usage .image-source .plugin-options { - border: 1px solid #e2e7f1; - border-radius: 4px; - width: 270px; - height: 44px; - padding-left: 10px; - font-size: 16px; - line-height: 24px; - font-weight: 500; - color: #203254; - cursor: pointer; - background-color: #ffff; -} - -.demo-usage .image-source .plugin-options:nth-child(3) { - display: none; -} - -.demo-usage .plugin-selector { - background: url("https://scaleflex.cloudimg.io/v7/demo/360-assets/icons/input-arrow.svg"); - background-repeat: no-repeat; - background-position-x: calc(100% - 20px); - background-position-y: 17.12px; - -webkit-appearance: none; -} - -.demo-usage-wrapper .demo-usage-content .customize { - display: flex; - flex-direction: column; - row-gap: 20.5px; - padding-top: 28px; - max-width: 270px; - max-height: 600px; - min-width: fit-content; -} - -.demo-usage-wrapper .demo-usage-content .customize-wrapper { - display: flex; - flex-direction: column; - row-gap: 20.5px; - max-width: 270px; - max-height: 600px; - overflow-y: scroll; - min-width: fit-content; -} - -.demo-usage-wrapper .demo-usage-content .customize-wrapper::-webkit-scrollbar { - width: 8px; -} - -.demo-usage-wrapper .demo-usage-content .customize-wrapper::-webkit-scrollbar-thumb { - background: #dbdddf; -} - -.demo-usage-wrapper .demo-usage-content .customize h3 { - font-size: 16px; - line-height: 21px; - font-weight: 700; - color: #4d5c74; -} - -.demo-usage-wrapper .customize .customize-options { - display: flex; - flex-direction: column; -} - -.demo-usage-wrapper .customize .customize-checkboxs { - display: flex; - align-items: center; - column-gap: 8px; -} - -.demo-usage-wrapper .customize .customize-inputs { - width: 20px; - height: 20px; - border: 1px solid #dfe1ec; -} - -.demo-usage-wrapper .customize .customize-selectors-wrappers { - display: flex; - flex-direction: column; - row-gap: 6px; -} - -.demo-usage-wrapper .customize .selectors-wrappers-text { - font-size: 14px; - line-height: 21px; - font-weight: 400; - color: #4d5c74; - margin-top: 8.5px; -} - -.demo-usage-wrapper .customize .customize-selectors { - width: 272px; - height: 44px; - border: 1px solid #e2e7f1; - border-radius: 4px; - padding-left: 12px; - font-size: 16px; - line-height: 24px; - font-weight: 500; - background-color: #ffff; -} - -.demo-usage-wrapper .customize .customize-selectors::-webkit-inner-spin-button { - display: none; -} - -.demo-usage-wrapper .customize .checkbox-group { - display: flex; - flex-direction: column; - row-gap: 9px; -} - -.checkbox-container { - display: block; - position: relative; - padding-left: 29px; - cursor: pointer; - font-size: 16px; - line-height: 19.36px; - font-weight: 500; - color: #203254; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -/* Hide the browser's default checkbox */ -.checkbox-container input { - position: absolute; - opacity: 0; - cursor: pointer; - height: 0; - width: 0; -} - -/* Create a checkbox */ -.checkmark { - position: absolute; - top: 0; - left: 0; - height: 20px; - width: 20px; - background-color: #ffff; - border: 1px solid #dfe1ec; -} - -/* When the checkbox is checked */ -.checkbox-container input:checked ~ .checkmark { - background-color: #ffff; -} - -/* Create the checkmark/indicator (hidden when not checked) */ -.checkmark:after { - content: ""; - position: absolute; - display: none; -} - -/* Show the checkmark when checked */ -.checkbox-container input:checked ~ .checkmark:after { - display: block; -} - -/* Style the checkmark/indicator */ -.checkbox-container .checkmark:after { - left: 2px; - top: 4px; - width: 19px; - height: 13px; - background-image: url("https://scaleflex.cloudimg.io/v7/demo/360-assets/icons/check-icon.svg"); - background-repeat: no-repeat; -} - -.questions { - position: relative; - padding: 60px 25px; - box-sizing: content-box; - display: flex; - flex-direction: column; - align-items: center; -} - -.questions h2 { - margin-bottom: 12px; - font-weight: 600; - font-size: 40px; - line-height: 54px; - color: #203254; -} - -.questions p { - position: relative; - margin-bottom: 32px; - font-weight: 400; - font-size: 20px; - line-height: 30px; - color: #203254; -} - -.questions span { - font-weight: 700; - font-size: 20px; - line-height: 30px; - color: #203254; -} - -.questions .issue-button-wrapper { - display: flex; - justify-content: center; - width: 100%; -} - -.questions .issue-button-wrapper .issue-button { - display: flex; - align-items: center; - padding: 8px 39px; - height: 48px; - background-color: #3daba4; - border-radius: 4px; - color: #ffff; - font-size: 16px; - line-height: 32px; - border: none; - cursor: pointer; - font-weight: 700; - text-decoration: none; -} - -.questions button a { - color: #ffff; - font-size: 16px; - line-height: 32px; - text-decoration: none; - font-weight: 700; -} - -.questions .cyan-blur-circle { - position: absolute; - width: 202px; - height: 202px; - left: -149px; - top: 0; - background: #83cbff; - filter: blur(150px); - z-index: -1; -} - -.questions .green-blur-circle { - position: absolute; - width: 255px; - height: 255px; - right: 0; - top: 0; - background: #aadbff; - filter: blur(150px); - z-index: -1; -} - -.footer { - position: relative; - padding: 60px 25px; - box-sizing: content-box; - display: flex; - justify-content: space-between; -} - -.footer .accordion-wrapper { - display: flex; - flex-direction: column; - row-gap: 26px; - display: none; -} - -.footer button { - display: flex; - font-size: 18px; - line-height: 24px; - width: 100%; - font-weight: 700; - border: none; - background-color: #ffff; - color: #000228; - height: 24px; - cursor: pointer; -} - -.footer .filerobot-accordion { - display: flex; - align-items: center; - justify-content: start; -} - -.footer .accordion-content { - margin-bottom: 10px; - margin-top: 10px; - display: none; -} - -.footer .filerobot-accordion img { - width: 14px; - height: 8px; - cursor: pointer; - margin-left: 17px; -} - -.footer .input-with-submit-button { - position: relative; -} - -.footer .navbar { - display: flex; - align-items: center; - margin-bottom: 65px; - display: none; - margin-top: 16px; -} - -.footer .navbar .stars { - border: 1px solid #5d6d7e; - border-radius: 4px; - display: flex; - align-items: center; - justify-content: center; - padding: 8px 16px; - cursor: pointer; - height: 41px; - width: 246px; -} - -.footer .navbar .stars img { - margin-right: 4px; -} - -.footer .navbar .stars .star { - width: 16px; - height: 16px; -} - -.footer .navbar .stars span { - background-color: #f1f8ff; - margin-left: 0.375em; -} - -.footer .navbar .github { - border: 1px solid #5d6d7e; - border-radius: 4px; - display: flex; - align-items: center; - justify-content: center; - padding: 8px 16px; - font-size: 0.875em; - margin-left: 8px; - text-decoration: none; - cursor: pointer; - color: #5d6d7e; - width: 246px; - height: 41px; -} - -.footer .navbar .github img { - width: 14.53px; - height: 16px; - margin-right: 4px; -} - -.footer .footer-logo { - display: flex; - flex-direction: column; - max-width: 550px; - width: 35.9vw; - row-gap: 24px; - color: #4d5c74; - cursor: pointer; -} - -.footer .footer-logo img { - width: 170px; - height: 42.26px; -} - -.footer .footer-logo p { - font-size: 16px; - line-height: 24px; -} - -.footer .footer-logo a { - text-decoration: none; - color: #3daba4; -} - -.footer .footer-wrapper { - display: flex; - column-gap: 5.22vw; -} - -.footer .footer-info { - display: flex; - flex-direction: column; -} - -.footer .footer-info h4 { - margin-bottom: 24px; - font-weight: 600; - font-size: 18px; - line-height: 22px; - color: #203254; -} - -.footer .footer-info-content { - display: flex; - flex-direction: column; - row-gap: 16px; - color: #4d5c74; - font-size: 16px; - line-height: 19.36px; -} - -.footer .footer-info-content a { - text-decoration: none; - color: #4d5c74; - font-size: 16px; - line-height: 19.36px; -} - -.footer .footer-filerobot h4 { - font-weight: 600; - font-size: 18px; - line-height: 21.78px; - color: #203254; - margin-bottom: 24px; -} - -.footer .footer-filerobot-content { - display: flex; - flex-direction: column; - row-gap: 16px; -} - -.footer .footer-filerobot-content a { - text-decoration: none; - font-size: 16px; - line-height: 19.36px; - color: #4d5c74; -} - -.cloudimage-360-loader { - opacity: 0; -} - -.transition-outline-button { - transition: all 300ms ease-in-out; -} - -.transition-outline-button:hover { - background-color: #3daba4; - color: #FFF !important; -} - -.transition-filled-button { - transition: all 300ms ease-in-out; -} - -.transition-filled-button:hover { - background-color: #35918a !important; -} - -@media (max-width: 1224px) { - .demo-usage .demo-usage-wrapper .demo-usage-content { - display: grid; - grid-template-columns: repeat(2, 0.5fr); - justify-content: center; - margin-top: 32px; - column-gap: 30px; - flex-wrap: wrap; - } - - .demo-usage .demo-usage-content .plugin-options-wrapper { - display: flex; - flex-direction: column; - row-gap: 30px; - overflow-y: scroll; - min-width: fit-content; - max-height: 621px; - } - - .demo-usage .demo-usage-content .plugin-options-wrapper::-webkit-scrollbar { - width: 8px; - } - - .demo-usage .demo-usage-content .plugin-options-wrapper::-webkit-scrollbar-thumb { - background: #dbdddf; - } - - .demo-usage-wrapper .demo-usage-content .customize-wrapper { - margin-top: 0; - max-height: unset; - min-height: unset; - overflow-y: unset; - grid-column: 2; - padding-top: 0; - } -} - -@media (max-width: 930px) { - .demo-usage .demo-usage-wrapper .earbuds { - width: 80.5%; - } - - .demo-usage .demo-usage-wrapper .earbuds .output-code { - width: 100%; - } - - .demo-usage .demo-usage-wrapper .demo-usage-content { - display: flex; - justify-content: center; - margin-top: 32px; - column-gap: 30px; - flex-wrap: wrap; - } - - .demo-usage .demo-usage-content .image-source { - width: 50%; - padding-top: 0; - } - - .demo-usage .image-source .plugin-options { - width: 100%; - } - - .demo-usage .demo-usage-content .plugin-options-wrapper { - display: flex; - flex-direction: row; - width: 80.2%; - margin-top: 30px; - overflow-y: unset; - } - - .demo-usage-wrapper .demo-usage-content .customize { - width: 50%; - max-width: unset; - max-height: 600px; - padding-top: 0; - } - - .demo-usage-wrapper .demo-usage-content .customize-wrapper { - width: 100%; - max-width: unset; - max-height: 600px; - overflow-y: scroll; - } - - .demo-usage-wrapper .customize .customize-selectors { - width: 100%; - } -} - -@media (max-width: 777px) { - .content-wrapper .header .navbar { - display: none; - } -} - -@media(max-width: 768px){ - .content-wrapper .header { - display: flex; - padding: 23.5px 16px 0 16px; - } - - .content-wrapper .content { - align-items: flex-start; - } - - .content-wrapper .content h1 { - text-align: left; - } - - .content-wrapper .content .content-text { - text-align: left; - } - - .content-wrapper .content .customer-logos { - justify-content: space-between; - } - - .content-wrapper .content { - padding: 0 16px; - } - - .content-wrapper .content .car-image .content-text { - text-align: left; - } - - .gallery-section { - padding: 0 16px; - } - - .demo-usage { - padding: 60px 16px 91px 16px; - } - - .demo-usage .usage-title { - align-items: flex-start; - text-align: left; - } - - .demo-usage .demo-usage-wrapper .earbuds { - width: 100%; - } - - .content-wrapper .github-sandbox-buttons-wrapper .github-button { - padding: 8px 11.6px; - } - - .content-wrapper .github-sandbox-buttons-wrapper .github-button a { - white-space: nowrap; - } - - .demo-usage .demo-usage-content .image-source { - width: 100%; - } - - .demo-usage-wrapper .demo-usage-content .customize { - width: 100%; - max-width: unset; - } - - .demo-usage .demo-usage-content .plugin-options-wrapper { - width: 100%; - } - - .questions { - padding: 60px 16px; - align-items: flex-start; - } - - .questions .issue-button-wrapper { - justify-content: flex-start; - } -} - -@media (max-width: 650px) { - .content-wrapper .header .navbar { - display: none; - } - - .demo-usage .demo-usage-content .plugin-options-wrapper { - display: flex; - flex-direction: column; - overflow-y: scroll; - } - - .demo-usage-wrapper .demo-usage-content .customize-wrapper { - overflow-y: unset; - } - - .gallery-section .gallery-content .motorcycle, - .gallery-section .gallery-content .geely-car { - width: 380px; - } - - .footer { - display: flex; - flex-direction: column; - } - - .footer .footer-logo { - width: fit-content; - } - - .footer .footer-wrapper { - justify-content: space-between; - } -} - -@media (max-width: 512px) { - .content-wrapper .header .navbar { - display: none; - } - - .content-wrapper .header { - display: flex; - justify-content: space-between; - padding: 23.5px 16px 0 16px; - } - - .content-wrapper .content h1 { - font-size: 9.4vw; - line-height: 11.3vw; - text-align: left; - } - - .content-wrapper .content .content-text { - text-align: left; - } - - .content-wrapper .header .header-logo { - height: 40px; - font-size: 4.4vw; - line-height: 6.9vw; - } - - .content-wrapper .header .header-logo img { - height: 35px; - width: 140.79px; - } - - .content-wrapper .content .customer-logos { - justify-content: space-between; - } - - .content-wrapper .content { - padding: 0 16px; - } - - .content-wrapper .content .car-image .content-text { - text-align: left; - } - - .gallery-section { - padding: 0 16px; - } - - .demo-usage { - padding: 60px 16px 91px 16px; - } - - .demo-usage .usage-title { - align-items: flex-start; - text-align: left; - } - - .demo-usage .demo-usage-wrapper .earbuds { - width: 100%; - } - - .content-wrapper .github-sandbox-buttons-wrapper .github-button { - padding: 8px 11.6px; - } - - .content-wrapper .github-sandbox-buttons-wrapper .github-button a { - white-space: nowrap; - } - - .demo-usage .demo-usage-content .image-source { - width: 100%; - } - - .demo-usage-wrapper .demo-usage-content .customize { - width: 100%; - max-width: unset; - } - - .questions { - padding: 60px 16px; - align-items: flex-start; - } - - .footer { - display: block; - padding: 60px 16px; - } - - .footer .accordion-wrapper { - display: flex; - } - - .footer .email-input-wrapper { - display: flex; - } - - .footer .footer-logo { - width: 100%; - row-gap: 12px; - } - - .footer .footer-logo p { - font-size: 15px; - line-height: 29px; - } - - .footer .footer-filerobot-content { - margin-bottom: 29px; - } - - .footer .footer-wrapper { - display: none; - } - - .footer .navbar { - display: flex; - } - - .hide-in-mobile { - display: none; - } -} - - -/*# sourceMappingURL=main.css.map*/ \ No newline at end of file diff --git a/main.css.map b/main.css.map deleted file mode 100644 index af28c13..0000000 --- a/main.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["webpack:///./src/static/css/style.css","webpack:///./src/static/css/hotspots.css","webpack:///./examples/src/controllers.css","webpack:///./examples/src/styles/main.css"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,C;ACrOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA,QAAQ;AACR,MAAM;AACN,C;AC7NA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,C;ACzGA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA","file":"main.css","sourcesContent":[".cloudimage-360-icons-container {\n position: absolute;\n display: flex;\n top: 5px;\n right: 5px;\n width: 30px;\n height: 95%;\n flex-direction: column;\n align-items: center;\n z-index: 101;\n}\n\n.cloudimage-360-magnifier-icon {\n width: 25px;\n height: 25px;\n margin-bottom: 5px;\n cursor: pointer;\n background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/loupe.svg') 50% 50% / cover no-repeat;\n}\n\n.cloudimage-360-fullscreen-icon {\n width: 25px;\n height: 25px;\n margin-bottom: 5px;\n cursor: pointer;\n background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/full_screen.svg') 50% 50% / cover no-repeat;\n}\n\n.cloudimage-360-reset-zoom-icon {\n display: none;\n width: 30px;\n height: 30px;\n margin-top: auto;\n cursor: pointer;\n background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/ic-resize.svg?vh=248986') 50% 50% / cover no-repeat;\n}\n\n.cloudimage-360-close-fullscreen-icon {\n width: 25px;\n height: 25px;\n cursor: pointer;\n background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/cross.svg') 50% 50% / cover no-repeat;\n}\n\n.cloudimage-360-loader {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n width: 0%;\n height: 8px;\n background-color: rgb(165, 175, 184);\n z-index: 100;\n}\n\n.cloudimage-360-box-shadow {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 99;\n}\n\n.cloudimage-360-view-360-icon {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n width: 100px;\n height: 100px;\n margin: auto;\n background-color: rgba(255, 255, 255, 0.8);\n border-radius: 50%;\n box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 4px;\n transition: 0.5s all;\n color: rgb(80, 80, 80);\n text-align: center;\n line-height: 100px;\n z-index: 2;\n}\n\n.cloudimage-360-view-360-circle {\n position: absolute;\n left: 0;\n right: 0;\n width: 80%;\n height: auto;\n margin: auto;\n pointer-events: none;\n user-select: none;\n transition: 0.5s all;\n z-index: 2;\n}\n\n.cloudimage-360-fullscreen-modal {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n width: 100%;\n height: 100%;\n z-index: 999;\n background-color: #FFF;\n}\n\n.cloudimage-360-img-magnifier-glass {\n background-color: #FFF;\n background-repeat: no-repeat;\n position: absolute;\n border: 3px solid #000;\n border-radius: 50%;\n cursor: wait;\n line-height: 200px;\n text-align: center;\n z-index: 1000;\n width: 250px;\n height: 250px;\n top: -75px;\n right: -85px;\n}\n\n.cloudimage-360 .cloudimage-360-left,\n.cloudimage-360 .cloudimage-360-right {\n padding: 8px;\n background: rgb(244, 244, 244);\n border: none;\n border-radius: 4px;\n}\n\n.cloudimage-360 .cloudimage-360-left:focus,\n.cloudimage-360 .cloudimage-360-right:focus {\n outline: none;\n}\n\n.cloudimage-360 .cloudimage-360-left {\n display: none;\n position: absolute;\n z-index: 100;\n top: calc(50% - 15px);\n left: 20px;\n}\n\n.cloudimage-360 .cloudimage-360-right {\n display: none;\n position: absolute;\n z-index: 100;\n top: calc(50% - 15px);\n right: 20px;\n}\n\n.cloudimage-360 .cloudimage-360-left:before,\n.cloudimage-360 .cloudimage-360-right:before {\n content: '';\n display: block;\n width: 30px;\n height: 30px;\n background: 50% 50% / cover no-repeat;\n}\n\n.cloudimage-360 .cloudimage-360-left:before {\n background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');\n}\n\n.cloudimage-360 .cloudimage-360-right:before {\n background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');\n}\n\n.cloudimage-360 .cloudimage-360-left.not-active,\n.cloudimage-360 .cloudimage-360-right.not-active {\n opacity: 0.4;\n cursor: default;\n pointer-events: none;\n}\n\n.cloudimage-360 .cloudimage-360-top,\n.cloudimage-360 .cloudimage-360-bottom {\n padding: 8px;\n background: rgb(244, 244, 244);\n border: none;\n border-radius: 4px;\n}\n\n.cloudimage-360 .cloudimage-360-top:focus,\n.cloudimage-360 .cloudimage-360-bottom:focus {\n outline: none;\n}\n\n.cloudimage-360 .cloudimage-360-top {\n display: none;\n position: absolute;\n z-index: 100;\n left: calc(50% - 15px);\n top: 20px;\n transform: rotate(90deg);\n}\n\n.cloudimage-360 .cloudimage-360-bottom {\n display: none;\n position: absolute;\n z-index: 100;\n left: calc(50% - 15px);\n bottom: 20px;\n transform: rotate(90deg);\n}\n\n.cloudimage-360 .cloudimage-360-top:before,\n.cloudimage-360 .cloudimage-360-bottom:before {\n content: '';\n display: block;\n width: 30px;\n height: 30px;\n background: 50% 50% / cover no-repeat;\n}\n\n.cloudimage-360 .cloudimage-360-top:before {\n background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');\n}\n\n.cloudimage-360 .cloudimage-360-bottom:before {\n background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');\n}\n\n.cloudimage-360 .cloudimage-360-top.not-active,\n.cloudimage-360 .cloudimage-360-bottom.not-active {\n opacity: 0.4;\n cursor: default;\n}",".cloudimage-360-hotspot-link-icon {\n width: 42px;\n height: 42px;\n background: rgba(12, 109, 199, 0.2);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 50%;\n box-sizing: border-box;\n transition: opacity 600ms ease-in-out;\n cursor: auto;\n}\n\n.cloudimage-360-hotspot-link-icon::before {\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n background-image: url('https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/assets/img/link-hotspot.svg');\n background-color: #0C6DC7;\n background-repeat: no-repeat;\n background-size: 9px;\n background-position: center;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);\n border-radius: 50%;\n\tanimation: pulse 2s infinite;\n cursor: auto;\n}\n\n.cloudimage-360-hotspot-custom-icon {\n width: 42px;\n height: 42px;\n background: #76AD0133;\n border: 1px solid #FFFFFF33;\n border-radius: 50%;\n box-sizing: border-box;\n transition: opacity 300ms ease-in-out;\n cursor: auto;\n}\n\n.cloudimage-360-hotspot-custom-icon::before {\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n background-image: url('https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/assets/img/plus.svg');\n background-color: #76AD01;\n background-repeat: no-repeat;\n background-size: 9px;\n background-position: center;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);\n border-radius: 50%;\n\tanimation: pulse 2s infinite;\n cursor: auto;\n}\n\n.cloudimage-360-hotspot-popup {\n visibility: hidden;\n opacity: 0;\n background-color: #FFFFFF;\n padding: 6px;\n border-radius: 2px;\n box-shadow: 0px 4px 4px 0px #00000040;\n z-index: 999;\n}\n\n.cloudimage-360-hotspot-popup[data-show] {\n visibility: visible;\n opacity: 1;\n}\n\n.cloudimage-360-popup-arrow,\n.cloudimage-360-popup-arrow::before {\n position: absolute;\n width: 8px;\n height: 8px;\n background: inherit;\n cursor: 'auto';\n}\n\n.cloudimage-360-popup-arrow {\n visibility: hidden;\n}\n\n.cloudimage-360-popup-arrow::before {\n visibility: visible;\n content: '';\n transform: rotate(45deg);\n}\n\n.cloudimage-360-hotspot-popup[data-popper-placement^='top']\n > .cloudimage-360-popup-arrow {\n bottom: -4px;\n}\n\n.cloudimage-360-hotspot-popup[data-popper-placement^='bottom']\n > .cloudimage-360-popup-arrow {\n top: -4px;\n}\n\n.cloudimage-360-hotspot-popup[data-popper-placement^='left']\n > .cloudimage-360-popup-arrow {\n right: -4px;\n}\n\n.cloudimage-360-hotspot-popup[data-popper-placement^='right']\n > .cloudimage-360-popup-arrow {\n left: -4px;\n}\n\n.cloudimage-360-modal-wrapper {\n max-width: 222px;\n}\n\n.cloudimage-360-images-carousel-wrapper {\n margin: 0 auto;\n}\n\n.cloudimage-360-images-carousel {\n background-color: #f5f4f4;\n border-radius: 2px;\n}\n\n.cloudimage-360-images-carousel .cloudimage-360-carousel-image {\n display: none;\n object-fit: contain;\n min-height: 187px;\n max-width: 100%;\n max-height: 100%;\n}\n\n.cloudimage-360-images-carousel .cloudimage-360-carousel-image.active-image {\n display: block;\n animation-name: fade-active-image;\n animation-duration: 1.5s;\n}\n\n.cloudimage-360-carousel-dots {\n display: flex;\n column-gap: 6px;\n justify-content: center;\n flex-wrap: wrap;\n margin: 5px auto;\n row-gap: 3px;\n padding: 0 6px;\n width: 50%;\n}\n\n.cloudimage-360-carousel-dot {\n width: 6px;\n height: 6px;\n background-color: #C9D0DE;\n border-radius: 50%;\n cursor: pointer;\n transition: background-color 0.6s ease;\n border: 0;\n padding: 0;\n}\n\n.cloudimage-360-carousel-dot.active-dot {\n background-color: #76AD01;\n}\n\n.cloudimage-360-carousel-dot:focus,\n.cloudimage-360-carousel-dot:focus-visible {\n border: 0;\n outline: 0;\n}\n\n.cloudimage-360-modal-title {\n font-size: 12px;\n font-weight: 700;\n line-height: 16px;\n margin: 4px 0;\n}\n\n.cloudimage-360-modal-description {\n font-size: 10px;\n font-weight: 400;\n line-height: 16px;\n margin: 4px 0;\n}\n\n.cloudimage-360-modal-more-details {\n color: #76AD01;\n background-color: #ECFAE6;\n font-size: 10px;\n line-height: 16px;\n font-weight: 400;\n padding: 4px 8px;\n transition: background-color 200ms ease-in-out;\n border-radius: 2px;\n text-decoration: none;\n}\n\n.cloudimage-360-modal-more-details:hover {\n color: #76AD01;\n background-color: #e1f5d8;\n}\n\n@keyframes pulse {\n\t0% {\n\t\tbox-shadow: 0 0 0 0 rgba(99, 99, 99, 0.7);\n\t}\n\n\t70% {\n\t\tbox-shadow: 0 0 0 10px rgba(99, 99, 99, 0);\n\t}\n\n\t100% {\n\t\tbox-shadow: 0 0 0 0 rgba(99, 99, 99, 0);\n\t}\n}\n\n@keyframes fade-active-image {\n from { opacity: 0.7 }\n to { opacity: 1 }\n}",".cloudimage-360 .cloudimage-360-left,\n.cloudimage-360 .cloudimage-360-right {\n padding: 8px;\n background: rgb(244, 244, 244);\n border: none;\n border-radius: 4px;\n}\n\n.cloudimage-360 .cloudimage-360-left:focus,\n.cloudimage-360 .cloudimage-360-right:focus {\n outline: none;\n}\n\n.cloudimage-360 .cloudimage-360-left {\n display: none;\n position: absolute;\n z-index: 100;\n top: calc(50% - 15px);\n left: 20px;\n}\n\n.cloudimage-360 .cloudimage-360-right {\n display: none;\n position: absolute;\n z-index: 100;\n top: calc(50% - 15px);\n right: 20px;\n}\n\n.cloudimage-360 .cloudimage-360-left:before,\n.cloudimage-360 .cloudimage-360-right:before {\n content: '';\n display: block;\n width: 30px;\n height: 30px;\n background: 50% 50% / cover no-repeat;\n}\n\n.cloudimage-360 .cloudimage-360-left:before {\n background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');\n}\n\n.cloudimage-360 .cloudimage-360-right:before {\n background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');\n}\n\n.cloudimage-360 .cloudimage-360-left.not-active,\n.cloudimage-360 .cloudimage-360-right.not-active {\n opacity: 0.4;\n cursor: default;\n pointer-events: none;\n}\n\n.cloudimage-360 .cloudimage-360-top,\n.cloudimage-360 .cloudimage-360-bottom {\n padding: 8px;\n background: rgb(244, 244, 244);\n border: none;\n border-radius: 4px;\n}\n\n.cloudimage-360 .cloudimage-360-top:focus,\n.cloudimage-360 .cloudimage-360-bottom:focus {\n outline: none;\n}\n\n.cloudimage-360 .cloudimage-360-top {\n display: none;\n position: absolute;\n z-index: 100;\n left: calc(50% - 15px);\n top: 20px;\n transform: rotate(90deg);\n}\n\n.cloudimage-360 .cloudimage-360-bottom {\n display: none;\n position: absolute;\n z-index: 100;\n left: calc(50% - 15px);\n bottom: 20px;\n transform: rotate(90deg);\n}\n\n.cloudimage-360 .cloudimage-360-top:before,\n.cloudimage-360 .cloudimage-360-bottom:before {\n content: '';\n display: block;\n width: 30px;\n height: 30px;\n background: 50% 50% / cover no-repeat;\n}\n\n.cloudimage-360 .cloudimage-360-top:before {\n background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');\n}\n\n.cloudimage-360 .cloudimage-360-bottom:before {\n background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');\n}\n\n.cloudimage-360 .cloudimage-360-top.not-active,\n.cloudimage-360 .cloudimage-360-bottom.not-active {\n opacity: 0.4;\n cursor: default;\n}","* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: \"Inter\";\n overflow-x: hidden;\n}\n\n.container-fluid {\n max-width: 1170px;\n margin: 0 auto;\n}\n\n.content-wrapper .header {\n display: flex;\n justify-content: space-between;\n padding: 23.5px 24.5px 0 24.5px;\n}\n\n.content-wrapper .header .header-logo {\n display: flex;\n align-items: center;\n column-gap: 16px;\n}\n\n.content-wrapper .header-logo .cloud-img-title {\n padding-left: 16px;\n border-left: 1px solid #b8c4d0;\n text-decoration: none;\n font-size: 20px;\n line-height: 32px;\n font-weight: 500;\n color: #203254;\n}\n\n.content-wrapper .header .navbar {\n display: flex;\n align-items: center;\n column-gap: 8px;\n}\n\n.content-wrapper .header .navbar a {\n text-decoration: none;\n font-size: 14px;\n line-height: 16.94px;\n color: #5d6d7e;\n}\n\n.content-wrapper .navbar .stars-button {\n display: flex;\n align-items: center;\n border: 1px solid #5d6d7e;\n padding: 9.5px 16px;\n border-radius: 4px;\n}\n\n.content-wrapper .navbar .github-icons {\n padding-right: 4px;\n}\n\n.content-wrapper .navbar .git-button {\n display: flex;\n align-items: center;\n border: 1px solid #5d6d7e;\n padding: 11px 14px;\n border-radius: 4px;\n}\n\n.content-wrapper .content {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-top: 57.5px;\n padding: 0 25px;\n box-sizing: content-box;\n position: relative;\n}\n\n.content-wrapper .content h1 {\n font-size: 48px;\n line-height: 58px;\n font-weight: 700;\n color: #203254;\n text-align: center;\n max-width: 971px;\n}\n\n.content-wrapper .content h1 span {\n color: #3daba4;\n}\n\n.content-wrapper .content .content-text {\n font-size: 20px;\n line-height: 30px;\n font-weight: 400;\n color: #4d5c74;\n margin-top: 8px;\n max-width: 775px;\n text-align: center;\n}\n\n.content-wrapper .content .github-sandbox-buttons-wrapper {\n display: flex;\n flex-wrap: wrap;\n gap: 16px;\n margin-top: 24px;\n}\n\n.content-wrapper .github-sandbox-buttons-wrapper .github-button {\n display: flex;\n align-items: center;\n height: 48px;\n padding: 8px 24.4px;\n background-color: #3daba4;\n border-radius: 4px;\n border: none;\n text-decoration: none;\n font-size: 16px;\n line-height: 32px;\n color: #ffff;\n font-weight: 700;\n text-align: center;\n white-space: nowrap;\n}\n\n.content-wrapper .github-sandbox-buttons-wrapper .code-sand-box-button {\n display: flex;\n align-items: center;\n height: 48px;\n padding: 8px 23.4px;\n border-radius: 4px;\n border: 1px solid #3daba4;\n background-color: #ffff;\n cursor: pointer;\n text-decoration: none;\n color: #3daba4;\n font-weight: 700;\n font-size: 16px;\n text-align: center;\n}\n\n.content-wrapper .content .car-image {\n margin-top: 32px;\n width: 100%;\n}\n\n.content-wrapper .content .car-image .content-text {\n margin: 16px auto 0 auto;\n text-align: center;\n font-size: 16px;\n line-height: 24px;\n max-width: 715px;\n color: #4d5c74;\n}\n\n.cloudimage-360-modal-more-details {\n color: #fff7f4;\n background-color: #db5e2e;\n}\n\n.cloudimage-360-modal-more-details:hover {\n background-color: #a53e16;\n color: #fff7f4;\n}\n\n.cloudimage-360-modal-description{\n font-size: 11px;\n}\n\n.popup-link a {\n font-size: 11px;\n line-height: 16px;\n color: #0C6DC7;\n font-weight: 700;\n}\n\n.cloudimage-360-carousel-dot.active-dot {\n background-color: #db5e2e;\n}\n\n.content-wrapper .content .customer-logos {\n width: 100%;\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));\n align-items: center;\n grid-gap: 60px;\n margin-top: 118.27px;\n}\n\n.content-wrapper .content .cyan-blur-circle {\n position: absolute;\n width: 255px;\n height: 255px;\n right: 0;\n top: 30px;\n background: #aadbff;\n filter: blur(120px);\n z-index: -1;\n}\n\n.content-wrapper .content .blue-blur-circle {\n position: absolute;\n width: 418px;\n height: 254px;\n left: -283px;\n top: 546px;\n background: #90eee7;\n filter: blur(150px);\n z-index: -1;\n}\n\n.content-wrapper .customer-logos img {\n max-width: 100%;\n margin: 0 auto;\n}\n\n.content-wrapper .customer-logos .vivo-logo {\n width: 152px;\n}\n\n.content-wrapper .customer-logos .jawa-logo {\n width: 124.3px;\n}\n\n.content-wrapper .customer-logos .sennheiser-logo {\n width: 222.57px;\n}\n\n.content-wrapper .customer-logos .geelly-logo {\n width: 111px;\n}\n\n.content-wrapper .customer-logos .yamaha-logo {\n width: 183.74px;\n}\n\n.content-wrapper .customer-logos .force-logo-wrapper {\n display: flex;\n flex-direction: column;\n row-gap: 3.85px;\n align-items: center;\n}\n\n.content-wrapper .customer-logos .force-logo {\n width: 101.16px;\n}\n\n.gallery-section {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-top: 127px;\n}\n\n.gallery-section .gallery-title {\n text-align: center;\n}\n\n.gallery-section .gallery-title h2 {\n font-size: 40px;\n line-height: 54px;\n font-weight: 600;\n color: #203254;\n}\n\n.gallery-section .gallery-title p {\n font-size: 20px;\n line-height: 30px;\n font-weight: 400;\n color: #4d5c74;\n}\n\n.gallery-section .gallery-content {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n width: 100%;\n align-items: center;\n margin-top: 32px;\n gap: 29px;\n justify-items: center;\n}\n\n.gallery-section .gallery-content p {\n font-size: 20px;\n line-height: 30px;\n color: #4d5c74;\n font-weight: 500;\n}\n\n.gallery-section .gallery-content .motorcycle {\n display: flex;\n flex-direction: column;\n width: 447.5px;\n align-items: center;\n}\n\n.gallery-section .gallery-content .vivo-mobile {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 261.5px;\n}\n\n.gallery-section .gallery-content .geely-car {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 403px;\n}\n\n.demo-usage {\n background-color: #f2f7fa;\n margin-top: 73px;\n padding: 60px 25px 91px 25px;\n}\n\n.demo-usage .usage-title {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n max-width: 773px;\n margin: 0 auto;\n}\n\n.demo-usage .usage-title h2 {\n font-size: 40px;\n line-height: 54px;\n font-weight: 600;\n color: #203254;\n}\n\n.demo-usage .usage-title p {\n font-size: 20px;\n line-height: 30px;\n font-weight: 400;\n color: #4d5c74;\n}\n\n.demo-usage .demo-usage-wrapper .demo-usage-content {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n justify-content: center;\n margin-top: 32px;\n column-gap: 30px;\n flex-wrap: wrap;\n}\n\n.demo-usage .demo-usage-wrapper .earbuds {\n margin-top: 32px;\n width: 569.89px;\n}\n\n.demo-usage .demo-usage-wrapper .control-buttons {\n visibility: hidden;\n}\n\n.demo-usage .earbuds .copy-button-wrapper {\n position: relative;\n}\n\n.demo-usage .earbuds .copy-button {\n position: absolute;\n display: flex;\n column-gap: 4px;\n right: 32px;\n top: 59px;\n align-items: center;\n cursor: pointer;\n}\n\n.demo-usage .earbuds .copy-button p {\n font-size: 14px;\n line-height: 17px;\n color: #3daba4;\n font-weight: 400;\n}\n\n.demo-usage .demo-usage-wrapper .output-code-wrapper {\n margin-top: 30px;\n background: #ffff;\n box-shadow: 0px 2px 41px 10px rgba(45, 136, 203, 0.05);\n border-radius: 4px;\n padding: 32px 93.21px 32px 32px;\n white-space: nowrap;\n overflow: scroll;\n max-height: 270px;\n}\n\n.demo-usage .demo-usage-wrapper .output-code-wrapper::-webkit-scrollbar {\n width: 8px;\n}\n\n.demo-usage .demo-usage-wrapper .output-code-wrapper::-webkit-scrollbar-thumb {\n background: #dbdddf;\n}\n\n.demo-usage .output-code-wrapper .output-code {\n font-size: 14px;\n line-height: 21px;\n color: #203254;\n font-weight: 500;\n}\n\n.demo-usage .output-code-wrapper .code {\n padding-left: 10px;\n}\n\n.demo-usage .demo-usage-content .plugin-options-wrapper {\n display: flex;\n column-gap: 30px;\n}\n\n.demo-usage .demo-usage-content .image-source {\n display: flex;\n flex-direction: column;\n padding-top: 28px;\n row-gap: 20px;\n}\n\n.demo-usage .image-source .image-source-options {\n display: flex;\n flex-direction: column;\n row-gap: 20px;\n}\n\n.demo-usage .image-source .image-name-option,\n.x-amount-option,\n.y-amount-option {\n display: flex;\n flex-direction: column;\n row-gap: 6px;\n}\n\n.demo-usage .image-source .y-amount-option {\n display: none;\n}\n\n.demo-usage .image-source .image-source-options h3 {\n font-size: 16px;\n line-height: 21px;\n font-weight: 700;\n color: #4d5c74;\n}\n\n.demo-usage .image-source .input-title {\n font-size: 14px;\n line-height: 21px;\n color: #4d5c74;\n font-weight: 400;\n}\n\n.demo-usage .image-source .plugin-options {\n border: 1px solid #e2e7f1;\n border-radius: 4px;\n width: 270px;\n height: 44px;\n padding-left: 10px;\n font-size: 16px;\n line-height: 24px;\n font-weight: 500;\n color: #203254;\n cursor: pointer;\n background-color: #ffff;\n}\n\n.demo-usage .image-source .plugin-options:nth-child(3) {\n display: none;\n}\n\n.demo-usage .plugin-selector {\n background: url(\"https://scaleflex.cloudimg.io/v7/demo/360-assets/icons/input-arrow.svg\");\n background-repeat: no-repeat;\n background-position-x: calc(100% - 20px);\n background-position-y: 17.12px;\n -webkit-appearance: none;\n}\n\n.demo-usage-wrapper .demo-usage-content .customize {\n display: flex;\n flex-direction: column;\n row-gap: 20.5px;\n padding-top: 28px;\n max-width: 270px;\n max-height: 600px;\n min-width: fit-content;\n}\n\n.demo-usage-wrapper .demo-usage-content .customize-wrapper {\n display: flex;\n flex-direction: column;\n row-gap: 20.5px;\n max-width: 270px;\n max-height: 600px;\n overflow-y: scroll;\n min-width: fit-content;\n}\n\n.demo-usage-wrapper .demo-usage-content .customize-wrapper::-webkit-scrollbar {\n width: 8px;\n}\n\n.demo-usage-wrapper .demo-usage-content .customize-wrapper::-webkit-scrollbar-thumb {\n background: #dbdddf;\n}\n\n.demo-usage-wrapper .demo-usage-content .customize h3 {\n font-size: 16px;\n line-height: 21px;\n font-weight: 700;\n color: #4d5c74;\n}\n\n.demo-usage-wrapper .customize .customize-options {\n display: flex;\n flex-direction: column;\n}\n\n.demo-usage-wrapper .customize .customize-checkboxs {\n display: flex;\n align-items: center;\n column-gap: 8px;\n}\n\n.demo-usage-wrapper .customize .customize-inputs {\n width: 20px;\n height: 20px;\n border: 1px solid #dfe1ec;\n}\n\n.demo-usage-wrapper .customize .customize-selectors-wrappers {\n display: flex;\n flex-direction: column;\n row-gap: 6px;\n}\n\n.demo-usage-wrapper .customize .selectors-wrappers-text {\n font-size: 14px;\n line-height: 21px;\n font-weight: 400;\n color: #4d5c74;\n margin-top: 8.5px;\n}\n\n.demo-usage-wrapper .customize .customize-selectors {\n width: 272px;\n height: 44px;\n border: 1px solid #e2e7f1;\n border-radius: 4px;\n padding-left: 12px;\n font-size: 16px;\n line-height: 24px;\n font-weight: 500;\n background-color: #ffff;\n}\n\n.demo-usage-wrapper .customize .customize-selectors::-webkit-inner-spin-button {\n display: none;\n}\n\n.demo-usage-wrapper .customize .checkbox-group {\n display: flex;\n flex-direction: column;\n row-gap: 9px;\n}\n\n.checkbox-container {\n display: block;\n position: relative;\n padding-left: 29px;\n cursor: pointer;\n font-size: 16px;\n line-height: 19.36px;\n font-weight: 500;\n color: #203254;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n/* Hide the browser's default checkbox */\n.checkbox-container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n/* Create a checkbox */\n.checkmark {\n position: absolute;\n top: 0;\n left: 0;\n height: 20px;\n width: 20px;\n background-color: #ffff;\n border: 1px solid #dfe1ec;\n}\n\n/* When the checkbox is checked */\n.checkbox-container input:checked ~ .checkmark {\n background-color: #ffff;\n}\n\n/* Create the checkmark/indicator (hidden when not checked) */\n.checkmark:after {\n content: \"\";\n position: absolute;\n display: none;\n}\n\n/* Show the checkmark when checked */\n.checkbox-container input:checked ~ .checkmark:after {\n display: block;\n}\n\n/* Style the checkmark/indicator */\n.checkbox-container .checkmark:after {\n left: 2px;\n top: 4px;\n width: 19px;\n height: 13px;\n background-image: url(\"https://scaleflex.cloudimg.io/v7/demo/360-assets/icons/check-icon.svg\");\n background-repeat: no-repeat;\n}\n\n.questions {\n position: relative;\n padding: 60px 25px;\n box-sizing: content-box;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.questions h2 {\n margin-bottom: 12px;\n font-weight: 600;\n font-size: 40px;\n line-height: 54px;\n color: #203254;\n}\n\n.questions p {\n position: relative;\n margin-bottom: 32px;\n font-weight: 400;\n font-size: 20px;\n line-height: 30px;\n color: #203254;\n}\n\n.questions span {\n font-weight: 700;\n font-size: 20px;\n line-height: 30px;\n color: #203254;\n}\n\n.questions .issue-button-wrapper {\n display: flex;\n justify-content: center;\n width: 100%;\n}\n\n.questions .issue-button-wrapper .issue-button {\n display: flex;\n align-items: center;\n padding: 8px 39px;\n height: 48px;\n background-color: #3daba4;\n border-radius: 4px;\n color: #ffff;\n font-size: 16px;\n line-height: 32px;\n border: none;\n cursor: pointer;\n font-weight: 700;\n text-decoration: none;\n}\n\n.questions button a {\n color: #ffff;\n font-size: 16px;\n line-height: 32px;\n text-decoration: none;\n font-weight: 700;\n}\n\n.questions .cyan-blur-circle {\n position: absolute;\n width: 202px;\n height: 202px;\n left: -149px;\n top: 0;\n background: #83cbff;\n filter: blur(150px);\n z-index: -1;\n}\n\n.questions .green-blur-circle {\n position: absolute;\n width: 255px;\n height: 255px;\n right: 0;\n top: 0;\n background: #aadbff;\n filter: blur(150px);\n z-index: -1;\n}\n\n.footer {\n position: relative;\n padding: 60px 25px;\n box-sizing: content-box;\n display: flex;\n justify-content: space-between;\n}\n\n.footer .accordion-wrapper {\n display: flex;\n flex-direction: column;\n row-gap: 26px;\n display: none;\n}\n\n.footer button {\n display: flex;\n font-size: 18px;\n line-height: 24px;\n width: 100%;\n font-weight: 700;\n border: none;\n background-color: #ffff;\n color: #000228;\n height: 24px;\n cursor: pointer;\n}\n\n.footer .filerobot-accordion {\n display: flex;\n align-items: center;\n justify-content: start;\n}\n\n.footer .accordion-content {\n margin-bottom: 10px;\n margin-top: 10px;\n display: none;\n}\n\n.footer .filerobot-accordion img {\n width: 14px;\n height: 8px;\n cursor: pointer;\n margin-left: 17px;\n}\n\n.footer .input-with-submit-button {\n position: relative;\n}\n\n.footer .navbar {\n display: flex;\n align-items: center;\n margin-bottom: 65px;\n display: none;\n margin-top: 16px;\n}\n\n.footer .navbar .stars {\n border: 1px solid #5d6d7e;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 8px 16px;\n cursor: pointer;\n height: 41px;\n width: 246px;\n}\n\n.footer .navbar .stars img {\n margin-right: 4px;\n}\n\n.footer .navbar .stars .star {\n width: 16px;\n height: 16px;\n}\n\n.footer .navbar .stars span {\n background-color: #f1f8ff;\n margin-left: 0.375em;\n}\n\n.footer .navbar .github {\n border: 1px solid #5d6d7e;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 8px 16px;\n font-size: 0.875em;\n margin-left: 8px;\n text-decoration: none;\n cursor: pointer;\n color: #5d6d7e;\n width: 246px;\n height: 41px;\n}\n\n.footer .navbar .github img {\n width: 14.53px;\n height: 16px;\n margin-right: 4px;\n}\n\n.footer .footer-logo {\n display: flex;\n flex-direction: column;\n max-width: 550px;\n width: 35.9vw;\n row-gap: 24px;\n color: #4d5c74;\n cursor: pointer;\n}\n\n.footer .footer-logo img {\n width: 170px;\n height: 42.26px;\n}\n\n.footer .footer-logo p {\n font-size: 16px;\n line-height: 24px;\n}\n\n.footer .footer-logo a {\n text-decoration: none;\n color: #3daba4;\n}\n\n.footer .footer-wrapper {\n display: flex;\n column-gap: 5.22vw;\n}\n\n.footer .footer-info {\n display: flex;\n flex-direction: column;\n}\n\n.footer .footer-info h4 {\n margin-bottom: 24px;\n font-weight: 600;\n font-size: 18px;\n line-height: 22px;\n color: #203254;\n}\n\n.footer .footer-info-content {\n display: flex;\n flex-direction: column;\n row-gap: 16px;\n color: #4d5c74;\n font-size: 16px;\n line-height: 19.36px;\n}\n\n.footer .footer-info-content a {\n text-decoration: none;\n color: #4d5c74;\n font-size: 16px;\n line-height: 19.36px;\n}\n\n.footer .footer-filerobot h4 {\n font-weight: 600;\n font-size: 18px;\n line-height: 21.78px;\n color: #203254;\n margin-bottom: 24px;\n}\n\n.footer .footer-filerobot-content {\n display: flex;\n flex-direction: column;\n row-gap: 16px;\n}\n\n.footer .footer-filerobot-content a {\n text-decoration: none;\n font-size: 16px;\n line-height: 19.36px;\n color: #4d5c74;\n}\n\n.cloudimage-360-loader {\n opacity: 0;\n}\n\n.transition-outline-button {\n transition: all 300ms ease-in-out;\n}\n\n.transition-outline-button:hover {\n background-color: #3daba4;\n color: #FFF !important;\n}\n\n.transition-filled-button {\n transition: all 300ms ease-in-out;\n}\n\n.transition-filled-button:hover {\n background-color: #35918a !important;\n}\n\n@media (max-width: 1224px) {\n .demo-usage .demo-usage-wrapper .demo-usage-content {\n display: grid;\n grid-template-columns: repeat(2, 0.5fr);\n justify-content: center;\n margin-top: 32px;\n column-gap: 30px;\n flex-wrap: wrap;\n }\n\n .demo-usage .demo-usage-content .plugin-options-wrapper {\n display: flex;\n flex-direction: column;\n row-gap: 30px;\n overflow-y: scroll;\n min-width: fit-content;\n max-height: 621px;\n }\n\n .demo-usage .demo-usage-content .plugin-options-wrapper::-webkit-scrollbar {\n width: 8px;\n }\n\n .demo-usage .demo-usage-content .plugin-options-wrapper::-webkit-scrollbar-thumb {\n background: #dbdddf;\n }\n\n .demo-usage-wrapper .demo-usage-content .customize-wrapper {\n margin-top: 0;\n max-height: unset;\n min-height: unset;\n overflow-y: unset;\n grid-column: 2;\n padding-top: 0;\n }\n}\n\n@media (max-width: 930px) {\n .demo-usage .demo-usage-wrapper .earbuds {\n width: 80.5%;\n }\n\n .demo-usage .demo-usage-wrapper .earbuds .output-code {\n width: 100%;\n }\n\n .demo-usage .demo-usage-wrapper .demo-usage-content {\n display: flex;\n justify-content: center;\n margin-top: 32px;\n column-gap: 30px;\n flex-wrap: wrap;\n }\n\n .demo-usage .demo-usage-content .image-source {\n width: 50%;\n padding-top: 0;\n }\n\n .demo-usage .image-source .plugin-options {\n width: 100%;\n }\n\n .demo-usage .demo-usage-content .plugin-options-wrapper {\n display: flex;\n flex-direction: row;\n width: 80.2%;\n margin-top: 30px;\n overflow-y: unset;\n }\n\n .demo-usage-wrapper .demo-usage-content .customize {\n width: 50%;\n max-width: unset;\n max-height: 600px;\n padding-top: 0;\n }\n\n .demo-usage-wrapper .demo-usage-content .customize-wrapper {\n width: 100%;\n max-width: unset;\n max-height: 600px;\n overflow-y: scroll;\n }\n\n .demo-usage-wrapper .customize .customize-selectors {\n width: 100%;\n }\n}\n\n@media (max-width: 777px) {\n .content-wrapper .header .navbar {\n display: none;\n }\n}\n\n@media(max-width: 768px){\n .content-wrapper .header {\n display: flex;\n padding: 23.5px 16px 0 16px;\n }\n\n .content-wrapper .content {\n align-items: flex-start;\n }\n\n .content-wrapper .content h1 {\n text-align: left;\n }\n\n .content-wrapper .content .content-text {\n text-align: left;\n }\n\n .content-wrapper .content .customer-logos {\n justify-content: space-between;\n }\n\n .content-wrapper .content {\n padding: 0 16px;\n }\n\n .content-wrapper .content .car-image .content-text {\n text-align: left;\n }\n\n .gallery-section {\n padding: 0 16px;\n }\n\n .demo-usage {\n padding: 60px 16px 91px 16px;\n }\n\n .demo-usage .usage-title {\n align-items: flex-start;\n text-align: left;\n }\n\n .demo-usage .demo-usage-wrapper .earbuds {\n width: 100%;\n }\n\n .content-wrapper .github-sandbox-buttons-wrapper .github-button {\n padding: 8px 11.6px;\n }\n\n .content-wrapper .github-sandbox-buttons-wrapper .github-button a {\n white-space: nowrap;\n }\n\n .demo-usage .demo-usage-content .image-source {\n width: 100%;\n }\n\n .demo-usage-wrapper .demo-usage-content .customize {\n width: 100%;\n max-width: unset;\n }\n\n .demo-usage .demo-usage-content .plugin-options-wrapper {\n width: 100%;\n }\n\n .questions {\n padding: 60px 16px;\n align-items: flex-start;\n }\n\n .questions .issue-button-wrapper {\n justify-content: flex-start;\n }\n}\n\n@media (max-width: 650px) {\n .content-wrapper .header .navbar {\n display: none;\n }\n\n .demo-usage .demo-usage-content .plugin-options-wrapper {\n display: flex;\n flex-direction: column;\n overflow-y: scroll;\n }\n\n .demo-usage-wrapper .demo-usage-content .customize-wrapper {\n overflow-y: unset;\n }\n\n .gallery-section .gallery-content .motorcycle,\n .gallery-section .gallery-content .geely-car {\n width: 380px;\n }\n\n .footer {\n display: flex;\n flex-direction: column;\n }\n\n .footer .footer-logo {\n width: fit-content;\n }\n\n .footer .footer-wrapper {\n justify-content: space-between;\n }\n}\n\n@media (max-width: 512px) {\n .content-wrapper .header .navbar {\n display: none;\n }\n\n .content-wrapper .header {\n display: flex;\n justify-content: space-between;\n padding: 23.5px 16px 0 16px;\n }\n\n .content-wrapper .content h1 {\n font-size: 9.4vw;\n line-height: 11.3vw;\n text-align: left;\n }\n\n .content-wrapper .content .content-text {\n text-align: left;\n }\n\n .content-wrapper .header .header-logo {\n height: 40px;\n font-size: 4.4vw;\n line-height: 6.9vw;\n }\n\n .content-wrapper .header .header-logo img {\n height: 35px;\n width: 140.79px;\n }\n\n .content-wrapper .content .customer-logos {\n justify-content: space-between;\n }\n\n .content-wrapper .content {\n padding: 0 16px;\n }\n\n .content-wrapper .content .car-image .content-text {\n text-align: left;\n }\n\n .gallery-section {\n padding: 0 16px;\n }\n\n .demo-usage {\n padding: 60px 16px 91px 16px;\n }\n\n .demo-usage .usage-title {\n align-items: flex-start;\n text-align: left;\n }\n\n .demo-usage .demo-usage-wrapper .earbuds {\n width: 100%;\n }\n\n .content-wrapper .github-sandbox-buttons-wrapper .github-button {\n padding: 8px 11.6px;\n }\n\n .content-wrapper .github-sandbox-buttons-wrapper .github-button a {\n white-space: nowrap;\n }\n\n .demo-usage .demo-usage-content .image-source {\n width: 100%;\n }\n\n .demo-usage-wrapper .demo-usage-content .customize {\n width: 100%;\n max-width: unset;\n }\n\n .questions {\n padding: 60px 16px;\n align-items: flex-start;\n }\n\n .footer {\n display: block;\n padding: 60px 16px;\n }\n\n .footer .accordion-wrapper {\n display: flex;\n }\n\n .footer .email-input-wrapper {\n display: flex;\n }\n\n .footer .footer-logo {\n width: 100%;\n row-gap: 12px;\n }\n\n .footer .footer-logo p {\n font-size: 15px;\n line-height: 29px;\n }\n\n .footer .footer-filerobot-content {\n margin-bottom: 29px;\n }\n\n .footer .footer-wrapper {\n display: none;\n }\n\n .footer .navbar {\n display: flex;\n }\n\n .hide-in-mobile {\n display: none;\n }\n}\n"],"sourceRoot":""} \ No newline at end of file