/* 
===================
====== MAIN =======
=================== */

body {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 100vh;
}

.ul-container {
  height: 99%;
}

main {
  background-color: #FBFBFF !important;
  padding: 0 !important;
}

#panel {
  background-color: #FBFBFF; 
}

.max-container {
  max-width: 980px;
  margin: 0 auto;
  width: 100%;
}

.breadcrumbs-container {
	max-width: 950px;
	margin: 4rem 0 2rem;
  padding: 3rem 0 1rem;
  height: auto;
}

.breadcrumbs {
  font-size:14px;
  color: #343434;
}

.link:hover {
  text-decoration: underline;
}

.active {
  color: #FF670F;
}


/* 
===================
====== FOOTER =====
=================== */

.termos-link {
	color: #fff;
}

/* 
===================
= RESPONSIVENESS ==
=================== */

@media screen and (min-width: 200px) and (max-width: 280px) {
  .max-container {
    padding: 0 2.5rem;
  }
}

@media screen and (min-width: 280px) and (max-width: 400px) {
  .max-container {
    padding: 0 2rem;
  }
}

@media screen and (min-width: 400px) and (max-width: 500px) {
  .max-container {
    padding: 0 1.8rem;
  }
}

@media screen and (max-width: 500px) {
  .max-container {
    max-width: 400px;
  }
}

@media screen and (min-width: 500px) and (max-width: 610px) {
  .max-container {
    padding: 0 6rem;
  }
}

@media screen and (min-width: 610px) and (max-width: 680px) {
  .max-container {
    padding: 0 5.5rem;
  }
}

@media screen and (min-width: 680px) and (max-width: 780px) {
  .max-container {
    padding: 0 3.5rem;
  }
}

@media screen and (min-width: 831px) and (max-width: 880px) {
  .max-container {
    padding: 0 3rem;
  }
}

@media screen and (min-width: 881px) and (max-width: 910px) {
  .max-container {
    padding: 0 1rem;
  }
}

@media screen and (max-width: 1024px) {
  .max-container {
    max-width: 600px;
  }
}


@media screen and (min-width: 1024px) and (max-width: 1100px) {
  .max-container {
    max-width: 760px;
  }
}

@media screen and (min-width: 1100px) and (max-width: 1140px) {
  .max-container {
    max-width: 840px;
  }
}

@media screen and (min-width: 1140px) and (max-width: 1200px) {
  .max-container {
    max-width: 880px;
  }
}


@media screen and (min-width: 1200px) and (max-width: 1240px) {
  .max-container {
    max-width: 940px;
  }
}

@media screen and (min-width: 1240px) and (max-width: 1280px) {
  .max-container {
    max-width: 980px;
  }
}

@media screen and (min-width: 1280px) {
  .max-container {
    max-width: 1024px;
  }
}