@import "spacing.css";
@import "fonts.css";

:root {
  /* colors */
  --text-color: black;
  --background-color: white;
  --box-color: #C3CF2E;
  --dark-color:  black;
  --light-blue-color: #D1EAF3;
  --link-color: #0C6DCE;
  --lighter-green-color: #F3F5D5;
  --border-color: #B5B5B5;
  --orange-color: #E69069;
  --light-color: #F9F9FA;

  /* sizes */
  --title-size-primary:  50pt;
  --title-size-secondary:  30pt;
  --sub-title-size:  20pt;
  --sub-heading-size:  18pt;
  --mid-size-primary:  15pt;
  --mid-size-secondary:  16pt;
  --mid-size-ternary:  19pt;
  --small-size: 8pt;
  --top-nav-links-size: 18pt;
  --small-size-primary:  11px;
  --small-size-secondary: 13pt;
  --line-size: 1pt;
  --social-media-links-size: 25pt;
  }

/* main styles */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body, h1, h2, h3, h4, h5, h6, p, a {
  font-family: acari-sans-regular;
}

h1 {
  font-family: acari-sans-bold;
  font-size: var(--title-size-primary);
}

h2 {
  font-size: var(--sub-title-size);
  font-family: acari-sans-light;
}

h3 {
  font-family: acari-sans-bold;
  font-size: var(--sub-heading-size);
}

h4 {
  font-family: acari-sans-bold;
  font-size: var(--mid-size-primary);
}

p {
  font-size: var(--mid-size-primary);
}

html {
  height: 100%;
}

body {
  position: absolute;
  width: 100%;
  min-height: 100%;
  margin: 0;
  color: var(--text-color);
  background-color: var(--background-color);
}

footer {
  position: relative;
  background-color: var(--dark-color);
  height: 700px;
  max-width: 2000px;
  width: 100%;
  transform: translateX(-50%);
  left: 50%;
  bottom: 0;
}

footer > .layout {
  position: relative;
  display: flex;
  height: 90%;
}

.first > img {
  width: 200px;
  margin-left: -8px;
}

.section-link {
  line-height: 20pt;
}

.label {
  font-family: acari-sans-bold;
  font-size: var(--mid-size-primary);
}

.contacts-wrapper {
  flex-wrap: wrap;
}

.contacts-wrapper > .left {
  flex: 30%;
}

.contacts-wrapper > .mid {
  flex: 30%;
}

.contacts-wrapper > .right {
  flex: 30%;
}

.contacts-wrapper h3 {
  font-family: acari-sans-light;
  font-size: var(--sub-title-size);
}

#googleMap {
  display: flex;
  width: 100%;
  border: 3pt solid var(--border-color);
  height: 650px;
}

footer a {
  color: var(--light-color);
}

footer a:hover {
  color: var(--box-color);
}

.layout > * {
  color: var(--light-color);
  padding: 50px 0 0 40px;
}

.layout > .first {
  flex: 30%;
}

.fourth > .bottom {
  right: 25pt;
}

#created-by {
  position: absolute;
  right: 55px;
  bottom: 5px;
  font-size: 14px !important;
}

#created-by > a {
  text-decoration: underline;
}

.layout .bottom {
  position: absolute;
  display: flex;
  column-gap: 10pt;
  bottom: 0;
}

.layout > .second {
  flex: 23.3%;
}

.layout > .third {
  flex: 23.3%;
}

.layout > .fourth {
  flex: 23.3%;
  margin-right: 30pt;
}

footer > img {
  position: absolute;
  width: 100%;
  height: 5%;
  bottom: 0;
}

.section > a {
  font-family: acari-sans-bold;
  font-size: var(--mid-size-ternary);
}

.section {
  text-transform: uppercase;
}

a {
  text-decoration: none;
  color: var(--link-color);
}

.topnav {
  max-width: 2000px;
  position: relative;
  transform: translateX(-50%);
  left: 50%;
}

.topnav a {
  position: relative;
  color: var(--dark-color);
  font-size: var(--top-nav-links-size);
  font-family: acari-sans-bold;
  padding: 14px 30px 16px 30px;
}

.topnav > .link {
  padding-top: 25px;
}

.responsive .link {
  padding-top: 15px !important;
}

.topnav.responsive > .link {
  display: block !important;
}

.topnav {
  position: relative;
  padding:  15px 60px 15px 60px;
  overflow: hidden;
  background-color: var(--light-color);
}

.topnav .link:hover {
  color: var(--box-color);
}

.topnav .hamburger {
  display: none;
  position: absolute;
  top: 40px;
  right: 40px;
}

.about-us-points > ol {
  counter-reset: item;
  list-style-type: none;
  padding-left: 0;
}

.about-us-points li {
  display: flex;
  border-top: 1pt solid var(--border-color);
  padding: 10px 0 10px 0;
  margin-left: 0;
  align-items: center;
}

.about-us-points li:last-child {
  border-bottom: 1pt solid var(--border-color);
}

.about-us-points li:before {
  content: counter(item) "  ";
  counter-increment: item;
  font-size: var(--title-size-secondary);
  font-weight: bold;
  color: var(--box-color);
  margin-right: 20px;
  margin-left: 10px;
  font-family: cormac-black;
}

/* common */

.hamburger {
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 24px;
  height: 3px;
  background-color: var(--dark-color);
  margin: 5px 0;
  transition: 0.4s;
}

.change .bar1 {
  transform: translate(0, 4px) rotate(-45deg);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  transform: translate(0, -12px) rotate(45deg);
}

.delimiter {
  margin-top: 100px;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.bold {
  font-weight: bold;
}

.flex-h {
	display: flex;
	flex-direction: row;
}

.flex-y {
	display: flex;
	flex-direction: column;
}

.flex-y-centered {
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
}

.round {
	border-radius: 50%;
}

.geodesy-info > img {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 40px;
}

.geodesy-info > p {
  width: 70%;
  margin-top: 40px;
}

.sub-header > .left {
	flex: 75%;
}

.sub-header > .right {
	position:  absolute;
	flex: 25%;
	right: 0;
}

.welcome {
  position: relative;
  display: flex;
  margin-top: 50px;
  background-image: url("../images/landing.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: translateX(-50%);
  left: 50%;
  width: 100%;
  height: 800px;
  justify-content: center;
  align-items: center;
  color: var(--light-color);
}

.welcome > h1 {
  margin-top: -50px;
}

.welcome img {
  position: relative;
  top: 46px;
  right: 15px;
}

.help-buttons-text {
  line-height: 0;
  padding: 0;
  margin: 12px 0 0 0;
	border: none;
}

.social-media {
  font-size: var(--social-media-links-size);
}

.help-buttons-text > h4 {
  line-height: 0;
  font-size: var(--small-size-secondary);
  margin-bottom: var(--small-size-secondary);
}

.help-buttons-text > a {
  display: inline-block;
  margin-bottom: 30px;
  font-size: var(--small-size-primary);
}

.option {
	height: 100px;
}

.info-items-3 {
  display: grid;
  justify-content: flex-start;
  row-gap: 20px;
  column-gap: 20px;
  grid-template-columns: auto auto auto;
}

.us {
  padding: 100px 0 100px 0;
  position: relative;
  width: 100%;
  max-width: 2000px;
  transform: translateX(-50%);
  left: 50%;
  height: 100%;
  background-color: var(--lighter-green-color);
  align-items: flex-start;
}

.info-items-3 > a {
  color: var(--dark-color);
}

.us-items {
  column-gap: 40px;
}

.us-items > .person > * {
  width: 500px;
}

.person > .specialty {
  line-height: 0;
  font-family: acari-sans-light;
  font-size: var(--mid-size-ternary);
}

.us-wrapper {
  position: relative;
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
}

.us-header {
  flex: 50%;
}

.us-header > h2 {
  font-family: acari-sans-light;
  font-size: var(--title-size-secondary);
}

.goals {
  padding: 50px;
  align-items: center;
  background-color: var(--light-blue-color);
}

.goals-image {
  flex: 50%;
  text-align: center;
}

.goals-image > img {
  width: 550px;
  height: 550px;
}

.goals-info {
  flex: 50%;
}

.goals-info > p {
  width: 500px;
  font-family: acari-sans-regular;
  font-size: var(--mid-size-secondary);
}

.goals-info > h2 {
  font-family: acari-sans-bold;
  font-size: var(--title-size-secondary);
}

.faq {
  width: 85%;
}

.faq p {
  font-size: var(--mid-size-ternary);
}

.info-wrapper {
  position: relative;
  display: flex;
  flex-wrap: wrap;
	align-items: center;
  width: 400px;
  padding: 0 40px 0 40px;
	height: 190px;
	background-color: var(--lighter-green-color);
}

.accordion {
  position: relative;
  cursor: pointer;
  transition: 0.4s;
  width: 80%;
  height: 100%;
}

.accordion:after {
  position: absolute;
  font-family: 'Font Awesome\ 5 Free';
  content: '\f078';
  text-align: right;
  top: 50%;
  transform: translateY(-50%);
  right: -20%;
}

.active:after {
  content: "\f077";
}

.faq > .item {
  border-top: var(--line-size) solid var(--border-color);
}

.faq > .item:last-child {
  border-bottom: var(--line-size) solid var(--border-color);
}

.panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.info-wrapper > i {
  color: var(--box-color);
  font-size: var(--mid-size-primary);
}

.info-wrapper-full {
  display:  flex;
  flex-wrap: wrap;
	align-items: center;
	padding: 40px;
	height:  auto;
	min-height: 240px;
	background-color: var(--box-color);
}

.info-wrapper > i {
  position: absolute;
  right: 23px;
  top: 23px;
}

.boxes {
	justify-content: flex-start;
	flex-wrap: wrap;
	column-gap: 15px;
	grid-row-gap: 70px;
}

.services h3 {
  font-size: var(--sub-title-size);
}

.service-description {
  width: 60%;
}

.info-row-items > p {
  border-top: var(--line-size) solid var(--border-color);
  width: 80%;
  padding: 32px 0 10px 0;
  font-family: acari-sans-bold;
}

.info-row-items > p:last-child {
  border-bottom: var(--line-size) solid var(--border-color);
  padding-bottom: 32px;
}

.secondary-size {
  font-size: var(--title-size-secondary) !important;
}

.box-wrapper {
  position: relative;
  padding: 5pt;
}

.box-wrapper > * {
  width: 453px;
}

.box-wrapper img {
  height: auto;
}

.fit {
  padding-left: 110px !important;
  padding-right: 110px !important;
}

.more-info-goal {
  padding-left: 130px !important;
  padding-right: 130px !important;
}

.box-wrapper:hover {
  border-radius: 10pt;
  background-color: var(--lighter-green-color);
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}

.box-wrapper > img {
  height: 300px;
}

.more-info-wrapper img {
  padding: 60px 80px 60px 80px;
}

.see-more {
	display: inline-block;
	font-weight: bold;
	color: var(--box-color);
	font-size: var(--mid-size-primary);
	line-height: 0;
}

.wrapper {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--background-color);
  max-width: 2000px;
  width: 80%;
	height: 80%;
}

.wrapper-wider {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--background-color);
	width: 90%;
	height: 80%;
}

.help-items > .option {
  max-height: 65pt;
  align-items: center;
}

.help-items > .option:last-child {
  margin-top: -27px;
}

.help-items .icon {
  width: 45px;
}

.featured-square {
  display: grid;
  row-gap: 20pt;
  column-gap: 20pt;
  grid-template-columns: auto auto;
}

.featured-square > .entity {
  position: relative;
  flex: 50%;
  height: 550px;
}

.featured-square h1 {
  font-size: var(--title-size-secondary);
  margin-bottom: 0;
}

.featured-square a {
  color: var(--light-color);
}

.featured-square p {
  font-family: acari-sans-regular;
  font-size: var(--sub-heading-size);
  margin-top: 10pt;
}

.featured-square .left-bottom-text {
  position: absolute;
  left: 60px;
  bottom: 30px;
}

.light-text {
  color: var(--light-color);
}

.featured-square .dark {
  color: var(--dark-color);
}

.featured-square > .entity:first-child {
  background-image: url('../images/goals/half.png');
  background-repeat: no-repeat;
  background-color: var(--light-blue-color);
  background-size: 60%;
  background-position: top left;
}

.featured-square > .entity:nth-child(2) {
  background-image: url('../images/questions/m.png');
  background-repeat: no-repeat;
  background-color: var(--box-color);
  background-position: top right;
  background-size: 60%;
}

.featured-square > .entity:nth-child(3) {
  background-image: url('../images/schedules/m.png');
  background-repeat: no-repeat;
  background-color: var(--orange-color);
  background-position: top right;
  background-size: 65%;
}

.featured-square > .entity:nth-child(4) {
  background-image: url('../images/pricing/m.png');
  background-repeat: no-repeat;
  background-color: 0A7FCB;
  background-position: top right;
  background-size: 55%;
}

/* Media screens */

@media only screen and (max-width: 600px) {
  .box-wrapper > * {
    width: 100%;
  }

  .welcome img {
    right: 0;
    width: 100px;
  }

  .featured-square .left-bottom-text {
    padding-right: 20px;
  }

  .about-us-points li:before {
    font-size: var(--title-size-primary);
  }

  .box-wrapper img {
    height: auto;
  }

  .info-items-3 {
    grid-template-columns: auto;
  }

  .topnav.responsive {position: relative;}

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

  .topnav a:not(:first-child) {display: none;}
  .topnav .hamburger {
    float: right;
    display: block;
  }

  .left-bottom-text {
    left: 30px !important;
  }

  .service-description {
    width: 90%;
  }

  .faq {
    width: 100%;
  }

  .us-items > .person > * {
    width: 100%;
  }

  .person > img {
    height: auto;
  }

  .us-items > .person:last-child {
    margin-top: 40px;
  }

  .us-items {
    flex-direction: column;
  }

  .goals {
    flex-direction: column;
  }

  .goals-image {
    text-align: center;
  }

  .goals-image > img {
    width: 200px;
    height: 200px;
  }

  :root {
    --title-size-primary:  35pt;
    --title-size-secondary:  20pt;
    --sub-title-size:  17pt;
    --sub-heading-size:  16pt;
    --mid-size-primary:  14pt;
    --mid-size-secondary:  15pt;
    --mid-size-ternary:  16pt;
    --top-nav-links-size: 17pt;
    --small-size: 6pt;
    --small-size-primary:  9px;
    --small-size-secondary: 11pt;
    --line-size: 1pt;
    --social-media-links-size: 24pt;
  }

  .about-us-points li:before {
    font-size: var(--title-size-primary);
  }

  .goals-info > h2 {
    font-size: var(--sub-heading-size);
  }

  .goals-info {
    text-align: center;
  }

  .goals-info > p {
    width: 96%;
  }

  .welcome {
    height: 300px;
  }

  .featured-square {
    grid-template-columns: auto;
  }

  .featured-square > .entity {
    height: 300px;
  }

  .welcome-text {
    display: none;
  }

  #googleMap {
    width: 100%;
  }

  .help-items {
    display: none;
  }

  #created-by {
    display: none;
  }

  .info-wrapper {
    width: 100%;
    height: 190px;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width: 767px) {
  .box-wrapper > * {
    min-width: 100%;
    max-width: 100%;
  }

  .welcome img {
    right: 0;
    width: 120px;
  }

  .about-us-points li:before {
    font-size: var(--title-size-primary);
  }

  .topnav.responsive {position: relative;}
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

  .topnav a:not(:first-child) {display: none;}

  .topnav .hamburger {
    float: right;
    display: block;
  }

  .welcome-text {
    display: none;
  }

  .welcome {
    height: 400px;
  }

  :root {
    --title-size-primary:  45pt;
    --title-size-secondary:  25pt;
    --sub-title-size:  18pt;
    --sub-heading-size:  16pt;
    --mid-size-primary:  14pt;
    --mid-size-secondary:  15pt;
    --mid-size-ternary:  17pt;
    --small-size: 7pt;
    --top-nav-links-size: 17pt;
    --small-size-primary:  10px;
    --small-size-secondary: 12pt;
    --line-size: 1pt;
    --social-media-links-size: 22pt;
  }

  .featured-square {
    grid-template-columns: auto;
  }

  .featured-square > .entity {
    height: 400px;
  }

  .info-items-3 {
    grid-template-columns: auto;
  }

  .faq {
    width: 100%;
  }

  .info-wrapper {
    width: 100%;
    height: 250px;
  }

  .help-items {
    display: none;
  }

  .goals {
    flex-direction: column;
  }

  .goals-image {
    text-align: center;
  }

  .goals-image > img {
    width: 300px;
    height: 300px;
  }

  .goals-info {
    text-align: center;
  }

  .goals-info > p {
    width: 96%;
  }

  #googleMap {
    width: 100%;
  }

  .us-items > .person > * {
    width: 90%;
    height: auto;
  }

  .us-items > .person:last-child {
    margin-top: 40px;
  }

  .us-items {
    height: auto;
    flex-direction: column;
  }

  #created-by {
    display: none;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .info-items-3 {
    column-gap: 0;
    grid-template-columns: auto auto;
  }

  .welcome {
    height: 500px;
  }

  .welcome img {
    top: 49px;
  }

  .about-us-points li:before {
    font-size: var(--title-size-primary);
  }

  .topnav.responsive {position: relative;}

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

  .topnav a:nth-child(5) {display: none;}
  .topnav a:nth-child(4) {display: none;}
  .topnav a:nth-child(3) {display: none;}

  .topnav .hamburger {
    float: right;
    display: block;
  }

  .featured-square {
    grid-template-columns: auto;
  }

  .featured-square > .entity {
    height: 450px;
  }

  .faq {
    width: 100%;
  }

  .help-items {
    display: none;
  }

  .info-wrapper {
    width: 90%;
    height: 250px;
  }

  .box-wrapper > * {
    min-width: 100%;
    max-width: 100%;
  }

  #googleMap {
    width: 100%;
  }

  .goals {
    flex-direction: column;
  }

  .goals-image {
    text-align: center;
  }

  .goals-image > img {
    width: 320px;
    height: 320px;
  }

  .goals-info {
    text-align: center;
  }

  .goals-info > p {
    width: 96%;
  }

  .us-items > .person > * {
    width: 500px;
  }

  .us-items > .person:last-child {
    margin-top: 40px;
  }

  .us-items {
    flex-direction: column;
  }

  .topnav > .link {
    padding-top: 26px;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .info-items-3 {
    grid-template-columns: auto auto;
  }

  .welcome img {
    top: 48px;
  }

  .topnav.responsive {position: relative;}

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

  .topnav a:nth-child(5) {display: none;}
  .topnav a:nth-child(4) {display: none;}

  .topnav .hamburger {
    float: right;
    display: block;
  }

  .featured-square {
    grid-template-columns: auto;
  }

  .help-items {
    display: none;
  }

  .goals-info {
    text-align: center;
  }

  #googleMap {
    width: 100%;
  }

  .goals {
    flex-direction: column;
  }

  .goals-image > img {
    width: 350px;
    height: 350px;
  }

  .goals-info > p {
    width: 96%;
  }

  .us-items > .person > * {
    width: 500px;
  }

  .us-items {
    flex-direction: column;
    row-gap: 30px;
  }

  .box-wrapper > * {
    min-width: 100%;
    max-width: 100%;
  }

  .welcome {
    height: 600px;
  }

  .topnav > .link {
    padding-top: 26px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .welcome {
    height: 700px;
  }

  .goals-image > img {
    width: 360px;
    height: 360px;
  }

  .goals-info > p {
    width: 400px;
  }

  .info-items-3 {
    grid-template-columns: auto auto;
  }

  .topnav > .link {
    padding-top: 26px;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1699px) {
  .goals-image > img {
    width: 350px;
    height: 350px;
  }

  .goals-info > p {
    width: 500px;
  }

  .info-items-3 {
    grid-template-columns: auto auto;
  }
}

/* Footer media queries */
@media only screen and (min-width: 794px) and (max-width: 1138px) {
  footer > .layout {
    flex-wrap: wrap;
    height: 93%;
  }

  footer {
    height: 850px
  }

  footer > img {
    height: 5%;
  }

  .layout > .second {
    margin-top: -150px;
  }

  .layout > .third {
    margin-top: -150px;
  }

  .layout > .fourth {
    margin-top: -150px;
  }

  .layout > .first {
    flex: 100%;
  }
}

@media only screen and (min-width: 536px) and (max-width: 593px) {
  footer > .layout {
    flex-wrap: wrap;
  }

  footer {
    height: 1200px
  }

  .layout > .second {
    margin-top: -150px;
  }

  .layout > .third {
    margin-top: -150px;
  }

  .layout > .fourth {
    margin-top: -150px;
  }

  .layout > .first {
    flex: 100%;
  }

  footer > img {
    height: 3%;
  }

  footer > .layout {
    height: 95%;
  }
}

@media only screen and (min-width: 593px) and (max-width: 794px) {
  footer > .layout {
    flex-wrap: wrap;
  }

  footer {
    height: 850px
  }

  .layout > .second {
    margin-top: -150px;
  }

  .layout > .third {
    margin-top: -150px;
  }

  .layout > .fourth {
    margin-top: -150px;
  }

  .layout > .first {
    flex: 100%;
  }

  footer > img {
    height: 5%;
  }

  footer > .layout {
    height: 95%;
  }
}

@media only screen and (max-width: 535px) {
  footer > .layout {
    flex-wrap: wrap;
  }

  .topnav .logo {
    width: 190px;
    margin-top: 7px;
  }

  .fit {
    padding-left: 100px !important;
    padding-right: 100px !important;
  }

  .topnav .hamburger {
    right: 30px;
  }

  .layout > .first > img {
    width: 80%;
  }

  .layout {
    padding-right: 10px;
  }

  .layout .bottom {
    flex-direction: column;
    line-height: 0;
    bottom: -20px;
  }

  .topnav {
    padding-left: 10px;
  }

  footer {
    height: 1200px;
  }

  .layout > .second {
    margin-top: -150px;
  }

  .layout > .third {
    margin-top: -150px;
    padding-right: 20px;
  }

  .layout > .fourth {
    margin-top: -150px;
  }

  .layout > .first {
    flex: 100%;
  }

  footer > img {
    height: 3%;
  }

  footer > .layout {
    height: 93%;
  }
}