body {
	color: #000000;
   font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
}

.routine-page {
	background: #21409a;
}


/* type ------------------------------------------------ */

.title {
	font-weight: 500;
}


/* hero ------------------------------------------------ */

.hero {
	color: #ffffff;
	background-color: #21409a;
}

.hero .title,
.hero .subtitle, 
.hero a {
	color: inherit;
}

.hero.is-fullheight-with-navbar .hero-top-align {
	align-items: flex-start;
}

.hero.is-fullheight-with-navbar .hero-top-align .container {
	max-width: 400px;
}


/* navbar mobile --------------------------------------- */

.navbar-mobile {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	background: #21409a;
	color: #ffffff;
}

.navbar-middle {
	font-weight: bold;
}

.navbar-mobile .navbar-item {
	display: flex; 
	color: inherit;
}

.navbar-item svg {
}

.navbar-item svg * {
	fill: #ffffff;
}
.navbar-item:hover svg * {
	fill: #21409a;
}


/* footer ---------------------------------------------- */

.footer {
	background: #ffffff;
	color: #21409a;
}


/* loading --------------------------------------------- */

.loading {
	position: relative;
	width: 100%;
	height: 100%;
	background: #21409a;
}

.loading .a, .loading .b, .loading .c {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -50px;
	margin-top: -50px;
	width: 60px;
	height: 60px;
	transform: rotate(0);
	transform-origin: center center;
	animation-name: spin;
  animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.loading .a::after, .loading .b::after, .loading .c::after {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: #ffffff;
	opacity: 0.6;
  animation-name: shuffle;
  animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
  animation-duration: 2s;
}

.loading .a { animation-duration: 0.6s; }
.loading .b { animation-duration: 0.8s; }
.loading .c { animation-duration: 1.0s; }

@keyframes shuffle {
	0% { transform: translate(0, 0); }
	50% { transform: translate(-30%, -30%); }
	100% { transform: translate(0, 0); }
}

@keyframes spin {
  0%   { transform: rotate(0) }
  100%   { transform: rotate(360deg) }
}


/* circle player --------------------------------------- */

.mediPlayer {
	margin-top: -6em;
	text-align: center;
}


/* playlist -------------------------------------------- */

.playlist {
	list-style: none;
}

.playlist li + li {
	margin-top: 1em;
	line-height: 2em;
}

.playlist li a {
	display: flex;
	justify-content: center;
  align-items: center;
}

.playlist li span {
	display: block;
	margin-right: 0.5em;
	align-self: stretch;
}

.playlist svg path {
	fill: #ffffff;
}