/* <!--last edit by R, as of: July 20-->*/


*{
	/*font-family:"Arial";/**/
	font-family: 'Titillium Web', sans-serif;
}

@media(min-width:500px){ /*change px size to appropriate break point*/

/*HEADER*/

li{
	list-style-type:none;
}

ul{
	/*border:1px solid black;*/
	text-align:center;
}

.row1{
	display:flex;
	margin:0;
	padding:0;
}

.row1 li{
	height:3em;
	border:1px solid black;
}

.logoContainer{
	width:20%;
}

.place{
	width:60%;
}

.changeLoc{
	width:20%;
}

.logo{
	max-width:100%; /*keeps image contained*/
	max-height:100%;
	width:auto; /*keeps aspect ratio of logo*/
	height:auto;
}

.row2{
	display:flex;
	margin:0;
	padding:0;

}

.row2 li {
	height:3em;
	border:1px solid black;
}

.post{
	width:20%;
}

.search{
	width:80%;
}

.input{
	border:1px solid black;
	width:80%;
	height:2em;
	margin-top:0.5em;
}


.pageTitle{
	display:flex;
	border: 1px solid black;
	margin: 0px;
}


/*BODY COONTAINER*/
.bodyContainer{
	/*border:1px black solid;*/
	display:flex;
	
}

.bodyContainer ul{
	padding:0;
	margin:0;
}


/*SIDE NAVIGATION BAR*/
nav{
	width:20%;
	/*height: 35em;*/
	border:1px black solid;

}

nav ul  li{
	padding-top:1em;
}

nav .categories{
	border-bottom:1px black solid;
}

nav .help{
	padding-bottom:1em;
}

.categories li{
	
}

/*HOME PAGE*/
.mainButton{
	padding:10%;
	margin:5%;
	border:1px black solid;
}


/*CONTENT*/   

#container{
	width:80%;
}

#container ul{
	width:100%;
}

		/*BUTTON DISPLAY*/
.changeView {
	display:flex;
}

.changeView li{
	display:inline;
	margin-left:1em;
}
	
	
		/*LIST VIEW*/
.listView .item{
	/*border:1px black solid;*/
	width:100%;
	display:flex;
	flex-wrap:wrap;
}

.listView .detailsContainer{
	display:flex;
	flex-wrap:wrap;
	margin-top:2em;
}

.listView .img{
	display:none;
	border:1px black solid;
}

.listView .title{
	border:1px black solid;
	width:90%;
	margin:0;
	padding-top:1em;
	padding-bottom:.5em;
	box-sizing:border-box;
}

.listView .location{
	border:1px black solid;
	width:60%;
	margin:0;
	padding-top:.5em;
	padding-bottom:.5em;
	box-sizing:border-box;
}

.listView .price{
	border:1px black solid;
	width:30%;
	margin:0;
	padding-top:.5em;
	box-sizing:border-box;
}

		/*THUMBNAIL VIEW*/ /**need to change class of content container to activate**/	
.thumbView .item{
	/*border:1px black solid;*/
	width:100%;
	display:flex;
	margin-top:2em;
}

.thumbView .item ul {
	display:flex;
}

.thumbView .imgContainer{
	/*border:1px black solid;*/
	width:20%;
}

.thumbView .detailsContainer{
	/*border:1px black solid; /**/
	width:80%;
	display:flex; /*makes img and details containers side-by-side */
	flex-wrap:wrap; /*moves location and price to second row*/
}

.thumbView .img{
	border:1px black solid;
	max-width:100%;
	max-height:100%;
	width:auto;
	height:auto;
}

.thumbView .title{
	border:1px black solid;
	width:90%;
	padding:0;
	margin:0;
	box-sizing:border-box;
}

.thumbView .location{
	border:1px black solid;
	width:50%;
	padding:0;
	margin:0;
	box-sizing:border-box;
}

.thumbView .price{
	border:1px black solid;
	width:40%;
	padding:0;
	margin:0;
	box-sizing:border-box;
}

		/*GALLERY VIEW*/
.galleryView .item{
	border:1px solid black;
	display:flex;
	width:40%;
	margin-top:2em;
	margin-right:2em;
	
}

.galleryView ul {
	display:flex;
	flex-wrap:wrap;
}

.galleryView .imgContainer{
	width:100%;
}

.galleryView .img {
	max-width:100%;
	max-height:100%;
	width:auto;
	height:auto;
}

.galleryView .detailsContainer{
	border:1px black solid; /**/
	width:100%;
	display:flex; /*makes img and details containers side-by-side */
	flex-wrap:wrap; /*moves location and price to second row*/
}

.galleryView .title{
	border-bottom:1px black solid;
	width:100%;
	padding:0;
	margin:0;
	box-sizing:border-box;
}

.galleryView .location{
	width:60%;
	padding:0;
	margin:0;
	box-sizing:border-box;
}

.galleryView .price{
	border-left:1px black solid;
	width:40%;
	padding:0;
	margin:0;
	box-sizing:border-box;
}

/*ITEM POST*/
.itemPost{
	display:flex;
}

/*FOOTER*/
footer{
	/*border:1px black solid;/**/
	text-align:center;
	margin-top:2em;
}

} /*closing tag for media screen width break point*/

@media (max-width:499px) {
.header{

}
 li{
	list-style-type:none;
}

.row1{
	display:flex;
	width:100%;
	padding:0;
	margin:0;
}
.row1 li{
	border:1px solid black;
}
.logoContainer{
	width:20%;
	text-align:center;
}

.place{
	width:60%;
}

.changeLoc{
	width:20%;
}
.logo{
	max-width:30%; /*keeps image contained*/
	max-height:20%;
	width:auto; /*keeps aspect ratio of logo*/
	height:auto;
}
.row2{
	display:flex;
	width:100%;
	padding:0;
	margin:0;
}
.row2 li {
	border:1px solid black;
}

.post{
	width:30%;
}

.search{
	width:70%;
}

.input{
	border:1px solid black;
	width:100%;
	height:2em;
	margin-top:0.5em;
}

.pageTitle{
	display:flex;
	border: 1px solid black;
	margin: 0px;
}

/*BODY COONTAINER*/
.bodyContainer{
	/*border:1px black solid;*/
	display:flex;
	
}

.bodyContainer ul{
	padding:0;
	margin:0;
}

/*SIDE NAVIGATION BAR*/
nav{
	width:20%;
	/*height: 35em;*/
	border:1px black solid;

}

nav ul  li{
	padding-top:1em;
}

nav .categories{
	border-bottom:1px black solid;
}

nav .help{
	padding-bottom:1em;
}

.categories li{
	
}

/*HOME PAGE*/
.mainButton{
	display:flex-row;
	width:90%;
}
.mainButton h2{
	border:1px black solid;	
	text-align:center;
	padding:5% 5%;
}

}