.products{
    width:100%;
    height:100%;
    background:#894523;
    position:relative;
}
.products li{
    width:100%;
    height:100%;
    position:absolute;
    left:0px;
    top:0px;
    background:rgb(250 250 250);
}


.icons {
    display:flex;
    position:absolute;
    bottom:4rem;
    left:50%;
    translate: -50% 0;
}
.icons li{
    position:relative;
    top:0px;
    width:4rem;
    height:4rem;
    margin:0px 10px;
    background:#ffff;
    border-radius: 5px;
    transition: all ease 0.4s;

    text-align: center;
    line-height: 4rem;

    box-shadow:
        0px 0px 5px rgba(0, 0, 0, .1);
        /* inset 2px 2px 6px rgba(0, 0, 0, .2); */
}
.icons li i{
    font-size: 2.4rem;
}
.icons li img{
    vertical-align: middle;
    width: 3rem;
    height: 3rem;
}
.icons li:hover{
    top: -1rem;
}






.box { 
    width: 100%; 
    height: calc(100vh - 5rem);
    /* background: #1E1E26;  */

    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.boxWrapper{
    padding-bottom: 10%;
    width: 100%;
    height: 90%;
    display:flex;
    align-items: center;
    justify-content: center;
}
.introduce{
    width: 20%;
    /* background:#785612; */
}
.introduce > div:first-child{
    display: flex;
    align-items: center;
    /* background:#485612; */
}

.proLogo{
    font-size: 3rem;
    margin-right: 1rem;
}
.proName{
    font-weight: bold;
    font-size: 2rem;
}
.proDesc{
    margin-bottom: 0.5rem 0px;
    white-space: pre;
    padding-right: 50px;
    line-height: 1.5rem;
    letter-spacing: 2px;
}
.picture{
    width: 60%;
    text-align: center;
    /* background:#197645; */
}
.picture img{
    width:80%;
    /* height: */
}
.proLink a{
    color:blue;
}
/* .box:hover { background-color: #17171D; transform-style: preserve-3d; transform: scale(1.02); transition: all ease .3s; }
.box:hover .marvel { color: #C0292B; transition: all ease .5s; } */
/* .model { height: 350px; max-height: 100%; max-width: 100%; } */

.details { display: flex; flex-direction: column; align-items: center; width: 300px; }
.details p { font-family: calibri; font-weight: bold; color: #6A6A74; text-align: center; margin-top: 20px; }
.marvel { color: #32323E; font-weight: bold; letter-spacing: 2px; font-family: Bebas Kai; font-size: 25px; }

/* @media(max-width: 720px) {
    .box { width: 94%; height: 500px; }
    .model { height: 250px; }
    .details p { font-size: 14px; width: 250px; } 
}

@media(max-height: 600px) {
    .container { height: 90%; }
} */

.lSGallery{
    width: 100% !important;
    display:flex;
    justify-content: center;
    height: 128px;
    overflow: visible !important;
    /* background:#891875; */
}
.lSGallery li{
    position:relative;
    top:0px;
    border-radius: 5px;
    width:4rem !important;
    height:4rem !important;
    line-height: 4rem;
    vertical-align: middle;
    background:#fff;

    text-align: center;

    border: 1px solid rgb(0 0 0 / 0.1);
    box-shadow:
        0px 0px 5px rgba(0, 0, 0, .2),
        inset 2px 2px 6px rgba(0, 0, 0, 0.075);
    transition: all ease 0.4s;
}
.lSGallery li img{
    width: 48px;
    display: inline !important;
    vertical-align: middle;
}

.lSGallery li:hover{
    top: -1rem;
    box-shadow:
        0px 0.75rem 20px rgba(0, 0, 0, .2),
        inset 2px 2px 6px rgba(0, 0, 0, 0.075);
}
.lSPrev,.lSNext{
    /* border: 1px solid #000;
    border-radius: 50%; */
    /* filter: contrast(0); */
    filter: invert(1);
}