* {
    padding: 0;
    margin: 0;
}
html, body{
    width:100%;
    height:100%;
}
.menu{
	width: 80%;
	margin: 0 auto;
	position:absolute;
	left: 10%;
	top: 8%;
}
.menu.full{
	height:20%;
}
.logo{
	height: 60%;
	width: auto;
	margin: 0 auto;
	text-align: center;
}
.eye{
}
.navigation-bar{
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width:100%;
/*    max-height:30%;
*/    height:30%;
    margin-top:1%;
}
.navigation-bar li{
	float: left;
	width: 33.33%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    line-height: 100%
}
.navigation-bar li a{
    height: 100%;
    width: 100%;
    cursor: pointer;
    text-decoration: none;
    line-height:100%;
}
.container{
	width:80%;
	height:100%;
}
#video-grid{
	width:80%;
	height:100%;
	margin: auto;
}
.item{
	background:green;
	display: inline-block;
}
.grid-sizer, .small{
	width: 20%;
	height: auto;
	background: red;
}
.medium{
	width:40%;
	background: purple;
}
.large{
	width:60%;
}