html, body {
	color: #8b8b8e;
	font-size: 14px;
	font-family: 'Bitter', serif;
	font-weight: 400;
	font-style: normal;
	line-height: 20px;
    max-width: 100%;
    overflow-x: hidden;
	scroll-behavior: smooth;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

a {
	color: #8b8b8e;
	line-height:normal;
}

a:hover {
	color:#8b8b8e;
}
a:focus {
	color:#8b8b8e;
}

a:link, a:visited, a:hover, a:active, a:focus{
	text-decoration: none;
}

#profile_page p {
	font-size:15px;
	margin-bottom:20px;	
}

#contact_page p {
	font-size:15px;
	margin-bottom:20px;	
}
.q-card {
  width: 424px;
  height: 240px;
}
.flip-card {
  background-color: transparent;
  width: 424px;
  height: 240px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #f5f4f4;
  transform: rotateY(180deg);
}

.qr-image{
	max-width:200px;
	margin:0 auto;
}
.col-card{
	min-height:250px;
}

h2{
	font-size:18px;
}
.header{
	background-color:transparent;
}
.header .top{
	margin-top:70px;
	margin-bottom:70px;
}

#logo {
	margin: 20px 0;
	padding:20px;
	position:relative;
	z-index:13;
}
.lang{
	text-align:right;
	padding-right:0;	
}
#lang{
	margin-top:35px;	
}
.language a{
	margin-left:15px;
}
.curent-lang{
	border-bottom:1px solid #CCC;
}

.cursor-zoom-in{cursor: zoom-in;}

.left-menu{
	padding-left:20px;
	
}
#lm{
	cursor:pointer;
}
#lmenu{
	padding-top:15px;
	font-size:15px;
}
#lmenu ul{
	padding-left:4px;
}

#lmenu ul li{
	list-style:none;
	margin-bottom:10px;
}
#lmenu ul li a:hover{
	color:#008c96
}

.current, .current_filter{
	color:#008c96
}

#ac_menu{
	display: inline-block;
	padding-left: 0;
    list-style: none;
}
#ac_menu>li{
	display:inline-block;
	padding-left:15px;
	/*padding-right:5px*/
}
#ac_menu>li:first-child{
	padding-left:0
}

.q_menu_wrap{
	min-height: 32px;
	text-align:right;
	margin-right:-25px;
	margin-bottom:5px;
}
/*#ac_menu li{
	padding-left:5px;
}*/

#ac_menu li a{
	font-size:15px;
    font-family: 'Bitter', serif;
	font-style:normal;
    font-weight: 400;
	letter-spacing:0.4px;
	padding-bottom:3px;
}

#ac_menu li a:hover{
}
#icons-menu{
	text-align:right;
}
#icons-menu ul{
	padding-left:0;
}
#icons-menu ul li{
	list-style:none;
	margin-bottom:10px;
}
#icons-menu ul li a{
	color:#c4c2c4;
	cursor:default;
}

.q-icon{
	font-size:40px;
	-webkit-transition: all .4s ease-out;
    transition: all .4s ease-out;
}
.q-icon:hover{
	color:#008c96;
}
.q-icon-s{
	font-size:30px;
	-webkit-transition: all .4s ease-out;
    transition: all .4s ease-out;
	margin-right:5px;
	opacity:0.8;
}

.icon-gr, .icon-ed, .icon-ph, .icon-ad, .icon-br{
	cursor:pointer;
}
.content-area{
	margin-left:-30px;
	margin-right:-30px;
}
.content-area-g{
	margin-left:-35px;
	margin-right:-30px;
}


.z_996{z-index:996}
.close_holder{float:right; margin-bottom:-30px}
.icon_cat_holder{
	position:absolute; bottom:15px;	
}
.icon_cat_holder_xs{
	padding-left:15px; padding-bottom:15px
}

.prev_link_xl{
	position: absolute; top: -15px; right: 30px;
}
.next_link_xl{
	position: absolute; top: -15px; left: 30px;
}
.mt-15{margin-top:15px;}
.related_projects{
	background:#f5f4f4;
	padding:5px;
	margin-top:20px;
}
.related_projects h4{
	margin-top:16px;
	margin-bottom:16px;
}
.related_projects .project_image{
	padding:5px;
}
.btnx {
	 display: inline-block;
	 text-decoration: none;
	 position: relative;
	 text-align: center;
}
.btnx:hover {
	/*cursor:default;*/
}
.btnx:hover .button-stroke {
	 stroke-dashoffset: 0;
}

.button-stroke {
	 display: block;
	 width: calc(100% - 2px);
	 height: 15px;
	 stroke: #fff;
	 position: absolute;
	 left: 1px;
	 bottom: -8px;
	 stroke-width: 1;
}

.button-stroke{
	 stroke-dasharray: 650px;
	 stroke-dashoffset: 650px;
	 stroke: #008C96;
	 stroke-width: 1;
	 transition: stroke-dashoffset 800ms ease-out;
}



.services-list{
	padding-left:15px;
}
.services-list li{
	padding-bottom:5px;
}


section { 
	margin:50px 0 60px 0;
}

.scrolltotop{ margin-top:50px;}


.project_info{
	padding:15px 5px 20px 15px;
}

.project_info h4{
	margin-bottom:15px;
}
.gallery{ padding-top:35px;}

#show_description{
    position: absolute;
    top: 10px;
    right: 15px;
	width: 14px;
    text-align: center;
}

.xs_margin{ margin-left:-15px; margin-right:-15px;}

.popup-modal + .tooltip > .tooltip-inner {background-color:#8b8b8e;}

.tooltip.top .tooltip-arrow{
    border-top:5px solid #8b8b8e
}
.tooltip.left .tooltip-arrow{
    border-left:5px solid #8b8b8e
}
.tooltip.bottom .tooltip-arrow{
    border-bottom:5px solid #8b8b8e
}
.tooltip.right .tooltip-arrow{
    border-right:5px solid #8b8b8e
}
.tooltip-inner{max-width:169px;padding:6px 10px;color:#fff;text-align:center;text-decoration:none;border-radius:8px}

#contact_form{
	margin-top:40px;
}

.container_no_padding{padding-left: 0; padding-right: 0;}

.overlay { 
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 999;
	left: 0;
	top: 0;
	background-color: rgb(255, 255, 255);
	background-color: rgba(255, 255, 255, 0.9);
	overflow-x: hidden;
	transition: 0.5s;
}
.overlay-content {
	position: relative;
	top: 25%;
	width: 100%;
	text-align: center;
	margin-top: 30px;
}
.overlay a {
	padding: 20px;
	color: #8b8b8e;
    font-size: 30px;
    font-family: 'Bitter', serif;
    font-style: normal;
    font-weight: 400;
	display: block;
	transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
	color: #8b8b8e;
}

.overlay a.closebtn {
	position: absolute;
	top: 0;
	right: 5px;
	font-size: 80px;
}

.openbtn{
	cursor:pointer;
	margin-right:5px;
}

@media screen and (max-height: 450px) {
	.overlay a {
	  font-size: 20px;
	}
	.overlay .closebtn {
		top: 15px;
	}
}

label {
	font-size: 14px;
	font-weight:300;
}
select.form-control, textarea.form-control, input[type="text"].form-control, input[type="password"].form-control, input[type="datetime"].form-control, input[type="datetime-local"].form-control, input[type="date"].form-control, input[type="month"].form-control, input[type="time"].form-control, input[type="week"].form-control, input[type="number"].form-control, input[type="email"].form-control, input[type="url"].form-control, input[type="search"].form-control, input[type="tel"].form-control, input[type="color"].form-control {
	font-size: 14px;
}

.input-group input, .input-group select, .input-group .dropdown-menu, .input-group .popover {
	font-size: 14px;
}

.input-group .input-group-addon {
	font-size: 14px;
	height: 30px;
}


input:hover
input:active, 
input:focus, 
textarea:active,
textarea:hover,
textarea:focus, 
button:focus,
button:active,
button:hover {
    /*outline: none !important;*/
    box-shadow: none !important;
}

textarea {
  resize: none;
}

.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555;
    background-color: #f5f4f4;
    background-image: none;
    border: 0px solid #ccc;
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow:  none;
    -webkit-transition: none;
    transition: none;
}


span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {
	display: inline;
}

div.required .control-label:before {
	content: '* ';
	color: #F00;
	font-weight: 600;
}


.xxx{
	box-sizing: border-box;
    position: relative;
    min-height: 1px;
	height: auto;
	float: left;
	padding-left: 10px;
  padding-bottom: 10px;	
}

.box1 {
    width: 33.33333333333333%;
}
.box2 {
    width: 66.66666666666666%;
}

.box-inner {
	background-color: red;
	width: 100%;
	height: 100%;
	min-height:190px;
	overflow: hidden;
}

#footer{
	font-size:12px;
	color:#8b8b8e;
	margin-top: 30px;
	margin-bottom:30px;
	padding-top: 30px;
	background:#fff;	
}
#footer .line{
	border-bottom:1px solid #b8b7b9;
	padding-bottom:18px;
	margin-bottom:18px;
}
#footer .q{
	font-size:14px;
	font-weight:600;
}

#footer .uarr{
	font-size:18px;
	transition: all .3s ease-out;
	display: inline-block;
}

#footer .up {
	color:#000;
	transform: translate(0, -5px);
}
#footer .utext:hover {
	cursor:pointer;
	color:#8b8b8e;
}
#footer .utext:hover - .uarr{
	color:#000;
	transform: translate(0, -5px);
}
#footer .phone{
	text-align:right;
}
#footer a{
	color:#8b8b8e;
}
#footer a:hover{
	opacity:0.80;
}

#footer .address{
	text-align:left;
	padding-left:45px;
	padding-top:20px;
	border-left:1px solid #CCC;
	min-height:120px;
}

#footer .social{
	font-size:20px;
	text-align:center;
	padding-left:15px;
	padding-top:25px;
	border-left:1px solid #CCC;
	min-height:120px;
}

#footer .img-responsive {
	display: inline-flex;	
}

.btn {
	font-family: 'Bitter', serif;
	font-weight:500;
	padding: 6px 16px;
	font-size: 16px;
	border: 0px solid #ccc;
	border-radius: 20px;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
	overflow: hidden;
}

.btn-default {
	color: #fff;
	background-color: #008c96;
	border-color: #008c96;
}

.btn-default:hover {
	color: #fff;
	background-color: #666;
	border-color: #666;
}

.btn-primary {
	color: #fff;
	background-color:#008c96;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
	color:#fdfdfd;
	background-color:#8c8c8f;
	outline:none;
}


.list-inline{ margin-top:10px;}

* {box-shadow: none;}

.special-padding{
	padding-left: 5px;
    padding-right: 5px;
	padding-bottom:10px;
}
.profile-top-img{
	padding-bottom:20px;
}
.col-0{
	padding-left: 0px;
    padding-right: 0px;
}

.icon_list{position:absolute; bottom:15px;}
.row_info{margin-bottom:10px;background:#f5f4f4; display: flex;}

@media (max-width: 480px){
    .map_box{
		background-image: url(../img/map-mobile.png);		
    }
    .sand_box{
		background-image: url(../img/playa-mobile.jpg);
	}
    .line_box{
		background-image: url(../img/linea-mobile.png);
	}	
	.q_menu_wrap {
	}
	#about h1, #services h1, #contact h1 {
		font-size: 24px;
	}
}
@media (min-width: 481px){
    .map_box{
		background-image: url(../img/map.png);		
    }
    .sand_box{
		background-image: url(../img/playa.jpg);
	}	
    .line_box{
		background-image: url(../img/linea.png);
	}		
}	
		
@media (min-width: 481px) and (max-width: 767px){
}
@media (min-width: 768px) {
    .services-bg {
        background-image: url(../img/background-desktop.jpg);
    }
}
@media (min-width: 768px) and (max-width: 991px) {
	#ac_menu li a {
		font-size:14px;
		padding: 8px 10px;
	}
	#logo {
		margin: 40px 0 0 0;
		padding:20px 0 0 0;
	}
	#footer .address{font-size:14px; padding-left:20px; padding-top:0}
	#footer .logo {text-align: center;padding: 10px 10px;}
	#footer .social{font-size:1px; text-align:center; padding-left:0px; padding-top:25px;}
	.list_box{
		display:none;
	}
}

@media (max-width: 767px) {
    .services-bg {
        background-image: url(../img/background-mobile.jpg);
    }
	#ac_menu{
		display:none;	
	}
	#contact {
		padding-top:60px;
	}
	#footer .address{ text-align:center; font-size:14px; padding-left:0; border-left:0px solid #fff;}
	#footer .social{font-size:20px; text-align:center; padding-left:0px; padding-top:25px;border-left:0px solid #fff;}
	#footer .logo {text-align: center; padding: 40px 60px;}
	
	.list_box{
		display:none;
	}
	#footer{
		margin-top: 30px;
		padding-top: 0px;
	}
	.xs_margin{ margin-left:15px; margin-right:15px}
	
.left-menu, #icons-menu{
	display:none;
}
#lang {
    margin-right: 22px;
}
.header .top {
    margin-top: 25px;
    margin-bottom: 0px;
}
#footer {
	margin-top:0;
    padding-top: 0;
}
.icon_list{position:relative; bottom:15px;}
.row_info{margin-bottom:10px;background:#f5f4f4; display: block;}

#show_description {
    position: absolute;
    top: 10px;
    right: 23px;
}
.content-area{
	margin-left: -10px;
	margin-right: -10px;
	margin-top:30px;
}
.flip-card {
  background-color: transparent;
  width: 340px;
  height: 192px;
  perspective: 1000px;
}
.q-card {
  width: 340px;
  height: 192px;
}
.qr-image{
	max-width:158px;
	margin:0 auto;
}
.col-card{
	min-height:200px;
}
}

@media (min-width: 992px) and (max-width: 1199px){
	#logo {
		margin: 34px 0 0 0;
		padding:10px 0 0 0;
	}
	.list_box{
		position:fixed;
		width: 100%;
		height: 100%;          
		position: absolute;
		top:0;
		left: 0;
		z-index:12;
	}
	.list_box ul{
		margin:175px 0 0 0;
		padding:0;
	}
	.list_box ul li{
		color:#FFF;
		font-size:15px;
		font-family: 'Bitter', serif;
		font-style:normal;
		font-weight: 400;
		letter-spacing:0.2px;
		text-align:center;
		list-style: none;
		padding:1px;
		margin:0;
	}
}

.line {
  fill: none;
  stroke: black;
  stroke-width: 3;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line1 {
  stroke-dasharray: 60 207;
  stroke-width: 3;
}
.line2 {
  stroke-dasharray: 60 60;
  stroke-width: 3;
}
.line3 {
  stroke-dasharray: 60 207;
  stroke-width: 3;
}
.opened .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 3;
}
.opened .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke-width: 3;
}
.opened .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 3;
}

.q-button {
	margin-top:16px;
	 display: inline-block;
    font-size: 16px;
    border-radius: 20px;
	 padding: 8px 16px;
	 -webkit-appearance: none;
	 appearance: none;
	 background-color: #008c96;
	 color: #fff;
	 border: none;
	 cursor: pointer;
	 position: relative;
	 transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
	 box-shadow: none;
}
 .q-button:focus {
	 outline: 0;
}
 .q-button:before, .q-button:after {
	 position: absolute;
	 content: '';
	 display: block;
	 width: 140%;
	 height: 100%;
	 left: -20%;
	 z-index: -1000;
	 transition: all ease-in-out 0.5s;
	 background-repeat: no-repeat;
}
 .q-button:before {
	 display: none;
	 top: -75%;
	 background-image: radial-gradient(circle, #008c96 20%, transparent 20%), radial-gradient(circle, transparent 20%, #008c96 20%, transparent 30%), radial-gradient(circle, #008c96 20%, transparent 20%), radial-gradient(circle, #008c96 20%, transparent 20%), radial-gradient(circle, transparent 10%, #008c96 15%, transparent 20%), radial-gradient(circle, #008c96 20%, transparent 20%), radial-gradient(circle, #008c96 20%, transparent 20%), radial-gradient(circle, #008c96 20%, transparent 20%), radial-gradient(circle, #008c96 20%, transparent 20%);
	 background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}
 .q-button:after {
	 display: none;
	 bottom: -75%;
	 background-image: radial-gradient(circle, #008c96 20%, transparent 20%), radial-gradient(circle, #008c96 20%, transparent 20%), radial-gradient(circle, transparent 10%, #008c96 15%, transparent 20%), radial-gradient(circle, #008c96 20%, transparent 20%), radial-gradient(circle, #008c96 20%, transparent 20%), radial-gradient(circle, #008c96 20%, transparent 20%), radial-gradient(circle, #008c96 20%, transparent 20%);
	 background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}
 .q-button:active {
	 transform: scale(0.9);
	 background-color: #8c8c8f;
	 box-shadow: none;
}
 .q-button.animate:before {
	 display: block;
	 animation: topBubbles ease-in-out 0.75s forwards;
}
 .q-button.animate:after {
	 display: block;
	 animation: bottomBubbles ease-in-out 0.75s forwards;
}
 @keyframes topBubbles {
	 0% {
		 background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
	}
	 50% {
		 background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
	}
	 100% {
		 background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
		 background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
 @keyframes bottomBubbles {
	 0% {
		 background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
	}
	 50% {
		 background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
	}
	 100% {
		 background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
		 background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}