/* * Amazium V3.3.0 * Copyright 2013, Mike Ballan * www.amazium.co.uk */ /***** Screen 1200px+ *****/ .row { margin:0 auto; width:1200px; display:table; } .row .row { margin:0 0px; width:auto; display:inline-block; } .grid_1 { width:100px; margin: 0px; float:left; display:inline; } .grid_2 { width:200px; margin: 0px; float:left; display:inline; } .grid_3 { width:300px; margin: 0px; float:left; display:inline; } .grid_4 { width:400px; margin: 0px; float:left; display:inline; } .grid_5 { width:500px; margin: 0px; float:left; display:inline; } .grid_6 { width:600px; margin: 0px; float:left; display:inline; } .grid_7 { width:700px; margin: 0px; float:left; display:inline; } .grid_8 { width:800px; margin: 0px; float:left; display:inline; } .grid_9 { width:900px; margin: 0px; float:left; display:inline; } .grid_10 { width:1000px; margin: 0px; float:left; display:inline; } .grid_11 { width:1100px; margin: 0px; float:left; display:inline; } .grid_12 { width:1200px; margin: 0px; float:left; display:inline; } .grid_padding_1 { width: 80px; padding: 0px 10px 0px 10px; } .grid_padding_2 { width: 180px; padding: 0px 10px 0px 10px; } .grid_padding_3 { width: 280px; padding: 0px 10px 0px 10px; } .grid_padding_4 { width: 380px; padding: 0px 10px 0px 10px; } .grid_padding_5 { width: 480px; padding: 0px 10px 0px 10px; } .grid_padding_6 { width: 580px; padding: 0px 10px 0px 10px; } .grid_padding_7 { width: 680px; padding: 0px 10px 0px 10px; } .grid_padding_8 { width: 780px; padding: 0px 10px 0px 10px; } .grid_padding_9 { width: 880px; padding: 0px 10px 0px 10px; } .grid_padding_10 { width: 980px; padding: 0px 10px 0px 10px; } .grid_padding_11 { width: 1080px; padding: 0px 10px 0px 10px; } .grid_padding_12 { width: 1180px; padding: 0px 10px 0px 10px; } .show-mobile { display:none !important; } .show-tablet { display:none !important; } .show-screen { display:inherit; } .hide-mobile { display:inherit !important; } .hide-tablet { display:inherit !important; } .hide-screen { display:none !important; } /***** Screen Smaller than 1200px *****/ @media only screen and (min-width: 960px) and (max-width: 1199px) { .row { width:960px; } .row .row { margin:0px; } .grid_1 { width:80px; margin: 0px; } .grid_2 { width:160px; margin: 0px; } .grid_3 { width:240px; margin: 0px; } .grid_4 { width:320px; margin: 0px; } .grid_5 { width:400px; margin: 0px; } .grid_6 { width:480px; margin: 0px; } .grid_7 { width:540px; margin: 0px; } .grid_8 { width:640px; margin: 0px; } .grid_9 { width:720px; margin: 0px; } .grid_10 { width:800px; margin: 0px; } .grid_11 { width:880px; margin: 0px; } .grid_12 { width:960px; margin: 0px; } .grid_padding_1 { width: 60px; padding: 0px 10px 0px 10px; } .grid_padding_2 { width: 140px; padding: 0px 10px 0px 10px; } .grid_padding_3 { width: 220px; padding: 0px 10px 0px 10px; } .grid_padding_4 { width: 300px; padding: 0px 10px 0px 10px; } .grid_padding_5 { width: 380px; padding: 0px 10px 0px 10px; } .grid_padding_6 { width: 460px; padding: 0px 10px 0px 10px; } .grid_padding_7 { width: 520px; padding: 0px 10px 0px 10px; } .grid_padding_8 { width: 620px; padding: 0px 10px 0px 10px; } .grid_padding_9 { width: 700px; padding: 0px 10px 0px 10px; } .grid_padding_10 { width: 780px; padding: 0px 10px 0px 10px; } .grid_padding_11 { width: 860px; padding: 0px 10px 0px 10px; } .grid_padding_12 { width: 940px; padding: 0px 10px 0px 10px; } .show-mobile { display:none !important; } .show-tablet { display:none !important; } .show-screen { display:inherit !important; } .hide-mobile { display:inherit !important; } .hide-tablet { display:inherit !important; } .hide-screen { display:none !important; } } /***** Tablet (Smaller than 959px) *****/ @media only screen and (min-width: 768px) and (max-width: 959px) { .row { width:768px; } .row .row { margin:0px; } .grid_1 { width:64px; margin: 0px; } .grid_2 { width:128px; margin: 0px; } .grid_3 { width:192px; margin: 0px; } .grid_4 { width:256px; margin: 0px; } .grid_5 { width:320px; margin: 0px; } .grid_6 { width:384px; margin: 0px; } .grid_7 { width:448px; margin: 0px; } .grid_8 { width:512px; margin: 0px; } .grid_9 { width:576px; margin: 0px; } .grid_10 { width:640px; margin: 0px; } .grid_11 { width:704px; margin: 0px; } .grid_12 { width:768px; margin: 0px; } .grid_padding_1 { width: 54px; padding: 0px 5px 0px 5px; } .grid_padding_2 { width: 118px; padding: 0px 5px 0px 5px; } .grid_padding_3 { width: 182px; padding: 0px 5px 0px 5px; } .grid_padding_4 { width: 246px; padding: 0px 5px 0px 5px; } .grid_padding_5 { width: 310px; padding: 0px 5px 0px 5px; } .grid_padding_6 { width: 374px; padding: 0px 5px 0px 5px; } .grid_padding_7 { width: 438px; padding: 0px 5px 0px 5px; } .grid_padding_8 { width: 502px; padding: 0px 5px 0px 5px; } .grid_padding_9 { width: 566px; padding: 0px 5px 0px 5px; } .grid_padding_10 { width: 630px; padding: 0px 5px 0px 5px; } .grid_padding_11 { width: 694px; padding: 0px 5px 0px 5px; } .grid_padding_12 { width: 758px; padding: 0px 5px 0px 5px; } /* .grid_1_tablet { width:36px; } .grid_2_tablet { width:100px; } .grid_3_tablet { width:164px; } .grid_4_tablet { width:228px; } .grid_5_tablet { width:292px; } .grid_6_tablet { width:356px; } .grid_7_tablet { width:420px; } .grid_8_tablet { width:484px; } .grid_9_tablet { width:548px; } .grid_10_tablet { width:612px; } .grid_11_tablet { width:676px; } .grid_12_tablet { width:740px; } */ /* .offset_1 { margin-left:78px; } .offset_2 { margin-left:142px; } .offset_3 { margin-left:206px; } .offset_4 { margin-left:270px; } .offset_5 { margin-left:334px; } .offset_6 { margin-left:398px; } .offset_7 { margin-left:462px; } .offset_8 { margin-left:526px; } .offset_9 { margin-left:590px; } .offset_10 { margin-left:654px; } .offset_11 { margin-left:718px; } */ .show-mobile { display:none !important; } .show-tablet { display:inherit !important; } .show-screen { display:none !important; } .hide-mobile { display:inherit !important; } .hide-tablet { display:none !important; } .hide-screen { display:inherit !important; } } /***** Mobile *****/ /***** Updated based on essencious Mobile version *****/ @media only screen and (max-width: 767px) { .row { padding: 0px; width:100%; display:block; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } .row .row { margin:0; padding:0; width:100%; display: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:100%; margin:0px 0 0 0; float:none; display:block; } .grid_padding_1 { width: 100%; padding: 0px 10px 0px 10px; } .grid_padding_2 { width: 100%; padding: 0px 10px 0px 10px; } .grid_padding_3 { width: 100%; padding: 0px 10px 0px 10px; } .grid_padding_4 { width: 100%; padding: 0px 10px 0px 10px; } .grid_padding_5 { width: 100%; padding: 0px 10px 0px 10px; } .grid_padding_6 { width: 100%; padding: 0px 10px 0px 10px; } .grid_padding_7 { width: 100%; padding: 0px 10px 0px 10px; } .grid_padding_8 { width: 100%; padding: 0px 10px 0px 10px; } .grid_padding_9 { width: 100%; padding: 0px 10px 0px 10px; } .grid_padding_10 { width: 100%; padding: 0px 10px 0px 10px; } .grid_padding_11 { width: 100%; padding: 0px 10px 0px 10px; } .grid_padding_12 { width: 100%; padding: 0px 10px 0px 10px; } .grid_6_mobile { width:48%; } .grid_6_mobile:nth-child(odd) { width:48%; float:left; } .grid_6_mobile:nth-child(even) { float:right; } .show-mobile { display:inherit !important; } .show-tablet { display:none !important; } .show-screen { display:none !important; } .hide-mobile { 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; }