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

  HEADING ELEMENTS
  
----------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #3b3b3b;
  font-weight: 700;
  line-height: 1.2;
}

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

  TEXT ELEMENTS
  
----------------------------------------------------------------------------- */
a {
  text-decoration: none;
}

b,
strong {
  font-weight: 700;
}

i,
em {
  font-style: italic;
}

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

  SLIDE AND PUSH MENUS COMPONENT
  
----------------------------------------------------------------------------- */
/**
 * Menu overview.
 */
.c-menu {
  position: fixed;
  z-index: 200;
  background-color: #90b0d0;
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}

.c-menu__items {
  list-style: none;
  margin: 0;
  padding: 0;
	border-bottom: 1px solid #bcd;
}

#c-trackinfo {
    background: #d8e8f8;
    box-shadow: 0 0 10px #000;
    color: #134080;
    height: calc(100% - 10px);
    left: 0;
    margin: 5px;
    padding: 0;
    position: fixed;
    top: 0;
    width: calc(100% - 10px);
    z-index: 1000;
		overflow-y: scroll;
		/*font-size: 0.8em;*/
}
#c-trackinfo strong
{
	  margin: 20px 0;
    display: block;
}
#c-trackinfo strong,
#c-trackinfo p
{
		padding: 0 20px;
}

/**
 * Left and right menus
 *
 */
.c-menu--slide-left {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
@media all and (min-width: 320px) {
  .c-menu--slide-left {
    width: 300px;
  }
}

.c-menu--slide-left .c-menu__item {
  display: block;
  text-align: left;
  border-top: solid 1px #bcd;
  border-bottom: solid 1px #456;
	background: #80a0c0;
}
.c-menu--slide-left .c-menu__item:first-child {
  /*border-top: none;*/
}
.infos {
	border-bottom: solid 1px #456;
}

.c-menu--slide-left .c-menu__link {
  display: block;
  padding: 12px 24px;
  color: #fff;
}

.c-menu--slide-left .c-menu__close,
#c-trackinfo .c-menu__close
{
  display: block;
  padding: 12px 24px;
  width: 100%;
}

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

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

/**
 * 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 {
  color: #fff;
  background-color: #134080;
  font-size: 14px;
  border: none;
  box-shadow: none;
  border-radius: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
	text-align: center;
}

.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 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.7;
  -webkit-transition: opacity 0.3s;
          transition: opacity 0.3s;
}

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

  BUTTONS
  
----------------------------------------------------------------------------- */
.c-buttons {
	left: -35px;
	position: absolute;
	top: 65%;

	/* Perform the rotation */
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}

.c-button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: #f69a6b;
	border: 2px solid #fff;
	border-radius: 10px;
	box-shadow: 0px 0px 4px #000;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	padding: 16px 24px 11px;
}

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

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