1  @media only screen and (max-width: @mobile-breakpoint) {
  2  
  3  .container, .mobile-container {
  4    padding-left: 20px;
  5    padding-right: 20px;
  6    margin-left: auto;
  7    margin-right: auto;
  8    float: none;
  9    &:first-child { margin-left: auto; }
 10  }
 11  .mobile-container-full {
 12    padding-left: 0;
 13    padding-right: 0;
 14    margin-left: auto;
 15    margin-right: auto;
 16    float: none;
 17    &:first-child { margin-left: auto; }
 18  }
 19  
 20  .mobile-no-gutter {
 21    padding-left: 0;
 22    padding-right: 0;
 23  }
 24  
 25  // Mobile Grid
 26  .mobile-col-1-2 {
 27    width: 50%; // Fallback if calc() is not supported
 28    width: calc(~'100% / 12 * 6');
 29    width: -webkit-calc(~'100% / 12 * 6');
 30    width: -moz-calc(~'100% / 12 * 6');
 31  }
 32  .mobile-col-1-3 {
 33    width: 33.33333%; // Fallback if calc() is not supported
 34    width: calc(~'100% / 12 * 4');
 35    width: -webkit-calc(~'100% / 12 * 4');
 36    width: -moz-calc(~'100% / 12 * 4');
 37  }
 38  .mobile-col-1-4 {
 39    width: 25%; // Fallback if calc() is not supported
 40    width: calc(~'100% / 12 * 3');
 41    width: -webkit-calc(~'100% / 12 * 3');
 42    width: -moz-calc(~'100% / 12 * 3');
 43  }
 44  .mobile-col-3-4 {
 45    width: 75%; // Fallback if calc() is not supported
 46    width: calc(~'100% / 12 * 9');
 47    width: -webkit-calc(~'100% / 12 * 9');
 48    width: -moz-calc(~'100% / 12 * 9');
 49  }
 50  
 51  // Push/Pull
 52  .mobile-push-1-2 {
 53    left: 50%; // Fallback if calc() is not supported
 54    left: calc(~'100% / 12 * 6');
 55    left: -webkit-calc(~'100% / 12 * 6');
 56    left: -moz-calc(~'100% / 12 * 6');
 57  }
 58  .mobile-pull-1-2 {
 59    left: -50%; // Fallback if calc() is not supported
 60    left: calc(~'-100% / 12 * 6');
 61    left: -webkit-calc(~'-100% / 12 * 6');
 62    left: -moz-calc(~'-100% / 12 * 6');
 63  }
 64  .mobile-push-1-3 {
 65    left: 25%; // Fallback if calc() is not supported
 66    left: calc(~'100% / 12 * 3');
 67    left: -webkit-calc(~'100% / 12 * 3');
 68    left: -moz-calc(~'100% / 12 * 3');
 69  }
 70  .mobile-pull-1-3 {
 71    left: -25%; // Fallback if calc() is not supported
 72    left: calc(~'-100% / 12 * 3');
 73    left: -webkit-calc(~'-100% / 12 * 3');
 74    left: -moz-calc(~'-100% / 12 * 3');
 75  }
 76  .mobile-push-1-4 {
 77    left: 33.33333%; // Fallback if calc() is not supported
 78    left: calc(~'100% / 12 * 4');
 79    left: -webkit-calc(~'100% / 12 * 4');
 80    left: -moz-calc(~'100% / 12 * 4');
 81  }
 82  .mobile-pull-1-4 {
 83    left: -33.33333%; // Fallback if calc() is not supported
 84    left: calc(~'-100% / 12 * 4');
 85    left: -webkit-calc(~'-100% / 12 * 4');
 86    left: -moz-calc(~'-100% / 12 * 4');
 87  }
 88  .mobile-push-3-4 {
 89    left: 75%; // Fallback if calc() is not supported
 90    left: calc(~'100% / 12 * 9');
 91    left: -webkit-calc(~'100% / 12 * 9');
 92    left: -moz-calc(~'100% / 12 * 9');
 93  }
 94  .mobile-pull-3-4 {
 95    left: -75%; // Fallback if calc() is not supported
 96    left: calc(~'-100% / 12 * 9');
 97    left: -webkit-calc(~'-100% / 12 * 9');
 98    left: -moz-calc(~'-100% / 12 * 9');
 99  }
100  
101  .mobile-no-push, .mobile-no-pull { left: auto; }
102  
103  // Mobile Rows
104  .mobile-row {
105    padding-top: 1em;
106    padding-bottom: 1em;
107  }
108  
109  .mobile-full {
110    left: auto;
111    clear: both;
112    float: none;
113    width: 100%;
114    margin: 0.2em 0 0 0;
115    display: block;
116  }
117  .mobile-full:first-child { margin-top: 0; }
118  
119  .mobile-text-left { text-align: left; }
120  .mobile-text-right { text-align: right; }
121  .mobile-text-center { text-align: center; }
122  
123  .mobile-left { float: left; }
124  .mobile-right { float: right; }
125  .mobile-no-float { float: none; }
126  
127  // Remove Margin / Padding
128  .mobile-no-margin { margin: 0; }
129  .mobile-no-padding { padding: 0; }
130  
131  .no-mobile { display: none; }
132  .show-mobile { display: block; }
133  
134  @import "../_mobile-styles.import.less"; // Import Custom Mobile Styles
135  
136  } // End Mobile Media Query