header {
    background-color: #0091DC;
    padding: 20px;
    text-align: center;
    position: relative;
}

header > a.logout {
	position: absolute;
	display: block;
	top: 12px;
	right: 20px;
	background-image: url(../svg/off-white.svg);
	background-repeat: no-repeat;
	background-size: 32px 32px;
}

header > a.logout:hover {
	text-decoration: none;
	opacity: 0.8;
	cursor: pointer;
}

header nav a.logout {
	background-image: url(../svg/off-red.svg);
	background-repeat: no-repeat;
	background-size: 20px 20px;
	background-position: 10px center;
	padding: 8px 10px 8px 37px;
}

header > a.back {
	position: absolute;
	width: 40px;
	height: 40px;
	display: block;
	top: 12px;
	left: 20px;
	background-image: url(../svg/back.svg);
	background-repeat: no-repeat;
	background-size: 32px 32px;
	background-position: center;
}

header > a.back:hover {
	opacity: 0.8;
	cursor: pointer;
}


/* mobile */
@media all and (max-width: 520px) {
	header > a.logout {
		padding: 0;
		width: 40px;
		height: 40px;
		background-position: center;
	}

	header > a.logout strong { display: none; }
}

/* desktop */
@media all and (min-width: 521px) {
	header > a.logout {
		padding: 10px 10px 10px 40px;
		color: #FFF;
		background-position: center left;
	}
}