@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&subset=cyrillic');

@keyframes slideRight {0% {transform: translateX(0%);} 50%{transform: translateX(0%);} 65%{transform: translateX(0%);} 80%{transform: translateX(10%);} 95%{ transform: translateX(0%);} 100% {transform: translateX(0%);}}

@keyframes BackgroundGradient {
  0% {background-position: 0% 0%; background-size: 555% 555%;}
  25% {background-position: 0% 75%; background-size: 777% 777%;}
  50% {background-position: 100% 50%; background-size: 888% 888%;}
  75% {background-position: 75% 25%; background-size: 1111% 1111%;}
  100% {background-position: 0% 0%; background-size: 555% 555%;}
}
/* Portrait tablets and desktops */
@media screen and (min-width: 1040px) {
 html {background: #fbfbfb;}
 body {margin: 0; padding: 0; width: 100%; height: 708px; font-family: 'Roboto', sans-serif; font-size: 12px;}
 a {text-decoration: none;}
 a:hover{opacity: 0.8; color: #7d79c3;}
 h1 {margin: 20px 0 20px 10px; font-size: 34px; font-weight: 900; line-height: 52px; letter-spacing: 1px; color: #424242; text-shadow: 1px 1px #fafafa;}
.p1 {margin: 20px 0px 20px 8px; font-size: 16px; font-weight: 400; line-height: 28px; color: #424242;}
.s2 {margin: 0px 10px; height: 40px; width: 240px; float: left; font-weight: 400; line-height: 28px; color: #888; font-size: 14px; text-align: left;}
.s3 {margin: 0px 10px; height: 40px; width: 380px; float: right; font-weight: 400; line-height: 28px; color: #888; font-size: 14px; text-align: right;}
.a2 {margin: 20px 10px; font-size: 16px; font-weight: 400; line-height: 28px; color: #888; font-size: 14px; text-align: right;}
.input[type="text"] {border-radius: 2px; border-top-left-radius: 28px; border-bottom-left-radius: 28px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.2); letter-spacing: 4px; margin: 16px 4px 0 10px; padding: 12px 16px; font-size: 16px; width: 200px; border: 1px solid #bdbdbd; }
.monoBtn { border-radius: 28px; border-top-left-radius: 0; border-bottom-left-radius: 0; cursor: pointer; box-shadow: 0 0 0 rgba(204,169,44, 0.8); border: 1px solid #f8a924; color: #fff; background: linear-gradient(to top, #f8a924, #FFC107); text-shadow: 0 0 4px rgba(0,0,0,0.2); margin: 16px 4px 0 -7px; padding: 12px 8px; font-size: 16px; width: 160px;}
.monoBtn:hover {animation: none; background: linear-gradient(to top, #FFC107, #f8a924);}
.content {overflow: hidden; position: absolute; top: calc(50% - 350px); left: calc(50% - 500px); width: 1000px; height: 708px;}
.boxA1 {overflow: hidden; position: absolute; top: 0; left: 0; width: 500px; height: 60px;}
.boxA2 {overflow: hidden; position: absolute; top: 0; left: 500px; width: 500px; height: 60px;}
.boxB1 {overflow: hidden; position: absolute; top: 110px; left: 0; width: 380px; height: 500px;}
.card {overflow: hidden; animation-name: slideRight; animation-duration: 1s; animation-delay: 1s; animation-fill-mode: forwards; animation-timing-function: ease-in-out; visibility: visible !important; border-radius: 10px; z-index: 1; position: relative; top: 240px; left: 0px; width: 270px; height: 198px; background: #212121;}
.chip {position: absolute; top: 69px; left: 31px; width: 53px; height: 50px;}
.cardLogo {position: absolute; top: 19px; left: 31px; width: 200px; height: 20px; font-size: 15px; font-weight: 800; background: linear-gradient(90deg, #f5f5f5 38%, #bdbdbd 0%, #bdbdbd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #ffa002;}
.cardNum {text-shadow: #555 0 -1px; position: absolute; top: 134px; left: 31px; width: 200px; height: 20px; font-size: 20px; font-weight: 200; color: #000;}
.paper {overflow: hidden; overflow: hidden; border-radius: 26px; z-index: 4; position: relative; top: -182px; left: calc(50% - 105px); width: 214px; height: 454px; overflow: hidden; background: yellow;}
.display {overflow: hidden; overflow: hidden; z-index: 3; position: absolute; top: 0px; left: calc(50% - 107px); width: 234px; height: 460px; overflow-x: hidden; overflow-y: scroll; background: #fff;}
.monobrow {overflow: hidden; z-index: 5; position: relative; top: -1114px; left: calc(50% - 64px); width: 130px; height: 30px;}
.monophone {overflow: hidden; overflow: hidden; z-index: 2; position: relative; top: -644px; left: calc(50% - 113px); width: 214px; height: 454px; border: 8px solid #202020; border-radius: 34px;}
.monophoneB {border: 4px solid #bdbdbd; overflow: hidden; overflow: hidden; z-index: 2; position: relative; top: -1150px; left: calc(50% - 116px); width: 228px; height: 468px; border-radius: 34px;}
.monophoneC {overflow: hidden; z-index: 1; position: relative; top: -1574px; left: calc(50% - 119px); width: 8px; height: 20px; border-radius: 8px; background: #333333;}
.monophoneD {overflow: hidden; z-index: 1; position: relative; top: -1554px; left: calc(50% - 119px); width: 8px; height: 50px; border-radius: 8px; background: #333333;}
.phoneCB1 {z-index: 5; background: #7b78c4; background: -moz-linear-gradient(45deg, #7b78c4 0%, #aa91b5 100%); background: -webkit-linear-gradient(45deg, #7b78c4 0%,#aa91b5 100%); background: linear-gradient(45deg, #7b78c4 0%,#aa91b5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b78c4', endColorstr='#aa91b5',GradientType=1 ); position: relative; top: 0; left: 0; width: 214px; height: 610px;}
.phoneCB2 {position: relative; z-index: 6; top: -360px; left: 0; width: 214px; height: 340px; background: rgba(255,255,255, 0.9); border-radius: 16px;}
.boxB2 {overflow: hidden; position: absolute; top: 110px; left: 380px; width: 620px; height: 500px;}
.logo {margin: 0; padding: 0; font-size: 24px; font-weight: 800; background: linear-gradient(90deg, #646464 26%, #bdbdbd 0%, #bdbdbd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #ffa002;}
.phone {margin: 0; text-align: right; padding: 0; float: right; font-size: 20px; font-weight: 800; color: #646464; margin: 3px 0 0 0;}
.icon {margin: 0; text-align: left; padding: 0; float: right; font-size: 32px; font-weight: 800; color: #bdbdbd; margin: -7px 8px 0 0;}
.boxC1 {overflow: hidden; position: absolute; top: 680px; left: 0; width: 500px; height: 60px;}
.boxC2 {overflow: hidden; position: absolute; top: 680px; left: 500px; width: 500px; height: 60px;}
.mobileOnly {display: none;}
.desctopOnly {display: block;}
.pcTxt {display: block;}
.mbTxt {display: none;}
}

/* Portrait tablets and desktops */
@media screen and (min-width: 991px) and (max-width: 1039px) {
 html {background: #fbfbfb;}
 body {margin: 0; padding: 0; width: 100%; height: 708px; font-family: 'Roboto', sans-serif; font-size: 12px;}
 a {text-decoration: none;}
 a:hover{opacity: 0.8; color: #7d79c3;}
 h1 {margin: 20px 10px; font-size: 34px; font-weight: 900; line-height: 52px; letter-spacing: 1px; color: #424242; text-shadow: 1px 1px #fafafa;}
.p1 {margin: 20px 10px; font-size: 16px; font-weight: 400; line-height: 28px; color: #424242;}
.s2 {margin: 0px 10px; height: 40px; width: 240px; float: left; font-weight: 400; line-height: 28px; color: #888; font-size: 14px; text-align: left;}
.s3 {margin: 0px 10px; height: 40px; width: 380px; float: right; font-weight: 400; line-height: 28px; color: #888; font-size: 14px; text-align: right;}
.a2 {margin: 20px 10px; font-size: 16px; font-weight: 400; line-height: 28px; color: #888; font-size: 14px; text-align: right;}
.input[type="text"] {border-radius: 2px; border-top-left-radius: 28px; border-bottom-left-radius: 28px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.2); letter-spacing: 4px; margin: 16px 4px 0 10px; padding: 12px 16px; font-size: 16px; width: 200px; border: 1px solid #bdbdbd; }
.monoBtn { border-radius: 28px; border-top-left-radius: 0; border-bottom-left-radius: 0; cursor: pointer; box-shadow: 0 0 0 rgba(204,169,44, 0.8); border: 1px solid #f8a924; color: #fff; background: linear-gradient(to top, #f8a924, #FFC107); text-shadow: 0 0 4px rgba(0,0,0,0.2); margin: 16px 4px 0 -7px; padding: 12px 8px; font-size: 16px; width: 160px;}
.monoBtn:hover {animation: none; background: linear-gradient(to top, #FFC107, #f8a924);}
.content {overflow: hidden; position: absolute; top: calc(50% - 250px); left: calc(50% - 500px); width: 1000px; height: 508px;}
.boxA1 {display: none; overflow: hidden; position: absolute; top: 0; left: 16px; width: 482px; height: 60px;}
.boxA2 {display: none; overflow: hidden; position: absolute; top: 0; left: 500px; width: 482px; height: 60px;}
.boxB1 {overflow: hidden; position: absolute; top: 10px; left: 0; width: 380px; height: 500px;}
.card {overflow: hidden; animation-name: slideRight; animation-duration: 1s; animation-delay: 1s; animation-fill-mode: forwards; animation-timing-function: ease-in-out; visibility: visible !important; border-radius: 10px; z-index: 1; position: relative; top: 240px; left: 20px; width: 260px; height: 198px; background: #212121;}
.chip {position: absolute; top: 69px; left: 31px; width: 53px; height: 50px;}
.cardLogo {position: absolute; top: 19px; left: 31px; width: 200px; height: 20px; font-size: 15px; font-weight: 800; background: linear-gradient(90deg, #f5f5f5 38%, #bdbdbd 0%, #bdbdbd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #ffa002;}
.cardNum {text-shadow: #555 0 -1px; position: absolute; top: 134px; left: 31px; width: 200px; height: 20px; font-size: 20px; font-weight: 200; color: #000;}
.paper {overflow: hidden; overflow: hidden; border-radius: 26px; z-index: 4; position: relative; top: -182px; left: calc(50% - 105px); width: 214px; height: 454px; overflow: hidden; background: yellow;}
.display {overflow: hidden; overflow: hidden; z-index: 3; position: absolute; top: 0px; left: calc(50% - 107px); width: 234px; height: 460px; overflow-x: hidden; overflow-y: scroll; background: #fff;}
.monobrow {overflow: hidden; z-index: 5; position: relative; top: -1114px; left: calc(50% - 64px); width: 130px; height: 30px;}
.monophone {overflow: hidden; overflow: hidden; z-index: 2; position: relative; top: -644px; left: calc(50% - 113px); width: 214px; height: 454px; border: 8px solid #202020; border-radius: 34px;}
.monophoneB {border: 4px solid #bdbdbd; overflow: hidden; overflow: hidden; z-index: 2; position: relative; top: -1150px; left: calc(50% - 116px); width: 228px; height: 468px; border-radius: 34px;}
.monophoneC {overflow: hidden; z-index: 1; position: relative; top: -1574px; left: calc(50% - 119px); width: 8px; height: 20px; border-radius: 8px; background: #333333;}
.monophoneD {overflow: hidden; z-index: 1; position: relative; top: -1554px; left: calc(50% - 119px); width: 8px; height: 50px; border-radius: 8px; background: #333333;}
.phoneCB1 {z-index: 5; background: #7b78c4; background: -moz-linear-gradient(45deg, #7b78c4 0%, #aa91b5 100%); background: -webkit-linear-gradient(45deg, #7b78c4 0%,#aa91b5 100%); background: linear-gradient(45deg, #7b78c4 0%,#aa91b5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b78c4', endColorstr='#aa91b5',GradientType=1 ); position: relative; top: 0; left: 0; width: 214px; height: 610px;}
.phoneCB2 {position: relative; z-index: 6; top: -360px; left: 0; width: 214px; height: 340px; background: rgba(255,255,255, 0.9); border-radius: 16px;}
.boxB2 {overflow: hidden; position: absolute; top: 10px; left: 380px; width: 620px; height: 500px;}
.logo {margin: 0; padding: 0; font-size: 24px; font-weight: 800; background: linear-gradient(90deg, #646464 26%, #bdbdbd 0%, #bdbdbd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #ffa002;}
.phone {margin: 0; text-align: right; padding: 0; float: right; font-size: 20px; font-weight: 800; color: #646464; margin: 3px 0 0 0;}
.icon {margin: 0; text-align: left; padding: 0; float: right; font-size: 32px; font-weight: 800; color: #bdbdbd; margin: -7px 8px 0 0;}
.boxC1 {display: none; overflow: hidden; position: absolute; top: 680px; left: 16px; width: 482px; height: 60px;}
.boxC2 {display: none; overflow: hidden; position: absolute; top: 680px; left: 500px; width: 482px; height: 60px;}
.mobileOnly {display: none;}
.desctopOnly {display: block;}
.pcTxt {display: block;}
.mbTxt {display: none;}
}

/* Portrait tablets and small desktops */
@media screen and (min-width: 768px) and (max-width: 990px) {
 html {background: #fbfbfb;}
 body {margin: 0; padding: 0; width: 100%; height: 708px; font-family: 'Roboto', sans-serif; font-size: 12px;}
 a {text-decoration: none;}
 a:hover{opacity: 0.8; color: #7d79c3;}
 h1 {text-align: center; margin: 20px 10px 26px 10px; font-size: 38px; font-weight: 900; line-height: 48px; letter-spacing: 1px; color: #424242; text-shadow: 1px 1px #fafafa;}
.p1 {margin: 20px 10px; text-align: center; font-size: 16px; font-weight: 400; line-height: 28px; color: #424242;}
.s2 {margin: 0; width: 100%; height: 20px; font-weight: 400; line-height: 28px; color: #888; font-size: 14px; text-align: center;}
.s3 {margin: 0; width: 100%; height: 20px; font-weight: 400; line-height: 28px; color: #888; font-size: 14px; text-align: center;}
.a2 {margin: 0; font-weight: 400; line-height: 28px; color: #888; font-size: 14px; text-align: center;}
.input[type="text"] {border-radius: 2px; border-top-left-radius: 28px; border-bottom-left-radius: 28px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.2); letter-spacing: 4px; position: absolute; top: 364px; left: calc(50% - 198px); margin: 0; padding: 12px 16px; font-size: 16px; width: 200px; border: 1px solid #bdbdbd; }
.monoBtn { border-radius: 28px; border-top-left-radius: 0; border-bottom-left-radius: 0; cursor: pointer; box-shadow: 0 0 0 rgba(204,169,44, 0.8); border: 1px solid #f8a924; color: #fff; background: linear-gradient(to top, #f8a924, #FFC107); text-shadow: 0 0 4px rgba(0,0,0,0.2); margin: 0; padding: 12px 8px; font-size: 16px; position: absolute; top: 364px; left: calc(50% + 34px); width: 160px;}
.monoBtn:hover {animation: none; background: linear-gradient(to top, #FFC107, #f8a924);}
.content {overflow: hidden; position: absolute; top: 0; left: 2%; width: 96%; height: 1700px;}
.boxA1 {overflow: hidden; position: absolute; top: 24px; left: 0; width: 50%; height: 54px;}
.boxA2 {overflow: hidden; position: absolute; top: 24px; left: 50%; width: 50%; height: 54px;}
.boxB1 {overflow: hidden; position: absolute; top: 656px; left: 0; width: 100%; height: 500px;}
.card {overflow: hidden; animation-name: slideRight; animation-duration: 1s; animation-delay: 1s; animation-fill-mode: forwards; animation-timing-function: ease-in-out; visibility: visible !important; border-radius: 10px; z-index: 1; position: relative; top: 240px; left: calc(50% - 260px); width: 320px; height: 198px; background: #212121;}
.chip {position: absolute; top: 69px; left: 31px; width: 53px; height: 50px;}
.cardLogo {position: absolute; top: 19px; left: 31px; width: 200px; height: 20px; font-size: 15px; font-weight: 800; background: linear-gradient(90deg, #f5f5f5 38%, #bdbdbd 0%, #bdbdbd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #ffa002;}
.cardNum {text-shadow: #555 0 -1px; position: absolute; top: 134px; left: 31px; width: 200px; height: 20px; font-size: 20px; font-weight: 200; color: #000;}
.paper {overflow: hidden; overflow: hidden; border-radius: 26px; z-index: 4; position: relative; top: -182px; left: calc(50% - 105px); width: 214px; height: 454px; overflow: hidden; background: yellow;}
.display {overflow: hidden; overflow: hidden; z-index: 3; position: absolute; top: 0px; left: calc(50% - 107px); width: 234px; height: 460px; overflow-x: hidden; overflow-y: scroll; background: #fff;}
.monobrow {overflow: hidden; z-index: 5; position: relative; top: -1114px; left: calc(50% - 64px); width: 130px; height: 30px;}
.monophone {overflow: hidden; overflow: hidden; z-index: 2; position: relative; top: -644px; left: calc(50% - 113px); width: 214px; height: 454px; border: 8px solid #202020; border-radius: 34px;}
.monophoneB {border: 4px solid #bdbdbd; overflow: hidden; overflow: hidden; z-index: 2; position: relative; top: -1150px; left: calc(50% - 116px); width: 228px; height: 468px; border-radius: 34px;}
.monophoneC {overflow: hidden; z-index: 1; position: relative; top: -1574px; left: calc(50% - 119px); width: 8px; height: 20px; border-radius: 8px; background: #333333;}
.monophoneD {overflow: hidden; z-index: 1; position: relative; top: -1554px; left: calc(50% - 119px); width: 8px; height: 50px; border-radius: 8px; background: #333333;}
.phoneCB1 {z-index: 5; background: #7b78c4; background: -moz-linear-gradient(45deg, #7b78c4 0%, #aa91b5 100%); background: -webkit-linear-gradient(45deg, #7b78c4 0%,#aa91b5 100%); background: linear-gradient(45deg, #7b78c4 0%,#aa91b5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b78c4', endColorstr='#aa91b5',GradientType=1 ); position: relative; top: 0; left: 0; width: 214px; height: 610px;}
.phoneCB2 {position: relative; z-index: 6; top: -360px; left: 0; width: 214px; height: 340px; background: rgba(255,255,255, 0.9); border-radius: 16px;}
.boxB2 {overflow: hidden; position: absolute; top: 110px; left: 0px; width: 100%; height: 500px;}
.logo {margin: 0; padding: 0; font-size: 20px; font-weight: 500; color: #616161;}
.phone {margin: 0; text-align: right; padding: 0; float: right; font-size: 20px; font-weight: 500; color: #646464; margin: 3px 0 0 0;}
.icon {margin: 0; text-align: left; padding: 0; float: right; font-size: 32px; font-weight: 800; color: #bdbdbd; margin: -7px 8px 0 0;}
.boxC1 {text-align: center; overflow: hidden; position: absolute; top: 1618px; left: 0; width: 100%; height: 60px;}
.boxC2 {text-align: center; overflow: hidden; position: absolute; top: 1654px; left: 0; width: 100%; height: 60px;}
.mobileOnly {display: block;}
.desctopOnly {display: none;}
.pcTxt {display: block;}
.mbTxt {display: none;}
}

/* Landscape phones and portrait tablets */
@media screen and (min-width: 651px) and (max-width: 767px) {
 html {background: #fbfbfb;}
 body {margin: 0; padding: 0; width: 100%; height: 708px; font-family: 'Roboto', sans-serif; font-size: 12px;}
 a {text-decoration: none;}
 a:hover{opacity: 0.8; color: #7d79c3;}
 h1 {text-align: center; margin: 20px 10px 26px 10px; font-size: 32px; font-weight: 900; line-height: 48px; letter-spacing: 1px; color: #424242; text-shadow: 1px 1px #fafafa;}
.p1 {margin: 20px 10px; text-align: center; font-size: 16px; font-weight: 400; line-height: 28px; color: #424242;}
.s2 {margin: 0; width: 100%; height: 20px; font-weight: 400; line-height: 28px; color: #888; font-size: 14px; text-align: center;}
.s3 {margin: 0; width: 100%; height: 20px; font-weight: 400; line-height: 28px; color: #888; font-size: 14px; text-align: center;}
.a2 {margin: 0; font-weight: 400; line-height: 28px; color: #888; font-size: 14px; text-align: center;}
.input[type="text"] {border-radius: 2px; border-top-left-radius: 28px; border-bottom-left-radius: 28px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.2); letter-spacing: 4px; position: absolute; top: 384px; left: calc(50% - 198px); margin: 0; padding: 12px 16px; font-size: 16px; width: 200px; border: 1px solid #bdbdbd; }
.monoBtn { border-radius: 28px; border-top-left-radius: 0; border-bottom-left-radius: 0; cursor: pointer; box-shadow: 0 0 0 rgba(204,169,44, 0.8); border: 1px solid #f8a924; color: #fff; background: linear-gradient(to top, #f8a924, #FFC107); text-shadow: 0 0 4px rgba(0,0,0,0.2); margin: 0; padding: 12px 8px; font-size: 16px; position: absolute; top: 384px; left: calc(50% + 34px); width: 160px;}
.monoBtn:hover {animation: none; background: linear-gradient(to top, #FFC107, #f8a924);}
.content {overflow: hidden; position: absolute; top: 0; left: 2%; width: 96%; height: 1700px;}
.boxA1 {overflow: hidden; position: absolute; top: 24px; left: 0; width: 50%; height: 54px;}
.boxA2 {overflow: hidden; position: absolute; top: 24px; left: 50%; width: 50%; height: 54px;}
.boxB1 {overflow: hidden; position: absolute; top: 656px; left: 0; width: 100%; height: 500px;}
.card {overflow: hidden; animation-name: slideRight; animation-duration: 1s; animation-delay: 1s; animation-fill-mode: forwards; animation-timing-function: ease-in-out; visibility: visible !important; border-radius: 10px; z-index: 1; position: relative; top: 240px; left: calc(50% - 260px); width: 320px; height: 198px; background: #212121;}
.chip {position: absolute; top: 69px; left: 31px; width: 53px; height: 50px;}
.cardLogo {position: absolute; top: 19px; left: 31px; width: 200px; height: 20px; font-size: 15px; font-weight: 800; background: linear-gradient(90deg, #f5f5f5 38%, #bdbdbd 0%, #bdbdbd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #ffa002;}
.cardNum {text-shadow: #555 0 -1px; position: absolute; top: 134px; left: 31px; width: 200px; height: 20px; font-size: 20px; font-weight: 200; color: #000;}
.paper {overflow: hidden; overflow: hidden; border-radius: 26px; z-index: 4; position: relative; top: -182px; left: calc(50% - 105px); width: 214px; height: 454px; overflow: hidden; background: yellow;}
.display {overflow: hidden; overflow: hidden; z-index: 3; position: absolute; top: 0px; left: calc(50% - 107px); width: 234px; height: 460px; overflow-x: hidden; overflow-y: scroll; background: #fff;}
.monobrow {overflow: hidden; z-index: 5; position: relative; top: -1114px; left: calc(50% - 64px); width: 130px; height: 30px;}
.monophone {overflow: hidden; overflow: hidden; z-index: 2; position: relative; top: -644px; left: calc(50% - 113px); width: 214px; height: 454px; border: 8px solid #202020; border-radius: 34px;}
.monophoneB {border: 4px solid #bdbdbd; overflow: hidden; overflow: hidden; z-index: 2; position: relative; top: -1150px; left: calc(50% - 116px); width: 228px; height: 468px; border-radius: 34px;}
.monophoneC {overflow: hidden; z-index: 1; position: relative; top: -1574px; left: calc(50% - 119px); width: 8px; height: 20px; border-radius: 8px; background: #333333;}
.monophoneD {overflow: hidden; z-index: 1; position: relative; top: -1554px; left: calc(50% - 119px); width: 8px; height: 50px; border-radius: 8px; background: #333333;}
.phoneCB1 {z-index: 5; background: #7b78c4; background: -moz-linear-gradient(45deg, #7b78c4 0%, #aa91b5 100%); background: -webkit-linear-gradient(45deg, #7b78c4 0%,#aa91b5 100%); background: linear-gradient(45deg, #7b78c4 0%,#aa91b5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b78c4', endColorstr='#aa91b5',GradientType=1 ); position: relative; top: 0; left: 0; width: 214px; height: 610px;}
.phoneCB2 {position: relative; z-index: 6; top: -360px; left: 0; width: 214px; height: 340px; background: rgba(255,255,255, 0.9); border-radius: 16px;}
.boxB2 {overflow: hidden; position: absolute; top: 110px; left: 0px; width: 100%; height: 500px;}
.logo {margin: 0; padding: 0; font-size: 20px; font-weight: 500; color: #616161;}
.phone {margin: 0; text-align: right; padding: 0; float: right; font-size: 20px; font-weight: 500; color: #646464; margin: 3px 0 0 0;}
.icon {margin: 0; text-align: left; padding: 0; float: right; font-size: 32px; font-weight: 800; color: #bdbdbd; margin: -7px 8px 0 0;}
.boxC1 {text-align: center; overflow: hidden; position: absolute; top: 1618px; left: 0; width: 100%; height: 60px;}
.boxC2 {text-align: center; overflow: hidden; position: absolute; top: 1654px; left: 0; width: 100%; height: 60px;}
.mobileOnly {display: block;}
.desctopOnly {display: none;}
.pcTxt {display: block;}
.mbTxt {display: none;}
}

/* Landscape phones and smaller */
@media screen and (min-width: 481px) and (max-width: 650px) {
 html {background: #fbfbfb;}
 body {margin: 0; padding: 0; width: 100%; height: 708px; font-family: 'Roboto', sans-serif; font-size: 12px;}
 a {text-decoration: none;}
 a:hover{opacity: 0.8; color: #7d79c3;}
 h1 {text-align: center; margin: 10px 2px 26px 2px; font-size: 30px; font-weight: 900; line-height: 40px; letter-spacing: 1px; color: #424242; text-shadow: 1px 1px #fafafa;}
.p1 {margin: 20px 10px; text-align: center; font-size: 14px; font-weight: 400; line-height: 28px; color: #424242;}
.s2 {margin: 0; width: 100%; height: 20px; font-weight: 400; line-height: 28px; color: #888; font-size: 12px; text-align: center;}
.s3 {margin: 0; width: 100%; height: 20px; font-weight: 400; line-height: 28px; color: #888; font-size: 12px; text-align: center;}
.a2 {margin: 0; font-weight: 400; line-height: 28px; color: #888; font-size: 14px; text-align: center;}
.input[type="text"] {border-radius: 2px; border-top-left-radius: 28px; border-bottom-left-radius: 28px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.2); letter-spacing: 4px; position: absolute; top: 364px; left: calc(50% - 198px); margin: 8px 0; padding: 12px 16px; font-size: 16px; width: 200px; border: 1px solid #bdbdbd; }
.monoBtn { border-radius: 28px; border-top-left-radius: 0; border-bottom-left-radius: 0; cursor: pointer; box-shadow: 0 0 0 rgba(204,169,44, 0.8); border: 1px solid #f8a924; color: #fff; background: linear-gradient(to top, #f8a924, #FFC107); text-shadow: 0 0 4px rgba(0,0,0,0.2); margin: 8px 0; padding: 13px 4px 14px 4px; font-size: 14px; position: absolute; top: 364px; left: calc(50% + 34px); width: 168px;}
.monoBtn:hover {animation: none; background: linear-gradient(to top, #FFC107, #f8a924);}
.content {overflow: hidden; position: absolute; top: 0; left: 2%; width: 96%; height: 1700px;}
.boxA1 {overflow: hidden; position: absolute; top: 24px; left: 0; width: 100%; height: 52px; text-align: center;}
.boxA2 {display: none; overflow: hidden; position: absolute; top: 24px; left: 50%; width: 50%; height: 54px;}
.boxB1 {overflow: hidden; position: absolute; top: 656px; left: 0; width: 100%; height: 500px;}
.card {overflow: hidden; animation-name: slideRight; animation-duration: 1s; animation-delay: 1s; animation-fill-mode: forwards; animation-timing-function: ease-in-out; visibility: visible !important; border-radius: 10px; z-index: 1; position: relative; top: 240px; left: calc(50% - 210px); width: 280px; height: 198px; background: #212121;}
.chip {position: absolute; top: 69px; left: 31px; width: 53px; height: 50px;}
.cardLogo {position: absolute; top: 19px; left: 31px; width: 200px; height: 20px; font-size: 15px; font-weight: 800; background: linear-gradient(90deg, #f5f5f5 38%, #bdbdbd 0%, #bdbdbd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #ffa002;}
.cardNum {text-shadow: #555 0 -1px; position: absolute; top: 134px; left: 31px; width: 200px; height: 20px; font-size: 20px; font-weight: 200; color: #000;}
.paper {overflow: hidden; overflow: hidden; border-radius: 26px; z-index: 4; position: relative; top: -182px; left: calc(50% - 105px); width: 214px; height: 454px; overflow: hidden; background: yellow;}
.display {overflow: hidden; overflow: hidden; z-index: 3; position: absolute; top: 0px; left: calc(50% - 107px); width: 234px; height: 460px; overflow-x: hidden; overflow-y: scroll; background: #fff;}
.monobrow {overflow: hidden; z-index: 5; position: relative; top: -1114px; left: calc(50% - 64px); width: 130px; height: 30px;}
.monophone {overflow: hidden; overflow: hidden; z-index: 2; position: relative; top: -644px; left: calc(50% - 113px); width: 214px; height: 454px; border: 8px solid #202020; border-radius: 34px;}
.monophoneB {border: 4px solid #bdbdbd; overflow: hidden; overflow: hidden; z-index: 2; position: relative; top: -1150px; left: calc(50% - 116px); width: 228px; height: 468px; border-radius: 34px;}
.monophoneC {overflow: hidden; z-index: 1; position: relative; top: -1574px; left: calc(50% - 119px); width: 8px; height: 20px; border-radius: 8px; background: #333333;}
.monophoneD {overflow: hidden; z-index: 1; position: relative; top: -1554px; left: calc(50% - 119px); width: 8px; height: 50px; border-radius: 8px; background: #333333;}
.phoneCB1 {z-index: 5; background: #7b78c4; background: -moz-linear-gradient(45deg, #7b78c4 0%, #aa91b5 100%); background: -webkit-linear-gradient(45deg, #7b78c4 0%,#aa91b5 100%); background: linear-gradient(45deg, #7b78c4 0%,#aa91b5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b78c4', endColorstr='#aa91b5',GradientType=1 ); position: relative; top: 0; left: 0; width: 214px; height: 610px;}
.phoneCB2 {position: relative; z-index: 6; top: -360px; left: 0; width: 214px; height: 340px; background: rgba(255,255,255, 0.9); border-radius: 16px;}
.boxB2 {overflow: hidden; position: absolute; top: 110px; left: 0px; width: 100%; height: 500px;}
.logo {margin: 0; padding: 0; font-size: 20px; font-weight: 500; color: #616161;}
.phone {margin: 0; text-align: right; padding: 0; float: right; font-size: 20px; font-weight: 500; color: #646464; margin: 3px 0 0 0;}
.icon {margin: 0; text-align: left; padding: 0; float: right; font-size: 32px; font-weight: 800; color: #bdbdbd; margin: -7px 8px 0 0;}
.boxC1 {text-align: center; overflow: hidden; position: absolute; top: 1518px; left: 0; width: 100%; height: 60px;}
.boxC2 {text-align: center; overflow: hidden; position: absolute; top: 1554px; left: 0; width: 100%; height: 60px;}
.mobileOnly {display: block;}
.desctopOnly {display: none;}
.pcTxt {display: block;}
.mbTxt {display: none;}
}

/* smaller  phones*/
@media screen and (min-width: 300px) and (max-width: 480px) {
 html {background: #fbfbfb;}
 body {margin: 0; padding: 0; width: 100%; height: 708px; font-family: 'Roboto', sans-serif; font-size: 12px;}
 a {text-decoration: none;}
 a:hover{opacity: 0.8; color: #7d79c3;}
 h1 {text-align: center; margin: 2px 8px 26px 2px; font-size: 20px; font-weight: 800; line-height: 34px; letter-spacing: 1px; color: #424242; text-shadow: 1px 1px #fafafa;}
.p1 {margin: 16px 10px; text-align: center; font-size: 14px; font-weight: 400; line-height: 22px; color: #424242;}
.s2 {margin: 0; width: 100%; height: 20px; font-weight: 400; line-height: 28px; color: #888; font-size: 10px; text-align: center;}
.s3 {margin: 0; width: 100%; height: 20px; font-weight: 400; line-height: 28px; color: #888; font-size: 10px; text-align: center;}
.a2 {margin: 0; font-weight: 400; line-height: 28px; color: #888; font-size: 10px; text-align: center;}
.input[type="text"] {border-radius: 2px; border-top-left-radius: 28px; border-bottom-left-radius: 28px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.2); letter-spacing: 1.6px; position: absolute; top: 364px; left: calc(50% - 148px); margin: 12px 0; padding: 12px 16px; font-size: 14px; width: 150px; border: 1px solid #bdbdbd; }
.monoBtn { border-radius: 28px; border-top-left-radius: 0; border-bottom-left-radius: 0; cursor: pointer; box-shadow: 0 0 0 rgba(204,169,44, 0.8); border: 1px solid #f8a924; color: #fff; background: linear-gradient(to top, #f8a924, #FFC107); text-shadow: 0 0 4px rgba(0,0,0,0.2); margin: 12px 0; padding: 12px 4px 13px 4px; font-size: 13px; position: absolute; top: 364px; left: calc(50% + 30px); width: 128px;}
.monoBtn:hover {animation: none; background: linear-gradient(to top, #FFC107, #f8a924);}
.content {overflow: hidden; position: absolute; top: 0; left: 2%; width: 96%; height: 1600px;}
.boxA1 {overflow: hidden; position: absolute; top: 24px; left: 0; width: 100%; height: 52px; text-align: center;}
.boxA2 {display: none; overflow: hidden; position: absolute; top: 24px; left: 50%; width: 50%; height: 54px;}
.boxB1 {overflow: hidden; position: absolute; top: 656px; left: 0; width: 100%; height: 500px;}
.card {overflow: hidden; animation-name: slideRight; animation-duration: 1s; animation-delay: 1s; animation-fill-mode: forwards; animation-timing-function: ease-in-out; visibility: visible !important; border-radius: 10px; z-index: 1; position: relative; top: 240px; left: calc(50% - 140px); width: 220px; height: 198px; background: #212121;}
.chip {position: absolute; top: 69px; left: 31px; width: 53px; height: 50px;}
.cardLogo {position: absolute; top: 19px; left: 31px; width: 200px; height: 20px; font-size: 15px; font-weight: 800; background: linear-gradient(90deg, #f5f5f5 38%, #bdbdbd 0%, #bdbdbd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #ffa002;}
.cardNum {text-shadow: #555 0 -1px; position: absolute; top: 134px; left: 31px; width: 200px; height: 20px; font-size: 20px; font-weight: 200; color: #000;}
.paper {overflow: hidden; overflow: hidden; border-radius: 26px; z-index: 4; position: relative; top: -182px; left: calc(50% - 105px); width: 214px; height: 454px; overflow: hidden; background: yellow;}
.display {overflow: hidden; overflow: hidden; z-index: 3; position: absolute; top: 0px; left: calc(50% - 107px); width: 234px; height: 460px; overflow-x: hidden; overflow-y: scroll; background: #fff;}
.monobrow {overflow: hidden; z-index: 5; position: relative; top: -1114px; left: calc(50% - 64px); width: 130px; height: 30px;}
.monophone {overflow: hidden; overflow: hidden; z-index: 2; position: relative; top: -644px; left: calc(50% - 113px); width: 214px; height: 454px; border: 8px solid #202020; border-radius: 34px;}
.monophoneB {border: 4px solid #bdbdbd; overflow: hidden; overflow: hidden; z-index: 2; position: relative; top: -1150px; left: calc(50% - 116px); width: 228px; height: 468px; border-radius: 34px;}
.monophoneC {overflow: hidden; z-index: 1; position: relative; top: -1574px; left: calc(50% - 119px); width: 8px; height: 20px; border-radius: 8px; background: #333333;}
.monophoneD {overflow: hidden; z-index: 1; position: relative; top: -1554px; left: calc(50% - 119px); width: 8px; height: 50px; border-radius: 8px; background: #333333;}
.phoneCB1 {z-index: 5; background: #7b78c4; background: -moz-linear-gradient(45deg, #7b78c4 0%, #aa91b5 100%); background: -webkit-linear-gradient(45deg, #7b78c4 0%,#aa91b5 100%); background: linear-gradient(45deg, #7b78c4 0%,#aa91b5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b78c4', endColorstr='#aa91b5',GradientType=1 ); position: relative; top: 0; left: 0; width: 214px; height: 610px;}
.phoneCB2 {position: relative; z-index: 6; top: -360px; left: 0; width: 214px; height: 340px; background: rgba(255,255,255, 0.9); border-radius: 16px;}
.boxB2 {overflow: hidden; position: absolute; top: 110px; left: 0px; width: 100%; height: 500px;}
.logo {margin: 0; padding: 0; font-size: 20px; font-weight: 500; color: #616161;}
.phone {margin: 0; text-align: right; padding: 0; float: right; font-size: 20px; font-weight: 500; color: #646464; margin: 3px 0 0 0;}
.icon {margin: 0; text-align: left; padding: 0; float: right; font-size: 32px; font-weight: 800; color: #bdbdbd; margin: -7px 8px 0 0;}
.boxC1 {text-align: center; overflow: hidden; position: absolute; top: 1518px; left: 0; width: 100%; height: 60px;}
.boxC2 {text-align: center; overflow: hidden; position: absolute; top: 1554px; left: 0; width: 100%; height: 60px;}
.mobileOnly {display: block;}
.desctopOnly {display: none;}
.pcTxt {display: none;}
.mbTxt {display: block;}
}

/* watch and mini other */
@media screen and (max-width: 299px) {
.mobileOnly {display: block;}
.desctopOnly {display: none;}
.PcTxt {display: none;}
.MbTxt {display: block;}
}