@import url("https://fonts.googleapis.com/css2?family=Exo:wght@400;700&display=swap");

:root {
  --light: #ffffff;
  --dark: #000000;
  --accent: #3cb5e9;
  --color-1: #7ec052;
  --color-2: #ffb948;
  --color-3: var(--accent);
}

* {
  box-sizing: border-box;
}

*,
a,
input,
select,
textarea,
option,
button {
  outline: none !important;
  /* Remove black border given by Chrome bug, see: https://support.google.com/chrome/thread/48974735?hl=en */
}

html,
body,
button,
input,
select {
  color: var(--dark);
  font-family: "Exo", sans-serif;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  margin: 0;
  padding: 0;
  /* Prevent font scaling in landscape */
}

body {
  background-image: url("asset/background.jpg");
  background-size: cover;
}

main {
  position: relative;
  margin: auto;
}


@media screen and (min-width: 600px) {
  main {
    max-width: 428px; /*Apple iPhone 12 Pro Max viewport size: 428 x 926*/
    min-height: 926px;
    border: 2px dashed var(--dark);
  }
}

p a:any-link, ul li a:any-link{
  color: var(--accent);
}

​ p {
  margin: 0;
}

p + p {
  margin-top: 18px;
}

.wrapper {
  padding: 20px;
}

.header {
  margin-bottom: 28px;
}

.header + .cluster{
  margin-top: 61px;
}

.header__logo {
  height: 50px;
  margin-bottom: 30px;
}

.header__title {
  display: block;
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

.header__title--small {
  font-size: 18px;
}

.header__description {
  max-width: 80%;
}

.header--cover {
  height: 160px;
  margin: 0;
  position: relative;
}

.cover__image {
  height: 160px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}

.cluster a {
  margin-bottom: 15px;
}

.cluster a:last-child {
  margin-bottom: 0;
}

.cta:any-link {
  border-radius: 10px;
  display: grid;
  font-size: 18px;
  font-weight: 700;
  min-height: 55px;
  place-items: center start;
  text-decoration: none;
  width: 100%;
}

.cta--color {
  color: var(--light);
  /*padding: 0 28px;*/
}

.cta--color__icon {
  height: 18px;
  margin-right: 28px;
}

.cta--color__icon--back{
  height: 30px;
}

.header .cta--color{
  /*padding-left: 20px;*/
}

.cta--color--green {
  background-color: var(--color-1);
}

.cta--color--orange {
  background-color: var(--color-2);
}

.cta--color--blue {
  background-color: var(--color-3);
}

.cta__wrapper {
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.cta--white {
  background-color: var(--light);
  box-shadow: 10px 10px 20px #0000001a;
  color: var(--dark);
}

.cta--border-accent {
  display: block;
  border-right: 30px solid var(--accent);
  padding: 20px 0 10px 20px;
}

.cta__image {
  object-fit: cover;
  width: 100px;
  height: 55px;
  border-radius: 10px;
  margin-right: 20px;
  margin-left: -20px;
}

.cta__label {
  display: block;
  font-size: 16px;
  font-weight: 400;
}

.button--back__icon {
  height: 40px;
  margin-right: 20px;
}

/***/

.accordion {
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  outline: none;
  padding: 6px 0;
  text-align: left;
  transition: 0.4s;
  width: 100%;
}

.accordion::after {
  content: url("data:image/svg+xml,%3Csvg width='16px' height='10px' viewBox='0 0 16 10' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EIndicator Copy%3C/title%3E%3Cg id='Layout' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='FAQ' transform='translate(-999.000000, -1096.000000)' fill='%23202020' fill-rule='nonzero'%3E%3Cpath d='M1014.55104,1096.46552 C1013.95904,1095.84483 1013.00294,1095.84483 1012.41095,1096.46552 L1006.96206,1102.13261 L1001.58905,1096.46552 C1000.99706,1095.84483 1000.04096,1095.84483 999.448962,1096.46552 C999.161624,1096.76611 999,1097.17529 999,1097.60214 C999,1098.029 999.161624,1098.43817 999.448962,1098.73876 L1005.88442,1105.52646 C1006.16941,1105.82953 1006.55735,1106 1006.96206,1106 C1007.36676,1106 1007.7547,1105.82953 1008.03969,1105.52646 L1014.55104,1098.73876 C1014.83838,1098.43817 1015,1098.029 1015,1097.60214 C1015,1097.17529 1014.83838,1096.76611 1014.55104,1096.46552 L1014.55104,1096.46552 Z' id='Indicator-Copy'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  float: right;
}

.accordion.active::after {
  content: url("data:image/svg+xml,%3Csvg width='16px' height='10px' viewBox='0 0 16 10' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EIndicator Copy%3C/title%3E%3Cg id='Layout' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='FAQ' transform='translate(-999.000000, -1096.000000)' fill='%23202020' fill-rule='nonzero'%3E%3Cpath d='M1014.55104,1096.46552 C1013.95904,1095.84483 1013.00294,1095.84483 1012.41095,1096.46552 L1006.96206,1102.13261 L1001.58905,1096.46552 C1000.99706,1095.84483 1000.04096,1095.84483 999.448962,1096.46552 C999.161624,1096.76611 999,1097.17529 999,1097.60214 C999,1098.029 999.161624,1098.43817 999.448962,1098.73876 L1005.88442,1105.52646 C1006.16941,1105.82953 1006.55735,1106 1006.96206,1106 C1007.36676,1106 1007.7547,1105.82953 1008.03969,1105.52646 L1014.55104,1098.73876 C1014.83838,1098.43817 1015,1098.029 1015,1097.60214 C1015,1097.17529 1014.83838,1096.76611 1014.55104,1096.46552 L1014.55104,1096.46552 Z' id='Indicator-Copy' transform='translate(1007.000000, 1101.000000) scale(1, -1) translate(-1007.000000, -1101.000000) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.accordion__panel {
  max-width: 80%;
  max-height: 0;
  overflow: hidden;
  margin: 6px 0;
  transition: max-height 0.2s ease-out;
}

.card {
  background-color: var(--light);
  border-radius: 10px;
  padding: 20px;
}

.card__title {
  display: block;
  font-size: 18px;
  font-weight: bold;
  margin: 20px 0;
}

.card__subtitle {
  display: block;
  font-size: 16px;
  font-weight: bold;
}

.card__email:any-link{
  color: var(--accent);
}

/*.card__description {
  max-width: 80%;
}*/

.card__description img{
  width: 100%;
  height: auto;
}

.featured{
  border-right: 30px solid var(--accent);
}

.map{
  border-radius: 10px;
  height: 220px;
  width: 100%;
  margin-bottom: 15px;
  object-fit: cover;
}

.video__wrapper {
  height: 0;
  overflow: hidden;
  position: relative;
  padding-bottom: 56.25%; /*16:9*/
}

.video, .video__wrapper iframe {
  border-radius: 10px;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.video__wrapper + .video__wrapper{
  margin-top: 20px;
}

.feature {
  display: block;
}

.feature__wrapper {
  margin-bottom: 20px;
}

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

.feature.active {
  display: block;
}

.feature__label {
  font-weight: 700;
}

.feature__thumbnail {
  width: 100%;
  margin-bottom: 10px;
}

.feature__label + .feature {
  margin-top: 30px;
}

.select {
  border: 2px solid var(--dark);
  border-radius: 20px;
  height: 30px;
  margin-bottom: 30px;
  padding-left: 20px;
  width: 100%;
}

.select__label {
  display: block;
  margin-bottom: 10px;
}

.searchfield__wrapper {
  margin-bottom: 20px;
}

.searchfield__wrapper p {
  padding: 10px;
}

#autoComplete {
  border: 2px solid var(--dark);
  color: var(--dark);
  height: 30px;
  background-image: url('asset/search-light.svg');
  background-size: 16px;
  background-position: left 20px top 7px;
}

#autoComplete::placeholder {
  color: var(--dark);
}

/*autocomplete.js*/

.autoComplete_wrapper,
.autoComplete_wrapper > input {
  width: 100%;
}

.autoComplete_wrapper > ul > li mark {
  color: var(--accent);
}

.autoComplete_wrapper > ul > li:hover {
  background-color: rgba(60, 181, 233, 0.1);
}

.background--solid{
  background-color: #F2F2F2;
}

.call, .call:any-link{
  margin: 30px auto 0 auto;
  color: var(--light);
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  background-color: var(--color-1);
  border-radius: 50px;
  line-height: 40px;
  padding: 0 31px;
  display: table;
  text-decoration: none;
}

.application__thumbnail{
  height: 118px;
  width: 100%;
  background: linear-gradient(to bottom, var(--color-1) 0% 0%,var(--color-1) 0% 50%,var(--color-1) 0% 50%,#F2F2F2 50%,#F2F2F2); /* W3C */
}

.application__thumbnail img{
  border-radius: 100%;
  margin: auto;
  width: 118px;
  height: 118px;
  display: block;
}

.header--color{
  background-color: var(--color-1);
  margin-bottom: 0;
  padding-top: 30px;
  padding-bottom: 20px;
}

.application__title{
  color: var(--light);
  font-size: 18px;
  font-weight: 700;
}

.footer__description{
  margin-top: 68px;
}

.image-category{
  margin-right: 25px;
  width: 40px;
  height: 40pX;
}

/*.active + .accordion__panel{
  max-height: none;
}*/