/*For Mobile Phones*/

@media (max-width: 775px) {
	html, body { width: auto; }
	#wrapper { width: auto; 
				margin: 0 auto;}
	.form-contact-jobpost {
		width: 95%;}
	#home-icon {
		margin-top: 0;
	}
	#front-nav{
		display: none;
	}
	#slider-wrapper {
		height: 250px;
		width: 100%;
		background-color: black;
		box-shadow: 0px 1px 3px #888888;
	}
	#sl-cover{
		width: 100%;
		opacity: .3;
	}
	#sl-covertop{
		position: initial;
		width: 30%;
		opacity: .3;
	}
	.front-nav{
		display:block;
		width: 75%;
		padding: 5px 0;
		background-color: #4682b4;
		border-radius: 3px;
	}
	#front-nav-cont li {		
		margin: 5px auto;
	}
	#budget-calculator-app{
		width: 100%;
	}
	.a-left-nav{
		font-size: 1.1em;
		color: white;
	}
	.selected{
		background-color: #b0c4de;
	}
	
	#video-container, #frontpage-content, #articles-content, #about {
		margin-left: 0;
		width: 95%;
		border-left-style: none;
		border-right-style: none;
		margin: 0 auto;
	}
	
	#video-container{
		width: 98%;
		height: 250px;
		margin: 0 auto;
	}
	
	.sl-element {
		width: 100%;
		
	}
	#menu-icon {
		display: inline-block;
	}
	#menu-icon {
		margin-top: 0;
	}
	#close-button{
		margin: 2px auto;
	}
	#logInpage, #sign-up-page, #contact-us {
		width: 100%;
		margin: 0 auto;
		margin-top: -443px;
	}
	#contact-us {
		margin-top: -20%;
		margin-left: 40%;
		width: 30%;
	}
	
	#log-link {
		margin-top: 5px;
	}
	#main-content 
	{ position: relative;
	display: block; 
	width: 75%;
	grid-column-gap: 5px;
	margin: 40px auto;
	height: auto;
	}
	#calc-wrapper, #article-main-content{
		position: relative;
		width: 100%;
	}
	#article-main-content { 
	display: block; 
	grid-column-gap: 5px;
	margin: 25px auto;
	height: auto;
	border-bottom-style: none;
	left: 0;
	}
	#b-Board-page {
		display: block; 
		width: 95%;
		left: 0;
		margin: 10px auto;
		float: none;
		
	}
	.job-listings {
		margin-left: 0%
		width: 98%;
		margin: 10px auto;
	}
	
	#side-nav ul li, #article-side-nav li {
		border-right: none;
		width: auto;
	}
	.article-enum {
		font-size: 14px;
	}
	
	#article-side-nav{
		display: none;
		top: 54px;
		background-color: #b0c4de;
		position: absolute;		
		width: 100%;
		text-align: center;
		z-index: 3000;
	}
	#article-side-nav .front-nav{
		background-color: inherit;
		color: rgb(32, 0, 64);
	}
	#up-swipe {
		width: inherit;
		display: block;
		border-top: 2px groove #C0C0C0;
		font-size: 1.5em;
		font-weight: 800;
	}
	#side-nav{
		display: none;
	}
		
	#user-welcome {
		font-size: 10px;
		font-weight: 500;
	}
	#sign-out-butt {
		font-size: 12px;
		font-weight: 800;
	}
	.title-bar{
		margin: 0 auto;
	}
	#job-post {
		width: 100%;
		margin: 0 auto;
		margin-top: -74px;
	}
	#event-post {
		width: 100%;
		margin: 0 auto;
		margin-top: -74px;
	}
	#w-logo {
		font-size: 0;
	}
	#log-link {
		margin-right: 3%;
	}
	#top-Ads{
		width: 90%;
	}
	
	.footer-content {
		margin: 40px auto;
		//margin-top: 20px;
		//left: 25%;
	}
	.p-footer {
		margin: 20px auto;
	}
	#Ad-area{
		border-top-style: none;
		width: 300px;
		margin: 10px auto;
		float: none;
	}
	
}
@media (max-width: 500px) {
	#bb-title-jobs, #bb-title-events {
		font-size: 1em;
	}
	
	.art-title{
		font-size: 1.1em;
	}
	.search-form{
		display: block;
		width: 90%;
	}
	.job-listings{
		width: 90%;
		margin: 0 auto;
		margin-top: 10px;
	}
	
	#bb-title-jobs{
		margin-left: 0;
	}
	#bb-title-events {
		margin-left: 15px;
	}
	
	#slider-wrapper {
		width: 100%;
	}
	.post-button{
		width: 20px;
	}
	#event-add{
		left: 222px;
		top: -22px;
	}
	#job-add {
		left: 80px;
    }
	#budget-calculator-app{
		width: 95%;
	}
	
	.in-item-budget {
		height: 18px;
	}
	.product-item{
		width: 70%;
	}
	.budget-item-desc{
		margin-left: 80px;
		font-size: 11px;
	}	
	
}
@media (max-width: 400px) {
	#close-button{
		margin: 2px auto;
	}
	#logInpage, #sign-up-page, #contact-us {
		width: 100%;
		margin: 0 auto;
		margin-top: -443px;
	}
	
	#slider-wrapper {
		width: 100%;
	}
	.sl-caption{
	font-size: 1em;
	
	}
	#log-link {
		margin-top: 5px;
	}
	
	
	#user-welcome {
		font-size: 10px;
		font-weight: 500;
	}
	#sign-out-butt {
		font-size: 12px;
		font-weight: 800;
	}
	.title-bar{
		margin: 0 auto;
	}
	#job-post {
		width: 100%;
		margin: 0 auto;
		margin-top: -74px;
	}
	
	#job-add, #event-add {
		padding: 0px 0px;
	}
	#event-post {
		width: 100%;
		margin: 0 auto;
		margin-top: -74px;
	}
	#w-logo {
		font-size: 0;
	}
	#log-link {
		margin-right: 3%;
	}
	#master-log, #master-signUp {		
		width: 90%;
		border-right: inherit;
		border-left: inherit;
		border-top: inherit;
		border-bottom: inherit;	
		background-color: inherit;
		margin: 50px auto;
	}
	#reset-log{
		width: 90%;
	}
	.i-search{
		padding: 5px 2px;
		font-size: 11px;
		height: 32px;
	}
	#in-city-zip{
		width: 105px;
	}
	
	#login-label{
		display: none;
		border-style: none;
		font-size: 1em;
		margin-left: 2px;
		
	}
	.text-in{
		background-color: rgb(220,220,220);
	}
	.footer-content {
		margin-top: 40px;
		left: 0;
	}
	.p-footer {
		margin-top: 20px;
		left: 0;
		font-size: 13px;
	}
	.footer-link{
		font-size: 13px;
	}
	
	.p-item-tit{
		font-size: 12px;
	}
	.in-item-budget{
		width: 35px;
		font-size: 12px;
	}
	.panel{
		width: 90%;
	}
	.accordion{
		font-size: 12px;
	}
	
}

@media (max-width: 299px){
#Ad-area{
		border-top-style: none;
		width: 90%;
		margin: 10px auto;
		float: none;
		overflow-x: scroll;
	}
}