.moonPhasePopin{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#010000;z-index:10;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .5s;display:none}.moonPhasePopin h6{color:#aa845b;margin-top:20px;margin-bottom:10px;text-transform:uppercase;font-size:12px;font-weight:bold}.moonPhasePopin-open{display:block}.moonPhasePopin-openMobile{display:none}.moonPhasePopin-open,.moonPhasePopin-openMobile{font-family:"franklin-gothic-regular",sans-serif;color:#aa845b;text-transform:uppercase;font-size:12px;opacity:.5;letter-spacing:1px;margin-top:40px;cursor:pointer;transition:opacity .3s}.moonPhasePopin-openMobile{opacity:1;font-size:10px;font-weight:bold;color:#fff}.moonPhasePopin--open{opacity:1;transition:opacity .5s}.moonPhasePopin-close{width:30px;height:30px;position:absolute;right:-100px;top:50%;transform:rotate(45deg);cursor:pointer;transition:transform .5s}.moonPhasePopin-close:hover{transform:scale(0.8) rotate(45deg)}.moonPhasePopin-close:after{content:"";position:absolute;width:1px;height:30px;left:15px;top:0;background:#fff}.moonPhasePopin-close:before{content:"";position:absolute;width:30px;height:1px;left:0;top:15px;background:#fff}.moonPhasePopin-content{width:1000px;height:550px;background:#010000;display:flex;position:relative}.moonPhasePopin-text{width:700px;padding:40px}.moonPhasePopin-text h3{font-family:'Berthoud', serif;font-size:37px;text-transform:uppercase;color:#fff;margin-bottom:40px;line-height:1.1}.moonPhasePopin-text p{color:#fff;margin-bottom:20px;font-size:12px;font-family:"franklin-gothic-regular",sans-serif}.moonPhasePopin-textContent{font-family:"franklin-gothic-regular",sans-serif;padding-left:60px;-webkit-font-smoothing:auto;color:#fff}.moonPhasePopin-visual{width:300px;height:100%;position:relative;overflow:hidden}.moonPhasePopin-watch{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%) scale(1.2);z-index:2}.moonPhasePopin-clock{position:absolute;left:15px;top:276px;width:124px;z-index:3;transform-origin:12.5px 12.5px;transition:transform 1s}.moonPhasePopin-phase{position:absolute;left:50%;top:50%;transform:translate(-52.6%, -53%) scale(1.2);transform-origin:center;z-index:1;transition:transform 1s}.moonPhasePopin-timezone{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:auto;border:0;margin:0;padding:.75em;border-radius:0;overflow:hidden;text-overflow:ellipsis;border:1px solid #fff;background:#010000;color:#fff;font-size:12px;width:420px;outline:none;padding:10px 15px}.moonPhasePopin-timezoneContainer{position:relative}.moonPhasePopin-timezoneContainer:after{content:"";background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAaCAYAAAD1wA/qAAAAAXNSR0IArs4c6QAAAopJREFUWAnVl11ojXEcx8/ezdnJQousLEmKkpJC2cV2MzfccMONdjNXXMnNcoNSS0rSKElC7a3ZSBJJk9JKa62mLIkkJpLk9fh81/ltZ+ftOc+z/3mc863Pfv/z//9en3PO8+xE4vF4DdyE7ZESEz23wG2IRvgzANJXaC6VWei1Db6DNKxBNNU3vUKyrcU+DD3uhh8gfYEdMz2z2Al6RyRNuatYh6G3vfATpE+wdV6vbGyDzyBp2j3zHIrgBT3th98gfYTNGdviYAtMg/QL9mV0/A+b9HIQ/oD0HjbmbAOHTfABJE1/IGdACIf00AF/QXoL6/Mqi+MGeAeSrkJ7XoEFcKL2YTWR0GvsWl9lCFgHbxIJdDUO+UrgwJmaRxP1ZaagKVBaAtfAKzAdCZQoQBAFO60o9gU0BkgzF0KC1fASTMfmTguzotAJK4adgJVOKpFoFUyC6biTxBmSUKDLimDHoCGDW/AtEq6AcTCdCp4tPZKkZXDOkmNHYVm6p4MdEi+H52A64yCt/k3SEN2WFPsU6l3kzpqDAkvhGZjOsyjLGuBxQGw5XLFk2McQ8whzc0yhJfAETJdYlPvNTkwlXLck2AcQ9ZtnQf4UrINHYLrKoiLfpPhWQa8FY+9Cbb7xTv0ovBjug0k/0Cq9iuCjH3O3LAg7pD2vuIKe08AiuAOmfhbV2YpyVgu6+qY+FlXZ/EPdp5FqGLTOsMOQdoXZi4K+B6YbLDzfwbCH0We+xzrE3oPZzzzrGOiOZNKdyvcNIpShaKwCrlmn2Iegm0I96Nlgusgi8C07rGH0XLhsHWNHQE9pk57exT2EXSk1Ches8yTbZT4lZRngbNIQJ0uq+dRmGeQ0dKbuu379DwYMm5J9OUZ+AAAAAElFTkSuQmCC");background-size:cover;width:25px;height:13px;position:absolute;top:14px;left:380px;transform:scale(0.7)}.moonPhasePopin-dayValue,.moonPhasePopin-phaseValue{color:#fff;margin-bottom:10px;font-size:12px}@media screen and (max-width: 768px){.moonPhasePopin{overflow-y:scroll;align-items:flex-start}.moonPhasePopin-open{display:none}.moonPhasePopin-openMobile{display:block}.moonPhasePopin-content{flex-direction:column;width:calc(100% - 40px);height:auto;margin:140px 0;align-items:center}.moonPhasePopin-text{width:300px;padding:0;font-size:27px}.moonPhasePopin-text h3{font-size:27px}.moonPhasePopin-visual{height:550px}.moonPhasePopin-textContent{padding-left:0}.moonPhasePopin-timezone{width:100%;padding:10px}.moonPhasePopin-timezoneContainer{width:auto}.moonPhasePopin-timezoneContainer:after{display:none}.moonPhasePopin-close{position:relative;left:0;right:0;transform:rotate(45deg) translate(-50%, -50%)}}