@charset "UTF-8";
/******************************************************************

Variables

  Layout & Proportion

    breakpoints
    gutters
    leading

  Typography

  Colours



******************************************************************/
.bg-beats { background: #ef8622; }

.bg-vocals { background: #de3665; }

.bg-mix { background: #74c2d3; }

.bg-release { background: #86af2f; }

.bg-projects { background: #e29cc9; }

.bg-teachers { background: #b374d3; }

.color-beats { color: #ef8622; }

.color-vocals { color: #de3665; }

.color-mix { color: #74c2d3; }

.color-release { color: #86af2f; }

.color-projects { color: #e29cc9; }

.color-teachers { color: #b374d3; }

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

MIXINS

	Layout
		clearfix
		spacers
		grid
		breakpoints

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

  Responsive width breakpoints

*********************/
/*********************
GRID
*********************/
.left { float: left; }

/*********************
TOOLS
*********************/
/* http://www@mixin zeldman@mixin com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ */
/*********************
COLORS
Need help w/ choosing your colors? Try this site out:
http://0to255@mixin com/
*********************/
/*********************
TYPOGRAPHY
*********************/
/* 	To embed your own fonts, use this syntax and place your fonts inside the  stylesheets/fonts folder@mixin  For more information on embedding fonts, go to: http://www@mixin fontsquirrel@mixin com/ Be sure to remove the comment brackets@mixin  */
/*	$font-face { font-family: 'Font Name'; src: url('@mixin @mixin /fonts/font-name@mixin eot'); src: url('@mixin @mixin /fonts/font-name@mixin eot?#iefix') format('embedded-opentype'), url('@mixin @mixin /fonts/font-name@mixin woff') format('woff'), url('@mixin @mixin /fonts/font-name@mixin ttf') format('truetype'), url('@mixin @mixin /fonts/font-name@mixin svg#font-name') format('svg'); font-weight: normal; font-style: normal; } */
/* text alignment */
/* alerts & notices */
/*********************
BORDER RADIUS
*********************/
/* @mixin border-radius(4px); */
/* NOTE: For older browser support (and some mobile), don't use the shorthand to define *different* corners@mixin  */
/*********************
TRANISTION
*********************/
/* @mixin transition(all,2s); */
/*********************
CSS3 GRADIENTS
Be careful with these since they can
really slow down your CSS@mixin  Don't overdue it@mixin
*********************/
/* @mixin linear-gradient(#dfdfdf,#f8f8f8); */
/*********************
BOX SIZING
*********************/
/* @mixin boxSizing(border-box); */
/* NOTE: value of "padding-box" is only supported in Gecko@mixin  So
probably best not to use it@mixin  I mean, were you going to anyway? */
/*********************
BOX SHADOW
*********************/
/* @mixin boxShadow(0 0 4px #444); */
/*********************
BUTTONS
*********************/
/*! normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */
/* ============================================================================= HTML5 display definitions ========================================================================== */
/* Corrects block display not defined in IE6/7/8/9 & FF3 */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary, main { display: block; }

/* Corrects inline-block display not defined in IE6/7/8/9 & FF3 */
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }

/* Prevents modern browsers from displaying 'audio' without controls Remove excess height in iOS5 devices */
audio:not([controls]) { display: none; height: 0; }

/* Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4 Known issue: no IE6 support */
[hidden] { display: none; }

/* ============================================================================= Base ========================================================================== */
/* 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 2. Prevents iOS text size adjust after orientation change, without disabling user zoom www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
html { font-size: 100%; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ }

/* Addresses font-family inconsistency between 'textarea' and other form elements. */
html, button, input, select, textarea { font-family: sans-serif; }

/* Addresses margins handled incorrectly in IE6/7 */
body { margin: 0; }

/* ============================================================================= Links ========================================================================== */
/* Addresses outline displayed oddly in Chrome */
/* Improves readability when focused and also mouse hovered in all browsers people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: 0; }

/* ============================================================================= Typography ========================================================================== */
/* Addresses font sizes and margins set differently in IE6/7 Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5 */
/* Addresses styling not present in IE7/8/9, S5, Chrome */
abbr[title] { border-bottom: 1px dotted; }

/* Addresses styling not present in S5, Chrome */
dfn { font-style: italic; }

/* Addresses styling not present in IE6/7/8/9 */
mark { background: #ff0; color: #000; }

/* Addresses margins set differently in IE6/7 */
p, pre { margin: 0 0 1em; }

/* Corrects font family set oddly in IE6, S4/5, Chrome en.wikipedia.org/wiki/User:Davidgothberg/Test59 */
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improves readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

/* 1. Addresses CSS quotes not supported in IE6/7 2. Addresses quote property not supported in S4 */
/* 1 */
q { quotes: none; }

/* 2 */
q:before, q:after { content: ''; content: none; }

small { font-size: 75%; }

/* Prevents sub and sup affecting line-height in all browsers gist.github.com/413930 */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

/* ============================================================================= Lists ========================================================================== */
/* Addresses margins set differently in IE6/7 */
dl, menu, nav, ol, ul { margin: 0 0 1em; }

dd { margin: 0 0 0 25px; }

/* Addresses paddings set differently in IE6/7 */
menu, ol, ul { padding: 0 0 0 25px; }

/* Corrects list images handled incorrectly in IE7 */
nav ul, nav ol { list-style: none; list-style-image: none; }

/* ============================================================================= Embedded content ========================================================================== */
/* 1. Removes border when inside 'a' element in IE6/7/8/9, FF3 2. Improves image quality when scaled in IE7 code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
img { border: 0; /* 1 */ -ms-interpolation-mode: bicubic; /* 2 */ }

/* Corrects overflow displayed oddly in IE9 */
svg:not(:root) { overflow: hidden; }

/* ============================================================================= Figures ========================================================================== */
/* Addresses margin not present in IE6/7/8/9, S5, O11 */
figure { margin: 0; }

/* ============================================================================= Forms ========================================================================== */
/* Corrects margin displayed oddly in IE6/7 */
form { margin: 0; }

/* Define consistent border, margin, and padding */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

/* 1. Corrects color not being inherited in IE6/7/8/9 2. Corrects text not wrapping in FF3 3. Corrects alignment displayed oddly in IE6/7 */
legend { border: 0; /* 1 */ padding: 0; white-space: normal; /* 2 */ *margin-left: -7px; /* 3 */ }

/* 1. Corrects font size not being inherited in all browsers 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome 3. Improves appearance and consistency in all browsers */
button, input, select, textarea { font-size: 100%; /* 1 */ margin: 0; /* 2 */ vertical-align: baseline; /* 3 */ *vertical-align: middle; /* 3 */ }

/* Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet */
button, input { line-height: normal; /* 1 */ }

/* 1. Improves usability and consistency of cursor style between image-type 'input' and others 2. Corrects inability to style clickable 'input' types in iOS 3. Removes inner spacing in IE7 without affecting normal text inputs Known issue: inner spacing remains in IE6 */
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; /* 1 */ -webkit-appearance: button; /* 2 */ *overflow: visible; /* 3 */ }

/* Re-set default cursor for disabled elements */
button[disabled], input[disabled] { cursor: default; }

/* 1. Addresses box sizing set to content-box in IE8/9 2. Removes excess padding in IE8/9 3. Removes excess padding in IE7 Known issue: excess padding remains in IE6 */
input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ *height: 13px; /* 3 */ *width: 13px; /* 3 */ }

/* 1. Addresses appearance set to searchfield in S5, Chrome 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof) */
input[type="search"] { -webkit-appearance: textfield; /* 1 */ -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; }

/* Removes inner padding and search cancel button in S5, Chrome on OS X */
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Removes inner padding and border in FF3+ www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/* 1. Removes default vertical scrollbar in IE6/7/8/9 2. Improves readability and alignment in all browsers */
textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ }

/* ============================================================================= Tables ========================================================================== */
/* Remove most spacing between table cells */
table { border-collapse: collapse; border-spacing: 0; }

/*

	NAME OF FILE

*/
body { font-size: 62.5%; }

p, li, pre, label, q, dt, dd, label, input, button, select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { font-size: 14px; line-height: 1.25; }

h2:first-child { margin-top: 0; }

.info { color: #767676; }

small { font-size: 0.8em; letter-spacing: 0.5px; }

.small-caps { font-variant: small-caps; }

.form small, form small { font-size: 14px; letter-spacing: 0.5px; }

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

blockquote { position: relative; padding: 10px 50px 0; margin: 0; border-left: 0 none; font-style: italic; }

blockquote p { font-size: 16px; line-height: 24px; }

blockquote:before { content: '\201C'; font-size: 100px; position: absolute; left: 0; top: -20px; font-style: normal; }

blockquote:after { content: '\201D'; font-size: 100px; vertical-align: sub; position: absolute; right: 4px; bottom: -40px; font-style: normal; }

.quotee { margin: 10px 0 20px; text-align: right; display: block; color: #888; font-style: normal; }

.quotee:before { content: '\2014\0020'; }

/*

	NAME OF FILE

*/
.nav a, nav a { text-decoration: none; }

/*

	NAME OF FILE

*/
.form-top-aligned label, .form-top-aligned .label { font-size: 14px; display: block; }

label small { font-weight: normal; }

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

RIPPED OUT OF BOOTSTRAP, TODO edit this

**************************************************/
form { margin: 0 0 20px; }

fieldset { border: 0 none; margin: 0; padding: 0; }

legend { border-color: inherit inherit #E5E5E5; -o-border-image: none; border-image: none; border-style: none none solid; border-width: 0 0 1px; color: #333333; display: block; font-size: 21px; line-height: 40px; margin-bottom: 20px; padding: 0; width: 100%; }

legend small { color: #999999; font-size: 15px; }

label { display: block; margin-bottom: 5px; }

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { border-radius: 4px 4px 4px 4px; color: #555555; display: inline-block; height: 20px; line-height: 20px; margin-bottom: 10px; padding: 4px 6px; vertical-align: middle; }

input, textarea, .uneditable-input { width: 206px; }

textarea { height: auto; }

textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { background-color: #FFFFFF; border: 1px solid #888; /* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; //removed for accessibility */ -webkit-box-shadow: none; box-shadow: none; -webkit-transition: border 0.2s linear 0s, -webkit-box-shadow 0.2s linear 0s; transition: border 0.2s linear 0s, -webkit-box-shadow 0.2s linear 0s; transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s, -webkit-box-shadow 0.2s linear 0s; }

textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus { border-color: rgba(82, 168, 236, 0.8); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6); }

input[type="radio"], input[type="checkbox"] { line-height: normal; margin: 4px 0 0; }

input[type="file"], input[type="image"], input[type="submit"], input[type="reset"], input[type="button"], input[type="radio"], input[type="checkbox"] { width: auto; }

select, input[type="file"] { height: 30px; line-height: 30px; }

select { background-color: #FFFFFF; border: 1px solid #CCCCCC; width: 220px; }

select[multiple], select[size] { height: auto; }

select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { outline: thin dotted #333333; outline-offset: -2px; }

.uneditable-input, .uneditable-textarea { background-color: #FCFCFC; border-color: #CCCCCC; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.024) inset; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.024) inset; color: #999999; cursor: not-allowed; }

.uneditable-input { overflow: hidden; white-space: nowrap; }

.uneditable-textarea { height: auto; width: auto; }

input:-moz-placeholder, textarea:-moz-placeholder { color: #999999; }

.radio, .checkbox { min-height: 20px; padding-left: 20px; }

.radio input[type="radio"], .checkbox input[type="checkbox"] { float: left; margin-left: -20px; }

.controls > .radio:first-child, .controls > .checkbox:first-child { padding-top: 5px; }

.radio.inline, .checkbox.inline { display: inline-block; margin-bottom: 0; padding-top: 5px; vertical-align: middle; }

.radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline { margin-left: 10px; }

.input-mini { width: 60px; }

.input-small { width: 90px; }

.input-medium { width: 150px; }

.input-large { width: 210px; }

.input-xlarge { width: 270px; }

.input-xxlarge { width: 530px; }

input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input[class*="span"], .row-fluid input[class*="span"], .row-fluid select[class*="span"], .row-fluid textarea[class*="span"], .row-fluid .uneditable-input[class*="span"] { float: none; margin-left: 0; }

.input-append input[class*="span"], .input-append .uneditable-input[class*="span"], .input-prepend input[class*="span"], .input-prepend .uneditable-input[class*="span"], .row-fluid input[class*="span"], .row-fluid select[class*="span"], .row-fluid textarea[class*="span"], .row-fluid .uneditable-input[class*="span"], .row-fluid .input-prepend [class*="span"], .row-fluid .input-append [class*="span"] { display: inline-block; }

input, textarea, .uneditable-input { margin-left: 0; }

.controls-row [class*="span"] + [class*="span"] { margin-left: 20px; }

input.span12, textarea.span12, .uneditable-input.span12 { width: 926px; }

input.span11, textarea.span11, .uneditable-input.span11 { width: 846px; }

input.span10, textarea.span10, .uneditable-input.span10 { width: 766px; }

input.span9, textarea.span9, .uneditable-input.span9 { width: 686px; }

input.span8, textarea.span8, .uneditable-input.span8 { width: 606px; }

input.span7, textarea.span7, .uneditable-input.span7 { width: 526px; }

input.span6, textarea.span6, .uneditable-input.span6 { width: 446px; }

input.span5, textarea.span5, .uneditable-input.span5 { width: 366px; }

input.span4, textarea.span4, .uneditable-input.span4 { width: 286px; }

input.span3, textarea.span3, .uneditable-input.span3 { width: 206px; }

input.span2, textarea.span2, .uneditable-input.span2 { width: 126px; }

input.span1, textarea.span1, .uneditable-input.span1 { width: 46px; }

.controls-row:before, .controls-row:after { content: ""; display: table; line-height: 0; }

.controls-row:after { clear: both; }

.controls-row [class*="span"], .row-fluid .controls-row [class*="span"] { float: left; }

.controls-row .checkbox[class*="span"], .controls-row .radio[class*="span"] { padding-top: 5px; }

input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] { background-color: #EEEEEE; cursor: not-allowed; }

input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"][readonly], input[type="checkbox"][readonly] { background-color: transparent; }

.control-group.warning .control-label, .control-group.warning .help-block, .control-group.warning .help-inline { color: #C09853; }

.control-group.warning .checkbox, .control-group.warning .radio, .control-group.warning input, .control-group.warning select, .control-group.warning textarea { color: #C09853; }

.control-group.warning input, .control-group.warning select, .control-group.warning textarea { border-color: #C09853; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; }

.control-group.warning input:focus, .control-group.warning select:focus, .control-group.warning textarea:focus { border-color: #A47E3C; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px #DBC59E; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px #DBC59E; }

.control-group.warning .input-prepend .add-on, .control-group.warning .input-append .add-on { background-color: #FCF8E3; border-color: #C09853; color: #C09853; }

.control-group.error .control-label, .control-group.error .help-block, .control-group.error .help-inline { color: #B94A48; }

.control-group.error .checkbox, .control-group.error .radio, .control-group.error input, .control-group.error select, .control-group.error textarea { color: #B94A48; }

.control-group.error input, .control-group.error select, .control-group.error textarea { border-color: #B94A48; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; }

.control-group.error input:focus, .control-group.error select:focus, .control-group.error textarea:focus { border-color: #953B39; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px #D59392; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px #D59392; }

.control-group.error .input-prepend .add-on, .control-group.error .input-append .add-on { background-color: #F2DEDE; border-color: #B94A48; color: #B94A48; }

.control-group.success .control-label, .control-group.success .help-block, .control-group.success .help-inline { color: #468847; }

.control-group.success .checkbox, .control-group.success .radio, .control-group.success input, .control-group.success select, .control-group.success textarea { color: #468847; }

.control-group.success input, .control-group.success select, .control-group.success textarea { border-color: #468847; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; }

.control-group.success input:focus, .control-group.success select:focus, .control-group.success textarea:focus { border-color: #356635; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px #7ABA7B; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px #7ABA7B; }

.control-group.success .input-prepend .add-on, .control-group.success .input-append .add-on { background-color: #DFF0D8; border-color: #468847; color: #468847; }

.control-group.info .control-label, .control-group.info .help-block, .control-group.info .help-inline { color: #3A87AD; }

.control-group.info .checkbox, .control-group.info .radio, .control-group.info input, .control-group.info select, .control-group.info textarea { color: #3A87AD; }

.control-group.info input, .control-group.info select, .control-group.info textarea { border-color: #3A87AD; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; }

.control-group.info input:focus, .control-group.info select:focus, .control-group.info textarea:focus { border-color: #2D6987; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px #7AB5D3; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px #7AB5D3; }

.control-group.info .input-prepend .add-on, .control-group.info .input-append .add-on { background-color: #D9EDF7; border-color: #3A87AD; color: #3A87AD; }

input:focus:invalid, textarea:focus:invalid, select:focus:invalid { border-color: #EE5F5B; color: #B94A48; }

input:focus:invalid:focus, textarea:focus:invalid:focus, select:focus:invalid:focus { border-color: #E9322D; -webkit-box-shadow: 0 0 6px #F8B9B7; box-shadow: 0 0 6px #F8B9B7; }

.form-actions { background-color: #F5F5F5; border-top: 1px solid #E5E5E5; margin-bottom: 20px; margin-top: 20px; padding: 19px 20px 20px; }

.form-actions:before, .form-actions:after { content: ""; display: table; line-height: 0; }

.form-actions:after { clear: both; }

.help-block, .help-inline { color: #595959; }

.help-block { display: block; margin-bottom: 10px; }

.help-inline { display: inline-block; padding-left: 5px; vertical-align: middle; }

.input-append, .input-prepend { font-size: 0; margin-bottom: 5px; white-space: nowrap; }

.input-append input, .input-prepend input, .input-append select, .input-prepend select, .input-append .uneditable-input, .input-prepend .uneditable-input, .input-append .dropdown-menu, .input-prepend .dropdown-menu { font-size: 14px; }

.input-append input, .input-prepend input, .input-append select, .input-prepend select, .input-append .uneditable-input, .input-prepend .uneditable-input { border-radius: 0 4px 4px 0; margin-bottom: 0; position: relative; vertical-align: top; }

.input-append input:focus, .input-prepend input:focus, .input-append select:focus, .input-prepend select:focus, .input-append .uneditable-input:focus, .input-prepend .uneditable-input:focus { z-index: 2; }

.input-append .add-on, .input-prepend .add-on { background-color: #EEEEEE; border: 1px solid #CCCCCC; display: inline-block; font-size: 14px; font-weight: normal; height: 20px; line-height: 20px; min-width: 16px; padding: 4px 5px; text-align: center; text-shadow: 0 1px 0 #FFFFFF; width: auto; }

.input-append .add-on, .input-prepend .add-on, .input-append .btn, .input-prepend .btn, .input-append .btn-group > .dropdown-toggle, .input-prepend .btn-group > .dropdown-toggle { border-radius: 0 0 0 0; vertical-align: top; }

.input-append .active, .input-prepend .active { background-color: #A9DBA9; border-color: #46A546; }

.input-prepend .add-on, .input-prepend .btn { margin-right: -1px; }

.input-prepend .add-on:first-child, .input-prepend .btn:first-child { border-radius: 4px 0 0 4px; }

.input-append input, .input-append select, .input-append .uneditable-input { border-radius: 4px 0 0 4px; }

.input-append input + .btn-group .btn:last-child, .input-append select + .btn-group .btn:last-child, .input-append .uneditable-input + .btn-group .btn:last-child { border-radius: 0 4px 4px 0; }

.input-append .add-on, .input-append .btn, .input-append .btn-group { margin-left: -1px; }

.input-append .add-on:last-child, .input-append .btn:last-child, .input-append .btn-group:last-child > .dropdown-toggle { border-radius: 0 4px 4px 0; }

.input-prepend.input-append input, .input-prepend.input-append select, .input-prepend.input-append .uneditable-input { border-radius: 0 0 0 0; }

.input-prepend.input-append input + .btn-group .btn, .input-prepend.input-append select + .btn-group .btn, .input-prepend.input-append .uneditable-input + .btn-group .btn { border-radius: 0 4px 4px 0; }

.input-prepend.input-append .add-on:first-child, .input-prepend.input-append .btn:first-child { border-radius: 4px 0 0 4px; margin-right: -1px; }

.input-prepend.input-append .add-on:last-child, .input-prepend.input-append .btn:last-child { border-radius: 0 4px 4px 0; margin-left: -1px; }

.input-prepend.input-append .btn-group:first-child { margin-left: 0; }

input.search-query { border-radius: 15px 15px 15px 15px; margin-bottom: 0; padding-left: 14px; padding-right: 14px; }

.form-search .input-append .search-query, .form-search .input-prepend .search-query { border-radius: 0 0 0 0; }

.form-search .input-append .search-query { border-radius: 14px 0 0 14px; }

.form-search .input-append .btn { border-radius: 0 14px 14px 0; }

.form-search .input-prepend .search-query { border-radius: 0 14px 14px 0; }

.form-search .input-prepend .btn { border-radius: 14px 0 0 14px; }

.form-search input, .form-inline input, .form-horizontal input, .form-search textarea, .form-inline textarea, .form-horizontal textarea, .form-search select, .form-inline select, .form-horizontal select, .form-search .help-inline, .form-inline .help-inline, .form-horizontal .help-inline, .form-search .uneditable-input, .form-inline .uneditable-input, .form-horizontal .uneditable-input, .form-search .input-prepend, .form-inline .input-prepend, .form-horizontal .input-prepend, .form-search .input-append, .form-inline .input-append, .form-horizontal .input-append { display: inline-block; margin-bottom: 0; vertical-align: middle; }

.form-search .hide, .form-inline .hide, .form-horizontal .hide { display: none; }

.form-search label, .form-inline label, .form-search .btn-group, .form-inline .btn-group { display: inline-block; }

.form-search .input-append, .form-inline .input-append, .form-search .input-prepend, .form-inline .input-prepend { margin-bottom: 0; }

.form-search .radio, .form-search .checkbox, .form-inline .radio, .form-inline .checkbox { margin-bottom: 0; padding-left: 0; vertical-align: middle; }

.form-search .radio input[type="radio"], .form-search .checkbox input[type="checkbox"], .form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] { float: left; margin-left: 0; margin-right: 3px; }

.control-group { margin-bottom: 10px; }

legend + .control-group { margin-top: 20px; }

.form-horizontal .control-group { margin-bottom: 20px; }

.form-horizontal .control-group:before, .form-horizontal .control-group:after { content: ""; display: table; line-height: 0; }

.form-horizontal .control-group:after { clear: both; }

.form-horizontal .control-label { float: left; padding-top: 5px; text-align: right; width: 160px; }

.form-horizontal .controls { margin-left: 180px; }

.form-horizontal .help-block { margin-bottom: 0; }

.form-horizontal input + .help-block, .form-horizontal select + .help-block, .form-horizontal textarea + .help-block, .form-horizontal .uneditable-input + .help-block, .form-horizontal .input-prepend + .help-block, .form-horizontal .input-append + .help-block { margin-top: 10px; }

.form-horizontal .form-actions { padding-left: 180px; }

/*

	NAME OF FILE

*/
/*

	NAME OF FILE

*/
/*

  grid styles

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

  layout styles go here

***********************************/
/* Contain floats: nicolasgallagher@mixin com/micro-clearfix-hack/ */
.clearfix, .container, .cf, .clear { zoom: 1; }

.clearfix:before, .container:before, .clearfix:after, .container:after, .cf:before, .cf:after, .clear:before, .clear:after { content: ""; display: table; }

.clearfix:after, .container:after, .cf:after, .clear:after { clear: both; }

.container { margin: 0 auto; position: relative; }

.alignright { float: right; }

.alignright:img { margin: 0 0 0 20px; }

.alignleft { float: left; }

.alignleft:img { margin: 0 20px 0 0; }

/*

	NAME OF FILE

*/
.bd, .ft, .hd { overflow: hidden; *overflow: visible; zoom: 1; }

.mod, .mod-box { margin: 7.5px; }

.mod-box { border: 1px solid #ccc; padding: 10px; border-radius: 3px; }

.media, .media-text { overflow: hidden; *overflow: visible; zoom: 1; }

.media-img { float: left; margin-right: 10px; }

.media-img.right { float: right; margin-left: 10px; }

.media img { display: block; }

.media--valign { display: table; }

.media--valign > .media-img, .media--valign > .media-text { display: table-cell; vertical-align: middle; }

.media--valign > .media-img { float: none; }

.media--valign > .media-text { width: 100%; }

.media--stacked img { width: 100%; height: auto; }

.media-title { margin-top: 0; }

/*

	NAME OF FILE

*/
.alert, .teacher-note, .note { background-color: #FCF8E3; border: 1px solid #FBEED5; border-radius: 4px 4px 4px 4px; margin-bottom: 20px; padding: 8px 14px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); color: #333; }

.alert h1, .teacher-note h1, .note h1, .alert h2, .teacher-note h2, .note h2, .alert h3, .teacher-note h3, .note h3, .alert h4, .teacher-note h4, .note h4 { margin: 5px 0; line-height: 1; }

.alert .close, .teacher-note .close, .note .close { line-height: 20px; position: relative; right: -21px; top: -2px; }

.alert-success, .alert-good { background-color: #DFF0D8; border-color: #D6E9C6; }

.alert-danger, .alert-error, .alert-bad { background-color: #F2DEDE; border-color: #EED3D7; }

.alert-info { background-color: #D9EDF7; border-color: #BCE8F1; }

.alert-block { padding-bottom: 14px; padding-top: 14px; }

.alert-block > p, .alert-block > ul { margin-bottom: 0; }

.alert-block p + p { margin-top: 5px; }

img { max-width: 100%; height: auto; }

/*

  Component:

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

	NAME OF FILE

*/
dt { font-weight: bold; }

menu, ol, ul { padding: 0; margin-left: 25px; }

.nav, .nav ol, .nav ul, .nav-horizontal, ol.unstyled, ul.unstyled { margin-left: 0; list-style: none outside; }

.nav li, .nav ol li, .nav ul li, .nav-horizontal li, ol.unstyled li, ul.unstyled li { list-style: none outside; }

.inline { margin-left: 0; }

.inline li, .inline li { display: inline; }

.inline.with-separators li:after { content: "\0020\0020\0020\007C\0020\0020\0020"; }

.breadcrumbs li, .breadcrumbs li a { color: #767676; }

.breadcrumbs li:after { content: "\0020\0020\0020\25B8\0020\0020\0020"; }

.inline.with-separators li:last-child:after, .breadcrumbs li:last-child:after { content: none; }

.dl-horizontal dt { float: left; clear: left; width: 150px; text-align: right; }

.dl-horizontal dd { margin-left: 160px; }

.spacer { margin-top: 15px; }

/*

	NAME OF FILE

*/
.nav-horizontal li { float: left; margin-left: 20px; }

.nav-horizontal li:first-child { margin-left: 0px; }

/*

	NAME OF FILE

*/
/* --------------------------------------------------------------------------------------------------------------------- Name         .dConcertina Description  .generic, flexible show and hide Requires     .jQuery Gotchas      . Todos        . */
.js-conc-content { display: none; }

.js-conc-trigger { cursor: pointer; }

.js-conc-trigger .active-message { display: none; }

.js-conc-trigger .inactive-message { display: inline; }

.js-conc-active .active-message { display: inline; }

.js-conc-active .inactive-message { display: none; }

/*#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:200;color:#fff;}
#sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;}
#sb-overlay{position:relative;height:100%;width:100%;}
#sb-wrapper{position:absolute;visibility:hidden;width:100px;}
#sb-wrapper-inner{position:relative;border:1px solid #303030;overflow:hidden;height:100px;}
#sb-body{position:relative;height:100%;}
#sb-body-inner{position:absolute;height:100%;width:100%;}
#sb-player.html{height:100%;overflow:auto;}
#sb-body img{border:none;}
#sb-loading{position:relative;height:100%;}
#sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;}
#sb-loading-inner span{background:url(loading.gif) no-repeat;padding-left:34px;display:inline-block;}
#sb-body,#sb-loading{background-color:#060606;}
#sb-title,#sb-info{position:relative;margin:0;padding:0;overflow:hidden;}
#sb-title,#sb-title-inner{height:26px;line-height:26px;}
#sb-title-inner{font-size:16px;}
#sb-info,#sb-info-inner{height:20px;line-height:20px;}
#sb-info-inner{font-size:12px;}
#sb-nav{float:right;height:16px;padding:2px 0;width:45%;}
#sb-nav a{display:block;float:right;height:16px;width:16px;margin-left:3px;cursor:pointer;background-repeat:no-repeat;}
#sb-nav-close{background-image:url(close.png);}
#sb-nav-next{background-image:url(next.png);}
#sb-nav-previous{background-image:url(previous.png);}
#sb-nav-play{background-image:url(play.png);}
#sb-nav-pause{background-image:url(pause.png);}
#sb-counter{float:left;width:45%;}
#sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;}
#sb-counter a.sb-counter-current{text-decoration:underline;}
div.sb-message{font-size:12px;padding:10px;text-align:center;}
div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;}
*/
#sb-title-inner, #sb-info-inner, #sb-loading-inner, div.sb-message { font-family: "HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 200; color: #fff; }

#sb-container { position: fixed; margin: 0; padding: 0; top: 0; left: 0; z-index: 9999; text-align: left; visibility: hidden; display: none; }

#sb-overlay { position: relative; height: 100%; width: 100%; background: #fff; z-index: 99999; }

#sb-wrapper { position: absolute; visibility: hidden; width: 100px; z-index: 999999; }

#sb-wrapper-inner { position: relative; overflow: hidden; height: 100px; }

#sb-body { position: relative; height: 100%; }

#sb-body-inner { position: absolute; height: 100%; width: 100%; }

#sb-player.html { height: 100%; overflow: auto; }

#sb-body img { border: none; }

#sb-loading { position: relative; height: 100%; }

#sb-loading-inner { position: absolute; font-size: 14px; line-height: 24px; height: 24px; top: 50%; margin-top: -12px; width: 100%; text-align: center; }

#sb-loading-inner span { background: url(../../images/graphics/loader-32.gif) no-repeat; padding-left: 35px; line-height: 35px; display: inline-block; margin-right: -35px; }

#sb-body, #sb-loading { background-color: #fff; }

#sb-title, #sb-info { position: relative; margin: 0; padding: 0; overflow: hidden; }

#sb-title, #sb-title-inner { height: 26px; line-height: 26px; display: none; }

#sb-title-inner { font-size: 16px; }

#sb-info, #sb-info-inner { height: 30px; line-height: 30px; }

#sb-info-inner { font-size: 12px; }

#sb-nav-next { background-image: url(../../javascripts/plugins/shadowbox-3/next.png); }

#sb-nav-previous { background-image: url(../../javascripts/plugins/shadowbox-3/previous.png); }

#sb-nav-play { background-image: url(../../javascripts/plugins/shadowbox-3/play.png); }

#sb-nav-pause { background-image: url(../../javascripts/plugins/shadowbox-3/pause.png); }

#sb-counter { float: left; width: 45%; }

#sb-counter a { padding: 0 4px 0 0; text-decoration: none; cursor: pointer; color: #fff; }

#sb-counter a.sb-counter-current { text-decoration: underline; }

div.sb-message { font-size: 12px; padding: 10px; text-align: center; }

div.sb-message a:link, div.sb-message a:visited { color: #fff; text-decoration: underline; }

#sb-info { height: 35px; position: absolute; right: -13px; top: -10px; width: 35px; }

.ie7 #sb-info { top: -20px !important; }

.ie7 #sb-info #sb-nav-close { top: -30px !important; position: relative !important; }

#sb-wrapper { padding: 5px; background: url(../../javascripts/plugins/shadowbox-3/white50percent.png) transparent; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

#sb-nav-close { background: url("../../javascripts/plugins/shadowbox-3/close2.png") no-repeat scroll 0 0 transparent !important; cursor: pointer; display: block; height: 35px; width: 35px; overflow: hidden; -webkit-filter: none !important; filter: none !important; }

#sb-nav-close img { display: none !important; }

#sb-nav-close:hover { background-position: 0 -35px !important; }

body { font-family: "proxima-nova", sans-serif; font-size: 14px; }

p, pre, li { font-size: 14px; line-height: 20px; max-width: 55em; }

p { margin-bottom: 10.5px; }

em, i, .quote, q { font-family: arial,sans-serif; font-style: italic; }

q { font-size: inherit; line-height: inherit; }

.unicode { font-family: "Arial Unicode MS","Lucida Sans Unicode", "DejaVu Sans", "Arial", "FreeSans"; }

.uppercase { text-transform: uppercase; }

strong { font-weight: 700; }

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: "brandon-grotesque", "Futura Condensed Medium", sans-serif; font-weight: 700; text-transform: uppercase; color: #333; }

h1 a, h1 a:visited, .h1 a, .h1 a:visited, h2 a, h2 a:visited, .h2 a, .h2 a:visited, h3 a, h3 a:visited, .h3 a, .h3 a:visited, h4 a, h4 a:visited, .h4 a, .h4 a:visited, h5 a, h5 a:visited, .h5 a, .h5 a:visited, h6 a, h6 a:visited, .h6 a, .h6 a:visited { color: #333; }

h1 a:hover, h1 a:visited:hover, .h1 a:hover, .h1 a:visited:hover, h2 a:hover, h2 a:visited:hover, .h2 a:hover, .h2 a:visited:hover, h3 a:hover, h3 a:visited:hover, .h3 a:hover, .h3 a:visited:hover, h4 a:hover, h4 a:visited:hover, .h4 a:hover, .h4 a:visited:hover, h5 a:hover, h5 a:visited:hover, .h5 a:hover, .h5 a:visited:hover, h6 a:hover, h6 a:visited:hover, .h6 a:hover, .h6 a:visited:hover { color: #e05b28; text-decoration: underline; }

h1, .h1 { font-size: 30px; line-height: 1; margin: 0 0 10px -1px; }

h1 + .leader, .h1 + .leader { margin: -12px 0 24px; }

.leader { color: #222222; font-size: 21px; line-height: 24px; font-weight: 700; }

h2, .h2 { font-size: 21px; line-height: 1; margin: 20px 0 10px; }

h2 .subtitle, .h2 .subtitle { display: block; margin-top: -1px; letter-spacing: 0; color: #333; }

h3, .h3 { font-size: 18px; line-height: 24px; margin: 18px 0 6px; }

.media-text h3 { margin-top: 0; }

h4, .h4 { font-size: 16px; line-height: 24px; margin: 10px 0 2px; }

.mod-title { border-bottom: 2px solid; font-size: 21px; margin-bottom: 10px; padding: 10px 0 5px; }

.article-teaser .article-title { padding-top: 10px; }

a, a:visited { color: #167BA7; text-decoration: none; -webkit-transition: all 0.3s; transition: all 0.3s; }

a:hover, a:visited:hover { color: #e05b28; text-decoration: underline; }

.skip-widget, .skip-widget:visited { -webkit-transition: all 0s; transition: all 0s; }

a:active { outline: 0 none; }

.nav-main a:hover { text-decoration: none; }

.more strong { display: block; }

.underlined { border-bottom: 2px solid; margin: 10px 0; }

.underline { border-bottom: 2px solid #767676; padding-bottom: 5px; }

.l-break { display: block; }

blockquote { margin: 0 auto; max-width: 550px; padding: 10px 55px 0 50px; }

time { display: block; font-size: 1.6em; line-height: 1.5; }

.cap { text-transform: capitalize; }

hr { margin: 35px 25%  30px; height: 0; border-top: 1px dashed #ccc; border-bottom: 0 none; }

.teaser-title { font-size: 18px; }

.teaser-excerpt { font-size: 14px; color: #888; }

.Featured-container img { border-radius: 3px; }

th { text-align: left; }

th, td { vertical-align: top; padding: 0 10px 10px 0; }

table { margin-bottom: 10px; }

img { display: block; }

.ie8 img { width: auto !important; /* for ie 8 */ }

.lt-ie8 img { -ms-interpolation-mode: bicubic; /* Internet Explorer 7.0; default in IE8+ */ }

.alignleft { float: left; margin: 5px 15px 10px 0; }

.alignright { float: right; margin: 5px 0 10px 10px; }

.article-teaser .alignleft { max-width: 200px; height: auto; }

.article-teaser .alignright { max-width: 200px; height: auto; }

.youtube-container { position: relative; }

.youtube-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.hoverable-caption { display: block; position: relative; line-height: 0; overflow: hidden; }

.hoverable-caption .hoverable-caption--text { position: absolute; z-index: 20; top: -40px; left: 0; right: 0; display: block; width: 95%; padding: 0 2.5%; text-align: center; -webkit-transition: all 0.6s ease-out; transition: all 0.6s ease-out; color: #fff; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; line-height: 1.2; }

.hoverable-caption--text--large { font-family: "Futura Condensed Medium", "brandon-grotesque", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 21px; }

.hoverable-caption .hoverable-caption--mask { background: transparent; position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; }

.hoverable-caption:hover .hoverable-caption--mask { background: #000; background: rgba(0, 0, 0, 0.8); }

.hoverable-caption br { display: none; }

.hoverable-caption:hover .hoverable-caption--text { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; top: 42%; }

#body-wrap input, #body-wrap textarea { font-size: 14px; line-height: 20px; padding: 5px 10px; }

nav a { display: block; }

ul { margin-left: 15px; padding: 0; }

.mod ul, .mod-box ul { margin-bottom: 12px; }

ol { margin-left: 25px; }

li { margin-bottom: 10px; }

.list-of-instructions img { padding: 10px 0; }

.nav-list--vertical { margin: -8px 0 0; padding: 0; }

.nav-list--vertical li { list-style: none outside; margin: 0; border-top: 1px solid #ddd; }

.nav-list--vertical li:first-child { border-top: 0px solid #ddd; }

.nav-list--vertical li a { color: inherit; display: block; }

.nav-list--vertical li a:hover { color: #e05b28; text-decoration: none; }

.nav-list--vertical li a.link-genre { font-family: "brandon-grotesque", "Futura Condensed Medium", sans-serif; text-transform: uppercase; line-height: 36px; font-size: 16px; }

.nav-list__heading { font-weight: 700; padding-top: 15px; font-family: "brandon-grotesque", "Futura Condensed Medium", sans-serif; }

.teachers-menu .sub-menu a, .mod-menu a { display: block; padding: 6px 0; border-top: 1px solid #DDD; }

.teachers-menu h3 { font-size: 14px; line-height: 1.3; }

.teachers-menu .sub-menu { margin-left: 0; }

.teachers-menu .current_page_item a { color: #e05b28; }

.mod-menu--level-1-title { margin: 0; }

.mod-menu--level-1-link { margin: 0; font-family: "proxima-nova", sans-serif; font-weight: 400; text-transform: none; position: relative; display: block; padding-right: 23px !important; border-top: 1px solid #bbb !important; }

.mod-menu--level-1-link:after { content: '+'; position: absolute; right: 0px; top: 6px; color: #FFF; background: #ccc; display: inline-block; padding: 0px 3px 3px; font-size: 18px; border-radius: 2px; line-height: 14px; }

.mod-menu--level-1-link:hover:after { background: #e05b28; }

.js-conc-active .mod-menu--level-1-link { border-top: 1px solid #333 !important; }

.js-conc-active .mod-menu--level-1-link:after { content: '–'; }

.mod-menu li { margin-bottom: 0; }

.mod-features .mod-menu { margin: -10px 0 5px; }

.mod-features .mod-menu li:first-child a { border-top: 0px solid #DDD; }

.coming-soon-menu ul { margin-left: 0; list-style: none outside; }

.coming-soon-menu li { padding: 6px 0; border-top: 1px solid #DDD; color: #666; }

.coming-soon-menu li:first-child { border-top: 0px solid #DDD; }

.breadcrumbs { margin-bottom: 0; }

.jw-player-container { margin-bottom: 24px; }

.Featured { border-top: 2px solid; padding-top: 10px; margin-top: 10px; }

body.make-beats .Featured { border-color: #ef8622; }

body.write-lyrics-and-songs .Featured { border-color: #de3665; }

body.record-and-mix .Featured { border-color: #74c2d3; }

body.release-and-promote .Featured { border-color: #86af2f; }

.Featured-heading { width: 165px; float: left; margin: 0; }

.Featured-container { margin-left: 165px; }

.teaser { display: block; }

.teaser img { width: 170px; }

.teaser:hover { text-decoration: none; }

.teaser:hover .teaser-title { color: #e05b28; }

.teaser .list-of-tags { color: #333; margin-bottom: 0; }

.mod-features--featured { border-bottom: 1px solid #888; display: block; margin-bottom: 15px; }

.mod-features--featured h3 { margin: 10px 0; }

.mod-features--featured:hover h3 { text-decoration: none; color: #e05b28; }

.Resource { border: 1px solid rgba(0, 0, 0, 0.1); position: relative; height: 600px; width: 800px; }

.Resource-cover { height: 600px; width: 800px; position: absolute; top: 0; left: 0; background-size: cover; background-position: center center; z-index: 999; -webkit-transition: all 0.33s ease; transition: all 0.33s ease; }

.Resource-cover img { -webkit-transition: all 0.33s ease; transition: all 0.33s ease; }

.Resource-cover:hover img { background: rgba(255, 0, 0, 0.5) !important; }

.col2 .media { background-color: transparent; display: table; color: inherit; width: 100%; padding: 5px 0; }

.col2 .media:hover { color: #e05b28; text-decoration: none; }

.col2 .media-img, .col2 .media-text { display: table-cell; vertical-align: middle; width: 100%; font-size: 16px; }

.col2 .media-img .frame { display: block; border-radius: 3px; overflow: hidden; width: 60px; height: 60px; }

.col2 .mod-more-link { float: right; padding: 1px 0; }

/* Card ======================================================*/
.Card { display: block; background: #fff; -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.22); box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.22); border-radius: 3px; position: relative; height: 240px; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; }

.Card, .Card * { text-decoration: none; -webkit-transition: all 300ms ease-out; transition: all 300ms ease-out; }

.Card-text { position: absolute; padding: 5px; top: 30%; bottom: 0; background-color: #fff; border-top: 2px solid; overflow: hidden; }

.Card-text:after { content: '... read more'; background-color: #fff; position: absolute; bottom: 0; right: 0; left: 0; z-index: 999; height: 20px; padding: 5px; line-height: 19px; text-align: center; font-size: 13px; color: #767676; text-align: left; -webkit-box-shadow: 0 -5px 15px #fff; box-shadow: 0 -5px 15px #fff; }

.Card-img--genre-label { display: none; }

.make-beats .Card-text { border-color: #ef8622; }

.write-lyrics-and-songs .Card-text { border-color: #de3665; }

.record-and-mix .Card-text { border-color: #74c2d3; }

.release-and-promote .Card-text { border-color: #86af2f; }

.Card-img { background: #000; }

.Card-title { font-size: 14px; line-height: 20px; padding: 10px 0 0; margin: 0; min-height: 50px; }

.Card-excerpt, .Card-more { font-size: 13px; color: #767676; }

.Card-more { display: none; }

.Card-img img { border-radius: 0; opacity: 0.7; margin: -47px 0 0; }

/*  Card Layouts   ================================*/
.Featured .Card { width: 31%; margin: 0 0 2% 2%; float: left; }

@media screen and (min-width: 960px) and (max-width: 1240px), screen and (max-width: 830px) { .Featured .Card { width: 48%; margin: 0 0 2% 2%; float: left; }
  .Featured .Card img { width: 100%; } }

@media screen and (max-width: 450px) { .Featured .Card { width: auto; margin: 0 0 2%; float: none; } }

/*  Card:Hovers  ================================*/
.make-beats .Card:hover, .make-beats .Card:hover .Card-img { background-color: #ef8622; }

.write-lyrics-and-songs .Card:hover, .write-lyrics-and-songs .Card:hover .Card-img { background-color: #de3665; }

.record-and-mix .Card:hover, .record-and-mix .Card:hover .Card-img { background-color: #74c2d3; }

.release-and-promote .Card:hover, .release-and-promote .Card:hover .Card-img { background-color: #86af2f; }

.Card:hover img { opacity: 0.05; }

.Card:hover .Card-img--genre-label { display: none; }

.Card:hover .Card-text { top: 0; border-top: 2px solid transparent; background-color: transparent; }

.Card:hover .Card-text:after { bottom: -55px; }

.Card:hover .Card-title { padding: 0; }

.Card:hover .Card-title, .Card:hover .Card-more { color: #fff; }

.Card:hover .Card-excerpt { color: #222; }

.Card:hover .Card-more { display: block; margin-top: 10px; font-family: "Futura Condensed Medium", "brandon-grotesque", sans-serif; font-weight: 700; text-transform: uppercase; }

/*

   BUTTONS

**************************************************/
a, input, button { -webkit-tap-highlight-color: transparent; }

a, input, button { -ms-touch-action: none !important; }

.btn, .btn:visited { padding: 5px 15px; display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; _height: 15px; cursor: pointer; border-radius: 4px; font-size: 16px; text-decoration: none; font-weight: 700; line-height: 21px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2); background: #00a996; background: -webkit-gradient(linear, , ); background: linear-gradient(color-stops(#00c9b1, #00a996)); border: 1px solid #009e8c; border-top: 1px solid #00a996; color: white; text-shadow: 0 -1px 0 #00a996; }

.btn:hover, .btn:visited:hover { color: #fff; text-decoration: none; background: #00b6a1; background: -webkit-gradient(linear, , ); background: linear-gradient(color-stops(#00d6bc, #00b6a1)); -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.5); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.5); }

.btn:hover i, .btn:visited:hover i { background-color: rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 3px rgba(255, 255, 255, 0.5); box-shadow: 0 0 3px rgba(255, 255, 255, 0.5); }

.btn-secondary, .btn-secondary:visited { padding: 5px 15px; background: #e0e0e0; background: -webkit-gradient(linear, , ); background: linear-gradient(color-stops(#fefefe, #e0e0e0)); border: 1px solid rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2); color: #666; text-shadow: 0 -1px 0 #fff; }

.btn-secondary i, .btn-secondary:visited i { background-color: rgba(0, 0, 0, 0.3); }

.btn-secondary:hover, .btn-secondary:visited:hover { text-decoration: none; background: #e6e6e6; background: -webkit-gradient(linear, , ); background: linear-gradient(color-stops(#fefefe, #e0e0e0)); -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.5); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.5); color: #444 !important; }

.btn-secondary:hover i, .btn-secondary:visited:hover i { background-color: #444; }

.btn-tertiary, .btn-tertiary:visited { padding: 5px 15px; background: #387175; background: -webkit-gradient(linear, , ); background: linear-gradient(color-stops(#408286, #387175)); border: 1px solid rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(0, 0, 0, 0.4); text-shadow: 0 -1px 0 #387175; }

.btn-tertiary:hover, .btn-tertiary:visited:hover { text-decoration: none; background: #3c797e; background: -webkit-gradient(linear, , ); background: linear-gradient(color-stops(#408286, #387175)); }

.btn:active, .btn:visited:active { position: relative; top: 1px; }

.btn.disabled, .btn[disabled], .btn:visited.disabled, .btn:visited[disabled] { opacity: 0.6; background: false; cursor: default; -webkit-box-shadow: none 0 4px 0 rgba(0, 0, 0, 0.5); box-shadow: none 0 4px 0 rgba(0, 0, 0, 0.5); }

.btn::-moz-focus-inner, .btn:visited::-moz-focus-inner { padding: 0 !important; margin: -1px !important; }

/* line 45, ../theme/_theme-components.scss */
.btn.btn-large { line-height: 30px; padding: 5px 15px; font-size: 21px; }

.btn.btn-large i { margin: 3px 5px 0 0; border: 3px solid transparent; border-radius: 10px; }

#nav { display: block; margin: 0 auto; overflow: hidden; position: relative; text-align: center; margin: 10px 0 20px; }

#nav a { margin: 10px; border-radius: 10px; background: #ddd; -webkit-box-shadow: inset #aaa 1px 2px 3px; box-shadow: inset #aaa 1px 2px 3px; display: inline-block; width: 20px; height: 20px; text-indent: -50px; overflow: hidden; }

#nav .activeSlide { background: #57999f; -webkit-box-shadow: inset #387175 1px 2px 3px; box-shadow: inset #387175 1px 2px 3px; }

/*

  VIP BUTTONS
  todo = lose the stuff above asap

============================================================== */
.vip-button, #field_1_1 label, #gform_submit_button_1, .vip-button:visited, #field_1_1 label:visited, #gform_submit_button_1:visited, .vip-button:hover, #field_1_1 label:hover, #gform_submit_button_1:hover { font-size: 16px; font-family: "brandon-grotesque",sans-serif; display: inline-block; text-transform: uppercase; border: 0 none; padding: 8px 25px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.1); border-radius: 5px; text-decoration: none; font-weight: 700; cursor: pointer; color: #fff; background: #26ACE2; border-bottom: 2px solid #0C79A5; }

.vip-button:hover, #field_1_1 label:hover, #gform_submit_button_1:hover, .vip-button:visited:hover, #field_1_1 label:visited:hover, #gform_submit_button_1:visited:hover { color: #FFEE42; }

.vip-button:active, #field_1_1 label:active, #gform_submit_button_1:active { position: relative; top: 1px; }

.vip-button-red, .vip-button-red:visited { background: #C30A30; color: #fff; }

.vip-button-red:hover, .vip-button-red:visited:hover { background: #C30A30; color: #FFEE42; }

.vip-button-yellow, .vip-button-yellow:visited { background: #FFEE42; color: #444; }

.vip-button-yellow:hover, .vip-button-yellow:visited:hover { background: #FFEE42; color: #00AB50; }

.vip-button-navy, .vip-button-navy:visited { background: #203075; color: #fff; }

.vip-button-navy:hover, .vip-button-navy:visited:hover { background: #203075; color: #FFEE42; }

.vip-button-pink, .vip-button-pink:visited { background: #EA007C; color: #fff; }

.vip-button-pink:hover, .vip-button-pink:visited:hover { background: #EA007C; color: #FFEE42; }

.vip-button-green, .vip-button-green:visited { background: #00AB50; color: #fff; }

.vip-button-green:hover, .vip-button-green:visited:hover { background: #00AB50; color: #FFEE42; }

.vip-button-low-key, .vip-button-low-key:visited { background: #ddd; color: #444; }

.vip-button-low-key:hover, .vip-button-low-key:visited:hover { background: #ddd; color: #00AB50; }

.vip-button[disabled], #field_1_1 label[disabled], [disabled]#gform_submit_button_1, .vip-button[disabled]:hover, #field_1_1 label[disabled]:hover, [disabled]#gform_submit_button_1:hover, .vip-button.disabled, #field_1_1 label.disabled, .disabled#gform_submit_button_1, .vip-button.disabled:hover, #field_1_1 label.disabled:hover, .disabled#gform_submit_button_1:hover { background: #AAA; color: #555; text-shadow: initial; -webkit-box-shadow: initial; box-shadow: initial; cursor: default; }

.vip-button-large, .vip-button-large:hover, .vip-button-large:visited, .vip-button-large:visited:hover { font-size: 24px; padding: 10px 30px !important; }

#field_1_1 label .gfield_required { color: #fff; }

#field_1_1 #input_1_1 { visibility: hidden; position: fixed; top: -30px; }

#gform_submit_button_1 { background: #00AB50; color: #fff; font-size: 16px !important; padding: 10px 30px !important; }

#gform_submit_button_1:hover { background: #00AB50; color: #FFEE42; font-size: 16px; }

#soundation-button { display: block; height: 86px; width: 300px; background: url("../../images/graphics/soundation-smaller.png") 0 0 no-repeat; border-radius: 4px; -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); }

#soundation-button:hover { background-position: 0 -86px; }

.button-confirm { background: #00AB50 !important; }

.button-confirm:before { content: "\2714\0020"; }

.button-confirm .gfield_required { display: none; }

/*

  PAGINATION

**************************************************/
.pagination-unit { background: none repeat scroll 0 0 #FFFFFF; border-radius: 5px 5px 5px 5px; margin: 1px 2px; padding: 0 5px; }

.navigation { float: right; }

.wp-paginate { padding: 5px 0; margin: 0; overflow: hidden; clear: both; }

.wp-paginate li { display: inline; list-style: none; font-weight: 700; }

.wp-paginate, .wp-paginate.span { font-family: "brandon-grotesque", "Futura Condensed Medium", sans-serif; text-transform: uppercase; }

.wp-paginate a, .wp-paginate a:hover, .wp-paginate a:active, .wp-paginate .current { background: none repeat scroll 0 0 #f6f6f6; color: #666; text-decoration: none; padding: 3px 6px; margin-right: 4px; min-width: 16px; font-weight: 700; text-align: center; display: inline-block; border-radius: 3px; border: 0 none; }

.wp-paginate a:hover, .wp-paginate a:active, .wp-paginate .current { background: #26ace2; color: #fff; }

.wp-paginate .title { color: #999; margin-right: 4px; display: none; }

.wp-paginate .gap { color: #767676; margin-right: 4px; }

/* style overrides for comments pagination */
/*

  Login stuff

**************************************************/
#mask { display: block; left: 0; position: absolute; top: 0; visibility: visible; z-index: 250; }

#login { margin: 0; position: relative; }

#login ul { margin: 0; padding: 0; }

#login li { color: #FFFFFF; display: inline; float: left; line-height: 28px; list-style: none inside none; margin: 0 5px; position: relative; }

#login #login-form { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #AAAAAA; border-radius: 3px 0 3px 3px; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); padding: 20px; position: absolute; right: 0; top: 93px; width: 230px; z-index: 300; }

#login #ie9 #login-form { border-bottom-color: #FFFFFF; top: 51px; }

#login #login-form label { display: block; }

#login #login-form #user_login, #login #login-form #user_password { border: 1px solid #DDDDDD; }

#login #login-form div { margin: 5px 0; }

#login #login-form div a { background: none repeat scroll 0 0 #FFFFFF; border: 0 none; color: #990000; display: inline; line-height: 30px; text-decoration: underline; }

#login #login-form div a:hover { background: none repeat scroll 0 0 #FFFFFF; color: #FF0000; }

#login a#login-button.active { background: url("../images/shine20pc.png") repeat-x scroll 0 -1px #FFFFFF; border-color: #AAAAAA; border-radius: 5px 5px 0 0; border-style: solid; border-width: 1px 1px 0; -webkit-box-shadow: inherit; box-shadow: inherit; color: #000000; font-weight: bold; padding-bottom: 6px; padding-top: 3px; position: relative; text-shadow: none; z-index: 500; }

#login-forms br { display: none; }

@media only screen and (max-width: 500px) { #login { text-align: center; }
  #login .text { display: inline-block; float: none; position: relative; }
  #login .text .btn { margin: 0 5px; padding: 5px 10px; }
  #login #login-form { text-align: left; } }

.no-placeholder input.password { background: url("../../images/graphics/placeholder-password.png") no-repeat 32px 6px #fff; }

.no-placeholder input.username { background: url("../../images/graphics/placeholder-username.png") no-repeat 32px 6px #fff; }

.no-placeholder input.has-a-value { background: #fff; }

#login-forms { background: #fff; padding: 20px; min-height: 280px; }

#login-forms div { position: relative; }

#login-forms i { left: 8px; opacity: 0.18; position: absolute; top: 6px; }

#login-forms p { font-size: 13px; }

#login-forms h2 { padding: 5px 0 15px; border-bottom: 0 none; margin-bottom: 0; }

#login-forms h2 span { font-size: 14px; color: #333333; }

#login-student { padding: 0 0 0 20px; border-left: 1px dashed #ccc; }

#login-student h2, #login-student a:link, #login-student a:visited { color: #387175; }

#login-teacher { padding: 0 20px 0 0; }

#login-teacher h2, #login-teacher a:link, #login-teacher a:visited { color: #009382; }

#login-forms input[type=text], #login-forms input[type=password] { text-indent: 25px; }

iframe { background: #fff; }

.gutter-left { margin-left: 15px; }

.gutter-right { margin-right: 15px; }

.first-half, .second-half { width: 48%; margin-right: 4%; float: left; }

.first-half { margin-right: 0; }

.resp-s-and-less, .resp-s-to-m, .resp-s-and-more, .resp-m-and-less, .resp-m-to-l, .resp-m-and-more, .resp-l-and-less, .resp-l-to-xl, .resp-l-and-more, .resp-xl-and-more { display: none; }

@media (min-width: 0) and (max-width: 600px) { .resp-s-and-less { display: block; }
  .resp-s-and-less.inline { display: inline; }
  .resp-s-and-less.inline-block { display: inline-block; } }

@media (min-width: 0) and (max-width: 600px) { .resp-m-and-less { display: block; }
  .resp-m-and-less.inline { display: inline; }
  .resp-m-and-less.inline-block { display: inline-block; } }

@media (min-width: 0) and (max-width: 600px) { .resp-l-and-less { display: block; }
  .resp-l-and-less.inline { display: inline; }
  .resp-l-and-less.inline-block { display: inline-block; } }

@media (min-width: 601px) { .resp-s-and-more { display: block; }
  .resp-s-and-more.inline { display: inline; }
  .resp-s-and-more.inline-block { display: inline-block; } }

@media (min-width: 801px) { .resp-m-and-more { display: block; }
  .resp-m-and-more.inline { display: inline; }
  .resp-m-and-more.inline-block { display: inline-block; } }

@media (min-width: 961px) { .resp-l-and-more { display: block; }
  .resp-l-and-more.inline { display: inline; }
  .resp-l-and-more.inline-block { display: inline-block; } }

@media (min-width: 1241px) { .resp-xl-and-more { display: block; }
  .resp-xl-and-more.inline { display: inline; }
  .resp-xl-and-more.inline-block { display: inline-block; } }

@media (min-width: 601px) and (max-width: 800px) { .resp-s-to-m { display: block; }
  .resp-s-to-m.inline { display: inline; }
  .resp-s-to-m.inline-block { display: inline-block; } }

@media (min-width: 801px) and (max-width: 960px) { .resp-m-to-l { display: block; }
  .resp-m-to-l.inline { display: inline; }
  .resp-m-to-l.inline-block { display: inline-block; } }

@media (min-width: 961px) and (max-width: 1240px) { .resp-l-to-xl { display: block; }
  .resp-l-to-xl.inline { display: inline; }
  .resp-l-to-xl.inline-block { display: inline-block; } }

body { background: url(/wp-content/themes/viptheme2015/images/graphics/bg13a.jpg) no-repeat fixed 0 0; }

@media only screen and (max-width: 959px) { body { background: url(/wp-content/themes/viptheme2015/images/graphics/bg13a.jpg) no-repeat 0 0; } }

#body-wrap { background: url("/wp-content/themes/viptheme2015/images/graphics/overlay.png") repeat fixed 0 0 transparent; min-height: 100%; }

.wrap { margin: 0 auto; max-width: 960px; padding: 0 7.5px; position: relative; max-width: 960px; }

@media only screen and (max-width: 959px) { .wrap { max-width: auto; } }

@media only screen and (min-width: 960px) { .wrap { max-width: 95%; } }

@media only screen and (min-width: 1240px) { .wrap { max-width: 1240px; } }

#hd { background: none repeat scroll 0 0 #222; left: 0; right: 0; top: 0; z-index: 99; -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.2); box-shadow: 0 0 7px rgba(0, 0, 0, 0.2); }

#hd .wrap { height: 90px; overflow: visible; padding: 10px; }

#hd #nav-main { -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 120px; width: 100%; position: absolute; right: 3px; }

@media only screen and (max-width: 959px) { #hd #nav-main { padding-left: 0; } }

#hd #login { position: absolute; left: 100px; }

#hd #logo { top: 7px; position: absolute; z-index: 100; }

#hd #login { top: 10px; padding: 10px 20px; font-size: 16px; font-weight: 700; background: #eee; border-radius: 5px; margin: 0 5px 10px; }

#hd #logout a { color: #bbb; font-family: "brandon-grotesque", "Futura Condensed Medium", sans-serif; text-transform: uppercase; }

#hd #logout a img { background: none repeat scroll 0 0 #bbb; float: left; margin: 3px 6px 0 0; width: 16px; }

#hd #logout a:hover { color: #fff; text-shadow: 0 0 4px rgba(255, 255, 255, 0.9); text-decoration: none; }

#hd #logout a:hover img { background: none repeat scroll 0 0 #FFFFFF; }

#hd #nav-main { bottom: 0; }

#hd #nav-main ul { margin: 0; }

#hd #nav-main li { margin: 0 0 0 20px; }

@media (max-width: 1240px) { #hd #nav-main li { max-width: 115px; }
  #hd #nav-main li.nav-link--vocals { max-width: 106px; } }

#hd #nav-main li.nav-link--online-studio { float: right; max-width: 150px; }

#hd #nav-main a { font-family: "brandon-grotesque", "Futura Condensed Medium", sans-serif; font-weight: 700; text-transform: uppercase; display: block; font-size: 16px; color: #fff; letter-spacing: 1px; border-bottom: 5px solid transparent; padding: 15px 0; min-height: 32px; line-height: 1; text-align: center; }

@media (max-width: 1240px) { #hd #nav-main a { font-size: 14px; line-height: 16px; padding: 15px 0 15px; } }

#hd #nav-main a .nav-sub { font-size: 9px; line-height: 1; display: block; color: #aaa; padding-top: 7px; }

#hd #nav-main a:hover { text-decoration: none; }

#hd #nav-main .nav-link--home.current a, #hd #nav-main .nav-link--home:hover a { color: #fbec1f; border-color: #fbec1f; }

#hd #nav-main .nav-link--beats.current a, #hd #nav-main .nav-link--beats:hover a { color: #ef8622; border-color: #ef8622; }

#hd #nav-main .nav-link--vocals.current a, #hd #nav-main .nav-link--vocals:hover a { color: #de3665; border-color: #de3665; }

#hd #nav-main .nav-link--mix.current a, #hd #nav-main .nav-link--mix:hover a { color: #74c2d3; border-color: #74c2d3; }

#hd #nav-main .nav-link--release.current a, #hd #nav-main .nav-link--release:hover a { color: #86af2f; border-color: #86af2f; }

#hd #nav-main .nav-link--projects.current a, #hd #nav-main .nav-link--projects:hover a { color: #e29cc9; border-color: #e29cc9; }

#hd #nav-main .nav-link--teachers.current a, #hd #nav-main .nav-link--teachers:hover a { color: #b374d3; border-color: #b374d3; }

#hd #nav-main .nav-link--online-studio.current a, #hd #nav-main .nav-link--online-studio:hover a { color: #fbec1f; border-color: #fbec1f; }

@media only screen and (max-width: 959px) { #hd { position: fixed; }
  .nav-active #hd { position: absolute; }
  #hd .wrap { height: 50px; overflow: visible; padding: 5px; }
  #hd #logo { left: 5px; position: absolute; top: 5px; width: 50px; z-index: 100; }
  #hd .nav-main-container { display: none; }
  #hd #nav-main { display: none; position: absolute; top: 60px; width: 100%; left: 0; }
  #hd #nav-main ul { float: none; overflow: hidden; background: #333; margin: 0; }
  #hd #nav-main li { display: block; clear: left; float: none !important; max-width: none !important; margin: 0; }
  #hd #nav-main a { display: block; border-top: 1px solid #444; border-bottom: 1px solid #111; margin: 0; padding: 10px 20px; }
  .nav-main-trigger, #logout { background: url(/wp-content/themes/viptheme2015/images/graphics/button-bg.png) center center; border: 1px solid #333; border-radius: 3px 3px 3px 3px; -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.2) inset, 0 0 3px rgba(255, 255, 255, 0.1); box-shadow: 0 0 7px rgba(0, 0, 0, 0.2) inset, 0 0 3px rgba(255, 255, 255, 0.1); color: #CCCCCC; cursor: pointer; display: block; font-size: 18px; margin: 0; padding: 10px 7px 6px; text-shadow: 0 -1px 1px black; text-transform: uppercase; position: absolute; }
  .nav-main-trigger { top: 10px; right: 10px; }
  #logout { display: none; top: 5px; left: 70px !important; margin: 0 !important; padding: 7px !important; }
  .icon-bar-container { float: right; width: 18px; display: block; padding-left: 10px; padding-top: 3px; }
  .icon-bar { background-color: #ccc; border-radius: 1px; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); display: block; height: 2px; width: 18px; margin-top: 3px; }
  .icon-bar:first-child { margin-top: 1px; }
  .footer { text-align: center; }
  .footer img { display: inline; float: none !important; }
  .footer .footer-text { padding: 0; text-align: center; clear: both; } }

#bd:focus { outline: none; }

#bd .wrap { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.4); padding-top: 10px; padding-bottom: 10px; }

@media only screen and (max-width: 959px) { #bd { padding-top: 60px; } }

.breadcrumbs { margin-bottom: 0 !important; }

.mod, .mod-box { margin: 0px 2px 4px; background: #fff; padding: 5px 20px; border-radius: 5px; -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.2); box-shadow: 0 0 7px rgba(0, 0, 0, 0.2); }

.mod-more-link { padding: 7px 0; display: block; }

.article-micro img { max-width: 80px; float: right; margin: 0 0 10px 10px; }

.article-teaser { position: relative; padding-bottom: 50px; }

.article-teaser .article-teaser-overlay { height: 80px; width: 100%; position: absolute; bottom: 30px; left: 0; }

.article-teaser .article-teaser-more-link { margin: 60px 0 0 25px; display: inline-block; padding: 14px 0 0; }

.article-teaser .article-teaser-more-link .visuallyhidden { display: none; }

.article-teaser .article-teaser-more-link:after { content: "…"; }

.article-teaser .article-text { overflow: hidden; max-height: 380px; }

.mod-more-link, .article-teaser-more-link { color: #27A9E1; font-family: "Futura Condensed Medium","brandon-grotesque",sans-serif; font-size: 14px; text-transform: uppercase; }

.flexbox .flex { display: -webkit-box; display: -ms-flexbox; display: flex; }

@media screen and (max-width: 700px) { .flexbox .flex { display: block; } }

.flexbox .flex-unit { display: -webkit-box; display: -ms-flexbox; display: flex; }

.flexbox .flex-unit .mod, .flexbox .flex-unit .mod-box { display: block; width: 100%; }

@media (max-width: 1240px) and (min-width: 960px) { #hd #nav-main li { margin: 0 0 0 10px; }
  .nav-link--beats { width: 56px; }
  .nav-link--vocals { width: 108px; }
  .nav-link--mix { width: 90px; }
  .nav-link--release { width: 90px; }
  .nav-link--projects { width: 84px; }
  .nav-link--teachers { width: 90px; } }

@media (min-width: 1241px) { .nav-link--beats { width: 70px; }
  .nav-link--vocals { width: 130px; }
  .nav-link--mix { width: 100px; }
  .nav-link--release { width: 100px; }
  .nav-link--projects { width: 100px; }
  .nav-link--teachers { width: 100px; } }

@media only screen and (max-width: 959px) { .u1of2, .u1of3, .u2of3, .u1of4, .u3of4, .u1of5, .u2of5, .u3of5, .u4of5, .u1of6, .u5of6, .u1of7, .u2of7, .u3of7, .u4of7, .u5of7, .u6of7, .u1of8, .u3of8, .u5of8, .gu1of2, .gu1of3, .gu2of3, .gu1of4, .gu3of4, .gu1of5, .gu2of5, .gu3of5, .gu4of5, .gu1of6, .gu5of6, .gu1of7, .gu2of7, .gu3of7, .gu4of7, .gu5of7, .gu6of7, .gu1of8, .gu3of8, .gu5of8, .phi-main, .phi-rest { float: none !important; width: auto !important; clear: both !important; }
  .gutter-left, .gutter-right { margin-left: 0; margin-right: 0; }
  .media .media-img, .media .right, .media .left { float: left !important; margin: 0 20px 0 0; }
  .media .media-text { overflow: hidden; *overflow: visible; zoom: 1; }
  .pt0, .pa0, .pv0, .pv0, .pa0, .pt5, .pa5, .pv5, .pv5, .pa5, .pt10, .pa10, .pv10, .pv10, .pa10, .ptl20, .pv20, .pa20, .pr0, .pa0, .ph0, .ph0, .pa0, .prs, .phs, .pas, .pr10, .pa10, .ph10, .ph10, .pa10, .pr20, .pa20, .ph20, .ph20, .pa20, .pb0, .pa0, .pv0, .pv0, .pa0, .pb5, .pa5, .pv5, .pv5, .pa5, .pb10, .pa10, .pv10, .pv10, .pa10, .pb20, .pa20, .pv20, .pv20, .pa20, .pl0, .pa0, .ph0, .ph0, .pa0, .pl5, .pa5, .ph5, .ph5, .pa5, .pl10, .pa10, .ph10, .ph10, .pa10, .pll20, .ph20, .pa20, .mt0, .ma0, .mv0, .mv0, .ma0, .mt5, .ma5, .mv5, .mv5, .ma5, .mt10, .ma10, .mv10, .mv10, .ma10, .mt20, .ma20, .mv20, .mv20, .ma20, .mr0, .ma0, .mh0, .mh0, .ma0, .mr5, .ma5, .mh5, .mh5, .ma5, .mr10, .ma10, .mh10, .mh10, .ma10, .mr20, .ma20, .mh20, .mh20, .ma20, .mb0, .ma0, .mv0, .mv0, .ma0, .mb5, .ma5, .mv5, .mv5, .ma5, .mb10, .ma10, .mv10, .mv10, .ma10, .mb20, .ma20, .mv20, .mv20, .ma20, .ml0, .ma0, .mh0, .mh0, .ma0, .ml5, .ma5, .mh5, .mh5, .ma5, .ml10, .ma10, .mh10, .mh10, .ma10, .ml20, .ma20, .mh20, .mh20, .ma20, .ml30, .ma30, .mh30, .mh30, .ma30, .mt30, .ma30, .mv30, .mv30, .ma30, .mr30, .ma30, .mh30, .mh30, .ma30, .mb30, .ma30, .mv30, .mv30, .ma30, .pl30, .pa30, .ph30, .ph30, .pa30, .pt30, .pa30, .pv30, .pv30, .pa30, .pr30, .pa30, .ph30, .ph30, .pa30, .pb30, .pa30, .pv30, .pv30, .pa30 { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .right, .left { float: none; } }

/* =1 */
/*

  spacers

***********************************/
.unit, .u1of1, .u0of1, .u1of2, .u1of3, .u2of3, .u1of4, .u2of4, .u3of4, .u1of5, .u2of5, .u3of5, .u4of5, .u1of6, .u2of6, .u3of6, .u4of6, .u5of6, .u1of7, .u2of7, .u3of7, .u4of7, .u5of7, .u6of7, .u1of8, .u2of8, .u3of8, .u4of8, .u5of8, .u6of8, .u7of8, .u1of9, .u2of9, .u3of9, .u4of9, .u5of9, .u6of9, .u7of9, .u8of9, .u1of10, .u2of10, .u3of10, .u4of10, .u5of10, .u6of10, .u7of10, .u8of10, .u9of10, .u1of11, .u2of11, .u3of11, .u4of11, .u5of11, .u6of11, .u7of11, .u8of11, .u9of11, .u10of11, .u1of12, .u2of12, .u3of12, .u4of12, .u5of12, .u6of12, .u7of12, .u8of12, .u9of12, .u10of12, .u11of12 { float: left; margin: 0; }

.u1of1 { width: 100%; }

.u0of1 { width: 0%; }

.u1of2 { width: 50%; }

.u1of3 { width: 33.3333333333%; }

.u2of3 { width: 66.6666666667%; }

.u1of4 { width: 25%; }

.u2of4 { width: 50%; }

.u3of4 { width: 75%; }

.u1of5 { width: 20%; }

.u2of5 { width: 40%; }

.u3of5 { width: 60%; }

.u4of5 { width: 80%; }

.u1of6 { width: 16.6666666667%; }

.u2of6 { width: 33.3333333333%; }

.u3of6 { width: 50%; }

.u4of6 { width: 66.6666666667%; }

.u5of6 { width: 83.3333333333%; }

.u1of7 { width: 14.2857142857%; }

.u2of7 { width: 28.5714285714%; }

.u3of7 { width: 42.8571428571%; }

.u4of7 { width: 57.1428571429%; }

.u5of7 { width: 71.4285714286%; }

.u6of7 { width: 85.7142857143%; }

.u1of8 { width: 12.5%; }

.u2of8 { width: 25%; }

.u3of8 { width: 37.5%; }

.u4of8 { width: 50%; }

.u5of8 { width: 62.5%; }

.u6of8 { width: 75%; }

.u7of8 { width: 87.5%; }

.u1of9 { width: 11.1111111111%; }

.u2of9 { width: 22.2222222222%; }

.u3of9 { width: 33.3333333333%; }

.u4of9 { width: 44.4444444444%; }

.u5of9 { width: 55.5555555556%; }

.u6of9 { width: 66.6666666667%; }

.u7of9 { width: 77.7777777778%; }

.u8of9 { width: 88.8888888889%; }

.u1of10 { width: 10%; }

.u2of10 { width: 20%; }

.u3of10 { width: 30%; }

.u4of10 { width: 40%; }

.u5of10 { width: 50%; }

.u6of10 { width: 60%; }

.u7of10 { width: 70%; }

.u8of10 { width: 80%; }

.u9of10 { width: 90%; }

.u1of11 { width: 9.0909090909%; }

.u2of11 { width: 18.1818181818%; }

.u3of11 { width: 27.2727272727%; }

.u4of11 { width: 36.3636363636%; }

.u5of11 { width: 45.4545454545%; }

.u6of11 { width: 54.5454545455%; }

.u7of11 { width: 63.6363636364%; }

.u8of11 { width: 72.7272727273%; }

.u9of11 { width: 81.8181818182%; }

.u10of11 { width: 90.9090909091%; }

.u1of12 { width: 8.3333333333%; }

.u2of12 { width: 16.6666666667%; }

.u3of12 { width: 25%; }

.u4of12 { width: 33.3333333333%; }

.u5of12 { width: 41.6666666667%; }

.u6of12 { width: 50%; }

.u7of12 { width: 58.3333333333%; }

.u8of12 { width: 66.6666666667%; }

.u9of12 { width: 75%; }

.u10of12 { width: 83.3333333333%; }

.u11of12 { width: 91.6666666667%; }

.guttered-unit, .gu1of2, .gu1of3, .gu2of3, .gu1of4, .gu2of4, .gu3of4, .gu1of5, .gu2of5, .gu3of5, .gu4of5, .gu1of6, .gu2of6, .gu3of6, .gu4of6, .gu5of6, .gu1of7, .gu2of7, .gu3of7, .gu4of7, .gu5of7, .gu6of7, .gu1of8, .gu2of8, .gu3of8, .gu4of8, .gu5of8, .gu6of8, .gu7of8, .gu1of9, .gu2of9, .gu3of9, .gu4of9, .gu5of9, .gu6of9, .gu7of9, .gu8of9, .gu1of10, .gu2of10, .gu3of10, .gu4of10, .gu5of10, .gu6of10, .gu7of10, .gu8of10, .gu9of10, .gu1of11, .gu2of11, .gu3of11, .gu4of11, .gu5of11, .gu6of11, .gu7of11, .gu8of11, .gu9of11, .gu10of11, .gu1of12, .gu2of12, .gu3of12, .gu4of12, .gu5of12, .gu6of12, .gu7of12, .gu8of12, .gu9of12, .gu10of12, .gu11of12 { float: left; margin-left: 2%; }

.guttered-unit:first-child, .gu1of2:first-child, .gu1of3:first-child, .gu2of3:first-child, .gu1of4:first-child, .gu2of4:first-child, .gu3of4:first-child, .gu1of5:first-child, .gu2of5:first-child, .gu3of5:first-child, .gu4of5:first-child, .gu1of6:first-child, .gu2of6:first-child, .gu3of6:first-child, .gu4of6:first-child, .gu5of6:first-child, .gu1of7:first-child, .gu2of7:first-child, .gu3of7:first-child, .gu4of7:first-child, .gu5of7:first-child, .gu6of7:first-child, .gu1of8:first-child, .gu2of8:first-child, .gu3of8:first-child, .gu4of8:first-child, .gu5of8:first-child, .gu6of8:first-child, .gu7of8:first-child, .gu1of9:first-child, .gu2of9:first-child, .gu3of9:first-child, .gu4of9:first-child, .gu5of9:first-child, .gu6of9:first-child, .gu7of9:first-child, .gu8of9:first-child, .gu1of10:first-child, .gu2of10:first-child, .gu3of10:first-child, .gu4of10:first-child, .gu5of10:first-child, .gu6of10:first-child, .gu7of10:first-child, .gu8of10:first-child, .gu9of10:first-child, .gu1of11:first-child, .gu2of11:first-child, .gu3of11:first-child, .gu4of11:first-child, .gu5of11:first-child, .gu6of11:first-child, .gu7of11:first-child, .gu8of11:first-child, .gu9of11:first-child, .gu10of11:first-child, .gu1of12:first-child, .gu2of12:first-child, .gu3of12:first-child, .gu4of12:first-child, .gu5of12:first-child, .gu6of12:first-child, .gu7of12:first-child, .gu8of12:first-child, .gu9of12:first-child, .gu10of12:first-child, .gu11of12:first-child { margin-left: 0; }

.gu1of2 { width: 49%; }

.gu1of3 { width: 32%; }

.gu2of3 { width: 66%; }

.gu1of4 { width: 23.5%; }

.gu2of4 { width: 49%; }

.gu3of4 { width: 74.5%; }

.gu1of5 { width: 18.4%; }

.gu2of5 { width: 38.8%; }

.gu3of5 { width: 59.2%; }

.gu4of5 { width: 79.6%; }

.gu1of6 { width: 15%; }

.gu2of6 { width: 32%; }

.gu3of6 { width: 49%; }

.gu4of6 { width: 66%; }

.gu5of6 { width: 83%; }

.gu1of7 { width: 12.5714285714%; }

.gu2of7 { width: 27.1428571429%; }

.gu3of7 { width: 41.7142857143%; }

.gu4of7 { width: 56.2857142857%; }

.gu5of7 { width: 70.8571428571%; }

.gu6of7 { width: 85.4285714286%; }

.gu1of8 { width: 10.75%; }

.gu2of8 { width: 23.5%; }

.gu3of8 { width: 36.25%; }

.gu4of8 { width: 49%; }

.gu5of8 { width: 61.75%; }

.gu6of8 { width: 74.5%; }

.gu7of8 { width: 87.25%; }

.gu1of9 { width: 9.3333333333%; }

.gu2of9 { width: 20.6666666667%; }

.gu3of9 { width: 32%; }

.gu4of9 { width: 43.3333333333%; }

.gu5of9 { width: 54.6666666667%; }

.gu6of9 { width: 66%; }

.gu7of9 { width: 77.3333333333%; }

.gu8of9 { width: 88.6666666667%; }

.gu1of10 { width: 8.2%; }

.gu2of10 { width: 18.4%; }

.gu3of10 { width: 28.6%; }

.gu4of10 { width: 38.8%; }

.gu5of10 { width: 49%; }

.gu6of10 { width: 59.2%; }

.gu7of10 { width: 69.4%; }

.gu8of10 { width: 79.6%; }

.gu9of10 { width: 89.8%; }

.gu1of11 { width: 7.2727272727%; }

.gu2of11 { width: 16.5454545455%; }

.gu3of11 { width: 25.8181818182%; }

.gu4of11 { width: 35.0909090909%; }

.gu5of11 { width: 44.3636363636%; }

.gu6of11 { width: 53.6363636364%; }

.gu7of11 { width: 62.9090909091%; }

.gu8of11 { width: 72.1818181818%; }

.gu9of11 { width: 81.4545454545%; }

.gu10of11 { width: 90.7272727273%; }

.gu1of12 { width: 6.5%; }

.gu2of12 { width: 15%; }

.gu3of12 { width: 23.5%; }

.gu4of12 { width: 32%; }

.gu5of12 { width: 40.5%; }

.gu6of12 { width: 49%; }

.gu7of12 { width: 57.5%; }

.gu8of12 { width: 66%; }

.gu9of12 { width: 74.5%; }

.gu10of12 { width: 83%; }

.gu11of12 { width: 91.5%; }

.cf, .clearfix, .container, .line, #bd, #ft { *zoom: 1; }

.cf:before, .clearfix:before, .container:before, .line:before, #bd:before, #ft:before, .cf:after, .clearfix:after, .container:after, .line:after, #bd:after, #ft:after { content: " "; display: table; }

.cf:after, .clearfix:after, .container:after, .line:after, #bd:after, #ft:after { clear: both; }

.inline-block { display: inline-block; vertical-align: baseline; *display: inline; *vertical-align: auto; *zoom: 1; }

.pt0, .pa0, .pv0 { padding-top: 0px; }

.pl0, .pa0, .ph0 { padding-left: 0px; }

.pb0, .pa0, .pv0 { padding-bottom: 0px; }

.pr0, .pa0, .ph0 { padding-right: 0px; }

.pt5, .pa5, .pv5 { padding-top: 5px; }

.pl5, .pa5, .ph5 { padding-left: 5px; }

.pb5, .pa5, .pv5 { padding-bottom: 5px; }

.pr5, .pa5, .ph5 { padding-right: 5px; }

.pt10, .pa10, .pv10 { padding-top: 10px; }

.pl10, .pa10, .ph10 { padding-left: 10px; }

.pb10, .pa10, .pv10 { padding-bottom: 10px; }

.pr10, .pa10, .ph10 { padding-right: 10px; }

.pt15, .pa15, .pv15 { padding-top: 15px; }

.pl15, .pa15, .ph15 { padding-left: 15px; }

.pb15, .pa15, .pv15 { padding-bottom: 15px; }

.pr15, .pa15, .ph15 { padding-right: 15px; }

.pt20, .pa20, .pv20 { padding-top: 20px; }

.pl20, .pa20, .ph20 { padding-left: 20px; }

.pb20, .pa20, .pv20 { padding-bottom: 20px; }

.pr20, .pa20, .ph20 { padding-right: 20px; }

.pt25, .pa25, .pv25 { padding-top: 25px; }

.pl25, .pa25, .ph25 { padding-left: 25px; }

.pb25, .pa25, .pv25 { padding-bottom: 25px; }

.pr25, .pa25, .ph25 { padding-right: 25px; }

.pt30, .pa30, .pv30 { padding-top: 30px; }

.pl30, .pa30, .ph30 { padding-left: 30px; }

.pb30, .pa30, .pv30 { padding-bottom: 30px; }

.pr30, .pa30, .ph30 { padding-right: 30px; }

.mt0, .ma0, .mv0 { margin-top: 0px; }

.ml0, .ma0, .mh0 { margin-left: 0px; }

.mb0, .ma0, .mv0 { margin-bottom: 0px; }

.mr0, .ma0, .mh0 { margin-right: 0px; }

.mt5, .ma5, .mv5 { margin-top: 5px; }

.ml5, .ma5, .mh5 { margin-left: 5px; }

.mb5, .ma5, .mv5 { margin-bottom: 5px; }

.mr5, .ma5, .mh5 { margin-right: 5px; }

.mt10, .ma10, .mv10 { margin-top: 10px; }

.ml10, .ma10, .mh10 { margin-left: 10px; }

.mb10, .ma10, .mv10 { margin-bottom: 10px; }

.mr10, .ma10, .mh10 { margin-right: 10px; }

.mt15, .ma15, .mv15 { margin-top: 15px; }

.ml15, .ma15, .mh15 { margin-left: 15px; }

.mb15, .ma15, .mv15 { margin-bottom: 15px; }

.mr15, .ma15, .mh15 { margin-right: 15px; }

.mt20, .ma20, .mv20 { margin-top: 20px; }

.ml20, .ma20, .mh20 { margin-left: 20px; }

.mb20, .ma20, .mv20 { margin-bottom: 20px; }

.mr20, .ma20, .mh20 { margin-right: 20px; }

.mt25, .ma25, .mv25 { margin-top: 25px; }

.ml25, .ma25, .mh25 { margin-left: 25px; }

.mb25, .ma25, .mv25 { margin-bottom: 25px; }

.mr25, .ma25, .mh25 { margin-right: 25px; }

.mt30, .ma30, .mv30 { margin-top: 30px; }

.ml30, .ma30, .mh30 { margin-left: 30px; }

.mb30, .ma30, .mv30 { margin-bottom: 30px; }

.mr30, .ma30, .mh30 { margin-right: 30px; }

.inline-block { display: -moz-inline-stack; display: inline-block; *vertical-align: auto; *zoom: 1; *display: inline; }

.visually-hidden { margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); position: absolute; }

/******************************************************************
LAST CALL / OVER-RIDES
things you need to be called last in the cascade
******************************************************************/
/* hiding stuff */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }

.ir br { display: none; }

.hidden { display: none; }

.invisible { visibility: hidden; }

.very-hidden { display: none !important; visibility: hidden; }

.visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

.visually-hidden.focusable:active, .visually-hidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/*********************
LAYOUT & GRID STYLES
*********************/
.line, #bd, #ft, .last { overflow: hidden; *overflow: visible; *zoom: 1; }

/* positioning helpers */
.left { float: left; }

.right { float: right; }

.align-center { text-align: center; }

.align-left { text-align: left; }

.align-right { text-align: right; }

.wrap { *zoom: 1; margin: 0 auto; position: relative; }

.wrap:before, .wrap:after { content: " "; display: table; }

.wrap:after { clear: both; }

.row { overflow: hidden; }

.pl, .ph, .gutters, .gutter-left { padding-left: 6px; }

.pr, .gutters, .gutter-right { padding-right: 6px; }

.pt, .gutter-top { padding-top: 6px; }

.pb, .gutter-bottom { padding-bottom: 6px; }

.gutters__container { margin-left: -6px; margin-right: -6px; }

@media only screen and (min-width: 501px) { .u1of1-over-s { width: 100%; }
  .u0of1-over-s { width: 0%; }
  .u1of2-over-s { width: 50%; }
  .u1of3-over-s { width: 33.3333333333%; }
  .u2of3-over-s { width: 66.6666666667%; }
  .u1of4-over-s { width: 25%; }
  .u2of4-over-s { width: 50%; }
  .u3of4-over-s { width: 75%; }
  .u1of5-over-s { width: 20%; }
  .u2of5-over-s { width: 40%; }
  .u3of5-over-s { width: 60%; }
  .u4of5-over-s { width: 80%; }
  .u1of6-over-s { width: 16.6666666667%; }
  .u2of6-over-s { width: 33.3333333333%; }
  .u3of6-over-s { width: 50%; }
  .u4of6-over-s { width: 66.6666666667%; }
  .u5of6-over-s { width: 83.3333333333%; }
  .u1of7-over-s { width: 14.2857142857%; }
  .u2of7-over-s { width: 28.5714285714%; }
  .u3of7-over-s { width: 42.8571428571%; }
  .u4of7-over-s { width: 57.1428571429%; }
  .u5of7-over-s { width: 71.4285714286%; }
  .u6of7-over-s { width: 85.7142857143%; }
  .u1of8-over-s { width: 12.5%; }
  .u2of8-over-s { width: 25%; }
  .u3of8-over-s { width: 37.5%; }
  .u4of8-over-s { width: 50%; }
  .u5of8-over-s { width: 62.5%; }
  .u6of8-over-s { width: 75%; }
  .u7of8-over-s { width: 87.5%; }
  .u1of9-over-s { width: 11.1111111111%; }
  .u2of9-over-s { width: 22.2222222222%; }
  .u3of9-over-s { width: 33.3333333333%; }
  .u4of9-over-s { width: 44.4444444444%; }
  .u5of9-over-s { width: 55.5555555556%; }
  .u6of9-over-s { width: 66.6666666667%; }
  .u7of9-over-s { width: 77.7777777778%; }
  .u8of9-over-s { width: 88.8888888889%; }
  .u1of10-over-s { width: 10%; }
  .u2of10-over-s { width: 20%; }
  .u3of10-over-s { width: 30%; }
  .u4of10-over-s { width: 40%; }
  .u5of10-over-s { width: 50%; }
  .u6of10-over-s { width: 60%; }
  .u7of10-over-s { width: 70%; }
  .u8of10-over-s { width: 80%; }
  .u9of10-over-s { width: 90%; }
  .u1of11-over-s { width: 9.0909090909%; }
  .u2of11-over-s { width: 18.1818181818%; }
  .u3of11-over-s { width: 27.2727272727%; }
  .u4of11-over-s { width: 36.3636363636%; }
  .u5of11-over-s { width: 45.4545454545%; }
  .u6of11-over-s { width: 54.5454545455%; }
  .u7of11-over-s { width: 63.6363636364%; }
  .u8of11-over-s { width: 72.7272727273%; }
  .u9of11-over-s { width: 81.8181818182%; }
  .u10of11-over-s { width: 90.9090909091%; }
  .u1of12-over-s { width: 8.3333333333%; }
  .u2of12-over-s { width: 16.6666666667%; }
  .u3of12-over-s { width: 25%; }
  .u4of12-over-s { width: 33.3333333333%; }
  .u5of12-over-s { width: 41.6666666667%; }
  .u6of12-over-s { width: 50%; }
  .u7of12-over-s { width: 58.3333333333%; }
  .u8of12-over-s { width: 66.6666666667%; }
  .u9of12-over-s { width: 75%; }
  .u10of12-over-s { width: 83.3333333333%; }
  .u11of12-over-s { width: 91.6666666667%; } }

@media only screen and (min-width: 701px) { .u1of1-over-m { width: 100%; }
  .u0of1-over-m { width: 0%; }
  .u1of2-over-m { width: 50%; }
  .u1of3-over-m { width: 33.3333333333%; }
  .u2of3-over-m { width: 66.6666666667%; }
  .u1of4-over-m { width: 25%; }
  .u2of4-over-m { width: 50%; }
  .u3of4-over-m { width: 75%; }
  .u1of5-over-m { width: 20%; }
  .u2of5-over-m { width: 40%; }
  .u3of5-over-m { width: 60%; }
  .u4of5-over-m { width: 80%; }
  .u1of6-over-m { width: 16.6666666667%; }
  .u2of6-over-m { width: 33.3333333333%; }
  .u3of6-over-m { width: 50%; }
  .u4of6-over-m { width: 66.6666666667%; }
  .u5of6-over-m { width: 83.3333333333%; }
  .u1of7-over-m { width: 14.2857142857%; }
  .u2of7-over-m { width: 28.5714285714%; }
  .u3of7-over-m { width: 42.8571428571%; }
  .u4of7-over-m { width: 57.1428571429%; }
  .u5of7-over-m { width: 71.4285714286%; }
  .u6of7-over-m { width: 85.7142857143%; }
  .u1of8-over-m { width: 12.5%; }
  .u2of8-over-m { width: 25%; }
  .u3of8-over-m { width: 37.5%; }
  .u4of8-over-m { width: 50%; }
  .u5of8-over-m { width: 62.5%; }
  .u6of8-over-m { width: 75%; }
  .u7of8-over-m { width: 87.5%; }
  .u1of9-over-m { width: 11.1111111111%; }
  .u2of9-over-m { width: 22.2222222222%; }
  .u3of9-over-m { width: 33.3333333333%; }
  .u4of9-over-m { width: 44.4444444444%; }
  .u5of9-over-m { width: 55.5555555556%; }
  .u6of9-over-m { width: 66.6666666667%; }
  .u7of9-over-m { width: 77.7777777778%; }
  .u8of9-over-m { width: 88.8888888889%; }
  .u1of10-over-m { width: 10%; }
  .u2of10-over-m { width: 20%; }
  .u3of10-over-m { width: 30%; }
  .u4of10-over-m { width: 40%; }
  .u5of10-over-m { width: 50%; }
  .u6of10-over-m { width: 60%; }
  .u7of10-over-m { width: 70%; }
  .u8of10-over-m { width: 80%; }
  .u9of10-over-m { width: 90%; }
  .u1of11-over-m { width: 9.0909090909%; }
  .u2of11-over-m { width: 18.1818181818%; }
  .u3of11-over-m { width: 27.2727272727%; }
  .u4of11-over-m { width: 36.3636363636%; }
  .u5of11-over-m { width: 45.4545454545%; }
  .u6of11-over-m { width: 54.5454545455%; }
  .u7of11-over-m { width: 63.6363636364%; }
  .u8of11-over-m { width: 72.7272727273%; }
  .u9of11-over-m { width: 81.8181818182%; }
  .u10of11-over-m { width: 90.9090909091%; }
  .u1of12-over-m { width: 8.3333333333%; }
  .u2of12-over-m { width: 16.6666666667%; }
  .u3of12-over-m { width: 25%; }
  .u4of12-over-m { width: 33.3333333333%; }
  .u5of12-over-m { width: 41.6666666667%; }
  .u6of12-over-m { width: 50%; }
  .u7of12-over-m { width: 58.3333333333%; }
  .u8of12-over-m { width: 66.6666666667%; }
  .u9of12-over-m { width: 75%; }
  .u10of12-over-m { width: 83.3333333333%; }
  .u11of12-over-m { width: 91.6666666667%; } }

@media only screen and (min-width: 941px) { .u1of1-over-l { width: 100%; }
  .u0of1-over-l { width: 0%; }
  .u1of2-over-l { width: 50%; }
  .u1of3-over-l { width: 33.3333333333%; }
  .u2of3-over-l { width: 66.6666666667%; }
  .u1of4-over-l { width: 25%; }
  .u2of4-over-l { width: 50%; }
  .u3of4-over-l { width: 75%; }
  .u1of5-over-l { width: 20%; }
  .u2of5-over-l { width: 40%; }
  .u3of5-over-l { width: 60%; }
  .u4of5-over-l { width: 80%; }
  .u1of6-over-l { width: 16.6666666667%; }
  .u2of6-over-l { width: 33.3333333333%; }
  .u3of6-over-l { width: 50%; }
  .u4of6-over-l { width: 66.6666666667%; }
  .u5of6-over-l { width: 83.3333333333%; }
  .u1of7-over-l { width: 14.2857142857%; }
  .u2of7-over-l { width: 28.5714285714%; }
  .u3of7-over-l { width: 42.8571428571%; }
  .u4of7-over-l { width: 57.1428571429%; }
  .u5of7-over-l { width: 71.4285714286%; }
  .u6of7-over-l { width: 85.7142857143%; }
  .u1of8-over-l { width: 12.5%; }
  .u2of8-over-l { width: 25%; }
  .u3of8-over-l { width: 37.5%; }
  .u4of8-over-l { width: 50%; }
  .u5of8-over-l { width: 62.5%; }
  .u6of8-over-l { width: 75%; }
  .u7of8-over-l { width: 87.5%; }
  .u1of9-over-l { width: 11.1111111111%; }
  .u2of9-over-l { width: 22.2222222222%; }
  .u3of9-over-l { width: 33.3333333333%; }
  .u4of9-over-l { width: 44.4444444444%; }
  .u5of9-over-l { width: 55.5555555556%; }
  .u6of9-over-l { width: 66.6666666667%; }
  .u7of9-over-l { width: 77.7777777778%; }
  .u8of9-over-l { width: 88.8888888889%; }
  .u1of10-over-l { width: 10%; }
  .u2of10-over-l { width: 20%; }
  .u3of10-over-l { width: 30%; }
  .u4of10-over-l { width: 40%; }
  .u5of10-over-l { width: 50%; }
  .u6of10-over-l { width: 60%; }
  .u7of10-over-l { width: 70%; }
  .u8of10-over-l { width: 80%; }
  .u9of10-over-l { width: 90%; }
  .u1of11-over-l { width: 9.0909090909%; }
  .u2of11-over-l { width: 18.1818181818%; }
  .u3of11-over-l { width: 27.2727272727%; }
  .u4of11-over-l { width: 36.3636363636%; }
  .u5of11-over-l { width: 45.4545454545%; }
  .u6of11-over-l { width: 54.5454545455%; }
  .u7of11-over-l { width: 63.6363636364%; }
  .u8of11-over-l { width: 72.7272727273%; }
  .u9of11-over-l { width: 81.8181818182%; }
  .u10of11-over-l { width: 90.9090909091%; }
  .u1of12-over-l { width: 8.3333333333%; }
  .u2of12-over-l { width: 16.6666666667%; }
  .u3of12-over-l { width: 25%; }
  .u4of12-over-l { width: 33.3333333333%; }
  .u5of12-over-l { width: 41.6666666667%; }
  .u6of12-over-l { width: 50%; }
  .u7of12-over-l { width: 58.3333333333%; }
  .u8of12-over-l { width: 66.6666666667%; }
  .u9of12-over-l { width: 75%; }
  .u10of12-over-l { width: 83.3333333333%; }
  .u11of12-over-l { width: 91.6666666667%; } }

@media only screen and (min-width: 1281px) { .u1of1-over-xl { width: 100%; }
  .u0of1-over-xl { width: 0%; }
  .u1of2-over-xl { width: 50%; }
  .u1of3-over-xl { width: 33.3333333333%; }
  .u2of3-over-xl { width: 66.6666666667%; }
  .u1of4-over-xl { width: 25%; }
  .u2of4-over-xl { width: 50%; }
  .u3of4-over-xl { width: 75%; }
  .u1of5-over-xl { width: 20%; }
  .u2of5-over-xl { width: 40%; }
  .u3of5-over-xl { width: 60%; }
  .u4of5-over-xl { width: 80%; }
  .u1of6-over-xl { width: 16.6666666667%; }
  .u2of6-over-xl { width: 33.3333333333%; }
  .u3of6-over-xl { width: 50%; }
  .u4of6-over-xl { width: 66.6666666667%; }
  .u5of6-over-xl { width: 83.3333333333%; }
  .u1of7-over-xl { width: 14.2857142857%; }
  .u2of7-over-xl { width: 28.5714285714%; }
  .u3of7-over-xl { width: 42.8571428571%; }
  .u4of7-over-xl { width: 57.1428571429%; }
  .u5of7-over-xl { width: 71.4285714286%; }
  .u6of7-over-xl { width: 85.7142857143%; }
  .u1of8-over-xl { width: 12.5%; }
  .u2of8-over-xl { width: 25%; }
  .u3of8-over-xl { width: 37.5%; }
  .u4of8-over-xl { width: 50%; }
  .u5of8-over-xl { width: 62.5%; }
  .u6of8-over-xl { width: 75%; }
  .u7of8-over-xl { width: 87.5%; }
  .u1of9-over-xl { width: 11.1111111111%; }
  .u2of9-over-xl { width: 22.2222222222%; }
  .u3of9-over-xl { width: 33.3333333333%; }
  .u4of9-over-xl { width: 44.4444444444%; }
  .u5of9-over-xl { width: 55.5555555556%; }
  .u6of9-over-xl { width: 66.6666666667%; }
  .u7of9-over-xl { width: 77.7777777778%; }
  .u8of9-over-xl { width: 88.8888888889%; }
  .u1of10-over-xl { width: 10%; }
  .u2of10-over-xl { width: 20%; }
  .u3of10-over-xl { width: 30%; }
  .u4of10-over-xl { width: 40%; }
  .u5of10-over-xl { width: 50%; }
  .u6of10-over-xl { width: 60%; }
  .u7of10-over-xl { width: 70%; }
  .u8of10-over-xl { width: 80%; }
  .u9of10-over-xl { width: 90%; }
  .u1of11-over-xl { width: 9.0909090909%; }
  .u2of11-over-xl { width: 18.1818181818%; }
  .u3of11-over-xl { width: 27.2727272727%; }
  .u4of11-over-xl { width: 36.3636363636%; }
  .u5of11-over-xl { width: 45.4545454545%; }
  .u6of11-over-xl { width: 54.5454545455%; }
  .u7of11-over-xl { width: 63.6363636364%; }
  .u8of11-over-xl { width: 72.7272727273%; }
  .u9of11-over-xl { width: 81.8181818182%; }
  .u10of11-over-xl { width: 90.9090909091%; }
  .u1of12-over-xl { width: 8.3333333333%; }
  .u2of12-over-xl { width: 16.6666666667%; }
  .u3of12-over-xl { width: 25%; }
  .u4of12-over-xl { width: 33.3333333333%; }
  .u5of12-over-xl { width: 41.6666666667%; }
  .u6of12-over-xl { width: 50%; }
  .u7of12-over-xl { width: 58.3333333333%; }
  .u8of12-over-xl { width: 66.6666666667%; }
  .u9of12-over-xl { width: 75%; }
  .u10of12-over-xl { width: 83.3333333333%; }
  .u11of12-over-xl { width: 91.6666666667%; } }

[class*="u1of"], [class*="u2of"], [class*="u3of"], [class*="4of"], [class*="u5of"], [class*="u6of"], [class*="u7of"], [class*="u8of"], [class*="u9of"], [class*="u10of"], [class*="u11of"], [class*="u12of"] { -webkit-box-sizing: border-box; box-sizing: border-box; }

@media only screen and (max-width: 500px) { .u1of2-under-s { width: 50%; }
  .u1of3-under-s { width: 33.3333333333%; }
  .u1of4-under-s { width: 25%; }
  .u1of5-under-s { width: 20%; } }

/* =2 */
.post-edit-link { background: none repeat scroll 0 0 #000000; border-radius: 0 0 0 3px; color: #FFFFFF; display: block; opacity: 0; padding: 20px; position: fixed; right: 0; bottom: 0; z-index: 99999; }

.post-edit-link:hover { opacity: 1; color: #000; background: #fff; }

@media only screen and (max-width: 939px) { .post-edit-link { display: none; } }

/* ==========================================================================
Helper classes
========================================================================== */
/* Image replacement */
.ir { background-color: transparent; border: 0; overflow: hidden; /* IE 6/7 fallback */ *text-indent: -9999px; }

.ir:before { content: ""; display: block; width: 0; height: 150%; }

.hide { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Clearfix: contain floats For modern browsers 1. The space content is one way to avoid an Opera bug when the `contenteditable` attribute is included anywhere else in the document. Otherwise it causes space to appear at the top and bottom of elements that receive the `clearfix` class. 2. The use of `table` rather than `block` is only necessary if using `:before` to contain the top-margins of child elements. */
.clearfix:before, .container:before, .clearfix:after, .container:after { content: " "; /* 1 */ display: table; /* 2 */ }

.clearfix:after, .container:after { clear: both; }

/* For IE 6/7 only Include this rule to trigger hasLayout and contain floats. */
.clearfix, .container { *zoom: 1; }

/* =3 */
@media screen { .project-session { margin: 30px 0 0; padding: 30px 0 0; border-top: 1px dashed #ddd; }
  .project-session:first-child { margin: 0; padding: 0; border-top: 0 none; } }

@media print { * { background: transparent !important; color: black !important; text-shadow: none !important; -webkit-filter: none !important; filter: none !important; -ms-filter: none !important; }
  a, a:visited { /*text-decoration: underline; */ }
  a:after { content: " (" attr(href) ")"; color: #777; text-transform: lowercase; font-weight: normal; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
  a[href$="mp4"]:after { content: ""; }
  .line, #bd, #ft { padding-top: 5px; }
  .page-break { page-break-after: always; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
  h2 { margin-top: 30px; }
  p, pre, blockquote { border: 0 none; page-break-inside: avoid; }
  tr, img, a { page-break-inside: avoid; }
  thead { display: table-header-group; }
  img { max-width: 100% !important; }
  @page { margin: 1cm 1.5cm 1cm;
    size: A4 portrait; }
  body.projects h3 { font-size: 14px; line-height: 24px; margin: 18px 0 6px; letter-spacing: 2px; }
  #bd { padding: 0; }
  .mod, .mod-box, .mod-box { margin: 0; padding: 0; border-radius: 0; -webkit-box-shadow: 0 0 0 transparent !important; box-shadow: 0 0 0 transparent !important; }
  iframe.twitter-timeline { display: none !important; }
  .tile-overlay--bottom { display: none; }
  .article-teaser-overlay { display: none; }
  .col2, .footer, .inter-page-navigation, .nav-inline-micro { display: none; }
  .Card-more { display: none !important; }
  .Card-text { border: none; padding-top: 0; margin-top: -5px; }
  .Card-text::after { content: ""; }
  .Card-img { display: none; }
  .Featured-container { margin-left: 0; padding-right: 10px; }
  .Featured-heading { width: 100%; float: none; margin-bottom: 20px; }
  .Featured .Card { width: 100%; height: 160px; page-break-inside: avoid; }
  .Featured .Card-title { min-height: auto; }
  .article-title { clear: both; margin-bottom: 30px; }
  #hd, #ft, nav, .breadcrumbs { display: none; }
  /*.wrap:before { content: url(../images/graphics/logo_s_x1.png); }*/
  .vip-button, #field_1_1 label, #gform_submit_button_1 { display: none; }
  .flexbox .flex { display: block !important; width: 100% !important; }
  .u1of3, .u2of3 { float: none !important; width: auto !important; clear: both !important; }
  .unit, .u1of1, .u0of1, .u1of2, .u1of3, .u2of3, .u1of4, .u2of4, .u3of4, .u1of5, .u2of5, .u3of5, .u4of5, .u1of6, .u2of6, .u3of6, .u4of6, .u5of6, .u1of7, .u2of7, .u3of7, .u4of7, .u5of7, .u6of7, .u1of8, .u2of8, .u3of8, .u4of8, .u5of8, .u6of8, .u7of8, .u1of9, .u2of9, .u3of9, .u4of9, .u5of9, .u6of9, .u7of9, .u8of9, .u1of10, .u2of10, .u3of10, .u4of10, .u5of10, .u6of10, .u7of10, .u8of10, .u9of10, .u1of11, .u2of11, .u3of11, .u4of11, .u5of11, .u6of11, .u7of11, .u8of11, .u9of11, .u10of11, .u1of12, .u2of12, .u3of12, .u4of12, .u5of12, .u6of12, .u7of12, .u8of12, .u9of12, .u10of12, .u11of12, .u1of1, .u0of1, .u1of2, .u1of3, .u2of3, .u1of4, .u2of4, .u3of4, .u1of5, .u2of5, .u3of5, .u4of5, .u1of6, .u2of6, .u3of6, .u4of6, .u5of6, .u1of7, .u2of7, .u3of7, .u4of7, .u5of7, .u6of7, .u1of8, .u2of8, .u3of8, .u4of8, .u5of8, .u6of8, .u7of8, .u1of9, .u2of9, .u3of9, .u4of9, .u5of9, .u6of9, .u7of9, .u8of9, .u1of10, .u2of10, .u3of10, .u4of10, .u5of10, .u6of10, .u7of10, .u8of10, .u9of10, .u1of11, .u2of11, .u3of11, .u4of11, .u5of11, .u6of11, .u7of11, .u8of11, .u9of11, .u10of11, .u1of12, .u2of12, .u3of12, .u4of12, .u5of12, .u6of12, .u7of12, .u8of12, .u9of12, .u10of12, .u11of12 { float: none !important; width: auto !important; clear: both !important; }
  .media { page-break-inside: avoid; }
  .print-links { display: none; }
  .jwplayer { display: none; }
  .jw-player-container:after { content: "(See website to view video)"; }
  .print-logo-container { overflow: hidden; max-width: 960px; margin: 0 auto; }
  .print-page-footer { position: fixed; bottom: 0cm; left: 0.2cm; right: 0.2cm; font-size: 14px; display: table-footer-group; font-family: "proxima-nova",sans-serif; }
  .print-page-footer, .print-page-footer div { color: #888 !important; }
  .no-break { page-break-inside: avoid; }
  .project-session { padding: 0 0 40px; }
  .only-display-for-print { display: block !important; }
  .do-not-display-for-print { display: none !important; }
  .page-break-after { page-break-after: always; }
  .no-page-break-inside { page-break-inside: avoid; } }

/* END*/
/* =4 */
/* =5 */
.border-bottom-orange { border-bottom: 2px solid #ef8622; }

.border-bottom-grey { border-bottom: 2px solid #ddd; }

.js-slide-group__container { -webkit-box-sizing: content-box; box-sizing: content-box; max-height: 146px; overflow-x: auto; overflow-y: hidden; margin-bottom: 10px; background: #f7f7f7; border: 1px solid #eee; border-bottom: 0 none; padding: 8px 3px 10px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 3px; }

.js-slide-group__slider { display: table; }

.js-slide-group__item { display: table-cell; }

.js-slide-group__expander:link, .js-slide-group__expander:visited { color: #1786B5; border: 1px solid #c9e1ea; border-radius: 4px; font-size: 0.75em; display: inline-block; padding: 3px 12px; margin-left: 12px; line-height: 1; position: relative; top: -2px; float: right; }

.js-slide-group__expander:hover { text-decoration: none; color: #e05b28; border: 1px solid #e05b28; }

.js-slide-group__item .Card { width: 150px; height: 130px; }

.js-slide-group__item .Card-text { top: 40%; }

.js-slide-group__item .Card-title { padding-top: 0; }

.js-slide-group__item .Card-text:after { -webkit-box-shadow: initial; box-shadow: initial; }

.js-slide-group__expander-text--expanded { display: none; }

.js-slide-group--active .js-slide-group__expander-text { display: none; }

.js-slide-group--active .js-slide-group__expander-text--expanded { display: inline; }

.js-slide-group--active .js-slide-group__container { max-height: none; overflow: hidden; padding-bottom: 0; }

.js-slide-group--active .js-slide-group__slider, .js-slide-group--active .js-slide-group__item { display: block; }

.js-slide-group--active .js-slide-group__item { float: left; margin-bottom: 12px; width: 33%; -webkit-box-sizing: border-box; box-sizing: border-box; }

.js-slide-group--active .Card { -webkit-transition: all 2s ease; transition: all 2s ease; width: auto !important; height: 240px !important; }

.content-fixed { position: fixed; top: 0; }

.shim { display: block; }

.article-group__heading { margin-bottom: 0; }

.article-group__heading:before { color: #ef8622; content: '»'; display: inline-block; vertical-align: top; margin-right: 6px; font-size: 1.5em; line-height: 1; position: relative; top: -5px; }

.bold { font-weight: bold; }

.regular { font-weight: normal; }

.italic { font-style: italic; }

.underline { text-decoration: underline; }

.small-caps { font-variant: small-caps; }

.lowercase { text-transform: lowercase; }

.uppercase { text-transform: uppercase; }

.capitalize { text-transform: capitalize; }

.tt-none { text-transform: none; }

.track-loose { letter-spacing: .04em; }

.track-looser { letter-spacing: .9em; }

.track-tight { letter-spacing: -.04em; }

.track-tighter { letter-spacing: -.09em; }

.teacher-note, .note { display: block !important; border: 1px solid #EFE1BB; }

.teacher-note .teacher-note--title, .note .teacher-note--title { color: #A68E4E; text-transform: uppercase; font-size: 14px; letter-spacing: 1px; margin: 2px 0 10px; line-height: 20px; border-bottom: 1px solid #EFE1BB; padding-bottom: 10px; }

.rap-recorder-info { clear: left; }

.rap-recorder-info .u1of2 { width: 46%; margin-left: 8%; }

.rap-recorder-info .u1of2:first-child { margin-left: 0; }

#rap-app-wrap { margin: 20px auto; }

@media only screen and (min-width: 1280px) { #rap-app-wrap { margin: 20px 0; }
  .rap-recorder-info { width: 360px; float: right; clear: none; }
  .rap-recorder-info .u1of2 { float: none; width: auto; margin: 0; } }

@media only screen and (max-width: 939px) { .rap-recorder-info .u1of2 { float: none; width: auto; margin: 0; } }

.breadcrumbs, .breadcrumbs a, .pagination-info, .article-meta, .article-date { color: #767676; font-family: "brandon-grotesque", "Futura Condensed Medium", sans-serif; text-transform: uppercase; font-size: 12px; }

.article-meta { margin-bottom: 12px; }

.do-not-display-for-print { color: #fff; padding: 10px; float: right; border: 1px solid #eee; border-radius: 3px; -webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 7px rgba(0, 0, 0, 0.05); margin: 0 0 20px 20px; }

.do-not-display-for-print [href$='.pdf'] { padding-left: 24px; display: inline-block; background: url(/wp-content/themes/viptheme2015/images/graphics/pdf-trans.png) no-repeat 0 1px; margin-right: 20px; }

.do-not-display-for-print [href*="javascript"] { padding-left: 24px; display: inline-block; background: url(/wp-content/themes/viptheme2015/images/graphics/printer.png) no-repeat 0 1px; }

.page-description { padding-top: 20px; padding-bottom: 20px; }

.page-description h2 { padding-bottom: 20px; }

.page-description p { font-size: 16px; }

.page-description img { width: 140px; border-radius: 3px; float: left; margin-right: 20px; }

/*

  tile

======================================================*/
.tile { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; position: relative; background: #000; overflow: hidden; display: block; }

.tile.tile-beats { background: #ef8622; }

.tile.tile-vocals { background: #de3665; }

.tile.tile-mix { background: #74c2d3; }

.tile.tile-business { background: #86af2f; }

.tile .tile-overlay--bottom { position: absolute; bottom: 0px; left: 0; right: 0; width: 91%; color: #FFF; background: rgba(0, 0, 0, 0.7); padding: 10px 5%; margin: 0; }

@media screen and (max-width: 1239px) { .tile .tile-overlay--bottom { font-size: 15px; } }

.tile img, .tile .tile-overlay--bottom { -webkit-transition: all 0.33s ease; transition: all 0.33s ease; }

.tile:hover img { opacity: 0.15; }

.tile:hover .tile-overlay--bottom { padding-top: 91%; background: rgba(255, 255, 255, 0); color: #000; }

@media screen and (max-width: 959px) { .home .tile-hero .gu1of4 { width: 23.5% !important; margin: 0 0 2% 2% !important; display: block !important; max-width: 330px; float: left !important; clear: none !important; }
  .home .tile-hero .gu1of4 img { width: 100%; }
  .home .tile-hero .gu1of4:first-child { margin-left: 0 !important; } }

@media screen and (max-width: 800px) { .home .tile-hero .gu1of4 { width: 48% !important; margin: 0 2% 2% 0 !important; display: block !important; max-width: 330px; float: left !important; clear: none !important; }
  .home .tile-hero .gu1of4 img { width: 100%; }
  .home .tile-hero .gu1of4:first-child { margin-left: 0 !important; } }

/* =6 */
.color-link { color: #167BA7 !important; }

.color-link:hover { color: #e05b28 !important; }

.if-has-flash, .if-no-flash { display: none; }

body.has-flash .if-has-flash, body.no-flash .if-no-flash { display: block; }
/*# sourceMappingURL=style.css.map */