@import url(reset.css);

@font-face {
    font-family: 'Kingthings Petrock';
    src: url('../fonts/Kingthings_Petrock-webfont.eot'); /* IE9 Compat Modes */
    src: url('../fonts/Kingthings_Petrock-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/Kingthings_Petrock-webfont.woff') format('woff'), /* Modern Browsers */
    url('../fonts/Kingthings_Petrock-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('../fonts/Kingthings_Petrock-webfont.svg#b796e821ee2e566bf776438a1003aeac') format('svg'); /* Legacy iOS */
    font-style:   normal;
    font-weight:  200;
}

@font-face {
    font-family: 'Trajan Pro 3 Semibold';
    src: url('../fonts/trajanpro3semibold.eot'); /* IE9 Compat Modes */
    src: url('../fonts/trajanpro3semibold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/trajanpro3semibold.woff') format('woff'), /* Modern Browsers */
    url('../fonts/trajanpro3semibold.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('../fonts/trajanpro3semibold.svg#1f6a4fec5d702852674f4644bae6c5bc') format('svg'); /* Legacy iOS */
    font-style:   normal;
    font-weight:  700;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-Regular.eot'); /* IE9 Compat Modes */
    src: url('../fonts/MyriadPro-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/MyriadPro-Regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/MyriadPro-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('../fonts/MyriadPro-Regular.svg#b6b933d6eeb92d33db4fad36c45b0bff') format('svg'); /* Legacy iOS */
    font-style:   normal;
    font-weight:  400;
}

@font-face {
    font-family: 'MuseoSans-500';
    src: url('../fonts/MuseoSans_500.eot'); /* IE9 Compat Modes */
    src: url('../fonts/MuseoSans_500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/MuseoSans_500.woff') format('woff'), /* Modern Browsers */
    url('../fonts/MuseoSans_500.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('../fonts/MuseoSans_500.svg#def45dfa0767cb06d134930a9f004794') format('svg'); /* Legacy iOS */
    font-style:   normal;
    font-weight:  400;
}

html {
    background: #000 url(../images/background.jpg) center top no-repeat;
    min-width: 1200px;
    position: relative;
    height: 100%;
}

.navigation {
    background: url(../images/navigation.png) no-repeat;
    width: 1123px;
    height: 176px;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 10;
}

.navigation-header {
    height: 29px;
    text-align: right;
    font: 400 normal 11px 'MuseoSans-500';
    padding: 10px 5px 0;
}

.navigation-header a {
    color: #A9ACAD;
}

.players_online {
    color: #D7DBE1;
}

.navigation-header > * {
    display: inline-block;
    margin: 0 8px;
}

.navigation-header > *:not(:last-child):after {
    color: #40413F;
    content: '|';
    position: absolute;
    margin-left: 8px;
}

.navigation-header .sign:hover {
    color: #FFF2C5 !important;
}

.navigation .navigation-header .sign, .navigation-header a:hover {
    color: #E1BB34;
}

.navigation .inner-wrap {
    width: 928px;
    margin: 0 auto;
}

.navigation .items-container {
    height: 62px;
    display: table;
}

.navigation .item {
    display: table-cell;
    color: #F1A737;
    font: normal normal 15px 'Trajan Pro 3 Semibold';
    text-align: center;
    padding: 22px 20px 0;
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px #000;
    border: 1px solid rgba(55, 65, 69, 0.6);
    border-top: 1px solid rgba(0, 0, 0, 0);
    border-bottom: none;
    -webkit-transition: all 100ms ease-in-out;
    -moz-transition: all 100ms ease-in-out;
    -o-transition: all 100ms ease-in-out;
    transition: all 100ms ease-in-out;
}

.navigation .item:hover {
    background: rgba(0, 6, 11, 0.4);
    border-top: 1px solid rgba(55, 65, 69, 0.9);
}

.navigation + .wrap {
    margin-top: 138px;
}

.hero {
    height: 500px;
}

.slider {
    position: relative;
}

.slider .slide {
    background: url(../images/slides/default.jpg) center top no-repeat;
    width: 100%;
    height: 564px;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms ease-in;
}

.slider .slide.active {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 500ms ease-out;
}

.slider .slide:not(:last-of-type) {
    position: absolute;
}

.slider .slide.chest {
    background-image: url(../images/slides/chest.jpg);
}

.slider .slide.arrav {
    background-image: url(../images/slides/arrav.jpg);
}

.slider .slider-buttons {
    position: absolute;
    bottom: 82px;
    left: 0;
    width: 100%;
    text-align: center;
}

.slider .slider-buttons a {
    background: url(../images/radio.png) no-repeat;
    width: 36px;
    height: 36px;
    display: inline-block;
    margin: 0 -1px;
}

.slider .slider-buttons .active {
    background-image: url(../images/radio-checked.png);
}

.wrap {
    width: 943px;
    margin: 0 auto;
}

.buttons {
    background: url(../images/buttons_bg.png) no-repeat;
    width: 943px;
    height: 265px;
}

.buttons:before, .buttons:after, .main-container:after, .content-container:before {
    background: url(../images/border_top.png) no-repeat;
    width: 1021px;
    height: 105px;
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin: -52px auto 0;
    pointer-events: none;
}

.buttons:after, .main-container:after {
    background-image: url(../images/border_bottom.png);
    width: 1025px;
    height: 117px;
    margin-top: -54px;
    z-index: 100;
}

.buttons .buttons-container {
    padding: 15px 13px;
    font-size: 0;
}

.buttons .buttons-container:hover .thumb-button:after {
    opacity: 1;
}

.thumb-button {
    display: inline-block;
    position: relative;
    font-size: 0;
    margin: 0 1px;
}

.thumb-button:before {
    border: 2px solid rgba(255, 255, 255, 0.22);
    border-top: 2px solid rgba(126, 124, 119, 0.22);
    border-left: 2px solid rgba(126, 124, 119, 0.22);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.25);
}

.thumb-button:after {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    display: block;
    background: rgba(0, 0, 0, 0.5);
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    -webkit-transition: opacity 200ms ease-in-out;
    -moz-transition: opacity 200ms ease-in-out;
    -o-transition: opacity 200ms ease-in-out;
    transition: opacity 200ms ease-in-out;
    cursor: pointer;
}

.thumb-button:hover:after {
    opacity: 0 !important;
}

.thumb-button .title {
    font: 200 normal 25px 'Kingthings Petrock';
    color: #F9DA85;
    position: absolute;
    top: 46px;
    right: 35px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
    text-align: right;
}

.buttons-container .thumb-button {
    margin-bottom: 2px;
}

.buttons-container .thumb-button:nth-last-child(-n + 3) {
    margin-bottom: 0;
}

.main-container {
    padding: 0 4px;
    position: relative;
}

.main-container:after {
    top: auto;
    bottom: -64px;
    left: -41px;
}

.left-container {
    background: #161717 url(../images/left_bg.jpg) repeat-y;
    width: 602px;
    border-radius: 8px 0 0 8px;
    float: left;
}

.right-container {
    background: #191B19 url(../images/right_bg.jpg) repeat-y;
    width: 333px;
    float: right;
    min-height: 600px;
    border-radius: 0 8px 8px 0;
    -webkit-box-shadow: inset 20px 0 50px #000;
    -moz-box-shadow: inset 20px 0 50px #000;
    box-shadow: inset 20px 0 50px #000;
    position: absolute;
    height: 100%;
    display: inline-block;
}

.sidebar {
    padding: 30px 18px;
}

.forward-button {
    background: url(../images/button_bg.jpg) no-repeat;
    width: 299px;
    height: 80px;
    display: inline-block;
    margin: 12px 0;
    font: normal normal 14px 'Trajan Pro 3 Semibold';
    position: relative;
    padding: 24px 0 0 122px;
    overflow: hidden;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.forward-button > *, .thumb-button:after {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.forward-button .title {
    color: #F1A737;
    -webkit-transition: margin-left 250ms linear;
    -moz-transition: margin-left 250ms linear;
    -o-transition: margin-left 250ms linear;
    transition: margin-left 250ms linear;
}

.forward-button .sub-title {
    color: #FFF;
    font-size: 9px;
    padding-left: 20px;
    -webkit-transition: margin-left 250ms linear;
    -moz-transition: margin-left 250ms linear;
    -o-transition: margin-left 250ms linear;
    transition: margin-left 250ms linear;
}

.forward-button.reverse {
    padding-top: 28px;
}

.forward-button figure {
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: margin-left 250ms linear;
    -moz-transition: margin-left 250ms linear;
    -o-transition: margin-left 250ms linear;
    transition: margin-left 250ms linear;
}

.forward-button figure img {
    margin: -5px;
}

.forward-button:hover figure {
    margin-left: -15px;
}

.forward-button:hover .title {
    margin-left: -10px;
}

.forward-button:hover .sub-title {
    margin-left: -5px;
}

.footer-bottom {
    font: normal normal 13.68px 'Candara';
    color: #58504F;
    padding: 32px 10px;
}

.footer-bottom a {
    color: #5C352D;
}

.footer-bottom a:hover {
    text-decoration: underline;
}

.news-container {
    width: 541px;
    margin: 0 auto;
    padding: 41px 0;
}

.news-article {
    background: left 18px no-repeat;
    width: 541px;
    height: 220px;
    margin-bottom: 5px;
}

.news-article:before {
    background: url(../images/news_top.png) no-repeat;
    width: 542px;
    height: 23px;
    content: '';
    display: block;
}

.news-article.ariane {
    background-image: url(../images/news/ariane.png);
}

.news-article.arrav {
    background-image: url(../images/news/arrav.png);
}

.news-article.nomad {
    background-image: url(../images/news/nomad.png);
}

.news-article.chinchompa {
    background-image: url(../images/news/chinchompa.png);
}

.news-article.yelp {
    background-image: url(../images/news/yelp.png);
}

.news-article.closed {
    height: 116px;
    box-shadow: inset 0 0 9999px 9999px rgba(20, 21, 21, 0.5);
    margin-bottom: 0;
}

.news-article.closed.nomad {
    background-image: url(../images/news/nomad.jpg);
}

.news-article.closed.chinchompa {
    background-image: url(../images/news/chinchompa.jpg);
}

.news-article.closed.yelp {
    background-image: url(../images/news/yelp.jpg);
}

.news-header {
    padding: 5px 15px;
}

.news-header .news-title {
    font: normal normal 15px 'Trajan Pro 3 Semibold';
    color: #F1A737;
}

.news-header time {
    font: normal normal 12px 'Myriad Pro';
    color: #8F8F8F;
    position: relative;
    top: -6px;
}

.news-content {
    font: normal normal 13px 'Myriad Pro';
    color: rgba(255, 255, 255, 0.75);
    padding: 5px 75px 5px 15px;
    line-height: 18px;
}

.content-container {
    background: url(../images/container.jpg) no-repeat;
    width: 935px;
}

.store-items {
    padding: 40px;
    text-align: center;
    display: none;
}

.store-items.show {
    display: block;
}

.store-items .page {
    text-align: left;
    display: none;
    width: 100%;
    height: 354px;
}

.store-items .page.show {
    display: inline-block;
}

.store-item {
    display: inline-block;
    border: 1px solid #222929;
    padding: 8px;
    line-height: 10px;
    margin: 5px;
    text-align: left;
    cursor: pointer;
}

.store-item figure {
    border: 1px solid rgba(139, 139, 133, 0.4);
    margin-bottom: 5px;
}

.store-item figure img {
    width: 137px;
    height: 120px;
}

.store-item .name {
    color: #94B9CB;
    font: normal normal 11px 'MuseoSans-500';
    margin-bottom: -2px;
    display: inline-block;
}

.store-item .price {
    color: #F1A737;
    font: normal normal 9px 'Trajan Pro 3 Semibold';
    margin-bottom: -5px;
    display: inline-block;
}

.store-item .payment-desc, .store-item .duration-desc, .store-item .description {
    display: none;
}

.store-categories {
    margin: 0 40px;
    position: relative;
    top: 29px;
}

.store-categories .active, .pagination .pages .active, .pagination a:hover {
    color: #F1A737;
}

.pagination .pages {
    background: #050808;
    height: 24px;
    border-bottom: 1px solid #363C3C;
    border-right: 1px solid #363C3C;
    -webkit-box-shadow: 3px 3px 10px #000;
    -moz-box-shadow: 3px 3px 10px #000;
    box-shadow: 3px 3px 10px #000;
    text-align: center;
    padding: 7px 0;
    display: inline-block;
    margin: 40px 0 11px;
    border-radius: 5px;
    line-height: 9px;
}

.pagination a {
    margin: 0 13px;
    display: inline-block;
    color: #A9ACAD;
    font: normal normal 11px 'MuseoSans-500';
    position: relative;
    top: 1px;
}

.pagination .pages a {
    top: 0;
}

.basket-container table {
    font: normal normal 15px 'Trajan Pro 3 Semibold';
    text-shadow: 1px 1px 1px #000;
}

.basket-container th, .basket-container .price, .basket-container .quantity {
    color: #f1a737;
    text-align: center;
    width: 33%;
}

.basket-container th, .basket-container td {
    padding: 10px;
}

.basket-container th {
    padding-bottom: 20px;
}

.basket-container .empty {
    display: none;
}

.basket-container .empty.show {
    display: table-row;
}

.basket-container .empty th {
    padding-bottom: 0;
}

.basket-container .empty.show ~ tr {
    display: none;
}

.basket-container td {
    background: url(../images/border_h.gif) left bottom repeat-x, url(../images/border_v.gif) right top repeat-y;
}

.basket-container tr:last-of-type td {
    background: url(../images/border_v.gif) right top repeat-y;
}

.basket-container tr td:last-of-type {
    background: url(../images/border_h.gif) left bottom repeat-x;
}

.basket-container tr:last-of-type td:last-of-type {
    background: none;
}

.basket-container .quantity {
    color: #d8e7ec;
}

.basket-container .name {
    color: #94b9cb;
    font-family: 'MuseoSans-500';
}

.basket-container .price {
    position: relative;
}

.basket-container .remove {
    background: url(../images/delete.png) no-repeat;
    width: 33px;
    height: 33px;
    display: block;
    position: absolute;
    right: -3px;
    top: -3px;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 200ms ease;
    -moz-transition: opacity 200ms ease;
    -o-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
}

.basket-container tr:hover .remove {
    opacity: 1;
    pointer-events: auto;
}

.basket-table {
    padding: 40px;
}

.bottom-container {
    background: url(../images/bottom_container.jpg) no-repeat;
    width: 935px;
    height: 237px;
    margin-bottom: -12px;
    -webkit-box-shadow: 0 20px 53px #000;
    -moz-box-shadow: 0 20px 53px #000;
    box-shadow: 0 20px 53px #000;
    position: relative;
    z-index: 100;
}

.bottom-container .content-desc {
    font: normal normal 15px 'Trajan Pro 3 Semibold';
    color: #f1a737;
    text-shadow: 1px 1px 1px #000;
}

.methods {
    padding: 18px 0 26px;
}

.payment-method {
    text-align: center;
    padding: 40px 0;
}

.payment-method .method  {
    background: url(../images/icon_bg.jpg) no-repeat;
    display: inline-block;
    width: 57px;
    height: 39px;
    padding-top: 1px;
}

.payment-method .method input[type="radio"] {
    display: none;
}

.payment-method .method input[type="radio"]:checked + label {
    border-color: #f1a139;
}

.payment-method .method label {
    width: 100%;
    height: 100%;
    display: block;
    padding-top: 2px;
    border: 1px solid transparent;
    -webkit-transition: border-color 120ms ease-in-out;
    -moz-transition: border-color 120ms ease-in-out;
    -o-transition: border-color 120ms ease-in-out;
    transition: border-color 120ms ease-in-out;
}

.button-green {
    background: url(../images/button_green.jpg) no-repeat;
    width: 159px;
    height: 38px;
    display: inline-block;
    outline: none;
    border: none;
    font: normal normal 15px 'Trajan Pro 3 Semibold';
    text-shadow: 1px 1px 1px #81bd34;
    line-height: 36px;
}

.button-green.small-width {
    background-image: url(../images/button_green_small.jpg);
    width: 112px;
}

.product-info, .login-container {
    background: rgba(0, 0, 0, 0.75);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 400;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 200ms linear;
    -moz-transition: opacity 200ms linear;
    -o-transition: opacity 200ms linear;
    transition: opacity 200ms linear;
    top: 0;
    left: 0;
}

.product-info .box, .login-box {
    background: url(../images/product_info.jpg) no-repeat;
    width: 410px;
    height: 555px;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.4);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
}

.product-info.product_1 .box {
    background-image: url(../images/membership_info.jpg);
}

.product-info.show, #login:target {
    opacity: 1;
    pointer-events: auto;
}

.product-info .info-wrap, .login-box .info-wrap {
    padding: 40px 35px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
    height: 100%;
}

.product-info .info-wrap .title, .login-box .title {
    font: normal normal 16px 'Trajan Pro 3 Semibold';
    color: #AED7E9;
}

.product-info .info-wrap .name, .login-box .title {
    font-size: 20px;
    color: #F1A737;
    margin-bottom: 26px;
}

.product-info .info-wrap p {
    color: #FFF;
    font: normal normal 12px 'Myriad Pro';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    line-height: 20px;
    margin: 5px 0 8px;
}

.product-info .cart-button {
    text-align: center;
    width: 340px;
    top: 405px;
    position: absolute;
}

.product-info .remove, .login-box .remove {
    background: url(../images/delete.png) no-repeat;
    width: 33px;
    height: 33px;
    position: absolute;
    right: 0;
    top: 10px;
}

.product-info .dropdown {
    margin: 20px auto 15px;
    display: block;
    width: 161px;
}

.dropdown {
    background: url(../images/dropdown.jpg) center top no-repeat;
    border: 1px solid #203039;
    display: inline-block;
    min-width: 155px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px #050706;
    color: #a7a6a0;
    font: 400 normal 11px 'MuseoSans-500';
    text-align: left;
    position: relative;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.dropdown.open {
    border-radius: 3px 3px 0 0;
}

.dropdown:after {
    content: '>';
    -webkit-transform: rotate(90deg);
    display: block;
    position: absolute;
    color: #f1a737;
    right: 15px;
    top: 11px;
}

.dropdown.open:after {
    -webkit-transform: rotate(-90deg);
    right: 13px;
}

.dropdown .current {
    padding: 12px 15px 6px;
    display: inline-block;
    width: 100%;
}

.dropdown.open .current {
    border-bottom: 1px solid #050706;
}

.dropdown ul {
    background: url(../images/dropdown.jpg) center -35px no-repeat;
    list-style: none;
    color: #a9acad;
    position: absolute;
    width: inherit;
    min-width: inherit;
    box-shadow: 0 1px 0 1px #050706;
    border: 1px solid #203039;
    border-top: none;
    border-radius: 0 0 3px 3px;
    margin: 0 -1px;
    min-width: 155px;
    display: none;
}

.dropdown.open ul {
    display: block;
}

.dropdown ul li {
    padding: 12px 15px 6px;
    border-top: 1px solid #1f2f38;
    border-bottom: 2px solid #050706;
    width: 100%;
}

.dropdown ul li:hover {
    background: rgba(0, 0, 0, 0.75);
    color: #f1a737;
}

.dropdown ul li.active {
    color: #f1a737;
}

.login-page {
    background: url(../images/login.jpg) center top no-repeat;
}

@media (min-width: 1400px) {

    .login-page {
        background-size: cover;
    }

}

.login-box {
    background: url(../images/login_box.jpg) no-repeat;
    height: 316px;
    top: -40px;
    box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.2), 0 10px 20px 5px rgba(0, 0, 0, 0.4);
}

.login-box .info-wrap {
    padding: 36px 35px;
}

input[type="text"], input[type="password"] {
    background: #00090c;
    border: 1px solid #345563;
    border-radius: 5px;
    outline: none;
    padding: 16px 19px 10px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    color: #315a66;
    font: normal normal 16px 'MuseoSans-500';
}

::-webkit-input-placeholder {
    color: #315a66;
}

:-moz-placeholder {
    color: #315a66;
}

::-moz-placeholder {
    color: #315a66;
}

:-ms-input-placeholder {
    color: #315a66;
}

:focus::-webkit-input-placeholder {
    color: transparent;
}

:focus:-moz-placeholder {
    color: transparent;
}

:focus::-moz-placeholder {
    color: transparent;
}

:focus:-ms-input-placeholder {
    color: transparent;
}

.login-inputs input {
    margin-bottom: 12px;
}

.login-inputs {
    margin-bottom: 15px;
}

.login-box .right {
    float: right;
    text-align: right;
    padding-top: 1px;
}

.login-page a, .login-box .right a {
    display: block;
    color: #aed0e0;
    font: normal normal 12px 'MuseoSans-500';
    line-height: 18px;
}

.login-box .right a:hover, .login-page a:hover {
    text-decoration: underline;
}