html {
margin: 0;
padding:0;
height: 100%;
width: 100%;
}
body {
padding: 0px;
margin: 0px;
height: 100%;
width: 100%;
background: rgb(17,17,17);
overflow-x:hidden;
}
input:focus {
outline: none;
}
button:focus {
outline: none;
}
/* Fonts */
@font-face {
font-family: "MontLight";
src: url(fonts/Montserrat-Light.otf);
font-style: normal;
}
@font-face {
font-family: "MontThin";
src: url(fonts/Montserrat-Thin.otf);
}
@font-face {
font-family: "MontRegular";
src: url(fonts/Montserrat-Regular.otf);
}
@font-face {
font-family: "MontSemiBold";
src: url(fonts/Montserrat-SemiBold.otf);
}
@font-face {
font-family: "RobotoThin";
src: url(fonts/Roboto-Thin.ttf);
font-style: normal;
font-weight: 100;
}
@font-face {
font-family: "RobotoLight";
src: url(fonts/Roboto-Light.ttf);
font-style: normal;
font-weight: 100;
}
@font-face {
font-family: "RobotoRegular";
src: url(fonts/Roboto-Regular.ttf);
font-style: normal;
font-weight: 100;
}
/*Mobile Menu Try-Out1*/
a {
text-decoration: none;
color: rgb(185, 185, 185);
opacity:1;
font-family: montserrat-regular;
font-size: 2em;
font-weight: 400;
transition: 200ms;
}
a:hover {
color: #fff0d4;
}
ul {
list-style-type: none;
}
#menuToggle {
display: flex;
flex-direction: column;
position: relative;
top: 30px;
left: -30px;
width:100px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle input
{
display: flex;
width: 40px;
height: 32px;
position: absolute;
cursor: pointer;
opacity: 0;
z-index: 2;
}
#menuToggle span
{
display: flex;
width: 29px;
height: 2px;
margin-bottom: 5px;
position: relative;
background: #e0dace;
border-radius: 3px;
z-index: 1;
transform-origin: 5px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child
{
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-3px, -1px);
background: rgb(233, 233, 233);
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
#menu
{
position: absolute;
width: 250px;
height: 1000px;
box-shadow: 0 0 10px rgba(20, 20, 20, 0.9);
margin: -50px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: rgb(26, 25, 24);
background: linear-gradient(328deg, rgb(20, 19, 18) 0%, rgba(50,50,50,1) 100%);
border-right-style: solid;
border-right-width: 0.75px;
border-right-color: rgb(59, 59, 59);
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 20px 0;
transition-delay: 2s;
}
#menuToggle input:checked ~ ul
{
transform: none;
}
/* Header */
header {
position: fixed;
top: -5px;
width: 100%;
background: rgb(17,17,17);
height: 80px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: rgb(234, 223, 197);
z-index: 3;
padding-top: 5px;
}
header div#askingbox {
background-color: rgb(234, 223, 197);
opacity: 0.93;
width: 255px;
height: 55px;
float: right;
position: fixed;
position: relative; top: 94px; left: 103px;
clip-path: polygon(20% 0, 100% 0%, 100% 100%, 0% 100%);
cursor: pointer;
}
header div#askingtext {
opacity: 0.90;
width: 110px;
height: 30px;
float: right;
position: fixed;
position: relative; top: 112px; left: 265px;
font-size: 13pt;
font-family: roboto-light;
cursor: pointer;
}
header div#usericon {
background-image: url("images/account-01.svg");
width: 45px;
height: 45px;
float: right;
margin-top: 18px;
margin-right: 12px;
text-indent: -99999px;
cursor: pointer;
background-size: contain;
}
header div#ask {
background-image: url("images/ask-01.svg");
width: 43px;
height: 43px;
float: right;
position: relative; left: 53px; top: 101px;
text-indent: -9999999px;
z-index: 1;
cursor: pointer;
background-size: contain;
}
.site-nav {
position: absolute;
background: rgb(20, 20, 20);
color: #fff5de;
left:0px;
top: 00px;
width: 250px;
font-family: montserrat-light;
}
.site-nav ul {
margin: 0%;
padding: 0px;
list-style: none;
font-size: 30px;
}
.site-nav li {
padding: 40px 65px 50px 70px;
border-bottom: 1px solid rgb(27, 27, 27);
}
div#hamburger {
width: 53px;
height: 53px;
float: left;
margin: 13px 0px 0px 10px;
cursor: pointer;
}
div#toggle,
div#toggle::before,
div#toggle::after
{
content: '';
display: block;
height: 3.1px;
width: 2em;
position: relative; top: 25px; left: 10px;
background: #e0d3b4;
border-radius: 3px;
}
div#toggle::before {
position: absolute;
top: 7.5px;
left: 0;
}
div#toggle::after {
position: absolute;
top: -8px;
left: 0;
}
/* Background Image */
body {
background-image: url("images/NewBack-01.svg");
background-repeat: no-repeat;
background-size: cover;
background-position-y: -60px;
width: auto;
height: 3120px;
}
/* Body */
body div#walletbox {
background: linear-gradient(350deg, rgba(28,28,28,1) 0%, rgba(59,59,59,1) 99%);
border-radius: 12px;
width: 80%;
opacity: 0.9;
height: 250px;
position: relative;
top: 15px;
margin: 0 auto;
}
input[type="text"]::placeholder {
color: #1b1b1b;
opacity: 0.7;
}
/*First Wallet Text Line*/
body div#check1 {
position: relative;
top: 10px;
margin: 1% 2.5%;
width: 95%;
height: 78px;
}
body div#check1 div#spendable {
width: 30%;
height: 80%;
margin: 0.5% 0%;
position: absolute;
top: 5%;
font-size: 50px;
font-family: montserrat-semibold;
color: #fff0d4;
}
body div#check1 div#value {
width: 50%;
text-align: end;
height: 80%;
margin: 0% 0%;
position: absolute;
color: #f9f6f2;
top: 4%;
left: 38%;
font-size: 65px;
font-family: montserrat-light;
}
body div#check1 div#epic {
text-align: end;
width: 25%;
height: 80%;
margin: 0% 0%;
position: absolute;
top: 25%;
right: -1.5%;
font-size: 45px;
font-weight: -50;
font-family: montserrat-semibold;
color: #f9eee1;
}
/*Second Wallet Text Line*/
body div#check2 {
position: relative;
top: 18px;
margin: 1% 2.5%;
width: 95%;
height: 60px;
}
body div#check2 div#total {
width: 30%;
height: 80%;
margin: 0.5% 0%;
position: absolute;
top: -10%;
font-size: 50px;
font-family: montserrat-light;
color: #fcf5e3;
}
body div#check2 div#value2 {
width: 45%;
height: 80%;
margin: 0% 0%;
position: absolute;
text-align: end;
top: 10%;
left: 55%;
font-size: 50px;
font-family: montserrat-light;
color: #f9f6f2;
}
/*Third Wallet Text Line*/
body div#check3 {
position: relative;
top: 18px;
margin: 1% 2.5%;
width: 95%;
height: 45px;
}
body div#check3 div#immature {
width: 30%;
height: 80%;
margin: 0.5% 0%;
position: absolute;
top: 0%;
font-size: 40px;
font-family: montserrat-light;
color: #fcfbf5;
}
body div#check3 div#value3 {
width: 30%;
height: 80%;
margin: 0% 0%;
position: absolute;
top: 10%;
left: 70%;
text-align: end;
font-size: 42px;
font-family: montserrat-light;
color: #f9f6f2;
}
/* Box Shapes */
body section#shape div#wrapbox {
position: relative;
width: 90%;
height: 300px;
/* top: 210px; */
top:90px;
margin: 0 auto;
text-align: center;
font-family: montserrat-regular;
}
body section#shape div#wrapbox div#box1 {
/*body div#box1 {*/
background-image: url("images/boxblue-01.svg");
width: 225px;
height: 225px;
position: absolute;
left: 100px;
display: flex;
font-size: 50px;
font-weight: 400;
background-size: cover;
background-repeat: no-repeat;
}
div#Box1Value {
margin: auto;
transform: translate(-5%, 0%);
text-align: center;
}
div#Finalization {
margin: auto;
color: #a0cff2;
padding: 0;
position: absolute;
top: 240px;
left: -60px;
width: 400px;
font-size: 35px;
}
body section#shape div#wrapbox div#box2 {
background-image: url("images/boxred-01.svg");
width: 225px;
height: 225px;
position: absolute;
left: 50%;
transform: translate(-50%, 125%);
z-index: 1;
display: flex;
font-size:50px;
font-weight: 400;
background-size: cover;
}
div#Box2Value {
margin: auto;
transform: translate(-5%, 0%);
}
div#Locked {
margin: auto;
color: #f48787;
padding: 0;
position: absolute;
top: 240px;
left: -80px;
width: 400px;
font-size: 35px;
font-family: Montserrat-regular;
font-weight: 550;
}
body section#shape div#wrapbox div#box3 {
background-image: url("images/violetbox-01.svg");
width: 225px;
height: 225px;
position: absolute;
right: 100px;
font-weight: 400;
font-size: 50px;
display: flex;
background-size: cover;
}
div#Box3Value {
margin: auto;
}
div#Confirmation {
margin: auto;
color: #7a97dd;
padding: 0;
position: absolute;
top: 240px;
left: -100px;
width: 400px;
font-size: 35px;
}
body section#shape div#wrapbox2 {
position: relative;
width: 90%;
height: 300px;
top: 110px;
margin: 0 auto;
text-align: center;
font-family: montserrat-regular;
}
body section#shape div#wrapbox2 div#box4 {
background-image: url("images/boxyellow-01.svg");
width: 225px;
height: 225px;
position: absolute;
left: 00%;
top: 100%;
font-size: 50px;
font-weight: 400px;
display: flex;
background-size: contain;
}
div#Box4Value {
margin: auto;
transform: translate(-5%, 0%);
}
div#SMS {
margin: auto;
color: #f9f4ea;
padding: 0;
position: absolute;
top: 240px;
left: -90px;
width: 400px;
font-size: 35px;
}
body section#shape div#wrapbox2 div#box5 {
background-image: url("images/boxyellow-01.svg");
width: 225px;
height: 225px;
position: absolute;
right: 0%;
top: 100%;
font-size: 50px;
font-weight: 400px;
display: flex;
background-size: contain;
}
div#Box5Value {
margin: auto;
transform: translate(-5%, 0%);
}
div#Block {
margin: auto;
color: #f9f4ea;
padding: 0;
position: absolute;
top: 240px;
left: -90px;
width: 400px;
font-size: 35px;
}
/*Tab Section*/
hr#tabline {
position: relative;
top:120px;
left:0px;
width: 100%;
border-style: none;
height: 2px;
background-color: rgb(255, 230, 198);
}
ul#navigation-tab {
width: 100%;
position: absolute;
top: 1225px;
list-style: none;
display: flex;
font-family: montserrat-regular;
color: #f9f0de;
font-size: 25px;
text-align: center;
}
li:hover {
color: white;
cursor: pointer;
}
li:active {
font-family: montserrat-regular;
font-weight: 400;
color: #fcf4e6;
font-size: 26px;
top: 1238px;
}
li {
flex: 1;
}
/* Vault Section */
section#Vault {
position: relative;
top: 220px;
width: 100%;
height: 650px;
}
section#Vault div#vaultimage {
background-image: url("images/epicvault-01.svg");
width: 325px;
text-indent: -9999px;
height: 305px;
margin: auto 20%;
position: relative;
top: 100px;
left: 0;
background-size: contain;
}
section#Vault div#VaultSlogan {
width: 600px;
height: 60px;
position: absolute;
color: #f4e4d0;
font-family: montserrat-semibold;
top: 150px;
left: 25%;
text-align: end;
font-size: 45px;
}
section#Vault div#VaultValue {
width: 45%;
height: 100px;
position: absolute;
color:#f7ede2;
font-family: montserrat-light;
font-size: 90px;
top: 220px;
left: 34%;
text-align: end;
}
div#VaultValue span {
font-size: 80px;
color: rgb(253, 245, 241);
}
/* Transaction History Section */
section#History{
background-color: #1b1b1b;
border-radius: 10px;
margin: 25px 1%;
position: relative;
top: 220px;
width: 98%;
height: 650px;
font-size: 2vw;
}
div#Titles {
text-shadow: 1px 6px 4px rgba(0,0,0,0.2),
0px -5px 10px rgba(255,255,255,0.1);
color: white;
width: 100%;
height: 50px;
margin: 0px auto;
position: relative;
top: 20px;
left: 0px;
display: flex;
font-family: roboto-light;
}
div#TitleId {
width: 7%;
margin: auto;
text-align: center;
}
div#TitleAct {
width: 2%;
margin: auto;
text-align: center;
}
div#TitleOperation {
width: 21%;
margin: auto;
text-align: center;
}
div#TitleConfirmation {
width: 33%;
margin: auto;
text-align: center;
}
div#TitleFee {
width: 17%;
margin: auto;
text-align: center;
}
div#TitleMessage {
width: 20%;
margin: auto;
text-align: center;
}
div.Table {
background-color: #202020;
border-radius: 10px;
height: 90px;
width: 95%;
margin: 35px auto;
display: flex;
font-family: montserrat-regular;
font-size: 2vw;
box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.83);
}
div.Table1 {
background-color: #202020;
border-radius: 10px;
height: 90px;
width: 95%;
margin: 35px auto;
display: flex;
font-family: montserrat-regular;
font-size: 2vw;
box-shadow: 0px 0px 13px -1px rgba(0,0,0,0.83);
}
div.Id-Value {
font-family: montserrat-regular;
font-weight: 400;
text-shadow: 0px 0px 5px rgba(236, 236, 236, 0.7);
width: 7%;
color: #fff2db;
margin: auto;
text-align: center;
}
div.Act-Value {
font-family: montserrat-regular;
font-weight: 400;
text-shadow: 0px 0px 5px rgba(236, 236, 236, 0.7);
width: 2%;
color: #fff2db;
margin: auto;
text-align: center;
}
div.Operation-Value {
width: 20%;
color: #fff6e3;
margin: auto;
text-align: center;
font-size: 2.2vw;
}
span.epic {
color: #ffebca;
font-family: montserrat-light;
font-size: 2vw;
}
div.Confirmation-Value {
width: 17%;
color: #e7e5e5;
margin: auto;
text-align: center;
}
div.Time-Value {
width: 16%;
color: #e7e5e5;
margin: auto;
text-align: center;
}
div.Fee-Value {
width: 17%;
color: #fff6e3;
margin: auto;
text-align: center;
font-size: 2.2vw;
}
div.Message-Value {
width: 18%;
color: #ffffff;
margin: auto;
text-align: center;
}
/* Send Icon Section */
section#SendIcon {
position: relative;
top: 200px;
width: 100%;
height: 650px;
}
div#IconSlogan {
position: relative;
top: 28px;
left: 0px;
height: 55px;
width: 75%;
margin: 0px auto;
Font-size: 45px;
text-align: center;
font-family: roboto-regular;
color: #f7ede2;
}
div#SendIconWrap {
display: flex;
position: relative;
top: 45px;
width: 90%;
height: 350px;
margin: 0 5%;
flex-wrap: wrap;
font-family: roboto-regular;
color: #f7eddf;
font-size: 20px;
}
div#Icon1 {
background-image: url("images/phone.svg");
cursor: pointer;
width: 150px;
height: 150px;
margin: 20px auto;
background-size: contain;
}
div#Phone {
text-align: center;
width: 100%;
height: 30px;
margin-top: 110%;
}
div#Icon2 {
cursor: pointer;
background-image: url("images/mail.svg");
width: 150px;
height: 150px;
margin: 20px auto;
background-size: contain;
}
div#EMail {
text-align: center;
width: 100%;
height: 30px;
margin-top: 110%;
}
div#Icon3 {
cursor: pointer;
background-image: url("images/wallet.svg");
width: 150px;
height: 150px;
margin:20px auto;
background-size: contain;
}
div#Wallet {
text-align: center;
width: 120%;
height: 30px;
margin: 110% 10% 0 -10%;
}
div#Icon4 {
cursor: pointer;
background-image: url("images/keybase.svg");
width: 150px;
height: 150px;
margin: 20px auto;
background-size: contain;
}
div#Keybase {
text-align: center;
width: 100%;
height: 30px;
margin-top: 110%;
}
div#Icon5 {
cursor: pointer;
background-image: url("images/folder.svg");
width: 150px;
height: 150px;
margin: 20px auto;
background-size: contain;
}
div#Folder {
text-align: center;
width: 140%;
height: 30px;
margin: 110% 20% 0 -20%;
}
div#Icon5:active {
width: 155px;
height: 155px;
}
div#Icon4:active {
width: 155px;
height: 155px;
}div#Icon3:active {
width: 155px;
height: 155px;
}div#Icon2:active {
width: 155px;
height: 155px;
}div#Icon1:active {
width: 155px;
height: 155px;
}
/*Send Epic Mail Section*/
section#SendMail input::placeholder {
color: #1b1b1b;
opacity: 0.8;
}
section#SendMail {
position: relative;
top: -110px;
height: 500px;
width: 100%;
}
input#HowMuch {
background: linear-gradient(350deg, rgba(255,246,226,1) 1%, rgba(235,214,185,1) 100%);
position: absolute;
left: 10%;
top: 75px;
width: 35%;
font-size: 30px;
height: 60px;
border-radius: 5px;
border-style: none;
background-color: #f1e8d1;
font-family: montserrat-regular;
font-weight: 400;
padding-left: 10px;
}
input#account {
background: linear-gradient(350deg, rgba(255,246,226,1) 1%, rgba(235,214,185,1) 100%);
/* position: absolute;
left: 10%;
top: 75px;
width: 35%;
*/
font-size: 30px;
height: 60px;
border-radius: 5px;
border-style: none;
background-color: #f1e8d1;
font-family: montserrat-regular;
font-weight: 400;
padding-left: 10px;
width: 60%;
}
input#password {
background: linear-gradient(350deg, rgba(255,246,226,1) 1%, rgba(235,214,185,1) 100%);
/* position: absolute;
left: 10%;
top: 75px;
width: 35%;
*/
margin-top: 20px;
font-size: 30px;
height: 60px;
border-radius: 5px;
border-style: none;
background-color: #f1e8d1;
font-family: montserrat-regular;
font-weight: 400;
padding-left: 10px;
width: 60%;
}
button#but1 {
background: linear-gradient(350deg, rgba(255,246,226,1) 1%, rgba(235,214,185,1) 100%);
/* position: absolute;
left: 10%;
top: 75px;
width: 35%;
*/
margin-top: 20px;
font-size: 30px;
height: 60px;
border-radius: 5px;
border-style: none;
background-color: #f1e8d1;
font-family: montserrat-regular;
font-weight: 400;
padding-left: 10px;
width: 60%;
}
button#but2 {
background: linear-gradient(350deg, rgba(255,246,226,1) 1%, rgba(235,214,185,1) 100%);
/* position: absolute;
left: 10%;
top: 75px;
width: 35%;
*/
margin-top: 20px;
font-size: 30px;
height: 60px;
border-radius: 5px;
border-style: none;
background-color: #f1e8d1;
font-family: montserrat-regular;
font-weight: 400;
padding-left: 10px;
width: 60%;
}
button#butrespass {
background: linear-gradient(350deg, rgba(255,246,226,1) 1%, rgba(235,214,185,1) 100%);
/* position: absolute;
left: 10%;
top: 75px;
width: 35%;
*/
margin-top: 20px;
font-size: 30px;
height: 60px;
border-radius: 5px;
border-style: none;
background-color: #f1e8d1;
font-family: montserrat-regular;
font-weight: 400;
padding-left: 10px;
width: 60%;
}
div#Epic-HowMuch {
font-family: montserrat-semibold;
font-size: 26px;
color: rgb(51, 50, 50);
position: absolute;
top: 90px;
right: 56%;
}
label#HowMuchLabel {
position: absolute;
left: 10.5%;
top: 50px;
font-family: roboto-light;
color: #eae7e5;
font-size: 20px;
}
label#RecipientLabel {
position: absolute;
left: 50%;
top: 50px;
font-family: roboto-light;
color: #eae7e5;
font-size: 20px;
}
input#Recipient {
background: linear-gradient(350deg, rgba(255,246,226,1) 1%, rgba(235,214,185,1) 100%);
position: absolute;
top: 75px;
right: 10%;
width: 40%;
height: 60px;
border-radius: 5px;
border-style: none;
background-color: #f1e8d1;
font-family: montserrat-regular;
font-size: 30px;
font-weight: 400;
padding-left: 10px;
}
input#Recipient::placeholder {
color: #1b1b1b;
opacity: 0.8;
}
form.EpicMessage{
position: absolute;
top: 225px;
resize: none;
width: 80%;
height: 70px;
margin: 0 10%;
}
textarea#EpicMessageBox {
background: linear-gradient(350deg, rgba(255,246,226,1) 1%, rgba(235,214,185,1) 100%);
position: relative;
top: -20px;
resize: none;
width: 100%;
height: 90px;
border-radius: 5px;
border-style: none;
background-color: #e9dec4;
font-family: montserrat-regular;
font-size: 30px;
font-weight: 400;
padding: 5px;
}
textarea#EpicMessageBox::placeholder {
color: #1b1b1b;
opacity: 0.8;
}
textarea#EpicMessageBox:focus {
outline-style: none;
}
div#EpicMessageSlogan {
position: absolute;
top: -48px;
left: 12px;
font-family: roboto-light;
color: #eae7e5;
font-size: 20px;
}
input#EpicCode {
background: linear-gradient(350deg, rgba(255,246,226,1) 1%, rgba(235,214,185,1) 100%);
position: absolute;
top: 370px;
resize: none;
width: 80%;
height: 60px;
margin: 0 10%;
border-radius: 5px;
border-style: none;
background-color: #f1e8d1;
font-family: montserrat-regular;
padding-left: 20px;
font-size: 24px;
color: #1d1d1d;
}
input#Code::placeholder {
color: #1b1b1b;
opacity: 0.8;
}
label#CodeLabel {
position: absolute;
top:346px;
left: 10.5%;
font-family: roboto-light;
color: #eae7e5;
font-size: 20px;
}
button#ContinueEpic {
position: absolute;
top:315px;
right: 10%;
width: 110px;
height: 40px;
font-size: 18px;
border-style: none;
font-family: montserrat-semibold;
border-radius: 5px;
color: rgb(29, 29, 29);
background: linear-gradient(350deg, rgba(234,222,196,1) 2%, rgba(255,205,173,1) 100%);
}
button#ContinueEpic:hover {
color: rgb(49, 47, 47);
cursor: pointer;
box-shadow: 0px 0px 7px 0.25px rgba(234,222,196,0.4)
}
button#SendEpicButton {
background: rgb(214,173,108);
background: linear-gradient(319deg, rgba(242,207,150,1) 0%, rgba(255,231,182,1) 100%); border-style: none;
font-family: montserrat-semibold;
font-size: 22.5px;
border-radius: 5px;
color: rgb(29, 29, 29);
width: 230px;
height: 145px;
position: absolute;
top: 475px;
left: 44%;
}
button#SendEpicButton:hover {
color: rgb(49, 47, 47);
cursor: pointer;
box-shadow: 0px 0px 7px 0.25px rgba(234,222,196,0.4)
}
/* My Cards */
section.MyCards {
position: relative;
top: 442.5px;
width: 100%;
height: 650px;
font-size: 2vw;
}
input#MainCardBox{
position: relative;
height: 75px;
width: 75%;
margin: 40px 12.5%;
border-radius: 5px;
border-style: none;
background-color: #dad0ba;
font-family: montserrat-light;
text-align: center;
font-size: 50px;
color: #0a0a0a;
}
/* Credit Cards CSS*/
*,
*::before,
*::after {
box-sizing: border-box;
}
div#MyCardsTotalWrap {
position: relative;
top: 285px;
}
/*--------------------
Buttons MyCard
--------------------*/
.btn {
display: block;
background: #f7dea2;
color: white;
text-decoration: none;
margin: 20px 0;
padding: 15px 15px;
border-radius: 5px;
position: relative;
}
.btn::after {
content: '';
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all .2s ease-in-out;
box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0), 0 3px 3px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
.btn:hover::after {
background: rgba(0, 0, 0, 0.1);
box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.2);
}
/*--------------------
Form
--------------------*/
div.checkout {
position: relative;
top: -400px;
width: 40%;
}
div#Parent-Number {
position: absolute;
width: 100%;
bottom: 240px;
left: 3%;
}
input.input-cart-number{
padding-left: 10px;
background: #C9CCD3;
background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
background-blend-mode: lighten;
opacity: 0.8;
border-style: none;
width: 20%;
height: 50PX;
border-radius: 5px;
font-family: montserrat-regular;
font-size: 35px;
color: #0a0a0a;
}
input#card-holder {
background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
opacity: 0.8;
border-style: none;
border-radius: 5px;
width: 85%;
height: 50px;
position: absolute;
bottom: 130px;
left: 15px;
font-family: montserrat-regular;
font-size: 35px;
color: #0a0a0a;
padding: 5px 10px;
}
label#Holder {
position: absolute;
bottom: 185px;
font-family: roboto-light;
color: #eae7e5;
font-size: 28px;
left: 3%;
}
div.select {
display: inline-block;
position: absolute;
bottom: 30px;
left: 30%;
width: 20%;
height: 45px;
}
div.select1 {
display: inline-block;
position: absolute;
bottom: 30px;
left: 3%;
width: 20%;
height: 45px;
}
select#card-expiration-month {
width: 100%;
height: 100%;
background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
opacity: 0.8;
border-style: none;
font-family: montserrat-regular;
font-size: 30px;
color: #0a0a0a;
}
select#card-expiration-year {
width: 100%;
height: 100%;
background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
opacity: 0.8;
border-style: none;
font-family: montserrat-regular;
font-size: 30px;
color: #0a0a0a;
}
label#expiration-label {
position: absolute;
bottom: 80px;
left: 20px;
font-family: roboto-light;
color: #eae7e5;
font-size: 28px;
width: 200px;
}
input#card-ccv {
padding: 5px 10px;
background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
opacity: 0.85;
border-style: none;
border-radius: 5px;
position: absolute;
bottom: 30px;
right: 12%;
font-family: montserrat-regular;
font-size: 35px;
color: #0a0a0a;
width: 30%;
height: 45px;
}
label#label-ccv {
position: absolute;
bottom: 80px;
right: 30.5%;
font-family: roboto-light;
color: #eae7e5;
font-size: 28px;
}
div#Number-Label {
position: absolute;
bottom: 55px;
font-family: roboto-light;
color: #eae7e5;
font-size: 28px;
}
/*--------------------
Checkout
--------------------*/
.checkout {
margin: 150px auto 30px;
position: relative;
left: 300px;
top: 50px;
width: 50%;
height: 400px;
}
/*--------------------
Credit Card
--------------------*/
.credit-card-box {
-webkit-perspective: 1000;
perspective: 1000;
width: 400px;
height: 280px;
position: relative;
top: 100px;
left: -55%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.credit-card-box:hover .flip, .credit-card-box.hover .flip {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.credit-card-box .front,
.credit-card-box .back {
width: 400px;
height: 250px;
border-radius: 15px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background: linear-gradient(350deg, rgba(28,28,28,1) 0%, rgba(59,59,59,1) 99%);
position: absolute;
color: #fff;
font-family: Inconsolata;
top: 0;
left: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}
.credit-card-box .front::before,
.credit-card-box .back::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url("images/continents-of-earth.svg") no-repeat center;
background-size: cover;
opacity: .14;
}
.credit-card-box .flip {
transition: 0.7s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
.credit-card-box .logo {
position: absolute;
top: 20px;
right: 20px;
width: 60px;
}
.credit-card-box .logo svg {
width: 100%;
height: auto;
fill: #fff;
}
.credit-card-box .front {
z-index: 2;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.credit-card-box .back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.credit-card-box .back .logo {
top: 185px;
display: none;
}
.credit-card-box .chip {
position: absolute;
width: 60px;
height: 45px;
top: 40px;
left: 20px;
background-image: url("images/chip-01.svg");
background-repeat: no-repeat;
border-radius: 8px;
background-size: contain;
}
.credit-card-box .chip::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 80%;
height: 70%;
border-radius: 5px;
}
.credit-card-box .strip {
background: linear-gradient(135deg, #1a1a1a, #0f0e0e);
position: absolute;
width: 100%;
height: 50px;
top: 30px;
left: 0;
}
.credit-card-box .number {
position: absolute;
margin: 0 auto;
top: 103px;
left: 19px;
font-size: 38px;
}
.credit-card-box label {
font-size: 10px;
letter-spacing: 1px;
text-shadow: none;
text-transform: uppercase;
font-weight: normal;
opacity: 0.5;
display: block;
margin-bottom: 3px;
}
.credit-card-box .card-holder,
.credit-card-box .card-expiration-date {
position: absolute;
margin: 0 auto;
top: 180px;
left: 19px;
font-size: 22px;
text-transform: capitalize;
}
.credit-card-box .card-expiration-date {
text-align: right;
left: auto;
right: 20px;
}
.credit-card-box .ccv {
height: 36px;
background: #fff;
width: 91%;
border-radius: 5px;
top: 130px;
left: 0;
right: 0;
position: absolute;
margin: 0 auto;
color: #000;
text-align: right;
padding: 10px;
}
.credit-card-box .ccv label {
margin: -25px 0 14px;
color: #fff;
}
div#WrapCard2 {
position: relative;
top: -145px;
height: 500px;
width: 80%;
margin: 0 10%;
}
div#WrapCard2 input {
font-family: montserrat-regular;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
font-size: 30px;
color: #0a0a0a;
}
input#UID {
background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
opacity: 0.74;
border-radius: 5px;
border-style: none;
width: 95%;
margin: 0 2.5%;
position: absolute;
top: 20px;
height: 50px;
}
label#UID-Label {
position: absolute;
top: -7px;
left: 2.5%;
font-family: roboto-light;
font-size: 24px;
color: #e7e6e5;
}
input#Hour-Input {
background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
border-radius: 5px;
opacity: 0.74;
border-style: none;
width: 95%;
margin: 0 2.5%;
position: absolute;
top: 105px;
height: 50px;
}
label#Hour-Label {
position: absolute;
top: 78px;
left: 2.5%;
font-family: roboto-light;
font-size: 24px;
color: #e7e6e5;
}
div.EpicValue {
font-family: montserrat-semibold;
font-size: 26px;
color: rgb(51, 50, 50);
}
div#EpicValue1 {
position: absolute;
top: 116.5px;
right: 5%;
}
div#EpicValue2 {
position: absolute;
top: 202.8px;
right: 5%;
}
div#EpicValue3 {
position: absolute;
top: 412px;
right: 5%;
z-index: 1;
}
input#Full {
background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
border-radius: 5px;
opacity: 0.74;
border-style: none;
width: 95%;
margin: 0 2.5%;
position: absolute;
top: 190px;
height: 50px;
}
label#Full-Label {
position: absolute;
top: 163px;
left: 2.5%;
font-family: roboto-light;
font-size: 24px;
color: #e7e6e5;
}
button#MyCardButton {
position: absolute;
top: 265px;
right: 2.5%;
background: rgb(214,173,108);
background: linear-gradient(319deg, rgba(242,207,150,1) 0%, rgba(255,231,182,1) 100%); border-style: none;
font-family: montserrat-semibold;
font-size: 22.5px;
border-radius: 5px;
color: rgb(29, 29, 29);
width: 130px;
height: 45px;
}
button#MyCardButton:hover {
color: rgb(49, 47, 47);
cursor: pointer;
box-shadow: 0px 0px 7px 0.25px rgba(234,222,196,0.4)
}
div#SmallText-One {
position: absolute;
font-family: Roboto-thin;
color: #e8e8e8;
font-size: 20px;
top: 255px;
margin: 0 2.5%;
width: 95%;
height: 25px;
}
div#SmallText-Two {
font-family: Roboto-light;
color: #f48787;
font-size: 20px;
position: absolute;
top: 290px;
margin: 0 2.5%;
width: 95%;
height: 25px;
}
div#Uid-App {
font-family: montserrat-light;
font-size: 35px;
color: beige;
position: absolute;
top: 375px;
margin: 0 2.5%;
width: 75%;
height: 40px;
left: 15%;
}
button#UID {
position: absolute;
top: 375px;
width: 125px;
height: 45px;
right: 25%;
-moz-box-shadow: 0px -1px 13px -5px #b8b8b8;
-webkit-box-shadow: 0px -1px 13px -5px #b8b8b8;
box-shadow: 0px -1px 13px -5px #b8b8b8;
background-color:transparent;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border:2.5px solid #ffd8a7;
display:inline-block;
cursor:pointer;
color:#fff5de;
font-family:montserrat-regular;
font-size:22px;
text-decoration:none;
text-shadow:0px 0px 46px #7a7a7a;
}
button#UID:hover {
background-color:transparent;
}
button#UID:active {
border:2.5px solid #a89883;
color: #c4bba7;
}
div#WrapCard3 {
position: relative;
top: -125px;
height: 520px;
width: 80%;
margin: 0 10%;
z-index: 2;
}
div#WrapCard3 input {
font-family: montserrat-regular;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
font-size: 30px;
color: #0a0a0a;
}
div#BullionSlogan {
position: absolute;
top: 0px;
left:2.5%;
width: 20%;
height: 55px;
font-family: montserrat-regular;
color: #f4e4d0;
font-size: 50px;
}
input#ReverseImage {
opacity: 0.85;
background-color: black;
width: 45%;
font-family: montserrat-regular;
font-size:25px;
height: 50px;
position: absolute;
left:2.5%;
top: 105px;
border-radius: 5px;
}
label#FrontImageLabel {
left: 2.5%;
position: absolute;
top: 167px;
font-family: roboto-light;
font-size: 24px;
color: #e7e6e5;
}
label#ReverseImageLabel {
left: 2.5%;
position: absolute;
top: 80px;
font-family: roboto-light;
font-size: 24px;
color: #e7e6e5;
}
input#FrontImage {
background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
font-family: montserrat-regular;
font-size: 25px;
opacity: 0.85;
width: 45%;
height: 50px;
position: absolute;
left:2.5%;
top: 195px;
border-radius: 5px;
}
input#TitleBullion{
background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
width: 95%;
opacity: 0.9;
border-radius: 5px;
border-style: none;
height: 50px;
position: absolute;
left:2.5%;
top: 305px;
font-family: montserrat-light;
font-size: 35px;
color: #0a0a0a;
}
input#TitleBullion::placeholder {
font-size: 29px;
}
input#ValueBullion{
background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
border-radius: 5px;
border-style: none;
opacity: 0.9;
width: 95%;
height: 50px;
position: absolute;
left:2.5%;
top: 400px;
font-family: montserrat-light;
font-size: 35px;
color: #0a0a0a;
}
label#LabelTitleBullion {
left: 2.5%;
position: absolute;
top: 280px;
font-family: roboto-light;
font-size: 24px;
color: #e7e6e5;
}
label#LabelValueBullion {
left: 2.5%;
position: absolute;
top: 372px;
font-family: roboto-light;
font-size: 24px;
color: #e7e6e5;
}
button#EndSave {
position: absolute;
top: 475px;
right: 2.5%;
bottom: 20px;
width: 105px;
height: 45px;
border-radius: 0px;
font-family: Montserrat-regular;
-moz-box-shadow: 0px -1px 13px -5px #b8b8b8;
-webkit-box-shadow: 0px -1px 13px -5px #b8b8b8;
box-shadow: 0px -1px 13px -5px #b8b8b8;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #eadfc5), color-stop(1, #f7dda2));
background:-moz-linear-gradient(top, #eadfc5 5%, #f7dda2 100%);
background:-webkit-linear-gradient(top, #eadfc5 5%, #f7dda2 100%);
background:-o-linear-gradient(top, #eadfc5 5%, #f7dda2 100%);
background:-ms-linear-gradient(top, #eadfc5 5%, #f7dda2 100%);
background:linear-gradient(to bottom, #eadfc5 5%, #f7dda2 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eadfc5', endColorstr='#f7dda2',GradientType=0);
background-color:#eadfc5;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
display:inline-block;
cursor:pointer;
color:#333333;
font-family: montserrat-regular;
font-size:25px;
text-decoration:none;
text-shadow:0px 0px 46px #7a7a7a;
cursor: pointer;
}
input#ReverseImage {
background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);}
@media only screen and (max-width: 502px) {
div#Icon2:active {
width: 150px;
height: 150px;
}
div#Icon1:active {
width: 150px;
height: 150px;
}
div#Icon3:active {
width: 150px;
height: 150px;
}
}
/* Small Devices */
@media only screen and (max-width: 647px) {
header div#askingbox {
display: none;
}
header div#ask {
display: none;
}
header div#ask2 {
background-image: url("images/ask-02.svg");
width: 50px;
height: 50px;
float: right;
margin-top: 16px;
margin-right: 14px;
text-indent: -99999px;
opacity: 0.95;
background-size: contain;
}
body {
background-image: url("images/NewBack-01.svg");
background-repeat: no-repeat;
background-size: cover;
background-position-y: -60px;
width: auto;
height: AUTO
}
div#walletbox {
width: 95%;
}
ul#navigation-tab {
width: 100%;
position: absolute;
top: 1220px;
padding: 0;
list-style: none;
display: flex;
font-family: montserrat-regular;
color: #f9f0de;
font-size: 25px;
text-align: center;
}
li {
flex: 0.75;
}
li#li1 {
flex: 1;
margin-left: 0;
}
li#li4 {
flex: 1;
}
}
/* Laptops */
@media only screen and (min-width: 992px) {
body section#shape div#wrapbox div#box1 {
width: 250px;
height: 250px;
position: absolute;
left: 0px;
}
body section#shape div#wrapbox div#box2 {
width: 250px;
height: 250px;
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
}
body section#shape div#wrapbox div#box3 {
width: 250px;
height: 250px;
position: absolute;
right: 0px;
}
body section#shape div#wrapbox2 div#box4 {
width: 250px;
height: 250px;
position: absolute;
left: 20%;
top: 0%;
}
body section#shape div#wrapbox2 div#box5 {
width: 250px;
height: 250px;
position: absolute;
right: 20%;
top: 0%;
}
}
/* Large Laptops */
@media only screen and (min-width: 1200px) {
header div#ask2 {
display: none;}
section div#MobileSlogan {
display:none;
}section div#MobileSlogan1 {
display:none;
}
body p#importantp {
position: relative;
top: 230px;
margin: 0 auto;
height: 50px;
width: 70%;
}
body p#passpanel {
position: relative;
top: 260px;
margin: 0 auto;
height: 50px;
width: 70%;
}
}
/* Break Points For Boxes */
@media only screen and (max-width: 560px) {
body section#shape div#wrapbox div#box1 {
width: 200px;
height: 200px;
position: absolute;
left: 0px;
}
body section#shape div#wrapbox div#box2 {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
transform: translate(-50%, 125%);
}
body section#shape div#wrapbox div#box3 {
width: 200px;
height: 200px;
position: absolute;
right: 0px;
}
body section#shape div#wrapbox2 div#box4 {
width: 200px;
height: 200px;
position: absolute;
left: 0%;
top: 75%;
}
body section#shape div#wrapbox2 div#box5 {
width: 200px;
height: 200px;
position: absolute;
right: 0%;
top: 75%;
}
}
/*Box Break Points2*/
@media screen and (max-width: 992px) {
div#Finalization {
top: 220px;
left: 0px;
width: 200px;
font-size: 35px;
}
div#Confirmation {
margin: auto;
color: #7a97dd;
padding: 0;
position: absolute;
top: 220px;
left: 0px;
width: 240px;
font-size: 35px;
}
body section#shape div#wrapbox2 div#box4 {
background-image: url("images/boxyellow-01.svg");
width: 225px;
height: 225px;
position: absolute;
left: 11%;
top: 70%;
font-size: 50px;
font-weight: 400px;
display: flex;
background-size: contain;
}
div#Box4Value {
margin: auto;
transform: translate(-5%, 0%);
}
div#SMS {
margin: auto;
color: #f9f4ea;
padding: 0;
position: absolute;
top: 220px;
left: -90px;
width: 400px;
font-size: 35px;
}
body section#shape div#wrapbox2 div#box5 {
background-image: url("images/boxyellow-01.svg");
width: 225px;
height: 225px;
position: absolute;
right: 11%;
top: 70%;
font-size: 50px;
font-weight: 400px;
display: flex;
background-size: contain;
}
div#Box5Value {
margin: auto;
transform: translate(-5%, 0%);
}
div#Block {
margin: auto;
color: #f9f4ea;
padding: 0;
position: absolute;
top: 220px;
left: -90px;
width: 400px;
font-size: 35px;
}
div#Locked {
margin: auto;
color: #f48787;
padding: 0;
position: absolute;
top: 220px;
left: -92px;
width: 400px;
font-size: 35px;
font-family: Montserrat-regular;
font-weight: 550;
}
}
@media screen and (max-width: 768px) {
body {
background-image: url("images/Mobile-Background-01.svg");
background-repeat: no-repeat;
background-size: cover;
background-position-y: 200px;
width: auto;
height: 3120px;
}
div#Finalization {
top: 220px;
left: 0px;
width: 200px;
font-size: 35px;
}
div#Confirmation {
margin: auto;
color: #7a97dd;
padding: 0;
position: absolute;
top: 220px;
left: 0px;
width: 240px;
font-size: 35px;
}
body section#shape div#wrapbox div#box3 {
background-image: url("images/violetbox-01.svg");
width: 220px;
height: 220px;
position: absolute;
right: 30px;
font-weight: 400;
font-size: 50px;
display: flex;
background-size: contain;
}
body section#shape div#wrapbox div#box1 {
background-image: url("images/boxblue-01.svg");
width: 225px;
height: 225px;
position: absolute;
left: 30px;
display: flex;
font-size: 50px;
font-weight: 400;
background-size: contain;
}
div#Locked {
margin: auto;
color: #f48787;
padding: 0;
position: absolute;
top: 220px;
left: -92px;
width: 400px;
font-size: 35px;
font-family: Montserrat-regular;
font-weight: 550;
}
}
/*Wallet Box Break Points*/
@media screen and (max-width: 1075px) {
body div#check1 div#epic {
width: 25%;
height: 80%;
margin: 0% 0%;
position: absolute;
top: 25%;
right: -1.5%;
}
body div#check1 div#value {
width: 50%;
text-align: end;
height: 80%;
margin: 0% 0%;
position: absolute;
color: #f9f6f2;
top: 4%;
left: 35%;
font-size: 65px;
font-family: montserrat-light;
}
}
@media screen and (max-width: 864px) {
body div#check1 div#epic {
width: 25%;
height: 80%;
margin: 0% 0%;
position: absolute;
top: 30%;
right: -1.5%;
font-size: 34px;
}
body div#check1 div#value {
width: 50%;
text-align: end;
height: 80%;
margin: 0% 0%;
position: absolute;
color: #f9f6f2;
top: 4%;
left: 35%;
font-size: 58px;
font-family: montserrat-light;
}
body div#check1 div#spendable {
width: 30%;
height: 80%;
margin: 0.5% 0%;
position: absolute;
top: 5%;
font-size: 45px;
font-family: montserrat-semibold;
color: #fff0d4;
}
}
@media screen and (max-width: 700px) {
body div#check1 div#epic {
width: 25%;
height: 80%;
margin: 0% 0%;
position: absolute;
top: 30%;
right: -1.5%;
font-size: 34px;
}
body div#check1 div#value {
width: 50%;
text-align: end;
height: 80%;
margin: 0% 0%;
position: absolute;
color: #f9f6f2;
top: 14%;
left: 35%;
font-size: 50px;
font-family: montserrat-light;
}
body div#check1 div#spendable {
width: 30%;
height: 80%;
margin: 0.5% 0%;
position: absolute;
top: 17%;
font-size: 36px;
font-family: montserrat-semibold;
color: #fff0d4;
}
div#value2 {
font-size: 40px;
}
}
/*Vault Break Points*/
@media screen and (max-width: 1332px) {
section#Vault div#VaultValue {
width: 45%;
height: 100px;
position: absolute;
color:#f7ede2;
font-family: montserrat-light;
font-size: 80px;
top: 220px;
left: 35%;
text-align: end;
}
div#VaultValue span {
font-size: 75px;
color: rgb(253, 245, 241);
}
}
@media screen and (max-width: 1224px) {
section#Vault div#VaultValue {
width: 45%;
height: 100px;
position: absolute;
color:#f7ede2;
font-family: montserrat-light;
font-size: 70px;
top: 220px;
left: 35%;
text-align: end;
}
div#VaultValue span {
font-size: 65px;
color: rgb(253, 245, 241);
}
}
@media screen and (max-width: 1136px) {
section#Vault div#VaultValue {
width: 45%;
height: 100px;
position: absolute;
color:#f7ede2;
font-family: montserrat-light;
font-size: 70px;
top: 220px;
left: 40%;
text-align: end;
}
div#VaultValue span {
font-size: 65px;
color: rgb(253, 245, 241);
}
}
@media screen and (max-width: 1044px) {
section#Vault div#VaultValue {
width: 45%;
height: 100px;
position: absolute;
color:#f7ede2;
font-family: montserrat-light;
font-size: 90px;
top: 220px;
left: 500px;
text-align: end;
}
div#VaultValue span {
font-size: 65px;
color: rgb(253, 245, 241);
}
}
@media screen and (max-width: 958px) {
section#Vault div#vaultimage {
background-image: url("images/epicvault-01.svg");
width: 325px;
text-indent: -9999px;
height: 305px;
margin: auto 20%;
position: relative;
top: 100px;
left: -100px;
background-size: contain;
}
section#Vault div#VaultValue {
width: 60%;
height: 100px;
position: absolute;
color:#f7ede2;
font-family: montserrat-light;
font-size: 85px;
top: 220px;
left: 280px;
text-align: end;
}
section#Vault div#VaultSlogan {
width: 600px;
height: 60px;
position: absolute;
color: #f4e4d0;
font-family: montserrat-semibold;
top: 150px;
left: 15%;
text-align: end;
font-size: 45px;
}
}
@media screen and (max-width: 862px) {
section#Vault div#vaultimage {
background-image: url("images/epicvault-01.svg");
width: 295px;
text-indent: -9999px;
height: 275px;
margin: auto 20%;
position: relative;
top: 100px;
left: -120px;
background-size: contain;
}
section#Vault div#VaultValue {
width: 60%;
height: 100px;
position: absolute;
color:#f7ede2;
font-family: montserrat-light;
font-size: 85px;
top: 220px;
left: 260px;
text-align: end;
}
section#Vault div#VaultSlogan {
width: 600px;
height: 60px;
position: absolute;
color: #f4e4d0;
font-family: montserrat-semibold;
top: 150px;
left: 10%;
text-align: end;
font-size: 45px;
}
}
@media screen and (max-width: 790px) {
section#Vault div#vaultimage {
background-image: url("images/epicvault-01.svg");
width: 285px;
text-indent: -9999px;
height: 265px;
margin: auto 20%;
position: relative;
top: 100px;
left: -140px;
background-size: contain;
}
section#Vault div#VaultValue {
width: 60%;
height: 100px;
position: absolute;
color:#f7ede2;
font-family: montserrat-light;
font-size: 75px;
top: 220px;
left: 260px;
text-align: end;
}
section#Vault div#VaultSlogan {
width: 600px;
height: 60px;
position: absolute;
color: #f4e4d0;
font-family: montserrat-semibold;
top: 150px;
left: 5%;
text-align: end;
font-size: 45px;
}
}
@media screen and (max-width: 642px) {
section#Vault div#vaultimage {
background-image: url("images/epicvault-01.svg");
width: 285px;
text-indent: -9999px;
height: 265px;
margin: auto 20%;
position: relative;
top: 100px;
left: -140px;
background-size: contain;
}
section#Vault div#VaultValue {
width: 60%;
height: 100px;
position: absolute;
color:#f7ede2;
font-family: montserrat-light;
font-size: 70px;
top: 220px;
left: 260px;
text-align: end;
}
ul#navigation-tab {
width: 100%;
position: absolute;
top: 1400px;
padding: 0;
list-style: none;
display: flex;
font-family: montserrat-regular;
color: #f9f0de;
font-size: 25px;
text-align: center;
cursor: pointer;
}
section#Vault div#VaultSlogan {
width: 600px;
height: 60px;
position: absolute;
color: #f4e4d0;
font-family: montserrat-semibold;
top: 150px;
left: 5%;
text-align: end;
font-size: 45px;
}
}
/* Transaction History Break Points*/
@media screen and (max-width: 1000px) {
div#Titles {
text-shadow: 1px 6px 4px rgba(0,0,0,0.2),
0px -5px 10px rgba(255,255,255,0.3);
color: white;
width: 100%;
height: 50px;
margin: 0px auto;
position: relative;
top: 20px;
left: 0px;
display: flex;
font-family: roboto-light;
font-size: 2.5vw;
}
div.Table {
background-color: #202020;
border-radius: 10px;
height: 90px;
width: 95%;
margin: 35px auto;
display: flex;
font-family: montserrat-regular;
font-size: 2.5vw;
box-shadow: 0px 0px 13px -1px rgba(0,0,0,0.83);
}
div.Id-Value {
font-family: montserrat-regular;
font-weight: 400;
text-shadow: 0px 0px 5px rgba(236, 236, 236, 0.7);
width: 7%;
color: #fff2db;
margin: auto;
text-align: center;
}
div.Act-Value {
font-family: montserrat-regular;
font-weight: 400;
text-shadow: 0px 0px 5px rgba(236, 236, 236, 0.7);
width: 2%;
color: #fff2db;
margin: auto;
text-align: center;
}
div.Operation-Value {
width: 20%;
color: #fff6e3;
margin: auto;
text-align: center;
font-size: 2.5vw;
}
span.epic {
color: #ffebca;
font-family: montserrat-light;
font-size: 2.8vw;
}
div.Confirmation-Value {
width: 17%;
color: #e7e5e5;
margin: auto;
text-align: center;
}
div.Time-Value {
width: 16%;
color: #e7e5e5;
margin: auto;
text-align: center;
}
div.Fee-Value {
width: 17%;
color: #fff6e3;
margin: auto;
text-align: center;
font-size: 2.5vw;
}
div.Message-Value {
width: 18%;
color: #ffffff;
margin: auto;
text-align: center;
}
}
@media screen and (max-width: 560px) {
div.Confirmation-Value {
position: absolute;
left: 39%;
top: 110px;
font-size: 16px;
width: 17%;
color: #e7e5e5;
margin: auto;
text-align: center;
}
section#History{
background-color: #1b1b1b;
border-radius: 10px;
margin: 25px 1%;
position: relative;
top: 550px;
width: 98%;
height: 650px;
font-size: 2vw;
}
}
@media screen and (max-width: 701px) {
section#History{
background-color: #1b1b1b;
border-radius: 10px;
margin: 25px 1%;
position: relative;
top: 550px;
width: 98%;
height: 650px;
font-size: 2vw;
}
div#Titles {
text-shadow: 1px 6px 4px rgba(0,0,0,0.2),
0px -5px 10px rgba(255,255,255,0.2);
color: white;
font-size: 20px;
width: 100%;
height: 50px;
margin: 0px auto;
position: relative;
top: 20px;
left: 0px;
display: flex;
font-family: roboto-light;
}
div.Id-Value {
font-family: montserrat-regular;
font-weight: 400;
text-shadow: 0px 0px 5px rgba(236, 236, 236, 0.3);
width: 7%;
color: #fff2db;
margin: auto;
text-align: center;
position: absolute;
top: 120px;
left: 4%;
font-size: 22px;
}
div.Act-Value {
font-family: montserrat-regular;
font-weight: 400;
text-shadow: 0px 0px 5px rgba(236, 236, 236, 0.3);
width: 2%;
color: #fff2db;
margin: auto;
text-align: center;
position: absolute;
top: 120px;
left: 4%;
font-size: 22px;
}
div.Operation-Value {
width: 20%;
color: #fff6e3;
margin: auto;
text-align: center;
font-size: 2.2vw;
position: absolute;
top: 110px;
font-size: 24px;
left: 15%;
}
span.epic {
color: #ffebca;
font-family: montserrat-light;
font-size: 3vw;
}
div.Confirmation-Value {
position: absolute;
left: 37.5%;
top: 110px;
font-size: 16px;
width: 17%;
color: #e7e5e5;
margin: auto;
text-align: center;
}
div.Time-Value {
position: absolute;
left: 38%;
top: 140px;
font-size: 16px;
width: 16%;
color: #e7e5e5;
margin: auto;
text-align: center;
}
div.Fee-Value {
position: absolute;
top: 110px;
left: 61%;
font-size: 24px;
width: 17%;
color: #fff6e3;
margin: auto;
text-align: center;
}
div.Message-Value {
position: absolute;
top: 110px;
font-size: 16px;
right: 3%;
width: 18%;
height: 8%;
color: #ffffff;
margin: auto;
padding-top: 16px;
}
}
@media screen and (max-width: 947px) {
div#IconSlogan {
margin: 0px auto;
Font-size: 4.5vw;
text-align: center;
font-family: roboto-regular;
color: #f7ede2;
}
}
@media screen and (max-width: 661px) {
div#IconSlogan {
position: relative;
top: 40px;
left: 0px;
height: 55px;
width: 5%;
margin: 0px auto;
Font-size: 29px;
text-align: center;
font-family: roboto-regular;
color: #f7ede2;
}
@media screen and (max-width: 661px) {
div#IconSlogan {
position: relative;
top: 40px;
left: 0px;
height: 55px;
width: 95%;
margin: 0px auto;
Font-size: 29px;
text-align: center;
font-family: roboto-regular;
color: #f7ede2;
}
}
}
/*Send Icon Break Points */
@media screen and (max-width: 831px) {
section#SendIcon {
position: relative;
top: 200px;
width: 100%;
height: 650px;
}
div#Icon5 {
width: 150px;
height: 150px;
}
div#Folder {
text-align: center;
width: 140%;
height: 30px;
margin: 110% 20% 0 -20%;
}
section#SendMail {
position: relative;
top: -110px;
height: 500px;
width: 100%;
}
input#HowMuch {
width: 80%;
margin: 0 10%;
left: 0;
}
input#Recipient {
width: 80%;
margin: 0 10%;
right: 0;
top: 180px;
}
label#RecipientLabel {
left: 10.5%;
top: 155px;
}
textarea#EpicMessageBox {
top:60px;
}
div#EpicMessageSlogan {
top: 36px;
}
input#EpicCode {
top: 460px;
}
label#CodeLabel {
top: 432px;
}
button#ContinueEpic {
top: 395px;
}
button#SendEpicButton {
top: 540px;
left: 35%;
}
div#Epic-HowMuch {
right: 12%;
}
}
@media screen and (max-width: 663px) {
div#Icon5:active {
width: 130px;
height: 130px;
}
div#Icon4:active {
width: 130px;
height: 130px;
}div#Icon3:active {
width: 130px;
height: 130px;
}div#Icon2:active {
width: 130px;
height: 130px;
}div#Icon1:active {
width: 130px;
height: 130px;
}
div#Icon3 {
width: 125px;
height: 125px;
}
div#Icon2 {
width: 125px;
height: 125px;
}
div#Icon1 {
width: 125px;
height: 125px;
}
div#Icon5{
width: 125px;
height: 125px;
}
div#Icon4 {
width: 125px;
height: 125px;
}
div#Keybase {
text-align: center;
width: 100%;
height: 30px;
margin-top: 110%;
}
}
@media screen and (max-width: 493px) {
div#Wallet {
text-align: center;
width: 120%;
height: 30px;
margin: 110% 10% 0 -10%;
}
}
/*New Mobile Re-do*/
@media screen and (max-width: 630px) {
body div#walletbox {
background-color: rgb(37, 37, 37);
border-radius: 12px;
width: 95%;
opacity: 0.9;
height: 325px;
position: relative;
top: 135px;
margin: 0 auto;
}
body div#check1 {
position: relative;
top: -5px;
margin: 1% 2.5%;
width: 95%;
height: 78px;
}
div#spendable {
position: absolute;
left: 0%;
font-family: montserrat-regular !important;
font-weight: 500;
font-size: 55px !important;
font-weight: 0;
}
body div#check2 {
position: relative;
top: 120px;
margin: 1% 2.5%;
width: 95%;
height: 60px;
}
body div#check3 {
position: relative;
top: 110px;
margin: 1% 2.5%;
width: 95%;
height: 45px;
}
body div#check3 div#value3 {
width: 40%;
height: 80%;
margin: 0% 0%;
position: absolute;
top: 10%;
left: 59%;
text-align: end;
font-size: 40px;
font-family: montserrat-light;
color: #f9f6f2;
}
body div#check1 div#value {
width: 70%;
text-align: end;
height: 90%;
margin: 0% 0%;
position: absolute;
color: #f9f6f2;
top: 110%;
left: -2%;
font-size: 82px;
font-family: montserrat-light;
}
body div#check1 div#epic {
text-align: end;
width: 30%;
height: 80%;
margin: 0% 0%;
position: absolute;
top: 142%;
right: 1%;
font-size: 40pt;
font-weight: -50;
font-family: montserrat-semibold;
color: #f9eee1;
}
body section#shape div#wrapbox div#box1 {
background-image: url("images/boxblue-01.svg");
width: 220px;
height: 220px;
position: absolute;
left: 10px;
display: flex;
font-size: 50px;
font-weight: 400;
background-size: contain;
}
div#Finalization {
margin: auto;
color: #a0cff2;
padding: 0;
position: absolute;
top: 210px;
left: -50px;
width: 300px;
font-size: 30px;
}
body section#shape div#wrapbox div#box3 {
background-image: url("images/violetbox-01.svg");
width: 220px;
height: 220px;
position: absolute;
right: 10px;
font-weight: 400;
font-size: 50px;
display: flex;
background-size: contain;
}
div#Confirmation {
margin: auto;
color: #7a97dd;
padding: 0;
position: absolute;
top: 210px;
left: -41px;
width: 300px;
font-size: 30px;
}
body section#shape div#wrapbox div#box2 {
background-image: url("images/boxred-01.svg");
width: 220px;
height: 220px;
position: absolute;
left: 50%;
transform: translate(-50%, 130%);
z-index: 1;
display: flex;
font-size:50px;
font-weight: 400;
background-size: contain;
}
div#Box2Value {
margin: auto;
transform: translate(-5%, 0%);
}
body section#shape div#wrapbox2 div#box4 {
background-image: url("images/boxyellow-01.svg");
width: 220px;
height: 220px;
position: absolute;
left: 00%;
top: 75%;
font-size: 50px;
font-weight: 400px;
display: flex;
background-size: contain;
}
div#SMS {
margin: auto;
color: #f9f4ea;
padding: 0;
position: absolute;
top: 210px;
left: -100px;
width: 400px;
font-size: 30px;
}
body section#shape div#wrapbox2 div#box5 {
background-image: url("images/boxyellow-01.svg");
width: 220px;
height: 220px;
position: absolute;
right: 0%;
top: 220px;
font-size: 50px;
font-weight: 400px;
display: flex;
background-size: contain;
}
div#Block {
margin: auto;
color: #f9f4ea;
padding: 0;
position: absolute;
top: 210px;
left: -90px;
width: 400px;
font-size: 30px;
}
hr#tabline {
position: relative;
top:550px;
left:0px;
width: 100%;
border-style: none;
height: 2px;
background-color: rgb(255, 230, 198);
}
/* Vault Section Mobile */
section#Vault {
position: relative;
top: 442.5px;
width: 100%;
height: 700px;
}
section#Vault div#vaultimage {
background-image: url("images/epicvault-01.svg");
width: 305px;
text-indent: -9999px;
height: 285px;
margin:90px auto 0 auto;
position: relative;
top: 100px;
left: 0;
background-size: contain;
}
section#Vault div#VaultSlogan {
width: 100%;
height: 60px;
position: absolute;
color: #f4e4d0;
font-family: montserrat-semibold;
top: 375px;
left: 0;
text-align: center;
font-size: 45px;
}
section#Vault div#VaultValue {
width: 100%;
height: 100px;
position: absolute;
color:#f7ede2;
font-family: montserrat-light;
font-size: 60px;
top: 440px;
left: 0;
text-align: center;
}
div#VaultValue span {
font-size: 60px;
color: #f7ede2;
}
}
/* My Cards Mobile*/
@media screen and (max-width: 630px) {
div#MyCardsTotalWrap {
position: relative;
top: 165px;
}
.credit-card-box {
-webkit-perspective: 1000;
perspective: 1000;
width: 400px;
height: 280px;
position: relative;
top: -240px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
div.checkout {
position: relative;
top: 325px;
left: 0%;
width: 100%;
}
div#WrapCard2 {
position: relative;
top: 350px;
height: 500px;
width: 100%;
margin: 0;
padding: 0
}
div#SmallText-One {
position: absolute;
font-family: Roboto-thin;
color: #e8e8e8;
font-size: 20px;
top: 270px;
margin: 0 2.5%;
width: 65%;
height: 25px;
}
div#SmallText-Two {
font-family: Roboto-light;
color: #f48787;
font-size: 18px;
position: absolute;
top: 330px;
margin: 0 2.5%;
width: 65%;
height: 25px;
}
div#Uid-App {
font-family: montserrat-light;
font-size: 35px;
color: beige;
position: absolute;
top: 410px;
width: 100%;
height: 40px;
left: 2.5%;
}
button#UID {
position: absolute;
top: 480px;
right: 0;
left: 0;
width: 25%;
margin: 0 40%;
height: 50px;
}
div#WrapCard3 {
top:445px;
width: 100%;
margin: 0;
}
div#BullionSlogan {
position: absolute;
top: 0px;
width: 50%;
text-align: center;
margin: 0 25%;
height: 55px;
font-family: montserrat-regular;
color: #f4e4d0;
font-size: 50px;
}
input#ReverseImage {
opacity: 0.85;
background-color: black;
width: 80%;
margin: 0 10%;
font-family: montserrat-regular;
font-size:25px;
height: 50px;
position: absolute;
top: 105px;
border-radius: 5px;
}
input#FrontImage {
background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
font-family: montserrat-regular;
font-size: 25px;
opacity: 0.85;
width: 80%;
margin: 0 10%;
height: 50px;
position: absolute;
padding: 0;
top: 195px;
border-radius: 5px;
}
input#TitleBullion{
background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
width: 95%;
opacity: 0.9;
border-radius: 5px;
border-style: none;
height: 50px;
position: absolute;
top: 305px;
font-family: montserrat-light;
font-size: 35px;
color: #0a0a0a;
}
label#FrontImageLabel {
width: 70%;
text-align: center;
margin: 0 15%;
height: 55px;
position: absolute;
top: 167px;
font-family: roboto-light;
font-size: 24px;
color: #e7e6e5;
}
label#ReverseImageLabel {
width: 70%;
text-align: center;
margin: 0 15%;
height: 55px;
position: absolute;
top: 80px;
font-family: roboto-light;
font-size: 24px;
color: #e7e6e5;
}
button#EndSave {
position: absolute;
top: 475px;
bottom: 20px;
width: 25%;
margin: 0px 37.5% 20px 37.5%;
height: 50px;
font-size:30px;
}
}
@media screen and (max-width: 950px) {
.credit-card-box {
-webkit-perspective: 1000;
perspective: 1000;
width: 400px;
height: 280px;
position: relative;
top: 100px;
left: -70%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.checkout {
margin: 150px auto 30px;
position: relative;
left: 240px;
top: 50px;
width: 70%;
height: 400px;
}
label#label-ccv {
position: absolute;
bottom: 80px;
right: 23.5%;
font-family: roboto-light;
color: #eae7e5;
font-size: 28px;
}
button#UID {
position: absolute;
top: 450px;
right: 0;
left: 0;
width: 20%;
margin: 0 50%;
height: 50px;
}
div#Uid-App {
font-family: montserrat-light;
font-size: 35px;
color: beige;
position: absolute;
top: 400px;
width: 100%;
height: 40px;
left: 2.5%;
text-align: center;
}
}
@media screen and (max-width: 1290px) {
div#Uid-App {
font-family: montserrat-light;
font-size: 35px;
color: beige;
position: absolute;
top: 375px;
margin: 0 2.5%;
width: 75%;
height: 40px;
left: 10%;
}
button#UID {
position: absolute;
top: 450px;
width: 125px;
height: 45px;
right: 25%;
-moz-box-shadow: 0px -1px 13px -5px #b8b8b8;
-webkit-box-shadow: 0px -1px 13px -5px #b8b8b8;
box-shadow: 0px -1px 13px -5px #b8b8b8;
background-color:transparent;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border:2.5px solid #ffd8a7;
display:inline-block;
cursor:pointer;
color:#fff5de;
font-family:montserrat-regular;
font-size:22px;
text-decoration:none;
text-shadow:0px 0px 46px #7a7a7a;
}
}
@media screen and (max-width: 800px) {
div#MyCardsTotalWrap {
position: relative;
top: 145px;
}
.credit-card-box {
-webkit-perspective: 1000;
perspective: 1000;
width: 400px;
height: 280px;
position: relative;
top: -240px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
div.checkout {
position: relative;
top: 55px;
left: 0%;
width: 100%;
}
div#WrapCard2 {
position: relative;
top: 260px;
height: 500px;
width: 100%;
margin: 0;
padding: 0
}
div#SmallText-One {
position: absolute;
font-family: Roboto-thin;
color: #e8e8e8;
font-size: 20px;
top: 270px;
margin: 0 2.5%;
width: 65%;
height: 25px;
}
div#SmallText-Two {
font-family: Roboto-light;
color: #f48787;
font-size: 18px;
position: absolute;
top: 330px;
margin: 0 2.5%;
width: 65%;
height: 25px;
}
div#Uid-App {
font-family: montserrat-light;
font-size: 35px;
color: beige;
position: absolute;
top: 410px;
width: 100%;
height: 40px;
left: 0%;
}
button#UID {
position: absolute;
top: 480px;
right: 0;
left: 0;
width: 25%;
margin: 0 40%;
height: 50px;
}
div#WrapCard3 {
top:445px;
width: 100%;
margin: 0;
}
div#BullionSlogan {
position: absolute;
top: 0px;
width: 50%;
text-align: center;
margin: 0 25%;
height: 55px;
font-family: montserrat-regular;
color: #f4e4d0;
font-size: 50px;
}
input#ReverseImage {
opacity: 0.85;
background-color: black;
width: 80%;
margin: 0 10%;
font-family: montserrat-regular;
font-size:25px;
height: 50px;
position: absolute;
top: 105px;
border-radius: 5px;
}
input#FrontImage {
background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
font-family: montserrat-regular;
font-size: 25px;
opacity: 0.85;
width: 80%;
margin: 0 10%;
height: 50px;
position: absolute;
padding: 0;
top: 195px;
border-radius: 5px;
}
input#TitleBullion{
background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
width: 95%;
opacity: 0.9;
border-radius: 5px;
border-style: none;
height: 50px;
position: absolute;
top: 305px;
font-family: montserrat-light;
font-size: 35px;
color: #0a0a0a;
}
label#FrontImageLabel {
width: 70%;
text-align: center;
margin: 0 15%;
height: 55px;
position: absolute;
top: 167px;
font-family: roboto-light;
font-size: 24px;
color: #e7e6e5;
}
label#ReverseImageLabel {
width: 70%;
text-align: center;
margin: 0 15%;
height: 55px;
position: absolute;
top: 80px;
font-family: roboto-light;
font-size: 24px;
color: #e7e6e5;
}
button#EndSave {
position: absolute;
top: 475px;
bottom: 20px;
width: 25%;
margin: 0px 37.5% 20px 37.5%;
height: 50px;
font-size:30px;
}
}
@media screen and (max-width: 700px) {
div#MyCardsTotalWrap {
position: relative;
top: 165px;
}
}