:root {
  --main-background-color: #f0f0f0;
  --main-font-color: #000;

/*  --header-background-color: #fff; */
  --header-background-color: #343a40;

  
  --footer-background-color: var(--main-background-color);
  --footer-font-color: rgba(0, 0, 0, 0.5);
  --footer-link-color-hover: #8D8741;
}

body {
  padding-top: 56px;
  background: var(--main-background-color);
  color: var(--main-font-color);
}

.navbar {
	background: var(--header-background-color);
}

@media (min-width: 1200px) {
    .container{
        max-width: 860px;
    }
}

h1 {
  /* Extra small devices (phones, less than 768px) */
  font-size: 24px;
  font-weight: bold;

  /* Small devices (tablets, 768px and up) */
  @media (min-width: 768px) {
    font-size: 12px;
  }

  /* Medium devices (desktops, 992px and up) */
  @media (min-width: 992px) {
    font-size: 16px;
  }

  /* Large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {
    font-size: 18px;
  }
}

footer {
	font-size: small;
	background: var(--footer-background-color);
	color: var(--footer-font-color);
    padding-bottom: max(4px, env(safe-area-inset-bottom));
}

footer a, footer a:visited {
	color: var(--footer-font-color);
	text-decoration: underline;
}

footer a:hover {
	color: var(--footer-link-color-hover);
	text-decoration: underline;
}

.index-header {
    font-family: futura-pt, sans-serif;
	font-weight: 300;
	margin: auto;
	width: 330px;

	font-size: 25px;
}

.index-subheader {
    font-family: futura-pt, sans-serif;
	font-weight: 200;
	margin: auto;
	width: 330px;

	font-size: 20px;
	color: rgba(0,0,0,0.60);
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.index-header {
		font-size: 30px;
		width: 550px;
	}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}

.index-header .platformName {
	color: gray;
}

.app-feature-col div.card {
	border: 0px;
	padding-top: 25px;
	background: #f0f0f0;
}

.app-feature-col h4.card-title {
	padding-left: 15px;
	padding-right: 15px;

	font-weight: bold;
	font-size: 1.17em;
	text-align: left;
}

.app-feature-col p.card-text {
	padding-left: 15px;
	padding-right: 15px;
	font-family: "Helvetica Neue", Helvetica, arial, sans-serif;
	font-weight: 300;
	font-size: 16px;
	text-align: left;
}

.form-control.form-control-only {
	border-radius: .25rem !important;
}

.form-control.form-control-middle {
	border-radius: 0;
	border-bottom: 0;
}

.form-control.form-control-last {
	border-radius: 0;
	border-bottom-right-radius: .25rem !important;
	border-bottom-left-radius: .25rem !important;
}