/******************************************************************
Stylesheet: TinyMCS Styles

This is where we can add styles that we want to include as options for styling in the
Wordpress wysiwyg editor
******************************************************************/
/******************************************************************
Stylesheet: Mixins & Constants Stylesheet

This is where you can take advantage of Sass' great features:
Mixins & Constants. I won't go in-depth on how they work exactly,
there are a few articles below that will help do that. What I will
tell you is that this will help speed up simple changes like
changing a color or adding CSS3 techniques gradients.
******************************************************************/
/*********************
CLEARFIXIN'
*********************/
.clearfix, .cf { zoom: 1; }
.clearfix:before, .clearfix:after, .cf:before, .cf:after { content: ""; display: table; }
.clearfix:after, .cf:after { clear: both; }

/*
use the best ampersand
http://simplebits.com/notebook/2008/08/14/ampersands-2/
*/
span.amp { font-family: Baskerville,'Goudy Old Style',Palatino,'Book Antiqua',serif !important; font-style: italic; }

/*********************
TRANSITION
*********************/
/*
You'll need to be using Sass 3.2+ for these to work.
Thanks to @anthonyshort for the inspiration on these.
USAGE: @include transition(all 0.2s ease-in-out);
*/
/*********************
OPACITY
adds an opacity to an HTML element
USAGE:  @include opacity(.8,80);
*********************/
/*********************
VENDOR PREFIX
allows us to add one line of code that works accross all the browsers for CCS3 elements
USAGE:  @include vendor-prefix('border-radius', '6px');
*********************/
/*********************
HTML LIST ITEM WITH NOT LIST STYLE 
removes the list-style settings from an HTML list
USAGE:  @include listNoStyle
*********************/
/*********************
CSS3 GRADIENTS
Be careful with these since they can
really slow down your CSS. Don't overdo it.
This is a great tool for creating CSS gradients:  http://www.colorzilla.com/gradient-editor/
*********************/
/* @include css-gradient(#dfdfdf,#f8f8f8); */
/* @include css-gradient-two-vertical(#dfdfdf,0%, #f8f8f8, 80%); */
/* @include css-gradient-two-horizontal(#dfdfdf,0%, #f8f8f8, 80%); */
/* @include css-gradient(#dfdfdf,0%, #f8f8f8, 20%, #000000, 20%, #f8f8f8, 90%); */
/*********************
BORDER RADIUS
USAGE:  @include border-radius-fourcorners(10px)
*********************/
/*********************
TRANSFORM
rotate USAGE:  @include rotate(20deg)
scale USAGE:  @include scale(1.3)
*********************/
/*********************
Greyscale
greyscale USAGE:  @include greyscale(30%)
*********************/
/*********************
Color Variables
*********************/
/*********************
BREAKPOINTS
*********************/
/*********************
TYPOGRAPHY
*********************/
/*****************
GRADIENTS
******************/
/* 	To embed your own fonts, use this syntax
	and place your fonts inside the
	/fonts folder. For more information
	on embedding fonts, go to:
	http://www.fontsquirrel.com/
	Be sure to remove the comment brackets.
*/
/** 
@font-face { 	font-family: 'museo300-regular'; 	src: url('../fonts/museo300-regular.eot'); 	src: url('../fonts/museo300-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/museo300-regular.woff') format('woff'), url('../fonts/museo300-regular.ttf') format('truetype'), url('../fonts/museo300-regular.svg#museo300-regular') format('svg'); 	font-weight: normal; 	font-style: normal;
}

$museo300-regular: "museo300-regular", Verdana, Times New Roman, Times, serif;
**/
/*
use the best ampersand
http://simplebits.com/notebook/2008/08/14/ampersands-2/
*/
.orange-text { color: #f5a903; }

.green-text { color: #074834; }

.orange-link-button a { background: #f5a903; color: white; padding: 4px 20px; display: inline-block; text-decoration: none; -webkit-transition: all 0.2s ease-in-out; -transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-perspective: 1000; -webkit-backface-visibility: hidden; }
.orange-link-button a:hover { background: #c38602; }

.green-link-button a { background: #074834; color: white; padding: 4px 20px; display: inline-block; text-decoration: none; -webkit-transition: all 0.2s ease-in-out; -transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-perspective: 1000; -webkit-backface-visibility: hidden; }
.green-link-button a:hover { background: #0c7656; }

i.mce-i-multimedia-gallery-icon:before { font-family: 'FontAwesome'; content: '\f03e'; color: #000; font-size: 1.3em; color: #074834; }