/**
 * @file
 * Responsive theme's responsive CSS file. Loads 6 mediaquery CSS files - one for each common category of screen resolutions.
 * Media Queries assess the browser window resolution, and load new CSS as a result, any time a window is sized (loaded) or resized. 
 *
 * Mediaquery debug code is useful for detecting which mediaquery file is being loaded as your resize your browser window. Toggle display to 'block'. Try Chrome or Safari.
 *
 * Free to use under the MIT license.
 * http: //www.opensource.org/licenses/mit-license.php
 * Created by Rowan Price, sponsored by Freeflow Digital LLC.
 */

/**
 * big screen monitor 
 * 
 * Add styles that take advantage of big screens here, then you won't have to over-ride them in other media query css.
 */
@import url(big-monitors-1440-and-up.css) only screen and (min-width : 1441px);

/**
 * smaller screen monitor
 */
@import url(small-monitors-1024-1440.css) only screen and (min-width : 1025px) and (max-width : 1440px);

/**
 * tablet landscape 
 */
@import url(tablet-landscape-768-1024.css) only screen and (min-width : 769px) and (max-width : 1024px);

/**
 * tablet portrait 
 */
@import url(tablet-portrait-600-768.css) only screen and (min-width : 601px) and (max-width : 768px);

/**
 * smartphone landscape
 */
@import url(smartphone-landscape-320-600.css) only screen and (min-width : 321px) and (max-width : 600px);

/**
 * smartphone portrait
 * CHANGE BACK TO 320px set to 340px for development
 */
@import url(smartphone-portrait-320-or-less.css) only screen and (min-width : 0px) and (max-width : 340px);

/**
 * mediaquery debug code
 */
#resolution {
  display: block;
}
 
.resolution {
  display: none;
  position: fixed;
  right: 0;
  top: 50%;
  background: red;
  opacity: 0.9;
  padding: 8px 15px;
  color: white;
  font-weight: bold;
  width: 50%;
}