html, body {
	margin: 0;
}

* {
	box-sizing: border-box;
}

.demo-hidden {
	display: none;
}

.demo-navbar {
	display: flex;
	flex-direction: row;
	align-items: center;
	align-content: center;
	height: 75px;
	background-color: #222;
}

.demo-navbar ul {
	list-style: none;
	margin: 0 auto;
	display: block;
	padding: 0;
}

.demo-navbar ul li{
	display: inline;
}

.demo-navbar ul li a{
	text-indent: -9999px;
	font-size: 0;
	margin: 0 15px;
}

.demo-navbar ul li a svg {
	width: 60px;
	height: 50px;
	pointer-events: all;
	color: #999;
}

.demo-navbar ul li a[data-portsize*="380"] svg{
	width: 14px;
}

.demo-navbar ul li a[data-portsize*="768"] svg{
	width: 20px;
}

.demo-navbar ul li a[data-portsize*="1024"] svg{
	width: 28px;
}

.demo-navbar ul li a[data-portsize*="reset"] svg{
	width: 41px;
}

svg .sg-fill {
	fill: #222;
	transition: fill 0.3s;
}

.demo-navbar ul li svg:hover {
	color: #ccc;
	transition: color 0.3s;
}

.demo-navbar ul li .fr-active svg {
	color: #ccc;
}

.demo-content {
	width: 100%;
	display: block;
	margin: 0 auto;
	background-color: #ccc;
	height: 88vh;
	border: 12px solid #ddd;
}