/******************************************************************
Site Name:
Author:

Stylesheet: Main Stylesheet

Here you can easily toggle on/off modules and files.

******************************************************************/

//
// STEP 1: Reset
//

@import "libs/normalize";

//
// STEP 2: Utilities
//

@import "utilities/all-utilities";

@import "libs/fontawesome/variables";
@import "libs/fontawesome/mixins";

//
// STEP 3: Elements
//

@import "elements/typography";
@import "elements/main-navigation";
@import "elements/links";
@import "elements/lists";
@import "elements/media";
@import "elements/tables";
@import "elements/forms";
@import "elements/bootstrap-grid";
@import "elements/pagination";
@import "elements/comments";
@import "elements/widgets";

//
// STEP 4: Modules
//

@import "modules/sticky-footer"; // need to add sticky-footer class to the body

//
// STEP 5: Plugins
//

@import "plugins/gravity-forms/base"; // gravity forms styles - uncheck box to NOT output default CSS

//
// STEP 6: Libraries
//

@import "libs/selectWoo"; // better cross browser select input - see https://github.com/woocommerce/selectWoo
@import "libs/magnific-popup"; // magnific lightbox styles - see https://github.com/dimsemenov/Magnific-Popup
@import "libs/retinajs"; // retinajs mixin for adding retina images - see http://imulus.github.io/retinajs/

//
// STEP 7: Media Queries
//

// BASE (MOBILE) STYLES
// This is where you add the majority of your styles. These will be loaded on all devices, so make sure this holds the bare minimum any device needs to view your site.
@import "media-queries/xs";

// SMALL MOBILE STYLES
@media only screen and (min-width: map-get($grid-breakpoints, 'sm')) {

	@import "media-queries/sm";

}

// TABLET
@media only screen and (min-width: map-get($grid-breakpoints, 'md')) {

	@import "media-queries/md";

}

// DESKTOP
@media only screen and (min-width: map-get($grid-breakpoints, 'lg')) {

	@import "media-queries/lg";

}

// LARGE DESKTOP
@media only screen and (min-width: map-get($grid-breakpoints, 'xl')) {

	@import "media-queries/xl";

}

// CUSTOM
// This is where you have custom breakpoints.
// @import "media-queries/custom";

// RETINA (2x RESOLUTION DEVICES)
// This applies to the retina iPhone (4s) and iPad (2+) along with other displays with a 2x resolution.
// @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
//	only screen and (min--moz-device-pixel-ratio: 1.5),
//	only screen and (min-device-pixel-ratio: 1.5) {
//		@import "media-queries/retina";
//}

// PRINT STYLESHEET
// Remember to remove things that do not make sense for print (ie. nav, ads, and forms should).
@media print {

	@import "media-queries/print";

}
