.main-section { display: block; width: 100%; padding: 0 0 40px 0; } #grid-button { display: none; position: fixed; top: 10px; left: 10px; border: solid 1px #777; background-color: white; z-index: 999999; padding: 10px; color: #777; cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; filter: alpha(opacity=20); -moz-opacity: 0.2; -khtml-opacity: 0.2; opacity: 0.2; } #grid-button:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } #test-cnt { width: 1120px; margin: 0 auto; } #test-cols { display: block; display: none; width: 1120px; margin-left: auto; margin-right: auto; height: 1px; margin-top: -1px; margin-left: 0px; position: relative; z-index: 99999; } .test-cols-cnt { position: absolute; left: 0px; top: 1px; height: 100%; z-index: 99999; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; pointer-events: none; } .col-test { width: 56px; height: 1000px; background-color: #3498db; margin-left: 12px; margin-right: 12px; display: inline-block; z-index: 99999; pointer-events: none; } .col { margin: 0 32px 0 0; display: inline-block; vertical-align: top; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .cols-1 { width: 64px; } .cols-2 { width: 160px; } .cols-3 { width: 256px; } .cols-4 { width: 352px; } .cols-5 { width: 448px; } .cols-6 { width: 544px; } .cols-7 { width: 640px; } .cols-8 { width: 736px; } .cols-9 { width: 832px; } .cols-10 { width: 928px; } .cols-11 { width: 1024px; } .cols-12 { width: 1120px; } #grid { pointer-events: none; display: block; display: none; position: fixed; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 99999; min-height: 2000px; } #grid .grid-center { margin: 0 auto; display: block; width: 1120px; height: 100%; background-color: #ccc; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; } #grid .col { display: inline-block; width: 64px; margin: 0 32px 0 0; height: 100%; background-color: black; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; } #grid .col:last-child { margin: 0 0 0 0; } img { vertical-align: top; } a img { border: none; } html *, body * { font-family: 'Roboto', sans-serif; font-synthesis: none; -moz-font-feature-settings: 'kern'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html { height: 100%; } html, body { width: 100%; position: relative; margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } html { } body { margin: 0; padding: 0 0 0 0; border: 0; outline: 0; -webkit-appearance: none; position: relative; font-size: 14px; min-width: 960px; background-color: white; background-position: 0 0; } #header .menu { display: block; width: 100%; position: fixed; top: 0px; left: 0px; background-color: white; z-index: 100; } #header .home { position: fixed; left: 10px; top: 10px; z-index: 200; width: 25px; } #header .home img { width: 100%; height: auto; } @media all and (max-width: 500px) { #header .home { left: 14px; top: 14px; width: 60px; z-index: 300; background-color: transparent; } #header .menu .item:nth-child(1) { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding-left: 30px; } } #header .menu .item { display: inline-block; vertical-align: top; line-height: 40px; width: 33.333%; white-space: nowrap; text-align: center; text-decoration: none; color: white; font-weight: 400; font-size: 20px; } #header .menu .item:nth-child(1) { background-color: #00C322; } #header .menu .item:nth-child(2) { background-color: #FF7A00; } #header .menu .item:nth-child(3) { background-color: #D2006B; } #header .menu .item:nth-child(1):hover { background-color: #259238; } #header .menu .item:nth-child(2):hover { background-color: #BF7530; } #header .menu .item:nth-child(3):hover { background-color: #9D2763; } @media all and (max-width: 500px) { #header .menu .item { font-size: 10vw; padding: 20px 0px; } }