header {height: 70%;}
section {width: 80%;padding: 5% 10%;}
.header-bg {
    height:100%;width:100%;
    background-size:cover;background-position:center;
}
.header-bg::before {
    bottom: 0;left:0;width:100%;height:100%;content: "";position:absolute;
    background: linear-gradient(to top, var(--c-bg), rgba(25, 30, 36, 0.6));
    z-index: 1;
}
.in-grid-wrap {cursor: unset !important;overflow: visible;}


.pack-info-grid {grid-template-columns: 70% 25%;gap:0 5%;margin-top:-15%;z-index:100;}
#pack-info-top {grid-column-end: 3;grid-column-start: 1;}
.pack-h-flex {
    display:flex;gap:4vh;margin: 0 0 4vh 0;
}
.pfp-in {height:12vh;width:12vh;border: solid 4px var(--c-blue);}
.pfp-img {height:100%;width:100%;object-fit: cover;object-position: center;}
.added-name {
    position:relative;margin:0.75vh 0 0 0;width:100%;text-align:center;
}

.pack-description {margin: 6vh 0 4vh 0;}


.pack-gallery-wrap {
    width: calc(100% - 4vh);margin: 4vh 0;padding:2vh;background-color: var(--c-dgray);
    border-radius:1vh;
}
.pack-gallery {width: 100%;text-align: left;gap:2vh;grid-template-columns: repeat(3, 1fr);}
.gallery-image {
    position:relative;display: inline-grid;cursor:pointer;background-color: black;
    overflow: hidden;border-radius:0.75vh;
}
.gallery-image::before {
    top: -4px;left:-4px;width: calc(100% + 8px);height: calc(100% + 8px);
    outline: solid 0px var(--c-blue);position:absolute;content:"";
    transition:all 0.2s ease-in-out;
}
#img-4, #img-8, #img-12 {margin-right: 0;}
.aspect, .aspect-image {display:block;position:relative;width:100%;}
.over-aspect {
    position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;
    object-position:center;
}
.gallery-image iframe {
    width:100%;display:block;height:100%;
    position:absolute;top:0;left:0;z-index:5;
}
.view-image {
    position:fixed;top:0;left:0;width:100%;height:100%;
    background-color: rgba(0,0,0,0.6);z-index: 995;
    display: none;
}
.view-image-in {
    display:block;position:absolute;top:55%;left:50%;transform: translate(-50%, -50%);
    max-height: 80%;border: solid 5px transparent;outline: solid 3px var(--c-blue);
}



.inline-pack-b {display:inline-block;position:relative;vertical-align: top;}
.inline-pack-b .game-ico {width: 3vw;margin-right: 1vw;}

.star-rating {display:inline-block;text-align:left;cursor: pointer;}
.star-img {height: 2.5vh;cursor: pointer;}


#more-packs {padding:4vh;}
.more-packs-grid {margin-top:2vh;gap: 4vh;}
.more-packs-grid .in-grid {display: inline !important;overflow:hidden;}

.cat-grid {display:grid;grid-template-columns: calc(100% - 3vh) 3vh;gap:0;}
.mp-categories {overflow:hidden;white-space: nowrap;padding: 1vh 0;position:relative;}
.no-flow {overflow:hidden;}
.mid-arrow::before {
    position:absolute;top:0;right:100%;width:20%;content:"";height:100%;padding: 1vh 0;
    background: linear-gradient(to left, var(--c-bg), rgba(0,0,0,0));
}
.mid-arrow {align-items:center;display:inline-grid;}
.mp-arrow {cursor:pointer;text-align: right;}
.mp-arrow img {width:2vh;display:inline;}
.mp-arrow:hover img {transform: scale(1.1);}

.mp-categories::-webkit-scrollbar {height: 10px;}
.mp-categories::-webkit-scrollbar-track {background: var(--c-gray);}
.mp-categories::-webkit-scrollbar-thumb {background: var(--c-blue);border-radius: 0.35vw;}
.mp-category {
    display:inline-block;vertical-align: middle;padding:1vh;
    background-color: var(--c-gray);border-radius:6px;cursor: pointer;
    margin-right:1vh;box-sizing: border-box;border: solid 2px var(--c-gray);
    text-transform: capitalize;
}
.mp-category:hover {border: solid 2px var(--c-blue);}
.selected-category {background-color: var(--c-blue);border: solid 2px var(--c-blue);}
.first-category {transition: all 0.2s ease-in-out;}

.left-arrow-effect {
    position:absolute;left:0;top:0;height:100%;z-index:20;display:none;
}
.left-arrow-effect::before {
    position:absolute;top:0;left:0;width:140%;content:"";height:100%;
    background: linear-gradient(to right, var(--c-bg), rgba(0,0,0,0));
}
.left-arrow-effect img {-webkit-transform: scaleX(-1);transform: scaleX(-1);align-self:center;}
.left-arrow-effect:hover img {transform: scale(1.1);-webkit-transform: scaleX(-1);transform: scaleX(-1);}


.rating-section {
    width: calc(100% - 8vh);margin: 2vh 0;padding:4vh;background-color: var(--c-dgray);border-radius:1vh;
}
.stars-move {margin: 0 2vh 0 0;}
.rating-section .grid {grid-template-columns: min-content auto;gap:4vh;}
.large-rated {
    background-color: var(--c-blue);display:inline-grid !important;align-items: center;
    padding: 0 3vh;position:relative;border-radius: 0.75vh;
}
.large-rated .in-grid {position:relative;}
.star-efc {position:absolute;width:5vh;left:50%;top:40%;transform:translate(-50%, -50%);opacity:0.2;}
.star-efc.lst {width:8vh;opacity:0.07;}


.abox-wd {
    width:100%;
}


.howto {
    margin: 14vh 0 8vh 0;
}
.howto-grid {
    grid-template-columns: 50% 38%;gap:12%;
}
.video-box img {display:block;width:100%;}
.video-box iframe {
    position:absolute;top:0;left:0;width:100%;height:100%;border:none;outline:none;
}



@media (max-width: 980px) {
    section {width: 95%;padding: 5% 2.5%;}
    header {height: 40%;}
    .phone-logo {position:absolute;top:2%;z-index:999;left:50%;transform:translateX(-50%);}

    .pack-info-grid, .download-steps, .rating-section .grid {grid-template-columns: 100%;gap:4vh;}
    #pack-info-top {grid-column-end: 2;}
    .creator-profile {display: none;}
    .pfp-in {height:7vh;width:7vh;}
    .pack-h-flex {align-items: flex-start;margin: 0;}
    .p-nm {margin: 6px 0;}

    .pack-gallery {grid-template-columns: repeat(2, 1fr) !important;}
    .pack-gallery-wrap {margin: 2vh 0 4vh 0;}
    .wrap-noflow {overflow:hidden;}
    .pack-tags {margin-bottom:1vh;}

    .large-rated {padding: 2vh 0;}
    .howto {display: none;}
    
    #more-packs {padding: 0;}


    .wrap-download {display:grid;grid-template-columns: 7vh calc(100% - 7vh);gap:0;}
    .download-numbering {display:block;gap:0;}
    .number-step {width:100%;margin-top:28vh;}
    #step-1 {margin-top: 0;}
    .number-step span {
        top: 10px;width:2px;height:34vh;left: calc(2.5vh - 1px);
    }

    .download-steps {margin-top: 0;gap: 6vh;}
}
@media (max-width: 1100px) and (min-width: 980px) {
    section {width: 95%;padding: 5% 2.5%;}

}
@media (max-width: 1440px) and (min-width: 1100px) {
    section {width: 90%;padding: 5% 5%;}

}
@media (max-width: 1920px) and (min-width: 1440px) {
    section {width: 90%;padding: 5% 5%;}
}