.mobile-qr-scan{ width: 100vw; max-width: 1250px; margin: 0px auto; padding : 0px 10px 40px; direction: rtl; padding-top: 70px; overflow-x: hidden; &__back{ justify-content:flex-end; a{ display: inline; font-family: numeralLight; text-decoration: none; padding: 5px 20px 3px; background-color: #00CC69; border-radius: 25px; font-size: calc(100vw / 26); color: white; &:focus:enabled{ text-decoration: none; } } } &__header{ margin-top: 30px; width: 100%; h1{ font-family: numeralBold; color: #4CE1BE; font-size: calc(100vw / 13); } p{ text-align: justify; font-family: numeralMedium; color: #4CE1BE; font-size: calc(100vw / 28); } } &__camera{ margin-top: 20px; width: 320px; height: 245px; border-radius: 10px; margin: 30px auto; position: relative; &--shape{ position: absolute; background-color: rgba(0, 0, 0, 0.8); } &--shapeTop{ width: calc(100% - 60px); height: 30px; left: 30px; top: 0px; } &--shapeBottom{ width: calc(100% - 60px); height: 30px; left: 30px; bottom: 0px; } &--shapeLeft{ width: 30px; height: 100%; left: 0px; bottom: 0px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } &--shapeRight{ width: 30px; height: 100%; right: 0px; bottom: 0px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } &--shapeCenter{ position: absolute; width: calc(100% - 60px); height: calc(100% - 60px); right: 30px; bottom: 30px; border: 3px solid red; } } &__text{ text-align: justify; font-family: numeralMedium; color: #4CE1BE; font-size: calc(100vw / 28); } &__lasts{ width: 100%; margin: 30px 0px; h2{ font-family: numeralBold; color: #02A255; font-size: calc(100vw / 24); margin-bottom: 20px; } } }