.popupContainer{&.open{.popupButton{right:2.625rem;width:40px;height:40px;border-radius:10%;line-height:0;font-size:0;&:before,&:after{position:absolute;left:50%;top:30%;content:" ";height:15px;width:1px;background-color:var(--aa-one-cms-palette-common-black,#fff)}
&:before{transform:rotate(45deg)}
&:after{transform:rotate(-45deg)}
.arrow{display:none}
}
}
&.right{.popupButton{right:44px;transform-origin:top right;transform:rotate(-90deg);transition:right ease-in-out .5s}
&.open{.popup{right:10px}
}
.popup{right:-405px;transition:right ease-in-out .5s}
}
&.left{.popupButton{left:44px;transform-origin:top left;transition:left ease-in-out .5s;transform:rotate(90deg)}
&.open{.popup{left:10px}
}
.popup{left:-405px;transition:left ease-in-out .5s}
}
.popupButton{border:0;position:fixed;z-index:1001;font-family:var(--assa-font-family-body) !important;text-align:center;border-radius:9px 9px 0 0;font-size:14px;padding:.5625rem 1rem;line-height:1.5;background-color:var(--aa-one-cms-palette-primary-main,var(--assa-button-color,var(--assa-secondary-color,#00a0d0)));color:var(--aa-one-cms-palette-common-black,var(--assa-button-text-color,var(--assa-secondary-text,#ffffff))) !important;display:block;text-decoration:none;cursor:pointer;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:42px;&:focus{outline:0}
}
.popupButton:hover{color:var(--assa-button-text-color,var(--assa-secondary-text,#fff))}
.popup{position:fixed;border:1px solid #ccc;border-radius:5px;box-shadow:0 0 .5rem 0 rgba(0,0,0,0.5);overflow:hidden;z-index:100002;width:400px;height:500px;padding:16px;&.bg-onecms-white{background-color:#fff}
&.bg-onecms-grey{background-color:#f4f4f4}
.o-grid__content--is-two-column>div{margin-right:0 !important}
.a-image__container>img{position:relative !important}
>div{height:100%}
}
.arrow{height:0;text-transform:uppercase;letter-spacing:3px;text-align:center;position:absolute;left:50%;top:6px;bottom:20px;opacity:1;transition:ease 1s;animation:bouncey 1s linear infinite;&.two{top:10px}
ul{list-style:none;li{width:7px;height:1px;background:var(--aa-one-cms-palette-common-black,white);&:nth-child(1){left:0;top:-3px;position:absolute;transform:rotate(-45deg);border-radius:5px 0 0 5px}
&:nth-child(2){left:5px;position:absolute;border-radius:0 5px 5px 0;top:-3px;transform:rotate(45deg)}
}
}
}
@media only screen and (max-width:600px){.popup{max-width:300px !important;p{font-size:14px}
.lp-ellipsis{font-size:12px}
}
}
}
@keyframes bouncey{0{transform:translateY(0)}
50%{transform:translateY(2px)}
100%{transform:translateY(0)}
}