{"archived":0,"globalCss":null,"mainStage":1,"name":"Tuto slider 4 produits","stages":[{"__typename":"ScenarioStages","customScript":"","displayTimeOnlyUntilClick":false,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"display":"none"},"coverStyle":{"display":"none","transition":"opacity 0.5s ease, visibility 0.5s ease"},"iframeStyle":{},"wrapperClose":{},"wrapperHidden":{"right":"-186px"},"wrapperOpen":{"height":"45px","width":"230px","top":"40%","right":"-93px","transition":"right 0.3s linear","transform":"rotate(-90deg)"}},"htmlCloseButton":"<style>\n \n\n \n @keyframes pulse{\n 100% {\n box-shadow: 0 0 0 8px #dd005100;\n }\n \n \n }\n</style>\n\n","htmlContent":"<style>\n @font-face {\n font-family: \"Averta regular\";\n src: url(\"https://img.perfmaker.net/1145/1668777968_averta-regular-webfont.woff\")\n }\n@font-face {\n font-family: \"Averta bold\";\n src: url(\"https://img.perfmaker.net/1145/1668777989_averta-bold-webfont.woff\")\n }\n\n .root {\n display: flex;\n justify-content: center;\n align-items: flex-end;\n height: 100%;\n width: 100%;\n border-radius: 0px;\n color: #fff;\n font-family: \"Averta bold\";\n }\n \n .root .perfmaker-bubble {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 92%;\n width: 95%;\n cursor: pointer;\n background-color:#A7BC4B;\n \n }\n \n .root .text {\n text-align:center;\n font-family: Raleway, Arial;\n font-size: 14px;\n padding:10px;\n font-family: \"Averta bold\";\n font-weight:600;\n text-transform:uppercase;\n\n }\n \n @keyframes pulse{\n 100% {\n box-shadow: 0 0 0 8px #b0011500;\n }\n\n</style>\n\n<div class=\"root\">\n <div class=\"perfmaker-bubble\">\n <div class=\"text\">Προϊόντα κατασκευής</div>\n </div>\n</div>","name":"BubbleBox","notBlocking":false},{"__typename":"ScenarioStages","customScript":"","displayTimeOnlyUntilClick":null,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","right":"-10px","top":"3px"},"coverStyle":{},"iframeStyle":{},"wrapperClose":{"right":"-350px","transition":"right 1s linear","transition-timing-function":"cubic-bezier(.17,.52,.24,.99)","box-shadow":"0px 0px 15px 0px rgba(0,0,0,.3)"},"wrapperHidden":{"height":"320px","width":"350px","bottom":"50%","transform":"translateY(50%)","right":"-520px","border-radius":"15px","max-height":"650px"},"wrapperOpen":{"right":"20px","transition":"right 1s linear","transition-timing-function":"cubic-bezier(.17,.52,.24,.99)","box-shadow":"0px 0px 15px 0px rgba(0,0,0,.3)"}},"htmlCloseButton":"\n\n<style>\n\n\n/* CB style -> {\"position\":\"absolute\",\"right\":\"0\",\"top\":\"1vh\"} */\n\n .lines{\n position: absolute;\n top: 1vh;\n right: 10px;\n width: 35px;\n height: 35px;\n border-radius:100px;\n cursor: pointer;\n background:transparent;\n display:flex;\n align-items:center;\n justify-content:center;\n }\n .line{\n position: absolute;\n background:black;\n width: 15px;\n height: 1px;\n transition: All ease .3s;\n }\n \n .line1{\n transform: rotate(45deg);\n }\n .line2{\n transform: rotate(-45deg);\n }\n@media only screen and (max-width: 400px) {\n .perfmaker-sidebar-wrapper {\n width: 90vw !important;\n top: unset !important; \n bottom: 5% !important; \n transform:translateY(0) !important;\n left: 5vw !important; \n }\n }\n @media only screen and (min-height: 850px) {\n .perfmaker-sidebar-wrapper {\n transform:scale(1.15) translateY(-30%) !important; \n top:50% !important;\n right: 33px !important; \n }\n }\n</style>\n\n<div class=\"lines perfmaker-close-cross\">\n <div class=\"line1 line\"></div>\n <div class=\"line2 line\"></div>\n</div>","htmlContent":"<style>\n @font-face {\n font-family: \"Averta regular\";\n src: url(\"https://img.perfmaker.net/1145/1668777968_averta-regular-webfont.woff\")\n }\n@font-face {\n font-family: \"Averta bold\";\n src: url(\"https://img.perfmaker.net/1145/1668777989_averta-bold-webfont.woff\")\n }\n .pm-root{\n \tbackground:white;\n width:100%;\n height:100%;\n display:flex;\n flex-direction:column;\n overflow:hidden;\n } \n .pm-header{\n \ttext-align:center;\n display:flex;\n flex-direction:column;\n justify-content:center;\n align-items:center;\n font-family: \"Averta bold\";\n \n }\n .green-top{\n \twidth:100%;\n height:15px;\n background-color:#A7BC4B;\n }\n .pm-header img{\n \twidth:20%;\n margin-top:2vh;\n }\n .pm-header h1{\n \tfont-size: calc(11px + 2.5vw);\n width: 90%;\n margin: 6vh 0 0 0;\n font-weight: 500;\n }\n \n \n /* PARTIE SLIDER */\n \n\n\n.container{\n\t\tmargin: 0 auto;\n\t\tposition: relative;\n\t\theight: auto;\n\t\tpadding-bottom: 38%;\n\t \tuser-select: none;\n\t\tbackground-color: transparent;\n\t\tborder-radius:10px;\n \t\tdisplay: flex;\n \t\talign-items: center;\n \tflex-direction: column;\n\t}\n \n .product-img{\n \theight: 100%;\n }\n .pm-subtitle{\n \tfont-family: \"Averta bold\";\n margin:0;\n font-size:calc(7px + 3vh);\n text-align:center;\n }\n .bottom-btn{\n \tfont-family: \"Averta bold\";\n background-color:#081F5F;\n border-radius:100px;\n color:white;\n border:none;\n padding:4vh 0;\n width:54%;\n cursor:pointer;\n margin-top:6vh;\n }\n\n\t\n\n\t .prev, .next{\n\t\twidth: 5%;\n\t\theight: inherit;\n\t\tposition: absolute;\n\t\ttop:50%;\n \ttransform:translateY(-50%);\n\t\tz-index: 99;\n\t\ttransition: .45s;\n\t\tcursor: pointer;\n\t\ttext-align: center;\n\t}\n\n\t.next{right:0;}\n\t.prev{left:0;}\n\n\t\n\n\n@keyframes scroll{\n\t0%{\topacity:.4;}\n\t100%{opacity:1;}\n}\t\n .next, .prev{\n \tbackground: none;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n \n\n\n@media screen and (max-width: 685px){\n\t.container{\n\t\tborder: none;\n\t\twidth: 100%;\n\t\theight: 50vh;\n\t\tpadding-bottom: 55%; \n\t}\t\n\t\n\tlabel span { font-size: 20pt; }\n\t\n\t.prev, .next{\n\t\twidth: 15%;\n height:5vh;\n\t}\t\n\t\n}\n\n \n \n</style>\n\n<div class=\"pm-root\">\n <span class=\"prev perfmaker-action\" data-onclick=\"NEXT_STAGE\" data-next=\"4\">❮</span>\n <span class=\"next perfmaker-action\" data-onclick=\"NEXT_STAGE\" data-next=\"2\">❯</span>\n <div class=\"pm-header\">\n <div class=\"green-top\"></div>\n <h1 class=\"pm-title\">Προϊόντα κατασκευής</h1>\n </div>\n <div class=\"pm-slider\">\n <section>\n <div class=\"rt-container\">\n <div class=\"col-rt-12\">\n \n <div class=\"container\">\n \n \n <img class=\"product-img perfmaker-data\" src=\"https://img.perfmaker.net/1145/1669391083_mammut1.png\" data-attribute-src=\"${BASKET.produit_tuto_img1}\">\n <p class=\"pm-subtitle perfmaker-data\" data-key=\"BASKET.produit_tuto_name1\">MAMUT GLUE HIGH TACK</p>\n <button class=\"perfmaker-action perfmaker-data bottom-btn\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"${BASKET.produit_tuto_link1}\"> προβολή</button>\n \n \n \n \n </div>\n\t\t</div>\n </div>\n</section>\n \n </div>\n \n</div>","name":"prod 1","notBlocking":null},{"__typename":"ScenarioStages","customScript":"","displayTimeOnlyUntilClick":null,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","right":"-10px","top":"3px"},"coverStyle":{},"iframeStyle":{},"wrapperClose":{"right":"-350px","transition":"right 1s linear","transition-timing-function":"cubic-bezier(.17,.52,.24,.99)","box-shadow":"0px 0px 15px 0px rgba(0,0,0,.3)"},"wrapperHidden":{"height":"320px","width":"350px","bottom":"50%","transform":"translateY(50%)","right":"-520px","border-radius":"15px","max-height":"650px"},"wrapperOpen":{"right":"20px","transition":"right 1s linear","transition-timing-function":"cubic-bezier(.17,.52,.24,.99)","box-shadow":"0px 0px 15px 0px rgba(0,0,0,.3)"}},"htmlCloseButton":"\n\n<style>\n\n\n/* CB style -> {\"position\":\"absolute\",\"right\":\"0\",\"top\":\"1vh\"} */\n\n .lines{\n position: absolute;\n top: 1vh;\n right: 10px;\n width: 35px;\n height: 35px;\n border-radius:100px;\n cursor: pointer;\n background:transparent;\n display:flex;\n align-items:center;\n justify-content:center;\n }\n .line{\n position: absolute;\n background:black;\n width: 15px;\n height: 1px;\n transition: All ease .3s;\n }\n \n .line1{\n transform: rotate(45deg);\n }\n .line2{\n transform: rotate(-45deg);\n }\n@media only screen and (max-width: 400px) {\n .perfmaker-sidebar-wrapper {\n width: 90vw !important;\n top: unset !important; \n bottom: 5% !important; \n transform:translateY(0) !important;\n left: 5vw !important; \n }\n }\n @media only screen and (min-height: 850px) {\n .perfmaker-sidebar-wrapper {\n transform:scale(1.15) translateY(-30%) !important; \n top:50% !important;\n right: 33px !important; \n }\n }\n</style>\n\n<div class=\"lines perfmaker-close-cross\">\n <div class=\"line1 line\"></div>\n <div class=\"line2 line\"></div>\n</div>","htmlContent":"<style>\n @font-face {\n font-family: \"Averta regular\";\n src: url(\"https://img.perfmaker.net/1145/1668777968_averta-regular-webfont.woff\")\n }\n@font-face {\n font-family: \"Averta bold\";\n src: url(\"https://img.perfmaker.net/1145/1668777989_averta-bold-webfont.woff\")\n }\n \n .pm-root{\n \tbackground:white;\n width:100%;\n height:100%;\n display:flex;\n flex-direction:column;\n overflow:hidden;\n } \n .pm-header{\n \ttext-align:center;\n display:flex;\n flex-direction:column;\n justify-content:center;\n align-items:center;\n font-family: \"Averta bold\";\n \n }\n .green-top{\n \twidth:100%;\n height:15px;\n background-color:#A7BC4B;\n }\n .pm-header img{\n \twidth:20%;\n margin-top:2vh;\n }\n .pm-header h1{\n \tfont-size: calc(11px + 2.5vw);\n width: 90%;\n margin: 6vh 0 0 0;\n font-weight: 500;\n }\n \n \n /* PARTIE SLIDER */\n \n\n\n.container{\n\t\tmargin: 0 auto;\n\t\tposition: relative;\n\t\theight: auto;\n\t\tpadding-bottom: 38%;\n\t \tuser-select: none;\n\t\tbackground-color: transparent;\n\t\tborder-radius:10px;\n \t\tdisplay: flex;\n \t\talign-items: center;\n \tflex-direction: column;\n\t}\n \n .product-img{\n \theight: 100%;\n }\n .pm-subtitle{\n \tfont-family: \"Averta bold\";\n margin:0;\n font-size:calc(7px + 3vh);\n text-align:center;\n }\n .bottom-btn{\n \tfont-family: \"Averta bold\";\n background-color:#081F5F;\n border-radius:100px;\n color:white;\n border:none;\n padding:4vh 0;\n width:54%;\n cursor:pointer;\n margin-top:6vh;\n }\n\n\t\n\n\t .prev, .next{\n\t\twidth: 5%;\n\t\theight: inherit;\n\t\tposition: absolute;\n\t\ttop:50%;\n \ttransform:translateY(-50%);\n\t\tz-index: 99;\n\t\ttransition: .45s;\n\t\tcursor: pointer;\n\t\ttext-align: center;\n\t}\n\n\t.next{right:0;}\n\t.prev{left:0;}\n\n\t\n\n\n@keyframes scroll{\n\t0%{\topacity:.4;}\n\t100%{opacity:1;}\n}\t\n .next, .prev{\n \tbackground: none;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n \n\n\n@media screen and (max-width: 685px){\n\t.container{\n\t\tborder: none;\n\t\twidth: 100%;\n\t\theight: 50vh;\n\t\tpadding-bottom: 55%; \n\t}\t\n\t\n\tlabel span { font-size: 20pt; }\n\t\n\t.prev, .next{\n\t\twidth: 15%;\n height:5vh;\n\t}\t\n\t\n}\n\n \n \n</style>\n\n<div class=\"pm-root\">\n <span class=\"prev perfmaker-action\" data-onclick=\"NEXT_STAGE\" data-next=\"1\">❮</span>\n <span class=\"next perfmaker-action\" data-onclick=\"NEXT_STAGE\" data-next=\"3\">❯</span>\n <div class=\"pm-header\">\n <div class=\"green-top\"></div>\n <h1 class=\"pm-title\">Προϊόντα κατασκευής</h1>\n </div>\n <div class=\"pm-slider\">\n <section>\n <div class=\"rt-container\">\n <div class=\"col-rt-12\">\n \n <div class=\"container\">\n \n \n <img class=\"product-img perfmaker-data\" src=\"https://img.perfmaker.net/1145/1669391083_mammut1.png\" data-attribute-src=\"${BASKET.produit_tuto_img2}\">\n <p class=\"pm-subtitle perfmaker-data\" data-key=\"BASKET.produit_tuto_name2\">MAMUT GLUE HIGH TACK</p>\n <button class=\"perfmaker-action perfmaker-data bottom-btn\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"${BASKET.produit_tuto_link2}\"> προβολή</button>\n \n \n \n \n </div>\n\t\t</div>\n </div>\n</section>\n \n </div>\n \n</div>","name":"prod 2","notBlocking":null},{"__typename":"ScenarioStages","customScript":"","displayTimeOnlyUntilClick":null,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","right":"-10px","top":"3px"},"coverStyle":{},"iframeStyle":{},"wrapperClose":{"right":"-350px","transition":"right 1s linear","transition-timing-function":"cubic-bezier(.17,.52,.24,.99)","box-shadow":"0px 0px 15px 0px rgba(0,0,0,.3)"},"wrapperHidden":{"height":"320px","width":"350px","bottom":"50%","transform":"translateY(50%)","right":"-520px","border-radius":"15px","max-height":"650px"},"wrapperOpen":{"right":"20px","transition":"right 1s linear","transition-timing-function":"cubic-bezier(.17,.52,.24,.99)","box-shadow":"0px 0px 15px 0px rgba(0,0,0,.3)"}},"htmlCloseButton":"\n\n<style>\n\n\n/* CB style -> {\"position\":\"absolute\",\"right\":\"0\",\"top\":\"1vh\"} */\n\n .lines{\n position: absolute;\n top: 1vh;\n right: 10px;\n width: 35px;\n height: 35px;\n border-radius:100px;\n cursor: pointer;\n background:transparent;\n display:flex;\n align-items:center;\n justify-content:center;\n }\n .line{\n position: absolute;\n background:black;\n width: 15px;\n height: 1px;\n transition: All ease .3s;\n }\n \n .line1{\n transform: rotate(45deg);\n }\n .line2{\n transform: rotate(-45deg);\n }\n@media only screen and (max-width: 400px) {\n .perfmaker-sidebar-wrapper {\n width: 90vw !important;\n top: unset !important; \n bottom: 5% !important; \n transform:translateY(0) !important;\n left: 5vw !important; \n }\n }\n @media only screen and (min-height: 850px) {\n .perfmaker-sidebar-wrapper {\n transform:scale(1.15) translateY(-30%) !important; \n top:50% !important;\n right: 33px !important; \n }\n }\n</style>\n\n<div class=\"lines perfmaker-close-cross\">\n <div class=\"line1 line\"></div>\n <div class=\"line2 line\"></div>\n</div>","htmlContent":"<style>\n @font-face {\n font-family: \"Averta regular\";\n src: url(\"https://img.perfmaker.net/1145/1668777968_averta-regular-webfont.woff\")\n }\n@font-face {\n font-family: \"Averta bold\";\n src: url(\"https://img.perfmaker.net/1145/1668777989_averta-bold-webfont.woff\")\n }\n .pm-root{\n \tbackground:white;\n width:100%;\n height:100%;\n display:flex;\n flex-direction:column;\n overflow:hidden;\n } \n .pm-header{\n \ttext-align:center;\n display:flex;\n flex-direction:column;\n justify-content:center;\n align-items:center;\n font-family: \"Averta bold\";\n \n }\n .green-top{\n \twidth:100%;\n height:15px;\n background-color:#A7BC4B;\n }\n .pm-header img{\n \twidth:20%;\n margin-top:2vh;\n }\n .pm-header h1{\n \tfont-size: calc(11px + 2.5vw);\n width: 90%;\n margin: 6vh 0 0 0;\n font-weight: 500;\n }\n \n \n /* PARTIE SLIDER */\n \n\n\n.container{\n\t\tmargin: 0 auto;\n\t\tposition: relative;\n\t\theight: auto;\n\t\tpadding-bottom: 38%;\n\t \tuser-select: none;\n\t\tbackground-color: transparent;\n\t\tborder-radius:10px;\n \t\tdisplay: flex;\n \t\talign-items: center;\n \tflex-direction: column;\n\t}\n \n .product-img{\n \theight: 100%;\n }\n .pm-subtitle{\n \tfont-family: \"Averta bold\";\n margin:0;\n font-size:calc(7px + 3vh);\n text-align:center;\n }\n .bottom-btn{\n \tfont-family: \"Averta bold\";\n background-color:#081F5F;\n border-radius:100px;\n color:white;\n border:none;\n padding:4vh 0;\n width:54%;\n cursor:pointer;\n margin-top:6vh;\n }\n\n\t\n\n\t .prev, .next{\n\t\twidth: 5%;\n\t\theight: inherit;\n\t\tposition: absolute;\n\t\ttop:50%;\n \ttransform:translateY(-50%);\n\t\tz-index: 99;\n\t\ttransition: .45s;\n\t\tcursor: pointer;\n\t\ttext-align: center;\n\t}\n\n\t.next{right:0;}\n\t.prev{left:0;}\n\n\t\n\n\n@keyframes scroll{\n\t0%{\topacity:.4;}\n\t100%{opacity:1;}\n}\t\n .next, .prev{\n \tbackground: none;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n \n\n\n@media screen and (max-width: 685px){\n\t.container{\n\t\tborder: none;\n\t\twidth: 100%;\n\t\theight: 50vh;\n\t\tpadding-bottom: 55%; \n\t}\t\n\t\n\tlabel span { font-size: 20pt; }\n\t\n\t.prev, .next{\n\t\twidth: 15%;\n height:5vh;\n\t}\t\n\t\n}\n\n \n \n</style>\n\n<div class=\"pm-root\">\n <span class=\"prev perfmaker-action\" data-onclick=\"NEXT_STAGE\" data-next=\"2\">❮</span>\n <span class=\"next perfmaker-action\" data-onclick=\"NEXT_STAGE\" data-next=\"4\">❯</span>\n <div class=\"pm-header\">\n <div class=\"green-top\"></div>\n <h1 class=\"pm-title\">Προϊόντα κατασκευής</h1>\n </div>\n <div class=\"pm-slider\">\n <section>\n <div class=\"rt-container\">\n <div class=\"col-rt-12\">\n \n <div class=\"container\">\n \n \n <img class=\"product-img perfmaker-data\" src=\"https://img.perfmaker.net/1145/1669391083_mammut1.png\" data-attribute-src=\"${BASKET.produit_tuto_img3}\">\n <p class=\"pm-subtitle perfmaker-data\" data-key=\"BASKET.produit_tuto_name3\">MAMUT GLUE HIGH TACK</p>\n <button class=\"perfmaker-action perfmaker-data bottom-btn\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"${BASKET.produit_tuto_link3}\"> προβολή</button>\n \n \n \n \n </div>\n\t\t</div>\n </div>\n</section>\n \n </div>\n \n</div>","name":"prod 3","notBlocking":null},{"__typename":"ScenarioStages","customScript":"","displayTimeOnlyUntilClick":null,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","right":"-10px","top":"3px"},"coverStyle":{},"iframeStyle":{},"wrapperClose":{"right":"-350px","transition":"right 1s linear","transition-timing-function":"cubic-bezier(.17,.52,.24,.99)","box-shadow":"0px 0px 15px 0px rgba(0,0,0,.3)"},"wrapperHidden":{"height":"320px","width":"350px","bottom":"50%","transform":"translateY(50%)","right":"-520px","border-radius":"15px","max-height":"650px"},"wrapperOpen":{"right":"20px","transition":"right 1s linear","transition-timing-function":"cubic-bezier(.17,.52,.24,.99)","box-shadow":"0px 0px 15px 0px rgba(0,0,0,.3)"}},"htmlCloseButton":"\n\n<style>\n\n\n/* CB style -> {\"position\":\"absolute\",\"right\":\"0\",\"top\":\"1vh\"} */\n\n .lines{\n position: absolute;\n top: 1vh;\n right: 10px;\n width: 35px;\n height: 35px;\n border-radius:100px;\n cursor: pointer;\n background:transparent;\n display:flex;\n align-items:center;\n justify-content:center;\n }\n .line{\n position: absolute;\n background:black;\n width: 15px;\n height: 1px;\n transition: All ease .3s;\n }\n \n .line1{\n transform: rotate(45deg);\n }\n .line2{\n transform: rotate(-45deg);\n }\n@media only screen and (max-width: 400px) {\n .perfmaker-sidebar-wrapper {\n width: 90vw !important;\n top: unset !important; \n bottom: 5% !important; \n transform:translateY(0) !important;\n left: 5vw !important; \n }\n }\n @media only screen and (min-height: 850px) {\n .perfmaker-sidebar-wrapper {\n transform:scale(1.15) translateY(-30%) !important; \n top:50% !important;\n right: 33px !important; \n }\n }\n</style>\n\n<div class=\"lines perfmaker-close-cross\">\n <div class=\"line1 line\"></div>\n <div class=\"line2 line\"></div>\n</div>","htmlContent":"<style>\n @font-face {\n font-family: \"Averta regular\";\n src: url(\"https://img.perfmaker.net/1145/1668777968_averta-regular-webfont.woff\")\n }\n@font-face {\n font-family: \"Averta bold\";\n src: url(\"https://img.perfmaker.net/1145/1668777989_averta-bold-webfont.woff\")\n }\n .pm-root{\n \tbackground:white;\n width:100%;\n height:100%;\n display:flex;\n flex-direction:column;\n overflow:hidden;\n } \n .pm-header{\n \ttext-align:center;\n display:flex;\n flex-direction:column;\n justify-content:center;\n align-items:center;\n font-family: \"Averta bold\";\n \n }\n .green-top{\n \twidth:100%;\n height:15px;\n background-color:#A7BC4B;\n }\n .pm-header img{\n \twidth:20%;\n margin-top:2vh;\n }\n .pm-header h1{\n \tfont-size: calc(11px + 2.5vw);\n width: 90%;\n margin: 6vh 0 0 0;\n font-weight: 500;\n }\n \n \n /* PARTIE SLIDER */\n \n\n\n.container{\n\t\tmargin: 0 auto;\n\t\tposition: relative;\n\t\theight: auto;\n\t\tpadding-bottom: 38%;\n\t \tuser-select: none;\n\t\tbackground-color: transparent;\n\t\tborder-radius:10px;\n \t\tdisplay: flex;\n \t\talign-items: center;\n \tflex-direction: column;\n\t}\n \n .product-img{\n \theight: 100%;\n }\n .pm-subtitle{\n \tfont-family: \"Averta bold\";\n margin:0;\n font-size:calc(7px + 3vh);\n text-align:center;\n }\n .bottom-btn{\n \tfont-family: \"Averta bold\";\n background-color:#081F5F;\n border-radius:100px;\n color:white;\n border:none;\n padding:4vh 0;\n width:54%;\n cursor:pointer;\n margin-top:6vh;\n }\n\n\t\n\n\t .prev, .next{\n\t\twidth: 5%;\n\t\theight: inherit;\n\t\tposition: absolute;\n\t\ttop:50%;\n \ttransform:translateY(-50%);\n\t\tz-index: 99;\n\t\ttransition: .45s;\n\t\tcursor: pointer;\n\t\ttext-align: center;\n\t}\n\n\t.next{right:0;}\n\t.prev{left:0;}\n\n\t\n\n\n@keyframes scroll{\n\t0%{\topacity:.4;}\n\t100%{opacity:1;}\n}\t\n .next, .prev{\n \tbackground: none;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n \n\n\n@media screen and (max-width: 685px){\n\t.container{\n\t\tborder: none;\n\t\twidth: 100%;\n\t\theight: 50vh;\n\t\tpadding-bottom: 55%; \n\t}\t\n\t\n\tlabel span { font-size: 20pt; }\n\t\n\t.prev, .next{\n\t\twidth: 15%;\n height:5vh;\n\t}\t\n\t\n}\n\n \n \n</style>\n\n<div class=\"pm-root\">\n <span class=\"prev perfmaker-action\" data-onclick=\"NEXT_STAGE\" data-next=\"3\">❮</span>\n <span class=\"next perfmaker-action\" data-onclick=\"NEXT_STAGE\" data-next=\"1\">❯</span>\n <div class=\"pm-header\">\n <div class=\"green-top\"></div>\n <h1 class=\"pm-title\">Προϊόντα κατασκευής</h1>\n </div>\n <div class=\"pm-slider\">\n <section>\n <div class=\"rt-container\">\n <div class=\"col-rt-12\">\n \n <div class=\"container\">\n \n \n <img class=\"product-img perfmaker-data\" src=\"https://img.perfmaker.net/1145/1669391083_mammut1.png\" data-attribute-src=\"${BASKET.produit_tuto_img4}\">\n <p class=\"pm-subtitle perfmaker-data\" data-key=\"BASKET.produit_tuto_name4\">MAMUT GLUE HIGH TACK</p>\n <button class=\"perfmaker-action perfmaker-data bottom-btn\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"${BASKET.produit_tuto_link4}\"> προβολή</button>\n \n \n \n \n </div>\n\t\t</div>\n </div>\n</section>\n \n </div>\n \n</div>","name":"prod 4","notBlocking":null}],"transitions":[[{"__typename":"ScenarioTransitions","actionType":"MOUSE_CLICK","closeBefore":true,"data":null,"nextStage":1}],[{"__typename":"ScenarioTransitions","actionType":"CLOSE_BUTTON_TRANSITION","closeBefore":true,"data":null,"nextStage":0},{"__typename":"ScenarioTransitions","actionType":"TRANSITION_FROM_PANEL","closeBefore":false,"data":null,"nextStage":4},{"__typename":"ScenarioTransitions","actionType":"TRANSITION_FROM_PANEL","closeBefore":false,"data":null,"nextStage":2}],[{"__typename":"ScenarioTransitions","actionType":"CLOSE_BUTTON_TRANSITION","closeBefore":true,"data":null,"nextStage":0},{"__typename":"ScenarioTransitions","actionType":"TRANSITION_FROM_PANEL","closeBefore":false,"data":null,"nextStage":1},{"__typename":"ScenarioTransitions","actionType":"TRANSITION_FROM_PANEL","closeBefore":false,"data":null,"nextStage":3}],[{"__typename":"ScenarioTransitions","actionType":"CLOSE_BUTTON_TRANSITION","closeBefore":true,"data":null,"nextStage":0},{"__typename":"ScenarioTransitions","actionType":"TRANSITION_FROM_PANEL","closeBefore":false,"data":null,"nextStage":2},{"__typename":"ScenarioTransitions","actionType":"TRANSITION_FROM_PANEL","closeBefore":false,"data":null,"nextStage":4}],[{"__typename":"ScenarioTransitions","actionType":"CLOSE_BUTTON_TRANSITION","closeBefore":true,"data":null,"nextStage":0},{"__typename":"ScenarioTransitions","actionType":"TRANSITION_FROM_PANEL","closeBefore":false,"data":null,"nextStage":3},{"__typename":"ScenarioTransitions","actionType":"TRANSITION_FROM_PANEL","closeBefore":false,"data":null,"nextStage":1}]]}
