/*Hide Autofill Icon In Safari*/
input::-webkit-contacts-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
    position: absolute;
    right: 0;
}
.mar-top40
{
    margin-top: 40px;
}
.font-colors {
    margin: 2.5px 0px;
}
.personalize {
    padding-top: 70px;
    padding-bottom: 20px;
}

/*card background choices*/
/*image divs*/
.img-text-align {
    position: relative;
    text-align: center;
}

.qc-border {
    display: inline-block;
    cursor: pointer;
}

.selected, .qc-border:hover {
    outline: 2px solid #b47e37;
}

.qc-fill {
    width: 225px;
    height: auto;
    margin: 15px;
    border-radius: 10px;
    box-shadow: -2px 2px 6px 0px rgba(0,0,0,0.75);
}

.personalize-button-div {
    margin-bottom: 20px;
}

/*input*/
.rez-input {
    background-color: #545454;
    color: #CFD8D8;
    border: none;
    margin: 5px 0;
}

/*go back buttons*/
.custom-information-go-back {
    background-color: white;
    color: #A27127;
    padding: 10px 40px;
    text-decoration: none;
    letter-spacing: 0.14em;
    border-radius: 4px;
    font-size: 10pt;
}
.personalized-address-go-back {
    background-color: white;
    color: #A27127;
    padding: 10px 40px;
    text-decoration: none;
    letter-spacing: 0.14em;
    border-radius: 4px;
    font-size: 10pt;
}
.address-confirmed-go-back {
    background-color: white;
    color: #A27127;
    padding: 10px 40px;
    text-decoration: none;
    letter-spacing: 0.14em;
    border-radius: 4px;
    font-size: 10pt;
}

.goBack.stretch {
    padding: 10px 95px;
}

.goBack.finalBack {
    padding: 10px 71px;
}

/*front of card*/
.card-front, .card-back {
    margin: auto;
    width: 402px;
}

.front-frame, .back-frame {
    border: 1px solid black;
    border-radius: 10px;
    background-position: center;
    background-size: 100% auto;
}

.font-types li {
    display: inline-block;
    padding: 10px;
    margin: 10px 10px 10px 0;
    color: black;
    text-align: left;
    font-size: 9pt;
    cursor: pointer;
}

.input-labels {
    padding-top: 10px;
    color: #D3D2D0;
}

.top-label {
    padding-top: 10px;
    color: #D3D2D0;
}

#cardQuantity {
    background-color: #545454;
    color: #CFD8D8;
    border: none;
    font-size: 12pt;
}

.first-proof {
    padding-top: 70px;
    padding-bottom: 20px;
}

.card-quantity-row .first-proof {
    margin-top:	40px;
}

.continue-row {
    margin: 40px 0;
}

#shipping-city {
    margin-top: 0;
}

.final-table-border, .final-table-col {
    border: #5D5D5D solid 1px;
    color:	#D3D2D0;
}

.edit-btn-col, .final-table-cell {
    padding-top: 10px;
    padding-bottom: 10px;
}

.verify-col {
    padding-top: 90px;
}

.final-card-col {
    padding-bottom:	20px;
}

#approveProof {
    margin-bottom: 70px;
}
#front-canvas-1 {
    margin-top: 14.7353px;
    margin-left: 14.7353px;
    width: 368.677px;
    height: 221.324px;
    position: absolute;
    left: 0px;
    top: 0px;
    touch-action: none;
    user-select: none;
}
#upper-canvas-1 {
    margin-top: 14.7353px;
    margin-left: 14.7353px;
    width: 368.677px;
    height: 221.324px;
    position: absolute;
    left: 0px;
    top: 0px;
    touch-action: none;
    user-select: none;
    cursor: default;
}
#back-canvas-1 {
    margin-top: 176.498px;
    margin-left: 107.154px;
    position: absolute;
    width: 183.692px;
    height: 56.7915px;
    left: 0px; top: 0px;
    touch-action: none;
    user-select: none;
}
.personalized-card__wrapper {
    text-align: center;
    max-width: 1100px;
    margin: auto;
    display: -ms-flexbox;
    display: flex;
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.personalized-card__item {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    padding-right: .5rem;
    padding-left: .5rem;
    -ms-flex-preferred-size: 33.333%;
    flex-basis: 33.333%;
    max-width: 33.333%;
    padding: 25px;
}
.personalized-card__item__wrapper{
    padding: 25px;
    border: 1px solid #babfc6;
    margin-bottom: 20px;
    outline: none;
}
.personalized-card__item__wrapper img{
    width:100%;
}
.personalized-card__item__wrapper:hover{
    cursor: pointer;
    background: #f8f0df;
}
.selected{
    cursor: pointer !important;
    background: #f8f0df !important;
}
.personalized-card__proof{
    display: -ms-flexbox;
    display: flex;
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.gift-card-front{
    margin-left: 35px;
    width: 400px;
    height: 252px;
    box-shadow: -1px 1px 1px 1px rgba(186,191,198,.5);
    border-radius: 15px;
    display: flex;
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    -webkit-box-align: end;
    -ms-flex-align: end;
    -ms-grid-row-align: flex-end;
    align-items: flex-end;
    background-size: 100% !important;
}

.gift-card-image-front{
    margin-left: 15px !important;
}

.personalized-confirm {
    margin: 0px;
    width: 400px;
    height: 252px;
    box-shadow: -1px 1px 1px 1px rgba(186,191,198,.5);
    border-radius: 15px;
    display: flex;
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    -webkit-box-align: end;
    -ms-flex-align: end;
    -ms-grid-row-align: flex-end;
    align-items: flex-end;
}

.gift-card-image-back {
    margin-left: 15px !important;
}

/*.gift-card-address-confirmed-back {
    margin-left: 0px !important;
}*/
.font-tahoma {
    font-family: Tahoma;
}
.gift-card-front.color-white{
    color: #fff;
}

.gift-card-front.background-plum{
    background: #5e2f42;
}
.gift-card-front__business-name {
    font-size: 3.13333rem;
    display: block;
    width: 100%;
    margin-bottom: 5px;
    height: 31px;
}
.gift-card-front__business-name{
    font-size: 32px;
    font-size: 3.13333rem;
    display: block;
    width: 100%;
    margin-bottom: 15px;
    height: 31px;
}
.gift-card-front__business-detail{
    margin-bottom: 15px;
    margin-top: 70px;
    height: 20px;
    font-size: 1.33333rem;
    display: block;
    letter-spacing: .8px;
}
.gift-card-back {
    background: url(../images/rezku-card-back.jpg);
    background-size: 100%;
    width: 400px;
    height: 252px;
    margin-left: 35px;
    box-shadow: -1px 1px 1px 1px rgba(186,191,198,.5);
    border-radius: 15px;
    color: #000;
    display: flex;
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
}
.gift-card-back__wrapper{
    top: 85px;
    position: relative;
}
.gift-card-back__business-name{
    font-size: 1.56667rem;
    display: block;
    font-weight: 600;
    line-height: 1.3;
}
.gift-card-back__business-address, .gift-card-back__business-phone, .gift-card-back__business-website{
    font-size: .93334rem;
    display: block;
    line-height: 1.3;
}
/****************************XS SCREEN****************************/
@media screen and (max-width: 479px){

    #sub-header {
        background-image: none;
    }

    #sub-header > .rez-container {
        padding-top: 1px !important;
        padding-bottom: 1px !important;
    }

    .personalize-button-div {
        margin-top: 20px;
    }

    .card-spacing {
        padding-bottom: 30px;
    }

    .go-back-div {
        margin-top: 25px;
    }

    .goBack {
        padding: 10px 34px;
    }

    .goBack.stretch {
        padding: 10px 85px;
    }

    /*	.col-frame {
                    padding: 0;
            }*/

    .card-col {
        border: dashed 2px #636464;
        padding: 40px;
    }

    .top-card-col {
        margin-bottom: -1px;

    }
    .front-frame{
        width: 100% !important;
    }
    .gold-btn{
        font-size:8pt
    }
    .bottom-card-col {
        margin-top: -1px;
        margin-bottom: -1px;
    }

    .input-col {
        border: dashed 2px #636464;
        margin-top: -1px;
        /*		width: 95% !important;		*/
    }

    .top-input-col {
        margin-bottom: -1px;
    }

    #proofButton {
        padding: 10px 75px;
    }

    #backChooseCard {
        padding: 10px 79px ;
    }

    #finalProofButtonRezku {
        padding: 10px 12px;
    }

    .goBack.stretch	{
        padding: 10px 67px;
    }

    #apt-suite {
        margin-top: 0;
    }
    .gift-card-front {
        margin-left: 0px;
/*        width: 100%;*/
        width: 222px;
        margin: 0 auto;
        background-size: 100% 100%;
/*        height: 195px;*/
        height: 142.859px;
    }
    .gift-card-back {
        margin-left: 0px;
/*        width: 100%;*/
        width: 222px;
        margin: 0 auto;
        background-size: 100% 100%;
/*        height: 195px;*/
        height: 142.859px;
/*        padding-bottom: 40px;*/
        padding-bottom: 72px;

    }
    .gift-card-front__business-name {
        height: auto;
        font-size: 17.5px;
    }

    .gift-card-front__business-name:nth-child(1) {
        margin: 0 0 1px 0;
    }

    .gift-card-front__business-name:nth-child(2) {
        margin: 0 0 31px 0;
    }

    .gift-card-front__business-detail {
        margin: 0 0 13px 0;
        height: auto;
        font-size: 7px;
    }
    .gift-card-back__wrapper {
        position: relative;
    }
    .gift-card-back__business-name {
        font-size: 8px;
    }
    .gift-card-back__business-address, .gift-card-back__business-phone, .gift-card-back__business-website {
        font-size: 5px;
    }
    .qc-fill {
        width: 100%;
        height: auto;
        margin-left: -15px;
    }
    .left-tri-card-background {
        float: right;
        padding: 34px 34px;
    }
    .font-types li {
        margin: 10px 5px 10px 0;
    }
    .card-front, .card-back {
        margin: auto;
        width: auto;
    }
    .card-front
    {
        width: auto !important;
    }
/*    .personalized-confirm{
        width: auto !important;
    }*/
    .final-table-border, .final-table-col {
        width: 92%;
    }
    .md-mar-left
    {
        margin-left: -15px;
        width: 105%;
    }
}
/****************************MS SCREEN****************************/
@media screen and (min-width: 480px) and (max-width: 767px) {
    #sub-header {
        background-size: 100% 100%;
    }

    .personalize-button-div {
        margin-top: 20px;
    }

    .left-ms-card-background {
        float: right;
    }

    .right-ms-card-background {
        float: left;
    }

    .card-spacing {
        padding-bottom: 30px;
    }

    .card-col {
        border: dashed 2px #636464;
        padding: 40px 0 40px 0;
    }

    .top-card-col {
        margin-bottom: -1px;
    }

    .bottom-card-col {
        margin-top: -1px;
        margin-bottom: -1px;
    }

    .top-input-col {
        border: dashed 2px #636464;
        margin-top: -1px;
        margin-bottom: -1px;
    }

    .bottom-input-col, .bottom-shipping-col {
        border: dashed 2px #636464;
        margin-top: -1px;
    }

    .go-back-div.stretch-div {
        margin-top: 25px;
    }

    .back-btn-div {
        text-align: right;
    }

    .proof-btn-div {
        text-align: left;
    }

    #apt-suite {
        margin-top: 0;
    }

    .last-back-div {
        padding-top: 25px;
    }
    .gift-card-front {
        margin-left: 0px;
/*        width: 100%;*/
        margin: 0 auto;
        background-size: 100% 100%;
    }
    .gift-card-back {
        margin-left: 0px;
/*        width: 100%;*/
        margin: 0 auto;
        background-size: 100% 100%;

    }
/*    .gift-card-front__business-name {
        font-size: 2.13333rem;
    }*/
    .gift-card-back__wrapper {
        /*    top: 115px;*/
        position: relative;
    }
    .qc-fill {
        width: 100%;
        height: auto;
        margin-left: -15px;
    }
    .left-tri-card-background {
        float: right;
        padding: 34px 34px;
    }
    .card-col {
        padding: 40px 80px;
    }
    .card-front, .card-back {
        margin: auto;
        width: auto;
    }
    .card-front
    {
        width: auto !important;
    }
/*    .personalized-confirm{
        width: auto !important;
    }*/
    .final-table-border, .final-table-col {
        width: 92%;
    }
    .md-mar-left
    {
        margin-left: -15px;
        width: 105%;
    }
}
/****************************SM SCREEN****************************/
@media screen and (min-width: 768px) and (max-width: 991px) {
    .card-spacing {
        padding-bottom: 60px;
    }

    .card-col {
        border: dashed 2px #636464;
        padding: 40px 0 40px 0;
    }

    .top-card-col {
        margin-bottom: -1px;
    }

    .bottom-card-col {
        margin-bottom: -1px;
    }

    .top-input-col {
        border: dashed 2px #636464;
        margin-top: -1px;
        margin-bottom: -1px;
    }

    .bottom-input-col, .bottom-shipping-col {
        border: dashed 2px #636464;
        margin-top: -1px;
    }

    .go-back-div {
        text-align: right;
    }

    .continue-div {
        text-align: left;
    }

    #apt-suite {
        margin-top: 0;
    }
    .gift-card-front {
        margin-left: 0px;
/*        width: 100%;*/
        margin: 0 auto;
        background-size: 100% 100%;
    }
    .gift-card-back {
        margin-left: 0px;
/*        width: 100%;*/
        margin: 0 auto;
        background-size: 100% 100%;

    }
    .card-col {
        padding: 40px 130px;
    }
    #rezku-personalised-accessories .row
    {
        margin-left: 0px;
    }
    .md-mar-left
    {
        margin-left: -15px;
    }
}
/****************************MD SCREEN****************************/
@media screen and (min-width: 992px) and (max-width: 1199px){
    .card-spacing {
        padding-bottom: 65px;
    }

    .card-col {
        border: dashed 2px #636464;
        padding: 40px 0 40px 0;
    }

    .top-card-col {
        margin-bottom: -1px;
        margin-right: -1px;
    }

    .bottom-card-col {
        margin-left: -1px;
        margin-bottom: -1px;
    }

    .top-input-col {
        border: dashed 2px #636464;
        margin-top: -1px;
        margin-bottom: -1px;
        margin-right: -1px;
    }

    .bottom-input-col, .bottom-shipping-col {
        border: dashed 2px #636464;
        margin-top: -1px;
        margin-left: -1px;
    }

    .bottom-input-col {
        padding-bottom:	195px;
    }

    .bottom-shipping-col {
        padding-top: 79px;
        padding-bottom: 39px;
    }

    .final-card-front-div {
        float: right;
    }

    .final-card-back-div {
        float: left;
    }

    .go-back-div {
        text-align: right;
    }

    .continue-div {
        text-align: left;
    }
}
/****************************LG SCREEN****************************/
@media screen and (min-width: 1200px){
    .left-tri-card-background {
        float: right;
        padding: 34px 34px;
    }
    .right-tri-card-background {
        float: left;
    }

    .card-spacing {
        padding-bottom: 65px;
    }

    .card-col {
        border: dashed 2px #636464;
        padding: 40px 0 40px 0;
    }

    .top-card-col {
        margin-bottom: -1px;
        margin-right: -1px;
    }

    .bottom-card-col {
        margin-left: 0px;
        margin-bottom: -1px;
    }

    .top-input-col {
        border: dashed 2px #636464;
        margin-top: -1px;
        margin-bottom: -1px;
        margin-right: -1px;
    }

    .bottom-input-col, .bottom-shipping-col {
        border: dashed 2px #636464;
        margin-top: -1px;
        border-left: 0;
    }

    .bottom-input-col {
        padding-bottom:	195px;
    }

    .bottom-shipping-col {
        padding-top: 79px;
        /*		padding-bottom: 39px;*/
    }

    .final-card-front-div {
        float: right;
    }

    .final-card-back-div {
        float: left;
    }

    .go-back-div {
        text-align: right;
    }

    .continue-div {
        text-align: left;
    }
}

/*Validation*/
input.error {
    outline: 2px solid #980000;
}

/*Change Autofill Background To White*/
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #545454 inset !important;
    -webkit-text-fill-color: #CFD8D8 !important;
}