html {
	box-sizing: border-box; }

*, *:before, *:after {
	box-sizing: inherit; }

body {
	margin: 0;
	padding: 60px 0 0;
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 26px;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden; }

a, a:focus, a:visited {
	color: #4078c0;
	text-decoration: none; }

a:focus, a:hover {
	color: #000;
	text-decoration: underline; }

a img {
	border: 0; }

.hod {
	display: none; }

.clear:after {
	display: table;
	content: " ";
	clear: both; }

#wrapper {
	width: 100%;
	max-width: 90em;
	min-height: 400px;
	margin: 0 auto;
	display: block;
	top: 0;
	left: 0;
	right: 0; 
	background: #fff; }

.container {
	width: 100%;
	max-width: 68em;
	min-width: 19em;
	margin: 0 auto; }

.container:after {
	display: table;
	content: " ";
	clear: both; }


.nav-trigger {
    width: 40px;
    text-align: center;
    height: 50px;
    line-height: 50px;
    position: absolute;
    left: 0;
    top: 0;
    color: #111732; }

a.trigger {
	display: block;
	padding-top: 4px;
    color: #37474F;
    text-decoration: none; }

.trigger i {
    font-size: 1.5em; }

.nav-trigger.active {
    transition: 1s ease;
    background: #111732;
    color: #fff;
}

#navigation {
    width: 260px;
    height: 100%;
    position: fixed;
    left: -300px;
    bottom: 0;
    z-index: 102;
    background: #fff;
	box-shadow: 0 0 20px rgba(0,0,0,.28);
    padding: 1em 1em 2em;
   	transition: left .3s ease-in;
    overflow: scroll; }

#navigation.active {
	left: 0;
	transition: left .2s ease-in;
}

#nav--logo {
    margin: .5em 0; }

#nav--logo img {
	display: block; }

#nav--close {
    position: absolute;
    right: 0;
    top: 0;
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 2.2em;
    font-weight: 300; }

#nav--close a {
    color: #777; }

.mobile ul li {
	float: none;
	display: block;
    position: relative; }

.mobile ul li a {
    position: relative;
    display: block;
    font-size: 1em;
    font-weight: 400;
    padding: .5em 1em;
    color: #444;
    letter-spacing: .5px; }

.mobile > ul > li > a:after {
    content: '\e409';
    font-family: 'gd';
    position: absolute;
    width: 1em;
    top: .5em;
    left: 0; }

.mobile ul li.active a, .mobile ul a:hover, #nav--close a:hover {
    color: #777; }

.mobile ul > li.active > a:after {
    color: #777; }

.mobile > li a i {
    font-size: 13px;
    margin-bottom: -4px; }

.mobile .nav--sub {
	display: none;
	padding-left: 1em;
}

.mobile li.active .nav--sub {
	display: block;
}

.mobile .nav--sub li a {
	padding: .2em .5em;
	line-height: 1.5em;
}

.header {
	width: 100%;
	max-width: 90em;
	height: 60px;
	position: fixed;
	z-index: 101;
	top: 0;
	left: 0;
	right: 0;
	display: block;
	margin: 0 auto;
	background: #fff;
	-webkit-box-shadow: 0 4px 10px -3px rgba(0,0,0,.2); 
	box-shadow: 0 4px 10px -3px rgba(0,0,0,.2); }

.header .container, .footer .container {
	width: 100%;
	max-width: 100%;
	padding: 0 1em;
	position: relative; }

.logo {
	width: 180px;
	height: 60px;
	margin-right: 1em;
	float: left; }

.nav {
	width: 100%; }

.nav ul {
	margin: 0;
	padding: 0;
	list-style: none; }

.primary.nav > ul > li {
	margin-left: 2px;
	float: left; }

.primary > ul > li > a {
	position: relative;
	display: block;
	font-weight: 300;
	font-size: 15px;
	color: #263238;
	padding: 0 12px;
	height: 60px;
	border-bottom: 3px solid transparent;
	line-height: 60px; }

.primary li a:hover {
	color: #777;
	text-decoration: none;
}

.primary > ul > li > a:after {
	position: absolute;
	content: '';
	bottom: -3px;
	left: 50%;
	width: 0;
	height: 3px;
	background: #00a79d;
}

.primary > ul > li > a:hover:after {
	left: 0%;
	width: 100%;
	transition: all .5s ease;
}

.nav--sub > li > a {
	position: relative;
	display: block;
	font-weight: 300;
	font-size: 15px;
	color: #263238;
	padding: 5px 12px; }

.primary li.dropdown a:hover, .primary li.active a {
	color: #777;
	border-color: #00a79d;
	transition: all 300ms ease;
	text-decoration: none; }

.primary li.dropdown {
	position: relative; }

.primary li.dropdown:hover .nav--sub {
	display: block; }

.primary li.dropdown > a {
	padding-right: 28px; }

.primary li.dropdown:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 8px;
	left: auto;
	width: 0;
	height: 0;
	margin-top: -3px;
	border: 6px solid transparent;
	border-bottom: 0;
	border-top-color: #ddd; }

.primary .nav--sub {
	display: none;
	position: absolute;
	top: 60px;
	left: 50%;
	width: 300px;
	margin: 0;
	margin-left: -150px;
	padding: 0;
	background: #fff;
	border-radius: 2px;
	box-shadow: 0  0 13px rgba(0,0,0,.16);
	transition: opacity .3s ease-out;}

.primary .nav--sub:after {
	content: '';
	position: absolute;
	top: -10px;
	left: 50%;
	margin-left: -10px;
	border: 10px solid transparent;
	border-top: 0;
	border-bottom-color: #fff; }

.primary .nav--sub li:hover {
	background-color: #f6f6f6; 
	transition: background-color .2s ease; }

.primary .nav--sub li a {
	font-weight: 300;
	line-height: 1.4em;
	height: auto;
	padding: .6em 1.2em; }

.mobile .nav--sub li {
	font-size: .9em;
}

.lang {
	position: absolute;
	height: 60px;
	width: 64px;
	line-height: 60px;
	text-align: center;
	top: 0;
	right: 0;
	font-size: .8em;
	font-weight: 600; 
	padding: 0 .5em;
	border-left: 1px solid #efefef; }

.lang:hover {
	background-color: #efefef; }

.lang > a {
	text-decoration: none;
	display: block;
	color: #37474F; }

.lang i {
	vertical-align: middle;
	font-size: 24px;
	color: #a1a1a1;
	margin-right: .2em;}

.home-hero {
	width: 100%;
	height: auto; 
	position: relative; }

.hero {
	width: 100%; 
	height: auto; 
	position: relative;}

.hero--title {
	max-width: 40em;
	text-shadow: 0 0 1px rgba(0,0,0,.2);
}

.hero--image img {
	display: block;
	width: 100%;
	height: auto; }

.hero--content-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0; 	
	z-index: 2;
	display: flex;
    align-items: center;
	background: rgba(255,255,255,.3); }

.hero--content {
	color: #008033;
	bottom: 0;
	left: 0;
	width: 100%; }	

.hero--title h2 {
	font-size: 3em;
	line-height: 1.2em;
	margin: 0;
	margin-bottom: .5em;
	font-weight: 100; }

.hero--title a {
	color: #fff; }

.hero--button {
	padding-top: .5em; }

.intro {
	width: 100%;
	margin: 0 auto;
	padding: 1.5em 0;
	background: #efefef;
	border-bottom: 1px solid #ececec; }

.intro h1 {
	font-weight: 300; }

.home-services {
	padding: 2em 0; }

.home-services .item {
	width: 50%;
	padding: 0 .5em;
	margin-bottom: .5rem;
	float: left; 
	text-align: center; }

.item--figure {
	width: 64px;
	height: 64px;
	margin: 0 auto 1em; }

.item--figure img {
	border-top-left-radius: 10px;
	border-bottom-right-radius: 10px; }

.item--figure span  {
	display: block;
	width: 64px;
	height: 64px;
	background-image: url('img/figures.png');
	background-position: 0 0;
	background-repeat: no-repeat; }

.item--figure .figure-quality {
	background-position: 0 -128px; }

.item--figure .figure-multimedia {
	background-position: 0 -64px; }	

.item--figure .figure-official {
	background-position: 0 -192px; }	

.item--title {
	font-size: 1.4em;
	margin-bottom: .5em; }

.item--summary {
	padding-bottom: 1em; }

.btn-services {
	text-align: center;
	margin-bottom: 2em;
}

.logos {
	position: relative;
	margin: 1em auto;
	padding-top: 1em;
	border-top: 1px solid #dfdfdf;
	text-align: center;
}

.logos:before {
	position: absolute;
	content: '';
	width: 50%;
	height: 3px;
	top: 0;
	left: 25%;
	background: #dfdfdf;
}

.logo-item {
	display: inline-block;
	vertical-align: middle;
	padding: 0 1em;
}

.logo-item img {
	opacity: .5;
	max-width: 100%;
}

.logo-item img:hover {
	opacity: 1;
	transition: opacity .5s ease;
}

.hero-image-wrapper {
	width: 100%; }

.hero-image img {
	display: block; 
	width: 100%; 
	height: auto; }

.page > .container {
	max-width: 60em;
	margin-bottom: 2em;
}

.page--header {
	position: relative;
	width: 100%;
	padding: 1em 0 1.2em 0; 
	margin-bottom: 20px;
	border-bottom: 1px solid #dfdfdf; }

.page--header:after {
	content: '';
	position: absolute;
	left: 30%;
	bottom: -2px;
	width: 40%;
	height: 4px;
	background: #dfdfdf; }

.page--header h1 {
	margin: 0;
	font-weight: 100;
	font-size: 3em; 
	line-height: 1.2em;
	color: #4d4e53;
	text-align: center; }

.page--nav {
	width: 20%;
	padding-right: 1em;
	float: left; }

.page--nav ul {
	margin: 0;
	padding: 0;
	list-style: none; }

.page--nav li {
	padding: .4em 0; 
	position: relative;	}

.page--nav li.active a {
	color: #444; }

.page--nav h3 {
	color: #555;
	margin-bottom: .2em;
}

.page--content {
	}

.page.hasChilds .page--content {
	padding-left: 22%; }

.page--image img, .page--content img {
	max-width: 100%;
	height: auto; }

.page--content iframe {
	max-width: 100%;
	height: auto;
}

.page .error {
	padding: 4em 2em;}

.ref-item {
	position: relative;
	display: inline-block;
	vertical-align: top;
	text-align: center;
	padding: .2em 1em;
	width: 20%;
	min-height: 110px;
	border: 1px solid #efefef;
}

.ref-item img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-height: 100px;
	vertical-align: middle;
}

.map {
    position: relative;
    width: 100%;
    max-height: 600px;
    overflow: hidden;
}

.map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

.responsive {
	text-align: center;
	background-color: #f1f1f1;
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: auto;
	overflow: hidden;
}

.responsive iframe,
.responsive object,
.responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

.map .responsive {
	max-height: 500px;
	padding-bottom: 500px;
}

a.btn, button {
	font-size: .9em;
	display: inline-block;
	padding: .4em .4em .3em .8em;
	border: 0;
	box-shadow: 0 0 0px rgba(0,0,0,.2); 
	border-radius: 4px; 
	color: #fff;
	outline: none;
	letter-spacing: 1px;
	background-color: #2979ff; }

button {
	padding: .5em 1em;
	margin: 0 auto;
}

.btn:hover, button:hover {
	color: #fff;
	background-color: #0D47A1;
	text-decoration: none; 
	transition: all .3s ease; }

.btn i {
	vertical-align: middle; }

.footer {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	position: relative;
	text-align: center;
	}

.footer .container {
	background: #f1f1f1;
	border-top: 1px solid #dfdfdf;
	padding-top: 1em; }

.address div {
	display: inline-block;
	font-weight: 300;
	font-size: 1em;
	color: #555;
	padding: .5em; }

.site-by {
	margin-top: 1em;
	text-align: center; }

.site-by img {
	display: block;
	margin: 0 auto; }

@media only screen and (max-width: 68em) {
	.container {
        width: 100%;
		padding: 0 1.5em; }

	.nav li a {
		padding-rigt: .5em;	
		padding-left: .5em;}

	.map {
		height: auto;
	}

	.map .responsive {
		max-height: none;
		padding-bottom: 56.25%;
	}
}

@media only screen and (max-width: 48em) {
	.hom {
		display: none; }

	.hod {
		display: block;	}

	body {
		padding-top: 50px; }

	.header, .lang, .lang a {
		height: 50px; }

	.lang a {
		line-height: 50px; }

	.logo {
		height: 50px;
		padding-top: 5px;
	}

	.logo img {
		height: 40px; }

	.header .container {
		padding-left: 42px;
	}

	.footer .container {
		padding: .5em; }

	.intro {
		padding: .5em 0; }

	.intro h1 {
		font-size: 2em;	}

	.page--title h1 {
		font-size: 2em;	}

	.hero--title h2 {
		font-size: 2em; }

	.primary li a {
		font-size: .8em;
		padding: 0 6px; }

	.home-services .item {
		width: 50%; }

	.home-services .item:nth-child(even):after {
		content: " ";
		height: 0;
		visibility: hidden;
		display: table;
		clear: both;}

	.page--content {
		float: none;
		width: 100%; 
		padding-bottom: 2em; }

	.ref-item {
		width: 25%;
	}
}

@media only screen and (max-width: 37.5em) {
	.page--nav {
    	display: none; }

	.page.hasChilds .page--content {
		padding-left: 0;
		width: 100%;
	}
}

@media only screen and (max-width: 30em) {
	#nav--logo {
    	margin-top: 0; }

	.container {
		min-width: 100%; }

	.intro h1 {
		font-size: 1.6em; 
		line-height: 1.4em;}

	.hero--title h2 {
		font-size: 1.2em;
		font-weight: 300;
		margin: 0; }

	.home-services {
		padding-bottom: 0; }

	.home-services .item {
		width: 100%; 
		margin-bottom: 1.2em; }

	.ref-item {
		width: 33%;
	}
}
@font-face {
  font-family: 'gd';
  src:  url('fonts/gd.eot?80ni7l');
  src:  url('fonts/gd.eot?80ni7l#iefix') format('embedded-opentype'),
    url('fonts/gd.ttf?80ni7l') format('truetype'),
    url('fonts/gd.woff?80ni7l') format('woff'),
    url('fonts/gd.svg?80ni7l#gd') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'gd';
  src:  url('fonts/gd.eot?purxn0');
  src:  url('fonts/gd.eot?purxn0#iefix') format('embedded-opentype'),
    url('fonts/gd.ttf?purxn0') format('truetype'),
    url('fonts/gd.woff?purxn0') format('woff'),
    url('fonts/gd.svg?purxn0#gd') format('svg');
  font-weight: normal;
  font-style: normal;
}

i {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'gd' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.i-phone:before {
  content: "\e0cd";
}
.i-angle-left:before {
  content: "\e408";
}
.i-angle-right:before {
  content: "\e409";
}
.i-mail:before {
  content: "\e159";
}
.i-menu:before {
  content: "\e5d2";
}
.i-more_vert:before {
  content: "\e5d4";
}
.i-map-marker:before {
  content: "\f041";
}
.i-fax:before {
  content: "\f1ac";
}
.i-spinner:before {
  content: "\e97f";
}
.i-globe:before {
  content: "\e9c9";
}
.i-facebook:before {
  content: "\ea91";
}
.i-whatsapp:before {
  content: "\ea93";
}
.i-twitter:before {
  content: "\ea96";
}