/* xong */
@media screen and (max-width: 319px) {
    #intro h1{
        text-align: center;
    }
    .item-project .readmore{
        padding: 10px;
    }
    #logo img{
        padding: 5px 0px;
    }
    .mfp-container{
        height: auto ! Important;
        position: fixed;
        top: 0px;
    }
    body.body-scroll-lock--active .mfp-wrap{
        height: auto !Important;
        overflow: initial;
    }
    .section-title-bold-center span{
        padding: 3px 7px !Important;
        font-size: 14px !Important;
    }
    .intro .slogan{
        font-size: 15px;
    }
    #logo{
        border: none;
    }
}

@media (min-width: 320px) and (max-width: 480px) {
    #intro h1{
        text-align: center;
    }
    .item-project .readmore{
        padding: 10px;
    }
    #logo img{
        padding: 5px 0px;
    }
    .mfp-container{
        height: auto ! Important;
        position: fixed;
        top: 0px;
    }
    body.body-scroll-lock--active .mfp-wrap{
        height: auto !Important;
        overflow: initial;
    }
    .section-title-bold-center span{
        padding: 3px 7px !Important;
        font-size: 14px !Important;
    }
    .intro .slogan{
        font-size: 15px;
    }
    #logo{
        border: none;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    #intro h1{
        text-align: center;
    }
    .item-project .readmore{
        padding: 10px;
    }
    #logo img{
        padding: 5px 0px;
    }
    .mfp-container{
        height: auto ! Important;
        position: fixed;
        top: 0px;
    }
    body.body-scroll-lock--active .mfp-wrap{
        height: auto !Important;
        overflow: initial;
    }
    .section-title-bold-center span{
        padding: 3px 7px !Important;
        font-size: 14px !Important;
    }
    .intro .slogan{
        font-size: 15px;
    }
    #logo{
        border: none;
    }
}
@media (min-width: 768px) and (max-width: 849px) {
    #logo{
        width: 120px;
        border-right: none;
        margin: 0px;
        padding: 0px;
    }
}
@media (min-width: 850px) and (max-width: 993px) {
    #logo{
        width: 89px;
        border-right: none;
        margin: 0px;
        padding: 0px;
    }
    #masthead .flex-right .header-button-2,
    #masthead .flex-right .header-button-1{
        display: none;
    }
    .nav-spacing-xlarge>li {
        margin: 0 7px;
    }
}
@media (min-width: 994px) and (max-width: 1200px) {
    #logo{
        width: 105px;
        margin: 0px;
        padding: 0px 10px;
    }
    .header-main .nav > li > a{
        font-size: 14px;
    }
    .nav-spacing-xlarge>li {
        margin: 0 5px;
    }
    .header-button .button {
        padding: 0px 3px;
    }
}
@media (min-width: 1201px) and (max-width: 1270px) {
    #logo{
        width: 120px;        
        margin: 0px;
        padding: 0px 10px;
    }
    .header-main .nav > li > a{
        font-size: 14px;
    }
    .nav-spacing-xlarge>li {
        margin: 0 10px;
    }
}