@charset "UTF-8";

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-backface-visibility:hidden; backface-visibility:hidden;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}
a{margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration:none;}
body{line-height:1;}
nav ul{list-style:none;}
input, select{vertical-align:middle;}
img{display:block;}


@font-face {
	font-family: 'Metropolis';
	src: url('../font/Metropolis-Thin.eot');
	src: url('../font/Metropolis-Thin.eot?#iefix') format('embedded-opentype'),
		url('../font/Metropolis-Thin.woff2') format('woff2'),
		url('../font/Metropolis-Thin.woff') format('woff'),
		url('../font/Metropolis-Thin.ttf') format('truetype'),
		url('../font/Metropolis-Thin.svg#Metropolis-Thin') format('svg');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Metropolis';
	src: url('../font/Metropolis-Regular.eot');
	src: url('../font/Metropolis-Regular.eot?#iefix') format('embedded-opentype'),
		url('../font/Metropolis-Regular.woff2') format('woff2'),
		url('../font/Metropolis-Regular.woff') format('woff'),
		url('../font/Metropolis-Regular.ttf') format('truetype'),
		url('../font/Metropolis-Regular.svg#Metropolis-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Metropolis';
	src: url('../font/Metropolis-Bold.eot');
	src: url('../font/Metropolis-Bold.eot?#iefix') format('embedded-opentype'),
		url('../font/Metropolis-Bold.woff2') format('woff2'),
		url('../font/Metropolis-Bold.woff') format('woff'),
		url('../font/Metropolis-Bold.ttf') format('truetype'),
		url('../font/Metropolis-Bold.svg#Metropolis-Bold') format('svg');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

body {
	font-family: 'Metropolis', sans-serif;
	text-rendering: geometricPrecision;
}
html, body {
	height: 100%;
}
section {
	width: 100%;
	min-height: 100%;
	background:#fff;
	float: left;
	position: relative;
}
h1, h2 {
	color: #fff;
	font-size: 38px;
	margin-top: 75px;
	width: 100%;
	text-align: center;
	position: relative;
	padding: 0 25px;
}
	h1 span {
		font-size: 22px;
		font-weight: 400;
	}


.bg-image {
	width: 100%;
	height: 100%;
	background: url(../img/bg.jpg) center center no-repeat;
	background-size: cover;
	position: absolute;
	z-index: 0;
	left:0 ;
	top:0 ;
}
	.bg-image > i {
		width: inherit;
		height: inherit;
		display: block;
		background-color: rgba(117,144,152,.9);
	}

.text-color {
	color: rgb(117,144,152);
}

.bg-color {
	background-color: rgb(117,144,152);
}


/* HEADER */
#header {
	width: 100%;
	height: 100%;
	min-height: 600px;
	float: left;
	display: -webkit-flex;
	display: flex;
	position: relative;
	overflow: hidden;
}
	#banner {
		margin: auto;
		color: #fff;
		text-align: center;
		padding: 0 50px;
		position: relative;
	}
		#logo {
			left: 50%;
			display: inline-block;
			background: url(../img/logo.png) no-repeat left top;
			background-size: 648px 104px;
			width: 648px;
			height: 104px;
			margin-left: 120px;
		}
		#banner > strong {
			width: 100%;
			font-size: 48px;
			line-height: 48px;
			font-weight: 700;
			position: absolute;
			z-index: 0;
			left: 0;
			bottom: -120px;
		}

	#scroll-icon {
		left: 50%;
		margin-left: -35px;
		bottom: 25px;
		position: absolute;
		z-index: 0;
		cursor: pointer;
		width: 70px;
		height: 70px;
		background: url(../img/scroll-icon.png) center center no-repeat;
		background-size: 30px 50px;
	}
	#scroll-icon:hover {
		
	}


/* NAV */
#nav-btn {
	position: fixed;
	right: 10px;
	top: 10px;
	z-index: 2;
	width: 75px;
	padding: 20px;
	cursor: pointer;
}
	#nav-btn > i {
		width: 35px;
		height: 4px;
		margin-bottom: 10px;
		float: left;
		-webkit-transition: .2s;
		transition: .2s;
	}
	#nav-btn > i:last-child {
		margin-bottom: 0;
	}
	#nav-btn:hover > i {
		background: rgb(44,62,69);
	}

#nav {
	width: 33%;
	min-width: 400px;
	height: 100%;
	position: fixed;
	right: -33%;
	top: 0;
	z-index: 1000;
	display: none;
}
	#nav > span {
		width: 100%;
		position: absolute;
		z-index: 0;
		left: 0;
		bottom: 30px;
		text-align: center;
		color: rgb(44,62,69);
		font-size: 12px;
		line-height: 12px;
		padding-top: 70px;
		background: url(../img/logo-nav.png) center top no-repeat;
		background-size: 201px 47px;
	}

	#nav > div {
		position: absolute;
		z-index: 1;
		left: 0;
		top: 50%;
		margin-top: -138px;
	}
		#nav > div > span {
			width: 100%;
			float: right;
			height: 56px;
			text-transform: uppercase;
			letter-spacing: 2px;
			cursor: pointer;
			overflow: hidden;
			font-size: 32px;
			padding-left: 30px;
			color:#008A5B;
			display: -webkit-flex;
			display: flex;
		}
		#nav > div > span:hover,
		#nav > div > span.on {
			color: rgb(44,62,69);
		}
			#nav > div > span > i{font-style:normal; margin:auto; width:100%; text-align:left;}

	#nav-close {
		position: absolute;
		z-index: 1;
		left: -86px;
		top: 4px;
		cursor: pointer;
		padding: 0px 20px;
	}
		#nav-close:after {
			display: inline-block;
			content: "\00d7";
			color: rgb(117,144,152);
			font-size: 80px;
			font-style: normal;
			-webkit-transition: .2s;
			transition: .2s;
		}
		#nav-close:hover:after {
			color: rgb(44,62,69);
		}

#nav-overlay{width:100%; height:100%; background:rgba(0,0,0,.4); position:fixed; z-index:1; display:none;}


/* INTRO */
#intro {
	color: #505050;
	font-size: 22px;
	font-weight: 300;
	line-height: 30px;
}
	#about {
		width: 100%;
		text-align: center;
		position: relative;
		padding: 70px 0 25px 0;
	}
		#about > div {
			width: 100%;
			margin: auto;
			padding: 0 50px;
			max-width: 900px;
		}
		#about > div > img {
			display: inline-block;
			margin-bottom: 35px;
		}
		#about > div > h3 {
			width: 100%;
			padding: 0 40px;
			float: left;
			margin-bottom: 30px;
			font-size: 30px;
			font-weight: 400;
			color: rgb(44,62,69);
		}
		#about > div > p {
			display: inline-block;
		}

	#competencias {
		width: 100%;
		text-align: center;
		position: relative;
		padding: 20px 0 0 0;
	}
		#competencias > div {
			margin: auto;
			padding: 25px;
			overflow: hidden;
			max-width: 1100px;
			position: relative;
		}
			#competencias > div > div {
				width: 50%;
				float: left;
				padding: 0 35px;
			}
				#competencias > div > div > div {
					display: -webkit-flex;
					display: flex;
					font-size: 17px;
					line-height: 17px;
					margin-bottom: 15px;
					opacity: 1;
				}
					#competencias > div > div > div .title {
						width: 40%;
						display: inline-block;
						text-align: left;
						color: rgb(44,62,69);
					}
					#competencias > div > div > div .value {
						width: 60%;
						display: inline-block;
						text-align: right;
					}
						#competencias > div > div > div .value > i {
							width: 15px;
							height: 15px;
							background: rgba(117,144,152,1);
							border-radius: 50%;
							display: inline-block;
							margin-left: 10px;
							margin-top: 2px;
							float: left;
						}
						#competencias > div > div > div .value > i.off {
							background: rgba(44,62,69,.17);
						}
				#competencias > div > div > hr {
					display: block;
					height: 1px;
					border: 0;
					border-top: 1px solid rgba(44,62,69,.1);
					margin: 20px 0;
					padding: 0;}

			#competencias > div#intro-final-text {
				width: 100%;
				max-width: 900px;
				padding: 20px 50px 85px;
			}

/* PORTFOLIO */
#portfolio {
	background: none;
	text-align: center;
	display: -webkit-flex;
	display: flex;
}
	#portfolio > div {
		margin: auto;
	}
	#portfolio > div.bg-image {
		margin: 0;
		background-image: url(../img/bg2.jpg);
	}
		#container{width:700px; height:470px; display:inline-block; position:relative; -webkit-perspective:800px; -moz-perspective:800px; -o-perspective:800px; perspective:800px; margin:35px 0 0 0;}
			#card {
				width: 100%;
				height: 100%;
				position: absolute;
				-webkit-transition:-webkit-transform 8s;
				-moz-transition:-moz-transform .8s;
				-o-transition:-o-transform .8s;
				transition:transform .8s;
				-webkit-transform-style: preserve-3d;
				-moz-transform-style: preserve-3d;
				-o-transform-style: preserve-3d;
				transform-style: preserve-3d;
				-webkit-transform-origin: right center;
				-moz-transform-origin: right center;
				-o-transform-origin: right center;
				transform-origin: right center;
				/*-webkit-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.3);
				-moz-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.3);
				box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.3);*/
			}
			#card.flipped{-webkit-transform:translateX( -100% ) rotateY( -180deg ); -moz-transform:translateX( -100% ) rotateY( -180deg ); -o-transform:translateX( -100% ) rotateY( -180deg ); transform:translateX( -100% ) rotateY( -180deg ); }
			#card.no-transition{-webkit-transition:-webkit-transform 0s; -moz-transition:-moz-transform 0s; -o-transition:-o-transform 0s; transition:transform 0s;}
				#card img{display:block; height:100%; width:100%; position:absolute; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -o-backface-visibility:hidden; backface-visibility:hidden; background:#000;}
					#card .back{-webkit-transform:rotateY( 180deg ); -moz-transform:rotateY( 180deg ); -o-transform:rotateY( 180deg );transform: rotateY( 180deg );}
		#portfolio > div > h3{color:#fff; font-size:21px; position:relative; margin-top:30px; font-weight:bold; letter-spacing:0;}
		#portfolio > div > p{color:#fff; font-size:18px; width:100%; text-align:center; padding:12px 25px 55px; position:relative;}

	#flip-back,
	#flip {
		width: 49px;
		height: 80px;
		background: url(../img/arrows.png) right top no-repeat;
		background-size: 108px 80px;
		position: absolute;
		top: 50%;
		margin-top: -22.5px;
		border: 0;
		cursor: pointer;
	}
	#flip-back {
		background-position: left top;
		left: 10%;
		display: none;
	}
	#flip {
		right: 10%;
	}


/* PROJECTOS */
#projectos {
	text-align: center;
	display: -webkit-flex;
	display: flex;
}
	#projectos > h2 {
		position: absolute;
		z-index: 1;
		color: rgb(44,62,69);
		margin-top: 75px;
	}
	#projectos-logos {
		width: 100%;
		max-width: 1300px;
		position: relative;
		height: 100%;
		padding: 170px 75px 50px 75px;
		margin: auto;
	}
		#projectos-logos > span {
			width: 25%;
			height: 215px;
			float: left;
			background-repeat: no-repeat;
			background-position: center center;
			border-bottom: 1px solid #f2f2f2;
			border-right: 1px solid #f2f2f2;
			display: -webkit-flex;
			display: flex;
			-webkit-filter: grayscale(100%);
			filter: grayscale(100%);
		}
		#projectos-logos > span:hover {
			-webkit-filter: grayscale(0%);
			filter: grayscale(0%);
		}
		#projectos-logos > span:nth-child(1){background-image:url(../img/logos/cliente-turismo-do-algarve.png);}
		#projectos-logos > span:nth-child(2){background-image:url(../img/logos/cliente-turismo-dos-acores.png);}
		#projectos-logos > span:nth-child(3){background-image:url(../img/logos/cliente-cycloid.png);}
		#projectos-logos > span:nth-child(4){background-image:url(../img/logos/cliente-viniportugal-wines-of-portugal.png); border-right:0;}

		#projectos-logos > span:nth-child(5){background-image:url(../img/logos/cliente-garrafeira-nacional.png);}
		#projectos-logos > span:nth-child(6){background-image:url(../img/logos/cliente-seguros-logo.png);}
		#projectos-logos > span:nth-child(7){background-image:url(../img/logos/cliente-sapataria-do-carmo.png); border-right:0;}
		#projectos-logos > span:nth-child(8){background-image:url(../img/logos/cliente-garcias.png); border-bottom:0;}

		#projectos-logos > span:nth-child(9){background-image:url(../img/logos/cliente-disney-portugal.png);}
		#projectos-logos > span:nth-child(10){background-image:url(../img/logos/cliente-oracle-webcenter.png);}
		#projectos-logos > span:nth-child(11){background-image:url(../img/logos/cliente-alcatel-lucent-portugal.png);}
		#projectos-logos > span:nth-child(12){background-image:url(../img/logos/cliente-sap-portugal.png); border-right:0;}

		#projectos-logos > span:nth-child(13){background-image:url(../img/logos/cliente-emc-portugal.png);}
		#projectos-logos > span:nth-child(14){background-image:url(../img/logos/cliente-sunlover.png);}
		#projectos-logos > span:nth-child(15){background-image:url(../img/logos/cliente-linde.png);}
		#projectos-logos > span:nth-child(16){background-image:url(../img/logos/cliente-roche-portugal.png); border-right:0;}

		#projectos-logos > span:nth-child(17){background-image:url(../img/logos/cliente-camping-card-international.png);}
		#projectos-logos > span:nth-child(18){background-image:url(../img/logos/cliente-optica13.png);}
		#projectos-logos > span:nth-child(19){background-image:url(../img/logos/cliente-ezconsultancy.png);}
		#projectos-logos > span:nth-child(20){background-image:url(../img/logos/cliente-fppadel.png); border-right:0;}

		#projectos-logos > span:nth-child(21){background-image:url(../img/logos/cliente-jacaranda.png);}
		#projectos-logos > span:nth-child(22){background-image:url(../img/logos/cliente-kw-security.png);}
		#projectos-logos > span:nth-child(23){background-image:url(../img/logos/cliente-fitapreta-vinhos.png);}
		#projectos-logos > span:nth-child(24){background-image:url(../img/logos/cliente-ix-creations.png); border-right:0;}

		#projectos-logos > span:nth-child(25){background-image:url(../img/logos/cliente-docapesca.png); border-bottom:0;}
		#projectos-logos > span:nth-child(26){background-image:url(../img/logos/cliente-sexywines.png); border-bottom:0;}
		#projectos-logos > span:nth-child(27){background-image:url(../img/logos/cliente-toxinn.png); border-bottom:0;}
		#projectos-logos > span:nth-child(28){background-image:url(../img/logos/cliente-ficc.png); border-right:0; border-bottom:0;}


/* FOOTER */
#footer {
	width: 100%;
	float: left;
	height: 260px;
	text-align: center;
	color: #fff;
	font-size: 10px;
	position: relative;
}
	#footer > .bg-image {
		height: 260px;
		background-image: url(../img/bg3.jpg);
	}
	#footer > h2 {
		margin-top: 45px;
	}
	#contactos {
		width: 100%;
		max-width: 900px;
		display: inline-block;
		margin-top: 40px;
		position: relative;
	}
		#contactos > a {
			width: 270px;
			height: 62px;
			display: inline-block;
			color: #fff;
			font-size: 16px;
			line-height: 59px;
			/*padding-left: 40px;*/
			text-align: center;
			position: relative;
			border: 2px solid rgb(117,144,152);
			border-radius: 31px;
			margin-right: 40px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
		#contactos > a:last-child {
			margin-right: 0;
		}
		#contactos > a:hover {
			background-color: rgb(44,62,69);
			-webkit-transition: .2s;
			transition: .2s;
		}

	#footer > span {
		width: 100%;
		display: inline-block;
		margin-top: 48px;
		position: relative;
		font-size: 11px;
	}


/* MEDIA QUERIES */
@media only screen and (min-width : 1280px) and (min-height : 800px) {
	#container{width:900px; height:604px;}
}

@media only screen and (max-width : 1024px) {
	/*#about, #competencias{width:100%;}*/
	#intro{display:block;}
	#banner br{display:none;}
	#projectos-logos > span{width:33.33333333333333%; height:185px; border-right:1px solid #f2f2f2 !important; border-bottom:1px solid #f2f2f2 !important;}
	#projectos-logos > span:nth-last-child(3), #projectos-logos > span:nth-last-child(2), #projectos-logos > span:nth-last-child(1){border-bottom:0 !important;}
	#projectos-logos > span:nth-child(6n+3), #projectos-logos > span:nth-child(6n+6){border-right:0 !important;}

	#container{width:551px; height:370px;}

	#flip-back{left:5%;}
	#flip{right:5%;}

	#nav > span{width:100%; font-size:40px; margin-right:75px;}
}

@media only screen and (min-width : 1023px) and (max-width : 1100px) {
	#competencias > div > div {
		padding: 0 10px;
	}
}

@media only screen and (max-width : 768px) {
	#projectos-logos{padding-left:25px; padding-right:25px;}
		#projectos-logos > span{width:50%;}
		#projectos-logos > span:nth-child(6n+3), #projectos-logos > span:nth-child(6n+6){border-right:1px solid #f2f2f2 !important;}
		#projectos-logos > span:nth-child(even){border-right:0 !important;}
		#projectos-logos > span:nth-last-child(3){border-bottom:1px solid #f2f2f2 !important;}

	#nav{width:100%;}
	#nav-btn{right:10px !important; top:10px !important;}
}

@media only screen and (max-width : 600px) {
	#competencias > div > div{display:block;}
	#competencias > div > div .title, #competencias > div > div .value{width:100%; text-align:center;}
	#competencias > div > div .title{margin-top:10px;}
	#competencias > div > div .value{margin-top:10px; margin-bottom:10px;}

	h1{font-size:26px;}
	#banner{font-size:35px; line-height:42px; padding:0px 32px;}

	#container{width:253px; height:170px;}

	#nav > span{width:100%; font-size:30px; margin-right:0;}
		#nav > span > i{text-align:center;}
}

@media only screen and (max-width : 480px) {
	#projectos-logos{padding-bottom:20px;}
		#projectos-logos > span{width:100%; border-right:0 !important;}
		#projectos-logos > span:nth-last-child(2){border-bottom:1px solid #f2f2f2 !important;}
		#projectos-logos > span:nth-child(6n+3), #projectos-logos > span:nth-child(6n+6){border-right:0 !important;}

	#flip-back{left:3%;}
	#flip{right:3%;}

	#footer{height:890px;}
		#footer > .bg-image{height:inherit;}
		#contactos{max-width:150px;}
			#contactos > a{width:100%; margin:40px auto;}
			#contactos > a:last-child{margin-bottom:10px;}
}