/*
Theme Name: 	Morbid
Theme URI: 		http://codisattva.com
Description: 	The totally morbid Wordpress theme!
Version: 		4.0
Author: 		Amar Ravva, Elliot Jay Stocks & Keir Whitaker
Author URI: 	http://codisattva.com
Tags: 			starkers, naked, clean, basic
*/

/*
===========================
CONTENTS:

01 Sensible defaults
02 Typography
03 Media queries 
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@import "css/reset.css";

div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
body 				{ background:#fff; /* Don't forget to style your body to avoid user overrides */ }
::-moz-selection 	{ background:#ff0; color:#333; }
::selection 		{ background:#ff0; color:#333; }

/* ---------------------------------------------------------------------------------------------------------- 
02 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*

14 / 16	= 		0.875em 		(14px equivalent)
16 / 16	= 		1em 			(16px equivalent)
18 / 16 = 		1.125em 		(18px equivalent)
21 / 16 = 		1.3125em 		(21px equivalent)
24 / 16 = 		1.5em 			(24px equivalent)
30 / 16 = 		1.875em 		(30px equivalent)

*/

@import url("http://hello.myfonts.net/count/2a4b93");

  
@font-face {font-family: 'NHaasGroteskDSStd-75Bd';src: url('fonts/2A4B93_0_0.eot');src: url('fonts/2A4B93_0_0.eot#iefix') format('embedded-opentype'),url('fonts/2A4B93_0_0.woff') format('woff'),url('fonts/2A4B93_0_0.ttf') format('truetype'),url('fonts/2A4B93_0_0.svg') format('svg');}
 
  
@font-face {font-family: 'SackersGothicStd-Medium';src: url('fonts/2A4B93_1_0.eot');src: url('fonts/2A4B93_1_0.eot#iefix') format('embedded-opentype'),url('fonts/2A4B93_1_0.woff') format('woff'),url('fonts/2A4B93_1_0.ttf') format('truetype'),url('fonts/2A4B93_1_0.svg') format('svg');}
 
  
@font-face {font-family: 'SackersGothicStd-Light';src: url('fonts/2A4B93_2_0.eot');src: url('fonts/2A4B93_2_0.eot#iefix') format('embedded-opentype'),url('fonts/2A4B93_2_0.woff') format('woff'),url('fonts/2A4B93_2_0.ttf') format('truetype'),url('fonts/2A4B93_2_0.svg') format('svg');}

@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon--pio6x1.eot');
	src:url('fonts/icomoon.eot') format('embedded-opentype'),
		url('fonts/icomoon--pio6x1.woff') format('woff'),
		url('fonts/icomoon--pio6x1.ttf') format('truetype'),
		url('fonts/icomoon--pio6x1-icomoon.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'GoudyStM';
	src:url('fonts/GoudyStM.eot');
	src:url('fonts/GoudyStM.eot#iefix') format('embedded-opentype'),
		url('fonts/GoudyStM.woff') format('woff'),
		url('fonts/GoudyStM.ttf') format('truetype'),
		url('fonts/GoudyStM.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'GoudyStM';
	src:url('fonts/GoudyStM-Italic.eot');
	src:url('fonts/GoudyStM-Italic.eot#iefix') format('embedded-opentype'),
		url('fonts/GoudyStM-Italic.woff') format('woff'),
		url('fonts/GoudyStM-Italic.ttf') format('truetype'),
		url('fonts/GoudyStM-Italic.svg') format('svg');
	font-weight: normal;
	font-style: italic;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	font-size: 15px;
	float: right;
	padding-left: 5px;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-facebook:before {
	content: "\e600";
}

a:hover .icon-facebook {
	color: #3b5998;
}
.icon-twitter:before {
	content: "\e601";
}

a:hover .icon-twitter {
	color: #00a0d1;
}

.icon-pinterest:before {
	content: "\e602";
}

a:hover .icon-pinterest {
	color: #910101;
}

.icon-googleplus:before {
	content: "\e603";
}

a:hover .icon-googleplus {
	color: #dd4b39;
}

.icon-uniF78E:before {
	content: "\e607";
}

a:hover .icon-uniF78E {
	color: #bb0000;
}

.icon-uniF7C4:before {
	content: "\e609";
} 

a:hover .icon-uniF7C4 {
	color: #517fa4;
}

.icon-podcast:before {
	content: "\e91c";
}

a:hover .icon-podcast:before {
	color: #9D5CFF;
}
body,
input,
textarea 			{ /* We strongly recommend you declare font-weight using numerical values, but check to see which weights you're exporting first */ }

h1, 
h2, 
h3, 
h4, 
h5, 
h6 					{ font-weight:bold; /* This helps to identify headings at the initial build stage, but you should write something more precise later on */ }

a {
	color: #939598;
}

p {
	padding-bottom: 1em;
	font-size: .75em;
	font-family: Arial, sans-serif;
	color: #333;
	line-height: 1.7em;
}

h2 {
	padding-bottom: 1em;
}

.serif {
	font-family: 'GoudyStM', serif;
}

.subtitle{
	font-size: 1.5em;
	text-transform: uppercase;
}

.page_content li {
        font-family: Arial, sans-serif;
	padding-bottom: 1em;
	font-size: .75em;
	color: #333;
	line-height: 1.7em;
}

/* ---------------------------------------------------------------------------------------------------------- 
01.2 Slider ------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

/* This is the parent of all the elements in our carousel.  We want relative
positioning so that later on, we can push the navigation arrows to the left
and right. */
.slider {
    position: relative;
    zoom: 1;
    background-color: #fff;
    overflow: hidden;
}

/* This container holds the navigation arrows.  We just want a width but no
height so that this div doesn't cover up the carousel elements and make them
unclickable on some browsers.  */
.slider-nav {
    position: absolute;
    zoom: 1;
    width: 100%;
    top: 0;
    left: 0;
}

/* This holds common styles for both the left and right navigation arrow
container divs. Even though this div's parent has no height, the overflow is
visible by default, so we can see and click on the arrows. */
.arrow {
    width: 48px;
    height: 35px;
    position: absolute;
    zoom: 1;
    padding-top: 17%;
    z-index: 100;
}

/* This holds common styles for both the left and right navigation arrow anchors
I'm using spans for the arrow call-to-action instead of an anchor tag because anchor
tags and buttons on Android devices bring up a "long hold" dialog button asking you if
you want to save the URL of the anchor tag or open it in another tab.  There is no reliable
CSS or JavaScript method for suppressing that dialog, so I circumvent it by using the span
tag */
.arrow span {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
/* When not clickable */


/* position the left arrow */
.arrow-left {
    left: 5%;
    
}

/* position the right arrow */
.arrow-right {
    right: 5%;
}

span.carouselnext {
    opacity: .8;
    width: 48px;
    height: 34px;
}

span.carouselnext:hover {
    opacity: 1;
}

span.carouselback {
    opacity: .8;
    width: 48px;
    height: 34px;
}

svg:hover polygon.ltrw {
    fill: #888;
}

span.carouselback:hover {
    opacity: 1;
}


/* This container is used to pull-in the carousel mask from the left and right
so that it does not cover up the arrows. You should also apply any desired
padding and stuff to this div instead of applying it directly to the mask.
Applying left and right padding to the mask can mess up the calculations unless
you account for it.  To future-proof your design from messups caused by updates
to the css in the future, apply spacing and positioning to this div, and not
directly to the mask. */
.slider-mask-wrap {
    margin: 0 -60%;
    background-color: transparent;
}

/* The mask container contains all the list elements that make up the carousel.
It acts as a mask, hiding those list elements that are too far to the left or
right.  It gives the illusion that we are dynamically adding or subtracting
divs using javascript or magic as we slide from left to right */
.slider-mask {
    overflow: hidden;
    position: relative;
    zoom: 1;
}

/* The target is the div that actually slides from left to right.   The width will
be overwritten by our javascript.  Just set it wide enough here to prevent wrapping
when the page loads.  Set it to 9999px or something obnoxiously large if you like */
.slider-target {
    width: 2000px;
    margin: 0 auto;
}

/* Remove padding and list style from our unordered list.  Your current CSS reset
might already handle this. */
.slider ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* These the individual elements in our carousel.  They all need to be the same
width.  The height can vary, but it might look unattractive if they do.  See my
jQuery plugin makeSameHeight located here https://github.com/mrbinky3000/makeSameHeight
if you want a dynamic method of keeping the carousel items at a uniform height as
the page expands and retracts.  Stick it into the redraw callback.  More on that
in the documentation.

NOTE: Do not apply margin or border to the slider elements (li).  Make an inner
container and apply it there if needed.

NOTE:  The width is overwritten by the plugin. This is just initial page load width.
However, the height remains untouched.
*/
.slider li {
    width: 175px;
    float: left;
    margin: 0;
    padding: 0;
    background-color: #fff;
}


/* This element is optional. Keep it and fill it with your own stuff, or replace
it with your own stuff.  */

.slid .opmask {
  background: rgb(255, 255, 255) ; opacity: 0.2;
}

.slider .inner {
    padding: 0px;
    margin: 0px;
    height: 100%;
    border-right: 7px solid #fff;
    border-left: 8px solid #fff;
}

.slider .current .opmask {

    opacity: 1;
}

.slide-title {
  position: absolute;
  top: 25px;
  left: 10px;
  line-height: 1em;
  max-width: 95%;
  color: #fff;
  font-family: 'NHaasGroteskDSStd-75Bd', sans-serif;
  font-weight: normal;
  text-transform: uppercase;
}

.test-title {
  font-size: 2em;
  font-size: 32px;
  padding-bottom: .25em;
  color: #fff;
  font-weight: bold;
  font-family: 'NHaasGroteskDSStd-75Bd', sans-serif;
}

.test-title a {
  color: #fff;
  background-color: #000;
  text-decoration: none;
}

.slide_link {
  text-decoration: none;
  font-size: 28px;
  font-size: 2em;
  line-height: 1.5em;
}

.examples {
    margin-top: 0;
    background-color: #fff;
}

#selector a.current {
  background-color: #309;
}

@media screen and (max-width: 700px){

  .slider .inner {
    
    height: 100%;
    border-right: 5px solid #fff;
    border-left: 5px solid #fff;
}

}

@media screen and (max-width: 591px){ 

#legend_box {
	display: none;
}

}


/* ---------------------------------------------------------------------------------------------------------- 
03 Media queries & Grid (using a mobile-first approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

body {
	background-color: #000;
}

header {
	z-index: 1;
	background-color: #fff;
}
.pback {
	background-color: #fff;
}

.menu_header {
	border-top: 5px solid #000;
	padding-top: 10px;
	padding-bottom: 10px;
}

.menu_header .menu-item, .menu_footer .menu-item {
	text-align:center;
}

.menu_header a, .menu_footer a {
	color: #fff;
	background-color: #000;
	display: inline-block;
	width: 100%;
	line-height: 3em;
	text-transform: uppercase;
	text-decoration: none;
	font-size: .625em;
	font-family: 'SackersGothicStd-Medium', sans-serif;
  	font-weight: normal;
  
}

.widget_subpages a {
	color: #000;
	background-color: #939598;
	display: inline-block;
	width: 100%;
	line-height: 1.75em;
	text-align: right;
	text-transform: uppercase;
	text-decoration: none;
	font-size: .625em;
	font-family: 'SackersGothicStd-Medium', sans-serif;
  	font-weight: normal;
  	padding-right: .75em;
  
}

.widget_subpages a:first-line {
	line-height: 3em;
}

.widget_subpages li {
	padding-top: 10px;
}

.widget_subpages {
	padding-right: .475em;
}

.widgettitle {
	padding-bottom: 0;
}

.center_social a {
	color: #939598;
	background-color: #fff;
	display:inline;
}

.menu_footer span {
	float: none;
}

.center_social {
	text-align: center;
}

img.size-slide, .opmask img {
	max-width: 100%;
	height: auto;
}

.page_content img {
	width: 100%;
	height: auto;
}

.svg-content {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

.svg-content2 {

	position: absolute;
	top: 0;
	left: 0;
}

.svg-container {
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 9%;
	margin-bottom: 5px;
	vertical-align: middle;
	overflow: hidden;
}

.svg-container2 {
	display: block;
	position: relative;
	width: 100%;
	padding-bottom: 144%;
	height: auto;
}

.google-maps {
	position: relative;
    padding-bottom: 75%; // This is the aspect ratio
    height: 0;
    overflow: hidden;
}

.google-maps iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

.padded-sp-right {
	padding-right: 1.25em;
}

.padded-sp-top {
	padding-top: 1.25em;
}

.padded-sp-bottom {
	padding-bottom: 1.25em;
}

.padded-sp-left {
	padding-left: 1.25em;
}

.padded-sp-sides {
	padding-left: 1.25em;
	padding-right: 1.25em;
}

.footer_bar {
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	line-height: 3em;
	text-transform: uppercase;
	font-size: .625em;
	font-family: 'SackersGothicStd-Light', sans-serif;
  	font-weight: normal;
  	color: #939598;
  	letter-spacing: 1px;
}

.footer_bar a {
	text-decoration: none;
}

.text-2 .textwidget  {
	float: left;
}

/*! responsive-nav.js 1.0.25 by @viljamis */

.nav-collapse ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  list-style: none;
  font-family: 'SackersGothicStd-Light', sans-serif;
  
}

.home .nav-collapse ul, .single .nav-collapse ul {
  border-bottom: 1px solid black;
}

.nav-collapse li {
  width: 100%;
  display: block;
  position: relative;
  z-index: 40;
}

.nav-collapse li + li { border-top: 1px solid #ece9e7;  }

.nav-collapse li a {
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  font-size: .625em;
  display:inline-block;
  width: 100%;
  color: #fff;
  background-color: #000;
  line-height: 3em;
  text-align: center;
}

.js .nav-collapse {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
  border-top: 1px solid #000;
}

.home .nav-collapse, .single .nav-collapse {
  padding-bottom: 10px;
}

.menu-mobile-container span {
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 50;
}

.nav-toggle {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  line-height: 3.3em;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.15em;
  font-family: 'SackersGothicStd-Light', sans-serif;
}

a.nav-toggle {
  text-decoration: none;
  color: black;
}

nav-collapse.opened {
  padding-bottom:.25em;
}
.grid-all,.grid-1,.grid-eighth,.grid-2,.grid-3,.grid-quarter,.grid-4,.grid-third,.grid-5,.grid-6,.grid-half,.grid-7,.grid-8,.grid-two-thirds,.grid-9,.grid-three-quarters,.grid-10,.grid-11,.grid-12,.grid-whole
{margin:0;clear:none;float:left;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;*behavior:url(http://morbidanatomymuseum.org/mword/wp-content/themes/morbid/boxsizing.htc)}
.grid-1{width:8.33333%}
.grid-eighth{width:12.5%}
.grid-2{width:16.66667%}
.grid-3,.grid-quarter{width:25%}
.grid-4,.grid-third{width:33.33333%}
.grid-5{width:41.66667%}
.grid-6,.grid-half{width:50%}
.grid-7{width:58.33333%}
.grid-8,.grid-two-thirds{width:66.66667%}
.grid-9,.grid-three-quarters{width:75%}
.grid-10{width:83.33333%}
.grid-11{width:91.66667%}
.grid-12,.grid-whole{width:100%}
.padded{padding:0.625em}
.padded-left{padding-left:0.625em}
.padded-right{padding-right:0.625em}
.padded-top{padding-top:0.625em}
.padded-top2{padding-top:0.25em}
.padded-bottom{padding-bottom:0.625em}
.padded-sides{padding:0 0.625em}
.padded-vertical{padding:0.625em 0}
.padded-inner{padding:1em}
.padded-inner-sides{padding:0 1em}
.padded-reverse{margin:0 -0.625em;width:auto;box-sizing:content-box;float:none}
.padded-reverse-all{margin:-0.625em;width:auto;box-sizing:content-box;float:none}
.flow-opposite{float:right}
.center{text-align:center}
.left{text-align:left}
.right{text-align:right}
.row{margin:0 -0.625em;width:auto;box-sizing:content-box;float:none}

/* 480 and smaller */

@media (max-width: 480px){
	.s-grid-all,.s-grid-1,.s-grid-2,.s-grid-3,.s-grid-quarter,.s-grid-4,.s-grid-third,.s-grid-5,.s-grid-6,.s-grid-half,.s-grid-7,.s-grid-8,.s-grid-two-thirds,.s-grid-9,.s-grid-three-quarters,.s-grid-10,.s-grid-11,.s-grid-12,.s-grid-whole
	{margin:0;clear:none;float:left;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;*behavior:url(http://morbidanatomymuseum.org/mword/wp-content/themes/morbid/boxsizing.htc)}
	.s-grid-1{width:8.33333%}
	.s-grid-2{width:16.66667%}
	.s-grid-3,.s-grid-quarter{width:25%}
	.s-grid-4,.s-grid-third{width:33.33333%}
	.s-grid-5{width:41.66667%}
	.s-grid-6,.s-grid-half{width:50%}
	.s-grid-7{width:58.33333%}
	.s-grid-8,.s-grid-two-thirds{width:66.66667%}
	.s-grid-9,.s-grid-three-quarters{width:75%}
	.s-grid-10{width:83.33333%}
	.s-grid-11{width:91.66667%}
	.s-grid-12,.s-grid-whole{width:100%}
	.s-padded{padding:0.625em}
	.s-padded-left{padding-left:0.625em}
	.s-padded-right{padding-right:0.625em}
	.s-padded-top{padding-top:0.25em}
	.s-padded-bottom{padding-bottom:0.25em}
	.s-padded-sides{padding:0 0.625em}
	.s-padded-vertical{padding:0.625em 0}
	.s-padded-inner{padding:1em}
	.s-padded-inner-sides{padding:0 1em}
	.s-padded-reverse{margin:0 -0.625em;width:auto;box-sizing:content-box;float:none}
	.s-padded-reverse-all{margin:-0.625em;width:auto;box-sizing:content-box;float:none}
	.s-flow-opposite{float:right}
	.s-center{text-align:center}
	.s-left{text-align:left}
	.s-right{text-align:right}
	.s-hidden{display:none}
	.padded-right{padding-right:0.25em}

	.menu_header{padding-top: 4px;padding-bottom: 4px;}
	.slider-mask-wrap {margin: 0 -80%;}
	.slider-nav {display:none;}
	.slide-title{top: 10px;}
	.s-padded-rightrem {padding-right:0;}
	.test-title {font-size: 1em;font-size: 16px;}
	.padded-sp-sides {padding-left: .25em;padding-right: .25em;}
	.padded-sp-top {padding-top : 0em;}
}
@media (min-width: 481px) and (max-width: 800px){
	.m-grid-all,.m-grid-1,.m-grid-2,.m-grid-3,.m-grid-quarter,.m-grid-4,.m-grid-third,.m-grid-5,.m-grid-6,.m-grid-half,.m-grid-7,.m-grid-8,.m-grid-two-thirds,.m-grid-9,.m-grid-three-quarters,.m-grid-10,.m-grid-11,.m-grid-12,.m-grid-whole
	{margin:0;clear:none;float:left;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;*behavior:url(http://morbidanatomymuseum.org/mword/wp-content/themes/morbid/boxsizing.htc)}
	.m-grid-1{width:8.33333%}
	.m-grid-2{width:16.66667%}
	.m-grid-3,.m-grid-quarter{width:25%}
	.m-grid-4,.m-grid-third{width:33.33333%}
	.m-grid-5{width:41.66667%}
	.m-grid-6,.m-grid-half{width:50%}
	.m-grid-7{width:58.33333%}
	.m-grid-8,.m-grid-two-thirds{width:66.66667%}
	.m-grid-9,.m-grid-three-quarters{width:75%}
	.m-grid-10{width:83.33333%}
	.m-grid-11{width:91.66667%}
	.m-grid-12,.m-grid-whole{width:100%}
	.m-padded{padding:0.625em}
	.m-padded-left{padding-left:0.625em}
	.m-padded-right{padding-right:0.625em}
	.m-padded-top{padding-top:0.625em}
	.m-padded-bottom{padding-bottom:0.625em}
	.m-padded-sides{padding:0 0.625em}
	.m-padded-vertical{padding:0.625em 0}
	.m-padded-inner{padding:1em}
	.m-padded-inner-sides{padding:0 1em}
	.m-padded-reverse{margin:0 -0.625em;width:auto;box-sizing:content-box;float:none}
	.m-padded-reverse-all{margin:-0.625em;width:auto;box-sizing:content-box;float:none}
	.m-flow-opposite{float:right}
	.m-center{text-align:center}
	.m-left{text-align:left}
	.m-right{text-align:right}
	.m-hidden{display:none}
	.padded-sp-top {padding-top : 0em;}
	.test-title {font-size: 1.5em;font-size: 24px;}
	.footer_bar {letter-spacing: 0px;}
	.padded-sp-sides {padding-left: .25em;padding-right: .25em;}
}
@media (min-width: 801px) and (max-width: 1200px){
	.l-grid-all,.l-grid-1,.l-grid-2,.l-grid-3,.l-grid-quarter,.l-grid-4,.l-grid-third,.l-grid-5,.l-grid-6,.l-grid-half,.l-grid-7,.l-grid-8,.l-grid-two-thirds,.l-grid-9,.l-grid-three-quarters,.l-grid-10,.l-grid-11,.l-grid-12,.l-grid-whole
	{margin:0;clear:none;float:left;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;*behavior:url(http://morbidanatomymuseum.org/mword/wp-content/themes/morbid/boxsizing.htc)}
	.l-grid-1{width:8.33333%}
	.l-grid-2{width:16.66667%}
	.l-grid-3,.l-grid-quarter{width:25%}
	.l-grid-4,.l-grid-third{width:33.33333%}
	.l-grid-5{width:41.66667%}
	.l-grid-6,.l-grid-half{width:50%}
	.l-grid-7{width:58.33333%}
	.l-grid-8,.l-grid-two-thirds{width:66.66667%}
	.l-grid-9,.l-grid-three-quarters{width:75%}
	.l-grid-10{width:83.33333%}
	.l-grid-11{width:91.66667%}
	.l-grid-12,.l-grid-whole{width:100%}
	.l-padded{padding:0.625em}
	.l-padded-left{padding-left:0.625em}
	.l-padded-right{padding-right:0.625em}
	.l-padded-top{padding-top:0.625em}
	.l-padded-bottom{padding-bottom:0.625em}
	.l-padded-sides{padding:0 0.625em}
	.l-padded-vertical{padding:0.625em 0}
	.l-padded-inner{padding:1em}
	.l-padded-inner-sides{padding:0 1em}
	.l-padded-reverse{margin:0 -0.625em;width:auto;box-sizing:content-box;float:none}
	.l-padded-reverse-all{margin:-0.625em;width:auto;box-sizing:content-box;float:none}
	.l-flow-opposite{float:right}
	.l-center{text-align:center}
	.l-left{text-align:left}
	.l-right{text-align:right}
	.l-hidden{display:none}

}

@media (min-width: 1201px) {
	.x-hidden{display:none}
}

/* Retina Display */
@media screen and (-webkit-min-device-pixel-ratio:2) {

					

}