// Variables
$large-screen: 1200px;
$gutter: 30px;
$custom-neat-grid: (
	columns: 12,
	gutter: 30px,
	media: 1200px
);

$side-image-grid: (
	columns: 12,
	gutter: 0px
);

$image-path: '../../images';

// Imports
@import '../../node_modules/bourbon/app/assets/stylesheets/_bourbon.scss';
@import '../../node_modules/bourbon-neat/app/assets/stylesheets/_neat.scss';

// Owl Carousel
@import '../../node_modules/owl.carousel/src/scss/owl.carousel.scss';
@import '../../node_modules/owl.carousel/src/scss/owl.theme.default.scss';

// Magnific Popup
@import '../../node_modules/magnific-popup/src/css/main.scss';

// Flex Mixin
@import '../../node_modules/sass-flex-mixin/_flex.scss';

//* Icons & Type Alignment Fix
// @link http://snook.ca/archives/html_and_css/icons-and-type
@mixin icon-type {
	display: inline-block;
	position: relative;
	top: -0.1em;
	vertical-align: middle;
}

//* Vertical Mixin
@mixin vertical-align {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

/* ## Default Styles
----------------------------------------------------------------------------- */
.owl-carousel {
	.owl-item {
		img {
			width: auto !important;
			margin: 0 auto;
		}
	}
}

/* ## Button Widget
----------------------------------------------------------------------------- */
.widget_rawb-button, .so-widget-rawb-button {
	.btn {
		color: #fff;
		display: inline-block;
		margin-bottom: 0;
		font-weight: 700;
		text-align: center;
		vertical-align: middle;
		touch-action: manipulation;
		cursor: pointer;
		background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
		border: 1px solid transparent;
		white-space: nowrap;
		text-decoration: none;
		display: inline-block;
		line-height: 1;
		text-transform: uppercase;
		&.icon-right {
			[class^="sow-icon"] {
				top: -0.1em;
				margin-left: 10px;
			}
		}
		&.icon-left {
			[class^="sow-icon"] {
				margin-right: 10px;
				top: -0.1em;
			}
		}
		&.icon-center {
			[class^="sow-icon"] {
				display: block;
				margin: 0 auto 10px;
			}
		}
		.button-wrap {
			display: inline-block;
			[class^="sow-icon"] {
				vertical-align: middle;
				position:relative;
			}
		}
		@media only screen and (max-width: 480px) {
			width: 100% !important;
		}
	}
}