/* -------- HACKS ---------------------------------------------------------- */
*, *:before, *:after { box-sizing: border-box; /* https://css-tricks.com/box-sizing/ */ }
html{ -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */ }


/* -------- MOBILE --------------------------------------------------------- */
@media (min-width: 300px) {

body{
	font-family: campaign,sans-serif;
	font-weight: 460;
	font-style: normal;
	font-size: 20px;
	margin: 0;
	padding-left: 10px;
	padding-right: 10px;
}


header{
    display: flex;
    align-items: center;
    background-color: white;
    height: 80px;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 3;
}

header h1{
  color: #26BD78;
  font-size: 1em;
	font-family: forma-djr-banner, sans-serif;
	font-weight: 700;
	font-style: normal;
}

.nav{
  overflow-y: scroll;
  display: inline-flex;
  margin-left: 20px;
  margin-right: 20px;
}

.nav a{
  color: black;
  text-decoration: none;
  font-size: 0.5em;
  margin: 5px;
  font-weight: 600
}


footer {
	background-color: white;
	height: 30px;
	width: 100%;
	display: grid;
	align-items: center;
	margin-top: 40px;
	padding-bottom: 20px;
	border-top: solid;
	border-color: grey;
	border-width: 3px;
}

footer p{
	line-height: 130%;
	font-weight: 500;
	font-style: normal;
	margin: 0;
	font-size: 0.4em;
	color: grey;
	padding-top: 10px;
	padding-bottom: 20px;
	text-align: center;

}

a{
	text-decoration: none;
	color: inherit;
}

footer a:hover{
	text-decoration: underline;
	text-decoration-color: red;
}


.hero{
	background-image: url("../img/ladario-4.jpg");
	height: 300px;
	width: 100%;
	background-size: cover;
	margin-left: 0px;
	padding-top: 150px;
}

.intro{
	padding-top: 20px;
}

.intro p{
	line-height: 150%;
	font-weight: 300;
	margin-top: 0;
	color: black;
	font-size: 0.8em;
}

.intro a{
	text-decoration: underline;
	color: black;
}

.about p {
	margin-top: 20px;
	margin-bottom: 20px;
	line-height: 170%;
	font-size: 0.6em;
	font-weight: 400;
	color: grey;

}

.about-photo{
	margin-top: 80px;
	height: 200px;
	background-image: url("../img/jorgemaia.jpg");
	background-size: cover;
	background-position: center;
}

.about a{
	text-decoration: underline;
	text-decoration-color: #26BD78;
}

.categories-desktop{
	display: none;
}



.categories-mobile {
	text-align: left;
	display: grid;
	grid-template-columns: 1fr;
	grid-row-gap: 20px;
	margin-top: 20px;
	margin-bottom: 20px;


}

.categories-mobile a{
	font-size: 0.6em;
	font-weight: 700;
	line-height: 140%;
	color: grey;
	text-align: left;
	padding-right: 20%

}

.categories-mobile a:hover{
	color: black;
}



.invmunespr_portf_portf, .invmunespr_portf, .invespprivpub_portf, .equidesp_portf, .invmuneqsc_portf, .invmunrebarerib_portf,
.espscequirel_portf, .invmunep_portf, .jprivado_portf, .espintpi_portf, .invmuneqsc2_portf, .ubcuf_portf, .espurbpro_portf{
	border-bottom: solid;
	border-width: 2px;
	border-color: #26BD78;
	height: 60px;
	width: auto;
	display: grid;
	align-items: center;
}

.invmunespr_portf_portf{
	margin-top: 80px;
}


.portfolio-mobile h2{
	font-size: 0.8em;
	font-weight: 700;
	margin-bottom: 15px;
	color: #26BD78;
	text-align: left;

}

.portfolio-mobile h2:hover{
	text-decoration: none;

}

.projects{
	padding-top: 30px;
}


.projects p{
	font-weight: 700;
	font-size: 0.9em;
	margin-top: 10px;
	margin-bottom: 0px;
	padding-bottom: 5px;
}

.projects p :hover {
	text-decoration: none;
}

.projects a{
	color: black;
}



.projects img {
	margin-top: 10px;
	margin-bottom: 20px;
	width: 100%;
	height:200px;
	object-fit: cover;
}

.projectintro h2{
	line-height: 110%;
	font-weight: 700;
	font-size: 30px;
	margin-top: 90px;
	margin-bottom: 0;
	color: black;
}

.projectintro h3{
	line-height: 95%;
	font-weight: 700;
	font-size: 30px;
	margin-top: 10px;
	margin-bottom: 20px;
	color: grey;
}

.projectintro p{
	font-size: 0.65em;
	line-height: 170%;
	font-weight: 300;
	margin-top: 10px;
	margin-bottom: 20px;
	color: grey;

}
.slideshow, .container{
	width: 100%;
	margin-bottom: 0px;
	align-items: center;
}

.mySlides img{

	margin-top: 10px;
	margin-bottom: 10px;
	width: 100%;
	object-fit: cover;
}

/*SLIDESHOW*/

* {
  box-sizing: border-box;
}

img {
  vertical-align: middle;
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
}


/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
	position: absolute;
  top: 40%;
  width: auto;
  padding: 30px;
  color: #26BD78;
  font-weight: bold;
  font-size: 20px;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a white background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(255, 255, 255, 0.25);
}


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

/* Six columns side by side */
.column6 {
  float: left;
  width: 16.66%;
}
/* 8 columns side by side */
.column8 {
  float: left;
  width: 12.5%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}


.planta{
	border:  solid;
	border-width: 1px;
}

.planta img{
	width: 100%;
	padding: 10px;
}

.tecnica{
	color: rgba(0, 0, 0, 0.2);
	font-size: 10px;
	line-height: 120%;
	text-align: center;
	margin-top: 20px;
}

u{
	text-decoration-color: #26BD78;
}

b{
	color: grey;
}

.portfolio-desktop{
	display: none;
}


}

/* -------- MOBILE LANDSCAPE ----------------------------------------------- */




/* -------- TABLET --------------------------------------------------------- */
@media (min-width: 768px){

}


/* -------- LAPTOP --------------------------------------------------------- */
@media (min-width: 1024px) {



	.categories-desktop{
		display: contents;
	}

	.portfolio-desktop{
		display: contents;
	}

	body{
		padding-left: 90px;
		padding-right: 90px;
	}

	.projectintro{

		padding-top: 100px;
	}

	.projectintro h2{
			line-height: 100%;
			font-weight: 700;
			font-size: 2.3em;
			margin-right: 300px;
			margin-bottom: 20px;
			color: black;

		}

		.projectintro h3{
				margin-top: 0;
				line-height: 120%;
				font-weight: 700;
				font-size: 2.3em;
				margin-right: 300px;
				margin-bottom: 30px;
				color: grey;

			}


 	.projectintro p{
		padding-left: 80px;
		padding-right: 80px;
		margin-bottom: 150px;
		column-count:2;
		column-gap: 40px;
		column-rule: solid;
		column-rule-width: 1px;
		line-height: 170%;
		font-size: 0.9em;
		font-weight: 300;
		color: grey;

		}

		.projects{
			padding-top: 0px;
		}



	.categories-mobile{
		display: none;
	}


	.categories-desktop {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-column-gap: 30px;
		grid-row-gap: 10px;
		margin-top: 30px;
		margin-left: 0px;
		margin-right: 0px;
	}


	.categories-desktop a{
		font-size: 1em;
}


	.hero{
		height: 700px;
		line-height: 100%;
	}

	.intro{
		margin-top: 60px;
		margin-bottom: 50px;
	}

	.intro p{
		font-size: 1.5em;
		line-height: 140%;
		margin: 0;
		font-weight: 300

	}



	.about p {
		margin-top: 100px;
		padding-left: 80px;
		padding-right: 80px;
		margin-bottom: 150px;
		column-count:2;
		column-gap: 40px;
		column-rule: solid;
		column-rule-width: 1px;
		line-height: 170%;
		font-size: 0.9em;
		font-weight: 500;
		color: grey;

	}

	.about-photo{
		margin-top: 150px;
		height: 600px;
		background-size: cover;
	}

	header{
	  display: flex;
	  align-items: center;
	  background-color: white;
	  height: 150px;
	  width: 100%;
	  position: fixed;
	  top: 0;
	  z-index: 3;
		margin: 0;
	}

	header h1{
	    font-size: 3em;
	}

	.nav{
	  overflow-y: scroll;
	  display: inline-flex;
	  margin-right: 10px;
	  padding-right: 90px;
	}

	.nav a{
	  color: black;
	  text-decoration: none;
	  font-size: 1em;
		margin: 10px;
	  font-weight: 600
	}

	.nav a:hover{
	  text-decoration: underline;
	  text-decoration-color: #26BD78;
	}

	.projects{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-column-gap: 40px;
		margin-bottom: 60px;
		margin-top: 60px;
	}

	.projects p{
		color: #26BD78;
		font-weight: 700;
		font-size: 1.6em;
		line-height: 120%;
		margin-top: 30px;
		margin-bottom: 0px;

	}

	.portfolio-desktop h2{
		font-size: 2em;
		font-weight: 700;
		color: grey;
		text-align: left;
		margin-right: 30%;
}

.portfolio-mobile{
	display: none;
}


	.projects img {
		margin-top: 10px;
		margin-bottom: 20px;
		width: 100%;
		height:350px;
		object-fit: cover;
		object-position: center;



	}




	.invmunespr_portf:hover, .invespprivpub_portf:hover, .equidesp_portf:hover, .invmuneqsc_portf:hover, .invmunrebarerib_portf:hover,
	.espscequirel_portf:hover, .invmunep_portf:hover, .jprivado_portf:hover, .espintpi_portf:hover, .invmuneqsc2_portf:hover, .ubcuf_portf:hover, .espurbpro_portf:hover{
		border: solid;
		border-color: #26BD78;
		border-width: 2px;
		height: 150px;
		width: auto;
		display: grid;
		align-items: center;
		margin-top: auto;

	}

	.invmunespr_portf_portf, .invmunespr_portf, .invespprivpub_portf, .equidesp_portf, .invmuneqsc_portf, .invmunrebarerib_portf,
	.espscequirel_portf, .invmunep_portf, .jprivado_portf, .espintpi_portf, .invmuneqsc2_portf, .ubcuf_portf, .espurbpro_portf, 	.invmunespr_portf_portf:hover, .invmunespr_portf:hover, .invespprivpub_portf:hover, .equidesp_portf:hover, .invmuneqsc_portf:hover, .invmunrebarerib_portf:hover,
	.espscequirel_portf:hover, .invmunep_portf:hover, .jprivado_portf:hover, .espintpi_portf:hover, .invmuneqsc2_portf:hover, .ubcuf_portf:hover, .espurbpro_portf:hover{
		height: 150px;
		border: none;
		border-bottom: solid;
		border-color: #26BD78;

	}

	.invmunespr_portf_portf{
		margin-top: 160px;
	}

	.parqueCinfaes, .praceta, .estadio, .parqueRio, .urbanizacao, .casaJUV , .parqueMaia {
	grid-column: span 3;
	}

	.igrejaA, .rotundaA, .casaCA, .casaOSM, .casa, .casaJUV {
	grid-column: span 2;
	}

	.mySlides, .imgV{
		margin: 0px;
		width: 100%;
	}

	.mySlides img{
		top: 50%;
	  left:0;
		transform: translate(0%, 0%);
		margin: 0;
		padding-left: 7%;
		padding-right: 7%;
		margin-top: 10px;
		margin-bottom: 10px;
		width: 100%;
		object-fit: cover;
	}
	.imgV img{
		top: 50%;
	  left:0;
		transform: translate(50%, 0%);
		max-height: 100%;
		padding-left: 7%;
		padding-right: 7%;
		margin: 0;
		margin-top: 10px;
		margin-bottom: 10px;
		width: 50%;
		object-fit: cover;
	}


	footer{
		margin-top: 80px;
		height: 100px;
}
	footer p{
		font-size: 0.6em;
		padding-bottom: 10px;
	}

	.planta{
		padding: 30px;
		border-top:  solid;
		border-width: 1px;
	}


	.tecnica{
		padding-left: 70px;
		padding-right: 70px;
		color: rgba(0, 0, 0, 0.5);
		font-weight: 400;
		font-size: 15px;
		line-height: 170%;
		text-align: center;
		margin-top: 50px;

	}

}
/* -------- LAPTOP L ------------------------------------------------------- */
@media (min-width: 1200px) {

}