
.side-popout {border-left:2px solid #184ea2; max-width: 0; opacity: 0; transform: translateX(-0px); overflow: auto; visibility: hidden; transition: max-width 0.3s ease 0.3s, opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.6s; pointer-events: none; position: fixed; height: 100vh; top: 0; right: 0; z-index: 999; background-color: #ffffff; padding: 120px 80px;}
.side-popout.active{max-width: 30vw;opacity: 1;transform: translateX(0);visibility: visible;transition: max-width 0.3s ease, opacity 0.3s ease, transform 0.3s ease, visibility 0s 0s;pointer-events: auto;width: 32vw;overflow: auto;height: 100vh;}
.side-popout .close {position: absolute;top: 80px;right: 80px;background:transparent;padding:0px;border:0px;width:42px;height:52px;cursor: pointer;}
.side-popout .close svg{width:100%;height:100%;}
.side-popout .entry {display:none;}
.side-popout .entry.active {display:block;}
.side-popout .entry .title {font-size:1.5625rem;font-weight:700; padding: 8px 0px;}
.side-popout .entry .subtitle {font-size:1.25rem;font-weight:700; margin-top: 16px;}

.popout-button.buttonstyle-text {cursor: pointer;background-color: transparent;border: 0px;font-size: 14px;    text-align: left; padding: 0; margin-top: 8px; text-decoration: underline;}
.popout-button.buttonstyle-text:hover {color: #184ea2;}
.popout-button.buttonstyle-block {    cursor: pointer;background-color: #184ea2;border: 1px solid #184ea2;color: #fff;padding: 6px;width: 140px;font-size: 14px;}
.popout-button.buttonstyle-block:hover {background-color: #fff;color:#184ea2}

@media (max-width: 1400px) {.side-popout.active{max-width: 40vw;width:40vw;}}
@media (max-width: 1200px) {.side-popout.active{max-width: 50vw;width:50vw;}}
@media (max-width: 850px) {.side-popout.active{max-width: 60vw;width:60vw;}}
@media (max-width: 650px) {.side-popout.active{max-width: 75vw;width:75vw;}}
@media (max-width: 500px) {.side-popout.active{max-width: 90vw;width:90vw;}} 