/*id = # class = .*/

/*---------------------nav/all pages style ---------------------*/

body {
	margin: 0px;
}

html {
	font-family: 'Nunito Sans', sans-serif;
	/*background-color: silver;*/
}

button {
	background-color: white;
	border-width: 0px;
}

.active.fa {
	font-size: 50px;
	color: #98999b;
}
.active.fa:hover{
	color: black;
	transition: 0.1s;
}

.active.title{
	padding-top: 0px;
	margin-top: 0px;
}

.active.nav-box {
	padding-top: 5%;
}

.fa:hover {
	color: #98999b;
	transition: 0.1s;
}

.fa {
	position: absolute;
	top: 20%;
	/*transform: translateY(-80%);*/
	right: 0;
	padding-right: 4%;
}

.nav-box * {
	display: none;
}

.active.nav-box * {
	display: block;
}


li {
	list-style: none;
}

/*.nav-box {
	display: block;
	float: right;
	padding-top: 40px;
	background-color: silver;
	max-width: 100%;
	}
	}*/

	/*.nav-box {
		padding-top: 3vw;
		max-width:100%;
		height: 5vw;
	}
	*/
	nav {
		font-size: 30px;
		display: block;
		background-color: silver;
		width: 100%;
		position: absolute;
		/*padding-top: 20%*/
		/*top: 0; right: 0; bottom: 0; left: 0;*/
		/*padding-top: 18vw;*/
	}

	.title {
		font-size: 30px;
		padding-left: 3vw;
		font-weight: 900;
		display: inline-block;
		margin: 0px;
		padding-top: 10px;
		/*padding-top: 5vw;*/
		/*padding-bottom: 2vw;*/
		/*top: -20%;*/
	}

	a {
		text-decoration: none;
		color: black;
	}

	nav li {
		/*padding-top: 30px;*/
		padding-right: 30px; 
		padding-bottom: 15px;
	} 

	.header {
		background-color: #f4c242;
		padding:0px;
		margin: 0px;
		margin-top: 0px;
		display: inline-block;
		position: fixed;
		width: 100%;
		height: 20vw;
	}

	.main:after {
		clear: both;
	}

	.main {
		text-align: left;
		padding-top: 0px;
		margin:0px;
		margin-left: 3vw;
		margin-right: 3vw;
		overflow: hidden;
	}

	.body-title {
		font-size: 40px;
		padding-top: 20vw;
		margin-bottom: 0px;
	}

	.submit-button {
		/*margin-left: 10px;
		*/

		/*color: black;
		font-size: 25px;
		padding:10px;
		padding-right: 15px;
		background-color: silver;
		width: 75px;
		margin-top: 5%;*/
		/*margin-top: 50vw;
		/*position: absolute;*/
	}


	/*-----------------------home page-----------------------*/

	.main-question {
		font-size: 60px;
		padding-top: 40px;
	}

	.main-question a {
		color: silver;
	}

	/*-----------------------report page -------------------*/

	.dropdown-input {
		background-color: silver;
		font-size: 3vw;
	}

	.upload {
		height: 100px;
		width: 100%;
		background-color: silver;
		display: inline-block;
		margin-bottom: 50px;

	}

	.upload-text {
		font-size: 25px;
		display: inline;
		height: 100px;
		width: 100%;
		padding-right: 50px;
		/*padding-left: -100px;*/
	}

	.report-form {
		margin: 0 auto;
		width: 400px;
		height: 700px;
	}

	/*-----------------------------listings page ---------------------------*/


/*	.search {
		background-color: silver;
	}

	.search h1 {
		margin-left: 2vw;
		}*/

	/*.listing-search {
		padding-left: 8vw;
		}*/

		input[type=text] {
			width: 180px;
    		margin-right: 5px;
		}

		.main form  {
			/*width: 180px;
    		margin-right: 5px;*/
		}

		/*.listings-main {
			padding-top: 100px;
			margin-left: 3vw;
		}*/

		.gray-square {
			width: 250px;
			height: 250px;
			background-color: silver;
		}

		.listing {
			margin: auto;
			margin-left: 4vw;
			padding-top: 2vw;
			left right: 0px;
			display: inline-block;
			padding-left: 5vw;
			/*width: 250px;*/
		}

		.listing a {
			font-size: 20px;
		}

		.listing li {
			text-align: center;
			padding-top: 5px;
		}

		.listing-submit {
			margin-top: 10px;
		}

		input {
			border: 1px solid gray;
			font-family: 'Nunito Sans', sans-serif;
			font-size: 20px;
		}

		form{
			font-size: 20px;
		}

		.listing-search * {
			display: none;
		}

		.active.listing-search * {
			display: inline-block;
		}

		.listings-box {
			margin-left: 0;
			margin-right: 0;
			/*width: 300px;*/
		}
		/*--------------------------------item page-------------------------------*/

		.listing form {
			padding-left: 0px;
			margin-left: 0px;
		}

		/*--------------------------------advanced search-------------------------*/

		.active.search-results * {
			display: inline-block;
		}

		.search-results * {
			display: none;
		}

		.search {
			font-size: 25px;
		}

		.search-results ul {
			padding-left: 0px;
		}

		.search-label {
			font-size: 15px;
			width: 90%;
			/*padding-left: 4%;*/
		}
/*	.search-input a {
		margin-top: 5px;
		}*/

		.search-input {
			margin-top: 7vw;
		}

		.dropdown-input-text {
			font-size: 25px;
		}

		.search-input div{
			margin-left: 6vw;
			margin-top: 10vw;
			margin-bottom: 10vw;
		}

		.search-label {
			padding-top: 15px;
		}


		/*--------------------------------media querries----------------------------------*/

		@media only screen and (max-width: 570px) {
			form {
				max-width: 400px;
			}

			.search-input form {
				max-width: 275px;
			}
		}

		@media only screen and (max-width: 450px) {
			.submit-button {
				margin-top: 20px;
				/*margin-left: 30%;*/
			}
		}


		@media only screen and (min-width: 400px) {
			.search-results li {
				width: 260px;
			}
		}

		@media only screen and (min-width: 500px) {
			.header {
				height: 13%;
			}

			.body-title {
				padding-top:7vw;
			}

			.search-input {
				margin-top: 40px;
			}
			.maing{
				padding-top: 0px;
			}
			.active.nav-box {
				padding-top: 3%;
			}
		}

		@media only screen and (min-width: 500px) and (max-width: 1200px) {
			.body-title {
				padding-top: 12vw;
			}
			.header{
				height: 12%;
			}
			.active.nav-box {
				padding-top: 3%;
			}

		}

		@media only screen and (min-width: 1200px) and (max-width: 1750px){
			.active.nav-box {
				padding-top: 3%;
			}
		}

		@media only screen and (min-width: 1750px) {
			.active.nav-box {
				padding-top: 2%;
			}
			/*.submit-button {
				margin: 0px;
				}*/
			}


		/*@media only screen and (min-width: 1787px) {
			.active.nav-box {
				padding-top: 1.6vw;
			}
			}*/