#app-screen, #edit-screen {
	visibility 				: hidden;
	padding 				: 10px 15px;
	width 					: 100%;
	box-sizing 				: border-box;
}

#app-screen header h1, #edit-screen header h1, #edit-screen header h4 {
	margin 					: 0px 15px 0px 0px;
}

#app-screen header button {
	width 					: 49%;
}

#sessions-container {
	text-align 				: center;
}

#sessions-container article {
	display 				: inline-block;
	position 				: relative;
	width 					: 150px;
	height 					: 150px;
	margin-top 				: 15px;
	background 				: rgba(0, 0, 0, 0.2);
}

#sessions-container article img {
	width 					: 100%;
	max-height 				: 100px;
}

#sessions-container article:not(:last-child) {
	margin-right 			: 15px;
}

#sessions-container article div {
	position 				: absolute;
	bottom 					: 0px;
	width 					: 100%;
	text-align 				: center;
}

#sessions-container article h5 {
	margin 					: 10px;
}

#sessions-container .flip-face.back > button {
	display 				: block;
	margin 					: auto;
	width 					: 75px;
}

#sessions-container .flip-face.back > button:not(:last-child) {
	margin-bottom 			: 15px;
}

#new-session-screen, #join-session-screen {
	visibility 				: hidden;
	position 				: absolute;
	left 					: 50%;
	top 					: 50%;
	width 					: 200px;
	transform 				: translate(-50%, -50%);
	text-align 				: center;
}

#edit-screen {
	position 				: absolute;
	width 					: 100%;
	height 					: 100%;
	box-sizing 				: border-box;
}

#edit-screen header > * {
	display 				: inline-block;
}

#edit-screen header button.action {
	width 					: 25%;
}

#edit-screen-canvas {
	position 				: relative;
	margin-top 				: 1%;
	background 				: #FFF;
}

#edit-screen-pen-controls {
	position 				: absolute;
	left 					: 20px;
	bottom 					: 30px;
}

#edit-screen-pen-colour {
	width 					: 26px;
	margin-right 			: 10px;
	border-radius 			: 100%;
}

#edit-screen-info {
	cursor 					: pointer;
	margin-right 			: 15px;
}

/****
 * Flipper
 ****/
.flip-container {
	position 				: relative;
	perspective 			: 1000px;
}

.flip-container .flip-flipper {
	width 					: 100%;
	height 					: 100%;
	transform-style 		: preserve-3d;
	transition 				: all 0.5s linear;
}

.flip-container:hover .flip-flipper {
	transform 				: rotateY(180deg);
}

.flip-container .flip-face {
	position 				: absolute;
	width 					: 100%;
	height 					: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility 	: hidden;
}

.flip-container .flip-face.back {
	display 				: block;
	padding 				: 15px;
	transform 				: rotateY(180deg);
	box-sizing 				: border-box;
}

/****
 * Alert
 ****/
#popup-container {
	display 				: none;
	position 				: absolute;
	top 					: 0;
	left 					: 0;
	width 					: 100%;
	height 					: 100%;
	background 				: rgba(0, 0, 0, 0.2);
	/*-webkit-backdrop-filter : blur(2px); !** Only Safari currently supports this amazing filter *!*/
}

#popup-container > div {
	display 				: none;
	position 				: absolute;
	top 					: 50%;
	left 					: 50%;
	width 					: 80%;
	padding 				: 20px;
	transform 				: translate(-50%, -50%);
	background 				: #FFF;
	color 					: #000;
	box-shadow 				: 0px 0px 10px 0px #585858;
}

#popup-container > div h4 {
	margin 					: 0px 0px 10px;
	color 					: #000;
}

#popup-container > div button {
	float 					: right;
	min-width 				: 75px;
}

@media (min-width: 500px) {
	#app-screen header > *, #edit-screen header > * {
		display 			: inline-block;
	}

	#app-screen header button, #edit-screen header button {
		vertical-align 		: top;
		width 				: inherit;
		padding 			: 8px;
	}

	#form-join-session button:nth-of-type(1), #form-new-session button:nth-of-type(1) {
		margin-right 			: 50px;
	}
	
	#edit-screen header button.action {
		width 					: inherit;
	}

	#sessions-container {
		text-align 			: inherit;
	}

	#sessions-container article {
		float 				: left;
		display 			: block;
	}

	#popup-container > div {
		width 				: 375px;
	}
}