/*
/*-------------------------------------------------------------------------------------
Name: Multinav
Version:    1.0
Author: Binatestation
-------------------------------------------------------------------------------------*/


/**
****************************************
@File: Multinav Styles

This CSS is only for the demo contents,
Menu styles are included only in menu.css

========================
content table
=========================
01. General css
02. shopping demo
  03. off canvas
  04. preview page
  05. footer
  06. media query
*/

/*===============================
  01. General css
  ===============================*/
.mega_mn_body p
{

	line-height:23px;
}
.mega_mn_body .btn
{
	background: #fff;
	display:inline-block;
	padding: 10px 20px;
	border-radius: 50px;
	width: auto;
	text-decoration: none;
}
.mega_mn_body .main-content
{
	height: 100%;
	width: auto;
    
}
.mega_mn_body .demo-1-banner
{
    background-color: rgba(211,66,35,1.00);
	height: 100%;
	/*width: 100%;*/
	padding: 0 10px;
}

.mega_mn_body .custom-container
{
	max-width: 1170px;
	width: 100%;
	margin:0 auto;
}
.mega_mn_body .row
{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
}
.mega_mn_body .row .row-div
{
	width: 300px;
	float: left;
}

.mega_mn_body .row .row-div img
{
	padding: 10px;
    width: 300px!important;
    height: auto!important;
}
.mega_mn_body .row .row-div h2,
.mega_mn_body .row .row-div p
{
	color: #fff;
}
.mega_mn_body .demo-1-banner .custom-container
{
	height: 100%;
}
.mega_mn_body .para
{
	padding: 50px 0;
}

/*===============================
  02. shopping demo
  ===============================*/
.mega_mn_body .nav-shop
{
	padding: 0px;
}
.mega_mn_body .nav-shop li
{
	float: left;
	width: calc(100% / 4 - 14px);
	margin:5px; 
	background: #eee;
	display: inline-block;
}
.mega_mn_body .nav-shop li a
{
	padding: 30px;
}
.mega_mn_body .nav-shop li img
{
	max-width: 100%;
}
/*end of shopping demo*/

/*===============================
  03. off canvas
  ===============================*/
.mega_mn_body .padding-off-canvas
{
	padding: 30px;
}
/*end of off-canvas*/

/*===============================
  04. preview page
  ===============================*/
.mega_mn_body .preview-page
{
	height: 350px;
}
.mega_mn_body .preview-page .demo-1-banner
{
	text-align: center;
}
.mega_mn_body .preview-page .demo-1-banner h2,
.mega_mn_body .preview-page .demo-1-banner p
{
	color: #fff;
}

.mega_mn_body .preview-page .demo-1-banner a
{
	background: #fff;
	font-size: 13px;
	width: 100px;
	display: inline-block;
	padding: 8px 0;
	border-radius: 3px;
	color: #5f249c;
	margin-top: 10px;
	text-decoration: none;
}
.mega_mn_body .demo-list
{
	padding-top: 50px;
}
.mega_mn_body .demo-list ul
{
	width: 100%;
	padding: 0px;
}
.mega_mn_body .demo-list li
{
	width:25%;
	float: left;
	list-style: none;
	padding: 20px 10px;
	box-sizing: border-box;
}
.mega_mn_body .demo-list li .image-div
{
	background: #e9e9e9;
	padding: 30px 30px 0
}
.mega_mn_body .demo-list li img
{
	max-width: 100%;
}
.mega_mn_body .demo-list li a
{
	font-size: 12px;
	color: #888;
	text-align: center;
	display: block;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
	padding: 10px 0 0;
	text-decoration: none;
}
.mega_mn_body .demo-list li a span{
	padding-top: 10px;
	display: block;
}

.mega_mn_body .properties
{
	background: #fbfbfb;
	padding: 50px 0;
	margin-top: 100px;
}
.mega_mn_body .properties ul
{
	padding: 0px;
}
.mega_mn_body .properties li
{
	display: inline-block;
	width: 33.3%;
	float: left;
	text-align: center;
	padding: 20px;
	box-sizing: border-box;
	height: 250px;
}
.mega_mn_body .properties li i
{
	font-size: 40px;
	color: #ccc;
}
/*end of demo-page*/

/*===============================
  05. footer 
  ===============================*/
.mega_mn_body footer
{
	width: 100%;
	background: #111;
}
.mega_mn_body .footer-wrapper
{
	width: 100%;
}
.mega_mn_body .footer-div
{
	width:33.3%;
	float: left;
}
.mega_mn_body .footer-div p
{
	color: #ccc;
	font-size: 13px;
}
.mega_mn_body .footer-div p a{
	color: #3693f3;
	text-decoration: none;
}
.mega_mn_body .middle-footer .logo
{
	width: 100%;
}
.mega_mn_body .middle-footer
{
	text-align: center;
}
.mega_mn_body .middle-footer
{
	padding: 15px 0;
}
.mega_mn_body .middle-footer .logo a
{
	color: #eee;
	text-decoration: none;
}
.mega_mn_body .right-footer
{
	text-align: right;
}
.mega_mn_body .footer-div .logo
	{
		position: relative;
	}
	.mega_mn_body footer
	{
		padding: 0 10px;
		box-sizing: border-box;
	}
/*end of footer*/

/*===============================
  06. media query
  ===============================*/
 /* Medium devices (desktops, 991px and up) */
@media screen and (max-width: 991px)
{
	.mega_mn_body .properties li
	{
		width: 50%;
	}
	.mega_mn_body .footer-div .logo
	{
		position: relative;
	}
	.mega_mn_body footer
	{
		padding: 0 10px;
		box-sizing: border-box;
	}
	/*===============================
	  banner
	  ===============================*/
	.mega_mn_body .demo-1-banner .row .row-div
	{
		margin: 0 auto;
		width: 100%;
		float: none;
	}
	.mega_mn_body .demo-1-banner .row
	{
		display: block;
		padding: 0px 0;
	}
	.mega_mn_body .demo-1-banner .row .row-div img
	{
		display: block;
        	padding: 5px
	}
	.mega_mn_body .para
	{
		padding:50px 20px;
	}
	/*end of banner*/
}
/* small devices (table, 768px and up) */
@media screen and (max-width: 768px)
{
	.mega_mn_body .demo-list li
	{
		width: 33.3%;
	}
	.mega_mn_body .properties li
	{
		width: 50%;
	}
	.mega_mn_body .footer-div .logo
	{
		position: relative;
	}
	.mega_mn_body footer
	{
		padding: 0 10px;
		box-sizing: border-box;
	}
	/*===============================
	  banner
	  ===============================*/
	.mega_mn_body .demo-1-banner .row
	{
		display: block;
		padding: 10px;
	}
	.mega_mn_body .demo-1-banner .row .row-div
	{
		width: 100%;
		float: none;
	}
	.mega_mn_body .demo-1-banner .row .row-div img
	{
		display: block;
	}
	.mega_mn_body .para
	{
		padding:50px 20px;
	}
	/*end of banner*/
	/*===============================
	  shop page
	  ===============================*/
	.mega_mn_body .nav-shop li
	{
		width:calc(100% / 3 - 14px);
	}
	/*end of shop page*/
}
/* small devices (table, 580px and up) */
@media screen and (max-width: 580px)
{
	.mega_mn_body .demo-list li a
	{
		font-size: 10px;
	}
	.mega_mn_body .demo-list li
	{
		width: 50%;
	}
	.mega_mn_body .properties li
	{
		width: 100%;
	}
	.mega_mn_body .footer-div
	{
		width: 100%;
		float: none;
		text-align: center;
	}
	.mega_mn_body .footer-div .logo
	{
		position: relative;
	}
	.mega_mn_body .footer-div .logo a
	{
		padding: 0px;
	}
	/*===============================
	  banner
	  ===============================*/
	.mega_mn_body .demo-1-banner .row
	{
		display: block;
		padding: 10px;
	}
	.mega_mn_body .demo-1-banner .row .row-div
	{
		width: 100%;
		float: none;
	}
	.mega_mn_body .demo-1-banner .row .row-div img
	{
		display: block;
        width: 300px!important;
	}
	.mega_mn_body .para
	{
		padding:10px!important;
	}
	/*end of banner*/
	/*===============================
	  shop page
	  ===============================*/
	.mega_mn_body .nav-shop li
	{
		width:calc(100% / 2 - 14px);
	}
	/*end of shop page*/
}
/* small devices (mobile, 350px and up) */
@media screen and (max-width: 350px)
{
	.mega_mn_body .demo-list li
	{
		width:100%;
	}
	.mega_mn_body .properties li
	{
		width: 100%;
	}
	.mega_mn_body .footer-div
	{
		width: 100%;
		float: none;
		text-align: center;
	}
	.mega_mn_body .footer-div .logo
	{
		position: relative;
	}
	.mega_mn_body .footer-div .logo a
	{
		padding: 0px;
	}

	/*===============================
	  banner
	  ===============================*/
	.mega_mn_body .demo-1-banner .row
	{
		display: block;
		padding: 50px 0;
	}
	.mega_mn_body .demo-1-banner .row .row-div
	{
		width: 100%;
		float: none;
	}
	.mega_mn_body .demo-1-banner .row .row-div img
	{
		display: block;
	}
	.mega_mn_body .para
	{
		padding:50px 20px;
	}
	/*end of banner*/
	/*===============================
	  shop page
	  ===============================*/
	.mega_mn_body .nav-shop li
	{
		width:calc(100% / 2 - 14px);
	}
	/*end of shop page*/
}