#intro.intro-menu {
position: fixed;
}
#footer-menu #scrollTop {
position: absolute;
width: 30px;
height: 30px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#footer-menu #scrollTop i{
color: var(--brand-color-second);
text-align: center;
line-height: 30px;
font-size: 25px;
}
#menu-list {
margin-top: calc(5% + 80px);
}
#menu-list .content {
max-width: 500px;
}
#menu-list .history .back{
width: 30px;
height: 30px;
text-align: center;
font-size: 17px;
line-height: 30px;
color: #000;
border-radius: 10px;
background: var(--brand-color);
cursor: pointer;
}
#menu-list .history .nav {
width: calc(100% - 40px);
font-size: 15px;
font-weight: 400;
line-height: 30px;
margin-left: 10px;
color: #fff;
}
#menu-list .history .nav a {
color: #fff;
text-decoration: none;
}
#menu-list .history .nav a:hover {
text-decoration: underline;
}
#menu-list .title {
width: 100%;
margin-top: 10px;
font-size: 2em;
color: #fff;
margin-bottom: 5%;
}
#menu-list .product-container,
#menu-list .btn-container {
width: 100%;
margin:  0 0 7.5% 0;
}
#menu-list .btn-container .btn-menu {
width: calc(90% - 6px);
padding: 5%;
margin-top: 5%;
border-radius: 10px;
font-size: 2em;
font-weight: 400;
text-align: center;
overflow: hidden;
border: 3px solid var(--brand-color);
color: #fff;
}
#menu-list .product-container .product {
width: calc(100% - 20px);
padding: 15px 10px;
background: #ffffff;
border-radius: 10px;
margin-bottom: 5%;
}
#menu-list .product-container .product .image {
width: 25%;
padding-top: 25%;
overflow: hidden;
}
#menu-list .product-container .product .image img {
position: absolute;
float: left;
max-width: 90%;
max-height: 90%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
#menu-list .product-container .product .text {
width: 72.5%;
padding: 0 0 0 2.5%;
color: #000000;
}
#menu-list .product-container .product .text .name {
width: 100%;
font-size: 1.6em;
font-family: var(--font-family);
}
#menu-list .product-container .product .text .price {
width: 100%;
font-size: 1em;
font-weight: 500
}

#popUp {
position: fixed;
bottom: -200%;
transition: .3s;
z-index: 10
}
#popUp .content {
padding: 20px;
width: calc(90% - 40px);
max-width: 460px;
background: #fff;
border-radius: 10px;
}
#popUp.show {
bottom: 2.5%;
}
#popUp .image {
width: 80%;
padding-top: 80%;
margin-left: 10%;
}
#popUp img {
position: absolute;
float: left;
max-width: 90%;
max-height: 90%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
#popUp .title {
width: 95%;
border-bottom: 2px solid var(--brand-color);
padding: 0 2.5% 2.5% 2.5%;
font-size: 1.4em;
}
#popUp .title .text {
width: calc(100% - 40px);
color: #000;
}
#popUp .title .text .name{
width: 100%;
font-size: 1.1em;
font-weight: 400;
margin-bottom: -1.5%;
}
#popUp .title .close{
width: 40px;
font-size: 1em;
text-align: right;
color: #000;
}
#popUp .description {
width: 95%;
max-height: 200px;
overflow: scroll;
padding: 2.5% 2.5% 0 2.5%;
font-size: .9em;
color: #000;
}

@media (max-width: 500px) {
#menu-list {
margin-top: calc(15% + 80px);
}
#menu-list .product-container .product .text .name {
font-size: 1.1em;
line-height: 1em;
}
#menu-list .product-container .product .text .price {
font-size: .9em;
}
}