:root {
    --width-container: 1200px;
    --gutter: 30px;
}

.red { background-color: #c00; }
.blue { background-color: blue; }

body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.img-full {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: auto;
    height: auto;
}

.box-container {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: var(--width-container);
    height: auto;
    font-size: 0;
}
.box-container.box-full-width { max-width: 100%; }

.box-row {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    height: auto;
}
.align-middle { align-items: center; }
.align-stretch { align-items: stretch; }

.align-left { justify-content: flex-start; }
.align-center { text-align: center; justify-content: center; }
.align-right { justify-content: flex-end; }

.box-col {
    margin: 0;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    height: auto;
}
.box-col.box-no-padding {
    padding-left: 0;
    padding-right: 0;
}

/* [BEGIN] SMALL */
@media screen and (max-width: 39.9375em) {

    .box-small-1 { min-width: calc(100% / 12 * 1); max-width: calc(100% / 12 * 1); }
    .box-small-2 { min-width: calc(100% / 12 * 2); max-width: calc(100% / 12 * 2); }
    .box-small-3 { min-width: calc(100% / 12 * 3); max-width: calc(100% / 12 * 3); }
    .box-small-4 { min-width: calc(100% / 12 * 4); max-width: calc(100% / 12 * 4); }
    .box-small-5 { min-width: calc(100% / 12 * 5); max-width: calc(100% / 12 * 5); }
    .box-small-6 { min-width: calc(100% / 12 * 6); max-width: calc(100% / 12 * 6); }
    .box-small-7 { min-width: calc(100% / 12 * 7); max-width: calc(100% / 12 * 7); }
    .box-small-8 { min-width: calc(100% / 12 * 8); max-width: calc(100% / 12 * 8); }
    .box-small-9 { min-width: calc(100% / 12 * 9); max-width: calc(100% / 12 * 9); }
    .box-small-10 { min-width: calc(100% / 12 * 10); max-width: calc(100% / 12 * 10); }
    .box-small-11 { min-width: calc(100% / 12 * 11); max-width: calc(100% / 12 * 11); }
    .box-small-12 { min-width: calc(100% / 12 * 12); max-width: calc(100% / 12 * 12); }

    .box-col.box-small-1 { min-width: calc(100% / 12 * 1 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 1 - (var(--gutter) * 2 )); }
    .box-col.box-small-2 { min-width: calc(100% / 12 * 2 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 2 - (var(--gutter) * 2 )); }
    .box-col.box-small-3 { min-width: calc(100% / 12 * 3 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 3 - (var(--gutter) * 2 )); }
    .box-col.box-small-4 { min-width: calc(100% / 12 * 4 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 4 - (var(--gutter) * 2 )); }
    .box-col.box-small-5 { min-width: calc(100% / 12 * 5 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 5 - (var(--gutter) * 2 )); }
    .box-col.box-small-6 { min-width: calc(100% / 12 * 6 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 6 - (var(--gutter) * 2 )); }
    .box-col.box-small-7 { min-width: calc(100% / 12 * 7 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 7 - (var(--gutter) * 2 )); }
    .box-col.box-small-8 { min-width: calc(100% / 12 * 8 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 8 - (var(--gutter) * 2 )); }
    .box-col.box-small-9 { min-width: calc(100% / 12 * 9 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 9 - (var(--gutter) * 2 )); }
    .box-col.box-small-10 { min-width: calc(100% / 12 * 10 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 10 - (var(--gutter) * 2 )); }
    .box-col.box-small-11 { min-width: calc(100% / 12 * 11 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 11 - (var(--gutter) * 2 )); }
    .box-col.box-small-12 { min-width: calc(100% / 12 * 12 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 12 - (var(--gutter) * 2 )); }
}
/* [END] SMALL */

/* [BEGIN] MEDIUM + LARGE */
@media screen and (min-width: 40em) {
    .box-medium-1 { min-width: calc(100% / 12 * 1); max-width: calc(100% / 12 * 1); }
    .box-medium-2 { min-width: calc(100% / 12 * 2); max-width: calc(100% / 12 * 2); }
    .box-medium-3 { min-width: calc(100% / 12 * 3); max-width: calc(100% / 12 * 3); }
    .box-medium-4 { min-width: calc(100% / 12 * 4); max-width: calc(100% / 12 * 4); }
    .box-medium-5 { min-width: calc(100% / 12 * 5); max-width: calc(100% / 12 * 5); }
    .box-medium-6 { min-width: calc(100% / 12 * 6); max-width: calc(100% / 12 * 6); }
    .box-medium-7 { min-width: calc(100% / 12 * 7); max-width: calc(100% / 12 * 7); }
    .box-medium-8 { min-width: calc(100% / 12 * 8); max-width: calc(100% / 12 * 8); }
    .box-medium-9 { min-width: calc(100% / 12 * 9); max-width: calc(100% / 12 * 9); }
    .box-medium-10 { min-width: calc(100% / 12 * 10); max-width: calc(100% / 12 * 10); }
    .box-medium-11 { min-width: calc(100% / 12 * 11); max-width: calc(100% / 12 * 11); }
    .box-medium-12 { min-width: calc(100% / 12 * 12); max-width: calc(100% / 12 * 12); }

    .box-col.box-medium-1 { min-width: calc(100% / 12 * 1 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 1 - (var(--gutter) * 2 )); }
    .box-col.box-medium-2 { min-width: calc(100% / 12 * 2 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 2 - (var(--gutter) * 2 )); }
    .box-col.box-medium-3 { min-width: calc(100% / 12 * 3 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 3 - (var(--gutter) * 2 )); }
    .box-col.box-medium-4 { min-width: calc(100% / 12 * 4 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 4 - (var(--gutter) * 2 )); }
    .box-col.box-medium-5 { min-width: calc(100% / 12 * 5 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 5 - (var(--gutter) * 2 )); }
    .box-col.box-medium-6 { min-width: calc(100% / 12 * 6 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 6 - (var(--gutter) * 2 )); }
    .box-col.box-medium-7 { min-width: calc(100% / 12 * 7 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 7 - (var(--gutter) * 2 )); }
    .box-col.box-medium-8 { min-width: calc(100% / 12 * 8 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 8 - (var(--gutter) * 2 )); }
    .box-col.box-medium-9 { min-width: calc(100% / 12 * 9 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 9 - (var(--gutter) * 2 )); }
    .box-col.box-medium-10 { min-width: calc(100% / 12 * 10 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 10 - (var(--gutter) * 2 )); }
    .box-col.box-medium-11 { min-width: calc(100% / 12 * 11 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 11 - (var(--gutter) * 2 )); }
    .box-col.box-medium-12 { min-width: calc(100% / 12 * 12 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 12 - (var(--gutter) * 2 )); }
}
/* [END] MEDIUM + LARGE */

/* [BEGIN] MEDIUM */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    .box-medium-1 { min-width: calc(100% / 12 * 1); max-width: calc(100% / 12 * 1); }
    .box-medium-2 { min-width: calc(100% / 12 * 2); max-width: calc(100% / 12 * 2); }
    .box-medium-3 { min-width: calc(100% / 12 * 3); max-width: calc(100% / 12 * 3); }
    .box-medium-4 { min-width: calc(100% / 12 * 4); max-width: calc(100% / 12 * 4); }
    .box-medium-5 { min-width: calc(100% / 12 * 5); max-width: calc(100% / 12 * 5); }
    .box-medium-6 { min-width: calc(100% / 12 * 6); max-width: calc(100% / 12 * 6); }
    .box-medium-7 { min-width: calc(100% / 12 * 7); max-width: calc(100% / 12 * 7); }
    .box-medium-8 { min-width: calc(100% / 12 * 8); max-width: calc(100% / 12 * 8); }
    .box-medium-9 { min-width: calc(100% / 12 * 9); max-width: calc(100% / 12 * 9); }
    .box-medium-10 { min-width: calc(100% / 12 * 10); max-width: calc(100% / 12 * 10); }
    .box-medium-11 { min-width: calc(100% / 12 * 11); max-width: calc(100% / 12 * 11); }
    .box-medium-12 { min-width: calc(100% / 12 * 12); max-width: calc(100% / 12 * 12); }

    .box-col.box-medium-1 { min-width: calc(100% / 12 * 1 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 1 - (var(--gutter) * 2 )); }
    .box-col.box-medium-2 { min-width: calc(100% / 12 * 2 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 2 - (var(--gutter) * 2 )); }
    .box-col.box-medium-3 { min-width: calc(100% / 12 * 3 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 3 - (var(--gutter) * 2 )); }
    .box-col.box-medium-4 { min-width: calc(100% / 12 * 4 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 4 - (var(--gutter) * 2 )); }
    .box-col.box-medium-5 { min-width: calc(100% / 12 * 5 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 5 - (var(--gutter) * 2 )); }
    .box-col.box-medium-6 { min-width: calc(100% / 12 * 6 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 6 - (var(--gutter) * 2 )); }
    .box-col.box-medium-7 { min-width: calc(100% / 12 * 7 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 7 - (var(--gutter) * 2 )); }
    .box-col.box-medium-8 { min-width: calc(100% / 12 * 8 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 8 - (var(--gutter) * 2 )); }
    .box-col.box-medium-9 { min-width: calc(100% / 12 * 9 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 9 - (var(--gutter) * 2 )); }
    .box-col.box-medium-10 { min-width: calc(100% / 12 * 10 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 10 - (var(--gutter) * 2 )); }
    .box-col.box-medium-11 { min-width: calc(100% / 12 * 11 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 11 - (var(--gutter) * 2 )); }
    .box-col.box-medium-12 { min-width: calc(100% / 12 * 12 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 12 - (var(--gutter) * 2 )); }
}
/* [END] MEDIUM */

/* [BEGIN] LARGE */
@media screen and (min-width: 64em) {
    .box-large-1 { min-width: calc(100% / 12 * 1); max-width: calc(100% / 12 * 1); }
    .box-large-2 { min-width: calc(100% / 12 * 2); max-width: calc(100% / 12 * 2); }
    .box-large-3 { min-width: calc(100% / 12 * 3); max-width: calc(100% / 12 * 3); }
    .box-large-4 { min-width: calc(100% / 12 * 4); max-width: calc(100% / 12 * 4); }
    .box-large-5 { min-width: calc(100% / 12 * 5); max-width: calc(100% / 12 * 5); }
    .box-large-6 { min-width: calc(100% / 12 * 6); max-width: calc(100% / 12 * 6); }
    .box-large-7 { min-width: calc(100% / 12 * 7); max-width: calc(100% / 12 * 7); }
    .box-large-8 { min-width: calc(100% / 12 * 8); max-width: calc(100% / 12 * 8); }
    .box-large-9 { min-width: calc(100% / 12 * 9); max-width: calc(100% / 12 * 9); }
    .box-large-10 { min-width: calc(100% / 12 * 10); max-width: calc(100% / 12 * 10); }
    .box-large-11 { min-width: calc(100% / 12 * 11); max-width: calc(100% / 12 * 11); }
    .box-large-12 { min-width: calc(100% / 12 * 12); max-width: calc(100% / 12 * 12); }

    .box-col.box-large-1 { min-width: calc(100% / 12 * 1 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 1 - (var(--gutter) * 2 )); }
    .box-col.box-large-2 { min-width: calc(100% / 12 * 2 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 2 - (var(--gutter) * 2 )); }
    .box-col.box-large-3 { min-width: calc(100% / 12 * 3 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 3 - (var(--gutter) * 2 )); }
    .box-col.box-large-4 { min-width: calc(100% / 12 * 4 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 4 - (var(--gutter) * 2 )); }
    .box-col.box-large-5 { min-width: calc(100% / 12 * 5 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 5 - (var(--gutter) * 2 )); }
    .box-col.box-large-6 { min-width: calc(100% / 12 * 6 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 6 - (var(--gutter) * 2 )); }
    .box-col.box-large-7 { min-width: calc(100% / 12 * 7 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 7 - (var(--gutter) * 2 )); }
    .box-col.box-large-8 { min-width: calc(100% / 12 * 8 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 8 - (var(--gutter) * 2 )); }
    .box-col.box-large-9 { min-width: calc(100% / 12 * 9 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 9 - (var(--gutter) * 2 )); }
    .box-col.box-large-10 { min-width: calc(100% / 12 * 10 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 10 - (var(--gutter) * 2 )); }
    .box-col.box-large-11 { min-width: calc(100% / 12 * 11 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 11 - (var(--gutter) * 2 )); }
    .box-col.box-large-12 { min-width: calc(100% / 12 * 12 - (var(--gutter) * 2 )); max-width: calc(100% / 12 * 12 - (var(--gutter) * 2 )); }
}
/* [END] LARGE */




/* [BEGIN] CODE */
iframe {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
}

.space {
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    height: 30px;
}
h2 {
    position: relative;
    margin: 0;
    margin-bottom: 30px;
    padding: 0;
    font-size: 38px;
    line-height: 40px;
    text-indent: -1px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 900;
}
h2:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 38px;
    height: 6px;
    background-image: url('../img/border-bottom.png');
}
h2.text-center:after {
    margin-left: 50%;
    left: -19px;
}
h3 {
    margin: 0;
    margin-bottom: 20px;
    padding: 0;
    color: #fff;
    font-size: 30px;
    line-height: 30px;
}

p {
    margin: 0;
    padding: 0;
    font-size: 17px;
    line-height: 30px;
    color: #fff;
}

.btn-compre-agora {
    position: relative;
    margin: 0;
    margin-top: 30px;
    padding: 0;
    padding-right: 30px;
    display: inline-block;
    color: #9bf00b;
    font-size: 25px;
    line-height: 30px;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
}
.btn-compre-agora:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 20px;
    height: 30px;
    background-image: url('../img/icon-btn.png');
    background-position: center center;
    background-repeat: no-repeat;
}

.box-header {
    background-image: url('../img/bg-header.jpg');
    background-position: center center;
    background-size: cover;
}
.box-header p { margin-bottom: 30px; }

.box-game-pass {
    padding-bottom: 50px;
    background-image: url('../img/bg-game-pass-ultimate.jpg');
    background-position: center center;
    background-size: cover;
}
.box-game-pass .line-content {
    margin: 0 50px;
    padding: 30px;
    width: 100%;
    background-color: #2f2f2f;
}
.box-game-pass .line-content .box-content {
    margin-top: -50px;
    text-align: center;
}
.box-game-pass .line-content .itens {
    margin-top: 30px;
    text-align: center;
}
.box-game-pass .line-content .itens .box-col { position: relative; }
.box-game-pass .line-content .itens .box-col:after {
    content: "";
    position: absolute;
    display: block;
    width: 1px;
    height: 100%;
    top: 0;
    right: 0;
    background-color: #fff;
}
.box-game-pass .line-content .itens .box-col:last-child:after { background: none; }
.box-game-pass .line-content .btn-compre-agora {
    position: relative;
    margin: 0;
    margin-top: 30px;
    padding: 0;
    padding-right: 30px;
    display: inline-block;
    color: #9bf00b;
    font-size: 25px;
    line-height: 30px;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
}
.box-game-pass .line-content .btn-compre-agora:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 20px;
    height: 30px;
    background-image: url('../img/icon-btn.png');
    background-position: center center;
    background-repeat: no-repeat;
}

.box-garanta-lugar {
    background-image: url('../img/bg-garanta-lugar.jpg');
    background-position: center center;
    background-size: cover;
}
.box-garanta-lugar .box-content { padding-right: 70px; }

.box-pc-game-pass {
    padding-top: 50px;
    text-align: center;
    background-color: #000;
}
.itens-pc-game-pass {
    background: rgb(23,23,23);
    background: linear-gradient(180deg, rgba(23,23,23,1) 0%, rgba(23,23,23,1) 49.9%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%);
}
.itens-pc-game-pass .line-content {
    margin: 0 50px;
    padding: 50px 30px;
    width: 100%;
    background-color: #2f2f2f;
}
.itens-pc-game-pass .line-content .box-content {
    display: flex;
}
.itens-pc-game-pass .line-content .item {
    position: relative;
    margin: 0;
    padding: 0 20px;
    text-align: center;
}
.itens-pc-game-pass .line-content .item:after {
    content: "";
    position: absolute;
    display: block;
    width: 1px;
    height: 100%;
    top: 0;
    right: 0;
    background-color: #fff;
}
.itens-pc-game-pass .line-content .item:last-child:after { display: none; }
.box-controle-headset {
    padding-top: 50px;
    background-color: #000;
}
.box-controle-headset .box-item {
    margin: 0 30px;
    padding: 0;
    width: 100%;
    max-width: 630px;
}
.box-controle-headset .box-item img {
    width: 100%;
}
.box-controle-headset .box-item .box-content {
    display: flex;
    margin: 0;
    padding: 0 40px;
    height: 300px;
    background-color: #2f2f2f;
}
.box-controle-headset .box-item .box-content .btn-compre-agora {
    font-size: 20px;
}
.box-controle-headset .carousel-controle-headset {
    margin: 0;
    padding: 0;
    width: 100%;
}
.box-controle-headset .box-carousel-controle-headset {
    position: relative;
}
.box-controle-headset .box-carousel-controle-headset .btn-carousel {
    position: absolute;
    top: 50%;
    margin-top: -50px;
    display: block;
    width: 100px;
    height: 100px;
    cursor: pointer;
}
.box-controle-headset .box-carousel-controle-headset .btn-carousel.btn-prev { left: 0; }
.box-controle-headset .box-carousel-controle-headset .btn-carousel.btn-next { right: 0; }

.box-xbox-series-s {
    padding-top: 50px;
    padding-bottom: 190px;
    background-image: url('../img/bg-xbox-series-s.jpg');
    background-position: center center;
    background-size: cover;
}
.box-xbox-series-s ul {
    margin: 0;
    padding: 0;
    display: block;
}
.box-xbox-series-s ul li {
    margin-top: 10px;
    display: flex;
    align-items: center;
    font-size: 17px;
    line-height: 25px;
    color: #fff;
}
.box-xbox-series-s ul li span { padding-left: 20px; }

.box-minecraft {
    position: relative;
    z-index: 7777;
    margin-top: -140px;
}
.box-minecraft .border-top {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 140px;
    background-image: url('../img/minecraft-border-top.png');
    background-position: center center;
}
.box-minecraft .border-bottom {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 140px;
    background-image: url('../img/minecraft-border-bottom.png');
    background-position: center center;
}
.box-minecraft .box-content {
    margin: 0;
    padding: 0;
    width: 100%;
    background-image: url('../img/minecraft-content.jpg');
    background-position: top center;
    background-repeat: repeat-y;
}
.box-minecraft .img-full {
    margin: 0 auto;
    max-width: 450px;
}

.box-cartao {
    margin-top: -140px;
    padding-top: 140px;
    background-color: #000;
}

.box-jogos-otimizados {
    padding-top: 800px;
    padding-bottom: 100px;
    background-image: url('../img/bg-hero.jpg');
    background-position: top center;

}
.box-footer {
    background-color: #505050;
}
.box-footer .box-content {
    padding: 50px;
}
.box-footer .box-content p {
    margin: 0;
    margin-bottom: 20px;
    padding: 0;
    font-size: 11px;
    line-height: 20px;
}
.box-footer .box-content p:last-child { margin-bottom: 0; }
/* [END] CODE */





/* SMALL */
@media screen and (max-width: 929px) {
    .box-header .box-content { padding: 50px 0; }
    .itens-pc-game-pass .line-content .box-content {
        flex-wrap: wrap;
    }
    .box-game-pass .line-content .itens .box-col:after,
    .itens-pc-game-pass .line-content .item:after { display: none; }

    .box-controle-headset .box-item {
        max-width: 450px;
    }
}