/************************************************************************************
STRUCTURE
*************************************************************************************/
#retail {
background: url("../../images/template/cloud.jpg") no-repeat center fixed;
background-size: cover;
position: relative;
left: 0;
top: 0;
width: 100%;
height: calc(100% - 45px);
margin-bottom: 7px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
/************************************************************************************
CONTENT
*************************************************************************************/
.content {
position: absolute;
width: 100%;
height: auto;
top: 57px;
bottom: 20px;
left: 0;
right: 0;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
opacity: 0.90;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
box-shadow: 0 1px 3px rgba(0,0,0,.4);
z-index: 100;
overflow-y: auto;
overflow-x: hidden;
}

#page-container {
width: 960px;
height: auto;
margin: 0 auto;
overflow: hidden;
}

.page-content {
display: inline-block;
vertical-align: top;
height: auto;
width: 950px;
padding-top: 5px;
padding-right: 5px;
overflow: hidden;
}

.page-content-m {
display: none;
}

.startshopping {
width: 100%;
padding: 0;
}

.logo {
width: 100px;
text-align: center;
}

.browse {
width: 100px;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
text-align: center;
cursor: pointer;
}

#partsearch {
width: 700px;
height: 40px;
line-height: 40px;
font-size: 1.5em;
border: 1px solid #ccc;
border-bottom: none;
padding-left: 5px;
box-sizing: border-box;
}

#partsearch:hover {
background-color: #ccc;
}

.button-search {
width: 50px;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
text-align: center;
cursor: pointer;
}

.howitworks {
cursor: default;
border: 1px solid #ccc;
width: 100%;
padding: 10px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 30px;
background-color: #c2dde6;
}

.popular, .new, .feature {
cursor: default;
border: 1px solid #ccc;
width: 690px;
padding: 10px;
padding-left: 30px;
padding-right: 30px;
}

.deals {
cursor: default;
border: 1px solid #ccc;
width: 250px;
padding: 10px;
padding-left: 30px;
padding-right: 30px;
}
/************************************************************************************
MOBILE
*************************************************************************************/
@media screen and (max-width: 1020px) {

	#page-container {
	width: 100%;
	}
	
	.page-content {
	display: none;
	}
	
	.page-content-m {
	display: inline-block;
	vertical-align: top;
	height: auto;
	width: 100%;
	padding-top: 5px;
	padding-right: 5px;
	overflow: hidden;
	}
	
	.startshopping {
	width: 300px;
	padding: 0;
	margin: 0 auto;
	}
	
	.logo {
	width: 150px;
	height: 40px;
	text-align: center;
	}

	.browse {
	width: 150px;
	height: 40px;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	text-align: center;
	cursor: pointer;
	}

	#partsearch {
	width: 270px;
	height: 40px;
	line-height: 40px;
	font-size: 1.5em;
	border: 1px solid #ccc;
	border-bottom: none;
	padding-left: 5px;
	box-sizing: border-box;
	}

	#partsearch:hover {
	background-color: #ccc;
	}

	.button-search {
	width: 30px;
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	text-align: center;
	cursor: pointer;
	}
	
	.howitworks {
	width: 300px;
	margin: 0 auto;
	}
	
	.popular-m, .new-m, .deals-m, .feature-m {
	cursor: default;
	border: 1px solid #ccc;
	width: 300px;
	padding: 10px;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 30px;
	}
	
	#footer {
	font-size: 0.8em;
	}

}