/* -----------------------------------------------------------------------------

  SLIDE AND PUSH MENUS COMPONENT
  
----------------------------------------------------------------------------- */
.c-menu {
	position:fixed;
	overflow-y:auto;
	z-index:200;
	background-color:#eee;
	-webkit-transition:-webkit-transform .3s;
	transition:transform .3s;}

.c-menu--slide-right {
	width:100%;
	height:100%;
	overflow-y:scroll;}

@media all and (min-width: 320px) {
	.c-menu--slide-right {
		width:300px;	}
}

.c-menu--slide-right .c-menu__close {
	display:block;
	padding:24px 24px;
	width:100%;}

.c-menu--slide-right {
	top:0;
	right:0;
	-webkit-transform:translateX(100%);
	-ms-transform:translateX(100%);
	transform:translateX(100%);}

@media all and (min-width: 320px) {
	.c-menu--slide-right {
		-webkit-transform:translateX(300px);
		-ms-transform:translateX(300px);
		transform:translateX(300px);	}}

.c-menu--slide-right.is-active {
	-webkit-transform:translateX(0);
	-ms-transform:translateX(0);
	transform:translateX(0);}


/* Menu Content ------------------------------------------*/

.c-menu .rowblock{
  padding: 10px;}
  
.c-menu ul{
  margin: 10px 0 30px 0;
  padding: 0;}
  
.c-menu ul li{
  list-style: none;
  margin-left: 0;}

.c-menu ul li a{
  display: inline-block;
  width: 100%;
  margin: 8px 12px;
  padding: 4px 10px;
  border-bottom: 1px solid #ddd;}

.c-menu ul li ul li a{
  display: inline-block;
  width: 100%;
  margin: 0px;
  padding: 0px 0 0 30px;
  border-bottom: none;}


/* /Menu Content ------------------------------------------*/


/**
 * When a menu is active, we want to hide the overflows on the body to prevent
 * awkward document scrolling.
 */

body.has-active-menu {
	overflow:hidden;}

/**
 * Close button resets.
 */
.c-menu__close {
  text-align: left;
	color:#fff;
	background-color:#0DB9DD;
	font-size:14px;
	border:none;
	box-shadow:none;
	border-radius:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	cursor:pointer;}

.c-menu__close:focus {
	outline:none;}


/* -----------------------------------------------------------------------------

  MASK COMPONENT
  
----------------------------------------------------------------------------- */
.c-mask {
	position:fixed;
	z-index:100;
	top:0;
	left:0;
	overflow:hidden;
	width:0;
	height:0;
	background-color:#000;
	opacity:0;
	-webkit-transition:opacity 0.3s,width 0 0.3s,height 0 .3s;
	transition:opacity 0.3s,width 0 0.3s,height 0 .3s;}

.c-mask.is-active {
	width:100%;
	height:100%;
	opacity:.5;
	-webkit-transition:opacity .3s;
	transition:opacity .3s;}

/* -----------------------------------------------------------------------------

  BUTTONS
  
----------------------------------------------------------------------------- */
/*
.c-buttons {
	text-align:right;}
*/

.c-button {
	display:inline-block;
	padding: 23px 12px 12px 12px;
	color:#67b5d1;
	background:none;
	font-size:24px;
	border:none;
	cursor:pointer;}

.c-button:focus {
	outline:none;}

.c-button:disabled {
	opacity:.3;
	cursor:not-allowed;}