*{
margin: 0;
padding: 0;
}

.container{
}

.header{
	width: 100%;
	height: 250px;
	background: #D0D3D4;
	
}

.mainimg img{
	width: 1366px;
	height: 250px;
	margin: 0 auto;
	float: right;
	display: block;

}

.nav{
	width: 100%;
	height: 50px;
	margin-top: 10px;
    display: inline-flex;
	background-color: #008ecc;
	align-items: center;
	text-align: center;	
}

.nav-contain{
	display: inline-flex;
	margin: 0 auto;
}

.select-bar{
	display: inline-flex;
}


.select{
	background-color: #008ecc;
	width: 220px;
	height: 30px;
	margin-right: 10px;
	border-radius: 5px;
	color: white;
	font-size: 14px;
	font-family: Helvetica;
	cursor: pointer;
	text-align: center;
	border-style: groove;
	border-width: 2px;
	border-color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 2s;
}

.select:hover{
background-color: #00C1C4;
}

#logo{
	padding-right: 5px;
}

.search{
	width: 330px;
	height: 30px;
	border-radius: 15px;
	text-align: center;
	background-color: white;
}

.nav input{
	width: 300px;
	height: 30px;
	border-radius: 15px;
	text-align: center;
	outline: none;
	border: none;
	font-size: 15px;
}


.nav button{
	background-color: white;
	padding-right: 5px;
	font-size: 15px;
	color: gray;
	border: none;
	outline: none;
}


.nav button:hover{
	color: #00C1C4;
}

.main{
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: rgba(0,0,0,0.8);
	animation-name: popup;
	animation-duration: 2s;
}


.data{
	width: 100%;
	height: 100%;
	margin-top: 20px;
	text-align: center;
}

.adds{
	width: 250px;
	height: 375px;
	background-color: white;
	margin: 5px;
	display: inline-block;
	box-shadow: 0 0 5px;
	text-align: center;
	transition: 1s;
	cursor: pointer;
	overflow: hidden;		
}

.click{
	width: 250px;
	height: 350px;
}


#post{
	cursor: pointer;
}

.adds:hover{
	transform: scale(1.1);
	cursor: pointer;
}

.imgs{
	width: 240px;
	height: 240px;
	margin: 5px;	
}

.adds img{
   width:100%; 
   height:100%; 
   object-fit:cover;   
}

.adds li{
	padding-bottom: 5px;
	list-style: none;
	font-family: Helvetica;
	font-size: 15px;	
}



#id {
	display: none;
}


#title{
	padding-top: 3px;
	height: 25px;
	background-color: #008ecc;
	color: white;
}

#ad-catogory{
	display: inline-flex;
	color: #008ecc;
}

#ad-city{
	display: inline-flex;
	padding-left: 5px;
	color: #00A24B;
}

#name{
	color: #626567;
	height: 20px;
}

#number{
	color: #1FA3EF;
	padding-left: 5px;
}

#price{
	font-size: 17px;

}
#adds-logo{
	padding: 0 5px;
}

/*pagination*/

.pagination{
	text-align:center;
	margin-top: 30px
}

.pagination a{
	margin-right: 5px;
	list-style: none;
	text-decoration: none;
	padding: 5px 10px;
	background-color: #34495E;
	color: white;
	font-size: 15px;
	border-radius: 5px;

}

.pagination a:hover{
background-color: #5D6D7E;

}

.pagi{
	margin-top: 20px;

}

.pagi a{
	color: white;
	background: #008ecc;
	margin-left: 5px;
	display: inline-block;
	padding: 7px;
	text-decoration: none;
	border-radius: 3px;
}

.pagi a:hover{
	background: #00C1C4
}

.pagi p{
	color: #6C3483;
}

.data{
	margin-bottom: 50px;
}


@keyframes popup{
	from{opacity: 0}
	to{opacity: 1}
}



/*Media queries*/

@media screen and (min-width: 640px) and (max-width: 820px) {

.nav p{
	font-size: 13px;
}

.search{
	width: 270px;		
}

.nav input{
	width: 240px;
}

.select {
	width: 150px;
}

}

@media screen and (min-width: 360px) and (max-width: 639px) {
	
.nav{
	height: 100px;
}

.nav-contain{
	display: block;
}

.nav p,input,button{
	font-size: 13px;
}

.search{
	width: 315px;
	margin-top: 5px;
}

.nav input{
	width: 280px;
}

.select{
	width: 150px;
}

	/*Popup*/

.popup, .popup2{
	margin-left: 1%;
}

.popup-container, .popup-container2 {
	width: 350px;
 }

 .popup-container h4, .popup-container2 h4{
	font-size: 15px;
}

.popup-container span, .popup-container2 span{
	font-size: 25px;
}

.side1 p, .side2 a{
	font-size: 12px;
}

.side1{
	width: 150px;
}

.side1 i{
	margin-left: 5px;
}


.side2{
	width: 200px;
}

.side2-data h5{
	font-size: 12px;
}

.side2-data i {
	margin-right: 5px;
}

.side2-data a{
	padding-left: 10px;
}

}



/*width 1024*/
@media screen and (max-width: 359px) {

.container{
	width: 360px;
}

	.nav{
	height: 100px;
}

.nav-contain{
	display: block;
}

.nav p,input,button{
	font-size: 13px;
}

.search{
	width: 315px;
	margin-top: 5px;
}

.nav input{
	width: 280px;
}

.select{
	width: 150px;
}

	/*Popup*/

.popup, .popup2{
	margin-left: 1%;
}

.popup-container, .popup-container2 {
	width: 350px;
 }

 .popup-container h4, .popup-container2 h4{
	font-size: 15px;
}

.popup-container span, .popup-container2 span{
	font-size: 25px;
}

.side1 p, .side2 a{
	font-size: 12px;
}

.side1{
	width: 150px;
}

.side1 i{
	margin-left: 5px;
}


.side2{
	width: 200px;
}

.side2-data h5{
	font-size: 12px;
}

.side2-data i {
	margin-right: 5px;
}

.side2-data a{
	padding-left: 10px;
}


}