html,body{display:-webkit-box;display:flex;min-height:100%;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;font-family:Helvetica, sans-serif}ul,li{list-style:none;margin:0;padding:0}.tg-list{text-align:center;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.tg-list-item{margin:0 2em}h2{color:#777}h4{color:#999}.tgl{display:none}.tgl,.tgl:after,.tgl:before,.tgl *,.tgl *:after,.tgl *:before,.tgl+.tgl-btn{box-sizing:border-box}.tgl::-moz-selection,.tgl:after::-moz-selection,.tgl:before::-moz-selection,.tgl *::-moz-selection,.tgl *:after::-moz-selection,.tgl *:before::-moz-selection,.tgl+.tgl-btn::-moz-selection{background:none}.tgl::selection,.tgl:after::selection,.tgl:before::selection,.tgl *::selection,.tgl *:after::selection,.tgl *:before::selection,.tgl+.tgl-btn::selection{background:none}.tgl+.tgl-btn{outline:0;display:block;width:4em;height:2em;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tgl+.tgl-btn:after,.tgl+.tgl-btn:before{position:relative;display:block;content:"";width:50%;height:100%}.tgl+.tgl-btn:after{left:0}.tgl+.tgl-btn:before{display:none}.tgl:checked+.tgl-btn:after{left:50%}.tgl-light+.tgl-btn{background:#f0f0f0;border-radius:2em;padding:2px;-webkit-transition:all 0.4s ease;transition:all 0.4s ease}.tgl-light+.tgl-btn:after{border-radius:50%;background:#fff;-webkit-transition:all 0.2s ease;transition:all 0.2s ease}.tgl-light:checked+.tgl-btn{background:#9fd6ae}.tgl-ios+.tgl-btn{background:#fbfbfb;border-radius:2em;padding:2px;-webkit-transition:all 0.4s ease;transition:all 0.4s ease;border:1px solid #e8eae9}.tgl-ios+.tgl-btn:after{border-radius:2em;background:#fbfbfb;-webkit-transition:left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;transition:left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08)}.tgl-ios+.tgl-btn:hover:after{will-change:padding}.tgl-ios+.tgl-btn:active{box-shadow:inset 0 0 0 2em #e8eae9}.tgl-ios+.tgl-btn:active:after{padding-right:0.8em}.tgl-ios:checked+.tgl-btn{background:#86d993}.tgl-ios:checked+.tgl-btn:active{box-shadow:none}.tgl-ios:checked+.tgl-btn:active:after{margin-left:-0.8em}.tgl-skewed+.tgl-btn{overflow:hidden;-webkit-transform:skew(-10deg);transform:skew(-10deg);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:all 0.2s ease;transition:all 0.2s ease;font-family:sans-serif;background:#888}.tgl-skewed+.tgl-btn:after,.tgl-skewed+.tgl-btn:before{-webkit-transform:skew(10deg);transform:skew(10deg);display:inline-block;-webkit-transition:all 0.2s ease;transition:all 0.2s ease;width:100%;text-align:center;position:absolute;line-height:2em;font-weight:bold;color:#fff;text-shadow:0 1px 0 rgba(0, 0, 0, 0.4)}.tgl-skewed+.tgl-btn:after{left:100%;content:attr(data-tg-on)}.tgl-skewed+.tgl-btn:before{left:0;content:attr(data-tg-off)}.tgl-skewed+.tgl-btn:active{background:#888}.tgl-skewed+.tgl-btn:active:before{left:-10%}.tgl-skewed:checked+.tgl-btn{background:#86d993}.tgl-skewed:checked+.tgl-btn:before{left:-100%}.tgl-skewed:checked+.tgl-btn:after{left:0}.tgl-skewed:checked+.tgl-btn:active:after{left:10%}.tgl-flat+.tgl-btn{padding:2px;-webkit-transition:all 0.2s ease;transition:all 0.2s ease;background:#fff;border:4px solid #f2f2f2;border-radius:2em}.tgl-flat+.tgl-btn:after{-webkit-transition:all 0.2s ease;transition:all 0.2s ease;background:#f2f2f2;content:"";border-radius:1em}.tgl-flat:checked+.tgl-btn{border:4px solid #7fc6a6}.tgl-flat:checked+.tgl-btn:after{left:50%;background:#7fc6a6}.tgl-flip+.tgl-btn{padding:2px;-webkit-transition:all 0.2s ease;transition:all 0.2s ease;font-family:sans-serif;-webkit-perspective:100px;perspective:100px}.tgl-flip+.tgl-btn:after,.tgl-flip+.tgl-btn:before{display:inline-block;-webkit-transition:all 0.4s ease;transition:all 0.4s ease;width:100%;text-align:center;position:absolute;line-height:2em;font-weight:bold;color:#fff;position:absolute;top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:4px}.tgl-flip+.tgl-btn:after{content:attr(data-tg-on);background:#02c66f;-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}.tgl-flip+.tgl-btn:before{background:#ff3a19;content:attr(data-tg-off)}.tgl-flip+.tgl-btn:active:before{-webkit-transform:rotateY(-20deg);transform:rotateY(-20deg)}.tgl-flip:checked+.tgl-btn:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.tgl-flip:checked+.tgl-btn:after{-webkit-transform:rotateY(0);transform:rotateY(0);left:0;background:#7fc6a6}.tgl-flip:checked+.tgl-btn:active:after{-webkit-transform:rotateY(20deg);transform:rotateY(20deg)}h1{padding:0rem 0 1rem;color:#e8eae9;font-size:4rem;text-align:center}a{text-decoration:none;color:#e8eae9;margin-top:4rem;display:block}.mybutton .text{position:absolute;display:none;top:1rem;left:3.8rem;width:11rem;color:#fff}.mybutton{padding:0;position:relative}.mybutton .tgl+.tgl-btn{outline:0;display:block;width:32em;height:17.6em;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tgl-ios2+.tgl-btn{background:#fbfbfb;border-radius:16em;padding:16px;-webkit-transition:all 0.4s ease;transition:all 0.4s ease;border:8px solid #e8eae9}.tgl-ios2+.tgl-btn:after{border-radius:16em;background:#fbfbfb;-webkit-transition:left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;transition:left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;box-shadow:0 0 0 8px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08)}.tgl-ios2+.tgl-btn:hover:after{will-change:padding}.tgl-ios2+.tgl-btn:active{box-shadow:inset 0 0 0 16em #e8eae9}.tgl-ios2+.tgl-btn:active:after{padding-right:6.4em}.tgl-ios2:checked+.tgl-btn{background:#86d993}.tgl-ios2:checked+.tgl-btn .text{display:block}.tgl-ios2:checked+.tgl-btn:active{box-shadow:none}.tgl-ios2:checked+.tgl-btn:active:after{margin-left:-6.4em}@media only screen and (max-width:420px){h1{font-size:3rem}.mybutton .text{position:absolute;display:none;top:0;left:0;width:100%;height:auto;color:#333;background-color:#fff;padding:1rem;z-index:100;box-shadow:0 0 0 8px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08)}.mybutton .tgl+.tgl-btn{outline:0;display:block;width:16em;height:9.6em}}