/*--------------------------------------------------------------------------------------//
  reset
//--------------------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block; }
body {
    line-height: 1; }
ol, ul {
    /*list-style: none;*/ }
blockquote, q {
    quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none; }
table {
    border-collapse: collapse;
    border-spacing: 0; }

/*--------------------------------------------------------------------------------------//
  layout
//--------------------------------------------------------------------------------------*/

.container{margin:0 auto; padding:0; text-align:left; position: relative;}

/* column configurations */
.column{float:left; position: relative;}
.one{width:100%;}
.half{width:50%;}
.one-fifth{width:20%}
.one-sixth{width:16.66666%}
.one-seventh{width:14.28571%}
.one-eighth{width:12.5%}
.one-ninth{width:11.11111%}
.one-tenth{width:10%}
.one-eleventh{width:9.0909%}
.one-twelfth{width:8.33333%}
.one-thirteenth{width:7.6923%}
.one-fourteenth{width:7.14285%}
.one-fifteenth{width:6.66666%}
.one-sixteenth{width:6.25%}

.one-fourth{width:25%;}
.three-fourths{width:75%;}

/*.one-third{width:33.33333%;}
.two-thirds{width:66.66667%;}
.one-third{width:39.33333%;}
.two-thirds{width:54.66667%;}
*/

.one-third{width:39.33333%;}
.two-thirds{width:60.66667%;}

.two-sevenths{width:28.57143%}
.five-sevenths{width:71.42857%}

.phi-s{width:38.19661%}
.phi-l{width:61.80339%}

.cwl{width:605px;}
.cws{width:395px;}

/*.container{width:85%;margin-left:auto;margin-right:auto;}*/
.container{width:1200px;}

/* clear */
.container:after,
.row:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clear {clear: both; display: block; overflow: hidden; visibility: hidden; width:0; height: 0;}

/* center floated elements */
.float-wrap {
    text-align: center;
    margin: 0 auto;             /* Important: Needed for IE8 */
    /*display: block;           /* Only needed if not block-level element */
    /* Or use */
    /*display: table;           /* This shrinkwraps .float-wrap to fit. */
    /* Works in all but IE6-7 */
}
.floated-inner {
    display: inline-block;      /* Works in all but IE6-7 */
    /* Or use */
    /*display: table-cell;      /* Use along with display: table; (above)
                                /* Works in all but IE6-7 */

    *display: inline;           /* IE6 & 7 madness for hasLayout */
    zoom: 1;                    /* Only need this if not using .clearfix */
}
/* Standard clearfix stuff */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }





/*--------------------------------------------------------------------------------------//
  common
//--------------------------------------------------------------------------------------*/

.right{float:right;}
.left{float:left;}
.inline{
    display:inline;
}
.inline-block{
    display:inline-block;
}

/*--------------------------------------------------------------------------------------//
  responsive
//--------------------------------------------------------------------------------------*/

.desktop{
    display:block;
}
.mobile{
    display:none;
}
/* all viewports */
@media only screen and (min-width: 1px) and (max-width: 991px)
{
    /*--------------------------------------------------------------------------------------//
            common
    //--------------------------------------------------------------------------------------*/
    .desktop{
        display:none;
    }
    .mobile{
        display:block;
    }
    .container{
        width:100%;
    }
}
/* lg */
@media only screen and (min-width: 1200px)
{
    .visible-lg{
        display:block;
    }
    .hidden-lg{
        display:none;
    }
}
/* md */
@media only screen and (min-width: 992px) and (max-width: 1199px)
{
    .visible-md{
        display:block;
    }
    .hidden-md{
        display:none;
    }
}
/* sm */
@media only screen and (min-width: 768px) and (max-width: 991px)
{
    .visible-sm{
        display:block;
    }

    .hidden-sm{
        display:none;
    }
}
/* xs */
@media only screen and (min-width: 1px) and (max-width: 767px)
{
    .visible-xs{
        display:block;
    }
    .hidden-xs{
        display:none;
    }

    .one,
    .half,
    .one-third,
    .one-fourth,
    .one-fifth,
    .one-sixth,
    .one-seventh,
    .one-eighth,
    .one-ninth,
    .one-tenth,
    .one-eleventh,
    .one-twelfth,
    .one-thirteenth,
    .one-fourteenth,
    .one-fifteenth,
    .one-sixteenth,

    .three-fourths,
    .two-thirds,
    .two-sevenths,
    .five-sevenths,

    .phi-l,
    .phi-s,
    .cwl,
    .cws,

    .container{
        width:100%;
    }
}
/* xs/sm/md */
@media only screen and (min-width: 1px) and (max-width: 1199px)
{

    .container{
        width:98%;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1230px)
{

    .container{
        width:95%;
    }
}