.menu{right: 40px; position: absolute; top: 10px; font-size: 16px; text-transform: uppercase; font-weight: normal;}
.menu a{color: #FFFFFF;}
.menu a:hover{color: #FFFFFF;}

.left_menu_main {height: 100%; position: relative; transition: all 0.4s ease 0s; z-index: 1000; float: right}
#sidebar-wrapper.active {right: 1150px; transition: all 0.4s ease 0s; width: 270px;}
#click_here_back {display: none;}
#click_here, #click_here_back, #trigger {display: none;} 
#drop_menu ul{margin: 0; padding: 0; list-style: none; text-align: right}
#drop_menu ul li{text-align: right; line-height: 36px; display: inline-block;}
#drop_menu ul li a{color: #FFFFFF; text-align: left;}

#navbar .right{display: none;}
        
@media screen and (max-width: 400px) {
	.morph-button-fixed,
	.morph-button-fixed .morph-content {
		width: 200px;
		height: 80px;
	}

	.morph-button-fixed > button {
		font-size: 75%;
	}

	.morph-button-sidebar > button {
		font-size: 1.6em;
	}

	.morph-button-inflow .morph-content .morph-clone {
		font-size: 0.9em;
	}

	.morph-button-modal-4,
	.morph-button-modal-4 .morph-content {
		width: 220px;
		height: 120px;
	}

	.morph-button-modal-4 > button {
		font-size: 100%;
		line-height: 50px;
	}

	.morph-button-modal-4 > button span {
		display: block;
	}

	.morph-button-modal-4 .morph-clone {
		right: 83px;
		bottom: 26px;
	}

	.morph-button-sidebar,
	.morph-button-sidebar .morph-content {
		width: 100% !important;
		height: 60px !important;
	}

	.morph-button-sidebar {
		bottom: 0px;
		left: 0px;
	}

	.morph-button-sidebar.open .morph-content {
		height: 100% !important;
	}
}


@media screen and (max-width: 770px) {
	.mockup-left {
		float: none;
		margin: 0 auto 20px;
	}

	.mockup-right {
		
	}

	.joiner {
		display: block;
	}
}

@media screen and (max-width: 400px) {
	.mockup-content > span:nth-last-child(2) {
		width: calc(100% - 210px);
	}
}

@media screen and (max-width: 25em) {

	.codrops-icon span {
		display: none;
	}

}
@media only screen and (min-width:1200px) and (max-width:1399px) {

}

@media only screen and (min-width:992px) and (max-width:1199px) {
#drop_menu ul li a{margin-left: 12px; font-size: 14px;}
}

@media only screen and (min-width:1200px) and (max-width:1399px) {
#drop_menu ul li a{padding: 0 18px;}
}

@media only screen and (min-width:992px) and (max-width:1199px) {
#drop_menu ul li a{font-size: 14px; padding: 0 18px;}
.left_menu_main {	height: 100%;	margin-right: -1330px;	overflow-y: auto;	position: fixed;	right: 0;	top: 0;	transition: all 0.4s ease 0s;	z-index: 1000;	margin-top: 0;}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	#sidebar-wrapper.active {right: 1330px;}

.left_menu_main {background: #333333; height: 100%; margin-right: -1330px; overflow-y: auto; position: fixed; right: 0; top: 0; transition: all 0.4s ease 0s; z-index: 1000; margin-top: 0}
#click_here, #click_here_back, #trigger {background: rgba(0, 0, 0, 0) url("../images/close2.png") no-repeat scroll 20px 24px; color: #fefefe; cursor: pointer; width: 269px; display: block; position: relative; height: 70px;} 

#drop_menu ul li{text-align: left; padding: 0 20px; border-bottom: 1px solid #5a5a5a; line-height: 48px; display: block; border: none;}
#drop_menu ul li a{padding: 0; color: #FFFFFF;}
}

@media only screen and (min-width: 640px) and (max-width: 767px) {
.left_menu_main {background: #333333; height: 100%; margin-right: -1150px; overflow-y: auto; position: fixed; right: 0; top: 0; transition: all 0.4s ease 0s; z-index: 1000; margin-top: 0}
#click_here, #click_here_back, #trigger {background: rgba(0, 0, 0, 0) url("../images/close2.png") no-repeat scroll 20px 24px; color: #fefefe; cursor: pointer; width: 269px; display: block; position: relative; height: 70px;} 

#drop_menu ul li{text-align: left; padding: 0 20px; border-bottom: 1px solid #5a5a5a; line-height: 48px; display: block; border: none;}
#drop_menu ul li a{padding: 0; color: #FFFFFF;}
}

@media only screen and (min-width: 480px) and (max-width: 639px) {
.left_menu_main {background: #333333; height: 100%; margin-right: -1150px; overflow-y: auto; position: fixed; right: 0; top: 0; transition: all 0.4s ease 0s; z-index: 1000; margin-top: 0}
#click_here, #click_here_back, #trigger {background: rgba(0, 0, 0, 0) url("../images/close2.png") no-repeat scroll 20px 24px; color: #fefefe; cursor: pointer; width: 269px; display: block; position: relative; height: 70px;} 

#drop_menu ul li{text-align: left; padding: 0 20px; border-bottom: 1px solid #5a5a5a; line-height: 48px; display: block; border: none;}
#drop_menu ul li a{padding: 0; color: #FFFFFF;}
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
.left_menu_main {background: #333333; height: 100%; margin-right: -1150px; overflow-y: auto; position: fixed; right: 0; top: 0; transition: all 0.4s ease 0s; z-index: 1000; margin-top: 0}
#click_here, #click_here_back, #trigger {background: rgba(0, 0, 0, 0) url("../images/close2.png") no-repeat scroll 20px 24px; color: #fefefe; cursor: pointer; width: 269px; display: block; position: relative; height: 70px;} 

#drop_menu ul li{text-align: left; padding: 0 20px; border-bottom: 1px solid #5a5a5a; line-height: 48px; display: block; border: none;}
#drop_menu ul li a{padding: 0; color: #FFFFFF;}
}