@font-face {
  font-family: "adamwarrenpro";
  src: url('../font/adamwarrenpro.ttf');
}

@font-face {
  font-family: "Roboto-C-Light";
  src: url('../font/RobotoCondensed-Light.ttf');
}

@font-face {
  font-family: "Roboto-C-Bold";
  src: url('../font/RobotoCondensed-Bold.ttf');
}

.mobile-container {
  max-width: 480px;
  margin: auto;
  background-color: #555;
  height: 500px;
  color: white;
  border-radius: 10px;
}

.topnav {
  overflow: hidden;
  background-color: transparent;
  position: relative;
  display: none;
}

.topnav #myLinks {
	display: none;
    background: #63513E;
}

.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

.topnav a.icon {
  background: #63513E;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10000;
}

.topnav a:hover {
  background-color: #B9C563;
  color: #fff;
}

.active {
	visibility: hidden;
  background-color: #04AA6D;
  color: white;
}

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
	.top-bar{
		margin-bottom: 0px;
	}
	
	.topnav{
		display: block;
	}
	
	.topnav img{
  		display: block;
		margin-left: auto;
		margin-right: auto;
	  	width: 100px;
	  	margin-top: -50px;
  	}
	
	.header-nav{
		display: none;
	}
	
	.discounted-offer-box{
		max-width: 33%;
		max-height: 300px;
	}
	
	.discounted-box .box-content .discounted-offer-box .discounted-offer-text {
		padding: 60px 15px 0 15px;
		height: calc(100% - 110px);
	}
	
	.type-apartment-boxs .box-content .box-row {
		flex-wrap: wrap;
		margin-top: 10px;	
	}
	
	.type-apartment-boxs .box-content .box-row .type-apartment-box{
		margin-bottom: 15px;
	}
	
	.type-apartment-boxs .box-content .box-row .more-info-btn {
		margin-top: 0px;
		right: -7px;
		top:0;	
		width: 100%;
	}
	
	.home-for-sale-box {
		display: block;	
	}
	
	.home-for-sale-box .box{
		width: calc(100% - 0px); 
		margin-left: 0px;
	}
	
	.home-for-sale-box .box .box-bg {
		margin: -60px -150px;
	}

	.r18-box{
		width: 100%;
		margin: 0 -40px;
	}
	
	.r18-properties-boxs {
		display: block;
	}
	
	.sale-boxs{
		display: block;
	}
	
	.location-points{
		display: flex;
		flex-wrap: wrap;
	}
	
	.location-point{
		margin-top: 10px;
	}
	
	.footer{
		padding: 10px 20px;
	}
}

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
	.top-bar{
		margin-bottom: 0px;
	}
  	.topnav {
		display:block;
  	}
  	
  	.topnav img{
  		display: block;
		margin-left: auto;
		margin-right: auto;
	  	width: 80px;
	  	margin-top: -50px;
  	}
  	
  	.top-bar-nav{
	  	display: block;
	  	text-align: center;
  	}
  	
  	.top-bar-nav .phone::after{
		content: "";
		margin-right: -20px;
	}
 	
 	.header-nav{
		display: none;
	}
	
	.content .open-banner .banner-msg{
		width: 450px;
		font-size: 18px;
		font-family: "Roboto-C-Light";
		font-weight: 600;
		text-transform: uppercase;
		border-left: 7px solid #B9C563;
		color: #63513E;
		background: rgba(255,255,255,0.7);
		position: absolute;
		margin-right: -120px;
		margin-top: 90px;
	}

	.content .open-banner .banner-msg p{
		line-height: 20px;
		letter-spacing: 3px;
		margin-top: 20px;
		margin-bottom: 15px;
	}
	
	.discounted-box .box-content {
		display: block;	
	}
	
	.discounted-offer-box{
		margin-bottom: 10px;
		max-width: 100%;
		max-height: 300px;
	}
	
	.discounted-box .box-content .discounted-offer-box {
		width: 100%;	
	}
	
	.discounted-box .box-content:not(:last-child) {
		margin-left: -22px;
	}
	
	.more-text{
		padding-bottom: 0px;
	}
	
	.type-apartment-boxs .box-content .box-row{
		margin-left: -25px;
	}
	
	.type-apartment-boxs .box-content .box-row .more-info-btn {
		margin-top: 20px;	
		width: 100%;
	}
	
	.r18-box{
		width: calc(100% - 30px);
		margin: 0 -40px;
	}
	
	.r18-box .image-boxs{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.location-points{
		display: flex;
		flex-wrap: wrap;
	}
	
	.location-point{
		margin-top: 10px;
	}
	
	.sale-boxs{
		display: flex;
		flex-wrap: wrap;
	}
	
	.sale-box{
		margin-top: 10px;
	}
	
	.footer{
		padding: 10px 20px;
	}
	
	.footer .norm-footer{
		display: none;
	}
	
	.footer .mobile-footer{
		display: block;
		text-align: center;
		margin-bottom: 30px;
	}
	
	.footer .mobile-footer img{
		width: 120px;
		margin-left: auto;
		margin-right: auto;
	}
	
	.footer .mobile-footer a{
		margin-bottom: 20px;
	}
}