@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{background-color:#fff;font-family:Helvetica Neue,Helvetica,sans-serif;font-size:16px;margin:0 auto;padding:0 20px}.App,a{color:#333}.gallery{margin:auto;max-width:800px}.gallery-item{position:relative}.name,.signature{color:#4d4e53;font-family:Consolas,Monaco,Andale Mono,monospace;font-size:18px;margin:1em 0 .2em}ul{padding:0 0 0 15px}li{font-size:15px;padding:1px 0}.record-container{background:rgba(0,0,0,.2);height:100%;left:0;position:fixed;top:0;width:100%;z-index:1}.progress-container{background:#333;box-sizing:border-box;color:#fff;left:50%;max-height:100%;max-width:100%;overflow:auto;padding:20px;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:600px}.progress-container h3{margin:0;padding:0}.progress-container p{margin:20px 0}.progress-total{background:#ccc;border-radius:3px;height:6px;width:100%}.progress-thumb{background:#4af;border-radius:3px;height:6px}.progress-container .cancel{appearance:none;-webkit-appearance:none;background:transparent;border:1px solid #eee;color:#fff;cursor:pointer;font-weight:700;padding:10px 15px}.gallery-item .capture,.gallery-item .record{border:5px solid #f55;border-radius:50%;box-sizing:border-box;cursor:pointer;height:30px;position:absolute;right:20px;top:40px;transition:border-width .2s ease;width:30px}.gallery-item .capture{border-color:#ee5;display:none;right:100px}.gallery-item .capture:hover,.gallery-item .record:hover{border-width:15px}.gallery-item .capture:before,.gallery-item .record:before{content:"Record";font-size:14px;font-weight:700;left:50%;padding:1px 2px;pointer-events:none;position:absolute;top:25px;-webkit-transform:translate(-50%);transform:translate(-50%)}.gallery-item .capture:before{content:"Capture"}.example{border:1px solid #ccc;height:400px;overflow:hidden;position:relative;width:100%}.example:before{color:#333;content:"Animation";font-size:15px;font-weight:700;left:10px;position:absolute;top:5px}.result{border:1px solid #ccc;display:none;overflow:hidden;position:relative;width:100%}.result:before{color:#333;content:"Recorded Video";font-size:15px;font-weight:700;left:10px;position:absolute;top:5px;-webkit-transform:translateZ(1px);transform:translateZ(1px);z-index:10}.result video{display:block;left:50%;margin:0 auto;max-height:100%;max-width:100%}.example-viewer,.result video{position:absolute;-webkit-transform:translate(-50%);transform:translate(-50%)}.example-viewer{height:100%;margin-left:50%}.example-container{height:100%;position:relative}.example-hover{background:rgba(0,0,0,.1);display:block;height:100%;opacity:0;pointer-events:none;position:absolute;transition:opacity .2s ease;width:100%}.example:hover .example-hover{opacity:1;pointer-events:auto}.example-hover .button{display:none;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.example-hover .button.display{cursor:pointer;display:block}.example-hover .button.display svg{width:50px}.example-hover .paused{height:50px;width:40px}.example-hover .paused:after,.example-hover .paused:before{background:#333;border-radius:5px;content:"";height:100%;position:absolute;width:10px}.example-hover .paused:after{right:0}.player{align-items:center;display:flex;padding:10px 0;position:relative;text-align:center}.player .pause,.player .play,.player .progress{display:inline-block;vertical-align:middle}.player .play{border-bottom:8px solid transparent;border-left:14px solid #333;border-top:8px solid transparent}.player .pause,.player .play{cursor:pointer;margin-right:15px}.player .pause{border-left:4px solid #333;border-right:4px solid #333;box-sizing:border-box;height:16px;width:14px}.player input[type=range]{-webkit-appearance:none;background:rgba(0,0,0,.2);border-radius:2.5px;height:5px;width:100%}.player input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#333;border-radius:7px;cursor:move;height:14px;width:14px}.player input[type=range]:focus{outline:none}.motion{bottom:0;height:200px;overflow:hidden;width:200px}.motion,.motion .star{left:0;margin:auto;position:absolute;right:0;top:0}.motion .star{height:20px;width:20px}.motion .star:before{border:8px solid #5a5;border-bottom:0;border-right:0;bottom:50%;content:"";height:100%;position:absolute;right:50%;-webkit-transform:skew(9deg,9deg);transform:skew(9deg,9deg);-webkit-transform-origin:100% 100%;transform-origin:100% 100%;width:100%}.motion .star>.star{-webkit-transform:rotate(72deg);transform:rotate(72deg)}.motion .triangle{background:#f5f;border-radius:5px;bottom:20px;height:10px;left:0;margin:auto;position:absolute;right:0;top:0;width:100px}.motion .triangle:after,.motion .triangle:before{background:inherit;border-radius:inherit;content:"";height:100%;position:absolute;width:100%}.motion .triangle:before{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:5px 50%;transform-origin:5px 50%}.motion .triangle:after{-webkit-transform:rotate(-60deg);transform:rotate(-60deg);-webkit-transform-origin:calc(100% - 5px) 50%;transform-origin:calc(100% - 5px) 50%}.motion .rectangle{border:10px solid #f55;border-radius:5px;bottom:0;height:80px;top:0;width:80px}.motion .circle,.motion .rectangle{left:0;margin:auto;position:absolute;right:0}.motion .circle{border:70px solid #5ff;border-radius:50%;bottom:-20px;box-sizing:border-box;height:140px;top:-20px;width:140px}.motion .rectangle2{border-color:#55f}.motion .circle2{border:8px solid #eed414;bottom:20px;height:40px;width:40px}.motion .star1{bottom:20px;top:0}.page1{height:100%;margin:auto;position:relative;width:400px}.page1 .startAnimation{-webkit-backface-visibility:hidden;-webkit-perspective:1000;will-change:transform}.page1 .logo{bottom:0;height:250px;left:0;margin:auto;position:absolute;right:0;top:0}.page1 .logo1 .clapper{height:110px;left:50%;margin-left:-100px;margin-top:-55px;position:absolute;top:50%;width:200px}.page1 .logo1 .svg_circle{position:absolute}.page1 .logo1 svg circle{stroke-dasharray:0 1000;stroke-dashoffset:0}.page1 .logo1 .play-btn{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%) translate(5px);transform:translate(-50%,-50%) translate(5px);transition:width .2s ease;width:40px}.page1 .logo1 .play-btn:hover{width:45px}.page1 .logo1 .circle{bottom:0;left:0;margin:auto;right:0;top:0;z-index:-1}.page1 .logo1 .center{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:-1}.page1 .logo1 .circle{-webkit-transform:scale(0);transform:scale(0)}.page1 .logo1 .circle2{bottom:100px;left:50px}.page1 .logo1 .circle3{right:100px;top:50px}.page1 .logo1 .circle4{left:100px;top:50px}.page1 .logo1 .circle5{bottom:50px;right:100px}.page1 .logo1 .circle{border:50px solid transparent;border-radius:50%;box-sizing:border-box;height:100px;position:absolute;width:100px}.page1 .logo1 .circle:after,.page1 .logo1 .circle:before{border-radius:50%;border-style:solid;border-width:inherit;box-sizing:border-box;content:"";height:inherit;left:50%;position:absolute;top:50%;width:inherit}.page1 .logo1 .circle:before{border-color:#d6d6d6;margin-left:15%;margin-top:15%}.page1 .logo1 .circle:after,.page1 .logo1 .circle:before{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.page1 .logo1 .circle:after{border-color:#333}.page1 .logo1 ellipse{opacity:0}.page1 .logo1 .background{border-radius:5px;height:110px;width:200px}.page1 .logo1 .background,.page1 .play-circle{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.page1 .play-circle{background:#fff;border-radius:50%;height:70px;width:70px;z-index:1}.page1 .play-btn.front{z-index:2}.page1 .clapper .stick{background:#333;box-sizing:border-box;font-size:0;height:32px;overflow:hidden;padding:5px 8px;position:absolute;text-align:center;white-space:nowrap;width:200px}.page1 .clapper .stick1{border-radius:5px 5px 0 0;top:-60px;-webkit-transform-origin:0 100%;transform-origin:0 100%}.page1 .clapper .stick2{top:-30px}.page1 .clapper .rect{background:#fff;border-radius:5px;display:inline-block;height:100%;margin:0 5px;position:relative;vertical-align:top;width:20px}.page1 .clapper .stick1 .rect{-webkit-transform:skew(15deg);transform:skew(15deg)}.page1 .clapper .stick2 .rect{-webkit-transform:skew(-15deg);transform:skew(-15deg)}.page1 .logo1 .bottom{background:#333;border-radius:0 0 5px 5px;box-sizing:border-box;height:100%;left:0;position:absolute;top:0;width:100%}.page1 .logo1 .shadow{background:#d6d6d6;box-sizing:border-box;margin-left:10px;margin-top:10px;position:absolute;z-index:-1}.clapper1{-webkit-backface-visibility:hidden;height:200px;left:50%;-webkit-perspective:1000;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transform-origin:20% 60%;transform-origin:20% 60%;width:200px;will-change:transform;z-index:2}.clapper1 .clapper-container{bottom:-200px;height:170px;left:-200px;margin:auto;position:absolute;right:-200px;top:-200px;width:200px}.clapper1 .clapper-container .clapper-body{height:100%;position:relative;width:100%}.clapper1 .stick{background:#333;box-sizing:border-box;font-size:0;height:32px;overflow:hidden;padding:5px 8px;position:absolute;text-align:center;white-space:nowrap;width:200px}.clapper1 .stick1{border-radius:5px 5px 0 0;-webkit-transform-origin:0 100%;transform-origin:0 100%}.clapper1 .stick2{top:30px}.clapper1 .rect{background:#fff;border-radius:5px;display:inline-block;height:100%;margin:0 5px;position:relative;vertical-align:top;width:20px}.clapper1 .stick1 .rect{-webkit-transform:skew(15deg);transform:skew(15deg)}.clapper1 .stick2 .rect{-webkit-transform:skew(-15deg);transform:skew(-15deg)}.clapper1 .top{border-radius:5px 5px 0 0;height:37%;position:absolute;top:0;width:100%}.clapper1 .bottom{background:#333;border-bottom-left-radius:5px;border-bottom-right-radius:5px;bottom:0;height:64%;position:absolute;width:100%}.clapper1 .circle{background:#fff;border-radius:50%;bottom:10%;height:70px;left:0;margin:auto;position:absolute;right:0;width:70px}.clapper1 .play{bottom:7%;left:50%;margin-left:3px;position:absolute;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:32px}.clapper1 .play svg{-webkit-backface-visibility:hidden;outline:1px solid transparent}.card-rotor{height:350px;margin:0 auto;position:relative;width:330px}.card-wrapper{backface-visibility:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;height:100%;position:absolute;width:100%;z-index:1}.card{background:#f1f1f1;border-radius:10px;bottom:10px;box-sizing:border-box;height:267px;position:absolute;width:192px}.forward .card{right:50%;-webkit-transform:rotate(35deg);transform:rotate(35deg);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}.backward .card{left:50%;-webkit-transform:rotate(-35deg);transform:rotate(-35deg);-webkit-transform-origin:0 100%;transform-origin:0 100%}.card .mark{color:#dd0;font-size:100px;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%) rotate(0deg);transform:translate(-50%,-50%) rotate(0deg);width:60%}.card .shadow{background:#ccc;border-radius:50%;bottom:0;height:10px;left:0;margin:auto;position:absolute;right:0;width:60px}.card .crown{height:80px;margin:0 auto;width:70px}.card .crown:after{background:#dd0;bottom:0;content:"";height:10px;left:0;position:absolute;width:100%}.crown div{border-bottom:80px solid #dd0;position:absolute}.crown div:after{background:#dd0;border-radius:50%;bottom:0;content:"";height:12px;position:absolute;-webkit-transform:translate(-50%,-5px);transform:translate(-50%,-5px);width:12px}.crown .center{border-left:35px solid transparent;border-right:35px solid transparent}.crown .left{border-right:80px solid transparent;left:0;-webkit-transform:rotate(-10deg);transform:rotate(-10deg);-webkit-transform-origin:0 100%;transform-origin:0 100%}.crown .right{border-left:80px solid transparent;right:0;-webkit-transform:rotate(10deg);transform:rotate(10deg);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}.square-transition-container{font-size:0;height:100%;position:relative;width:100%}.square-transition{z-index:10}.smoke-transition-container .scene,.square-transition,.square-transition-container .scene{height:100%;position:absolute;width:100%}.smoke-transition-container .scene span,.square-transition-container .scene span{font-size:40px;font-weight:700;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.square-transition .squares{position:relative;white-space:nowrap}.square-transition .square{background:#333;display:inline-block;height:120px;width:120px}.smoke-transition-container{font-size:0}.smoke-transition,.smoke-transition-container{height:100%;position:relative;width:100%}.smoke-transition .circle{border-radius:50%;bottom:0;height:120px;position:absolute;right:0;width:120px}.smoke-transition .circles{height:100%;position:absolute;width:100%}.smoke-transition .circles1 .circle{background-color:#920733}.smoke-transition .circles2 .circle{background-color:#bdd4cc}
/*# sourceMappingURL=main.5d8c97b3.css.map*/