@media only screen and (max-width: 767px) {

  
.main-header {
height: auto;
}

.d-flex {
	flex-wrap: wrap;
}

.m1 {
	order: 1;
}

.m2 {
	order: 2;
}

.m3 {
	order: 3;
}

.nav-last-col .navbar-nav.nav.top-nav {

	flex-wrap: wrap;
}
	
.header-box {
	width: 100%;
}
.header-box::before {
	width: 100%;
	height: 4px;
	background: linear-gradient(to left, rgba(0, 0, 0,0),rgb(232, 168, 10), rgba(0, 0, 0,0));
	right: 0;
	bottom: -32px;
	content: '';
}

.main-content {
	flex-wrap: wrap;
}

.stories {
    flex-flow: row wrap;
    position: relative;
    width: 318px;
    margin: 0 auto;
}

.stories .add-coal::after {
	content: none;
}

.sidebar {
	width: 100%;
}

.top-stats {width: 100%;
	margin: 0;
	padding: 0;
}

.empthy-box {
	padding-top: 0;
	width: 50% !important;
}

.header-box h4 {
	font-size: 12px;
}




.main-body-content {
	min-height: calc(100vh - 148px);
	max-height: inherit;
	margin-top: 50px;
	height: auto;
}


.side-dropdown.dropdown-menu.show[x-placement="bottom-start"] {
	left: 0 !important;
	border-left: 2px solid #e4ab0a;
	top: 80px !important;
	transform: inherit !important;
	right: 0;
	width: 300px;
}

.side-dropdown.dropdown-menu.show[x-placement="top-start"] {
	left: 0 !important;
	top: 80px !important;
}

.main-content {
	padding: 0 0px;
}

.main-header .col-md-1.m1 {
	flex: 1;
}

.main-header .col-md-2.nav-last-col.d-flex.m2 {
	flex: 1;
	justify-content: flex-end;
}

.add-coal.yellow-gradient.bgGreen {
    position: fixed;
    bottom: 4px;margin: 0;
    left: 6px;
    width: auto;
}

.stories div#drop3 .side-dropdown.dropdown.dropdown-menu.show {
	left: -96px !important;
	top: 80px !important;
}
/*
.side-dropdown {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
*/

/* Login SIgnup */

.popup-box {
	flex-flow: row wrap;
	left: 0;
	transform: inherit;
		top: 0;
		position: relative;
}


body.login .main-body-content, body.register .main-body-content, body.passwordrequest .main-body-content {
	margin-top: 0;
}

.signup {
	width: 100%;
	margin-right: 0;
}

.left-side {
	width: 100%;
}

.left-side img {
	height: 240px;
	width: 100%;
	object-fit: cover;
}

.right-side {
	width: 100%;
}

body.login .container.main-content, body.register .container.main-content,  body.passwordrequest .container.main-content {
	padding: 0;
	margin: -5px 0;
}

.signup.social-signup::before {
	content: none;

}

.signup.social-signup {
	padding-left: 0;
	width: 100%;
	text-align: center;
}

.signup.social-signup::after {
	content: none;
}

.forgot {
	margin: 0 auto;
}

.signup.social-signup p {
	margin-left: 0;
}

.signup.social-signup p a {
	margin-left: 5px;
}

.social-login {
	display: flex;
	justify-content: center;
	flex-flow: wrap;
}

.social-login a {
	margin: 0;
}

.social-login a {
	margin: 0;
	display: flex;
	align-items: center;
}

.social-login a i {
	margin-right: 8px;
	padding: 12px 14px;
}

.overlay a {
	font-size: 25px;
	line-height: 22px;
}
/*
.stories #drop1 .side-dropdown.dropdown-menu.show[x-placement="bottom-start"], .stories #drop1 .side-dropdown.dropdown-menu.show[x-placement="top-start"] {
	transform: none !important;
	right: auto !important;
	height: auto;
	margin-right: 25px !important;
	left: -60px !important;
	top: 73px !important;
}

 */

}  



@media only screen and (max-width: 1024px)  and (min-width: 768px) { 
   
   
.signup {
	width: 100%;
	margin-right: 0;
}

.left-side {
	width: 100%;
}


.right-side {
	width: 100%;
}

.popup-box {
	max-width: 90%;
}

.signup.social-signup::before {
	content: none;

}

.signup.social-signup {
	padding-left: 0;
	width: 100%;
	text-align: center;
}

.signup.social-signup::after {
	content: none;
}

.forgot {
	margin: 0 auto;
}

.signup.social-signup p {
	margin-left: 0;
}

.signup.social-signup p a {
	margin-left: 5px;
}

.social-login {
	display: flex;
	justify-content: center;
	flex-flow: wrap;
}

.social-login a {
	margin: 0;
}

.social-login a {
	margin: 0;
	display: flex;
	align-items: center;
}

.social-login a i {
	margin-right: 8px;
	padding: 12px 14px;
}


 }