#popupLinkBox { display: none; position: fixed; z-index: 999; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0); -webkit-transition-property: background-color; -webkit-transition-duration: 0.1s; transition-property: background-color; transition-duration: 0.1s }
#popupLinkBox .wrapper { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 70%; max-width: 640px; max-height: 95vh; overflow: auto }
#popupLinkBox .wrapper a.popupClose,
#popupLinkBox .wrapper .navigation { display: block; position: absolute; top: 0; width: 3em; height: 3em; color: rgba(0, 0, 0, .4); -webkit-transition-property: color; -webkit-transition-duration: 0.1s; transition-property: color; transition-duration: 0.1s }
#popupLinkBox .wrapper a.popupClose i,
#popupLinkBox .wrapper .navigation i { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 1.25em; -webkit-transition-property: font-size; -webkit-transition-duration: 0.1s; transition-property: font-size; transition-duration: 0.1s }
#popupLinkBox .wrapper a.popupClose:hover:not(.inactive),
#popupLinkBox .wrapper .navigation:hover:not(.inactive) { color: #d33 }
#popupLinkBox .wrapper a.popupClose:hover:not(.inactive) i,
#popupLinkBox .wrapper .navigation:hover:not(.inactive) i { font-size: 1.5em }
#popupLinkBox .wrapper a.popupClose.inactive,
#popupLinkBox .wrapper .navigation.inactive { color: rgba(0, 0, 0, .1) }
#popupLinkBox .wrapper .navigation.prev { left: 0 }
#popupLinkBox .wrapper .navigation.next { left: 2em }
#popupLinkBox .wrapper a.popupClose { right: 0 }
#popupLinkBox .wrapper a.popupClose:hover { color: #d33 }
#popupLinkBox .wrapper > .content { background: #fff; padding: 10%; box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.25); border-radius: 0.325em }
#popupLinkBox .wrapper.relPosVertical { transform: translate(-50%, 0) }
#popupLinkBox .wrapper.relPosVertical.relPosHorizontal { transform: translate(0, 0) }
#popupLinkBox .wrapper.relPosHorizontal:not(.relPosVertical) { transform: translate(0, -50%) }
#popupLinkBox .wrapper.full { width: 95%; max-width: 960px }
#popupLinkBox .wrapper.full > .content { padding: 5% }
@media screen and (max-width: 960px) {#popupLinkBox .wrapper { width: 95% } }
#popupLinkBox.active { background: rgba(0, 0, 0, 0.125) }