/*=====  SLIDE MENU  ======*/

/*----------  HIDE SELECT CHECKBOX  ----------*/

.toggle,
.full-screen-close
{
	display: none;
}

.full-screen-close
{
	width: 100%;
	height: 100%;
	position: absolute;
	cursor: pointer;
	top:0;
	left:0;
}

/*----------  TOGGLE OFF-CANVAS MENU  ----------*/

.toggle:checked + .container > .menu-container
{
  	margin-left: 0;
}

.toggle:checked + .container > .content .full-screen-close
{
  	display: block;
  	background: rgba(0,0,0,.5);
}

.menu
{
	color:#ee2d24;
	margin-top:-15px;
}

.menu:hover {
	color:#fff;
}

.toggle-btn,
.close-btn
{
	cursor: pointer;
}

.toggle-btn
{
	font-size: 2.25rem;
}


.close-btn, .toggle-btn
{
	float: right;
	font-size: 1.5rem;
	padding: 1.5rem;
	color: #FFF;
}

.close-btn:hover {
	color: #FFF;
}

.menu-container,
.content
{
	transition: margin 0.5s ease-in-out;
}

.menu-container
{
	background: #ee2d24;
	margin-left: -100%;
	float: left;
	height: 100%;
	position: fixed;
	z-index:99;
	width:300px;
}

.slide-menu ul {
	list-style:none;
	padding-left:10px;
}

.slide-menu i
{
	margin-right: 1rem;
	font-size: 1.5rem;
	vertical-align: middle;
}
.slide-menu li a
{
	color: #fff;
	padding: 1rem;
	font-size: 1.125rem;
	display: block;
	transition: background-color .5s ease-in-out;
}

.slide-menu li a:hover
{
	color: #FFF;
}

.slide-menu li button {
	color: #fff;
	padding: 1rem;
	font-size: 1.125rem;
	display: block;
	transition: background-color .5s ease-in-out;
	border:none;
	background: transparent;
}

.slide-menu li button:hover {
	color: #fff;
}

/*=====  MEDIA QUERIES  ======*/
@media (max-width: 460px) {
	.slide-menu li a
	{
		font-size: 0.875rem;
		padding: 12px;
	}

	.slide-menu li i
	{
		font-size: 16px;
	}
}

@media (max-width: 320px){
	.slide-menu li i
	{
		display: none;
	}
}