body {
  background: #333;
  font-size: 16px;
}
.snowball {
  width: 31.25rem;
  height: 31.25rem;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  bottom: -13rem;
  z-index: 0;
  -webkit-transform: scale(0.1);
          transform: scale(0.1);
  -webkit-transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1);
  transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1);
  transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1);
  transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1);
  opacity: 0;
}
.snowball.is-shown {
  -webkit-transform: scale(12);
          transform: scale(12);
  opacity: 1;
  z-index: 2;
}
.snowball--by {
  right: -13rem;
}
.snowball--with {
  right: -9.6875rem;
}
.credits {
  position: absolute;
  right: 1.5625rem;
  bottom: 3.4375rem;
  z-index: 1;
  color: #fff;
  font-family: Open Sans, sans-serif;
  font-size: 0.5rem;
  letter-spacing: 0.05rem;
  padding-left: 5.9375rem;
}
.credits .with {
  position: absolute;
  left: 0.4375rem;
}
.by {
  padding-right: 1.625rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -ms-touch-action: none;
      touch-action: none;
}
.by__text {
  position: relative;
  top: 1rem;
}
.by__logo {
  cursor: pointer;
  width: 1.125rem;
  height: 1.5rem;
  position: absolute;
  right: 0;
  top: 0.4375rem;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMTggMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPlNsaWNlIDE8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4gICAgICAgIDxnIGlkPSJtdXNocm9vbS0yIiBza2V0Y2g6dHlwZT0iTVNMYXllckdyb3VwIj4gICAgICAgICAgICA8cGF0aCBkPSJNMCw2IEwxOCw2IEwxOCw5IEwwLDkgTDAsNiBaIiBpZD0iRmlsbC0yIiBmaWxsPSIjRTQ2QTc1IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTMsMyBMMTUsMyBMMTUsNiBMMyw2IEwzLDMgWiIgaWQ9IkZpbGwtMyIgZmlsbD0iI0U0NkE3NSIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik02LDAgTDEyLDAgTDEyLDMgTDYsMyBMNiwwIFoiIGlkPSJGaWxsLTQiIGZpbGw9IiNFNDZBNzUiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNNiwxNSBMMTIsMTUgTDEyLDE4IEw2LDE4IEw2LDE1IFoiIGlkPSJGaWxsLTUiIGZpbGw9IiNGMUFDOEMiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNNiwxMiBMMTIsMTIgTDEyLDE1IEw2LDE1IEw2LDEyIFoiIGlkPSJGaWxsLTYiIGZpbGw9IiNCNDY0NzkiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNNiw5IEwxMiw5IEwxMiwxMiBMNiwxMiBMNiw5IFoiIGlkPSJGaWxsLTciIGZpbGw9IiM2NTU0NkUiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNNiwxOCBMMTIsMTggTDEyLDI0IEw2LDI0IEw2LDE4IFoiIGlkPSJGaWxsLTgiIGZpbGw9IiNGMUFDOEMiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNMTAuNSw2IEwxMy41LDYgTDEzLjUsOSBMMTAuNSw5IEwxMC41LDYgWiIgaWQ9IkZpbGwtOSIgZmlsbD0iI0YxQUM4QyIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik02LDMgTDksMyBMOSw2IEw2LDYgTDYsMyBaIiBpZD0iRmlsbC0xMCIgZmlsbD0iI0YxQUM4QyIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+");
}
.with {
  padding-right: 2.5rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -ms-touch-action: none;
      touch-action: none;
}
.with__text {
  position: relative;
  top: 1rem;
}
.with__logo {
  cursor: pointer;
  width: 2.25rem;
  height: 2.375rem;
  position: absolute;
  right: -0.0625rem;
  top: 0.25rem;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMzZweCIgaGVpZ2h0PSIzOHB4IiB2aWV3Qm94PSIwIDAgMzYgMzgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPlVudGl0bGVkIDg8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4gICAgICAgIDxwYXRoIGQ9Ik0xOCwyIEMyMy41MjI4NDc1LDIgMjgsNi40NzcxNTI1IDI4LDEyIEMyOCwxNy41MjI4NDc1IDIzLjUyMjg0NzUsMjIgMTgsMjIgQzEyLjQ3NzE1MjUsMjIgOCwxNy41MjI4NDc1IDgsMTIgQzgsNi40NzcxNTI1IDEyLjQ3NzE1MjUsMiAxOCwyIFogTTE3Ljk5OTQwMzQsNy4wODY3OTgzMSBDMjAuNzEzMjE5Myw3LjA4Njc5ODMxIDIyLjkxMzIwMTcsOS4yODY3ODA3MiAyMi45MTMyMDE3LDEyLjAwMDU5NjYgQzIyLjkxMzIwMTcsMTQuNzE0NDEyNCAyMC43MTMyMTkzLDE2LjkxNDM5NDggMTcuOTk5NDAzNCwxNi45MTQzOTQ4IEMxNS4yODU1ODc2LDE2LjkxNDM5NDggMTMuMDg1NjA1MiwxNC43MTQ0MTI0IDEzLjA4NTYwNTIsMTIuMDAwNTk2NiBDMTMuMDg1NjA1Miw5LjI4Njc4MDcyIDE1LjI4NTU4NzYsNy4wODY3OTgzMSAxNy45OTk0MDM0LDcuMDg2Nzk4MzEgWiIgaWQ9Ik92YWwtMjIiIGZpbGw9IiNGMzQyNDYiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgIDxwYXRoIGQ9Ik0yLjUzMTI1LDI5Ljc1IEwzLjYwMTU2MjUsMjkuNzUgTDMuNjAxNTYyNSwzMC4yMzgyODEyIEMzLjc4Mzg1NTA4LDMwLjAzNzc1OTQgMy45ODYzMjcwMSwyOS44ODgwMjEzIDQuMjA4OTg0MzgsMjkuNzg5MDYyNSBDNC40MzE2NDE3NCwyOS42OTAxMDM3IDQuNjc0NDc3ODUsMjkuNjQwNjI1IDQuOTM3NSwyOS42NDA2MjUgQzUuMjAzMTI2MzMsMjkuNjQwNjI1IDUuNDQyNzA3MjcsMjkuNzA1NzI4NSA1LjY1NjI1LDI5LjgzNTkzNzUgQzUuODY5NzkyNzMsMjkuOTY2MTQ2NSA2LjA0MTY2NjAyLDMwLjE1NjI0ODcgNi4xNzE4NzUsMzAuNDA2MjUgQzYuMzQxMTQ2NjgsMzAuMTU2MjQ4NyA2LjU0ODgyNjg5LDI5Ljk2NjE0NjUgNi43OTQ5MjE4OCwyOS44MzU5Mzc1IEM3LjA0MTAxNjg2LDI5LjcwNTcyODUgNy4zMDk4OTQzNywyOS42NDA2MjUgNy42MDE1NjI1LDI5LjY0MDYyNSBDNy45MDM2NDczNCwyOS42NDA2MjUgOC4xNjkyNjk2OSwyOS43MTA5MzY4IDguMzk4NDM3NSwyOS44NTE1NjI1IEM4LjYyNzYwNTMxLDI5Ljk5MjE4ODIgOC43OTIzMTcyMSwzMC4xNzU3ODAxIDguODkyNTc4MTIsMzAuNDAyMzQzOCBDOC45OTI4MzkwNCwzMC42Mjg5MDc0IDkuMDQyOTY4NzUsMzAuOTk3MzkzMyA5LjA0Mjk2ODc1LDMxLjUwNzgxMjUgTDkuMDQyOTY4NzUsMzQgTDcuOTY4NzUsMzQgTDcuOTY4NzUsMzEuODQzNzUgQzcuOTY4NzUsMzEuMzYxOTc2OCA3LjkwODg1NDc3LDMxLjAzNTgwODEgNy43ODkwNjI1LDMwLjg2NTIzNDQgQzcuNjY5MjcwMjMsMzAuNjk0NjYwNiA3LjQ4OTU4NDUzLDMwLjYwOTM3NSA3LjI1LDMwLjYwOTM3NSBDNy4wNjc3MDc0MiwzMC42MDkzNzUgNi45MDQyOTc2LDMwLjY2MTQ1NzggNi43NTk3NjU2MiwzMC43NjU2MjUgQzYuNjE1MjMzNjUsMzAuODY5NzkyMiA2LjUwNzgxMjg1LDMxLjAxMzY3MSA2LjQzNzUsMzEuMTk3MjY1NiBDNi4zNjcxODcxNSwzMS4zODA4NjAzIDYuMzMyMDMxMjUsMzEuNjc1Nzc5MiA2LjMzMjAzMTI1LDMyLjA4MjAzMTIgTDYuMzMyMDMxMjUsMzQgTDUuMjU3ODEyNSwzNCBMNS4yNTc4MTI1LDMxLjk0MTQwNjIgQzUuMjU3ODEyNSwzMS41NjExOTYgNS4yMjk4MTc5OSwzMS4yODU4MDgxIDUuMTczODI4MTIsMzEuMTE1MjM0NCBDNS4xMTc4MzgyNiwzMC45NDQ2NjA2IDUuMDMzODU0NzMsMzAuODE3NzA4OCA0LjkyMTg3NSwzMC43MzQzNzUgQzQuODA5ODk1MjcsMzAuNjUxMDQxMiA0LjY3NDQ3OTk2LDMwLjYwOTM3NSA0LjUxNTYyNSwzMC42MDkzNzUgQzQuMzM4NTQwNzgsMzAuNjA5Mzc1IDQuMTc3NzM1MSwzMC42NjIxMDg4IDQuMDMzMjAzMTIsMzAuNzY3NTc4MSBDMy44ODg2NzExNSwzMC44NzMwNDc0IDMuNzgwNTk5MzIsMzEuMDIwODMyNCAzLjcwODk4NDM4LDMxLjIxMDkzNzUgQzMuNjM3MzY5NDMsMzEuNDAxMDQyNiAzLjYwMTU2MjUsMzEuNzAwNTE4OCAzLjYwMTU2MjUsMzIuMTA5Mzc1IEwzLjYwMTU2MjUsMzQgTDIuNTMxMjUsMzQgTDIuNTMxMjUsMjkuNzUgWiBNMTIuNTU0Njg3NSwyOS42NDA2MjUgQzEyLjk1NTczMTIsMjkuNjQwNjI1IDEzLjMzMjY4MDUsMjkuNzQwODg0NCAxMy42ODU1NDY5LDI5Ljk0MTQwNjIgQzE0LjAzODQxMzIsMzAuMTQxOTI4MSAxNC4zMTM4MDExLDMwLjQxNDA2MDggMTQuNTExNzE4OCwzMC43NTc4MTI1IEMxNC43MDk2MzY0LDMxLjEwMTU2NDIgMTQuODA4NTkzOCwzMS40NzI2NTQzIDE0LjgwODU5MzgsMzEuODcxMDkzOCBDMTQuODA4NTkzOCwzMi4yNzIxMzc0IDE0LjcwODk4NTQsMzIuNjQ3MTMzNyAxNC41MDk3NjU2LDMyLjk5NjA5MzggQzE0LjMxMDU0NTksMzMuMzQ1MDUzOCAxNC4wMzkwNjQyLDMzLjYxNzgzNzYgMTMuNjk1MzEyNSwzMy44MTQ0NTMxIEMxMy4zNTE1NjA4LDM0LjAxMTA2ODcgMTIuOTcyNjU4MywzNC4xMDkzNzUgMTIuNTU4NTkzOCwzNC4xMDkzNzUgQzExLjk0OTIxNTcsMzQuMTA5Mzc1IDExLjQyOTAzODYsMzMuODkyNTgwMyAxMC45OTgwNDY5LDMzLjQ1ODk4NDQgQzEwLjU2NzA1NTEsMzMuMDI1Mzg4NSAxMC4zNTE1NjI1LDMyLjQ5ODcwMSAxMC4zNTE1NjI1LDMxLjg3ODkwNjIgQzEwLjM1MTU2MjUsMzEuMjE0ODQwNCAxMC41OTUwNDk2LDMwLjY2MTQ2MDUgMTEuMDgyMDMxMiwzMC4yMTg3NSBDMTEuNTA5MTE2NywyOS44MzMzMzE0IDExLjk5OTk5NzIsMjkuNjQwNjI1IDEyLjU1NDY4NzUsMjkuNjQwNjI1IEwxMi41NTQ2ODc1LDI5LjY0MDYyNSBaIE0xMi41NzAzMTI1LDMwLjY0NDUzMTIgQzEyLjIzOTU4MTcsMzAuNjQ0NTMxMiAxMS45NjQxOTM4LDMwLjc1OTc2NDUgMTEuNzQ0MTQwNiwzMC45OTAyMzQ0IEMxMS41MjQwODc0LDMxLjIyMDcwNDMgMTEuNDE0MDYyNSwzMS41MTU2MjMyIDExLjQxNDA2MjUsMzEuODc1IEMxMS40MTQwNjI1LDMyLjI0NDc5MzUgMTEuNTIyNzg1NCwzMi41NDQyNjk3IDExLjc0MDIzNDQsMzIuNzczNDM3NSBDMTEuOTU3NjgzNCwzMy4wMDI2MDUzIDEyLjIzMzA3MTMsMzMuMTE3MTg3NSAxMi41NjY0MDYyLDMzLjExNzE4NzUgQzEyLjg5OTc0MTIsMzMuMTE3MTg3NSAxMy4xNzcwODIyLDMzLjAwMTMwMzIgMTMuMzk4NDM3NSwzMi43Njk1MzEyIEMxMy42MTk3OTI4LDMyLjUzNzc1OTMgMTMuNzMwNDY4OCwzMi4yMzk1ODUyIDEzLjczMDQ2ODgsMzEuODc1IEMxMy43MzA0Njg4LDMxLjUxMDQxNDggMTMuNjIxNzQ1OSwzMS4yMTQxOTM4IDEzLjQwNDI5NjksMzAuOTg2MzI4MSBDMTMuMTg2ODQ3OSwzMC43NTg0NjI0IDEyLjkwODg1NTksMzAuNjQ0NTMxMiAxMi41NzAzMTI1LDMwLjY0NDUzMTIgTDEyLjU3MDMxMjUsMzAuNjQ0NTMxMiBaIE0yMS4wOTc2NTYyLDMwLjQ5NjA5MzggQzIxLjI1MzkwNywzMC40OTYwOTM4IDIxLjM4NjcxODIsMzAuNTUwMTI5NyAyMS40OTYwOTM4LDMwLjY1ODIwMzEgQzIxLjYwNTQ2OTMsMzAuNzY2Mjc2NiAyMS42NjAxNTYyLDMwLjg5ODQzNjcgMjEuNjYwMTU2MiwzMS4wNTQ2ODc1IEMyMS42NjAxNTYyLDMxLjIwODMzNDEgMjEuNjA1NDY5MywzMS4zMzk4NDMyIDIxLjQ5NjA5MzgsMzEuNDQ5MjE4OCBDMjEuMzg2NzE4MiwzMS41NTg1OTQzIDIxLjI1MzkwNywzMS42MTMyODEyIDIxLjA5NzY1NjIsMzEuNjEzMjgxMiBDMjAuOTQ0MDA5NiwzMS42MTMyODEyIDIwLjgxMjUwMDUsMzEuNTU4NTk0MyAyMC43MDMxMjUsMzEuNDQ5MjE4OCBDMjAuNTkzNzQ5NSwzMS4zMzk4NDMyIDIwLjUzOTA2MjUsMzEuMjA4MzM0MSAyMC41MzkwNjI1LDMxLjA1NDY4NzUgQzIwLjUzOTA2MjUsMzAuODk4NDM2NyAyMC41OTM3NDk1LDMwLjc2NjI3NjYgMjAuNzAzMTI1LDMwLjY1ODIwMzEgQzIwLjgxMjUwMDUsMzAuNTUwMTI5NyAyMC45NDQwMDk2LDMwLjQ5NjA5MzggMjEuMDk3NjU2MiwzMC40OTYwOTM4IEwyMS4wOTc2NTYyLDMwLjQ5NjA5MzggWiBNMjguMDU4NTkzOCwyOCBDMjguMjQ4Njk4OSwyOCAyOC40MTA4MDY2LDI4LjA2NzcwNzcgMjguNTQ0OTIxOSwyOC4yMDMxMjUgQzI4LjY3OTAzNzEsMjguMzM4NTQyMyAyOC43NDYwOTM4LDI4LjUwMjYwMzIgMjguNzQ2MDkzOCwyOC42OTUzMTI1IEMyOC43NDYwOTM4LDI4Ljg4NTQxNzYgMjguNjc5Njg4MiwyOS4wNDgxNzY0IDI4LjU0Njg3NSwyOS4xODM1OTM4IEMyOC40MTQwNjE4LDI5LjMxOTAxMTEgMjguMjU1MjA5MywyOS4zODY3MTg4IDI4LjA3MDMxMjUsMjkuMzg2NzE4OCBDMjcuODgwMjA3NCwyOS4zODY3MTg4IDI3LjcxODA5OTYsMjkuMzE3NzA5IDI3LjU4Mzk4NDQsMjkuMTc5Njg3NSBDMjcuNDQ5ODY5MSwyOS4wNDE2NjYgMjcuMzgyODEyNSwyOC44NzUwMDEgMjcuMzgyODEyNSwyOC42Nzk2ODc1IEMyNy4zODI4MTI1LDI4LjQ5MjE4NjYgMjcuNDQ4NTY3MSwyOC4zMzIwMzE5IDI3LjU4MDA3ODEsMjguMTk5MjE4OCBDMjcuNzExNTg5MiwyOC4wNjY0MDU2IDI3Ljg3MTA5MjgsMjggMjguMDU4NTkzOCwyOCBMMjguMDU4NTkzOCwyOCBaIE0yNy41MjczNDM4LDI5Ljc1IEwyOC41OTM3NSwyOS43NSBMMjguNTkzNzUsMzQuMTQwNjI1IEMyOC41OTM3NSwzNC41NDQyNzI5IDI4LjU1NDAzNjksMzQuODQ1NzAyMSAyOC40NzQ2MDk0LDM1LjA0NDkyMTkgQzI4LjM5NTE4MTksMzUuMjQ0MTQxNiAyOC4yNjk1MzIxLDM1LjM5NzEzNDkgMjguMDk3NjU2MiwzNS41MDM5MDYyIEMyNy45MjU3ODA0LDM1LjYxMDY3NzYgMjcuNzE4NzUxMiwzNS42NjQwNjI1IDI3LjQ3NjU2MjUsMzUuNjY0MDYyNSBDMjcuMjYzMDE5OCwzNS42NjQwNjI1IDI2Ljk5NzM5NzQsMzUuNjEwNjc3NiAyNi42Nzk2ODc1LDM1LjUwMzkwNjIgTDI2LjY3OTY4NzUsMzQuNjY0MDYyNSBDMjYuODQ2MzU1LDM0Ljc0NDc5MjEgMjYuOTkzNDg4OSwzNC43ODUxNTYyIDI3LjEyMTA5MzgsMzQuNzg1MTU2MiBDMjcuMjU2NTExMSwzNC43ODUxNTYyIDI3LjM1ODA3MjYsMzQuNzQ0NzkyMSAyNy40MjU3ODEyLDM0LjY2NDA2MjUgQzI3LjQ5MzQ4OTksMzQuNTgzMzMyOSAyNy41MjczNDM4LDM0LjQzNDg5NjkgMjcuNTI3MzQzOCwzNC4yMTg3NSBMMjcuNTI3MzQzOCwyOS43NSBaIE0zMi43MzgyODEyLDMwLjM0Mzc1IEwzMi4wNzgxMjUsMzEuMDAzOTA2MiBDMzEuODA5ODk0NSwzMC43MzgyNzk5IDMxLjU2NjQwNzMsMzAuNjA1NDY4OCAzMS4zNDc2NTYyLDMwLjYwNTQ2ODggQzMxLjIyNzg2NCwzMC42MDU0Njg4IDMxLjEzNDExNDksMzAuNjMwODU5MSAzMS4wNjY0MDYyLDMwLjY4MTY0MDYgQzMwLjk5ODY5NzYsMzAuNzMyNDIyMSAzMC45NjQ4NDM4LDMwLjc5NTU3MjUgMzAuOTY0ODQzOCwzMC44NzEwOTM4IEMzMC45NjQ4NDM4LDMwLjkyODM4NTcgMzAuOTg2MzI3OSwzMC45ODExMTk2IDMxLjAyOTI5NjksMzEuMDI5Mjk2OSBDMzEuMDcyMjY1OCwzMS4wNzc0NzQyIDMxLjE3ODM4NDYsMzEuMTQzMjI4NyAzMS4zNDc2NTYyLDMxLjIyNjU2MjUgTDMxLjczODI4MTIsMzEuNDIxODc1IEMzMi4xNDk3NDE2LDMxLjYyNTAwMSAzMi40MzIyOTA5LDMxLjgzMjAzMDIgMzIuNTg1OTM3NSwzMi4wNDI5Njg4IEMzMi43Mzk1ODQxLDMyLjI1MzkwNzMgMzIuODE2NDA2MiwzMi41MDEzMDA3IDMyLjgxNjQwNjIsMzIuNzg1MTU2MiBDMzIuODE2NDA2MiwzMy4xNjI3NjIzIDMyLjY3NzczNTgsMzMuNDc3ODYzMyAzMi40MDAzOTA2LDMzLjczMDQ2ODggQzMyLjEyMzA0NTUsMzMuOTgzMDc0MiAzMS43NTEzMDQ0LDM0LjEwOTM3NSAzMS4yODUxNTYyLDM0LjEwOTM3NSBDMzAuNjY1MzYxNSwzNC4xMDkzNzUgMzAuMTcwNTc0OCwzMy44NjcxODk5IDI5LjgwMDc4MTIsMzMuMzgyODEyNSBMMzAuNDU3MDMxMiwzMi42Njc5Njg4IEMzMC41ODIwMzE5LDMyLjgxMzgwMjggMzAuNzI4NTE0OCwzMi45MzE2NDAyIDMwLjg5NjQ4NDQsMzMuMDIxNDg0NCBDMzEuMDY0NDU0LDMzLjExMTMyODYgMzEuMjEzNTQxLDMzLjE1NjI1IDMxLjM0Mzc1LDMzLjE1NjI1IEMzMS40ODQzNzU3LDMzLjE1NjI1IDMxLjU5NzY1NTgsMzMuMTIyMzk2MiAzMS42ODM1OTM4LDMzLjA1NDY4NzUgQzMxLjc2OTUzMTcsMzIuOTg2OTc4OCAzMS44MTI1LDMyLjkwODg1NDYgMzEuODEyNSwzMi44MjAzMTI1IEMzMS44MTI1LDMyLjY1NjI0OTIgMzEuNjU3NTUzNiwzMi40OTYwOTQ1IDMxLjM0NzY1NjIsMzIuMzM5ODQzOCBMMzAuOTg4MjgxMiwzMi4xNjAxNTYyIEMzMC4zMDA3Nzc4LDMxLjgxMzgwMDQgMjkuOTU3MDMxMiwzMS4zODAyMTA5IDI5Ljk1NzAzMTIsMzAuODU5Mzc1IEMyOS45NTcwMzEyLDMwLjUyMzQzNTggMzAuMDg2NTg3MiwzMC4yMzYzMjkzIDMwLjM0NTcwMzEsMjkuOTk4MDQ2OSBDMzAuNjA0ODE5LDI5Ljc1OTc2NDQgMzAuOTM2MTk1OSwyOS42NDA2MjUgMzEuMzM5ODQzOCwyOS42NDA2MjUgQzMxLjYxNTg4NjgsMjkuNjQwNjI1IDMxLjg3NTY0OTgsMjkuNzAxMTcxMyAzMi4xMTkxNDA2LDI5LjgyMjI2NTYgQzMyLjM2MjYzMTQsMjkuOTQzMzYgMzIuNTY5MDA5NiwzMC4xMTcxODY0IDMyLjczODI4MTIsMzAuMzQzNzUgTDMyLjczODI4MTIsMzAuMzQzNzUgWiIgaWQ9Im1vLcK3LS1qcyIgb3BhY2l0eT0iMC42NTAwMTE2NiIgZmlsbD0iI0YzNDI0NiIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiAgICA8L2c+PC9zdmc+");
}
.controls {
  padding-bottom: 0.3125rem;
  position: relative;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
.controls.is-shown {
  visibility: visible;
  opacity: 1;
}
@media only screen and (max-device-width: 480px) {
  .controls.is-shown {
    -webkit-transition: none;
    transition: none;
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .controls.is-shown {
    -webkit-transition: none;
    transition: none;
  }
}
@media only screen and (max-device-width: 1024px) {
  .controls.is-shown {
    -webkit-transition: none;
    transition: none;
  }
}
.controls__repeat,
.controls__pin,
.controls__sound {
  position: absolute;
  z-index: 1;
  -webkit-transition: all 0.25s linear;
  transition: all 0.25s linear;
}
.controls__repeat:after,
.controls__pin:after,
.controls__sound:after {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  z-index: 1;
  top: -50%;
  left: -50%;
}
.controls__repeat:active,
.controls__pin:active,
.controls__sound:active {
  -webkit-transform: scale(1.4);
          transform: scale(1.4);
  -webkit-transition-duration: 0;
          transition-duration: 0;
}
.controls__repeat {
  left: 0.375rem;
  top: 0.0625rem;
}
.controls__pin {
  left: 1.875rem;
  top: 0;
}
.controls__pin.is-pinned {
  -webkit-transform: rotate(-42deg);
          transform: rotate(-42deg);
}
.controls__pin.is-pinned .icon {
  fill: #fff;
  opacity: 0.75;
}
.controls__sound {
  left: 3.5625rem;
  top: 0;
}
.controls__sound.is-on .icon {
  fill: #fff;
  opacity: 0.75;
}
.controls__timeline {
  padding-left: 5.3125rem;
}
.icon {
  fill: #8c8c8c;
  opacity: 0.5;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -ms-touch-action: none;
      touch-action: none;
}
.icon:after {
  hl: #008000;
}
.icon--repeat {
  width: 1.125rem;
  height: 1.125rem;
}
.icon:hover {
  opacity: 1;
}
.icon:active {
  opacity: 0.5;
}
.motion {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30rem;
  height: 25rem;
  margin-top: -14.285714285714286rem;
  margin-left: -15rem;
}
.motion__controls {
  position: absolute;
  width: 75%;
  left: 9%;
  bottom: 1.25rem;
  z-index: 1;
}
.svg-canvas__svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  opacity: 0.5;
}
input[type=range]:active,
input[type=range]:hover {
  opacity: 1;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #8c8c8c;
}
input[type=range]:focus::-ms-fill-lower {
  background: #8c8c8c;
}
input[type=range]:focus::-ms-fill-upper {
  background: #8c8c8c;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.0625rem;
  cursor: pointer;
  animate: 0.2s;
  background: #8c8c8c;
  border-radius: 1.3px;
}
input[type=range]::-webkit-slider-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #8c8c8c;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 0.0625rem;
  cursor: pointer;
  animate: 0.2s;
  background: #8c8c8c;
  border-radius: 50%;
}
input[type=range]::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #8c8c8c;
  border-width: 0;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 0.0625rem;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #8c8c8c;
  border-radius: 50%;
}
input[type=range]::-ms-fill-upper {
  background: #8c8c8c;
  border-radius: 50%;
  height: 16px;
  width: 16px;
  background: #8c8c8c;
  cursor: pointer;
}