* { margin: 0; padding: 0; outline: none; box-sizing: border-box; }
img {border:0;}
html {height:100%;}
body {height: auto !important; height: 100%; min-height: 100%; position: relative; background:#eaebef; font:16px 'Akrobat', 'Lato', Arial, Helvetica, sans-serif; color:#000;}
.container { max-width:1190px; min-width:320px; margin:0 auto; padding:0 10px; position:relative;}
ul {list-style:none;}
a {}


header, footer {background: #1D1C2B; height: 100px;}
.logo {position:absolute; left:10px; top:23px;}
nav {position: absolute; left: 160px; top: 50px;}
.htel {position: absolute; right: 10px; top: 42px;}
nav li {float: left; margin-right: 25px;}
nav li a {font-weight: 600; font-size: 20px; text-decoration: none; line-height: 24px; color: #fff;}
nav li a:hover {color: #907c64;}
.htel p {display: inline-block; font-weight: 600; font-size: 20px; line-height: 24px; color: #A98459;}
.htel p a {color: #A98459; text-decoration: none;}
.htel p a:hover {color: #fff;}
.tel {font-weight: bold; font-size: 30px; line-height: 36px; color: #fff; text-decoration: none; margin-left: 20px;}

.main-bg {background: url("../images/main-bg.jpg") no-repeat center; background-size: cover; min-height: 800px; position: relative; padding: 500px 0 0 0; margin-bottom: 80px; color: #fff;}
.main-bg .container {z-index: 2}
.main-bg:after {content: ''; display: block; background: linear-gradient(180deg, rgba(29, 28, 43, 0) 0%, rgba(29, 28, 43, 0.8) 76.56%); position: absolute; left: 0; right: 0; bottom: 0; height: 70%}
.main-bg h1 {font-weight: 300; font-size: 36px; line-height: 120%; margin-bottom: 5px;}
.main-bg p {font-size: 64px; line-height: 120%; text-transform: uppercase; margin-bottom: 20px; font-weight: bold;}
.button-1 {display: inline-block; text-decoration: none; color: #fff; background: #907454; border-radius: 5px; font-weight: 600; line-height: 46px; height: 46px; font-size: 20px; padding: 0 25px;}
.button-1:hover {opacity: .8;}

.about-wrap {background: #fff; display: flex; flex-direction: row-reverse; margin-bottom: 100px;}
.about-r {width: 508px;}
.about-l {flex: 1; padding: 70px;}
.about-r img {display: block; width: 100%; height: auto;}

.about-l h2 {font-weight: bold; font-size: 36px; line-height: 120%; text-transform: uppercase; color: #29222A; margin-bottom: 25px;}
.about-l p {font-weight: 500; font-size: 20px; line-height: 24px; margin-bottom: 30px;}

.container-in {max-width: 1000px; margin: 0 auto;}
.middle-txt {font-weight: 500; font-size: 24px; line-height: 29px; margin-bottom: 70px;}


.gallery-wrap {margin-bottom: 50px; background: #fff; padding: 10px; position: relative;}
.gallery-wrap .owl-nav {height:0; position:absolute; left:-70px; right:-70px; top:50%; margin-top:-22px;}
.gallery-wrap .owl-nav span {display:none;}
.gallery-wrap .owl-prev {background: url(../images/slider-arr.svg) no-repeat !important; background-size: cover; width:25px; height:45px; font-size:0; display:block; border:0; position:absolute; left:0px; transform:rotate(180deg);}
.gallery-wrap .owl-next {background:url(../images/slider-arr.svg) no-repeat !important; background-size: cover; width:25px; height:45px; position:absolute; top:0; right:0px; font-size:0; display:block; border:0;}
.gallery-wrap .owl-nav .disabled {opacity:.4; cursor: default !important}
.gallery-wrap .owl-dots {text-align:center; position: absolute; left: 0; right: 0; bottom: 20px;}
.gallery-wrap .owl-dot {width:15px; height:15px; border-radius:50%; background:#fff !important; display:inline-block; vertical-align:middle; margin:0 3px;}
.gallery-wrap .owl-dot.active {background:#907454 !important;}
.gallery-wrap .owl-dot span {display:none;}
.gallery-wrap .owl-carousel .owl-item img {width: 100% !important; height: auto !important;}

.flats-wrap {margin: 0 -2.5px 70px -2.5px; display: flex; justify-content: center; flex-wrap: wrap;}
.flat {padding: 0 2.5px 5px 2.5px; width: 50%; color: #29222A;}
.flat div {background: #fff; padding: 60px 20px; text-align: center; transition: background 0.2s ease-in-out; min-height: 100%}
.flat .button-2 {background: #FFF; border-radius: 5px; font-weight: 600; font-size: 20px; color: #A47B4D; display: none; text-decoration: none; height: 46px; padding: 0 25px; line-height: 46px; margin-top: 10px; }
.flat-txt-1 {font-weight: bold; font-size: 36px; line-height: 120%; text-transform: uppercase; color: #29222A; margin-bottom: 10px;}
.flat-txt-2 {font-weight: 500; font-size: 24px; line-height: 46px; color: #29222A; margin-bottom: 5px;}
.flat-txt-3 {font-weight: bold; font-size: 36px; line-height: 150%; color: #907454;}
.flat div:hover {background: linear-gradient(180deg, #BB8E5C 0%, #9F774A 100%);}
.flat div:hover .flat-txt-3 {color: #fff;}
.flat div:hover .flat-txt-2 {display: none;}
.flat div:hover .button-2 {display: inline-block;}
.flat div:hover .flat-txt-1 {margin-bottom: 5px;}

.icons {display: flex; flex-wrap: wrap; margin-bottom: 50px;}
.icons li {width: 20%; text-align: center; padding: 0 10px 50px 10px;}
.icons li span {display: flex; margin: 0 auto; width: 118px; height: 118px; border-radius: 50%; background: #fff; justify-content: center; align-items: center; margin-bottom: 15px;}
.icons li p {font-weight: 600; font-size: 18px; line-height: 22px; color: #545454;}

h3 {text-align: center; font-weight: bold; font-size: 36px; line-height: 120%; text-transform: uppercase; color: #29222A; margin-bottom: 40px;}

#map {height: 542px; border-bottom: 1px solid #fff;}


/*Clear & Animation*/
.clear {clear:both; line-height:0px; height:0px; overflow:hidden; font-size:0px; content:''; display:block;}
a, button {transition:all 0.2s ease-in-out;}

/*Responsive*/
@media (max-width: 1210px) {
	.container {max-width:1000px;}
	.icons {justify-content: center;}
	.icons li {width: 33.33%;}
	.about-l {padding: 40px;}
}
@media (max-width: 999px) {
	.container {max-width:768px;}
	.tel {margin: 0}
	.htel p {display: block;}
	.htel {text-align: right; top: 21px;}
	.main-bg p {font-size: 50px;}
	.main-bg h1 {font-size: 32px;}
	.about-wrap {display: block;}
	.about-r { width: 100%; display: flex;}
	.about-r img {width: 50%;}
	.flat div:hover .flat-txt-1 {margin-bottom: inherit}
	.flat div:hover {background: #fff;}
	.flat div:hover .button-2, .flat div .button-2 {background: #907454; color: #fff; display: inline-block;}
	.flat div:hover .flat-txt-2 {display: block;}
	.flat div:hover .flat-txt-3 {color: #907454;}
	.flat div:hover .flat-txt-1 {margin-bottom: 10px;}
}

@media (max-width: 767px) {
	#map {height: 320px;}
	nav {display: none;}
	.htel {top: 13px;}
	.main-bg {min-height: 1px; padding: 200px 0 60px 0; text-align: center;}
	.icons li span {width: 80px; height: 80px;}
	.icons li span img {max-width: 40px; max-height: 40px; width: auto; height: auto;}
	.icons li p {font-size: 16px; line-height: 20px;}
	.main-bg {margin-bottom: 50px;}
	.about-l {padding: 20px;}
	.about-wrap, .middle-txt {margin-bottom: 50px;}
	.icons {margin-bottom: 20px;}
	.middle-txt {font-size: 18px; line-height: 24px;}
	h3 {margin-bottom: 30px; font-size: 26px;}
}

@media (max-width: 567px) {
	.main-bg { padding: 50px 0;}
	.main-bg:after {height: 100%;}
	.main-bg p {font-size: 40px;}
	.icons li {width: 50%; padding-bottom: 30px;}
	.flat {width: 100%;}
	
}
	
@media (max-width: 480px) {
	

}