/** general styles **/

*, *:before, *:after {
	box-sizing: inherit;
}

body {
	background: #673AB7;
	color: #FFF;
	font-family: Roboto, sans-serif;
	margin: 0;
	padding: 0;
}

.page-wrapper {
	margin: 0 auto;
	max-width: 800px;
}

/** Widget styles **/

.widget {
	margin: auto;
	position: fixed;
	width: 300px;
}

.widget--top {
	top: 50px;
}

.widget--bottom {
	bottom: 50px;
}

.widget--vcenter {
	bottom: 0;
	top: 0;
}

.widget--left {
	left: -300px;
}

.widget--right {
	right: -300px;
}

.widget-measure {
	overflow: hidden;
	transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

.widget--header {
	background: #D32F2F;
	cursor: pointer;
	padding: 20px;
	position: relative;
	z-index: 2;
}

.widget--content {
	background: #FF5252;
	padding: 20px;
	position: relative;
	transform: translateY(0);
	transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
	z-index: 1;
}

.widget--right .widget-measure {
	transform: translateX(-350px);
}

.widget--right.widget--minimized .widget-measure {
	transform: translateX(-50px);
}

.widget--left .widget-measure {
	transform: translateX(350px);
}

.widget--left.widget--minimized .widget-measure {
	transform: translateX(50px);
}

.widget--minimized .widget--content {
	transform: translateY(-100px);
}