/* * Amazium (http://www.amazium.co.uk) * Copyright 2010 - 2013, Mike Ballan * Licensed under MIT (https://github.com/OwlyStuff/Amazium/blob/master/LICENSE) */ /*********************************************** Screen 1200px+ ***********************************************/ .row , .main_wrap { margin:0 auto; width:1200px; display:table; } .row .row { margin:0 -10px; width:auto; display:inline-block; } .grid_1 { width:80px; margin:0 10px; float:left; display:inline; } .grid_2 { width:180px; margin:0 10px; float:left; display:inline; } .grid_3 { width:280px; margin:0 10px; float:left; display:inline; } .grid_4 { width:380px; margin:0 10px; float:left; display:inline; } .grid_5 { width:480px; margin:0 10px; float:left; display:inline; } .grid_5A { width:480px; margin:0 10px; float:left; display:inline; } .grid_6 { width:580px; margin:0 10px; float:left; display:inline; } .grid_7 { width:680px; margin:0 10px; float:left; display:inline; } .grid_7A { width:680px; margin:0 10px; float:left; display:inline; } .grid_8 { width:780px; margin:0 10px; float:left; display:inline; } .grid_9 { width:880px; margin:0 10px; float:left; display:inline; } .grid_10 { width:980px; margin:0 10px; float:left; display:inline; } .grid_11 { width:1080px; margin:0 10px; float:left; display:inline; } .grid_12 { width:1180px; margin:0 10px; float:left; display:inline; } .offset_1 { margin-left:100px; } .offset_2 { margin-left:200px; } .offset_3 { margin-left:300px; } .offset_4 { margin-left:400px; } .offset_5 { margin-left:500px; } .offset_6 { margin-left:600px; } .offset_7 { margin-left:700px; } .offset_8 { margin-left:800px; } .offset_9 { margin-left:900px; } .offset_10 { margin-left:1000px; } .offset_11 { margin-left:1100px; } .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 Medium Devices, Desktops ***********************************************/ @media only screen and (max-width :1199px) { .row , .main_wrap { width:960px; } .row .row { margin:0 -8px; } .grid_1 { width:64px; margin:0 8px; } .grid_2 { width:144px; margin:0 8px; } .grid_3 { width:224px; margin:0 8px; } .grid_4 { width:304px; margin:0 8px; } .grid_5 { width:384px; margin:0 8px; } .grid_5A { width:384px; margin:0 8px; } .grid_6 { width:464px; margin:0 8px; } .grid_7 { width:544px; margin:0 8px; } .grid_7A { width:544px; margin:0 8px; } .grid_8 { width:624px; margin:0 8px; } .grid_9 { width:704px; margin:0 8px; } .grid_10 { width:784px; margin:0 8px; } .grid_11 { width:864px; margin:0 8px; } .grid_12 { width:944px; margin:0 8px; } .offset_1 { margin-left:112px; } .offset_2 { margin-left:192px; } .offset_3 { margin-left:272px; } .offset_4 { margin-left:352px; } .offset_5 { margin-left:432px; } .offset_6 { margin-left:512px; } .offset_7 { margin-left:592px; } .offset_8 { margin-left:668px; } .offset_9 { margin-left:752px; } .offset_10 { margin-left:832px; } .offset_11 { margin-left:912px; } .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) Small Devices, Tablets ***********************************************/ @media only screen and (max-width : 800px) { .row , .main_wrap { width:768px; } .row .row { margin:0 -8px; } .grid_1 { width:48px; margin:0 8px; } .grid_2 { width:112px; margin:0 8px; } .grid_3 { width:176px; margin:0 8px; } .grid_4 { width:240px; margin:0 8px;} .grid_5 { width:304px; margin:0 8px;} .grid_5A { width:304px; margin:0 8px;} .grid_6 { width:368px; margin:0 8px; } .grid_7 { width:432px; margin:0 8px; } .grid_7A { width:432px; margin:0 8px; } .grid_8 { width:496px; margin:0 8px; } .grid_9 { width:560px; margin:0 8px; } .grid_10 { width:624px; margin:0 8px; } .grid_11 { width:688px; margin:0 8px; } .grid_12 { width:752px; margin:0 8px; } .grid_1_tablet { width:48px; } .grid_2_tablet { width:112px; } .grid_3_tablet { width:176px; } .grid_4_tablet { width:240px; } .grid_5_tablet { width:304px; } .grid_6_tablet { width:368px; } .grid_7_tablet { width:432px; } .grid_8_tablet { width:496px; } .grid_9_tablet { width:560px; } .grid_10_tablet { width:624px; } .grid_11_tablet { width:688px; } .grid_12_tablet { width:752px; } .offset_1 { margin-left:66px; } .offset_2 { margin-left:130px; } .offset_3 { margin-left:194px; } .offset_4 { margin-left:258px; } .offset_5 { margin-left:322px; } .offset_6 { margin-left:386px; } .offset_7 { margin-left:450px; } .offset_8 { margin-left:514px; } .offset_9 { margin-left:578px; } .offset_10 { margin-left:642px; } .offset_11 { margin-left:706px; } .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 (landscape 640px) ***********************************************/ @media only screen and (min-width:640px) && (max-width: 767px) { .row , .main_wrap { width: 636px; } .row .row { margin:0 -8px; } .grid_1 { width: 37px; margin:0 8px; } .grid_2 { width: 90px; margin:0 8px; } .grid_3 { width: 143px; margin:0 8px; } .grid_4 { width: 196px; margin:0 8px;} .grid_5 { width: 249px; margin:0 8px;} .grid_5A { width: 249px; margin:0 8px;} .grid_6 { width: 302px; margin:0 8px; } .grid_7 { width: 355px; margin:0 8px; } .grid_7A { width: 355px; margin:0 8px; } .grid_8 { width: 408px; margin:0 8px; } .grid_9 { width: 461px; margin:0 8px; } .grid_10 { width: 514px; margin:0 8px; } .grid_11 { width: 567px; margin:0 8px; } .grid_12 { width: 620px; margin:0 8px; } } /*********************************************** Nexus ***********************************************/ @media only screen and (max-width: 610px) { .row , .main_wrap { width: 600px; } .row .row { margin:0 -8px; } .grid_1 { width: 34px; margin:0 8px; } .grid_2 { width: 84px; margin:0 8px; } .grid_3 { width: 134px; margin:0 8px; } .grid_4 { width: 184px; margin:0 8px;} .grid_5 { width: 234px; margin:0 8px;} .grid_5A { width: 234px; margin:0 8px;} .grid_6 { width: 284px; margin:0 8px; } .grid_7 { width: 334px; margin:0 8px; } .grid_7A { width: 334px; margin:0 8px; } .grid_8 { width: 384px; margin:0 8px; } .grid_9 { width: 434px; margin:0 8px; } .grid_10 { width: 484px; margin:0 8px; } .grid_11 { width: 534px; margin:0 8px; } .grid_12 { width: 584px; margin:0 8px; } } /*********************************************** /* Extra Small Devices, Phones ***********************************************/ @media only screen and (max-width : 480px) { .main_wrap { width:100%; display:block; } .row { width: 480px; } .row .row { margin:0 -8px; } .grid_1 { width: 24px; margin:0 8px; } .grid_2 { width: 64px; margin:0 8px; } .grid_3 { width: 104px; margin:0 8px; } .grid_4 { width: 144px; margin:0 8px;} .grid_5 { width: 184px; margin:0 8px;} .grid_5A { width: 184px; margin:0 8px;} .grid_6 { width: 224px; margin:0 8px; } .grid_7 { width: 264px; margin:0 8px; } .grid_7A { width: 264px; margin:0 8px; } .grid_8 { width: 304px; margin:0 8px; } .grid_9 { width: 344px; margin:0 8px; } .grid_10 { width: 384px; margin:0 8px; } .grid_11 { width: 424px; margin:0 8px; } .grid_12 { width: 464px; margin:0 8px; } } /*********************************************** Mobile ***********************************************/ @media only screen and (max-width : 320px) { .main_wrap { width:100%; display:block; } .row { padding:0 12px; 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_5A, .grid_7A, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { width:100%; margin: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; } width: 104px;} /*********************************************** 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; }