/* Esse css está sendo utilizado em HubCredits, SubStore, */

main .top {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    min-height: 80vh;
    padding: 200px 15% 0px 15%;
    box-sizing: border-box;
    border-bottom: 1px solid #12292f;
}

main .top + * {
    padding-top: 160px;
}

#hub-gallery {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + 200px);
    z-index: -1;
}

    #hub-gallery .slick-list,
    #hub-gallery .slick-track {
        height: 100%;
        -webkit-mask-image: linear-gradient(to top, transparent 0%, #000000 100%);
        mask-image: linear-gradient(to top, transparent 0%, #01191e 100%);
    }

#hub-gallery div.slick-slide {
    position: relative;
    width: 100%;
    height: 100%;
}

#hub-gallery div.slick-slide>img {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    transform: translate(-50%, -50%) scale(1.2);
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000000 100%);
    mask-image: linear-gradient(to top, transparent 0%, #01191e 100%);
}

@media(max-width:1200px) {
    #hub-gallery div.slick-slide>img {
        opacity: .3;
    }
}

 main .top img.background {
    position: absolute;
    width: 100%;
    height: auto;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0%) scale(1.2);
    z-index: -1;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000000 100%);
    mask-image: linear-gradient(to top, transparent 0%, #01191e 100%);
}

main header {
    max-width: 50vw;
    position: relative;
    z-index: 90;
}
 main header img.icon {
    width: auto;
    max-height: 80px;
    margin-bottom: 10px;
}
 main header h1 {
    max-width: 40vw;
    margin-bottom: 10px;
    font-size: 3.6rem;
    line-height: 100%;
}

main header p {
    color: #fff;
}

 main > section {
     position: relative;
     padding: 50px 15%;
     background-color: #021114;
     overflow: hidden;
}
 main > section:nth-child(even) {
     background-color: #01191e;
}

 main section.products-container {
    position: relative;
    border: 1px solid #0e3b4a;
    border-radius: 10px;
    box-shadow: 0px 0px 30px #02141a, 0px 0px 10px #0e3b4a80 inset;
    background: linear-gradient(#021419, #082d3a);
    margin-bottom: -60px;
    z-index: 1;
}

 .platform-credits .info-box, .platform-credits .cartao-presente-xbox .shopping {
     position: relative;
     padding: 0;
}

@media (max-width: 1000px) {
    .platform-credits .info-box {
        padding: 10px 0;
    }
}

 .platform-credits .shopping {
     padding: 8px 10px;
}
 .platform-credits .shopping {
     position: relative;
     padding: 0;
}

 main section.features h2 {
     font-size: 1.4rem;
     line-height: 100%;
     color: #fff;
}
 main section.features ul {
     display: flex;
     align-items: baseline;
     justify-content: center;
}
 main section.features ul li {
     margin: 0 4%;
     list-style: none;
     flex: 1;
}
 main section.features ul li:first-child {
     margin-left: 0;
}
 main section.features ul li:last-child {
     margin-right: 0;
}
 main section.features ul li img {
    height: auto;
    width: 100%;
    border: 2px solid #0e3b4a;
    box-sizing: border-box;
    box-shadow: 0px 0px 30px #02141a;
    overflow: hidden;
}
 main section.features ul li h2 {
     text-align: center;
     margin: 10px 0 15px 0;
}
 main section.features ul li p {
     text-align: center;
     margin: 10px 0 15px 0;
}
  main section.features ul li p a {
     color: #00FF7A;
}
 main section.copyright p {
     font-size: 0.8rem;
     color: #a2a2a2;
     text-align: center;
     margin: 0;
}
 main section.related .suggestion-list {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
}
 main section.related .suggestion-list li {
     width: 22%;
     margin-right: 2%;
     margin-bottom: 2%;
     min-width: 200px;
}
 main section.related .suggestion-list li:last-child {
     margin-right: 0;
}
 @media (max-width: 1600px) {

}
 @media (max-width: 1400px) {
    main > section {
         padding: 50px 10%;
    }
    main > .top {
        padding: 200px 10% 0px;
    }
}
 @media (max-width: 1300px) {
    main .top img.background {
        width: auto;
        height: auto;
    }

}
 @media (max-width: 1200px) {
    main > .top {
        align-items: center;
    }
    main header {
        text-align: center;
        max-width: initial;
    }
    main header > h1{
        text-align: center;
        max-width: initial;
    }
    main header img.icon {
        height: 180px;
    }
}
@media (max-width: 1000px) {
    main > section {
         padding: 50px 5%;
    }
    main > .top {
        padding: 200px 5% 0px 5%;
    }

     main header p {
         text-align: center;
    }
     main section.features ul {
         flex-direction: column;
    }
     main section.features ul li {
         width: 100%;
         margin: 0 0 20px 0;
    }

}
/*============== CUSTOMIZATIONS ================*/


 /* Blizzard */

main.saldo-blizzard .top {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    min-height: 100vh;
}

main.saldo-blizzard header {
    margin: 0px 15% 40px 15%;
    max-width: 30vw;
}

main.saldo-blizzard header img.icon {
    max-height: 150px;
}

main.saldo-blizzard section.products-container {
    width: 100vw;
    padding: 60px 15%;
    box-sizing: border-box;
    background: #012a58;
    border-color: #00528a;
    border-radius: 0;
}

main.saldo-blizzard > section {
    background-color: #071e38;
}

main.saldo-blizzard > section:nth-child(even) {
    background-color: #011021;
}

main.saldo-blizzard #hub-gallery div.slick-slide > img {
    -webkit-mask-image: none;
    mask-image: none;
}

@media (max-width: 1400px) {
    main.saldo-blizzard header {
        margin: 0px 10% 40px 10%;
    }
}

@media (max-width: 1200px) {
    main.saldo-blizzard header {
        max-width: 100vw;
    }
}

@media (max-width: 1000px) {
    main.saldo-blizzard header {
        margin: 0px 5% 20px 5%;
    }
}