/**********SLIDING MENU***********/
/* -----------------------------------------------------------------------------

  WRAPPER OBJECT
  
----------------------------------------------------------------------------- */
.o-wrapper {
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}

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

  CONTAINER OBJECTS
  
----------------------------------------------------------------------------- */
.o-container {
  margin: 0 auto;
  padding: 0 12px;
  max-width: 960px;
}

@media all and (min-width: 480px) {
  .o-container {
    padding: 0 24px;
  }
}
@media all and (min-width: 720px) {
  .o-container {
    padding: 0 48px;
  }
}
/* -----------------------------------------------------------------------------

  HEADER OBJECT
  
----------------------------------------------------------------------------- */
.o-header {
  margin: 0;
  padding: 0;
}

.o-header-nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background-color: #67b5d1;
}

.o-header-nav__link {
  padding: 12px;
  color: #fff;
}

.o-header-nav__link:hover {
  color: #fff;
  background-color: #3184a1;
}

.o-header__title {
  margin: 24px;
  padding: 0;
  color: #818181;
  font-size: 28px;
  font-weight: 300;
  text-align: center;
}

@media all and (min-width: 480px) {
  .o-header__title {
    margin: 36px;
    font-size: 42px;
  }
}


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

  SLIDE AND PUSH MENUS COMPONENT
  
----------------------------------------------------------------------------- */
/**
 * Menu overview.
 */
.c-menu {
position: fixed; height: 100%;
z-index: 200;
background-color: #000;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
width: 240px;
}

.c-menu__items {
list-style: none;
margin: 15px 10px;
padding: 0; color: #fff;
}
.c-menu__item{ font-size: 16px; margin-bottom: 5px;color: #cdcdcd;}
.c-menu__item a{ color: #cdcdcd;}
.c-menu__item a:hover{ text-decoration: underline;}
/**
* Slide/Push Menu Right.
*/
.c-menu--slide-right,
.c-menu--push-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,
.c-menu--push-right {
-webkit-transform: translateX(240px);
-ms-transform: translateX(240px);
transform: translateX(240px);
}
}

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


.o-wrapper.has-push-right {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
@media all and (min-width: 320px) {
.o-wrapper.has-push-right {
-webkit-transform: translateX(-240px);
-ms-transform: translateX(-240px);
transform: translateX(-240px);
}
}

/**
* Body states.
*
* 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 { 
margin: 0 10px 10px; font-size: 24px;  color: #cdcdcd;font-weight:700; padding-top: 13px;

}
.c-menu__close span{color: #f26928; cursor: pointer;
float: right;
font-size: 54px;
font-weight: normal;
line-height: 20px;
margin-right: 20px;}

.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: #fff;
opacity: 0;
-webkit-transition: opacity 0.3s, width 0s 0.3s, height 0s 0.3s;
transition: opacity 0.3s, width 0s 0.3s, height 0s 0.3s;
}

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

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

BUTTONS

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

.c-button {
position: absolute; right: 0; top: 10px; z-index: 9;
display: inline-block;
margin: 4px;
cursor: pointer;   background: none; border:none;
}


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

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

.later{
	display: none !important;
}