// main: style.scss
// SASS Variables and Mixins

// Variables
//--------------------------------------------------------

// Default Color:
$text: 			#777777;
$primary: 		#fab702;
$secondary: 	#00aeef;

// Orange Color: fab702
// Blue : 00aeef

$border:		#e9e9e9;
$meta:			#f8f9f9;

// Fonts
$font_text:      	 "PT Sans", Helvetica, Arial, sans-serif;
$font_heading:       "Montserrat",Helvetica,Arial,sans-serif;
$monaco: 			 Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;

// Screen resolutions
$small_phone:	400px;
$phone: 		500px;
$table: 		790px;
$small_desktop:	1100px;

//Grid
$width:			1230px;
$grid:			1130px;
$column: 		40px;
$gutter: 		50px;
$gutter2: 		30px;

//Baseline
$base: 			20px;

// Mixins
//--------------------------------------------------------

@mixin border-radius($radius: 2px) {
	-webkit-border-radius:  $radius;
		-moz-border-radius: $radius;
			border-radius:  $radius;
}

// Mobile first responsive
@mixin for($media) {
	@if $media == tiny-screens {
		@media screen and (min-width: $small_phone) { @content; }
	}
	@else if $media ==screens-tiny {
		@media screen and (max-width: $small_phone) { @content; }
	}
	@if $media == small-screens {
		@media screen and (min-width: $phone) { @content; }
	}
	@else if $media ==screens-small {
		@media screen and (max-width: $phone) { @content; }
	}

	@else if $media == medium-screens {
		@media screen and (min-width: $table) { @content; }
	}
	@else if $media == screens-medium {
		@media screen and (max-width: $table) { @content; }
	}

	@else if $media == large-screens {
		@media screen and (min-width: $small_desktop) { @content; }
	}
	@else if $media == screens-large {
		@media screen and (max-width: $small_desktop) { @content; }
	}
}