* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-family: 'Flama';
  font-size: 62.5%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background-color: #fafafa;
  margin: 0;
}

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.6rem;
}

h1 {
  width: 100%;
  max-width: 550px;
  margin: 0;
  margin-bottom: 4.8rem;
  text-transform: uppercase;
  font-size: 4.8rem;
  color: #f25927;
  text-align: center;
}

h1 span {
  display: block;
  text-transform: uppercase;
  font-weight: bold;
  color: #656565;
  opacity: .5;
  text-align: center;
  font-size: 2.4rem;
}

.linha-fina {
  width: 100%;
  max-width: 550px;
  font-size: 2.1rem;
  line-height: 3.15rem;
  color: #656565;
  margin-bottom: 4.8rem;
  text-align: center;
}

.map-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1280px;
  border: 1px solid #e5e5e5;
  margin: auto;
  margin-bottom: 7.2rem;
}

#map {
  max-width: 1440px;
  width: 100%;
  height: 640px;
}

.painel {
  min-width: 320px;
  width: 320px;
  height: 640px;
  border-left: 1px solid #e5e5e5;
  background-color: #fff;
}

.infoTitle {
  font-size: 1.4rem;
  font-weight: bold;
  color: #f25927;
}

.btGoogle {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  border: 1px solid #e5e5e5;
  padding: 1.2rem;
  color: #656565;
  font-size: 1.4rem;
  margin-top: 1.2rem;
}

.btGoogle:hover {
  color: #f25927;
  background-color: #f5f5f5;
}

.painel-placeholder {
  color: #656565;
  font-weight: bold;
  opacity: .5;
  line-height: 2.4rem;
}

section {
  width: 100%;
  max-width: 550px;
  margin-bottom: 7.2rem;
}

.section-title {
  font-size: 3.2rem;
  color: #f25927;
  font-weight: bold;
  margin-bottom: 2.4rem;
}

.cartao-olimpico p,
.transporte-publico p {
  width: 100%;
  font-size: 1.8rem;
  line-height: 2.7rem;
  margin-bottom: 2.4rem;
}

.obs-container {
  margin-bottom: 2.4rem;
}

.obs {
  display: block;
  font-size: 1.4rem;
  margin-bottom: .6rem;
  color: #656565;
}

.col-3 {
  display: flex;
  margin-bottom: 2.4rem;
}

.col {
  width: 33.3%;
}

.col-title {
  font-size: 2.4rem;
  color: #f25927;
  font-weight: bold;
}

.col-content {
  font-size: 1.8rem;
  color: #656565;
}

.col-img {
  max-width: 4.8rem;
  margin-bottom: 1.2rem;
}

.col-tag {
  font-size: 1.6rem;
  text-transform: uppercase;
  font-weight: bold;
  color: #656565;
  opacity: .5;
}

/* */

button {
  margin-bottom: 48px;
}

.content {
  font-size: 1.6rem;
}

.map-container.opacity {
  opacity: .25;
}

.select-container{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 2.4rem;
}

select {
  -webkit-appearance: none;
  width: 100%;
  max-width: 550px;
  height: 48px;
  border: 1px solid #e5e5e5;
  border-radius: 0;
  background-color: #fff;
  padding-left: 1.2rem;
  font-size: 1.6rem;
  margin-bottom: 2.4rem;
}

select:hover {
  cursor: pointer;
  border: 1px solid #656565;
}

h2 {
  margin: 0;
  font-size: 1.6rem;
  text-transform: uppercase;
  color: #f25927;
}

h3 {
  margin: 0;
  text-transform: uppercase;
}

h4 {
  margin: 0;
  font-size: 1.4rem;
  margin-bottom: .6rem;
  line-height: 2.1rem;
}

h5 {
  margin: 0;
  font-size: 1.4rem;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}

p {
  margin: 0;
}

.icone-transporte {
  max-width: 3.2rem;
  margin-right: 1.2rem;
}

.trajeto {
  font-size: 1.4rem;
  margin-bottom: .6rem;
}

.linha {
  font-size: 1.4rem;
}

.brt-entry {
  margin-bottom: 2.4rem;
  margin-left: 4.4rem;
}

.onibus-entry {
  margin-bottom: .6rem;
  margin-left: 4.4rem;
}

.trem-entry {
  margin-bottom: 1.2rem;
  margin-left: 4.4rem;
}

.metro-entry {
  margin-bottom: .6rem;
  margin-left: 4.4rem;
}

/* painel */

.painel {
  padding: 1.2rem;
  overflow-y: scroll;
}

.endereco {
  font-size: 1.4rem;
  color: #656565;
  margin-bottom: 1.2rem;
}

hr {
  margin: 0;
  margin-bottom: 1.2rem;
  border: none;
  height: 1px;
  background-color: #e5e5e5;
}

.atividade {
  font-size: 1.4rem;
  margin-bottom: .6rem;
}

.atividade:last-child {
  margin-bottom: 0;
}

.atividade-container {
  margin-bottom: 1.2rem;
}

.caminhada {
  font-size: 1.4rem;
  color: #656565;
}

.info {
  width: 100%;
  max-width: 320px;
  font-size: 1.4rem;
  margin-bottom: 2.4rem;
  line-height: 2.1rem;
}

.trem-wrap,
.brt-wrap,
.metro-wrap,
.onibus-wrap {
  margin-bottom: 1.2rem;
}

.fa-arrows-h {
  font-size: 1.6rem;
  margin: 0 .6rem 0 .6rem;
}

/* select2 */

.select2-container--default .select2-selection--single {
  border: 1px solid #e5e5e5;
  border-radius: 0;
  height: 4.8rem;
  font-size: 1.6rem;
  font-weight: bold;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #656565;
  line-height: 4.8rem;
  padding-left: 1.2rem;
}

.select2-dropdown {
  border: 1px solid #e5e5e5;
}

.select2-results__option {
  padding: 1.2rem;
  font-size: 1.6rem;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  height: 2.4rem;
  font-size: 1.6rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 48px;
}

/* painél responsivo */

@media (max-width: 720px)
{
  .map-container {
    flex-direction: column;
  }
  .painel {
    border-left: 0;
    min-width: 100%;
    width: 100%;
    height: 240px;
  }
  #map {
    height: auto;
    padding-bottom: 100%;
  }
}

.obs-container {
  margin-bottom: 0;
}

.modalidades {
  font-size: 1.4rem;
  color: #656565;
  text-transform: uppercase;
  font-weight: bold;
  opacity: .5;
  margin-bottom: 1.2rem;
}

.fa-circle {
  font-size: .8rem;
  margin-left: 1.2rem;
  color: #656565;
  opacity: .5;
}

.atividade {

}

.atividade.ativo {
  font-weight: 500;
  color: #f25927;
}

/* top */

a.oesp {
  color: #656565;
  font-weight: normal;
  font: 2.4rem/1 "Marcas Estadão";
  opacity: .5;
  text-decoration: none;
}

.oesp:before {
    content: '\f000';
}

.oesp:hover {
  cursor: pointer;
  color: #f25927;
  opacity: 1;
}

.top {
  width: 100%;
  margin-top: 1.2rem;
  display: flex;
  justify-content: space-between;
  margin-bottom: 7.2rem;
}

.top ul {
  margin: 0;
  padding: 0;
}

.top li {
  list-style: none;
  display: inline-block;
  font-size: 2.1rem;
  margin-right: 2.4rem;
  color: #656565;
}

.top li:last-child {
  margin-right: 0;
}

.top li i {
  opacity: .5;
}

.top li i:hover {
  cursor: pointer;
  color: #f25927;
  opacity: 1;
}

/* */

.transporte-entry {
  margin-bottom: 4.8rem;
}

.transporte-entry img {
  width: 100%;
  margin-bottom: 2.4rem;
}

@media (max-width: 550px) {
  h1 {
    font-size : 3.6rem;
    margin-bottom: 3.6rem;
  }
  h1 span {
    font-size: 1.6rem;
  }
  .linha-fina {
    font-size: 1.575rem;
    line-height: 2.3625rem;
    margin-bottom: 3.6rem;
  }
  .section-title {
    font-size: 2.4rem;
    margin-bottom: 1.8rem;
  }
  .cartao-olimpico p, .transporte-publico p {
    font-size: 1.35rem;
    line-height: 2.025rem;
  }
  .col-title {
    font-size: 1.8rem;
  }
  .col-content {
    font-size: 1.35rem;
  }
  .obs-container {
    margin-bottom: 0;
  }
  .obs {
    font-size: 1.2rem;
  }
  .map-container {
    margin-bottom: 5.4rem;
  }
  section {
    margin-bottom: 5.4rem;
  }
  .col-image {
    max-width: 3.6rem;
    margin-bottom: .9rem;
  }
  .col-tag {
    font-size: 1.2rem;
  }
  .col-title {
    font-soze
  }
  .transporte-entry img {
    margin-bottom: 1.8rem;
  }
  .transporte-entry p {
    margin-bottom: 0;
  }
  .transporte-entry {
    margin-bottom: 3.6rem;
  }
  .select2-container--default .select2-selection--single {
    font-size: 1.2rem;
  }
  .select2-results__option {
    font-size: 1.2rem;
  }
}

.img-cartao {
  width: 100%;
  display: block;
  margin-bottom: 2.4rem;
}