.custom-banner{display:flex;align-items:center;justify-content:flex-start;height:730px;width:70%;margin:0 auto;position:relative;overflow:hidden;border-bottom-left-radius:10px;border-bottom-right-radius:10px}#background-image{width:100%;height:100%;object-fit:cover;object-position:center}.video-container{position:absolute;bottom:10%;left:66%;width:20%;height:23%;padding-bottom:5.625%;border:2px solid grey;overflow:hidden;border-radius:8px;box-shadow:5px 5px 10px #0000004d;animation:fadeIn 3s forwards 2s;opacity:0}@keyframes scaleInContainer{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:5px}.svg-container{display:flex;overflow-x:auto;position:absolute;top:80%;margin:5px 20px 10px;max-width:100%;max-height:100%;opacity:0;animation:fadeIn 3s 2s forwards}@media(max-width:900px){.svg-container{flex-wrap:wrap;justify-content:space-evenly}}.svg-element svg{margin-left:20px;margin-right:20px}.svg-element{text-align:center}.svg-text{font-size:.8em;font-weight:700;text-align:center;text-shadow:1px 1px 2px rgba(0,0,0,.8);color:#fff;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);border-radius:10px}#boxImage{max-height:55%;width:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1);animation:scaleAnim 2s forwards,overlapMove 2s 2s forwards}#deviceImage{max-height:55%;width:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1);margin-left:8vw;animation:scaleAnim 2s forwards,overlapMoveSecond 2s 2s forwards}#deviceImage:hover{transform:scale(1.33)}@keyframes pulse{0%,to{animation-timing-function:ease-in}50%{transform:scale(1.33)}}#titleImage{position:absolute;top:20%;left:75%;transform:translate(-50%,-50%) scale(0);width:35%;margin-right:20 px;animation:scaleIn 2s 2s forwards}#wordsNumberImage{position:absolute;top:20px;left:20px;max-width:80%;height:20%;opacity:0;animation:fadeIn 3s 2s forwards}@keyframes scaleIn{to{transform:translate(-50%,-50%) scale(1)}}.caption-text{position:absolute;top:35%;left:75%;color:#000;text-shadow:1px 1px 2px rgba(0,0,0,.8);color:#fff;border-radius:10px;transform:translate(-50%);text-align:center;opacity:0;width:40%;font-weight:700;margin-right:20px;padding-bottom:10px;overflow:hidden;white-space:normal;font-size:16px;animation:fadeIn 3s 2s forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleAnim{0%{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-50%) scale(1)}}@keyframes overlapMove{to{transform:translate(-30vw,-60%)}}@keyframes overlapMoveSecond{to{transform:translate(-27vw,-70%)}}.banner-button-container{position:absolute;top:52%;left:75%;transform:translate(-50%,-50%);opacity:0;margin-top:50px;animation:fadeIn 3s 2s forwards;z-index:2}.banner-ytblink-button-container{position:absolute;top:60%;left:75%;transform:translate(-50%,-50%);opacity:0;padding-top:70px;animation:fadeIn 3s 2s forwards;display:none;z-index:1}.glass-button,.btn-watch-video{position:abolute;transition:all .3s ease-in-out;box-shadow:0 10px 20px #0003;padding-block:.5rem;padding-inline:1.25rem;background-color:#d2042d;border-radius:6px;text-decoration:none;display:flex;align-items:center;justify-content:center;color:#fff;gap:10px;font-weight:700;border:3px solid #ffffff4d;outline:none;overflow:hidden;font-size:15px}.glass-button:hover,.btn-watch-video:hover{transform:scale(1.05);border-color:#fff9}.glass-button:before,.btn-watch-video:before{content:none;position:absolute;width:100%;height:100%;background-image:none;top:0;left:0;opacity:0;transition:opacity .3s ease-in-out}.shadow__btn{padding:10px 20px;border:none;font-size:.8em;color:#fff;border-radius:6px;letter-spacing:2px;font-weight:700;text-transform:uppercase;transition:.5s;background:#f9d131;box-shadow:0 8px 15px #0000001a}.shadow__btn:hover{box-shadow:0 12px 20px #0003;cursor:pointer}@media screen and (max-width:1680px){.custom-banner{width:100%}@keyframes overlapMove{to{transform:translate(-40vw,-60%)}}@keyframes overlapMoveSecond{to{transform:translate(-34vw,-70%)}}}@media(min-width:768px)and (max-width:1394px){#deviceImage,#boxImage{max-height:50%}#titleImage{max-height:20%;top:22%}@keyframes overlapMoveSecond{to{transform:translate(-40vw,-80%)}}}@media(min-width:494px)and (max-width:767px){#deviceImage,#boxImage{max-height:20%}}@media screen and (max-width:767px){#titleImage{top:12%}#deviceImage{max-height:60vw;top:36%}#boxImage{max-height:70vw;top:43%}.banner-button-container{bottom:3%;top:auto;left:50%}.banner-ytblink-button-container{bottom:0%;display:none}#wordsNumberImage{top:37%;max-height:7%;left:10%}#titleImage{top:5%;left:50%;width:70%;margin-right:0 px}.svg-container{top:55%}.svg-text{font-size:14px}.svg-element svg{width:50px;height:50px}.caption-text{top:10%;left:50%;width:80%;margin-right:0 px}.video-container{margin-left:auto;margin-right:auto;bottom:8%;left:25%;padding-top:50px;padding-bottom:50px;width:50%;height:12%}@keyframes overlapMoveSecond{to{transform:translate(-30%,-50%)}}@keyframes overlapMove{to{transform:translate(-60%,-50%)}}}@media(min-width:494px)and (max-width:767px){#deviceImage{max-height:28%;top:42%}.custom-banner{height:800px}#boxImage{max-height:28%;top:42%}.caption-text{top:16%}#titleImage{top:10%}#wordsNumberImage{top:34%}.svg-container{top:58%}.svg-element svg{width:60px;height:60px}@keyframes overlapMoveSecond{to{transform:translate(-40%,-50%)}}}@media(min-width:768px)and (max-width:1200px){.svg-element svg{width:5vw;height:5vw}}@media(max-width:494px){.custom-banner{height:1000px}}@media(max-width:320px){.banner-button-container{bottom:0%;top:auto;left:50%}.shadow__btn{padding:10px 20px;border:none;font-size:.8rem;color:#fff;border-radius:6px;letter-spacing:1px;font-weight:600;text-transform:uppercase;transition:.5s;background:#f9d131;box-shadow:0 8px 15px #0000001a}}@media(min-width:768px)and (max-width:2189px){.video-container{position:absolute;bottom:20%;left:45%;width:0%;height:0%;opacity:0;border:0px}.banner-ytblink-button-container{bottom:0%;top:72%;display:inline}.banner-button-container{bottom:0%;top:62%}}@media screen and (max-width:494px){.video-container{bottom:10%;height:8%}}@media(min-width:768px)and (max-width:1216px){.caption-text{top:30%}}
/*# sourceMappingURL=/cdn/shop/t/4/assets/toy-banner.css.map */