.flex {
    display:flex;
    justify-content: space-between;
    align-items: center;
    flex:1 1 auto
}
.head .nav-menu ul li, .head .searchBar ul li {
    display:inline-block;
    margin:0 10px;
}
.navHandler {
    display:none;
}
.nav-menu  {
    transition:max-height 1s;
    overflow:hidden;
}
.nav-menu .account, .nav-menu .search {
    display:none;
}

.icon-cart {
    background: url(../img/icon-cart.png) no-repeat center center/24px 24px;
    height:24px;
    width:24px;
}
.icon-account {
    background: url(../img/icon-account.png) no-repeat center center/24px 24px;
    height:24px;
    width:24px;
}
.view-window .right-image {
    position:absolute;
    top:50%;
    left:70%;
    transform: translate(-50%,-50%);
    width:35%;
    max-width: 400px;
}
.view-window .content{
    position:absolute;
    top:50%;
    left:30%;
    transform: translate(-50%,-50%)
}
.view-window .content h1 {
    font-size: 5em;
    margin-bottom:20px;
    margin-top:30px;
}
.view-window .content>p {
    font-size: 1.1em;
    padding-bottom: 0.1em;
}
.view-window .content p {
    font-weight: bold;
}
.view-window .content .shop-box {
    margin:0;
}
.content-box {
   text-align: left;
}
.content-box h2 {
    padding-left:5%;
    padding-top:3%;
}
.content-box p {
    padding:10% 5%;
    line-height: 2em;
}

.about {
    background-color: rgb(250, 250, 250);
    padding:2em 0;
}
.about {

}
.popular{
    background-color: rgb(250, 250, 250);
    padding-top:20px;;
    padding-bottom: 10%;
}

.mp>h2 {
    text-align: center;
    padding-bottom: 2.5em;
}

.most {
    justify-content: left;
    align-items: center;
    position:relative;
}
.most .card-box {
    padding:1em 2em 1em 4em;
    margin-left:8em;
    background-color:white;
    text-align: left;
    height:300px;
    width:200px;
    
}
.most .card-box p {
    font-weight:normal;
    transition: 0.4s;
}
.most .card-box h3 span {
    color:#e8a52f;
}
.most img {
    position:absolute;
    left:7%;
    width:60%;
    transition: 1s ease;
    margin-top:15%;
}

.popular .most {
    border:1px solid transparent;
    transition: 0.4s ease;
}
.popular .most:hover .card-box p{
    text-decoration: underline;
}

.popular .most:hover img {
    transform: scale(1.1);
}

footer {
    margin:0;
    padding:1em 0;
    background-color: white;
}
.foot h2 span {
    font-size: 1.5em;
    color:#e8a52f;
}
.foot ul {
    padding:0;
}
.foot h2, .foot p {
    text-align: center;
    line-height: 1.4em;
    margin:0;
}
.foot li {
    padding:0.3em;
    display:inline-block;
}
.foot hr {
    margin:0 40%;
}

@media (max-width:800px) {
    .head .nav-menu ul li, .head .searchBar ul li {
    display:block;
    margin:15px 10px;
    text-align:left;
    width:100%;
    }
    .navHandler {
        display:flex;
        justify-content: space-between;
        align-items: center;
        flex:1 1 auto
    }
    .logo, .searchBar {
        display:none;
    }
    .nav-menu .account, .nav-menu .history, .nav-menu .search {
        display:block;
    }
    .nav-menu {
        max-height:0;
    }
    .showing {
        max-height:20em;
    }
    .content p br {
        display:none;
    }
    .view-window .content{
        text-align: center;
        top:20%;
        left:50%;
    }
    .view-window .right-image {
        top:70%;
        left:50%;
        width:50%;
    }
    .view-window .content h1 {
        font-size: 2em;
    }
    .view-window .content p {
        font-size: 1em;
        padding-bottom: 0.1em;
    }
    .content .shop-box {
        display:none;
    }

    .content-box p {
        font-size: 1em;
        padding:5%;
        line-height: 1.5em;
    }
    .most {
        background-color:rgb(247, 247, 247);
        margin:1em 0;
    }
    .flex.most {
        justify-content:space-around;
    }
    .most .card-box {
        height:250px;
        padding:1.2em 1.2em;
        margin-left:25%;
        background-color: none;
        
    }
    .most img {
        position:static;
        width:27%;
        margin-left:10%;
        margin-right:5%;
        margin-top: 1em;
    }

    .content-img .media-img {
        width:280px;
    }
    .visiable {
        display:block;
    }
        
}
@media (max-width:500px){
    .about {
        padding:0;
    }
 
    .popular{
        padding-top:20px;;
        padding-bottom: 20px;
    }
    .view-window .right-image {
        top:65%;
        width:60%;
    }
    .view-window .content h2 {
        font-size: 2em;
    }
    .view-window .content p {

        font-size: 0.85em;
    }
    .mp>h2 {
        padding-bottom: 0;
    }


    .content-box p {
    padding:3% 5%;
    }


   .most .card-box {
        height:200px;
        padding:1.2em 1.2em;
        background-color: none;
        width:150px;
        margin-left:16%;
    
    }
    .most .card-box p {
        font-size: 0.9em;
        font-weight:normal;
    }

    .most img {
        width:35%;
        margin-left:5%;
        margin-top:1.5em;
       
    } 
    
     .content-img .media-img {
         width:200px}
    }
    .foot h2, .foot p {
        margin:0;
    }
    .foot h2 span {
    font-size: 1.3em;

}
@media (max-width:400px){
    .most .card-box {
        margin-left:12%;
    }
    .most .card-box {
        margin-left:17%;
    }
    .most img {
        margin: 0;
        width:40%;
        margin-top:1.5em;
    }

}

@media (max-width:360px){


    .most .card-box {
        margin-left:12%;
    }
    .most .card-box {
        margin-left:8.5%;
    }
 

}