.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; position: relative; top: 16px; }
/* .left_menu_main:after{background: url(../images/navi-bg.png) no-repeat bottom center / 100%; width: 1290px; left: 0; bottom: 0; right: 0; margin: 0 auto; position: absolute; content: ''; height: 38px;} */
#sidebar-wrapper.active {right: 740px; 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: center}
#drop_menu ul li{text-align: right; line-height: 36px; float: left;padding: 18px 0; border-top: 6px solid #FFFFFF}
#drop_menu ul li a{color: rgba(34,34,34,1.0); text-align: center; font-weight: bold; display: block;font-size: 14px;}
#drop_menu ul li a span{font-size: 12px; color: #616060; font-weight: 300; text-transform: none; display: block}
#drop_menu ul li a:hover{color: rgba(51,152,220,1.0); display: block}
/* #drop_menu ul li:hover, #drop_menu ul li.active{border-top: 6px solid #e50d0d;} */
#drop_menu ul li:hover a, #drop_menu ul li.active a{color: rgb(255 99 71)}
#drop_menu ul li a{position: relative;}
#drop_menu ul li a::after{content: ''; width: 51%; height: 2px; position: absolute; bottom: -3px; left: 0; right: 0; margin: auto; display: none;}
#drop_menu ul li.active a::after{display: block;}
#drop_menu ul li:hover a::after{display: block;}

#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) {
.left_menu_main{margin: 0 7px; padding: 0 0px;}
/* #drop_menu ul li a{font-size: 14px; padding: 0 44px;} */
.left_menu_main::after{width: auto; bottom: -1px;}
.about .right img{width: 100%; object-fit: cover;}
}

@media only screen and (min-width:992px) and (max-width:1199px) {
.left_menu_main{margin: 0 3px;}
#drop_menu ul li a{font-size: 14px; }
.left_menu_main::after{width: auto; bottom: 2px;}
#drop_menu ul li{padding: 17px 0}
.about .right img{width: 100%; object-fit: cover;}
.welcome .price {font-size: 32px;}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
.left_menu_main {background: #333333; height: 100%; margin-right: -750px; 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;}
#drop_menu ul li a{padding: 0; color: #FFFFFF;}
.left_menu_main::after{display: none;}
#drop_menu ul li {border-top: 6px solid #FFFFFF; padding: 10px 0; float: none;}
#drop_menu ul li a span{color: #CCCCCC}
}

@media only screen and (min-width: 640px) and (max-width: 767px) {
.left_menu_main {background: #333333; height: 100%; margin-right: -740px; 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;}
#drop_menu ul li a{padding: 0; color: #FFFFFF;}
.left_menu_main::after{display: none;}
#drop_menu ul li {border-top: 6px solid #FFFFFF; padding: 10px 0; float: none;}
#drop_menu ul li a span{color: #CCCCCC}
}

@media only screen and (min-width: 480px) and (max-width: 639px) {
.left_menu_main {background: #333333; height: 100%; margin-right: -740px; 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;}
#drop_menu ul li a{padding: 0; color: #FFFFFF;}
.left_menu_main::after{display: none;}
#drop_menu ul li {border-top: 6px solid #FFFFFF; padding: 10px 0; float: none;}
#drop_menu ul li a span{color: #CCCCCC}
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
.left_menu_main {background: #333333; height: 100%; margin-right: -740px; 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;}
.left_menu_main::after{display: none;}
#drop_menu ul li {border-top: 6px solid #FFFFFF; padding: 10px 0; float: none;}
#drop_menu ul li a span{color: #CCCCCC}
}