/* (min-width:320px) smartphones, iPhone, portrait 480x320 phones */
@media (min-width:20em) { 
.grid1 {width:100% !important;}
.grid2 {width:50% !important;}
.grid3 {width:33.33% !important;}
.grid3_4 {width:75% !important;}
.grid4 {width:25% !important;}
.grid5 {width:20% !important;}

.grid1_margin2 {width:96% !important; margin-left:2%; margin-right:2%;}
.grid2_margin2 {width:46%; margin-left:2%; margin-right:2%;}
.grid3_margin2 {width:29.33%; margin-left:2%; margin-right:2%;}
.grid3_4_margin2 {width:71%; margin-left:2%; margin-right:2%;}
.grid4_margin2 {width:21%; margin-left:2%; margin-right:2%;}
.grid5_margin2 {width:16%t; margin-left:2%; margin-right:2%;}
.grid_30_margin2 {width:26%; margin-left:2%; margin-right:2%;}
.grid_70_margin2 {width:66%; margin-left:2%; margin-right:2%;}

.grid1_padding2 {width:100% !important; padding-left:2%; padding-right:2%;}
.grid2_padding2 {width:50%; padding-left:2%; padding-right:2%;}
.grid3_padding2 {width:33.33%; padding-left:2%; padding-right:2%;}
.grid3_4_padding2 {width:75%; padding-left:2%; padding-right:2%;}
.grid4_padding2 {width:25%; padding-left:2%; padding-right:2%;}
.grid5_padding2 {width:20%; padding-left:2%; padding-right:2%;}
.grid_30_padding2 {width:30%; padding-left:2%; padding-right:2%;}
.grid_70_padding2 {width:70%; padding-left:2%; padding-right:2%;}

.grid1_padding1_margin1 {width:98% !important; padding-left:1%; padding-right:1%; margin-left:1%; margin-right:1%;}
.grid2_padding1_margin1 {width:48%; padding-left:1%; padding-right:1%; margin-left:1%; margin-right:1%;}
.grid3_padding1_margin1 {width:31.33%; padding-left:1%; padding-right:1%; margin-left:1%; margin-right:1%;}
.grid3_4_padding1_margin1 {width:73%; padding-left:1%; padding-right:1%; margin-left:1%; margin-right:1%;}
.grid4_padding1_margin1 {width:23%; padding-left:1%; padding-right:1%; margin-left:1%; margin-right:1%;}
.grid5_padding1_margin1 {width:18%; padding-left:1%; padding-right:1%; margin-left:1%; margin-right:1%;}
.grid_30_padding1_margin1 {width:28%; padding-left:1%; padding-right:1%; margin-left:1%; margin-right:1%;}
.grid_70_padding1_margin1 {width:68%; padding-left:1%; padding-right:1%; margin-left:1%; margin-right:1%;}
}


@media (min-width:987px) { /* (min-width:961px) tablet, landscape iPad, lo-res laptops ands desktops */
.grid1 {width:100% !important;}
.grid2 {width:50% !important;}
.grid3 {width: 33.33% !important;}
.grid3_4 {width:75% !important;}
.grid4 {width:25% !important;}
.grid5 {width:20% !important;}

.grid1_margin2 {width:96%; margin-left:2%; margin-right:2%;}
.grid2_margin2 {width:46%; margin-left:2%; margin-right:2%;}
.grid3_margin2 {width:29.33%; margin-left:2%; margin-right:2%;}
.grid3_4_margin2 {width:71%; margin-left:2%; margin-right:2%;}
.grid4_margin2 {width:21% !important; margin-left:2%; margin-right:2%;}
.grid5_margin2 {width:16%t; margin-left:2%; margin-right:2%;}
.grid_30_margin2 {width:26%; margin-left:2%; margin-right:2%;}
.grid_70_margin2 {width:66%; margin-left:2%; margin-right:2%;}

.grid1_padding2 {width:100%; padding-left:2%; padding-right:2%;}
.grid2_padding2 {width:50% !important; padding-left:2%; padding-right:2%;}
.grid3_padding2 {width:33.33%; padding-left:2%; padding-right:2%;}
.grid3_4_padding2 {width:75% !important; padding-left:2%; padding-right:2%;}
.grid4_padding2 {width:25% !important; padding-left:2%; padding-right:2%;}
.grid5_padding2 {width:20% !important; padding-left:2%; padding-right:2%;}
.grid_30_padding2 {width:30%; padding-left:2%; padding-right:2%;}

.grid1_padding1_margin1 {width:98%; padding-left:1%; padding-right:1%; margin-left:1%; margin-right:1%;}
.grid2_padding1_margin1 {width:48%; padding-left:1%; padding-right:1%; margin-left:1%; margin-right:1%;}
.grid3_padding1_margin1 {width:31.33%; padding-left:1%; padding-right:1%; margin-left:1%; margin-right:1%;}
.grid3_4_padding1_margin1 {width:73%; padding-left:1%; padding-right:1%; margin-left:1%; margin-right:1%;}
.grid4_padding1_margin1 {width:23% !important; padding-left:1%; padding-right:1%; margin-left:1%; margin-right:1%;}
.grid5_padding1_margin1 {width:18%; padding-left:1%; padding-right:1%; margin-left:1%; margin-right:1%;}
.grid_30_padding1_margin1 {width:28%; padding-left:1%; padding-right:1%; margin-left:1%; margin-right:1%;}
.grid_70_padding1_margin1 {width:68%; padding-left:1%; padding-right:1%; margin-left:1%; margin-right:1%;}
}