/* =Grid >> Global
--------------------------------------------------------------------------------*/
.half-width,
.one-third,
.one-fourth,
.one-fifth,
.one-sixth,
.two-third,
.two-sixth,
.two-fifth,
.three-fourth,
.three-fifth,
.four-fifth,
.four-sixth,
.five-sixth,
.full-width
{
    display: inline;
    float: left;
    width : 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

@media screen {
    #main, #right, #left {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

}


/* Media Query
--------------------------------------------------------------------------------*/

@media only screen and (min-width: 320px) {
    body {border-top : 10px solid grey; }
    body:after{
        /*657117653656608769*/
        content : 'w320px ';
        display : none;
    }

}



/* resize bigger */
/* display with min width 479 iphone portrait */
@media only screen and (max-width: 479px) {
    body {border-top : 10px solid yellow; }
    body:after{
        content : 'w479px ';
        display : none;
    }
}

/* display with min width 375 iphone 6/7/8 portrait */
@media only screen and (min-width: 375px) {

    body {border-top : 10px solid black; }

    body:after{
        content : 'w375px ';
        display : none;
    }
}



/* display with min width 480 iphone lansacape */
@media only screen and (min-width: 480px) {
    body {border-top : 10px solid green; }
    body:after{
        content : 'w480px';
        display : none;
    }

    .one-third, .one-sixth {width: 33.33333333333333%;} /* 184@736, 232@928, 292@1168*/

    .two-third{width: 66.66666666666666%}

    .one-fourth {width: 50%;}

    .full-width {width: 100%;}

    .text-center{
        text-align: center;
    }

}




/* min-width:768px ipad portrait*/
@media only screen and (min-width: 768px) {
    body {border-top : 10px solid blue; }
    body:after{
        content : 'w760px';
        display : none;
    }

    .half-width {width: 50%;}
    .one-fifth {width: 20%;}
    .two-fifth {width: 40%;}
    .three-fifth {width: 60%;}
    .three-fourth {width: 75%;}
    .four-fifth {width: 80%;}
    .one-sixth {width: 16.66%;}
    .five-sixth {width: 83.333%;}

    .half-width .content-div {
        margin-right: 0.75rem;
    }
}





@media only screen and (min-width: 990px) {
    body:after{
        content : 'w990px';
        display : none;
    }

    .one-fourth {width: 25%;}
}


/* min-width:1024 ipad landscape*/
@media only screen and (min-width: 1024px)   {
    body {border-top : 10px solid red; }
    body:after{
        content : 'w1024px';
        display : none;
    }
}


/* min-width:1025  */
@media only screen and (min-width:1025px)   {
    body {
        border-top : none;
    }
}

/* remove body border*/
body {border-top : none; position: relative}