/* ------------------------------------------------------------------------------------------------------------------ */

body {
    background: url(../games/skulls.png);
}

.page-wrapper {
    overflow-x : hidden;
}

header {
    background: rgba(169,3,41,1)
}

.page-header {
    margin-bottom: 0!important;
}

.page-header .header.panel,
.panel.wrapper {
    background-color: #333!important;
    border-bottom: 0!important;
    margin-bottom: 0!important;
}
.page-header .header.panel * {
    font-size: .9em;
}

ul.header.links li {
    background: black;
    padding: 3px 6px;
    border-radius: 3px
}

.header.panel > .header.links > .authorization-link:after {
   display: none!important;
}

/* ------------------------------------------------------------------------------------------------------------------ */

.navigation {
    padding-bottom: 10px
}

@media (min-width: 768px) {
    .nav-sections,
    .nav-sections-item-content > .navigation {
        background: rgb(169,3,41);
        background: linear-gradient(to bottom,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
        color: white;
        text-align: center;
        margin-bottom: 0!important;
    }
    .navigation .level0 > .level-top {
        color: #ffffff!important;
    }
    #ui-id-2 {
        padding-bottom: 10px
    }
}


.navigation li {
    display: inline-block;
    width: 15%;
    border-radius: 10px;
    padding: 0;
}
.navigation li a {
    display: block;
    width: 100%;
    padding: 5px;
    background: rgba(0,0,0,.2);
    transition: all .2s ease;
    border-bottom: 1px solid rgba(255,255,255,0);
}
.navigation li a:hover {
    background: rgba(0,0,0,.25);
    border-bottom: 1px solid rgba(255,255,255,.5);
    transition: all .2s ease;
}

@media all and (min-width: 768px) and (max-width: 850px) {
    .navigation .level0 {
        font-weight: 900;
        margin: 0 5px 0 0!important;;
    }
}

/* ------------------------------------------------------------------------------------------------------------------ */

.column.main {
    position: relative;
    height: auto;
    overflow: visible 
}

.feature {
    width: 100%;
    min-height: 400px;
    overflow: visible;
    margin-bottom: 20px;
    position: relative;
    padding-top: 20px 
}
.feature * {
    box-sizing: border-box
}

.feature:before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    width: 220%;
    left: -60%;
    height: 100%;
    top: 0;
    background: red;
    background: url(../games/banner.jpg) top center;
    background-size: cover;
    border-bottom: 130px solid rgba(169,3,41,1);
    box-shadow: 0px 20px 60px rgba(0,0,0,.2);
}

.feature:after {
    content: "";
    display: block;
    position: absolute;
    z-index: -2;
    bottom: -200px;
    border-bottom: 60px solid rgba(169,3,41,1);
    width: 220%;
    left: -60%;
    height: 100%;
    box-shadow: 0px 20px 60px rgba(0,0,0,.2);

}

.attract,
.awards {
    width: 47.5%;
    float: left;
    overflow: hidden;
    background: #c0ffee;
    margin-right: 5%;
    padding: 20px
}

.awards {
    margin-right: 0;
    float: right;
    background: rgba(0,0,60,0.8);
    color: white;
    border-radius: 10px;
    border: 1px solid #bbb;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}

.feature .awards h2 {
    font-weight: 900;
    font-size: 2.5em;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.feature .awards ul.title {
    font-weight: 900;
    width: 100%;
    padding: 0;
    list-style-type: none;
    clear: both;
    display: block;
    overflow: hidden;
    height: auto;
    margin: 0;
}
.feature .awards ul.title li {
    border-bottom: 1px solid white;
    width: 50%;
    float: left;
    font-weight: 900;
    padding-bottom: 8px;
    font-size: 1.5em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    color: #eee;
    margin-bottom: 0
}
.feature .awards ul.title li:nth-child(odd) {
    text-align: right;
    padding: 0 10px 8px 0;
}

.winnerList {
    list-style-type: none;
    padding: 0;
}
.winnerList li {
    display: block;
    width: 50%;
    float:  left;
    font-size: 1.35em;
    padding: 4px 0 8px 0;
    font-weight: 500;
    list-style-type: none
}
.winnerList li {
    margin-bottom: 0!important;
}

.winnerList li:nth-child(odd) {
    text-align: right;
    padding: 4px 10px 8px 0 
}

.winnerList li:nth-child(1),
.winnerList li:nth-child(2) {
  background: #E64A19;
}
.winnerList li:nth-child(3),
.winnerList li:nth-child(4) {
  background: #F57C00;
}
.winnerList li:nth-child(5),
.winnerList li:nth-child(6) {
  background: #FFA000;
}
.winnerList li:nth-child(7),
.winnerList li:nth-child(8) {
  background: #FBC02D;
}
.winnerList li:nth-child(9),
.winnerList li:nth-child(10) {
  background: #AFB42B;
}


.attract,
.attract * {
    background: none;
    font-weight: 900;
    color: yellow;
    text-shadow: 1px 5px 15px rgba(0,0,0,.5)
}

.attract h1 {
    font-size: 5.5em
}
@media all and (max-width: 850px) {
    .attract h1 {
        font-size: 3.5em;
    }   
}

.attract h2 {

}


@media all and (max-width: 768px) {
    .attract,
    .awards {
        width: 100%;
    }
}


@media all and (min-width: 1350px) {
    .shadowBlock {
        position: absolute;
        z-index: -3;
        height: 100%;
        width: 100%;
        background: rgba(0,0,0,0);
    }
    .shadowBlock:after,
    .shadowBlock:before {
        display: block;
        position: absolute;
        content: "";
        z-index: -2;
        width: 60%;
        right: 100%;
        left: auto;
        height: 100vh;
        background: linear-gradient(to right,  rgba(0,0,0,.8) 0%,rgba(0,0,0,0) 100%);
    }
    .shadowBlock:before {
        left: 100%;
        right: auto;
        background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);
    }

}

/* ------------------------------------------------------------------------------------------------------------------ */

.cms-home .bucket,
.cms-home .bucket * {   
    box-sizing: border-box;
    z-index: 1;
    position: relative;
}
.cms-home .bucket {
    width: 24%; 
    float: left;
    background: red;
    min-height: 20em;
    margin: 0 2% 20px 0;
    border-radius: 10px
}
.cms-home .bucket.new {
    background: #f85032;
    background: linear-gradient(135deg, #f85032 0%, #f16f5c 50%, #f6290c 50.001%, #f02f17 71%, #e73827 100%);
}
.cms-home .bucket.highlimit {
    background: #9dd53a;
    background: linear-gradient(135deg, #61be12 0%, #a1d54f 50%, #80c217 50.001%, #7cbc0a 100%);
}

.cms-home .bucket.featured {
    background: #1e5799;
    background: linear-gradient(135deg, #1e578c 0%, #2989d8 50%, #207cca 50.001%, #7db9e8 100%);
    width: 48%;
    margin: 0;
}
.cms-home .bucket h2 {
	font-weight: 900;
	color: white;
	text-align: center;
}
.cms-home .bucket a {
    display: block;
    height: auto;
    overflow: hidden;
}

.gs-game-block {
   padding: 20px; 
   overflow: hidden;
   height: auto;
}
.gs-game-block img {
   width: 100%;
}

.cms-home .bucket.featured .gs-game-block {
    width: 50%;
    float: left
}

.gs-game-block p {
    display: block;
    padding: 10px;
    background: rgb(169,3,41);
    background: linear-gradient(to right,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 1.2em;
    border-radius: 5px;
}



@media all and (max-width: 850px) {
    .cms-home .bucket {
        width: 49.5%; 
        margin-right: 1%
    }
    .cms-home .bucket.highlimit {
        margin: 0;
    }
    .cms-home .bucket.featured {
        background: #1e5799;
        background: linear-gradient(135deg, #1e578c 0%, #2989d8 50%, #207cca 50.001%, #7db9e8 100%);
        width: 100%;
        margin: 1% 0 0 0 ;
    }

}

@media all and (max-width: 500px) {
    .cms-home .bucket.new,
    .cms-home .bucket.highlimit,
    .cms-home .bucket.featured {
        width: 100%;
        margin: 0 0 1% 0;
    }
    .cms-home .bucket.featured .gs-game-block {
        width: 100%;
    }
}


/* -------------------------------------------------------------------- */

.page-footer {
    background: rgba(169,3,41,1)!important;
    position: relative;
    z-index: 0
}
@media all and (min-width: 1350px) {

    .page-footer:before,
    .page-footer:after {
        content: "";
        display: block;
        position: absolute;
        height: 120px;
        z-index: -2;
        top: -131px;
        background: rgba(169,3,41,1);
        width: 100%;
        box-shadow: 0px 20px 60px rgba(0,0,0,.2);
    }
    .page-footer:before {
        top: -211px;
        height: 70px;
        z-index: -1
    }

}


.footer.content .links a {
    color: white;
}
.footer.content .links a:hover {
    color: white;
}

/* ACCOUNT PAGE --------------------------------------------------------------- */

body.account .columns,
body.account .columns * {
    box-sizing: border-box;
}

body.account .pct50  {
    width: 49%;
    margin: 2% 0 0 2%;
    float: right;
    z-index: 2;
    position: relative;
}
body.account .pct50:last-child {
    margin-left: 0
}

h1.acctTitle {
    color: white;
    margin: 20px 0 0 0;
}
.pct50 h3 {
    margin-top: 0
}

.pct50 section {
    margin-bottom: 20px;
    background: white;
    padding: 20px;
}
.pct50 section.accountDetails {
    padding-bottom: 0
}

.pct50 section input,
.pct50 section select,
.pct50 section select option {
    border-radius: 5px;
    margin-bottom: 5px;
    padding: 6px;
    display: block;
    font-size: 1.15em;
    height: 110%
}

.pct50 section .state,
.pct50 section .zip {
    width: 49%;
    margin-right: 2%;
    float: left
}
.pct50 section .zip {
    margin-right: 0
}

.pct50 section.ucredit-meter {
    background: black;
    border-radius: 10px;
    color: white;
    text-align: center;
    vertical-align: middle;font-size: 1.25em 
}
span.ucredit-value {
    color: yellow;
    font-weight: 900;
    font-size: 2.5em;
    vertical-align: middle;
    position: relative;
    padding: 0 6px;
    top: -3px;
}

.user-actions a {
    display: block;
    width: 100%;
    padding: 15px;
    color: white;
    font-weight: 500;
    background: rgb(137,211,0);
    background: linear-gradient(to bottom,  rgba(137,211,0,1) 0%,rgba(99,145,0,1) 100%);
    font-size: 1.5em;
    text-align: center;
    margin-bottom: 15px;
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0,0,0,.1)

}

.user-actions a:hover {
    text-decoration: none;
    background: rgb(127,201,0);
    background: linear-gradient(to bottom,  rgba(127,201,0,1) 0%,rgba(89,135,0,1) 100%);
}

.payment {
    background: rgba(0,0,0,.2);
    padding: 15px;
    width: calc(100% + 40px);
    margin-left: -20px;
    overflow: hidden;

}
.payment input[type=button] {
    float: right;
    display: block
}
.payment input {
    width: 33%;
    float: left
}
.payment input.creditCard {
    width: 100%;
}

.accountDetails .phone {
    margin-bottom: 20px
}