/* Site Specific CSS Styles */

/*

// Media Queries
Mobile First - everything below 768px (48em)
$small-screen: 768px; //Desktop/Tablet and up (48em) - *This is where the fluid grid and componenets change!
$sweetspot-screen: 980px; //Desktop (61.25em) - *This is where the magic happens ... err ... the UTMB nav changes! - @mgcooper
$medium-screen: 1280px; //Desktop Medium (80em) - Assigned but not used in templates
$large-screen: 1440px; //Desktop Large (90em) - Assigned but used in templates

1) Example Test: Add this html text to your page: 
   <i class="hello-world">Hello, World!</i>

2) Open your page in a decent browser

3) Resize your browser window and watch the font color change.

4) You just made something using "Mobile First" responsive design :)

*/


/* "Mobile First" (default) - Styles for screens that are smaller than 768px (48em) */
.hello-world { 
    color: green; 
}


/* Tablet and up (Sass: $small-screen: 768px;) 
	Styles for screens that are at least 768px (ie 48em) */
@media only screen and (min-width: 48em) {
    .hello-world { 
        color: blue; 
    }
}


/* Desktop and up (Sass: $sweetspot-screen: 980px;)
	Styles for screens that are at least 980px (61.25em) */
@media only screen and (min-width: 61.25em) {
    .hello-world { 
        color: red; 
    }
}