@media screen and (max-width: 1208px){
    /* .btn-connect{
        display: none !important;
    } */
   
}
/*Ipad ngang(1024 x 768)*/
@media screen and (max-width: 1024px){
    .phases {
    margin-top: 30px;
}
        .mint-page-panel {
    bottom: 0 !important;
    position: relative !important;
    left: 0;
    right: 0;
    width: 70%;
    margin: 0 auto;
}
    #connectSection {
        margin:50px 0px !important;
        position: relative !important;
        top: auto !important;
        right: 0px !important;
        width: 100% !important;
    }
a#connectToMetamask {
    margin: 0px auto !important;
    display: block;
    /*position: relative !important;*/
    right: 0 !important;
    float: none !important;
}
    .logo {
        width: 208px !important;
        height: auto !important;
        margin-left: auto;
        margin-right: auto;
    }
    .logo-header {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(1,minmax(0,1fr));
    }
    .left-bar{
        margin-top: 40px !important;
    }
    .right-bar{
        margin-top: 40px !important;
    }
    .header .mint-btn {
        right: 40% !important;
        top: 142px !important;
    }
    .content {
        /*margin-top: 130px !important;*/
    }
   
}
/*Ipad dọc(768 x 1024)*/
@media screen and (max-width: 768px){ 
    .logo-header {
    max-width: 100% !important;
}
    .phases {
    margin-top: 30px;
}
        .mint-page-panel {
    bottom: 0 !important;
    position: relative !important;
    left: 0;
    right: 0;
    width: 70%;
    margin: 0 auto;
}
    .top-section h1 ,.top-section h3{
    font-size: 32px !important;
}
    .logo {
      
        margin-left: auto;
        margin-right: auto;
        width: 194px !important;
    }
    .logo-header {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(1,minmax(0,1fr));
    }
    .main-div{ display:block !important;}
    .left-bar{
        margin-top: 40px !important;
    }
    .right-bar{
        margin-top: 40px !important;
    }
    .image{
        width: 276px !important;
    }
    .header .mint-btn {
        right: 40% !important;
        top: 142px;
    }
   
}
/*Tablet nhỏ(480 x 640)*/
@media screen and (max-width: 412px){   
       .slider-nav img {
    height: auto !important;
}
.hfe-site-logo-container {
    text-align: center;
}
.header ul li {
    padding: 0px 2px !important;
    font-size: 13px;
}
.header .container{display:block !important;}
    .features {
    width: 90% !important;
}
    footer.footer {
    position: relative !important;
}
        .mint-page-panel {
    bottom: 0 !important;
    position: relative !important;
    left: 0;
    right: 0;
    width: 70%;
    margin: 0 auto;
}
    .logo {
        position: relative;
        height: auto !important;
    margin-left: auto;
    margin-right: auto;
    width: 190px !important;
        
    }
    .left-bar{
        margin-top: 40px;
    }
    .right-bar{
        margin-top: 40px;
    }
    .header .mint-btn {
        font-size: 10px !important;
        width: 140px !important;
        height: 50px !important;
        right: 32% !important;
        top: 142px;
        
    }
    #wrapper{
        overflow-y: auto;     display: block;
    }
}
/* Iphone (480 x 640) */
@media screen and (max-width:390px){
    .slider-nav img {
    height: auto !important;
}
.logo-header {
    max-width: 100% !important;
}
    footer.footer {
    position: relative !important;
}
.mint-page-panel {
    bottom: 0 !important;
    position: relative !important;
    left: 0;
    right: 0;
    width: 70%;
    margin: 0 auto;
}
    .logo {   
        position: relative;
        height: auto !important;
    margin-left: auto;
    margin-right: auto;
    width: 190px !important;
    
 }
 #wrapper{
    overflow-y: auto; display:block;
}
}
/* Smart phone nhỏ */
@media screen and (max-width:376px){
    .logo-header {
    max-width: 100% !important;
}
    .mint-page-panel {
    bottom: 0 !important;
    position: relative !important;
    left: 0;
    right: 0;
    width: 70%;
    margin: 0 auto;
}
   footer.footer {
    position: relative !important;
}
    #wrapper{
        overflow-y: auto;     display: block;
    }
    .logo {   
        position: relative;
        height: auto !important;
    margin-left: auto;
    margin-right: auto;
    width: 190px !important;
    
    }
    .header .mint-btn{
        top: 104px !important;
        left: 120px !important;
    }
    .mint-page-panel{
        margin-top: 2rem !important;
    }
    .image {
        width: 195px !important;
    }
    .header .logo-header{
        top: 10px !important;
    }
}