/******** phone base *********/ #popover { background: url('/img/bg_pink.png') no-repeat; background-position: center; background-size: cover; } #popover .dark-emphasis { color: #3B3B49; font-family: 'GT Walsheim Pro'; font-style: normal; font-weight: 600; font-size: 60px; line-height: 110%; /* identical to box height, or 66px */ letter-spacing: -0.04em; } .text-grey{ font-weight: 400; font-size: 18px; line-height: 26px; } .slider-screen .text{ position: relative; left: 55vw; top: -30%; width: 400px; text-align:left; } .slider-screen .text-title { margin-bottom:2rem; } .phone-container{ border-radius: 1rem; width: 411px; } .phone-container .top{ height: 60px; background: url('/img/phone_rectangle_top.jpg') no-repeat center; border-top-right-radius: 1rem; border-top-left-radius: 1rem; } .phone-container .bottom{ height: 62px; background: url('/img/phone_rectangle_bottom.jpg') no-repeat center; top: 676.5px; position: relative; border-bottom-right-radius: 2rem; border-bottom-left-radius: 2rem; } .phone-container.transparent{ background: rgba(248, 243, 241, 0.1); border-radius: 70px; width: 350px; height: 700px; } .slider-screen .phone-container { height: 776px; width: 411px; background: url('/img/phone_cream.png') no-repeat; background-position: center; background-size: cover; position: relative; left: 20vw; top: 20vh; } .close-button { position: relative; right: 40px; top: 56px; float: right; } .arrow-right { position: relative; right: 40px; top: 50vh; float: right; } .arrow-left { position: relative; left: 40px; top: 50vh; float: left; } .bullets{ position: relative; left: 0; top: 30vh; }