/* Background image styles */

.bg {
    overflow: hidden;
    position: relative;
    width: 100vw;
    height: auto;
    min-height: 100vh;
    background-color: #000;
    background-position: center top;
    /*background-size: 100% auto;*/
    background-size: cover;
    background-repeat: no-repeat;
}

/* entrysuccess mobile styles */

.bg-entrysuccess {
    background-image: url('https://d9xddvexmx71z.cloudfront.net/cod22us/img/entry-success-mb.png');
}

.success-inner {
    position: relative;
    text-align: center;
    padding-top: 120vw;
    padding-bottom: 40px;
    display: flex;
    justify-content: center;
    
}

.success-cta {
    width: 90vw;
    position: relative;
}

.success-desktop {
    display: none;
}

.unlck {
    font-size: 4vw; 
    margin: 2vw 0 2vw 0;
}

.keep-entering {
    font-size: 4vw; 
    margin: 3vw 0 3vw 0;
}

/* forgot password mobile styles */

.bg-forgot {
    background-image: url('https://d9xddvexmx71z.cloudfront.net/cod22us/img/forgot-bg-mb.png');
}

.forgot-desktop {
    display: none;
}

.reset {
   font-size: 5vw; 
   margin: 4vw 0 4vw 0; 
}

.register {
   color: white;
   font-family: 'octin_college';
   font-size: 3vw; 
   margin: 4vw 0 4vw 0; 
}

/* account page mobile styles */

.accountTitle {
    width: 80%;
    position: relative;
    margin: 0 auto;
}

.account-inner {
    background-image: url('https://d9xddvexmx71z.cloudfront.net/cod22us/img/account-bg-top2.png');
    background-repeat: no-repeat;
    background-size: 100vw auto;
    position: relative;
    display: flex;
    flex-direction: column;
    /*text-align: center;*/
    padding-top: 25vw;
    z-index: 2;
    
}

.enter-code {
    width: 100%;
    background-color: #eb002a;
    z-index: 3;
    position: relative;
    height: 12vw;
    margin-top: -8vw;
    display: flex;
    justify-content: space-between;
}

.submit-code {
    background: none;
    border: none;
    color: white;
    width: 35%;
    font-size: 5vw;
    font-family: 'motive_din_bold';
    font-style: italic;
}

.blk-input {
    font-size: 5vw;
    width: 65%;
    padding-left: 4vw;
    background-image: url('https://d9xddvexmx71z.cloudfront.net/cod22us/img/black-input.png');
    background-size: 100% 100%;
    font-family: 'motive_din_reg';
    background-color: transparent;
    outline: none;
    border: none;
    vertical-align: bottom;
    color: white;
}

.accnt-btn-div {
    display: flex;
    justify-content: space-evenly;
}

.acct-head {
    margin-left: 8vw;
    margin-top: 5vw;
    margin-bottom: 2vw;
    font-size: 6vw;
}

.acct-box {
    margin-left: 8vw;
    margin-right: 8vw;
    font-size: 4vw;
}

/* horizontal line */
.hl {
    width: 95%;
    align-self: center;
}

.acct-list {
    color: white;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 6vw;
    font-size: 3.2vw;
}

/* table headers */
.green-head {
    color: #93d600;
    text-align: left;
}

.acct-list th,td {
    padding: 1vw;
}

.acct-btm-img {
    width: 100%; 
    position: absolute; 
    bottom: 0; 
    z-index: 0;
}

.acct-prod-img {
    width: 100%; 
    position: relative; 
    z-index: 2;
}

.enterDiv {
    display: none;
}


@media only screen and (min-width: 751px) {
    
    /* entrysuccess desktop styles */
    
    .bg-entrysuccess {
        background-image: url('https://d9xddvexmx71z.cloudfront.net/cod22us/img/entry-success-bg.png');
    }
    
    .success-inner {
        padding-top: 13vw;
        padding-bottom: 40px;
        justify-content: flex-end;
    }
    .success-cta {
        width: 34vw;
        position: relative;
        margin-right: 8vw;
    }
    .success-desktop {
        display: block;
        margin: 0 auto;
    }
    
    .success-mobile {
        display: none;
    }
    
    .unlck {
        font-size: 1.4vw; 
        margin: 1vw 0 1vw 0;
    }
    
    .keep-entering {
        font-size: 1.2vw; 
        margin: 2.5vw 0 2.5vw 0;
    }
   
    /* forgot password desktop styles */
    
    .bg-forgot {
        background-image: url('https://d9xddvexmx71z.cloudfront.net/cod22us/img/contBG1.jpg');
    }
    
    .forgot-desktop {
        display: block;
    }
  
    .forgot-mobile {
        display: none;
    }
    
    .reset {
        font-size: 2vw; 
        margin: 1vw 0 1vw 0;
    }
    
    .register {
        font-size: 1.2vw;
        margin: 3vw 0 2vw 0;
    }
    
    /* account page desktop styles */
    
    .bg-account {
        background-image: url('https://d9xddvexmx71z.cloudfront.net/cod22us/img/account-bg.png');
    }
    
    .acct-btm-img {
        display: none;
    }
    
    /* product image */
    .acct-prod-img {
        display: none;
    }
    
    .enter-code {
        display: none;
    }
    
    .account-inner {
        background-image: none;
        /*width: 55vw;*/
        background-color: rgba(0,0,0,0.5);
        padding: 3vw 3vw 0 3vw;
        margin: 6vw 35vw 0 6vw;
    }
    
    .accountTitle {
        margin: 0;
        width: 40%;
    }
    
    .acct-head {
        font-size: 2vw;
        margin: 2vw 0 1vw 0;;
    }
    
    .hl {
        width: 65%;
        align-self: flex-start;
        margin-bottom: 1vw;
    }
    
    .acct-box {
        margin: 0;
        padding-bottom: .5vw;
    }
    
    .info-col {
        width: 50%;
    }
    
    .acct-inner p {
        font-size: 1.2vw;
    }
    
    .acct-inner {
        display: flex;
    }
    
    .acct-list {
        font-size: 1.3vw;
        width: 100%;
    }
    
    .acct-list thead, tbody {
        display: block;
    }
    
    .acct-list tbody {
        height: 8vw;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    .acct-list th,td {
        padding: .5vw;
        text-align: left;
        width: 15vw;
    }
    
    .history {
        height: 13vw;
    }
    
    .enterDiv {
        display: block;
        z-index: 3;
        margin-right: 1vw;
    }
    
    .accnt-btn-div a {
        position: relative;
        top: 1.5vw;
    }
    
}