/***** Screen 960px *****/
html, body, #mainheader {min-width: 992px;}
.wrap {margin: 0 auto; width: 100%; overflow: hidden;}
.row {margin: 0 auto; width: 960px; overflow: hidden;}
.row .row {margin: 0 -16px 0 -16px; width: auto; display: inline-block;}
.grid_1 {width: 48px; margin: 0 16px 0 16px; overflow: hidden; float: left; display: inline;}
.grid_2 {width: 128px; margin: 0 16px 0 16px; overflow: hidden; float: left; display: inline;}
.grid_3 {width: 208px; margin: 0 16px 0 16px; overflow: hidden; float: left; display: inline;}
.grid_4 {width: 288px; margin: 0 16px 0 16px; overflow: hidden; float: left; display: inline;}
.grid_5 {width: 368px; margin: 0 16px 0 16px; overflow: hidden; float: left; display: inline;}
.grid_6 {width: 448px; margin: 0 16px 0 16px; overflow: hidden; float: left; display: inline;}
.grid_7 {width: 528px; margin: 0 16px 0 16px; overflow: hidden; float: left; display: inline;}
.grid_8 {width: 608px; margin: 0 16px 0 16px; overflow: hidden; float: left; display: inline;}
.grid_9 {width: 688px; margin: 0 16px 0 16px; overflow: hidden; float: left; display: inline;}
.grid_10 {width: 768px; margin: 0 16px 0 16px; overflow: hidden; float: left; display: inline;}
.grid_11 {width: 848px; margin: 0 16px 0 16px; overflow: hidden; float: left; display: inline;}
.grid_12 {width: 928px; margin: 0 16px 0 16px; overflow: hidden; float: left; display: inline;}
.offset_1 {margin-left: 96px;}
.offset_2 {margin-left: 176px;}
.offset_3 {margin-left: 256px;}
.offset_4 {margin-left: 336px;}
.offset_5 {margin-left: 416px;}
.offset_6 {margin-left: 496px;}
.offset_7 {margin-left: 576px;}
.offset_8 {margin-left: 656px;}
.offset_9 {margin-left: 736px;}
.offset_10 {margin-left: 816px;}
.offset_11 {margin-left: 896px;}
.show-phone {display: none !important;}
.show-tablet {display: none !important;}
.show-screen {display: inherit !important;}
.hide-phone {display: inherit !important;}
.hide-tablet {display: inherit !important;}
.hide-screen {display: none !important;}
/***** Screen Bigger than 960px *****/
@media only screen and (min-width: 1200px) {
html, body {min-width: 1200px;}
.row {margin: 0 auto; width: 1200px; overflow: hidden;}
.row .row {margin: 0 -20px 0 -20px; width: auto; display: inline-block;}
.grid_1 {width: 60px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_2 {width: 160px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_3 {width: 260px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_4 {width: 360px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_5 {width: 460px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_6 {width: 560px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_7 {width: 660px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_8 {width: 760px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_9 {width: 860px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_10 {width: 960px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_11 {width: 1060px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.grid_12 {width: 1160px; margin: 0 20px 0 20px; overflow: hidden; float: left; display: inline;}
.offset_1 {margin-left: 120px;}
.offset_2 {margin-left: 220px;}
.offset_3 {margin-left: 320px;}
.offset_4 {margin-left: 420px;}
.offset_5 {margin-left: 520px;}
.offset_6 {margin-left: 620px;}
.offset_7 {margin-left: 720px;}
.offset_8 {margin-left: 820px;}
.offset_9 {margin-left: 920px;}
.offset_10 {margin-left: 1020px;}
.offset_11 {margin-left: 1120px;}
.show-phone {display: none !important;}
.show-tablet {display: none !important;}
.show-screen {display: inherit;}
.hide-phone {display: inherit !important;}
.hide-tablet {display: inherit !important;}
.hide-screen {display: none !important;}
}
/***** Phone (portrait 300px) *****/
@media only screen and (max-width: 767px) {
html, body, #mainheader {min-width: 400px;}
.row {margin: 0 auto; width: 300px; overflow: hidden;}
.row .row {margin: 0; width: auto; display: inline-block;}
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {width: 300px; margin: 10px 0 0 0; overflow: hidden; float: left; display: inline;}
.offset_1,
.offset_2,
.offset_3,
.offset_4,
.offset_5,
.offset_6,
.offset_7,
.offset_8,
.offset_9,
.offset_10,
.offset_11 {margin-left: 0;}
.show-phone {display: inherit !important;}
.show-tablet {display: none !important;}
.show-screen {display: none !important;}
.hide-phone {display: none !important;}
.hide-tablet {display: inherit !important;}
.hide-screen {display: inherit !important;}
}
/***** Phone (landscape 420px) *****/
@media only screen and (min-width: 480px) and (max-width: 767px) {
html, body {min-width: 480px;}
.row {margin: 0 auto; width: 456px; overflow: hidden;}
.row .row {margin: 0; width: auto; display: inline-block;}
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {width: 456px; margin: 10px 0 0 0; overflow: hidden; float: left; display: inline;}
.show-phone {display: inherit !important;}
.show-tablet {display: none !important;}
.show-screen {display: none !important;}
.hide-phone {display: none !important;}
.hide-tablet {display: inherit !important;}
.hide-screen {display: inherit !important;}
}
/***** Clean up *****/
.container:after {content: "\0020"; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {content: "\0020"; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;}
.row:after,
.clearfix:after {clear: both;}
.row,
.clearfix {zoom: 1;}
.clear {clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;}