header{
	height: 368px;
}

header .wrapper{
	height: 130px;
}

section.main {
	padding: 3px 0;
}
#me-nav{
	background: rgba(0,0,0,0.5);
}
.me-home{
	height: 40px;
	width: 100%;
    display: inline;
    float: left;
	z-index: 1;
    position: relative;
	background-color:rgba(255,255,255,0.045);
		 	
}
.me-home a{
	height: 40px;
}
.me-home a i{
	line-height: 40px
}
.me-nav-wrapper{
	height: 350px;
	max-height: 350px;
	width: 100%;
	overflow: hidden;
	display: inline-block;
}

.me-ul {
    
	list-style-type: none;
	height: 350px;
    margin: 0;
    padding: 0;
	overflow: hidden;

}

.me-li{
	float: left;
	width: 100%;
	
}
.me-active .me-anim{
	height:70px;
}
li.me-active.me-li a h1{
	color:#FFFFFF
}
.me-link{
	display: inline-block;
	color:#888;
	width: 100%;
	height: 10px;
	text-align: center;
	text-decoration: none; 	
}

div#me-home{
	background-color:#284f74
}
div#me-html{
	background-color:#0c3937;
}
div#me-video{
	background-color: #005724;
}
div#me-games{
	background-color: #453F27;
}
div#me-mobile{
	background-color: #219491;
}
div#me-kids{
	background-color: #EC1F26;
}

li.me-li a{
	height: 100%;
	width: 100%;
	line-height: 40px;
	position:relative
}

li.me-li a div{
	height: 1px;
	width: 100%;
	bottom:0;
	background: #219491;
	position: absolute

}
.me-home a div{
	height: 1px;
	width: 100%;
	bottom:0;
	left:0;
	background: #219491;
	position: absolute
}
li.me-li a h1{
	margin:0;
	position: relative;
	font-size: 24px;
	font-family:'Open Sans Condensed', sans-serif; 
	font-weight: 400;
	z-index: 1
}
i.material-icons{
	position: relative;
	z-index: 1;
}
li.me-li a h1:hover{
	color:white;
}

div.me-home a:hover{
	color:white;
}
li.me-li a:hover > div, .me-home a:hover > div{
	height: 40px;	
}
.me-anim{
	-webkit-transition-duration: 0.3s;
  	transition-duration: 0.3s;
  	-webkit-transition-timing-function: ease-out;
  	transition-timing-function: ease-out;

}



/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
	
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
	
	header{
	height: 184px;
	}
	
	section.main {
	padding: 30px 0;
}
	.me-nav-wrapper{
	height: 350px;
    max-height: 88px;
    width: 100%;
    overflow: hidden;
    display: inline-grid;
	padding-left: 55px;
	margin-left: -55px;

	}
	
	.me-li{
	width: 20%;
	height: 55px;
	overflow: hidden;
	}
	
	.me-ul{
	list-style-type: none;
	height: 279px;
    margin: 0;
    padding: 0;
	overflow: hidden;

	}
	li.me-li a{
	
	line-height: 55px;
	
}
	li.me-li a div{
	height: 3px;
	
}
 	.me-home a div{
	height: 3px;
}
	.me-home{
	height: 55px;
	width: 55px;
    display: inline;
    float: left;
	z-index: 1;
    position: relative;
}

    .me-home a{
        height: 55px;
    }
    .me-home a i{
        line-height: 55px
    }
    div#me-home{
        background-color:#284f74
    }
    div#me-html{
        background-color:#0c3937;
    }
    div#me-video{
        background-color: #005724;
    }
    div#me-games{
        background-color: #453F27;
    }
    div#me-mobile{
        background-color: #219491;
    }
    div#me-kids{
        background-color: #EC1F26;
    }
    li.me-li a:hover > div, .me-home a:hover > div{
        height: 55px
    }
}
/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
	
}