@charset "UTF-8";
/**
	*#	Add Vendors
	*	Adiciona prefixos nas propriedades CSS compatíveis com múltiplos browsers:
	*
	*	$property 			-> Propriedade CSS a receber os prefixos.
	*	$value 				-> O valor da propriedade.
*/
/**
	*#	Center Absolute
	*	Centraliza um elemento absolute na horizontal, vertical ou em ambos os sentidos.
	*
	*	$direction 			-> Sentido da centralização. Utilize 'H' para horizontal, 'V' para vertical ou 'C' para ambos.
*/
/**
	*#	Render Arrow
	*	Renderiza a forma de uma seta na posição desejada.
	*
	*	$direction 			-> Direção à qual a seta está apontando. Utilize 'top', 'right', 'bottom ou 'left'.
	*	$size 				-> Tamanho da seta, em pixels.
	*	$color 				-> Cor da seta.
*/
/**
	*#	Responsive
	*	Prepara o CSS para receber estilos responsivos.
	*
	*	$type	 			-> Se o responsivo está calculando o tamanho máximo ou mínimo da tela. Utilize 'max' ou 'min'.
	*	$pixels				-> Tamanho da tela.
*/
/**
	*#	Set Absolute
	*	Configura o posicionamento absolute de um elemento.
	*
	*	$top 				-> Posicionamento superior. Utilize 'auto' para ignorar.
	*	$top 				-> Posicionamento da direita. Utilize 'auto' para ignorar.
	*	$top 				-> Posicionamento inferior. Utilize 'auto' para ignorar.
	*	$top 				-> Posicionamento da esquerda. Utilize 'auto' para ignorar.
*/
/**
	*#	Short Text
	*	Concatena reticências à qualquer texto que ultrapasse a largura máxima de seu elemento mãe.
*/
/**
	*#	Px to Rem
	*	Converte pixels para o padrão REM:
	*
	*	$value 				-> O valor em pixels.
*/
/**
	*#	Color
	*	Recupera uma cor de um array baseado na posição e no nome do array fornecido:
	*
	*	$array 				-> O vetor específico.
	*	$value 				-> O nome da posição que está guardado o valor.
*/
@keyframes bounce {
  0% {
    bottom: 14px;
  }
  50% {
    bottom: 7px;
  }
  50% {
    bottom: 14px;
  }
  50% {
    bottom: 21px;
  }
  100% {
    bottom: 14px;
  }
}
.background {
  margin: 0 auto;
  max-width: 1440px;
  background-image: url("../assets/backgrounds/deafult.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.banner {
  display: block;
  width: 100%;
}
.banner img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 1440px;
  border-top: 1px solid #11747b;
  border-bottom: 1px solid #11747b;
}

h1 {
  margin-bottom: 25px;
  font-size: 32px;
  font-family: "Bebas Neue", cursive;
  font-weight: 400;
  color: #636363;
}

p {
  margin-bottom: 15px;
  font-size: 22px;
  font-family: "Big Shoulders Display", cursive;
  color: #444444;
  line-height: 140%;
}

.about {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 70px;
  margin-bottom: 50px;
  text-align: center;
}
.about h1 {
  max-width: 480px;
}
.about p {
  max-width: 850px;
}
.about .how_we_work {
  margin-bottom: 25px;
  padding: 20px 30px;
  border-radius: 50px;
  border: 1px solid #11747b;
}
.about .how_we_work p {
  margin: 0;
  max-width: auto;
  font-size: 20px;
  color: #11747b;
}

.advantages {
  margin-bottom: 60px;
}
.advantages .advantage {
  padding: 20px 50px;
  box-sizing: border-box;
  border: 4px solid #eaeaea;
  border-radius: 10px;
  text-align: center;
  background-color: #ffffff;
}
.advantages .advantage .icon {
  height: 60px;
  margin-bottom: 15px;
}
.advantages .advantage svg path {
  fill: #11747b;
}
.advantages .advantage h1 {
  margin-bottom: 10px;
}
.advantages .advantage p {
  margin-bottom: 0;
}

@media (max-width: 1023px) {
  .advantages {
    flex-direction: column !important;
  }
  .advantages .advantage {
    padding: 20px 20px;
  }
}
.our-bikes {
  padding-bottom: 50px;
  text-align: center;
}
.our-bikes h1 {
  margin-bottom: 40px;
}
.our-bikes .bikes {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 700px;
}
.our-bikes .bikes .bike {
  margin-bottom: 30px;
  width: 270px;
  text-align: center;
}
.our-bikes .bikes .bike h1 {
  font-size: 25px;
  margin-bottom: 10px;
}
.our-bikes .bikes .bike p {
  margin-bottom: 0;
}
.our-bikes .bikes .bike .thumbnail {
  display: inline-block;
  position: relative;
  width: 150px;
  height: 150px;
  margin-bottom: 15px;
  overflow: hidden;
  border: 2px solid #11747b;
  border-radius: 100%;
}
.our-bikes .bikes .bike .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .our-bikes .bikes {
    width: 100%;
  }
  .our-bikes .bikes .bike {
    width: 40%;
  }
}
@media (max-width: 480px) {
  .our-bikes .bikes {
    width: 100%;
  }
  .our-bikes .bikes .bike {
    width: 100%;
  }
}
.image-gallery {
  text-align: center;
}
.image-gallery .gallery {
  margin: 0 auto 30px auto;
  max-width: 850px;
}
.image-gallery .gallery .thumbnail {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.image-gallery .gallery .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}
.image-gallery .gallery .slick-dots {
  position: static;
  padding: 20px 0 20px 0;
}
.image-gallery .gallery .slick-dots li {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 5px 5px;
  border-radius: 100%;
  border: 2px solid #11747b;
}
.image-gallery .gallery .slick-dots li button:before {
  display: none;
}
.image-gallery .gallery .slick-dots li.slick-active {
  position: relative;
}
.image-gallery .gallery .slick-dots li.slick-active:before {
  content: "";
  width: 11px;
  height: 11px;
  background-color: #11747b;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  outline: 2px solid #fff;
}

@media (max-width: 767px) {
  .image-gallery .gallery .thumbnail {
    width: 150px;
    height: 150px;
  }
}
#slick {
  display: none;
}

@media (max-width: 560px) {
  .image-gallery #gallery {
    display: none;
  }
  .image-gallery #slick {
    display: block;
  }
  .image-gallery .gallery .thumbnail {
    width: 300px;
    height: 300px;
  }
}
.btn-1 {
  display: inline-block;
  box-sizing: border-box;
  font-family: "Big Shoulders Display", cursive;
  background-color: #11747b;
  color: #FFFFFF;
  transition: 0.3s;
  text-decoration: none;
  border: none;
  border-radius: 50px;
  outline: none;
  padding: 12px 18px;
  font-size: 26px;
  cursor: pointer;
  transition: 0.5s;
}
.btn-1:hover {
  background-color: #11747b;
  transition: 0.5s;
}
.btn-1:disabled {
  cursor: default;
}/*# sourceMappingURL=home.css.map */