@import "./normalize.css";
:root {
	--color-accent: #0389ff;
	--color-body-light: white;
	--color-body: #e6e6e6;
	--color-menu: #e6e6e6; /* #0389ff; */
	--color-textDark1: #0e0336;
	--color-textDark2: #1e0577;
	--color-border: #acafb1;
	--color-highlight: #b5b8bc;
}

/* Typography */
html {
	/*62.5 % of 16px = 10px */
	font-size: 62.5%;
}
body {
	font-family: "Barlow Condensed", sans-serif;
	font-size: 1.6rem;
	line-height: 1.5;
	font-weight: 500;
	color: var(--color-textDark1);
	height: 100%;
	margin: 0;
}
h1,
h2,
h3 {
	color: var(--color-textDark2);
	/* margin-bottom: 1.5rem; */
}


h1 {
	font-size: 2.5rem;
	font-weight: 800;
}

bold{
	font-weight: 800;
}

h2 {
	font-size: 1.6rem;
	font-weight: 800;	
}

h3 {
	font-size: 1.6rem;
}

h4{
	font-size: 1.2rem;
}

h5 {
	font-size: 1.2rem;
}
p {
	margin-top: 0;
}

.tab {
	display: inline-block;
	margin-left: 40px;
}

@media screen and (min-width: 768px) {
	body {
		font-size: 1.8rem;
	}

	h1 {
		font-size: 3rem;
	}

	h2 {
		font-size: 1.8rem;
	}

	h3 {
		font-size: 1.8rem;
	}

	h4 {
		font-size: 1.4rem;
	}
}
@media screen and (min-width: 1024px) {
	body {
		font-size: 2rem;
	}

	h1 {
		font-size: 4rem;
	}

	h2 {
		font-size: 2rem;
	}

	h3 {
		font-size: 2rem;
	}

	h3 {
		font-size: 1.5rem;
	}
}

/* Icons */
.icon {
	width: 40px;
	height: 50px;
	justify-content: center;
}

/* Layouts*/
a {
	text-decoration: none;
}

.startline,
.endline {
	background-color: var(--color-menu);
	border-top: 1rem solid var(--color-accent);
	padding: 0.2rem 1rem;
	color: var(--color-textDark1);
}

.endline {
	display: flex;
	flex-direction: column;
	justify-content: left;
}
.contactdescription{
	float: left;
	width: 30%;
	padding: 2rem 1rem;

}
.socialmedia {
	display: flex;
	flex-direction: row;
	justify-content: left;
	border-top: 1rem solid var(--color-accent);
	background-color: var(--color-menu);
	padding-left: 2rem;
}
.itaguacu {
	background-color: var(--color-menu);
}

.DBEcolumn{
	float:left;
	width: 50%;
	padding: 1rem;
}

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

.startline > a,
.footicon {
	color: var(--color-textDark1);
	margin-left: 1rem;
	border-bottom: 1rem solid var(--color-menu);
	transition: 0.5s;
}

.startline > a:hover {
	transition: 0.5s;
	border-bottom: 1rem solid var(--color-accent);
}

.footicon:hover {
	transition: 0.5s;
	color: var(--color-accent);
}

.boxcarousel {
	padding: 1rem 0rem 2.5rem 0rem;
	background-color: var(--color-body-light);
}

.boxmaindescription {
	padding: 1rem 5rem 1rem;
	margin: 0rem 0rem;
	text-align: center;
	background-color: var(--color-body-light);
}

.boxdescription {
	padding: 1rem 5rem 1rem;
	text-align: left;
}

.boxdescription--light {
	background-color: var(--color-body-light);
}

.boxparagraph {
	padding: 1rem 5rem 1rem;
	text-align: justify;
}

.boxparagraph--light {
	background-color: var(--color-body-light);
}

.boxparagraph--dark {
	background-color: var(--color-menu);
}

.boxparagraph--italic {
	font-style: italic;
}

.grid-container {
	display: grid;
	grid-template-columns: auto auto;
	padding: 5px;
  }
  .grid-item {
	padding: 20px;
	text-align: center;
  }

.imglogo {
	height: 50px;
	margin: 10px;
}

.internalpeoplecard {
	position: relative;
	background-color: var(--color-menu);
	width: 240px;
	height: 310px;
	overflow: hidden;
	padding: 2rem 2rem;
	margin: 1rem 1rem;
	color: var(--color-textDark1);
	border-radius: 5px;
	justify-content: center;
	align-items: center;
}

.internallinkcard {
	position: relative;
	background-color: var(--color-menu);
	width: 240px;
	height: 280px;
	overflow: hidden;
	padding: 2rem 2rem;
	margin: 1rem 1rem;
	color: var(--color-textDark1);
	border-radius: 5px;
	justify-content: center;
	align-items: center;
}

.careercard {
	text-align: center;
	width: 30rem;
	background-color: var(--color-menu);
	overflow: hidden;
	padding: 2rem 2rem;
	margin: 1rem 1rem;
	color: var(--color-textDark1);
	border-radius: 5px;
	justify-content: center;
	align-items: center;

}

.careercard:hover {
	background-color: var(--color-highlight);
	opacity: 0.8;
	transition: 0.6s;
}

.linkPosition{
	justify-items: center;
	text-align: center;
}

.linkDescription {
	position: absolute; 
	bottom: 10px;
	left: 10px;
	right: 10px;
	/*display: none;*/
	padding-right: 0rem;
	justify-items: center;
	text-align: justify;
}

.internalpeoplecard:hover {
	border-bottom: 1rem solid var(--color-accent);
	opacity: 0.8;
	transition: 0.6s;
}

/*
.internalpeoplecard:hover > .linkDescription {
	display: block;
}*/

/*
.internallinkcard:hover > .linkDescription {
	display: block;
}*/

.linkTitle {
	
	padding: 1rem 2rem;
	font-size: 2rem;
    text-align: center;
}

.imgper{
	width: 100px;
	height: auto;
}

.imgperlink{
	width: 200px;
	height: auto;
}	

.imglink {
	width: 200px;
	height: auto;	
}

.personnelcontainer{
float: none;
}

.imgpersonnel {
	width: 200px;
	height: auto;
	float:left;
	margin-right: 2rem;	
}

.imgspan
{
	justify-content: center;
	display:flex;
	justify-items: center;
	align-items: center;
}

.itemlist
{
	text-align: center;
	font-size: 1.5rem;
}


.careers{
	padding: 3rem 1rem;
	display: flex;
	flex-direction: column;
	justify-items: center;
	align-items: center;
	gap: 1rem 0rem;
}


.thumbnails {
	justify-content: center;
	padding: 3rem 1rem;
	display: flex;
	flex-direction: column;
	justify-items: center;
	align-items: center;
	gap: 1rem 0rem;
}

.ml15 {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5em;
	text-align: center;
}

.ml15 .word {
	display: inline-block;
	line-height: 1rem;
	font-size: 3rem;
}

.contactcontainer,
.applycontainer {
	background-color: var(--color-body);
	display:flex;
	justify-content: center;
	margin-top: 0rem;
}

.contactcont {
	background-color: var(--color-body);
	display:flex;
	justify-content: center;
	margin-top: 2rem;
}
.contact:after {
	content: "";
	display: table;
	clear: both;
  }

.contactinfo1 {
	float: left;
	width: 40%;
}

.contactbox {
	display: flex;
	flex-direction: column;
	padding: 2rem 1rem;
}

.form-control {
	font-size: 1.6rem;
	width: 300px;
}
.googlemap {
	height: 220px;
	width: 220px;
	border-radius: 5px;
	border: 0.5rem solid var(--color-border);
}

.carousel-inner {
	/* 	margin: auto;
	height: auto;
	width: 100%;
	max-height: 300px; */
	width: 100%;
	z-index: 1;
	margin-bottom: 20px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  	
  background-size: 250%, 250%; 
}

.carousel-indicators [data-bs-target] {
	width: 10px;
	height: 10px;
	border-radius: 100%;
	position: relative; 
	bottom: -50px;
  }


.totalwidthimg {
	width: 100%;
	height: auto;
}

.centerimg {
	width: auto;
	height: 300px;
}

@media only screen and (min-width: 768px) {
	.imglogo {
		height: 72px;
		margin: 20px;
	}

	.thumbnails {
		display: grid;
		grid: repeat(3, 400px) / repeat(2, 350px);
		justify-items: center;
		align-items: center;
	}
    .careercard{
		width: 40rem;
	}
	.grid-container {
		display: grid;
		grid-template-columns: auto auto auto;
		padding: 10px;
	  }
	.linkPosition {
		bottom: 10px;
		left: 50px;
		right: 20px;
		padding-right: 0rem;
		justify-items: center;
		text-align: center;
	}
	.centerimg {
		width: auto;
		height: 400px;
	}

	.ml15 .word {
		display: inline-block;
		line-height: 1rem;
		font-size: 4rem;
	}
}

@media only screen and (min-width: 1048px) {
	.thumbnails {
		display: grid;
		grid: repeat(2, 450px) / repeat(3, 360px);
	}

	.careercard{
		width: 50rem;
	}
	.internallinkcard {
		width: 330px;
		height: 320px;
		padding: 1.5rem 1.5rem;
		margin: 1rem 1rem;
	}

	.internalpeoplecard {
		width: 280px;
		height: 360px;
		padding: 1.5rem 1.5rem;
		margin: 1rem 1rem;
	}

	.linkDescription {
		bottom: 10px;
		left: 20px;
		right: 20px;
		padding-right: 0rem;
		justify-items: center;
		text-align: justify;
	}

	.imgper{
		width: 180px;
		height: auto;
	}

	.imgperlink{
		width: 250px;
		height: auto;
	}

	.imglink {
		width: 300px;
		height: auto;
	}

	.imgpersonnel {
		width: 300px;
		height: auto;
		float:left;
	}
	.googlemap {
		height: 270px;
		width: 270px;
	}
}

/* Lists */
.list {
	list-style: none;
	padding-left: 0;
	color: var(--color-body);
}

.list--inline list__item {
	display: inline-block;
}

/* Collapsibles */

.collapsible__header {
	display: flex;
	justify-content: space-between;
}

.collapsible__heading {
	margin-top: 0;
	font-size: 3rem;
}

.collapsible__chevron {
	transform: rotate(-90deg);
	transition: transform 0.3s;
}

.collapsible__content {
	max-height: 0;
	overflow: visible;
	opacity: 0;
	/*transition: all 0.3s;*/
}

.collapsible--expanded .collapsible__chevron {
	transform: rotate(0);
}

.collapsible--expanded .collapsible__content {
	max-height: 100%;
	opacity: 1;
}

/* Navigation Bar */
#companylogo {
	height: 72px;
	padding-left: 1rem;
}

.buttonscontainer{
	width:100%;
	height:auto;
	display: flex;
	flex-direction: row;
	justify-content:center;
}


/* Button used to open the contact form - fixed at the bottom of the page */
.button {
	background-color: var(--color-accent);
	color: var(--color-body-light);
	padding: 2rem 2rem;
	border: none;
	cursor: pointer;
	opacity: 0.8;
	border-radius: 5px;
	width: 28rem;
	margin: 1rem;
  }


#myForm{
	display: none;
	position: fixed; 
	top: 0;
	left:0;
	width:100%;
	z-index: 5;
}   

#myRest{
	display:none;
	position: fixed; 
	width:100%;
	height:100%;
	top: 0;
	left:0;
	background-color: darkgrey;
	opacity: 0.8;
	z-index: 4;
} 


nav {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 0.3rem 1rem;
	background-color: var(--color-menu);
	/* font-size: 62.5%; */
}
.nav__list {
	width: 100%;
	list-style: none;
}

.nav li {
	font-family: "Barlow Semi Condensed", sans-serif;
	/*border-bottom: 0.1rem solid var(--color-menu);*/
	padding: 1rem 3rem;
	font-size: 1.8rem;
	font-weight: 600;
}

.nav li > a {
	display: block;
	color: var(--color-textDark2);
	transition: 0.3s;
	border-bottom: 1rem solid var(--color-menu);
}

.dropdown > a {
	display: block;
	color: var(--color-textDark2);
	transition: 0.3s;
}

.nav li > a:hover {
	transition: 0.3s;
	color: var(--color-accent);
}

.dropdown > a:hover {
	transition: 0.3s;
	color: var(--color-accent);
}

.dropdown-content {
	border: 0.5rem solid var(--color-menu);
}

.nav li .dropdown-content-short {
	position: absolute;
	background-color: var(--color-menu);
	padding: 0;
	left: 0;
	width: 250px;
	height: 160px;
	z-index: 2;
	display: none; /* hides sublists */
	border: 0.5rem solid var(--color-accent);
}

.nav li .dropdown-content {
	position: absolute;
	background-color: var(--color-menu);
	padding: 0;
	left: 0;
	width: 300px;
	height: 320px;
	z-index: 2;
	display: none; /* hides sublists */
	border: 0.5rem solid var(--color-accent);
}

 .nav li:hover ul {
	display: block;
}  /* shows sublist on hover */

 .nav li > a:hover .subm {
	display: block;
} 

.nav__item > a > .icon--primary {
	fill: var(--color-textLight1);
} 

.nav__toggler {
	opacity: 0.8;
	transition: box-shadow 0.15s;
	cursor: pointer;
}

.nav.collapsible--expanded .nav__toggler {
	opacity: 1;
	box-shadow: 0 0 0 3px var(--color-accent);
	border-radius: 5px;
}

.dropdown:hover .dropdown-content {
	display: block;
}

.dropdown:hover .dropdown-content-short {
	display: block;
}

@media screen and (min-width: 768px) {
	.nav__toggler {
		display: none;
	}
	.nav__list {
		width: auto;
		display: flex;
		font-size: 1.5rem;
		max-height: 100%;
		opacity: 1;
	}
	.nav li {
		padding: 1rem 1rem;
		border: 0;
		display: block;
		position: relative;
		float: left;
		text-align: center;
	}

	.nav li > a:hover {
		color: var(--color-textDark2);
		transition: 0.5s;
		border-bottom: 1rem solid var(--color-accent);
	}

	.dropdown:hover {
		color: var(--color-accent);
	}
}