$lightBlue: #00aeef;
$blue: #0a3a68;
$darkBlue: #031221;

$lightGray: #7E8290;
$gray: #52545c;
$darkGray: #252525;

$fontColor: #333333;

$fontSize: 16px;
$smallFontSize: 13px;

//media queries
$sm: 768px;
$md: 992px;
$lg: 1200px;
// @media (max-width: $sm - 1) {}
// @media (min-width: $sm) {}
// @media (min-width: $md) {}
// @media (min-width: $lg) {}

//variable argument, allows you to input whatever you want
@mixin transition($style, $length: 500ms, $delay: 0) {
	transition: $style $length $delay;
}

@mixin customTransition($style...) {
	transition: $style;
}

@-webkit-keyframes fadeIn {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}
@-moz-keyframes fadeIn {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}
@-o-keyframes fadeIn {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes fadeIn {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

@mixin fadeIn($speed: 750ms) {
	-webkit-animation: fadeIn $speed; /* Safari 4+ */
	-moz-animation:    fadeIn $speed; /* Fx 5+ */
	-o-animation:      fadeIn $speed; /* Opera 12+ */
	animation:         fadeIn $speed; /* IE 10+, Fx 29+ */
}

.fadeIn {
	@include fadeIn;
}

@keyframes blink {
	0% {
		opacity: .2;
	}
	20% {
		opacity: 1;
	}
	100% {
		opacity: .2;
	}
}