.font-page {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  position: relative;
}

/*
========================
FONT OPENER
========================
*/

.font-opener {
  align-items: center;
  background-color: var(--color-black);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(90vh - var(--header));
  overflow: hidden;
  padding: var(--spacing-xl) 0;
  position: relative;
  width: 100%;
  z-index: 4;

  background-image: url("/assets/images/BG-texture.png");
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAZKADAAQAAAABAAAAZAAAAAAvu95BAAAswElEQVR4AV3dP7R8U9LG8b7d9yZ3LXLkyJGTI0eOnBw5cuTkyJEjJ0eO3NSnlu+ZM1Nr7dl715+nnqq9z+m+Pb9537u333778fPPP7988803l+bPPvvs8scff1yeeuqpy2uvvXYh5p9++uny4Ycfrt+rr7566F944YVDJ44fLPFwjXzMxuuvv76zXL///vv6iyXi4T/99NO7l/Off/5ZHzZc3nnnncvXX3+9vt9+++2Rhx2eWBzkwmPqvPAj+BA22LCqlY1vdjZxcoUpBzHTq0UdBB4557OX64MPPti+wiTlxJed/l4yIIwMP/744+Wjjz7avabQvfjii0fBiiQSIiQOUX4GHXBE4UhCr1B5NNP47bffFpc/H2StHYo1HyIWDxzk4WMmuOAvH3w2vOgNa3oc4dLVuHjjROQTb8/2zDPPrB52mNlwsjbXXPsucjnOdcOUHw9rPl1Kiaz17Pbyyy8/AHvllVcus96gjz/+eGfJ3n///cv333+/Rf/8889LEkHAihD37LPPbizQmqJp/H799de1/fDDD1tAOrh8NFs8sprO/sUXXxyNpuf3xhtvHFiahPMTTzyxPJByiJ9++unuNQLmX3/9dcH5vffe2ybYv/nmm9vEv//++7ix6sUT7ldffbW4dHwcuObpjdrg4mOvpk8++WR7whcGTvLLQ6f54vAQI/a5555bX344iZFHjVfJFKcRZo1mdLNqkFljABN2/nw0QhJxmusJs4clDiFPilgFhy2evz09sYcDs0LgGDD55ZtdTDhyKJKPNWz1lTtObiK/crtIajHDNeNM+KqdnVQrnUFgGfDlMturERaJJ26wDFhx0zdyN+/mR0ECCAciUHMA0wkmCqzRJabniwAbcDY6sRqs+LBhVKA84hQnhzg2eT2h2c0w6DoMPsRcLjjlh0vvSc4Xh7ht8L//4RVKHER85DTEyAu3Q9AvurhWN39rNcaZbzz4w6Drospn9Jp+dCiT7HH47BjCj2N8nOCdp1GHj7XBJobvgK3dGoa9eIMP/CG462nM4xDdfWtYYuCe/dnzgQUDFl37+NDBgIUDLnzt2artzM0aJix+5edrT29UVz2yF5d/HMTEsVgxhprhtmcXZ2Zrf4esG+DU3Dyn6jRHvzfWzDbkVz9J9/SdLl+xHmu3hbAb4cCEBwPWEF4//8GH+ABt7eZ4EvjCGdJrMxN+BrwEt/Dlis8UuRjsYnC0JmzV7Qm2ZuvD3JoOH7nxsTeIPNUWd7M42AZOsEl850CWBxw+7HjZz0Ffrv4jQEGSA6WTUHMijxxAZKw1t4SaRw/PfH5F5QvH69Hgo/hef3IlMGEjCs/QZD54wTHHWzEaRo8fEcNe4fm6SOrEtybjqu67u7vjwHCWUxwscSS88uBKxx+mNRGjj3LBJ/VR7Yb8eiFHee6GyKPEhFGCAIB3oh2ORgFCEAkJJTfz5WctVhJ+8OkUTYd4NzBfOjYCr8LM8jk4OArhy8eBiYkH3tZmPPgRjTDoxJ9j5Gejq0bcrF0Y/WDDI3yY9tVjHxdc9UGeDkC8PT07X9y6jPzo9faeMwcBipEIGXpkSiQp4UP4A0GKf01nUxB7PnSKoddI2BrBXnPN5UWMPz98iNj2bB2wGIceb37sBD855LQWb0/UhXvChw0eLP4EnicHv+J7KvjD6SLyseZvFgvrzMelZ8PfFwkzu/6Z9wnR5JLVIISA0RsCJUDA7FSdMHB+ClJgJOgMe0VKZg9XjGLsYcuPKFJ0ciVwuxQdGJ/w6MrJN0zxrc+Y1mIcevbqaMatevSDb3jyFssHfz6w8AxbL9ShXr2ih0/fkw4ThngD1t2A+7T/nyZEFEhEOgQ6zeOjsZIQTQVOj4A1QvytDRgK4svGjyAizkjo+COqQaSDUhDOGqA5fOzDoNMIOvzgGPzLDR8nIr5Xq32XQ758wpMDhjqIGgx4cfUEJTjoASzrBJ4YsWxwxV05pLCWTMFEEaSnQMKK4gPMY5efhHzoFSKhZnaw9Oz8DHax8lsjhKiGEmuFs+XDX6xG599B8DdwZDfz6VKwaTxuYvAxy6EeeazFWLPJC8ssXn98trDZ41p9asOPTbz8RE6c+RNYcutNmF2yewYCiFGwtSSI0AmURHK3x94gwIkiYZ39rSWKGDyHCwNhQxxcNvtyKU68wadLIRebGL7ZYNLhEDZfjdBEHKzF4MzXnr/hIGDwVbvPAThy0emJPT+CFxwXUm8IHLhywbLnI15e+3phDU8umGax+8riTOEwIiGAjgigR0IQOftqlsRiFKBQ/nT21hpHmmEq0m1EPj+xcsitUNwUYc+fna9cCV70JJvY/ONTY/DCOQz5cHQp5LNuwIwzf/qw4Rji44CrS6gmvvgYMBr2/El+MGDdhsCDH8L82Eci4ocwBP0w58cwIKQfyfwIJ47dGpi9H9xg+NERMQU+Oz/Iwfdjmx8q+WpOP8b5UdCPbAqGxceBszsIcX54c4iaYa8gcZotRg4/0vUDYwdOj5fDYZPbD4dqgoO/pljLx1esBtHjJHd58Dz3hp84PzLiLZ6dOACxb7311uZTC2zzu+++u5z52+Nu7absn/BT4P5pb56G7p/4k2xtcxj7s4S9nyPYJ9n68DfgTNGLMeTXx8w2RR0/YeQv3mAb7usPH3b5yyN/P7+UHw49n2Y6Oc848HGLrzUdnDhng8UGhw3OOZ6fGvnhnF9renHF8q0X8sWTH2x45baH5wZsUsERFAjIHpCE7flHzBqQkS8d4Gw1iB0ufesO0D6C5vLLLV4+eoXAFpd/TahYWHwMOn7W/MLlY1/s2YdvDcZVLuNcxzmO3t7cIcOD0R5OftZy8LHGyRzv/ZblNeBRnqAd04B9ZCfRvnImePd94NP3SqCzJl5PsCbh8erzocffYBsC68+HlHNI7aNL13vYByvxSMPGg/80aAc9XBzETFFr96qVRx1yFiOHWLXCIrjz4QuLDxs8GPaETZxcfM10OMBUp29fXnNEfdZy96VgDfMfdEReAiPdta+OgZsZAXZINZwvMoCA1JCKU0QFK4aIpddQ2OwEBh2Riw/f/BQMQzF8rRUoV375+qxyGPZ8reNOp6np4VQPLDWwETOd3DgZ/GG0Xsd//wMf/dAvPmrDRT759cvMpg5Y5Upnb3QB9kP9yy+/3A9rHyo+5HxIuWU+qID4kPKBaPgwBObDyg1WEJ0PbUl9OPrgE+e/+eMLn15SMXQ+/BHnZ0ZenBwKRFLjxOLDn8ilOT5AfWA7ZHkIzj4c+5Blszf64OcHU60aL4a/Lyt9yGuy0ZcV9eMot1kdvhjIb+CsJjEORd/EmvVTjBwOBxd6NcK1N+Oqp7dffvnloQYhqSkS0lkDA25PEAGiWRqjGUjwA1xRHl+3hS8fds2HBUND+WqOguzlRQwufYdthu32iifx469YBcqlKeKtiYY7XH4OVU5rFwMPNcOyhq0pXYZ6oanwfHOEDZPNgcqNFz0cfdH4XlPi6h8c2A4WT5cAF/6E/mrj0QOYcCaK1CSNFGj0XgRMvB7Y+dHBcRgOyYykOFhmwq8iFCCeH32vEAdIR8SyyYEvfuLZ8em1Bl9cvmywcYLLLq5XEr90chgwYbhM8oiXU255arjY8jogsbDVbS8m/nI3+GSD3aAzbpPgwWMnGAkJnaoEyHbT+EgE0Em6wWxuCHHDPQn07Ah/9913x6Mq7qWXXtrH1SOraDeEn1xuJjxPi6fBbZLTTXSLYbppdNY1D2e4CoaJg7zs9vzNZ6740vPBOyzN1KBqUX894IMTUQteDgyX9i6AJ1BN9UkevTWzazocsZ5KNj23VvdtSDxI1qNKqWFmDYis5rkRvWvdOusKU7DmIOPzRBPcKsVJhowYBWiwP5Zgs/H1h5K9BiDslcIPWZgO3ueMpvXHp+bBxZUdnwQfggu8Do0fzgQ3+PbqxwmWpsrjSYLjkOUSq4Hqqg/i9Ukeh8TfxZXTmq+aDdhq5GdN1KZ+dcPef5cluaG4boUTpBPQLIBd45G1duIAe5w1vVMPCwY9MmZDc+3FKypfs738cLwSI6wAdnoNig9+cDwl9NZmjemplw8ukZeveDdZLTDwOovcdLio4cxJDnsj0QNc08lP4imnA2L3Orcn+OBgfw+EuJGKcCjIIc9RA8ykZkhEh2RfMdmRJPyMCkSIaE4YchnloMelLwNIi2c3hyUHX0JnjYfG4oVPfOWzVpNiu1gwrMUaXS456fHCWfNwMsORh62cfNnZ+DgM2LjUC/4djHi+8sAQLw9ftbg0twl+8Gh57DyS861rZ68LgRJxBoa4g+JPgNOxW3tM+YXVqwrun3/+uY2BVz5YYpATL64bbW34PPBqUWyXxCtLMWK8Ctis4RrwcOcDw+vB2mvG64IOhmaIxVkcfGuxPss0W33ivcbV0ZPmNSdeDB+CC9FgNofhm5ka5Uz02GuRP94w6vvdEPLTwAYjAgwRgPZunBNWJPKJGweo2+QvVaLhiuLb7YEj8flGhyMfG4EptmbLadAZ1sSarxwGrg5SbrE1o1j4eLK5vexqEuPp0WS2Xtl4y4EbPRwYchIHECd18+NDHw/+cOjlqh96Ri9XvS0/v9uc1P5TUrfQqXsykHZjnKCT7cPMB5+TVbhbgwjhSySj7xZ6QnzYIacAWBqDuFekW0eHoPx8xMNzq+SVS16+dHJ0GGx84fOFKbc6NABXdjnOh4GryyEeZnWq2xqGQyPl0CzcfMDjqYmw+yWXTQ5+YvHxRNLL3xcZPnKoWW+IPvYl5jZNe/B4eoQVwgCEKNQJ11Q2ZDRaEs2JqOIBawQsM7IwFQ3Hk+IRtqazJr4qa7hGwAnb4eFAx58PvA7YIYpxYBoFX+7yKVwj+ItzEeyJHBpqaF6z2jXUtz44YtUit3o0VJ38HapYoqZi2HDmS2+ITXDu8sL3WtYLMfdIOi2Pjwa4JQpDQsKaDIwfcI8bG197GA7K2o3y2BJ4BIZbzY+PwR9hOEjJDxcmX02RDx4c/mzhm8sJz42VJ/4Khm+vFv7ylO/sX43wrAkO1vFc5b96NtLTiifu6pYjvvUDByKOjugxLniRarsCi4iGIW9PX4ECJCuBvTV/PtYGH4NeIknoJTefiSqGLhGDoNw4yB+f+Rl7bcWLJfYOjp848XREwwl9UiM7THl8qyP8jOphyz9cnLo88qhVfjEO39uC/hwLk09Y9nzFwDLoOsi7MfrtfpUVY48EkaTGAdZkNoButWYQTRfPxp+vRHRmvpJqRjdFY+GxNxRN4Ifn9sGELU8Y8AgbTHh8NIQfO73ZAZWjvOHIwyc/NdXAMz81wecHi9RcHAz841tOeB0eXLF8iTUecM37jxyASEbRugIl7EZ264ApuMSA6TTCECORpsLjyx6OXNYaoeD85ESergMVS2Baw8+uCLH2RA7xfONPh7fPP/FwXQ5rcTCscQlDw+HWdFzhhcuWr1mzayyf+LCJLV97OdURJj1MPPdfLgoCCChiSCmG0AtQLKFHAjA/BRGxNSki6cRah8Uujr/cbIaGEUXQxyM/NnocFE9ws1cgvy4FjglsfmLZz4KTvN4GMPCi4+eS2sO3NpcPBjw86IrhT3Cn43Pe8xUDL7289lckANRIwcjbc0KAACZuPDDv3k6ZvhstvjU9UjXC3kHAiqiDkgMWHvAN5OisK8hnSX5wcMcFV7EVCJufPZ6eZLXA6qDlFIPr+aKpXayZj1msHHFmVxcdO37VYE/s8etC8cGVWHeA9p4Me763+Tr4EKCvkQgWqGhyJuzro6+MimG3lxgBXzP7ymcviSZ4XSjC12U+fS32dddawb5i+upq9vWxd64ccvnq7Sup3H2Vhc/ua6RGyC2vwnxNFWffTM9fnfQwa768aoEBz98Q+D3//PObF285qh1nWGry1dfo7wr9tO+iWOMgF2x7PnLhZK9H5DZJHpAD7jAUgrBg34udnqYRgQYybAgirjEIi2G3lshhwCSayJePm0vPBzFkFOPnlfCQpdco6xqFq+/s8Ay5YcbZ5aDvksjhIMVrCt44uu0OAFdN4k/vaXIQeMFVuwuqVlh4W8OqLpz0TV7r8sFzgGxqhqtOPbWHjT/hK9/+V7gISSQAmMQOSGLEgCKlaL7sAPgDVpi1ovn7Q02hMOzFIgonOwzN1iC5zQqiryi+CpALcX5Iy1OcXOkdFI6aJbchLt6aXp1saoXtDdDToTlyuvn0mgZPHH+XrIsFGw5OcPCydgDiNB6OtZriCQe2SyFGH/TGfv8XVB6tnAEyaDSpmQ4HCGCN4kP4051vjQJ6pNns86+x7GLlYXMQ9vRiFGrGrRzy8afHgU0cjtb0OMKQx+eFuuJWDJs4kq+936U8IWFVZ73g40DorfnhGQ4e8jsIgjffclh3yWFWK95xB7r/ZmjA9t8/2Rv+TRFd9iFw/PuofKbg9WObRMe/g6KnM4bUDjF87Nmtm8sxB/M/vjhMXYtjLkc6WFPIcsS1fOL4wuUDl53efi7IztZGfMNnj289kDMsOe3ZrKslXvXDzA4fHlw+dPGwrn72438fMpvx/a+4RecTdKJO2I1zk7zf3exuiMgheABMkvWfxKuDFcYQXZ34IbRr+cW7oX2gT6HHTeTHLj8eRA748Pga2fgRcUY3m76c3diw1SJHec385TGru7cEPP54s9mbiTVe4vjAV7/aPD10aidy2Ie3P50I1iyDAOqxUyygigbkMBChUxRfAw69w0RccTCRsReLwNyYoyne6zCM8+Ne08zywOJDYMCUj5RHQ4pTgyLF8Dfzx43gxVcMPbsYejzMcOUhOBdL12HgxgaHXo31RW10sMTiIycdn/oUHvttiOx/QdUHJXI+oHwQIkYkV5QPHkA+hPhJ5MOc3QeVOB9iPhR9SCLpQ9fXWOs+9MRJbu8A5QkHtli/QFvz9WEPW368Ohw+cOmMGsy/b09ywBaLoyaoofw1pho0VCzBS7wvMnLRy+FDms2HN9Eb2D7scZNfnF7Abe6bGH91uQT8fUEx43Kb/3jQNA0GCqjmSaYQJ8iuUQaCvtF4UjQKGL2DkNTe7aCThGgu6bAQZRcvp0I1i98ZF1kCFxZszRDnqYShOIKXg9E4WF0udrFy5CO/OunViIMGWcOW1+GY9YVerJmIk8PBttZ4lw8WfLN6xMGBDwuf6uJHbzZu47z/UM7pdgM0G9nAAHTqyCJFpzmK9Fu/5JIhpxHmitQkjetWuW18+SFh7QAdhLVCxXqFOAh7OdnpFejWKx4vdsKnovnAV0MXrMN0Q4mnk3QA1j1NmgtL49jV2QHbi1UjvuqqXnnpDHWSemetz3pRb8ohL4z9UO/96EkAbi+5QnyQaRpBCoDDsNYwolBNAejG8O/mKB552D6LxPf5ZC2HD/Fi7OXGgU4euDUkDvDoCR7yi6uGNcx/uOW4OEyxRA7SXnyHhBMMufF0UYhc/OCxWatLXoOvWDqCiyG3us0kH35yljd8wPs1bBIdX+WmGftVcQivbZz3K94kWJ8BO77KsdHPoezXTjNMOvGtzXDZ5RI3/I6v2uUUxx7mEN69uRxw+cPkS2+PVzr4bOe8MPiFyW7t67B1dYaNw9nGVw4zG/7lkAcvNsMeHv+w6djwFX/uLx/66zgcr54BuAzAcdvHafduDH230uwpoXO7J9GuPU1iujHwrNnlcduGxN5QN2pILWY3ZwhZ7lNqZnezPLVuFjw+sNxSOj7EulsqR1+d5cdVbDefv6ckmxmemARnw+2GZ22WH46BRz0rBz99iQ8fIrZ69Ei8WHq8q+c2TvsZ4v0rGHAfON6VHL0PAQj2/lOMbxreg3zEtYfjnWl4n8LqWwYiXh2IiDP3RcCazQGIg83mEBUHRzw9bJ8NPvPYreGxyY8n3nh5N4vHm686YKlTPg1WH6z+DUA18xGrXthw+eHhoGD7fPSjqGbDsvbfkfclxOHIZ1YjLJ/R9viJO1+4K4Ub4nZ0qppC57Tp7RFA9KxHjNAZEiAtGZs9kuLsFchezny7ffLzFWNtFqMQWNbEmk5ODW7AUzDBGYYhH39rh0Jgy9tFE+um8jNXZzzCkhsGPz0Ji7/c8Pzkz27Qi7U2y3kWMfOKXD7mewksiEYiVqB9j2yHVGP5K5QPkVAskcQacWsF9qHKT85yIGhEvkOAw0deOcpLB9utEoc7nYPEhzg4MR1cB4mLGDb+5hopDw5w4VeLmR9eYcOg1/zi05mJ3HzYYeNPcK3f1VydfG/zHw8ce1wZFdZXM0Qk7ub21VICrxSPcI8cHyS8vrx27D1hNU/CXhteMRplhsPXK8AjLxYPh+hvpH7FtebHn91rxPD1UtG44UPnNVFz8/Mq8d9veIV61eDZqwUmfBgaJUZ+r0Mz7nrBh6iDr9enXnjt4cTPAfp6S/RDL9XZhVCD3DjjS/TC+jYJ9n+OgFDvYgHWDgKQgp04EkgBplMMcSus6Xv/i0OEIMWmAGTLpXA2g9gjqZEuhVFjYOFljwtumkpvaAZ7H5Dw2DUMPkxNwN9Tz7+GsPcU4a8WXPnLxw83vOMGP96wEjp/H6lTjKEX9K0dHnyXhr665Nv/PkSAApFn1DzB9oZTB+ImsANz85EVqxiHhZhTrgBrdhhEnIa4oXTsYvhoaiTtNV1eOsXJ79Y5fLH2OGoeTIenBs0gOLEp2AHg6oBguOX2GiAPHHX15UPj6fXBsBfjSZFXfeYOQt640OFn5uPpVpvm46geerwcvji+apV//5GDBBSMiudMZ+asCQ7Ah1W/eLopRDMQMpAXR8Rqij0MYi1HN1QuhSPqvVo+azaY1t1eHDQuTvzF88PNhekVqR5rvrCIGZ7LA4c/Tnxh4IZLuLAJvdoIm31STe31Ax5sdcLDIewuNWx8DJj8cLoHEGlGUgMixBkhhxF5h6Q44nAkIkhEJmz6CtIMcTUXUXtkECNy0Cu2BrEb8prLx8+oEWrRXCInX3iJ/GexlzeuemCtJrz0oP6UAy86e/ji5QwjzvLQ4wo3LHq+9Vm8fHRXjgwGcshLCEhSYALoKtCeuJUGqVCNJt7lYkhNMUvK17pC4cpv70D5aDw/xRl4mMXFb8HnP+IqrgawqQVXnFwmDTYcoL188pjFEvZqLjd++kT4dwHoNVlODZVLToMNDr5qYzPDJPRyyUunJlh34+gngN2YNYGj+fwByWafIEX4ISmmUwaMEBISIYJcTw/CNRiOeAKDjwaJY1OsGZammOVhV4hY+PMTx/FKdUkcgrgOpUaIJ2FrSI3lY8DqcvCHZW+w46ShRH5r9bCz4VOj5WGjg0Xf2t4IU137vw8BmjJwyYBrkOIjA8Ah9CQomI2waZqESPAjSMCqcLM9ffEdCiw6tnDtK5ifIs3p5SXy5Sc2Lmz4qg2uWBzKFTczbAJT3XLwPdcQP/7WcPTPOi4uJZHLGi6b3vB3ue0dgrVYGFegimDsMABwyJkNICD+ANgcFn3JkZYwovxKBhsmX35mhRL4FdXhmw02eMhaV7S8eMMi+MCEcy5efpLOGgY/0qtLLnj5y4kf3mxi1IsDv2qGwy+e4nByEPzEweCvNy5Gdckvrpnv8X/AjHPFRVYiwIpJOmHJJELATTT40+cjRiMRCAse/J4yJOiIWHqYZnxgeZXhkC8dgaMgsxz09nKJxY9N04mmwMZJTodoX+M0XC66MDSQ3sxfbH3qEsCq6XgTOr5EXrz4w6pONrgd2h7OFLo/SQ+R4+fgAdr1JN6fi6fZx78uGbD9SZnPJNqfoAdof06GZfjJGp4hlo5/OHDty12+cIrhF4b1FHn8xM2XX3rrqW9z09njJyau9viLhcvPmh4Xsz29vVksXDhme7FqbG0vjo84a7NcdEZ5YeRDj2dcYV4n6Z6QUxpClzHurXJDOnU3pg9KN47fJN1bMKB7m3o9ual8xBt83VD+xC2mt3c7zDiQKWz34rvJ9Na4dPtgiDGmKVxWYPEzxKgJ1jRjubLbk+oTT49/9YtXB3wc1Uimkbt2y3uC6QiMnlBx9p4IUo/gy6dOPrjIQ6yXm9N1Qp1gs9NzYmyt2Vqb3RCnDcN6Eq7/JNvbZM9uZjeG6OKWZ7gcNxUmX3jiDFg4WJ+fPDjlYYNtz4etcc4dBz7W8oVjlsdMX03WcbCWy2zAwF8t/I308sYbpn06PnzpG9n2a+8o98Sc8CQ8bmSnNwkd4vG1svUQXb15AA+MIbq3k9FNZXcj6Q3iNrh9corl5ykcsuvPjw99T1Q3Hl56WGKm+J3dbnZ7GGpTE5HH3u0WT8pjnU6++MEj9nAJDFzse1rLA0+/5IcTFzMe4thxgVlt7HT7tZeBeLV4HBGTIBIdFJ+KAuTAJKaLoMd0Tn8x+gBjD0MORYYNU6zhgJDmX6PwkIM/neaTimXn30Hws1cgodcA+cVa1+S+UckNLxGrB/zkxgk3v2WV36Fa40TEwJF7nsAj1p7gBVNP9C0ObGqo53ceHU4VJjnSAAQiCpReAfSKI0iIY0PwfKDi4FSQGfma4OB6AsXLUTPN/ImY1hpwbog4+Q1YZqLY1gol8okVgzdca3ZrNjFx4aMvBDc+YeGnPjn5ETpDPL5qt9YrcfVUDlz0AU+HCMPgexusB/89hAR+ffR/UcAvksD7hdSajwDE6CU1A4+sQ/FLJvD+CYw9yd+vsX799EusX17NBEa/9iLtvxfxq69faO1x0BhFyCl3es10e/16/OSTTy6HflX13/PAUbhZc/rvNOzFwMMTN3a4/o/V4AzbLLf68MGVXj/k0Xg1mcXWIzNcQ53seuxXXbXL620CCxc1HU8Ig6I7USSsiQZXvD1yBvLe+2LtSTcHeToYboe5HPIQOegQk4PegEvkVATCcInGhmdm4xPvYtxevuJg8pMv7JrBRwy7Btrnyx8vGOXFgZ6Ioyf1Qy5c7PHCUS554dPT5VfdZuPau0ywBB6lmmCvYQhG2podqYpCiI5oxDleHIJwka8h9gjAONuQhd3jrABxZtheiziEU157a4MfXFINcpEaaC2PxmhUTYNtn4jnJ94s3loeazqc7V1CsxgYZj4428tFvArPfjDKefyWFQHJNAMxjpqpwDMJvsDPTdEwoBFHssOG4UOxpybC+cAqjs2NdEhme3nOfwdVXLdNM3HMP27y8VVLmBrBzj87fLr4V5/cXYg48iEwYXX4fEk9cRB0fMT0QQ9HrN6ov8uKn9j9PzUOiEGwxhFFCgBGzxlIDXJYHYI1Pd+IwICp0d0STa1xGg4vggjxhRNemBonv3xmeIan10wqyBp3dbDBh2eOO73cfNSGJ1xrzSLnWsUSOEb9qKF0CY7q8BSw497h2cttJvUPnhg17CvLwgkSxRgVzlnzkhppj7SEwPghhnwF8OEPi44fn/zPfg6KHzs+8OJRQQrQPHbNlZ8PX4WaDVgawu6SiKOD0yXBiy9bteKFEz1fo/hschOzga8ewDHo5IVJXBoH0EXnI8ZQg3zsYrYfk2j/uhzH/SvUPCT2r88JOn7HsTaG7P6Vyc+gM0/i/atTbJiTaLHFTHHrZ82Hf1hDbPPBEcPGB7a9mQ99ec7YU/fiy1GMePtyhOGvdLHwxMUN53zP3PKNf7ngwJRHXHzD52ctrjx85KWTg95Mr3Yc9gnpNEdx3Bin5VZNwN6ACd4TdNLdiAE/bj+729HNE+/UyRR1GfJ7i+HJw94fiexDascUt3FDcLnY84XtaSCwup048p0i9/Z7Ugw88CT2MOTw5HhKiD0+YvngBff81K/j/IccRO5w+MsDg10/vJZh4W3Nn40Pe3t2Qz56Qx9u8z9FfgDge7Tvwr4vSySphtr7fuxfUiCusOy+k4sVB5yPvz+sewTF0PcvPRTVv0bRHGSR1CR/A/lXGg7d3yFyIwrP3Hd63/3h4iE/vb83cIZXfrzY5BMvDmfN8XcL/16BePHVB779kyFY/sUIm399Ysa3vC4JnPoHR780198cOKoJFyJeDHxx8A087O/dhpQC5jFbIwfEDHYNMDsQtg7FCWug2ZPWbVc0XwN58Qrh082Vjx4R4oDkQ5je7XfLxIiNk1sJ16GLZceHjp989kYC0x4+sXZ4eMMpLyyYcstXfQ6QjyFOnWz2+gIPDj2hT9gJHzXqjR7wkQdfWPhzOt75k2jfi3TefxNwvP+mQcf7tjU730l4vE+zTVGHLR0//sNt35lmezjGEN0hd3qcrHsfw+UL03oOYPPzo+NH35gGbTybfPR48Dezw6PnIxdMdjqciuFLHyYbjAY/dhjnNVw54FanGPH82e3F7YFQMAig5NisCCCRFpgvmxizoRlsyBhwYBvWdPzPTYBnXwFme3hi2A35/19vz4cvn/zNcrLjI1Y91WHNZs9eLJxqiydfdv7n/liLr+Y4nuuFZc/HqA/lbS827IsFBaNmIGXQB9bh2AdWsRGRvKR86A1+YWtUcen5iCsnfSOMmgK3/OnwxBt2tcATW0Oss+NSjbC6CPDYxPDHAR4f+rhUi335ukR01mZ4sM4zDmyw41ZP+OG9/xtDPxz64JkE++Fj9qHjneZd1w9jPhS9S73zrA0fxD7I6di8d31w9cHmveqDVA4/qNFPUdOTy/HPLL0/2af4je2zgi+9eGvDl4M+rKf4fW9778OYItcHNs5ETHa8cBYP179fViMdbvKrnQ1vdh/o4vlM87ZOfvozjd1vWT7sfXHw2SYHfPZp/mL0IQ7PZ4bPETn8EAoLdzx9MblNEx84zgltMsSA+kWy5pt9Y+iDhy8AZGuCGREJ+WkIoma+vmlprD27YuCKkZ+P5rDHQcPp4bDxFQtL43yzwVW8YvBh46eBLkpx5dEogq81fFgwXD56MbiZCd7y9OHbN8YOhp+8OOiT3HCJGNgOmB+OfKzFu3zW/Bz4bRLt/xwBYSfajIDmIOuEkZKE3mHZ++f9hA9fRMRrGl+J+SlcjAYTdgQRag9Dg33dJTXXuhvuyULebeRrrRF8XQQc5GeTXyNcHkKPO3GTcdEEMz4wayRfTTe8OQisMHCv4Wxw5WeHpWac7fWAbwcA0yHg2ptADm8afK4AOWe07+QU45CAa1hPkUA+bhG7W2VGSoFuP5+w7BVBhzAcw0HDhX/O5Q/GJF4dojkd3vLBsHZgcZAPL7deXodgzx4XvMKD6es7X5heK+qzdnPFdIGqzx5mdfEhuNDhoy9qO+vZxRH54eHJ/x4JQBJzBIAc4kSxALMLkgwgHeEvrptnPR9Q+zcE0jDMFRBxRGBEDg6dvz3wao9ssTjKY8bLDJ8P/5rHBpcvPoQvbAeuBj5hsMXLBZGvGLO6+ZhJl4afuPDEEo2W26UT00Xhl48Zd75w4O9PJzVYQYoQzAmYIHaNUiyfACMIjA4xjdEAhSsWDoHFv+bI0aHSI0bgs9UQPnLzcXhssPgR3Az+sM3ykmbYeFV4TYJJzOXTRE8HXY1Uiz0e8VcrvzDh4EHw1A/5u1j07B0o/uXkF4d7C0LJAVnJAHYA7IgAQ0qT7I2IilW0htHzQaDDM/PRHLPREwafXYEK6HUBgx4eiaumkQ5bTn7dSHHywFdX8WLgw6FXD8640IlTsxrTVR+81mJIjTSrtebLJzd++mkutsskxkHLJ7Z5//sQyYFIpKga5RQBKRYhgjQwSTpxPjVPjDXpgOATOdj4y6GRMGB34/nyga9hiPK3p9csMeci6WHUXDUU73KVXz6HDVNNGsI3H/lwlI+e4FW9cMTxjzudPV5dAHFw+Iq3ri42wlcdcODzobtyRF6gEw6IkU1AYHwkNzQhsBqqEMKvNWxDDJ1ZQ2ASOsSQR4x0Q63FEv7s3U5c7eXKRxwce80N1yy+xqhNXJdPTPjFuMl0jXia6aoFN3nt9UR9PQV4yBkvvnzE46cG+fgT/vv/g8qC0VdOwP71ha955+/MCtB4dv6+yvl7wVc8f+T4autrnr2vdBLxM8QgweZrqq95viqWx1pz2cT2NbHLoUh4/d2AGx+N9LVSXntrnOjxNXyVVTwfcXKpy9dPh6tBZoeEJw5i6P1dYe/vGXtfjWGoCU91y1dP5IWtVv2EgzuRX1x9ku/895YnVw/2f4WrGA4ICOy/p5CIDZBmVowTB4CQphGJEPE3gAI6PEXQE02ll8vhe8I0Q6zc8OXnpxHs8miCAZu9JsvdH410MOHzMTTI30oVLo/GwuGLR/y6yeqVi2iQumE5AE+UPLjpiRh4cHH1Ndltl9dl07+eHr4wSH3AncgjBvaVo0BAXiVuk5uliQa7AIMfAv39IQa4ptV0BHrvi1WEOEOz+Lk1/MTKJacY/kRx8vDz9VmsHBqoEWHw5QeDT+99ej58u6Fy8YGhFnZr8Wz8DD5nTJzwIy6PmtVBXz31Bp66CJ2aNJofbnDlNUg6PvLiu3+pu+lup1cJJaPTrFA3BAE3w3Br3CxAkoh1unw8HWax/Oh7kuDAtner7DVfQ9xat9MjL8atVhRO/BTqULwK7Hta8IHpkrjZGiYufa8bOTQCtrX8eGgikdcaNv58vALjCRMnTebDX91y8/EKFONQe8Lw5Uv0VX36xt9aHns+Dg3mbTYPFhyAAZWoxiKCqCFIQXzprenNwBXsgBBCkJ9D868A2RXolpnD4Q/DI46YRtZsewX72cUFgce3G9ZnnnyKVHR85HBI4g3CpkYXBYY6XRzi9UHPh7+nQi9g8sUJN72SK+FPh4P+4AwT1y6ZPSw9NbtcHYYYYi//bQIfPDpulsI1StPoEHArJAVU0zUHiRoGFGk3gl5BCMGC61ZrECwNqbnW/BQtl0MUL867X8OsK1iBDoG+RshbcWZPHDwilq8nAQ85arDmaIB4WHzxUif+sKzlTtzmmisOf/hdPrXIL1a9ctUPmOLNYl0W/fIblnV17ysLEGAzQZyTQtxwejcAaYdlD8BJS4KAQ9EwRAxkHRgRe87hqRAj1hBn1iBrceLd2r6t0BkuClEsTINeTvEOHX86TzFRuFcNTM3gg696xKld8/njClvjHBQ/WPjBwZs/LF9+Ojy5+ZkNfuee6ZdeErh6UE9gyU/2/8SfoiPtBjhlwgkw0XzJAZkJYOLxZleIeEWLRUAjYMvRzykRg61g/poB16Bz8PzKLw+fDlNOvmIVBF8MvRkfvjjS5Vduen7nvA67fGJhqIeoxxcMMyy1wvXk6Vc9MYvrzSAWhprqTU8xX2t6MbDvNSzHimQkHOjsBRuIICuGnSjSE4WoUSJFW7Ob5VKwwhxSDRejAHsNkjORix1WzbAnFYGTQxF7Pgw+fOGJjT/dmbuDqMF82BywGuU18OZDrGt4XGoqG/96aI8Xu/rocZSzWDNstv8ASYFxYo+98Z8AAAAASUVORK5CYII=");
  background-blend-mode: overlay;
}

.font-opener::after {
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));
  bottom: 0;
  content: "";
  height: 50%;
  left: 0;
  mix-blend-mode: multiply;
  position: absolute;
  width: 100%;
  z-index: -1;
}

.font-opener .font-name,
.font-opener .font-description {
  width: 92%;
}

.font-opener .font-name {
  align-items: center;
  display: flex;
  /* flex-grow: 1; */
  justify-content: center;
  line-height: 1;
  /* margin: 0 auto; */
  max-width: var(--width-l);
  /* min-height: 40vh; */
  text-align: center;
}

.font-opener .font-name .fit {
  font-size: 10vw;
}

.font-opener .font-description {
  margin: 0 auto;
  margin-top: var(--spacing-l);
  max-width: var(--width-s);
}

/*
========================
SUBNAV
========================
*/

.subnav {
  background: var(--color-white);
  /* border-bottom: 1px solid var(--color-dim); */
  display: flex;
  font-size: var(--font-small);
  justify-content: center;
  position: sticky;
  position: -webkit-sticky;
  top: calc(var(--header) - 1px);
  width: 100%;
  z-index: 3;
}

.subnav-inner {
  align-items: center;
  /* border-bottom: 1px solid var(--color-dim); */
  display: flex;
  justify-content: space-between;
  max-width: var(--width-l);
  /* min-height: 53px; */
  width: 92%;
}

.subnav-group {
  display: flex;
}

.subnav-item {
  margin-right: var(--spacing-m);
  padding: 1em 0;
}

.subnav a {
  border: 0;
}

.cta {
  align-self: center;
  bottom: var(--spacing-m);
  /* height: 0; */
  order: 1;
  position: sticky;
  position: -webkit-sticky;
  text-align: right;
  /* top: var(--header); */
  width: max-content;
  z-index: 3;
}

button.buy-button {
  align-self: flex-end;
  background: var(--color-red);
  border: 0;
  /* border-radius: 1px; */
  color: white;
  font-size: inherit;
  font-weight: 700;
  padding: 1em;
  position: relative;
  /* margin-bottom: var(--spacing-m); */
}

button.buy-button::after {
  content: "\2192";
  opacity: 0;
  position: absolute;
  right: 0.5em;

  -webkit-transition: all .1s ease-in-out;
  -moz-transition: all .1s ease-in-out;
  -ms-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
}

button.buy-button:hover {
  background: var(--color-black);
  border: initial;
  color: var(--color-white);
  /* background: var(--color-black); */
  padding-right: 3em;
}

button.buy-button:hover::after {
  opacity: 1;
  right: 1em;
}

/*
========================
Styles Overview
========================
*/

.family-styles-container {
  background-color: var(--color-light);
  display: flex;
  justify-content: center;
  margin: 0;
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-l) 0;
  width: 100%;
}

.family-styles-inner {
  align-items: baseline;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-column-gap: var(--spacing-l);
  max-width: var(--width-l);
  width: 92%;
}

.family-styles-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: var(--spacing-l);
}

.family-styles-container .subfamily-container {
  /* border-bottom: 1px solid var(--color-dim); */
  margin-bottom: var(--spacing-s);
  padding-bottom: var(--spacing-s);
  width: 100%;
}

.styles-list {
  line-height: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.styles-list:not(.fit) {
  font-size: 2vw;
}

.subfamily-title {
  border-bottom: 1px solid var(--color-dim);
  font-size: var(--font-small);
  margin-bottom: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
}

.family-styles-container .subfamily-container {
  width: 100%;
}

.styles-list {
  display: flex;
  flex-direction: column;
}

#montecatini-pro .styles-list {
  font-size: 2vw;
}

#montecatini-pro .styles-list .style-item {
  font-family: inherit;
}

#montecatini-pro .top .styles-list {
  font-size: 1rem;
}

/*
========================
Testers
========================
*/

#test {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: var(--width-l);
}

#test .subfamily-container {
  width: 100%;
}

.fonts-tester,
#test .col-container {
  border-bottom: 1px solid var(--color-dim);
}

.fonts-tester {
  padding: var(--spacing-s) 0;
}

#test .font-tester:last-child,
#test .col-container .fonts-tester,
#test .subfamily-container:last-child > div:last-child {
  border-bottom: 0;
}

.tester-controls-container {
  color: var(--color-mid);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-small);
  justify-content: space-between;
  padding-bottom: var(--spacing-s);
  position: relative;
  z-index: 2;
}

.tester-controls {
  align-items: center;
  display: inline-flex;
  opacity: 0;

  -webkit-transition: all .1s ease-in-out;
  -moz-transition: all .1s ease-in-out;
  -ms-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
}

.tester-controls:not(:last-child),
.tester-controls > div:not(:last-child) {
  margin-right: var(--spacing-m);
}

.fonts-tester:hover .tester-controls,
.fonts-tester:active .tester-controls {
  color: var(--color-black);
  opacity: 1;
}

.tester-controls .icon {
  font-size: initial;
}

/* Font styles */

.tester-controls.styles {
  display: flex;
}

.tester-controls.styles,
.tester-controls.styles * {
  opacity: 1;
}

.tester-controls.styles select {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  text-rendering: inherit;
  margin: 0px;
  padding: 0px;
  cursor: pointer;

  margin-right: var(--spacing);
  margin-left: -1.5em;
  padding-left: 1.5em;
}

.icon {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  margin-right: 0.5em;
  vertical-align: middle;
}

.icon svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* Font size slider */

.tester-controls.font-size {
  order: 1;
  margin-right: 0;
  position: relative;
}

.tester-controls.font-size input#font-size-slider {
  background: transparent;
  position: relative;
  width: var(--slider-width);
}

.tester-controls.font-size #font-size_display {
  margin-left: 1em;
  width: 5ch;
}

input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  animate: 0.2s;
  background:var(--color-black);
  cursor: pointer;
  height: 1px;
  width: 100%;
}

input[type=range]::-webkit-slider-thumb {
  background: var(--color-black);
  border: 1px solid var(--color-black);
  border-radius: 50%;
  cursor: pointer;
  height: 12px;
  margin-top: -5px;
  width: 12px;
  -webkit-appearance: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #cccccc;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  animate: 0.2s;
  background: #cccccc;
}

input[type=range]::-moz-range-thumb {
  border: 0px solid #000000;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: #000;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5px;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  animate: 0.2s;
  background: #cccccc;
}

input[type=range]::-ms-fill-lower {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}

input[type=range]::-ms-fill-upper {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}

input[type=range]::-ms-thumb {
  border: 0px solid #000000;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: #000;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5px;
}

input[type=range]:focus::-ms-fill-lower {
  background: #cccccc;
}

input[type=range]:focus::-ms-fill-upper {
  background: #cccccc;
}

/* Opentype features */

.tester-opentype-container {
  background: var(--color-light);
  border-radius: 4px;
  color: var(--color-black);
  display: flex;
  flex-wrap: wrap;
  height: 0px;
  opacity: 0;
  order: 1;
  overflow: hidden;
  width: 100%;
  z-index: 3;

  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.tester-opentype-container.open {
  margin-top: var(--spacing-s);
  opacity: 1;
}

.tester-opentype-container ul,
.tester-opentype-container li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tester-opentype-container .opentype-subsection {
  padding: var(--spacing-s);
}

.tester-opentype-container h3 {
  color: var(--color-mid);
  font-weight: 400;
  margin-bottom: 0.5em;
}

.tester-opentype-container ul {
  column-count: 2;
  column-gap: var(--spacing-m);
}

.tester-opentype-container li:not(:last-child) {
  margin-bottom: 0.25em;
}

.tester-opentype-container li .feature-button {
  align-items: baseline;
  display: flex;
}

input.otFeature {
  border: 1px solid var(--color-mid);
  border-radius: 1em;
  height: 0.75em;
  width: 0.75em;
  margin: 0;
  margin-right: 0.5em;
  -webkit-appearance: none;
  vertical-align: middle;
}

.tester-opentype-container li label:hover {
  cursor: pointer;
}

.tester-opentype-container li label:hover input.otFeature,
.tester-opentype-container li label input.otFeature:focus,
.tester-opentype-container li label input.otFeature:checked:focus {
  background: var(--color-mid);
  outline: none;
}

.tester-opentype-container li label input.otFeature:checked {
  background: var(--color-black);
  border: 1px solid var(--color-black);
}

/* Actual testing area */

.test-area {
  /* align-items: center;
  display: flex;
  justify-content: center; */
  font-size: var(--font-size);
  margin-bottom: var(--spacing-s);

  -o-font-feature-settings: var(--features);
  -moz-font-feature-settings: var(--features);
  -webkit-font-feature-settings: var(--features);
  font-feature-settings: var(--features);
}

.test-area .tester-input:active,
.test-area .tester-input:focus {
  outline: none;
}

/*
========================
Features
========================
*/

#features,
.features-inner {
  align-items: center;
  background: var(--color-light);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: var(--spacing-xl);
  padding: var(--spacing-xl) 0;
  width: 100%;
}

.features-inner {
  margin: 0;
  max-width: var(--width-l);
  padding: 0;
  width: 92%;
}

/* .feature-group:first-child {
  padding-top: 0;
} */

.feature-intro,
.feature-group {
  --toggle-width: 1.8rem;

  border-bottom: 1px solid var(--color-dim);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: var(--spacing-l) 0;
  position: relative;
  width: 100%;
}

.feature-intro {
  align-items: baseline;
  padding-top: 0;
}

.feature-group:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.feature-intro h1,
.feature-group .feature-info {
  width: calc(100% - var(--toggle-width) - var(--spacing-s));
}

.feature-intro div,
.feature-group .feature-preview {
  width: 100%;
}

.feature-group .feature-preview {
  margin-top: var(--spacing-l);
}

@media only screen and (min-width: 960px) {
  .feature-group {
    flex-wrap: nowrap;
  }

  .feature-intro h1,
  .feature-group .feature-info {
    margin-right: var(--spacing-m);
  }

  .feature-intro h1,
  .feature-group .feature-info,
  .feature-intro div,
  .feature-group .feature-preview {
    width: calc((100% - var(--toggle-width) - var(--spacing-s)) / 2);
  }

  .feature-group .feature-preview {
    margin-top: 0;
  }
}

@media only screen and (min-width: 1280px) {
  .feature-intro h1,
  .feature-group .feature-info {
    width: calc((100% - var(--toggle-width) - var(--spacing-s)) / 3);
  }

  .feature-intro div,
  .feature-group .feature-preview {
    width: calc(((100% - var(--toggle-width) - var(--spacing-s)) / 3) * 2);
  }
}

.feature-intro div p {
  margin-right: auto;
  max-width: var(--width-s);
}

.feature-intro .feature-list {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--spacing-s);
  margin-bottom: var(--spacing-s);
}

.feature-intro .feature-list h3 {
  margin-bottom: var(--spacing-xs);
  width: 100%;
}

.feature-intro .feature-list span {
  background: var(--color-dim);
  border: 0;
  border-radius: 4px;
  font-size: var(--font-small);
  margin-right: 0.5em;
  margin-bottom: 0.5em;
  padding: 0.2em 0.65em 0.325em 0.65em;
}

.feature-group .feature-preview {
  color: var(--color-black);
  line-height: 1;
  -webkit-transition: all .1s ease-in-out;
  -moz-transition: all .1s ease-in-out;
  -ms-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
}

.feature-group .feature-preview:hover {
  color: var(--color-dim);
}

.feature-group .feature-preview .fit {
  display: inline-block;
}

.feature-info .feature-name {
  font-weight: 700;
}

.feature-info .feature-shorthand,
.feature-info .feature-description {
  font-size: var(--font-small);
}

.feature-info .feature-shorthand {
  color: var(--color-mid);
}

.feature-info .feature-description {
  display: none;
  margin-top: var(--spacing-s);
}

.feature-preview .hover-highlight {
  color: var(--color-black);
}

/*
.feature-preview:hover .hover-highlight {
  color: var(--color-black);
} */

.feature-preview-control,
.feature-preview-icon {
  padding: 4px;

  height: var(--toggle-width);
  width: var(--toggle-width);
}

.feature-preview-control {
  margin: 0;
  opacity: 0;
  position: absolute;
  z-index: 1;
}

.feature-preview-control:hover {
  cursor: pointer;
}

.feature-preview-icon {
  display: flex;
  background-color: var(--color-dim);
  border-radius: 4px;
  margin-right: var(--spacing-s);

  -webkit-transition: all .1s ease-in-out;
  -moz-transition: all .1s ease-in-out;
  -ms-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
}

.feature-preview-icon svg {
  width: 24px;
}

.feature-preview-icon svg #eye {
  fill: var(--color-white);
}

.feature-preview-icon svg #eyelid-open {
  fill: var(--color-black);
}

.feature-preview-icon svg #eyelid-closed,
.feature-preview-control:not(:checked) ~ .feature-preview-icon svg #pupil,
.feature-preview-control:not(:checked) ~ .feature-preview-icon svg #eyelid-open {
  fill: transparent;
}

.feature-preview-control:not(:checked) ~ .feature-preview-icon svg #eyelid-closed {
  fill: var(--color-black);
}

/*
========================
Font Information
========================
*/

.font-info {
  align-items: baseline;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: var(--spacing-xl);
  max-width: var(--width-s);
}

.font-info .meta-section {
  margin-bottom: var(--spacing-s);
  max-width: var(--width-s);
  width: 100%;
}

.font-info .meta-info {
  border-top: 1px solid var(--color-dim);
  border-bottom: 1px solid var(--color-dim);
  display: flex;
  font-size: var(--font-small);
  margin: var(--spacing-m) 0;
  padding-top: var(--spacing-m);
  padding-bottom: calc(var(--spacing-m) - var(--spacing-s));
  width: 100%;
}

.font-info .meta-info h3 {
  font-size: 1rem;
}

.font-info .meta-info .meta-section:not(:last-child) {
  margin-right: var(--spacing-s);
}

.font-info ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.font-info .supported-languages .support {
  margin-bottom: var(--spacing-xs);
  max-height: 10em;
  overflow: hidden;
  position: relative;

  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.font-info .supported-languages .support::after {
  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
  bottom: 0;
  content: "";
  height: 4em;
  left: 0;
  position: absolute;
  width: 100%;

  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.font-info .supported-languages .support.active::after {
  height: 0;
  opacity: 0;
}

.font-info .supported-languages ul {
  columns: 4;
  column-gap: var(--spacing-m);
  font-size: var(--font-small);
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-s);
  width: 100%;
}

/*
========================
Big Buy Button
========================
*/

.big-buy {
  align-items: center;
  background-color: var(--color-light);
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-xl);
  min-height: 50vh;
  width: 100%;
}

.big-buy .inner {
  display: flex;
  justify-content: center;
  max-width: var(--width-s);
  width: 100%;
}

.big-buy button {
  background: var(--color-red);
  border-radius: 4px;
  color: white;
  font-size: 2em;
  padding: 0.75em 1em;
}

/*
========================
Marseille
========================
*/

#marseille .font-opener {
  /* background-color: #37122D; */
  color: white;

  --x-axis: "wght";
  --x-min: 100;
  --x-max: 800;
}

#marseille .font-opener .font-name {
  font-family: "Marseille";
  font-weight: 300;

  text-transform: uppercase;
  -moz-font-feature-settings: "ss01", "ss02", "ss06";
  -webkit-font-feature-settings: "ss01", "ss02", "ss06";
  font-feature-settings: "ss01", "ss02", "ss06";
}

@media only screen and (min-width: 768px) {
  #marseille .font-opener .font-name {
    font-family: "Marseille Var", "Marseille";
    font-weight: 700;
    font-variation-settings: "wght" 800;
  }
}

#marseille #features .feature-preview {
  font-family: "Marseille";
  font-weight: 300;
}

/*
========================
Montecatini Pro
========================
*/

#montecatini-pro .font-opener {
  /* background-color: #6C8A81; */
  color: white;

  --x-axis: "wdth";
  --x-min: 100;
  --x-max: 360;

  --y-axis: "wght";
  --y-min: 400;
  --y-max: 800;
}

#montecatini-pro .font-opener .font-name {
  font-family: "Montecatini Stretto";
  font-weight: 300;
}

@media only screen and (min-width: 768px) {
  #montecatini-pro .font-opener .font-name {
    font-family: "Montecatini Var", "Montecatini Stretto";
    font-weight: 300;
    font-variation-settings: "wght" 400, "wdth" 400;
  }
}

#montecatini-pro #features .feature-preview {
  font-family: "Montecatini Stretto";
  font-weight: 300;
}

#montecatini-pro .feature-group .feature-preview > div {
  margin-top: -0.15em;
  margin-bottom: -0.155em;
}

/*
========================
Portofino
========================
*/

#portofino .font-opener {
  /* background-color: var(--color-mid); */
  color: white;

  --x-axis: "wght";
  --x-min: 32;
  --x-max: 158;
}

#portofino .font-opener .font-name {
  font-family: "Portofino";
  font-weight: 700;

  -moz-font-feature-settings: "swsh";
  -webkit-font-feature-settings: "swsh";
  font-feature-settings: "swsh";
}

@media only screen and (min-width: 768px) {
  #portofino .font-opener .font-name {
    font-family: "Portofino Var", "Portofino";
    font-weight: 700;
    font-variation-settings: "wght" 158;
  }
}

#portofino #features .feature-preview {
  font-family: "Portofino";
  font-weight: 500;
}