/*--------------------------------//
//                                //
//            App Bar             //
//                                //
//--------------------------------*/
.app-bar {
	position: fixed;
	top: 0;
	width: 100%;
	background-color: #BBDEFB;
	background-color: var(--color-primary);
	color: #000;
	color: var(--color-primary-text);
	justify-content: space-between;
	display: flex;
	display: -ms-flexbox;
	height: 4.5em;
}

.app-bar .left {
	align-items: center;
	display: flex;
	display: -ms-flexbox;
	text-transform: uppercase;
	height: 4.5em;
}

.app-bar .navigation {
	display: none;
	cursor: pointer;
	padding: 1em;
}

.app-bar .title {
	cursor: pointer;
	padding: 0 1em;
	line-height: 72px;
}

@media only screen and (min-device-width: 752px) and (max-device-width: 960px) {
	.app-bar {
		height: 7em;
		flex-flow: column wrap;
		-webkit-flex-flow: column wrap;
	}

	.app-bar .left {
		height: 4em;
	}
}

@media only screen and (max-device-width: 752px) {
	.app-bar .navigation {
        display: inline;
	}
}

@media only screen and (max-device-width: 368px) {
	.app-bar .title {
		padding: 0;
	}
}