/* * Amazium (http://www.amazium.co.uk) * Copyright 2010 - 2013, Mike Ballan * Licensed under MIT (https://github.com/OwlyStuff/Amazium/blob/master/LICENSE) */ .max-img { width:100%; height:auto; } /*********************************************** Screen 1200px+ ***********************************************/ .row { margin:0 auto; width:1200px; display:table; } .row .row { margin:0 -20px; width:auto; display:inline-block; } .grid_1 { width:60px; margin:0 20px; float:left; display:inline; } .grid_2 { width:160px; margin:0 20px; float:left; display:inline; } .grid_3 { width:260px; margin:0 20px; float:left; display:inline; } .grid_4 { width:360px; margin:0 20px; float:left; display:inline; } .grid_5 { width:460px; margin:0 20px; float:left; display:inline; } .grid_6 { width:560px; margin:0 20px; float:left; display:inline; } .grid_7 { width:660px; margin:0 20px; float:left; display:inline; } .grid_8 { width:760px; margin:0 20px; float:left; display:inline; } .grid_9 { width:860px; margin:0 20px; float:left; display:inline; } .grid_10 { width:960px; margin:0 20px; float:left; display:inline; } .grid_11 { width:1060px; margin:0 20px; float:left; display:inline; } .grid_12 { width:1160px; margin:0 20px; 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-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:0 -16px; } .grid_1 { width:48px; margin:0 16px; } .grid_2 { width:128px; margin:0 16px; } .grid_3 { width:208px; margin:0 16px; } .grid_4 { width:288px; margin:0 16px; } .grid_5 { width:368px; margin:0 16px; } .grid_6 { width:448px; margin:0 16px; } .grid_7 { width:528px; margin:0 16px; } .grid_8 { width:608px; margin:0 16px; } .grid_9 { width:688px; margin:0 16px; } .grid_10 { width:768px; margin:0 16px; } .grid_11 { width:848px; margin:0 16px; } .grid_12 { width:928px; margin:0 16px; } .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-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:0 -14px; } .grid_1 { width:36px; margin:0 14px; } .grid_2 { width:100px; margin:0 14px; } .grid_3 { width:164px; margin:0 14px; } .grid_4 { width:228px; margin:0 14px; } .grid_5 { width:292px; margin:0 14px; } .grid_6 { width:356px; margin:0 14px; } .grid_7 { width:420px; margin:0 14px; } .grid_8 { width:484px; margin:0 14px; } .grid_9 { width:548px; margin:0 14px; } .grid_10 { width:612px; margin:0 14px; } .grid_11 { width:676px; margin:0 14px; } .grid_12 { width:740px; margin:0 14px; } .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 ***********************************************/ @media only screen and (max-width: 767px) { .row { padding:0 16px; 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:10px 0 0 0; float:none; display:block; } .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; }