@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,300);

*{margin:0;padding:0;border:0;outline:0;font-size:14px;vertical-align:baseline;background:transparent;font-family:'Fira Sans', Arial, Helvetica, sans-serif;font-weight:400; color:#524949;box-sizing:border-box; }
html	{background-color:#c6af95;}
html, body	{height:100%;}

ul, ol	{list-style:none;}

h2, h2 *	{font-size:18px;line-height:22px;margin-bottom:30px;}
p	{margin-bottom:20px;line-height:20px;}
p:last-child {margin-bottom: 0;}

.wrapper	{width:900px;margin:0 auto;}
.clearfix	{clear:both;display:block;height:0;}

.db-content *	{color:#fff;}
.db-content h2, .db-content h2 *	{color:#8c6e4a;}
.db-content h2	{background:url(../images/arrow-right.png) no-repeat 0 center;padding-left:20px;}
.db-content li	{background: url(../images/bullet.png) no-repeat 0 8px;position: relative;padding-left: 10px;}

.swiper-button-prev	{background:url(../images/gallery-arrows.png) no-repeat 0 0;width:33px !important;height:36px;border:none;left:55px !important;}
.swiper-button-next	{background:url(../images/gallery-arrows.png) no-repeat -33px 0;width:33px !important;height:36px;border:none;right:55px !important;}

.two-cols	{-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px;}

header	{position:fixed;width:100%;height:100px;z-index:60;padding-top:30px;}
header .wrapper	{}
header nav	{background:url(../images/header.png) no-repeat center center;height:57px;}
header nav ul	{list-style:none;padding:0 112px;display: flex;align-items: center; justify-content: space-between;}
header nav li	{/*background-color: rgba(200,0,0,0.3);*/}
header nav li a	{color:#c6af95;font-size:15px;line-height:18px;text-decoration:none;border-bottom:solid 1px transparent;display: block;}
header nav li a:hover	{border-color:#8c6e4a;transition: all 0.3s ease;}
header nav li a img	{/*color:#fff;font-size:15px;height:52px;position:relative;*/}
header nav li.home {margin-top: 3px;}
header nav li.home a	{border:none;}
header nav li.active a	{color:#8c6e4a;border-color:#8c6e4a;}


/*##############################################################
						MENU RESPONSIVO
###############################################################*/
#mobile-menu-switch {background: url(../images/toogle-menu-mobile.png) no-repeat center center; width: 46px; height:52px; position: fixed; top:12px; right: 10px;}
#mobile-menu {background:#8c6e4a; position: fixed; width: 250px; right:-250px; top: 0; height: 100%; z-index: 61;transition: all 0.3s;}
#mobile-menu li.home {display: none;}
#mobile-menu li a {display: block; padding: 20px; font-size: 20px; border-bottom: solid 1px #a38158; font-weight: 300; text-align: center; color:#c6af95; text-decoration: none;}
#mobile-menu.active {right: 0;}

#general-container {height: 100%;}
#general-container .swiper-slide {height: 100%;}

#banner	{background:#fff url(../images/banner.jpg) no-repeat 0 0;background-size:cover;height:100%;width:100%;position:relative;}
#banner .mask	{background:url(../images/banner-mask.png) repeat 0 0;height:100%;width:100%;position:absolute;z-index:2;}
#banner .container {display: flex;align-items: center;justify-content: center;text-align: center;height: 100%;position: relative;z-index: 3;}
#banner h1	{margin-bottom:60px;}
#banner ul	{display: flex;justify-content: center;margin-bottom:30px;}
#banner ul li	{display:inline-block;margin:0 10px;}
#banner ul a	{background:url(../images/sprite-35.png) no-repeat 0 0;display:block;width:35px;height:30px;opacity:0.7;filter:alpha(opacity=70);transition: opacity 0.3s;}
#banner ul a:hover	{opacity:1;filter:alpha(opacity=100);}
#banner ul a.btn-contact	{background-position:-35px 0;}
#banner ul a.btn-location	{background-position:-70px 0;}
#banner .arrow	{background:url(../images/sprite-35.png) no-repeat -105px 0;display:inline-block;width:35px;height:30px;}

#about {}
#about .wrapper,
#services .wrapper,
#location .wrapper,
#contacts .wrapper	{display: flex;align-items: center;justify-content: space-between;height: 100%;}
#about .wrapper .left,
#services .wrapper .left,
#contacts .wrapper .left	{width: 360px;}
#about .wrapper .right,
#services .wrapper .right,
#contacts .wrapper .right	{width: 400px;}

#about .wrapper .left img,
#contacts .wrapper .left img {width: 100%;}


#services .right ul	{-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px;}
#services .mosaic ul	{display: flex;flex-wrap: wrap;}
#services .mosaic li	{background-position: center center;background-repeat: no-repeat;background-size: cover;width:120px;height:120px; overflow: hidden;border: solid 1px transparent;}

#gallery .swiper-container {height: 100%;}
#gallery .swiper-slide	{background-repeat:no-repeat;background-position:center center;background-size:cover;}

#location-container	{position:relative;height: 400px;width: 100%;}
#location-content	{background-color:#8c6e4a;background-color:rgba(151,123,88,0.7);position:absolute;top:25px;right:25px;padding:10px;z-index:8;}
#location-content *	{color:#fff;}
#location-content h2	{margin-bottom:10px;}
#location-content p	{margin-bottom:0;}
#location-gmaps	{background-color:#8c6e4a;height:100%;position:relative;z-index:7;}

#contacts .right .box	{margin-bottom:60px;}

footer	{position:absolute;bottom:0;left:0;width:100%;}
footer .wrapper	{background-color:#fff;padding:25px 0;position:relative;}
footer .content {width: 100%;text-align: center;}
footer *	{font-size:13px;line-height:13px;}
footer a	{text-decoration:none;}
footer a:hover	{text-decoration:underline;}
footer .arrow-container	{position:absolute;top:-50px;text-align:center;width:100%;}
footer .arrow	{background:url(../images/arrow-up.png) no-repeat 0 0;display:inline-block;width:35px;height:30px;}

@media screen and (max-width: 1024px){
	.wrapper	{ width:auto; padding-left:40px; padding-right:40px; margin:0; }
	body	{background:none; min-width:320px; width:100%;}
	header .wrapper {width: 740px; margin: 0 auto; padding: 0;}
	header nav {background-size: 100%;}
	header nav ul {padding: 0 82px;}
	header nav li a {font-size: 13px; line-height: 12px;}
	
	#about .wrapper .left, #services .wrapper .left, #contacts .wrapper .left {width: 45%;}
	#about .wrapper .right, #services .wrapper .right, #contacts .wrapper .right {width: 45%;}
	
	#services .mosaic li {width: 33%;}

	
}

@media screen and (max-width: 768px){
	#mobile-menu-switch {display: block!important; }
	#mobile-menu{display: block !important;}
	
	header .wrapper {width: auto;}
	header nav {background:none;}
	header nav ul {padding: 0 0 0 40px;}
	header nav li.home {display: block;}
	header nav li {display: none;}
	#services .right ul {-webkit-column-count: 1; -moz-column-count: 1; column-count: 1; -webkit-column-gap: 0px; -moz-column-gap: 0px; column-gap: 0px;}
}
@media screen and (max-width: 600px){
	* {font-size: 11px;}
	p {line-height: 14px; margin-bottom: 0;}
	h2, h2 * {margin-bottom: 5px;}
	
	header {padding-top: 10px;}
	header nav ul {padding: 0 0 0 10px;}
	
	#banner {background-position: center center;}
	.two-cols {-webkit-column-count: 1; -moz-column-count: 1; column-count: 1; -webkit-column-gap: 0px; -moz-column-gap: 0px; column-gap: 0px;}
	
	#about .wrapper, #services .wrapper, #location .wrapper, #contacts .wrapper {padding: 90px 10px 10px 10px; justify-content:flex-start;}
	
	
	#services .wrapper {flex-direction: column;}
	#services .wrapper .left, #services .wrapper .right {width: 100%;}
	#services .wrapper .left {margin-bottom: 20px;}
	
	#services .mosaic li {height: 50px;}
	#services .mosaic li:nth-child(7),#services .mosaic li:nth-child(8),#services .mosaic li:nth-child(9) {display: none;}
	#services .wrapper .right.db-content li {position: relative; padding-left: 10px; display: inline-block; padding: 2px 6px; background: #8c6e4a ;margin: 2px 0; font-size: 10px; border-radius: 20px;}
	
	#location-container {height:300px;}
	
	#contacts .wrapper {flex-direction: column;}
	#contacts .wrapper .left {width: 100%; height: 200px; overflow: hidden; margin-bottom: 20px;}
	#contacts .wrapper .right {width:100%; display: flex; justify-content: space-between;}
	#contacts .right .box {margin-bottom: 30px;}
	
	footer .arrow {display: none;}
	footer .wrapper {padding: 20px !important;}
	footer .content, footer .content * {font-size: 10px;}
}
@media screen and (max-width: 480px){
	
}